/* Walter Russell BBS: a VGA text-mode terminal. The palette is the 16-colour
   VGA set; dark grey is lifted slightly so small text stays readable. */
@font-face{font-family:'VGA 9x16';src:url('/bbs/fonts/Web437_IBM_VGA_9x16.woff') format('woff');font-display:block}
:root{
  --bg:#000;--room:#050708;--fg:#aaa;--white:#fff;--dim:#858585;--cyan:#5ff;--yellow:#ff5;--amber:#a50;--red:#f55;--magenta:#f5f;
  --blue:#00a;--bar:#0aa;--bar-ink:#000;--font:16px;--cols:80;--pad:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--room);color:var(--fg)}
body{overflow:hidden;font-family:'VGA 9x16','Consolas','Menlo',monospace}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#terminal{height:100svh;display:flex;flex-direction:column;align-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 45%,#0b0f12 0%,var(--room) 70%)}
.boot{margin:auto;font:16px/1.4 'VGA 9x16',monospace;color:var(--dim)}
.boot a{color:var(--cyan)}

/* The monitor: square-ish corners, a faint phosphor bloom, no scanlines. */
.crt{position:relative;flex:1;min-height:0;width:min(100%,calc(var(--cols) * var(--font) * .5625 + var(--pad) * 2 + 4px));display:flex;flex-direction:column;background:var(--bg);font-size:var(--font);line-height:1.125;border-radius:10px;box-shadow:0 0 0 1px #1c2328,0 18px 60px #000c,inset 0 0 70px #0a0f12;overflow:hidden}
.crt.flash{animation:bell .16s steps(1)}
@keyframes bell{0%{background:#aaa}100%{background:var(--bg)}}
.screen{touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--pad) var(--pad) calc(var(--pad) + 4px);scrollbar-width:thin;scrollbar-color:#333 #000;text-shadow:0 0 .12em currentColor;outline:0;-webkit-font-smoothing:none;font-smooth:never}
.screen:focus-visible{box-shadow:inset 0 0 0 2px #055}
.ln{white-space:pre;min-height:1.125em;overflow:hidden}
.terminal-art{position:relative;flex:none}
.art-lettering{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.art-source-label{fill:currentColor;font:inherit;font-kerning:none;dominant-baseline:alphabetic}
.fg-g{color:var(--fg)}.fg-w{color:var(--white)}.fg-d{color:var(--dim)}.fg-c{color:var(--cyan)}.fg-y{color:var(--yellow)}.fg-a{color:var(--amber)}.fg-r{color:var(--red)}.fg-m{color:var(--magenta)}

/* Hot keys are real buttons that look like text. */
.hot{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;line-height:inherit;text-align:left;cursor:pointer;white-space:pre;text-shadow:inherit;border-radius:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hot:not(:disabled):focus-visible,.hot.pressed{background:var(--blue);outline:0}
.hot:not(:disabled):focus-visible .fg-d,.hot.pressed .fg-d{color:var(--fg)}
/* Hover highlighting only where there is a real pointer; on touch it would stick. */
@media (hover:hover){.hot:not(:disabled):hover{background:var(--blue)}.hot:not(:disabled):hover .fg-d{color:var(--fg)}}
.hot:disabled{cursor:default;color:inherit}

/* DOS text-mode cursor: an underline, blinking. */
.cursor{display:inline-block;width:.5625em;height:1.125em;vertical-align:top;background:linear-gradient(transparent 76%,var(--fg) 76%,var(--fg) 88%,transparent 88%);animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.line-input{font:inherit;color:var(--white);background:transparent;border:0;padding:0;margin:0;outline:0;caret-color:var(--fg);text-shadow:inherit;text-transform:uppercase;height:1.125em;line-height:1.125;vertical-align:top;border-bottom:1px dotted #444;border-radius:0}

/* The comm program's status line. */
.statusline{flex:none;display:flex;align-items:stretch;gap:0;min-height:1.5em;background:var(--bar);color:var(--bar-ink);font-size:max(14px,calc(var(--font) * .875));line-height:1.5;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.statusline>*{padding:0 .75em;border-right:1px solid #0006;display:flex;align-items:center}
.statusline>*:empty{display:none}
.st-name{font-weight:normal}
.st-clock{margin-left:auto;border-left:1px solid #0006}
.st-btn{font:inherit;color:inherit;background:transparent;border:0;border-right:1px solid #0006;border-radius:0;cursor:pointer;min-height:2.2em}
.st-btn:hover,.st-btn:focus-visible{background:#077;color:#fff;outline:0}
.st-hang{background:#a00;color:#fff}
.st-hang:hover,.st-hang:focus-visible{background:#f55;color:#000}
.st-btn[hidden]{display:none}

/* Thumb-sized command keys for touch screens, mirroring the on-screen hot keys. */
.keybar{display:none;flex:none;width:min(100%,calc(var(--cols) * var(--font) * .5625 + var(--pad) * 2 + 4px));gap:6px;padding:8px 0 0;overflow-x:auto;scrollbar-width:none;font-size:15px}
.keybar[hidden]{display:none!important}
.keybar.entry-keys{display:flex}
.ln.command-prompt{white-space:pre-wrap;overflow-wrap:anywhere}
.kb{touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex:none;display:flex;align-items:center;gap:.5em;min-height:44px;padding:0 .8em;font:inherit;color:var(--white);background:#111;border:1px solid #3a3a3a;border-radius:4px;cursor:pointer;white-space:nowrap}
.kb:active,.kb.pressed,.kb:focus-visible{background:var(--blue);border-color:var(--cyan);outline:0}
.kb-key{color:var(--yellow)}
#terminal.phone-layout{padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
.phone-layout .crt{border-radius:6px;--pad:8px}
.phone-layout .statusline{display:none}
/* Touch targets belong only to live menu lines; art and text keep their character grid. */
.phone-layout .screen>.ln:has(> .hot:not(:disabled)){display:flex;align-items:stretch;min-height:44px;overflow:visible;white-space:normal;margin:2px 0}
.phone-layout .screen>.ln:has(> .hot:not(:disabled))>span:first-child:not(:last-child){display:none}
.phone-layout .screen>.ln:has(> .hot:not(:disabled))>.hot:not(:disabled){display:block;flex:1;min-width:0;min-height:44px;padding:max(5px,calc((44px - 1.35em)/2)) 7px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35;background:#091a1b;border:1px solid #254343;border-radius:3px}
.phone-layout .screen>.ln:has(> .hot:not(:disabled))>.hot:not(:disabled):active,.phone-layout .screen>.ln:has(> .hot:not(:disabled))>.hot:not(:disabled):focus-visible{background:#104343;border-color:#70c5bf;outline:0}

/* Period GIF viewer. */
.viewer{position:fixed;inset:0;z-index:10;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
.viewer canvas,.viewer img{max-width:100%;max-height:calc(100svh - 110px);width:auto;height:auto;object-fit:contain}
.viewer canvas{image-rendering:pixelated;aspect-ratio:4/3;width:min(100%,calc((100svh - 110px) * 4 / 3))}
.viewer [hidden]{display:none}
.viewer img{touch-action:pinch-zoom}
.viewer-bar{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;background:var(--bar);color:#000;font-size:15px;line-height:1.5}
.viewer-bar>*{padding:0 .75em;display:flex;align-items:center;min-height:44px}
.viewer-bar button{font:inherit;color:inherit;background:transparent;border:0;border-left:1px solid #0006;cursor:pointer;border-radius:0}
.viewer-bar button:hover,.viewer-bar button:focus-visible{background:#077;color:#fff;outline:0}
.viewer-caption{margin:0;color:var(--dim);font-size:15px;text-align:center;max-width:70ch}
.fallback-exit{margin-top:12px;color:var(--cyan);font-size:16px}
.command-dock{display:none;flex:none;align-items:stretch;gap:5px;width:min(100%,calc(var(--cols) * var(--font) * .5625 + var(--pad) * 2 + 4px));min-width:0}
.command-dock:has(.keybar.entry-keys),.command-dock:has(.kb[data-key="ENTER"]){display:flex}
.command-dock[hidden],.command-scroll[hidden]{display:none!important}
.command-dock .keybar{display:flex;flex:1;width:0;min-width:0;padding:0;mask-image:none;-webkit-mask-image:none}
.command-scroll{flex:none;min-width:44px;min-height:44px;font:24px 'VGA 9x16',monospace;color:var(--cyan);background:#111;border:1px solid #3a3a3a;border-radius:4px;cursor:pointer}
.command-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.command-scroll:disabled{opacity:.3;cursor:default}
@media (hover:none),(pointer:coarse),(max-width:700px){.command-dock{display:flex}}
.statusline .st-return{font-size:15px;white-space:nowrap;color:#fff;background:#064c4c}

/* Phone command dock: one primary action, More, and Settings. */
.phone-layout .command-dock{display:flex;min-height:44px;gap:4px}
.phone-layout .command-dock .keybar{display:flex;flex:1;width:0;min-width:0;padding:0;overflow:hidden;mask-image:none;-webkit-mask-image:none}
.phone-layout .command-dock .keybar>.kb{flex:1;width:100%;min-width:0;min-height:44px;padding:0 8px;color:#e3f0eb;background:#102628;border-color:#38625e;overflow:hidden}
.phone-layout .command-dock .kb-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-layout .command-dock .command-scroll{display:none!important}
.phone-layout .command-more,.phone-layout .terminal-settings-trigger{flex:none;min-width:44px;min-height:44px;padding:0 8px;font:14px 'VGA 9x16',Consolas,monospace;color:#e3f0eb;background:#124243;border:1px solid #52807c;border-radius:4px;cursor:pointer;touch-action:manipulation}
.phone-layout .command-more:hover,.phone-layout .terminal-settings-trigger:hover,.phone-layout .command-more:focus-visible,.phone-layout .terminal-settings-trigger:focus-visible{background:#1d6262;color:#fff;outline:2px solid #8bd8d0;outline-offset:-3px}
.phone-layout .command-more[hidden],.phone-layout .terminal-settings-trigger[hidden]{display:none!important}

/* Native phone dialogs share the board's muted teal and VGA lettering. */
.terminal-commands,.terminal-settings{box-sizing:border-box;max-width:480px;width:calc(100% - 24px);max-height:calc(100svh - 24px);overflow:auto;padding:20px;color:#d9e3e1;background:#10191b;border:1px solid #688b86;border-radius:6px;font:15px/1.45 'VGA 9x16',Consolas,monospace}
.terminal-commands::backdrop,.terminal-settings::backdrop{background:#000b}
.terminal-commands h2,.terminal-settings h2{margin:0 0 16px;color:#fff;font:20px/1.3 'VGA 9x16',Consolas,monospace}
.terminal-command-list,.settings-controls{display:grid;grid-template-columns:1fr;gap:8px}
.terminal-command-list .kb,.settings-controls .st-btn{box-sizing:border-box;display:flex;align-items:center;width:100%;min-width:0;min-height:44px;margin:0;padding:8px 12px;text-align:left;white-space:normal;color:#e0ebe8;background:#172d2c;border:1px solid #587b75;border-radius:3px;font:inherit;cursor:pointer}
.terminal-command-list .kb-key{flex:none;min-width:2.5em;color:#e9d398}
.settings-controls .st-hang{background:#592a2a;border-color:#9a5656;color:#fff}
.settings-controls .st-btn[hidden]{display:none}
.terminal-dialog-close{display:block;min-width:44px;min-height:44px;margin:16px 0 0 auto;padding:8px 12px;color:#e0ebe8;background:#172d2c;border:1px solid #587b75;border-radius:3px;font:inherit;cursor:pointer}
.terminal-commands button:focus-visible,.terminal-settings button:focus-visible{outline:2px solid #9ee3db;outline-offset:2px}
@media(max-height:480px){
  #terminal.phone-layout{padding-top:max(2px,env(safe-area-inset-top));padding-bottom:max(2px,env(safe-area-inset-bottom))}
  .phone-layout .crt{--pad:5px}
  .phone-layout .screen>.ln:has(> .hot:not(:disabled)){margin:1px 0}
  .terminal-commands,.terminal-settings{max-height:calc(100svh - 12px);padding:12px}
  .terminal-commands h2,.terminal-settings h2{margin-bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
  .crt.flash{animation:none;outline:2px solid var(--fg)}
}