@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root { --ink:#20352f; --muted:#6d7d76; --paper:#f7f3eb; --card:#fffdf8; --line:#c9d0c9; --accent:#d76b45; --accent-dark:#b84f2c; --sage:#dce5dc; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; color:var(--ink); background:radial-gradient(circle at 12% 8%,rgba(215,107,69,.08),transparent 30rem),var(--paper); font-family:"DM Sans",sans-serif; }
body.arena-fullscreen { overflow:hidden; }
button { color:inherit; font:inherit; }
.app-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding-bottom:56px; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(32,53,47,.12); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; color:var(--card); background:var(--ink); border-radius:50%; font-family:"DM Serif Display",serif; font-size:19px; }
.version-link { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.version-link:hover { color:var(--accent); }
.intro { display:flex; justify-content:space-between; align-items:end; gap:40px; padding:50px 0 38px; }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-family:"DM Serif Display",serif; font-size:clamp(42px,6vw,66px); font-weight:400; letter-spacing:-.02em; line-height:.98; }
.intro-copy { max-width:540px; margin:16px 0 0; color:var(--muted); line-height:1.6; }
.scoreboard { display:flex; align-items:center; gap:22px; padding:13px 20px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.4); }
.score { min-width:54px; text-align:center; }
.score span { display:block; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.score strong { font-family:"DM Serif Display",serif; font-size:34px; font-weight:400; font-variant-numeric:tabular-nums; }
.score-divider { color:var(--line); font-size:25px; }
.game-layout { display:grid; grid-template-columns:minmax(0,760px) 1fr; gap:clamp(28px,5vw,62px); align-items:center; }
.arena-wrap { position:relative; overflow:hidden; border:2px solid var(--ink); border-radius:10px; background:var(--ink); box-shadow:0 22px 55px rgba(35,47,38,.14); }
canvas { display:block; width:100%; aspect-ratio:16/10; touch-action:none; }
.arena-message { position:absolute; inset:0; display:grid; place-content:center; gap:8px; color:white; background:rgba(20,38,32,.45); text-align:center; cursor:pointer; backdrop-filter:blur(2px); }
.arena-message[hidden] { display:none; }
.arena-message strong { font-family:"DM Serif Display",serif; font-size:clamp(30px,5vw,48px); font-weight:400; }
.arena-message span { color:rgba(255,255,255,.76); font-size:13px; }
.arena-score { display:none; position:absolute; z-index:2; inset:0; color:white; font-family:"DM Sans",sans-serif; font-size:clamp(120px,20vw,260px); font-weight:700; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.08em; pointer-events:none; }
.arena-score span { position:absolute; top:50%; width:50%; opacity:.12; text-align:center; transform:translateY(-50%); }
.arena-score span:first-child { left:0; }
.arena-score span:last-child { right:0; }
.arena-score i { display:none; }
.controls { display:grid; gap:18px; }
.status { min-height:22px; color:var(--muted); font-size:13px; }
.mode-switch { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:9px; background:var(--sage); }
.mode-switch button { padding:10px; border:0; border-radius:6px; background:transparent; font-size:12px; font-weight:700; cursor:pointer; }
.mode-switch button[aria-pressed="true"] { background:var(--card); box-shadow:0 2px 10px rgba(32,53,47,.1); }
.primary-button,.secondary-button { width:100%; padding:14px 18px; border-radius:7px; font-weight:700; cursor:pointer; transition:.18s; }
.primary-button { border:0; color:white; background:var(--accent); }
.secondary-button { border:1px solid var(--line); background:rgba(255,255,255,.4); }
.primary-button:hover { background:var(--accent-dark); transform:translateY(-2px); }
.secondary-button:hover { border-color:var(--accent); color:var(--accent-dark); }
.color-controls { margin:0; padding:0; border:0; }
.color-controls legend { margin-bottom:8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.color-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.player-color { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.4); font-size:12px; font-weight:600; }
.color-trigger { width:30px; height:30px; padding:0; border:2px solid var(--paper); border-radius:50%; background:var(--selected-color); box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.color-trigger[aria-expanded="true"] { box-shadow:0 0 0 2px var(--ink); }
.color-trigger:focus-visible { outline:3px solid rgba(215,107,69,.35); outline-offset:3px; }
.color-menu { position:absolute; z-index:5; top:calc(100% + 8px); left:0; width:190px; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--card); box-shadow:0 12px 32px rgba(32,53,47,.18); }
.player-color:last-child .color-menu { right:0; left:auto; }
.color-menu[hidden] { display:none; }
.swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.swatch { width:100%; aspect-ratio:1; padding:0; border:2px solid transparent; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(32,53,47,.12); cursor:pointer; transition:transform .15s,border-color .15s; }
.swatch:hover { transform:scale(1.12); }
.swatch[aria-pressed="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--paper),0 0 0 1px var(--ink); }
.swatch:focus-visible { outline:3px solid rgba(215,107,69,.35); outline-offset:2px; }
.power-guide { margin:0; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.4); }
.power-guide summary { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-size:12px; font-weight:700; cursor:pointer; list-style:none; }
.power-guide summary::-webkit-details-marker { display:none; }
.power-guide summary::after { color:var(--muted); content:"+"; font-size:18px; font-weight:400; line-height:1; }
.power-guide summary:focus-visible { outline:3px solid rgba(215,107,69,.35); outline-offset:2px; }
.power-guide[open] summary { border-bottom:1px solid var(--line); }
.power-guide[open] summary::after { content:"−"; }
.power-guide ul { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin:12px 14px 8px; padding:0; color:var(--ink); font-size:11px; list-style:none; }
.power-guide b { display:inline-block; min-width:20px; color:var(--accent-dark); }
.power-guide p { margin:8px 14px 13px; color:var(--muted); font-size:10px; line-height:1.5; }
.arena-wrap:fullscreen { display:grid; width:100vw; height:100vh; place-items:center; border:0; border-radius:0; background:#14251f; }
.arena-wrap:fullscreen canvas { width:min(100vw,160vh); height:auto; }
.arena-wrap:fullscreen .arena-score { display:block; width:min(100vw,160vh); height:min(100vh,62.5vw); top:50%; left:50%; transform:translate(-50%,-50%); }
.arena-wrap:fullscreen .arena-message { z-index:3; }
.arena-wrap.is-fullscreen { position:fixed; z-index:100; inset:0; display:grid; width:100vw; height:100vh; height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); place-items:center; border:0; border-radius:0; background:#14251f; }
.arena-wrap.is-fullscreen canvas { width:min(100vw,160vh); width:min(100vw,160dvh); height:auto; }
.arena-wrap.is-fullscreen .arena-score { display:block; width:min(100vw,160vh); width:min(100vw,160dvh); height:min(100vh,62.5vw); height:min(100dvh,62.5vw); top:50%; left:50%; transform:translate(-50%,-50%); }
.arena-wrap.is-fullscreen .arena-message { z-index:3; }
.instructions { padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.8; }
.instructions strong { color:var(--ink); }
kbd { padding:2px 5px; border:1px solid var(--line); border-radius:3px; background:var(--card); font-family:inherit; }
.touch-controls { display:none; grid-template-columns:1fr 1fr; gap:10px; }
.touch-controls button { min-height:48px; border:1px solid var(--line); border-radius:7px; background:var(--sage); font-size:20px; touch-action:none; }
.online-panel { display:grid; gap:14px; padding:16px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.48); }
.online-panel[hidden],#online-room[hidden],#online-lobby[hidden] { display:none; }
.online-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.online-heading strong { display:block; margin-top:3px; font-family:"DM Serif Display",serif; font-size:21px; font-weight:400; }
.online-label { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.connection-state { padding:5px 8px; border-radius:999px; color:var(--muted); background:var(--sage); font-size:10px; font-weight:700; }
.connection-state[data-state="online"] { color:#246342; background:#d9eddf; }
.connection-state[data-state="connecting"] { color:#7c5b19; background:#f4e8c8; }
.room-browser-heading { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.room-browser-heading strong,.create-room-form>label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.room-browser-heading .text-button { margin:0; }
.room-list { display:grid; gap:7px; max-height:150px; margin-top:7px; overflow:auto; }
.room-list>p { margin:8px 0; color:var(--muted); font-size:12px; }
.public-room { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--card); }
.public-room div { display:grid; gap:2px; }
.public-room strong { font-size:13px; letter-spacing:.12em; }
.public-room span { color:var(--muted); font-size:10px; }
.public-room button { width:auto; padding:8px 12px; }
.create-room-form { display:grid; gap:6px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.create-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.create-row select,.passcode-input { min-width:0; padding:11px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--card); font:12px "DM Sans",sans-serif; }
.create-row .primary-button { width:auto; }
.join-row { display:grid; gap:6px; margin-top:12px; }
.join-row label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.join-row>div,.room-actions { display:grid; grid-template-columns:1fr auto; gap:8px; }
.join-row input { min-width:0; padding:12px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--card); font:700 16px/1 "DM Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.join-row .secondary-button,.room-actions .secondary-button,.room-actions .primary-button { width:auto; }
.room-copy { margin:0 0 12px; color:var(--muted); font-size:13px; }
.room-copy strong { color:var(--ink); font-size:20px; letter-spacing:.12em; }
.side-card { display:grid; gap:2px; margin-bottom:14px; padding:12px; border-left:4px solid var(--accent); border-radius:7px; background:var(--sage); }
.side-card[data-side="right"] { border-right:4px solid var(--accent); border-left:0; text-align:right; }
.side-card span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.side-card strong { font-family:"DM Serif Display",serif; font-size:22px; font-weight:400; }
.side-card small { color:var(--muted); font-size:10px; }
.player-color[aria-disabled="true"] { opacity:.48; }
.player-color[aria-disabled="true"] .color-trigger { cursor:not-allowed; }
.text-button { margin:10px auto 0; padding:4px; border:0; color:var(--muted); background:none; font-size:11px; text-decoration:underline; cursor:pointer; }
@media(max-width:850px){ .intro{align-items:start}.game-layout{grid-template-columns:1fr}.controls{grid-template-columns:1fr 1fr}.status,.instructions{grid-column:1/-1}.touch-controls{display:grid}.scoreboard{padding:10px 14px} }
@media(max-width:520px){ .app-shell{width:min(100% - 20px,480px)}.topbar{height:64px}.intro{display:block;padding:34px 0 28px}.scoreboard{margin-top:24px;justify-content:center}.game-layout{gap:20px}.controls{grid-template-columns:1fr}.status,.instructions{grid-column:auto} }
@media (min-width:851px) and (max-width:1180px), (min-width:851px) and (max-height:900px) {
    .app-shell { width:min(1180px,calc(100% - 32px)); height:100vh; height:100dvh; padding-bottom:16px; overflow:hidden; }
    .topbar { height:62px; }
    .intro { align-items:center; gap:24px; padding:20px 0; }
    .eyebrow { margin-bottom:5px; }
    h1 { font-size:clamp(38px,5vw,54px); }
    .intro-copy { max-width:500px; margin-top:8px; line-height:1.4; }
    .scoreboard { flex:none; padding:8px 14px; }
    .score strong { font-size:28px; }
    .game-layout { height:calc(100dvh - 204px); min-height:0; grid-template-columns:minmax(0,1fr) minmax(230px,300px); gap:clamp(18px,3vw,36px); align-items:start; }
    .arena-wrap { width:min(100%,calc((100dvh - 204px) * 1.6)); align-self:start; }
    .controls { max-height:100%; gap:12px; padding-right:4px; overflow-y:auto; overscroll-behavior:contain; }
    .status { min-height:18px; }
    .primary-button,.secondary-button { padding:11px 14px; }
    .instructions { margin:0; padding-top:10px; line-height:1.5; }
}
@media (min-width:521px) and (max-width:850px) {
    .app-shell { width:min(100% - 28px,800px); }
    .topbar { height:64px; }
    .intro { padding:22px 0 20px; }
    h1 { font-size:clamp(40px,7vw,54px); }
    .intro-copy { margin-top:8px; line-height:1.4; }
    .game-layout { gap:22px; }
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}