:root {
  color-scheme: dark;
  --bg: oklch(14% 0.008 220);
  --ink: oklch(93% 0.012 90);
  --dim: oklch(72% 0.012 90);
  --faint: oklch(56% 0.012 90);
  --line: oklch(90% 0.02 90 / 0.18);
  --amber: oklch(84% 0.13 85);
  --hit: oklch(84% 0.15 150);
  --miss: oklch(70% 0.15 25);
  --panel: oklch(15% 0.008 220 / 0.9);
  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font: 15px/1.5 var(--sans); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: 11px var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
code { font-family: var(--mono); }

#game { position: fixed; inset: 0; isolation: isolate; user-select: none; -webkit-user-select: none; }
#world, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#world:focus { outline: none; }
#overlay { pointer-events: none; }
#game.feed #world { filter: grayscale(1) contrast(1.08) brightness(1.02); }
#game.feed::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, oklch(0% 0 0 / 0.16) 0 1px, transparent 1px 3px); }
#game.lifted #world { filter: blur(2.5px) saturate(1.2); }

#eyelids { position: absolute; inset: 0; pointer-events: none; }
#eyelids i { position: absolute; left: -10%; right: -10%; height: 55%; background: #000; transition: transform 1.6s cubic-bezier(.6, 0, .2, 1); border-radius: 0 0 50% 50%; }
#eyelids i:first-child { top: 0; }
#eyelids i:last-child { bottom: 0; border-radius: 50% 50% 0 0; }
#eyelids.open i:first-child { transform: translateY(-110%); }
#eyelids.open i:last-child { transform: translateY(110%); }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .8s; }
#fade.on { opacity: 1; }
#fade.white { background: oklch(97% 0.01 90); }

#hud { position: absolute; left: max(18px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); font: 11px/1.7 var(--mono); letter-spacing: .08em; color: oklch(92% 0.01 90 / .78); text-shadow: 0 1px 3px #000; pointer-events: none; }
#hud .rec { display: flex; gap: 12px; align-items: center; }
#hud .rec b { width: 8px; height: 8px; border-radius: 50%; background: oklch(64% 0.21 27); animation: rec 1.6s steps(1) infinite; }
#hud .protocol { color: oklch(92% 0.01 90 / .55); }
#hud code { color: var(--amber); }
@keyframes rec { 50% { opacity: 0; } }

#prompt { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); margin: 0; font: 13px var(--mono); letter-spacing: .06em; display: flex; gap: 9px; align-items: center; color: var(--ink); text-shadow: 0 1px 4px #000; pointer-events: none; }
#caption { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: min(620px, calc(100% - 40px)); text-align: center; margin: 0; font: italic 17px/1.5 var(--serif); color: oklch(92% 0.01 90 / .85); text-shadow: 0 1px 6px #000; pointer-events: none; opacity: 0; transition: opacity .8s; }
#caption.on { opacity: 1; }
#mute { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); background: none; border: 0; font: 10px var(--mono); letter-spacing: .12em; color: oklch(90% 0.01 90 / .5); padding: 10px; min-height: 44px; }
#mute[aria-pressed=true] { text-decoration: line-through; }

#act { position: absolute; right: 26px; bottom: 30px; width: 70px; height: 70px; border-radius: 50%; border: 2px solid oklch(90% 0.02 90 / .6); background: oklch(20% 0.01 220 / .45); font-size: 22px; color: var(--amber); touch-action: none; }
#stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1px solid oklch(90% 0.02 90 / .35); pointer-events: none; }
#stick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: oklch(90% 0.02 90 / .35); }

.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
#loading { background: var(--bg); font: 13px var(--mono); color: var(--faint); z-index: 20; }
#title { background: radial-gradient(ellipse at 50% 60%, oklch(12% 0.02 25 / .35), oklch(8% 0.01 25 / .92) 70%); z-index: 10; }
.title-inner { text-align: center; max-width: 520px; }
#title h1 { font: 400 clamp(46px, 9vw, 84px)/1 var(--serif); letter-spacing: -0.02em; margin: 0 0 18px; }
.lede { font: italic 19px/1.5 var(--serif); color: var(--dim); margin: 0 0 34px; }
button.primary { background: var(--ink); color: oklch(15% 0.01 220); border: 0; border-radius: 999px; padding: 13px 34px; font: 15px var(--sans); min-height: 48px; }
button.primary:hover { background: var(--amber); }
button.primary:focus-visible, #port:focus-visible, button.link:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.fine { font: 11px/1.9 var(--mono); color: var(--faint); margin: 26px 0 0; letter-spacing: .03em; }
.fine .touch { display: none; }
@media (pointer: coarse) { .fine .keys { display: none; } .fine .touch { display: inline; } }
.protocol-line { margin-top: 44px; font-size: 10px; opacity: .6; }
.protocol-line code { color: var(--amber); }

.panel { position: absolute; right: max(18px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); width: min(470px, calc(100% - 36px)); max-height: calc(100% - 60px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 26px 26px 22px; backdrop-filter: blur(10px); z-index: 5; }
.eyebrow { font: 10px var(--mono); letter-spacing: .18em; color: var(--amber); margin: 0; }
.panel h2 { font: 400 26px/1.2 var(--serif); margin: 8px 0 18px; }
ol { list-style: none; margin: 0; padding: 0; }
#reveal-log li, #end-log li { display: grid; grid-template-columns: 1fr auto; gap: 12px; font: 12px/1.45 var(--mono); padding: 7px 0; border-top: 1px solid var(--line); color: var(--dim); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
#reveal-log li.shown, #end-log li { opacity: 1; transform: none; }
#reveal-log li b, #end-log li b { font-weight: 400; min-width: 3.4em; text-align: right; }
li.hit b { color: var(--hit); }
li.miss b { color: var(--miss); }
li.pending b { color: var(--faint); }
li.hit span { color: var(--ink); }
.score { font: 400 22px var(--serif); margin: 16px 0 6px; min-height: 1.4em; }
details { margin-top: 12px; font: 11px/1.6 var(--mono); color: var(--dim); }
summary { cursor: pointer; color: var(--ink); padding: 6px 0; }
.seal { border-top: 1px solid var(--line); padding: 10px 0; }
.seal pre { white-space: pre-wrap; word-break: break-word; margin: 6px 0; color: var(--faint); font: 10.5px/1.5 var(--mono); }
.seal .ok { color: var(--hit); }
.seal .bad { color: var(--miss); }
.seal code { word-break: break-all; }
.panel .primary { margin-top: 18px; width: 100%; }

#ending { background: oklch(9% 0.006 220 / .88); z-index: 12; overflow: auto; place-items: start center; }
.ending-inner { width: min(560px, 100%); padding: 8vh 0 60px; }
.tally { margin: 20px 0 22px; }
.tally div { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding: 12px 0; gap: 20px; }
.tally dt { font: 15px var(--sans); color: var(--dim); }
.tally dd { margin: 0; font: 400 30px var(--serif); white-space: nowrap; }
#end-log { margin-top: 8px; }
.port-row { display: flex; align-items: center; gap: 22px; margin: 30px 0 30px; }
#port { position: relative; width: 104px; height: 104px; border-radius: 22px; border: 0; background: linear-gradient(160deg, oklch(70% 0.01 220), oklch(48% 0.01 220)); box-shadow: inset 0 1px 0 oklch(90% 0 0 / .5), 0 10px 30px #000a; flex: none; }
#port .port-hole { position: absolute; left: 50%; top: 58%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #000 55%, oklch(25% 0 0) 100%); box-shadow: inset 0 6px 10px #000, 0 1px 0 oklch(85% 0 0 / .4); }
#port .port-light { position: absolute; left: 50%; top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: oklch(80% 0.16 85); box-shadow: 0 0 14px oklch(85% 0.16 85); animation: portpulse 2.4s ease-in-out infinite; }
#port.poked .port-light { animation: none; background: oklch(40% 0.02 85); box-shadow: none; }
#port:active .port-hole { transform: scale(.94); }
@keyframes portpulse { 50% { opacity: .45; } }
#port-line { font: 12px/1.6 var(--mono); color: var(--ink); margin: 0; }
#port-note { font: 12px/1.6 var(--mono); color: var(--faint); margin: 2px 0 0; }
#port-note.hit { color: var(--hit); }
a.link { color: var(--dim); text-underline-offset: 3px; }
button.link { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .panel { top: auto; bottom: 12px; transform: none; max-height: 58%; padding: 18px; }
  .panel h2 { font-size: 21px; }
  #prompt { bottom: 22%; }
  #caption { bottom: 17%; font-size: 15px; }
  .tally dd { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #eyelids i, #fade, #caption, #reveal-log li { transition: none; }
  #hud .rec b, #port .port-light { animation: none; }
}