/* Page, canvas, and shared colors. */
:root{
  --accent:#8cff5a; --danger:#ff4a4a; --gold:#ffcb4a; --crystal:#59d0ff;
  --panel:rgba(12,18,32,.92); --panel-line:rgba(140,255,90,.55); --ink:#e8ffe0; --ink-dim:#9fbf98;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --panel:rgba(8,12,24,.93); --ink:#ecffe4; } }
:root[data-theme="dark"]{ --panel:rgba(8,12,24,.93); --ink:#ecffe4; }
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
body{margin:0;height:100%;background:#0b1220;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:"Avenir Next","Trebuchet MS",system-ui,sans-serif;color:var(--ink);overscroll-behavior:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.zone{position:fixed;top:0;bottom:0;z-index:2;touch-action:none}
#zoneL{left:0;width:46%} #zoneR{right:0;width:54%}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.outl{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}