/* bbs.css — a 1982 monochrome CRT in a plastic bezel.
   Phosphor colors switch via [data-phosphor] on <html> (set in bbs.js). */

:root {
    --room:    #070806;
    --bezel-1: #2a2a24;
    --bezel-2: #17170f;
    --label:   #7d7c6a;
    --fg:      #4dff7a;
    --fg-b:    #c4ffd2;
    --fg-d:    #23a64c;
    --glow:    rgba(70, 255, 120, 0.42);
    --scr:     #020c04;
    --scr-hi:  #072212;
    --mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas, "Courier New", monospace;
    --fs: clamp(11px, calc((100vw - 140px) / 80 / 0.6), 17px);
    color-scheme: dark;
}
:root[data-phosphor="amber"] {
    --fg: #ffb33c; --fg-b: #ffe3ad; --fg-d: #b06f12;
    --glow: rgba(255, 168, 40, 0.42); --scr: #0d0702; --scr-hi: #251404;
}
:root[data-phosphor="white"] {
    --fg: #d6e2ec; --fg-b: #ffffff; --fg-d: #7a8794;
    --glow: rgba(200, 220, 255, 0.32); --scr: #05070a; --scr-hi: #141a22;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--room); }
body {
    font-family: var(--mono);
    color: var(--fg);
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

#crt {
    position: fixed;
    inset: 0 0 var(--kb, 0px) 0;      /* --kb: how much a phone's keyboard is covering (bbs-term.js) */
    display: flex;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: radial-gradient(ellipse at 50% 40%, #12130f 0%, var(--room) 70%);
}

#bezel {
    flex: 1;
    min-height: 0;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 12px;
    border-radius: 26px;
    background: linear-gradient(170deg, var(--bezel-1), var(--bezel-2));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.07),
        inset 0 -4px 0 rgba(0, 0, 0, 0.5),
        0 30px 80px rgba(0, 0, 0, 0.7);
}

#glass {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px / 24px;
    background: radial-gradient(ellipse at 50% 45%, var(--scr-hi) 0%, var(--scr) 70%, #000 115%);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.85), inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 0 3px #0b0b08;
    animation: powerOn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#screen {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px 12px;
    font-size: calc(var(--fs) * var(--text-size, 1));
    line-height: 1.34;
    letter-spacing: 0.02em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: default;
    text-shadow: 0 0 2px var(--glow), 0 0 12px var(--glow);
    scrollbar-width: none;
    -webkit-tap-highlight-color: transparent;
}
#screen::-webkit-scrollbar { display: none; }
#screen.upper { text-transform: uppercase; }

.b { color: var(--fg-b); }
.d { color: var(--fg-d); text-shadow: 0 0 2px var(--glow); }
.i { background: var(--fg); color: var(--scr); text-shadow: none; }

.hot {
    color: var(--fg-b);
    cursor: pointer;
    border-radius: 2px;
}
.hot:hover, .hot:active { background: var(--fg); color: var(--scr); text-shadow: none; }
.hot.dead { color: inherit; cursor: default; background: none; }
.hot.dead:hover { text-shadow: inherit; }
.hotline:not(.dead) { cursor: pointer; }
.hotline:not(.dead):active { background: var(--fg); color: var(--scr); text-shadow: none; }

/* Fingers: a menu row is taller, and the whole row is the button. A chip in a sentence only gets
   a bigger place to land (inline padding moves nothing). Dead ones keep their size, or the screen
   would jump when a menu goes by. */
@media (pointer: coarse) {
    .hot { padding: var(--row-pad, 7px) 2px var(--row-pad, 7px) 0; }      /* --row-pad: tighter if the screen doesn't fit (bbs-term.js) */
    .hotline { padding: var(--row-pad, 7px) 0; }
    .hot.row { display: inline-block; }
    .linetail { display: block; margin-top: 4px; }
    .linetail .hot { display: inline-block; padding: 7px 6px; margin: 2px 0; }
}

a.link { color: var(--fg-b); text-decoration: underline; text-underline-offset: 3px; }
a.link:hover { background: var(--fg); color: var(--scr); }

.input { color: var(--fg-b); }

/* FILE AREA 2's pictures: canvas pixel art, kept chunky */
canvas.pic {
    display: block;
    width: min(100%, 480px);
    aspect-ratio: 16 / 10;
    margin: 6px 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 1px solid var(--fg-d);
}
.cursor {
    display: inline-block;
    width: 0.62em;
    background: var(--fg);
    box-shadow: 0 0 8px var(--glow);
    animation: blink 1.06s steps(1) infinite;
}

#status {
    position: relative;
    z-index: 1;
    flex: none;
    margin: 0 14px 12px;
    padding: 3px 10px;
    font-size: calc(var(--fs) * 0.82);
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--fg);
    color: var(--scr);
    border-radius: 2px;
    box-shadow: 0 0 14px var(--glow);
}

/* scanlines + curvature vignette, above the text, never in the way of a tap */
#glass::before, #glass::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
#glass::before {
    background: repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px);
    animation: flicker 7s infinite;
}
#glass::after {
    background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%),
                linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0%, transparent 35%);
}

#plate {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 6px 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--label);
    text-transform: uppercase;
}
#plate .led {
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #3cff6e;
    box-shadow: 0 0 6px #3cff6e;
    vertical-align: 1px;
}
#plate a { color: var(--label); text-decoration: none; border-bottom: 1px dotted var(--label); }
#plate a:hover { color: #b9b7a0; }

/* FULL SCREEN: the button on the nameplate, and the board with no bezel (html.full) */
#fs {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--label);
    background: none;
    border: 1px solid #3a3a30;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#fs:hover { color: #b9b7a0; border-color: #5a5a4a; }
html.full #crt {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #000;
}
html.full #bezel { max-width: none; padding: 0; border-radius: 0; background: #000; box-shadow: none; }
html.full #glass { border-radius: 0; box-shadow: none; animation: none; }
html.full #plate {
    position: fixed;
    z-index: 20;
    top: calc(env(safe-area-inset-top) + 6px);
    right: calc(env(safe-area-inset-right) + 6px);
    padding: 0;
}
html.full #plate > span { display: none; }
html.full #fs { background: rgba(0, 0, 0, 0.6); opacity: 0.5; padding: 4px 9px; }
html.full #fs:hover, html.full #fs:focus-visible { opacity: 1; }
/* a big screen in full screen: bigger letters, and the text in a centered column */
@media (min-width: 900px) {
    html.full { --fs: clamp(14px, calc((100vw - 80px) / 84 / 0.6), 22px); }
    html.full #screen { padding-left: max(24px, calc((100% - 88ch) / 2)); padding-right: max(24px, calc((100% - 88ch) / 2)); }
    html.full #status { margin-left: max(14px, calc((100% - 92ch * 0.82) / 2)); margin-right: max(14px, calc((100% - 92ch * 0.82) / 2)); }
}
/* a touch door carries its own FULL SCREEN button; the floating one would sit on its controls */
html.full #glass:has(#c64.touch) + #plate, html.full #glass:has(#a2.touch) + #plate { display: none; }

/* the hidden field that summons a phone's keyboard */
#kbd-form { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
#kbd { font-size: 16px; width: 1px; height: 1px; border: 0; padding: 0; }

noscript {
    display: block;
    padding: 24px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}
noscript a { color: var(--fg-b); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker {
    0%, 100% { opacity: 1; }
    48% { opacity: 0.93; }
    50% { opacity: 1; }
    77% { opacity: 0.96; }
}
@keyframes powerOn {
    0%   { transform: scale(0.7, 0.004); filter: brightness(4); }
    45%  { transform: scale(1, 0.01); filter: brightness(3); }
    100% { transform: scale(1, 1); filter: brightness(1); }
}

@media (max-width: 640px) {
    :root { --fs: clamp(10px, calc((100vw - 60px) / 46 / 0.6), 15px); }
    #crt { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
                    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    #bezel { padding: 12px 10px 6px; border-radius: 16px; }
    #glass { border-radius: 10px / 14px; }
    #screen { padding: 12px 10px 8px; }
    #status { margin: 0 8px 8px; }
    #plate { font-size: 9px; letter-spacing: 0.12em; padding-top: 6px; }
    #plate .model { display: none; }
}

/* a phone on its side: a thin bezel, so the screen keeps its height */
@media (max-height: 500px) {
    #crt { padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
                    max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
    #bezel { padding: 8px 12px 4px; border-radius: 14px; }
    #glass { border-radius: 10px / 14px; }
    #screen { padding: 10px 14px 8px; }
    #status { margin: 0 10px 6px; }
    #plate { font-size: 9px; letter-spacing: 0.12em; padding-top: 4px; }
    #plate .model { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #glass, #glass::before, .cursor { animation: none; }
}