@font-face{font-family:"Px437 MDA";src:url("fonts/Px437_IBM_MDA.ttf?v=0.29") format("truetype");font-display:block;size-adjust:114.2857%}
:root{--fg:#41ff00;--hi:#c8ffb0;--dim:#2aa800;--bg:#020800;--bloom:#41ff0066;--fs:20px}
.crt[data-ph="amber"]{--fg:#ffb000;--hi:#ffe2a0;--dim:#b87800;--bg:#0a0500;--bloom:#ffb00066}
.crt[data-ph="white"]{--fg:#d8dde0;--hi:#ffffff;--dim:#8a9094;--bg:#050607;--bloom:#ffffff44}
*{box-sizing:border-box}
html,body{margin:0;background:#111;color:#ddd}
body{font-family:Arial,sans-serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#41ff00;color:#000;padding:.3em .6em;z-index:9}
.skip:focus{left:0}
.bezel{max-width:1120px;margin:10px auto;padding:clamp(8px,2.2vw,30px);background:linear-gradient(#cfc7b0,#a89f86);border-radius:22px;box-shadow:inset 0 0 0 3px #8a826c,0 10px 30px #000}
.bezel-label{display:flex;justify-content:space-between;align-items:center;color:#4a4536;font:bold 13px Arial,sans-serif;letter-spacing:.3em;padding:8px 8px 0}
.led{display:inline-block;width:10px;height:10px;border-radius:50%;background:#2c2;box-shadow:0 0 6px #2f2;vertical-align:middle}
.led-a{display:inline-block;width:10px;height:6px;background:#3a2a10;vertical-align:middle}
.led-a.on{background:#ff9a1a;box-shadow:0 0 8px #ff9a1a}
.sysunit{max-width:1120px;margin:0 auto 10px;padding:10px 18px;background:linear-gradient(#cfc7b0,#b3aa90);border-radius:6px;box-shadow:inset 0 0 0 3px #8a826c,0 8px 20px #000;display:flex;justify-content:space-between;align-items:center;color:#4a4536;font:bold 11px Arial,sans-serif;letter-spacing:.2em}
.bays{display:flex;gap:18px}
.bay{display:inline-flex;align-items:center;gap:8px;background:#3c3a33;color:#cfc7b0;padding:8px 12px;border-radius:3px;box-shadow:inset 0 0 0 2px #26251f}
.bay .slot{display:inline-block;width:90px;height:4px;background:#111;border-radius:2px}
.bay .sm{font-size:9px;letter-spacing:.1em}
.drive[hidden]{display:none}
.led-c{display:inline-block;width:10px;height:6px;background:#3a1010;vertical-align:middle}
.led-c.on{background:#ff2a2a;box-shadow:0 0 8px #ff2a2a}
.crt{position:relative;background:var(--bg);border-radius:26px/20px;overflow:hidden;height:min(76vh,700px);box-shadow:inset 0 0 70px #000,inset 0 0 14px #000;display:flex;align-items:center;justify-content:center}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.grid{font-family:"Px437 MDA",monospace;font-size:var(--fs);line-height:1;width:calc(var(--cols,80) * 1ch);height:calc(var(--rows,25) * 1em);display:flex;flex-direction:column;color:var(--fg);position:relative;z-index:1;-webkit-font-smoothing:none;font-smooth:never}
.crt.fx .grid{text-shadow:0 0 1px var(--fg),0 0 .35em var(--bloom)}
.row{height:1em;white-space:pre;overflow:hidden;flex:none}
.status,.bar{background:var(--fg);color:var(--bg);text-shadow:none!important;position:relative;z-index:3}
.status a,.bar a,.bar button{color:var(--bg);text-decoration:none;background:none;border:0;font:inherit;padding:0;cursor:pointer}
.bar a:focus-visible,.bar button:focus-visible,.status a:focus-visible{outline:none;background:var(--bg);color:var(--fg)}
.boot{flex:1;overflow:hidden;white-space:pre}
#main{position:absolute;inset:0 2ch;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#main::-webkit-scrollbar{display:none}
#main:focus{outline:none}
#view{white-space:normal}
.scan{position:absolute;inset:-2px;pointer-events:none;z-index:2;display:none}
.crt.fx .scan{display:block;background:repeating-linear-gradient(0deg,#0000 0 2px,#0005 2px 3px),radial-gradient(ellipse at center,#0000 62%,#000b 100%)}
.crt.barrel .scan{filter:url(#barrel);display:block;background:repeating-linear-gradient(0deg,#0000 0 2px,#0004 2px 3px),radial-gradient(ellipse at center,#0000 55%,#000d 100%)}
/* v0.5: curvature only bends the glass/scanline layer; text and reverse-video bars stay crisp */
.crt.fx.flicker .scan{animation:flick 3s infinite steps(30)}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.85}48%{opacity:1}}
.cursor{display:inline-block;width:1ch;height:1em;background:var(--fg);vertical-align:top;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hi{color:var(--hi)}.dim{color:var(--dim)}
.rv{background:var(--fg);color:var(--bg);text-shadow:none}
/* windows */
.win{position:relative}
.wt{white-space:pre;height:1em;overflow:hidden}
.wb{position:relative;padding:0 2ch}
.wb h1,.wb h2,.wb h3,.wb p,.wb pre,.wb ul{font-size:1em;font-weight:normal;margin:0 0 1em;line-height:1}
.wb h1,.wb h2{color:var(--hi)}
.wb h1::before{content:"\25ba  "}
.wb pre{font:inherit;white-space:pre;overflow:hidden}
.wb pre.zork-log,.wb pre.out[role="log"]{overflow-x:hidden;overflow-y:auto;white-space:pre-wrap}
.wb a{color:var(--hi)}
.box,.out{margin:0 0 1em}
.out{white-space:pre-wrap;overflow-y:auto;overflow-wrap:anywhere}
.win.opening{animation:winopen .28s steps(7) backwards}
@keyframes winopen{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.excite{animation:excite .5s ease-out}
@keyframes excite{from{filter:brightness(1.8)}to{filter:none}}
.ghost{position:absolute;inset:0 2ch;overflow:hidden;pointer-events:none;opacity:.55;animation:ghost .15s linear forwards;z-index:1}
@keyframes ghost{to{opacity:0}}
/* menus */
.menu{list-style:none;margin:0 0 1em;padding:0}
.menu li{height:max(1em,24px)}
.menu a,.menu button{display:flex;width:100%;height:max(1em,24px);align-items:center;color:var(--fg);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer;padding:0;white-space:pre;text-shadow:inherit;line-height:1}
.menu .k{color:var(--hi)}
.menu .d{margin-left:auto;color:var(--dim)}
.menu [aria-current="true"],.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--fg);color:var(--bg);text-shadow:none;outline:none;position:relative;z-index:3}
.menu [aria-current="true"] .k,.menu [aria-current="true"] .d,.menu a:hover .k,.menu a:hover .d,.menu button:hover .k,.menu button:hover .d{color:var(--bg)}
.verify{background:var(--dim);color:var(--bg);text-shadow:none}
.logo .a{color:var(--hi)}.logo .b{color:var(--dim)}
.logo span.l{display:block;height:1em}
.reveal span.l{animation:reveal .45s steps(10) both;animation-delay:calc(var(--i) * .1s)}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* inline prompts */
.dosline{display:flex;align-items:flex-start;white-space:pre;margin:0 0 1em;min-height:1em}
input.inl{background:none;border:0;outline:0;color:var(--fg);font:inherit;padding:0;margin:0;height:1em;line-height:1;caret-color:transparent;text-shadow:inherit;min-width:1ch;flex:none}
input.inl:focus + .cursor{display:inline-block}
input.inl + .cursor{display:none}
input[type=number].inl{-moz-appearance:textfield}
input[type=number].inl::-webkit-inner-spin-button{display:none}
.btn{background:none;border:0;color:var(--hi);font:inherit;cursor:pointer;padding:0 1ch 0 0;height:1em;line-height:1;text-shadow:inherit;white-space:pre}
.btn::before{content:"["}.btn::after{content:"]"}
.btn:hover,.btn:focus-visible{background:var(--fg);color:var(--bg);outline:none;text-shadow:none}
.quickrow{display:flex;flex-wrap:wrap;margin:0 0 1em}
canvas{display:block;image-rendering:pixelated;max-width:100%;touch-action:none;margin:0 0 1em}
canvas#cv{width:min(100%,64ch);height:auto}
.defrag{color:var(--hi)}
/* touch */
.touchbar{display:none;position:sticky;bottom:0;gap:5px;padding:6px;background:#111;justify-content:center;flex-wrap:wrap}
.touchbar button,.touchbar .callbtn{min-width:48px;min-height:46px;background:#1b1b1b;color:#41ff00;border:1px solid #2a8a00;border-radius:6px;font:16px "Px437 MDA",monospace;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.touchbar .callbtn{background:#41ff00;color:#000}
@media (pointer:coarse),(max-width:700px){.touchbar{display:flex}}
@media (max-width:700px){.bezel{margin:0;border-radius:0;padding:5px}.crt{height:calc(100vh - 116px);border-radius:12px}.bezel-label{display:none}.sysunit{display:none}}
.noscript{padding:1em;color:#fff;font:16px/1.4 monospace}
.noscript a{color:#9f9}
.poweron .grid{animation:pwr .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes pwr{0%{transform:scale(.004,.004);filter:brightness(8)}30%{transform:scale(1,.006);filter:brightness(5)}65%{transform:scale(1,1);filter:brightness(.4)}100%{transform:none;filter:none}}
.konami .grid{animation:kon 2.4s steps(24)}
@keyframes kon{25%{filter:hue-rotate(90deg) brightness(1.6)}50%{filter:invert(1)}75%{filter:hue-rotate(200deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ghost{display:none}.scan{display:none!important}.crt.fx .grid{transform:none}}

/* v0.4 */
.frame{flex:1;display:flex;flex-direction:column;min-height:0}
.frame[hidden]{display:none}
.wbody{position:relative;flex:1;min-height:0}
.wbody::before,.wbody::after{content:var(--side);position:absolute;top:0;bottom:0;width:1ch;white-space:pre;overflow:hidden;line-height:1}
.wbody::before{left:0}.wbody::after{right:0}
.wb{padding:0}
.wb h1:focus,.wb h2:focus,h1:focus,h2:focus{outline:none}
.crt.degauss .grid{animation:degauss .85s cubic-bezier(.2,.8,.2,1)}
@keyframes degauss{0%{transform:scale(1.02) skewX(2deg);filter:hue-rotate(80deg) saturate(3) brightness(1.5)}20%{transform:scale(.99) skewX(-1.5deg);filter:hue-rotate(-60deg) saturate(2)}45%{transform:scale(1.005) skewX(.8deg);filter:hue-rotate(30deg)}70%{transform:skewX(-.3deg);filter:hue-rotate(-10deg)}100%{transform:none;filter:none}}
.crt.barrel.degauss .grid{animation:degauss .85s cubic-bezier(.2,.8,.2,1)}
#pg-form .btn{margin:0 0 1em}

/* v0.5 selection trail */
.trail{animation:trail .5s ease-out}
@keyframes trail{0%{background:color-mix(in srgb,var(--fg) 45%,transparent)}100%{background:transparent}}
/* v0.23 flicker fix A: a re-selected item must never play the trail (a running animation beats the selected solid background) */
.menu [aria-current="true"]{animation:none}
.zork-mount{display:block;overflow:hidden}
@media (prefers-reduced-motion:reduce){.trail{animation:none}}
.zork-log,.zork-log *{white-space:pre-wrap!important}
.logo .rv{background:var(--hi);color:var(--bg);display:block;height:1em}

/* v0.8: narrow screens wrap preformatted blocks instead of clipping (QA M2) */
.grid.narrow .wb pre:not(.logo){white-space:pre-wrap;overflow-wrap:anywhere}
.grid.narrow .wb pre:not(.logo) a{overflow-wrap:anywhere}
/* v0.8: hover/focus distinct from the selected reverse-video row (QA m4) */
.menu a:hover:not([aria-current="true"]),.menu button:hover:not([aria-current="true"]),.menu a:focus-visible:not([aria-current="true"]),.menu button:focus-visible:not([aria-current="true"]){background:none;color:var(--hi);text-shadow:inherit;text-decoration:underline dotted;outline:1px dotted var(--fg);outline-offset:-1px}
.menu a:hover:not([aria-current="true"]) .k,.menu a:hover:not([aria-current="true"]) .d,.menu button:hover:not([aria-current="true"]) .k,.menu button:hover:not([aria-current="true"]) .d,.menu a:focus-visible:not([aria-current="true"]) .k,.menu a:focus-visible:not([aria-current="true"]) .d,.menu button:focus-visible:not([aria-current="true"]) .k,.menu button:focus-visible:not([aria-current="true"]) .d{color:var(--hi)}
.menu [aria-current="true"]:focus-visible{outline:1px dotted var(--bg);outline-offset:-3px}

.btn.big{min-height:44px;min-width:44px;padding:0 1ch;display:inline-flex;align-items:center}

/* v0.22: triage screens only (.tri set by trender). Taller rows for tap targets while the rest of the XT grid stays 1em per row:
   2em (>= 24px at 1280) and 3em on coarse pointers or narrow screens. Multiples of the row height keep the box art aligned. */
.tri .menu li{height:2em}
.tri .menu a,.tri .menu button{height:2em;align-items:center}
@media (pointer:coarse),(max-width:700px){.tri .menu li{height:3em}.tri .menu a,.tri .menu button{height:3em}}