:root{--bg: #0e1116;--panel: #171c24;--panel-2: #1f2630;--accent: #e8b04b;--accent-2: #58a6ff;--text: #e6edf3;--muted: #9aa7b4;--white-coin: #f3ead3;--black-coin: #2b2b2b;--queen: #c0392b;--border: #2a313c}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:radial-gradient(1200px 800px at 70% -10%,#1a2230,var(--bg));color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}#app{max-width:1100px;margin:0 auto;padding:18px 20px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.logo{font-size:28px;letter-spacing:4px;margin:0;text-transform:uppercase;background:linear-gradient(90deg,var(--accent),#f6d488);-webkit-background-clip:text;background-clip:text;color:transparent}.mode{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px}.mode__btn{background:transparent;color:var(--muted);border:none;padding:8px 14px;font-size:13px;font-weight:700;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease}.mode__btn:hover{color:var(--text)}.mode__btn.active{background:var(--accent-2);color:#06121f}.btn{background:var(--accent);color:#1a1408;border:none;padding:10px 18px;font-size:14px;font-weight:700;border-radius:8px;cursor:pointer;transition:transform .05s ease,filter .15s ease}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}.layout{display:grid;grid-template-columns:minmax(0,720px) 280px;gap:24px;align-items:start}.board-wrap{position:relative;aspect-ratio:1 / 1}canvas#board{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 20px 50px #00000080;touch-action:none;cursor:grab}canvas#board:active{cursor:grabbing}.message{position:absolute;left:50%;top:14px;transform:translate(-50%);background:#000000a6;color:var(--text);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .25s ease;white-space:nowrap}.message.show{opacity:1}.sidebar{display:flex;flex-direction:column;gap:16px}.scoreboard{display:flex;flex-direction:column;gap:10px}.player{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 8px;background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease}.player.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 18px #e8b04b2e}.player__name{font-weight:700;font-size:15px}.player__coin{grid-column:1;font-size:12px;color:var(--muted)}.player__score{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:34px;font-weight:800;color:var(--accent)}.turn{background:var(--panel-2);border-radius:12px;padding:12px 14px;display:flex;align-items:baseline;justify-content:space-between}.turn__label{color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:1px}.turn__value{font-weight:700;font-size:16px}.status{min-height:20px;color:var(--accent-2);font-size:13px;font-weight:600}.help{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:13px;color:var(--muted)}.help summary{cursor:pointer;color:var(--text);font-weight:600;margin-bottom:6px}.help ol{margin:8px 0 4px;padding-left:18px;line-height:1.5}.help strong{color:var(--text)}@media (max-width: 880px){.layout{grid-template-columns:1fr}.sidebar{order:2}}