:root {
  color-scheme: dark;
  --ivory: #f2eadb;
  --ink: #211719;
  --oxblood: #2a1519;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0b0809; }
body { font-family: Georgia, 'Times New Roman', serif; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
button { font: inherit; }

.app, .screen { position: fixed; inset: 0; width: 100%; height: 100%; }
.screen { display: none; overflow: hidden; background: #130d0f; }
.screen.is-active { display: block; }
.full-image { width: 100%; height: 100%; display: block; object-fit: cover; }

.whole-screen-button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.start-hint { position: absolute; left: 50%; bottom: calc(1.15rem + var(--safe-bottom)); transform: translateX(-50%); color: rgba(242,234,219,.72); font-size: clamp(.68rem, 1.4vw, .88rem); font-style: italic; letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0,0,0,.75); pointer-events: none; animation: breathe 2.6s ease-in-out infinite; }

.game-screen { isolation: isolate; }
.room-background { position: absolute; z-index: -2; inset: -4%; background-position: center; background-size: cover; filter: brightness(.56) saturate(.82); transform: scale(1.04); transition: opacity .55s ease; }
.room-background::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 34%, rgba(3,2,2,.5) 100%); }
.stage { position: absolute; left: 50%; top: 48%; width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 7rem), calc((100vh - var(--safe-top) - var(--safe-bottom) - 3.4rem) * 1.7916667)); aspect-ratio: 2752 / 1536; display: grid; place-items: center; background: #100c0d; transform: translate(-50%, -50%); }
.stage::before { content: ''; position: absolute; inset: -1px; border: 1px solid rgba(221,185,112,.42); box-shadow: 0 12px 55px rgba(0,0,0,.48), inset 0 0 0 4px rgba(22,13,14,.48); pointer-events: none; }
.stage img { width: 100%; height: 100%; display: block; object-fit: contain; background: #161012; user-select: none; -webkit-user-drag: none; opacity: 1; transition: opacity .22s ease, transform .48s cubic-bezier(.2,.65,.24,1); }
.stage.is-changing img { opacity: 0; transform: scale(.994); }

.nav-zone { position: absolute; z-index: 4; top: 0; bottom: 0; width: max(9vw, 54px); padding: 0; border: 0; color: rgba(242,234,219,.68); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-zone span { display: block; font: 300 clamp(2rem, 6vw, 4.8rem)/1 Georgia, serif; text-shadow: 0 1px 12px #000; opacity: .74; transition: opacity .18s ease, transform .18s ease; }
.nav-zone:active span { opacity: 1; transform: scale(.92); }
.nav-prev { left: var(--safe-left); }
.nav-next { right: var(--safe-right); }

.hud { position: absolute; z-index: 5; left: 50%; bottom: calc(.4rem + var(--safe-bottom)); min-height: 36px; display: flex; align-items: center; gap: .9rem; transform: translateX(-50%); color: rgba(242,234,219,.8); }
.counter { min-width: 4.2rem; text-align: right; font-size: clamp(.68rem, 1.3vw, .82rem); letter-spacing: .12em; }
.answer-button { min-width: 70px; min-height: 34px; padding: .35rem .85rem; border: 1px solid rgba(239,223,192,.34); border-radius: 999px; color: rgba(242,234,219,.84); background: rgba(24,14,16,.28); backdrop-filter: blur(8px); cursor: pointer; font-size: clamp(.69rem, 1.3vw, .83rem); font-style: italic; letter-spacing: .04em; }

.answer-card { position: absolute; z-index: 10; left: 50%; top: 50%; width: min(46vw, 25rem); min-height: min(46vh, 15rem); padding: clamp(1.5rem, 4vw, 3rem); border: 0; color: var(--ink); background: #eadfc9; box-shadow: 0 1.6rem 5rem rgba(0,0,0,.65); transform: translate(-50%, -46%) rotate(-.6deg) scale(.96); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .25s ease, transform .38s cubic-bezier(.2,.75,.22,1); }
.answer-card::before { content: ''; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(72,50,42,.28) .45px, transparent .6px); background-size: 4px 4px; pointer-events: none; }
.answer-card.is-visible { opacity: 1; transform: translate(-50%, -50%) rotate(-.6deg) scale(1); pointer-events: auto; }
.answer-card span, .answer-card strong { position: relative; display: block; }
.answer-kicker { margin-bottom: .8rem; font-size: clamp(.65rem, 1.3vw, .78rem); font-style: italic; letter-spacing: .15em; text-transform: uppercase; }
.answer-card strong { font: 400 clamp(1.65rem, 5vw, 3.5rem)/.95 Georgia, serif; letter-spacing: -.045em; }
.answer-close { margin-top: 1.4rem; font-size: clamp(.62rem, 1.15vw, .74rem); color: rgba(33,23,25,.55); font-style: italic; }

.rotate-screen { display: none; position: fixed; z-index: 100; inset: 0; background: #120c0e; }
.rotate-screen img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (orientation: portrait) and (max-width: 900px) {
  .rotate-screen { display: block; }
  .app { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@keyframes breathe { 0%,100% { opacity: .42; } 50% { opacity: .9; } }