@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Inter:wght@500;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #08070b;
  --bone: #eee4d0;
  --blood: #b62826;
  --ember: #ee7c32;
  --line: rgba(238, 228, 208, .18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--ink); }
body { font-family: Inter, system-ui, sans-serif; color: var(--bone); touch-action: manipulation; }
button { font: inherit; }

.game-shell { width: 100%; min-width: 0; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #050407; }
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; }
#game { width: 100%; height: 100%; display: block; background: #09080c; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.hud { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(16px + env(safe-area-inset-top)) 18px 12px; background: linear-gradient(#060509dd, transparent); }
.eyebrow, .hud-right span { display: block; color: #9f988e; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.hud strong { display: block; margin-top: 3px; font-family: Cinzel, serif; font-size: 14px; letter-spacing: .08em; }
.hud-right { display: flex; gap: 14px; text-align: right; }
.hud-right b { color: var(--bone); font-size: 11px; }

.timer { position: absolute; z-index: 5; top: calc(68px + env(safe-area-inset-top)); left: 18px; right: 18px; height: 3px; opacity: 0; background: #ffffff18; overflow: hidden; transition: opacity .2s; }
.timer.active { opacity: 1; }
.timer i { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--blood), #ff9b42); box-shadow: 0 0 12px #e9482c; }

.overlay { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: radial-gradient(circle at 50% 44%, #1f1516b8, #050407f2 68%); transition: opacity .35s, visibility .35s; }
.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.sigil { margin: 0 0 16px; color: var(--blood); font-family: Cinzel, serif; font-size: 40px; text-shadow: 0 0 24px #c33535; }
.kicker { margin: 0 0 12px; color: #a69b8d; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: 0; font-family: Cinzel, serif; font-size: clamp(38px, 11.5vw, 66px); font-weight: 900; line-height: .88; letter-spacing: -.045em; text-shadow: 0 5px 30px #000; white-space: nowrap; }
h1 em { color: var(--blood); font-style: normal; }
.intro { margin: 25px 0 28px; color: #aaa097; font-family: Cinzel, serif; font-size: 12px; line-height: 1.8; }
.start-actions { display: flex; gap: 16px; margin: -10px 0 24px; color: #c9bca9; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.primary { min-width: 220px; border: 1px solid #db433d; border-radius: 2px; padding: 15px 24px; color: #fff4e6; background: linear-gradient(#b92d29, #741916); box-shadow: inset 0 0 0 2px #26090a, 0 10px 40px #000; font-size: 11px; font-weight: 800; letter-spacing: .16em; cursor: pointer; }
.primary:active { transform: translateY(2px); filter: brightness(.9); }
.text-button { margin-top: 17px; border: 0; color: #726d68; background: none; font-size: 9px; font-weight: 800; letter-spacing: .15em; cursor: pointer; }
.domain { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0; color: #514c49; font-size: 7px; font-weight: 800; letter-spacing: .14em; }

.cue { position: absolute; z-index: 5; left: 50%; top: 31%; width: 86%; transform: translate(-50%, -50%) scale(.82); opacity: 0; padding: 18px 12px; text-align: center; pointer-events: none; transition: opacity .16s, transform .16s; }
.cue::before { content: ""; position: absolute; z-index: -1; inset: -22px -4px; border-block: 1px solid #a13a3038; background: radial-gradient(ellipse, #120d10e8 25%, transparent 72%); }
.cue.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cue span { display: block; color: #ff8a3d; font-family: Cinzel, serif; font-size: 44px; font-weight: 900; line-height: 1; text-shadow: 0 0 28px #d13425; }
.cue strong { display: block; margin-top: 12px; font-family: Cinzel, serif; font-size: clamp(18px, 6vw, 30px); letter-spacing: .12em; text-shadow: 0 3px 12px #000; }
.cue small { display: none; margin-top: 16px; color: #fff1d9; font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.cue.action small { display: block; animation: actionPulse .55s ease-in-out infinite alternate; }
@keyframes actionPulse { to { color: #ff8a3d; transform: scale(1.05); } }

.result { opacity: 0; visibility: hidden; pointer-events: none; }
.result.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.result h2 { margin: 0; max-width: 340px; font-family: Cinzel, serif; font-size: clamp(38px, 12vw, 62px); line-height: .95; }
.result p:not(.kicker) { max-width: 300px; margin: 20px 0 28px; color: #ada39a; font-family: Cinzel, serif; font-size: 12px; line-height: 1.7; }
.flash { position: absolute; z-index: 8; inset: 0; opacity: 0; pointer-events: none; background: #fff; }
.flash.hit { animation: hit .45s ease-out; }
@keyframes hit { 0% { opacity: .9; background: #fff; } 18% { background: #b20f16; } 100% { opacity: 0; } }

.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; min-width: 0; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #211d22; background: #211d22; }
.controls button { min-width: 0; min-height: 88px; border: 0; padding-inline: 2px; color: #a9a09a; background: linear-gradient(#131116, #09080b); cursor: pointer; user-select: none; }
.controls button span { display: block; color: #ded4c7; font-family: Cinzel, serif; font-size: 28px; line-height: 1; }
.controls button small { display: block; margin-top: 9px; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.controls button:active, .controls button.pressed { color: #fff; background: #541415; box-shadow: inset 0 3px 20px #1d0506; }
.controls button:active span, .controls button.pressed span { color: #ffb076; }
.controls.disabled { pointer-events: none; opacity: .78; }

@media (min-width: 700px) {
  body { display: grid; place-items: center; background: #111015; }
  .game-shell { width: min(100%, 470px); box-shadow: 0 0 80px #000; }
}

@media (max-height: 620px) {
  .controls button { min-height: 70px; }
  .intro { margin: 16px 0 20px; }
  .sigil { margin-bottom: 8px; }
}

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