:root {
  --bg: #190817;
  --surface: #22111e;
  --border: #392a33;
  --text: #e7ecc6;
  --muted: #8e877a;
  --primary: #f2ff26;
  --secondary: #914287;
  --accent: #f1effd;
  --ink-on-primary: #190817;
  --shadow: rgba(5, 1, 5, .48);
  --rule: rgba(231, 236, 198, .14);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(145,66,135,.17), transparent 28rem),
    repeating-linear-gradient(112deg, transparent 0 9px, rgba(231,236,198,.018) 10px 11px), var(--bg);
  min-height: 100vh;
}
button, summary, .wordmark { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, summary:focus-visible, .stage:focus-visible, a:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
[hidden] { display: none !important; }
.site-head, footer { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wordmark { color: var(--text); text-decoration: none; font-family: Rockwell, "Roboto Slab", Georgia, serif; font-weight: 800; }
.wordmark span { color: var(--primary); margin-right: 12px; }
main { width: min(1180px, calc(100% - 32px)); margin: 28px auto 64px; }
.panel { position: relative; background: rgba(34,17,30,.9); border: 1px solid var(--border); box-shadow: 0 18px 70px var(--shadow); }
.panel::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(231,236,198,.045); pointer-events: none; }
.eyebrow { margin: 0 0 12px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.plain-button, .secondary-button, .primary-button, .dpad button { min-height: 46px; border: 1px solid var(--border); cursor: pointer; font-weight: 800; }
.plain-button { color: var(--text); background: transparent; padding: 8px 14px; }
.plain-button:hover { border-color: var(--muted); background: rgba(231,236,198,.05); }
.secondary-button { color: var(--accent); background: var(--secondary); padding: 10px 16px; box-shadow: 4px 4px 0 #130612; }
.secondary-button:hover { filter: brightness(1.12); }
.primary-button { color: var(--ink-on-primary); background: var(--primary); padding: 13px 20px; border-color: var(--primary); box-shadow: 6px 6px 0 var(--secondary); text-transform: uppercase; letter-spacing: .06em; }
.primary-button:hover { transform: translate(-1px,-1px); box-shadow: 8px 8px 0 var(--secondary); }
kbd { margin-left: 8px; padding: 2px 5px; border: 1px solid currentColor; font: 10px ui-monospace, monospace; opacity: .75; }

.intro { min-height: min(680px, calc(100vh - 150px)); padding: clamp(32px, 7vw, 90px); display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; overflow: hidden; }
.intro::before { content: "00"; position: absolute; right: -30px; bottom: -75px; font: 800 260px/1 Rockwell, Georgia, serif; color: rgba(241,239,253,.025); }
.intro-copy { z-index: 1; }
h1, h2 { font-family: Rockwell, "Roboto Slab", Georgia, serif; }
h1 { max-width: 800px; margin: 0; font-size: clamp(48px, 8.3vw, 108px); line-height: .86; letter-spacing: -.055em; }
h1 em { color: var(--primary); font-style: normal; }
.dek { max-width: 620px; margin: 28px 0; font: 21px/1.55 Georgia, serif; color: var(--accent); }
.start-hint { color: var(--muted); font-size: 13px; }
.hero-seal { width: min(26vw, 270px); aspect-ratio: 1; justify-self: center; position: relative; transform-style: preserve-3d; animation: dream-turn 9s ease-in-out infinite; }
.seal-face { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: grid; place-content: center; gap: 16px; text-align: center; backface-visibility: hidden; color: var(--bg); background: var(--primary); filter: drop-shadow(18px 22px 0 rgba(145,66,135,.35)); }
.seal-face b { font: 800 clamp(18px,3vw,34px) Rockwell, Georgia, serif; }
.seal-face span { letter-spacing: .2em; font-size: 11px; }
.seal-back { transform: rotateY(180deg); color: var(--accent); background: var(--secondary); background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(241,239,253,.12) 9px 11px); }
@keyframes dream-turn { 0%,35% { transform: rotateY(-12deg) rotateX(8deg); } 50%,85% { transform: rotateY(168deg) rotateX(-8deg); } 100% { transform: rotateY(348deg) rotateX(8deg); } }

.game-shell { display: grid; gap: 14px; }
.docket { min-height: 92px; padding: 18px 24px; display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 30px; align-items: center; }
.docket h2 { margin: 0; font-size: clamp(21px,3vw,31px); }
.docket p { color: var(--muted); }
.docket-count { padding-left: 24px; border-left: 1px solid var(--border); text-align: center; }
.docket-count span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.docket-count strong { font: 36px/1.15 ui-monospace, monospace; color: var(--primary); }
.play-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
.stage { min-height: 560px; overflow: hidden; background: #120611; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.stage-label { position: absolute; z-index: 2; top: 18px; left: 18px; min-width: 130px; padding: 10px 14px; color: var(--bg); background: var(--accent); border: 2px solid var(--bg); box-shadow: 5px 5px 0 var(--secondary); }
.stage-label span { display: block; font: 800 16px Rockwell, Georgia, serif; }
.stage-label small { font: 9px ui-monospace, monospace; letter-spacing: .18em; }
.stage.void .stage-label { color: var(--accent); background: var(--secondary); background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(241,239,253,.11) 7px 8px); }
.stage-message { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: var(--surface); color: var(--primary); }
.stage-message.error { color: var(--accent); padding: 30px; }
.stage-message.error span { color: var(--muted); }
.stage.denied { animation: denied .18s ease-in-out; }
@keyframes denied { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.status-rail { padding: 26px 22px; display: flex; flex-direction: column; }
.jurisdiction { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.jurisdiction span { color: var(--primary); font-size: 30px; }
.jurisdiction strong { font: 27px Rockwell, Georgia, serif; }
#objective { color: var(--accent); line-height: 1.45; }
.status-line { min-height: 72px; margin: 8px 0 22px; padding: 12px; border-left: 3px solid var(--primary); background: rgba(242,255,38,.055); color: var(--muted); font-size: 13px; line-height: 1.45; }
.wide { width: 100%; }
details { z-index: 1; margin-top: auto; padding-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
summary { color: var(--text); cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.controls { min-height: 82px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; }
.dpad { display: grid; grid-template-columns: repeat(4, 52px); gap: 7px; }
.dpad button { color: var(--text); background: rgba(231,236,198,.06); font-size: 20px; }
.dpad button:hover { color: var(--bg); background: var(--primary); }
.control-actions { display: flex; gap: 8px; }

.interstitial { max-width: 760px; margin: 10vh auto; padding: clamp(30px,7vw,80px); text-align: center; }
.interstitial h2 { margin: 0 0 16px; font-size: clamp(38px,7vw,72px); }
.interstitial p:not(.eyebrow) { color: var(--muted); margin-bottom: 30px; }
.finale { padding: 4vh 0; }
.result-card { width: min(760px,100%); margin: 0 auto; padding: clamp(24px,5vw,52px); background: var(--accent); color: var(--bg); border: 10px solid var(--surface); outline: 2px solid var(--accent); box-shadow: 18px 20px 0 var(--secondary); text-align: center; background-image: repeating-linear-gradient(110deg, transparent 0 13px, rgba(25,8,23,.028) 14px 15px); }
.result-top, .result-foot { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-block: 2px solid var(--bg); font: 800 10px ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.result-subject { margin: 28px 0 8px; font: 800 clamp(18px,4vw,30px) Rockwell, Georgia, serif; letter-spacing: .08em; }
.result-subject span { color: var(--secondary); }
.paired-seals { display: flex; justify-content: center; align-items: center; gap: 15px; color: var(--secondary); font-size: 36px; }
.paired-seals b { display: block; width: min(28vw,170px); height: 2px; background: var(--secondary); }
.result-card h2 { margin: 10px 0 0; font-size: clamp(44px,9vw,84px); line-height: .85; letter-spacing: -.045em; }
.clarifier { margin: 16px 0 30px; font: italic 20px Georgia, serif; }
.result-foot { flex-wrap: wrap; justify-content: center; border-bottom: 0; }
.result-foot span { flex: 1 1 160px; }
.final-actions { margin: 34px auto; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
footer { border-top: 1px solid var(--border); border-bottom: 0; color: var(--muted); }

@media (max-width: 800px) {
  .intro { grid-template-columns: 1fr; min-height: auto; }
  .hero-seal { width: 160px; margin-top: 48px; }
  .play-grid { grid-template-columns: 1fr; }
  .status-rail { grid-row: 1; }
  .stage { min-height: min(110vw, 520px); }
  .docket { grid-template-columns: 1fr auto; }
  .docket > p { display: none; }
}
@media (max-width: 520px) {
  main { width: calc(100% - 20px); margin-top: 12px; }
  .site-head { padding: 13px 12px; }
  .wordmark { font-size: 10px; }
  .intro { padding: 28px 22px 42px; }
  h1 { font-size: 43px; }
  .dek { font-size: 18px; }
  .docket { padding: 15px; gap: 8px; }
  .docket-count { padding-left: 12px; }
  .docket-count strong { font-size: 28px; }
  .stage { min-height: 380px; }
  .controls { flex-direction: column; gap: 12px; }
  .dpad { grid-template-columns: repeat(4, minmax(46px, 1fr)); width: 100%; }
  .control-actions { width: 100%; }
  .control-actions button { flex: 1; }
  .result-card { border-width: 6px; }
  .result-card h2 { font-size: clamp(38px, 15vw, 62px); overflow-wrap: anywhere; }
  .result-top { flex-direction: column; }
  footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}