:root {
  --gold: #ffefcf;
  --gold-dim: #ef3047;
  --ink: #09090b;
  --ink2: #15151a;
  --parch: #fff8e8;
  --parch-line: #111115;
  --bad: #d41434;
  --good: #f5eee0;
}

body {
  background:
    radial-gradient(circle at 78% 15%, rgba(236, 25, 55, .42), transparent 26%),
    linear-gradient(128deg, #07070a 0 57%, #bb102c 57% 69%, #08080b 69%);
  color: #fff8e8;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(#fff 1px, transparent 1.2px);
  background-size: 9px 9px;
  mask-image: linear-gradient(125deg, transparent 15%, #000 45%, transparent 86%);
}

#app {
  max-width: 560px;
  isolation: isolate;
}

#topbar {
  justify-content: flex-start;
  padding-left: 74px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  transform: skew(-7deg);
}

#topbar span {
  background: #111116;
  border: 2px solid #fff4df;
  box-shadow: 6px 6px 0 #d41434;
  padding: 6px 14px;
}

#meters {
  gap: 8px;
  padding-top: 14px;
}

.meter {
  width: 64px;
  background: #111116;
  border: 2px solid #fff4df;
  padding: 5px 4px 7px;
  transform: skew(-5deg);
  box-shadow: 4px 4px 0 #d41434;
}

.meter:nth-child(even) { transform: skew(5deg); }
.meter .ico { font-size: 22px; }
.meter .ico svg { width: 23px; height: 23px; }
.meter .bar { height: 7px; width: 90%; border-radius: 0; background: #36363e; }
.meter .fill { background: linear-gradient(90deg, #ef3047, #ff6b6b); }
.meter .lbl { color: #fff4df; font-size: 11px; font-weight: 900; }

#stage {
  gap: 10px;
  padding: 8px 18px 8px;
}

#msgBox {
  max-width: 370px;
  background: #fff8e8;
  color: #111115;
  border: 4px solid #111115;
  box-shadow: 9px 9px 0 #d41434;
  padding: 13px 20px;
  transform: rotate(-1deg);
  clip-path: polygon(0 9px, 18px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 22px) 100%, 0 100%);
  background-image: none;
}

#msgSay {
  color: #111115;
  font-weight: 800;
  line-height: 1.58;
}

#card {
  max-width: 370px;
  background: #0b0b0e;
  border: 4px solid #fff8e8;
  outline: 0;
  box-shadow: 12px 12px 0 #d41434, -5px -5px 0 #111;
  clip-path: polygon(0 17px, 22px 0, calc(100% - 17px) 0, 100% 20px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

#card .portrait {
  background:
    linear-gradient(145deg, rgba(212, 20, 52, .18), transparent 50%),
    #f6eddc;
  filter: contrast(1.05) saturate(.88);
}

#card .portrait .pimg {
  object-position: top center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
#card .portrait .pimg[src$="/betty.webp"] {
  transform: scale(2.05) translate(-8%, 3%);
  transform-origin: 66% 48%;
}
#card .who {
  color: #fff8e8;
  background: #d41434;
  margin: 0 -4px;
  padding: 9px 12px 8px;
  font-weight: 1000;
  letter-spacing: 2px;
  transform: skew(-4deg);
}

.hint { color: #fff8e8; font-weight: 800; padding-top: 7px; }

#choices {
  max-width: 370px;
  gap: 10px;
  padding-bottom: 14px;
}

#choices button {
  border-radius: 0;
  border: 3px solid #111115;
  font-weight: 950;
  box-shadow: 6px 6px 0 rgba(0,0,0,.72);
  clip-path: polygon(0 8px, 12px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 12px) 100%, 0 100%);
}

#choices #btnL { background: #d41434; color: #fff; transform: rotate(.6deg); }
#choices #btnR { background: #fff8e8; color: #111115; transform: rotate(-.6deg); }
.choice-tag { border: 3px solid #111; border-radius: 0; font-weight: 950; }
#tagL { background: #d41434; }
#tagR { background: #fff8e8; color: #111; }

.overlay {
  background:
    radial-gradient(circle at 72% 18%, rgba(225, 20, 52, .42), transparent 24%),
    linear-gradient(135deg, #09090c 0 64%, #9e0e28 64% 74%, #08080b 74%);
  backdrop-filter: none;
}

.overlay h1,
.overlay h2 {
  color: #fff8e8;
  text-shadow: 5px 5px 0 #d41434;
  font-weight: 1000;
  transform: skew(-5deg);
}

.overlay > button,
#dungeonScreen .dg-actions button {
  border-radius: 0;
  border: 3px solid #111115;
  background: #fff8e8;
  color: #111115;
  box-shadow: 7px 7px 0 #d41434;
  font-weight: 950;
}

#startScreen .big-emoji .eimg {
  width: min(390px, 90vw);
  height: auto;
  max-height: 58vh;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 4px solid #fff8e8;
  box-shadow: 14px 14px 0 #d41434;
  clip-path: polygon(0 18px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 22px) 100%, 0 100%);
}

#startScreen {
  justify-content: center;
  overflow: hidden;
  padding: 18px 18px 28px;
}

#startScreen .big-emoji { margin: 0 0 12px; }
#startScreen h1 { margin: 0 0 8px; font-size: clamp(28px, 8vw, 38px); }
#startScreen .start-lore { color: #eee5d6; font-size: 14px; font-weight: 700; line-height: 1.7; margin: 0; }
#startScreen > button { margin-top: 18px; }

body:has(#startScreen.show) #topLeft,
body:has(#startScreen.show) #topRight {
  display: none;
}

#popupScreen .eimg[src*="knight_betty.webp"] {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* 戰鬥劇情過場：盡量吃滿手機橫向空間，並依圖片原始比例完整呈現。 */
#popupScreen.story-art {
  padding: max(20px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
}
#popupScreen.story-art .big-emoji {
  width: 100%;
  margin-bottom: 10px;
}
#popupScreen.story-art .big-emoji .eimg {
  width: min(480px, 94vw);
  height: auto;
  max-height: 48dvh;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
#popupScreen.story-art h2 { margin-bottom: 8px; }
#popupScreen.story-art p { max-width: 450px; margin-bottom: 4px; }
#popupScreen.story-art > button { margin-top: 14px; }

#dungeonScreen,
#battleScreen {
  background:
    radial-gradient(circle at 50% 24%, rgba(77, 112, 145, .34), transparent 30%),
    linear-gradient(145deg, #090b10 0 68%, #a90e29 68% 76%, #07080c 76%);
}

/* 副本連續劇情採固定分區：進度／狀態／圖片+文字／按鈕。
   文案長短只改變文字區的捲動，不再把圖片整組往上或往下推。 */
#dungeonScreen.show {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: stretch;
  padding: max(20px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}
#dungeonScreen .dg-head,
#dungeonScreen .dg-hp { flex: none; }
#dungeonScreen .dg-scene {
  display: grid;
  grid-template-rows: clamp(190px, 29dvh, 248px) minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  width: 100%;
  max-width: 390px;
}
#dungeonScreen .dg-emoji {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 76px;
}
#dungeonScreen .dg-emoji .dimg {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
#dungeonScreen .dg-text {
  min-height: 0;
  width: 100%;
  padding: 14px 6px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#dungeonScreen .dg-actions {
  align-self: end;
  width: 100%;
  margin: 12px auto 0;
  padding-bottom: 0;
}

@media (max-height: 720px) {
  #dungeonScreen.show { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #dungeonScreen .dg-hp { margin: 7px 0; }
  #dungeonScreen .dg-scene { grid-template-rows: 168px minmax(0, 1fr); }
  #dungeonScreen .dg-text { padding-top: 9px; font-size: 14px; line-height: 1.65; }
  #dungeonScreen .dg-actions { gap: 7px; margin-top: 8px; }
  #dungeonScreen .dg-actions button { padding-top: 13px; padding-bottom: 13px; }
}

.dg-head,
.b-name { color: #fff8e8; font-weight: 1000; text-shadow: 3px 3px 0 #d41434; }
.dg-text,
.battle-log { color: #fff8e8; }
.dg-emoji .dimg,
.b-emoji .bimg,
.big-emoji .eimg {
  border-radius: 0;
  border: 4px solid #fff8e8;
  box-shadow: 8px 8px 0 #d41434;
}

.sound-fab,
.topbtn {
  border: 2px solid #fff8e8;
  border-radius: 0;
  background: #111116;
  color: #fff8e8;
  box-shadow: 4px 4px 0 #d41434;
}

@media (max-height: 720px) {
  #meters { padding-top: 6px; }
  .meter { padding-top: 2px; padding-bottom: 3px; }
  #stage { padding-top: 2px; }
  #msgBox { padding-top: 9px; padding-bottom: 9px; }
}