:root{--bg: #0d1117;--bg-overlay: rgba(13, 17, 23, .92);--surface: #161b22;--surface-2: #21262d;--border: #30363d;--text: #e6edf3;--text-dim: #8b949e;--accent: #1f6feb;--primary: #238636;--danger: #da3633;--ghost: #30363d;--radius: .6rem;--radius-lg: 1rem;--tap: 2.75rem;--panel-w: min(92vw, 30rem)}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden}body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);touch-action:none}#board{display:block;width:100%;height:100%}.hidden{display:none!important}#overlay{position:fixed;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:1rem;padding:env(safe-area-inset-top,.5rem) 1rem .5rem;pointer-events:none}#overlay>*{pointer-events:auto}.turn-token{display:inline-flex;width:1.5rem;height:1.5rem;flex:none}.turn-token svg{width:100%;height:100%}.turn-token:empty{display:none}.turn-label{font-weight:600}.turn-timer{margin-left:auto;font-variant-numeric:tabular-nums;font-size:1.25rem;min-width:2.5ch;text-align:right}.turn-timer.warn{color:#f0883e}.turn-timer.danger{color:#f85149}#menu-btn,#undo-btn{padding:.5rem 1rem;border:0;border-radius:var(--radius);background:var(--ghost);color:#fff;font-size:1rem;cursor:pointer}#overlay-mirror{position:fixed;bottom:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:1rem;padding:.5rem 1rem env(safe-area-inset-bottom,.5rem);transform:rotate(180deg);pointer-events:none}#banner{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;background:#0d1117d9;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:var(--tap);padding:.75rem 1.25rem;border:0;border-radius:var(--radius);background:var(--ghost);color:#fff;font:inherit;font-size:clamp(1rem,2.6vw,1.1rem);font-weight:600;cursor:pointer;transition:filter .12s ease,transform .03s ease}.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn[disabled]{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--primary)}.btn--accent{background:var(--accent)}.btn--danger{background:var(--danger)}.btn--ghost{background:var(--ghost)}.btn--compact{width:auto;flex:1;padding:.6rem .9rem;font-size:1rem}.btn-row{display:flex;gap:.5rem;width:100%}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 1rem) 1rem calc(env(safe-area-inset-bottom,0px) + 1rem);overflow:hidden}.screen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:var(--bg-overlay)}.screen__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.screen__backdrop svg{width:75vmin;height:75vmin;opacity:.13;filter:blur(7px);animation:hex-drift 44s linear infinite}@keyframes hex-drift{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.18)}to{transform:rotate(360deg) scale(1)}}.panel{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:.85rem;width:var(--panel-w);max-height:calc(100dvh - 2rem);overflow-y:auto;padding:1.5rem;border-radius:var(--radius-lg);background:#161b22d1;border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel__title{font-size:clamp(1.6rem,7vw,2.1rem);font-weight:800;letter-spacing:.01em;text-align:center;margin-bottom:.25rem}.panel__text{color:var(--text-dim);text-align:center;line-height:1.4}.segmented{display:flex;width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.segmented>button{flex:1;min-height:var(--tap);padding:.6rem;border:0;background:transparent;color:var(--text-dim);font:inherit;font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}.segmented>button.active{background:var(--accent);color:#fff}.segmented>button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.menu-footer{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-top:.5rem;font-size:.8rem;color:var(--text-dim)}.menu-footer a{color:var(--text-dim)}.field{display:flex;flex-direction:column;gap:.5rem;width:100%}.field>span{font-size:.95rem;color:var(--text-dim)}#player-name{padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:1.1rem}#player-name:focus{outline:none;border-color:var(--accent)}#color-swatches,#shape-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:.6rem;width:100%}.swatch,.shape-option{width:100%;aspect-ratio:1 / 1;min-width:0;padding:0;border:3px solid transparent;cursor:pointer}.swatch{border-radius:999px}.swatch[aria-checked=true],.shape-option[aria-checked=true]{border-color:var(--text)}.swatch-random{background:conic-gradient(from 90deg,#3fb950,#58a6ff,#f85149,#f2da3c,#bc8cff,#ff7eb6,#f0883e,#3fb950)}.shape-option{border-radius:var(--radius);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text-dim);padding:.35rem}.shape-option svg{width:100%;height:100%;display:block}.field-toggle{flex-direction:row;align-items:center;justify-content:space-between}.field-toggle>span{color:var(--text)}.field-toggle input[type=checkbox]{width:1.4rem;height:1.4rem;flex:none}#stats-list{display:grid;grid-template-columns:auto auto;gap:.25rem 1.5rem;font-variant-numeric:tabular-nums;width:100%}#stats-list dt{text-align:left;color:var(--text-dim)}#stats-list dd{text-align:right;margin:0;font-weight:600}.ach-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;padding:0 .35rem;margin-left:.4rem;border-radius:999px;background:#f85149;color:#fff;font-size:.8rem;font-weight:700;vertical-align:middle}#ach-list{display:flex;flex-direction:column;gap:.6rem;width:100%;font-variant-numeric:tabular-nums}.ach-row{display:grid;grid-template-columns:1fr auto;gap:.15rem .75rem;padding:.7rem .9rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--surface-2);text-align:left}.ach-row.locked{opacity:.65}.ach-row.maxed{border-color:#2ea043}.ach-title{font-weight:700}.ach-level{color:var(--text-dim);font-size:.85rem;justify-self:end}.ach-desc{grid-column:1 / -1;color:var(--text-dim);font-size:.9rem}.ach-bar{grid-column:1 / -1;height:.4rem;border-radius:999px;background:var(--surface-2);overflow:hidden}.ach-bar>span{display:block;height:100%;background:#2ea043}.ach-progress{grid-column:1 / -1;color:var(--text-dim);font-size:.8rem}.ach-new{margin-left:.4rem;padding:0 .35rem;border-radius:999px;background:#f85149;color:#fff;font-size:.7rem;font-weight:700}#achievement-toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%);z-index:4;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}.ach-toast-item{padding:.6rem 1rem;border-radius:var(--radius);background:#2ea043f2;color:#fff;font-weight:600;box-shadow:0 .4rem 1rem #0006}#lobby-link{width:100%;padding:.6rem .7rem;font:inherit;color:#c9d1d9;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}#net-banner{position:fixed;top:8px;left:50%;transform:translate(-50%);z-index:30;padding:6px 12px;background:#0d1117e6;color:#f0883e;border:1px solid var(--border);border-radius:var(--radius)}#replay-list{display:flex;flex-direction:column;gap:.4rem;width:100%;max-height:55vh;overflow-y:auto}.replay-row{display:block;width:100%;text-align:left}#replay-status{font-size:1.1rem;font-weight:600;text-align:center}.hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1.5rem);transform:translate(-50%);z-index:4;display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;background:#161b22eb;border:1px solid var(--border);color:var(--text);font-size:.9rem;pointer-events:none;opacity:1;transition:opacity .5s ease}.hint.fade-out{opacity:0}.hint__icon{font-size:1.1rem}.tutorial-card{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);transform:translate(-50%);z-index:15;display:flex;flex-direction:column;gap:.75rem;width:min(92vw,34rem);padding:1rem 1.1rem;background:#161b22f0;border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text)}#tutorial-text{margin:0;line-height:1.45;font-size:clamp(1rem,2.8vw,1.1rem)}.tutorial-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tutorial-progress{padding:.25rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--text-dim);font-size:.8rem;font-weight:600;white-space:nowrap}.tutorial-buttons,#tutorial-finish{display:flex;gap:.5rem}@media (prefers-reduced-motion: reduce){.screen__backdrop svg{animation:none}.btn,.segmented>button,.hint{transition:none}}@media (max-width: 30rem){.panel{padding:1.1rem;gap:.7rem}.btn-row{flex-direction:column}.btn-row .btn{width:100%;flex:none}.tutorial-row{flex-wrap:wrap}}