:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-hover:#475569;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#6366f1;--accent-hover:#818cf8;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--star-color:#fbbf24;--circle-color:#3b82f6;--void-color:#991b1b;--overlap-color:#7c3aed;--crackable-color:#f59e0b;--cell-gap:3px;--radius:8px;--radius-sm:4px;--transition:.15s ease}.app{flex-direction:column;gap:16px;max-width:480px;min-height:100vh;margin:0 auto;padding:12px 16px 32px;display:flex}.header{text-align:center;padding:8px 0}.header h1{letter-spacing:.15em;background:linear-gradient(135deg,#818cf8,#6366f1,#4f46e5);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:800}.header .subtitle{color:var(--text-muted);margin-top:2px;font-size:.8rem}.difficulty-tabs{background:var(--bg-secondary);border-radius:var(--radius);gap:4px;padding:4px;display:flex}.diff-tab{color:var(--text-secondary);cursor:pointer;transition:all var(--transition);text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;border-radius:6px;flex:1;padding:10px 8px;font-size:.85rem;font-weight:600}.diff-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.diff-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px #6366f166}.grid-container{width:100%;max-width:400px;margin:0 auto;position:relative}.game-grid{gap:var(--cell-gap);aspect-ratio:1;background:var(--bg-tertiary);border-radius:var(--radius);padding:var(--cell-gap);touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(6,1fr);display:grid}.grid-cell{border-radius:var(--radius-sm);background:var(--bg-secondary);transition:background-color var(--transition), transform var(--transition);cursor:pointer;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:relative;overflow:hidden}.grid-cell:hover{transform:scale(1.04)}.grid-cell .cell-icon{z-index:2;pointer-events:none;filter:drop-shadow(0 1px 2px #00000080);font-size:1.1rem;position:relative}.grid-cell.cell-void{background:var(--void-color)!important}.grid-cell.cell-void:after{content:"✕";color:#ffffff4d;z-index:1;font-size:1.4rem;font-weight:900;position:absolute}.grid-cell.cell-anchor:before{content:"";border:2px dashed var(--accent);z-index:1;opacity:.6;border-radius:3px;position:absolute;inset:2px}.grid-cell.covered{box-shadow:inset 0 0 0 1px #ffffff26}.grid-cell.overlapped{animation:1.5s ease-in-out infinite pulse-overlap;background:var(--overlap-color)!important}@keyframes pulse-overlap{0%,to{box-shadow:inset 0 0 0 1px #ffffff26}50%{box-shadow:inset 0 0 8px #7c3aed99}}.grid-cell.crackled .cell-icon{opacity:.3;filter:grayscale()}.grid-cell.drop-valid{outline:2px solid var(--success);outline-offset:-2px;background:#22c55e26!important}.grid-cell.drop-invalid{outline:2px solid var(--danger);outline-offset:-2px;background:#ef44441a!important}.score-panel{background:var(--bg-secondary);border-radius:var(--radius);flex-direction:column;gap:8px;padding:14px 16px;display:flex}.score-total{justify-content:space-between;align-items:baseline;display:flex}.score-total .label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:600}.score-total .value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:1.8rem;font-weight:800}.score-breakdown{grid-template-columns:repeat(2,1fr);gap:4px 12px;display:grid}.score-item{justify-content:space-between;padding:2px 0;font-size:.75rem;display:flex}.score-item .label{color:var(--text-muted)}.score-item .value{font-variant-numeric:tabular-nums;font-weight:600}.score-item .value.positive{color:var(--success)}.score-item .value.negative{color:var(--danger)}.inventory-section{background:var(--bg-secondary);border-radius:var(--radius);padding:12px}.inventory-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-size:.75rem;font-weight:600}.inventory-grid{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.inventory-tile{background:var(--bg-primary);cursor:grab;transition:all var(--transition);touch-action:none;border:2px solid #0000;border-radius:6px;padding:6px;display:grid;position:relative}.inventory-tile:active{cursor:grabbing}.inventory-tile:hover{border-color:var(--bg-hover);transform:translateY(-2px)}.inventory-tile.selected{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 0 12px #6366f166}.inventory-tile.placed{opacity:.25;pointer-events:none;transform:scale(.9)}.inventory-tile .tile-block{transition:background-color var(--transition);border-radius:2px}.inventory-tile .tile-name{color:var(--text-muted);white-space:nowrap;font-size:.6rem;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}.inventory-tile .fixed-badge{background:var(--warning);color:#000;border-radius:3px;padding:1px 4px;font-size:.55rem;font-weight:700;position:absolute;top:-6px;right:-6px}.controls{flex-wrap:wrap;gap:8px;display:flex}.btn{border-radius:var(--radius);cursor:pointer;min-width:80px;transition:all var(--transition);text-transform:uppercase;letter-spacing:.05em;border:none;flex:1;padding:12px 16px;font-size:.85rem;font-weight:600}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 4px 12px #6366f166}.btn-danger{color:var(--danger);background:#ef444426}.btn-danger:hover:not(:disabled){background:#ef444440}.btn-success{color:var(--success);background:#22c55e26}.btn-success:hover:not(:disabled){background:#22c55e40;box-shadow:0 4px 12px #22c55e4d}.drag-ghost{pointer-events:none;z-index:1000;opacity:.85;filter:drop-shadow(0 4px 12px #00000080);gap:2px;display:grid;position:fixed;transform:translate(-50%,-50%)}.drag-ghost .ghost-block{border-radius:3px;box-shadow:inset 0 0 0 1px #fff3}.result-overlay{z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.result-card{background:var(--bg-secondary);text-align:center;border-radius:16px;width:90%;max-width:340px;padding:32px 28px;box-shadow:0 16px 48px #0006}.result-card h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;font-size:1.1rem}.result-card .final-score{color:var(--text-primary);margin-bottom:16px;font-size:3rem;font-weight:800}.result-card .result-status{color:var(--success);margin-bottom:20px;font-size:.85rem}.result-card .btn{width:100%}.loading{min-height:300px;color:var(--text-muted);justify-content:center;align-items:center;font-size:.9rem;display:flex}.loading:after{content:"";border:2px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;margin-left:10px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width:500px){.app{padding-top:24px}.header h1{font-size:2rem}.grid-cell{font-size:1.4rem}}