/* THE SPECIMEN : it is a place, not a page. */
:root{
  --bg:#04070c; --green:#8dff9e; --green-dim:#4d8a5c; --amber:#ffc35c; --red:#ff5a4a;
  --text:#c9d6e8; --muted:#5f7189; --paper:#e9e2cf; --ink:#1b2430;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --type:"Courier Prime","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--mono);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input,textarea{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html[data-input="key"] :focus-visible{outline:2px solid var(--green);outline-offset:3px}
:focus-visible{outline:none}
img{-webkit-user-drag:none}

/* ---------- scene stack ---------- */
.scene{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease;overflow:hidden;touch-action:none}
.scene.on{opacity:1;visibility:visible}
/* the stage is the art canvas itself: 2112x1104, scaled by a transform to cover the viewport */
.stage{position:absolute;left:0;top:0;width:2112px;height:1104px;transform-origin:0 0;will-change:transform}
.plate{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.plate.st{opacity:0;transition:opacity 1.4s ease}
.plate.st.on{opacity:1}
#gate-lit{opacity:0;transition:opacity .8s ease}
#gate-stage.door-on #gate-lit{opacity:1}
.stage canvas{position:absolute;pointer-events:none}
#room-fx,#gate-fx{left:0;top:0;width:2112px;height:1104px}

/* the walk through the door: black over the corridor, the room zooms in a touch as the black lifts */
#blackout{position:fixed;inset:0;z-index:40;background:#000;opacity:0;pointer-events:none;transition:opacity .55s ease-in}
#blackout.on{opacity:1;pointer-events:auto}
#blackout.lift{transition:opacity .9s ease-out}
#s-room{transition:opacity .45s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
#s-room.zoom-from{transform:scale(.94);transition:none}
#s-room.zoom-away{transform:scale(.94);transition:opacity .45s ease,transform .7s ease-in}
@media (prefers-reduced-motion: reduce){#s-room,#s-room.zoom-from,#s-room.zoom-away{transform:none;transition:opacity .45s ease}}

/* ---------- hits: the things you can touch ---------- */
.hit{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto}
.hit::before,.hit::after{content:"";position:absolute;width:22px;height:22px;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none;border:2px solid rgba(141,255,158,.85);filter:drop-shadow(0 0 6px rgba(141,255,158,.6))}
.hit::before{left:-6px;top:-6px;border-right:0;border-bottom:0;transform:translate(6px,6px)}
.hit::after{right:-6px;bottom:-6px;border-left:0;border-top:0;transform:translate(-6px,-6px)}
.hit:hover::before,.hit:hover::after,.hit.ping::before,.hit.ping::after,html[data-input="key"] .hit:focus-visible::before,html[data-input="key"] .hit:focus-visible::after{opacity:1;transform:none}
.hit.ping::before,.hit.ping::after{animation:pingFade 1.6s ease-out forwards}
@keyframes pingFade{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
#s-room.alarm .hit::before,#s-room.alarm .hit::after{border-color:rgba(255,120,100,.9);filter:drop-shadow(0 0 6px rgba(255,90,70,.6))}
/* the chamber gets no brackets: you knock on the glass */
.hit[data-hit="chamber"]::before,.hit[data-hit="chamber"]::after{display:none}
.hit[data-hit="chamber"]{cursor:pointer}
#s-room.breach-3 .hit[data-hit="chamber"]{cursor:not-allowed}

/* ---------- gate ---------- */
#lamp-glow{position:absolute;pointer-events:none;background:radial-gradient(50% 60% at 50% 40%,rgba(255,215,140,.55),rgba(255,200,120,.12) 55%,transparent 75%);mix-blend-mode:screen;opacity:.9}
#sign-glow{position:absolute;pointer-events:none;opacity:0;transition:opacity .9s ease;background:radial-gradient(50% 60% at 50% 50%,rgba(200,255,210,.7),transparent 70%);mix-blend-mode:screen}
#sign-glow.lit{opacity:1}
.gate-ui{position:fixed;left:0;right:0;top:max(4.5vh,env(safe-area-inset-top));text-align:center;pointer-events:none;z-index:3}
.gate-ui h1{font-size:clamp(24px,4.6vw,58px);letter-spacing:.42em;text-indent:.42em;color:#eef4ff;text-shadow:0 0 26px rgba(141,255,158,.35),0 2px 12px #000;font-weight:700}
.gate-ui p{margin-top:12px;color:var(--green);letter-spacing:.28em;text-indent:.28em;font-size:clamp(11px,1.4vw,15px);text-shadow:0 0 12px rgba(141,255,158,.5)}
.gate-tag{position:fixed;left:0;right:0;bottom:max(3.5vh,env(safe-area-inset-bottom));text-align:center;pointer-events:none;z-index:3;color:#aebfd6;font-size:12px;letter-spacing:.3em;text-indent:.3em;text-shadow:0 1px 8px #000;opacity:.85}
.gate-tag .mob{display:none}
@media (max-aspect-ratio:1/1){.gate-tag .desk{display:none}.gate-tag .mob{display:inline}}

/* ---------- room: light ---------- */
#chamber-glow{position:absolute;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(50% 50% at 50% 50%,rgba(120,255,150,.55),rgba(120,255,150,.12) 45%,transparent 70%);opacity:.3;will-change:opacity}
#s-room.alarm #chamber-glow{background:radial-gradient(50% 50% at 50% 50%,rgba(255,90,70,.6),rgba(255,90,70,.14) 45%,transparent 70%)}
#dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;will-change:opacity}
/* the monitors: CRT panels fitted to the painted glass, text in art pixels so it scales with the room */
.tv{position:absolute;overflow:hidden;border-radius:10px;background:#03130a;color:var(--green);padding:14px 16px;font-size:15px;line-height:1.25;box-shadow:inset 0 0 40px rgba(0,0,0,.75),inset 0 0 12px rgba(141,255,158,.08);text-shadow:0 0 8px rgba(141,255,158,.45)}
.tv::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),radial-gradient(60% 60% at 50% 45%,transparent 60%,rgba(0,0,0,.55) 100%)}
.tv .flick{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,0) 0%,rgba(141,255,158,.06) 50%,rgba(255,255,255,0) 100%);background-size:100% 46px;animation:scan 5s linear infinite;opacity:.6}
@keyframes scan{from{background-position:0 -60px}to{background-position:0 400px}}
.tv .lbl{font-size:11px;letter-spacing:.22em;opacity:.8;margin-bottom:6px;white-space:nowrap}
.tv .big{font-size:30px;font-weight:700;white-space:nowrap;line-height:1.05}
.tv .big small{font-size:12px;font-weight:400;letter-spacing:.1em}
.tv .sub{font-size:11px;letter-spacing:.12em;color:var(--green-dim);margin-top:6px;white-space:nowrap}
.tv .bar{height:9px;background:#02100a;border:1px solid rgba(141,255,158,.3);border-radius:3px;margin-top:8px;overflow:hidden}
.tv .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-dim),var(--green));transition:width 1.2s ease}
.tv .row{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em;margin-top:5px}
.tv canvas{position:static;display:block;width:100%;height:56px;margin-top:6px}
.tv ul{list-style:none}
.tv li{font-size:12px;padding:4px 0;border-bottom:1px dashed rgba(141,255,158,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv li span{color:var(--green-dim)}
.tv li.hot{color:#fff}
#s-room.alarm .tv{color:#ff8a78;text-shadow:0 0 8px rgba(255,90,70,.5);background:#160504}
#s-room.alarm .tv .bar i{background:linear-gradient(90deg,#7a2a22,#ff6a5a)}
#s-room.dark .tv{filter:brightness(.55)}
.tv.attract{animation:attractPulse 1.2s ease-in-out 2}
@keyframes attractPulse{50%{filter:brightness(1.35) drop-shadow(0 0 20px rgba(141,255,158,.8))}}
/* the LCD on the deck and the LED row */
#lcd{position:absolute;overflow:hidden;background:#0a1a10;color:#9cffb0;font-size:13px;letter-spacing:.08em;padding:6px 8px;line-height:1.35;border-radius:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.8);white-space:nowrap;text-shadow:0 0 6px rgba(141,255,158,.5)}
#lcd span{display:inline-block;animation:marquee 14s linear infinite}
@keyframes marquee{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
#leds{position:absolute;display:flex;gap:9px;align-items:center;padding-left:2px}
#leds i{width:9px;height:9px;border-radius:50%;background:#2e6bff;box-shadow:0 0 8px #2e6bff;opacity:.35}
#leds i.on{opacity:1}
#s-room.alarm #leds i{background:#ff4a3a;box-shadow:0 0 8px #ff4a3a}

/* ---------- HUD (outside the stage, viewport scale) ---------- */
.hud{position:fixed;z-index:30;display:flex;gap:10px;align-items:center}
.hud.tl{left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))}
.hud.tr{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}
.hud.br{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
.hbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid #223247;border-radius:4px;background:rgba(4,7,12,.7);color:var(--text);font-size:11px;letter-spacing:.18em;backdrop-filter:blur(6px);transition:border-color .2s,color .2s,box-shadow .2s}
.hbtn:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 14px rgba(141,255,158,.3)}
.hbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hbtn.ping{animation:hbtnPing 1.6s ease-out}
@keyframes hbtnPing{20%{border-color:var(--green);color:var(--green);box-shadow:0 0 18px rgba(141,255,158,.6)}}
.hbtn.muted svg .wave{display:none}
.badge{font-size:10px;letter-spacing:.2em;padding:0 10px;height:34px;display:inline-flex;align-items:center;border:1px solid var(--amber);color:var(--amber);border-radius:4px;background:rgba(4,7,12,.6);white-space:nowrap}
#s-room.alarm .badge{border-color:var(--red);color:var(--red);animation:blinkBadge 1s steps(1,end) infinite}
@keyframes blinkBadge{50%{opacity:.35}}
#room-hud,#room-hud2,#room-hud3{display:none}
#s-room.on ~ #room-hud,#s-room.on ~ #room-hud2,#s-room.on ~ #room-hud3{display:flex}
#gate-hud{display:flex}
#s-room.on ~ #gate-hud{display:none}
#vol{width:70px;accent-color:var(--green)}
.hud .foot{font-size:10px;letter-spacing:.08em;color:var(--muted);text-align:right;line-height:1.5;max-width:min(60vw,420px);text-shadow:0 1px 6px #000}
.hud .foot b{color:var(--text);font-weight:600}
@media (max-width:640px){.hud .foot{display:none}.badge{display:none}}

/* ---------- cursor tooltip ---------- */
#tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .16s ease;font-size:11px;letter-spacing:.22em;color:#e8f0ff;white-space:nowrap;background:rgba(4,7,12,.88);border:1px solid #2a3a55;padding:7px 11px;border-radius:4px;transform:translate(16px,22px)}
#tip.on{opacity:1}
@media (pointer:coarse){#tip{display:none}}

/* ---------- atmosphere overlays ---------- */
#grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:35;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(2%,2%)}}
#vignette{position:fixed;inset:0;z-index:34;pointer-events:none;background:radial-gradient(80% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
#scan{position:fixed;inset:0;z-index:34;pointer-events:none;opacity:.05;background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px)}
@media (prefers-reduced-motion: reduce){#grain{animation:none}.tv .flick{animation:none}#lcd span{animation:none}}

/* ---------- overlays: paper documents ---------- */
.ov{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(3,6,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease;padding:16px}
.ov.on{display:flex}
.ov.in{opacity:1}
.ov .x{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:44px;height:44px;display:grid;place-items:center;color:#cfe;font-size:26px;border-radius:4px;background:rgba(4,7,12,.7);border:1px solid #223247}
.ov .x:hover{color:var(--green);border-color:var(--green)}
.paper{position:relative;width:min(560px,100%);max-height:min(82vh,760px);overflow:auto;background:var(--paper);color:var(--ink);font-family:var(--type);padding:38px 40px 34px;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 60px rgba(120,90,40,.12);transform:translateY(14px) rotate(-.6deg);transition:transform .3s ease;-webkit-user-select:text;user-select:text}
.ov.in .paper{transform:rotate(-.6deg)}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .05  0 0 0 .18 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");mix-blend-mode:multiply;opacity:.8}
.paper h2{font-size:15px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:6px}
.paper .meta{font-size:11px;letter-spacing:.14em;color:#5a5340;margin-bottom:18px;border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:10px}
.paper p{font-size:14px;line-height:1.6;margin:0 0 12px}
.paper ul{margin:0 0 12px 18px;font-size:14px;line-height:1.6}
.paper .redact{background:#1b2430;color:#1b2430;border-radius:2px}
.paper .stamp{position:absolute;right:26px;top:22px;padding:6px 10px;border:3px double #a3202a;color:#a3202a;font-weight:700;letter-spacing:.2em;font-size:12px;transform:rotate(8deg);opacity:.8;mix-blend-mode:multiply;text-transform:uppercase}
.paper .stamp.g{border-color:#2f6f3f;color:#2f6f3f}
.paper .sig{margin-top:22px;font-size:12px;color:#5a5340;font-style:italic}
.paper .tabs{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 18px}
.paper .tabs button{font-family:var(--type);font-size:11px;letter-spacing:.12em;padding:5px 9px;border:1px solid rgba(0,0,0,.35);background:rgba(255,255,255,.35);border-radius:2px;text-transform:uppercase}
.paper .tabs button.cur{background:#1b2430;color:var(--paper)}
.paper .row2{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px dotted rgba(0,0,0,.3)}
.paper .row2 b{font-weight:700}
.paper .hint{margin-top:16px;font-size:11px;letter-spacing:.12em;color:#5a5340;text-transform:uppercase}
.paper .act{display:inline-block;text-decoration:none;margin-top:8px;font-family:var(--type);font-size:12px;letter-spacing:.16em;padding:8px 12px;background:#1b2430;color:var(--paper);border-radius:2px;text-transform:uppercase}
.paper .act:disabled{opacity:.45;cursor:default}
.paper .fine{font-size:11px;line-height:1.55;color:#4a4536}

/* clipboard variant */
.paper.clip{background:#f2eee3;padding-top:52px}
.paper.clip::after{content:"";position:absolute;left:50%;top:-14px;width:110px;height:30px;margin-left:-55px;background:#3a4250;border-radius:6px 6px 3px 3px;box-shadow:0 3px 6px rgba(0,0,0,.4)}

/* ---------- terminal ---------- */
#term .con{width:min(720px,100%);max-height:min(80vh,640px);display:flex;flex-direction:column;background:#04120a;color:var(--green);border:1px solid rgba(141,255,158,.35);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.6);font-size:13px;line-height:1.5;overflow:hidden;transform:translateY(14px);transition:transform .3s ease;text-shadow:0 0 6px rgba(141,255,158,.4)}
#term.in .con{transform:none}
#term .con::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
#term .bar{display:flex;justify-content:space-between;padding:8px 12px;font-size:10px;letter-spacing:.22em;border-bottom:1px solid rgba(141,255,158,.25);color:var(--green-dim)}
#term .out{flex:1;overflow:auto;padding:12px 14px;white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text}
#term .out .in{color:#fff}
#term .out .err{color:#ff8a78}
#term .out .warn{color:var(--amber)}
#term .in-row{display:flex;gap:8px;padding:10px 14px;border-top:1px solid rgba(141,255,158,.25);align-items:center}
#term input{flex:1;background:none;border:0;color:#fff;font:inherit;outline:none;caret-color:var(--green)}
#term .caret{color:var(--green)}
#s-room.alarm ~ #term .con{color:#ff8a78;border-color:rgba(255,90,70,.4);background:#160504}

/* ---------- take a number: the intake ticket ---------- */
#ticket .paper{width:min(340px,100%);text-align:center;padding:30px 26px 22px;transform:rotate(1.5deg)}
#ticket .paper::after{content:"";position:absolute;left:8%;right:8%;top:14px;border-top:2px dashed rgba(0,0,0,.3)}
#ticket .n{font-size:84px;font-weight:700;line-height:1;margin:14px 0 4px}
#ticket .s{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#5a5340}

/* ---------- calibration (press C) ---------- */
#calib{position:fixed;left:12px;bottom:12px;z-index:70;display:none;background:rgba(0,0,0,.85);color:#fff;font-size:11px;padding:8px 10px;border-radius:4px;white-space:pre;border:1px solid #444}
#calib.on{display:block}
.calib-box{position:absolute;border:1px dashed #ff4dff;background:rgba(255,77,255,.08);pointer-events:none}

/* the drag hint: portrait only, until the first drag */
#drag-hint{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:31;display:none;align-items:center;gap:10px;
  padding:9px 14px;border:1px solid rgba(141,255,158,.4);border-radius:4px;background:rgba(4,7,12,.75);color:var(--green);font-size:11px;letter-spacing:.2em;white-space:nowrap;pointer-events:none;
  text-shadow:0 0 8px rgba(141,255,158,.5);transition:opacity .5s ease}
#drag-hint span{font-size:16px;display:inline-block;animation:nudgeL 1.6s ease-in-out infinite}
#drag-hint span:last-child{animation-name:nudgeR}
@keyframes nudgeL{50%{transform:translateX(-4px)}}
@keyframes nudgeR{50%{transform:translateX(4px)}}
#drag-hint.done{opacity:0}

/* portrait */
@media (max-aspect-ratio:1/1){
  .gate-ui{top:calc(max(4.5vh,env(safe-area-inset-top)) + 46px)}
  .gate-ui h1{font-size:clamp(20px,7vw,34px)}
  .tv{font-size:16px}
  #s-room.on ~ #drag-hint{display:flex}
}
/* narrow: the header has room for exit, ticket and sound, nothing else */
@media (max-width:640px){
  #clock{display:none!important}
  #vol{width:56px}
  .hbtn{padding:0 10px;letter-spacing:.14em}
  .hud{gap:6px}
}