/* The boot sequence, as the games start after their ident: the terminal at standby, the BIOS, the login. Taken from 1991: Strike's terminal (the source of truth for the shared 1991 terminal) and scoped under
   #boot so it cannot touch the site's own styles. When the shared terminal repo has its files, this should come from
   there. */

/* hide the site while the boot runs (set in the page head before anything draws) */
html.booting body > *:not(#boot) { visibility: hidden; }

#boot {
  --fg: #7DFF9F; --hi: #B8FFC9; --mid: #46F27A; --soft: #8FE3A4; --dim: #2E6B40; --line: #1F3324;
  --glow: 0 0 6px rgba(70,242,122,.55);
  position: fixed; inset: 0; z-index: 100; background: #000; color: var(--fg);
  display: flex; align-items: center; justify-content: center;   /* the terminal's frame, centred, black bars round it */
  font-family: var(--mono); font-size: 15px; line-height: 1.45;
}
#boot[hidden] { display: none !important; }
#boot button { font: inherit; color: inherit; background: transparent; text-shadow: inherit; border: 1px solid var(--dim); padding: 2px 10px; border-radius: 0; }
#boot button:hover, #boot button:focus-visible { background: var(--fg); color: #000; text-shadow: none; outline: none; }

/* the terminal */
/* scaled and framed as in Intel (fit.js sets --uiz and --crtw) */
#boot .crt { container: term / inline-size; zoom: var(--uiz, 1); position: relative; height: var(--crth, 100%); width: var(--crtw, 100%); flex: none; padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; text-shadow: var(--glow); }
#boot .crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); z-index: 50; }
#boot .crt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%); z-index: 51; }
#boot .crt { animation: bootflick 6s infinite steps(1); }
@keyframes bootflick { 0%, 96%, 100% { opacity: 1 } 97% { opacity: .93 } 98% { opacity: 1 } 99% { opacity: .96 } }
/* (David, 4 Nov 22:45) no switch-on or switch-off animation at all, not even out of or into standby: the other terminals
   do not play one. The keyframes stay for reference only. */
#boot .crt.on, #boot .crt.off { animation: none; }
#boot .crt.on.steady { animation: none; }   /* opened from the site already on: no switch-on */
@keyframes bootcrton { 0% { transform: scaleY(.004) scaleX(.6); filter: brightness(4) } 45% { transform: scaleY(.004) scaleX(1); filter: brightness(3) } 100% { transform: none; filter: none } }
@keyframes bootcrtoff { 0% { transform: none; filter: none } 50% { transform: scaleY(.004) scaleX(1); filter: brightness(3) } 85% { transform: scaleY(.004) scaleX(.03); filter: brightness(4) } 100% { transform: scaleY(.004) scaleX(0); opacity: 0 } }
#boot .banner { font-family: var(--display); font-size: 20px; letter-spacing: .3em; text-align: center; background: var(--fg); color: #000; text-shadow: none; line-height: 1.2; flex: none; }
#boot .footer { font-family: var(--display); font-size: 16px; letter-spacing: .15em; text-align: center; color: var(--dim); flex: none; padding-top: 4px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
#boot .screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 0; }
/* as Intel's #login: a long screen scrolls, fading at its top and bottom edges */
#boot #bootLogin, #boot #bootSetup, #boot #bootNote { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); scroll-padding-block: 22px; }
#boot #bootPower { cursor: pointer; }
#boot #bootPower:focus { outline: none; }
#boot #bootBios p { min-height: 1.2em; }
#boot .term { max-width: 78ch; font-family: var(--display); font-size: 22px; line-height: 1.2; }
#boot .term p { margin: 0; }
#boot .term .warn { border: 1px solid var(--fg); padding: 10px 14px; margin: 14px 0; font-size: 19px; line-height: 1.25; }
#boot .prompt { display: flex; gap: 10px; align-items: baseline; margin: 6px 0; position: relative; }
#boot .prompt label { flex: none; width: 14ch; letter-spacing: .06em; white-space: nowrap; }
#boot .prompt .field { border-bottom: 1px solid var(--line); flex: 1; min-width: 0; max-width: 20ch; min-height: 1.2em; }
#boot .prompt .field.focus { border-bottom-color: var(--dim); }
#boot .cursor { display: inline-block; width: .6em; height: 1em; background: var(--fg); vertical-align: -2px; }
#boot .cursor { animation: bootblink2 1s steps(1) infinite; }
@keyframes bootblink2 { 50% { opacity: 0 } }
@keyframes bootblink { 50% { opacity: 0 } }
#boot #bootPwr, #boot #bootNoteBtn, #boot #bootBiosBtn, #boot #bootDriveBtn { font-family: var(--display); font-size: 15px; letter-spacing: .12em; padding: 0 8px; color: var(--soft); border-color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
#boot #bootPwr .led { width: 7px; height: 7px; background: var(--dim); display: inline-block; border-radius: 50%; }
#boot #bootPwr .led.on { background: var(--fg); box-shadow: 0 0 6px var(--fg); }
@container term (max-width: 560px) { #boot .term { font-size: 19px; } #boot .term .warn { font-size: 17px; } }


/* the login's fields, as in the games */
#boot input { font: inherit; color: inherit; background: transparent; text-shadow: inherit; border-radius: 0; outline: none; }
#boot .prompt input { border: none; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 22px; padding: 0; flex: 1; min-width: 0; max-width: 20ch; caret-color: var(--fg); text-transform: uppercase; }
#boot .prompt input:focus { border-bottom-color: var(--dim); }
#boot .prompt input.blkc { caret-color: transparent; }
#boot .prompt input:disabled { opacity: 1; }
#boot .blkcur { position: absolute; pointer-events: none; background: var(--fg); mix-blend-mode: difference; box-shadow: 0 0 6px rgba(125,255,159,.45); animation: bootblink 1.06s step-end infinite; }
#boot button.inl { font: inherit; padding: 0 6px; margin: 0 2px; vertical-align: baseline; }
#boot .hint { color: var(--soft); opacity: .8; font-size: 13px; }
/* errors stay in the phosphor, brighter, as in Intel: the terminal's menus are always green */
#boot .err { color: var(--hi); }
#boot #bootMsg { min-height: 1.2em; margin: 8px 0; }
#boot #bootEnroll p { margin: 0 0 6px; }

/* SETUP, the BIOS: a box of settings, the chosen row lit */
#boot .setup .sbox { border: 1px solid var(--fg); padding: 10px 14px; margin: 14px 0; max-width: 56ch; }
#boot .setup .srow { display: flex; justify-content: space-between; gap: 2ch; padding: 1px 6px; cursor: pointer; }
#boot .setup .srow.sel { background: var(--fg); color: #000; text-shadow: none; }
#boot .setup .shelp { min-height: 2.4em; color: var(--soft); }
@container term (max-width: 560px) { #boot .prompt input { font-size: 19px; } #boot .prompt label { width: 12ch; } }

/* the site comes up on the same tube */
body.crt-in .site > header, body.crt-in .site > main, body.crt-in .site > footer { animation: bootcrton .55s ease-out both; }

/* the A: drive: its amber light, and the project diskettes */
#boot .drive .sbox { border: 1px solid var(--fg); padding: 10px 14px; margin: 14px 0; max-width: 56ch; }
#boot .drive .drow { display: grid; grid-template-columns: 6ch 1fr auto; gap: 2ch; align-items: baseline; padding: 1px 0; }
#boot .drive .drow.redacted .dn { color: var(--dim); letter-spacing: .1em; }
#boot .drive .drow.redacted .dl { color: var(--dim); }
#boot .drive .ds { color: var(--soft); }
#boot .drive button:disabled { opacity: .4; cursor: default; }

#boot ::selection { background: var(--fg); color: #000; text-shadow: none; }
/* as in Intel: the footer buttons that are only there at standby really go when hidden */
#boot .footer button[hidden] { display: none !important; }
/* the account form, as in Intel: a dashed rule above it, the rank list in the display face, the buttons in a row */
#boot #bootEnroll { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
#boot #bootEnroll .prompt label { width: 15ch; white-space: nowrap; }
#boot #bootEnroll select { font-family: var(--display); font-size: 22px; background: #000; color: var(--fg); border: 1px solid var(--dim); padding: 2px 6px; border-radius: 0; outline: none; text-shadow: inherit; }
#boot #bootEnroll select:focus { border-color: var(--fg); }
#boot #bootEnroll .acts { display: flex; gap: 10px; margin-top: 8px; }
#boot #bootEnroll .ok { color: var(--hi); }
@container term (max-width: 560px) { #boot #bootEnroll select { font-size: 19px; } }
#boot .blkcur.hold { animation: none; }
#boot button:disabled { opacity: .4; cursor: default; background: transparent; color: var(--fg); }
#boot .blkmeasure { position: absolute; visibility: hidden; width: 0 !important; min-width: 0 !important; max-width: none !important; flex: none !important; left: -9999px; top: 0; padding: 0; border: 0; }
/* (David, 4 Nov) a hovered button: filled with the phosphor, its words and its border black; BIOS and DISCLAIMER carry
   small marks like POWER's light */
#boot button:not(:disabled):hover, #boot button:not(:disabled):focus-visible { border-color: #000; }
#boot .ico { display: inline-block; flex: none; }
#boot .ico.chip { width: 7px; height: 7px; border: 1px solid currentColor; position: relative; }
#boot .ico.chip::after { content: ""; position: absolute; inset: 2px; background: currentColor; }
/* the terminal's dropdowns, as Intel's (.ddb, .ddlist): drawn inside the CRT, not the browser's own list */
select.ddnative { display: none !important; }
.ddb { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 1px solid var(--dim); padding: 2px 6px; background: #000; min-width: 8ch; max-width: 100%; }
.ddb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddb > i { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; filter: drop-shadow(0 0 2px rgba(125,255,159,.7)); }
.ddb[aria-expanded="true"] { border-color: var(--fg); }
.ddb:disabled { opacity: .45; cursor: default; }
.ddlist { position: absolute; z-index: 48; background: #000; border: 1px solid var(--fg); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.8); overflow-y: auto; overflow-x: hidden; text-shadow: var(--glow); font: inherit; padding: 2px 0; color: var(--fg); }
#boot .ddlist { font-family: var(--display); font-size: 22px; line-height: 1.2; }
.ddopt { padding: 2px 10px; white-space: nowrap; color: var(--fg); }
.ddopt.cur::before { content: "> "; }
.ddopt:not(.cur) { padding-left: calc(10px + 2ch); }
.ddopt.act { background: var(--fg); color: #000; text-shadow: none; }
.ddopt[aria-disabled="true"] { color: var(--dim); }
#boot #bootEnroll .prompt .ddb { font-family: var(--display); font-size: 22px; background: #000; color: var(--fg); border: 1px solid var(--dim); }
#boot #bootEnroll .prompt .ddb:hover, #boot #bootEnroll .prompt .ddb:focus-visible { background: var(--fg); color: #000; border-color: #000; }

/* DISCLAIMER's mark: a warning triangle with the exclamation mark cut out, in the button's colour (black when hovered) */
#boot .ico.warn { width: 9px; height: 8px; fill: currentColor; border: none; }
#boot .ico.cog { width: 9px; height: 9px; fill: currentColor; border: none; }
/* the footer's lights, as Intel's: POWER round and green, A: DRIVE square and amber; hovered, an unlit light is a
   hollow black ring, a lit POWER light solid black, a lit drive lamp stays amber inside a black ring */
#boot #bootDriveBtn .led { width: 7px; height: 7px; background: var(--dim); display: inline-block; }
#boot #bootDriveBtn .led.on { background: #ffb347; box-shadow: 0 0 6px #ffb347; }
#boot :is(#bootPwr, #bootDriveBtn):is(:hover, :focus-visible) .led { background: transparent; box-shadow: inset 0 0 0 1.5px #000; }
#boot #bootPwr:is(:hover, :focus-visible) .led.on { background: #000; box-shadow: none; }
#boot #bootDriveBtn:is(:hover, :focus-visible) .led.on { background: #ffb347; box-shadow: 0 0 0 1.5px #000; }
/* the administrator's screen, as the shared terminal's (#admin, .lockbox, .slots) */
#boot #bootAdmin { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
#boot .lockbox { width: min(720px, 100%); font-family: var(--display); font-size: 21px; line-height: 1.25; display: grid; gap: 12px; max-width: none; }
#boot .lockbox .lk { font-size: 24px; color: var(--hi); letter-spacing: .08em; }
#boot .dirhead { color: var(--soft); font-size: 18px; letter-spacing: .06em; }
#boot .slots { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
#boot .slot { display: grid; grid-template-columns: 9ch 1fr auto; gap: 10px; align-items: center; font-size: 18px; border-bottom: 1px solid var(--line); padding: 4px 0; }
#boot .slot .meta { color: var(--soft); min-width: 0; overflow-wrap: anywhere; }
#boot .slot.adm .meta { display: flex; flex-wrap: wrap; column-gap: 2ch; }
#boot .slot .meta > span, #boot .slot .meta .ago { white-space: nowrap; }
#boot .slot .b { display: flex; gap: 6px; justify-self: end; }
#boot .slot button { font-family: var(--display); font-size: 17px; padding: 0 8px; }
#boot .lockbox .acts { display: flex; gap: 10px; flex-wrap: wrap; }
@container term (max-width: 560px) { #boot .slot { grid-template-columns: 1fr; } }
/* the Y/N box inside the terminal: under the tube's glass, as Intel's */
#boot #owConfirm { z-index: 49; }
/* (David, 4 Nov) the logo over SETUP, as on the pages: it goes home (only from the site, never past standby or the login) */
#boot .tbrand { align-self: center; display: flex; align-items: center; gap: 14px; padding: 6px 12px; border: 1px solid var(--fg); margin: 10px 0 0; flex: none; }
#boot .tbrand[hidden] { display: none; }
#boot .tbrand img.brand-mark { height: 40px; width: auto; display: block; }
#boot .tbrand img.brand-name { height: 29px; width: auto; display: block; }
#boot .tbrand:hover, #boot .tbrand:focus-visible { box-shadow: 0 0 10px rgba(125,255,159,.35); outline: none; }
#boot #bootTitle { cursor: pointer; }
#boot #bootTitle:hover { color: var(--hi); }
@container term (max-width: 480px) { #boot .tbrand img.brand-name { display: none; } }
#boot .tbrand img.brand-globe { display: none; height: 54px; width: auto; margin: -6px 0; }
@container term (max-width: 480px) { #boot .tbrand img.brand-mark { display: none; } #boot .tbrand img.brand-globe { display: block; } }
/* (David, 4 Nov 23:47) hover as the shared terminal's (src/terminal.css, the global button rule): a hovered or focused
   button is filled with the phosphor and everything in it, words and marks, goes black, whatever rule set its colour;
   the lamps keep their own hover (black ring, power solid black, drive amber with a black ring). The border goes black,
   David's rule for the site. */
#boot button:not(:disabled):is(:hover, :focus-visible) { background: var(--fg) !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; }
#boot button:not(:disabled):is(:hover, :focus-visible) *:not(.led) { color: inherit !important; text-shadow: none !important; }