:root{color-scheme:dark;--ink:#f7f7f9;--muted:#afb0b9;--mint:#8ae2d2;--panel:#141518;--line:#35363b;--pink:#ff85ab;--blue:#80c8ff;--yellow:#ffe093;--green:#88e6ba;--violet:#c8afff}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#030304;color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #a1f4e0;outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}
main{max-width:1190px;padding:25px 18px 50px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:23px;flex-wrap:wrap}h1{font-size:clamp(31px,5vw,51px);letter-spacing:-2.5px;line-height:1.04;margin:4px 0}h1 em{color:#a2f1dc;font-style:normal}.eyebrow{font-size:11px;letter-spacing:2.3px;color:#98e5d4;font-weight:900}.lead{max-width:770px;color:#adb3bb;margin:8px 0 0}.version{font-size:11px;letter-spacing:.4px;border:1px solid #50525d;border-radius:999px;padding:8px 13px;color:#c5c5ca}
.layout{display:grid;grid-template-columns:minmax(330px,1fr) minmax(310px,.86fr);gap:18px;align-items:start}.panel{border:1px solid #303238;border-radius:23px;padding:18px;background:linear-gradient(155deg,#17191c,#0c0d11);box-shadow:0 20px 40px #0009}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:13px}.section-head h2{font-size:23px;letter-spacing:-.6px;margin:0}.section-head p{margin:4px 0 0;color:#a5aab4;font-size:12px}.chip{padding:7px 10px;background:#203a38;color:#adebdd;border:1px solid #47766e;border-radius:999px;white-space:nowrap;font-size:11px;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}.stat{border:1px solid #393b43;border-radius:12px;background:#1d2026;padding:9px 10px}.stat small{font-size:10px;letter-spacing:1px;color:#a2aab4;text-transform:uppercase;display:block;font-weight:800}.stat strong{font-size:24px;font-variant-numeric:tabular-nums;display:block}
.sheet{padding:10px 12px 14px;border-radius:19px;background:linear-gradient(145deg,#999ea2,#565d61);box-shadow:inset 0 2px 2px #ffffff77,inset 0 -7px 10px #171c2170,0 10px 18px #000b;border:1px solid #e0e4e78a}.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:8px 6px;border-radius:14px;background:linear-gradient(120deg,#b6bec1,#8d9396 45%,#a5abad);box-shadow:inset 0 4px 9px #ffffffa8,inset 0 -8px 8px #31383d6c;touch-action:manipulation;user-select:none}.cell{position:relative;aspect-ratio:1;min-width:0;background:transparent;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;padding:0;isolation:isolate;overflow:visible;touch-action:manipulation;box-shadow:none}.cell:focus-visible{outline-offset:2px}.cell::before{content:"";pointer-events:none;position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse at 30% 24%,#ffffffd9 0 9%,#e0e4e6 23%,#a7b0b4 55%,#6e797e 85%,#555e65 100%);box-shadow:inset 0 3px 7px #ffffff99,inset 0 -8px 12px #343c44a0,0 3px 5px #34363b88;border:1px solid #ecf0f180}.cell::after{content:"";pointer-events:none;position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse at 27% 20%,#ffffffaa 0 6%,#ffffff00 30%),linear-gradient(125deg,#ffffff44,#ffffff05 52%,#ffffff20);opacity:.8}.cell.filled::before{background:radial-gradient(ellipse at 29% 20%,color-mix(in srgb,var(--tile) 48%,white) 0 12%,color-mix(in srgb,var(--tile) 85%,white) 36%,var(--tile) 62%,color-mix(in srgb,var(--tile) 80%,black) 100%);border-color:#ffffffb5;box-shadow:inset 0 5px 7px #ffffff99,inset 0 -8px 13px #00000055,0 3px 5px #00000055}.cell.filled::after{opacity:.95}.cell.preview-ok::before{background:radial-gradient(ellipse at 29% 20%,color-mix(in srgb,var(--preview) 45%,white),color-mix(in srgb,var(--preview) 78%,white) 35%,var(--preview) 74%,color-mix(in srgb,var(--preview) 72%,black));opacity:.84;box-shadow:inset 0 5px 7px #ffffff99,inset 0 -8px 13px #00000055,0 0 0 2px #b7ffe8,0 0 14px #8cfad655}.cell.preview-ok::after{opacity:.92}.cell.preview-bad::before{box-shadow:inset 0 4px 6px #ffffff99,inset 0 -7px 12px #00000066,0 0 0 2px #ff697f,0 0 10px #ff697f77}.cell.preview-bad:not(.filled)::before{background:radial-gradient(circle at 35% 25%,#ffdde4,#df7290 65%,#833a55)}.cell.filled.pop-now::before{animation:popBubble .23s forwards}.cell.filled.pop-now::after{animation:popBubble .23s forwards}.cell.touched::before{animation:squish .18s ease}.board.bonus{touch-action:none}.board.bonus .cell{touch-action:none}.board.bonus .cell.filled{cursor:crosshair}.board.bonus .cell.filled::before{box-shadow:inset 0 5px 7px #ffffff99,inset 0 -8px 13px #00000055,0 0 0 2px #ffbdec,0 0 12px #ffbdec55}
@keyframes popBubble{0%{transform:scale(1);opacity:1}38%{transform:scale(1.21);filter:brightness(1.6)}100%{transform:scale(.18);opacity:0}}@keyframes squish{50%{transform:scale(.86)}}
.notice{border:1px solid #3b434c;background:#161d23;border-radius:11px;min-height:46px;padding:10px 12px;color:#cdd4db;font-size:12px;margin:13px 0}.notice[hidden]{display:none!important}.notice.good{background:#15322a;border-color:#387865;color:#cdfde4}.notice.bad{background:#382029;border-color:#915368;color:#ffe1e9}
.labelrow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}.labelrow h3{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#d2d8e0;margin:0}.labelrow span{font-size:11px;color:#939ba6}
.rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;touch-action:none;margin-bottom:12px}.piece{min-height:91px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:#242833;border:1px solid #505660;color:#f4f6ff;border-radius:12px;touch-action:none;user-select:none}.piece[aria-pressed=true]{border-color:#adf5e4;background:#27403f;box-shadow:inset 0 0 0 1px #adf5e444}.piece small{font-size:11px;color:#ccd0d9}.mini{display:grid;gap:3px}.minicell{width:15px;height:15px;border-radius:50%;background:#323943;box-shadow:inset 0 2px #ffffff18}.minicell.on{background:radial-gradient(circle at 25% 20%,#fff9,var(--mcolor) 52%,color-mix(in srgb,var(--mcolor) 70%,black));box-shadow:inset 0 2px #ffffff9c,0 3px 4px #0008;border:1px solid #ffffff44}
.buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.action{flex:1;min-width:100px;border-radius:11px;padding:10px 12px;border:1px solid #545c67;background:#29313c;color:#f3f7fc;font-weight:750}.action:hover{background:#374352}.action.primary{border-color:#b0f9e4;background:#86e2c7;color:#102821}.action.sample{border-color:#d3b186;background:#edbd7c;color:#34220e}.action.mode-on{border-color:#f3f7ff;background:#1e2026;color:#fff}
.side{display:flex;flex-direction:column;gap:12px}.side .panel{padding:17px}.side h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:0 0 9px}.side p{color:#abb0ba;font-size:12px;margin:4px 0 8px}.meter{display:flex;gap:5px;margin:9px 0}.meter span{flex:1;height:8px;background:#313b44;border-radius:8px}.meter span.on{background:#9cead9;box-shadow:0 0 8px #8cfad655}.bonus-banner{background:linear-gradient(110deg,#603a65,#c05d99);border:1px solid #ffc9ec;border-radius:13px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.bonus-banner[hidden]{display:none}.bonus-banner strong{font-size:15px}.bonus-banner .seconds{font-size:30px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}.time-track{height:6px;background:#ffffff4b;margin-top:7px;border-radius:99px;overflow:hidden}.time-track i{display:block;height:100%;width:100%;background:#ffe6a4;transform-origin:left}.soundarea{border:1px solid #303841;border-radius:12px;background:#1b2028;padding:13px}.soundarea label.filepick{display:inline-flex;cursor:pointer;background:#303947;border:1px solid #677381;padding:9px 12px;border-radius:10px;font-weight:750;font-size:12px}.filepick input{position:absolute;width:1px;height:1px;opacity:0}.soundarea .buttons{margin:9px 0}.soundarea output{font-size:11px;color:#c0c5d1}.trim-row{display:flex;gap:8px;align-items:center;margin-top:8px}.trim-row input{min-width:30px;flex:1;accent-color:#c6f6e5}.soundarea .help{margin-top:8px;font-size:11px;color:#8d96a7}.footer{margin-top:16px;font-size:11px;color:#7f858e}
.floating{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%);padding:10px;background:#191d24c9;border-radius:15px;box-shadow:0 12px 34px #000b;border:1px solid #ffffff4a}.floating .mini{gap:5px}.floating .minicell{width:29px;height:29px}.popup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:170;pointer-events:none;font-weight:1000;font-size:clamp(22px,4.4vw,42px);line-height:1.02;letter-spacing:.7px;padding:0;background:transparent;color:#ffffff;text-align:center;white-space:nowrap;text-shadow:0 2px 0 rgba(8,17,23,.62),0 0 14px rgba(7,20,26,.48),0 10px 26px rgba(0,0,0,.26);animation:popup 1.06s cubic-bezier(.2,.74,.17,1) forwards}.popup.pop{color:#ffffff}.popup.combo{color:#fff4b8}.popup.chain{color:#d6fff0}.popup.ready{color:#f4ffff}.popup.warn{color:#ffd9e6}@keyframes popup{0%{opacity:0;transform:translate(-50%,-43%) scale(.68)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}72%{opacity:1;transform:translate(-50%,-54%) scale(1)}100%{opacity:0;transform:translate(-50%,-67%) scale(.96)}}
@media(max-width:925px){.layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr}.side .panel:last-child{grid-column:1/-1}}@media(max-width:580px){main{padding:16px 11px 35px}.stats{grid-template-columns:repeat(2,1fr)}.panel{padding:13px}.sheet{padding:7px}.board{gap:3px;padding:4px}.cell{border-radius:7px}.piece{min-height:83px}.side{display:flex}.floating .minicell{width:23px;height:23px}}

/* v8: only colored, occupied bubbles are living characters. */
.board{position:relative;overflow:visible}
.cell{overflow:hidden}
.face{position:absolute;z-index:4;left:50%;top:28%;transform:translate(-50%,-50%) rotate(-10deg);display:flex;align-items:flex-start;justify-content:center;gap:7px;pointer-events:none;animation:headWiggle 6.3s ease-in-out infinite;animation-delay:var(--face-delay,0s)}
.eye{position:relative;width:clamp(8px,1.35vw,13px);height:clamp(10px,1.75vw,17px);border-radius:58% 58% 54% 54%;background:linear-gradient(145deg,#fff,#e2eaf5);border:1px solid #ffffffd4;box-shadow:inset -1px -2px 2px #a2a5af55,0 1px 2px #20212875;transform-origin:50% 55%}
.face .eye:first-child{width:clamp(9px,1.55vw,14px);height:clamp(11px,1.95vw,18px);transform:translate(3px,3px) rotate(-21deg);scale:1.02;animation:blinkL var(--blink-speed,5.6s) ease-in-out infinite,eyeGrowL 3.7s ease-in-out infinite;animation-delay:var(--face-delay,0s),calc(var(--face-delay,0s) - .7s)}
.face .eye:last-child{width:clamp(11px,1.95vw,17px);height:clamp(14px,2.35vw,21px);transform:translate(-3px,-3px) rotate(15deg);scale:1.13;animation:blinkR calc(var(--blink-speed,5.6s) * 1.09) ease-in-out infinite,eyeGrowR 4.8s ease-in-out infinite;animation-delay:calc(var(--face-delay,0s) - .15s),calc(var(--face-delay,0s) - 1.2s)}
.pupil{position:absolute;width:46%;height:42%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#505265,#050609 72%)}
.face .eye:first-child .pupil{top:47%;left:34%;animation:lookAroundLeft 4.1s ease-in-out infinite;animation-delay:var(--gaze-delay,0s)}
.face .eye:last-child .pupil{top:39%;left:50%;animation:lookAroundRight 4.9s ease-in-out infinite;animation-delay:calc(var(--gaze-delay,0s) - .45s)}
.cell.filled::before,.overlay-bubble::before,.floating-bubble::before{animation:gooSquish 5.8s ease-in-out infinite;animation-delay:var(--squish-delay,0s)}
.cell:not(.filled) .face{display:none}
.cell.filled .face{filter:drop-shadow(0 1px 1px #0008)}
@keyframes blinkL{0%,6%,7.3%,27%,28.2%,56%,57.2%,84%,100%{transform:scaleY(1)}6.7%,27.6%,56.8%{transform:scaleY(.05)}}
@keyframes blinkR{0%,9%,10.1%,37%,38.2%,68%,69.1%,92%,100%{transform:scaleY(1)}9.5%,37.6%,68.6%{transform:scaleY(.05)}}
@keyframes eyeGrowL{0%,100%{scale:1.02}22%{scale:1.18 1.28}48%{scale:.95 1.02}71%{scale:1.08 .96}}
@keyframes eyeGrowR{0%,100%{scale:1.13}19%{scale:1.28 1.13}46%{scale:.98 1.05}72%{scale:1.16 .93}}
@keyframes lookAroundLeft{0%,14%,100%{transform:translate(0,0)}20%,36%{transform:translate(-4px,-1px)}48%,65%{transform:translate(3px,1px)}77%,89%{transform:translate(-2px,2px)}}
@keyframes lookAroundRight{0%,12%,100%{transform:translate(0,0)}18%,31%{transform:translate(4px,-1px)}45%,63%{transform:translate(-3px,1px)}74%,90%{transform:translate(1px,2px)}}
@keyframes headWiggle{0%,100%{transform:translate(-50%,-50%) rotate(-12deg)}50%{transform:translate(-50%,-53%) rotate(9deg)}}
@keyframes gooSquish{0%,100%{transform:scale(1,1)}24%{transform:scale(1.05,.97)}47%{transform:scale(.98,1.04)}72%{transform:scale(1.03,.99)}}
.shape-overlay{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:visible}
.overlay-bubble{position:absolute;border-radius:50%;border:0;background:transparent;box-shadow:none;transform:scale(1.08);isolation:isolate}
.overlay-bubble::before,.floating-bubble::before{content:"";position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse at 28% 19%,color-mix(in srgb,var(--tile) 42%,white) 0 10%,color-mix(in srgb,var(--tile) 80%,white) 34%,var(--tile) 62%,color-mix(in srgb,var(--tile) 75%,black));box-shadow:inset 0 5px 8px #ffffffaa,inset 0 -8px 10px #0006,0 4px 6px #0008;border:1px solid #ffffffd9}
.overlay-bubble::after,.floating-bubble::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 23% 18%,#ffffff90,transparent 31%);pointer-events:none}
.shape-overlay.blocked .overlay-bubble::before{box-shadow:inset 0 5px 8px #ffffffaa,inset 0 -8px 10px #0006,0 0 0 2px #ff667d,0 0 12px #ff667d99;opacity:.86}
.shape-overlay.blocked .overlay-bubble::before{filter:saturate(.72)}
.floating{z-index:110;display:grid;gap:5px;transform:translate(-50%,-50%);background:none;box-shadow:none;border:0;padding:0;border-radius:0;filter:drop-shadow(0 12px 14px #0009);overflow:visible}
.floating-bubble,.floating-gap{height:var(--drag-size);width:var(--drag-size)}
.floating-bubble{position:relative;border-radius:50%;background:transparent;box-shadow:none;isolation:isolate}
.floating-gap{background:transparent}
.floating .face,.shape-overlay .face{opacity:1}
@media(max-width:580px){.eye{width:8px;height:11px}.face{gap:1px}}
@media(prefers-reduced-motion:reduce){.face,.eye,.pupil{animation:none}}

/* v15 layout + juice pass */
.layout{display:block;max-width:1040px;margin:0 auto}
.section-head{justify-content:center;text-align:center}.chip{display:none}
.play-stage{display:grid;grid-template-columns:minmax(0,620px) 260px;justify-content:center;gap:18px;align-items:start}.board-col{display:flex;flex-direction:column;align-items:center}.queue-col{display:flex;flex-direction:column;gap:12px;align-self:start;padding-top:52px}.queue-col .labelrow{width:100%;margin-bottom:0}.queue-col .labelrow h3{font-size:13px}.queue-col .rack{grid-template-columns:1fr;gap:14px;margin:0;width:100%}.queue-col .piece{min-height:120px;border-radius:16px;padding:14px 10px}.queue-col .piece small{font-size:13px}.queue-col .mini{gap:4px}.queue-col .minicell{width:19px;height:19px}.side{display:none}.ghost-ui{display:none}.panel{padding:18px 18px 22px}.bonus-banner{max-width:620px;margin:0 auto 12px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(190px,240px));justify-content:center;gap:12px;width:100%;max-width:620px;margin:0 auto 16px}.stat{text-align:center;padding:10px 14px}.stat strong{font-size:30px}
#sheet{width:min(620px,100%)}
.notice{max-width:620px;width:100%;margin:14px auto 0}.buttons{max-width:620px;width:100%;justify-content:center}.buttons .action{flex:0 1 180px}
.cell.filled{filter:drop-shadow(0 0 0 transparent);transition:filter .2s ease,transform .18s ease}.cell.filled.juice{filter:drop-shadow(0 0 10px rgba(255,255,255,.28))}
.sheet.shake{animation:boardShake .28s linear 1}.sheet.combo-glow{box-shadow:inset 0 2px 2px #ffffff77,inset 0 -7px 10px #171c2170,0 10px 18px #000b,0 0 0 2px rgba(255,247,186,.35),0 0 28px rgba(255,228,146,.28)}
@keyframes boardShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}
.pop-spark{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:150;background:radial-gradient(circle at 30% 30%,#fff,#ffe28b 50%,#ff7aa6 90%);box-shadow:0 0 8px rgba(255,223,132,.7);animation:sparkBurst .55s ease-out forwards}.pop-spark.big{width:16px;height:16px;background:radial-gradient(circle at 30% 30%,#fff,#ffe8a8 46%,#7ef0d7 90%)}
@keyframes sparkBurst{0%{transform:translate(0,0) scale(.6);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.fly-eye{position:fixed;z-index:180;pointer-events:none;width:16px;height:20px;border-radius:56% 56% 53% 53%;background:linear-gradient(145deg,#fff,#dfe7f1);border:1px solid #ffffffd5;box-shadow:inset -1px -2px 2px #a2a5af55,0 1px 2px #20212875;animation:flyEye .65s cubic-bezier(.2,.8,.2,1) forwards}.fly-eye::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#4f5265,#050609 72%)}
@keyframes flyEye{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.2);opacity:0}}
.eye::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;bottom:45%;border-radius:60% 60% 45% 45%;background:rgba(25,29,38,.02);opacity:0;transition:all .32s ease}
.sleepy-mode .cell.filled .face,.sleepy-mode .floating-bubble .face,.sleepy-mode .shape-overlay .face{transform:translate(-50%,-46%) rotate(-8deg)!important}
.sleepy-mode .cell.filled .eye,.sleepy-mode .floating-bubble .eye,.sleepy-mode .shape-overlay .eye{animation:none!important;transform:scaleY(.58)!important}
.sleepy-mode .cell.filled .eye::after,.sleepy-mode .floating-bubble .eye::after,.sleepy-mode .shape-overlay .eye::after{bottom:8%;background:linear-gradient(180deg,rgba(70,74,89,.92),rgba(36,38,48,.82));opacity:.98}
.sleepy-mode .cell.filled .pupil,.sleepy-mode .floating-bubble .pupil,.sleepy-mode .shape-overlay .pupil{animation:none!important;transform:translate(0,2px) scale(.82)!important}
.sleepy-mode .cell.filled::before,.sleepy-mode .floating-bubble::before,.sleepy-mode .shape-overlay .overlay-bubble::before{animation:gooSleepBob 3.6s ease-in-out infinite!important}
@keyframes gooSleepBob{0%,100%{transform:scale(1,.99)}50%{transform:scale(.98,1.02)}}
@media(max-width:925px){.play-stage{grid-template-columns:1fr;justify-items:center}.queue-col{padding-top:8px;width:min(620px,100%)}.queue-col .rack{grid-template-columns:repeat(3,1fr)}.queue-col .piece{min-height:98px}.queue-col .minicell{width:16px;height:16px}}
@media(max-width:580px){.stats{grid-template-columns:repeat(2,minmax(120px,1fr))}.queue-col .rack{grid-template-columns:1fr}.buttons .action{flex:1 1 100%}}


/* v16 queue alignment + improved sleepy eyes */
.play-stage{display:grid;grid-template-columns:minmax(0,620px) 280px;justify-content:center;gap:20px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(2,minmax(190px,240px));justify-content:center;gap:12px;width:100%;max-width:620px;margin:0 auto 18px}.stat{text-align:center;padding:10px 14px}.stat strong{font-size:30px}
.board-col{display:flex;flex-direction:column;align-items:center}
.queue-col{position:relative;display:block;align-self:start;width:280px;padding-top:0}
.queue-col .labelrow{position:absolute;left:0;right:0;top:-36px;width:100%;margin:0}.queue-col .labelrow h3{font-size:13px}.queue-col .rack{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);align-content:stretch;height:100%;gap:0;width:100%}.queue-col .piece{min-height:0;height:auto;align-self:stretch;border-radius:18px;padding:16px 12px;display:flex;justify-content:center;gap:10px}.queue-col .piece:nth-child(2){align-self:center}.queue-col .piece small{font-size:13px}.queue-col .mini{gap:4px}.queue-col .minicell{width:20px;height:20px}
.notice{max-width:620px;width:100%;margin:16px auto 0}.buttons{max-width:620px;width:100%;justify-content:center}
.sleepy-mode .cell.filled .face,.sleepy-mode .floating-bubble .face,.sleepy-mode .shape-overlay .face{animation:sleepyHeadNod 4.6s ease-in-out infinite!important;transform:translate(-50%,-48%) rotate(-8deg)!important}
.sleepy-mode .cell.filled .eye:first-child,.sleepy-mode .floating-bubble .eye:first-child,.sleepy-mode .shape-overlay .eye:first-child{animation:drowsyBlinkL 4.8s ease-in-out infinite!important}
.sleepy-mode .cell.filled .eye:last-child,.sleepy-mode .floating-bubble .eye:last-child,.sleepy-mode .shape-overlay .eye:last-child{animation:drowsyBlinkR 5.1s ease-in-out infinite!important}
.sleepy-mode .cell.filled .eye,.sleepy-mode .floating-bubble .eye,.sleepy-mode .shape-overlay .eye{transform-origin:50% 52%}
.sleepy-mode .cell.filled .eye::after,.sleepy-mode .floating-bubble .eye::after,.sleepy-mode .shape-overlay .eye::after{opacity:1;bottom:34%;background:linear-gradient(180deg,rgba(91,95,112,.92),rgba(41,45,57,.92));animation:heavyLid 4.6s ease-in-out infinite!important}
.sleepy-mode .cell.filled .pupil,.sleepy-mode .floating-bubble .pupil,.sleepy-mode .shape-overlay .pupil{animation:sleepyPupil 4.6s ease-in-out infinite!important}
.sleepy-mode .cell.filled::before,.sleepy-mode .floating-bubble::before,.sleepy-mode .shape-overlay .overlay-bubble::before{animation:gooSleepBob 4.6s ease-in-out infinite!important}
@keyframes sleepyHeadNod{0%,100%{transform:translate(-50%,-48%) rotate(-9deg)}22%{transform:translate(-50%,-45%) rotate(-6deg)}54%{transform:translate(-50%,-55%) rotate(4deg)}76%{transform:translate(-50%,-50%) rotate(-2deg)}}
@keyframes drowsyBlinkL{0%,100%{transform:translate(3px,3px) rotate(-21deg) scaleY(1)}20%{transform:translate(3px,3px) rotate(-21deg) scaleY(.86)}48%{transform:translate(3px,4px) rotate(-19deg) scaleY(.52)}60%{transform:translate(3px,4px) rotate(-18deg) scaleY(.32)}76%{transform:translate(3px,3px) rotate(-21deg) scaleY(.72)}}
@keyframes drowsyBlinkR{0%,100%{transform:translate(-3px,-3px) rotate(15deg) scaleY(1)}18%{transform:translate(-3px,-2px) rotate(14deg) scaleY(.9)}44%{transform:translate(-3px,-1px) rotate(13deg) scaleY(.58)}62%{transform:translate(-3px,0) rotate(12deg) scaleY(.3)}80%{transform:translate(-3px,-2px) rotate(14deg) scaleY(.76)}}
@keyframes heavyLid{0%,100%{bottom:44%;opacity:.25}22%{bottom:34%;opacity:.45}48%{bottom:18%;opacity:.78}60%{bottom:6%;opacity:.98}76%{bottom:16%;opacity:.82}90%{bottom:32%;opacity:.5}}
@keyframes sleepyPupil{0%,100%{transform:translate(0,0) scale(1)}24%{transform:translate(-1px,2px) scale(.92)}52%{transform:translate(0,4px) scale(.78)}74%{transform:translate(1px,2px) scale(.9)}}
@media(max-width:925px){.play-stage{grid-template-columns:1fr;justify-items:center}.queue-col{width:min(620px,100%);height:auto!important;margin-top:10px}.queue-col .labelrow{position:static;margin-bottom:8px}.queue-col .rack{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:14px;height:auto}.queue-col .piece{min-height:98px}.queue-col .minicell{width:16px;height:16px}}
@media(max-width:580px){.stats{grid-template-columns:repeat(2,minmax(120px,1fr))}.queue-col .rack{grid-template-columns:1fr}.buttons .action{flex:1 1 100%}}


/* v17 organic sleepy motion */
.cell.filled::before,.overlay-bubble::before,.floating-bubble::before{animation:gooOrganic 7.4s ease-in-out infinite!important;animation-delay:var(--squish-delay,0s)}
@keyframes gooOrganic{0%,100%{transform:translate(0,0) scale(1,1) rotate(0deg)}16%{transform:translate(.5px,-.3px) scale(1.018,.988) rotate(-1.2deg)}33%{transform:translate(-.6px,.35px) scale(.992,1.02) rotate(.7deg)}51%{transform:translate(.35px,.2px) scale(1.012,.994) rotate(-.6deg)}74%{transform:translate(-.45px,-.25px) scale(.988,1.016) rotate(.9deg)}89%{transform:translate(.2px,.1px) scale(1.008,.995) rotate(-.4deg)}}
.fly-eye{position:fixed;z-index:180;pointer-events:none;width:16px;height:20px;border-radius:56% 56% 53% 53%;background:linear-gradient(145deg,#fff,#dfe7f1);border:1px solid #ffffffd5;box-shadow:inset -1px -2px 2px #a2a5af55,0 1px 2px #20212875;filter:blur(.15px);animation:flyEye var(--dur,.95s) cubic-bezier(.18,.84,.18,1) forwards}.fly-eye::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#4f5265,#050609 72%)}
@keyframes flyEye{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}70%{opacity:.86}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.12);opacity:0}}
.sleepy-mode .cell.filled .face,.sleepy-mode .floating-bubble .face,.sleepy-mode .shape-overlay .face{animation:sleepyHeadNod 5.2s ease-in-out infinite!important;animation-delay:var(--sleep-delay,0s)!important;transform:translate(-50%,-48%) rotate(-8deg)!important}
.sleepy-mode .cell.filled .eye:first-child,.sleepy-mode .floating-bubble .eye:first-child,.sleepy-mode .shape-overlay .eye:first-child{animation:drowsyBlinkL 5.8s ease-in-out infinite!important;animation-delay:var(--sleep-delay,0s)!important}
.sleepy-mode .cell.filled .eye:last-child,.sleepy-mode .floating-bubble .eye:last-child,.sleepy-mode .shape-overlay .eye:last-child{animation:drowsyBlinkR 6.25s ease-in-out infinite!important;animation-delay:calc(var(--sleep-delay,0s) - .95s)!important}
.sleepy-mode .cell.filled .eye::after,.sleepy-mode .floating-bubble .eye::after,.sleepy-mode .shape-overlay .eye::after{opacity:1;bottom:34%;background:linear-gradient(180deg,rgba(91,95,112,.92),rgba(41,45,57,.92));animation:heavyLid 5.2s ease-in-out infinite!important;animation-delay:var(--sleep-delay,0s)!important}
.sleepy-mode .cell.filled .pupil,.sleepy-mode .floating-bubble .pupil,.sleepy-mode .shape-overlay .pupil{animation:sleepyPupil 5.2s ease-in-out infinite!important;animation-delay:var(--sleep-delay,0s)!important}
.sleepy-mode .cell.filled::before,.sleepy-mode .floating-bubble::before,.sleepy-mode .shape-overlay .overlay-bubble::before{animation:gooSleepBob 5.2s ease-in-out infinite!important;animation-delay:var(--sleep-delay,0s)!important}
@keyframes sleepyHeadNod{0%,100%{transform:translate(-50%,-48%) rotate(-9deg)}18%{transform:translate(-50%,-46%) rotate(-7deg)}44%{transform:translate(-50%,-50%) rotate(-4deg)}58%{transform:translate(-50%,-56%) rotate(2deg)}76%{transform:translate(-50%,-52%) rotate(-1deg)}}
@keyframes drowsyBlinkL{0%,100%{transform:translate(3px,3px) rotate(-21deg) scaleY(1)}16%{transform:translate(3px,3px) rotate(-21deg) scaleY(.92)}34%{transform:translate(3px,4px) rotate(-19deg) scaleY(.58)}48%{transform:translate(3px,4px) rotate(-18deg) scaleY(.22)}63%{transform:translate(3px,4px) rotate(-18deg) scaleY(.18)}82%{transform:translate(3px,3px) rotate(-21deg) scaleY(.78)}}
@keyframes drowsyBlinkR{0%,100%{transform:translate(-3px,-3px) rotate(15deg) scaleY(1)}12%{transform:translate(-3px,-2px) rotate(14deg) scaleY(.94)}30%{transform:translate(-3px,-1px) rotate(13deg) scaleY(.68)}46%{transform:translate(-3px,0) rotate(12deg) scaleY(.28)}61%{transform:translate(-3px,0) rotate(12deg) scaleY(.15)}79%{transform:translate(-3px,-2px) rotate(14deg) scaleY(.74)}}
@keyframes heavyLid{0%,100%{bottom:44%;opacity:.22}18%{bottom:38%;opacity:.36}38%{bottom:24%;opacity:.62}52%{bottom:10%;opacity:.88}64%{bottom:4%;opacity:.98}79%{bottom:18%;opacity:.78}92%{bottom:34%;opacity:.42}}
@keyframes sleepyPupil{0%,100%{transform:translate(0,0) scale(1)}22%{transform:translate(-1px,2px) scale(.94)}47%{transform:translate(0,4px) scale(.76)}68%{transform:translate(1px,5px) scale(.72)}84%{transform:translate(1px,2px) scale(.9)}}
@keyframes gooSleepBob{0%,100%{transform:translate(0,0) scale(1,.995)}32%{transform:translate(.2px,.2px) scale(.992,1.01)}58%{transform:translate(-.3px,-.15px) scale(.985,1.018)}82%{transform:translate(.1px,.15px) scale(.995,1.005)}}


/* v18 layout and eye-pop refinement */
.play-stage{display:grid;grid-template-columns:minmax(0,620px) 300px;justify-content:center;gap:26px;align-items:start}
.board-col{display:flex;flex-direction:column;align-items:center;width:min(620px,100%)}
.board-col .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:14px;width:100%;max-width:620px;margin:0 0 18px 0}.board-col .stat{text-align:center;padding:10px 14px}.board-col .stat strong{font-size:30px}
.queue-col{position:relative;display:block;align-self:start;width:300px;padding-top:0}
.queue-col .labelrow{position:absolute;left:0;right:0;top:-38px;width:100%;margin:0}
.queue-col .rack{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));align-content:stretch;height:100%;gap:22px;width:100%}
.queue-col .piece{min-height:0;height:100%;border-radius:20px;padding:18px 14px;display:flex;justify-content:center;align-items:center;gap:14px}
.queue-col .piece small{font-size:14px;line-height:1.2}
.queue-col .mini{justify-content:center;align-items:center}
.queue-col .minicell{border-width:1px;box-shadow:inset 0 3px #ffffff8f,0 4px 6px #0008}
.notice{max-width:620px;width:100%;margin:16px auto 0}
.buttons{max-width:620px;width:100%;justify-content:flex-start}
.fly-eye{position:fixed;z-index:180;pointer-events:none;width:16px;height:20px;border-radius:56% 56% 53% 53%;background:linear-gradient(145deg,#fff,#dfe7f1);border:1px solid #ffffffd5;box-shadow:inset -1px -2px 2px #a2a5af55,0 1px 2px #20212875;filter:blur(.08px);animation:flyEyeBurst var(--dur,1.05s) cubic-bezier(.18,.84,.18,1) forwards}.fly-eye::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#4f5265,#050609 72%)}
@keyframes flyEyeBurst{0%{transform:translate(0,0) rotate(0deg) scale(.95);opacity:1}22%{transform:translate(calc(var(--dx)*.12),calc(var(--dy)*.12)) rotate(calc(var(--rot)*.16)) scale(1.28);opacity:1}56%{transform:translate(calc(var(--dx)*.56),calc(var(--dy)*.56)) rotate(calc(var(--rot)*.56)) scale(1.58);opacity:.96}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.78);opacity:0}}
@media(max-width:925px){.play-stage{grid-template-columns:1fr;justify-items:center}.board-col{width:min(620px,100%)}.board-col .stats{width:100%;max-width:620px}.queue-col{width:min(620px,100%);height:auto!important;margin-top:10px}.queue-col .labelrow{position:static;margin-bottom:10px}.queue-col .rack{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:14px;height:auto}.queue-col .piece{min-height:118px}.buttons{justify-content:center}}
@media(max-width:580px){.queue-col .rack{grid-template-columns:1fr}.board-col .stats{grid-template-columns:repeat(2,minmax(120px,1fr))}.buttons .action{flex:1 1 100%}}


/* v19 final queue visuals */
.play-stage{display:grid;grid-template-columns:minmax(0,620px) 320px;justify-content:center;gap:26px;align-items:start}
.board-col{display:flex;flex-direction:column;align-items:center;width:min(620px,100%)}
.board-col .stats{width:100%;max-width:620px;margin:0 0 18px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.queue-col{position:relative;display:block;align-self:start;width:320px;padding-top:0;background:transparent}
.queue-col .labelrow{position:absolute;left:0;right:0;top:-38px;width:100%;margin:0}
.queue-col .rack{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));height:100%;gap:26px;width:100%}
.queue-col .piece{height:100%;min-height:0;border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:transparent;border:1px solid #2d3542;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.queue-col .piece[aria-pressed=true]{background:#1f3d3b;border-color:#aef5e5;box-shadow:inset 0 0 0 1px rgba(173,245,228,.24),0 0 0 1px rgba(173,245,228,.14)}
.queue-col .piece small{font-size:14px;color:#d7dde7}
.queue-col .mini{display:grid;justify-content:center;align-content:center;place-content:center;place-items:center;margin:0 auto}
.queue-col .mini-rack{background:transparent}
.queue-col .minicell,.floating .minicell{border-radius:50%;background:#323943;box-shadow:inset 0 2px #ffffff18}
.queue-col .minicell.on,.floating .minicell.on{background:radial-gradient(circle at 25% 20%,#fff9,var(--mcolor) 52%,color-mix(in srgb,var(--mcolor) 70%,black));box-shadow:inset 0 3px #ffffff9c,0 5px 8px #0008;border:1px solid #ffffff44}
.queue-col .minicell.on{animation:rackAlive 6.8s ease-in-out infinite;animation-delay:var(--anim-delay,0s)}
.floating .minicell.on{animation:rackAlive 5.6s ease-in-out infinite;animation-delay:var(--anim-delay,0s)}
.minispacer{display:block;background:transparent;border:none;box-shadow:none;opacity:0}
.floating{background:#090b10d6;border-radius:18px;border:1px solid #ffffff30}.floating .mini{gap:6px}
.buttons{max-width:620px;width:100%;justify-content:flex-start}
@keyframes rackAlive{0%,100%{transform:translate(0,0) scale(1,1)}22%{transform:translate(.45px,-.35px) scale(1.018,.99)}48%{transform:translate(-.35px,.35px) scale(.992,1.016)}74%{transform:translate(.2px,.15px) scale(1.012,.994)}}
.fly-eye{position:fixed;z-index:180;pointer-events:none;width:16px;height:20px;border-radius:56% 56% 53% 53%;background:linear-gradient(145deg,#fff,#dfe7f1);border:1px solid #ffffffd5;box-shadow:inset -1px -2px 2px #a2a5af55,0 1px 2px #20212875;filter:blur(.06px);animation:flyEyeBurst var(--dur,1.1s) cubic-bezier(.18,.84,.18,1) forwards}.fly-eye::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#4f5265,#050609 72%)}
@keyframes flyEyeBurst{0%{transform:translate(0,0) rotate(0deg) scale(.9);opacity:1}18%{transform:translate(calc(var(--dx)*.08),calc(var(--dy)*.08)) rotate(calc(var(--rot)*.08)) scale(1.34);opacity:1}38%{transform:translate(calc(var(--dx)*.32),calc(var(--dy)*.32)) rotate(calc(var(--rot)*.3)) scale(1.7);opacity:.98}65%{transform:translate(calc(var(--dx)*.68),calc(var(--dy)*.68)) rotate(calc(var(--rot)*.7)) scale(1.95);opacity:.7}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(2.08);opacity:0}}
@media(max-width:925px){.play-stage{grid-template-columns:1fr;justify-items:center}.board-col{width:min(620px,100%)}.queue-col{width:min(620px,100%);height:auto!important;margin-top:10px}.queue-col .labelrow{position:static;margin-bottom:10px}.queue-col .rack{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:14px;height:auto}.queue-col .piece{min-height:136px}.queue-col .minicell.on{animation-duration:6.2s}.buttons{justify-content:center}}
@media(max-width:580px){.queue-col .rack{grid-template-columns:1fr}.buttons .action{flex:1 1 100%}.queue-col .minicell.on{animation-duration:5.6s}}


/* v20 english UI + centered queue */
.notice{display:none!important}
.queue-col .labelrow span{display:none!important}
.play-stage{display:grid;grid-template-columns:minmax(0,620px) 332px;justify-content:center;gap:24px;align-items:start}
.board-col{display:flex;flex-direction:column;align-items:center;width:min(620px,100%)}
.board-col .stats{width:100%;max-width:620px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px 0}
.queue-col{position:relative;display:block;align-self:start;width:332px;height:auto!important;padding-top:0;background:transparent}
.queue-col .labelrow{position:absolute;left:0;right:0;top:-40px;width:100%;margin:0;text-align:left}
.queue-col .rack{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(138px,1fr));gap:18px;width:100%;height:100%}
.queue-col .piece{height:100%;min-height:138px;border-radius:22px;padding:12px 16px 16px;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:10px;background:transparent;border:1px solid #2d3542;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.queue-col .piece[aria-pressed=true]{background:#1f3d3b;border-color:#aef5e5;box-shadow:inset 0 0 0 1px rgba(173,245,228,.24),0 0 0 1px rgba(173,245,228,.14)}
.queue-col .piece small{font-size:14px;color:#d7dde7;text-align:center}
.queue-col .mini{display:grid;justify-content:center;align-content:center;place-content:center;place-items:center;margin:0 auto}
.queue-col .mini-rack{background:transparent;transform:translateY(4px)}
.queue-col .minicell.on{animation:rackAlive 6.5s ease-in-out infinite, queueBlob 8.5s ease-in-out infinite;animation-delay:var(--anim-delay,0s),calc(var(--anim-delay,0s) - .8s);border-radius:46% 52% 50% 48%}
.floating .minicell.on{animation:rackAlive 5.6s ease-in-out infinite, queueBlob 7.3s ease-in-out infinite;animation-delay:var(--anim-delay,0s),calc(var(--anim-delay,0s) - .8s);border-radius:46% 52% 50% 48%}
@keyframes queueBlob{0%,100%{border-radius:48% 52% 50% 50%;transform:scale(1)}24%{border-radius:51% 46% 53% 48%;transform:scale(1.018,.992)}48%{border-radius:46% 54% 47% 53%;transform:scale(.992,1.014)}72%{border-radius:53% 48% 52% 47%;transform:scale(1.012,.994)}}
.fly-eye{position:fixed;z-index:180;pointer-events:none;background:linear-gradient(145deg,#fff,#dfe7f1);border:1px solid #ffffffd5;box-shadow:inset -1px -2px 2px #a2a5af55,0 1px 2px #20212875;filter:blur(.04px);animation:flyEyeBurstVar var(--dur,1.15s) cubic-bezier(.16,.84,.16,1) forwards;border-radius:var(--rad,56% 56% 53% 53%)}
.fly-eye::after{content:"";position:absolute;left:var(--pupil-left,5px);top:var(--pupil-top,8px);width:var(--pupil-size,7px);height:var(--pupil-size,7px);border-radius:50%;background:radial-gradient(circle at 30% 25%,#4f5265,#050609 72%)}
@keyframes flyEyeBurstVar{0%{transform:translate(0,0) rotate(0deg) scale(var(--start-scale,.95));opacity:1}22%{transform:translate(calc(var(--dx)*.08),calc(var(--dy)*.08)) rotate(calc(var(--rot)*.08)) scale(var(--grow1,1.22));opacity:1}48%{transform:translate(calc(var(--dx)*.34),calc(var(--dy)*.34)) rotate(calc(var(--rot)*.32)) scale(var(--grow2,1.56));opacity:.98}72%{transform:translate(calc(var(--dx)*.72),calc(var(--dy)*.72)) rotate(calc(var(--rot)*.72)) scale(var(--grow3,1.92));opacity:.66}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--grow4,2.18));opacity:0}}
@media(max-width:925px){.play-stage{grid-template-columns:1fr;justify-items:center}.queue-col{width:min(620px,100%)}.queue-col .labelrow{position:static;margin-bottom:8px}.queue-col .rack{grid-template-columns:repeat(3,1fr);grid-template-rows:none;height:auto}.queue-col .piece{min-height:142px}.buttons{justify-content:center}}
@media(max-width:580px){.queue-col .rack{grid-template-columns:1fr}.buttons .action{flex:1 1 100%}}


/* v21: single grid owns sizing; no JS measuring or inherited queue column layout */
#gameStage{
 display:grid!important;
 grid-template-columns:minmax(0,620px) minmax(274px,326px)!important;
 grid-template-rows:auto auto auto!important;
 grid-template-areas:"stats heading" "board queue" "actions ."!important;
 gap:16px 22px!important;
 justify-content:center;align-items:stretch;
 max-width:968px;width:100%;margin:0 auto;
}
#gameStage>.stats{
 grid-area:stats!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:14px!important;width:100%!important;max-width:none!important;margin:0!important;
 align-self:stretch;justify-content:stretch;
}
#gameStage>.stats .stat{display:flex;flex-direction:column;justify-content:center;text-align:center}
#gameStage>.queue-title{grid-area:heading;display:flex;align-items:flex-end;justify-content:center;
 text-transform:uppercase;letter-spacing:1.7px;font-weight:800;font-size:12px;color:#d5dce4;padding-bottom:8px}
#gameStage>#sheet{grid-area:board!important;display:block;width:100%!important;min-width:0;margin:0!important}
#gameStage>#rack{
 grid-area:queue!important;display:grid!important;grid-template-columns:1fr!important;
 grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:14px!important;
 height:100%!important;min-height:0;margin:0!important;width:100%!important;
 align-self:stretch;justify-self:stretch;
}
#gameStage>#rack>.piece{
 box-sizing:border-box;min-height:0!important;height:100%!important;min-width:0;
 display:flex!important;flex-direction:column;justify-content:center;align-items:center;
 gap:8px;padding:10px 8px!important;border-radius:18px;
 background:#0c0e13;border:1px solid #343b4a;overflow:hidden;
}
#gameStage>#rack>.piece[aria-pressed=true]{background:#193430;border-color:#a5f2dc}
#gameStage>#rack .mini{display:grid!important;place-items:center;place-content:center;justify-content:center;align-content:center;
 margin:0!important;transform:none!important;width:max-content;height:max-content}
#gameStage>#rack .minicell.on{position:relative;animation:rackAlive 7.1s ease-in-out infinite;animation-delay:var(--anim-delay,0s)}
#gameStage>#rack>.piece small{font-size:12px;line-height:1.1;white-space:nowrap;text-align:center;color:#bec9d6}
#gameStage>.stage-buttons{grid-area:actions!important;display:flex!important;justify-content:center!important;
 width:100%!important;max-width:none!important;margin:0!important;flex-wrap:wrap;gap:10px}
#gameStage>.stage-buttons>.action{flex:1 1 125px;max-width:220px}
#gameStage .minispacer{visibility:hidden;pointer-events:none;background:none!important;border:0!important;box-shadow:none!important}
/* visual relief of empty wrap is unchanged; only living colored bubbles pulse gently */
#gameStage .cell.filled:not(.pop-now)::before{
 animation:livingBlob 6.3s ease-in-out infinite!important;
 animation-delay:var(--squish-delay,0s)!important;
 transform-origin:50% 56%;will-change:transform,border-radius;
}
@keyframes livingBlob{
 0%,100%{transform:translate(0,0) scale(1,1);border-radius:50%}
 19%{transform:translate(.7px,-.7px) scale(1.036,.976);border-radius:47% 54% 49% 52%}
 43%{transform:translate(-.65px,.35px) scale(.972,1.033);border-radius:54% 47% 52% 48%}
 65%{transform:translate(.35px,.2px) scale(1.016,.99);border-radius:49% 51% 46% 55%}
 82%{transform:translate(-.4px,-.3px) scale(.987,1.02);border-radius:53% 47% 51% 49%}
}
#gameStage .cell.filled.pop-now::before{animation:bubbleInflatePop .31s ease-out forwards!important}
#gameStage .cell.filled.pop-now::after{animation:bubbleInflatePop .31s ease-out forwards!important}
#gameStage .cell.pop-now .face{visibility:hidden!important}
@keyframes bubbleInflatePop{
 0%{transform:scale(1);opacity:1;filter:brightness(1)}
 34%{transform:scale(1.11,.94);opacity:1}
 69%{transform:scale(1.22);opacity:1;filter:brightness(1.22)}
 100%{transform:scale(1.42);opacity:0;filter:brightness(1.55)}
}
.eye-pop{position:fixed;z-index:220;pointer-events:none;box-sizing:border-box;
 background:linear-gradient(138deg,#ffffff,#e4eaf4);border:1px solid #ffffffd0;
 box-shadow:inset -1px -2px 3px #9ca4b477,0 3px 6px #0008;
 transform-origin:50% 50%;animation:eyeInflateBurst cubic-bezier(.21,.8,.18,1) forwards;
}
.eye-pop-pupil{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 28%,#353e45,#030609 76%)}
@keyframes eyeInflateBurst{
 0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1;filter:brightness(1)}
 24%{transform:translate(calc(var(--drift-x)*.08),calc(var(--drift-y)*.06)) scale(1.16) rotate(calc(var(--tilt)*.10));opacity:1}
 49%{transform:translate(calc(var(--drift-x)*.24),calc(var(--drift-y)*.22)) scale(calc(var(--size-max)*.78)) rotate(calc(var(--tilt)*.24));opacity:1;filter:brightness(1.13)}
 69%{transform:translate(calc(var(--drift-x)*.55),calc(var(--drift-y)*.55)) scale(var(--size-max)) rotate(calc(var(--tilt)*.55));opacity:1;filter:brightness(1.5)}
 76%{transform:translate(calc(var(--drift-x)*.72),calc(var(--drift-y)*.7)) scale(calc(var(--size-max)*1.16)) rotate(calc(var(--tilt)*.76));opacity:1;filter:brightness(1.9)}
 78%{transform:translate(calc(var(--drift-x)*.78),calc(var(--drift-y)*.72)) scale(calc(var(--size-max)*1.24)) rotate(calc(var(--tilt)*.78));opacity:0}
 100%{transform:translate(var(--drift-x),var(--drift-y)) scale(calc(var(--size-max)*1.24)) rotate(var(--tilt));opacity:0}
}
.eye-fragment{position:fixed;z-index:225;pointer-events:none;border-radius:50%;background:#f6faff;
 box-shadow:0 0 4px #ffffffcc;animation:eyeShatter ease-out forwards}
@keyframes eyeShatter{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}
 100%{transform:translate(var(--dx),var(--dy)) scale(.15) rotate(var(--angle));opacity:0}}
@media(max-width:985px){#gameStage{grid-template-columns:minmax(0,620px) minmax(230px,280px)!important;gap:15px!important}}
@media(max-width:780px){
 #gameStage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"stats" "board" "heading" "queue" "actions"!important;gap:12px!important}
 #gameStage>#rack{height:auto!important;min-height:170px;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;gap:10px!important}
 #gameStage>#rack>.piece{min-height:135px!important;height:auto!important}
 #gameStage>.queue-title{justify-content:flex-start;padding:10px 0 0}
}
@media(max-width:480px){#gameStage>#rack{grid-template-columns:1fr!important;grid-template-rows:repeat(3,190px)!important}
 #gameStage>#rack>.piece{height:100%!important}
}


/* v23 unique pastel identity */
#gameStage .cell.filled::before,
#gameStage .overlay-bubble::before,
#gameStage .floating-bubble::before{
 background:radial-gradient(circle at 27% 18%,rgba(255,255,255,.96) 0 10%,color-mix(in srgb,var(--tile) 33%,white) 25%,color-mix(in srgb,var(--tile) 78%,white 22%) 44%,var(--tile) 67%,color-mix(in srgb,var(--tile) 58%,#59606b 42%) 100%)!important;
 border:1px solid color-mix(in srgb,var(--tile) 42%,white 58%)!important;
 box-shadow:inset 0 5px 8px rgba(255,255,255,.72),inset 0 -10px 15px rgba(69,75,84,.34),0 5px 9px rgba(0,0,0,.16)!important;
}
#gameStage .cell.filled::after,
#gameStage .overlay-bubble::after,
#gameStage .floating-bubble::after{background:radial-gradient(circle at 25% 17%,rgba(255,255,255,.82),transparent 28%),linear-gradient(130deg,rgba(255,255,255,.18),rgba(255,255,255,0) 58%,rgba(255,255,255,.1))!important}
#gameStage .cell.filled .face,
#gameStage .floating .face,
#gameStage .shape-overlay .face{top:31%!important;gap:4px!important;transform:translate(-50%,-50%) rotate(-6deg)!important}
#gameStage .cell.filled .eye,
#gameStage .floating .eye,
#gameStage .shape-overlay .eye{background:linear-gradient(145deg,#fff,#ebf1f9)!important;box-shadow:inset -1px -1px 2px rgba(170,176,188,.4),0 1px 2px rgba(32,33,40,.38)!important}
#gameStage .cell.filled .face .eye:first-child,
#gameStage .floating .face .eye:first-child,
#gameStage .shape-overlay .face .eye:first-child{width:clamp(8px,1.25vw,12px)!important;height:clamp(10px,1.65vw,15px)!important;transform:translate(1px,2px) rotate(-14deg)!important;scale:.98!important}
#gameStage .cell.filled .face .eye:last-child,
#gameStage .floating .face .eye:last-child,
#gameStage .shape-overlay .face .eye:last-child{width:clamp(10px,1.55vw,14px)!important;height:clamp(12px,1.95vw,17px)!important;transform:translate(-2px,-1px) rotate(10deg)!important;scale:1.03!important}
#gameStage .cell.filled .pupil,
#gameStage .floating .pupil,
#gameStage .shape-overlay .pupil{background:radial-gradient(circle at 30% 25%,#56546a,#191825 68%)!important}
#gameStage .cell.filled:not(.pop-now)::before{animation:livingBlob 6.8s ease-in-out infinite!important}
#gameStage>#rack .minicell.on{animation:rackAlive 7.1s ease-in-out infinite,queueBlob 9s ease-in-out infinite!important;border-radius:47% 53% 50% 48%}
#styleToggle{min-width:170px}
body[data-palette="dusk"] .version{color:#ffd7e6}


/* v24: explicit square board. iOS preview must not calculate row height from button aspect ratio. */
html,body{max-width:100%;overflow-x:hidden}
#gameStage>#sheet{
 box-sizing:border-box!important;
 width:100%!important;
 aspect-ratio:1 / 1!important;
 height:auto!important;
 min-height:0!important;
 align-self:start!important;
}
#gameStage>#sheet>#board{
 box-sizing:border-box!important;
 width:100%!important;
 height:100%!important;
 aspect-ratio:1 / 1!important;
 grid-template-columns:repeat(7,minmax(0,1fr))!important;
 grid-template-rows:repeat(7,minmax(0,1fr))!important;
}
#gameStage>#sheet>#board>.cell{
 box-sizing:border-box!important;
 min-width:0!important;min-height:0!important;
 width:100%!important;height:100%!important;
 aspect-ratio:auto!important;
}
@media (max-width:780px){
 main{padding:10px 10px 30px!important}
 header{margin:0 0 8px!important;padding:0!important;display:block!important}
 header .eyebrow,header .lead,header .version{display:none!important}
 header h1{font-size:24px!important;line-height:1.15!important;letter-spacing:-.75px!important;margin:0!important}
 .panel{padding:12px!important;border-radius:17px!important}
 .section-head{margin-bottom:9px!important}
 .section-head h2{font-size:18px!important}
 .section-head p{font-size:10px!important;margin:0!important}
 #gameStage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto auto auto auto!important;
  grid-template-areas:"stats" "board" "heading" "queue" "actions"!important;
  gap:10px!important;max-width:620px!important;width:100%!important;margin:0 auto!important;
  justify-content:stretch!important;align-items:start!important}
 #gameStage>.stats{grid-area:stats!important;gap:8px!important;margin:0!important}
 #gameStage>.stats .stat{padding:4px 7px!important;min-height:44px!important}
 #gameStage>.stats .stat small{font-size:9px!important}
 #gameStage>.stats .stat strong{font-size:23px!important;line-height:1.1!important}
 #gameStage>#sheet{grid-area:board!important;padding:7px!important;justify-self:center!important}
 #gameStage>#sheet>#board{gap:3px!important;padding:5px!important}
 #gameStage>.queue-title{grid-area:heading!important;font-size:11px!important;justify-content:center!important;padding:3px 0 0!important}
 #gameStage>#rack{grid-area:queue!important;width:100%!important;height:auto!important;
  min-height:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;gap:6px!important}
 #gameStage>#rack>.piece{box-sizing:border-box!important;min-width:0!important;
  min-height:102px!important;height:102px!important;padding:5px 2px!important;
  gap:4px!important;border-radius:11px!important;overflow:hidden!important}
 #gameStage>#rack>.piece small{font-size:9px!important;white-space:normal!important}
 #gameStage>#rack .mini-rack{--rack-bubble:clamp(15px,4.6vw,22px);--rack-gap:3px;
  grid-template-columns:repeat(var(--shape-cols),var(--rack-bubble))!important;
  gap:var(--rack-gap)!important}
 #gameStage>#rack .mini-rack .minicell,#gameStage>#rack .mini-rack .minispacer{
  width:var(--rack-bubble)!important;height:var(--rack-bubble)!important}
 #gameStage>.stage-buttons{grid-area:actions!important;display:flex!important;gap:7px!important;margin:0!important}
 #gameStage>.stage-buttons>.action{flex:1 1 0!important;min-width:0!important;padding:8px 4px!important;font-size:11px!important}
 .footer{display:none!important}
}
/* iPhone landscape: board occupies the available vertical space, cards stay beside it. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 html,body{width:100%!important;overflow-x:hidden!important}
 main{max-width:none!important;padding:4px 8px 12px!important}
 header,.section-head,.footer{display:none!important}
 .panel{padding:5px 7px!important;border-radius:11px!important}
 .layout{width:100%!important;max-width:100%!important}
 #gameStage{display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,195px)!important;
  grid-template-rows:auto auto auto!important;
  grid-template-areas:"stats heading" "board queue" "actions actions"!important;
  gap:5px 10px!important;max-width:800px!important;width:min(100%,calc(100dvh + 90px))!important;
  justify-content:center!important;align-items:center!important;margin:0 auto!important}
 #gameStage>.stats{grid-area:stats!important;display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;width:min(calc(100dvh - 117px),calc(100vw - 248px),520px)!important;
  justify-self:center!important}
 #gameStage>.stats .stat{padding:2px 6px!important;min-height:29px!important}
 #gameStage>.stats .stat small{font-size:8px!important;line-height:1!important}
 #gameStage>.stats .stat strong{font-size:17px!important;line-height:1.2!important}
 #gameStage>.queue-title{grid-area:heading!important;padding:0!important;font-size:10px!important;justify-content:center!important}
 #gameStage>#sheet{grid-area:board!important;
  width:min(calc(100dvh - 117px),calc(100vw - 248px),520px)!important;
  min-width:0!important;aspect-ratio:1 / 1!important;height:auto!important;
  padding:5px!important;justify-self:center!important;align-self:center!important;
  border-radius:12px!important}
 #gameStage>#sheet>#board{width:100%!important;height:100%!important;aspect-ratio:1 / 1!important;
  gap:2px!important;padding:4px!important;grid-template-rows:repeat(7,minmax(0,1fr))!important}
 #gameStage>#rack{grid-area:queue!important;display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  height:100%!important;min-height:0!important;gap:5px!important;width:100%!important;align-self:stretch!important}
 #gameStage>#rack>.piece{min-height:0!important;height:100%!important;padding:2px 4px!important;
  gap:1px!important;border-radius:9px!important;overflow:hidden!important}
 #gameStage>#rack>.piece small{font-size:9px!important;line-height:1.1!important}
 #gameStage>#rack .mini-rack{--rack-bubble:clamp(17px,6.4dvh,28px);--rack-gap:3px;
  grid-template-columns:repeat(var(--shape-cols),var(--rack-bubble))!important;
  gap:var(--rack-gap)!important}
 #gameStage>#rack .mini-rack .minicell,#gameStage>#rack .mini-rack .minispacer{
  width:var(--rack-bubble)!important;height:var(--rack-bubble)!important}
 #gameStage>.stage-buttons{grid-area:actions!important;display:flex!important;gap:6px!important;justify-content:center!important}
 #gameStage>.stage-buttons>.action{flex:0 1 150px!important;font-size:11px!important;padding:5px 6px!important;min-width:0!important}
}


.preview-warning{margin:10px auto;max-width:620px;padding:10px 12px;border:1px solid #e8ba73;border-radius:10px;background:#292217;color:#ffe1a8;font-size:12px;text-align:center}

/* v25 unique eye spacing - move away from Goo look */
#gameStage .cell.filled .face,
#gameStage .floating .face,
#gameStage .shape-overlay .face{
  top:30.5%!important;
  gap:8px!important;
  transform:translate(-50%,-50%) rotate(-4deg)!important;
}
#gameStage .cell.filled .face .eye:first-child,
#gameStage .floating .face .eye:first-child,
#gameStage .shape-overlay .face .eye:first-child{
  width:clamp(7px,1.15vw,11px)!important;
  height:clamp(9px,1.5vw,14px)!important;
  transform:translate(-1px,2px) rotate(-11deg)!important;
  scale:.94!important;
}
#gameStage .cell.filled .face .eye:last-child,
#gameStage .floating .face .eye:last-child,
#gameStage .shape-overlay .face .eye:last-child{
  width:clamp(9px,1.4vw,13px)!important;
  height:clamp(11px,1.75vw,16px)!important;
  transform:translate(1px,-1px) rotate(7deg)!important;
  scale:1.0!important;
}
#gameStage .cell.filled .eye,
#gameStage .floating .eye,
#gameStage .shape-overlay .eye{
  border-radius:56% 56% 52% 52%!important;
  background:linear-gradient(145deg,#fff,#edf2f8)!important;
}
#gameStage .cell.filled .pupil,
#gameStage .floating .pupil,
#gameStage .shape-overlay .pupil{
  width:41%!important;height:38%!important;
  background:radial-gradient(circle at 30% 25%,#5d667a,#232735 70%)!important;
}
#gameStage .cell.filled .face .eye:first-child .pupil,
#gameStage .floating .face .eye:first-child .pupil,
#gameStage .shape-overlay .face .eye:first-child .pupil{top:48%!important;left:31%!important}
#gameStage .cell.filled .face .eye:last-child .pupil,
#gameStage .floating .face .eye:last-child .pupil,
#gameStage .shape-overlay .face .eye:last-child .pupil{top:38%!important;left:47%!important}
/* slightly softer living body on board bubbles */
#gameStage .cell.filled:not(.pop-now)::before{
  animation:livingBlob 7.3s ease-in-out infinite, softBreath 5.4s ease-in-out infinite!important;
}
@keyframes softBreath{
  0%,100%{transform:scale(1,1)}
  30%{transform:scale(1.018,.99)}
  55%{transform:scale(.992,1.012)}
  78%{transform:scale(1.01,.996)}
}
/* mobile keep eyes readable */
@media(max-width:580px){
  #gameStage .cell.filled .face,
  #gameStage .floating .face,
  #gameStage .shape-overlay .face{gap:6px!important;top:29.5%!important}
}


/* v26 cartoon eye styles */
#gameStage .cell.filled .face,
#gameStage .floating .face,
#gameStage .shape-overlay .face{
  top:30.5%!important;
  gap:8px!important;
  transform:translate(-50%,-50%) rotate(-4deg)!important;
}
#gameStage .cell.filled .face .eye,
#gameStage .floating .face .eye,
#gameStage .shape-overlay .face .eye{
  position:relative;
  transform-origin:50% 55%!important;
}
#gameStage .cell.filled .face .eye.open-eye.small-eye,
#gameStage .floating .face .eye.open-eye.small-eye,
#gameStage .shape-overlay .face .eye.open-eye.small-eye{
  width:clamp(7px,1.14vw,11px)!important;
  height:clamp(9px,1.5vw,14px)!important;
  transform:translate(-1px,2px) rotate(-10deg)!important;
  scale:.95!important;
  animation:blinkL var(--blink-speed,5.6s) ease-in-out infinite,eyeGrowL 3.9s ease-in-out infinite!important;
}
#gameStage .cell.filled .face .eye.open-eye.big-eye,
#gameStage .floating .face .eye.open-eye.big-eye,
#gameStage .shape-overlay .face .eye.open-eye.big-eye{
  width:clamp(10px,1.55vw,14px)!important;
  height:clamp(12px,1.9vw,17px)!important;
  transform:translate(1px,-1px) rotate(8deg)!important;
  scale:1.02!important;
  animation:blinkR calc(var(--blink-speed,5.6s) * 1.05) ease-in-out infinite,eyeGrowR 4.6s ease-in-out infinite!important;
}
#gameStage .cell.filled .face .eye.tiny-eye,
#gameStage .floating .face .eye.tiny-eye,
#gameStage .shape-overlay .face .eye.tiny-eye{
  width:clamp(6px,0.95vw,9px)!important;
  height:clamp(7px,1.08vw,10px)!important;
  transform:translate(-1px,3px) rotate(-6deg)!important;
  scale:.9!important;
  animation:blinkL calc(var(--blink-speed,5.6s) * .94) ease-in-out infinite!important;
}
#gameStage .cell.filled .face .eye.wink-eye,
#gameStage .floating .face .eye.wink-eye,
#gameStage .shape-overlay .face .eye.wink-eye{
  width:clamp(10px,1.42vw,13px)!important;
  height:clamp(8px,1vw,10px)!important;
  transform:translate(-1px,3px) rotate(-10deg)!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  animation:winkBounce calc(var(--blink-speed,5.6s) * 1.1) ease-in-out infinite!important;
}
#gameStage .cell.filled .face .eye.wink-eye::before,
#gameStage .floating .face .eye.wink-eye::before,
#gameStage .shape-overlay .face .eye.wink-eye::before{
  content:"";
  position:absolute;left:0;right:0;top:42%;height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#fbfdff,#dfe5ef);
  box-shadow:0 1px 1px rgba(21,24,34,.35);
}
#gameStage .cell.filled .face .eye.x-eye,
#gameStage .floating .face .eye.x-eye,
#gameStage .shape-overlay .face .eye.x-eye{
  width:clamp(9px,1.25vw,12px)!important;
  height:clamp(9px,1.25vw,12px)!important;
  transform:translate(-1px,2px) rotate(-8deg)!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  animation:xEyeBop calc(var(--blink-speed,5.6s) * 1.08) ease-in-out infinite!important;
}
#gameStage .cell.filled .face .eye.x-eye::before,
#gameStage .cell.filled .face .eye.x-eye::after,
#gameStage .floating .face .eye.x-eye::before,
#gameStage .floating .face .eye.x-eye::after,
#gameStage .shape-overlay .face .eye.x-eye::before,
#gameStage .shape-overlay .face .eye.x-eye::after{
  content:"";
  position:absolute;left:50%;top:50%;width:2px;height:100%;
  background:linear-gradient(180deg,#f9fbff,#dfe4ec);
  border-radius:999px;
  transform-origin:center;
  box-shadow:0 1px 1px rgba(21,24,34,.28);
}
#gameStage .cell.filled .face .eye.x-eye::before,
#gameStage .floating .face .eye.x-eye::before,
#gameStage .shape-overlay .face .eye.x-eye::before{transform:translate(-50%,-50%) rotate(45deg)}
#gameStage .cell.filled .face .eye.x-eye::after,
#gameStage .floating .face .eye.x-eye::after,
#gameStage .shape-overlay .face .eye.x-eye::after{transform:translate(-50%,-50%) rotate(-45deg)}
#gameStage .cell.filled .face .eye.open-eye .pupil,
#gameStage .floating .face .eye.open-eye .pupil,
#gameStage .shape-overlay .face .eye.open-eye .pupil,
#gameStage .cell.filled .face .eye.tiny-eye .pupil,
#gameStage .floating .face .eye.tiny-eye .pupil,
#gameStage .shape-overlay .face .eye.tiny-eye .pupil{
  width:41%!important;height:38%!important;
  background:radial-gradient(circle at 30% 25%,#5d667a,#232735 70%)!important;
}
#gameStage .cell.filled .face .eye.small-eye .pupil,
#gameStage .floating .face .eye.small-eye .pupil,
#gameStage .shape-overlay .face .eye.small-eye .pupil{top:48%!important;left:31%!important;animation:lookAroundLeft 4.2s ease-in-out infinite!important}
#gameStage .cell.filled .face .eye.big-eye .pupil,
#gameStage .floating .face .eye.big-eye .pupil,
#gameStage .shape-overlay .face .eye.big-eye .pupil{top:38%!important;left:47%!important;animation:lookAroundRight 4.8s ease-in-out infinite!important}
#gameStage .cell.filled .face .eye.tiny-eye .pupil,
#gameStage .floating .face .eye.tiny-eye .pupil,
#gameStage .shape-overlay .face .eye.tiny-eye .pupil{top:42%!important;left:38%!important;animation:lookAroundLeft 5.3s ease-in-out infinite!important}
.eye-pop.wink-eye{background:transparent!important;border:none!important;box-shadow:none!important}
.eye-pop.wink-eye::before{content:"";position:absolute;left:0;right:0;top:42%;height:2px;border-radius:999px;background:linear-gradient(90deg,#fbfdff,#dfe5ef);box-shadow:0 1px 1px rgba(21,24,34,.35)}
.eye-pop.x-eye{background:transparent!important;border:none!important;box-shadow:none!important}
.eye-pop.x-eye::before,.eye-pop.x-eye::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:100%;background:linear-gradient(180deg,#f9fbff,#dfe4ec);border-radius:999px;transform-origin:center;box-shadow:0 1px 1px rgba(21,24,34,.28)}
.eye-pop.x-eye::before{transform:translate(-50%,-50%) rotate(45deg)}
.eye-pop.x-eye::after{transform:translate(-50%,-50%) rotate(-45deg)}
@keyframes winkBounce{0%,100%{transform:translate(-1px,3px) rotate(-10deg) scaleX(1)}38%{transform:translate(-1px,4px) rotate(-12deg) scaleX(.86)}62%{transform:translate(-1px,3px) rotate(-8deg) scaleX(1.06)}}
@keyframes xEyeBop{0%,100%{transform:translate(-1px,2px) rotate(-8deg) scale(1)}30%{transform:translate(-1px,3px) rotate(-5deg) scale(1.08)}54%{transform:translate(-1px,2px) rotate(-11deg) scale(.94)}78%{transform:translate(-1px,1px) rotate(-7deg) scale(1.03)}}


/* v27 character family tuning */
#gameStage .cell.filled .face.face-goofy,
#gameStage .floating .face.face-goofy,
#gameStage .shape-overlay .face.face-goofy{transform:translate(-50%,-50%) rotate(-6deg)!important}
#gameStage .cell.filled .face.face-curious,
#gameStage .floating .face.face-curious,
#gameStage .shape-overlay .face.face-curious{transform:translate(-50%,-50%) rotate(5deg)!important}
#gameStage .cell.filled .face.face-winker,
#gameStage .floating .face.face-winker,
#gameStage .shape-overlay .face.face-winker,
#gameStage .cell.filled .face.face-winker-r,
#gameStage .floating .face.face-winker-r,
#gameStage .shape-overlay .face.face-winker-r{transform:translate(-50%,-50%) rotate(-2deg)!important}
#gameStage .cell.filled .face.face-mini,
#gameStage .floating .face.face-mini,
#gameStage .shape-overlay .face.face-mini,
#gameStage .cell.filled .face.face-mini-r,
#gameStage .floating .face.face-mini-r,
#gameStage .shape-overlay .face.face-mini-r{gap:9px!important}
/* make X-eye rarer looking and darker */
#gameStage .cell.filled .face .eye.x-eye::before,
#gameStage .cell.filled .face .eye.x-eye::after,
#gameStage .floating .face .eye.x-eye::before,
#gameStage .floating .face .eye.x-eye::after,
#gameStage .shape-overlay .face .eye.x-eye::before,
#gameStage .shape-overlay .face .eye.x-eye::after,
.eye-pop.x-eye::before,.eye-pop.x-eye::after{
  background:linear-gradient(180deg,rgba(37,40,50,.92),rgba(11,12,18,.95))!important;
  box-shadow:0 1px 1px rgba(255,255,255,.08)!important;
}
/* sleepy lids use darker tone of the character color */
.sleepy-mode #gameStage .cell.filled .eye::after,
.sleepy-mode #gameStage .floating-bubble .eye::after,
.sleepy-mode #gameStage .shape-overlay .eye::after,
.sleepy-mode #gameStage .floating .eye::after{
  background:linear-gradient(180deg,color-mix(in srgb,var(--tile) 55%,black 45%),color-mix(in srgb,var(--tile) 32%,black 68%))!important;
  opacity:.98!important;
}
/* x and wink keep personality even when sleepy */
.sleepy-mode #gameStage .cell.filled .eye.x-eye,
.sleepy-mode #gameStage .floating .eye.x-eye,
.sleepy-mode #gameStage .shape-overlay .eye.x-eye,
.sleepy-mode #gameStage .cell.filled .eye.wink-eye,
.sleepy-mode #gameStage .floating .eye.wink-eye,
.sleepy-mode #gameStage .shape-overlay .eye.wink-eye{
  transform:scaleY(1)!important;
}
.sleepy-mode #gameStage .cell.filled .eye.x-eye::before,
.sleepy-mode #gameStage .cell.filled .eye.x-eye::after,
.sleepy-mode #gameStage .floating .eye.x-eye::before,
.sleepy-mode #gameStage .floating .eye.x-eye::after,
.sleepy-mode #gameStage .shape-overlay .eye.x-eye::before,
.sleepy-mode #gameStage .shape-overlay .eye.x-eye::after{
  background:linear-gradient(180deg,color-mix(in srgb,var(--tile) 34%,black 66%),color-mix(in srgb,var(--tile) 14%,black 86%))!important;
}
.sleepy-mode #gameStage .cell.filled .eye.wink-eye::before,
.sleepy-mode #gameStage .floating .eye.wink-eye::before,
.sleepy-mode #gameStage .shape-overlay .eye.wink-eye::before{
  background:linear-gradient(90deg,color-mix(in srgb,var(--tile) 58%,black 42%),color-mix(in srgb,var(--tile) 30%,black 70%))!important;
}


/* v28: true rare X, full crossed mark, and per-character tinted sleepy lids */
#gameStage .eye.x-eye::before,#gameStage .eye.x-eye::after,
.eye-pop.x-eye::before,.eye-pop.x-eye::after{display:none!important;content:none!important}
#gameStage .eye.x-eye .cartoon-x,.eye-pop.x-eye .cartoon-x{
 display:block!important;width:100%!important;height:100%!important;
 overflow:visible!important;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.1));
}
#gameStage .eye.x-eye .cartoon-x path,.eye-pop.x-eye .cartoon-x path{stroke:#343444!important;stroke-width:2.8!important}
/* Old ::after eyelid was grey and overlapped the X. Open eyes now use a real child element. */
#gameStage .eye.open-eye::after,#gameStage .eye.tiny-eye::after{display:none!important;content:none!important}
#gameStage .eye .lid{
 display:block;position:absolute;z-index:6;pointer-events:none;
 left:-1px;right:-1px;top:-1px;bottom:-1px;
 border-radius:55% 55% 46% 46%;
 transform-origin:top center;transform:scaleY(0);
 background:linear-gradient(to bottom,var(--lid-top,#698ca7),var(--lid-bottom,#47667d));
 box-shadow:inset 0 -1px 1px rgba(35,40,50,.15),0 1px 1px rgba(0,0,0,.13);
}
.sleepy-mode #gameStage .eye.open-eye .lid,
.sleepy-mode #gameStage .eye.tiny-eye .lid{
 animation:tintedHeavyLid 5.8s ease-in-out infinite!important;
 animation-delay:var(--sleep-delay,0s)!important;
}
@keyframes tintedHeavyLid{
 0%,100%{transform:scaleY(.16)}
 23%{transform:scaleY(.38)}
 45%{transform:scaleY(.72)}
 61%{transform:scaleY(.96)}
 77%{transform:scaleY(.66)}
 91%{transform:scaleY(.25)}
}
.sleepy-mode #gameStage .eye.x-eye::before,.sleepy-mode #gameStage .eye.x-eye::after{display:none!important}
/* Let the real tinted lid move: avoid old animation replacing it with grey pseudo-elements */
.sleepy-mode #gameStage .eye.open-eye,.sleepy-mode #gameStage .eye.tiny-eye{overflow:visible}


/* v29 fixes: no slash-only character, darker bubble-tinted X, and 3 rotating pop sounds */
#gameStage .eye.x-eye,.eye-pop.x-eye{color:var(--x-stroke,#343444)!important}
#gameStage .eye.x-eye .cartoon-x path,.eye-pop.x-eye .cartoon-x path{stroke:currentColor!important;stroke-width:2.8!important;vector-effect:non-scaling-stroke}
#gameStage .eye.x-eye .cartoon-x,.eye-pop.x-eye .cartoon-x{display:block!important;width:100%!important;height:100%!important}
/* keep sleepy lids colored from each bubble */
.sleepy-mode #gameStage .eye.open-eye .lid,
.sleepy-mode #gameStage .eye.tiny-eye .lid{opacity:1!important}


/* v31: subtle bump for one POP, big shake is reserved for a finished line. */
.sheet.shake-pop:not(.shake){animation:boardPopShake .16s ease-out 1}
@keyframes boardPopShake{
  0%,100%{transform:translate(0,0)}
  40%{transform:translate(-.8px,.45px)}
  75%{transform:translate(.6px,-.35px)}
}

/* v32 - optional bubble voices and gentle original music, with visual mute mouth */
.voice-music-controls{display:flex;align-items:center;justify-content:center;gap:10px;max-width:680px;margin:10px auto 0;flex-wrap:wrap}
.sound-toggle{appearance:none;border:1px solid #425360;border-radius:12px;padding:9px 15px;min-width:154px;background:#202831;color:#d5e9eb;font:700 12px/1.3 system-ui,-apple-system,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.sound-toggle[aria-pressed="true"]{border-color:#70ceb9;background:#183c38;color:#d6fff2}
.sound-toggle[aria-pressed="false"]{border-color:#58606a;background:#202329;color:#9ba6b1}
.sound-toggle:focus-visible{outline:2px solid #8ceac8;outline-offset:3px}
#gameStage .face .mute-mouth{display:none;position:absolute;left:50%;top:calc(100% + clamp(7px, 1vw, 13px));width:9px;height:9px;transform:translateX(-50%);color:var(--mouth-ink,#333645);opacity:.9;pointer-events:none}
#gameStage .face .mute-mouth svg{width:100%;height:100%;display:block;overflow:visible}
body.voices-muted #gameStage .cell.filled .face .mute-mouth,
body.voices-muted #gameStage .shape-overlay .face .mute-mouth,
body.voices-muted #gameStage .floating .face .mute-mouth{display:block}
@media(max-width:780px){.voice-music-controls{margin:7px auto 0;gap:6px}.sound-toggle{flex:1 1 120px;padding:8px 6px;min-width:0;font-size:11px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){.voice-music-controls{margin:3px auto 0;max-width:600px}.sound-toggle{padding:4px 8px;font-size:10px}#gameStage .face .mute-mouth{top:100%;width:7px;height:7px}}


/* v40: one canonical PVC look — close-packed domes, no X, no center glare.
   Replaces all experimental CSS from v34-v39 rather than overriding it. */
body.wrap-texture #gameStage>.sheet {
  position:relative;
  overflow:hidden;
  padding:9px 10px 11px !important;
  border:1px solid rgba(234,246,251,.67) !important;
  background:linear-gradient(140deg,#bfd0d8 0%,#93a6b2 52%,#9dafb7 100%) !important;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.56),inset 0 -5px 10px rgba(51,70,83,.32),0 9px 16px rgba(0,0,0,.38) !important;
}
body.wrap-texture #gameStage>.sheet::before {
  content:""; position:absolute;inset:5px;pointer-events:none;border-radius:15px;
  background:linear-gradient(130deg,rgba(255,255,255,.11),transparent 23% 74%,rgba(30,50,64,.06));
}
body.wrap-texture #gameStage #board {
  gap:1px !important;
  padding:3px !important;
  background:linear-gradient(145deg,#b3c3cb,#a2b4bd 65%,#b1c0c7) !important;
  box-shadow:inset 0 2px 7px rgba(255,255,255,.33),inset 0 -3px 7px rgba(55,74,86,.20) !important;
  overflow:hidden;
}
/* The empty cells are .cell:not(.filled), not .cell.empty. */
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::before {
  inset:0.9% !important;
  border-radius:50% !important;
  border:1px solid rgba(239,247,251,.69) !important;
  background:
    radial-gradient(circle at 24% 16%,rgba(255,255,255,.78) 0 2.6%,rgba(255,255,255,.19) 5.2%,transparent 12.5%),
    radial-gradient(circle at 50% 55%,rgba(199,216,225,.035) 0 48%,rgba(88,110,124,.08) 72%,rgba(43,64,79,.22) 100%) !important;
  box-shadow:inset 1px 2px 3px rgba(255,255,255,.36),inset -2px -3px 6px rgba(60,82,95,.18),0 1px 2px rgba(52,72,84,.11) !important;
}
/* Turn the old diagonal crossing and central light spot OFF at the source. */
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::after {
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}
/* Colored characters share the same sheet geometry, with a gentle top-left specular only. */
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::before,
body.wrap-texture #gameStage .overlay-bubble::before,
body.wrap-texture #gameStage .floating-bubble::before {
  inset:0.9% !important;
  border-radius:50% !important;
  border:1px solid rgba(249,252,253,.62) !important;
  background:
    radial-gradient(circle at 24% 16%,rgba(255,255,255,.72) 0 2.6%,rgba(255,255,255,.15) 5.5%,transparent 13%),
    radial-gradient(circle at 45% 42%,color-mix(in srgb,var(--tile) 83%,white) 0 14%,var(--tile) 54%,color-mix(in srgb,var(--tile) 72%,#51677a) 100%) !important;
  box-shadow:inset 1px 2px 4px rgba(255,255,255,.40),inset -2px -3px 6px rgba(63,79,94,.22),0 1px 2px rgba(46,64,78,.16) !important;
}
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::after,
body.wrap-texture #gameStage .overlay-bubble::after,
body.wrap-texture #gameStage .floating-bubble::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
body.wrap-texture #gameStage #board>.cell.filled .face {z-index:8}
body.wrap-texture #gameStage>#rack .minicell.on {
  background:radial-gradient(circle at 44% 37%,color-mix(in srgb,var(--mcolor) 83%,white) 0 15%,var(--mcolor) 68%,color-mix(in srgb,var(--mcolor) 75%,#596c7a) 100%) !important;
  box-shadow:inset 1px 2px 4px rgba(255,255,255,.32),inset -2px -3px 6px rgba(48,66,78,.22),0 2px 3px rgba(0,0,0,.15) !important;
}
@media(max-width:780px) {
  body.wrap-texture #gameStage>#sheet {padding:6px !important}
  body.wrap-texture #gameStage>#sheet>#board {gap:1px !important;padding:2px !important}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px) {
  body.wrap-texture #gameStage>#sheet>#board {gap:1px !important;padding:2px !important}
}


/* v41: stronger glossy plastic bubble feel, inspired by the reference render.
   No central bright hotspot; gloss is kept on the rim / top-left only. */
body.wrap-texture #gameStage>.sheet{
  border:1px solid rgba(239,248,252,.82)!important;
  background:
    linear-gradient(145deg, rgba(246,251,253,.20), rgba(126,146,159,.10) 36%, rgba(92,110,122,.12) 100%),
    linear-gradient(140deg,#c9d8df 0%,#a8bac5 52%,#a2b4be 100%)!important;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.64),inset 0 -6px 12px rgba(48,67,80,.28),0 10px 18px rgba(0,0,0,.38)!important;
}
body.wrap-texture #gameStage>.sheet::before{
  background:
    linear-gradient(130deg,rgba(255,255,255,.12),transparent 24% 72%,rgba(38,59,72,.06)),
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(120% 100% at 100% 100%, rgba(255,255,255,.04), transparent 24%)!important;
}
body.wrap-texture #gameStage #board{
  gap:0px!important;
  padding:4px!important;
  background:
    linear-gradient(145deg,#bfd0d8,#aebfca 62%,#bac9d1)!important;
  box-shadow:inset 0 2px 9px rgba(255,255,255,.38),inset 0 -4px 9px rgba(55,74,86,.18)!important;
}
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::before{
  inset:.3%!important;
  border-radius:50%!important;
  border:1px solid rgba(245,250,252,.74)!important;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.98) 0 2.1%, rgba(255,255,255,.66) 2.9%, rgba(255,255,255,0) 8.6%),
    radial-gradient(ellipse at 24% 20%, rgba(255,255,255,.40) 0 8%, rgba(255,255,255,0) 16%),
    radial-gradient(circle at 50% 54%, rgba(232,241,246,.06) 0 46%, rgba(191,206,214,.04) 64%, rgba(102,123,136,.08) 80%, rgba(56,75,88,.18) 100%)!important;
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.50),
    inset -3px -4px 7px rgba(84,104,117,.18),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 1px 2px rgba(57,76,89,.10)!important;
}
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::after{
  content:""!important;
  display:block!important;
  inset:7%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.20), rgba(255,255,255,0) 22%),
    radial-gradient(ellipse at 78% 82%, rgba(58,77,91,.07), rgba(58,77,91,0) 34%)!important;
  opacity:.92!important;
  box-shadow:none!important;
}
/* gentle random variation only — still no central glare */
body.wrap-texture #gameStage #board>.cell:nth-child(8n+3):not(.filled):not(.pop-now)::before,
body.wrap-texture #gameStage #board>.cell:nth-child(11n+5):not(.filled):not(.pop-now)::before{
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.95) 0 2%, rgba(255,255,255,.58) 2.8%, rgba(255,255,255,0) 8.2%),
    radial-gradient(ellipse at 23% 19%, rgba(255,255,255,.34) 0 7%, rgba(255,255,255,0) 15%),
    radial-gradient(circle at 50% 54%, rgba(71,92,106,.06) 0 8%, rgba(232,241,246,.04) 22%, rgba(190,205,214,.03) 52%, rgba(95,116,129,.08) 79%, rgba(53,71,84,.19) 100%)!important;
}
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::before,
body.wrap-texture #gameStage .overlay-bubble::before,
body.wrap-texture #gameStage .floating-bubble::before{
  inset:.3%!important;
  border-radius:50%!important;
  border:1px solid rgba(250,252,253,.70)!important;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.96) 0 2.1%, rgba(255,255,255,.56) 2.9%, rgba(255,255,255,0) 8.6%),
    radial-gradient(ellipse at 24% 20%, rgba(255,255,255,.28) 0 8%, rgba(255,255,255,0) 15%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--tile) 30%, white) 0%,
      color-mix(in srgb,var(--tile) 18%, white) 14%,
      color-mix(in srgb,var(--tile) 92%, white) 55%,
      color-mix(in srgb,var(--tile) 68%, #506473) 100%)!important;
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.42),
    inset -3px -4px 7px rgba(69,86,99,.18),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 1px 2px rgba(57,76,89,.12)!important;
}
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::after,
body.wrap-texture #gameStage .overlay-bubble::after,
body.wrap-texture #gameStage .floating-bubble::after{
  content:""!important;
  display:block!important;
  inset:8%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 21%),
    radial-gradient(ellipse at 78% 82%, rgba(57,75,89,.08), rgba(57,75,89,0) 34%)!important;
  opacity:.88!important;
}
body.wrap-texture #gameStage .cell.filled .face{z-index:7;filter:drop-shadow(0 1px 1px rgba(255,255,255,.08))}


/* v42 reflection pass: mimic the glossy reference more closely.
   Strong rim reflections and inter-dome shine, but still no center hotspot. */
body.wrap-texture #gameStage>.sheet{
  background:
    linear-gradient(145deg, rgba(246,250,253,.28), rgba(134,153,165,.12) 35%, rgba(101,120,132,.14) 100%),
    linear-gradient(145deg,#cad8df 0%,#afc0ca 56%,#a7b8c2 100%)!important;
}
body.wrap-texture #gameStage #board{
  gap:0!important;
  padding:5px!important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.22), transparent 18%),
    linear-gradient(145deg,#c3d2d9 0%,#b1c1ca 52%,#b7c7d0 100%)!important;
  position:relative;
}
body.wrap-texture #gameStage #board::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(circle at 7.14% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 7.14%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 7.14% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 21.43%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 7.14% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 35.71%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 7.14% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 50%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 7.14% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 64.29%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 7.14% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 78.57%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 7.14% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 21.43% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 35.71% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 50% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 64.29% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 78.57% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%),
    radial-gradient(circle at 92.86% 92.86%, rgba(255,255,255,.18) 0 1.5%, transparent 3.2%);
  mix-blend-mode:screen;
}
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::before{
  inset:-2.2%!important;
  border:1px solid rgba(245,251,253,.78)!important;
  background:
    radial-gradient(circle at 13% 14%, rgba(255,255,255,.98) 0 2.2%, rgba(255,255,255,.74) 3%, rgba(255,255,255,0) 8.5%),
    radial-gradient(ellipse at 24% 18%, rgba(255,255,255,.44) 0 9%, rgba(255,255,255,0) 17%),
    radial-gradient(ellipse at 75% 19%, rgba(255,255,255,.18) 0 4%, rgba(255,255,255,0) 9%),
    radial-gradient(circle at 50% 58%, rgba(228,238,244,.03) 0 56%, rgba(125,146,160,.06) 76%, rgba(60,82,96,.16) 100%)!important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.55),
    inset -3px -4px 6px rgba(88,108,121,.16),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.06),
    0 1px 2px rgba(55,74,87,.08)!important;
}
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::after{
  content:""!important;display:block!important;inset:0!important;border-radius:50%!important;
  background:
    conic-gradient(from 228deg at 19% 18%, rgba(255,255,255,.30), rgba(255,255,255,.09) 11%, rgba(255,255,255,0) 20%),
    radial-gradient(ellipse at 16% 16%, rgba(255,255,255,.24) 0 6%, rgba(255,255,255,0) 12%),
    radial-gradient(ellipse at 80% 84%, rgba(55,76,89,.06), rgba(55,76,89,0) 30%)!important;
  opacity:1!important;
}
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::before,
body.wrap-texture #gameStage .overlay-bubble::before,
body.wrap-texture #gameStage .floating-bubble::before{
  inset:-2.2%!important;
  border:1px solid rgba(249,252,253,.78)!important;
  background:
    radial-gradient(circle at 13% 14%, rgba(255,255,255,.98) 0 2.2%, rgba(255,255,255,.72) 3%, rgba(255,255,255,0) 8.5%),
    radial-gradient(ellipse at 24% 18%, rgba(255,255,255,.38) 0 9%, rgba(255,255,255,0) 17%),
    radial-gradient(ellipse at 75% 19%, rgba(255,255,255,.15) 0 4%, rgba(255,255,255,0) 9%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--tile) 54%, white) 0%,
      color-mix(in srgb,var(--tile) 44%, white) 16%,
      color-mix(in srgb,var(--tile) 95%, white) 58%,
      color-mix(in srgb,var(--tile) 82%, #546877) 100%)!important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.42),
    inset -3px -4px 6px rgba(71,88,101,.16),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.05),
    0 1px 2px rgba(55,74,87,.10)!important;
}
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::after,
body.wrap-texture #gameStage .overlay-bubble::after,
body.wrap-texture #gameStage .floating-bubble::after{
  content:""!important;display:block!important;inset:0!important;border-radius:50%!important;
  background:
    conic-gradient(from 228deg at 19% 18%, rgba(255,255,255,.24), rgba(255,255,255,.08) 11%, rgba(255,255,255,0) 20%),
    radial-gradient(ellipse at 16% 16%, rgba(255,255,255,.18) 0 6%, rgba(255,255,255,0) 12%),
    radial-gradient(ellipse at 80% 84%, rgba(55,76,89,.07), rgba(55,76,89,0) 30%)!important;
  opacity:.96!important;
}


/* v43: after a completed line pops, the sheet briefly has air-pocket holes,
   then empty PVC domes rebound. Only presentation changes; cleared cells stay clear. */
body.wrap-texture #gameStage #board>.cell.dome-hidden:not(.filled)::before,
body.wrap-texture #gameStage #board>.cell.dome-hidden:not(.filled)::after{
  opacity:0!important;
  visibility:hidden!important;
}
body.wrap-texture #gameStage #board>.cell.dome-return:not(.filled)::before{
  animation:emptyDomeReinflate .28s cubic-bezier(.18,.72,.25,1.28) both!important;
  transform-origin:center!important;
}
body.wrap-texture #gameStage #board>.cell.dome-return:not(.filled)::after{
  animation:emptyDomeReinflate .28s cubic-bezier(.18,.72,.25,1.28) both!important;
  transform-origin:center!important;
}
@keyframes emptyDomeReinflate{
  0%{opacity:0;transform:scale(.42)}
  54%{opacity:.82;transform:scale(.91)}
  78%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}


/* v44 high-pressure feedback, kept intentionally subtle */
#gameStage>.sheet.danger:not(.shake){box-shadow:inset 0 2px 5px rgba(255,255,255,.56),inset 0 -5px 10px rgba(51,70,83,.32),0 8px 18px rgba(0,0,0,.38),0 0 0 1px rgba(255,133,158,.20),0 0 18px rgba(255,133,158,.12)!important}
/* v44 clear wave: a tiny anticipatory gleam, then independent cell popping. */
#gameStage #board>.cell.line-primed{animation:lineAnticipation .22s ease-in-out both;z-index:2}
@keyframes lineAnticipation{0%{filter:brightness(1)}52%{filter:brightness(1.22) drop-shadow(0 0 5px rgba(253,245,195,.50))}100%{filter:brightness(1.10)}}
@media(prefers-reduced-motion:reduce){#gameStage #board>.cell.line-primed{animation:none}}
.gameover-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,10,18,.82);backdrop-filter:blur(8px)}
.gameover-card{width:min(380px,100%);border:1px solid rgba(191,227,230,.32);border-radius:25px;padding:28px 25px 20px;background:linear-gradient(150deg,#242b3a,#141923 75%);text-align:center;box-shadow:0 24px 65px rgba(0,0,0,.55)}
.gameover-eyebrow{letter-spacing:2px;color:#a0e5d3;font-size:11px;font-weight:900;margin-bottom:12px}
.gameover-card h2{font-size:27px;line-height:1.2;margin:0 0 12px;color:#f5faff}
.gameover-score{font-size:clamp(38px,6vw,54px);font-weight:950;font-variant-numeric:tabular-nums;color:#f4f7fc}
.gameover-caption{font-size:13px;color:#bbc8d7;margin-bottom:20px}
.gameover-metrics{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;font-size:11px;color:#ccd8e3;margin:0 0 21px}
.gameover-metrics span{padding:7px 10px;border:1px solid #455264;border-radius:9px}
.gameover-retry{width:100%;border:0;border-radius:13px;background:#8ce8d0;color:#102c28;font-weight:900;font-size:17px;padding:15px 14px;cursor:pointer;box-shadow:0 7px 18px rgba(89,220,180,.14)}
.gameover-retry:hover{background:#a6f5dd}
.gameover-dismiss{border:0;background:none;color:#9aabbc;font-weight:650;font-size:12px;padding:13px;cursor:pointer}

/* v45 selected shape: neutral slate instead of green */
#gameStage>#rack>.piece[aria-pressed="true"],
#gameStage #rack>.piece[aria-pressed="true"]{
  background:linear-gradient(155deg,#29303a,#242a33)!important;
  border-color:#9ca8b7!important;
  box-shadow:inset 0 0 0 1px rgba(213,225,238,.13),0 0 0 1px rgba(168,184,202,.15)!important;
}
#gameStage>#rack>.piece[aria-pressed="true"]:focus-visible{outline:2px solid #b9c7d5;outline-offset:2px}
#gameStage>.queue-title.tight-warning{color:#e8caa5!important}
#gameStage>.sheet.danger:not(.shake){
  box-shadow:inset 0 2px 5px rgba(255,255,255,.50),inset 0 -5px 10px rgba(51,70,83,.27),
    0 8px 18px rgba(0,0,0,.38),0 0 0 1px rgba(228,174,124,.27),0 0 15px rgba(223,161,114,.14)!important;
}


/* v46: POP UI never participates in layout */
.bonus-banner:not([hidden]){display:flex}
.bonus-banner{
 position:fixed!important;left:50%!important;top:max(16px,env(safe-area-inset-top) + 14px)!important;
 transform:translateX(-50%)!important;z-index:180!important;
 width:min(410px,calc(100vw - 28px))!important;max-width:unset!important;
 margin:0!important;box-shadow:0 14px 42px rgba(0,0,0,.58)!important;
 padding:10px 14px!important;pointer-events:none;
}
.bonus-banner[hidden]{display:none!important}
.bonus-countdown[hidden]{display:none!important}
#gameStage>.sheet{position:relative}
.bonus-countdown{
 position:absolute;z-index:160;left:50%;top:50%;transform:translate(-50%,-50%) scale(.88);
 pointer-events:none;user-select:none;white-space:nowrap;
 font-size:clamp(29px,6vw,60px);font-weight:1000;letter-spacing:1.3px;
 color:#f9ffff;text-shadow:0 4px 1px rgba(6,32,36,.8),0 0 22px rgba(64,230,192,.85);
 animation:v46Ready .45s cubic-bezier(.18,1.5,.34,1) both;
}
.bonus-countdown.go{color:#aaffdc;animation:v46Pop .36s cubic-bezier(.23,1.6,.39,1) both}
@keyframes v46Ready{from{opacity:0;transform:translate(-50%,-50%) scale(.58)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes v46Pop{from{opacity:.65;transform:translate(-50%,-50%) scale(.83)}to{opacity:1;transform:translate(-50%,-50%) scale(1.27)}}
/* v46 preview — fully visible above filled cells and the pointer */
#gameStage .shape-overlay{z-index:58!important;filter:drop-shadow(0 5px 5px rgba(0,0,0,.35))}
#gameStage .shape-overlay .overlay-bubble{opacity:.96!important;transform:scale(1.03)!important}
#gameStage .shape-overlay:not(.blocked) .overlay-bubble::before{
  box-shadow:inset 1px 2px 5px rgba(255,255,255,.55),inset -2px -3px 5px rgba(54,75,93,.17),0 0 0 1px rgba(225,247,245,.66)!important;
}
.floating{z-index:116!important;filter:drop-shadow(0 7px 9px rgba(0,0,0,.34))!important}
#gameStage .shape-overlay.blocked .overlay-bubble{opacity:.74!important}
/* v46: characters glance toward the last missing cell */
#gameStage #board>.cell.one-away.filled .pupil{
 animation:v46LookAtGap 2.1s ease-in-out 1!important;
}
@keyframes v46LookAtGap{0%,100%{transform:translate(0,0)}30%,75%{transform:translate(var(--react-x,0px),var(--react-y,0px))}}
#gameStage #board>.cell.one-away-target:not(.filled)::before{
 box-shadow:inset 1px 2px 4px rgba(255,255,255,.54),inset -2px -3px 6px rgba(60,82,95,.18),0 0 0 2px rgba(191,253,229,.62),0 0 10px rgba(171,237,217,.35)!important;
}
#gameStage #board>.cell.line-primed .face{animation:v84ReactToPop .40s cubic-bezier(.18,.88,.26,1.16) both!important}
#gameStage #board>.cell.line-primed .eye{animation:v84EyeSurprise .40s cubic-bezier(.16,.9,.22,1.18) both!important}
#gameStage #board>.cell.line-primed .eye .pupil{animation:v84PupilCenter .40s ease-out both!important}
@keyframes v84ReactToPop{
  0%{transform:translate(-50%,-50%) rotate(-6deg) scale(1)}
  34%{transform:translate(-50%,-61%) rotate(4deg) scale(1.06)}
  68%{transform:translate(-50%,-66%) rotate(8deg) scale(1.11)}
  100%{transform:translate(-50%,-58%) rotate(1deg) scale(1.05)}
}
@keyframes v84EyeSurprise{
  0%{transform:scale(1)}
  38%{transform:scale(1.08,1.15)}
  72%{transform:scale(1.24,1.34)}
  100%{transform:scale(1.16,1.22)}
}
@keyframes v84PupilCenter{
  0%,100%{transform:translate(0,0)}
  30%,100%{transform:translate(0,0)}
}
/* Discreet expandable analytics panel */
.session-stats{max-width:880px;margin:14px auto 0;border:1px solid rgba(121,143,166,.23);border-radius:12px;background:rgba(20,25,33,.66);overflow:hidden}
.session-stats summary{padding:10px 14px;color:#adb8c7;font-size:12px;font-weight:750;cursor:pointer;user-select:none;list-style:none;display:flex;justify-content:space-between;align-items:center}
.session-stats summary::-webkit-details-marker{display:none}
.session-stats[open] summary{border-bottom:1px solid rgba(121,143,166,.23)}
.session-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px}
.session-stats-grid div{background:#202630;padding:9px;border-radius:9px;min-width:0}
.session-stats-grid small{display:block;color:#9eabbc;font-size:10px;letter-spacing:.2px}
.session-stats-grid strong{display:block;font-size:19px;margin-top:3px;color:#e9f4fa;font-variant-numeric:tabular-nums}
.session-stats p{padding:0 12px 9px;color:#8998a9;font-size:11px;margin:0}
@media(max-width:780px){.session-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bonus-banner{padding:9px 12px!important}}
@media(prefers-reduced-motion:reduce){#gameStage #board>.cell.one-away.filled .pupil,#gameStage #board>.cell.line-primed .face,#gameStage #board>.cell.line-primed .eye,.bonus-countdown{animation:none!important}}


/* v47 restrained character POP: inflate, blink-wide, shatter, return. */
#gameStage #board>.cell.line-primed{animation:v84Anticipation .39s ease-in-out both!important}
@keyframes v84Anticipation{
  0%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
  48%{filter:brightness(1.16) drop-shadow(0 0 6px rgba(242,251,253,.55))}
  100%{filter:brightness(1.08) drop-shadow(0 0 2px rgba(242,251,253,.18))}
}
#gameStage #board>.cell.filled.pop-now::before,
#gameStage #board>.cell.filled.pop-now::after{animation:v47BubbleBurst .37s cubic-bezier(.12,.64,.16,1) both!important}
@keyframes v47BubbleBurst{
  0%{transform:scale(1,1);opacity:1;filter:brightness(1)}
  23%{transform:scale(.92,1.035);opacity:1}
  49%{transform:scale(1.14,1.12);opacity:1;filter:brightness(1.14)}
  68%{transform:scale(1.22,1.15);opacity:.96}
  79%{transform:scale(1.17,1.18);opacity:0}
  100%{transform:scale(1.14);opacity:0}
}
.eye-pop.v47-eye-pop{animation-name:v47EyeBurst!important;animation-timing-function:cubic-bezier(.22,.78,.19,1)!important;animation-fill-mode:forwards!important;transform-origin:center!important;z-index:220}
@keyframes v47EyeBurst{
  0%{transform:scale(1) translate(0,0);opacity:1;filter:brightness(1)}
  26%{transform:scale(1.13,1.03) translate(0,-1px);opacity:1}
  52%{transform:scale(calc(var(--size-max)*.96)) translate(calc(var(--drift-x)*.20),calc(var(--drift-y)*.20));opacity:1;filter:brightness(1.15)}
  70%{transform:scale(var(--size-max)) translate(calc(var(--drift-x)*.60),calc(var(--drift-y)*.60));opacity:1;filter:brightness(1.46)}
  72%,100%{transform:scale(calc(var(--size-max)*1.04));opacity:0}
}
.eye-pop.v47-eye-pop.v47-gone{opacity:0!important}
.eye-fragment.v47-eye-fragment{box-shadow:0 0 2px rgba(255,255,255,.6);animation-timing-function:cubic-bezier(.25,.6,.35,1)!important}
.v47-halo{position:fixed;z-index:180;pointer-events:none;box-sizing:border-box;border:1.4px solid rgba(235,253,254,.83);border-radius:50%;transform:translate(-50%,-50%) scale(.63);animation:v47Halo .36s ease-out forwards;box-shadow:0 0 7px rgba(194,236,249,.20)}
@keyframes v47Halo{
  0%{transform:translate(-50%,-50%) scale(.63);opacity:.82;border-width:1.4px}
  58%{opacity:.47}
  100%{transform:translate(-50%,-50%) scale(1.42);opacity:0;border-width:.5px}
}
@media(prefers-reduced-motion:reduce){.v47-halo,.eye-pop.v47-eye-pop,.eye-fragment.v47-eye-fragment{animation-duration:.05s!important}}


/* v48 controlled three-piece rounds: mode switch and spent figure slots */
.rule-mode-bar{max-width:620px;margin:14px auto 2px;padding:9px 12px;border:1px solid #343c49;border-radius:12px;background:#181d25;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;box-sizing:border-box}
.rule-mode-caption{color:#9eadc0;letter-spacing:1.25px;font-size:10px;font-weight:850}
.rule-mode-button{border:1px solid #8695a7;border-radius:9px;padding:8px 12px;background:linear-gradient(145deg,#353f4e,#252e3b);color:#e6eff9;font-size:12px;font-weight:850;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.rule-mode-button:focus-visible{outline:2px solid #dce5ec;outline-offset:2px}
.rule-mode-button[aria-pressed="false"]{background:linear-gradient(145deg,#272c36,#1e252e);border-color:#606c7b}
.rule-mode-hint{color:#a9b6c6;font-size:11px;line-height:1.35;text-align:center}
/* v49: spent shape slots are deliberately blank, retaining only their quiet card outline. */
#gameStage>#rack>.piece.used,#gameStage #rack>.piece.used{
 opacity:1!important;
 background:#0b0f16!important;
 border:1px solid #303947!important;
 box-shadow:none!important;
 cursor:default!important;
 pointer-events:none!important;
}
#gameStage>#rack>.piece.used::before,#gameStage #rack>.piece.used::before,
#gameStage>#rack>.piece.used::after,#gameStage #rack>.piece.used::after{content:none!important}
#gameStage>#rack>.piece:not(.used):disabled{cursor:default}
@media(max-width:680px){.rule-mode-bar{margin-top:10px;gap:7px;padding:8px 10px}.rule-mode-hint{flex:1 1 100%}.rule-mode-caption{letter-spacing:.8px}}


/* v50 iPhone-first rhythm & polish */
html{overflow-x:clip;overscroll-behavior-y:contain}
body{overflow-x:clip;overscroll-behavior-y:contain}
#gameStage #board,#gameStage #rack,#gameStage .piece{touch-action:none!important;-webkit-user-select:none;user-select:none}
#gameStage #board .cell{touch-action:none!important}
#gameStage .floating{pointer-events:none!important}
.game-settings{max-width:620px;margin:11px auto 0;border:1px solid rgba(130,147,163,.34);border-radius:12px;background:#171c24;overflow:hidden}
.game-settings>summary{cursor:pointer;padding:11px 14px;color:#e2e9f0;display:flex;align-items:center;gap:9px;justify-content:space-between;list-style:none;font-weight:800;font-size:13px}
.game-settings>summary::-webkit-details-marker{display:none}
.game-settings>summary>span{font-size:11px;font-weight:500;color:#9babbc}
.game-settings[open]>summary{border-bottom:1px solid #35404d}
.settings-content{padding:8px 12px 12px}
.settings-content .rule-mode-bar{margin:0 auto 9px!important;box-shadow:none}
.settings-content .voice-music-controls{margin:8px auto!important}
.settings-appearance{display:flex;justify-content:center;margin-top:10px}
.settings-appearance .action{font-size:12px;padding:9px 18px;color:#dfe6ec;background:#29313c;border:1px solid #536274;border-radius:9px}
/* Shrink and soften eye departure: inflated eyes burst quickly, no detached white beads. */
.eye-pop.v47-eye-pop{box-shadow:0 1px 2px rgba(12,20,31,.20)!important}
@keyframes v50EyePop{
  0%{transform:scale(1) translate(0,0);opacity:1;filter:brightness(1)}
  28%{transform:scale(1.13,1.06);opacity:1}
  60%{transform:scale(var(--size-max)) translate(calc(var(--drift-x)*.18),calc(var(--drift-y)*.18));opacity:.96}
  71%{transform:scale(calc(var(--size-max)*1.08));opacity:.7;filter:brightness(1.1)}
  75%,100%{transform:scale(1.16);opacity:0}
}
.eye-pop.v47-eye-pop{animation-name:v50EyePop!important}
.eye-fragment.v47-eye-fragment{box-shadow:none!important;filter:none!important;opacity:.72}
.v47-halo{border-color:rgba(234,247,253,.54)!important;box-shadow:none!important;animation-duration:.28s!important}
@keyframes v50BubblePop{
  0%{transform:scale(1);opacity:1}
  26%{transform:scale(.95,1.02);opacity:1}
  61%{transform:scale(1.10,1.075);opacity:1}
  83%,100%{transform:scale(1.17);opacity:0}
}
#gameStage #board>.cell.filled.pop-now::before,
#gameStage #board>.cell.filled.pop-now::after{animation:v50BubblePop .27s cubic-bezier(.22,.58,.2,1) both!important}
/* Respect touch targets, focus on board, put optional controls away. */
.stage-buttons{gap:10px;justify-content:center!important}
.stage-buttons .action{min-height:43px}
#gameStage .queue-title{font-size:12px}
@media(max-width:780px){
 main{padding:9px 8px 20px!important}
 header{margin-bottom:8px!important;padding:0 4px!important}
 header .eyebrow,header .lead,header .version{display:none!important}
 header h1{font-size:clamp(21px,5.6vw,27px)!important;margin:0!important;line-height:1.15}
 .panel{padding:10px 8px 16px!important}
 .section-head{margin:0 auto 8px!important}
 .section-head h2{font-size:16px!important;margin:0!important}
 .section-head p{display:none!important}
 #gameStage .stats{margin-bottom:8px!important;gap:8px!important}
 #gameStage .stat{padding:7px 9px!important;border-radius:11px!important}
 #gameStage .stat small{font-size:10px!important}
 #gameStage .stat strong{font-size:clamp(20px,5.6vw,27px)!important}
 #gameStage .queue-title{margin-top:8px!important;margin-bottom:3px!important}
 #gameStage .queue-rack{gap:6px!important}
 #gameStage #rack>.piece{padding:6px 2px!important;min-height:75px!important;border-radius:12px!important}
 #gameStage #rack>.piece small{font-size:10px!important;line-height:1.1!important;margin-top:4px!important}
 #gameStage .stage-buttons{margin-top:7px!important;gap:8px!important}
 #gameStage .stage-buttons .action{flex:1!important;min-height:42px!important;padding:8px!important;font-size:13px!important}
 .notice{font-size:11px!important;line-height:1.4!important;margin:8px auto 0!important;padding:8px!important}
 .footer{display:none!important}
 .bonus-banner{top:calc(env(safe-area-inset-top) + 8px)!important;width:min(380px,calc(100vw - 18px))!important;padding:7px 11px!important}
 .bonus-banner strong{font-size:13px!important}
 .bonus-banner .seconds{font-size:26px!important}
 .bonus-banner div[style*="font-size"]{font-size:10px!important}
}
@media(orientation:landscape) and (max-height:540px) and (max-width:1000px){
 header,.section-head{display:none!important}
 main{padding:3px 7px 10px!important}
 .panel{padding:5px!important}
 .stage-buttons .action{min-height:34px!important;padding:5px 9px!important}
 .game-settings{margin-top:5px}
 .game-settings>summary{padding:7px 11px}
 #gameStage .queue-title{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .eye-pop.v47-eye-pop{animation-duration:.10s!important}
 #gameStage #board>.cell.filled.pop-now::before,#gameStage #board>.cell.filled.pop-now::after{animation-duration:.12s!important}
}


/* v51 - distinctly readable pop sequence on iPhone and desktop */
body.pop-fx-full #gameStage #board>.cell.line-primed{
  animation:v51ReadyPulse .19s ease-in-out both!important;
}
@keyframes v51ReadyPulse{
  0%{filter:brightness(1)}
  55%{filter:brightness(1.18) drop-shadow(0 0 4px rgba(233,249,255,.45))}
  100%{filter:brightness(1.07)}
}
body.pop-fx-full #gameStage #board>.cell.filled.pop-now::before,
body.pop-fx-full #gameStage #board>.cell.filled.pop-now::after{
  animation:v51VisibleBubblePop .51s cubic-bezier(.18,.64,.17,1) both!important;
}
@keyframes v51VisibleBubblePop{
  0%{transform:scale(1,1);opacity:1;filter:brightness(1)}
  19%{transform:scale(.91,1.045);opacity:1;filter:brightness(1)}
  44%{transform:scale(1.06,1.045);opacity:1;filter:brightness(1.09)}
  66%{transform:scale(1.17,1.14);opacity:1;filter:brightness(1.16)}
  77%{transform:scale(1.21,1.18);opacity:1;filter:brightness(1.20)}
  79%{transform:scale(1.24,1.21);opacity:.25}
  83%,100%{transform:scale(1.26);opacity:0}
}
body.pop-fx-full .eye-pop.v47-eye-pop{
  animation-name:v51VisibleEyePop!important;
  animation-duration:var(--v51-eye-time,.48s)!important;
  animation-timing-function:cubic-bezier(.2,.64,.22,1)!important;
  animation-fill-mode:forwards!important;
}
@keyframes v51VisibleEyePop{
  0%{transform:scale(1);opacity:1}
  26%{transform:translateY(-1px) scale(1.07,1.10);opacity:1}
  54%{transform:translateY(-1px) scale(1.22,1.25);opacity:1}
  69%{transform:translateY(-2px) scale(var(--size-max,1.32));opacity:1}
  73%{transform:translateY(-2px) scale(calc(var(--size-max,1.32)*1.08));opacity:.9}
  77%,100%{transform:scale(calc(var(--size-max,1.32)*1.16));opacity:0}
}
body.pop-fx-full .eye-fragment.v47-eye-fragment{animation-duration:var(--v51-particle-time,.29s)!important}
body.pop-fx-full .v47-halo{animation-duration:.43s!important}
/* A manual low-motion option; no long-lived, detached eyeballs. */
body.pop-fx-minimal #gameStage #board>.cell.filled.pop-now::before,
body.pop-fx-minimal #gameStage #board>.cell.filled.pop-now::after{
  animation:v51VisibleBubblePop .18s ease-out both!important;
}
body.pop-fx-minimal .eye-pop.v47-eye-pop{animation:v51VisibleEyePop .18s ease-out both!important}
body.pop-fx-minimal .eye-fragment.v47-eye-fragment{animation-duration:.12s!important}
.settings-appearance{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.settings-appearance .action{min-height:36px}


/* v53 polish overrides */
.piece{justify-content:center!important;gap:0!important}
.piece small{display:none!important}
.piece[aria-pressed=true]{border-color:#b8c2ce!important;background:#2a313b!important;box-shadow:inset 0 0 0 1px rgba(233,240,247,.24),0 0 0 2px rgba(255,255,255,.05)!important}
.queue-col .piece{padding:10px 8px!important}
.queue-col .piece.used{background:#1f2530!important}
.shape-overlay .overlay-bubble{transform:scale(1.12)!important;filter:drop-shadow(0 10px 12px rgba(0,0,0,.18))}
.shape-overlay .overlay-bubble::before{opacity:.98!important;box-shadow:inset 0 6px 8px rgba(255,255,255,.74),inset 0 -8px 12px rgba(0,0,0,.30),0 0 0 1.5px rgba(255,255,255,.26),0 0 18px rgba(173,245,228,.22)!important}
.shape-overlay.blocked .overlay-bubble::before{box-shadow:inset 0 6px 8px rgba(255,255,255,.70),inset 0 -8px 12px rgba(0,0,0,.34),0 0 0 2px rgba(255,102,125,.90),0 0 14px rgba(255,102,125,.45)!important}
.floating{filter:drop-shadow(0 18px 22px rgba(0,0,0,.26))!important}
.floating-bubble::before{box-shadow:inset 0 6px 8px rgba(255,255,255,.76),inset 0 -8px 12px rgba(0,0,0,.32),0 6px 10px rgba(0,0,0,.18)!important}
.popup{font-size:clamp(24px,4.6vw,46px)!important;text-shadow:0 2px 0 rgba(8,17,23,.58),0 0 14px rgba(7,20,26,.34),0 10px 26px rgba(0,0,0,.20)!important}
body.pop-fx-full #gameStage #board>.cell.filled.pop-now::before,body.pop-fx-full #gameStage #board>.cell.filled.pop-now::after{animation-duration:.34s!important}
body.pop-fx-minimal #gameStage #board>.cell.filled.pop-now::before,body.pop-fx-minimal #gameStage #board>.cell.filled.pop-now::after{animation-duration:.24s!important}
body.pop-fx-full .eye-pop.v47-eye-pop{animation-duration:.26s!important}
body.pop-fx-minimal .eye-pop.v47-eye-pop{animation-duration:.18s!important}


/* Bloopkins v56 · quick sequential reinflation + Sky Boop */
body{background:radial-gradient(ellipse at 50% -10%,#202b36 0%,#121820 42%,#0c1218 100%)}
main{padding-top:8px!important}
.bloop-header{max-width:970px!important;width:100%;margin:0 auto 14px!important;padding:7px 4px 2px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important}
.brand-lockup{display:flex;gap:13px;align-items:center;justify-content:center}
.brand-lockup h1{font-size:clamp(27px,5.3vw,43px)!important;font-weight:950;line-height:.98;margin:0!important;letter-spacing:-1.8px;color:#eaf9ff;text-shadow:0 3px 20px rgba(99,194,209,.10)}
.brand-tagline{margin:5px 0 0!important;color:#a3c4c3!important;font-size:10px!important;letter-spacing:2.5px;font-weight:750}
.brand-mark{position:relative;width:42px;height:42px;border-radius:51% 49% 50% 51%;background:radial-gradient(circle at 30% 17%,#f5e6ff,#bdb0dd 49%,#867aaa);border:1px solid #fefbff99;box-shadow:inset 0 3px 5px #ffffff9c,inset 0 -6px 7px #4740685c,0 6px 14px #0006;transform-origin:50% 85%;animation:brandIdleFloat 4.8s ease-in-out infinite}
.brand-mark .brand-eye{position:absolute;top:12px;left:12px;width:10px;height:13px;border-radius:55%;background:#fff;border:1px solid #ffffffa8;transform:rotate(-13deg)}
.brand-mark .brand-eye::after{content:'';position:absolute;width:4px;height:5px;top:5px;left:4px;border-radius:50%;background:#2b2a48}
.brand-mark .brand-eye.eye-two{left:26px;top:10px;width:11px;height:15px;transform:rotate(10deg)}
.brand-mark.brand-hop{animation:brandHop .72s cubic-bezier(.21,1.02,.34,1), brandIdleFloat 4.8s ease-in-out infinite}
.brand-mark.brand-blink .brand-eye{transform:scaleY(.14)!important}
.brand-mark.brand-blink .brand-eye::after{transform:scaleY(.45);opacity:.88}
@keyframes brandIdleFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-1.5px) rotate(1.5deg)}}
@keyframes brandHop{0%{transform:translateY(0) scale(1)}18%{transform:translateY(-1px) scale(1.01,.99)}42%{transform:translateY(-7px) scale(.985,1.02)}63%{transform:translateY(0) scale(1.03,.97)}80%{transform:translateY(-2px) scale(.995,1.005)}100%{transform:translateY(0) scale(1)}}

.bloop-header .eyebrow,.bloop-header .lead,.bloop-header .version{display:none!important}
#gameStage{row-gap:10px!important}
#gameStage>.stats{margin-bottom:0!important;gap:10px!important}
#gameStage>.stats .stat{padding:10px 12px!important;min-height:60px!important}
#gameStage>.queue-title{font-size:11px!important;letter-spacing:1.5px!important;padding:0 0 5px!important}
#gameStage>.stage-buttons{gap:12px!important;justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important}
#gameStage>.stage-buttons .action{flex:0 1 150px!important;min-height:42px}
.micro-tip{font-size:11px;color:#879aa8;letter-spacing:.12px;white-space:nowrap}
.game-settings{margin-top:13px!important}
.game-settings>summary{font-size:12px!important;min-height:35px}
.game-settings>summary span{font-size:10px!important;opacity:.65}
.game-settings .session-stats{margin-top:12px!important}
.sky-boop-scene{position:absolute;inset:0;pointer-events:none;z-index:225;isolation:isolate;overflow:visible}
.sky-boop-cloud{position:absolute;left:50%;top:-80px;width:94px;height:34px;opacity:0;transform:translate(-50%,-25px) scale(.76);background:linear-gradient(180deg,#f8fcff,#c9e3ef);border:2px solid #a9cfde;border-radius:50px;box-shadow:0 5px 15px rgba(31,64,80,.38),0 0 12px rgba(218,246,255,.54);transition:top .42s ease-out,left .16s ease-out;animation:skyCloudArrive .52s ease-out forwards}
.sky-boop-cloud::before,.sky-boop-cloud::after{content:'';position:absolute;border-radius:50%;background:linear-gradient(140deg,#fff,#d4e8f0);border-top:1px solid white}
.sky-boop-cloud::before{width:49px;height:45px;left:17px;top:-19px}
.sky-boop-cloud::after{width:35px;height:35px;right:12px;top:-11px}
@keyframes skyCloudArrive{0%{opacity:0;transform:translate(-50%,-25px) scale(.72)}65%{opacity:1}100%{opacity:.95;transform:translate(-50%,0) scale(1)}}
.sky-boop-finger{position:absolute;left:50%;top:-155px;transform:translate(-50%,-75%);font-size:clamp(48px,9vw,70px);line-height:1;filter:drop-shadow(0 8px 5px #121d2990);transition:top .085s ease-out,left .085s ease-out;z-index:2}
.sky-boop-finger.arrived{animation:skyBoopTap .20s ease-in-out 1}
@keyframes skyBoopTap{0%{scale:1}65%{scale:1.17}100%{scale:1}}
.sky-boop-label{position:absolute;left:50%;top:50%;white-space:nowrap;transform:translate(-50%,-50%);font-weight:950;font-size:clamp(30px,7vw,58px);color:#fff2b6;text-shadow:0 2px 0 #3a2a2488,0 0 17px #fff2be88,0 8px 20px #0009;animation:skyBoopLabel 1.18s ease-out both;letter-spacing:1px;z-index:4}
@keyframes skyBoopLabel{0%{opacity:0;transform:translate(-50%,-50%) scale(.68)}17%{opacity:1;transform:translate(-50%,-50%) scale(1.11)}65%{opacity:1;transform:translate(-50%,-55%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.96)}}
@media(max-width:600px){.bloop-header{margin-bottom:9px!important}.brand-mark{width:37px;height:37px}.brand-lockup{gap:9px}.brand-lockup h1{letter-spacing:-1px}.micro-tip{font-size:10px;white-space:normal;line-height:1.25}#gameStage>.stats .stat{min-height:50px!important;padding:8px!important}.sky-boop-cloud{width:65px;height:26px;opacity:.83}}
@media(max-width:360px){.micro-tip{display:none}}


@media(orientation:landscape) and (max-height:450px) and (max-width:1000px){
 body main{padding:2px 8px 0!important}
 .bloop-header{display:none!important}
 .panel{padding:3px 8px!important;border-radius:12px!important}
 #gameStage{width:max-content!important;max-width:100%!important;grid-template-columns:minmax(0,236px) minmax(0,178px)!important;gap:4px 10px!important;}
 #gameStage>.stats{gap:6px!important;width:236px!important}
 #gameStage>#sheet{width:236px!important;height:236px!important}
 #gameStage>.stats .stat{min-height:36px!important;padding:3px 7px!important}
 #gameStage>.stats .stat small{font-size:8px!important;line-height:1.15!important}
 #gameStage>.stats .stat strong{font-size:18px!important;line-height:1.1!important}
 #gameStage>.queue-title{font-size:9px!important;align-items:center!important;padding:0!important}
 #gameStage>#rack{gap:6px!important}
 #gameStage>#rack>.piece{padding:2px 4px!important;min-height:0!important}
 #gameStage>.stage-buttons .action{min-height:30px!important;max-height:31px!important;padding:3px 10px!important}
 .micro-tip{display:none!important}
 .game-settings{max-width:430px!important;margin:3px auto 0!important}
 .game-settings>summary{min-height:27px!important;font-size:10px!important;padding:4px 9px!important}
 .game-settings>summary span{display:none!important}
}


/* v56: keep character eyes on their bubble during the POP; no separate flying eyeballs. */
body.pop-fx-full #gameStage #board>.cell.filled.pop-now .face,
body.pop-fx-minimal #gameStage #board>.cell.filled.pop-now .face{
 visibility:visible!important;
 animation:v56FacePop .34s cubic-bezier(.22,.58,.18,1) both!important;
}
@keyframes v56FacePop{
 0%{opacity:1;filter:brightness(1)}
 35%{opacity:1;filter:brightness(1.05)}
 68%{opacity:1;filter:brightness(1.12)}
 80%,100%{opacity:0;filter:brightness(1.14)}
}

/* v57: circular non-clipped PVC pockets across Safari, portrait and landscape */
#gameStage #board{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:repeat(7,minmax(0,1fr))!important;aspect-ratio:1 / 1!important;gap:clamp(2px,.35vw,3px)!important;overflow:visible!important;box-sizing:border-box!important}
#gameStage #board>.cell{display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;aspect-ratio:1 / 1!important;border-radius:50%!important;overflow:visible!important;box-sizing:border-box!important;flex-shrink:0!important;clip-path:none!important}
#gameStage #board>.cell::before,#gameStage #board>.cell::after{border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important}
#gameStage #board>.cell.filled::before{inset:5%!important}
#gameStage #board>.cell:not(.filled)::before{inset:5%!important}
#gameStage #board>.cell.pop-now::after{filter:none!important}
#gameStage #board>.cell.pop-now .face{overflow:visible!important}
.queue-rack .mini-rack{scale:1.08;transform-origin:center}
#gameStage .popup{animation-duration:1.25s!important}
#gameStage .popup.perfect{color:#ffeab6!important;text-shadow:0 3px 3px #2b1e31,0 0 21px #ffe4aa99!important}
.score-record-glow{position:absolute;left:50%;top:-9px;z-index:180;white-space:nowrap;transform:translateX(-50%);font-size:clamp(11px,2.9vw,17px);letter-spacing:.5px;font-weight:900;color:#ffdc8b;text-shadow:0 0 15px #ffc764aa;pointer-events:none;animation:v57Record 1.6s ease-out forwards}
@keyframes v57Record{0%{opacity:0;transform:translate(-50%,9px) scale(.7)}23%{opacity:1;transform:translate(-50%,-1px) scale(1.14)}76%{opacity:1}100%{opacity:0;transform:translate(-50%,-18px) scale(.9)}}
.sky-boop-finger{will-change:top,left,transform;filter:drop-shadow(0 7px 5px #0b1d3375)!important}
.sky-boop-finger.sky-tap{animation:v57FingerTap .16s cubic-bezier(.25,1.3,.44,1) both!important}
@keyframes v57FingerTap{0%{scale:1.07;transform:translate(-50%,-82%)}48%{scale:.86;transform:translate(-50%,-51%)}100%{scale:1;transform:translate(-50%,-75%)}}
.sky-tap-ring{position:absolute;width:32px;height:32px;border-radius:50%;border:2px solid #f7edac;box-shadow:0 0 10px #fff2a77d;transform:translate(-50%,-50%) scale(.4);pointer-events:none;animation:v57TapRing .28s ease-out forwards;z-index:1}
@keyframes v57TapRing{0%{opacity:.8;scale:.55}100%{opacity:0;scale:1.8}}
@media (max-width:780px){#gameStage #board{gap:2px!important}.queue-rack .mini-rack{scale:1.10}}
@media (orientation:landscape) and (max-height:450px){#gameStage #board{gap:2px!important}.queue-rack .mini-rack{scale:1}}


/* v58: the title Bloopkin is alive too. */
.brand-lockup .brand-mark{transform-origin:50% 62%;animation:brandBreathe 4.9s ease-in-out infinite}
.brand-lockup .brand-eye{transform-origin:50% 53%;animation:brandBlinkLeft 5.6s ease-in-out infinite}
.brand-lockup .brand-eye.eye-two{animation:brandBlinkRight 5.95s ease-in-out infinite}
.brand-lockup .brand-eye::after{animation:brandGaze 6.3s ease-in-out infinite}
.brand-lockup .brand-eye.eye-two::after{animation-delay:-1.35s}
.brand-mouth{position:absolute;left:21px;top:29px;width:9px;height:5px;border-bottom:2px solid rgba(58,47,86,.8);border-radius:0 0 60% 60%;transform:rotate(-5deg);opacity:.9}
@keyframes brandBreathe{0%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(-1.5px) scale(1.055,.965)}}
@keyframes brandBlinkLeft{0%,11%,13%,60%,62%,100%{transform:rotate(-13deg) scaleY(1)}12%,61%{transform:rotate(-13deg) scaleY(.12)}}
@keyframes brandBlinkRight{0%,9%,11%,64%,66%,100%{transform:rotate(10deg) scaleY(1)}10%,65%{transform:rotate(10deg) scaleY(.10)}}
@keyframes brandGaze{0%,13%,50%,100%{transform:translate(0,0)}26%,43%{transform:translate(1.4px,.7px)}70%,82%{transform:translate(-1px,1px)}}
/* The pointer is the landing cursor; the lifted figure is always above it. */
.floating{z-index:250!important;transform:none!important;pointer-events:none!important;opacity:1!important;transition:none!important;filter:drop-shadow(0 10px 11px rgba(8,15,30,.46))!important}
.floating-bubble,.floating-gap{width:var(--drag-size)!important;height:var(--drag-size)!important}
#gameStage #board .shape-overlay .overlay-bubble.snap-origin::before{
 box-shadow:inset 0 5px 7px rgba(255,255,255,.70),inset 0 -7px 10px rgba(0,0,0,.30),0 0 0 2px rgba(253,254,255,.92),0 0 11px rgba(217,246,247,.68)!important;
}
#gameStage #board .shape-overlay.blocked .overlay-bubble.snap-origin::before{box-shadow:0 0 0 2px rgba(255,102,125,.95),0 0 10px rgba(255,102,125,.68)!important}
@media (prefers-reduced-motion:reduce){.brand-lockup .brand-mark,.brand-lockup .brand-eye,.brand-lockup .brand-eye::after{animation:none!important}}


/* v59 — direct board drag: no separate floating figure. */
.floating{display:none!important}
#gameStage>#rack>.piece.dragging-source .mini{opacity:.20;transform:scale(.92);filter:saturate(.55);transition:opacity .09s ease,transform .09s ease}
#gameStage>#rack>.piece.returned .mini{animation:v59Return .23s cubic-bezier(.16,1.35,.3,1) both}
@keyframes v59Return{0%{opacity:.35;transform:scale(.86)}72%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}


/* v60 — interactive, mouthless, blinking color mascot */
.brand-lockup .brand-mark{
  --brand-color:#8db6d3;
  appearance:none;-webkit-appearance:none;padding:0;margin:0;
  flex:none;display:block;overflow:visible;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse at 27% 16%,
    color-mix(in srgb,var(--brand-color) 32%,white) 0%,
    color-mix(in srgb,var(--brand-color) 70%,white) 39%,
    var(--brand-color) 70%,
    color-mix(in srgb,var(--brand-color) 80%,black) 100%)!important;
  border:1px solid rgba(255,255,255,.70)!important;
  box-shadow:inset 0 3px 5px rgba(255,255,255,.62),inset 0 -6px 8px rgba(0,0,0,.22),0 5px 13px rgba(0,0,0,.25)!important;
  transition:background .18s ease,box-shadow .18s ease;
}
.brand-lockup .brand-mark:focus-visible{outline:2px solid #c6f6ff;outline-offset:4px}
.brand-lockup .brand-mark:active{filter:brightness(1.10)}
.brand-lockup .brand-mark.color-changed{animation:brandColorPop .27s cubic-bezier(.15,1.4,.38,1) both!important}
@keyframes brandColorPop{0%{scale:1}48%{scale:1.13}100%{scale:1}}
.brand-lockup .brand-mark .brand-eye{pointer-events:none}


/* v61: symmetric controls aligned with the board, including iPhone landscape */
#gameStage>.stage-buttons{
  grid-area:actions!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  justify-content:stretch!important;
  align-items:stretch!important;
  flex-wrap:nowrap!important;
}
#gameStage>.stage-buttons>.action{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:initial!important;
  min-height:40px!important;
  font-size:13px!important;
  white-space:nowrap!important;
}
#gameStage>.stage-buttons>#restart{
  background:#262e38!important;
  border-color:#606d79!important;
}
@media(max-width:780px){
  #gameStage>.stage-buttons{gap:9px!important}
  #gameStage>.stage-buttons>.action{min-height:42px!important;font-size:12px!important}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  #gameStage{grid-template-areas:"stats heading" "board queue" "actions ."!important}
  #gameStage>.stage-buttons{
    width:min(calc(100dvh - 117px),calc(100vw - 248px),520px)!important;
    max-width:100%!important;
    justify-self:center!important;
    gap:7px!important;
  }
  #gameStage>.stage-buttons>.action{min-height:30px!important;max-height:34px!important;padding:4px 5px!important;font-size:11px!important}
}
@media(orientation:landscape) and (max-height:450px) and (max-width:1000px){
  #gameStage>.stage-buttons{width:236px!important;justify-self:center!important}
}



/* v63: mobile board fit + softer popup frequency */
#gameStage>#sheet{
  aspect-ratio:auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
#gameStage>#sheet>#board{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  overflow:visible!important;
}
#gameStage .popup.warn,
#gameStage .popup.ready{
  white-space:pre-line!important;
  text-wrap:balance;
}
#gameStage .popup.warn{
  font-size:clamp(18px,5.3vw,30px)!important;
  line-height:1.04!important;
  max-width:min(84vw,290px)!important;
}
#gameStage .popup.ready{
  font-size:clamp(20px,5.8vw,34px)!important;
  line-height:1.02!important;
  max-width:min(86vw,310px)!important;
}
@media (max-width:520px){
  main{padding-bottom:42px!important}
  #gameStage{gap:11px!important}
  #gameStage>#sheet{
    width:min(100%,calc(100vw - 20px))!important;
    padding:6px!important;
    border-radius:22px!important;
  }
  #gameStage>#sheet>#board{
    gap:2px!important;
    padding:4px!important;
  }
  #gameStage>#sheet>#board>.cell::before,
  #gameStage>#sheet>#board>.cell.filled::before,
  #gameStage>#sheet>#board>.cell:not(.filled)::before{
    inset:4.4%!important;
  }
}


/* v64: center the combined logo and name, with a single permanent character subtitle. */
.bloop-header{justify-content:center!important;text-align:center!important}
.bloop-header .brand-lockup{
 width:max-content;max-width:100%;margin:0 auto!important;
 justify-content:center!important;align-items:center!important;
 gap:11px!important;
}
.bloop-header .brand-lockup>div{text-align:center!important}
.bloop-header .brand-tagline{
 font-size:clamp(10px,2.65vw,12px)!important;
 letter-spacing:1.25px!important;
 line-height:1.35!important;
 white-space:nowrap;
 margin-top:6px!important;
 text-transform:none!important;
}
@media(max-width:380px){
 .bloop-header .brand-lockup{gap:9px!important}
 .bloop-header .brand-lockup h1{font-size:clamp(27px,8vw,37px)!important}
}


/* v65: give Bloopkins time to speak, with unobstructed two-line text. */
#gameoverModal .gameover-caption{font-size:clamp(16px,4.5vw,19px)!important;font-weight:750;color:#e3f5fb!important;line-height:1.25!important}
#gameStage .popup.warn,#gameStage .popup.ready{
 animation:v65Story 2.85s cubic-bezier(.20,.80,.18,1) both!important;
 max-width:min(86vw,315px)!important;
 white-space:pre-line!important;
 text-wrap:balance!important;
 font-size:clamp(19px,5.25vw,31px)!important;
 line-height:1.08!important;
 letter-spacing:.1px!important;
}
@keyframes v65Story{
 0%{opacity:0;transform:translate(-50%,-43%) scale(.83)}
 10%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
 19%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 82%{opacity:1;transform:translate(-50%,-54%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-61%) scale(.98)}
}
/* Animated bubble stays anchored in its original grid cell until it lands. */
#gameStage #board>.cell.bloopkin-hopping{
 z-index:180!important;
 filter:drop-shadow(0 6px 6px rgba(6,20,29,.5));
 pointer-events:none!important;
 transform-origin:center center;
}
#gameStage #board>.cell.hop-destination::before{animation:v65Destination .65s ease-out 1!important}
@keyframes v65Destination{0%,100%{filter:brightness(1)}40%{filter:brightness(1.17)}}

/* v67: cartoon sneaking lives above a *static* bubble-wrap board. */
#gameStage .popup.ready{animation-duration:1.5s!important}

body.wrap-texture #gameStage #board>.cell.filled.sneak-source:not(.pop-now)::before,
#gameStage #board>.cell.filled.sneak-source:not(.pop-now)::before{
  inset:0.9%!important;
  border-radius:50%!important;
  border:1px solid rgba(239,247,251,.69)!important;
  background:radial-gradient(circle at 24% 16%,rgba(255,255,255,.78) 0 2.6%,rgba(255,255,255,.19) 5.2%,transparent 12.5%),radial-gradient(circle at 50% 55%,rgba(199,216,225,.035) 0 48%,rgba(88,110,124,.08) 72%,rgba(43,64,79,.22) 100%)!important;
  box-shadow:inset 1px 2px 3px rgba(255,255,255,.36),inset -2px -3px 6px rgba(60,82,95,.18),0 1px 2px rgba(52,72,84,.11)!important;
  animation:none!important;transform:none!important;
}
body.wrap-texture #gameStage #board>.cell.filled.sneak-source::after,
#gameStage #board>.cell.filled.sneak-source::after{display:none!important;content:none!important}
#gameStage #board>.cell.filled.sneak-source .face{visibility:hidden!important}
.sneak-ghost{position:absolute;z-index:165;box-sizing:border-box;pointer-events:none;touch-action:none;border-radius:50%;isolation:isolate;
  background:radial-gradient(circle at 26% 16%,rgba(255,255,255,.96) 0 8%,color-mix(in srgb,var(--sneak-color) 30%,white) 25%,var(--sneak-color) 70%,color-mix(in srgb,var(--sneak-color) 65%,#464c58) 100%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:inset 0 5px 8px rgba(255,255,255,.7),inset 0 -8px 14px rgba(52,58,79,.33),0 6px 10px rgba(1,13,29,.32);
  transform-origin:center 70%;will-change:transform;}
.sneak-ghost .sneak-shine{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 22% 16%,rgba(255,255,255,.65),transparent 27%);pointer-events:none}
.sneak-ghost .face{top:30%!important;gap:4px!important;left:50%;z-index:5;animation:sneakLook 1.8s ease-in-out infinite}
.sneak-ghost .face .eye:first-child{width:clamp(8px,2.5vw,13px);height:clamp(11px,3.2vw,18px)}
.sneak-ghost .face .eye:last-child{width:clamp(10px,2.9vw,16px);height:clamp(13px,3.7vw,20px)}
.sneak-ghost.sneak-peeking .face{animation:sneakLook .46s ease-in-out 1}
.sneak-ghost.sneak-landed{animation:sneakIdle 2.1s ease-in-out infinite}
.sneak-ghost.sneak-landed .face{animation:sneakCaughtGaze 2.2s ease-in-out infinite}
.sneak-ghost.sneak-travel .sneak-feet{opacity:1}
.sneak-ghost .sneak-feet{position:absolute;left:19%;width:63%;bottom:-6%;height:12%;z-index:-1;opacity:0;transition:opacity .12s ease}
.sneak-ghost .sneak-feet::before,.sneak-ghost .sneak-feet::after{content:'';display:block;position:absolute;bottom:0;width:24%;height:85%;border-radius:50%;background:color-mix(in srgb,var(--sneak-color) 70%,black);box-shadow:0 2px 2px #10283d55}
.sneak-ghost .sneak-feet::before{left:19%;transform:rotate(17deg)}
.sneak-ghost .sneak-feet::after{right:19%;transform:rotate(-17deg)}
.sneak-landing-shadow{position:absolute;z-index:152;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#263c5b60,transparent 73%);opacity:0;transform:scale(.45);transition:opacity .18s ease,transform .25s ease}
.sneak-landing-shadow.sneak-shadow-in{opacity:.8;transform:scale(1)}
.sneak-ghost.sneak-caught{animation:none!important}
.sneak-ghost.sneak-caught::after{content:'!';position:absolute;z-index:9;top:-36%;right:-7%;color:#fff9c8;font-weight:1000;font-size:clamp(15px,4vw,25px);line-height:1;text-shadow:0 2px 5px rgba(20,33,55,.7);animation:sneakSurprise .26s cubic-bezier(.12,1.5,.4,1) both}
@keyframes sneakSurprise{0%{opacity:0;transform:translateY(7px) scale(.3) rotate(-11deg)}100%{opacity:1;transform:translateY(0) scale(1.1) rotate(7deg)}}
@keyframes sneakLook{0%,100%{transform:translate(-53%,-50%) rotate(-11deg)}50%{transform:translate(-43%,-52%) rotate(8deg)}}
@keyframes sneakIdle{0%,100%{scale:1;rotate:-2deg}37%{scale:1.05 .95;rotate:2deg}74%{scale:.98 1.03;rotate:-4deg}}
@keyframes sneakCaughtGaze{0%,35%,100%{transform:translate(-50%,-50%) rotate(-7deg)}62%{transform:translate(-45%,-51%) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.sneak-ghost.sneak-landed,.sneak-ghost .face{animation:none!important}}


/* v70 — soft Bloopkins story accents; never recolor score/POP messages. */
#gameStage .popup.story-intro{
  max-width:min(84vw,320px)!important;
  font-size:clamp(20px,5.4vw,31px)!important;
  white-space:normal!important;
  line-height:1.12!important;
  animation:v70StoryIntro 2.25s cubic-bezier(.22,.72,.2,1) both!important;
}
#gameStage .popup.story-intro.story-colored{
  color:#adf4df!important;
  text-shadow:0 2px 0 rgba(15,48,54,.84),0 0 16px rgba(121,248,218,.49),0 7px 22px rgba(5,18,27,.4)!important;
}
#gameStage .popup.story-nervous.story-colored{
  color:#ffd9a4!important;
  text-shadow:0 2px 0 rgba(67,37,29,.8),0 0 15px rgba(255,188,101,.53),0 7px 22px rgba(5,18,27,.38)!important;
}
#gameoverModal .gameover-caption.story-colored{
  color:#d7c6ff!important;
  text-shadow:0 0 14px rgba(175,150,255,.28);
}
@keyframes v70StoryIntro{
  0%{opacity:0;transform:translate(-50%,-45%) scale(.88)}
  13%{opacity:1;transform:translate(-50%,-50%) scale(1.055)}
  24%,81%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.98)}
}
@media(prefers-reduced-motion:reduce){
 #gameStage .popup.story-intro{animation:none!important;opacity:1!important}
}


/* v71 FINAL PLAYTEST — story legibility; no mint intro or pastel purple result. */
#gameStage .popup.story-intro,
#gameStage .popup.story-intro.story-colored{
  color:#f7f9ff!important;
  text-shadow:0 2px 0 rgba(8,17,23,.68),0 0 13px rgba(25,37,48,.32),0 8px 23px rgba(0,0,0,.30)!important;
}
#gameoverModal .gameover-caption,
#gameoverModal .gameover-caption.story-colored{
  color:#e3f5fb!important;
  text-shadow:0 2px 11px rgba(0,0,0,.24)!important;
}



/* v74 — consistent completed-game leaderboard and live high score */
#bestStat{cursor:pointer}
#bestStat.scoreboard-ready{cursor:pointer}
#bestStat.scoreboard-ready:hover{border-color:#8fdac9}
#bestStat.scoreboard-ready:focus-visible{outline:2px solid #8fdac9;outline-offset:3px}
.pw72-shade{position:fixed;inset:0;z-index:1100;background:rgba(5,10,18,.83);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}
.pw72-dialog{width:min(410px,100%);padding:25px 22px;background:linear-gradient(155deg,#293241,#151c27);color:#eef7fc;border:1px solid #5d7380;border-radius:22px;box-shadow:0 24px 70px #000b;text-align:center}
.pw72-dialog h2{font-size:23px;margin:0 0 10px}.pw72-dialog p{font-size:13px;color:#b7c9d5;margin:0 0 17px}
.pw72-actions{display:flex;gap:10px}.pw72-actions button{flex:1;min-height:45px;padding:10px;border-radius:11px;border:1px solid #687989;background:#283543;color:#e6f4ff;font-weight:800;cursor:pointer}
.pw72-actions button.pw72-primary{background:#8ce8d0;color:#102c28;border-color:#8ce8d0}
.pw72-name{display:block;width:100%;padding:12px;background:#101923;color:white;border:1px solid #70818b;border-radius:10px;margin:8px 0 13px;text-align:center}
.pw72-list{padding:0;margin:14px 0 17px;list-style:none;text-align:left}
.pw72-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #42505e;padding:9px 6px;font-size:14px}
.pw72-list li span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw72-list li strong{font-variant-numeric:tabular-nums;color:#b2f4df}
.pw72-caption{font-size:11px!important;color:#93a8b5!important;margin:10px 0!important}

/* v75 — readable 1.5-second POP TIME heads-up; countdown does NOT eat play time. */
#bonusCountdown.v75-pop-intro{
  z-index:330!important;
  width:min(84%,410px)!important;
  max-width:calc(100% - 24px)!important;
  box-sizing:border-box;
  padding:22px 15px 19px!important;
  white-space:pre-line!important;
  text-align:center!important;
  line-height:1.18!important;
  font-size:clamp(24px,6vw,43px)!important;
  letter-spacing:.7px!important;
  color:#ffefff!important;
  background:linear-gradient(145deg,rgba(60,42,82,.95),rgba(25,37,65,.96))!important;
  border:2px solid rgba(255,226,169,.93)!important;
  border-radius:23px!important;
  box-shadow:0 0 0 999px rgba(5,13,26,.28),0 14px 34px #000a,0 0 28px #df98ec80!important;
  text-shadow:0 2px 0 #1d1936,0 0 16px #ffe7ac80!important;
  animation:v75PopHeadsUp 1.5s ease-out both!important;
  pointer-events:none!important;
}
#bonusCountdown.v75-pop-intro::after{
  content:'SWIPE OR TAP TO POP';display:block;margin-top:12px;
  font-size:clamp(11px,3.1vw,17px);letter-spacing:1.25px;font-weight:850;
  color:#d4fff0;text-shadow:0 1px 8px #000a;
}
@keyframes v75PopHeadsUp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.74)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  24%,91%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}
}
/* Rainbow is a color-chain achievement (5+ touching bubbles of ONE color
   inside a completed row/column), not a generic multi-color line clear. */
#gameStage .popup.rainbow{
  color:#fff8d9!important;
  font-size:clamp(21px,5.7vw,37px)!important;
  text-shadow:0 2px 1px #192337,0 0 14px #ffcb73,0 0 24px #8dedf8!important;
  z-index:300!important;
}
.v75-rainbow-flare{
  position:absolute;z-index:250;pointer-events:none;isolation:isolate;
  height:clamp(14px,3.6vw,30px);border-radius:99px;
  background:linear-gradient(90deg,#ff75a4 0%,#ffb677 18%,#ffe68e 36%,#8ef3c8 55%,#80ceff 75%,#d1a1ff 100%);
  box-shadow:0 0 17px #fff8,0 0 28px #9deafa80;
  transform:translate(-50%,-50%) rotate(var(--rainbow-rotation)) scaleX(.16);
  animation:v75RainbowSweep 1.0s cubic-bezier(.16,.69,.19,1) both;
}
.v75-rainbow-flare::after{
  content:'🌈';position:absolute;left:50%;top:-140%;font-size:clamp(24px,5.5vw,40px);
  transform:translateX(-50%);filter:drop-shadow(0 3px 7px #0008);
}
@keyframes v75RainbowSweep{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rainbow-rotation)) scaleX(.12) scaleY(.8)}
  20%{opacity:.85;transform:translate(-50%,-50%) rotate(var(--rainbow-rotation)) scaleX(.75) scaleY(1)}
  49%{opacity:.92;transform:translate(-50%,-50%) rotate(var(--rainbow-rotation)) scaleX(1.04) scaleY(1.15)}
  75%{opacity:.60;transform:translate(-50%,-50%) rotate(var(--rainbow-rotation)) scaleX(1) scaleY(.9)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rainbow-rotation)) scaleX(1.07) scaleY(.6)}
}
@media(prefers-reduced-motion:reduce){
 #bonusCountdown.v75-pop-intro{animation:none!important;opacity:1!important}
 .v75-rainbow-flare{animation:none!important;opacity:.65!important;transform:translate(-50%,-50%) rotate(var(--rainbow-rotation))!important}
}
/* v77: first tap selects a different card; subsequent taps rotate it. */
#gameStage>.stage-buttons{grid-template-columns:minmax(0,min(220px,100%))!important;justify-content:center!important}
#gameStage>#rack>.piece.tap-rotated .mini{animation:v76TapRotate .22s cubic-bezier(.24,.85,.23,1.15) both!important}
@keyframes v76TapRotate{0%{transform:scale(.85) rotate(-9deg);opacity:.80}65%{transform:scale(1.055) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#gameStage>#rack>.piece.tap-rotated .mini{animation:none!important}}

/* v102: POP TIME countdown occupies the stats area, after a board-centred heads-up. */
#gameStage>.stats{position:relative!important;overflow:visible!important;z-index:185}
#gameStage>.stats .pop-time-hud{
 position:absolute;top:-66px;bottom:0;left:-2px;right:-2px;
 box-sizing:border-box;z-index:550;pointer-events:none;
 display:flex;align-items:center;justify-content:center;
 border:0;background:none;box-shadow:none;
}
#gameStage>.stats .pop-time-hud[hidden]{display:none!important}
.pop-time-clock{display:none;box-sizing:border-box;width:116px;height:116px;flex-direction:column;align-items:center;justify-content:center;
 border-radius:24px;background:linear-gradient(160deg,#4e3e6b,#312e55 52%,#253c50);border:2px solid #ffd2aa;
 box-shadow:0 6px 23px rgba(0,0,0,.46),inset 0 2px 7px rgba(255,255,255,.15),0 0 22px rgba(205,151,246,.26);
 animation:v80ClockArrive .2s cubic-bezier(.17,1.35,.3,1) both}
.pop-time-hud.is-live .pop-time-clock{display:flex}
.pop-time-clock small{font-size:10px;letter-spacing:1.5px;color:#f9dcb1;font-weight:900}
.pop-time-clock strong{font-weight:1000;line-height:1.02;font-size:59px;color:#fff8ef;font-variant-numeric:tabular-nums;text-shadow:0 3px 10px rgba(0,0,0,.3)}
.pop-time-clock span{font-size:10px;color:#d5f5e9;font-weight:750;letter-spacing:.6px}
body.pop-time-active .bloop-header{opacity:.18;transition:opacity .18s ease}
body.pop-time-active #gameStage>.stats>.stat{opacity:.18;transition:opacity .18s ease}
@keyframes v80ClockArrive{from{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.pop-test-settings{margin:11px auto 3px;max-width:620px;display:flex;justify-content:space-between;align-items:center;gap:12px;
 border:1px dashed #52616e;border-radius:11px;padding:10px 12px;background:rgba(35,39,54,.5)}
.pop-test-settings>span{display:flex;flex-direction:column;gap:2px}
.pop-test-settings strong{font-size:12px;color:#d4e7ee}
.pop-test-settings small{font-size:10px;color:#a1b0bc;line-height:1.4}
.pop-test-settings .sound-toggle{min-width:165px}
@media(max-width:780px){
 #gameStage>.stats .pop-time-hud{top:-55px;border-radius:13px}
 .pop-time-clock{width:95px;height:95px;border-radius:20px}
 .pop-time-clock strong{font-size:47px}
 .pop-time-clock small,.pop-time-clock span{font-size:9px}
 .pop-test-settings{flex-wrap:wrap;gap:8px}
 .pop-test-settings .sound-toggle{min-width:0;flex:1 1 100%}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #gameStage>.stats .pop-time-hud{top:-5px;border-radius:10px}
 .pop-time-clock{width:44px;height:40px;border-radius:9px;border-width:1px;gap:0}
 .pop-time-clock small,.pop-time-clock span{display:none}
 .pop-time-clock strong{font-size:31px}
}
@media(prefers-reduced-motion:reduce){.pop-time-clock{animation:none!important}}

/* v81 - logo Bloopkin uses the same strong color identity as the game bubbles. */
.brand-lockup .brand-mark{
  background:
    radial-gradient(circle at 17% 16%,rgba(255,255,255,.96) 0 4%,transparent 13%),
    radial-gradient(ellipse at 24% 22%,rgba(255,255,255,.36),transparent 35%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--brand-color) 48%,white) 0%,
      color-mix(in srgb,var(--brand-color) 78%,white) 45%,
      var(--brand-color) 71%,
      color-mix(in srgb,var(--brand-color) 79%,#546877) 100%)!important;
  border-color:rgba(255,255,255,.80)!important;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.48),inset -3px -4px 7px rgba(34,54,71,.28),0 5px 13px rgba(0,0,0,.25)!important;
}
.brand-lockup .brand-eye{
  top:12px;left:7px;width:12px;height:15px;
  background:linear-gradient(145deg,#fff,#edf2f8);
  box-shadow:inset -1px -1px 2px rgba(170,176,188,.40),0 1px 2px rgba(32,33,40,.32);
  transform:translate(1px,1px) rotate(-13deg);
  border-radius:56% 56% 52% 52%;
}
.brand-lockup .brand-eye.eye-two{
  top:9px;left:23px;width:15px;height:19px;
  transform:translate(-1px,-1px) rotate(10deg);
}
.brand-lockup .brand-eye::after{content:none!important;display:none!important}
.brand-lockup .brand-pupil{
  position:absolute;top:46%;left:31%;width:43%;height:39%;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#545f75,#21283a 75%);
  animation:brandGaze 6.3s ease-in-out infinite;
}
.brand-lockup .brand-eye.eye-two .brand-pupil{top:37%;left:48%;animation-delay:-1.35s}
@keyframes v81BrandBlinkLeft{
  0%,11%,13%,60%,62%,100%{transform:translate(1px,1px) rotate(-13deg) scaleY(1)}
  12%,61%{transform:translate(1px,1px) rotate(-13deg) scaleY(.12)}
}
@keyframes v81BrandBlinkRight{
  0%,9%,11%,64%,66%,100%{transform:translate(-1px,-1px) rotate(10deg) scaleY(1)}
  10%,65%{transform:translate(-1px,-1px) rotate(10deg) scaleY(.1)}
}
.brand-lockup .brand-eye{animation:v81BrandBlinkLeft 5.6s ease-in-out infinite}
.brand-lockup .brand-eye.eye-two{animation:v81BrandBlinkRight 5.95s ease-in-out infinite}
.brand-lockup .brand-mark.brand-blink .brand-eye{transform:scaleY(.12)!important}
@media(max-width:600px){
 .brand-lockup .brand-eye{top:10px;left:6px;width:11px;height:13px}
 .brand-lockup .brand-eye.eye-two{top:8px;left:20px;width:14px;height:17px}
}
@media(prefers-reduced-motion:reduce){.brand-lockup .brand-pupil{animation:none!important}}

/* v82 — Sneaky Bloopkin: a living, translucent PVC spirit, not an opaque ball.
   Eyes deliberately stay solid; only the shell and feet are translucent. */
.sneak-ghost{
  background:
    radial-gradient(ellipse at 24% 17%,rgba(255,255,255,.66) 0 4%,rgba(255,255,255,.25) 10%,rgba(255,255,255,.065) 22%,transparent 43%),
    radial-gradient(ellipse at 72% 76%,color-mix(in srgb,var(--sneak-color) 30%,transparent),transparent 68%),
    radial-gradient(circle at 48% 50%,color-mix(in srgb,var(--sneak-color) 15%,transparent) 0 56%,color-mix(in srgb,var(--sneak-color) 25%,transparent) 78%,color-mix(in srgb,var(--sneak-color) 40%,transparent) 100%)!important;
  border:1px solid rgba(242,250,255,.49)!important;
  box-shadow:inset 1px 2px 4px rgba(255,255,255,.32),inset -2px -4px 7px rgba(45,65,83,.095),0 5px 8px rgba(15,22,34,.11),0 0 9px color-mix(in srgb,var(--sneak-color) 14%,transparent)!important;
  backdrop-filter:blur(.25px);
  -webkit-backdrop-filter:blur(.25px);
}
.sneak-ghost .sneak-shine{
  background:radial-gradient(ellipse at 23% 16%,rgba(255,255,255,.48),rgba(255,255,255,.065) 18%,transparent 36%)!important;
}
.sneak-ghost .face{opacity:1!important;filter:drop-shadow(0 1px 1px rgba(28,35,48,.28));}
.sneak-ghost .face .eye{opacity:1!important;}
.sneak-ghost .sneak-feet::before,.sneak-ghost .sneak-feet::after{
  background:color-mix(in srgb,var(--sneak-color) 27%,transparent)!important;
  border:1px solid rgba(230,247,255,.20);
  box-shadow:none!important;
}
.sneak-landing-shadow{background:radial-gradient(ellipse,rgba(43,59,75,.19),transparent 73%)!important;}
.sneak-landing-shadow.sneak-shadow-in{opacity:.55!important;}
/* As soon as the player notices it, a quick surprised glance and return to
   full color; the original cell regains its opaque body at animation end. */
.sneak-ghost::before{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 29% 20%,color-mix(in srgb,var(--sneak-color) 45%,white) 0 10%,color-mix(in srgb,var(--sneak-color) 83%,white) 35%,var(--sneak-color) 72%,color-mix(in srgb,var(--sneak-color) 78%,#405165) 100%);
  opacity:0;
}
.sneak-ghost.sneak-caught::before{animation:v82CaughtColor .38s ease-in-out both;}
@keyframes v82CaughtColor{0%,15%{opacity:0}46%{opacity:.42}78%,100%{opacity:.96}}
.sneak-ghost.sneak-caught .face{animation:v82StartledEyes .3s ease-out both!important;}
@keyframes v82StartledEyes{0%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}43%{transform:translate(-50%,-56%) rotate(6deg) scale(1.25,1.15)}100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}}
.sneak-ghost.sneak-caught::after{text-shadow:0 2px 5px #172333,0 0 5px #fff7ba;}
@media(prefers-reduced-motion:reduce){
 .sneak-ghost.sneak-caught::before,.sneak-ghost.sneak-caught .face{animation:none!important}
}


/* v92 — the little runaway stays alert while everyone else gets sleepy.
   Existing sleeping CSS is intentionally left in place for all board bubbles. */
body.sleepy-mode #gameStage .sneak-ghost .eye.open-eye .lid,
body.sleepy-mode #gameStage .sneak-ghost .eye.tiny-eye .lid{
  animation:none!important;transform:scaleY(0)!important;opacity:0!important;
}
body.sleepy-mode #gameStage .sneak-ghost .eye.open-eye,
body.sleepy-mode #gameStage .sneak-ghost .eye.tiny-eye{
  animation: none!important;transform:scaleY(1)!important;
}
@media(prefers-reduced-motion:reduce){
  .sneak-ghost.sneak-landed,.sneak-ghost .face{animation:none!important}
}

/* v82b — living, independent eyes on every occupied bubble.
   Paired pupils look in the same direction, but each bubble has its own phase,
   speed and direction. The old one-away animation ran only once and froze. */
#gameStage #board>.cell.filled .face .eye .pupil,
#gameStage .shape-overlay .face .eye .pupil{
  animation:v82LivingGaze var(--gaze-cycle,4.2s) ease-in-out infinite!important;
  animation-delay:var(--gaze-delay,0s)!important;
  animation-direction:var(--gaze-way,normal)!important;
  will-change:transform;
}
/* Smaller eyes have less white area: never let a pupil wander outside. */
#gameStage #board>.cell.filled .face .eye.tiny-eye .pupil,
#gameStage .shape-overlay .face .eye.tiny-eye .pupil{--gaze-x:1px;--gaze-y:.65px}
@keyframes v82LivingGaze{
  0%,5%,97%,100%{transform:translate(0,0)}
  11%,24%{transform:translate(calc(-1 * var(--gaze-x,1.65px)),calc(-.4 * var(--gaze-y,1px)))}
  34%,43%{transform:translate(var(--gaze-x,1.65px),calc(.35 * var(--gaze-y,1px)))}
  53%,62%{transform:translate(calc(.22 * var(--gaze-x,1.65px)),calc(-1 * var(--gaze-y,1px)))}
  75%,84%{transform:translate(calc(-.5 * var(--gaze-x,1.65px)),var(--gaze-y,1px))}
}
/* A near-complete row still attracts a glance, but the gaze does not freeze
   once that glance finishes. The rest of the cycle stays playful. */
#gameStage #board>.cell.one-away.filled .face .eye .pupil{
  animation-name:v82LivingGapGaze!important;
}
@keyframes v82LivingGapGaze{
  0%,5%,97%,100%{transform:translate(0,0)}
  13%,30%{transform:translate(calc(.48 * var(--react-x,0px)),calc(.48 * var(--react-y,0px)))}
  42%,52%{transform:translate(calc(-.75 * var(--gaze-x,1.65px)),calc(-.4 * var(--gaze-y,1px)))}
  62%,72%{transform:translate(var(--gaze-x,1.65px),calc(.35 * var(--gaze-y,1px)))}
  83%,90%{transform:translate(0,calc(-.8 * var(--gaze-y,1px)))}
}
/* Retain the existing sleepy behavior after inactivity and accessibility mode. */
body.sleepy-mode #gameStage #board>.cell.filled .face .eye .pupil{
  animation:sleepyPupil 5.2s ease-in-out infinite!important;
  animation-delay:var(--sleep-delay,0s)!important;
  animation-direction:normal!important;
}
@media(prefers-reduced-motion:reduce){
  #gameStage #board>.cell.filled .face .eye .pupil,
  #gameStage #board>.cell.one-away.filled .face .eye .pupil,
  #gameStage .shape-overlay .face .eye .pupil{animation:none!important;will-change:auto!important}
}


/* v86 — clearer, still gentle character anticipation on a completed line.
   Keep this AFTER v82's living-gaze selectors so the normal eye animations
   are reliably paused for the 390 ms reaction, including on mobile Safari. */
body.pop-fx-full #gameStage #board>.cell.filled.line-primed{
  animation:v85TensionPulse .39s ease-in-out both!important;
}
@keyframes v85TensionPulse{
  0%{filter:brightness(1);transform:translateY(0) scale(1)}
  31%{filter:brightness(1.015);transform:translateY(1px) scale(.979,1.027)}
  59%{filter:brightness(1.03);transform:translateY(-1.1px) scale(1.020,.978)}
  83%{filter:brightness(1.02);transform:translateY(-.4px) scale(1.012,.991)}
  100%{filter:brightness(1.015);transform:translateY(0) scale(1.004,.997)}
}
/* The face recoils barely one pixel; the eyes carry the expression. */
#gameStage #board>.cell.filled.line-primed .face{
  animation:v85FaceAnticipation .39s cubic-bezier(.22,.7,.32,1) both!important;
  animation-delay:0s!important;
}
@keyframes v85FaceAnticipation{
  0%{translate:0 0;rotate:0deg;scale:1}
  28%{translate:0 1px;rotate:-2deg;scale:.99}
  57%{translate:0 -1.7px;rotate:3deg;scale:1.03}
  83%{translate:0 -1px;rotate:0deg;scale:1.025}
  100%{translate:0 -.5px;rotate:-1deg;scale:1.018}
}
/* Earlier v25/v26 CSS fixes each eye's transform and scale with !important.
   'zoom' is independent, so the eyes finally open up on mobile Safari without
   overriding their intentionally different sizes and positions. */
#gameStage #board>.cell.filled.line-primed .face .eye{
  animation:v85OpenWide .39s cubic-bezier(.18,.68,.22,1) both!important;
  animation-delay:0s!important;
  transform-origin:center 55%;
}
@keyframes v85OpenWide{
  0%{zoom:1}
  20%{zoom:1.06}
  47%{zoom:1.28}
  77%{zoom:1.26}
  100%{zoom:1.14}
}
/* Both pupils glance sideways, then hold; this is what was masked by the
   previous v82 living-gaze !important animation and its negative delay. */
#gameStage #board>.cell.filled.line-primed .face .eye .pupil{
  animation:v85NervousGlance .39s ease-in-out both!important;
  animation-delay:0s!important;
  animation-direction:normal!important;
}
@keyframes v85NervousGlance{
  0%{transform:translate(0,0)}
  26%{transform:translate(0,-.2px)}
  56%,83%{transform:translate(var(--v86-glance-x,1.2px),var(--v86-glance-y,-.3px))}
  100%{transform:translate(calc(var(--v86-glance-x,1.2px) * .7),calc(var(--v86-glance-y,-.3px) * .7))}
}
/* A restrained elastic breath in the plastic dome, synced with the character.
   Override the inherited idle dome animation only during line anticipation. */
body.pop-fx-full #gameStage #board>.cell.filled.line-primed::before{
  animation:v86DomeRecoil .39s cubic-bezier(.22,.65,.3,1) both!important;
  transform-origin:50% 65%;
}
@keyframes v86DomeRecoil{
  0%{transform:scale(1)}
  29%{transform:scale(.967,1.033)}
  59%{transform:scale(1.028,.974)}
  83%{transform:scale(1.015,.987)}
  100%{transform:scale(1.004,.998)}
}
/* At most a soft glimmer: avoid the old white flash hiding the eyes. */
@media(prefers-reduced-motion:reduce){
  body.pop-fx-full #gameStage #board>.cell.filled.line-primed,
  body.pop-fx-full #gameStage #board>.cell.filled.line-primed::before,
  #gameStage #board>.cell.filled.line-primed .face,
  #gameStage #board>.cell.filled.line-primed .face .eye,
  #gameStage #board>.cell.filled.line-primed .face .eye .pupil{
    animation:none!important;
  }
}
/* v88: clear-board milestone and understated same-color line recognition. */
#gameStage .popup.board-clear{
  color:#fff3c7!important;font-size:clamp(22px,5.15vw,43px)!important;
  letter-spacing:.035em!important;text-shadow:0 2px 3px #273544,0 0 15px rgba(255,229,164,.40)!important;
  animation:v88ClearCelebrate 1.65s cubic-bezier(.2,.74,.17,1) both!important;
}
#gameStage .popup.color-streak{
  color:#e7d8ff!important;font-size:clamp(19px,3.9vw,34px)!important;
  text-shadow:0 2px 4px rgba(14,23,34,.83),0 0 12px rgba(187,151,231,.30)!important;
}
@keyframes v88ClearCelebrate{
  0%{opacity:0;transform:translate(-50%,-45%) scale(.86)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.055)}
  32%,77%{opacity:1;transform:translate(-50%,-51%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62%) scale(.99)}
}
@media(prefers-reduced-motion:reduce){#gameStage .popup.board-clear{animation:none!important;opacity:1!important}}

/* v91 — subtly faster preview-to-board handoff for tap and slide.
   This is independent from the 390 ms pre-POP anticipation. */
#gameStage #board>.cell.v91-just-placed{
  animation:v91Settle 85ms cubic-bezier(.2,.75,.3,1) both!important;
  transform-origin:50% 50%;
}
@keyframes v91Settle{
  0%{transform:scale(1.035);filter:brightness(1.045)}
  60%{transform:scale(.996);filter:brightness(1.015)}
  100%{transform:scale(1);filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){#gameStage #board>.cell.v91-just-placed{animation:none!important}}

/* v95 optional challenges: compact, fixed-height HUD in the EXISTING heading row.
   Never change board dimensions or move the board when a challenge appears. */
#gameStage>.queue-title{position:relative!important;height:37px!important;min-height:37px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
#gameStage>.queue-title .queue-title-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:10px}
#gameStage>.queue-title.challenge-on .queue-title-label{visibility:hidden}
#gameStage>.queue-title .challenge-hud{position:absolute;inset:0 0 0 0;display:flex;align-items:center;justify-content:space-between;gap:9px;box-sizing:border-box;
  border:1px solid rgba(159,228,217,.48);border-radius:11px;padding:5px 11px;
  background:linear-gradient(125deg,rgba(28,69,78,.96),rgba(42,51,91,.96));
  box-shadow:0 3px 11px rgba(0,0,0,.20);color:#f4fffc;z-index:2;letter-spacing:0;text-transform:none;pointer-events:none}
#gameStage>.queue-title .challenge-hud[hidden]{display:none!important}
.challenge-hud .ch-text{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.challenge-hud .ch-eyebrow{font-size:9px!important;letter-spacing:1.2px;font-weight:800!important;color:#a7e7d9!important;line-height:1.05}
.challenge-hud .ch-goal{font-size:12px!important;font-weight:800!important;color:#fff!important;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.challenge-hud .ch-timer{font-variant-numeric:tabular-nums;font-size:18px!important;font-weight:900!important;min-width:46px;text-align:right;color:#eaffec}
.challenge-hud .ch-timer.ch-low{color:#ffccbc}
@media(max-width:600px){#gameStage>.queue-title{height:37px!important;min-height:37px!important}#gameStage>.queue-title .challenge-hud{padding:4px 9px;gap:5px}.challenge-hud .ch-goal{font-size:11px!important}}

/* v96: the reserved 37px strip is silent except while a mission is active.
   Keep its height constant so a Challenge never shifts the board. */
#gameStage #queueTitleLabel{display:none!important;}
/* Without the old label the grid item would otherwise shrink to zero width. */
#gameStage>#queueTitle{width:100%!important;justify-self:stretch!important;min-width:0!important;}
#gameStage>#queueTitle .challenge-hud{width:100%!important;min-width:0!important;}

/* v97 — legible milestone messages: small two-line toasts, enough time to read.
   These messages never change the 7x7 board or the HUD layout. */
#gameStage .popup.challenge-win{
  box-sizing:border-box!important;display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  width:min(90%,340px)!important;max-width:340px!important;
  white-space:normal!important;line-height:1.18!important;
  padding:12px 15px!important;
  border-radius:15px!important;
  background:linear-gradient(115deg,rgba(22,45,51,.91),rgba(42,41,69,.93))!important;
  border:1px solid rgba(174,239,214,.57)!important;
  box-shadow:0 5px 20px rgba(9,14,29,.24)!important;
  text-shadow:none!important;
  color:#effff7!important;
  animation:v97ChallengeWin 2.6s ease-out both!important;
}
#gameStage .popup.challenge-win .ch-win-heading{
  font-size:clamp(13px,3.6vw,19px)!important;font-weight:900;
  letter-spacing:.04em;white-space:nowrap;color:#d3ffe7;
}
#gameStage .popup.challenge-win .ch-win-detail{
  font-size:clamp(12px,3.4vw,17px)!important;font-weight:800;
  letter-spacing:.03em;white-space:nowrap;color:#f5e5ff;
}
@keyframes v97ChallengeWin{
  0%{opacity:0;transform:translate(-50%,-45%) scale(.96)}
  12%{opacity:1;transform:translate(-50%,-51%) scale(1.025)}
  21%,85%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(.99)}
}
#gameStage .popup.color-streak{
  white-space:pre-line!important;
  line-height:1.22!important;
  font-size:clamp(19px,4vw,33px)!important;
  width:90%!important;
  animation:v97ColorStreak 1.85s ease-out both!important;
}
@keyframes v97ColorStreak{
  0%{opacity:0;transform:translate(-50%,-45%) scale(.92)}
  15%{opacity:1;transform:translate(-50%,-52%) scale(1.035)}
  23%,79%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-57%) scale(.98)}
}
/* Quiet highlight is confined to the existing challenge strip (no relayout). */
#gameStage>.queue-title .challenge-hud.challenge-arriving{
  animation:v97ChallengeArrive .64s cubic-bezier(.22,.85,.3,1) both!important;
}
@keyframes v97ChallengeArrive{
  0%{opacity:0;transform:scale(.97);box-shadow:0 0 0 0 rgba(166,239,207,0)}
  32%{opacity:1;transform:scale(1.012);box-shadow:0 0 0 3px rgba(166,239,207,.20),0 0 14px rgba(166,239,207,.16)}
  100%{opacity:1;transform:scale(1);box-shadow:0 3px 11px rgba(0,0,0,.20)}
}
@media (prefers-reduced-motion:reduce){
  #gameStage .popup.challenge-win,#gameStage .popup.color-streak,
  #gameStage>.queue-title .challenge-hud.challenge-arriving{
    animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important;
  }
  #gameStage>.queue-title .challenge-hud.challenge-arriving{transform:none!important}
}
/* v98: cumulative completed / resolved missions in the existing challenge strip.
   The optional progress never changes the board's position or HUD height. */
.challenge-hud .ch-eyebrow{display:flex!important;align-items:center;gap:8px;white-space:nowrap;letter-spacing:.65px!important}
.challenge-hud .ch-record{font-size:9px;font-weight:700;letter-spacing:.15px;color:#c6dcd9;opacity:.9;white-space:nowrap}
@media(max-width:350px){.challenge-hud .ch-eyebrow{gap:5px;letter-spacing:.2px!important}.challenge-hud .ch-record{font-size:8px}}
\n\n/* ================================================================
   PopWink v105 — MOONLIT MIST / visual skin only
   Gameplay, touch targets, round-rack rendering and logic stay v104.
   The logical 7x7 board is NOT staggered: it needs true aligned rows.
   ================================================================ */
:root {
 --moon-ink: #ebecfb;
 --moon-haze: #a8b5d4;
 --moon-silver: #b9c9e5;
 --moon-tint: #d7d7f2;
}
html{background:#10162b!important}
body{
 color:var(--moon-ink)!important;
 background:
  radial-gradient(ellipse 55% 26% at 81% 4%,rgba(237,199,181,.12),transparent 78%),
  radial-gradient(ellipse 85% 48% at 20% 39%,rgba(86,101,164,.21),transparent 78%),
  radial-gradient(ellipse 85% 45% at 100% 85%,rgba(150,113,166,.12),transparent 78%),
  linear-gradient(169deg,#10172e 0%,#222c4c 30%,#1a2848 57%,#141c35 85%,#101528 100%)!important;
 min-height:100dvh;
}
main.moonlit-app{
 position:relative;isolation:isolate;max-width:600px!important;
 margin:auto;padding:10px 14px 25px!important;
 min-height:100dvh;
}
.night-atmosphere{position:absolute;inset:0 0 auto; height:780px;overflow:hidden;pointer-events:none;z-index:-1;}
.night-star{position:absolute;border-radius:100%;width:2px;height:2px;background:#e1e5fd;box-shadow:0 0 8px rgba(235,237,255,.75);opacity:.55}
.star-one{top:40px;left:13%}.star-two{top:135px;left:86%;width:1px;height:1px}.star-three{top:318px;left:5%;opacity:.24}.star-four{top:390px;left:94%;opacity:.35}
.moon-sickle{
 position:absolute;top:28px;right:clamp(21px,6vw,54px);
 width:49px;height:49px;border-radius:100%;
 background:transparent;box-shadow:12px -10px 0 -1px #f6dfa9;
 filter:drop-shadow(2px 1px 13px rgba(249,222,180,.28));
 transform:rotate(-8deg);opacity:.92;
}
.mist-ridge{position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px);}
.ridge-far{top:94px;left:-24%;width:148%;height:180px;transform:rotate(-3deg);background:radial-gradient(ellipse at 38% 80%,rgba(94,106,153,.26),transparent 72%)}
.ridge-near{top:340px;left:-30%;width:170%;height:430px;background:radial-gradient(ellipse at 50% 78%,rgba(93,103,149,.10),transparent 70%);}
.moonlit-app .layout{display:block!important;width:100%!important;margin:0 auto!important;max-width:520px!important}
.moonlit-app .panel{
 margin:0!important;padding:0!important;
 background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
.moonlit-app .bloop-header{
 position:relative;z-index:2;display:flex!important;justify-content:flex-start!important;
 align-items:center!important;text-align:left!important;
 height:95px!important;min-height:95px!important;
 padding:8px 3px 0!important;margin:0 auto 4px!important;
 max-width:520px!important;
}
.moonlit-app .bloop-header .brand-lockup{
 margin:0!important;width:auto!important;justify-content:flex-start!important;
 gap:11px!important;align-items:center!important;
}
.moonlit-app .brand-lockup>div,.moonlit-app .bloop-header .brand-lockup>div{text-align:left!important}
.moonlit-app .brand-lockup h1,.moonlit-app .bloop-header h1{
 font-size:clamp(32px,8vw,43px)!important;
 font-weight:830!important;letter-spacing:-1.85px!important;
 color:#edf0ff!important;line-height:1.0!important;
 text-shadow:0 2px 17px rgba(203,206,252,.14)!important;
}
.moonlit-app .bloop-header .brand-tagline{
 margin:6px 0 0!important;color:#a1acd0!important;
 text-transform:lowercase!important;letter-spacing:1.65px!important;
 font-size:9px!important;font-weight:560!important;white-space:nowrap;
}
.moonlit-app .brand-mark{
 width:49px!important;height:49px!important;flex:none!important;
 /* The original asymmetrical goofy eyes and palette cycle remain intact. */
 box-shadow:inset 0 3px 6px rgba(255,255,255,.7),inset 0 -6px 8px rgba(14,31,59,.33),0 3px 19px rgba(171,201,250,.25)!important;
}
.moonlit-app .brand-mark .brand-eye{top:14px;left:12px;width:12px;height:15px}
.moonlit-app .brand-mark .brand-eye.eye-two{top:12px;left:29px;width:13px;height:17px}
/* Comfortable portrait composition, even when presented on a desktop. */
#gameStage{
 grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:auto auto auto auto auto!important;
 grid-template-areas:"stats" "heading" "board" "queue" "actions"!important;
 gap:7px!important;align-items:start!important;
 max-width:520px!important;width:100%!important;margin:0 auto!important;
}
#gameStage>.stats{
 grid-area:stats!important;position:relative;
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:0!important;align-items:center!important;
 margin:0!important;padding:4px 0 7px!important;
 background:none!important;border:0!important;
}
#gameStage>.stats .stat{
 border:0!important;box-shadow:none!important;border-radius:0!important;
 background:none!important;min-height:52px!important;padding:5px 12px!important;
 text-align:center!important;
}
#gameStage>.stats .stat+ .stat{border-left:1px solid rgba(214,224,251,.16)!important}
#gameStage>.stats .stat small{
 color:#a6b6dc!important;letter-spacing:2.2px!important;
 font-size:9px!important;font-weight:650!important;
}
#gameStage>.stats .stat strong{
 color:#edf1ff!important;font-weight:680!important;letter-spacing:-.55px!important;
 font-size:clamp(24px,6vw,30px)!important;line-height:1.08!important;
 text-shadow:0 2px 12px rgba(222,226,255,.1);
}
#gameStage>.queue-title{
 grid-area:heading!important;
 height:43px!important;min-height:43px!important;
 margin:0!important;padding:0!important;
 position:relative!important;align-self:center!important;
}
#gameStage>.queue-title .challenge-hud{
 border:1px solid rgba(201,217,244,.23)!important;
 background:linear-gradient(110deg,rgba(54,69,115,.76),rgba(34,47,81,.85))!important;
 border-radius:17px!important;
 padding:5px 14px!important;
 box-shadow:0 4px 24px rgba(6,12,29,.17),inset 0 1px rgba(244,249,255,.08)!important;
}
.challenge-hud .ch-eyebrow{color:#b7d9e9!important}
.challenge-hud .ch-record{color:#c4cce2!important}
.challenge-hud .ch-timer{color:#f2e2c5!important;font-weight:750!important}
/* Underlying game surface blends with its surroundings, not a card inside a card. */
body.wrap-texture #gameStage>.sheet,
#gameStage>.sheet{
 grid-area:board!important;width:100%!important;min-height:0!important;
 margin:0!important;padding:5px!important;
 border:0!important;border-radius:20px!important;
 background:linear-gradient(155deg,rgba(190,202,236,.08),rgba(133,153,197,.025) 48%,rgba(189,182,215,.04))!important;
 box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 32px rgba(12,22,44,.13)!important;
 overflow:visible!important;
}
body.wrap-texture #gameStage>.sheet::before{
 inset:0!important;border-radius:20px!important;
 background:linear-gradient(135deg,rgba(222,229,255,.07),transparent 25% 68%,rgba(202,211,249,.03))!important;
}
body.wrap-texture #gameStage #board,
#gameStage>#sheet>#board{
 position:relative!important;
 width:100%!important;aspect-ratio:1/1!important;height:auto!important;
 gap:2px!important;padding:4px!important;border-radius:18px!important;
 background:
  radial-gradient(ellipse at 22% 7%,rgba(222,234,255,.13),transparent 70%),
  linear-gradient(158deg,rgba(74,91,134,.20),rgba(77,95,138,.10) 51%,rgba(149,143,174,.07))!important;
 box-shadow:inset 0 0 0 1px rgba(218,231,255,.10),inset 0 10px 26px rgba(17,25,50,.12)!important;
}
/* Remove printed dots behind cells; retain a regular accessible 7x7 grid. */
body.wrap-texture #gameStage #board::before{opacity:0!important}
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::before{
 inset:1.8%!important;
 border:1px solid rgba(228,236,255,.31)!important;
 background:
   radial-gradient(ellipse at 29% 21%,rgba(250,251,255,.32),transparent 22%),
   radial-gradient(circle at 50% 54%,rgba(210,224,251,.09),rgba(136,160,209,.085) 56%,rgba(22,35,68,.23) 89%,rgba(16,25,51,.33))!important;
 box-shadow:inset 1px 2px 3px rgba(238,242,255,.22),inset -2px -3px 6px rgba(16,27,52,.28),0 1px 2px rgba(12,22,42,.12)!important;
}
body.wrap-texture #gameStage #board>.cell:not(.filled):not(.pop-now)::after{
 background:radial-gradient(circle at 22% 17%,rgba(255,255,255,.16),transparent 25%)!important;opacity:.55!important;
}
/* Preserve filled Bloopkins' chromatic bodies and especially their live eyes. */
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::before{
 border-color:rgba(240,246,255,.58)!important;
 box-shadow:inset 2px 2px 5px rgba(255,255,255,.42),inset -3px -4px 7px rgba(37,44,70,.19),0 1px 4px rgba(6,14,35,.16)!important;
}
/* Three gently morphing air-pockets where the living shapes wait. */
#gameStage>#rack{
 grid-area:queue!important;display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:minmax(0,1fr)!important;
 width:100%!important;height:auto!important;min-height:0!important;
 margin:7px auto 2px!important;gap:clamp(8px,2.7vw,15px)!important;
 align-items:center!important;
}
#gameStage>#rack>.piece{
 position:relative!important;isolation:isolate!important;
 width:100%!important;height:clamp(91px,25vw,114px)!important;
 min-height:91px!important;min-width:0!important;
 padding:8px 2px!important;
 border:1px solid rgba(215,225,255,.23)!important;
 border-radius:49% 51% 50% 50% / 48% 49% 51% 52%;
 background:
  radial-gradient(ellipse at 27% 12%,rgba(249,251,255,.22),transparent 49%),
  radial-gradient(ellipse at 68% 85%,rgba(151,155,206,.19),transparent 66%),
  rgba(160,181,226,.10)!important;
 box-shadow:inset 1px 3px 7px rgba(250,252,255,.13),inset -3px -6px 15px rgba(18,29,59,.16),0 5px 21px rgba(11,20,45,.09)!important;
 overflow:hidden!important;
 transform:none!important;
 animation:moonPocketBreathe 8.6s ease-in-out infinite!important;
 animation-delay:calc(var(--pocket-index,0) * -2.9s)!important;
 transition:border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
#gameStage>#rack>.piece:nth-child(1){--pocket-index:0}
#gameStage>#rack>.piece:nth-child(2){--pocket-index:1}
#gameStage>#rack>.piece:nth-child(3){--pocket-index:2}
@keyframes moonPocketBreathe{
 0%,100%{border-radius:49% 51% 50% 50% / 48% 49% 51% 52%;filter:brightness(1)}
 28%{border-radius:53% 47% 47% 53% / 52% 46% 54% 48%;filter:brightness(1.055)}
 57%{border-radius:46% 54% 53% 47% / 46% 54% 48% 52%;filter:brightness(.985)}
 78%{border-radius:52% 48% 49% 51% / 49% 53% 47% 51%;filter:brightness(1.02)}
}
#gameStage>#rack>.piece[aria-pressed="true"]{
 border-color:rgba(232,240,255,.67)!important;
 background:radial-gradient(ellipse at 25% 12%,rgba(246,251,255,.28),transparent 49%),rgba(144,167,225,.22)!important;
 box-shadow:0 0 0 1px rgba(203,216,255,.13),0 0 23px rgba(179,188,242,.13),inset 0 2px 13px rgba(255,255,255,.10)!important;
}
#gameStage>#rack>.piece.used{
 border:1px solid rgba(203,219,253,.095)!important;
 background:rgba(70,86,134,.035)!important;
 box-shadow:inset 0 1px 7px rgba(19,30,55,.14)!important;
 opacity:.65!important;
}
#gameStage>#rack .mini-rack{
 --rack-bubble:clamp(18px,5.15vw,25px);--rack-gap:2px;
 grid-template-columns:repeat(var(--shape-cols),var(--rack-bubble))!important;
 gap:var(--rack-gap)!important;
 scale:1.04!important;
}
#gameStage>#rack .mini-rack .minicell,#gameStage>#rack .mini-rack .minispacer{
 width:var(--rack-bubble)!important;height:var(--rack-bubble)!important;
}
#gameStage>#rack .minicell.on{animation:rackAlive 7.1s ease-in-out infinite,queueBlob 9s ease-in-out infinite!important}
/* Quiet controls that do not compete with board or characters. */
#gameStage>.stage-buttons{
 grid-area:actions!important;display:flex!important;justify-content:center!important;
 width:100%!important;margin:4px auto 0!important;
}
#gameStage>.stage-buttons>#restart{
 width:auto!important;max-width:180px!important;min-width:140px!important;
 min-height:38px!important;padding:7px 22px!important;
 border:1px solid rgba(199,216,248,.20)!important;border-radius:999px!important;
 background:rgba(159,178,221,.075)!important;
 color:#cad5ee!important;font-size:12px!important;font-weight:570!important;
 box-shadow:inset 0 1px rgba(239,243,255,.05)!important;
}
#gameStage>.stage-buttons>#restart:hover{background:rgba(182,203,243,.13)!important}
.moonlit-app .game-settings{
 margin:12px auto 0!important;max-width:520px!important;
 background:rgba(112,131,178,.065)!important;
 border:1px solid rgba(195,214,243,.15)!important;
 border-radius:18px!important;box-shadow:none!important;
}
.moonlit-app .game-settings>summary{
 min-height:40px!important;padding:10px 17px!important;
 font-size:11px!important;font-weight:590!important;
 color:#b6c3e2!important;letter-spacing:.35px;
}
.moonlit-app .game-settings>summary>span{color:#8398c1!important;font-size:10px!important;opacity:.85!important}
.moonlit-app .game-settings[open]{background:rgba(19,28,52,.94)!important;border-color:rgba(190,214,249,.25)!important}
.moonlit-app .notice[hidden],.moonlit-app .ghost-ui{display:none!important}
.moonlit-app #notice:not([hidden]){
 max-width:520px;margin:9px auto 0!important;
 border-radius:14px!important;background:rgba(24,32,61,.68)!important;
 border-color:rgba(175,195,231,.20)!important;
 color:#c4d3eb!important;
}
/* Subtle POP TIME clock, never mask the underlying 7x7 canvas. */
.moonlit-app .pop-time-clock{
 border-color:rgba(253,223,190,.68)!important;
 background:linear-gradient(150deg,#53527c,#343b68)!important;
 box-shadow:0 6px 27px rgba(7,14,36,.38)!important;
}
@media(max-width:520px){
 main.moonlit-app{padding:8px 11px 23px!important}
 .moonlit-app .bloop-header{height:90px!important;min-height:90px!important;margin-bottom:0!important}
 #gameStage{gap:5px!important}
 #gameStage>.queue-title{height:40px!important;min-height:40px!important}
 #gameStage>#rack{margin-top:6px!important;gap:8px!important}
 #gameStage>#rack>.piece{height:clamp(86px,26vw,109px)!important;min-height:86px!important;padding:6px 1px!important}
 body.wrap-texture #gameStage>.sheet,#gameStage>.sheet{padding:3px!important;border-radius:15px!important}
 body.wrap-texture #gameStage #board,#gameStage>#sheet>#board{gap:2px!important;padding:3px!important;border-radius:14px!important}
 #gameStage>.stats .stat{min-height:48px!important;padding:2px 8px!important}
 #gameStage>.stage-buttons>#restart{min-height:36px!important}
 .moonlit-app .game-settings{margin-top:10px!important}
}
@media(max-width:355px){
 #gameStage>#rack>.piece{height:83px!important;min-height:83px!important}
 #gameStage>#rack .mini-rack{--rack-bubble:17px!important;--rack-gap:1px!important}
 .moonlit-app .brand-lockup h1{font-size:32px!important}
 #gameStage>.queue-title{height:38px!important;min-height:38px!important}
}
@media(orientation:landscape) and (max-height:600px){
 /* Keep game ergonomic in short landscape displays. */
 main.moonlit-app{max-width:950px!important;padding:5px 12px 15px!important}
 .moonlit-app .bloop-header{height:52px!important;min-height:52px!important;margin-bottom:2px!important}
 .moonlit-app .brand-mark{width:38px!important;height:38px!important}
 #gameStage{max-width:900px!important;grid-template-columns:minmax(0,1fr) minmax(180px,230px)!important;
   grid-template-areas:"stats heading" "board queue" "actions actions"!important;
   grid-template-rows:auto auto auto!important;gap:9px 15px!important;align-items:start!important;}
 #gameStage>#rack{grid-template-columns:1fr!important;grid-template-rows:repeat(3,1fr)!important;gap:8px!important;margin:0!important;height:100%!important}
 #gameStage>#rack>.piece{height:auto!important;min-height:0!important}
 #gameStage>.queue-title{height:36px!important;min-height:36px!important}
}
@media(prefers-reduced-motion:reduce){
 #gameStage>#rack>.piece{animation:none!important}
}

/* v105 air-pocket correction: the animated membrane is a pseudo-element.
   CSS !important declarations in older mobile media queries otherwise freeze
   border-radius animation on the button itself. The button hit box never moves. */
#gameStage>#rack>.piece:not(.used),
#gameStage>#rack>.piece:not(.used)[aria-pressed="true"]{
  position:relative!important;
  border:0!important;background:none!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;
  animation:none!important;
  filter:none!important;
}
#gameStage>#rack>.piece:not(.used)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:49% 51% 50% 50% / 48% 49% 51% 52%;
  background:
    radial-gradient(ellipse at 27% 12%,rgba(249,251,255,.22),transparent 49%),
    radial-gradient(ellipse at 68% 85%,rgba(151,155,206,.19),transparent 66%),
    rgba(160,181,226,.10);
  border:1px solid rgba(215,225,255,.23);
  box-shadow:inset 1px 3px 7px rgba(250,252,255,.13),inset -3px -6px 15px rgba(18,29,59,.16),0 5px 21px rgba(11,20,45,.09);
  animation:moonPocketBreathe 8.6s ease-in-out infinite;
  animation-delay:calc(var(--pocket-index,0) * -2.9s);
}
#gameStage>#rack>.piece[aria-pressed="true"]::before{
  border-color:rgba(232,240,255,.67);
  background:radial-gradient(ellipse at 25% 12%,rgba(246,251,255,.28),transparent 49%),rgba(144,167,225,.22);
  box-shadow:0 0 0 1px rgba(203,216,255,.13),0 0 23px rgba(179,188,242,.13),inset 0 2px 13px rgba(255,255,255,.10);
}
#gameStage>#rack>.piece:not(.used) .mini{position:relative!important;z-index:1}
#gameStage>#rack>.piece.used{border-radius:50%!important}
@media(prefers-reduced-motion:reduce){#gameStage>#rack>.piece::before{animation:none!important}}


/* v106 — POPEX • immersive minimal UI, layout-only follow-up to v105.
   All gameplay, faces, physics, timers and bubble colors inherited intact. */
.moon-sickle{display:none!important}
:root{color-scheme:dark}
html,body{width:100%;min-height:100%;overscroll-behavior-y:contain}
main.moonlit-app{
 padding-top:calc(9px + env(safe-area-inset-top,0px))!important;
 padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
 min-height:100dvh!important;
}
.moonlit-app .bloop-header{
 display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px!important;
 gap:7px!important;align-items:center!important;justify-content:stretch!important;
 max-width:520px!important;height:74px!important;min-height:74px!important;
 padding:2px 0 0!important;margin:0 auto 1px!important;
}
.moonlit-app .bloop-header .brand-lockup{
 grid-column:2!important;grid-row:1!important;min-width:0!important;
 width:100%!important;justify-content:center!important;gap:7px!important;
}
.moonlit-app .bloop-header .brand-lockup>div{text-align:center!important;min-width:0!important}
.moonlit-app .brand-lockup h1,.moonlit-app .bloop-header h1{
 font-size:clamp(28px,7.7vw,42px)!important;letter-spacing:-1.8px!important;
 line-height:1.05!important;white-space:nowrap!important;
}
.brand-exclaim{color:#d8c8eb}
.moonlit-app .bloop-header .brand-tagline{letter-spacing:.9px!important;font-size:8px!important;margin-top:3px!important}
.moonlit-app .brand-mark{
 width:42px!important;height:42px!important;
 margin:0!important;transform:none!important;
}
.moonlit-app .brand-mark .brand-eye{top:11px;left:9px;width:12px;height:14px}
.moonlit-app .brand-mark .brand-eye.eye-two{top:10px;left:25px;width:13px;height:17px}
.moonlit-app .bloop-header .top-bubble{
 grid-row:1!important;align-self:center!important;
 width:44px;height:44px;border:1px solid rgba(216,231,255,.23);
 color:#e4eafc;background:radial-gradient(ellipse at 24% 15%,rgba(244,249,255,.22),transparent 48%),rgba(140,160,211,.11);
 box-shadow:inset 0 2px 4px rgba(255,255,255,.12),inset 0 -5px 8px rgba(11,23,55,.20),0 3px 14px rgba(7,15,31,.14);
 border-radius:49% 51% 53% 47% / 54% 47% 53% 46%;
 display:grid;place-items:center;appearance:none;touch-action:manipulation;
 padding:11px;transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.moonlit-app .bloop-header .top-bubble:active{transform:scale(.93)}
.moonlit-app .bloop-header .top-bubble:focus-visible{outline:2px solid #e1efff;outline-offset:2px}
.moonlit-app .bloop-header .top-bubble svg{width:21px;height:21px;display:block}
.moonlit-app .bloop-header .top-settings{grid-column:1!important}
.moonlit-app .bloop-header .top-restart{grid-column:3!important;justify-self:end!important}
#gameStage{grid-template-rows:auto auto auto auto!important;grid-template-areas:"stats" "heading" "board" "queue"!important;gap:4px!important}
#gameStage>.stats{padding:0 0 2px!important}
#gameStage>.stats .stat{min-height:46px!important;padding:3px 8px!important}
#gameStage>.stats .stat small{font-size:8px!important}
#gameStage>.stats .stat strong{font-size:clamp(22px,5.7vw,28px)!important}
#gameStage>.queue-title{height:32px!important;min-height:32px!important}
#gameStage>#rack{margin-top:5px!important;margin-bottom:0!important;gap:7px!important}
#gameStage>#rack>.piece{height:clamp(80px,23vw,102px)!important;min-height:80px!important}
#gameStage>.stage-buttons{display:none!important}
/* The settings overlay does NOT occupy space below the board. */
.settings-backdrop[hidden]{display:none!important}
.settings-backdrop{position:fixed;inset:0;z-index:750;background:rgba(7,11,26,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.moonlit-app #gameSettings:not([open]){display:none!important}
.moonlit-app #gameSettings[open]{
 display:block!important;position:fixed!important;z-index:751!important;
 left:50%!important;transform:translateX(-50%)!important;
 top:calc(env(safe-area-inset-top,0px) + 68px)!important;
 width:min(92vw,460px)!important;
 max-height:calc(100dvh - 85px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
 overflow-y:auto!important;-webkit-overflow-scrolling:touch;
 border:1px solid rgba(220,231,255,.24)!important;
 border-radius:26px 28px 24px 30px / 29px 25px 30px 26px!important;
 background:radial-gradient(ellipse at 24% 5%,rgba(204,217,253,.16),transparent 53%),linear-gradient(153deg,rgba(48,59,96,.99),rgba(23,32,62,.99))!important;
 box-shadow:0 24px 70px rgba(1,4,16,.49),inset 0 1px rgba(250,253,255,.1)!important;
 margin:0!important;padding:14px!important;
}
.moonlit-app #gameSettings>summary{display:none!important}
.settings-topline{display:flex;align-items:center;justify-content:space-between;color:#e7eafa;font-size:13px;font-weight:800;letter-spacing:2.4px;padding:0 0 12px 7px}
.settings-topline button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(223,237,255,.25);background:rgba(228,238,255,.11);color:#f7f9ff;font-size:23px;line-height:1}
.moonlit-app #gameSettings .settings-content{max-height:none!important}
/* Bubble-membrane family for all transient messages. */
#gameStage .popup,
#gameStage .popup.warn,#gameStage .popup.ready,
#gameStage .popup.color-streak,#gameStage .popup.challenge-win,
#gameStage .popup.board-clear,#gameStage .popup.story-intro,
#gameStage .popup.story-nervous{
 padding:13px 19px!important;
 width:max-content!important;min-width: min(66%,205px)!important;
 max-width: min(89%,345px)!important;
 min-height:58px!important;
 height:auto!important;white-space:pre-line!important;overflow-wrap:break-word!important;
 display:flex!important;flex-direction:column;align-items:center;justify-content:center!important;
 border-radius:47% 53% 48% 52% / 35% 32% 36% 33%!important;
 border:1px solid rgba(230,239,255,.42)!important;
 color:#f6f8ff!important;font-size:clamp(16px,4.5vw,29px)!important;line-height:1.15!important;
 background:
   radial-gradient(ellipse at 27% 8%,rgba(239,246,255,.30),transparent 54%),
   radial-gradient(ellipse at 77% 92%,rgba(182,172,223,.26),transparent 59%),
   linear-gradient(140deg,rgba(75,95,144,.95),rgba(48,60,106,.96))!important;
 box-shadow:inset 0 3px 8px rgba(255,255,255,.14),inset 0 -7px 15px rgba(18,23,61,.20),0 10px 37px rgba(4,9,29,.34)!important;
 text-shadow:0 1px 5px rgba(9,16,42,.34)!important;
}
#gameStage .popup.challenge-win{padding:15px 19px!important;min-width:min(75%,260px)!important}
#gameStage .popup.challenge-win .ch-win-heading{color:#e4f8f7!important;white-space:normal!important;font-size:clamp(14px,3.6vw,18px)!important}
#gameStage .popup.challenge-win .ch-win-detail{color:#ffe5d0!important;white-space:normal!important;font-size:clamp(12px,3.4vw,16px)!important;margin-top:5px!important}
#gameStage>.sheet>.bonus-countdown:not([hidden]){
 max-width:80%!important;min-width:min(66%,260px)!important;
 padding:15px 18px!important;text-align:center!important;
 border-radius:47% 53% 49% 51% / 34% 35% 33% 36%!important;
 border:1px solid rgba(230,237,255,.52)!important;
 background:radial-gradient(ellipse at 27% 8%,rgba(242,249,255,.35),transparent 50%),linear-gradient(145deg,rgba(88,107,150,.95),rgba(43,54,99,.97))!important;
 box-shadow:inset 0 2px 8px rgba(255,255,255,.20),0 8px 35px rgba(3,9,35,.45)!important;
 text-shadow:0 2px 13px rgba(12,24,59,.52)!important;color:#f7f5ff!important;
 font-size:clamp(27px,7vw,46px)!important;letter-spacing:.7px!important;
}
#gameStage>.stats .pop-time-hud{top:-51px!important}
.moonlit-app .pop-time-clock,
#gameStage .pop-time-clock{
 border:1px solid rgba(226,236,254,.46)!important;
 border-radius:31% 28% 33% 27% / 29% 34% 29% 33%!important;
 background:radial-gradient(ellipse at 25% 10%,rgba(236,244,255,.29),transparent 53%),linear-gradient(154deg,rgba(87,105,157,.97),rgba(46,58,108,.98))!important;
 box-shadow:inset 0 3px 10px rgba(255,255,255,.15),inset 0 -6px 12px rgba(20,28,68,.18),0 6px 30px rgba(7,13,37,.39)!important;
}
#gameStage .pop-time-clock small{color:#e4eafb!important;letter-spacing:1.1px!important}
#gameStage .pop-time-clock span{color:#d4e1f2!important}
#gameStage .pop-time-clock strong{color:#fff7ec!important;text-shadow:0 1px 7px rgba(23,29,60,.3)!important}
#gameStage>.queue-title .challenge-hud{
 border-radius:44% 56% 45% 55% / 37% 32% 36% 33%!important;
 background:radial-gradient(ellipse at 23% 7%,rgba(232,237,255,.22),transparent 52%),linear-gradient(105deg,rgba(86,105,147,.88),rgba(46,58,101,.92))!important;
 border:1px solid rgba(212,230,255,.30)!important;
 box-shadow:inset 0 2px 7px rgba(244,248,255,.14),0 5px 15px rgba(10,16,36,.16)!important;
}
.gameover-card,.pw72-dialog{
 border-radius:28px 34px 30px 35px / 36px 27px 34px 29px!important;
 border-color:rgba(216,231,255,.31)!important;
 background:radial-gradient(ellipse at 22% 0%,rgba(238,241,255,.15),transparent 51%),linear-gradient(155deg,#343f69,#1b2647)!important;
 box-shadow:inset 0 2px 8px rgba(249,253,255,.06),0 24px 72px rgba(3,9,27,.50)!important;
}
.gameover-retry,.pw72-actions button.pw72-primary{border-radius:38% 35% 37% 36% / 30% 32% 31% 33%!important;background:linear-gradient(120deg,#c4dce9,#aabbdc)!important;color:#1b2843!important}
.gameover-metrics span{border-radius:22px!important}
@media(max-width:520px){
 main.moonlit-app{padding:calc(8px + env(safe-area-inset-top,0px)) 9px calc(12px + env(safe-area-inset-bottom,0px))!important}
 .moonlit-app .bloop-header{height:64px!important;min-height:64px!important}
 .moonlit-app .bloop-header .top-bubble{width:39px;height:39px;padding:9px}
 .moonlit-app .bloop-header{grid-template-columns:41px minmax(0,1fr) 41px!important}
 .moonlit-app .brand-mark{width:37px!important;height:37px!important}
 .moonlit-app .brand-mark .brand-eye{top:9px;left:8px;width:11px;height:13px}
 .moonlit-app .brand-mark .brand-eye.eye-two{top:9px;left:23px;width:12px;height:15px}
 .moonlit-app .brand-lockup h1{font-size:clamp(27px,7.5vw,36px)!important}
 #gameStage>.queue-title{height:32px!important;min-height:32px!important}
 .moonlit-app #gameSettings[open]{top:calc(env(safe-area-inset-top,0px) + 56px)!important;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 68px - env(safe-area-inset-bottom,0px))!important}
}
@media(max-height:720px) and (orientation:portrait){
 .moonlit-app .bloop-header{height:50px!important;min-height:50px!important}
 .moonlit-app .brand-mark{width:34px!important;height:34px!important}
 #gameStage>.queue-title{height:29px!important;min-height:29px!important}
 #gameStage>.stats .stat{min-height:39px!important}
 #gameStage>#rack>.piece{height:75px!important;min-height:75px!important}
 main.moonlit-app{padding-bottom:7px!important}
}
@media(orientation:landscape) and (max-height:600px){
 .moonlit-app .bloop-header{height:42px!important;min-height:42px!important}
 #gameStage{grid-template-areas:"stats heading" "board queue"!important;grid-template-rows:auto auto!important}
}
@media(prefers-reduced-motion:reduce){.moonlit-app .bloop-header .top-bubble{transition:none!important}}

/* v106 QA refinements: short-screen scroll and POP TIME clock placement. */
.moonlit-app .night-atmosphere{height:100%!important;max-height:100dvh!important}
#gameStage>.stats .pop-time-hud{top:-9px!important;bottom:auto!important;height:71px!important}
#gameStage .pop-time-clock,
.moonlit-app .pop-time-clock{
 width:72px!important;height:72px!important;
 border-radius:27% 30% 29% 28% / 30% 28% 32% 27%!important;
}
#gameStage .pop-time-clock small{font-size:7px!important;letter-spacing:.7px!important}
#gameStage .pop-time-clock strong{font-size:37px!important}
#gameStage .pop-time-clock span{font-size:7px!important;letter-spacing:.2px!important}
@media(max-width:355px){
 #gameStage>.stats .pop-time-hud{top:-5px!important}
 #gameStage .pop-time-clock{width:65px!important;height:65px!important}
 #gameStage .pop-time-clock strong{font-size:33px!important}
}
@media(orientation:landscape) and (max-height:600px){
 main.moonlit-app{padding:5px 10px 8px!important}
 .moonlit-app .bloop-header{height:54px!important;min-height:54px!important}
 #gameStage{
  max-width:670px!important;width:100%!important;
  grid-template-columns:minmax(0,265px) minmax(0,185px)!important;
  grid-template-areas:"stats heading" "board queue"!important;
  grid-template-rows:39px auto!important;
  gap:5px 12px!important;justify-content:center!important;
 }
 #gameStage>.stats{align-self:center!important;padding:0!important}
 #gameStage>.stats .stat{min-height:37px!important;padding:0 5px!important}
 #gameStage>.stats .stat strong{font-size:22px!important}
 #gameStage>.queue-title{height:37px!important;min-height:37px!important;align-self:center!important}
 #gameStage>#sheet{width:min(100%,calc(100dvh - 122px))!important;justify-self:center!important}
 #gameStage>#rack{width:100%!important;height:min(100%,calc(100dvh - 122px))!important;min-height:0!important;
   grid-template-columns:1fr!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;
   gap:5px!important;margin:0!important;align-self:start!important}
 #gameStage>#rack>.piece{height:100%!important;min-height:0!important;padding:1px!important}
 #gameStage>#rack .mini-rack{--rack-bubble:clamp(12px,2.5vw,17px)!important;--rack-gap:1px!important}
 #gameStage .pop-time-clock{width:43px!important;height:43px!important}
 #gameStage .pop-time-clock strong{font-size:29px!important}
 #gameStage .pop-time-clock small,#gameStage .pop-time-clock span{display:none!important}
 #gameStage>.stats .pop-time-hud{top:-2px!important;height:44px!important}
}

/* The translucent overlay membrane very subtly breathes even when the
   message itself uses a separate pop-in/out animation. */
#gameStage .popup::before,
#gameStage>.sheet>.bonus-countdown:not([hidden])::before,
#gameStage>.queue-title .challenge-hud:not([hidden])::before{
 content:"";position:absolute;inset:1px;border-radius:inherit;
 border:1px solid rgba(240,246,255,.20);
 background:radial-gradient(ellipse at 24% 12%,rgba(240,248,255,.19),transparent 59%);
 pointer-events:none;animation:moonMembraneBreathe 5.8s ease-in-out infinite;
}
@keyframes moonMembraneBreathe{
 0%,100%{border-radius:46% 54% 49% 51% / 37% 31% 36% 33%;opacity:.78}
 45%{border-radius:52% 48% 54% 46% / 29% 38% 31% 40%;opacity:.98}
 73%{border-radius:48% 52% 47% 53% / 38% 30% 41% 29%;opacity:.72}
}
.moonlit-app #notice:not([hidden]){
 border-radius:26px 31px 25px 30px / 23px 27px 22px 29px!important;
 background:radial-gradient(ellipse at 22% 9%,rgba(221,231,255,.15),transparent 55%),rgba(49,65,106,.93)!important;
 border:1px solid rgba(219,233,255,.28)!important;
 padding:10px 16px!important;max-width:min(95%,440px)!important;
 text-align:center!important;
}
@media(prefers-reduced-motion:reduce){
 #gameStage .popup::before,#gameStage>.sheet>.bonus-countdown::before,#gameStage>.queue-title .challenge-hud::before{animation:none!important}
}