/* Clear, colorful blocks on a quiet board. Gameplay is always left-to-right. */
.game-stage .blockblast-player{display:flex;flex-direction:column;height:100%;min-height:0;border:0;border-radius:0;background:radial-gradient(ellipse at 15% 0,#1d3542,transparent 60%),linear-gradient(135deg,#182534,#111c2b);color:#edf2f7;position:relative;isolation:isolate;overflow:hidden;font-family:inherit}
.blockblast-player [hidden]{display:none!important}.blockblast-player button{font-family:inherit}.blockblast-player button:focus-visible{outline:3px solid #edcd85;outline-offset:3px}.bb-top{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:43px;padding:8px 20px;border-bottom:1px solid #314151;background:#111e2ccb}.bb-title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:1.6px}.bb-title i{width:6px;height:6px;border-radius:50%;background:#82cbb2;box-shadow:0 0 12px #82cbb250}.bb-menu{display:flex;gap:7px}.bb-icon{display:grid;place-items:center;width:29px;height:27px;border-radius:7px;background:#263a49;border:1px solid #3f5665;color:#e4c68c;font-size:17px;line-height:1}.bb-icon:hover{background:#355263}
.bb-main{flex:1;min-height:0;width:min(100%,1050px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,.9fr);gap:28px;align-items:stretch;margin:auto;padding:23px 27px}.bb-board-area{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;position:relative}.bb-board{flex-shrink:0;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:5px;padding:11px;border:1px solid #405466;background:linear-gradient(145deg,#22394a,#1a2b3b);border-radius:15px;box-shadow:0 15px 45px #050c1644;direction:ltr;user-select:none;-webkit-user-select:none}.bb-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;min-height:0}.bb-cell-wrap{min-width:0;min-height:0}.bb-cell{display:block;position:relative;width:100%;height:100%;padding:0;border:1px solid #344b5a;border-radius:5px;background:#132838;box-shadow:inset 0 1px 2px #080f1830;cursor:crosshair;touch-action:manipulation;overflow:hidden}.bb-cell:disabled{opacity:1}.bb-cell-block{position:absolute;inset:0;border-radius:3px;background:var(--bb-color);box-shadow:inset 0 2px 0 #ffffff38,inset 0 -2px 0 #00000018;opacity:0}.bb-cell.is-filled .bb-cell-block{opacity:1}.bb-cell.is-filled{border-color:var(--bb-color)}.bb-cell:after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--bb-preview-color);opacity:0;border:2px solid transparent;border-radius:3px}.bb-cell.is-preview:after{opacity:.55;border-color:#e7fff080}.bb-cell.is-invalid:after{background:#d77c89;border-color:#f2b4bd;opacity:.6}.bb-cell.is-clearing .bb-cell-block{animation:bb-clear .22s ease-out}.bb-feedback{position:absolute;left:50%;top:43%;transform:translate(-50%,0);color:#f4d48f;font-weight:800;font-size:clamp(18px,3vw,35px);text-shadow:0 2px 12px #0d1724;pointer-events:none;opacity:0;z-index:2;white-space:nowrap}.bb-feedback.is-visible{animation:bb-feedback .85s ease-out}
.bb-side{display:flex;flex-direction:column;justify-content:center;gap:15px;min-width:0}.bb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.bb-stat{padding:10px 12px;border:1px solid #354a58;border-radius:10px;background:#1c3040b8;min-width:0}.bb-stat>span{display:block;color:#b0c0cc;font-size:10px;font-weight:600;line-height:1.3}.bb-stat>b{display:block;font-size:clamp(18px,2.2vw,30px);line-height:1.15;color:#edf4f8;margin-top:5px;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.bb-stat:first-child>b{color:#efcd8a}.bb-stat:last-child>b{color:#9acdbd}.bb-tray-heading{font-size:10px;font-weight:700;color:#c5d0d8;margin:0 0 9px}.bb-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;direction:ltr}.bb-slot{display:flex;align-items:center;justify-content:center;min-width:0;height:89px;padding:6px;border:1px solid #415564;border-radius:11px;background:#1e3343;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .14s,border-color .14s,box-shadow .14s}.bb-slot:hover:not(:disabled){background:#294454;border-color:#729a9a}.bb-slot.is-selected{border-color:#e7c17d;background:#354444;box-shadow:0 0 0 1px #e7c17d40}.bb-slot.is-used,.bb-slot:disabled{opacity:.35;cursor:default}.bb-slot.is-used{border-style:dashed;background:#152735}.bb-slot-figure{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;pointer-events:none}.bb-figure{display:grid;grid-template-columns:repeat(var(--bb-cols),var(--bb-piece-cell,11px));grid-template-rows:repeat(var(--bb-rows),var(--bb-piece-cell,11px));gap:3px;direction:ltr}.bb-figure>i{display:block;border-radius:2px;background:var(--bb-color);box-shadow:inset 0 2px 0 #ffffff38,inset 0 -2px 0 #0002}.bb-moves{font-size:9px;font-variant-numeric:tabular-nums;color:#90a6b6;margin:-5px 0 0}.bb-help{font-size:10px;line-height:1.65;color:#b2c5cd;margin:0}.bb-help>span{display:block;color:#849fae;margin-top:4px}.bb-keyboard{font-size:8px;line-height:1.6;color:#839aaa;margin:0;overflow-wrap:anywhere}.bb-drag{position:fixed;left:0;top:0;pointer-events:none;z-index:300;opacity:.85;filter:drop-shadow(0 7px 9px #0005);will-change:transform}.bb-drag .bb-figure{gap:var(--bb-drag-gap,3px)}.bb-drag[data-valid="0"]{opacity:.55;filter:drop-shadow(0 0 4px #ef9ca8)}.bb-drag[data-valid="0"] .bb-figure>i{outline:1px solid #eaa3ac}
.bb-overlay{position:absolute;inset:43px 0 0;display:grid;place-items:center;z-index:4;padding:20px;background:#101c2cec;backdrop-filter:blur(5px);overflow:auto}.bb-overlay-box{max-width:365px;text-align:center;margin:auto}.bb-overlay h2{font-size:clamp(22px,3vw,35px);line-height:1.18;letter-spacing:-.7px;margin:0 0 13px;color:#fff}.bb-overlay p{font-size:12px;line-height:1.75;color:#b6c6d2;margin:0 0 16px}.bb-overlay .bb-overlay-reason{font-size:10px;color:#8ba4b5;margin-top:-4px}.bb-start{min-height:41px;padding:10px 23px;border:1px solid #f2d49d;border-radius:9px;background:#e8c184;color:#362b1d;font-size:13px;font-weight:800}.bb-start:hover{background:#f4d59f}.bb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[dir=rtl] .bb-top,html[dir=rtl] .bb-side,html[dir=rtl] .bb-overlay-box{direction:rtl}.bb-main,.bb-board,.bb-tray,.bb-drag{direction:ltr}
@keyframes bb-clear{0%{opacity:1;filter:brightness(1.7);transform:scale(1)}100%{opacity:0;transform:scale(.65)}}@keyframes bb-feedback{0%{opacity:0;transform:translate(-50%,14px)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-25px)}}
@media(min-width:1021px) and (max-height:780px){.bb-top{min-height:36px;padding-block:4px}.bb-main{gap:20px;padding:15px 19px;grid-template-columns:minmax(0,1.4fr) minmax(190px,.9fr)}.bb-side{gap:11px}.bb-stat{padding:8px 10px}.bb-stat>b{font-size:21px;margin-top:3px}.bb-stat>span{font-size:9px}.bb-slot{height:76px}.bb-figure{--bb-piece-cell:10px;gap:3px}.bb-help{font-size:9px}.bb-keyboard{font-size:7px}.bb-overlay{inset-block-start:36px}.bb-board{padding:9px;gap:4px}.bb-row{gap:4px}.bb-cell{border-radius:4px}}
@media(max-width:1020px){.game-stage.builtin-stage:has(.blockblast-player){aspect-ratio:auto;height:auto;display:block}.game-stage .blockblast-player{height:640px;max-height:none}.bb-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:17px;width:min(100%,620px);padding:18px}.bb-side{gap:10px}.bb-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.bb-stat{padding:8px 10px}.bb-stat>b{font-size:23px}.bb-stat>span{font-size:9px}.bb-tray-heading{margin-bottom:7px}.bb-slot{height:75px}.bb-figure{--bb-piece-cell:11px}.bb-help{font-size:10px;text-align:center}.bb-help>span{display:none}.bb-keyboard{display:none}.bb-moves{margin:-3px 0 0;text-align:center}.bb-tray-group{width:min(100%,370px);margin:auto}}
@media(max-width:600px){.game-stage .blockblast-player{height:620px}.bb-top{padding:7px 12px;min-height:40px}.bb-title{font-size:10px;letter-spacing:1.1px}.bb-main{gap:13px;padding:15px 12px}.bb-side{gap:9px}.bb-stats{gap:6px}.bb-stat{padding:7px 6px;border-radius:8px}.bb-stat>span{font-size:8px}.bb-stat>b{font-size:20px;margin-top:3px}.bb-slot{height:76px;border-radius:9px}.bb-tray{gap:7px}.bb-figure{--bb-piece-cell:11px;gap:3px}.bb-help{font-size:9px}.bb-tray-heading{font-size:9px;margin-bottom:6px}.bb-moves{font-size:8px}.bb-board{padding:8px;gap:4px;border-radius:12px}.bb-row{gap:4px}.bb-cell{border-radius:4px}.bb-overlay{inset-block-start:40px}.bb-overlay p{font-size:11px}}
@media(max-width:359px){.game-stage .blockblast-player{height:570px}.bb-main{padding-inline:10px;gap:11px}.bb-stat>b{font-size:18px}.bb-stat>span{font-size:7px}.bb-side{gap:8px}.bb-slot{height:72px;padding:5px}.bb-figure{--bb-piece-cell:10px;gap:3px}.bb-tray-heading{font-size:8px}.bb-help{font-size:8px}.bb-board{padding:7px;gap:3px}.bb-row{gap:3px}.bb-icon{height:26px;width:27px}}
.game-stage:fullscreen .blockblast-player{height:min(100%,1080px);width:min(100%,1920px)}
@media(prefers-reduced-motion:reduce){.blockblast-player button{transition:none!important}.bb-cell.is-clearing .bb-cell-block,.bb-feedback.is-visible{animation:none}.bb-feedback.is-visible{opacity:1}}