.tetro-shell{--tetro-maxh:min(46vh,25rem)}.tetro-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}.tetro-workspace>*{min-width:0}@media (min-width:640px){.tetro-shell{--tetro-maxh:min(50vh,30rem);--tetro-cellmax:4.4rem}}@media (min-width:900px){.tetro-shell{--tetro-maxh:min(58vh,32rem);--tetro-cellmax:4.6rem}.tetro-workspace{grid-template-columns:minmax(0,1fr) 17.5rem;align-items:start}}.tetro-board-wrap{position:relative;display:flex;justify-content:center;container-type:inline-size}.tetro-frame{padding:clamp(.4rem,1.6vw,.6rem);background:var(--pp-walnut);border-radius:18px;box-shadow:inset 0 2px 0 rgb(255 255 255/18%),0 6px 0 var(--pp-walnut-edge)}.tetro-grid{position:relative;display:grid;grid-template-columns:repeat(var(--w),minmax(0,1fr));width:min(calc(100cqi - 1.3rem),calc(var(--tetro-maxh) * var(--w) / var(--h)),calc(var(--w) * var(--tetro-cellmax, 3.6rem)));aspect-ratio:var(--w) /var(--h);background:var(--pp-board);border-radius:9px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.tetro-cell{border-right:1px solid var(--pp-line);border-bottom:1px solid var(--pp-line);aspect-ratio:1}.tetro-cell.is-peg{border-color:transparent;background:radial-gradient(circle at 42% 38%,#a07a57 0 18%,#7a5639 19% 30%,transparent 31%),repeating-linear-gradient(135deg,rgb(255 255 255/6%) 0 6px,transparent 6px 12px),#4a3f36;border-radius:6px;box-shadow:inset 0 2px 0 rgb(255 255 255/12%),inset 0 -3px 0 rgb(0 0 0/25%)}.tetro-mark,.tetro-placed{position:absolute;left:calc(var(--x) / var(--w) * 100%);top:calc(var(--y) / var(--h) * 100%)}.tetro-placed{z-index:4;width:calc(var(--pw) / var(--w) * 100%);height:calc(var(--ph) / var(--h) * 100%);pointer-events:none;touch-action:none;filter:drop-shadow(0 3px 0 rgb(0 0 0/16%));transition:opacity .12s ease}.tetro-placed .tetro-svg{cursor:grab}.tetro-placed.is-selected{filter:drop-shadow(0 0 .18rem var(--pp-focus)) drop-shadow(0 0 .12rem var(--pp-focus)) drop-shadow(0 3px 0 rgb(0 0 0/16%))}.tetro-placed.is-lifted{opacity:.28}@keyframes tetro-settle{0%{transform:translateY(-4px) scale(1.04)}60%{transform:translateY(1px) scale(.99)}to{transform:none}}.tetro-placed.is-settling{animation:tetro-settle .26s cubic-bezier(.22,1.15,.36,1)}.tetro-svg{display:block;width:100%;height:100%;overflow:visible}.tetro-mark{z-index:6;width:calc(100% / var(--w));height:calc(100% / var(--h));pointer-events:none;border-radius:6px}.tetro-mark.is-valid{background:rgb(47 107 85/26%);box-shadow:inset 0 0 0 3px var(--pp-cta)}.tetro-mark.is-invalid{background:rgb(192 87 63/24%);box-shadow:inset 0 0 0 3px var(--pp-brick)}.tetro-mark.is-hint{background:color-mix(in srgb,var(--pp-mustard) 30%,transparent);box-shadow:inset 0 0 0 3px var(--pp-mustard);animation:puzzle-hint-pulse 1.2s ease-in-out infinite}.tetro-complete{z-index:15}.tetro-tray{display:flex;flex-direction:column;padding:.7rem;background:var(--pp-bg);border-radius:var(--pp-r)}.tetro-tray__pieces{--tc:clamp(0.85rem,4vw,1.15rem);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:3.5rem}@media (min-width:900px){.tetro-tray__pieces{--tc:1.2rem}}.tetro-tray-piece{display:grid;place-items:center;min-width:3.25rem;min-height:3.25rem;padding:.45rem;background:var(--pp-paper);border:1.5px solid var(--pp-line);border-radius:12px;box-shadow:0 2px 0 var(--pp-line);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform var(--pp-ease),box-shadow var(--pp-ease)}.tetro-tray-piece .tetro-svg{width:calc(var(--tc) * var(--pw));height:calc(var(--tc) * var(--ph))}.tetro-tray-piece:hover{transform:translateY(-1px)}.tetro-tray-piece.is-selected{border-color:var(--pp-focus);box-shadow:0 0 0 3px var(--pp-focus),0 2px 0 var(--pp-line);background:#fff}.tetro-tray-piece:focus-visible{outline:3px solid var(--pp-focus);outline-offset:2px}.tetro-tray-piece.is-lifted{opacity:.35}.tetro-tray__empty{color:var(--pp-muted);font-size:.85rem;font-weight:700}.tetro-tray__help{margin-top:.6rem;color:var(--pp-muted);font-size:.75rem;line-height:1.4}.tetro-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin-top:.85rem}.tetro-actions .pp-btn{min-height:46px;padding:0 .35rem;font-size:.9rem}@media (min-width:640px){.tetro-actions .pp-btn{font-size:1rem}}.tetro-ghost{position:fixed;z-index:100;pointer-events:none;filter:drop-shadow(0 .7rem .6rem rgb(30 24 18/30%))}.tetro-toast{bottom:4.6rem}@media (prefers-reduced-motion:reduce){.tetro-mark.is-hint,.tetro-placed.is-settling{animation:none}}.hexo-shell .tetro-tray__pieces{--tc:clamp(0.72rem,3.4vw,1rem);gap:.4rem}.hexo-shell .tetro-tray-piece{min-width:3rem;min-height:3rem;padding:.38rem}@media (min-width:900px){.hexo-shell .tetro-workspace{grid-template-columns:minmax(0,1fr) 19rem}.hexo-shell .tetro-tray__pieces{--tc:0.95rem}}.kids-mini-shell{--tetro-maxh:min(34vh,18rem)}@media (min-width:640px){.kids-mini-shell{--tetro-maxh:min(40vh,22rem);--tetro-cellmax:4.2rem}}