.tetris{--cell:30px;--bg:#07070f;--panel:#12122a;--border:#3d3d78;--text:#eef;--dim:#8c8cc0;--accent:#ffd400}.tetris *{box-sizing:border-box;margin:0;padding:0}.tetris{top:var(--hdr-h);color:var(--text);font-family:var(--font-pixel),ui-monospace,Menlo,Consolas,monospace;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.tetris #game{gap:calc(var(--cell)*.5);grid-template-columns:auto auto auto;grid-template-areas:"left center right";align-items:start;display:grid}.tetris .col{gap:calc(var(--cell)*.4);width:calc(var(--cell)*6);flex-direction:column;display:flex}.tetris .left{grid-area:left}.tetris .right{grid-area:right}.tetris .center{grid-area:center;position:relative}.tetris .panel{background:var(--panel);border:calc(var(--cell)*.1) solid var(--border);padding:calc(var(--cell)*.3);border-radius:4px;box-shadow:0 0 0 2px #000,inset 0 0 0 1px #000}.tetris .label{color:var(--dim);font-size:calc(var(--cell)*.34);letter-spacing:1px;margin-bottom:calc(var(--cell)*.16)}.tetris .value{font-size:calc(var(--cell)*.42);text-align:right;margin-bottom:calc(var(--cell)*.28);color:#fff;text-shadow:0 0 6px #ffffff59;white-space:nowrap;overflow:hidden}.tetris .value:last-child{margin-bottom:0}.tetris .value.accent{color:var(--accent)}.tetris canvas{image-rendering:pixelated;display:block}.tetris #hold,.tetris #next{margin:0 auto}.tetris #stats{gap:calc(var(--cell)*.12);flex-direction:column;display:flex}.tetris .stat{font-size:calc(var(--cell)*.34);justify-content:space-between;align-items:center;display:flex}.tetris .stat span{color:#fff}.tetris .stat img{width:calc(var(--cell)*.7);height:calc(var(--cell)*.7);object-fit:contain;image-rendering:pixelated;pointer-events:none;-webkit-user-select:none;user-select:none}.tetris .stat i{margin-left:calc(var(--cell)*.25);font-style:normal;font-size:calc(var(--cell)*.28);color:var(--dim);flex:1}.tetris .help{column-gap:calc(var(--cell)*.22);row-gap:calc(var(--cell)*.24);font-size:calc(var(--cell)*.3);color:var(--dim);grid-template-columns:auto 1fr;line-height:1.3;display:grid}.tetris .help b{color:var(--text);white-space:nowrap;font-weight:400}.tetris .help span{white-space:nowrap}.tetris #overlay{z-index:5;text-align:center;padding:calc(var(--cell)*.4);background:#02020ce6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:auto}.tetris #overlay[hidden]{display:none}.tetris .menu{gap:calc(var(--cell)*.42);flex-direction:column;align-items:center;width:100%;display:flex}.tetris .title{font-size:calc(var(--cell)*.85);letter-spacing:2px;text-shadow:3px 3px #000}.tetris .title span:first-child{color:#f03030}.tetris .title span:nth-child(2){color:#ff9020}.tetris .title span:nth-child(3){color:#ffd500}.tetris .title span:nth-child(4){color:#30e030}.tetris .title span:nth-child(5){color:#00e5ff}.tetris .title span:nth-child(6){color:#b040e0}.tetris .sub{font-size:calc(var(--cell)*.3);color:var(--dim);line-height:1.7}.tetris .big{font-size:calc(var(--cell)*.55);color:var(--accent);text-shadow:2px 2px #000;line-height:1.4}.tetris .mid{font-size:calc(var(--cell)*.36);color:#fff;line-height:1.9}.tetris .row{gap:calc(var(--cell)*.15);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.tetris button{font-family:inherit;font-size:calc(var(--cell)*.3);color:var(--text);border:2px solid var(--border);padding:calc(var(--cell)*.2) calc(var(--cell)*.26);cursor:pointer;min-width:calc(var(--cell)*1.05);background:#1c1c40;border-radius:3px;line-height:1.2}.tetris button:hover{background:#2a2a5a}.tetris button.start{font-size:calc(var(--cell)*.38);padding:calc(var(--cell)*.32) calc(var(--cell)*.7);background:#2b7a2b;border-color:#8f8}.tetris button.start:hover{background:#3a9a3a}.tetris .blink{animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.15}}.tetris #touch{grid-template-columns:repeat(4,1fr);gap:8px;width:min(100vw,460px);padding:4px 8px;display:none}.tetris #touch button{touch-action:none;min-width:0;padding:12px 0;font-size:22px}@media (pointer:coarse),(orientation:portrait){.tetris #touch{display:grid}}.tetris .debug{width:calc(var(--cell)*11);font-size:calc(var(--cell)*.2);color:var(--dim);z-index:4;line-height:1.9;position:absolute;bottom:8px;left:8px}.tetris .debug div{gap:calc(var(--cell)*.15);flex-wrap:wrap;align-items:baseline;display:flex}.tetris .debug i{color:var(--dim);font-style:normal}.tetris .debug span{color:#fff;margin-right:calc(var(--cell)*.2)}.tetris .debug span.bad{color:#f03030}.tetris .debug .err{color:var(--accent)}.tetris .debug button{font-size:calc(var(--cell)*.2);padding:calc(var(--cell)*.12) calc(var(--cell)*.2)}@media (orientation:portrait){.tetris #game{justify-items:center;gap:calc(var(--cell)*.25);grid-template-columns:1fr 1fr;grid-template-areas:"left right""center center"}.tetris .col{flex-flow:wrap;justify-content:center;align-items:flex-start;width:100%}.tetris .panel.stats,.tetris .panel.help,.tetris .right .panel:nth-child(2) .label:nth-child(3),.tetris .right .panel:nth-child(2) .value:nth-child(4){display:none}}body:has(.tetris){overflow:hidden}.tetris{--bg:transparent;--panel:#090822db;--border:#2b2b6b;--dim:#8c8cc0;--accent:#76b900}.tetris .panel{border:3px solid var(--border);border-radius:0;box-shadow:6px 6px #000}.tetris #board{border:3px solid var(--border);background:#000;border-radius:0;box-shadow:6px 6px #000}.tetris button{border:2px solid var(--border);background:#0c0b2a;border-radius:0;transition:transform .12s,box-shadow .12s;box-shadow:4px 4px #000}.tetris button:hover{background:#15143f;transform:translate(2px,2px);box-shadow:2px 2px #000}.tetris button.on{background:var(--accent);color:#07061a;border-color:#fff}.tetris button.start{background:var(--accent);color:#07061a;border:3px solid #fff;box-shadow:inset 0 -4px #4f8200,5px 5px #000}.tetris button.start:hover{background:var(--accent);transform:translate(2px,2px);box-shadow:inset 0 -4px #4f8200,3px 3px #000}.tetris .reward{color:var(--text)}.tetris .reward b{color:var(--accent)}.tetris .reward button{margin-top:calc(var(--cell)*.3)}.tetris button.free{font-size:calc(var(--cell)*.34);padding:calc(var(--cell)*.26) calc(var(--cell)*.7);color:#fff;box-shadow:4px 4px 0 var(--accent);background:0 0;border:3px solid #fff}.tetris button.free:hover{box-shadow:2px 2px 0 var(--accent);background:#ffffff14;transform:translate(2px,2px)}.tetris .note.dim{color:var(--dim);font-size:calc(var(--cell)*.24)}.tetris .practiceTag{top:calc(var(--cell)*.3);padding:calc(var(--cell)*.14) calc(var(--cell)*.3);font-size:calc(var(--cell)*.24);letter-spacing:1px;color:#07061a;z-index:4;pointer-events:none;background:#fff;position:absolute;left:50%;transform:translate(-50%);box-shadow:3px 3px #000}.tetris .price{font-size:calc(var(--cell)*.3);color:var(--text);line-height:1.8}.tetris .price b{color:var(--accent)}.tetris .note{font-size:calc(var(--cell)*.3);color:var(--text);line-height:1.8}.tetris button.start{font-size:calc(var(--cell)*.6);padding:calc(var(--cell)*.5) calc(var(--cell)*1.2);line-height:1.6}.tetris button.start small{font-size:calc(var(--cell)*.3);opacity:.9;display:block}.tetris .menu .row button{font-size:calc(var(--cell)*.34);padding:calc(var(--cell)*.3) calc(var(--cell)*.4)}.tetris .menu>.sub{font-size:calc(var(--cell)*.32)}.tetris .lb{gap:calc(var(--cell)*.14);font-size:calc(var(--cell)*.28);flex-direction:column;display:flex}.tetris .lbRow{gap:calc(var(--cell)*.2);align-items:baseline;display:flex}.tetris .lbRow i{color:var(--accent);width:calc(var(--cell)*.5);font-style:normal}.tetris .lbRow em{color:var(--dim);text-overflow:ellipsis;white-space:nowrap;flex:1;font-style:normal;overflow:hidden}.tetris .lbRow b{color:#fff;font-weight:400}.tetris .lbRow.me em{color:var(--accent)}.tetris .lbEmpty{font-size:calc(var(--cell)*.26);color:var(--dim);line-height:1.7}.tetris .panel.hud{align-items:baseline;column-gap:calc(var(--cell)*.3);row-gap:calc(var(--cell)*.3);grid-template-columns:auto 1fr;display:grid}.tetris .panel.hud .label,.tetris .panel.hud .value{margin:0}
