:root{--cell-size:clamp(16px, calc((100vh - 130px) / 20), 30px);--preview-cell-size:18px;--bg:#0f172a;--surface:#1e293b;--border:#334155;--grid-line:#1a2436;--text:#e2e8f0;--text-muted:#94a3b8;--accent:#38bdf8;color:var(--text);background:var(--bg);font-family:Segoe UI,Malgun Gothic,system-ui,sans-serif}*{box-sizing:border-box}body{justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex}.app{flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.app__title{letter-spacing:.4em;color:var(--accent);margin:0;font-size:1.6rem}.layout{align-items:stretch;gap:20px;display:flex}.sidebar{flex-direction:column;gap:16px;width:150px;display:flex}.sidebar__bottom{margin-top:auto}.board-wrapper{position:relative}.board{grid-template-columns:repeat(var(--cols), var(--cell-size));grid-template-rows:repeat(var(--rows), var(--cell-size));background:var(--grid-line);border:2px solid var(--border);border-radius:6px;gap:1px;padding:4px;display:grid}.cell{background:#0b1120}.cell--filled{background:var(--cell-color);box-shadow:inset 3px 3px #ffffff4d,inset -3px -3px #0000004d}.cell--ghost{box-shadow:inset 0 0 0 2px var(--cell-color);opacity:.45;background:0 0}.overlay{text-align:center;background:#0f172ad1;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:12px;display:flex;position:absolute;inset:0}.overlay__title{letter-spacing:.15em;margin:0;font-size:1.8rem}.overlay__score{color:var(--accent);margin:0;font-size:1.1rem}.overlay__button{font:inherit;color:var(--bg);background:var(--accent);cursor:pointer;border:none;border-radius:6px;padding:10px 28px;font-weight:600}.overlay__button:hover{filter:brightness(1.1)}.overlay__button:disabled{opacity:.4;cursor:default;filter:none}.auth-form{flex-direction:column;gap:8px;width:100%;max-width:220px;display:flex}.auth-form__error{color:#f87171;margin:0;font-size:.8rem}.link-button{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.user-bar{color:var(--text-muted);align-items:center;gap:10px;font-size:.85rem;display:flex}.user-bar__name{color:var(--text);font-weight:600}.overlay__save{color:var(--accent);margin:0;font-size:.85rem}.overlay__save--failed{color:#f87171}.auth-form__input{min-width:0;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px}.auth-form__input:focus{border-color:var(--accent);outline:none}.overlay__hint{color:var(--text-muted);margin:0;font-size:.85rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:12px}.panel__title{letter-spacing:.2em;color:var(--text-muted);margin:0 0 10px;font-size:.8rem}.panel__body{flex-direction:column;gap:10px;display:flex}.preview{justify-content:center;align-items:center;height:52px;display:flex}.preview--dimmed{opacity:.35}.preview__grid{grid-template-columns:repeat(var(--cols), var(--preview-cell-size));grid-auto-rows:var(--preview-cell-size);gap:1px;display:grid}.preview__grid .cell:not(.cell--filled){background:0 0}.panel--compact{padding:8px 10px}.panel--compact .panel__title{margin-bottom:6px;font-size:.65rem}.score{flex-direction:column;gap:4px;padding:0 4px;display:flex}.score__label{letter-spacing:.2em;color:var(--text-muted);font-size:.8rem}.score__value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:1.5rem;font-weight:700}.ranking{flex-direction:column;gap:6px;margin:0;padding:0;font-size:.85rem;list-style:none;display:flex}.ranking__item{justify-content:space-between;gap:8px;display:flex}.ranking__rank{width:1em;color:var(--text-muted)}.ranking__name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.ranking__score{font-variant-numeric:tabular-nums;font-weight:600}.ranking__item--latest .ranking__rank,.ranking__item--latest .ranking__name,.ranking__item--latest .ranking__score{color:var(--accent)}.ranking__empty{color:var(--text-muted);margin:0;font-size:.8rem}.controls{flex-direction:column;gap:3px;margin:0;padding:0;font-size:.7rem;list-style:none;display:flex}.controls li{justify-content:space-between;gap:8px;display:flex}.controls kbd{color:var(--accent);font-family:inherit}