:root {
  --ink:#101016; --paper:#f4efe3; --coral:#ff5d73; --yellow:#ffd166;
  --cyan:#38bdf8; --mint:#7bd88f; --muted:#9b998f;
  --line:rgba(244,239,227,.16); --panel:#17171e;
  --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--sans); }
button, a, input { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button, input { font:inherit; }
button { cursor:pointer; }
.noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.035; background-image:radial-gradient(rgba(255,255,255,.3) .55px,transparent .55px); background-size:4px 4px; }
.topbar { height:68px; padding:0 max(24px,4vw); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:12px; color:var(--paper); text-decoration:none; font:500 12px var(--mono); letter-spacing:.09em; }
.top-actions { display:flex; align-items:center; gap:18px; margin-left:auto; margin-right:28px; }
.top-actions a,.top-actions button { padding:0; border:0; background:transparent; color:var(--muted); text-decoration:none; font:11px var(--mono); letter-spacing:.08em; }
.top-actions a:hover,.top-actions button:hover { color:var(--paper); }
.world-state { display:flex; align-items:center; gap:9px; color:var(--muted); font:11px var(--mono); letter-spacing:.08em; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(123,216,143,.1),0 0 12px rgba(123,216,143,.3); }
.divider { width:1px; height:12px; background:var(--line); }
main { max-width:1450px; margin:auto; padding:14px 28px 110px; }
.lab-note { min-height:42px; padding:9px 13px; display:flex; align-items:center; gap:10px; border:1px solid rgba(123,216,143,.25); background:rgba(123,216,143,.06); color:var(--muted); font:12px/1.5 var(--mono); }
.lab-note b { color:var(--mint); }
.pulse { width:8px; height:8px; flex:0 0 auto; background:var(--mint); box-shadow:0 0 0 5px rgba(123,216,143,.1); animation:pulse 1.8s infinite; }
.scorebar { margin:10px 0 18px; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); background:rgba(23,23,30,.78); }
.scorebar div { padding:11px 16px; border-right:1px solid var(--line); }
.scorebar div:last-child { border:0; }
.scorebar b { display:block; color:var(--yellow); font:500 23px/1 var(--mono); }
.scorebar span { display:block; margin-top:6px; color:var(--muted); font:500 11px var(--mono); letter-spacing:.1em; }
.game-layout { display:grid; grid-template-columns:minmax(220px,270px) minmax(460px,620px) minmax(230px,300px); gap:18px; align-items:start; justify-content:center; }
.panel,.canvas-shell { border:1px solid var(--line); background:rgba(23,23,30,.78); backdrop-filter:blur(18px); }
.panel-title,.canvas-toolbar,.canvas-coordinates { height:45px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font:11px var(--mono); letter-spacing:.1em; }
.panel-title,.canvas-toolbar { border-bottom:1px solid var(--line); }
.canvas-coordinates { border-top:1px solid var(--line); }
.canvas-toolbar span { white-space:nowrap; }
.canvas-toolbar span:first-child { color:var(--paper); }
.canvas-toolbar i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--mint); }
.canvas-toolbar b { color:var(--yellow); font-weight:500; }
#pieceStatus { min-width:145px; overflow:hidden; text-align:right; text-overflow:ellipsis; }
.player-content,.activity-content { padding:18px; }
.identity-card { display:flex; gap:11px; align-items:center; padding:12px; border:1px solid var(--line); background:#101016; }
.avatar { width:42px; height:42px; display:grid; place-items:center; background:var(--yellow); color:var(--ink); font-weight:800; }
.identity-card strong,.identity-card span { display:block; }
.identity-card strong { font-size:13px; }
.identity-card span { margin-top:4px; color:var(--muted); font:11px var(--mono); }
.brush-label { display:block; margin:17px 0 9px; color:var(--muted); font:11px var(--mono); letter-spacing:.11em; }
.player-options { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.player-options button { min-height:44px; padding:7px; border:1px solid var(--line); background:var(--ink); color:var(--muted); font:500 11px var(--mono); }
.player-options button.selected { border-color:var(--yellow); background:rgba(255,209,102,.1); color:var(--yellow); }
.player-options button:disabled:not(.selected) { opacity:.35; }
.custom-player { display:block; margin-top:15px; }
.custom-player>span { display:block; margin-bottom:7px; color:var(--muted); font:11px var(--mono); }
.custom-player>div { display:flex; }
.custom-player input { width:100%; min-width:0; height:42px; padding:0 9px; border:1px solid var(--line); border-right:0; background:var(--ink); color:var(--paper); font-size:16px; }
.custom-player button { width:55px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:500 11px var(--mono); }
.recover-link { display:inline-block; margin-top:10px; color:var(--cyan); font:11px var(--mono); text-decoration:none; }
.brush-tip { margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.leaderboard { margin-top:20px; padding-top:1px; border-top:1px solid var(--line); }
.leaderboard ol { margin:0; padding:0; list-style:none; }
.leaderboard li { padding:8px 0; display:flex; justify-content:space-between; border-bottom:1px solid rgba(244,239,227,.08); font:11px var(--mono); }
.leaderboard li b { color:var(--yellow); }
.empty { color:var(--muted)!important; }
.canvas-column { min-width:0; }
.board-frame { position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:var(--ink); }
.board { display:block; width:100%; height:100%; background:#121218; image-rendering:pixelated; will-change:filter; }
.game-message { position:absolute; inset:42% 14% auto; padding:17px; background:var(--paper); color:var(--ink); font:800 17px var(--sans); text-align:center; box-shadow:7px 7px 0 var(--coral); }
.hidden { display:none!important; }
.controls { margin-top:10px; display:grid; grid-template-columns:64px 76px 1fr 70px 64px; gap:8px; }
.controls button { min-height:56px; touch-action:none; border:1px solid var(--line); background:var(--panel); color:var(--paper); font:700 20px var(--sans); transition:background-color .08s ease,border-color .08s ease,filter .08s ease; }
.controls button:not(:disabled):active,.controls button.held { border-color:rgba(255,209,102,.7); filter:brightness(1.35); }
.controls button small { display:block; margin-top:3px; color:var(--muted); font:10px var(--mono); letter-spacing:.07em; }
.controls .drop { padding:0 14px; border-color:var(--yellow); background:var(--yellow); color:var(--ink); font-size:12px; }
.controls .drop small { color:rgba(16,16,22,.6); }
.controls button:disabled { opacity:.42; cursor:not-allowed; }
.hint { margin:9px auto 0; max-width:500px; color:var(--muted); text-align:center; font:12px/1.55 var(--mono); }
.next-piece { width:112px; height:92px; margin:14px auto 20px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:3px; }
.mini-cell { background:#101016; }
.mini-cell.on { background:var(--cell); box-shadow:inset 0 0 0 2px rgba(255,255,255,.13); }
.activity { padding-top:1px; border-top:1px solid var(--line); }
#activity { margin-top:8px; }
.event { padding:9px 0; border-bottom:1px solid rgba(244,239,227,.08); }
.event b { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--paper); font:500 11px var(--mono); }
.event span { display:block; margin-top:4px; color:var(--muted); font:11px/1.45 var(--mono); }
.rules { margin-top:18px; padding:13px; border:1px solid rgba(56,189,248,.2); background:rgba(56,189,248,.05); }
.rules .brush-label { margin:0 0 8px; color:var(--cyan); }
.rules p { margin:0; color:var(--muted); font:12px/1.55 var(--mono); }
@keyframes pulse { 50% { opacity:.45; } }
@keyframes land { 50% { filter:brightness(1.45); } }
.board.landed { animation:land .22s ease; }

@media(max-width:1050px) {
  .game-layout { grid-template-columns:220px minmax(430px,700px); }
  .activity-panel { display:none; }
}
@media(max-width:760px) {
  .topbar { height:56px; padding:0 12px; }
  .world-state { display:none; }
  .top-actions { margin:0 0 0 auto; gap:12px; }
  .top-actions a { display:none; }
  .top-actions button { font-size:10px; }
  .brand>span:last-child { display:none; }
  main { padding:10px 12px 70px; }
  .lab-note { font-size:11px; line-height:1.4; }
  .lab-note span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .scorebar { margin-bottom:10px; grid-template-columns:repeat(3,1fr); }
  .scorebar div { padding:9px 5px; text-align:center; }
  .scorebar b { font-size:17px; }
  .scorebar span { font-size:11px; }
  .game-layout { display:flex; flex-direction:column; }
  .canvas-column { order:1; }
  .player-panel { order:2; margin-top:10px; margin-bottom:0; }
  .player-content { padding:10px; }
  .brush-tip,.leaderboard { display:none; }
  .custom-player { margin-top:10px; }
  .brush-label { margin:0 0 8px; }
  .player-options { grid-template-columns:repeat(4,1fr); gap:4px; }
  .player-options button { min-height:44px; padding:4px; font-size:10px; }
  .canvas-shell { width:100%; }
  .canvas-toolbar { height:40px; padding:0 10px; font-size:10px; }
  .canvas-toolbar span:first-child { display:none; }
  .canvas-coordinates { height:36px; padding:0 10px; font-size:10px; }
  .controls { grid-template-columns:45px 52px 1fr 48px 45px; gap:4px; }
  .controls button { min-height:50px; }
  .hint { font-size:12px; }
}