:root { --bg:#1d3a4a; --tile:#244658; --ink:#f3ead7; --pot:#262626; --gold:#f2b632; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif; overflow:hidden; touch-action:none; }
#wrap { position:relative; height:100%; max-width:520px; margin:0 auto; background:var(--tile); }
canvas { display:block; width:100%; height:100%; }
#hud { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  padding:12px 16px; font-size:20px; font-weight:bold; pointer-events:none; }
#overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:28px; background:rgba(29,58,74,.92); gap:14px; }
#overlay.hidden { display:none; }
h1 { font-size:54px; margin:0; letter-spacing:-1px; }
p { margin:0; max-width:340px; line-height:1.45; font-size:17px; }
.legend { display:flex; gap:14px; font-size:15px; flex-wrap:wrap; justify-content:center; }
button { font:inherit; font-size:22px; font-weight:bold; background:var(--gold); color:#2a1d00;
  border:0; border-radius:999px; padding:12px 34px; cursor:pointer; }
button:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }