.fit-main{max-width:620px;margin:24px auto;padding:0 16px}.fit-game .board-card{padding:24px}.fit-game .board-top h2{font-size:21px}.fit-tools{display:flex;gap:14px;align-items:center;margin:8px 0 12px}.fit-tools>span{font-size:11px;color:var(--muted);margin-right:auto}.fit-game .text-button{font:inherit;font-size:12px;min-height:40px}#grid{display:grid;grid-template-columns:repeat(var(--fit-width),1fr);background:#edf1df;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:400px;margin:auto}.fit-cell{aspect-ratio:1;border:1px solid #d5dccb;background:var(--piece);font:700 15px Manrope,sans-serif;color:white;cursor:pointer;position:relative}.fit-cell.occupied{border:2px solid #fffef980}.fit-cell.ghost{box-shadow:inset 0 0 0 4px #365944;background:#dceba5}.fit-cell.blocked{box-shadow:inset 0 0 0 4px #b26455;background:#f4d9d0}.fit-game button:focus-visible{outline:3px solid #c58844;outline-offset:-4px}.selection-bar{display:flex;align-items:center;gap:10px;background:#edf1df;border-radius:11px;padding:10px 12px;margin:12px 0}#selection{font-size:11px;line-height:1.5;flex:1}#selected-shape{width:38px;min-width:38px;height:38px}#selected-shape:empty{display:none}#selected-shape svg{width:100%;height:100%}.rotate-button{border:1px solid #bfc8b7;background:var(--surface);border-radius:8px;min-height:44px;padding:8px 12px;font:600 12px 'DM Sans',sans-serif;cursor:pointer}.rotate-button:disabled{opacity:.4}#tray{display:flex;gap:8px;justify-content:center}.piece{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;max-width:86px;height:100px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px;cursor:grab;touch-action:none}.piece svg{width:100%;height:65px}.piece-name{font:700 11px 'DM Sans',sans-serif;color:var(--ink)}.piece.selected{border:2px solid var(--green);background:#edf1df}.piece.placed{opacity:.45}.piece.placed:hover{opacity:.8}#status{font-size:12px;line-height:1.6;min-height:36px;margin-bottom:0}.fit-note{text-align:center;font-size:11px;color:var(--muted)}.fit-victory{background:var(--lime);padding:15px;text-align:center;border-radius:14px;margin:12px 0;animation:fit-arrive .5s ease both}.fit-victory>span{font-size:28px}.fit-victory h3{font-family:Manrope,sans-serif;font-size:26px;margin:3px 0}.fit-victory p{font-size:12px;margin:6px 0}.fit-victory:focus{outline:none}.won .fit-cell{animation:fit-ripple .65s var(--step) ease both}.fit-game .new-button{width:100%;margin-top:16px}.fit-game dialog p{font-size:13px;line-height:1.7}.fit-game dialog select{width:100%;padding:13px;border:1px solid var(--line);border-radius:9px;margin:12px 0}#grid.invalid{animation:fit-shake .25s ease}@keyframes fit-ripple{50%{filter:brightness(1.5);transform:scale(.88)}}@keyframes fit-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes fit-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(max-width:760px){.fit-main{margin:0 auto}.fit-game .board-card{padding:16px 12px}.fit-game .board-top h2{font-size:16px}.fit-tools{gap:9px}.fit-game .text-button{font-size:10px}.selection-bar{padding:8px;gap:8px}.rotate-button{padding:8px;font-size:11px}.piece{height:90px;padding:6px}.piece svg{height:57px}#tray{gap:6px}}@media(prefers-reduced-motion:reduce){.fit-victory,.won .fit-cell,#grid.invalid{animation:none}}

#grid{touch-action:none}.fit-cell{touch-action:none}.fit-cell.moving-piece{outline:2px dashed white;outline-offset:-5px}.fit-drag-ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.85;filter:drop-shadow(0 7px 10px #263e3445)}.fit-drag-ghost svg{width:100%;height:100%}.fit-drag-ghost.bad-drop{opacity:.5;filter:drop-shadow(0 0 5px #b26455)}.return-piece{display:block;margin:-5px 0 8px auto}.piece.placed{opacity:.8}.piece.placed.selected{opacity:1}

.fit-board{position:relative;max-width:400px;margin:auto}.fit-board #grid{max-width:none}#on-board-controls{position:absolute;inset:0;pointer-events:none}.board-rotate{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffffa0;background:#fffef9;color:var(--piece);font-size:29px;line-height:1;cursor:pointer;pointer-events:auto;box-shadow:0 2px 5px #263e3420;touch-action:manipulation}.board-rotate:hover{background:#edf1df}.board-rotate:focus-visible{outline:3px solid #c58844;outline-offset:2px}.board-rotate.rotation-blocked{animation:rotate-block .3s ease}@keyframes rotate-block{25%{transform:translate(-50%,-50%) rotate(-12deg)}75%{transform:translate(-50%,-50%) rotate(12deg)}}@media(prefers-reduced-motion:reduce){.board-rotate.rotation-blocked{animation:none}}

.fit-turn-preview{position:absolute;inset:0;pointer-events:none;z-index:2}.fit-turn-preview i{position:absolute;display:grid;place-items:center;background:var(--piece);border:2px solid #fffef9;border-radius:5px;font:700 15px Manrope,sans-serif;color:white;opacity:.9;animation:turn-preview .16s ease-out both}.fit-turn-preview.blocked-turn i{box-shadow:inset 0 0 0 3px #db5c48}.fit-cell.turning-piece{opacity:.22}#on-board-controls{z-index:3}.fit-cell.snap-back{animation:fit-snap-back .3s ease-out}@keyframes turn-preview{from{transform:translate(var(--from-x),var(--from-y))}to{transform:translate(0,0)}}@keyframes fit-snap-back{0%{transform:scale(.9);filter:brightness(1.4)}70%{transform:scale(1.03)}100%{transform:none;filter:none}}@media(prefers-reduced-motion:reduce){.fit-turn-preview i,.fit-cell.snap-back{animation:none}}

.fit-tools{gap:10px;flex-wrap:wrap}.fit-tools>span{white-space:nowrap}@media(max-width:760px){.fit-tools{gap:6px}.fit-game .fit-tools .text-button{font-size:10px}}