/* The arcade's 1996 home-PC layer: beveled windows around the neon content, a boot screen,
   and a taskbar with a Start menu, a clock and who's online. Used by the lobby and the privacy page. */
:root{
  --w-face:#c0c0c0; --w-light:#ffffff; --w-hi:#dfdfdf; --w-shadow:#808080; --w-dark:#0a0a0a;
  --w-title:linear-gradient(90deg,#000080,#1084d0); --w-title-off:linear-gradient(90deg,#808080,#b5b5b5);
  --w-ui:"Inter",Tahoma,"MS Sans Serif",system-ui,sans-serif;
  --bevel-out:inset -1px -1px var(--w-dark),inset 1px 1px var(--w-light),inset -2px -2px var(--w-shadow),inset 2px 2px var(--w-hi);
  --bevel-in:inset 1px 1px var(--w-shadow),inset -1px -1px var(--w-light),inset 2px 2px var(--w-dark),inset -2px -2px var(--w-hi);
}

/* ---------- windows ---------- */
.win{background:var(--w-face);padding:3px;box-shadow:var(--bevel-out),6px 6px 0 rgba(0,0,0,.45);display:flex;flex-direction:column;min-width:0}
.win-title{display:flex;align-items:center;gap:6px;min-height:24px;padding:2px 3px 2px 5px;background:var(--w-title);color:#fff;font:600 12px/1.1 var(--w-ui);letter-spacing:.02em;user-select:none}
.win-title img{width:16px;height:16px;image-rendering:auto}
.win-title .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-btns{display:flex;gap:2px;margin-left:6px}
.win-btns i{display:grid;place-items:center;width:18px;height:16px;background:var(--w-face);box-shadow:var(--bevel-out);color:#000;font:600 11px/1 var(--w-ui);font-style:normal}
.win-btns i:last-child{margin-left:2px}
.win-menu{display:flex;gap:14px;padding:4px 6px 3px;color:#000;font:400 12px/1 var(--w-ui)}
.win-menu u{text-decoration:underline;text-underline-offset:1px}
.win-body{flex:1;display:flex;flex-direction:column;min-width:0;box-shadow:var(--bevel-in);padding:2px;background:var(--bg,#0b0d11)}
.win-body > *{flex:1}
.win-status{display:flex;gap:3px;margin-top:3px;color:#000;font:400 11px/1 var(--w-ui)}
.win-status span{flex:1;padding:4px 6px;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px var(--w-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-status span:last-child{flex:0 0 auto}
/* content that used to be free-standing panels sits square inside its window */
.win .marquee,.win .scores{border-radius:0;box-shadow:none;border:0}
.win .marquee{box-shadow:inset 0 0 0 2px var(--signal,#4c5dff),inset 0 0 44px rgba(76,93,255,.25)}

/* ---------- 88x31-style badges and the construction stripe ---------- */
.badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.badge{display:inline-grid;place-items:center;width:88px;height:31px;box-shadow:var(--bevel-out);background:var(--w-face);color:#000;font:600 8.5px/1.05 var(--w-ui);text-align:center;letter-spacing:.02em;text-transform:uppercase;padding:2px 4px}
.badge.dark{background:#000;color:#3df2a3;box-shadow:inset 0 0 0 1px #3df2a3;font-family:"VT323",monospace;font-size:13px;font-weight:400;letter-spacing:.04em}
.construction{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;color:#111;font:600 11px/1.2 var(--w-ui);letter-spacing:.12em;text-transform:uppercase;text-align:center;
  background:repeating-linear-gradient(-45deg,#ffd400 0 14px,#111 14px 28px)}
.construction span{background:#ffd400;padding:3px 8px;box-shadow:0 0 0 2px #111}

/* ---------- taskbar ---------- */
.taskbar{position:sticky;bottom:0;z-index:40;display:flex;align-items:center;gap:6px;min-height:40px;padding:3px 4px calc(3px + env(safe-area-inset-bottom,0)) 4px;background:var(--w-face);box-shadow:inset 0 1px var(--w-hi),inset 0 2px var(--w-light);font:400 12px/1 var(--w-ui);color:#000}
.start-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 6px;border:0;background:var(--w-face);box-shadow:var(--bevel-out);font:600 13px/1 var(--w-ui);color:#000;cursor:pointer}
.start-btn img{width:20px;height:20px}
.start-btn[aria-expanded="true"],.start-btn:active{box-shadow:var(--bevel-in)}
.start-btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.task{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;box-shadow:var(--bevel-in);background:repeating-conic-gradient(#dcdcdc 0 25%,#c0c0c0 0 50%) 0 0/2px 2px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.task img{width:16px;height:16px;flex:none}
.tray{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px var(--w-light);white-space:nowrap;font-variant-numeric:tabular-nums}
.tray .online{display:inline-flex;align-items:center;gap:6px}
.tray .online i{width:8px;height:8px;border-radius:50%;background:#808080;box-shadow:inset -1px -1px rgba(0,0,0,.35)}
.tray .online.live i{background:#1f8a4c;box-shadow:0 0 0 2px rgba(31,138,76,.25)}
@media (max-width:420px){.task{display:none}.tray{flex:1;justify-content:flex-end}}

/* ---------- start menu ---------- */
.start-menu{position:fixed;left:4px;bottom:calc(46px + env(safe-area-inset-bottom,0));z-index:50;display:flex;width:min(270px,calc(100vw - 8px));max-height:calc(100vh - 70px);overflow:auto;background:var(--w-face);box-shadow:var(--bevel-out),4px 4px 0 rgba(0,0,0,.4)}
.start-menu[hidden]{display:none}
.start-menu .side{flex:0 0 28px;display:flex;align-items:flex-end;justify-content:center;padding:8px 0;background:linear-gradient(0deg,#000080,#1084d0)}
.start-menu .side span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font:600 18px/1 var(--w-ui);letter-spacing:.04em}
.start-menu .side b{color:#c0c0c0;font-weight:400}
.start-menu ul{list-style:none;margin:0;padding:3px;flex:1;min-width:0}
.start-menu li a,.start-menu li button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:4px 10px 4px 6px;border:0;background:none;color:#000;text-decoration:none;font:400 13px/1.2 var(--w-ui);text-align:left;cursor:pointer}
.start-menu li img{width:24px;height:24px;flex:none}
.start-menu li .ico{display:grid;place-items:center;width:24px;height:24px;flex:none;font:600 15px/1 var(--w-ui)}
.start-menu li a:hover,.start-menu li a:focus-visible,.start-menu li button:hover,.start-menu li button:focus-visible{background:#000080;color:#fff;outline:none}
.start-menu hr{border:0;margin:3px 2px;height:2px;box-shadow:inset 0 1px var(--w-shadow),inset 0 -1px var(--w-light)}

/* ---------- boot screen and shutdown ---------- */
.boot{position:fixed;inset:0;z-index:100;background:#000;color:#c0c0c0;font:400 clamp(18px,4.6vw,24px)/1.35 "VT323",monospace;padding:calc(24px + env(safe-area-inset-top,0)) 20px 20px;cursor:pointer;transition:opacity .35s}
.boot.out{opacity:0;pointer-events:none}
.boot p{margin:0;white-space:pre-wrap}
.boot .hl{color:#fff}
.boot .ok{color:#3df2a3}
.boot .skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0));color:#808080}
.boot .cursor::after{content:"_";animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.shutdown{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;color:#ff8c1a;font:400 clamp(22px,6vw,40px)/1.3 "VT323",monospace;text-align:center;padding:24px;cursor:pointer}
.shutdown small{display:block;margin-top:18px;color:#808080;font-size:.55em}

/* the hourglass while a game loads */
html.busy,html.busy *{cursor:wait!important}

@media (prefers-reduced-motion:reduce){.boot{transition:none}.boot .cursor::after{animation:none}}