/* ROBOZ web loader: CRT phosphor style. Colours from Docs/UI/UI_SPEC.md (phosphor, near-black, slate, amber, red, pink). */
:root {
  --phos: #7CFF6B;
  --ink: #0B0A0F;
  --slate: #1C1B24;
  --amber: #FFC23B;
  --red: #FF3B30;
  --pink: #FF3EA5;
  --teal: #2ED3C6;
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--phos); }
body { font-family: "VT323", ui-monospace, Menlo, Consolas, monospace; font-size: 22px; -webkit-font-smoothing: none; }
#roboz-root { position: fixed; inset: 0; }
#unity-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--ink); outline: none; }

.crt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;
       background: radial-gradient(ellipse at center, rgba(28,27,36,0.92) 0%, rgba(11,10,15,0.98) 70%); z-index: 10; }
.crt[hidden], [hidden] { display: none !important; }
.panel { width: min(640px, calc(100vw - 32px)); padding: 24px 28px; background: rgba(28,27,36,0.85);
         border: 2px solid var(--phos); box-shadow: 0 0 24px rgba(124,255,107,0.25), inset 0 0 18px rgba(124,255,107,0.08); }
.logo { font-size: 84px; line-height: 1; letter-spacing: 8px; text-shadow: 0 0 10px rgba(124,255,107,0.7), 0 0 2px var(--phos); }
.sub { font-size: 20px; opacity: 0.75; letter-spacing: 3px; margin-bottom: 16px; }
#roboz-log { font-family: inherit; font-size: 20px; line-height: 1.15; height: 7.2em; margin: 0 0 12px; overflow: hidden; white-space: pre-wrap;
             color: var(--phos); opacity: 0.85; text-shadow: 0 0 4px rgba(124,255,107,0.6); }
.bar { height: 22px; border: 2px solid var(--phos); padding: 2px; background: var(--ink); }
.fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, var(--phos) 0 12px, transparent 12px 16px);
        box-shadow: 0 0 8px rgba(124,255,107,0.6); transition: width 0.15s linear; }
.row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 22px; }
.notice { margin-top: 14px; padding: 10px 12px; border: 2px solid var(--amber); color: var(--amber); font-size: 21px; line-height: 1.2; }
.notice button, .error button { margin-top: 8px; }
.error { margin-top: 14px; padding: 10px 12px; border: 2px solid var(--red); color: var(--red); font-size: 21px; line-height: 1.2; white-space: pre-wrap; }

button { font-family: inherit; font-size: 22px; color: var(--phos); background: transparent; border: 2px solid var(--phos);
         padding: 4px 14px; cursor: pointer; letter-spacing: 1px; }
button:hover, button:focus-visible { background: var(--pink); border-color: var(--pink); color: var(--ink); outline: none; }
button.big { font-size: 56px; padding: 12px 36px; text-shadow: 0 0 10px rgba(124,255,107,0.7); animation: roboz-blink 1.1s steps(2, start) infinite; }
button.big:hover { text-shadow: none; animation: none; }
.hint { margin-top: 18px; font-size: 22px; opacity: 0.7; text-align: center; padding: 0 16px; }
.hint.invite { color: var(--pink); opacity: 1; font-size: 26px; }   /* round 10: ?join=CODE */
.hint.host { margin-top: 8px; color: var(--amber); opacity: 0.85; }  /* round 10: R5-WEB-5 */

#roboz-toolbar { position: absolute; right: 10px; bottom: 8px; z-index: 5; display: flex; gap: 12px; align-items: center; opacity: 0.55; }
#roboz-toolbar:hover { opacity: 1; }
#roboz-toolbar button { font-size: 18px; padding: 2px 8px; background: rgba(11,10,15,0.7); }
#roboz-tabnote { color: var(--amber); font-size: 18px; }

.scanlines { pointer-events: none; position: absolute; inset: 0; z-index: 20;
             background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
body.playing .scanlines { display: none; }   /* the game has its own VHS/CRT filter */

@keyframes roboz-blink { 0% { opacity: 1; } 100% { opacity: 0.55; } }
@keyframes roboz-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.96; } }
.crt .panel { animation: roboz-flicker 0.12s infinite; }
@media (prefers-reduced-motion: reduce) { .crt .panel, button.big { animation: none; } }
@media (max-width: 520px) { .logo { font-size: 56px; } button.big { font-size: 40px; } }