.shape-main{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem 1rem 3rem;min-height:calc(100dvh - var(--nav-height, 56px))}.shape-score{font-size:1.4rem;font-weight:700;background:var(--color-surface-overlay);border:1px solid var(--color-border-subtle);border-radius:.5rem;padding:.75rem 2rem;text-align:center;min-width:160px}.shape-score__label{font-weight:600;opacity:.7;margin-right:.4rem}.shape-grid-wrap{display:flex;justify-content:center}.shape-grid{--cell-size: 50px;display:grid;grid-template-columns:repeat(6,var(--cell-size));grid-template-rows:repeat(6,var(--cell-size));gap:2px;padding:6px;background:var(--color-surface-raised);border:2px solid var(--color-border-default);border-radius:8px;touch-action:none;-webkit-user-select:none;user-select:none}.shape-grid.game-over-grid{opacity:.6;pointer-events:none}.shape-cell{width:var(--cell-size, 50px);height:var(--cell-size, 50px);border:1px solid var(--color-border-subtle);border-radius:2px;background:transparent;transition:background .15s,box-shadow .15s;position:relative}.shape-cell.filled{border-color:#00000026;animation:dropIn .25s ease-out}.shape-cell.preview-valid{background:#00dc0059!important;box-shadow:inset 0 0 0 2px #00c800e6}.shape-cell.preview-invalid{background:#dc000040!important;box-shadow:inset 0 0 0 2px #c80000e6}.shape-cell.clearing{animation:shrinkOut .45s ease-out forwards}@keyframes dropIn{0%{transform:scale(1.2);opacity:.6}to{transform:scale(1);opacity:1}}@keyframes shrinkOut{0%{transform:scale(1);opacity:1}60%{transform:scale(.5);opacity:.6}to{transform:scale(0);opacity:0}}.shape-sidebar{display:flex;flex-direction:column;gap:1.25rem;align-items:stretch;min-width:160px}.shape-pieces{display:flex;flex-direction:column;gap:1.25rem;align-items:stretch}.shape-actions{display:flex;flex-direction:column;gap:.5rem}.shape-piece-slot{display:flex;flex-direction:column;align-items:center;gap:.5rem}.shape-piece-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.6}.shape-piece-display{display:flex;justify-content:center;align-items:flex-start;padding:.75rem;background:var(--color-surface-overlay);border:2px dashed var(--color-border-subtle);border-radius:8px;min-height:100px;width:100%;box-sizing:border-box}.shape-piece-display.next-piece{opacity:.55}.piece-grid{display:inline-grid;gap:1.5px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.piece-grid.dragging{cursor:grabbing;opacity:.4}.piece-cell{width:30px;height:30px;border-radius:2px}.piece-cell.filled{border:1px solid rgba(0,0,0,.15)}.piece-cell.empty{background:transparent!important;border:none!important}.ref-cell{position:relative}.cell-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:#fff;border-radius:50%;box-shadow:0 0 2px #00000080;pointer-events:none}#shape-drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform-origin:top left}.shape-gameover-panel{display:flex;flex-direction:column;gap:1rem}.shape-gameover-panel h2{font-size:1.2rem;font-weight:700;margin:0;color:var(--color-status-error, #ef4444)}.shape-gameover-panel__score{font-size:2rem;font-weight:800;color:var(--game-accent, #f97316);line-height:1}.shape-gameover-panel__score-label{font-size:.75rem;opacity:.55;text-transform:uppercase;letter-spacing:.05em}.shape-gameover-panel__stuck{padding:.75rem;background:var(--color-surface-overlay);border:1px solid var(--color-border-subtle);border-radius:8px}.shape-gameover-panel__stuck-label{font-size:.75rem;opacity:.6;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.shape-gameover-panel__actions{display:flex;flex-direction:column;gap:.5rem}@media (min-width: 640px){.shape-grid{--cell-size: 54px}}@media (max-width: 480px){.shape-grid{--cell-size: 44px}.piece-cell{width:26px;height:26px}}@media (min-width: 760px){.shape-main{flex-direction:row;align-items:flex-start;justify-content:center;gap:2.5rem;padding-top:2rem}.shape-board{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.shape-sidebar{padding-top:.5rem;min-width:180px;max-width:200px}}.shape-hint{font-size:.75rem;color:var(--color-text-secondary);text-align:center;opacity:.85;max-width:320px;line-height:1.4;margin-top:.75rem}.cell-dot-indicator{display:inline-block;width:6px;height:6px;background-color:#fff;border-radius:50%;box-shadow:0 0 2px #00000080;vertical-align:middle;margin:0 2px}