:root {
  --bp-tablet: 600px;
  --bp-pc: 1024px;
  --fs-hud-xl: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --fs-hud-lg: clamp(1.25rem, 0.95rem + 1.3vw, 1.9rem);
  --fs-hud-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --fs-hud-sm: clamp(0.875rem, 0.82rem + 0.28vw, 1.0625rem);
  --bg: #050806;
  --panel: #101711;
  --line: #35553d;
  --ink: #e8eee8;
  --dim: #8ca192;
  --green: #76ff9d;
  --hi: #ffd76a;
  --danger: #ff544f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: keep-all; overflow-wrap: break-word; }
button, input, select { font: inherit; }
button { min-height: 48px; padding: 10px 16px; color: var(--ink); background: #172019; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
button:hover { border-color: var(--green); }
button:focus-visible, .legal-footer a:focus-visible, .contact-email:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
button[aria-pressed="true"] { color: #061008; background: var(--green); border: 2px solid #b9ffcc; box-shadow: 0 0 0 2px #061008, 0 0 15px #76ff9d55; font-weight: 900; }
button[aria-pressed="false"] { color: var(--dim); background: #090e0a; border-color: #405848; box-shadow: inset 0 0 0 1px #0008; }
button:disabled { cursor: not-allowed; color: #778079; background: #111512; border-color: #4c544e; border-style: dashed; box-shadow: none; filter: grayscale(1); opacity: .52; }
button.primary { color: #061008; background: var(--green); border-color: var(--green); font-weight: 800; }
[hidden] { display: none !important; }
.dim { color: var(--dim); }
.eyebrow { margin: 0; color: var(--green); letter-spacing: .18em; text-transform: uppercase; }
.message { min-height: 1.5em; margin: 0; color: var(--hi); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: #050806; }
.brand-splash { position: absolute; z-index: 100; inset: 0; overflow: hidden; color: #70ff9b; background: radial-gradient(circle at 50% 48%, #082314 0, #020905 42%, #010302 78%); cursor: pointer; isolation: isolate; }
.brand-splash::before { content: ''; position: absolute; inset: 0; opacity: .28; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px), linear-gradient(90deg, transparent, #58ff8c0b 48%, #58ff8c12 50%, #58ff8c0b 52%, transparent); pointer-events: none; }
.brand-splash__rain { position: absolute; inset: -25% -5%; opacity: 0; transform: translateY(-8%); background-image: repeating-linear-gradient(180deg, #4dff834d 0 2px, transparent 2px 26px), repeating-linear-gradient(90deg, transparent 0 4.6vw, #48f47b1f 4.6vw 4.72vw, transparent 4.72vw 9.2vw); background-size: 100% 31px, 100% 100%; filter: drop-shadow(0 0 5px #43ff7770); }
.brand-splash__rain::after { content: '5  0  1  7  3  9  4  2  8  6\A  8  4  6  1  0  7  5  9  3\A 2  9  0  5  8  3  1  6  4\A  7  1  4  9  2  0  6  8  5\A 3  6  8  0  5  1  9  4  7'; position: absolute; inset: 0; color: #59ff8a38; font-size: clamp(12px, 1.25vw, 20px); line-height: 2.05; letter-spacing: 4.5vw; white-space: pre; word-break: normal; }
.brand-splash__scan { position: absolute; z-index: 2; left: 12%; right: 12%; top: 49%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, #8bffad, transparent); box-shadow: 0 0 12px #65ff91; }
.brand-splash__copy { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; gap: clamp(14px, 3vh, 28px); padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); text-align: center; }
.brand-splash__overline, .brand-splash__credit { margin: 0; opacity: 0; color: #80ffa7; font-weight: 800; letter-spacing: .36em; text-indent: .36em; text-shadow: 0 0 12px #46ff7c6b; }
.brand-splash__overline { font-size: clamp(11px, 1.2vw, 16px); }
.brand-splash__title { position: relative; margin: 0; opacity: 0; color: #72ff9b; font-family: system-ui, sans-serif; font-size: clamp(54px, 12vw, 164px); font-weight: 900; letter-spacing: -.02em; line-height: .95; text-shadow: 0 0 12px #4eff817d, 0 0 44px #3cff744d; }
.brand-splash__title::before, .brand-splash__title::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.brand-splash__title::before { color: #b7ffca; transform: translateX(-3px); clip-path: inset(18% 0 62% 0); }
.brand-splash__title::after { color: #1aa846; transform: translateX(4px); clip-path: inset(66% 0 12% 0); }
.brand-splash__credit { margin-top: clamp(4px, 1.2vh, 12px); color: #b2cdb9; font-size: clamp(9px, 1vw, 13px); letter-spacing: .22em; text-indent: .22em; }
.brand-splash__credit span { color: #5fff8d; }
.brand-splash__corner { position: absolute; z-index: 4; width: clamp(24px, 4vw, 52px); height: clamp(24px, 4vw, 52px); opacity: 0; border-color: #5cff89; }
.brand-splash__corner--tl { top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); border-top: 1px solid; border-left: 1px solid; }
.brand-splash__corner--br { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); border-right: 1px solid; border-bottom: 1px solid; }
.brand-splash--active .brand-splash__rain { animation: splashRain 2.5s linear both; }
.brand-splash--active .brand-splash__scan { animation: splashScan 2.5s ease both; }
.brand-splash--active .brand-splash__overline { animation: splashReveal .42s .35s ease-out both; }
.brand-splash--active .brand-splash__title { animation: splashReveal .45s .58s ease-out both, splashTitleFlicker 2.5s .58s linear both; }
.brand-splash--active .brand-splash__title::before, .brand-splash--active .brand-splash__title::after { animation: splashGlitch 2.5s .58s steps(1) both; }
.brand-splash--active .brand-splash__credit { animation: splashReveal .4s .92s ease-out both; }
.brand-splash--active .brand-splash__corner { animation: splashReveal .3s .18s ease-out both; }
@keyframes splashRain { 0% { opacity: 0; transform: translateY(-8%); } 18% { opacity: .72; } 78% { opacity: .46; } 100% { opacity: 0; transform: translateY(14%); } }
@keyframes splashScan { 0%, 12% { opacity: 0; transform: translateY(-32vh); } 21% { opacity: .85; } 52% { opacity: .26; } 100% { opacity: 0; transform: translateY(36vh); } }
@keyframes splashReveal { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes splashTitleFlicker { 0%, 8%, 100% { opacity: 1; } 9% { opacity: .38; } 10% { opacity: 1; } 58% { opacity: 1; } 59% { opacity: .72; } 60% { opacity: 1; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes splashGlitch { 0%, 17%, 20%, 63%, 66%, 100% { opacity: 0; } 18%, 64% { opacity: .92; } 19%, 65% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) {
  .brand-splash__rain, .brand-splash__scan { display: none; }
  .brand-splash--reduced .brand-splash__overline, .brand-splash--reduced .brand-splash__title, .brand-splash--reduced .brand-splash__credit, .brand-splash--reduced .brand-splash__corner { opacity: 1; animation: none; }
  .brand-splash--reduced .brand-splash__title::before, .brand-splash--reduced .brand-splash__title::after { animation: none; }
  #startScreen h1, #startScreen h1::before, #startScreen h1::after, .phase-briefing__matrix { animation: none; }
  #startScreen h1::before, #startScreen h1::after { display: none; }
}
#view { display: block; width: 100%; height: 100%; touch-action: none; transition: filter .18s, transform .12s; }
.share-screen { position: absolute; z-index: 60; inset: 0; display: grid; align-content: start; justify-items: center; gap: 14px; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 18%, #17321f, #050806 64%); text-align: center; }
.share-header { display: grid; justify-items: center; gap: 7px; width: min(720px, 100%); }
.share-header h1 { margin: 0; color: var(--green); font-size: clamp(1.7rem, 7vw, 3rem); line-height: 1.12; text-wrap: balance; }
.share-rank, .share-detail, .share-invalid { margin: 0; }
.share-rank { color: var(--hi); font-weight: 800; }
.share-content { display: grid; justify-items: center; gap: 10px; width: min(720px, 100%); }
.share-comparison { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.share-comparison figure { display: grid; gap: 5px; margin: 0; padding: 8px; border: 1px solid var(--line); background: #08100b; box-shadow: 5px 5px 0 #0008; }
.share-comparison figcaption { color: var(--green); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-align: left; }
.share-comparison canvas { display: block; width: 100%; height: auto; background: #050806; }
.share-detail { color: var(--ink); font-weight: 800; }
.share-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; }
.share-navigation button { min-height: 42px; padding-block: 6px; }
.share-navigation strong { min-width: 4.5em; color: var(--hi); font-variant-numeric: tabular-nums; }
.share-invalid { max-width: 36em; padding: 18px; color: var(--hi); border: 1px solid var(--danger); background: #260a09; }
.share-play { width: min(360px, 100%); }
@media (min-width: 900px) { .share-screen { align-content: center; } }
.screen-card { position: absolute; z-index: 30; inset: 0; display: grid; align-content: center; align-content: safe center; overflow-y: auto; justify-items: center; gap: 14px; padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); text-align: center; background: radial-gradient(circle at 50% 35%, #18331f, #050806 68%); }
.screen-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #0002 3px 4px); }
.screen-card > * { position: relative; z-index: 1; }
#startScreen { --start-control-width: min(390px, 92vw); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; gap: 0; overflow: hidden; padding-top: max(42px, env(safe-area-inset-top)); padding-bottom: max(82px, calc(env(safe-area-inset-bottom) + 74px)); background: #050806; }
#startScreen .entry-rain { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
#startScreen h1 { position: relative; width: 100%; margin: 0 0 clamp(14px, 2vh, 22px); color: #76ff9d; font-size: clamp(92px, 7.2vw, 98px); font-weight: 950; letter-spacing: -.055em; line-height: .92; white-space: nowrap; text-shadow: 0 0 8px #76ff9d8c, 0 0 28px #3cff7440; animation: terminalTitleFlicker 7s steps(1) infinite; }
#startScreen h1::before, #startScreen h1::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
#startScreen h1::before { color: #baffcb; transform: translateX(-2px); clip-path: inset(17% 0 61% 0); animation: terminalTitleGlitch 8s steps(1) infinite; }
#startScreen h1::after { color: #168a3b; transform: translateX(3px); clip-path: inset(66% 0 14% 0); animation: terminalTitleGlitch 8s .08s steps(1) infinite reverse; }
@keyframes terminalTitleFlicker { 0%, 5%, 7%, 48%, 50%, 100% { opacity: 1; } 6%, 49% { opacity: .62; } }
@keyframes terminalTitleGlitch { 0%, 43%, 46%, 78%, 81%, 100% { opacity: 0; } 44%, 79% { opacity: .85; } 45%, 80% { opacity: .3; } }
#startScreen p { margin: 0; text-wrap: balance; }
.start-information, .start-actions { display: grid; justify-items: center; width: 100%; }
.start-information { align-self: auto; grid-template-rows: repeat(5, auto); align-content: center; width: var(--start-control-width); min-height: 0; gap: 4px; }
.start-actions { align-self: auto; width: var(--start-control-width); gap: 9px; margin-top: clamp(24px, 3.2vh, 34px); }
#startScreen .eyebrow { width: 100%; margin-bottom: clamp(7px, 1vh, 11px); color: #87f3a5; font-size: clamp(12px, 1.1vw, 15px); font-weight: 800; letter-spacing: .11em; line-height: 1.15; white-space: nowrap; }
#startScreen .premise { width: 100%; color: #eef8ef; font-size: clamp(13px, 1.08vw, 15px); line-height: 1.25; white-space: nowrap; }
.start-rule { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 4px 8px; margin: 0; color: var(--hi); font-size: .78rem; line-height: 1.2; }
.start-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; width: var(--start-control-width); padding: 10px; border: 1px solid #76ff9d55; border-radius: 8px; background: #061008bb; text-align: left; }
.start-options label { display: grid; gap: 5px; color: var(--dim); font-size: .78rem; }
.start-options select {
  width: 100%; min-height: 48px; padding: 8px 34px 8px 10px;
  color: #dfffe7; color-scheme: dark;
  appearance: none; -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #76ff9d 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, #76ff9d 50%, transparent 50%) calc(100% - 11px) 50% / 6px 6px no-repeat,
    linear-gradient(180deg, #102116, #050806);
  border: 1px solid #39bd62; border-radius: 4px;
  box-shadow: inset 0 0 0 1px #0b3518, 0 0 0 1px #000;
  font-weight: 800; letter-spacing: .02em; cursor: pointer;
}
.start-options select:hover { border-color: #76ff9d; box-shadow: inset 0 0 0 1px #176330, 0 0 12px #76ff9d24; }
.start-options select:focus-visible { outline: 3px solid #f6df72; outline-offset: 2px; border-color: #b9ffcc; }
.rank-card { box-sizing: border-box; display: inline-grid; align-self: auto; gap: 5px; width: var(--start-control-width); margin: clamp(34px, 4.5vh, 48px) 0 0; padding: 13px 16px; border: 2px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 1px #76ff9d33; text-align: center; }
#currentRank { display: -webkit-box; overflow: hidden; color: var(--green); font-size: clamp(18px, 4.4vw, 21px); font-weight: 900; letter-spacing: .08em; line-height: 1.35; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rank-record { color: var(--green); font-size: .72rem; line-height: 1.35; }
.rank-percentile { color: #f1d780; font-size: .88rem; font-weight: 850; line-height: 1.4; }
.rank-growth-hint { color: #a9b7ab; font-size: .68rem; line-height: 1.35; }
.rank-card[data-rank="3"] { border-color: var(--green); box-shadow: inset 0 0 0 1px #76ff9d77; }
.rank-card[data-rank="4"], .rank-card[data-rank="5"] { border-color: #8fffbf; box-shadow: inset 0 0 0 1px #8fffbf77; }
.rank-card[data-rank="4"] #currentRank, .rank-card[data-rank="5"] #currentRank { color: #8fffbf; text-shadow: 0 0 9px rgba(89,255,155,.5); }
#multiplayerScreen h2 { margin: 0; color: var(--green); font-size: 32px; }
.lobby-card { box-sizing: border-box; position: relative; z-index: 1; display: grid; gap: 10px; width: min(420px, 100%); padding: 16px; border: 1px solid var(--line); background: #08100bd9; text-align: left; }
.lobby-card label { display: grid; gap: 5px; }
.lobby-card input { min-height: 48px; padding: 8px 10px; color: var(--ink); background: #050806; border: 1px solid var(--line); border-radius: 6px; }
.nickname-summary { margin: 0; color: var(--hi); }
.nickname-summary button { min-height: auto; margin-left: 6px; padding: 3px 8px; font-size: 13px; }
.room-choice-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); background: #101711; }
.room-choice-card h3, .room-choice-card p { margin: 0; }
.room-choice-card h3 { color: var(--green); }
.room-choice-card p { color: var(--dim); font-size: 14px; }
#playerList { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#playerList li { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid #35553d88; }
#roomCodeDisplay { display: inline-block; margin-left: 8px; color: var(--green); font-size: clamp(28px, 9vw, 44px); letter-spacing: .14em; }
.voice-controls { display: grid; grid-template-columns: 1fr; gap: 8px; }
.voice-controls p { grid-column: 1 / -1; }
.voice-controls button { width: 100%; }
.participant-summary { margin: 0; color: var(--hi); font-weight: 900; }
.player-speaking { color: var(--green); text-shadow: 0 0 8px var(--green); }
/* 결산은 더 이상 세로로 쌓는 카드가 아니라 서류다 — 버튼은 글자 폭만 쓴다(2026-08-20). */
#startRound { width: var(--start-control-width); white-space: nowrap; }
#startRound { min-height: clamp(76px, 8.5vh, 86px); margin-top: 12px; font-size: clamp(20px, 5vw, 24px); }
.sound-toggle { min-height: 38px; padding: 5px 12px; color: var(--green); background: #061008bb; }
.start-feature-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; width: var(--start-control-width); margin-top: 1px; }
.feature-toggle-stack { display: grid; align-content: start; gap: 4px; min-width: 0; }
.feature-toggle-stack > button { width: 100%; }
button.feature-toggle-button { min-height: 48px; color: #aeb9b0; background: #061008; border-color: #76ff9d55; box-shadow: inset 4px 0 0 #39443b, 2px 2px 0 #0008; font-weight: 800; }
button.feature-toggle-button[aria-pressed="true"] { color: var(--green); background: #07140b; border-color: var(--green); box-shadow: inset 4px 0 0 var(--green), 0 0 14px #76ff9d38, 2px 2px 0 #0008; font-weight: 950; }
button.feature-toggle-button:disabled { color: #747b75; background: #080b09; border-style: dashed; border-color: #747b7577; box-shadow: none; opacity: .64; }
.gyro-toggle { min-height: 38px; padding: 5px 12px; color: var(--hi); background: #061008bb; }
.gyro-toggle.phone-only, #hudGyroButton.phone-only { color: #778079; background: #111512; border-color: #4c544e; border-style: dashed; box-shadow: none; filter: grayscale(1); opacity: .52; }
.phone-look-help { max-width: 32em; margin-top: 1px; color: var(--dim); font-size: .68rem; line-height: 1.35; }
.sound-toggle[aria-pressed="false"] { color: var(--dim); }
#startMessage { min-height: 1.5em; }
#startMessage:empty { display: none; }
.entry-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; width: var(--start-control-width); margin-top: 2px; }
.entry-secondary-actions > * { min-width: 0; }
.entry-secondary-actions button { width: 100%; min-height: 48px; padding: 8px 12px; }
.multiplayer-entry { display: grid; flex: 1 1 0; gap: 4px; }
.multiplayer-entry button { width: 100%; border-color: var(--green); }
.multiplayer-entry .note { max-width: 20em; font-size: 11px; line-height: 1.35; }
/* 마우스가 달린 기기에서만 보인다 — 폰에서는 자리만 차지한다. */
#pcHint { display: none; align-self: end; width: var(--start-control-width); max-width: none; margin-top: 12px; color: #829086; font-size: .62rem; line-height: 1.2; opacity: .68; }
#pcHint details { margin-top: 4px; }
#pcHint summary { cursor: pointer; color: var(--green); }
@media (pointer: fine) { #pcHint { display: block; } }

#gameHud { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
#hudHeader { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); display: grid; grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr); align-items: start; gap: 8px 12px; }
#hudTop { display: contents; }
#timer, #attempts { position: absolute; top: calc(14px + env(safe-area-inset-top)); padding: 4px 8px; color: var(--green); background: #061008bb; border: 1px solid #76ff9d55; text-shadow: 0 0 8px #000; }
#timer { position: static; transform: none; padding: 0; border: 0; background: none; font-size: clamp(2.5rem, 3.8vw, 4.5rem); line-height: .95; font-variant-numeric: tabular-nums; font-weight: 950; }
.timer-chip { grid-column: 2; grid-row: 1; display: grid; justify-items: center; min-width: 150px; padding: 7px 14px; color: var(--green); background: #061008e6; border: 2px solid #76ff9d77; border-radius: 8px; text-shadow: 0 0 8px #000; }
.timer-label { color: var(--dim); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
#attempts { position: static; grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; justify-self: start; align-self: center; }
.attempt-label, .attempt-count { white-space: nowrap; }
.attempt-count { color: var(--hi); font-variant-numeric: tabular-nums; }
.attempt-dots { display: inline-flex; align-items: center; gap: 9px; }
.attempt-dot { display: block; width: 23px; height: 25px; background: center / contain no-repeat url('../assets/chance/guard-dollar-badge.svg'); filter: drop-shadow(0 0 5px #76ff9d77); }
.attempt-dot.is-full { opacity: 1; }
.attempt-dot.is-empty { background-image: url('../assets/chance/guard-badge-empty.svg'); opacity: .46; filter: grayscale(1) drop-shadow(0 0 1px #76ff9d44); }
#phasePrompt { position: static; grid-column: 1 / -1; grid-row: 2; transform: none; display: grid; justify-items: center; gap: 2px; width: fit-content; max-width: min(560px, calc(100vw - 28px)); justify-self: center; min-height: 0; padding: 5px 14px; color: #f4ecd5; background: #061008b3; border: 1px solid #76ff9d33; border-radius: 6px; text-align: center; text-wrap: balance; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.phase-state { color: var(--dim); font-size: var(--fs-hud-sm); font-weight: 700; }
.phase-order { font-size: var(--fs-hud-md); }
.phase-detail { color: #d8e6d8; font-size: var(--fs-hud-sm); font-weight: 700; }
#timer.warning { color: #ffe4a3; border-color: #ffd76a; background: #3d300ccc; }
#timer.critical { color: #fff; border-color: var(--danger); background: #4b0c0ccb; animation: timerBeat 1.1s ease-in-out infinite; }
#timer.memory-caution { color: #ffe4a3; }
.timer-chip.memory-caution { border-color: #ffd76a88; }
#timer.memory-warning { color: #ffe4a3; }
.timer-chip.memory-warning { border-color: var(--hi); }
#crosshair { position: absolute; z-index: 7; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; background: linear-gradient(var(--ink), var(--ink)) center/2px 16px no-repeat, linear-gradient(var(--ink), var(--ink)) center/16px 2px no-repeat; opacity: .9; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 3px #000c); transition: transform .16s, opacity .16s, filter .16s; }
#crosshair.targeted { transform: scale(1.55); opacity: 1; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 3px #000c) drop-shadow(0 0 5px #fff); }
#aimGuide { position: absolute; z-index: 8; left: 50%; bottom: calc(248px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: min(88vw, 28rem); margin: 0; padding: 4px 12px; color: var(--ink); background: #050806cc; border-radius: 8px; font-size: var(--fs-hud-md); font-weight: 800; text-align: center; text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
#aimLabel { position: absolute; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); color: var(--ink); border: 1px solid #ffffff99; padding: 4px 9px; background: #070a08f2; box-shadow: 0 0 10px #000; }
#aimFeedback { position: absolute; left: 50%; top: calc(50% + 72px); transform: translateX(-50%); margin: 0; padding: 3px 8px; color: var(--ink); background: #050806dd; border-radius: 5px; font-size: var(--fs-hud-sm); }
#aimLabel, #aimFeedback { max-width: calc(100vw - 24px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#reportAction { position: absolute; pointer-events: auto; left: 50%; bottom: calc(176px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
#reportButton { --hold-progress: 0%; position: relative; isolation: isolate; min-width: 214px; color: #071008; background: #e7bd52; border: 2px solid #ffe7a4; font-weight: 900; overflow: hidden; text-shadow: 0 1px #fff8; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#reportButton::before { content: ''; position: absolute; z-index: -1; inset: 0; width: var(--hold-progress); pointer-events: none; background: linear-gradient(90deg, #fff36d, #fff); box-shadow: 4px 0 0 #141b14, 8px 0 16px #fff8; }
#reportButton.report-holding { color: #020502; border-color: #fff; outline: 3px solid #101810; outline-offset: 2px; }
#reportHint { color: var(--dim); font-size: var(--fs-hud-sm); text-align: center; text-shadow: 0 0 3px #000; }
#reportButton.aim-required { opacity: .56; }
.phase-briefing { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 38%, #102819, #020604 70%); overflow: hidden; isolation: isolate; }
.phase-briefing[hidden] { display: none; }
.phase-briefing > .entry-rain { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .82; }
.phase-briefing__matrix { position: absolute; z-index: 1; inset: -18% 0; overflow: hidden; opacity: .32; pointer-events: none; background-image: repeating-linear-gradient(180deg, #4dff8338 0 2px, transparent 2px 28px), repeating-linear-gradient(90deg, transparent 0 5vw, #48f47b1f 5vw 5.1vw, transparent 5.1vw 10vw); animation: briefingMatrix 7s linear infinite; }
.phase-briefing[data-briefing="explore"] .phase-briefing__matrix { opacity: .42; animation-duration: 4.8s; filter: hue-rotate(-18deg) saturate(1.2); }
.phase-briefing__matrix::after { content: '01  17  03  09  21  04  15  08\A  19  02  13  05  11  23  07\A 04  16  01  22  06  14  10  03\A  08  20  12  02  18  05  09'; position: absolute; inset: 0; color: #64ff9147; font-size: clamp(12px, 1.4vw, 20px); line-height: 2.2; letter-spacing: 4.8vw; white-space: pre; word-break: normal; }
@keyframes briefingMatrix { from { transform: translateY(-7%); } to { transform: translateY(10%); } }
.phase-briefing__card { position: relative; z-index: 2; width: min(620px, 100%); max-height: 100%; display: grid; grid-template-rows: auto auto minmax(0, auto) auto auto auto; gap: 14px; padding: clamp(22px, 5vw, 38px); overflow: hidden; border: 2px solid #72bf84; border-radius: 12px; background: #08100bf2; box-shadow: 10px 10px 0 #0008, inset 0 0 0 3px #08100b, inset 0 0 0 4px #376e45; }
.phase-briefing h2 { margin: 0; color: #bfffcf; font-size: clamp(1.65rem, 5vw, 2.45rem); line-height: 1.08; text-shadow: 0 0 14px #59ff9b33; text-wrap: balance; }
.phase-briefing__copy { display: grid; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; color: #e4e7df; line-height: 1.65; }
.phase-briefing__copy p, .phase-briefing__tip, .phase-briefing__card > p { margin: 0; }
.phase-briefing__tip { color: #b9c8bc; font-size: .84rem; font-weight: 700; }
.phase-briefing__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.phase-briefing__features button { border-radius: 4px; }
#phaseBriefingConfirm { width: 100%; min-height: 54px; color: #061008; background: var(--green); border: 2px solid #c8ffd7; border-radius: 4px; box-shadow: 5px 5px 0 #16843a, 0 8px 24px #0008, 0 0 18px #76ff9d44; font-weight: 950; letter-spacing: .04em; }
#phaseBriefingConfirm::after { content: '  →'; }
#phaseBriefingConfirm:hover { filter: brightness(1.08); }
#phaseBriefingConfirm:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 520px) { .phase-briefing__features { grid-template-columns: 1fr; } .phase-briefing__card { gap: 11px; } }
@media (max-width: 520px) and (max-height: 620px) {
  .phase-briefing { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .phase-briefing__card { gap: 8px; padding: 14px; }
  .phase-briefing__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .phase-briefing__features button { min-width: 0; padding-inline: 6px; font-size: .78rem; }
  .phase-briefing h2 { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  .phase-briefing__copy { gap: 7px; line-height: 1.45; }
}
.multiplayer-role { position: absolute; left: calc(14px + env(safe-area-inset-left)); top: calc(64px + env(safe-area-inset-top)); width: min(44vw, 360px); margin: 0; padding: 8px 10px; color: var(--hi); background: #071008d9; border: 1px solid var(--hi); font-size: var(--fs-hud-sm); font-weight: 800; text-align: left; text-shadow: 0 2px 8px #000; }
#hudControls { position: static; grid-column: 3; grid-row: 1; pointer-events: auto; display: flex; justify-self: end; gap: 8px; }
#hudControls button { min-height: 48px; padding: 5px 10px; font-size: 13px; }
#challengeStatus { position: absolute; top: 62px; right: 0; display: grid; gap: 3px; width: max-content; max-width: min(294px, calc(100vw - 20px)); padding: 5px 7px; color: var(--dim); background: #061008c7; border: 1px solid #76ff9d33; border-radius: 6px; text-align: left; text-shadow: 0 1px 3px #000; }
.challenge-row { display: flex; justify-content: flex-start; align-items: center; gap: 3px; min-height: 16px; }
.challenge-row > span:not(.challenge-label) { display: inline-grid; place-items: center; min-width: 17px; min-height: 15px; padding: 1px 2px; color: #878d87; border: 1px solid #6c736c44; border-radius: 3px; filter: grayscale(1); font-size: .52rem; font-weight: 800; line-height: 1; opacity: .56; }
.challenge-row > span[aria-current="true"] { min-width: 25px; min-height: 20px; color: #061008; background: var(--hi); border-color: var(--hi); filter: none; font-size: .72rem; opacity: 1; box-shadow: 0 0 7px #76ff9d55; }
.challenge-label { margin-right: 2px; color: var(--dim); font-size: .56rem; font-weight: 800; letter-spacing: .04em; }
#challengeSummary { max-width: 276px; color: var(--hi); font-size: .62rem; line-height: 1.35; text-align: left; }
#hudGyroButton[aria-pressed="true"] { color: #061008; background: var(--green); border-color: var(--green); font-weight: 900; }
.keyboard-guide { position: absolute; left: calc(18px + env(safe-area-inset-left)); right: auto; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr; gap: 5px 9px; align-items: center; color: var(--hi); font-size: var(--fs-hud-sm); pointer-events: none; }
.look-guide { grid-column: 1 / -1; margin: 0; color: var(--ink); font-size: .9em; font-weight: 900; text-align: right; }
.key-group-label { color: var(--dim); font-size: .85em; letter-spacing: .12em; }
body[data-phase="memory"] .keyboard-guide { opacity: 1; }
body[data-phase="explore"] .keyboard-guide { opacity: .55; }
body[data-first-memory="true"] .keyboard-guide .key-group-label { color: var(--ink); }
.keycaps { display: flex; gap: 3px; }
.keycap { min-width: 1.8em; padding: .2em .35em; border: 1px solid #76ff9d88; background: #071008cc; color: var(--ink); text-align: center; box-shadow: 0 2px 0 #020a04; transition: transform .08s, background .08s, color .08s; }
.keycap.pressed { transform: translateY(2px); color: #071008; background: var(--hi); box-shadow: none; }
body[data-multiplayer-role="spectator"] #reportAction,
body[data-multiplayer-role="spectator"] .keyboard-guide { display: none; }
@keyframes timerBeat { 50% { transform: scale(1.06); } }
@media (max-height: 400px) {
  #hudHeader { top: calc(6px + env(safe-area-inset-top)); }
  #reportAction { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .multiplayer-role { top: calc(14px + env(safe-area-inset-top)); }
  .keyboard-guide { display: none; }
}
/* 짧은 화면에서는 왼쪽 아래 키 안내가 신고 행동 영역을 침범할 수 있다.
   전체 조작 설명은 시작 화면의 「조작 도움」에 남기고, 게임 안의 반복 안내만 접는다. */
@media (max-height: 599px) {
  .keyboard-guide { display: none; }
}
@media (max-width: 599px) {
  #hudHeader { display: block; height: 132px; }
  .timer-chip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 116px; padding: 5px 9px; }
  #timer { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  #attempts { position: absolute; top: 0; left: 0; display: grid; justify-items: start; gap: 1px; padding: 4px 6px; font-size: .66rem; line-height: 1.05; }
  #attempts .attempt-dots { gap: 5px; margin-top: 2px; }
  #attempts .attempt-dot { width: 16px; height: 18px; }
  #hudControls { position: absolute; top: 0; right: 0; display: grid; justify-items: stretch; gap: 4px; }
  #hudControls button { min-height: 48px; padding: 3px 7px; font-size: 10px; white-space: nowrap; }
  #phasePrompt { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 20px); }
  #challengeStatus { display: none; }
  body[data-phase="memory"] #challengeStatus { position: fixed; display: grid; top: auto; right: calc(18px + env(safe-area-inset-right)); bottom: calc(32px + env(safe-area-inset-bottom)); width: max-content; max-width: min(250px, calc(100vw - 36px)); }
  body[data-phase="memory"] .difficulty-scale > span:not(.challenge-label):not([aria-current="true"]) { display: none; }
  #hudControls button { flex: 0 1 auto; }
  .multiplayer-role { width: min(62vw, 320px); top: calc(248px + env(safe-area-inset-top)); }
  #reportAction { left: auto; right: calc(18px + env(safe-area-inset-right)); transform: none; bottom: calc(32px + env(safe-area-inset-bottom)); width: min(190px, calc(100vw - 172px)); }
  #reportButton { min-width: 0; width: 100%; padding-inline: 8px; }
  #reportHint { width: 100%; font-size: clamp(.58rem, 2.6vw, .76rem); }
  #aimGuide { bottom: calc(128px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) { #hudControls { gap: 5px; } #hudControls button { min-height: 48px; padding-inline: 8px; font-size: 12px; } }
@media (max-width: 599px) { #challengeStatus { width: max-content; max-width: min(250px, calc(100vw - 20px)); } }
@media (min-width: 600px) { #phasePrompt { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .report-loading__spinner { animation: none; } }
@media (prefers-reduced-motion: reduce) { #timer.critical, body.pressure-urgent #pressure { animation: none; } body.pressure-urgent #pressure { opacity: .62; } #crosshair, .keycap, #reportButton.report-holding::before { transition: none; } }

.joystick { display: none; position: absolute; z-index: 6; bottom: calc(32px + env(safe-area-inset-bottom)); width: 112px; height: 112px; border: 2px solid #76ff9d99; border-radius: 50%; background: #07100880; touch-action: none; }
/* 기억·탐색 두 위상 모두에서 뜬다. FR-A1 이 기억을 「자유롭게 걸어다니며 본다」로 규정하고
   UX-1·2 의 이동 조이스틱이 폰의 유일한 이동 수단이라, 여기서 숨기면 그
   15초 동안 이동 수단이 화면에 없다. 2026-08-20 폰 실측 — 기억에서 스틱을 끌어도 카메라
   z 3.600 → 3.600, 탐색에서는 3.600 → 2.104. UX-5 의 열거는 조준·정보 UI 의 것이지
   이동 조작이 아니다(AC-003-5). */
body[data-phase="memory"] .joystick,
body[data-phase="explore"] .joystick,
body[data-phase="review"] .joystick { display: block; }
body[data-phase="explore"] .joystick { opacity: .45; }
body[data-phase="explore"] .joystick:has(.joystick-knob[style*="translate"]) { opacity: 1; }
body[data-phase="explore"] .joystick-knob { box-shadow: none; }
#moveStick { left: calc(32px + env(safe-area-inset-left)); }
.joystick-knob { position: absolute; left: 32px; top: 32px; width: 48px; height: 48px; border-radius: 50%; background: #76ff9dcc; box-shadow: 0 0 14px #76ff9d88; pointer-events: none; }
.joystick-label { position: absolute; left: 50%; top: -1.7em; transform: translateX(-50%); color: var(--ink); font-size: var(--fs-hud-sm); font-weight: 800; text-shadow: 0 1px 3px #000; }
@media (pointer: fine) and (not (any-pointer: coarse)) { .joystick { display: none !important; } }

#pressure { position: absolute; z-index: 5; inset: 0; pointer-events: none; transition: box-shadow .3s, background .3s; }
body.memory-ending #pressure { background: radial-gradient(circle at 50% 50%, transparent 34%, #000 100%); opacity: var(--memory-dim, 0); }
body.pressure-first #pressure { box-shadow: inset 0 0 54px #000a; }
body.pressure-second #pressure { box-shadow: inset 0 0 70px #160000bb; }
body.pressure-urgent #pressure { background: radial-gradient(circle at 50% 50%, transparent 32%, #a00000c4 100%); animation: edgeBeat .42s ease-in-out infinite alternate; }
body.screen-pulse.pressure-second #view { animation: viewBeat .82s ease-in-out infinite; }
body.screen-pulse.pressure-urgent #view { animation-duration: .46s; }
@keyframes edgeBeat { from { opacity: .35; } to { opacity: 1; } }
@keyframes viewBeat { 50% { transform: scale(1.012); } }

#roundFx { position: absolute; z-index: 14; inset: 0; display: grid; place-items: center; pointer-events: none; color: white; font-size: clamp(28px, 8vw, 58px); font-weight: 900; text-shadow: 0 2px 14px #000; opacity: 0; }
.retry-overlay:not([hidden]) { position: absolute; z-index: 15; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 14px; }
.retry-notice { position: static; width: min(88vw, 460px); margin: 0; padding: 18px 22px; color: #f4ecd5; border: 1px solid #ffd76a88; background: radial-gradient(ellipse at center, #050806e6 0%, #050806bf 58%, #05080600 100%); line-height: 1.35; text-align: center; text-shadow: 0 2px 8px #000; }
.retry-notice p { margin: 0; }
.guidance-verdict { color: #f4ecd5; font-size: var(--fs-hud-lg); font-weight: 900; }
.guidance-summary { margin-top: .18rem !important; color: var(--hi); font-size: var(--fs-hud-sm); }
.retry-advice { display: grid; gap: .22rem; margin-top: .8rem; padding-top: .65rem; border-top: 1px solid #ffd76a55; }
.guidance-advice-label { color: var(--dim); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.guidance-hint { color: var(--hi); font-size: var(--fs-hud-md); font-weight: 900; }
.guidance-change { color: var(--dim); font-size: var(--fs-hud-sm); font-weight: 700; }
.guidance-change.eased { color: var(--green); font-size: var(--fs-hud-md); }
.guidance-attempts { display: grid; justify-items: center; gap: 5px; margin-top: .65rem !important; color: var(--hi); font-size: var(--fs-hud-md); font-weight: 900; }
.guidance-attempts .attempt-dots { gap: 10px; }
.guidance-retry { margin-top: .18rem !important; font-size: var(--fs-hud-sm); font-weight: 700; color: var(--hi); }
.guidance-consequence { margin-top: .7rem !important; padding-top: .55rem; border-top: 1px solid #ffd76a55; color: var(--dim); font-size: var(--fs-hud-sm); }
.retry-actions { position: static; display: grid; justify-items: center; gap: 10px; width: min(88vw, 320px); }
.retry-button { width: 100%; min-width: min(88vw, 320px); }
.retry-button:hover { filter: brightness(1.08); }
.retry-button:active { transform: scale(.97); }
.retry-button:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }
.retry-exit-button { width: max-content; min-height: 48px; padding-block: 7px; color: var(--ink); background: #050806bb; }
.report-loading { position: fixed; z-index: 1190; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: #caffd6; background: radial-gradient(circle at center, #061008e8 0 16%, #030604b8 42%, #03060466 72%, transparent); text-shadow: 0 0 12px #59ff9b77; pointer-events: all; }
.report-loading[hidden] { display: none; }
.report-loading__spinner { width: 46px; height: 46px; border: 4px solid #76ff9d33; border-top-color: #8fffbf; border-radius: 50%; box-shadow: 0 0 20px #59ff9b33; animation: reportSpin .72s linear infinite; }
@keyframes reportSpin { to { transform: rotate(360deg); } }
.retry-overlay[data-stake="last"] { width: min(calc(100vw - 32px), 460px); gap: 20px; }
.retry-overlay[data-stake="last"] .retry-notice { position: static; width: 100%; transform: none; padding: 20px 22px; border-top: 2px solid var(--hi); }
.retry-overlay[data-stake="last"] .retry-actions { position: static; width: min(88vw, 340px); transform: none; }
.retry-overlay[data-stake="last"] .guidance-stake { margin: .65rem 0 .25rem !important; color: var(--hi); font-size: var(--fs-hud-sm); font-weight: 900; letter-spacing: .12em; }
.retry-overlay[data-stake="last"] .guidance-attempts { margin-top: 0 !important; color: var(--hi); font-size: var(--fs-hud-md); }
.retry-overlay[data-stake="last"] .guidance-retry { margin-top: .16rem !important; color: var(--hi); font-size: var(--fs-hud-lg); font-weight: 900; text-shadow: 0 0 14px #ffd76a55; }
.retry-overlay[data-stake="last"] .guidance-hint { color: var(--hi); font-size: var(--fs-hud-md); }
.retry-overlay[data-stake="last"] .retry-button { box-shadow: 0 0 0 3px #ffd76a, 0 0 24px #ffd76a44; }
@media (max-width: 599px) { .retry-overlay[data-stake="last"] { width: calc(100vw - 32px); } }
@media (min-width: 1024px) { .retry-notice { width: min(70vw, 620px); } .retry-actions { width: 300px; } }
#roundFx.false-light { animation: falseLight .42s ease-out; }
#roundFx.false-heavy { animation: falseHeavy .9s ease-out; }
#roundFx.success { animation: successFlash .9s ease-out; }
#roundFx.rewind { background: radial-gradient(circle, #ccb36b33, #050403ee); animation: rewindFlash 1.05s ease-in-out; }
#roundFx.role { padding: 24px; background: #050806dd; font-size: clamp(22px, 6vw, 42px); line-height: 1.45; animation: rewindFlash 2.4s ease-in-out; }
@keyframes rewindFlash { 0% { opacity: 0; transform: scale(1.2); } 30%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.86); } }
@keyframes rewindFade { 0% { opacity: 0; } 35%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes falseLight { 20% { opacity: .8; background: #7d080822; transform: translateX(-3px); } 45% { transform: translateX(3px); } }
@keyframes falseHeavy { 12%, 36%, 60% { opacity: 1; background: #8d080866; transform: translateX(-9px); } 24%, 48%, 72% { transform: translateX(9px); } }
@keyframes successFlash { 12% { opacity: 1; background: #fff8cfdd; color: #312500; } 100% { opacity: 0; background: #e8c54822; } }
#stampMark { position: absolute; z-index: 18; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-8deg); padding: 12px 18px; color: #8e100e; border: 5px double #8e100e; background: #eddfbdde; font-size: clamp(27px, 8vw, 52px); font-weight: 900; animation: stamp .42s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0; } }

/* ── 결산 그림자극 ──────────────────────────────────────────────────────────
   왼쪽 램프가 켜지고 벽이 밝아진 뒤 인물이 양쪽에서 들어온다. 램프에 가까운 인물은 크고
   흐리게, 먼 인물은 작고 또렷하게 진다 — 그림자의 크기는 광원과의 거리가 정한다.
   실루엣 도형의 정본은 js/ui/shadowPlay.js 다. 연출은 무대가 «꽂히는 순간» 시작하므로
   따로 켜는 분류가 없다 — 전체 화면과 보고서의 증거 사진 양쪽에서 같게 돈다. */
#endingLayer { position: absolute; z-index: 16; inset: 0; overflow: hidden; pointer-events: none; }
/* 무대는 «자기 폭»을 재는 그릇이다 — 이 무대가 전체 화면에도, 보고서의 손바닥만 한 증거 사진에도
   꽂히므로 vw 로 재면 사진 안에서 사람이 화면 밖으로 나간다. */
.stage { container-type: size; position: absolute; inset: 0; overflow: hidden; background: #1a1710; }
.wall { position: absolute; inset: 0; filter: brightness(.16); animation: wallUp 1.1s ease-out forwards;
  background: radial-gradient(120% 82% at 12% 24%, #d3c39a, #94845f 44%, #4d4433 76%, #221d16); }
.wall::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #0000 0 3px, #00000012 3px 4px); }
.lamp { position: absolute; left: 6%; top: 19%; width: 26px; height: 26px; border-radius: 50%; background: #ffe9b0; box-shadow: 0 0 90px 30px #ffdf9a55; opacity: 0; animation: lampOn .8s ease-out .1s forwards; }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(#0000, #0b0906aa 36%, #070605bb); }
.cast { --room: calc(92cqw / var(--cast)); position: absolute; left: 0; right: 0; bottom: 20%; height: 62%; display: flex; align-items: flex-end; justify-content: center; gap: 1%; }
.cast-2 { --cast: 2; }
/* 기본이 셋이고 다섯은 «넓은 무대에서만» 켜지는 확장이다 — 컨테이너 질의를 모르는 브라우저에서
   기본을 다섯으로 두면 그 축소가 조용히 사라져 폰에서 사람이 잘게 줄어든다(codex R8 LOW-1). */
.cast-5 { --cast: 3; }
.cast-5 .v1, .cast-5 .v3 { display: none; }

/* 무대가 넓을 때만 다섯으로 넓힌다 — 폰 세로에서 다섯은 구조적으로 잘게 줄어든다(한 사람이 쓸
   폭이 없다). 넓히는 것은 사람을 다시 보이게 하는 것만으로 부족하고 --cast 도 함께 올려야 그
   폭이 다섯 몫으로 나뉜다. */
@container (min-width: 700px) {
  .cast-5 { --cast: 5; }
  .cast-5 .v1, .cast-5 .v3 { display: revert; }
}

/* 동작 줄이기를 요청한 사용자에게는 반복을 멈춘다(codex R8 MED-4) — 결산은 다음 행동을 고르는
   정보 화면이라 반복 동작이 필수 정보가 아니다. 끄는 것이 아니라 «끝 상태로 스냅»해 인물과
   도장은 그대로 읽히게 둔다. */
@media (prefers-reduced-motion: reduce) {
  #startScreen .entry-rain { opacity: .12; }
  .stage *, #resultStamp {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  #roundFx.rewind { animation: rewindFade .5s ease-out; }
}
@keyframes lampOn { to { opacity: 1; } }
@keyframes wallUp { to { filter: brightness(1); } }

/* 키는 «무대 높이»와 «인원수로 나눈 가로 폭» 중 작은 쪽을 따른다 — 폰 세로에서는 폭이, PC 에서는
   높이가 이긴다. 2.95 는 도형의 세로/가로 비(260/88)다. 이것 없이 flex 축소에 맡기면 다섯이 설 때
   폰에서 사람이 잘게 줄어 화면이 텅 빈다(2026-08-20 실측). */
.figure { min-width: 0; height: 76%; height: min(76%, calc(var(--room) * 2.24)); opacity: .92; filter: blur(.5px); transform-origin: 50% 100%; }
.figure .ink { fill: #0b0906; }
.figure .limb { fill: none; stroke: #0b0906; stroke-linecap: round; stroke-linejoin: round; }
.figure .arm { transform-box: view-box; }
.figure.manager { height: 100%; height: min(100%, calc(var(--room) * 2.95)); }
.figure.guard { height: 86%; height: min(86%, calc(var(--room) * 2.54)); }
.figure.visitor { height: 68%; height: min(68%, calc(var(--room) * 2.01)); opacity: .82; }
.figure.near { filter: blur(1.3px); }
.figure.far { filter: blur(.3px); }
/* 회전축은 viewBox 안의 좌표다 — viewBox 가 x=16 에서 시작하므로 몸 한가운데(60)는 여기서 44 다. */
.figure .upper { transform-box: view-box; transform-origin: 44px 118px; }

.failure .manager { animation: enterLeft .9s cubic-bezier(.2, .8, .3, 1) .45s both; }
.failure .guard { animation: enterRight .9s cubic-bezier(.2, .8, .3, 1) .65s both; }
.failure .guard .upper { animation: bow 1.6s ease-in-out 1.7s infinite alternate; }
.failure .manager .arm.right { animation: point 1.1s ease-in-out 1.5s infinite alternate; }
.success .figure { animation: enterUp .8s cubic-bezier(.2, .9, .3, 1) both; }
.success .manager { animation-delay: .45s; }
.success .guard { animation-delay: .6s; }
.success .v1 { animation-delay: .95s; }
.success .v2 { animation-delay: 1.15s; }
.success .v3 { animation-delay: 1.35s; }
.success .arm.left { animation: clapLeft .34s ease-in-out 1.6s infinite alternate; }
.success .arm.right { animation: clapRight .34s ease-in-out 1.6s infinite alternate; }
@keyframes enterLeft { from { opacity: 0; transform: translateX(-22%); } to { transform: none; } }
@keyframes enterRight { from { opacity: 0; transform: translateX(22%); } to { transform: none; } }
@keyframes enterUp { from { opacity: 0; transform: translateY(14%) scaleY(.86); } to { transform: none; } }
@keyframes point { from { transform: rotate(6deg); } to { transform: rotate(-58deg); } }

.legal-footer {
  position: absolute !important;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(5px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 9px;
  margin-top: 0;
  color: var(--dim);
  font-size: .66rem;
  line-height: 1.15;
  opacity: .58;
}
.legal-separator { color: #35553d; text-decoration: none; }
.legal-footer a { display: inline-block; padding: 3px 2px; color: inherit; text-underline-offset: .2em; }
.legal-footer a:hover, .legal-footer a:focus-visible { color: #8fffbf; }
.legal-footer .contact { white-space: nowrap; }
.contact-email { display: inline-block; min-height: 48px; padding: 7px 2px; color: inherit; background: none; border: 0; border-radius: 0; text-decoration: underline; text-underline-offset: .2em; }
.contact-email:hover, .contact-email:focus-visible { color: #e8c978; }
.contact-copy-message { min-width: 5.5em; color: var(--green); }
.contact-copy-message:empty { min-width: 0; }

@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  #startScreen { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); align-content: center; gap: 12px 18px; padding: 8px 18px 34px; overflow: hidden; }
  .start-information { gap: 3px; }
  .start-actions { gap: 4px; margin-top: 0; }
  #startScreen .eyebrow { margin-bottom: 3px; font-size: .68rem; }
  #startScreen h1 { margin-bottom: 5px; font-size: clamp(30px, 11vh, 42px); line-height: 1; }
  #startScreen .premise { font-size: .76rem; }
  .start-rule { gap: 3px 7px; font-size: .72rem; }
  .rank-card { gap: 1px; min-width: 0; max-width: 100%; padding: 5px 8px; }
  #currentRank { font-size: 14px; -webkit-line-clamp: 1; }
  .rank-record, .rank-percentile { font-size: .62rem; }
  #pcHint { display: none; }
  .start-options { width: 100%; padding: 5px 7px; }
  .start-options label { gap: 2px; font-size: .65rem; }
  .start-options select { min-height: 48px; }
  #startRound { min-height: 48px; margin-top: 0; font-size: 17px; }
  .start-feature-toggles { gap: 5px; }
  .start-feature-toggles button { min-height: 48px; padding-block: 3px; font-size: .72rem; }
  .phone-look-help { font-size: .56rem; }
  .entry-secondary-actions { margin-top: 0; }
  .entry-secondary-actions button { min-height: 48px; padding-block: 4px; font-size: .72rem; }
  .legal-footer { font-size: .55rem; }
  .contact-email { min-height: 48px; padding-block: 3px; }
}

/* 법률 문서는 진입 화면의 색·테두리 체계를 공유하되, 게임 캔버스의 화면 고정 규칙에서는 벗어난다. */
html:has(.legal-page), body.legal-page { min-height: 100%; overflow: auto; }
body.legal-page { background: radial-gradient(circle at 50% 20%, #18331f, var(--bg) 68%); }
.legal-page main { width: min(820px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 72px; }
.legal-page article { padding: clamp(22px, 5vw, 44px); border: 1px solid var(--line); border-radius: 16px; background: #101711f0; box-shadow: 0 18px 50px #0008; }
.legal-page h1 { margin: 0 0 .35rem; color: var(--green); font-size: clamp(1.8rem, 7vw, 3.2rem); text-shadow: 0 0 18px #76ff9d55; }
.legal-page h2 { margin: 2rem 0 .5rem; color: var(--hi); font-size: 1.15rem; }
.legal-page p, .legal-page li, .legal-page th, .legal-page td { line-height: 1.75; }
.legal-page .meta { color: var(--dim); }
.legal-page a { color: var(--hi); text-underline-offset: .2em; }
.legal-page nav { margin-bottom: 18px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.legal-page th, .legal-page td { padding: .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-page th { background: #172019; }
.legal-page code { overflow-wrap: anywhere; color: var(--hi); }
.legal-page footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--dim); }
@media (max-width: 620px) { .legal-page table, .legal-page tbody, .legal-page tr, .legal-page th, .legal-page td { display: block; } .legal-page th { border-bottom: 0; } .legal-page tr { margin-bottom: .8rem; } }
/* 정면 실루엣은 «앞으로 숙이는 절»을 회전으로 그릴 수 없다 — 옆으로 돌리면 넘어지는 그림이 된다.
   그 실측은 스펙 FR-F3 ⓑ에 있다. 그래서 허리에서 눌러 어깨를 떨어뜨린다. */
@keyframes bow { from { transform: rotate(0) scaleY(1); } to { transform: rotate(5deg) scaleY(.87); } }
@keyframes clapLeft { from { transform: rotate(-38deg); } to { transform: rotate(-8deg); } }
@keyframes clapRight { from { transform: rotate(38deg); } to { transform: rotate(8deg); } }
/* 되찾은 유물은 군중 «머리 위» 벽 선반으로 돌아간다 — 발치에 두면 사람과 겹치고(폰에서는 사람이
   화면 폭을 다 쓴다), 선반 없이 띄우면 병처럼 뜬다. 뚜껑이 넓고 몸이 통통해야 항아리로 읽힌다. */

/* ── 근무 보고서 ────────────────────────────────────────────────────────────
   결과 화면 자체가 서류다 — 전시관 letterhead · 증거 사진 · 점선 항목 · 내리찍히는 도장.
   「제 N야 근무 보고」라는 이름이 이미 서류인데 화면만 서류가 아니었다(주인 승인 2026-08-20 · B안).
   그림자극을 «덮지» 않고 그 위에 뜬다 — 불투명하게 깔면 연출이 1.4초만에 사라진다. */
#resultScreen { position: absolute; z-index: 30; inset: 0; display: grid; align-content: center; align-content: safe center; justify-items: center; gap: clamp(18px, 4vh, 38px); overflow: auto; background: #050806bb;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.paper { position: relative; width: min(360px, 100%); padding: 14px 16px 24px; color: #241f13; background: linear-gradient(#f6efdc, #e6dcc0); box-shadow: 0 14px 40px #000c; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; }
.paper::after { content: ''; display: block; height: 4px; margin: 14px -16px -24px; background: #7c1f18; }
#resultScreen.success .paper::after { background: #b68b2f; }
.paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0000 0 15px, #00000008 15px 16px); }
.letterhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid #241f13; font-size: 10px; letter-spacing: .1em; }
.letterhead b { font-size: 12px; }
.photo { position: relative; height: 92px; margin-bottom: 6px; overflow: hidden; border: 4px solid #fbf6e8; background: #14120c; box-shadow: 0 6px 14px #0006; }
.photo .stage { filter: sepia(.55) contrast(1.06); }
.photo .lamp { width: 10px; height: 10px; box-shadow: 0 0 34px 12px #ffdf9a55; }
#resultKicker { margin: 0; color: #5c5340; font-size: 10px; letter-spacing: .18em; }
#resultScreen h2 { margin: 0 72px 4px 0; color: #241f13; font-size: 21px; letter-spacing: -.01em; }
.result-challenge { margin: 3px 0 8px; padding: 8px 10px; color: #fff8e8; background: #7c1f18; font-size: clamp(17px, 4.8vw, 24px); font-weight: 950; line-height: 1.15; letter-spacing: -.02em; text-align: center; }
#resultScreen.success .result-challenge { color: #efffed; background: #1c5c2c; }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; border-bottom: 1px dotted #241f1355; font-size: 11px; }
.line b { font-weight: 800; text-align: right; }
.line.key-result { padding: 5px 0 4px; border-bottom: 2px solid #6f5b32; color: #3f2d12; font-size: 14px; letter-spacing: .02em; }
.line.key-result span { font-weight: 700; }
.line.note { display: block; }
.line.note span { display: block; color: #5c5340; font-size: 10px; letter-spacing: .1em; }
.line.note { margin: 7px 0; padding: 7px 9px; border-left: 3px solid #8b6b2f; background: #d8bf8844; }
.line.note b { display: block; color: #241f13; font-weight: 500; line-height: 1.5; text-align: left; }
/* 종이 «안»에 둔다 — 밖으로 걸치면 부푸는 순간의 변형 상자가 스크롤 넘침에 들어가 오른쪽이
   잘린다(claude R8 MED-4). 배율도 2.6 에서 1.7 로 낮춰 종이 밖으로 나가지 않게 한다. */
#resultStamp { pointer-events: none; position: absolute; right: 12px; top: 44px; padding: 4px 10px; border: 4px double #8e100e; color: #8e100e; background: #f4ead0dd; font-size: 22px; font-weight: 900; transform: rotate(-13deg); opacity: 0; animation: stampDown .5s cubic-bezier(.2, .9, .3, 1) .35s forwards; }
#resultScreen.success #resultStamp { border-color: #1c5c2c; color: #1c5c2c; }
@keyframes stampDown { from { opacity: 0; transform: rotate(-13deg) scale(1.7); } to { opacity: 1; transform: rotate(-13deg) scale(1); } }
.report-actions { display: grid; justify-items: center; gap: 8px; }
.report-secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.report-primary-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px; width: min(360px, 100%); }
#nextRound { width: 100%; color: #171006; background: linear-gradient(180deg, #ffd96d, #d99d24); border: 2px solid #6f4a08; box-shadow: 0 5px 0 #6f4a08, 0 9px 20px #0004; font-weight: 950; }
#nextRound:hover { filter: brightness(1.08); }
#nextRound:active { transform: translateY(3px); box-shadow: 0 2px 0 #6f4a08; }
#exitGame { color: #f6efdc; background: #050806cc; }
.report-actions button:focus-visible { outline: 2px solid #b68b2f; outline-offset: 3px; }
#resultMessage:empty { display: none; }
#resultStar { display: inline-flex; align-items: baseline; gap: .28em; }
#resultStar .grade-stars { font-size: 1.2em; }
.rank-line { flex-wrap: nowrap; }
.rank-line small { width: auto; color: #5c5340; font-size: 10px; text-align: right; white-space: nowrap; }
.result-growth-hint { margin: 7px 0 0; color: #5c5340; font-size: 10px; font-weight: 750; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { #resultStamp { animation: none; opacity: 1; transform: rotate(-13deg); } }
@media (min-width: 700px) { .paper { width: min(620px, 100%); padding: 20px 24px 28px; } .report-body { display: grid; grid-template-columns: minmax(180px, 36%) 1fr; gap: 20px; align-items: start; } .photo { height: 170px; } .paper::after { margin-inline: -24px; margin-bottom: -28px; } }
@media (max-width: 420px) { .rank-line b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
#reviewExit { position: absolute; z-index: 12; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
#resultMessage { text-align: center; }
#scorePanel { max-height: min(680px, calc(100dvh - 24px)); overflow: auto; }
#scorePanel section { display: grid; gap: 10px; }
#scorePanel h2 { margin: 0; }
#scorePanel ol { margin: 0; padding-left: 24px; }

/* 폰 가로 — 종이를 세로로 쌓으면 위아래가 잘린다(주인 지적 2026-08-20). 높이 대신 폭을 쓴다.
   질의에 orientation 을 함께 적는 것은 서술이면서 동시에 «구별»이다 — 시작 화면의
   @media (max-height: 560px) 와 문자열이 같으면 AC-32 변조가 앵커를 둘 찾아 죽는다. */
@media (orientation: landscape) and (max-height: 560px) {
  .paper { box-sizing: border-box; width: 100%; height: calc(100dvh - 12px); padding: 9px 12px 30px; overflow: hidden; }
  /* 종이 아래의 색 띠는 장식이다. 일반 흐름에 두면 종이·행동 묶음이 이미 들어온 뒤에도
     그 가상 요소만 34px을 스크롤 높이에 더한다. 종이 안쪽 바닥에 고정해 예산을 넘기지 않는다. */
  .paper::after { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; }
  /* 터치 가로에서는 종이와 행동 열이 각자의 내용 최소폭을 부모 grid에 되돌려 34px을
     밀어냈다. 두 grid 경계를 0까지 줄일 수 있게 해야 긴 소견은 안쪽 세로 스크롤로만 흐른다. */
  #resultScreen > .paper, #resultScreen > .report-actions, .report-body, .report-lines { min-width: 0; }
  .report-body { display: grid; grid-template-columns: minmax(150px, 40%) minmax(0, 1fr); gap: 14px; }
  .report-lines { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
  .photo { height: auto; min-height: 100px; margin-bottom: 0; }
  .paper h3 { font-size: 15px; margin-bottom: 2px; }
  .letterhead { padding-bottom: 4px; margin-bottom: 6px; }
  .line, .line.note b { font-size: 10px; }
  .line { padding: 1px 0; }
  .line.key-result { padding: 1px 0; font-size: 10px; }
  .line.note span { font-size: 9px; }
  #resultStamp { right: 2px; top: auto; bottom: 2px; padding: 1px 4px; border-width: 3px; font-size: 12px; }
  /* 도장은 종이 밖으로 15px 걸치므로 그만큼이 세로 넘침이 된다 — 가로에서는 위아래 여백을 깎아
     흡수한다(안전 영역은 그대로 존중한다). */
  #resultScreen { grid-template-columns: minmax(0, 1fr) minmax(118px, 150px); align-items: center; gap: 10px; padding-block: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom)); }
  .report-actions, .report-secondary-actions, .report-primary-actions, #nextRound { width: 100%; }
  .report-secondary-actions { display: grid; }
}

/* 노치가 있는 짧은 가로 화면의 실사용 높이(319px)에서는 보고서·행동·상태 세 상자를 더
   조밀하게 놓는다. 내용이나 행동을 감추지 않고, 340px 이상 가로 화면의 48px 버튼도 유지한다. */
@media (orientation: landscape) and (max-height: 320px) {
  #resultScreen { gap: 3px; }
  .paper { padding: 4px 8px 28px; }
  .letterhead { padding-bottom: 0; margin-bottom: 2px; border-bottom-width: 1px; line-height: 1; }
  .report-body { grid-template-columns: 150px 1fr; gap: 8px; }
  .photo { min-height: 80px; }
  #resultScreen h2 { font-size: 15px; line-height: 1.1; }
  .line { padding: 0; line-height: 1.2; }
  .line.note b { line-height: 1.2; }
  .report-actions { gap: 4px; }
  .report-actions button { min-height: 48px; padding: 4px 10px; }
  #resultMessage { min-height: 1em; font-size: 12px; line-height: 1; }
  #resultStamp { padding: 1px 4px; border-width: 3px; font-size: 12px; }
}

/* 365×667급 세로 화면에서는 내용과 행동을 한 화면 안에 유지한다. */
@media (max-width: 420px) and (max-height: 720px) {
  #startScreen { --start-control-width: min(100%, 345px); align-content: center; padding: max(10px, env(safe-area-inset-top)) 10px max(28px, calc(env(safe-area-inset-bottom) + 22px)); }
  #startScreen .eyebrow { margin-bottom: 3px; font-size: 11px; }
  #startScreen h1 { margin-bottom: 7px; font-size: min(21vw, 76px); }
  #startScreen .premise { font-size: min(3.05vw, 11.5px); }
  #startScreen .start-rule { font-size: .68rem; }
  #startScreen .rank-card { gap: 2px; margin-top: 14px; padding: 7px 10px; }
  #startScreen #currentRank { font-size: 16px; line-height: 1.2; }
  #startScreen .rank-percentile { font-size: .75rem; }
  #startScreen .rank-growth-hint, #startScreen .rank-record { font-size: .59rem; line-height: 1.2; }
  #startScreen .start-actions { gap: 5px; margin-top: 12px; }
  #startScreen .start-options { padding: 5px 7px; }
  #startScreen .start-options label { gap: 2px; font-size: .65rem; }
  #startScreen .start-options select { min-height: 48px; padding-block: 4px; }
  #startScreen #startRound { min-height: 52px; margin-top: 2px; font-size: 17px; }
  #startScreen .entry-secondary-actions { gap: 6px; }
  #startScreen .entry-secondary-actions button { min-height: 48px; padding-block: 4px; }
  #startScreen .start-feature-toggles { gap: 6px; }
  #startScreen .start-feature-toggles button { min-height: 48px; padding: 3px 6px; font-size: .72rem; }
  #startScreen .phone-look-help { font-size: .54rem; line-height: 1.2; }

  #resultScreen { align-content: center; gap: 5px; overflow: hidden; padding: max(5px, env(safe-area-inset-top)) 7px max(5px, env(safe-area-inset-bottom)); }
  #resultScreen .paper { width: min(345px, 100%); padding: 7px 10px 15px; }
  #resultScreen .paper::after { height: 3px; margin: 7px -10px -15px; }
  #resultScreen .letterhead { padding-bottom: 2px; margin-bottom: 3px; font-size: 8px; }
  #resultScreen .letterhead b { font-size: 10px; }
  #resultScreen .photo { height: 54px; margin-bottom: 2px; border-width: 2px; }
  #resultScreen #resultKicker { font-size: 8px; }
  #resultScreen h2 { margin-right: 58px; font-size: 16px; line-height: 1.1; }
  #resultScreen .result-challenge { margin: 2px 0 3px; padding: 4px 7px; font-size: 14px; }
  #resultScreen .line { gap: 6px; padding: 1px 0; font-size: 9px; line-height: 1.2; }
  #resultScreen .line.key-result { padding: 2px 0; font-size: 11px; }
  #resultScreen .line.note { margin: 3px 0; padding: 3px 5px; }
  #resultScreen .line.note span, #resultScreen .result-growth-hint { font-size: 8px; }
  #resultScreen .line.note b { line-height: 1.25; }
  #resultScreen .result-growth-hint { margin-top: 3px; line-height: 1.2; }
  #resultScreen #resultStamp { right: 6px; top: 34px; padding: 2px 5px; border-width: 3px; font-size: 14px; }
  #resultScreen .report-actions { width: min(345px, 100%); gap: 4px; }
  #resultScreen .report-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 5px; }
  #resultScreen .report-primary-actions { width: 100%; gap: 5px; }
  #resultScreen .report-actions button { min-height: 48px; padding: 4px 6px; font-size: 10px; }
  #resultScreen #resultMessage { min-height: 0; margin: 0; font-size: 9px; }
}

dialog { color: var(--ink); background: var(--panel); border: 1px solid var(--green); border-radius: 10px; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
@media (max-width: 599px) {
  #startScreen { --start-control-width: min(100%, 345px); padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); }
  #startScreen .start-information { gap: 3px; }
  #startScreen .eyebrow { margin-bottom: 6px; font-size: 12.5px; letter-spacing: .075em; }
  #startScreen h1 { margin-bottom: 12px; font-size: min(23.6vw, 92px); }
  #startScreen .premise { font-size: min(3.33vw, 13px); }
  #startScreen .rank-card { margin-top: 32px; margin-bottom: 0; padding: 11px 12px; }
  #startScreen .start-actions { gap: 8px; margin-top: 24px; }
  #startScreen .start-options { padding: 8px; }
  #startScreen .start-options select { min-height: 48px; }
  #startScreen #startRound { min-height: 72px; font-size: 19px; }
  #startScreen .entry-secondary-actions { gap: 10px; }
  #startScreen .entry-secondary-actions button { min-height: 48px; }
  #startScreen .start-feature-toggles { gap: 9px; }
  #startScreen .start-feature-toggles button { min-height: 48px; padding-block: 4px; }
  #startScreen .phone-look-help { font-size: .61rem; }
  #startScreen #pcHint { display: none !important; }
}
@media (min-width: 600px) { #startScreen h1 { font-size: clamp(92px, 7.2vw, 98px); } #startRound { font-size: 20px; } dialog { width: min(460px, calc(100vw - 32px)); } }
@media (min-width: 600px) and (max-height: 900px) {
  #startScreen { align-content: center; }
  #startScreen h1 { font-size: 98px; line-height: .92; }
  #startScreen .eyebrow { font-size: 14px; }
  #startScreen .premise { font-size: 14px; }
  #startRound { min-height: 72px; margin-top: 5px; font-size: 20px; }
  #startMessage { min-height: 0; }
  .start-options { padding: 10px; }
  .start-options select { min-height: 48px; }
  .rank-card { margin-top: 38px; margin-bottom: 0; padding: 12px 15px; }
  .start-information { gap: 4px; }
  .start-actions { gap: 8px; margin-top: 28px; }
  .entry-secondary-actions { margin-top: 2px; }
  .entry-secondary-actions button { min-height: 48px; }
  .multiplayer-entry .note { display: none; }
  #pcHint { margin-top: 11px; }
  .legal-footer { margin-top: 2px; line-height: 1.1; }
}
@media (min-width: 600px) and (max-height: 700px) {
  #startScreen { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(42px, calc(env(safe-area-inset-bottom) + 36px)); }
  #startScreen h1 { margin-bottom: 8px; font-size: 68px; line-height: .92; }
  #startScreen .eyebrow { margin-bottom: 4px; }
  #startScreen .rank-card { margin-top: 24px; padding: 8px 13px; }
  #startScreen .start-actions { gap: 6px; margin-top: 16px; }
  #startScreen .start-options { padding: 6px 8px; }
  #startScreen #startRound { min-height: 58px; margin-top: 2px; font-size: 18px; }
  #startScreen .entry-secondary-actions button { min-height: 48px; padding-block: 5px; }
  #startScreen .start-feature-toggles button { min-height: 48px; padding-block: 3px; }
  #startScreen #pcHint { margin-top: 7px; }
}
@media (min-width: 1024px) { dialog { width: min(560px, calc(100vw - 32px)); } }
dialog::backdrop { background: #000c; }
#settingsDialog { overflow: hidden; }
.settings-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; max-height: calc(100dvh - 82px); padding-bottom: 0; overflow: hidden; }
.settings-scroll { display: grid; gap: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-gutter: stable; }
.settings-card h2 { color: var(--green); margin: 0; }
.settings-card fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.settings-card legend { padding: 0; color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.settings-card label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 48px; }
.settings-card input { accent-color: var(--green); }
.settings-card input[type=checkbox] { width: 24px; height: 24px; margin: 0; }
.settings-card input[type=range] { width: 150px; }
.settings-card label.sub { min-height: 48px; padding-left: 16px; }
.settings-card label:has(input:disabled) { opacity: .48; }
.setting-pair { display: grid; gap: 2px; }
.settings-card output { color: var(--green); font-variant-numeric: tabular-nums; }
.settings-card select { appearance: none; min-width: 150px; min-height: 48px; padding: 8px 36px 8px 10px; color: var(--ink); background: #050806 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2376ff9d' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") right 12px center / 12px 8px no-repeat; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.settings-card select:hover { border-color: var(--green); }
.settings-card select:focus-visible, .settings-card input:focus-visible, .settings-card button:focus-visible, .telemetry-details summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.settings-card select:disabled { cursor: not-allowed; opacity: .48; }
.telemetry-details { color: var(--dim); font-size: 12px; }
.telemetry-details summary { color: var(--green); cursor: pointer; list-style: none; }
.telemetry-details summary::-webkit-details-marker { display: none; }
.telemetry-details summary::after { content: ' ▸'; }
.telemetry-details[open] summary::after { content: ' ▾'; }
.telemetry-details p { margin: 8px 0 0; }
.telemetry-details ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; line-height: 1.45; }
.telemetry-details a { color: var(--green); }
.settings-time-warning { margin: 0; color: var(--hi); font-size: 12px; font-weight: 800; line-height: 1.45; }
.settings-actions { z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); background: var(--panel); }
#closeSettings { border-color: var(--green); background: var(--panel); }
#hudExitButton { color: #fff; border-color: var(--danger); background: #42110f; }
.confirm-card { display: grid; gap: 14px; }
.confirm-card h2, .confirm-card p { margin: 0; }
.confirm-card h2 { color: var(--green); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#confirmAbandon { color: #fff; border-color: var(--danger); background: #42110f; }
.note { color: var(--dim); font-size: 12px; margin: 0; }
@media (min-width: 1024px) { .settings-card label { grid-template-columns: minmax(0, 22em) auto; justify-content: start; column-gap: 24px; } }
@media (max-width: 380px) {
  #settingsDialog { width: calc(100vw - 16px); }
  .settings-card label { gap: 7px; }
  .settings-card label.sub { padding-left: 0; font-size: 11px; }
  .settings-card label.sub > span { white-space: nowrap; }
  .settings-card input[type=range] { width: min(94px, 32vw); }
}

/* 화면 방향을 가리지 않는다(UX-6). 여기에는 «세로로 돌려 주세요» 가 화면 전체를 덮는 규칙이
   있었다 — 가로이면서 900px 이하인 화면 전부가 대상이라, 갤럭시 폴드를 펼치면(≈884 × 745)
   게임이 통째로 막혔다(2026-08-20 주인 실측). 방향을 막는 대신 짧은 화면에서 카드가 넘치지
   않게 한다. 3D 화면 자체는 원래 어느 비율에서도 그려진다. */
@media (max-height: 560px) {
  .screen-card { gap: 8px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #startScreen h1 { font-size: clamp(26px, 7vh, 44px); }
  #startScreen .eyebrow { font-size: .8rem; }
  #startScreen .legal-footer { margin-top: 0; }
}
/* 여기에는 결산 카드를 줄이는 두 줄(#resultScreen h2 의 큰 글씨 · .result-grid 의 여백)이 더
   있었다. 결산은 카드가 아니라 서류가 되어(FR-F3 ⓒ) 제목이 종이 안의 17px 이고 .result-grid 는
   사라졌다 — 남겨 두면 짧은 화면에서만 제목이 옛 크기로 되살아난다. */

/* 일반 모바일 규칙보다 뒤에서 365×667 높이 예산을 최종 확정한다. */
@media (max-width: 420px) and (max-height: 720px) {
  #multiplayerScreen { gap: 6px; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  #multiplayerScreen .eyebrow { font-size: .78rem; }
  #multiplayerScreen h2 { font-size: 27px; }
  #multiplayerScreen .lobby-card { gap: 6px; padding: 10px; }
  #multiplayerScreen .room-choice-card { gap: 4px; padding: 8px; }
  #multiplayerScreen .room-choice-card p { font-size: 12px; line-height: 1.35; }
  #multiplayerScreen #playerList { gap: 2px; }
  #multiplayerScreen #playerList li { padding-block: 4px; }
  #multiplayerScreen .voice-controls { gap: 4px; }
  #startScreen { padding: max(10px, env(safe-area-inset-top)) 10px max(28px, calc(env(safe-area-inset-bottom) + 22px)); }
  #startScreen .rank-card { margin-top: 14px; padding: 7px 10px; }
  #startScreen .start-actions { gap: 5px; margin-top: 12px; }
  #startScreen .start-options { padding: 5px 7px; }
  #startScreen .start-options select { min-height: 48px; }
  #startScreen #startRound { min-height: 52px; }
  #startScreen .entry-secondary-actions button { min-height: 48px; }
  #startScreen .start-feature-toggles { gap: 6px; }
  #startScreen .start-feature-toggles button { min-height: 48px; padding: 3px 6px; }
  #startScreen .phone-look-help { font-size: .54rem; }
  #hudControls { gap: 4px; }
  #hudControls button { min-height: 48px; padding: 3px 7px; font-size: 10px; }
}

/* 320×568 최소 지원 화면은 절대 배치된 법적 고지와 마지막 핵심 기능 단추 사이의 여백을
   세로 마진에서 회수한다. 터치 목표 높이와 고지의 48px 연락처 목표는 줄이지 않는다.
   일반 모바일 높이 예산보다 뒤에 두어 이 최소 화면의 값이 최종 적용되게 한다. */
@media (max-width: 340px) and (max-height: 600px) {
  #startScreen { align-content: start; padding-top: max(20px, env(safe-area-inset-top)); }
  #startScreen .rank-card { gap: 0; margin-top: 0; padding-block: 3px; }
  #startScreen .start-actions { gap: 0; margin-top: 0; }
  #startScreen .start-options { padding-block: 3px; }
  #startScreen .start-feature-toggles { column-gap: 6px; row-gap: 0; }
  #startScreen .feature-toggle-stack { display: contents; }
  #startScreen .phone-look-help { grid-column: 1 / -1; width: 100%; margin-top: 0; font-size: .5rem; line-height: 1.1; text-align: right; }
}
#studioMeasurementBadge {
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  padding: 6px 10px;
  border: 1px solid #38ff91;
  border-radius: 999px;
  background: rgb(2 15 10 / 92%);
  color: #caffdf;
  font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  pointer-events: none;
}

@media (min-width: 341px) and (max-width: 599px) and (min-height: 650px),
       (min-width: 600px) and (min-height: 720px) {
/* 승인된 시작 화면 정리. 낮은 화면의 기존 전용 배치는 보존한다. */
#startScreen {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(70px, calc(env(safe-area-inset-bottom) + 62px)) max(20px, env(safe-area-inset-left));}
#startScreen .start-information,#startScreen .start-actions{flex:none;min-height:auto;}
#startScreen .start-information{gap:5px;}
#startScreen .eyebrow{margin-bottom:6px;}
#startScreen h1{font-size:76px;line-height:1;margin-bottom:10px;text-shadow:0 0 7px #76ff9d66,0 0 20px #3cff7428;}
#startScreen .rank-card{margin:18px 0 0;padding:10px 14px;gap:4px;}
#startScreen .rank-growth-hint{font-size:11px;color:#bdcbbf;line-height:1.35;}
#startScreen .rank-record{font-size:12px;line-height:1.3;}
#startScreen .start-actions{margin-top:18px;gap:8px;}
#startScreen .start-options label{font-size:13px;color:#b9cbbf;}
#startScreen .start-options{padding:8px;}
#startScreen #startRound{min-height:60px;margin-top:0;font-size:20px;}
#startScreen .phone-look-help{font-size:11px;line-height:1.35;color:#a7bbad;}
#startScreen #pcHint{align-self:center;margin-top:10px;opacity:1;font-size:11px;}
#startScreen .legal-footer{opacity:.85;}
@media(max-width:599px){
 #startScreen{padding:max(20px, env(safe-area-inset-top)) max(15px, env(safe-area-inset-right)) max(68px, calc(env(safe-area-inset-bottom) + 60px)) max(15px, env(safe-area-inset-left));}
 #startScreen .eyebrow{font-size:12px;}
 #startScreen h1{font-size:min(23.6vw,92px);margin-bottom:8px;}
 #startScreen .premise{font-size:11.5px;}
 #startScreen .start-rule{font-size:12px;}
 #startScreen .rank-card{margin-top:16px;padding:8px 10px;gap:3px;}
 #startScreen .rank-percentile{font-size:12px;}
 #startScreen #currentRank{font-size:17px;line-height:1.25;}
 #startScreen .rank-record{font-size:11px;}
 #startScreen .start-actions{margin-top:14px;gap:7px;}
 #startScreen .start-options{padding:6px 8px;}
 #startScreen .start-options label{gap:3px;font-size:12px;}
 #startScreen #startRound{min-height:56px;font-size:18px;}
 #startScreen .entry-secondary-actions{gap:8px;}
 #startScreen .start-feature-toggles{gap:8px;}
 #startScreen .start-feature-toggles button{font-size:12px;min-height:48px;padding:4px 6px;}
 #startScreen .phone-look-help{font-size:11px;}
 #startScreen #pcHint{display:none!important;}
}
@media(max-width:599px) and (max-height:700px){
 #startScreen{padding-top:max(16px, env(safe-area-inset-top));padding-bottom:max(62px, calc(env(safe-area-inset-bottom) + 54px));}
 #startScreen h1{font-size:min(23.6vw,92px);margin-bottom:6px;}
 #startScreen .start-information{gap:3px;}
 #startScreen .rank-card{margin-top:10px;padding:6px 10px;gap:2px;}
 #startScreen .start-actions{margin-top:10px;gap:5px;}
 #startScreen #startRound{min-height:52px;}
}

}

/* 2026-09-04 승인된 화면별 정리. 기능·문구는 유지한다. */
#multiplayerScreen { gap:12px; padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
#multiplayerScreen h2 { margin:0; font-size:30px; }
#multiplayerScreen .lobby-card { border:0; background:transparent; padding:0; gap:16px; width:min(460px,100%); }
#multiplayerScreen .nickname-summary { display:flex; align-items:center; gap:8px; font-size:13px; }
#editNickname { margin-left:auto; font-size:12px; }
#multiplayerScreen .room-choice-card { border-radius:8px; padding:14px; gap:10px; }
#multiplayerScreen .room-choice-card p { font-size:12px; line-height:1.5; color:#b9cbbf; }
#createCoop { color:#071009; background:#76ff9d; border-color:#76ff9d; font-weight:800; }
#joinRoom { border-color:#76ff9d; }
#roomCode { font-size:20px; letter-spacing:.18em; }
#multiplayerScreen #closeMultiplayer { border-color:transparent; font-size:13px; }
#roomLobby>p:first-child { text-align:center; margin:0; padding:16px; background:#101711; border:1px solid #35553d; border-radius:8px; }
#roomCodeDisplay { display:block; font-size:36px; letter-spacing:.18em; color:#76ff9d; }
#participantSummary { color:#b9cbbf; font-size:13px; }
#playerList { padding:0; margin:0; list-style:none; }
#playerList li { padding:12px!important; border-bottom:1px solid #35553d; font-size:14px; }
#roomLobby .voice-controls { padding:12px; background:#101711; border:1px solid #35553d; border-radius:8px; gap:10px; }
#voiceStatus { color:#bdcbbf; font-size:12px; line-height:1.5; }
#startMultiplayer { min-height:52px; }
@media(min-width:800px){#multiplayerScreen #multiplayerEntry{width:min(760px,100%);grid-template-columns:1fr 1fr;}#multiplayerScreen .nickname-summary{grid-column:1/-1}.room-choice-card{align-content:start}#createCoop{align-self:end} }
@media(max-height:700px){#multiplayerScreen{padding:14px 16px;gap:8px}#multiplayerScreen .lobby-card{gap:10px}#multiplayerScreen .room-choice-card{padding:10px;gap:6px}#multiplayerScreen h2{font-size:26px}}

#hudHeader { gap:12px; }
.timer-label { color:#b9cbbf; font-size:12px; }
#attempts { border-radius:8px; padding:8px; gap:6px; background:#061008e6; }
#phasePrompt { background:#061008e6; padding:8px 12px; border-color:#35553d; }
.phase-state { color:#b9cbbf; }
#reportHint { color:#d8e6d8; line-height:1.4; }
#reportButton { min-height:56px; border-radius:8px; }
@media(max-width:599px){
 #hudHeader {display:grid;grid-template-columns:74px minmax(0,1fr) 90px;gap:8px;height:auto;top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right))}
 .timer-chip {position:static;grid-column:2;grid-row:1;transform:none;min-width:0;width:100%;padding:8px 4px}
 #timer {font-size:38px}
 #attempts {position:static;grid-column:1;grid-row:1;align-self:start;gap:3px;font-size:11px;width:74px}
 #hudControls {position:static;grid-column:3;grid-row:1;gap:8px}
 #hudControls button {font-size:11px;padding:4px;white-space:normal}
 #phasePrompt {position:static;grid-column:1/-1;grid-row:2;transform:none;width:100%;max-width:none;margin:0}
 .phase-order {font-size:14px}.phase-detail {font-size:11px}
 #reportAction {right:max(16px, env(safe-area-inset-right));bottom:max(24px, env(safe-area-inset-bottom));width:min(180px,calc(100vw - 160px));gap:8px}
 #reportHint {font-size:11px}
}

/* 짧은 가로 결과 화면은 기존 두 열·내부 스크롤 배치를 유지한다. */
@media (min-height:561px), (orientation:portrait) {
#resultScreen .report-actions {gap:12px}
#resultScreen .report-primary-actions {order:-1}
#resultScreen .report-secondary-actions button {background:transparent;border-color:#8ca192;font-size:12px}
#resultScreen .line {font-size:12px;line-height:1.35;padding:4px 0}
#resultScreen .line.key-result {font-size:14px}
#resultScreen .rank-progress-line {color:#241f13}
#resultScreen .result-growth-hint {font-size:11px;line-height:1.4}
#resultScreen .rank-line {flex-wrap:wrap;gap:4px}
#resultScreen .rank-line b {flex:1;min-width:120px}
#resultScreen .line.note span {font-size:11px}
#resultScreen .line.note {margin:6px 0}
#resultScreen #resultStamp {font-size:16px;top:38px;right:12px}
@media(max-width:699px){
 #resultScreen {padding:12px;gap:12px;align-content:safe center;overflow:auto}
 #resultScreen .paper {width:min(390px,100%);padding:12px 14px 18px}
 #resultScreen .paper::after {margin:10px -14px -18px}
 #resultScreen .photo {height:48px}
 #resultScreen h2 {font-size:19px;line-height:1.2;margin-right:68px}
 #resultScreen #resultKicker {font-size:10px}
 #resultScreen .letterhead {font-size:10px;margin-bottom:6px}
 #resultScreen .result-challenge {font-size:16px;padding:7px;margin:6px 0}
 #resultScreen .line {font-size:11px;padding:2px 0}
 #resultScreen .line.key-result {font-size:13px;padding:3px 0}
 #resultScreen .report-actions {width:min(390px,100%);gap:10px}
 #resultScreen .report-primary-actions,#resultScreen .report-secondary-actions{width:100%;gap:8px}
 #resultScreen .report-actions button {font-size:12px;min-height:48px}
}

}

#settingsDialog {width:min(520px,calc(100vw - 32px));padding:18px;border-color:#35553d}
.settings-card {max-height:calc(100dvh - 100px)}
.settings-scroll {gap:20px;padding-right:6px}
.settings-card legend {color:#76ff9d;font-size:13px;letter-spacing:0}
.settings-card label {font-size:14px;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.settings-card label.sub {padding-left:12px;color:#bdcbbf;font-size:12px}
.settings-card .note {font-size:12px;line-height:1.5;color:#b9cbbf}
.setting-pair {padding:0 0 10px;border-bottom:1px solid #35553d66}
.settings-card input[type=range] {width:120px}
.settings-card select {min-width:120px}
.settings-actions {padding-top:14px;margin-top:14px}
#closeSettings {background:#76ff9d;color:#061008;font-weight:800}
@media(max-width:380px){#settingsDialog{padding:14px;width:calc(100vw - 24px)}.settings-card input[type=range]{width:90px}.settings-card label.sub{padding-left:0}.settings-card label.sub>span{white-space:normal}}