.tetris-game{color:#fff;width:100%;max-width:960px}.tetris-board,.tetris-placement-fx,.tetris-preview-piece,.tetris-instruction-board{direction:ltr}.tetris-game--focus{z-index:40;background:#f5f6f7;align-content:center;max-width:none;padding:24px;display:grid;position:fixed;inset:0;overflow:auto}.tetris-stage{--preview-cell:25px;touch-action:none;-webkit-user-select:none;user-select:none;background:url(/images/tetris-blocks.webp) 50%/100% no-repeat;grid-template-columns:180px minmax(0,340px) 180px;justify-content:center;align-items:stretch;gap:34px;width:100%;max-width:960px;margin:0 auto;padding:20px 0;display:grid;position:relative}.tetris-stage--minimal{grid-template-columns:minmax(0,300px)}.tetris-side{flex-direction:column;gap:22px;min-width:0;padding:30px 0;display:flex}.tetris-side--left{justify-content:space-between}.tetris-panel{background:linear-gradient(#55595a 0%,#8a8c8d 44%,#dedfe0 75%,#909394 100%);border:4px solid #bbbfc0;border-radius:25px;padding:10px;box-shadow:0 3px #fff,0 7px #a1a4a5,inset 0 0 0 3px #ededed,inset 0 0 8px 5px #424647,0 8px 12px #0002}.tetris-panel-heading{text-align:center;overflow-wrap:anywhere;color:#fff;text-shadow:0 2px 2px #000b;margin:4px 0 9px;font-size:24px;font-weight:900;line-height:1.1;display:block}.tetris-panel-screen{background:#343839;border:2px solid #6a6d6d;border-radius:9px;box-shadow:inset 0 2px 5px #0005}.tetris-hold{cursor:pointer;transition:filter .15s}.tetris-hold:hover:not(:disabled){filter:brightness(1.1)}.tetris-hold:disabled{cursor:default}.tetris-hold:focus-visible,.tetris-control:focus-visible,.tetris-menu-button:focus-visible,.tetris-level-entry:focus-visible{outline-offset:4px;outline:3px solid #00b8e5}.tetris-preview{place-items:center;min-height:98px;padding:14px 3px;display:grid}.tetris-preview-piece{gap:2px;display:grid}.tetris-preview-cell{width:var(--preview-cell);height:var(--preview-cell);border-radius:3px}.tetris-next-list{padding:10px 0}.tetris-next .tetris-preview{min-height:95px}.tetris-stat{margin-bottom:14px}.tetris-stat:last-child{margin-bottom:2px}.tetris-level-progress{text-align:center;color:#fff;text-shadow:0 1px 2px #000;margin:8px 0 2px;font-size:11px;line-height:1.4}.tetris-stat-value{color:#fff;text-align:center;background:#35393a;border-radius:6px;justify-content:center;align-items:center;min-height:44px;padding:3px 4px;font:26px/1.3 ui-monospace,monospace;display:flex;box-shadow:inset 0 1px 4px #0006}.tetris-level-entry{cursor:pointer;text-align-last:center;width:100%;min-height:44px}.tetris-board-frame{background:linear-gradient(110deg,#eceeee,#777c7d 8%,#e9eaea 15%,#b4b7b8 85%,#565b5d 95%,#e4e6e6);border:4px solid #bfc1c1;border-radius:26px;padding:13px;position:relative;box-shadow:0 5px #fafafa,0 8px #95999a,inset 0 0 0 3px #f8f8f8,0 10px 12px #0002}.tetris-board{aspect-ratio:1/2;background:#303233;border:3px solid #151718;border-radius:5px;grid-template-rows:repeat(20,minmax(0,1fr));grid-template-columns:repeat(10,minmax(0,1fr));gap:1px;padding:3px;display:grid;overflow:hidden}.tetris-board-area{position:relative}.tetris-cell--active{filter:brightness(1.14)}.tetris-placement-fx{pointer-events:none;grid-template-rows:repeat(20,minmax(0,1fr));grid-template-columns:repeat(10,minmax(0,1fr));gap:1px;display:grid;position:absolute;inset:6px;overflow:hidden}.tetris-impact{z-index:2;background:#fff9;border:2px solid #fff;border-radius:3px;animation:.3s ease-out both tetris-impact;box-shadow:0 0 12px #91eaff}.tetris-drop-trail{z-index:1;transform-origin:bottom;background:linear-gradient(#0000,#75e6ff66 70%,#fff9);animation:.2s ease-out both tetris-drop-trail}.tetris-clear-line{z-index:3;background:linear-gradient(90deg,#0000,#7ee8ff,#fff,#7ee8ff,#0000);animation:.4s ease-out both tetris-clear-line;position:relative;box-shadow:0 0 18px #64dfff}.tetris-clear-spark{background:#fff;border-radius:50%;width:4px;height:4px;animation:.45s ease-out both tetris-clear-spark;position:absolute;top:50%;box-shadow:0 0 6px #89e9ff}@keyframes tetris-impact{0%{opacity:.85;transform:translateY(-1.5px)scale(.9)}35%{opacity:.6;transform:translateY(1px)scale(1.02)}to{opacity:0;transform:translateY(0)scale(1.2)}}@keyframes tetris-drop-trail{0%{opacity:.75;transform:scaleY(1)}to{opacity:0;transform:scaleY(.05)}}@keyframes tetris-clear-line{0%{opacity:0;transform:scaleX(.1)}25%{opacity:.9;transform:scaleX(1)}to{opacity:0;transform:scaleX(1)}}@keyframes tetris-clear-spark{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--spark-x),var(--spark-y))scale(0)}}.tetris-cell{border:1px solid #16191a;border-radius:2px;min-width:0;min-height:0}.tetris-cell:not(.tetris-cell--filled){background-color:#090b0c}.tetris-cell--filled{border:1px solid #ffffff85;box-shadow:inset 0 3px 2px #ffffffc2,inset 3px 0 3px #fff5,inset -3px -3px 3px #0005}.tetris-cell--ghost{border:2px solid #ba70d0;box-shadow:inset 0 0 0 1px #080808}.tetris-board-shade{background:#0006;border-radius:5px;position:absolute;inset:16px}.tetris-control{touch-action:none;-webkit-user-select:none;user-select:none;color:#fff;cursor:pointer;text-shadow:0 1px 2px #000;background:linear-gradient(#eceeef 0%,#b2b4b5 45%,#777b7d 48%,#919597 100%);border:2px solid #aeb0b1;border-radius:12px;flex:1;justify-content:center;align-items:center;min-width:0;height:44px;display:inline-flex;box-shadow:0 2px #555b5d,inset 0 0 0 1px #fff8}.tetris-control:hover{filter:brightness(1.12)}.tetris-control:active{transform:translateY(2px);box-shadow:inset 0 1px 5px #0005}.tetris-utility-controls{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;display:grid}.tetris-keyboard-help{text-align:center;color:#636b70;margin:10px auto 0;font-size:12px}.tetris-mobile-utilities,.tetris-touch-help{display:none}.tetris-dialog-backdrop{z-index:60;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#e9edef80;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.tetris-dialog{color:#fff;background:#454748;border:7px solid #fff;width:min(100%,330px);max-height:calc(100dvh - 40px);padding:35px 30px;position:relative;overflow-y:auto;box-shadow:0 0 0 5px #85898a,inset 0 0 0 3px #929697,inset 0 0 14px #0006,0 16px 45px #0004}.tetris-dialog-title{text-align:center;color:#fff;letter-spacing:.02em;margin:4px 0 30px;font-size:30px;font-weight:900}.tetris-menu{gap:22px;display:grid}.tetris-level-setting{text-align:center;gap:10px;font-size:16px;font-weight:700;display:grid}.tetris-level-setting select{color:#fff;background:#35393a;border:2px solid #dfe0e0;border-radius:8px;width:100%;min-height:44px;padding:8px 12px;font-size:16px}.tetris-option-help{text-align:center;color:#e5e7e8;margin:-10px 0 0;font-size:12px;line-height:1.5}.tetris-menu-button{outline-offset:5px;color:#fff;text-shadow:0 2px 1px #666;text-align:center;cursor:pointer;background:linear-gradient(#e8e9e9,#b6b8b9 47%,#767b7d 50%,#929698);border:2px solid #dfe0e0;border-radius:11px;outline:2px solid #737778;justify-content:center;align-items:center;gap:8px;width:100%;padding:9px 8px;font-size:21px;font-weight:900;line-height:1.2;display:flex;box-shadow:inset 0 1px 2px #fff}.tetris-menu-button:hover{filter:brightness(1.08)}.tetris-menu-button,.tetris-dialog-title,.tetris-instructions h3{overflow-wrap:anywhere}.tetris-menu-button--green{text-shadow:0 2px 1px #438b30;background:linear-gradient(#a1ff79,#59ed31 47%,#37c613 50%,#52d32d)}.tetris-dialog--help{width:min(100%,820px);padding:24px}.tetris-instructions{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.tetris-instructions>div{border:2px solid #fff;border-radius:14px;padding:16px 13px;box-shadow:0 0 0 3px #26292a}.tetris-instructions h3{text-shadow:0 2px 1px #000;align-items:center;gap:8px;margin-bottom:24px;font-size:23px;font-weight:900;display:flex}.tetris-instructions h3 span{background:#a1ef1b;border:3px solid #fff;border-radius:8px;place-items:center;min-width:40px;height:46px;font-size:35px;display:grid}.tetris-instructions>div:nth-child(2) h3 span{background:#0bd6f1}.tetris-instructions>div:nth-child(3) h3 span{background:#f1c900}.tetris-instructions svg{margin:0 8px 15px 0;display:inline-block}.tetris-instructions p{font-size:15px;line-height:1.5}.tetris-instruction-board{aspect-ratio:4/3;background:#303233;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(8,1fr);gap:1px;margin:0 -10px 18px;padding:2px;display:grid}.tetris-help-rules{margin:24px 0 0;padding-inline-start:22px;font-size:14px;line-height:1.5;list-style:outside}.tetris-help-rules li+li{margin-top:8px}.tetris-help-done{width:min(100%,220px);margin:30px auto 0}.tetris-dialog-close{width:30px;height:30px;position:absolute;top:12px;right:12px}.tetris-gameover-score{text-align:center;color:#e5e7e8;margin:0 0 30px}@media (max-width:767px){.tetris-game{padding-bottom:calc(70px + env(safe-area-inset-bottom))}.tetris-stage{--preview-cell:14px;grid-template-columns:90px minmax(0,280px) 90px;gap:12px;padding:8px 0}.tetris-side{gap:16px;padding:20px 0}.tetris-panel{border-width:3px;border-radius:16px;padding:6px}.tetris-panel-heading{margin:4px 0 7px;font-size:15px}.tetris-preview{min-height:62px;padding:8px 1px}.tetris-next .tetris-preview{min-height:54px}.tetris-stat{margin-bottom:9px}.tetris-stat-value{font-size:18px}.tetris-board-frame{border-width:3px;border-radius:18px;padding:8px}.tetris-side .tetris-utility-controls{display:none}.tetris-mobile-utilities{z-index:40;padding:10px max(12px,calc((100vw - 300px)/2))calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#44494bef;display:block;position:fixed;bottom:0;left:0;right:0}.tetris-mobile-utilities .tetris-utility-controls{grid-template-columns:repeat(3,1fr)}.tetris-control{border-radius:9px;height:44px}.tetris-control svg{width:17px;height:17px}.tetris-keyboard-help{display:none}.tetris-touch-help{text-align:center;color:#636b70;margin:12px auto 0;font-size:12px;line-height:1.5;display:block}.tetris-game--focus{align-content:start;padding:72px 12px 24px}.tetris-dialog--help{padding:20px 14px}.tetris-dialog-title{font-size:24px}.tetris-dialog.tetris-dialog--options{padding:20px}.tetris-dialog.tetris-dialog--gameover{border-width:5px;border-radius:20px;padding:56px 20px 24px}.tetris-dialog--gameover .tetris-dialog-title{margin:0 0 20px;font-size:26px}.tetris-dialog--gameover .tetris-gameover-score{margin-bottom:24px}.tetris-dialog--gameover .tetris-menu-button{min-height:48px;padding:10px 12px;font-size:18px}.tetris-dialog--gameover .tetris-dialog-close{width:44px;height:44px;top:10px;right:10px}.tetris-instructions{grid-template-columns:1fr}.tetris-instructions h3{margin-bottom:10px}.tetris-instructions svg,.tetris-instruction-board{display:none}}@media (max-width:480px){.tetris-stage{--preview-cell:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;max-width:340px}.tetris-stage--minimal{grid-template-columns:1fr}.tetris-side--left{display:contents}.tetris-hold{grid-area:1/1}.tetris-side--right{grid-area:1/2;padding:0}.tetris-next{--preview-cell:8px;height:100%}.tetris-next-list{justify-content:space-evenly;align-items:center;padding:0;display:flex}.tetris-stats{grid-area:3/1/auto/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.tetris-stats .tetris-stat{min-width:0;margin:0}.tetris-level-progress{grid-column:1/-1;margin:0 0 2px}.tetris-panel{border-radius:13px;padding:4px}.tetris-panel-heading{font-size:12px}.tetris-stat-value{font-size:16px}.tetris-preview{min-height:48px}.tetris-next .tetris-preview{min-height:41px}.tetris-preview-piece{gap:1px}.tetris-board-frame{border-width:2px;border-radius:14px;grid-area:2/1/auto/-1;justify-self:center;width:100%;max-width:clamp(200px,50svh - 170px,280px);padding:6px}.tetris-board{border-width:2px;padding:1px}.tetris-placement-fx{inset:3px}.tetris-cell--filled{box-shadow:inset 0 2px 1px #ffffffb3,inset -2px -2px 2px #0005}}@media (prefers-reduced-motion:reduce){.tetris-drop-trail,.tetris-clear-spark{display:none}.tetris-impact,.tetris-clear-line{animation:.15s linear both tetris-impact-reduced}}@keyframes tetris-impact-reduced{0%{opacity:.35}to{opacity:0}}
