*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0d13;color:#e9ecf3;font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;touch-action:manipulation;user-select:none}
canvas{display:block;width:100%;height:100%}
#hud{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;pointer-events:none}
#score{font-size:44px;font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(255,122,61,.35)}
#who{display:flex;gap:8px;align-items:center;font-size:13px;color:#9aa3b8;pointer-events:auto}
#panel{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at 50% 30%,rgba(255,122,61,.12),rgba(11,13,19,.92) 60%);text-align:center;padding:20px}
#panel.show{display:flex}
h1{margin:0;font-size:clamp(30px,7vw,52px);letter-spacing:-.03em;background:linear-gradient(90deg,#ff7a3d,#ffc94d,#2dd4bf);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0;color:#9aa3b8;max-width:340px}
#result{font-size:18px;font-weight:700;min-height:24px}
#board{list-style:none;margin:0;padding:0;min-width:220px;font-size:13px;color:#c4cad8}
#board li{display:flex;justify-content:space-between;gap:16px;padding:3px 10px;border-radius:6px}
#board li.me{background:rgba(255,201,77,.12);color:#ffc94d}
.buttons,.shop{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
button{font:inherit;color:#e9ecf3;background:#1c2030;border:1px solid #2b3245;border-radius:10px;padding:9px 16px;cursor:pointer}
button:hover{border-color:#ff7a3d}
button.primary{background:#ff7a3d;border-color:#ff7a3d;color:#1a0d05;font-weight:800;padding:12px 30px;font-size:17px}
.shop button{font-size:12px;padding:6px 10px;color:#ffc94d}
.tiny{font-size:11px;color:#6b7387;margin:0}