:root{
  --ink:#eaf6f7; --ink-dim:#a9c4cb; --panel:rgba(9,28,42,.78); --panel-2:rgba(16,44,62,.82);
  --line:rgba(140,220,230,.22); --gold:#ffcf5c; --teal:#4fd1c5; --danger:#ff6b6b; --good:#5fd8a0;
  --font:'Fredoka','Baloo 2','Nunito','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0a1a24;color:var(--ink);font-family:var(--font)}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#ui{position:fixed;inset:0;pointer-events:none}
#ui *{pointer-events:auto}
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#17506b,#071824 70%);z-index:100;transition:opacity .6s}
#boot.gone{opacity:0;pointer-events:none}
.boot-inner{text-align:center}
.boot-logo{font-size:64px;animation:bob 2s ease-in-out infinite}
.boot-inner h1{margin:.2em 0 .5em;font-weight:600;letter-spacing:.02em}
.boot-bar{width:280px;height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:0 auto}
#bootFill{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .2s}
#bootMsg{color:var(--ink-dim);margin-top:14px;font-size:14px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}