/* Shared look for all screens: deep-navy stage, brass and azure (from the prototype). */
:root{
  --night:#06111F;      /* stage ground */
  --panel:#0C1E36;      /* raised surfaces */
  --line:#1D3557;       /* hairlines */
  --fg:#F2F5F9;         /* main text */
  --muted:#8CA3C0;      /* labels */
  --azure:#0094DA;      /* Friends Club azure: categories, timer */
  --deep:#004B8F;       /* Friends Club deep blue */
  --brass:#F0B44C;      /* answers, scores, the winner */
  --good:#34C77B;       /* correct */
  --bad:#EF5350;        /* wrong */
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px}

.toast{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:100;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.6em 1.1em;font-size:15px;max-width:calc(100% - 32px);box-sizing:border-box;animation:fade .2s;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.err{border-color:var(--bad)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* small "connection lost" badge used on every screen */
.conn{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;background:var(--bad);color:#fff;border-radius:999px;padding:.4em 1em;font-size:14px;font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}