:root{--tetris-cols:20;--tetris-rows:20;--tetris-block:6px;--tetris-gap:2px}.tetris-wrapper{color:currentColor;pointer-events:none;place-items:center;min-height:100vh;display:grid;position:fixed;inset:0}.tetris-container{flex-direction:column;align-items:center;gap:8px;display:flex}.tetris-game-area{flex-direction:column;align-items:flex-start;gap:4px;display:flex;position:relative}
.tetris-board{width:calc(var(--tetris-cols) * (var(--tetris-block) + var(--tetris-gap)) - var(--tetris-gap));height:calc(var(--tetris-rows) * (var(--tetris-block) + var(--tetris-gap)) - var(--tetris-gap));grid-template-columns:repeat(var(--tetris-cols), var(--tetris-block));grid-template-rows:repeat(var(--tetris-rows), var(--tetris-block));gap:var(--tetris-gap);-webkit-user-select:none;user-select:none;touch-action:manipulation;image-rendering:pixelated;image-rendering:crisp-edges;background:0 0;border:none;display:grid;position:relative;overflow:visible}.tetris-board:focus{outline:none}.tetris-cell{width:var(--tetris-block);height:var(--tetris-block);box-sizing:border-box;background:#fff0;border:1px solid #fff0;border-radius:0;position:relative}.tetris-cell.filled,.tetris-cell.active{background:0 0;border-color:currentColor}.tetris-cell.locked{background:#fff3;border-color:#fff3}.tetris-cell.locked:hover{background:#ffffff4d;border-color:#ffffff4d}.tetris-cell.ghost{opacity:.3;background:0 0;border-color:currentColor}.tetris-cell.physics{z-index:10;position:absolute;top:0;left:0}
.tetris-controls{pointer-events:initial;justify-content:space-between;align-items:center;gap:12px;width:200px;margin:0;display:flex;position:fixed;bottom:140px}.tetris-controls .arrows{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:".up.""left.right"".drop.";gap:1px;display:grid}.tetris-controls .arrows .up{grid-area:up}.tetris-controls .arrows .left{grid-area:left}.tetris-controls .arrows .right{grid-area:right}.tetris-controls .arrows .drop{grid-area:drop}.tetris-controls .rotations{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);grid-template-areas:"rotate-left."".rotate-right";gap:1px;display:grid}.tetris-controls .rotations .top-left{grid-area:rotate-left}.tetris-controls .rotations .bottom-right{grid-area:rotate-right}.tetris-controls .tetris-btn{text-align:center;border:1px solid var(--color-text-4);background-color:var(--color-text-4);text-transform:uppercase;border-radius:4px;justify-content:center;align-items:center;width:22px;height:20px;font-family:inherit;font-size:8px;font-weight:600;line-height:1;display:flex}.tetris-controls .tetris-btn:hover{opacity:.6}.tetris-controls .tetris-btn:active{opacity:.4}.tetris-controls .tetris-btn:focus-visible{outline-offset:1px;outline:1px dotted}
.tetris-highscore{background:0 0;border:none;width:100%;max-width:200px;margin-top:8px;padding:0;position:fixed;bottom:140px;right:40px}.tetris-highscore-list{flex-direction:column;gap:2px;font-family:monospace;font-size:8px;display:flex}.tetris-highscore-item{opacity:.8;border-bottom:none;justify-content:space-between;padding:2px 0;display:flex}
.tetris-hud{pointer-events:initial;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;display:flex}.tetris-stats{align-items:center;gap:18px;display:flex}.tetris-stats:before{content:"";background-color:var(--color-text-4);border-radius:20px;width:40px;height:2px;margin-left:10px;display:flex}.tetris-stats var{color:var(--color-text-3);font-family:var(--font-t26);text-transform:uppercase;flex-direction:row;align-items:center;gap:1ch;font-size:10px;display:flex}.tetris-stats var b{color:var(--color-text-2)}.tetris-buttons{font-family:var(--font-t26);pointer-events:initial;border-radius:800px;align-items:center;gap:8px;display:flex}.tetris-buttons button{border-radius:20px;justify-content:center;align-items:center;padding:4px 8px;display:flex}.tetris-buttons button.tetris-pp{text-transform:uppercase;font-size:8px;font-weight:600}.tetris-panels{align-items:center;gap:18px;display:flex}.tetris-panels:after{content:"";background-color:var(--color-text-4);border-radius:20px;width:40px;height:1px;margin-right:10px;display:flex}.tetris-panels button{color:var(--color-text-2);font-size:10px;font-family:var(--font-t26);text-transform:uppercase;border-radius:20px;justify-content:center;align-items:center;gap:2ch;padding:4px 8px;display:flex}.tetris-panels button span{color:var(--color-text-3);font-size:12px}.tetris-panels button svg{color:var(--color-text-1)}
.tetris-overlay{text-align:center;pointer-events:initial;width:100%;margin-top:20px;display:none;position:absolute;top:100%}.tetris-overlay h2{font-family:var(--font-t26);text-transform:uppercase;color:var(--color-text-3)}.tetris-overlay:before{content:"";border:1px solid var(--color-text-3);pointer-events:none;opacity:.2;border-bottom:0;border-top-left-radius:24px;border-top-right-radius:24px;transition:all .426s cubic-bezier(.075,.82,.165,1);display:flex;position:absolute;inset:-20px;-webkit-mask-image:linear-gradient(#000,#0000);mask-image:linear-gradient(#000,#0000)}.tetris-overlay.show{display:block}.tetris-overlay-box{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.tetris-overlay-box button{text-align:center;border:1px solid var(--color-text-4);background-color:var(--color-text-4);font-family:var(--font-t26);text-transform:uppercase;border-radius:40px;justify-content:center;align-items:center;width:max-content;padding:2ex 2ch;font-size:8px;font-weight:600;line-height:1;display:flex}
.tetris-preview{flex-direction:column;justify-content:center;align-items:center;gap:4px;height:100%;display:flex;position:absolute;top:0;bottom:0;right:-100%}.tetris-preview-list{flex-direction:column;gap:0;display:flex}.tetris-preview-container{width:calc(4 * (var(--tetris-block) + var(--tetris-gap)) - var(--tetris-gap));height:calc(4 * (var(--tetris-block) + var(--tetris-gap)) - var(--tetris-gap));background:0 0;position:relative}.tetris-preview-shape{gap:var(--tetris-gap);display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tetris-preview-cell{width:calc(var(--tetris-block) / 2);height:calc(var(--tetris-block) / 2);box-sizing:border-box;border:1px solid #0000}.tetris-preview-cell.filled{opacity:.2;background:currentColor;border-color:#0000}