* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0908;
  font-family: 'Noto Serif SC', serif;
  color: #e8dcc0;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
}

#app.shake {
  animation: shake 0.45s;
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-9px, 5px); }
  40% { transform: translate(8px, -6px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(5px, 4px); }
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 2;
}

#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(200, 20, 10, 0.45) 0%, rgba(120, 5, 0, 0.75) 100%);
  opacity: 0;
  z-index: 30;
}

#flash.go {
  animation: flashgo 0.7s ease-out;
}

@keyframes flashgo {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#topbar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  pointer-events: auto;
}

#round-label {
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 8px 18px;
  background: rgba(12, 9, 6, 0.78);
  border: 1px solid #6b5426;
  border-radius: 8px;
  color: #ffd98c;
}

#devil-status {
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(12, 9, 6, 0.78);
  border: 1px solid #444;
  transition: all 0.4s;
}

#devil-status.devil-sleep { color: #8f8a7c; border-color: #444; }
#devil-status.devil-chase { color: #ff9a6a; border-color: #8a4020; }
#devil-status.devil-rage {
  color: #ff5540;
  border-color: #c02010;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  50% { box-shadow: 0 0 14px rgba(255, 40, 20, 0.55); }
}

#topbar-btns button {
  pointer-events: auto;
  background: rgba(12, 9, 6, 0.78);
  color: #e8dcc0;
  border: 1px solid #6b5426;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

#topbar-btns button:hover { background: rgba(60, 45, 20, 0.9); }

/* 玩家卡片 */
#cards {
  position: absolute;
  top: 76px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-card {
  width: 178px;
  padding: 10px 14px;
  background: rgba(12, 9, 6, 0.78);
  border: 1px solid #4a3d24;
  border-radius: 10px;
  transition: all 0.3s;
}

.player-card.active {
  border-color: #ffd070;
  box-shadow: 0 0 16px rgba(255, 200, 90, 0.35);
  transform: translateX(6px);
}

.player-card.dead { opacity: 0.45; filter: grayscale(0.8); }
.player-card.escaped { border-color: #7ec87e; }

.card-name {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-name em {
  font-style: normal;
  font-size: 11px;
  color: #a89878;
  border: 1px solid #6b5a3a;
  border-radius: 4px;
  padding: 0 5px;
  margin-left: auto;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-nathan { background: #e8a33d; box-shadow: 0 0 6px #e8a33d; }
.dot-samuel { background: #37b8af; box-shadow: 0 0 6px #37b8af; }

.card-pos {
  font-size: 13px;
  color: #c8b890;
  margin-top: 5px;
}

.card-status {
  font-size: 13px;
  color: #e8dcc0;
  margin-top: 2px;
}

/* 日志 */
#log {
  position: absolute;
  right: 16px;
  top: 76px;
  width: 300px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  mask-image: linear-gradient(to bottom, transparent, #000 24px);
}

#log::-webkit-scrollbar { width: 4px; }
#log::-webkit-scrollbar-thumb { background: #554428; border-radius: 2px; }

.log-entry {
  font-size: 13px;
  line-height: 1.5;
  background: rgba(12, 9, 6, 0.72);
  border-left: 3px solid #6b5426;
  padding: 7px 10px;
  border-radius: 0 8px 8px 0;
  animation: login 0.35s ease-out;
}

@keyframes login {
  from { opacity: 0; transform: translateX(16px); }
}

.log-icon { margin-right: 6px; }

/* 掷骰栏 */
#roll-bar {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

#turn-hint {
  font-size: 15px;
  color: #ffd98c;
  text-shadow: 0 2px 6px #000;
  min-height: 22px;
}

#btn-roll {
  font-family: 'Noto Serif SC', serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #2b1f0c;
  background: linear-gradient(160deg, #ffd98c, #c8973a);
  border: 2px solid #8a6420;
  border-radius: 999px;
  padding: 14px 46px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  transition: all 0.2s;
}

#btn-roll:disabled {
  filter: grayscale(0.85) brightness(0.6);
  cursor: not-allowed;
}

#btn-roll.glow { animation: btnglow 1.4s infinite; }

@keyframes btnglow {
  50% { box-shadow: 0 0 26px rgba(255, 200, 90, 0.75); }
}

#btn-roll:not(:disabled):hover { transform: scale(1.05); }
#btn-roll:not(:disabled):active { transform: scale(0.96); }

#dice-result {
  font-size: 40px;
  letter-spacing: 8px;
  color: #f5e6c4;
  text-shadow: 0 2px 8px #000;
  min-height: 48px;
}

/* 命运弹窗 */
#popup {
  position: fixed;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  text-align: center;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
}

#popup.show {
  animation: pop 1.7s ease-out forwards;
}

@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

#popup-icon { font-size: 64px; filter: drop-shadow(0 4px 12px #000); }
#popup-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 3px 10px #000;
}
#popup-sub { font-size: 17px; color: #e8dcc0; text-shadow: 0 2px 6px #000; }

/* 大号骰子展示 */
#big-dice {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  background: rgba(10, 7, 4, 0.82);
  border: 1px solid #6b5426;
  border-radius: 18px;
  padding: 22px 34px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.7);
}

#big-dice.devil { border-color: #a02818; box-shadow: 0 0 40px rgba(200, 30, 10, 0.35); }
#big-dice.devil #bd-effect { color: #ff7a5a; }

#big-dice.show {
  animation: bdpop 1.7s ease-out forwards;
}

@keyframes bdpop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-3deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
  20% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}

.bd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.bd-die {
  width: 84px;
  height: 84px;
  background: linear-gradient(150deg, #f5ecd8, #d8c9a8);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 12px;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.bd-die .pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  place-self: center;
}

.bd-die .pip.on {
  background: #2b2620;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.bd-plus,
.bd-eq {
  font-size: 34px;
  font-weight: 900;
  color: #c8b890;
}

#bd-total {
  font-family: 'Cinzel', serif;
  font-size: 52px;
  font-weight: 900;
  color: #ffd98c;
  min-width: 70px;
  text-shadow: 0 0 20px rgba(255, 190, 80, 0.5);
}

#bd-effect {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e8dcc0;
}

/* 覆盖层 */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 3, 2, 0.82);
  backdrop-filter: blur(4px);
  transition: opacity 0.5s;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.panel {
  width: min(620px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(170deg, #1c150c, #100b06);
  border: 1px solid #6b5426;
  border-radius: 16px;
  padding: 38px 44px;
  text-align: center;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(120, 80, 20, 0.08);
}

.panel h1 {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 10px;
  color: #ffd98c;
  text-shadow: 0 0 30px rgba(255, 180, 60, 0.4);
}

.subtitle {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 6px;
  color: #8a7450;
  margin: 6px 0 22px;
}

.story {
  font-size: 14.5px;
  line-height: 1.9;
  color: #cbbb96;
  text-align: left;
  margin-bottom: 14px;
}

.story em { color: #ff9a70; font-style: normal; }

.rules {
  text-align: left;
  font-size: 13.5px;
  line-height: 2;
  color: #b8a880;
  border-top: 1px dashed #554428;
  border-bottom: 1px dashed #554428;
  padding: 12px 4px;
  margin: 18px 0 26px;
}

.rules b { color: #ffd98c; }

.panel button {
  font-family: 'Noto Serif SC', serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #2b1f0c;
  background: linear-gradient(160deg, #ffd98c, #c8973a);
  border: 2px solid #8a6420;
  border-radius: 999px;
  padding: 13px 52px;
  cursor: pointer;
  transition: transform 0.2s;
}

.panel button:hover { transform: scale(1.05); }

#end-title { margin-bottom: 18px; }
#end-detail { margin-bottom: 26px; }

@media (max-width: 900px) {
  #log { display: none; }

  #topbar {
    top: 8px;
    left: 8px;
    right: 96px;
    transform: none;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  #topbar-btns {
    position: fixed;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    pointer-events: auto;
  }

  #round-label {
    font-size: 14px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  #devil-status {
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
  }

  #topbar-btns button {
    padding: 5px 7px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* 两张卡片横排、缩小 */
  #cards {
    top: 60px;
    left: 8px;
    flex-direction: row;
    gap: 6px;
  }

  .player-card {
    width: 128px;
    padding: 7px 9px;
  }

  .card-name { font-size: 13px; }
  .card-pos, .card-status { font-size: 11px; }

  /* 掷骰区上移并加大触控 */
  #roll-bar { bottom: 16px; }
  #turn-hint { font-size: 13px; }

  #btn-roll {
    font-size: 18px;
    padding: 14px 40px;
    letter-spacing: 3px;
  }

  #dice-result {
    font-size: 30px;
    min-height: 36px;
  }

  /* 大号骰子展示缩小 */
  #big-dice { padding: 14px 18px; }
  .bd-die { width: 60px; height: 60px; padding: 9px; }
  .bd-die .pip { width: 12px; height: 12px; }
  .bd-plus, .bd-eq { font-size: 24px; }
  #bd-total { font-size: 38px; min-width: 52px; }
  #bd-effect { font-size: 15px; }

  /* 命运弹窗缩小 */
  #popup-icon { font-size: 44px; }
  #popup-title { font-size: 24px; }
  #popup-sub { font-size: 14px; }

  /* 开场/终局面板 */
  .panel {
    padding: 24px 20px;
    width: 94vw;
  }

  .panel h1 {
    font-size: 30px;
    letter-spacing: 6px;
  }

  .story { font-size: 13px; line-height: 1.8; }
  .rules { font-size: 12px; line-height: 1.9; }

  .panel button {
    font-size: 16px;
    padding: 12px 40px;
  }
}

/* 横屏矮高度：卡片与顶部再压缩 */
@media (max-height: 500px) {
  #cards { top: 52px; }
  .player-card { padding: 5px 8px; }
  #roll-bar { bottom: 8px; }
  #dice-result { font-size: 24px; min-height: 28px; }
}