:root{--bg: #1a1a2e;--bg-light: #16213e;--board-bg: #0f3460;--cell-bg: #1a1a3e;--cell-border: #2a2a5e;--box-border: #4a90d9;--text: #e0e0ff;--text-dim: #8888aa;--accent: #e94560;--board-size: min(85vw, 85vh - 200px, 450px)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}#app{display:flex;flex-direction:column;align-items:center;min-height:100dvh;padding:12px;gap:16px}#header{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:450px}#header h1{font-size:1.6rem;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,#e94560,#4fc3f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#score-display{display:flex;gap:24px}.score-item{display:flex;flex-direction:column;align-items:center;background:var(--bg-light);padding:6px 20px;border-radius:8px;min-width:90px}.score-label{font-size:.65rem;font-weight:700;color:var(--text-dim);letter-spacing:2px}#score-value,#best-value{font-size:1.3rem;font-weight:800}#score-value{color:var(--accent)}#board-container{display:flex;justify-content:center;align-items:center}#board{display:grid;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);width:var(--board-size);height:var(--board-size);background:var(--board-bg);border-radius:8px;overflow:hidden;border:2px solid var(--box-border);gap:1px}.cell{background:var(--cell-bg);border:1px solid transparent;transition:background-color .15s ease,transform .15s ease;border-radius:2px;position:relative}.cell.box-top{border-top:1.5px solid var(--box-border)}.cell.box-left{border-left:1.5px solid var(--box-border)}.cell.box-bottom{border-bottom:1.5px solid var(--box-border)}.cell.box-right{border-right:1.5px solid var(--box-border)}.cell.occupied{border-radius:3px;box-shadow:inset 0 -2px 4px #0000004d,inset 0 1px 2px #ffffff26}.cell.highlight-valid{background-color:#4caf5073!important;border:1px solid rgba(76,175,80,.8);transform:scale(.92)}.cell.highlight-invalid{background-color:#f443364d!important;border:1px solid rgba(244,67,54,.6)}.cell.clearing{animation:clearPulse .4s ease-out forwards}@keyframes clearPulse{0%{transform:scale(1);filter:brightness(2.5)}50%{transform:scale(1.15);filter:brightness(3);background-color:#fff!important}to{transform:scale(0);opacity:0}}#block-queue{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px;min-height:100px}.block-slot{display:flex;justify-content:center;align-items:center;width:100px;height:100px;background:var(--bg-light);border-radius:12px;border:2px solid var(--cell-border);cursor:grab;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.block-slot.has-block:hover{border-color:var(--box-border);box-shadow:0 0 16px #4a90d94d;transform:scale(1.05)}.block-slot.has-block:active{cursor:grabbing;transform:scale(.95)}.block-slot.dragging{opacity:.3;transform:scale(.9)}.block-slot.empty-slot{border-style:dashed;opacity:.3;cursor:default}.block-preview{display:grid;gap:2px;padding:8px}.block-cell{width:18px;height:18px;border-radius:2px}.block-cell.filled{box-shadow:inset 0 -2px 3px #0000004d,inset 0 1px 1px #fff3}.drag-ghost{pointer-events:none;opacity:.7;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}.score-popup{position:fixed;font-size:1.2rem;font-weight:900;color:#ffd54f;text-shadow:0 0 8px rgba(255,213,79,.6);pointer-events:none;animation:popupFloat .8s ease-out forwards;z-index:999}@keyframes popupFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(1.3)}}#game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease}#game-over-overlay.hidden{display:none}.overlay-content{background:var(--bg-light);padding:40px 48px;border-radius:16px;text-align:center;border:2px solid var(--accent);box-shadow:0 0 40px #e945604d}.overlay-content h2{font-size:2rem;font-weight:900;letter-spacing:4px;color:var(--accent);margin-bottom:12px}.overlay-content p{font-size:1.2rem;margin-bottom:16px;color:var(--text-dim)}.overlay-content p span{color:var(--accent);font-weight:800;font-size:1.5rem}#submit-section{display:flex;gap:8px;margin-bottom:16px;justify-content:center}#player-name{background:var(--bg);border:1px solid var(--cell-border);color:var(--text);padding:8px 12px;border-radius:6px;font-size:.95rem;width:160px;outline:none}#player-name:focus{border-color:var(--box-border)}#submit-btn{background:var(--box-border);color:#fff;border:none;padding:8px 16px;font-size:.9rem;font-weight:700;border-radius:6px;cursor:pointer;transition:opacity .2s}#submit-btn:disabled{opacity:.5;cursor:default}#leaderboard{margin:12px 0;max-height:240px;overflow-y:auto}.lb-table{width:100%;border-collapse:collapse;font-size:.85rem}.lb-table th{color:var(--text-dim);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-bottom:1px solid var(--cell-border)}.lb-table td{padding:6px 8px;border-bottom:1px solid rgba(42,42,94,.3)}.lb-rank{color:var(--text-dim);width:30px}.lb-name{text-align:left}.lb-score{color:var(--accent);font-weight:700}.lb-verified{color:#81c784;font-size:.9rem;width:20px}.lb-empty,.lb-error{color:var(--text-dim);font-size:.85rem;padding:12px}#restart-btn{background:var(--accent);color:#fff;border:none;padding:12px 40px;font-size:1.1rem;font-weight:700;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}#restart-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px #e9456066}#restart-btn:active{transform:scale(.98)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 480px){:root{--board-size: min(92vw, 92vw)}#app{padding:8px;gap:10px}#header h1{font-size:1.3rem}.block-slot{width:80px;height:80px}.block-cell{width:14px;height:14px}#block-queue{gap:10px;min-height:80px}}@media (min-height: 800px){#app{gap:20px;padding-top:24px}}
