/* Self-hosted pixel fonts (SIL Open Font License, see fonts/LICENSE-*.txt) */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/press-start-2p-latin-400-normal.woff2") format("woff2"),url("../fonts/press-start-2p-latin-400-normal.woff") format("woff")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/vt323-latin-400-normal.woff2") format("woff2"),url("../fonts/vt323-latin-400-normal.woff") format("woff")}
/* Layout: one portrait "handheld" screen centered in a night-shift corridor; clipboard slides over it. Single deliberate dark look. */
:root{
  --night:#0f1724; --panel:#18233a; --ink:#0a0d14; --cream:#f2ead3; --muted:#8e9bb3;
  --paper:#f7f0dc; --paper-ink:#1d2433; --paper-line:#c9d6e3; --margin:#e8857a;
  --wood:#9a6a3e; --wood-lo:#6f4826; --metal:#c9ced6;
  --coral:#ff6b5a; --sky:#5bc0f5; --gold:#ffc94a; --violet:#b48cff;
  --good:#3fbf74; --warn:#e99a2c; --bad:#e2475a;
  --display:"Press Start 2P", "Courier New", monospace;
  --body:"VT323", "Courier New", monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--body);font-size:20px;overflow:hidden;
  background-image:radial-gradient(ellipse at 50% 0%, #1d2b45 0%, var(--night) 60%)}
*{box-sizing:border-box}
button{font:inherit;color:inherit}
#app{height:100%;max-width:520px;margin:0 auto;padding-inline:16px;display:flex;flex-direction:column;position:relative}
.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:12px 10px}
.brand{display:flex;flex-direction:column;gap:5px;min-width:0}
.brand{gap:4px}
.brand .b1{font-family:var(--display);font-size:9px;letter-spacing:.06em;color:var(--gold);line-height:1.2}
.brand .b1+.b1{color:var(--cream)}
.hud-r{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip{font-family:var(--display);font-size:8px;letter-spacing:.06em;padding:7px 7px;background:var(--panel);border:2px solid var(--ink);
  box-shadow:inset -2px -2px 0 #0d1525, inset 2px 2px 0 #2a3a5c;color:var(--cream);white-space:nowrap}
button.chip{cursor:pointer}
button.chip:focus-visible,.btn:focus-visible,.dot:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.chip.score{color:var(--gold)}
.chip.end{color:#ffb1a8}
.chip.end[data-arm]{background:#5a1d24;color:#fff}
#screen{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding-block:6px 16px}
.legend-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-family:var(--display);font-size:8px;letter-spacing:.06em;color:var(--muted)}
.legend-bar span{display:flex;align-items:center;gap:6px}
.legend-bar i{width:14px;height:14px;border:2px solid var(--ink);box-shadow:0 0 0 1px #fff;font-style:normal;display:grid;place-items:center;color:var(--ink);font-size:7px}
.stage{position:relative;--s:2.4;box-shadow:0 0 0 4px var(--ink),0 0 0 7px #2b3a57,0 0 0 9px var(--ink),0 14px 30px rgba(0,0,0,.55);
  background:#000;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;outline:none}
.stage:focus-visible{box-shadow:0 0 0 4px var(--ink),0 0 0 7px var(--gold),0 0 0 9px var(--ink)}
.inner{position:absolute;inset:0;transform-origin:50% 42%}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.ov{position:absolute;inset:0;pointer-events:none}
.plate{position:absolute;left:75%;top:31%;width:18.75%;height:6%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:calc(var(--s)*3.2px);color:#3a2a08;letter-spacing:.02em}
.prompt{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-family:var(--display);font-size:calc(var(--s)*4.4px);color:var(--cream);
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pop{position:absolute;font-family:var(--display);font-size:calc(var(--s)*4.6px);color:var(--gold);transform:translate(-50%,-50%);
  text-shadow:2px 2px 0 var(--ink);animation:pop .55s steps(6) forwards}
@keyframes pop{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}30%{transform:translate(-50%,-80%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff;color:var(--ink);font-family:var(--display);font-size:calc(var(--s)*3.8px);
  line-height:1.5;padding:.7em .9em;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;animation:bub .25s steps(3)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-6px;border:6px solid transparent;border-top:8px solid var(--ink)}
.bubble.thought{background:var(--paper)}
@keyframes bub{from{transform:translate(-50%,-80%) scale(.4)}}
.counter{position:absolute;left:3%;top:2.5%;font-family:var(--display);font-size:calc(var(--s)*3.1px);padding:.6em .8em;background:rgba(10,13,20,.82);
  color:var(--cream);border:2px solid var(--ink);letter-spacing:.06em}
.counter b{color:var(--gold);font-weight:400}
.dots{position:absolute;inset:0}
.dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:3px solid var(--ink);cursor:pointer;
  font-family:var(--display);font-size:10px;line-height:1;color:var(--ink);display:grid;place-items:center;
  box-shadow:0 0 0 2px #fff;animation:pulse 1.2s steps(2) infinite}
.dot::before{content:"";position:absolute;inset:-9px;border:2px solid currentColor;opacity:.0}
.dot.exam{background:var(--coral)} .dot.talk{background:var(--sky)} .dot.test{background:var(--gold)} .dot.page{background:var(--violet)}
.dot.done{background:#5b6578;color:#c8d0dc;animation:none;box-shadow:0 0 0 2px #9aa6b8}
.dot .lbl{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:7px;background:var(--ink);color:var(--cream);
  padding:4px 5px;white-space:nowrap;opacity:0;pointer-events:none}
.dot:focus-visible .lbl{opacity:1}
@media (hover:hover){.dot:hover .lbl{opacity:1}}
@keyframes pulse{50%{transform:scale(1.18)}}
.dialog{position:absolute;left:3%;right:3%;bottom:2.5%;max-height:62%;overflow:auto;background:#121a2b;border:3px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 5px var(--ink);padding:calc(var(--s)*4px) calc(var(--s)*5px) calc(var(--s)*6px)}
.dialog .tag{font-family:var(--display);font-size:max(8px,calc(var(--s)*3.2px));letter-spacing:.08em;margin-bottom:.9em}
.dialog .tag.exam{color:var(--coral)} .dialog .tag.talk{color:var(--sky)} .dialog .tag.test{color:var(--gold)} .dialog .tag.page{color:var(--violet)}
.dialog p{margin:0;font-size:max(19px,calc(var(--s)*9.2px));line-height:1.05;color:var(--cream);min-height:2.1em}
.dialog .more{position:absolute;right:calc(var(--s)*4px);bottom:calc(var(--s)*2.5px);font-family:var(--display);font-size:9px;color:var(--gold);animation:blink .8s steps(1) infinite}
.fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.toast{position:absolute;left:50%;top:9%;transform:translateX(-50%);font-family:var(--display);font-size:calc(var(--s)*3.1px);line-height:1.6;
  background:var(--ink);color:var(--cream);padding:.7em 1em;border:2px solid var(--cream);text-align:center;width:max-content;max-width:90%}

/* Clipboard */
.clip{position:absolute;inset:0;overflow:auto;padding-block:8px 28px;transform:translateY(105%);transition:transform .55s steps(9)}
.clip.in{transform:none}
.board{position:relative;max-width:440px;margin:18px auto 0;background:var(--wood);border:3px solid var(--ink);padding:30px 12px 14px;
  box-shadow:inset -4px -4px 0 var(--wood-lo),inset 4px 4px 0 #b9854f,6px 6px 0 rgba(0,0,0,.45)}
.clipper{position:absolute;left:50%;top:-14px;width:120px;margin-left:-60px;height:34px;background:var(--metal);border:3px solid var(--ink);
  box-shadow:inset -4px -4px 0 #8c96a3,inset 4px 4px 0 #eef1f5}
.clipper::after{content:"";position:absolute;left:50%;top:6px;width:34px;margin-left:-17px;height:10px;background:var(--ink)}
.paper{position:relative;background:var(--paper);color:var(--paper-ink);padding:18px 14px 18px 30px;border:2px solid #d9cfb3;
  background-image:linear-gradient(90deg,transparent 21px,var(--margin) 21px,var(--margin) 23px,transparent 23px),
  repeating-linear-gradient(180deg,transparent 0 25px,var(--paper-line) 25px 26px)}
.ptop{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:var(--display);font-size:8px;letter-spacing:.06em;color:#59617a;margin-bottom:14px}
.ph{font-family:var(--display);font-size:10px;letter-spacing:.08em;margin:8px 0 10px;font-weight:400;color:var(--paper-ink)}
.ph.ask{margin-top:18px;color:#b2362f}
.findings{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.findings li{display:grid;grid-template-columns:22px 1fr;gap:6px;font-size:21px;line-height:1.05;min-width:0}
.findings .n{font-family:var(--display);font-size:9px;padding-top:4px;color:#59617a}
.findings .t{min-width:0}
.findings .src{display:inline-block;font-family:var(--display);font-size:7px;letter-spacing:.06em;padding:3px 4px 2px;margin-right:6px;vertical-align:3px;color:var(--ink)}
.src.exam{background:var(--coral)} .src.talk{background:var(--sky)} .src.test{background:var(--gold)} .src.page{background:var(--violet)}
form{display:grid;gap:12px}
.field{display:grid;gap:5px;position:relative}
.field label{font-family:var(--display);font-size:8px;letter-spacing:.06em;color:#3c4458;display:flex;justify-content:space-between;gap:8px}
.field label b{font-weight:400;color:#b2362f}
.ac{position:relative}
.ac input{width:100%;font-family:var(--body);font-size:22px;padding:6px 36px 4px 10px;background:#fffdf5;color:var(--paper-ink);border:3px solid var(--ink);
  box-shadow:inset 3px 3px 0 #e6dcc0;border-radius:0;outline:none}
.ac input:focus{box-shadow:inset 3px 3px 0 #e6dcc0,0 0 0 3px var(--gold)}
.ac input:disabled{opacity:1;-webkit-text-fill-color:var(--paper-ink)}
.mark{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:12px}
.mark.ok{color:var(--good)} .mark.no{color:var(--bad)}
.field.right .ac input{background:#e2f6e8;border-color:var(--good)}
.sugg{position:absolute;z-index:5;left:0;right:0;top:calc(100% - 3px);margin:0;padding:0;list-style:none;max-height:216px;overflow:auto;
  background:#fffdf5;border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.sugg li{padding:6px 10px 4px;font-size:21px;line-height:1;cursor:pointer;border-bottom:1px solid #eadfc3;color:var(--paper-ink)}
.sugg li small{display:block;font-size:17px;color:#6b7186;margin-top:2px}
.sugg li.on,.sugg li:hover{background:var(--ink);color:var(--cream)}
.sugg li.on small,.sugg li:hover small{color:var(--muted)}
.sugg li mark{background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.err{margin:0;font-size:20px;color:#b2362f}
.btn{font-family:var(--display);font-size:10px;letter-spacing:.06em;padding:13px 14px 12px;border:3px solid var(--ink);cursor:pointer;
  background:var(--gold);color:var(--ink);box-shadow:inset -3px -3px 0 #c9922a,inset 3px 3px 0 #ffe39a,4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:inset -3px -3px 0 #c9922a,inset 3px 3px 0 #ffe39a,2px 2px 0 var(--ink)}
.btn:disabled{background:#cfc6ad;color:#7c7766;box-shadow:inset -3px -3px 0 #b3aa90,4px 4px 0 var(--ink);cursor:not-allowed}
.btn.ghost{background:var(--panel);color:var(--cream);box-shadow:inset -3px -3px 0 #0d1525,inset 3px 3px 0 #2a3a5c,4px 4px 0 var(--ink)}
.stamp{position:absolute;right:0;top:-8px;font-family:var(--display);font-size:13px;line-height:1.4;padding:8px 10px;border:4px solid currentColor;
  transform:rotate(-9deg);background:rgba(247,240,220,.86);text-align:center;animation:stamp .35s steps(4)}
.stamp small{display:block;font-size:9px}
.stamp.s3{color:var(--good)} .stamp.s1{color:var(--warn)} .stamp.s0{color:var(--bad)}
@keyframes stamp{from{transform:rotate(-9deg) scale(2.4);opacity:0}}
.verdict{position:relative;display:grid;gap:12px;margin-top:18px}
.answer{display:grid;gap:4px;padding-right:128px}
.lbl{font-family:var(--display);font-size:8px;letter-spacing:.08em;color:#59617a}
.answer strong{font-size:28px;font-weight:400;line-height:1}
.sys{justify-self:start;font-family:var(--display);font-size:7px;letter-spacing:.08em;background:var(--ink);color:var(--cream);padding:4px 5px 3px}
.pearl{background:#ffe98a;border:3px solid var(--ink);padding:10px 12px;box-shadow:3px 3px 0 rgba(0,0,0,.3);transform:rotate(.6deg)}
.pearl p{margin:6px 0 0;font-size:21px;line-height:1.08}
.tally{font-family:var(--display);font-size:8px;line-height:1.7;letter-spacing:.06em;color:#3c4458}
.modal{position:absolute;inset:0;z-index:20;background:rgba(5,8,14,.78);display:grid;place-items:center;padding:16px}
.card{max-width:400px;background:var(--panel);border:3px solid var(--ink);box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 5px var(--ink),6px 6px 0 #000;
  padding:22px 20px 20px;display:grid;gap:12px}
.card h2{font-family:var(--display);font-size:12px;font-weight:400;color:var(--gold);margin:0 0 4px;letter-spacing:.06em;line-height:1.5}
.card ol{margin:0;padding-left:22px;display:grid;gap:6px;font-size:21px;line-height:1.05}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:19px}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:16px;height:16px;border:2px solid var(--ink);box-shadow:0 0 0 1px #fff;flex:none}
.card .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.card p{margin:0;font-size:20px;line-height:1.1;color:var(--muted)}
.below{width:100%;display:flex;flex-direction:column;align-items:center}
.title-ov{position:absolute;left:0;right:0;top:6.5%;text-align:center;pointer-events:none}
.t-name{margin:0;font-family:var(--display);font-weight:400;line-height:1.12;color:var(--cream);
  text-shadow:0 calc(var(--s)*1.1px) 0 #b2362f,2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.t-name span{display:block;font-size:calc(var(--s)*12px)}
.t-name span+span{font-size:calc(var(--s)*9.4px);color:var(--gold)}
.t-sub{margin:calc(var(--s)*3px) 0 0;font-family:var(--display);font-size:calc(var(--s)*2.6px);letter-spacing:.14em;color:var(--sky);
  text-shadow:1px 1px 0 var(--ink)}
.play .t-name span{animation:drop .75s steps(8) both}
.play .t-name span+span{animation-delay:.35s}
.play .t-sub{animation:fadein .4s steps(4) .95s both}
.title-btns{display:grid;gap:14px;width:min(100%,340px)}
.title-btns.play{animation:rise .45s steps(5) 1.15s both}
.title-btns .btn{width:100%;font-size:11px;padding:15px 12px 14px}
.title-stats{margin:2px 0 0;text-align:center;font-family:var(--display);font-size:8px;line-height:1.8;letter-spacing:.06em;color:var(--muted)}
.legal-line{margin:0;text-align:center;font-family:var(--display);font-size:7px;line-height:2;letter-spacing:.06em;color:#6f7b93}
.linkish{background:none;border:0;padding:2px 0;font:inherit;color:var(--sky);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.legal-card{max-height:calc(100% - 16px);overflow:auto;max-width:440px;gap:14px}
.legal-card section{display:grid;gap:5px}
.legal-card h3{margin:0;font-family:var(--display);font-weight:400;font-size:8px;line-height:1.6;letter-spacing:.06em;color:var(--sky)}
.legal-card p{color:var(--cream)}
.legal-card p a{color:var(--gold)}
.legal-card .credits{font-size:17px;color:var(--muted)}
.readmit-tag{position:absolute;left:50%;top:15%;transform:translateX(-50%) rotate(-4deg);font-family:var(--display);font-size:calc(var(--s)*3.4px);
  background:#c8343f;color:#fff;padding:.5em .7em .4em;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);letter-spacing:.06em}
.dot.bonus::after{content:"+1";position:absolute;right:-12px;top:-12px;font-family:var(--display);font-size:7px;line-height:1;padding:3px 2px 2px;background:var(--gold);color:var(--ink);border:2px solid var(--ink)}
.mini,.triage{position:absolute;left:3%;right:3%;top:3%;bottom:3%;overflow:auto;background:#121a2b;border:3px solid var(--ink);z-index:3;
  box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 5px var(--ink);padding:16px 14px 14px;display:grid;gap:10px;align-content:start;cursor:default}
.mini .tag{font-family:var(--display);font-size:8px;letter-spacing:.08em;color:var(--gold)}
.m-prompt,.t-q{margin:0;font-size:19px;line-height:1.02;color:var(--cream)}
.m-media{display:grid;gap:8px;justify-items:center}
.m-cv{display:block;image-rendering:pixelated;border:3px solid var(--ink);box-shadow:0 0 0 2px #2b3a57}
.m-cv.heart,.m-cv.ecg{width:100%;height:auto}
.m-cv.smear{width:min(60%,190px);height:auto;border-radius:50%}
.m-listen{font-size:9px;padding:10px 14px 9px}
.m-opts,.t-bays{display:grid;gap:8px}
.m-opt,.bay{font-family:var(--body);font-size:18px;line-height:1;text-align:left;padding:7px 9px 6px;background:#1d2840;color:var(--cream);
  border:2px solid #3a4b70;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.m-opt:hover:not(:disabled),.bay:hover:not(:disabled){border-color:var(--gold)}
.m-opt:focus-visible,.bay:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.m-opt:disabled,.bay:disabled{cursor:default;opacity:.65}
.m-opt.right,.bay.right{opacity:1;border-color:var(--good);background:#173a29}
.m-opt.wrong,.bay.wrong{opacity:1;border-color:var(--bad);background:#3d1820}
.m-fb{margin:0;font-size:19px;line-height:1.05;color:var(--cream);background:#0c1220;border-left:4px solid var(--gold);padding:8px 10px}
.m-fb b{display:block;font-family:var(--display);font-weight:400;font-size:8px;letter-spacing:.06em;margin-bottom:6px}
.m-fb b.ok{color:var(--good)} .m-fb b.no{color:#ff7b8a}
.mini .btn,.triage .btn{justify-self:start;font-size:9px}
.t-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.t-alarm{font-family:var(--display);font-size:11px;color:#ff6b6b;letter-spacing:.06em;animation:blink .7s steps(1) infinite}
.t-time{font-family:var(--display);font-size:10px;color:var(--gold)}
.t-bar{height:8px;background:#2a2f40;border:2px solid var(--ink)}
.t-bar i{display:block;height:100%;width:100%;background:var(--gold);transition:width 1s linear}
.bay{display:grid;gap:4px}
.bay-l{font-family:var(--display);font-size:7px;letter-spacing:.08em;color:var(--sky)}
.bay-v{font-size:17px;color:var(--muted)}
.alarm{position:absolute;inset:0;background:#ff2a2a;opacity:0;animation:alarm 1.1s steps(2) infinite}
@keyframes alarm{50%{opacity:.16}}
.stats{background:#fbf7ec;color:var(--paper-ink);border:2px solid #d8cfb5;box-shadow:3px 3px 0 rgba(0,0,0,.35);padding:12px 12px 10px;display:grid;gap:10px;transform:rotate(.4deg)}
.s-head{display:grid;gap:4px}
.s-head h3{margin:0;font-family:var(--display);font-weight:400;font-size:9px;letter-spacing:.08em}
.s-head span{font-size:17px;color:#59617a;line-height:1}
.srows{display:grid;gap:5px}
.srow{display:grid;grid-template-columns:92px minmax(0,1fr) 40px;gap:8px;align-items:center}
.sname{font-family:var(--display);font-size:7px;letter-spacing:.04em;color:#3c4458;white-space:nowrap}
.strack{height:12px;background:#ece3cc;border:2px solid #cdbf9d;position:relative}
.strack i{position:absolute;left:0;top:0;bottom:0;display:block}
.strack i.good{background:#3fa86a} .strack i.warn{background:#e0952a} .strack i.bad{background:#d8495b}
.sval{font-size:18px;text-align:right;font-variant-numeric:tabular-nums;color:var(--paper-ink)}
.srow.none .sname,.srow.none .sval{color:#9aa0ad}
.s-empty{margin:0;font-size:19px;color:#59617a}
.s-foot{display:grid;gap:3px;border-top:2px dashed #d8cfb5;padding-top:8px}
.s-foot p{margin:0;font-size:18px;line-height:1.05}
.s-foot b{font-family:var(--display);font-weight:400;font-size:7px;letter-spacing:.06em;margin-right:6px;color:#b2362f}
.bonusline,.readline{font-family:var(--display);font-size:8px;letter-spacing:.06em;line-height:1.7;color:#3c4458}
.wing-sign{position:absolute;left:3%;top:15%;font-family:var(--display);font-size:calc(var(--s)*2.6px);letter-spacing:.06em;line-height:1.4;
  background:var(--ink);color:var(--gold);padding:.6em .7em .5em;border:2px solid #c9a14a;max-width:34%}
.wing-card{max-width:440px;max-height:calc(100% - 16px);overflow:auto}
.wings{display:grid;gap:10px}
.wing{display:grid;gap:6px;text-align:left;padding:12px 12px 11px;background:#1d2840;color:var(--cream);border:3px solid #3a4b70;cursor:pointer;box-shadow:4px 4px 0 var(--ink);font-family:var(--body)}
.wing b{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.06em;color:var(--gold)}
.wing span{font-size:19px;line-height:1.05}
.wing[aria-pressed="true"]{border-color:var(--gold);background:#2a2a1a}
.wing:focus-visible,.shelf:focus-visible,.mopt:focus-visible,.s-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.shelves p{margin:4px 0 8px;font-family:var(--display);font-size:8px;letter-spacing:.06em;color:var(--sky)}
.shelf-row{display:flex;flex-wrap:wrap;gap:6px}
.shelf{font-family:var(--display);font-size:8px;letter-spacing:.04em;padding:8px 8px 7px;background:#1d2840;color:var(--cream);border:2px solid #3a4b70;cursor:pointer}
.shelf[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.mgmt{display:grid;gap:8px;border-top:2px dashed #d8cfb5;padding-top:12px;min-width:0}
.verdict>*{min-width:0}
.mq{margin:0;font-size:21px;line-height:1.05;color:var(--paper-ink)}
.mopts{display:grid;gap:7px}
.mopt{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:baseline;text-align:left;font-family:var(--body);font-size:20px;line-height:1.02;
  padding:7px 9px 6px;background:#fffdf5;color:var(--paper-ink);border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.25);cursor:pointer}
.mopt b{font-family:var(--display);font-weight:400;font-size:9px}
.mopt:hover:not(:disabled){background:#fff3c9}
.mopt:disabled{cursor:default}
.mopt.right{background:#e2f6e8;border-color:var(--good)}
.mopt.wrong{background:#fbe3e5;border-color:var(--bad)}
.mfb{font-size:20px;line-height:1.05;color:var(--paper-ink);background:#f1ead2;border-left:4px solid var(--gold);padding:8px 10px}
.mfb b{display:block;font-family:var(--display);font-weight:400;font-size:8px;letter-spacing:.06em;margin-bottom:6px}
.mfb b.ok{color:var(--good)} .mfb b.no{color:var(--bad)}
.srcline,.mwhy{margin:0;font-size:18px;line-height:1.05;color:#3c4458}
.calls li.miss{color:#b2362f}
.s-tabs{display:flex;gap:6px;margin:2px 0}
.s-tabs button{font-family:var(--display);font-size:7px;letter-spacing:.06em;padding:6px 7px 5px;background:#ece3cc;color:#3c4458;border:2px solid #cdbf9d;cursor:pointer}
.s-tabs button[aria-selected="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
#clip{--coat:#f3f3ee;--coat-lo:#cfd2cc;--cuff:#2f9784}
.board .hand{position:absolute;bottom:-26px;width:52px;height:50px;pointer-events:none}
.board .hand.l{left:8px} .board .hand.r{right:8px}
.board .hand{z-index:3}
.board .hand::before{content:"";position:absolute;left:6px;right:6px;top:-6px;height:24px;background:linear-gradient(90deg,transparent 30%,#b9845d 30% 36%,transparent 36% 63%,#b9845d 63% 69%,transparent 69%) 0 0/100% 10px no-repeat,#e0a97f;border:3px solid var(--ink);box-shadow:inset -3px -3px 0 #b9845d}
.board .hand::after{content:"";position:absolute;left:0;right:0;top:15px;bottom:0;background:var(--coat);border:3px solid var(--ink);border-top:6px solid var(--cuff);box-shadow:inset -4px 0 0 var(--coat-lo)}
.clip_alu{background:#b8c0c9!important;box-shadow:inset -4px -4px 0 #8a939e,inset 4px 4px 0 #e2e7ec,6px 6px 0 rgba(0,0,0,.45)!important}
.clip_mint{background:#7fd6c2!important;box-shadow:inset -4px -4px 0 #4fa995,inset 4px 4px 0 #b5f0e2,6px 6px 0 rgba(0,0,0,.45)!important}
.clip_sticker{background-color:var(--wood)!important;background-image:radial-gradient(circle at 12% 18%,#f5cf3b 0 9px,transparent 10px),radial-gradient(circle at 88% 12%,#4fc1e8 0 8px,transparent 9px),radial-gradient(circle at 92% 70%,#f19ab9 0 11px,transparent 12px),radial-gradient(circle at 6% 82%,#7ad06b 0 8px,transparent 9px),radial-gradient(circle at 50% 97%,#b48cff 0 9px,transparent 10px)!important}
.clip_carbon{background:#24262b repeating-linear-gradient(45deg,#2e3036 0 4px,#1d1f23 4px 8px)!important;box-shadow:inset -4px -4px 0 #121316,inset 4px 4px 0 #3a3d44,6px 6px 0 rgba(0,0,0,.45)!important}
.clip_holo{background:linear-gradient(120deg,#ff9ad5,#9ad0ff,#b8ffb0,#ffe59a,#ff9ad5)!important;background-size:300% 300%!important;animation:holo 6s linear infinite;box-shadow:inset -4px -4px 0 rgba(0,0,0,.18),inset 4px 4px 0 rgba(255,255,255,.5),6px 6px 0 rgba(0,0,0,.45)!important}
@keyframes holo{to{background-position:300% 0}}
.l-shelf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.decor{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end;min-width:0;flex:1}
.decor canvas{width:56px;height:56px;image-rendering:pixelated}
.decor-empty{margin:0;font-size:19px;line-height:1.05;color:#e9d2b0;max-width:22ch}
.vend{display:grid;justify-items:center;gap:3px;background:none;border:0;padding:0;cursor:pointer;color:var(--cream);flex:none}
.vend canvas{width:56px;height:88px;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4))}
.vend span{font-family:var(--display);font-size:7px;letter-spacing:.06em}
.vend b{font-family:var(--display);font-weight:400;font-size:9px;color:var(--gold)}
.vend:hover canvas,.vend:focus-visible canvas{transform:translateY(-3px)}
.vend:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.slip .pay{font-family:var(--display);font-size:8px;letter-spacing:.06em;color:#1f7d45;margin-top:2px}
.shop-card{max-width:460px;max-height:calc(100% - 16px);overflow:auto}
.shop-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shop-head h2{margin:0}
.wallet{font-family:var(--display);font-size:12px;color:var(--gold);background:var(--ink);padding:7px 9px 6px;border:2px solid #c9a14a}
.shop-tabs{display:flex;flex-wrap:wrap;gap:6px}
.shop-tabs button{font-family:var(--display);font-size:8px;letter-spacing:.04em;padding:8px 8px 7px;background:#1d2840;color:var(--cream);border:2px solid #3a4b70;cursor:pointer}
.shop-tabs button[aria-selected="true"]{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.shop-tabs button:focus-visible,.ibtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.item{position:relative;display:grid;justify-items:center;gap:6px;padding:10px 8px 9px;background:#1d2840;border:2px solid #3a4b70;text-align:center;min-width:0}
.item b{font-family:var(--body);font-weight:400;font-size:18px;line-height:1;color:var(--cream)}
.item.equipped{border-color:var(--good)} .item.owned{border-color:#5b7a5f}
.item.rare{background:#2a2440}
.rare-tag{position:absolute;top:5px;right:5px;font-family:var(--display);font-size:6px;color:var(--ink);background:var(--violet);padding:3px 3px 2px}
.ibtn{font-family:var(--display);font-size:7px;letter-spacing:.04em;padding:7px 7px 6px;background:var(--gold);color:var(--ink);border:2px solid var(--ink);cursor:pointer;width:100%}
.ibtn:disabled{background:#3a4560;color:var(--muted);cursor:default}
.item.equipped .ibtn:disabled{background:#173a29;color:var(--good)}
.item.owned .ibtn:disabled{background:#22362a;color:#9fd3a8}
.pv-scrub{width:44px;height:44px;background:var(--c);border:3px solid var(--ink);box-shadow:inset -5px -5px 0 rgba(0,0,0,.25),inset 5px 5px 0 rgba(255,255,255,.2)}
.pv-coat{position:relative;width:40px;height:44px;background:var(--c);border:3px solid var(--ink);border-top:7px solid var(--cuff);box-shadow:inset -5px 0 0 rgba(0,0,0,.15)}
.pv-coat::after{content:"";position:absolute;left:0;right:0;top:10px;height:3px;background:var(--trim)}
.pv-clip{width:40px;height:50px;padding:0!important;margin:0!important;border:3px solid var(--ink);background:var(--wood);box-shadow:inset -3px -3px 0 var(--wood-lo),inset 3px 3px 0 #b9854f}
.pv-clip::before{content:"";display:block;margin:6px auto 0;width:26px;height:32px;background:var(--paper)}
.pv-decor{width:48px;height:48px;image-rendering:pixelated}
@keyframes drop{from{transform:translateY(-160%);opacity:0}70%{transform:translateY(10%);opacity:1}}
@keyframes fadein{from{opacity:0}}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.veil{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:10}
/* Lounge: top-down tabletop */
.lounge{position:absolute;inset:0;z-index:4;overflow:auto;display:flex;flex-direction:column;gap:18px;padding:16px 14px 0;
  background-color:#6c4326;border:4px solid var(--ink);box-shadow:inset 0 0 0 3px #8c5a33,inset 0 0 60px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(180deg,transparent 0 56px,rgba(0,0,0,.3) 56px 59px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(90deg,transparent 0 150px,rgba(0,0,0,.16) 150px 152px)}
.l-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
#mug{width:72px;height:88px;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35))}
.l-head{display:grid;gap:14px;min-width:0}
.l-sign{margin:0;justify-self:start;font-family:var(--display);font-weight:400;font-size:10px;line-height:1.5;letter-spacing:.08em;color:var(--gold);
  background:var(--ink);padding:8px 10px 7px;box-shadow:0 0 0 2px #c9a14a,3px 3px 0 2px rgba(0,0,0,.4)}
.slip{position:relative;display:grid;gap:5px;background:#fbf7ec;color:var(--paper-ink);padding:12px 12px 10px;border:2px solid #d8cfb5;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);transform:rotate(-1deg)}
.slip::before{content:"";position:absolute;top:-8px;left:50%;width:48px;height:14px;margin-left:-24px;background:rgba(255,236,170,.8);transform:rotate(3deg)}
.slip b{font-family:var(--display);font-size:9px;font-weight:400;letter-spacing:.06em;line-height:1.5}
.slip span{font-size:20px;line-height:1}
.l-tabs{display:flex;gap:6px;align-items:flex-end;border-bottom:3px solid var(--ink)}
.l-tab{font-family:var(--display);font-size:8px;letter-spacing:.06em;padding:9px 10px 7px;background:#b8924a;color:var(--ink);border:3px solid var(--ink);border-bottom:0;cursor:pointer}
.l-tab[aria-selected="true"]{background:#e8c87b;padding-bottom:11px}
.l-tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:30px 14px;padding:14px 2px 10px;align-content:start}
.folder{position:relative;display:grid;gap:8px;align-content:start;text-align:left;min-height:118px;padding:14px 10px 12px;cursor:pointer;
  color:var(--paper-ink);font-family:var(--body);background:#e8c87b;border:3px solid var(--ink);
  box-shadow:inset -3px -3px 0 #c8a359,inset 3px 3px 0 #f5dfa3,4px 5px 0 rgba(0,0,0,.4);transition:transform .12s steps(2)}
.folder:nth-child(3n+1){transform:rotate(-1.4deg)} .folder:nth-child(3n+2){transform:rotate(.9deg)} .folder:nth-child(3n){transform:rotate(-.4deg)}
.folder:hover,.folder:focus-visible{transform:translateY(-4px);outline:3px solid var(--gold);outline-offset:2px}
.ftab{position:absolute;left:-3px;top:-19px;background:#e8c87b;border:3px solid var(--ink);border-bottom:0;padding:5px 8px 3px;
  font-family:var(--display);font-size:7px;letter-spacing:.06em}
.fdx{font-size:22px;line-height:1;padding-right:4px;overflow-wrap:anywhere}
.fsys{justify-self:start;font-family:var(--display);font-size:6px;letter-spacing:.08em;background:var(--ink);color:var(--cream);padding:4px 5px 3px}
.fpts{position:absolute;right:6px;bottom:7px;font-family:var(--display);font-size:9px;padding:5px 4px 4px;border:3px solid currentColor;transform:rotate(-10deg);background:rgba(232,200,123,.8)}
.fpts.p3{color:#1f7d45} .fpts.p1{color:#a85c05}
.empty{grid-column:1/-1;margin:0;background:rgba(10,13,20,.55);border:2px dashed #c9a55a;padding:18px;font-size:21px;line-height:1.1;color:var(--cream);text-align:center}
.l-actions{position:sticky;bottom:0;margin:auto -14px 0;padding:22px 14px 14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  background:linear-gradient(180deg,rgba(38,22,10,0),rgba(38,22,10,.94) 34%)}
.l-actions .btn{flex:1 1 140px;font-size:9px;padding:13px 8px 12px}
.file-sheet{width:min(100%,440px);max-height:calc(100% - 8px);overflow:auto;display:grid;gap:4px;box-shadow:6px 6px 0 #000}
.file-sheet .btn{justify-self:start;margin-top:12px}
.fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;padding-right:96px}
.fhead strong{display:block;font-size:28px;font-weight:400;line-height:1}
.file-sheet .stamp{top:44px;right:14px}
.calls{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:3px}
.calls li{font-size:21px;line-height:1.05;display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px;align-items:baseline}
.calls li.hit{color:#1f7d45}
@media (prefers-reduced-motion: reduce){
  .play .t-name span,.play .t-sub,.title-btns.play{animation:none}
  .prompt,.dot,.dialog .more{animation:none}
  .clip{transition:none}
}

/* site links + pages */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-family:var(--display);font-size:7px;line-height:2;letter-spacing:.06em}
.foot-links a,.foot-links .linkish{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.foot-links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.foot-links.in-card{justify-content:flex-start;font-size:8px}
.pages-card{max-width:460px;max-height:calc(100% - 16px);overflow:auto;gap:14px}
.pg-tabs{display:flex;flex-wrap:wrap;gap:6px}
.pg-tabs button{font-family:var(--display);font-size:8px;letter-spacing:.04em;padding:8px 8px 7px;background:#1d2840;color:var(--cream);border:2px solid #3a4b70;cursor:pointer}
.pg-tabs button[aria-selected="true"]{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.pg-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pg{display:grid;gap:9px;color:var(--cream)}
.pg[hidden]{display:none}
.pg h2{margin:0}
.pg h3{margin:6px 0 0;font-family:var(--display);font-weight:400;font-size:8px;line-height:1.6;letter-spacing:.06em;color:var(--sky)}
.pg p,.pg li{font-size:20px;line-height:1.12;color:var(--cream)}
.pg p{margin:0}
.pg ul,.pg ol{margin:0;padding-left:22px;display:grid;gap:6px}
.pg b{color:var(--gold);font-weight:400}
.pg a{color:var(--gold)}
.pg .pg-date{color:var(--muted);font-size:18px}
.pg-legend{list-style:none;padding-left:0!important}
.pg-legend li{display:flex;align-items:center;gap:10px}
.pg-legend i{width:16px;height:16px;border:2px solid var(--ink);box-shadow:0 0 0 1px #fff;flex:none}
/* reserved ad slots (off until ads are enabled) */
.ad-slot{width:100%;display:grid;justify-items:center;gap:4px}
.ad-slot::before{content:"ADVERTISEMENT";font-family:var(--display);font-size:6px;letter-spacing:.12em;color:#6f7b93}
.ad-slot .ad-box{width:100%;display:grid;place-items:center;overflow:hidden}
.ad-hall{max-width:336px;margin-top:22px}
.ad-hall .ad-box{min-height:100px}
.ad-lounge{max-width:336px;align-self:center}
.ad-lounge .ad-box{min-height:250px}
.ad-slot.preview .ad-box{border:2px dashed #6f7b93;color:#6f7b93;font-family:var(--display);font-size:8px;letter-spacing:.08em;background:rgba(255,255,255,.03)}
.ad-lounge::before{color:#c9b48a}
.ad-lounge.preview .ad-box{border-color:#c9b48a;color:#c9b48a;background:rgba(0,0,0,.15)}
