/* Vertical playfield stays proportionate inside the platform game window. */
.game-stage .tetris-player{display:flex;flex-direction:column;height:100%;min-height:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 20%,#142238,#0e1422 75%);color:#edf5ff;position:relative;isolation:isolate;direction:ltr}
.tt-top{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:7px 18px;border-bottom:1px solid #28334a;background:#101725;flex-shrink:0}
.tt-name{display:flex;align-items:center;gap:8px;font-size:14px;letter-spacing:2px}.tt-name i{width:6px;height:6px;background:#7ed9d1;box-shadow:0 0 10px #7ed9d166;border-radius:50%}.tt-menu{display:flex;gap:7px}
.tt-menu-button,.tt-hold-button{display:grid;place-items:center;width:29px;height:27px;background:#223046;border:1px solid #35455e;border-radius:7px;color:#eac46e;font-size:15px;line-height:1}
.tt-menu-button:hover,.tt-hold-button:hover{background:#2d405b}.tetris-player button:focus-visible{outline:2px solid #eac46e;outline-offset:2px}
.tt-body{display:grid;grid-template-columns:minmax(58px,1fr) minmax(0,2fr) minmax(58px,1fr);gap:18px;align-items:stretch;flex:1;min-height:0;width:min(850px,100%);padding:14px 20px;margin:auto}
.tt-stats,.tt-panels{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}.tt-stat{padding:10px 12px;border:1px solid #283a51;border-radius:9px;background:#172338aa;min-width:0;overflow:hidden}
.tt-stat>span,.tt-preview>span{display:block;color:#98abc6;font-size:10px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}.tt-stat>b{display:block;color:#eaf4ff;font-size:clamp(15px,2vw,27px);margin-top:4px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.tt-stat:first-child>b{color:#eac46e}
.tt-board-area{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.tt-board{position:relative;aspect-ratio:1/2;flex-shrink:0;box-shadow:0 0 0 1px #3e5a78,0 10px 35px #0006;border-radius:3px;overflow:hidden}
.tt-board>.tt-canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;background:#0a101b}
.tt-preview{display:flex;flex-direction:column;align-items:center;background:#14203588;border:1px solid #283a51;border-radius:9px;padding:10px 8px;min-width:0}.tt-preview>span{text-align:center}.tt-preview canvas{display:block;width:min(100%,120px);height:auto;aspect-ratio:8/5}.tt-next canvas{max-width:90px}.tt-hold-button{width:100%;height:24px;font-size:17px;margin-top:3px}.tt-hold-button:disabled{opacity:.35}
.tt-controls{flex-shrink:0;border-top:1px solid #28334a;background:#101725;padding:8px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}.tt-instructions{font-size:9px;color:#9eafc8;line-height:1.7;margin:0}.tt-instructions>span{display:block;color:#7087a7}.tt-keys{display:flex;gap:5px;direction:ltr;flex-shrink:0}
.tt-key{display:grid;place-items:center;min-width:36px;height:34px;padding:0 8px;background:#20344a;border:1px solid #3d536c;border-radius:8px;color:#d5ecff;font-size:21px;font-weight:700;line-height:1;touch-action:none;user-select:none;-webkit-user-select:none}.tt-key[data-tetris=drop]{background:#504021;border-color:#8b6d35;color:#ffe6aa}.tt-key:hover,.tt-key:active{background:#35526c}.tt-key[data-tetris=drop]:hover,.tt-key[data-tetris=drop]:active{background:#806029}
.tt-overlay{position:absolute;inset:42px 0 0;display:grid;place-items:center;padding:18px;background:#0a111fe8;backdrop-filter:blur(4px);z-index:3;overflow:auto}.tt-overlay[hidden]{display:none}.tt-overlay-box{max-width:330px;text-align:center;margin:auto}.tt-overlay h2{font-size:clamp(21px,3vw,34px);line-height:1.15;color:#fff;margin:0 0 12px}.tt-overlay p{font-size:12px;line-height:1.7;color:#9eb0cb;margin:0 0 18px}.tt-start{background:#eac46e;color:#30220e;border:1px solid #f7dea3;border-radius:9px;padding:11px 21px;font-size:13px;font-weight:800}.tt-start:hover{background:#f5d995}.tt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[dir=rtl] .tt-stat,html[dir=rtl] .tt-preview,html[dir=rtl] .tt-instructions,html[dir=rtl] .tt-overlay-box{direction:rtl}
@media(min-width:1021px) and (max-height:760px){.tt-top{min-height:35px;padding-block:4px}.tt-body{padding-block:8px;gap:12px}.tt-stats,.tt-panels{gap:6px}.tt-stat{padding:6px 10px}.tt-stat>b{font-size:19px}.tt-preview{padding:6px}.tt-preview canvas{max-width:90px}.tt-next canvas{max-width:65px}.tt-controls{padding-block:5px}.tt-instructions{font-size:8px}.tt-overlay{inset-block-start:35px}}
@media(max-width:1020px){.game-stage.builtin-stage:has(.tetris-player){aspect-ratio:auto;height:auto;display:block}.game-stage .tetris-player{height:560px;max-height:none}.tt-body{gap:12px;padding-inline:15px}.tt-key{min-width:42px;height:40px}.tt-controls{flex-direction:column;gap:7px;padding:9px}.tt-instructions{text-align:center}.tt-keys{justify-content:center;gap:9px}}
@media(max-width:600px){.game-stage .tetris-player{height:540px}.tt-top{min-height:39px;padding:6px 12px}.tt-name{font-size:12px}.tt-body{padding:12px 10px;grid-template-columns:minmax(50px,.7fr) minmax(0,2fr) minmax(50px,.7fr);gap:8px}.tt-stats,.tt-panels{gap:8px}.tt-stat{padding:8px 5px}.tt-stat>span,.tt-preview>span{font-size:8px}.tt-stat>b{font-size:16px}.tt-preview{padding:7px 4px}.tt-next canvas{max-width:65px}.tt-preview canvas{width:100%}.tt-instructions{font-size:8px}.tt-key{min-width:42px;height:42px}.tt-keys{gap:8px}.tt-overlay{inset-block-start:39px}.tt-overlay p{font-size:11px}}
@media(max-width:359px){.game-stage .tetris-player{height:500px}.tt-body{padding-inline:8px;gap:6px}.tt-stat>span,.tt-preview>span{font-size:7px}.tt-stat>b{font-size:14px}.tt-key{min-width:40px}.tt-keys{gap:6px}.tt-instructions{font-size:7px}}
.game-stage:fullscreen .tetris-player{height:min(100%,1080px);width:min(100%,1920px)}