/* ARENA shared tokens + components (from design/Main.dc.html). */
:root{
  --yellow:#FFD60A; --ink:#111111; --paper:#F4F1E8; --white:#FFFFFF;
  --red:#D7261E; --blue:#2B54F0; --orange:#FF7A1A; --green:#17B05A;
  --navy:#1E2A44; --gold:#D4AF37; --muted:#3A3A3A; --dim:#C9C4B6;
  --px:'Silkscreen',monospace; --sans:'Schibsted Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--yellow);color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:transparent}
button{font-family:var(--sans);cursor:pointer;color:inherit}
button:disabled{cursor:default}
.px{font-family:var(--px)}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* 3D stacked logo */
.logo{font-family:var(--px);font-weight:700;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;line-height:.9;
  text-shadow:2px 2px 0 var(--ink),4px 4px 0 var(--ink),6px 6px 0 var(--ink),8px 8px 0 var(--ink)}

.hazard{background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,var(--yellow) 12px 24px)}
.chip{display:inline-block;font-family:var(--px);padding:6px 10px;border-radius:8px}

/* answer shapes: color + shape for color-blind players */
.opt0{background:var(--red);color:#fff}
.opt1{background:var(--blue);color:#fff}
.opt2{background:var(--green);color:var(--ink)}
.opt3{background:var(--orange);color:var(--ink)}

/* sync dot: green = realtime, yellow = polling only, red = offline */
.sync{display:inline-block;width:10px;height:10px;border-radius:50%;background:#888;vertical-align:middle}
.sync.rt{background:var(--green)} .sync.poll{background:var(--yellow)} .sync.off{background:var(--red)}