/* Colors, page, damage numbers, full-screen flashes and the WebGL message. */
:root{
  --hud:rgba(9,38,40,.62);
  --hud-line:rgba(255,236,190,.30);
  --gold:#ffd980;
  --ink:#fff7e4;
  --sea:#4fb1a9;
}
html,body{height:100%}
body{margin:0;background:var(--sea);color:var(--ink);font-family:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0;background:var(--sea)}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#dmg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.dn{position:absolute;left:0;top:0;font-weight:700;font-size:20px;color:#fff;text-shadow:0 2px 0 #7a3b1e,0 0 8px rgba(0,0,0,.35);will-change:transform,opacity}
.dn.big{font-size:34px;color:#ffe066}
#flash{position:fixed;inset:0;background:#fff0fa;opacity:0;pointer-events:none}
.dn.exp{font-size:16px;color:#ffe066}
.dn.food{font-size:16px;color:#ffc27a;text-shadow:0 2px 0 #5a2a0a,0 0 8px rgba(0,0,0,.35)}
.dn.item{font-size:16px;color:#ffd6cf;text-shadow:0 2px 0 #5a0f0a,0 0 8px rgba(0,0,0,.35)}
.dn.heal{color:#8dffa0;text-shadow:0 2px 0 #0d4a1e,0 0 8px rgba(0,0,0,.35)}
.dn.zzz{font-size:18px;color:#d6e4ff;text-shadow:0 2px 0 #23305a,0 0 8px rgba(0,0,0,.35)}
.dn.block{color:#fff6c8;text-shadow:0 2px 0 #4a3d0d,0 0 8px rgba(0,0,0,.35)}
.dn.say{font-size:17px;font-style:italic;color:#ffd9a8;white-space:nowrap;text-shadow:0 2px 0 #3a1a08,0 0 10px rgba(0,0,0,.6)}
.dn.hurt{color:#ff6a5a;text-shadow:0 2px 0 #4a0d0d,0 0 8px rgba(0,0,0,.35)}
#hurt{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(255,40,30,0) 45%,rgba(255,40,30,.55) 100%)}
#fail{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:16px}
.pill:focus-visible,.skill:focus-visible,.icon:focus-visible,.lang:focus-visible,#settings .x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}