:root{--bg:#f3efe4;--bg-accent:#dbe7ff;--surface:#fffbf4eb;--surface-strong:#fffaf0;--ink:#1d2433;--muted:#5f6b7a;--brand:#1743a3;--brand-strong:#0c2f7a;--brand-soft:#dbe6ff;--line:#12244a24;--shadow:0 20px 60px #141f3d29}*{box-sizing:border-box}html,body{width:100%;min-height:100%;color:var(--ink);background:radial-gradient(circle at top left, #ffd66647, transparent 32%), radial-gradient(circle at top right, #5e89ff38, transparent 28%), linear-gradient(180deg, var(--bg) 0%, #f8f4ec 100%);margin:0;padding:0;font-family:Avenir Next,Segoe UI,sans-serif}body{text-align:center}button{color:#fff;background:linear-gradient(135deg, var(--brand) 0%, #295ecf 100%);border:1px solid #0000;border-radius:999px;margin-top:.5em;padding:.8em 1.25em;font-family:inherit;font-size:.95em;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s;box-shadow:0 10px 24px #1743a338}button:hover{cursor:pointer;background:linear-gradient(135deg, var(--brand-strong) 0%, #1d49aa 100%);transform:translateY(-1px);box-shadow:0 14px 28px #1743a347}button:active{transform:translateY(0)}input,label,button{font-family:inherit}a{color:var(--brand)}a:hover{color:var(--brand-strong)}h1,h1{letter-spacing:-.03em;margin:.35em 0;font-size:1.7em}h2{color:var(--brand-strong);margin:.75em 0 .5em;font-size:1.15em}p{color:var(--muted);margin-top:0;line-height:1.6}.header{padding:1.25rem 1rem .25rem}.header-title{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffaf0b8;border-radius:999px;align-items:center;gap:.6rem;margin:0;padding:.7rem 1.15rem;display:inline-flex;box-shadow:0 8px 24px #29355614}.section{width:min(100%,920px);margin:1.5em auto 0;padding:0 1rem}.init-screen,.message-body{text-align:left;color:var(--ink);background:var(--surface);max-width:34em;box-shadow:var(--shadow);border:1px solid #ffffffb3;border-radius:24px;padding:1rem 1.25rem 1.25rem}.init-screen::backdrop,.message-body::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#16192352}.game-settings-form{grid-template-columns:2fr 3fr;gap:1em;margin-bottom:1em;display:grid}.game-settings-form-section{grid-column:1/span 2}.game-settings-mode-list{margin-top:.5em;margin-bottom:0;padding-left:0;list-style:none}.game-settings-mode-input{accent-color:var(--brand)}.game-settings-player-1-name-input,.game-settings-player-2-name-input,.copy-box{border:1px solid var(--line);width:100%;color:var(--ink);background:#ffffffd1;border-radius:14px;padding:.8em .95em}.game-settings-player-1-name-input:focus,.game-settings-player-2-name-input:focus,.copy-box:focus{border-color:#1743a357;outline:2px solid #1743a32e}.game-settings-submit{justify-self:start}.copy-box{max-width:28em;margin-right:1em}.hidden{display:none}.statusbox{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffaf0db;border-radius:22px;width:min(100% - 2rem,980px);margin:1rem auto 2rem;padding:1rem 1.1rem;box-shadow:0 16px 40px #141f3d1a}.statusbox-body,.statusbox-controls{justify-content:space-between;align-items:baseline;gap:1em;max-width:680px;margin:0 auto;display:flex}.statusbox-controls{justify-content:center;margin-top:1em}.statusbox-button{color:var(--ink);border:1px solid var(--line);background:var(--surface-strong);box-shadow:none}.statusbox-button:hover{background:#eef3ff;border-color:#1743a33d}.section-canvas{width:min(100%,680px);box-shadow:var(--shadow);background:linear-gradient(#fffaf0e6,#ffffffb3);border:1px solid #0f1b381a;border-radius:28px;margin:0 auto;display:block}.section-message{min-height:.5rem}@media (width<=680px){.header{padding-top:1rem}.header-title{font-size:1.2rem}.game-settings-form{grid-template-columns:1fr}.game-settings-form-section{grid-column:auto}.statusbox-body,.statusbox-controls{text-align:left;flex-direction:column;align-items:stretch}.statusbox-controls{align-items:center}}