:root{--green:#009b67;--dark:#005a3d;--lime:#92bd17;--purple:#6f278d;--cream:#f8f5e9;--ink:#12352c;--cell:#e4e5e0;--gap:3px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#173c33;font-family:Arial,Helvetica,sans-serif;color:var(--ink);overscroll-behavior:none;touch-action:none}button{font:inherit;touch-action:manipulation}.game{width:min(100vw,620px);min-height:100dvh;margin:auto;background:var(--cream);display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 0 45px #0008}.hud{height:112px;background:linear-gradient(135deg,#02a871,#008f60);color:white;display:grid;grid-template-columns:1fr 104px 1fr;align-items:center;padding:10px 14px;gap:8px}.vwt-panel{align-self:stretch;display:flex;align-items:center;gap:10px}.hud-label{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;letter-spacing:1px}.vwt-grid{display:grid;grid-template-columns:repeat(5,17px);gap:4px;align-content:center}.vwt-dot{width:17px;height:17px;border:2px solid #c8ed55;border-radius:2px;background:#08784f}.vwt-dot.filled{background:#d8f45a}.clock-panel{text-align:center}.timer{font-size:56px;line-height:.85;font-weight:900}.timer.warning{color:#ffe35c;animation:pulse .6s infinite alternate}.timer-label{font-size:10px;font-weight:bold;letter-spacing:1.5px;margin-top:8px}.level-panel{text-align:center}.level-pill{border:0;background:#fff;color:var(--green);font-weight:900;border-radius:18px;padding:7px 13px;margin-bottom:5px}.points-donut{margin:auto;width:66px;height:66px;border-radius:50%;background:conic-gradient(#dff56b 0deg,#ffffff42 0deg);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;font-weight:900}.points-donut:before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--green)}.points-donut span,.points-donut small{z-index:1}.points-donut span{font-size:20px;line-height:18px}.points-donut small{font-size:9px}.brand-band{height:60px;background:#d3d4d0;position:relative;display:flex;align-items:center;justify-content:center}.brand-band>span{font-weight:900;letter-spacing:8px;color:#eef0eb;font-size:25px;text-shadow:0 1px #bbb}.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-8px);background:var(--purple);color:white;padding:8px 17px;border-radius:20px;font-size:13px;font-weight:900;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,-50%)}.board{margin:8px auto 0;width:min(calc(100vw - 14px),606px);aspect-ratio:9/11;background:#fff;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(11,1fr);gap:var(--gap);padding:var(--gap);touch-action:none}.cell{position:relative;background:var(--cell);border:0;min-width:0;display:flex;align-items:center;justify-content:center}.cell.bonus{font-weight:900;font-size:clamp(8px,2.3vw,15px);color:white;text-align:center}.cell.dw{background:#552088}.cell.tl{background:#df331f}.cell.dl{background:#13a7a5}.cell.dd{background:#006d49}.cell.center{background:#777}.cell.center:after{content:"+";font-size:clamp(24px,8vw,49px);font-weight:200;color:#fff}.cell.drop-target{outline:4px solid #ffe75a;z-index:2}.tile{width:88%;height:88%;border-radius:7px;background:linear-gradient(145deg,#bef047,#84bd13);box-shadow:0 3px 0 #5c840c,0 4px 7px #0005;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,6.8vw,42px);font-weight:900;color:#174424;position:relative;user-select:none;touch-action:none;cursor:grab}.tile .value{font-size:.3em;position:absolute;right:8%;bottom:5%}.tile.locked{background:linear-gradient(145deg,#fcfbf1,#d5d4c8);box-shadow:0 2px 0 #aaa;cursor:default}.tile.selected{outline:4px solid #7a288e;transform:translateY(-4px)}.repeat-bubble{position:absolute;right:-13px;top:-12px;width:25px;height:25px;border-radius:50%;background:var(--purple);color:white;font-weight:900;display:grid;place-items:center;z-index:5}.rack-area{background:#d3d4d0;padding:8px 8px 10px;position:relative}.rack{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:#155644;border-radius:10px;padding:7px}.rack-slot{aspect-ratio:1;background:#0c3f32;border-radius:6px;display:grid;place-items:center;min-width:0}.rack .tile{width:88%;height:88%;font-size:clamp(18px,6vw,38px)}.bag-readout{position:absolute;right:10px;top:-19px;background:#fff;border-radius:12px;padding:3px 8px;font-size:9px;font-weight:900;z-index:3}.controls{height:90px;background:linear-gradient(135deg,#02a871,#008f60);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:2px 8px max(2px,env(safe-area-inset-bottom));gap:3px}.action{border:0;background:transparent;padding:0;min-width:0;position:relative;transition:.12s}.action:active{transform:scale(.92)}.action:disabled{opacity:.3;filter:grayscale(1)}.action img{display:block;width:min(100%,76px);height:auto;margin:auto}.action.send img{width:min(100%,85px)}.counter{position:absolute;right:4px;top:3px;background:var(--purple);color:#fff;border:2px solid #fff;border-radius:20px;min-width:29px;padding:3px;font-size:12px}.overlay{position:fixed;inset:0;background:#082b22dd;z-index:30;display:none;place-items:center;padding:20px}.overlay.show{display:grid}.modal{width:min(92vw,410px);max-height:90dvh;overflow:auto;background:#f8f5e9;border-radius:22px;padding:25px;text-align:center;box-shadow:0 18px 60px #0008}.modal h2{color:var(--green);margin:0 0 8px}.modal p{line-height:1.4}.logo{font-size:48px;letter-spacing:7px;font-weight:900;color:var(--green)}.primary,.secondary,.danger{display:block;width:100%;border:0;border-radius:13px;padding:15px;margin:10px 0;font-weight:900}.primary{background:var(--green);color:white}.primary:disabled{opacity:.45}.secondary{background:#dfe2dc;color:var(--ink)}.danger{background:var(--purple);color:#fff}.level-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.level-choice{border:3px solid #cfd5cb;border-radius:12px;background:#fff;padding:13px 4px;font-weight:900;color:var(--green)}.level-choice.active{border-color:var(--green);background:#e4f7ef}.swap-rack{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.swap-rack .tile{aspect-ratio:1;width:100%;height:auto;font-size:30px}.blank-letters{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.blank-letters button{aspect-ratio:1;border:0;border-radius:8px;background:var(--green);color:#fff;font-weight:900}.countdown{display:none;position:fixed;inset:0;z-index:50;background:#073c2ecc;color:#fff;font-weight:900;font-size:130px;place-items:center}.countdown.show{display:grid}.frozen .hud{box-shadow:inset 0 0 25px #d8fbff}.frozen .timer{color:#dffcff;text-shadow:0 0 12px #bff}.frozen:after{content:"TIME FROZEN";position:absolute;top:107px;left:50%;transform:translateX(-50%);z-index:10;background:#d8fbff;color:#087c7c;padding:5px 14px;border-radius:20px;font-size:11px;font-weight:900}.shake{animation:shake .25s linear 2}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes pulse{to{transform:scale(1.08)}}
@media (orientation:landscape) and (min-width:700px){body{display:grid;place-items:center}.game{width:min(100vw,980px);height:100dvh;min-height:0;display:grid;grid-template-columns:minmax(380px,1fr) 390px;grid-template-rows:112px 58px 1fr 92px}.hud{grid-column:2;grid-row:1}.brand-band{grid-column:2;grid-row:2}.board{grid-column:1;grid-row:1/5;height:calc(100dvh - 16px);width:auto;margin:8px;align-self:center}.rack-area{grid-column:2;grid-row:3;align-self:end}.controls{grid-column:2;grid-row:4}.timer{font-size:48px}}
@media (max-height:730px) and (orientation:portrait){.hud{height:92px}.timer{font-size:44px}.brand-band{height:38px}.controls{height:74px}.board{width:min(calc((100dvh - 92px - 38px - 74px - 85px)*9/11),calc(100vw - 12px))}.rack-area{margin-top:auto}}

/* Playable layout aligned to the established 1080 × 1952 index-file design. */
html,body{width:100%;height:100%;overflow:hidden;background:#172724}
body{display:grid;place-items:center}
.game{container-type:inline-size;display:block;position:relative;width:min(100vw,calc(100dvh * .5532787));height:auto;min-height:0;aspect-ratio:1080/1952;background:#eef1f1;box-shadow:0 0 50px #0009;overflow:hidden}
.hud{position:absolute;inset:0 0 auto 0;width:100%;height:12.3975%;display:block;background:#3a8379;padding:0;color:#dce9e7;z-index:3}
.vwt-panel{position:absolute;left:1.48%;top:27.7%;width:27.78%;height:44.63%;display:block}
.hud-label{display:none}.vwt-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(5,18.67%);grid-auto-rows:45.37%;gap:6.48% 2.33%;align-content:start}
.vwt-dot{width:100%;height:100%;border:0;border-radius:1cqw;background:rgba(71,176,133,.34);box-shadow:none}.vwt-dot.filled{background:#55db4d;box-shadow:0 0 1.4cqw rgba(117,255,92,.25)}
.level-panel{position:absolute;left:34.08%;top:17.36%;width:12.96%;height:57.85%;display:block}
.points-donut{position:absolute;inset:0;width:100%;height:auto;aspect-ratio:1;border:.56cqw solid #00673f;background:radial-gradient(circle at 42% 33%,#087a4d 0%,#005c39 58%,#00462e 100%);box-shadow:0 .4cqw .8cqw rgba(0,35,24,.38),inset 0 0 0 .28cqw rgba(2,43,28,.72);font-family:Roboto,Arial,sans-serif;color:#fff}
.points-donut:before{inset:auto;left:-.56cqw;top:-.56cqw;width:100%;height:100%;border:.56cqw solid transparent;border-radius:50%;background:transparent}
.points-donut span{font-size:3.9cqw;line-height:1;text-shadow:0 .28cqw .28cqw #0008}.points-donut small{display:none}.goal-label{position:absolute;left:-26%;top:108%;width:152%;text-align:center;color:#eef7f5;font:700 2.05cqw/1 Roboto,Arial,sans-serif;letter-spacing:.2cqw;white-space:nowrap;opacity:.53}
.clock-panel{position:absolute;left:52.78%;top:32.64%;width:11.57%;height:48.76%;display:block;text-align:center}
.timer{font:700 8.52cqw/1 Arial,sans-serif;color:#dce9e7}.timer.warning{color:#ffe35c}
.score-panel{position:absolute;left:70.37%;top:22.73%;width:11.3%;height:50.4%}.score-ring{width:100%;aspect-ratio:1;border:.37cqw solid #9dc73b;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#dce9e7}.score-ring span{font-size:4.07cqw;line-height:.82;font-weight:700}.score-ring small{font-size:2.13cqw;margin-top:1cqw}
.level-pill{position:absolute;right:.83%;top:2.9%;width:12.31%;height:15.3%;border:0;border-radius:2cqw;background:#2c7169;color:#cfe0de;font:400 1.67cqw/1 Roboto,Arial,sans-serif;letter-spacing:.09cqw;padding:0;margin:0}
.brand-band{position:absolute;left:0;top:12.3975%;width:100%;height:4%;background:#eef1f1;display:flex;align-items:center;justify-content:center;z-index:4}
.brand-band>span{font:900 5.9cqw/1 Arial,sans-serif;letter-spacing:-.28cqw;color:#55c351;text-shadow:0 .35cqw 0 #158668}.brand-band>span::first-letter{color:#44b85d}
.toast{font:900 3.7cqw/1 Roboto,Arial,sans-serif;border-radius:1.3cqw;padding:.7cqw 1.5cqw;box-shadow:0 .5cqw 1.5cqw #0003}.toast.show{transform:translate(-50%,-50%)}
.board{position:absolute;left:.18%;top:16.4%;width:99.64%;height:65.16%;margin:0;padding:.28%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(11,1fr);gap:.5%;aspect-ratio:auto;background:#e7ebeb;z-index:2}
.cell{background:#fafafa;border-radius:1.15cqw;box-shadow:inset 0 .45cqw .25cqw #e4e6e5;overflow:visible}.cell.bonus{font:900 2.15cqw/1 Arial,sans-serif;color:inherit}.cell.dw{background:#fafafa;color:#e9a8ef}.cell.dw:after{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:#f4d2f6;z-index:0}.cell.dw{isolation:isolate}.cell.dw::before{content:"2W";position:absolute;inset:0;display:grid;place-items:center;z-index:1;color:#e9a8ef;font:900 2.1cqw/1 Arial,sans-serif;pointer-events:none}.cell.dw{font-size:0}.cell.tl{background:#fafafa;font-size:0}.cell.tl:after{content:"3T";width:46%;aspect-ratio:1;border-radius:50%;background:#d6f0ee;color:#9fd7d3;display:grid;place-items:center;font-size:2.1cqw}.cell.dl{background:#fafafa;font-size:0}.cell.dl:after{content:"2T";width:46%;aspect-ratio:1;border-radius:50%;background:#fae7d6;color:#e8caaa;display:grid;place-items:center;font-size:2.1cqw}.cell.dd{background:#fafafa;font-size:0}.cell.dd:before,.cell.dd:after{content:"";position:absolute;width:29%;height:34%;border-radius:1cqw;background:#d9edc6}.cell.dd:before{left:33%}.cell.dd:after{right:28%}.cell.center{background:#fafafa}.cell.center:after{content:"+";font:900 7cqw/1 Arial;color:#0c3974;background:none;width:auto;height:auto}
.tile{width:92%;height:92%;border-radius:1cqw;background:linear-gradient(145deg,#dff2c7,#a8d969);box-shadow:0 .22cqw .4cqw #0004;display:flex;font:900 6.3cqw/.9 "Arial Black",Arial,sans-serif;color:#245a40;letter-spacing:-.18cqw}.tile .value{font:400 1.8cqw/1 Arial,sans-serif;right:8%;top:8%;bottom:auto}.tile.locked{background:linear-gradient(145deg,#d8efc1,#abd376);filter:hue-rotate(18deg) saturate(.78) brightness(.96)}.repeat-bubble{right:-1.2cqw;top:auto;bottom:-1.2cqw;width:3.9cqw;height:3.9cqw;font-size:2.6cqw}
.rack-area{position:absolute;left:0;top:81.56%;width:100%;height:8.2%;padding:0;background:#3a8379;z-index:5}.rack{position:absolute;left:1.65%;top:12%;width:96.7%;height:76%;display:grid;grid-template-columns:repeat(8,1fr);gap:.46%;padding:0;background:transparent;border-radius:0}.rack:after{content:"";position:absolute;left:0;right:0;bottom:-.4cqw;height:1.3cqw;border-radius:.8cqw;background:#3a8379;box-shadow:inset 0 .2cqw 0 #ffffff29,0 .3cqw .5cqw #0002;z-index:-1}.rack-slot{aspect-ratio:auto;height:100%;background:transparent;border-radius:0}.rack .tile{width:100%;height:100%;font-size:6.7cqw;border-radius:0;clip-path:polygon(6% 2%,94% 2%,100% 91%,91% 100%,9% 100%,0 91%);box-shadow:none}.bag-readout{right:1.5%;top:-1.8cqw;background:#2c7169;color:#dce9e7;border-radius:1.2cqw;padding:.35cqw .8cqw;font-size:1.2cqw}
.controls{position:absolute;left:0;top:89.75%;width:100%;height:10.25%;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:.5% 2%;gap:0;background:#3a8379;z-index:6}.action img{width:13.89cqw;max-width:none}.action.send img{width:15.5cqw}.counter{right:1.5cqw;top:.8cqw;border:.18cqw solid #fff;min-width:3.2cqw;padding:.3cqw;font-size:1.6cqw}.frozen:after{top:12.5%;font-size:1.6cqw}.frozen .hud{box-shadow:inset 0 0 2.5cqw #d8fbff}
@media (orientation:landscape) and (min-width:700px){.game{width:min(100vw,calc(100dvh * .5532787));height:auto;display:block}.hud,.brand-band,.board,.rack-area,.controls{grid-column:auto;grid-row:auto}.board{height:65.16%;width:99.64%;margin:0}.rack-area{align-self:auto}.controls{height:10.25%}}

/* Exact tile artwork recovered from the latest index files. */
.tile,.tile.locked{background-image:url("assets/tile-board-original.png");background-size:100% 100%;background-repeat:no-repeat;background-position:center;background-color:transparent;box-shadow:none}
.tile.locked{filter:hue-rotate(24deg) saturate(.78) brightness(.93)}
.rack .tile{background-image:url("assets/tile-rack-original.png");background-size:100% 100%;background-repeat:no-repeat;background-position:center;clip-path:none}

/* Revision: exact index progress ring and clean control/cell alignment. */
.points-donut{overflow:visible;box-shadow:0 .4cqw .8cqw rgba(0,35,24,.38),inset 0 0 0 .28cqw rgba(2,43,28,.72),inset 0 .75cqw 1.4cqw rgba(255,255,255,.08)}
.points-donut:before{content:"";position:absolute;z-index:1;left:9%;right:9%;top:7%;width:auto;height:34%;border:0;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
#progressSvg{position:absolute;z-index:2;left:-.56cqw;top:-.56cqw;width:calc(100% + 1.12cqw);height:calc(100% + 1.12cqw);overflow:visible;transform:rotate(-90deg);shape-rendering:geometricPrecision;filter:drop-shadow(0 0 .4cqw rgba(97,255,47,.42))}
#progBg,#progFg{fill:none;stroke-width:20}
#progBg{stroke:#cbd6cf}
#progFg{stroke:#39f23f;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:703.717;stroke-dashoffset:703.717;filter:drop-shadow(0 0 .45cqw rgba(112,255,49,.8));transition:stroke-dashoffset .35s ease}
.points-donut span{position:relative;z-index:3}
.cell>.tile{position:absolute;inset:0;width:100%;height:100%;border-radius:1.15cqw;background-size:100% 100%;box-shadow:none}
.rack:after{bottom:0;height:1.1cqw;box-shadow:inset 0 .2cqw 0 rgba(255,255,255,.16),0 .18cqw .3cqw rgba(0,0,0,.12)}
.controls{border:0;box-shadow:none;background-image:none}
.action:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-.18cqw)}
.action:active:not(:disabled){filter:brightness(1.12);transform:translateY(.12cqw) scale(.97)}
#sendBtn:disabled{opacity:1;filter:none}
.cell:has(>.tile)::before,.cell:has(>.tile)::after{display:none}
.cell>.tile{z-index:2;flex-shrink:0}
.cell>.tile.selected{transform:none;outline-offset:-3px}
@font-face{font-family:RobotoCounter;src:url("assets/Roboto-Variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
.controls>.bag-readout{position:absolute;top:calc(1% + 6px);left:50%;right:auto;transform:translateX(-50%);background:transparent;padding:0;color:#dce9e7;font-family:RobotoCounter,Roboto,sans-serif;font-weight:400;opacity:.75;font-size:calc(2cqw + 2px);letter-spacing:1px;line-height:1.2;white-space:nowrap;pointer-events:none}

/* Reveal the supplied footer watermark and restore the index rack ledge. */
.game{background-image:url("assets/Sokolo_1080_9x11_clean(1).png");background-size:100% 100%;background-repeat:no-repeat}
.rack-area,.controls{background:transparent}
.rack{z-index:1}
.rack:after{content:none}
.rack-area:after{content:"";position:absolute;left:1.6667%;width:96.6667%;top:88%;height:1.1019cqw;border-radius:.7407cqw .7407cqw .463cqw .463cqw;background:#3a8379;box-shadow:inset 0 .1852cqw 0 rgba(255,255,255,.16),inset 0 -.1852cqw 0 rgba(20,86,78,.32),0 .2778cqw .463cqw rgba(0,0,0,.14);z-index:2;pointer-events:none}
.rack-area:before{content:"";position:absolute;left:2.4074%;right:2.4074%;top:calc(88% + .1852cqw);height:.2778cqw;border-radius:.3704cqw;background:rgba(255,255,255,.12);z-index:3;pointer-events:none}
.cell.validation-anchor{z-index:10}
.validation-bubble{position:absolute;right:-.65cqw;bottom:-.65cqw;width:3.9cqw;height:3.9cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:20;color:#fff;font:900 2.8cqw/1 Arial,sans-serif;box-shadow:0 .18cqw .46cqw #0003;pointer-events:none;letter-spacing:0}
.validation-bubble.valid{background:#2fa84f}
.validation-bubble.invalid{background:#f80b0b}
.validation-bubble.repeated{background:#6f278d}
.controls>.bag-readout.placement-warning{max-width:96%;letter-spacing:1px}

/* Keep footer buttons clear of status text and drag highlights inside slots. */
.controls>.action{top:6px}
.cell.drop-target,.rack-slot.drop-target{outline:3px solid #ffe75a;outline-offset:-3px}

#utilityIcon.is-recall{width:10.3cqw}

#freezeCount{background:#155644;right:3.4cqw;top:2.5cqw;width:3.2cqw;height:3.2cqw;min-width:0;padding:0;border-radius:50%;display:grid;place-items:center}

#freezeIce{position:absolute;left:52.0370cqw;top:6.2963cqw;width:13.4259cqw;height:10.5556cqw;border-radius:1.8519cqw;pointer-events:none;opacity:0;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.95),rgba(173,224,246,.48) 36%,rgba(125,198,230,.22) 60%,transparent 72%);box-shadow:inset 0 0 2.0370cqw rgba(225,250,255,.95),0 0 2.2222cqw rgba(178,235,255,.72)}
#freezeIce::after{content:"";position:absolute;left:0.7407cqw;right:0.7407cqw;bottom:-3.2407cqw;height:2.7778cqw;background:linear-gradient(180deg,rgba(231,251,255,.96),rgba(142,214,240,.72));clip-path:polygon(0 0,4% 0,8% 82%,12% 0,21% 0,25% 70%,29% 0,38% 0,42% 88%,46% 0,55% 0,59% 64%,62% 0,71% 0,75% 100%,79% 0,87% 0,91% 72%,94% 0,100% 0);filter:drop-shadow(0 0.4630cqw 0.3704cqw rgba(112,190,220,.35))}
#freezeIce::before{content:none}
.toast{background:#2c7169}.toast[data-kind="invalid"]{background:#ee1717}.toast[data-kind="repeated"]{background:#6f278d}
#freezeIce{z-index:8;transform-origin:50% 100%}.frozen #freezeIce{opacity:1}.frozen:after{display:none}
#resetIcon{position:absolute;left:55.65%;top:4.96%;width:5.74cqw;height:5.74cqw;filter:brightness(0) invert(1);z-index:9}
.game-over-caption{position:absolute;left:12%;top:36.9%;width:76%;text-align:center;color:#3a8379;font:900 10.55cqw/1 RobotoCounter,Arial,sans-serif;letter-spacing:.37cqw;z-index:25;pointer-events:none}
.floating-points{position:absolute;z-index:25;width:8.52cqw;height:8.52cqw;border-radius:50%;display:grid;place-items:center;background:#2a9e58;color:#fff;font:700 3.33cqw/1 RobotoCounter,sans-serif;pointer-events:none}
.reset-caption{position:absolute;left:50%;top:15%;transform:translateX(-50%);z-index:28;background:#386cb0;color:white;padding:.65cqw 1.1cqw;border-radius:1.3cqw;font:900 4.2cqw/1 RobotoCounter,sans-serif;white-space:nowrap;pointer-events:none;animation:caption-pop 1.827s both}
.vwt-dot{position:relative;transition:background .2s,box-shadow .2s}.bonus-arrow:after{content:'↓';position:absolute;left:50%;bottom:80%;color:white;font:bold 4cqw/1 Arial;transform:translateX(-50%);animation:arrow-blink .28s steps(2) infinite}
.timer.warning{color:#ffe35c;animation:timer-urgency .63s ease-in-out infinite alternate}
@keyframes timer-urgency{to{transform:scale(1.04);filter:drop-shadow(0 0 1.1cqw #ffffffd9)}}
@keyframes caption-pop{0%{opacity:0;transform:translateX(-50%) scale(.94)}10%,85%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0}}
@keyframes arrow-blink{to{opacity:.18}}
@media(prefers-reduced-motion:reduce){.timer.warning,.bonus-arrow:after,.reset-caption{animation:none}}

/* Readable freeze count with breathing room around the icon. */
#freezeCount{background:#299b50;color:#fff;left:1.7cqw;right:auto;top:.7cqw;width:4.2cqw;height:4.2cqw;font:700 2.65cqw/1 RobotoCounter,Arial,sans-serif;border:.18cqw solid #fff;opacity:1}

/* Index2 freeze callout: 92px type, 116px height at the 1080px reference width. */
.freeze-caption{position:absolute;z-index:26;left:50%;top:12.756%;width:max-content;max-width:88%;height:10.741cqw;box-sizing:border-box;white-space:nowrap;text-align:center;font-family:RobotoCounter,Roboto,Arial,sans-serif;font-size:8.519cqw;line-height:1;font-weight:900;color:#fff;padding:0 2.222cqw;border-radius:2.593cqw;background:rgba(113,197,232,.96);box-shadow:0 0 1.111cqw rgba(200,245,255,.95),0 0 2.593cqw rgba(105,214,255,.9),0 0 4.444cqw rgba(58,180,235,.72),0 .741cqw 2.222cqw rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:freeze-caption-pop 1.9125s linear both}
@keyframes freeze-caption-pop{0%{opacity:1;transform:translateX(-50%) scale(.96)}8%,88.89%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.freeze-caption{animation:none;transform:translateX(-50%)}}

.rack-slot.drop-target{outline:none}
.vwt-panel{top:50%;height:auto;transform:translateY(-50%)}
.vwt-grid{height:auto;grid-auto-rows:4.55cqw;row-gap:.65cqw}
.swap-rack{grid-template-columns:repeat(4,var(--swap-width,44px));justify-content:center;gap:10px}
.swap-rack .tile{width:var(--swap-width,44px);height:var(--swap-height,48px);aspect-ratio:auto;font-size:calc(var(--swap-width,44px)*.57);border-radius:0;background:transparent url('assets/tile-rack-original.png') center/100% 100% no-repeat;box-shadow:none;letter-spacing:-.02em}
.swap-rack .tile .value{font:400 .269em/1 Arial,sans-serif;right:8%;top:8%;bottom:auto}

/* Tile selection stays visually clean on the rack and board. */
#rack .tile.selected,.cell>.tile.selected{outline:none;box-shadow:none;transform:none}

.brand-logo{display:block;max-width:40%;height:85%;object-fit:contain}.logo img{display:block;width:100%;height:auto;margin:0 auto 16px}
.reset-caption{top:13%;font-size:8.4cqw;padding:1.3cqw 2.2cqw;border-radius:2.6cqw;max-width:96%;text-align:center}
.freeze-caption{top:13%;font-size:17.038cqw;height:auto;min-height:21.482cqw;width:96%;max-width:96%;padding:2cqw 3cqw;white-space:normal;line-height:1.05;text-align:center}

.freeze-caption{font-size:8.4cqw;line-height:1;height:auto;min-height:0;width:max-content;max-width:96%;padding:1.3cqw 2.2cqw;border-radius:2.6cqw;white-space:nowrap}

#progPreview{fill:none;stroke:#b7ff9c;stroke-width:20;stroke-linecap:round;stroke-dasharray:703.717;stroke-dashoffset:703.717;opacity:0;transition:stroke-dashoffset .2s}
.vwt-dot.preview{background:#b7ff9c;box-shadow:inset 0 0 0 .18cqw #e2ffd7}
.preview-points{color:#caffb6}

.level-choices{grid-template-columns:repeat(4,1fr)}
.points-award{position:absolute;left:50%;top:49%;z-index:25;width:25.55cqw;height:25.55cqw;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);font:900 7.2cqw/1 RobotoCounter,Arial,sans-serif;color:white;border:.74cqw double #fff;box-shadow:0 1.3cqw 2.8cqw #53260057,inset 0 0 0 .46cqw #ffe06f73;pointer-events:none;text-shadow:0 .28cqw .37cqw #703d0c4d}
.points-award.award-20{background:radial-gradient(circle at 50% 43%,#ffe47a,#f7c338 42%,#eda72c 68%,#d88424)}
.points-award.award-30{background:radial-gradient(circle at 50% 43%,#80deff,#32a8e8 42%,#176ac5 68%,#104595);box-shadow:0 1.3cqw 2.8cqw #123d7357,inset 0 0 0 .46cqw #b4edff73}

/* Equal header gaps measured from the full circle-and-goal-label zone. */
.hud{--hud-gap:6cqw;--goal-zone-left:calc(1.48cqw + 27.78cqw + var(--hud-gap));--clock-left:calc(var(--goal-zone-left) + 19.6992cqw + var(--hud-gap))}
.level-panel{left:calc(var(--goal-zone-left) + 3.3696cqw)}
.clock-panel{left:var(--clock-left)}
.score-panel{left:calc(var(--clock-left) + 11.57cqw + var(--hud-gap))}
#resetIcon{left:calc(var(--clock-left) + 2.87cqw)}
#freezeIce{left:calc(var(--clock-left) - .743cqw)}

/* Premium DD preview: mark occupied bonus tiles without covering their letter/value. */
.tile .dd-tile-badge{position:absolute;left:50%;bottom:4%;width:27%;height:auto;transform:translateX(-50%);pointer-events:none;user-select:none}

/* Geometric sans serif for menu interfaces. */
@font-face{font-family:Outfit;src:url("assets/Outfit-Variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
.modal{font-family:Outfit,Arial,sans-serif}
.modal h2{font-weight:650;letter-spacing:.035em}
.modal button{font-family:Outfit,Arial,sans-serif;font-weight:600;letter-spacing:.025em}
.start-card>p{font-size:18px;font-style:italic;letter-spacing:.5px;position:relative;top:-4px}

.placement-warning-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.02em;width:1.2em;height:1.12em;padding-top:.22em;background:#e53935;color:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);font-family:Arial,sans-serif;font-weight:700;line-height:1;letter-spacing:0}

.validation-bubble,.validation-bubble *{user-select:none;-webkit-user-select:none}
.validation-bubble svg{display:block;width:80%;height:80%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.validation-bubble svg circle{fill:#fff;stroke:none}

@font-face{font-family:Nunito;src:url("assets/Nunito-Italic-Variable.ttf") format("truetype");font-style:italic;font-weight:200 1000;font-display:swap}
.start-card>p{font-family:Nunito,Arial,sans-serif}

.brand-band>.level-pill{left:1.48%;right:auto;top:50%;transform:translateY(-50%);height:3.43cqw;margin:0}
.brand-band>.level-pill{font-size:2.05cqw}
.brand-band>.level-pill{background:#3a8379}
.goal-label{letter-spacing:calc(.2cqw - .5px)}

/* Explain both reset targets before players choose a level. */
.start-card,#levelOverlay>.modal{width:min(94vw,520px)}
.level-choices{display:block;margin:18px 0;text-align:left}
.level-intro{font-size:16px;font-weight:600;margin:0 0 10px;color:#245a40}
.level-table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;table-layout:fixed}
.level-table thead th{font-size:14px;font-weight:500;color:#52695f;padding:10px 6px;text-align:center;border-bottom:1px solid #cddbd3}
.level-table thead th:first-child{text-align:left;padding-left:12px}
.level-table .level-choice{border:0;border-radius:0;padding:0;background:transparent;cursor:pointer;color:#245a40;font-weight:500}
.level-table td,.level-table tbody th{padding:0;border-bottom:1px solid #dce4dc;text-align:center}
.level-table tbody th{text-align:left}
.level-table button{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;padding:14px 12px;border:0;background:transparent;color:inherit;font-size:16px;text-align:left;letter-spacing:0}
.level-table button span{color:#009c69}
.level-table .level-choice.active{background:#dff1e5}
.level-table .level-choice:hover{background:#e9f2e9}
.level-table button:focus-visible{outline:2px solid #009c69;outline-offset:-3px;border-radius:6px}
.level-rules{margin-top:16px;font-size:14px;line-height:1.45;color:#52695f}
.level-rules strong{color:#245a40;font-size:15px;font-weight:600}
.level-rules p{margin:6px 0 0}

.level-rules .vwt-footnote{margin-top:12px;padding-top:10px;border-top:1px solid #dce4dc}
.level-table sup,.vwt-footnote sup{font-size:.7em;line-height:0;vertical-align:super}
#startBtn:not(:disabled){cursor:pointer}
#startBtn:not(:disabled):active{cursor:pointer}
.level-table .level-choice,.level-table .level-choice *{cursor:pointer}

.tile:not(.locked):active{cursor:grabbing}
html.dragging-tile,html.dragging-tile *{cursor:grabbing!important}

/* 11 × 11 board, supplied banner and phone-only board viewport. */
.game{width:min(100vw,calc(100dvh * .5625));aspect-ratio:9/16;background:#3a8379 url('assets/Sokolo_1350_11x11.png') center/100% 100% no-repeat}
.hud{top:11.43%;height:12.3975%}
.brand-band{top:23.8275%;height:4.37%;background:#e7e7e7}
.brand-logo{display:none}
.board-viewport{position:absolute;left:1.65%;top:28.2%;width:96.7%;aspect-ratio:1;overflow:hidden;z-index:2;touch-action:none;background:#e7e7e7}
.board{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:.46416cqw;background:#e7e7e7;transform-origin:0 0;will-change:transform}
.board.camera-moving{transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.cell>.tile{font-size:5.15cqw;letter-spacing:-.12cqw}
.cell>.tile .value{font-size:1.47cqw}
.cell.vt{background:#fafafa;font-size:0}
/* Use the actual VT label from the supplied board, including its original colors. */
.cell.vt:before{content:'';position:absolute;width:59.6%;aspect-ratio:1;border-radius:50%;background:url('assets/Sokolo_1350_11x11.png') 50% 29.8695% / 2023.2143% 3657.1429% no-repeat}
.cell.vt:after{content:none}
.tile .vt-tile-badge{position:absolute;left:50%;bottom:4%;width:24%;height:auto;transform:translateX(-50%);pointer-events:none;user-select:none}
.cell:has(>.tile):before,.cell:has(>.tile):after{display:none}
.rack-area{top:82.6%;height:7.2%;background:transparent}
.controls{top:91%;height:9%;background:transparent}
.reset-caption,.freeze-caption{top:24.1%}
.frozen .tile,.frozen .tile.locked,.frozen .rack .tile{background-image:url('assets/tile-freeze.png');background-size:100% 100%;filter:none;color:#245a72}
.touch-drag-preview{border-radius:1cqw;animation:none!important;transition:none!important}
.board-viewport.zoomed{cursor:grab}
/* Keep end-of-word indicators inside edge cells when the board is clipped. */
.board .validation-bubble{right:.12cqw;bottom:.12cqw;width:3.3cqw;height:3.3cqw}

/* Preserve the game's light artwork in browsers with automatic darkening. */
:root{color-scheme:only light}
html,body,#game{color-scheme:only light}
/* Cover the reference image's exposed board margins with the board's own surface. */
.game:before{content:'';position:absolute;left:0;right:0;top:28.2%;height:54.4%;background:#e7e7e7;pointer-events:none}
.touch-drag-preview{position:fixed!important;z-index:2147483647!important;pointer-events:none!important;opacity:1!important;visibility:visible!important;user-select:none;-webkit-user-select:none;box-shadow:0 3px 8px #0003}
.tile{-webkit-touch-callout:none}

/* Explicit image surfaces retain the supplied light board under automatic recoloring. */
.board .cell{background-color:#fafafa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23fafafa'/%3E%3C/svg%3E");background-size:100% 100%;forced-color-adjust:none}
#rack .tile.selected,#rack .tile.accessed{transform:none;transform-origin:center bottom;z-index:25;outline:none;box-shadow:none}
.rack-slot:has(.selected),.rack-slot:has(.accessed){position:relative;z-index:25}
.touch-drag-preview,.tile-drag-preview{transform:none!important;transform-origin:center bottom}
/* Keep start controls reachable within the visible phone viewport. */
.overlay{padding:12px;overflow-y:auto;overscroll-behavior:contain}
.modal{max-width:100%;max-height:calc(100dvh - 24px);min-height:0;overflow-y:auto;padding-bottom:max(20px,env(safe-area-inset-bottom));scroll-padding-bottom:20px}
@media(max-width:600px){
 .start-card{padding:18px 16px 20px}
 .start-card .logo img{max-width:240px;max-height:90px;object-fit:contain;margin-bottom:8px}
 .start-card>p{margin:8px 0}
 .level-choices{margin:10px 0}
 .level-table button{padding:10px 8px}
 .level-table thead th{padding:8px 4px}
 .level-rules{margin-top:10px}
 #startBtn{position:sticky;bottom:0;z-index:2;margin:12px 0 0;min-height:48px;flex-shrink:0}
}

/* Pickup uses color, not size; the pointer and the visible tile share one center. */
#rack .tile.selected,#rack .tile.accessed{transform:none;color:#174424}
#rack .tile.selected>span:first-child,#rack .tile.accessed>span:first-child,
.touch-drag-preview>span:first-child,.tile-drag-preview>span:first-child{color:#174424!important}
.touch-drag-preview,.tile-drag-preview{background-color:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important;mask-image:url('assets/tile-rack-original.png');mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('assets/tile-rack-original.png');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
#swapRack .tile{background:transparent url('assets/tile-rack-original.png') center/100% 100% no-repeat;filter:none;outline:none;transform:none;box-shadow:none}
/* A geometric selection ring stays even around the tile artwork. */
#swapRack .tile.selected{outline:none;transform:none;box-shadow:none;filter:none}
#swapRack .tile.selected::after{content:'';position:absolute;inset:1px;border:3px solid #267b52;border-radius:12%;box-shadow:0 0 0 2px #267b5226;pointer-events:none;z-index:3}
#swapRack .tile{cursor:pointer}

.points-award{width:35.77778cqw;height:35.77778cqw;border-radius:0;padding:0;font-size:10.11111cqw;font-weight:900;letter-spacing:-0.18519cqw;background:radial-gradient(circle at 50% 43%,#ffe47a 0%,#f7c338 42%,#eda72c 68%,#d88424 100%);color:#fff;clip-path:polygon(50% 0%,58% 8%,69% 4%,74% 15%,86% 14%,88% 27%,100% 32%,94% 44%,100% 54%,90% 62%,94% 74%,82% 78%,81% 91%,69% 90%,61% 100%,50% 93%,39% 100%,31% 90%,19% 91%,18% 78%,6% 74%,10% 62%,0% 54%,6% 44%,0% 32%,12% 27%,14% 14%,26% 15%,31% 4%,42% 8%);box-shadow:0 1.29630cqw 2.77778cqw rgba(83,38,0,.34),inset 0 0 0 0.46296cqw rgba(255,224,111,.45);text-shadow:0 0.27778cqw 0.37037cqw rgba(112,61,12,.30)}
.points-award::before{content:'';position:absolute;inset:3.88889cqw;border:1.03704cqw solid rgba(255,255,255,.94);border-radius:50%;box-shadow:inset 0 0 0 0.46296cqw rgba(143,67,0,.20)}
.points-award::after{content:'★★★';position:absolute;top:6.74074cqw;left:50%;transform:translateX(-50%);font-size:3.62963cqw;letter-spacing:0.46296cqw;line-height:1;color:rgba(255,255,255,.98);text-shadow:0 0.18519cqw 0.27778cqw rgba(95,43,0,.28)}
.points-award .scorePlus{position:absolute;left:8.68519cqw;top:50%;transform:translateY(-36%);font-size:.52em;font-weight:800;line-height:1;letter-spacing:0}
.points-award .scoreNum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.22em;font-weight:900;line-height:1;letter-spacing:-0.27778cqw;text-align:center}
.points-award{border:0}.points-award.award-30{background:radial-gradient(circle at 50% 43%,#80deff,#32a8e8 42%,#176ac5 68%,#104595)}

/* Avoid retaining a rasterized grid layer at its resting size. */
.board{will-change:auto}
.cell{box-shadow:none}
/* Render the supplied Versatile bonus-slot label directly, preserving its
   original colors, proportions, rounded corners, and transparency. */
.cell.vt:before{content:none}
.cell.vt:after{content:'';position:absolute;width:59.6%;height:59.6%;background:url('assets/versatile-white.png') center/contain no-repeat;opacity:1;mask:none;-webkit-mask:none}
/* Tablet trial: reclaim banner space for a wider board and larger tiles. */
.tablet-layout .game{width:min(100vw,calc(100dvh * .68));aspect-ratio:17/25;background:#3a8379}
.tablet-layout .hud{top:0;height:12.4%}
.tablet-layout .brand-band{top:12.4%;height:5.6%}
.tablet-layout .brand-logo{display:block}
.tablet-layout .board-viewport{top:18%}
.tablet-layout .game:before{top:18%;height:65.8%}
.tablet-layout .rack-area{top:84%;height:7%}
.tablet-layout .controls{top:91%;height:9%}
.tablet-layout .reset-caption,.tablet-layout .freeze-caption{top:13%}
.tablet-layout #rack .tile.selected,.tablet-layout #rack .tile.accessed{transform:scale(1.45);transform-origin:center center}
.tablet-layout .touch-drag-preview,.tablet-layout .tile-drag-preview{transform:scale(1.45)!important;transform-origin:center center}

/* Tablet rack: square tile artwork, full width, and the existing inter-tile gaps. */
.tablet-layout .brand-band{height:3.6%}
.tablet-layout .board-viewport{top:16%}
.tablet-layout .game:before{top:16%;height:65.756%}
.tablet-layout .rack-area{top:calc(16% + 96.7cqw);height:12.1107825cqw}
.tablet-layout .rack{left:0;top:0;width:100%;height:100%;gap:.44482cqw}
.tablet-layout .rack-slot{height:100%;aspect-ratio:1}
.tablet-layout .rack .tile{width:100%;height:100%;aspect-ratio:1}
.tablet-layout .rack-area:after{left:0;width:100%;top:100%}
.tablet-layout .rack-area:before{left:.74%;right:.74%;top:calc(100% + .1852cqw)}

/* Phone trial: use the tablet's centered pickup enlargement on touch devices. */
@media(pointer:coarse){
 #rack .tile.selected,#rack .tile.accessed{transform:scale(1.45);transform-origin:center center}
 .touch-drag-preview,.tile-drag-preview{transform:scale(1.45)!important;transform-origin:center center}
}

/* Consistent heavy lettering from the same bundled font on every device. */
.tile,.touch-drag-preview,.tile-drag-preview{font-family:RobotoCounter,Arial,sans-serif;font-weight:900;font-synthesis:none}
.tile .value{font-family:RobotoCounter,Arial,sans-serif;font-weight:400}
.tile .vt-tile-badge{opacity:1}
.tile .vt-tile-badge{filter:saturate(1.8) hue-rotate(-8deg) brightness(.8) contrast(1.28)}
.controls>.bag-readout,.controls>.bag-readout.placement-warning{letter-spacing:.5px}
.controls .action{cursor:pointer}
/* Keep the ledge behind lifted tiles. */
.rack{z-index:4}
/* Original tile assets are square: preserve that geometry on rack and in swap. */
.rack{height:auto;aspect-ratio:8.266/1}
.rack-slot,.rack .tile{height:auto;aspect-ratio:1}
.rack .tile{width:100%;height:100%}
#swapRack .tile{height:auto;aspect-ratio:1;font-family:RobotoCounter,Arial,sans-serif;font-weight:900}
/* Tablet keeps breathing room; only phones use the edge-to-edge rack. */
.tablet-layout .rack-area{top:calc(16% + 97.5cqw);height:11.6982825cqw}
.tablet-layout .rack{left:1.65%;top:0;width:96.7%;height:100%;aspect-ratio:auto;gap:.44482cqw}
.tablet-layout .rack-area:after{left:1.65%;width:96.7%;top:100%}
.tablet-layout .rack-area:before{left:2.39%;right:2.39%;top:calc(100% + .1852cqw)}
@media(pointer:coarse){
 html:not(.tablet-layout) .rack-area{top:calc(28.2% + 96.7cqw);height:12.1107825cqw}
 html:not(.tablet-layout) .rack{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;gap:.44482cqw}
 html:not(.tablet-layout) .rack-area:after{left:0;width:100%;top:100%}
 html:not(.tablet-layout) .rack-area:before{left:.74%;right:.74%;top:calc(100% + .1852cqw)}
}
/* Letter picker uses the original tile art and displays the standard letter value. */
.blank-letters button{position:relative;padding:0;border:0;border-radius:0;background:transparent url('assets/tile-rack-original.png') center/contain no-repeat;color:#245a40;aspect-ratio:1;font-family:RobotoCounter,Arial,sans-serif;font-weight:900;letter-spacing:0;cursor:pointer;container-type:inline-size}
.blank-letter{font-size:54cqw;line-height:1}
.blank-value{position:absolute;top:8%;right:8%;font-size:16cqw;line-height:1;font-weight:400}
.validation-bubble.first-tile-bubble{right:auto;bottom:auto;width:4.3cqw;height:4.3cqw;transform:translate(-50%,-50%);z-index:21}

/* Desktop: keep the embossed ledge at the bottom of the restored square rack tiles. */
@media(pointer:fine){
 .rack-area:after{top:calc(12% + 11.69853cqw);left:1.6667%;width:96.6667%;display:block}
 .rack-area:before{top:calc(12% + 11.88373cqw);left:2.4074%;right:2.4074%;display:block}
}

/* Center the label by its line box within the pill. */
.brand-band>.level-pill{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;font-family:RobotoCounter,Arial,sans-serif}
/* Optical centering for the uppercase LEVEL glyphs inside the fixed pill. */
.brand-band>.level-pill{padding-top:.45cqw;padding-bottom:0}

/* Touch screens: remove dark letterboxing above and below the game. */
@media(pointer:coarse){
 html,body{background:#3a8379}
 body{align-items:start;align-content:start}
 .game{margin:0 auto;box-shadow:none}
}

.vwt-dot .vwt-vt-badge{position:absolute;width:65%;height:65%;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%);opacity:1;pointer-events:none}

/* Cumulative level progress in the dead space, matching the supplied reference. */
.level-progress-zone{position:absolute;left:1.48%;top:50%;transform:translateY(-50%);width:42%;display:flex;flex-direction:column;gap:.35cqw}
.level-progress-zone>.level-pill{position:static;display:block;width:auto;height:auto;background:none;border-radius:0;color:#3a8379;margin:0;padding:0;text-align:left;font:400 2.35cqw/1.15 RobotoCounter,Arial,sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer}
.level-progress-zone>.level-pill strong{font-weight:700}
.level-progress-bar{position:relative;width:30cqw;height:1.7cqw;border:1px solid #fff;border-radius:1cqw;background:#111;overflow:hidden;color:#fff;font:500 1.25cqw/1 RobotoCounter,Arial,sans-serif}
.level-progress-bar[hidden]{display:none}
#levelProgressFill{height:100%;width:0;background:#24ae3e;border-radius:inherit;transition:width .2s}
#levelProgressValue{position:absolute;left:1cqw;top:50%;transform:translateY(-50%)}
.tablet-layout .brand-logo{position:absolute;right:2%;max-width:30%}
.progression-help{font-size:13px}

/* Level target and thicker progress track share one centered row. */
.level-progress-zone{width:72%;flex-direction:row;align-items:center;gap:1.5cqw}
.level-progress-zone>.level-pill{flex:0 0 auto}
.level-progress-bar{flex:0 0 28cqw;width:28cqw;height:3cqw;border:.28cqw solid #00673f;border-radius:1.5cqw;background:radial-gradient(ellipse at 42% 33%,#087a4d 0%,#005c39 58%,#00462e 100%);box-shadow:0 .2cqw .4cqw #00231861,inset 0 .35cqw .6cqw #ffffff14;font-size:1.75cqw}
#levelProgressFill{background:linear-gradient(180deg,#87ff73,#39f23f 55%,#27bf30);box-shadow:inset 0 .15cqw .2cqw #ffffff66}
#levelProgressValue{left:1cqw;text-shadow:0 1px 2px #003b25}
.tablet-layout .brand-logo{max-width:23%;right:1.5%}

/* Updated board artwork and an equal 1.65cqw margin along both sides and below. */
.game{background-image:url('assets/board-layout-v2.png')}
.hud{top:10.35%}
.brand-band{top:22.7475%;height:4.7525%}
.board-viewport{top:27.5%}
.game:before{top:27.5%;height:98.35cqw}
.rack-area{top:calc(27.5% + 98.35cqw);height:11.69853cqw}
.rack{top:0}
.rack-area:after{top:100%}
.rack-area:before{top:calc(100% + .1852cqw)}
@media(pointer:fine){.rack-area:after{top:100%}.rack-area:before{top:calc(100% + .1852cqw)}}
@media(pointer:coarse){html:not(.tablet-layout) .rack-area{top:calc(27.5% + 98.35cqw)}}
.tablet-layout .hud{top:0}
.tablet-layout .brand-band{top:12.4%;height:2.9%}
.tablet-layout .board-viewport{top:15.3%}
.tablet-layout .game:before{top:15.3%;height:98.35cqw}
.tablet-layout .rack-area{top:calc(15.3% + 98.35cqw)}
/* Label and fraction bar share a vertically centered row. */
.level-progress-zone{top:50%;transform:translateY(-50%);align-items:center;gap:1.5cqw}
/* Optical alignment of uppercase label with the adjacent progress bar. */
.level-progress-zone>.level-pill{display:flex;align-items:center;height:3cqw;padding:.3cqw 0 0;line-height:1}
#levelProgressValue{left:50%;transform:translate(-50%,-50%);white-space:nowrap;font-weight:700}
.stats-card{width:min(94vw,480px)}
.stats-list{margin:12px 0;text-align:left}
.stats-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #dce4dc}
.stats-list dt{font-size:15px;color:#52695f}.stats-list dd{margin:0;text-align:right;font-size:16px;font-weight:600;color:#245a40;overflow-wrap:anywhere}
.stats-progress{position:relative;margin:12px 0 18px;height:22px}
.stats-progress progress{display:block;width:100%;height:22px;border:0;border-radius:12px;overflow:hidden;background:#005c39;accent-color:#39d947}
.stats-progress progress::-webkit-progress-bar{background:#005c39}.stats-progress progress::-webkit-progress-value{background:#39d947}.stats-progress progress::-moz-progress-bar{background:#39d947}
.stats-progress span{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:white;text-shadow:0 1px 2px #00462e;pointer-events:none}
.stats-note{font-size:12px;color:#52695f}

/* Keep inactive main-menu actions out of the layout. */
.modal button[hidden]{display:none}

/* Compact secondary navigation keeps both destinations visible. */
.start-secondary-actions{display:flex;gap:10px}
.start-secondary-actions>button{flex:1;min-width:0;margin:8px 0 0;padding:13px 8px}
.start-card .level-rules .vwt-footnote{margin-top:8px;padding-top:8px}

/* Soft, staggered tile slots echo the game board around the tablet. */
html.tablet-layout{background:#a7b0b9}
.tablet-layout body{
 background-color:#a7b0b9;
 background-image:radial-gradient(ellipse at 50% 25%,#e5eaf01c,transparent 75%),url('assets/tablet-slot-pattern.svg');
 background-size:100% 100%,960px 960px;
 background-position:center,center;
 background-attachment:fixed;
}

/* Anchor the supplied footer artwork to the actual touch-layout edges. */
@media(pointer:coarse){
 html:not(.tablet-layout) .game{background-image:linear-gradient(to top,#3a8379 0 22%,transparent 22%),url('assets/board-layout-v2.png')}
 .controls{background-color:#3a8379;background-image:url('assets/board-layout-v2.png');background-repeat:no-repeat;background-size:100% auto;background-position:right bottom}
}
.tablet-layout .controls{background-color:#3a8379;background-image:url('assets/board-layout-v2.png');background-repeat:no-repeat;background-size:100% auto;background-position:right bottom}

/* Small spacing adjustments shared by all layouts. */
.rack-area{transform:translateY(2px)}
.controls>.bag-readout{margin-top:2px}
.goal-label{top:calc(108% + 2px)}
/* Keep the countdown at its original header position, with the icon above the ice. */
.hud{--ice-top:calc(32.64% - 1cqw);--ice-left:calc(var(--clock-left) - 1.215cqw)}
#freezeIce{left:var(--ice-left);top:var(--ice-top);width:14cqw;height:10.52cqw}
#resetIcon{left:calc(var(--clock-left) + 3.535cqw);top:calc(var(--ice-top) - 4.8cqw);width:4.5cqw;height:4.5cqw}
.clock-panel{top:32.64%;height:48.76%;display:block;z-index:9}
#freezeIce::after{bottom:-2.5cqw}
.tablet-layout #freezeIce::after{display:none}
.tablet-layout body{background-image:url('assets/tablet-slot-pattern.svg'),url('assets/tablet-slot-pattern-right.svg');background-size:50% 960px,50% 960px;background-position:left center,right center;background-repeat:repeat-y,repeat-y}

/* Use the separate transparent footer artwork at its native aspect ratio. */
.game::after{content:'';position:absolute;left:0;right:0;top:calc(27.5% + 98.35cqw);bottom:0;transform:none;padding:0;border-radius:0;background:url('assets/footer-graphic.png') right bottom/auto 100% no-repeat;pointer-events:none;z-index:1}
.tablet-layout .game::after{top:calc(15.3% + 98.35cqw)}
.game.frozen::after{display:block}
.game .controls,.tablet-layout .game .controls{background:transparent}

/* Cover the old baked-in footer graphic beneath the transparent asset. */
.game{background-image:linear-gradient(to top,#3a8379 0 22%,transparent 22%),url('assets/board-layout-v2.png')}
.tablet-layout .game{background-image:none}

/* Compact, five-page in-game guide. */
.help-card{width:min(94vw,480px);text-align:left;padding:24px}
.help-top{display:flex;align-items:center;justify-content:space-between;color:#52695f;font-size:14px;letter-spacing:.09em;font-weight:600}
.help-top button{border:0;background:#e3e9e2;color:#245a40;border-radius:50%;width:40px;height:40px;font-size:26px;cursor:pointer}
.help-step{color:#3a8379;font-size:14px;margin:18px 0 8px}
.help-card h2{font-size:26px;line-height:1.15;letter-spacing:0}
.help-intro{font-size:16px;color:#245a40;margin:12px 0}
.help-card ul{padding-left:20px;margin:18px 0;font-size:16px;line-height:1.5;color:#38584b}
.help-card li+li{margin-top:12px}
.help-dots{display:flex;justify-content:center;gap:4px;margin-top:20px}
.help-dots button{width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.help-dots button::before{content:'';width:8px;height:8px;border-radius:50%;background:#c6d3c9}
.help-dots button[aria-current]::before{background:#009b67;width:20px;border-radius:6px}
.help-nav{display:flex;gap:12px}.help-nav button{flex:1;cursor:pointer;min-height:48px}
.help-nav button:disabled{opacity:.4;cursor:default}
.help-pause{text-align:center;color:#52695f;font-size:13px;margin:8px 0 0}
.help-card button:focus-visible{outline:3px solid #3a8379;outline-offset:2px}
@media(max-width:420px){.help-card{padding:18px}.help-card h2{font-size:24px}.help-card li+li{margin-top:10px}}

/* Familiar gameplay artwork gives each help page a visual reference. */
.help-visual{display:flex;align-items:center;justify-content:center;gap:16px;background:#3a8379;border-radius:16px;padding:16px 12px;margin:16px 0;color:#fff;min-height:116px}
.help-visual figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0}
.help-visual figure>img{width:60px;height:60px;object-fit:contain}
.help-visual figcaption{font-size:12px;font-weight:500;text-align:center;line-height:1.2;color:#fff;letter-spacing:0}
.help-word{display:flex;gap:3px;flex:2;justify-content:center}
.help-word span{display:grid;place-items:center;width:42px;height:42px;background:url('assets/tile-rack-original.png') center/contain no-repeat;font:900 27px/1 RobotoCounter,Arial,sans-serif;color:#245a40}
.help-bonus{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800}
.help-2t{background:#fae7d6;color:#846045}.help-3t{background:#d6f0ee;color:#357975}.help-2w{background:#f4d2f6;color:#865189}
.help-vt{background:#d9f7e8}.help-vt img{width:32px;height:26px;object-fit:contain;filter:brightness(0) saturate(100%) invert(43%) sepia(22%) saturate(917%) hue-rotate(103deg)}
.help-vwt{display:grid;grid-template-columns:repeat(4,12px);gap:3px;height:48px;align-content:center}.help-vwt i{width:12px;height:15px;background:#55db4d;border-radius:3px}
.help-points{width:48px;height:48px;border:4px solid #39f23f;border-radius:50%;background:#005c39;display:grid;place-items:center;font-size:14px;font-weight:700}
.help-clock{height:48px;display:grid;place-items:center;font:bold 38px/1 Arial,sans-serif;color:#dce9e7}
.help-or{font-size:12px;opacity:.8}
.help-ice{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;width:76px;height:60px;background:#ccecf0;color:#245a72;box-shadow:inset 0 0 9px #fff;font-size:30px;font-weight:700;line-height:1}
.help-ice span{font-size:12px;font-weight:500;margin-top:3px}
@media(max-width:420px){.help-visual{gap:8px;padding:12px 8px;min-height:104px}.help-visual figure>img{width:52px;height:52px}.help-word span{width:34px;height:34px;font-size:23px}.help-bonus{width:42px;height:42px;font-size:20px}}

/* Revision: lower GOAL label by 2px in tablet layout only. */
.tablet-layout .goal-label{top:calc(108% + 4px)}


/* Revision 02: smoother LEVEL label and tablet footer breathing room. */
.level-progress-zone>.level-pill{font-family:Outfit,RobotoCounter,Arial,sans-serif;font-weight:600;letter-spacing:.01em}
.tablet-layout .controls>.action{top:4px}


/* Revision 03: tablet-specific footer alignment. SWAP and TIME FREEZE artwork
   extends lower than the other icons, so raise only those two controls. */
.tablet-layout #swapBtn,.tablet-layout #freezeBtn{top:-2px}

/* Revision 04: all footer controls share the same 150x150 source-frame geometry.
   Move the row as a unit for tablet breathing room; no per-button vertical offsets. */
.tablet-layout .controls>.action{top:0;align-self:center;display:grid;place-items:center;aspect-ratio:1;min-height:0}
.tablet-layout .controls>.action>img{display:block;width:100%;height:100%;object-fit:contain;margin:0}
.tablet-layout .controls{top:90.45%;height:9%;padding:0 2% .55%}
.tablet-layout #swapBtn,.tablet-layout #freezeBtn{top:0}

/* Revision 05: retain Revision 04's shared square alignment boxes, but render
   every supplied 150x150 footer graphic at its original intended responsive
   scale instead of stretching it to fill the grid cell. */
.tablet-layout .controls>.action>img{
  width:13.89cqw;
  height:13.89cqw;
  object-fit:contain;
  margin:auto;
}
.tablet-layout .controls>.action.send>img{width:13.89cqw;height:13.89cqw}

/* Revision 06: tablet footer fine-tuning.
   Keep Revision 05 sizing/alignment, but lower the complete action row slightly.
   This moves the Time Freeze counter clear of the rack and restores breathing
   room between the centered status/message line and the SEND artwork. */
.tablet-layout .controls>.action{top:5px}

/* Revision 07: tablet footer spacing requested after device test.
   Lower the complete button row another 4px, independently lower the TF counter
   so it clears the rack, and lower the centered status/message line to open a
   visible gap beneath the rack ledge. */
.tablet-layout .controls>.action{top:9px}
.tablet-layout #freezeCount{top:calc(.7cqw + 8px)}
.tablet-layout .controls>.bag-readout,
.tablet-layout .controls>.bag-readout.placement-warning{top:calc(1% + 10px)}

/* Revision 08: tablet footer micro-alignment after device screenshot.
   Keep the established row geometry, lower only SWAP and TIME FREEZE to align
   their visible artwork with the other three controls, and place the TF count
   fully below the rack ledge. */
.tablet-layout #swapBtn,
.tablet-layout #freezeBtn{top:15px}
.tablet-layout #freezeCount{top:calc(.7cqw + 14px)}

/* Revision 09: raise SWAP and TIME FREEZE slightly from Revision 08. */
.tablet-layout #swapBtn,
.tablet-layout #freezeBtn{top:12px}

/* Revision 10: raise tablet SWAP and TIME FREEZE another 3px. */
.tablet-layout #swapBtn,
.tablet-layout #freezeBtn{top:9px}

/* Revision 11: tablet-only footer micro-adjustments.
   Lower the Time Freeze counter 3px and reduce the centered status/message
   typography by 1px without affecting phone or browser layouts. */
.tablet-layout #freezeCount{top:calc(.7cqw + 17px)}
.tablet-layout .controls>.bag-readout,
.tablet-layout .controls>.bag-readout.placement-warning{font-size:calc(2cqw + 1px)}

/* Revision 12 — tablet-only: tighten status/message character spacing by 1px. */
.tablet-layout .controls>.bag-readout,
.tablet-layout .controls>.bag-readout.placement-warning{letter-spacing:-.5px}

/* Revision 13 — tablet-only: restore 0.5px of tracking from Revision 12. */
.tablet-layout .controls>.bag-readout,
.tablet-layout .controls>.bag-readout.placement-warning{letter-spacing:0px}

/* Revision 14 — tablet-only: reduce Time Freeze counter by 25% while preserving its center point. */
.tablet-layout #freezeCount{
  transform:scale(.75);
  transform-origin:center center;
}

/* Revision 15 — tablet-only: bring the reduced Time Freeze counter closer to its icon. */
.tablet-layout #freezeCount{left:calc(1.7cqw + 3px)}

/* Revision 30: raise SWAP and TIME FREEZE by 3px on phone and browser only. */
html:not(.tablet-layout) #swapBtn,
html:not(.tablet-layout) #freezeBtn{top:3px}

/* Revision 17: phone-only vertical balance + subtle surround pattern.
   Center the complete 9:16 game surface within taller phone viewports so the
   former bottom "super gap" is shared above and below. Keep the surrounding
   area quiet, using a low-contrast board-slot motif rather than a solid void. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) body{
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#2f6f66;
    background-image:
      linear-gradient(#2f6f66e8,#2f6f66e8),
      url('assets/tablet-slot-pattern.svg');
    background-size:100% 100%,480px 480px;
    background-position:center,center;
    background-repeat:no-repeat,repeat;
  }
  html:not(.tablet-layout) .game{
    margin:auto;
    flex:0 0 auto;
  }
}

/* Revision 35 — center the phone logo precisely inside the shortened banner. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    position:absolute;
    left:50%;
    top:0;
    width:54%;
    height:9.35%;
    max-width:none;
    object-fit:contain;
    object-position:center center;
    transform:translateX(-50%);
  }
}

/* Revision 36 — center the logo within the complete visible banner, including
   the space above the vertically centered 9:16 game surface. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    position:fixed;
    left:50%;
    top:calc(25dvh - 36.133333vw);
    width:54vw;
    max-width:324px;
    height:auto;
    object-fit:contain;
    transform:translate(-50%,-50%);
  }
}

/* Revision 37 — itch.io desktop: keep the centered footer status/message line
   below the enlarged rack and its ledge. Touch layouts retain their positions. */
@media (pointer:fine){
  html:not(.tablet-layout) .controls>.bag-readout,
  html:not(.tablet-layout) .controls>.bag-readout.placement-warning{
    top:calc(1% + 15px);
  }
}

/* Revision 38 — itch.io desktop: lower the complete footer button row by 3px.
   SWAP and TIME FREEZE retain their established 3px relative lift. */
@media (pointer:fine){
  html:not(.tablet-layout) .controls>.action{top:9px}
  html:not(.tablet-layout) #swapBtn,
  html:not(.tablet-layout) #freezeBtn{top:6px}
}

/* Revision 39 — mobile logo coordinates are measured from the rendered game
   and HUD in JavaScript so browser chrome and unusual phone ratios cannot
   shift the logo away from the true banner center. */

/* Revision 40 — the logo is hoisted outside the contained game surface so its
   fixed coordinates are genuinely viewport-relative and cannot overlap HUD. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) body>.phone-top-logo{
    display:block;
    position:fixed;
    z-index:20;
    max-width:none;
    height:auto;
    object-fit:contain;
    transform:translate(-50%,-50%);
    pointer-events:none;
    user-select:none;
  }
}

/* Revision 41 — itch.io desktop: reduce footer artwork and the Time Freeze
   counter by 20% without changing phone or tablet sizing. */
@media (pointer:fine){
  html:not(.tablet-layout) .controls>.action>img{
    width:11.112cqw;
    height:auto;
  }
  html:not(.tablet-layout) .controls>.action.send>img{
    width:12.4cqw;
    height:auto;
  }
  html:not(.tablet-layout) #freezeCount{
    transform:scale(.8);
    transform-origin:center center;
  }
}

/* Revision 42 — responsive three-part header from the supplied mock-up. */
.hud{
  --vwt-count:7;
  --vwt-size:15px;
  --vwt-gap:3px;
  --header-track-w:123px;
  --header-gap:4cqw;
  display:grid;
  grid-template-columns:var(--header-track-w) 15cqw var(--header-track-w);
  grid-template-rows:1fr;
  column-gap:var(--header-gap);
  justify-content:center;
  align-items:center;
  padding:0;
}
.hud>.vwt-panel{
  position:relative;left:auto;top:auto;width:var(--header-track-w);height:4.1cqw;
  grid-column:1;grid-row:1;transform:none;align-self:center;
}
.hud .vwt-grid{
  display:grid;grid-template-columns:repeat(var(--vwt-count),var(--vwt-size));grid-template-rows:var(--vwt-size);column-gap:var(--vwt-gap);align-content:center;width:100%;height:4.1cqw;
}
.hud .vwt-dot{width:var(--vwt-size);height:var(--vwt-size);border-radius:.55cqw}
.hud>.clock-panel{
  position:relative;left:auto;top:auto;width:15cqw;height:15cqw;
  grid-column:2;grid-row:1;display:grid;place-items:center;z-index:10;
}
.hud .timer{position:relative;left:0;font-size:4.6cqw;line-height:1;text-align:center}
.hud>#resetIcon{
  position:relative;left:auto;top:auto;width:12.5cqw;height:12.5cqw;
  grid-column:2;grid-row:1;justify-self:center;align-self:center;
  transform:none;filter:none;object-fit:contain;z-index:9;
}
.hud>#freezeIce{
  position:relative;left:auto;top:auto;width:15cqw;height:15cqw;
  grid-column:2;grid-row:1;justify-self:center;align-self:center;
}
.hud>.level-panel{
  position:relative;left:auto;top:auto;width:var(--header-track-w);height:4.1cqw;
  grid-column:3;grid-row:1;align-self:center;
}
.points-progress{position:relative;width:100%;height:100%;margin:0}
.points-progress-track{position:absolute;inset:0;border:.28cqw solid #00673f;border-radius:2.1cqw;background:radial-gradient(ellipse at 42% 33%,#087a4d 0%,#005c39 58%,#00462e 100%);box-shadow:0 .2cqw .4cqw #00231861,inset 0 .35cqw .6cqw #ffffff14;overflow:hidden}
.points-progress-fill,.points-progress-preview{position:absolute;right:0;left:auto;top:0;height:100%;width:0;border-radius:inherit;transition:width .25s}
.points-progress-fill{z-index:2;background:linear-gradient(180deg,#87ff73,#39f23f 55%,#27bf30);box-shadow:inset 0 .15cqw .2cqw #ffffff66}
.points-progress-preview{z-index:1;background:linear-gradient(180deg,#87ff73,#39f23f 55%,#27bf30);box-shadow:inset 0 .15cqw .2cqw #ffffff66;opacity:0}
.points-progress-value{position:absolute;right:1cqw;left:auto;top:50%;transform:translateY(-50%);z-index:4;color:#fff;font:500 1.75cqw/1 RobotoCounter,Arial,sans-serif;text-shadow:0 1px 2px #003b25;white-space:nowrap;pointer-events:none}
.points-progress small,.hud .goal-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.hud>.score-panel{
  position:relative;left:auto;top:5.2cqw;width:var(--header-track-w);height:auto;
  grid-column:3;grid-row:1;align-self:center;justify-self:center;
}
.hud .score-ring{width:max-content;min-width:10cqw;height:3.6cqw;aspect-ratio:auto;border:.18cqw solid rgba(220,233,231,.42);border-radius:1.8cqw;padding:0 1.4cqw;background:#2c7169;display:flex;flex-direction:row;gap:.65cqw;align-items:center;justify-content:center;color:#dce9e7}
.hud .score-ring span{font:700 3.2cqw/1 RobotoCounter,Arial,sans-serif}
.hud .score-ring small{font:500 1.55cqw/1 RobotoCounter,Arial,sans-serif;margin:0}

/* Revision 18 — phone portrait presentation.
   Use the new green artwork as the full underlying base, visually replace the
   old baked-in top logo/banner, and position the supplied transparent SOLOKO
   logo independently over that expanded upper area. Tablet/desktop unchanged. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout),
  html:not(.tablet-layout) body{
    background:#5cae45 url('assets/phone-green-background.png') center/cover no-repeat;
  }
  html:not(.tablet-layout) body{
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  html:not(.tablet-layout) .game{
    margin:auto;
    flex:0 0 auto;
    box-shadow:none;
  }
  /* Cover the logo/background baked into the supplied game artwork. */
  html:not(.tablet-layout) .game::after{
    content:'';
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    top:0;
    height:10.35%;
    pointer-events:none;
    background:#b9ee69 url('assets/phone-green-background.png') center top/100% auto no-repeat;
  }
  /* Re-place the supplied transparent logo as an independent layer. */
  html:not(.tablet-layout) .game > .phone-top-logo{
    display:block;
  }
}

.phone-top-logo{display:none}
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    position:absolute;
    z-index:3;
    top:1.15%;
    left:50%;
    transform:translateX(-50%);
    width:64%;
    height:8.1%;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
  }
}

/* Revision 19 — phone portrait: keep the green ray artwork as one continuous
   viewport backdrop. The top cover uses the same viewport-fixed background
   coordinates instead of restarting the image inside the game header. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout),
  html:not(.tablet-layout) body{
    background-image:url('assets/phone-green-background.png');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
  html:not(.tablet-layout) .game::after{
    background-color:transparent;
    background-image:url('assets/phone-green-background.png');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
}

/* Revision 20 — phone portrait: vertically center the independent SOLOKO logo
   within the full expanded upper backdrop (top viewport gap + covered legacy
   header), rather than centering it only inside the old header footprint. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    top:calc((10.35% - ((100dvh - 100%) / 2) - 8.1%) / 2);
  }
}

/* Revision 21 — phone portrait: keep the complete logo visible while centering
   it within the expanded upper backdrop. Use intrinsic aspect ratio (height:auto)
   and center the image box in the available top region so no part is clipped. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    top:calc((10.35% - ((100dvh - 100%) / 2)) / 2);
    width:64%;
    height:auto;
    max-height:calc(10.35% - ((100dvh - 100%) / 2) - 12px);
    object-fit:contain;
    transform:translate(-50%,-50%);
  }
}

/* Revision 22 — phone portrait: robust logo placement.
   Keep the logo inside the game header cover itself, fully visible and centered.
   This avoids viewport-relative calc/max-height rules that could collapse its box. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    display:block;
    position:absolute;
    z-index:4;
    left:50%;
    top:5.175%;
    width:58%;
    height:auto;
    max-height:none;
    object-fit:contain;
    transform:translate(-50%,-50%);
    opacity:1;
    visibility:visible;
    pointer-events:none;
    user-select:none;
  }
}

/* Revision 23 — phone portrait: center the complete SOLOKO logo vertically
   across the full upper backdrop (the viewport gap above the game + the covered
   legacy header), rather than only inside the game header. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .phone-top-logo{
    position:fixed;
    left:50%;
    /* Game is 9:16 on phone. The visible upper backdrop ends at 10.35% of
       the game height. This places the logo at the midpoint of that whole area. */
    top:calc(25dvh - 35.244444vw);
    width:58vw;
    max-width:348px;
    height:auto;
    transform:translate(-50%,-50%);
    z-index:4;
  }
}

/* Revision 34 — seven-tile playtest.
   Enlarge the rack tiles, give the footer a little more height, and reclaim
   phone space from the top logo banner while keeping the logo proportional. */
.rack{grid-template-columns:repeat(7,1fr);aspect-ratio:7.24/1}
.rack .tile{font-size:7.55cqw}
.rack-area{height:13.35cqw}
html:not(.tablet-layout) .controls{top:89.7%;height:10.3%}
.tablet-layout .rack{grid-template-columns:repeat(7,1fr);aspect-ratio:auto}
.tablet-layout .rack-area{height:13.35cqw}
.tablet-layout .controls{top:89.7%;height:10.3%}
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) .game::after{height:9.35%}
  html:not(.tablet-layout) .hud{top:9.35%}
  html:not(.tablet-layout) .brand-band{top:21.7475%}
  html:not(.tablet-layout) .board-viewport{top:26.5%}
  html:not(.tablet-layout) .game::before{top:26.5%}
  html:not(.tablet-layout) .rack-area{top:calc(26.5% + 98.35cqw);height:13.35cqw}
  html:not(.tablet-layout) .phone-top-logo{
    position:absolute;
    top:4.675%;
    width:54%;
    max-width:none;
    height:auto;
  }
}

/* Readable points progress, matching the LEVEL green. */
.points-progress-value,.points-progress-value.preview-points{color:#24ae3e;text-shadow:none}
/* Match every circular bonus badge to the Versa badge diameter. */
.cell.dw:after,.cell.tl:after,.cell.dl:after{width:59.6%}
/* Revision 62: fixed breathing room between all footer actions on every layout. */
.controls{column-gap:5px}
/* Revision 63: unvalidated board tiles keep the same teal state as rack tiles. */
.game:not(.frozen) .cell>.tile:not(.locked){background-image:url("assets/tile-rack-original.png")}
/* Revision 68: validation status occupies the upper-right brand-band dead space. */
.validation-readout{position:absolute;left:42%;right:1.6%;top:50%;transform:translateY(-50%);width:auto;max-height:92%;display:flex;align-items:center;justify-content:center;gap:.45cqw;color:#3a8379;font-family:RobotoCounter,Roboto,sans-serif;font-weight:400;font-size:calc(2cqw + 2px);letter-spacing:.5px;line-height:1.2;text-align:center;white-space:nowrap;overflow:visible;z-index:8}
.validation-readout[hidden]{display:none}
.validation-readout>[hidden]{display:none!important}
.validation-readout .placement-warning-icon{flex:0 0 auto;font-size:1.05em}
.tablet-layout .validation-readout{font-size:calc(2cqw + 1px);letter-spacing:0}

/* Revision 75: tablet-only logo removal; stable footer geometry restored. */
.tablet-layout .brand-logo{display:none!important}

/* Revision 76: center the tablet CTA artwork in the visible footer area.
   The controls layer begins behind the rack, so compensate for that overlap. */
.tablet-layout .controls>.action,
.tablet-layout #swapBtn,
.tablet-layout #freezeBtn{top:1.695cqw}

/* Revision 77: tablet-only 25% visual reduction without changing CTA layout boxes. */
.tablet-layout .controls>.action>img{transform:scale(.75);transform-origin:center center}

/* Revision 78: shared dead-space status and tablet TF counter refinement. */
.validation-readout .placement-warning-icon{width:1.08em;height:1.08em;padding:0;border-radius:.24em;clip-path:none;line-height:1}
.tablet-layout #freezeCount{top:calc(.7cqw + 20px)}

/* Revision 79: tablet-only SEND emphasis, 15% larger than the reduced CTA size. */
.tablet-layout .controls>.action.send>img{transform:scale(.8625)}

/* Revision 80: suppress native blue tap/focus frames on footer CTAs. */
.controls>.action{-webkit-tap-highlight-color:transparent;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.controls>.action:focus,
.controls>.action:focus-visible{outline:none;box-shadow:none}

/* Revision 81: center the shared status within the dead space using equal padding. */
.validation-readout{left:42%;right:0;padding-inline:1.6cqw;box-sizing:border-box}

/* Revision 83: phone-only CTA reduction; SEND retains its current size. */
.phone-layout .controls>.action:not(.send)>img{transform:scale(.85);transform-origin:center center}

/* Revision 84: visually extend the phone footer through the lower viewport
   letterbox exposed by taller browser and itch.io frames. The 9:16 game stays
   centered and unchanged; only its mathematically calculated lower half-gap
   receives the footer's exact green. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
  html:not(.tablet-layout) body::before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:max(0px,calc((100dvh - 177.777778vw)/2));
    background:#3a8379;
    pointer-events:none;
    z-index:0;
  }
  html:not(.tablet-layout) .game{z-index:1}
}

/* Revision 84: tighten shared status/message tracking by 0.4px everywhere. */
.validation-readout{letter-spacing:.1px}
.tablet-layout .validation-readout{letter-spacing:-.4px}

/* Revision 85: halve the cumulative LEVEL progress-bar length everywhere. */
.level-progress-bar{flex-basis:14cqw;width:14cqw}