:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --bg: #09090b;
  --panel: rgba(15, 14, 17, 0.78);
  --text: #f5efe5;
  --muted: #a9a09a;
  --gold: #e6ba76;
  --ember: #d77a52;
  --danger: #8f4553;
  --line: rgba(255,255,255,0.11);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #050506; color: var(--text); }
body { min-height: 100vh; display: grid; place-items: center; overflow-x: hidden; }
button, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-shell { width: min(100vw, 1280px); padding: 16px; }
.game-frame {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(circle at 50% 42%, #231921 0%, #0d0c10 46%, #050506 100%);
  box-shadow: 0 30px 100px rgba(0,0,0,0.52);
  --ambient-video-opacity: .72;
  --ambient-video-filter: brightness(.72) saturate(.84) contrast(1.05);
  --ambient-tint: rgba(0,0,0,0);
}

.ambient-background-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--ambient-video-opacity);
  filter: var(--ambient-video-filter);
  pointer-events: none;
  user-select: none;
  transform: scale(1.002);
  transition: opacity 1.1s ease, filter 1.1s ease;
}

#bossCanvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: .72; }
.game-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ambient-tint), var(--ambient-tint)),
    radial-gradient(ellipse at 50% 48%, rgba(5,5,7,.60) 0%, rgba(5,5,7,.50) 30%, rgba(5,5,7,.28) 52%, rgba(5,5,7,.08) 74%, rgba(5,5,7,.16) 100%),
    linear-gradient(180deg, rgba(3,3,4,.38) 0%, rgba(3,3,4,.08) 20%, rgba(3,3,4,.06) 70%, rgba(3,3,4,.42) 100%);
  z-index: 2;
}
.game-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 100% 4px; mix-blend-mode: soft-light;
}

.game-frame.boss-fallen-light {
  --ambient-video-opacity: .74;
  --ambient-video-filter: brightness(.75) saturate(.94) contrast(1.05) sepia(.06);
  --ambient-tint: rgba(235,215,174,.025);
}
.game-frame.boss-machine-idol {
  --ambient-video-opacity: .67;
  --ambient-video-filter: brightness(.68) saturate(.62) contrast(.98) hue-rotate(8deg);
  --ambient-tint: rgba(118,142,154,.035);
}
.game-frame.boss-crowned-serpent {
  --ambient-video-opacity: .73;
  --ambient-video-filter: brightness(.72) saturate(.92) contrast(1.07) sepia(.10);
  --ambient-tint: rgba(126,54,38,.045);
}

.topbar { position: absolute; inset: 22px 28px auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.brand { letter-spacing: .18em; font-weight: 800; font-size: .83rem; }
.brand span { color: var(--gold); }
.chapter { display: flex; gap: 9px; align-items: baseline; color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.chapter #phaseRoman { color: var(--gold); font-size: 1rem; font-family: Georgia, serif; }
.ghost-button { border: 1px solid var(--line); background: rgba(0,0,0,.22); padding: 8px 10px; font-size: .68rem; letter-spacing: .09em; cursor: pointer; }
.privacy-button { color: #b8b0aa; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.privacy-button-floating {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 90;
}
.topbar-actions { margin-right: 78px; }

.boss-stage { position: absolute; inset: 72px 28px 190px; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.boss-title-wrap { position: absolute; top: 0; left: 0; }

/* Core belief board — the readable board. The three claims the boss defends are
   shown verbatim; cracking one visibly breaks the sentence instead of only
   nudging a hidden fracture counter. */
/* Anchored under the Second Flame HUD on the right. The left column at this
   height is already occupied by `.battle-log` (left: 28px; top: 142px). */
.belief-board { position: absolute; z-index: 8; top: 96px; right: 0; width: min(304px, 30%); padding: 10px 12px; border: 1px solid rgba(255,255,255,.10); border-left: 2px solid rgba(230,186,118,.28); background: rgba(8,8,10,.72); pointer-events: auto; transition: border-color .45s ease, background .45s ease; }
.belief-board[hidden] { display: none; }
.belief-board-label { margin: 0 0 8px; font-size: .56rem; letter-spacing: .14em; color: #b3a894; }
.belief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.belief-item { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; transition: opacity .5s ease; }
.belief-item[hidden] { display: none; }
.belief-mark { margin-top: .38em; width: 6px; height: 6px; border: 1px solid rgba(230,186,118,.55); background: rgba(230,186,118,.16); transform: rotate(45deg); transition: background .45s ease, border-color .45s ease, transform .45s ease; }
.belief-claim { display: inline-block; font-size: .68rem; line-height: 1.5; color: #cfc7c2; transition: color .5s ease, opacity .5s ease, text-decoration-color .5s ease; }
.belief-item[data-broken="true"] { opacity: .58; }
.belief-item[data-broken="true"] .belief-mark { background: transparent; border-color: rgba(255,255,255,.16); transform: rotate(45deg) scale(.72); }
.belief-item[data-broken="true"] .belief-claim { color: #6f6a68; text-decoration: line-through; text-decoration-color: rgba(226,132,79,.62); text-decoration-thickness: 1px; }
.belief-item.just-broken .belief-claim { animation: beliefBreak .9s ease-out both; }
.belief-item.just-broken .belief-mark { animation: beliefMarkBreak .9s ease-out both; }
.belief-board-status { margin: 9px 0 0; font-size: .55rem; letter-spacing: .08em; color: #948d8a; }
.belief-board[data-broken="1"] .belief-board-status,
.belief-board[data-broken="2"] .belief-board-status,
.belief-board[data-broken="3"] .belief-board-status { color: #dba470; }
.belief-board[data-broken="1"] { border-left-color: rgba(226,132,79,.5); }
.belief-board[data-broken="2"] { border-left-color: rgba(232,140,80,.75); background: rgba(20,11,10,.55); }
.belief-board[data-broken="3"] { border-left-color: rgba(240,168,91,.92); background: rgba(30,14,12,.62); box-shadow: 0 0 28px rgba(215,122,82,.12); }

@keyframes beliefBreak {
  0% { color: #f4d8a6; transform: translateX(0); text-shadow: 0 0 12px rgba(240,168,91,.6); }
  18% { transform: translateX(-3px) skewX(-4deg); }
  36% { transform: translateX(3px) skewX(3deg); }
  54% { transform: translateX(-2px); }
  100% { color: #6f6a68; transform: translateX(0); text-shadow: none; }
}
@keyframes beliefMarkBreak {
  0% { background: rgba(244,207,130,.9); border-color: rgba(244,207,130,.95); transform: rotate(45deg) scale(1.5); box-shadow: 0 0 14px rgba(240,168,91,.7); }
  100% { background: transparent; border-color: rgba(255,255,255,.16); transform: rotate(45deg) scale(.72); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .belief-item.just-broken .belief-claim,
  .belief-item.just-broken .belief-mark { animation: none; }
}
.boss-kicker { margin: 0 0 5px; color: var(--gold); font-size: .67rem; letter-spacing: .18em; }
.boss-title-wrap h1 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 2.1rem); font-family: Georgia, "Noto Serif KR", serif; font-weight: 600; }

.second-flame-hud { position: absolute; top: 0; right: 0; min-width: 188px; display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; align-items: center; padding: 9px 11px; border: 1px solid rgba(255,255,255,.10); background: rgba(8,8,10,.48); color: #746f6d; transition: border-color .45s ease, background .45s ease, color .45s ease, box-shadow .45s ease; }
.second-flame-sigil { grid-row: 1 / 4; width: 18px; height: 27px; justify-self: center; border-radius: 52% 48% 55% 45% / 68% 62% 38% 32%; background: #4d4948; transform: rotate(4deg); box-shadow: 0 0 0 rgba(215,122,82,0); transition: background .45s ease, box-shadow .45s ease, transform .45s ease; }
.second-flame-copy { display: flex; flex-direction: column; gap: 2px; }
.second-flame-copy small { font-size: .52rem; letter-spacing: .16em; }
.second-flame-copy strong { color: inherit; font-size: .64rem; letter-spacing: .1em; font-weight: 700; }
.ember-indicators { grid-column: 2; display: flex; align-items: flex-end; gap: 6px; min-height: 17px; padding-top: 2px; }
.ember-indicator { width: 8px; height: 13px; border-radius: 60% 45% 58% 42% / 72% 68% 32% 28%; background: linear-gradient(180deg, #555150, #292729); box-shadow: 0 0 0 rgba(215,122,82,0); opacity: .56; transform: translateY(1px) scale(.88) rotate(3deg); transform-origin: 50% 100%; transition: background .32s ease, box-shadow .32s ease, opacity .32s ease, transform .32s ease, filter .32s ease; }
.ember-indicator:nth-child(2) { transform: translateY(1px) scale(.88) rotate(-4deg); }
.ember-indicator:nth-child(3) { transform: translateY(1px) scale(.88) rotate(5deg); }
.second-flame-hud[data-embers="0"] .ember-indicator { background: linear-gradient(180deg, #555150, #292729); box-shadow: none; opacity: .48; animation: none; }
.ember-indicator[data-active="true"] { background: linear-gradient(180deg, #f4cf82 0%, #e38b53 48%, #9e493d 100%); opacity: .9; box-shadow: 0 0 8px rgba(230,153,83,.36); animation: emberBreathe 2.8s ease-in-out infinite; }
.second-flame-hud[data-embers="1"] .ember-indicator[data-active="true"] { opacity: .88; box-shadow: 0 0 8px rgba(230,153,83,.34); animation-duration: 3.1s; }
.second-flame-hud[data-embers="2"] .ember-indicator[data-active="true"] { opacity: .96; box-shadow: 0 0 10px rgba(230,153,83,.48), 0 0 18px rgba(215,122,82,.12); animation-duration: 2.25s; }
.second-flame-hud[data-embers="2"] .ember-indicator:nth-child(2) { animation-delay: -.72s; }
.second-flame-hud[data-embers="3"] { box-shadow: 0 0 34px rgba(215,122,82,.13); }
.second-flame-hud[data-embers="3"] .ember-indicator[data-active="true"] { opacity: 1; box-shadow: 0 0 12px rgba(240,168,91,.62), 0 0 24px rgba(215,122,82,.18); animation: emberFull 1.9s ease-in-out infinite; }
.second-flame-hud[data-embers="3"] .ember-indicator:nth-child(2) { animation-delay: -.56s; }
.second-flame-hud[data-embers="3"] .ember-indicator:nth-child(3) { animation-delay: -1.12s; }
.ember-indicator.just-lit { animation: emberIgnite .38s ease-out both !important; }
.ember-count { grid-column: 2; font-size: .52rem; letter-spacing: .1em; opacity: .76; }
.flame-awake .second-flame-hud { border-color: rgba(230,186,118,.32); background: rgba(30,20,18,.68); color: #e5c18d; box-shadow: 0 0 30px rgba(215,122,82,.08); }
.flame-awake .second-flame-sigil { background: linear-gradient(180deg, #f1c279, #d36f4d 72%, #703644); box-shadow: 0 0 14px rgba(226,132,79,.55), 0 0 34px rgba(215,122,82,.18); animation: secondFlamePulse 1.8s ease-in-out infinite; }
.flame-channeling .second-flame-hud { border-color: rgba(238,164,92,.72); box-shadow: 0 0 42px rgba(227,112,65,.24); }
.flame-channeling .second-flame-sigil { animation-duration: .58s; transform: rotate(8deg) scale(1.14); }
.flame-strike .second-flame-hud { background: rgba(65,31,29,.78); color: #f2d19c; }

.boss-portrait { position: relative; width: 310px; height: 320px; display: grid; place-items: center; filter: drop-shadow(0 0 28px rgba(216,140,94,.18)); transition: filter .8s ease, transform .8s ease; }
.boss-art { position: absolute; inset: 10px -54px 12px; width: calc(100% + 108px); height: calc(100% - 22px); object-fit: contain; object-position: center; z-index: 1; opacity: .96; filter: contrast(1.04) saturate(.86) drop-shadow(0 16px 30px rgba(0,0,0,.5)); transition: filter .8s ease, opacity .8s ease, transform .8s ease; }
.boss-video { pointer-events: none; background: transparent; }
.has-boss-art .face-mask, .has-boss-art .wing { opacity: 0; }
.has-boss-art.phase-contradiction .boss-art { filter: contrast(1.1) saturate(.8) drop-shadow(0 16px 34px rgba(105,45,55,.55)); }
.has-boss-art.phase-personal .boss-art { filter: contrast(1.17) saturate(.72) drop-shadow(0 18px 38px rgba(120,48,58,.62)); transform: scale(1.015); }
.has-boss-art.phase-revelation .boss-art { filter: contrast(1.27) saturate(.62) drop-shadow(0 20px 44px rgba(147,56,58,.72)); transform: scale(1.035); }
.game-frame.turn-consequence-resonance .boss-portrait,
.game-frame.turn-consequence-resonance .npc-art { animation: turnResonance .68s ease-out both; }
.game-frame.turn-consequence-strike .boss-portrait { animation: turnStrike .62s ease-out both; }
.game-frame.turn-consequence-fracture .boss-portrait { animation: turnFracture .7s ease-out both; }
.game-frame.turn-consequence-pressure .boss-portrait { animation: turnPressure .66s ease-out both; }
.game-frame.turn-consequence-resonance .second-flame-hud,
.game-frame.turn-consequence-strike .second-flame-hud,
.game-frame.turn-consequence-fracture .second-flame-hud { animation: turnHudPulse .68s ease-out both; }
.game-frame.turn-consequence-pressure .second-flame-hud { animation: turnPressureHud .66s ease-out both; }
@keyframes turnResonance { 0% { transform: scale(1); } 42% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes turnStrike { 0% { transform: translateX(0) scale(1); } 32% { transform: translateX(-5px) scale(1.025); } 58% { transform: translateX(3px) scale(1.018); } 100% { transform: translateX(0) scale(1); } }
@keyframes turnFracture { 0% { transform: scale(1); filter: brightness(1); } 38% { transform: scale(1.035); filter: brightness(1.22); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes turnPressure { 0% { transform: translateX(0) scale(1); filter: brightness(1); } 42% { transform: translateX(4px) scale(1.018); filter: brightness(.88); } 100% { transform: translateX(0) scale(1); filter: brightness(1); } }
@keyframes turnHudPulse { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes turnPressureHud { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(.985); opacity: .72; } 100% { transform: scale(1); opacity: 1; } }
/* The decorative circular ring overlay that used to orbit the boss portrait was
   removed so the artwork itself carries the stage. Do not reintroduce a ring. */
.wing { position: absolute; width: 105px; height: 176px; top: 72px; background: linear-gradient(180deg, rgba(233,215,190,.26), rgba(99,61,65,.08)); filter: blur(.1px); transition: transform .9s ease, opacity .9s ease; }
.wing-left { left: 19px; border-radius: 100% 0 70% 10%; transform: rotate(-28deg); }
.wing-right { right: 19px; border-radius: 0 100% 10% 70%; transform: rotate(28deg); }
.face-mask { position: relative; width: 90px; height: 125px; border-radius: 46% 46% 42% 42%; background: linear-gradient(180deg, #e6dac5 0%, #9c827b 52%, #35232b 100%); box-shadow: 0 0 45px rgba(239,196,126,.14); transition: filter .8s ease, transform .8s ease; }
.eye { position: absolute; top: 47px; width: 8px; height: 3px; background: #f2c27e; box-shadow: 0 0 12px #e68f57; }
.eye-left { left: 24px; transform: rotate(8deg); }
.eye-right { right: 24px; transform: rotate(-8deg); }
.crack { position: absolute; width: 2px; background: rgba(44,19,29,.92); transform-origin: top; opacity: 0; transition: opacity .45s ease; }
.crack-a { height: 45px; left: 44px; top: 8px; transform: rotate(13deg); }
.crack-b { height: 36px; left: 56px; top: 49px; transform: rotate(-24deg); }
.crack-c { height: 31px; left: 31px; top: 72px; transform: rotate(28deg); }
.core-flame { position: absolute; bottom: 30px; width: 11px; height: 33px; border-radius: 50% 50% 45% 45%; background: #f0b35e; box-shadow: 0 0 24px #d77250, 0 0 70px rgba(215,114,80,.32); animation: flamePulse 1.6s ease-in-out infinite; }

.npc-mode .boss-portrait { display: none; }
.npc-mode .npc-glyph { display: grid; }
.npc-mode.has-npc-art .npc-glyph { display: none; }
.npc-art { width: 340px; height: 340px; object-fit: contain; object-position: center; opacity: .94; filter: contrast(1.03) saturate(.84) drop-shadow(0 18px 40px rgba(0,0,0,.56)); transition: filter .7s ease, opacity .7s ease, transform .7s ease; }
.npc-restored .npc-art { opacity: 1; filter: contrast(1.04) saturate(.94) brightness(1.06) drop-shadow(0 18px 48px rgba(220,174,108,.20)); transform: scale(1.018); }
.npc-river.npc-restored .npc-art { filter: contrast(1.03) saturate(.96) brightness(1.06) drop-shadow(0 18px 48px rgba(116,187,201,.20)); }
.npc-song.npc-restored .npc-art { filter: contrast(1.03) saturate(.96) brightness(1.06) drop-shadow(0 18px 48px rgba(193,141,193,.20)); }
.npc-glyph { display: none; place-items: center; width: 220px; height: 220px; border: 1px solid rgba(230,186,118,.22); border-radius: 50%; font-family: Georgia, serif; font-size: 5.6rem; color: #d8c39e; background: radial-gradient(circle, rgba(230,186,118,.10), rgba(20,18,22,.05) 58%, transparent 72%); box-shadow: 0 0 70px rgba(230,186,118,.08); text-shadow: 0 0 28px rgba(230,186,118,.28); }
.npc-river .npc-glyph { color: #9fc5cb; border-color: rgba(130,190,200,.24); box-shadow: 0 0 70px rgba(110,170,185,.10); }
.npc-song .npc-glyph { color: #c9aec9; border-color: rgba(200,165,205,.24); box-shadow: 0 0 70px rgba(190,145,198,.10); }
.continue-npc { position: absolute; bottom: -90px; pointer-events: auto; border: 1px solid rgba(230,186,118,.35); background: rgba(20,17,20,.88); color: var(--text); padding: 10px 16px; cursor: pointer; letter-spacing: .05em; }
.npc-mode .battle-log { opacity: .9; }

.dialogue-copy-flow {
  width: min(780px, calc(100% - 40px));
  max-height: min(27vh, 15rem);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.55rem, 1.2vh, .8rem);
  padding: .3rem .9rem .45rem;
  pointer-events: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(230,186,118,.42) rgba(0,0,0,.18);
}
.boss-line {
  width: 100%;
  max-width: 780px;
  margin: 0;
  position: static;
  text-align: center;
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: clamp(1.08rem, 2vw, 1.72rem);
  line-height: 1.48;
  text-shadow: 0 2px 20px #000;
}
.boss-subline {
  width: 100%;
  max-width: 720px;
  position: static;
  margin: 0;
  color: var(--muted);
  font-size: clamp(.72rem, 1.05vw, .86rem);
  line-height: 1.48;
  letter-spacing: .02em;
  text-align: center;
}

.battle-log { position: absolute; z-index: 7; left: 28px; top: 142px; bottom: auto; width: min(300px, 26vw); max-height: 150px; overflow: hidden; padding: 10px 12px; border-left: 1px solid rgba(230,186,118,.18); background: linear-gradient(90deg, rgba(5,5,7,.62), rgba(5,5,7,.20)); opacity: .72; }
.log-line { margin: 0 0 8px; font-size: .72rem; line-height: 1.45; color: #b7ada6; }
.log-line strong { color: #e6ddd1; font-weight: 600; }
.log-line.player strong { color: #cbb594; }

.input-dock { position: absolute; z-index: 12; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(940px, calc(100% - 56px)); display: grid; grid-template-columns: 160px 104px 36px 1fr; gap: 12px; align-items: stretch; }
.player-utterance { display: none; }
.mic-button { border: 1px solid rgba(230,186,118,.30); background: rgba(21,17,20,.86); cursor: pointer; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; letter-spacing: .12em; font-size: .68rem; transition: background .2s ease, transform .2s ease, border .2s ease; }
.mic-button:hover { border-color: rgba(230,186,118,.58); }
.mic-button.listening { background: rgba(91,35,46,.9); border-color: rgba(231,133,108,.8); transform: scale(1.02); }
.mic-icon { color: var(--ember); font-size: 1.1rem; }
.silence-button { border: 1px solid rgba(150,145,153,.28); background: rgba(14,13,16,.86); color: #b9b2b5; cursor: pointer; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; letter-spacing: .08em; font-size: .68rem; }
.silence-button:hover { border-color: rgba(230,186,118,.42); color: #ddd4ce; background: rgba(28,23,25,.9); }
.silence-button > span:first-child { color: var(--gold); font-size: 1.15rem; line-height: .8; letter-spacing: .18em; }
.or-divider { display: grid; place-items: center; color: #686267; font-size: .6rem; letter-spacing: .14em; }
.text-mode-toggle { display: none; border: 1px solid rgba(230,186,118,.30); background: rgba(24,20,21,.9); color: var(--text); cursor: pointer; letter-spacing: .06em; }
.text-entry { min-height: 74px; border: 1px solid var(--line); background: rgba(12,11,13,.88); display: grid; grid-template-columns: 1fr 80px; }
.text-entry textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); padding: 14px 16px; line-height: 1.45; }
.text-entry textarea::placeholder { color: #726b6d; }
.text-entry button { border: 0; border-left: 1px solid var(--line); background: rgba(232,190,120,.08); cursor: pointer; letter-spacing: .08em; font-size: .72rem; }
.input-status { grid-column: 1 / -1; margin: -2px 0 0; text-align: center; min-height: 16px; color: #8b8380; font-size: .7rem; }
.voice-status { margin-top: 0; color: #d7b47a; }
.voice-status[hidden] { display: none; }
.input-dock.first-play-tutorial {
  padding: 10px;
  border: 1px solid rgba(230,186,118,.58);
  background: linear-gradient(180deg, rgba(37,28,25,.76), rgba(11,10,12,.84));
  box-shadow: 0 0 0 1px rgba(230,186,118,.08), 0 0 34px rgba(215,122,82,.16);
  animation: first-play-tutorial-pulse 2.4s ease-in-out infinite;
}
.input-dock.first-play-tutorial .mic-button,
.input-dock.first-play-tutorial .text-mode-toggle,
.input-dock.first-play-tutorial .text-entry { border-color: rgba(230,186,118,.58); }
.input-dock.first-play-tutorial .input-status { color: #ead7b8; font-size: .74rem; }
.first-play-tutorial-toast {
  position: absolute;
  z-index: 24;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 28px));
  padding: 12px 16px;
  border: 1px solid rgba(230,186,118,.42);
  background: rgba(18,15,17,.94);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  color: #eadfd1;
  text-align: center;
  font-size: .78rem;
  line-height: 1.55;
  pointer-events: none;
}
@keyframes first-play-tutorial-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(230,186,118,.08), 0 0 28px rgba(215,122,82,.11); }
  50% { box-shadow: 0 0 0 1px rgba(230,186,118,.15), 0 0 42px rgba(215,122,82,.22); }
}
.input-dock.busy .mic-button,
.input-dock.busy .silence-button,
.input-dock.busy .text-mode-toggle,
.input-dock.busy .text-entry { pointer-events: none; opacity: .56; }

.overlay { position: absolute; z-index: 30; inset: 0; background: rgba(4,4,5,.82); backdrop-filter: blur(12px); display: grid; place-items: center; padding: 28px; }
.overlay-card { width: min(620px, 92%); max-height: calc(100% - 56px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding: 38px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(26,22,25,.94), rgba(10,9,11,.97)); box-shadow: 0 30px 100px #000; text-align: center; }
.eyebrow { color: var(--gold); letter-spacing: .18em; font-size: .68rem; }
.overlay-card h2 { margin: 14px 0 18px; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.04; font-weight: 500; }
.overlay-card h2 span { color: var(--gold); }
.overlay-card > p:not(.eyebrow) { color: #b6ada7; line-height: 1.7; }
.intro-rules { margin: 26px 0; display: flex; justify-content: center; gap: 8px; }
.intro-rules span { border: 1px solid var(--line); padding: 7px 10px; font-size: .62rem; letter-spacing: .12em; color: #948b87; }
.primary-button { margin-top: 8px; border: 1px solid rgba(230,186,118,.46); background: rgba(230,186,118,.12); padding: 13px 20px; cursor: pointer; letter-spacing: .05em; }
.intro-overlay strong { color: #ead0a5; font-weight: 650; }
.opening-card { position: relative; width: min(700px, 94%); overflow-x: hidden; overflow-y: auto; }
.opening-cinematic { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; visibility: hidden; pointer-events: none; }
.opening-cinematic-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; opacity: 1; }
.opening-cinematic-skip { position: absolute; right: max(18px, calc(env(safe-area-inset-right) + 12px)); bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 3; margin: 0; border: 1px solid rgba(235,221,199,.28); border-radius: 999px; background: rgba(6,6,8,.46); color: rgba(244,236,226,.82); padding: 9px 13px; font: inherit; font-size: .68rem; letter-spacing: .08em; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(6px); transition: opacity .18s ease, border-color .18s ease, background .18s ease; }
.opening-cinematic-skip:hover { border-color: rgba(230,186,118,.55); background: rgba(12,10,12,.68); }
.opening-cinematic-skip:focus-visible { outline: 2px solid rgba(230,186,118,.78); outline-offset: 3px; }
.intro-overlay[data-opening-step="cinematic"] { padding: 0; background: #000; backdrop-filter: none; }
.intro-overlay[data-opening-step="cinematic"] .opening-card { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-overlay[data-opening-step="cinematic"] .opening-cinematic { opacity: 1; visibility: visible; pointer-events: auto; }
.opening-cinematic.can-skip .opening-cinematic-skip { opacity: 1; visibility: visible; pointer-events: auto; }
.opening-cinematic.is-blackout .opening-cinematic-video { opacity: 0; }
.opening-cinematic.is-blackout .opening-cinematic-skip { opacity: 0; visibility: hidden; pointer-events: none; }
.ending-cinematic { position: absolute; inset: 0; z-index: 40; overflow: hidden; background: #000; }
.ending-cinematic-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.ending-cinematic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 22%, transparent 72%, rgba(0,0,0,.68)); }
.ending-cinematic-status { position: absolute; z-index: 2; left: max(20px, calc(env(safe-area-inset-left) + 14px)); bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); color: rgba(246,237,224,.88); text-shadow: 0 2px 16px #000; }
.ending-cinematic-status p { margin: 0; }
.ending-cinematic-status p:first-child { font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(.9rem, 2vw, 1.2rem); }
.ending-cinematic-status p:last-child { margin-top: 4px; color: rgba(232,190,120,.82); font-size: .62rem; letter-spacing: .16em; }
.ending-cinematic-skip { position: absolute; z-index: 3; right: max(18px, calc(env(safe-area-inset-right) + 12px)); bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); border: 1px solid rgba(235,221,199,.32); border-radius: 999px; background: rgba(6,6,8,.58); color: rgba(244,236,226,.88); padding: 9px 13px; font: inherit; font-size: .68rem; letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(6px); }
.ending-cinematic-skip:hover { border-color: rgba(230,186,118,.6); background: rgba(12,10,12,.78); }
.ending-cinematic-skip:focus-visible { outline: 2px solid rgba(230,186,118,.78); outline-offset: 3px; }
.opening-visual { position: relative; height: 104px; margin: -8px auto 18px; display: grid; place-items: center; }
.opening-fire { position: absolute; width: 38px; height: 58px; opacity: 0; transition: opacity .35s ease, transform .45s ease; transform: scale(.72); }
.opening-fire::before,
.opening-fire::after,
.opening-fire span { content: ""; position: absolute; inset: auto 0 0; margin: auto; width: 28px; height: 48px; border-radius: 55% 45% 58% 42% / 70% 60% 40% 30%; transform: rotate(45deg); transform-origin: 50% 75%; background: radial-gradient(circle at 58% 70%, #fff1bc 0 8%, #f4b35f 28%, #cf603d 60%, rgba(110,35,28,.15) 76%); filter: drop-shadow(0 0 18px rgba(235,126,69,.55)); animation: openingFlame 1.7s ease-in-out infinite alternate; }
.opening-fire::after { width: 18px; height: 32px; opacity: .8; filter: blur(.2px) drop-shadow(0 0 13px rgba(244,186,100,.65)); animation-delay: -.7s; }
.opening-fire span { width: 11px; height: 21px; opacity: .9; background: #fff3c9; animation-delay: -1.1s; }
.opening-fire-second::before { background: radial-gradient(circle at 58% 70%, #f8f3d1 0 8%, #d9b96b 25%, #b65b42 52%, rgba(93,39,73,.1) 76%); filter: drop-shadow(0 0 22px rgba(230,186,118,.62)); }
.opening-ai-grid { position: absolute; width: 96px; height: 64px; opacity: 0; transition: opacity .35s ease; background-image: linear-gradient(rgba(230,186,118,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(230,186,118,.16) 1px, transparent 1px); background-size: 12px 12px; mask-image: radial-gradient(circle, #000 28%, transparent 72%); animation: openingGrid 5s linear infinite; }
.intro-overlay[data-opening-step="ignition"] .opening-ai-grid { opacity: 1; }
.intro-overlay[data-opening-step="ignition"] .opening-fire-second { opacity: 1; transform: scale(1.24); }
.opening-copy { min-height: 4.8em; margin-inline: auto; max-width: 590px; }
.opening-facts { min-height: 31px; margin: 20px 0 16px; flex-wrap: wrap; }
.opening-question { margin: 17px auto 4px; max-width: 570px; text-align: left; }
.opening-ai-prompt { margin: 0 0 10px; padding: 12px 14px; border-left: 2px solid rgba(230,186,118,.5); background: rgba(230,186,118,.055); color: #d9cbbb; line-height: 1.6; }
.opening-question textarea { width: 100%; min-height: 68px; resize: vertical; border: 1px solid rgba(230,186,118,.28); outline: none; background: rgba(4,4,5,.64); color: #f1e8df; padding: 12px 13px; font: inherit; line-height: 1.5; }
.opening-question textarea:focus { border-color: rgba(230,186,118,.62); box-shadow: 0 0 0 2px rgba(230,186,118,.08); }
.opening-question textarea::placeholder { color: #716a67; }
.opening-question-note { margin: 7px 2px 0; color: #807975; font-size: .68rem; line-height: 1.45; }
.opening-question-note.error { color: #d39a8e; }
.opening-privacy-note { display: none; margin: 0 auto 12px; max-width: 590px; color: #77706c; font-size: .56rem; line-height: 1.45; letter-spacing: .01em; }
.intro-overlay[data-opening-step="game-contract"] .opening-privacy-note { display: block; }
.opening-progress { margin: 12px 0 -8px; color: #68615f; font-size: .58rem; letter-spacing: .14em; }
@keyframes openingFlame { 0% { transform: rotate(43deg) scale(.92) skew(-2deg, 1deg); } 100% { transform: rotate(47deg) scale(1.08) skew(2deg, -2deg); } }
@keyframes openingGrid { to { background-position: 24px 12px, 12px 24px; } }
.ending-world { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(230,186,118,.20); background: rgba(230,186,118,.05); color: #d6c5b0; line-height: 1.65; text-align: left; }
.ending-boundaries { margin-top: 20px; padding: 16px 18px; border: 1px solid rgba(230,186,118,.24); background: rgba(230,186,118,.045); text-align: left; }
.ending-boundaries-title { margin: 0 0 12px; color: rgba(232,190,120,.9); font-size: .72rem; letter-spacing: .12em; }
.ending-boundaries-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ending-boundaries-list li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(230,186,118,.12); }
.ending-boundaries-list li:first-child { padding-top: 0; border-top: 0; }
.ending-boundaries-boss { color: rgba(214,197,176,.72); font-size: .68rem; letter-spacing: .08em; }
.ending-boundaries-quote { color: #e6ddd2; font-family: Georgia, "Noto Serif KR", serif; line-height: 1.55; }
.ending-echo { margin-top: 22px; padding: 18px; border-left: 2px solid rgba(230,186,118,.42); text-align: left; color: #cfc2b3; font-family: Georgia, "Noto Serif KR", serif; line-height: 1.6; }

footer { display: flex; justify-content: space-between; color: #666066; padding: 10px 2px 0; font-size: .67rem; letter-spacing: .04em; }

.phase-contradiction .crack-a, .fracture-1 .crack-a { opacity: 1; }
.phase-personal .crack-a, .phase-personal .crack-b, .fracture-2 .crack-a, .fracture-2 .crack-b { opacity: 1; }
.phase-revelation .crack, .fracture-3 .crack { opacity: 1; }
.phase-revelation .wing-left { transform: rotate(-48deg) translateY(10px); opacity: .66; }
.phase-revelation .wing-right { transform: rotate(48deg) translateY(10px); opacity: .66; }
.phase-revelation .face-mask { filter: contrast(1.25) saturate(.72); transform: translateY(7px); }
.resolved .boss-portrait { filter: drop-shadow(0 0 55px rgba(236,187,112,.38)); transform: scale(.94); }
.resolved .wing { opacity: .4; }

@keyframes flamePulse { 0%,100% { transform: scale(.92) translateY(1px); opacity: .78; } 50% { transform: scale(1.12) translateY(-2px); opacity: 1; } }
@keyframes secondFlamePulse { 0%,100% { transform: rotate(4deg) scale(.92); opacity: .82; } 50% { transform: rotate(-3deg) scale(1.08); opacity: 1; } }
@keyframes emberBreathe { 0%,100% { transform: translateY(1px) scale(.94) rotate(3deg); filter: brightness(.92); } 50% { transform: translateY(-1px) scale(1.03) rotate(-2deg); filter: brightness(1.08); } }
@keyframes emberFull { 0%,100% { transform: translateY(1px) scale(.96) rotate(2deg); filter: brightness(.96); } 50% { transform: translateY(-2px) scale(1.08) rotate(-2deg); filter: brightness(1.13); } }
@keyframes emberIgnite { 0% { transform: translateY(2px) scale(.55); filter: brightness(1.8); opacity: .45; } 42% { transform: translateY(-2px) scale(1.28); filter: brightness(1.45); opacity: 1; } 100% { transform: translateY(0) scale(1); filter: brightness(1); opacity: 1; } }

@media (max-width: 760px) {
  body { display: block; }
  .game-shell { padding: 0; width: 100%; }
  .game-frame { min-height: 100dvh; aspect-ratio: auto; border: 0; }
  .topbar { inset: 16px 16px auto; }
  .topbar-actions { gap: 5px; margin-right: 72px; }
  .topbar-actions .ghost-button { padding: 7px 8px; font-size: .62rem; }
  .privacy-button { letter-spacing: .04em; }
  .privacy-button-floating { top: 16px; right: 16px; padding: 7px 8px; font-size: .62rem; }
  .chapter { display: none; }
  .boss-stage {
    inset: 58px 14px 198px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title flame"
      "beliefs beliefs"
      "portrait portrait"
      "dialogue dialogue";
    gap: 8px 10px;
    align-items: start;
    justify-content: stretch;
  }
  .boss-title-wrap { position: static; grid-area: title; min-width: 0; align-self: start; }
  .belief-board { position: static; grid-area: beliefs; width: 100%; max-width: none; max-height: min(21dvh, 9.5rem); overflow-y: auto; padding: 7px 9px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .belief-claim { font-size: .58rem; }
  .belief-board-label, .belief-board-status { font-size: .45rem; }
  .second-flame-hud { position: static; grid-area: flame; min-width: 140px; padding: 7px 8px; grid-template-columns: 22px 1fr; gap: 1px 7px; align-self: start; }
  .second-flame-sigil { width: 14px; height: 22px; }
  .ember-indicators { gap: 5px; min-height: 14px; }
  .ember-indicator { width: 7px; height: 11px; }
  .second-flame-copy small, .ember-count { font-size: .45rem; }
  .second-flame-copy strong { font-size: .54rem; }
  /* The portrait claims the whole free row between the belief board and the
     dialogue, so the artwork is as large as the layout allows and can never
     grow into the dialogue flow or the input dock. */
  .boss-portrait {
    grid-area: portrait;
    align-self: center;
    justify-self: center;
    width: auto;
    height: 100%;
    aspect-ratio: 4 / 3;
    min-width: min(72vw, 280px);
    max-width: min(96vw, 520px);
    min-height: 0;
    max-height: 100%;
    transform: none;
  }
  .boss-art {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Straight vertical fade (no ring, no vignette) so the enlarged crop melts
       into the stage instead of ending on a hard rectangle. */
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 10%, #000 85%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 10%, #000 85%, rgba(0,0,0,0) 100%);
  }
  .npc-glyph { grid-area: portrait; align-self: center; justify-self: center; }
  .npc-art { grid-area: portrait; align-self: center; justify-self: center; width: min(76vw, 300px); height: min(29dvh, 238px); max-height: 100%; }
  .dialogue-copy-flow { grid-area: dialogue; align-self: stretch; width: 100%; min-height: 0; max-height: min(20dvh, 10rem); padding: .3rem .5rem .5rem; gap: .48rem; }
  .boss-line { font-size: clamp(.98rem, 4.8vw, 1.2rem); line-height: 1.5; }
  .boss-subline { font-size: clamp(.68rem, 3.2vw, .8rem); line-height: 1.6; }
  .battle-log { display: none; }
  .input-dock {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "utterance utterance utterance"
      "mic silence text-toggle"
      "composer composer composer"
      "status status status";
    gap: 8px;
  }
  .input-dock.first-play-tutorial { padding: 8px; }
  .input-dock.first-play-tutorial .input-status { font-size: .66rem; line-height: 1.5; }
  .first-play-tutorial-toast { top: max(10px, env(safe-area-inset-top)); font-size: .7rem; }
  .player-utterance {
    grid-area: utterance;
    display: block;
    min-height: 70px;
    max-height: 104px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid rgba(230,186,118,.28);
    background: rgba(10,9,11,.94);
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .player-utterance-label { display: block; margin-bottom: 5px; color: var(--gold); font-size: .62rem; letter-spacing: .12em; }
  .player-utterance p { margin: 0; color: #efe7dc; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
  .player-utterance[data-state="idle"] p { color: #817a78; }
  .player-utterance[data-state="listening"] { border-color: rgba(231,133,108,.72); box-shadow: 0 0 24px rgba(215,122,82,.12); }
  .mic-button { grid-area: mic; min-height: 52px; font-size: .6rem; }
  .silence-button { grid-area: silence; min-height: 52px; font-size: .64rem; }
  .text-mode-toggle { grid-area: text-toggle; display: block; min-height: 52px; font-size: .72rem; }
  .or-divider { display: none; }
  .input-dock .text-entry { grid-area: composer; display: none; min-height: 82px; grid-template-columns: 1fr 62px; }
  .input-dock.text-mode-open .text-entry { display: grid; }
  .input-status { grid-area: status; font-size: .62rem; }
  .overlay { padding: 16px; }
  .overlay-card { padding: 28px 22px; }
  .opening-card { width: min(100%, 620px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 24px 18px 18px; }
  .opening-visual { height: 78px; margin-bottom: 10px; }
  .opening-card h2 { margin: 8px 0 12px; font-size: clamp(1.7rem, 8vw, 2.6rem); line-height: 1.08; }
  .opening-copy { min-height: auto; font-size: .88rem; line-height: 1.62; }
  .opening-facts { margin: 14px 0 10px; gap: 5px; }
  .opening-facts span { padding: 6px 8px; font-size: .55rem; }
  .opening-question { margin-top: 12px; }
  .opening-question textarea { min-height: 72px; }
  footer { display: none; }
}

@media (max-width: 760px) {
  /* `inset-bottom` is not a real CSS property, so the stage never actually made
     room for the open composer and the dock covered the dialogue. */
  .game-frame.composer-open .boss-stage { bottom: 286px; }
  .game-frame.composer-open .dialogue-copy-flow { max-height: min(21dvh, 10rem); }
  /* Give the shrinking portrait row back some height while the composer is up. */
  .game-frame.composer-open .belief-board { max-height: min(15dvh, 6.4rem); }
}

@media (max-width: 760px) and (max-height: 760px) {
  .boss-stage { inset: 54px 12px 184px; gap: 6px 8px; }
  .belief-board { max-height: 7.7rem; padding-block: 6px; }
  /* Short viewports: keep the same fill-the-row behaviour but hold a gentler
     crop ratio so the face never gets cut off. */
  .boss-portrait { width: auto; height: 100%; aspect-ratio: 5 / 4; min-width: min(64vw, 240px); max-width: min(92vw, 420px); }
  .npc-art { width: min(70vw, 270px); height: min(25dvh, 205px); }
  .dialogue-copy-flow { max-height: min(18dvh, 8.5rem); }
  .player-utterance { min-height: 62px; max-height: 88px; padding: 8px 10px; }
  .mic-button, .silence-button, .text-mode-toggle { min-height: 48px; }
  .game-frame.composer-open .boss-stage { bottom: 276px; }
  .game-frame.composer-open .belief-board { max-height: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .second-flame-sigil,
  .ember-indicator,
  .core-flame,
  .opening-fire,
  .opening-ai-grid,
  .opening-cinematic-skip,
  .ending-cinematic-skip { animation: none !important; transition-duration: .01ms !important; }
  .ember-indicator.just-lit { transform: translateY(0) scale(1) !important; filter: none !important; }
}

/* Desktop/laptop viewports can be very short in CSS pixels on Retina displays or
   inside itch.io/browser chrome. Fit the composition by available height rather
   than assuming every desktop viewport has a tall 16:9 canvas. */
@media (min-width: 761px) and (max-height: 900px) {
  /* Centered grid + overflow-x:hidden otherwise clips the tall 16:9 frame on
     MacBook-height windows, so the third-boss HUD/input cannot be reached. */
  body { place-items: start center; }
  .game-shell { width: min(100vw, 1280px); padding: 8px; }
  .game-frame { min-height: 0; height: min(760px, calc(100dvh - 52px)); max-height: calc(100dvh - 52px); aspect-ratio: auto; }
  .topbar { inset: clamp(10px, 2.2dvh, 18px) clamp(14px, 2.6vw, 28px) auto; }
  .boss-stage { inset: clamp(48px, 8dvh, 66px) clamp(18px, 2.6vw, 28px) clamp(118px, 23dvh, 174px); }
  .boss-portrait { width: clamp(180px, 34dvh, 286px); height: clamp(186px, 35dvh, 296px); }
  .npc-art { width: clamp(180px, 38dvh, 300px); height: clamp(160px, 36dvh, 286px); }
  .dialogue-copy-flow { max-height: min(22dvh, 9.5rem); gap: .4rem; padding-block: .15rem .3rem; }
  .boss-line { font-size: clamp(.96rem, 1.7vw, 1.35rem); line-height: 1.42; }
  .boss-subline { font-size: clamp(.66rem, 1vw, .8rem); }
  .belief-board { top: clamp(62px, 12dvh, 82px); max-height: min(20dvh, 8rem); overflow-y: auto; pointer-events: auto; }
  .second-flame-hud { min-width: 164px; padding: 7px 9px; }
  .battle-log { top: clamp(96px, 18dvh, 118px); max-height: min(16dvh, 100px); }
  .input-dock { bottom: clamp(6px, 1.5dvh, 14px); width: min(900px, calc(100% - 36px)); grid-template-columns: clamp(116px, 14vw, 150px) clamp(82px, 9vw, 100px) 30px 1fr; gap: 8px; }
  .mic-button, .silence-button, .text-entry { min-height: clamp(50px, 9.5dvh, 66px); }
  .text-entry textarea { padding: 10px 12px; }
  .input-status { min-height: 14px; font-size: .62rem; }
  .overlay { padding: 12px 18px; }
  .overlay-card { max-height: calc(100% - 24px); padding: clamp(20px, 4dvh, 32px); }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .chapter { display: none; }
  .topbar-actions { gap: 5px; }
  .ghost-button { padding: 6px 8px; font-size: .6rem; }
  .brand { font-size: .72rem; }
  .boss-title-wrap h1 { font-size: clamp(1.1rem, 2.6vw, 1.55rem); }
}

@media (max-height: 760px) and (min-width: 761px) {
  .boss-stage { inset: clamp(44px, 8dvh, 56px) 18px clamp(108px, 25dvh, 148px); }
  .boss-portrait { width: clamp(160px, 31dvh, 230px); height: clamp(166px, 32dvh, 238px); transform: none; margin: 0; }
  .npc-art { width: clamp(160px, 34dvh, 240px); height: clamp(140px, 32dvh, 230px); }
  .dialogue-copy-flow { max-height: min(19dvh, 7rem); }
  .boss-line { font-size: clamp(.88rem, 1.65vw, 1.18rem); line-height: 1.38; }
  .belief-board { max-height: min(17dvh, 6.8rem); }
  .battle-log { top: clamp(84px, 18dvh, 106px); max-height: min(14dvh, 84px); }
  .input-dock { bottom: 4px; }
}

/* Keep the whole desktop composition visually substantial on large displays. */
@media (min-width: 1600px) and (min-height: 900px) {
  .game-shell { zoom: 1.16; }
}

@media (min-width: 1900px) and (min-height: 1000px) {
  .game-shell { zoom: 1.28; }
}

@media (min-width: 2400px) and (min-height: 1300px) {
  .game-shell { zoom: 1.5; }
}

@media (min-width: 3200px) and (min-height: 1800px) {
  .game-shell { zoom: 1.85; }
}

.language-overlay { z-index: 70; }
.language-card { max-width: 520px; }
.language-actions { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.language-option {
  min-height: 86px;
  border: 1px solid rgba(230,186,118,.24);
  background: rgba(11,10,12,.78);
  color: #cfc7be;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 14px;
  font: inherit;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
.language-option strong { font-size: .92rem; letter-spacing: .06em; }
.language-option small { color: #817a76; font-size: .62rem; letter-spacing: .08em; }
.language-option:hover { transform: translateY(-1px); border-color: rgba(230,186,118,.52); }
.language-option[data-selected="true"] { border-color: rgba(230,186,118,.72); background: rgba(230,186,118,.10); color: #f2e4d1; box-shadow: 0 0 24px rgba(230,186,118,.07); }
.language-option[data-selected="true"] small { color: #b8a892; }
.language-option:focus-visible { outline: 2px solid rgba(230,186,118,.78); outline-offset: 3px; }
.language-note { margin: 14px 0 0; color: #77706c; font-size: .62rem; line-height: 1.5; }
.access-overlay { z-index: 50; }
.access-card { max-width: 520px; }
.sound-overlay { z-index: 45; }
.sound-card { max-width: 540px; }
.sound-mark {
  width: 64px;
  height: 64px;
  margin: 2px auto 6px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241,189,112,.28);
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle, rgba(230,186,118,.12), rgba(230,186,118,.02) 64%, transparent 66%);
  font: 600 1.05rem/1 Georgia, serif;
  letter-spacing: -.05em;
  box-shadow: 0 0 36px rgba(230,186,118,.08);
}
.sound-actions { margin-top: 22px; display: grid; gap: 10px; }
.sound-actions .primary-button { margin-top: 0; }
.resume-card { width: min(560px, 92%); }
.resume-actions { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.resume-actions .primary-button { margin-top: 0; }
.privacy-overlay { z-index: 100; }
#privacyOverlay:target { display: grid !important; }
.privacy-card { width: min(520px, 92%); text-align: left; }
.privacy-card h2 { margin-bottom: 16px; }
.privacy-card p:not(.eyebrow) { color: #b9b0aa; line-height: 1.7; }
.privacy-card .primary-button { width: 100%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.quiet-button {
  border: 0;
  background: transparent;
  color: #8f8784;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  letter-spacing: .04em;
}
.quiet-button:hover { color: #d7cec8; }
.sound-note { margin: 8px 0 0 !important; color: #77706d !important; font-size: .72rem; line-height: 1.5 !important; }
.access-input {
  width: 100%;
  margin: 18px 0 10px;
  padding: 15px 16px;
  border: 1px solid rgba(241,189,112,.35);
  background: rgba(0,0,0,.38);
  color: #f6efe8;
  font: inherit;
  letter-spacing: .08em;
  outline: none;
}
.access-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(241,189,112,.12); }
.access-status { min-height: 1.5em; margin: 0 0 14px; color: #b6ada7; font-size: .9rem; }
.access-status.error { color: #e3a0a0; }

/* 접근 코드 입력 전에 오프닝을 미리 볼 수 있는 진입점 */
.access-preview-button {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(235,221,199,.18);
  color: #b6ada7;
  font-size: .8rem;
  letter-spacing: .06em;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.access-preview-button:hover { border-color: rgba(230,186,118,.5); background: rgba(230,186,118,.06); color: #f0e6da; }
.access-preview-button:focus-visible { outline: 2px solid rgba(230,186,118,.78); outline-offset: 3px; }
.access-preview-button[disabled] { opacity: .5; cursor: default; }
.access-preview-note { margin: 9px 0 0 !important; color: #77706d !important; font-size: .7rem; line-height: 1.5 !important; }

.opening-preview {
  position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
}
.opening-preview.hidden { display: none; }
.opening-preview-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  transition: opacity .3s ease;
}
.opening-preview.is-blackout .opening-preview-video { opacity: 0; }
.opening-preview-note {
  position: absolute;
  z-index: 2;
  left: max(20px, calc(env(safe-area-inset-left) + 14px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  margin: 0;
  color: rgba(246,237,224,.7);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px #000;
  pointer-events: none;
}
.opening-preview-close {
  position: absolute;
  z-index: 3;
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  margin: 0;
  border: 1px solid rgba(235,221,199,.32);
  border-radius: 999px;
  background: rgba(6,6,8,.58);
  color: rgba(244,236,226,.88);
  padding: 10px 15px;
  font: inherit;
  font-size: .7rem;
  letter-spacing: .06em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color .18s ease, background .18s ease;
}
.opening-preview-close:hover { border-color: rgba(230,186,118,.6); background: rgba(12,10,12,.72); }
.opening-preview-close:focus-visible { outline: 2px solid rgba(230,186,118,.78); outline-offset: 3px; }

@media (max-width: 760px) {
  .topbar-actions { gap: 4px; }
  .topbar-actions .ghost-button { padding: 8px 6px; font-size: .61rem; letter-spacing: .04em; }
  .resume-actions { grid-template-columns: 1fr; }
  .sound-card { width: min(100%, 520px); padding: 30px 22px 24px; }
  .sound-card h2 { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .sound-mark { width: 56px; height: 56px; }
  /* 세로 영상은 모바일에서 화면을 가득 채운다 */
  .opening-preview-video { object-fit: cover; }
  .opening-preview-note { font-size: .6rem; }
  .opening-preview-close { padding: 9px 13px; font-size: .66rem; }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .opening-preview-video { object-fit: cover; }
}