*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
body{margin:0;background:#000;font-family:-apple-system,"Arial Rounded MT Bold",Helvetica,sans-serif;touch-action:manipulation}
#app{max-width:480px;margin:auto;min-height:100vh;background:#e9ecf0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
header{display:flex;gap:6px;align-items:center;padding:6px;background:linear-gradient(#c9d4e0,#9fb0c4)}
#hud{flex:1;background:linear-gradient(#2f5db8,#14306f);border-radius:8px;border:2px solid #0d2150;color:#fff;padding:3px 8px;text-align:center}
.names{display:flex;justify-content:space-between;font-weight:900;font-size:14px;color:#cfd8e6}.names .on{color:#ff6ad5}.vs{color:#9fd0ff}
.scores{display:flex;align-items:center;justify-content:space-between;font-size:22px}.sw{width:14px;height:14px;border-radius:3px;display:inline-block}
.sw.pink{background:#e64fc0}.sw.blue{background:#3fa6f0}
#pot{background:linear-gradient(#ffb43c,#f07a00);border:3px solid #fff;border-radius:16px;padding:0 10px;font-weight:900;box-shadow:0 2px 4px #0006}
.btn{background:linear-gradient(#4aa3f5,#1663c7);color:#fff;border:2px solid #0d3a80;border-radius:10px;font-weight:900;font-size:13px;box-shadow:inset 0 2px 0 #fff6,0 2px 3px #0005;padding:6px;position:relative}
.btn:disabled{background:linear-gradient(#c8ced6,#9aa4b0);border-color:#7a8592;color:#eef}
.sq{width:56px;height:44px;font-size:20px}
#board{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:4px;background:#d8dde3;aspect-ratio:1}
.cell{background:#eef1f4;border-radius:4px;position:relative;display:flex;align-items:center;justify-content:center;font-weight:900;color:#c3ccd6;font-size:22px}
.cell.m3::after{content:"x3"}.cell.m2::after{content:"x2";font-size:16px}
.cell.ok{outline:2px dashed #4aa3f5}
.tile{position:absolute;inset:2px;border-radius:5px;box-shadow:inset 0 -4px 6px #0003,inset 0 4px 4px #fff8,0 1px 2px #0005;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:900;text-shadow:0 1px 2px #0006}
.tile::before{content:"";position:absolute;left:8%;right:8%;top:6%;height:40%;border-radius:4px;background:linear-gradient(#fff9,#fff0)}
.yellow{background:linear-gradient(#ffe37a,#f5b10a)}.green{background:linear-gradient(#5be36a,#0e9c25)}.blue{background:linear-gradient(#8fd2ff,#2a8ee6)}
.pink{background:linear-gradient(#ff9be6,#d636b1)}.red{background:linear-gradient(#ff7a7a,#d01c1c)}.orange{background:linear-gradient(#ffc770,#f07c06)}
.tile.fresh{outline:3px solid #1b3f8f}
.star{background:linear-gradient(#e6f6ff,#a9d8f2);border:1px solid #8cc2e2}.star span{font-size:30px;text-shadow:0 2px 2px #a06800;position:relative}
.star em{position:absolute;font-style:normal;font-size:13px;color:#7a4b00;font-weight:900}
.star.mine{box-shadow:inset 0 0 0 2px #e64fc0}.star.theirs{box-shadow:inset 0 0 0 2px #3fa6f0}
#rack{display:flex;gap:8px;justify-content:center;padding:8px;background:linear-gradient(#cdd6e0,#b5c1ce);min-height:70px}
.rt{width:56px;height:56px;position:relative;border-radius:8px;background:#dfe5ec}.rt.sel{transform:translateY(-6px);filter:drop-shadow(0 0 6px #1b3f8f)}
#banner{align-self:center;background:linear-gradient(#e9eef4,#c5d0dc);color:#1b3f8f;font-weight:900;padding:4px 18px;border-radius:0 0 12px 12px;font-size:16px}
#banner.final{color:#c01;font-size:20px}
footer{display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr;gap:5px;padding:8px;background:#333a44;margin-top:auto;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
footer .btn{height:58px;font-size:12px}#power{font-size:28px}
#badge{position:absolute;top:-6px;right:-4px;background:#f07a00;border:2px solid #fff;border-radius:9px;font-size:12px;padding:0 5px}
#power.on{background:linear-gradient(#ffe37a,#f5a10a)}
#coins{background:linear-gradient(#24365c,#121c33);border-radius:8px;color:#fff;font-size:11px;text-align:center;padding-top:8px;font-weight:900}#coins b{color:#6f6;font-size:18px}
#overlay{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:9}#overlay.show{display:flex}
.card{background:#fff;border-radius:16px;padding:20px;width:85%;max-width:360px;text-align:center}.card h1{color:#1b3f8f;margin:0 0 8px}
.big{display:block;width:100%;margin-top:10px;font-size:16px;padding:12px}
#toast{position:fixed;left:50%;top:40%;transform:translate(-50%);background:#1b3f8fe0;color:#fff;font-weight:900;padding:10px 18px;border-radius:12px;font-size:20px;pointer-events:none;transition:opacity .4s;opacity:0}
.drag{position:fixed;width:50px;height:50px;pointer-events:none;z-index:20}
/* v4 layout: true-square board */
#app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
header,#rack,#banner,footer{flex:none}
#board{flex:none;align-self:center;aspect-ratio:1/1;grid-template-rows:repeat(8,1fr);
 width:min(100%,calc(100vh - 262px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
 width:min(100%,calc(100dvh - 262px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));border-radius:6px}
.cell{aspect-ratio:1/1;min-width:0;min-height:0;overflow:hidden;font-size:clamp(10px,4.5vmin,22px)}
.star span{font-size:min(30px,7vmin)}
#rack{min-height:0;height:72px;align-items:center}
.rt{width:56px;height:56px;aspect-ratio:1/1;flex:none}
footer{margin-top:auto}
/* v5: 3 sets of 3 tray */
#rack{height:auto;padding:8px 6px;gap:8px;justify-content:space-around;flex-wrap:nowrap}
.set{display:flex;gap:3px;padding:4px;background:#e2e8ef;border-radius:8px;box-shadow:inset 0 1px 3px #0003}
.rt{--t:min(34px,calc((100vw - 70px)/9.6));width:var(--t);height:var(--t);border-radius:5px;background:#cfd8e2}
.rt.sel{transform:translateY(-4px)}.rt .star span{font-size:calc(var(--t)*.6)}
.tile.star.fresh{outline:3px solid #1b3f8f}
#board{width:min(100%,calc(100dvh - 252px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
.drag{width:44px;height:44px}
.tile.pop{animation:pop .45s ease-out forwards}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(0);opacity:0}}
/* v6: connected 3-tile pieces */
#rack,#board{touch-action:none}
#rack{align-items:center;min-height:calc(var(--rt,30px)*3 + 30px)}
.set{position:relative;gap:0;padding:5px;cursor:grab}.set.v{flex-direction:column}.set.empty{opacity:.35}
.set .rt{--t:30px;border-radius:0;background:transparent}.set.h .rt:first-child{border-radius:6px 0 0 6px}
.set.sel{outline:3px solid #1b3f8f;outline-offset:1px}.set .rt .tile{inset:1px}
.rot{position:absolute;right:-8px;bottom:-8px;width:22px;height:22px;border-radius:11px;border:2px solid #fff;background:#1663c7;color:#fff;font-size:13px;padding:0;line-height:18px}
.drag.set{position:fixed;padding:0;background:none;box-shadow:none;width:auto;height:auto;opacity:.85;pointer-events:none;z-index:30}
.drag .rt{width:var(--t);height:var(--t)}
.cell.gok{background:#9be7a6;outline:2px solid #23a83a}.cell.gbad{background:#f4a3a3;outline:2px solid #d22}
#app{overscroll-behavior:none}
.drag.set .rt.big{width:var(--dt,40px);height:var(--dt,40px)}.drag.set .rt.big .tile{inset:2px}
#ver{margin-top:10px;font-size:12px;color:#7a8592;font-weight:700}
/* v8 rotation */
html,body,button,.set,.rot,#rack{touch-action:manipulation}
#rack .set{touch-action:none}
.rot{width:28px;height:28px;border-radius:14px;line-height:24px;font-size:15px;right:-10px;bottom:-10px;z-index:2}
.set.spin{animation:spin .2s ease-out}@keyframes spin{from{transform:rotate(-90deg) scale(.9)}to{transform:none}}
/* v9: uncommitted pieces glow */
.tile.fresh{outline:none;box-shadow:0 0 0 2px #fff,0 0 8px 3px #3fa6f0,inset 0 -4px 6px #0003;animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 2px #fff,0 0 12px 5px #7cc4ff,inset 0 -4px 6px #0003}}
/* v10: on-board rotate button */
.cell.hasrot{overflow:visible;z-index:5}
.rotb{position:absolute;right:-16px;top:-16px;width:34px;height:34px;border-radius:17px;border:2px solid #fff;background:linear-gradient(#4aa3f5,#1663c7);color:#fff;font-size:20px;font-weight:900;line-height:28px;padding:0;box-shadow:0 2px 5px #0007;z-index:6;touch-action:none}
.cell.pspin .tile{animation:spin .22s ease-out}
/* v11 power-up menu */
#pmenu{position:fixed;inset:0;background:#0008;display:none;align-items:flex-end;justify-content:center;z-index:40;padding-bottom:110px}#pmenu.show{display:flex}
.pcard{background:#fff;border-radius:16px;padding:14px;width:88%;max-width:360px}.ptitle{font-weight:900;color:#1b3f8f;text-align:center}
.pcard .big{text-align:left;margin-top:8px}.pcard small{display:block;font-size:11px;font-weight:600;opacity:.85}
.btn.cancel{background:linear-gradient(#c8ced6,#8f9aa7);border-color:#6d7884}
#tbar{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;display:none;gap:6px;align-items:center;background:#1b3f8fee;color:#fff;font-weight:900;padding:8px 10px;border-radius:14px;z-index:35;white-space:nowrap}#tbar.show{display:flex}
#tbar .btn{height:40px;padding:0 12px}#tgo{background:linear-gradient(#ff8a3c,#d9480f);border-color:#8a2a00}
.cell.aimp{background:#ffb3a0;box-shadow:inset 0 0 0 2px #e8590c}.cell.aimp .tile{filter:brightness(.8) saturate(1.2)}
.cell.boom{animation:boom .55s ease-out}@keyframes boom{0%{background:#fff3b0;box-shadow:0 0 18px 6px #ffb000}100%{background:#eef1f4;box-shadow:none}}
/* v11 profile/difficulty/economy */
.pname{display:block;text-align:left;font-weight:800;color:#1b3f8f;font-size:13px}.pname input{display:block;width:100%;font-size:17px;padding:8px;border:2px solid #9fb0c4;border-radius:8px;margin-top:4px}
.pstat{font-size:12px;color:#555;margin:6px 0}
.diff{display:flex;gap:4px;margin-top:6px}.diff button{flex:1;padding:9px 0;border-radius:8px;border:2px solid #1663c7;background:#fff;color:#1663c7;font-weight:900}.diff button.on{background:#1663c7;color:#fff}
.names{font-size:12px}.names span{white-space:nowrap}
.cost{display:block;font-size:9px;opacity:.9}
#badge{white-space:nowrap}
/* v12 live score preview */
#prev{position:fixed;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));background:#5a6472;color:#fff;font-weight:900;font-size:15px;padding:5px 12px;border-radius:14px;border:2px solid #fff;box-shadow:0 2px 6px #0006;display:none;z-index:8;pointer-events:none}
#prev.show{display:block}#prev.hot{background:linear-gradient(#ffb43c,#f07a00)}
.cell.will .tile{animation:will .7s ease-in-out infinite alternate}
@keyframes will{from{box-shadow:0 0 0 2px #fff,0 0 6px 2px #ffb000}to{box-shadow:0 0 0 3px #ffd84a,0 0 14px 6px #ff9000}}
.diff button{font-size:12px}
/* v14 online */
.online{margin-top:10px;border-top:1px solid #dde3ea;padding-top:6px}.joinrow{display:flex;gap:6px;margin-top:8px}
.joinrow input{flex:1;font-size:18px;letter-spacing:3px;text-transform:uppercase;text-align:center;padding:8px;border:2px solid #9fb0c4;border-radius:8px}
#onl{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:50}#onl.show{display:flex}
.code{font-size:40px;font-weight:900;letter-spacing:6px;color:#1b3f8f;margin:8px 0}
.card{max-height:92vh;overflow:auto}
/* v15: preview in header, very visible will-score ring, bubble pops */
#prev{display:none!important}
#pot{position:relative;display:inline-flex;flex-direction:column;align-items:center;line-height:1.05}
#potprev{font-size:13px;font-weight:900;border-radius:9px;padding:0 7px;margin-top:1px}#potprev:empty{display:none}
#potprev.hot{background:#fff;color:#e8590c;animation:pp .6s ease-in-out infinite alternate}#potprev.zero{background:#ffffff55;color:#fff}
@keyframes pp{to{transform:scale(1.12)}}
.cell.will{z-index:3}
.cell.will .tile{animation:will2 .5s ease-in-out infinite alternate;outline:4px solid #00f0ff;outline-offset:1px}
@keyframes will2{from{box-shadow:0 0 0 2px #fff,0 0 10px 4px #00f0ff;transform:scale(1)}to{box-shadow:0 0 0 4px #fff,0 0 22px 10px #00f0ff;transform:scale(1.08)}}
.tile.pop{animation:bub .6s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes bub{0%{transform:scale(1)}35%{transform:scale(1.45);filter:brightness(1.6)}60%{transform:scale(1.1);opacity:.9}100%{transform:scale(0);opacity:0}}
.prt{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;pointer-events:none;z-index:9;animation:prt .7s ease-out forwards;box-shadow:0 0 4px #fff}
@keyframes prt{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.prt.star{background:#ffd23a}.cell{overflow:visible}
.btn.mute{width:100%;margin-top:6px;background:linear-gradient(#7d8b9c,#5a6676);border-color:#46505c}
.btn.resume{background:linear-gradient(#5be36a,#0e9c25);border-color:#0a6b1a}
/* v17 */
.rotb{display:none!important}
.cell.pshake .tile{animation:shake .35s}@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
/* v18 */
.card .resume{margin:4px 0 10px;font-size:18px;padding:14px;box-shadow:0 0 0 3px #b8f5c0,0 3px 8px #0004}
.howto{text-align:left;margin:4px 0 8px;font-size:13px;color:#333}.howto summary{font-weight:900;color:#1b3f8f;cursor:pointer}
#result{font-weight:900;color:#1b3f8f;margin:4px 0}#result:empty{display:none}
/* v19 online status */
#ostat{display:none;text-align:center;font-size:12px;font-weight:800;color:#1b3f8f;background:#dbe9ff;padding:2px}#ostat.show{display:block}#ostat.away{background:#ffe3c2;color:#a14a00}
/* v20 anti-jump: no page scroll/bounce, fixed-size preview/status, drag surfaces never scroll */
html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:auto}
#rack,#board,#rack *,#board *{touch-action:none!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#potprev,#potprev:empty{display:block;visibility:visible;min-height:17px;line-height:17px;min-width:44px;text-align:center;white-space:nowrap}
#potprev:empty{visibility:hidden}
#ostat{min-height:16px;overflow:hidden;white-space:nowrap}
#toast{will-change:opacity;contain:layout}
#pot{min-width:118px;box-sizing:border-box}#potprev{max-width:118px;overflow:hidden;text-overflow:ellipsis}

/* v21: THIS MOVE pill (pot removed); fixed width, no jump */
#potn{font-size:10px;letter-spacing:1px;line-height:12px}
#potprev,#potprev:empty{visibility:visible!important;font-size:22px;line-height:24px;min-height:24px;background:none!important;color:#fff;animation:none}
#potprev.hot{color:#fff;text-shadow:0 0 6px #fff8}
#pot{width:128px;min-width:128px;max-width:128px}#potprev{max-width:124px}

/* v22 My online games */
#mygames{margin:6px 0 10px;text-align:left;max-height:38vh;overflow-y:auto;touch-action:pan-y!important}
.mgh{font-weight:900;color:#1b3f8f;margin:2px 0 4px}.mgn{background:#e8590c;color:#fff;border-radius:9px;padding:0 7px}
.mg{display:flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:7px 9px;margin:5px 0;border:2px solid #cdd6e0;cursor:pointer}
.mg.yt{border-color:#2f9e44;background:#ebfbee}.mg.ov{opacity:.85}.mgm{flex:1;min-width:0}.mgm small{color:#556}
.mgb{margin-left:6px;font-size:11px;font-weight:900;border-radius:8px;padding:1px 6px;background:#adb5bd;color:#fff}
.yt .mgb{background:#2f9e44}.tt .mgb{background:#1c7ed6}.wt .mgb{background:#f59f00}
.mga{border:0;border-radius:8px;background:#1c7ed6;color:#fff;font-weight:800;padding:6px 8px}.mga.x{background:#c92a2a}
#menuBtn{position:relative}#menuBtn[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;background:#e03131;color:#fff;font-size:12px;font-weight:900;border-radius:10px;padding:1px 6px}

.btn.quit{background:linear-gradient(#ff8787,#c92a2a);margin-bottom:8px}

/* v24 */
.joinrow{flex-direction:column;align-items:stretch}.joinrow input{width:100%;box-sizing:border-box;min-width:0}.joinrow .btn{width:100%;box-sizing:border-box;margin:0}
#onlerr{color:#c92a2a;font-weight:800;min-height:1em;margin:4px 0}#onlmsg{min-height:2.4em}
.card{box-sizing:border-box;max-width:calc(100vw - 16px);overflow-x:hidden}

/* v27 debug line */
.dbg{font:11px/1.3 ui-monospace,Menlo,monospace;color:#567;word-break:break-all;min-height:2.6em;cursor:pointer;text-decoration:underline dotted}
#ostat{cursor:pointer;pointer-events:auto}

/* v29 */
.replay{display:block;margin:4px auto 0;border:0;border-radius:10px;background:#1c7ed6;color:#fff;font-weight:800;font-size:13px;padding:4px 10px}
.cell.ohl{box-shadow:inset 0 0 0 3px #ffd43b,0 0 10px #ffd43b;border-radius:6px}
.cell.odrop .tile{animation:odrop .45s cubic-bezier(.2,1.4,.5,1)}
@keyframes odrop{0%{transform:translateY(-60px) scale(1.3);opacity:0}70%{opacity:1}100%{transform:none}}
.coderow{display:flex;gap:8px;justify-content:center;margin:6px 0}.coderow .btn{flex:1;font-size:15px;padding:8px 6px}

/* ================= v30 "Night Sky" theme (original look) ================= */
:root{--bg1:#0b1033;--bg2:#2a1257;--glass:rgba(255,255,255,.07);--line:rgba(140,170,255,.28);--txt:#eef2ff;--dim:#9aa6d8;--teal:#2ee6d6;--mag:#ff4fd8;--gold:#ffd54a}
html,body{background:radial-gradient(120% 80% at 50% 0%,#24206b 0%,var(--bg1) 45%,#06081c 100%) fixed;color:var(--txt)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.75;
 background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 9%,#cfe1ff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 40% 62%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 88% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 82%,#d9c8ff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 60% 90%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 5% 50%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 95% 75%,#cfe1ff 50%,transparent 51%),radial-gradient(1px 1px at 50% 30%,#fff 50%,transparent 51%);background-size:220px 220px}
#app{position:relative;z-index:1;background:transparent}
header{background:rgba(10,14,48,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#hud{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:16px;box-shadow:0 0 18px rgba(90,110,255,.25) inset}
.names span{color:var(--dim)!important;letter-spacing:.5px}.names .p0{color:#ff8fe6!important}#n1{color:#7fd3ff!important}
.scores b{color:#fff;text-shadow:0 0 10px rgba(160,180,255,.6)}
.sw{border-radius:50%!important;box-shadow:0 0 8px currentColor}.sw.pink{background:var(--mag)!important;color:var(--mag)}.sw.blue{background:#3fb6ff!important;color:#3fb6ff}
#pot{background:linear-gradient(135deg,#6a3cff,#e23cc8)!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:20px!important;box-shadow:0 0 16px rgba(226,60,200,.6),0 0 2px #fff inset!important}
#potn{color:#ffe9ff;opacity:.85}#potprev.hot{text-shadow:0 0 10px #fff,0 0 18px #ffd54a}
/* buttons: flat glass */
.btn{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;color:var(--txt)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18)!important;text-shadow:none}
.btn:active{transform:translateY(1px);background:rgba(255,255,255,.18)!important}
.btn:disabled{opacity:.38}
#play{background:linear-gradient(135deg,#19d3a2,#0b8fd6)!important;border-color:rgba(180,255,240,.5)!important;box-shadow:0 0 14px rgba(25,211,162,.45)!important}
#power{background:linear-gradient(135deg,#ffcf3f,#ff7a1a)!important;border-color:rgba(255,230,160,.6)!important;color:#2a1257!important}
#power.on{box-shadow:0 0 18px #ffcf3f!important}
.btn.big{background:linear-gradient(135deg,#5b5cff,#a43cff)!important;border-color:rgba(210,190,255,.5)!important}
.btn.resume{background:linear-gradient(135deg,#19d3a2,#0b8fd6)!important}.btn.quit{background:linear-gradient(135deg,#ff5f6d,#c2185b)!important}
.btn.cancel,.btn.mute{background:rgba(255,255,255,.08)!important}
#badge{background:var(--mag)!important;color:#fff!important;border:0!important;box-shadow:0 0 8px var(--mag)}
footer{background:rgba(8,10,36,.75)!important;border-top:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#coins{background:rgba(255,255,255,.06)!important;border:1px solid var(--line);border-radius:14px;color:var(--txt)}
#banner{background:rgba(255,255,255,.08)!important;color:#cfd8ff!important;border:1px solid var(--line);border-top:0}
#banner.final{background:linear-gradient(135deg,#ff4fd8,#ff7a1a)!important;color:#fff!important}
#rack{background:rgba(255,255,255,.04)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rt{background:rgba(255,255,255,.06)!important}
.set.sel{outline:2px solid var(--teal)!important;box-shadow:0 0 14px rgba(46,230,214,.6);border-radius:8px}
.rot{background:#2a1257!important;border:1px solid var(--teal)!important;color:var(--teal)!important}
/* board: dark glass */
#board{background:rgba(255,255,255,.035)!important;border:1px solid var(--line);border-radius:12px;box-shadow:0 0 30px rgba(80,90,255,.18)}
.cell{background:rgba(20,26,70,.55)!important;border:1px solid rgba(140,170,255,.16);border-radius:7px!important;color:transparent}
.cell.m2::after,.cell.m3::after{position:absolute;inset:16%;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900;font-size:clamp(9px,3.2vmin,15px)!important;color:#061023}
.cell.m2::after{background:radial-gradient(circle,#7ffff3,var(--teal));box-shadow:0 0 10px var(--teal)}
.cell.m3::after{background:radial-gradient(circle,#ffb3f1,var(--mag));box-shadow:0 0 12px var(--mag);color:#fff}
.cell.m2,.cell.m3{border-color:rgba(255,255,255,.22)}
/* tiles: gems with a distinct shape per color (colour-blind friendly) */
.tile{border-radius:28%!important;border:1.5px solid rgba(255,255,255,.55);box-shadow:0 0 10px var(--gc,#fff8),inset 0 0 10px rgba(255,255,255,.35)!important;text-shadow:none}
.tile::before{content:var(--sh,"")!important;position:absolute;inset:0!important;left:0!important;right:0!important;top:0!important;height:auto!important;background:none!important;border-radius:0!important;
 display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92);font-size:clamp(9px,4.4vmin,22px);font-weight:900;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.tile.red,.rt.red,.red{background:radial-gradient(circle at 35% 30%,#ff9a9a,#e8243f 60%,#8c0f2a)!important;--gc:#ff3b5c;--sh:"♥"}
.tile.blue,.blue{background:radial-gradient(circle at 35% 30%,#a8e6ff,#1f8bff 60%,#0b3a99)!important;--gc:#3fb6ff;--sh:"◆"}
.tile.green,.green{background:radial-gradient(circle at 35% 30%,#b6ffc0,#18c45a 60%,#0a6a31)!important;--gc:#2bff8a;--sh:"▲"}
.tile.yellow,.yellow{background:radial-gradient(circle at 35% 30%,#fff6b0,#ffc61a 60%,#a86a00)!important;--gc:#ffd54a;--sh:"●"}
.tile.pink,.pink{background:radial-gradient(circle at 35% 30%,#ffc6f4,#e43cc8 60%,#7d1170)!important;--gc:#ff4fd8;--sh:"⬢"}
.tile.orange,.orange{background:radial-gradient(circle at 35% 30%,#ffd1a0,#ff7a1a 60%,#9a3a00)!important;--gc:#ff8a3c;--sh:"■"}
.sw.pink::before,.sw.blue::before{content:none}
/* stars: glowing gold on deep indigo */
.tile.star,.star{background:radial-gradient(circle at 50% 45%,#3b2a8a,#140d3d 75%)!important;border:1.5px solid rgba(255,213,74,.75)!important;box-shadow:0 0 12px rgba(255,213,74,.55),inset 0 0 8px rgba(255,213,74,.25)!important}
.tile.star::before{content:""!important}
.star span{filter:drop-shadow(0 0 6px #ffd54a) drop-shadow(0 0 2px #fff);text-shadow:none!important}
.star em{color:#061023!important;background:var(--teal);border-radius:6px;padding:0 3px;font-style:normal;font-size:10px;box-shadow:0 0 6px var(--teal)}
.tile.star.mine{border-color:var(--mag)!important}.tile.star.theirs{border-color:#3fb6ff!important}
.tile.fresh{outline:2px solid #fff!important;outline-offset:-1px}
/* highlights must pop on dark */
.cell.will .tile{outline:4px solid #39ffec!important;outline-offset:1px;box-shadow:0 0 18px 6px #39ffec,0 0 4px #fff inset!important}
.cell.gok{background:rgba(46,230,214,.35)!important;box-shadow:inset 0 0 0 2px var(--teal)}
.cell.gbad{background:rgba(255,60,100,.35)!important;box-shadow:inset 0 0 0 2px #ff3b5c}
.cell.ohl{box-shadow:inset 0 0 0 3px var(--gold),0 0 12px var(--gold)!important}
.cell.aimp{background:rgba(255,120,40,.45)!important;box-shadow:inset 0 0 0 2px #ff8a3c}
/* overlays and cards: glass */
#overlay,#onl,#pmenu{background:rgba(3,5,20,.72)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card,.pcard{background:linear-gradient(180deg,rgba(40,36,110,.92),rgba(16,14,52,.95))!important;color:var(--txt)!important;border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 30px rgba(120,90,255,.25)}
.card h1{font-size:34px;letter-spacing:1px;margin:2px 0 10px!important;background:linear-gradient(90deg,#ffd54a,#ff7ae0 50%,#7fd3ff);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 0 10px rgba(255,120,220,.35))}
.card h1 .lg{-webkit-text-fill-color:#ffd54a;color:#ffd54a;filter:drop-shadow(0 0 8px #ffd54a)}
.card h2,.mgh,.pname,.howto summary,.card label{color:#cfd8ff!important}
.card p,.card small,.pstat,.howto{color:#b9c3ee!important}
.card input,.joinrow input{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:12px!important}
.diff button{background:rgba(255,255,255,.06)!important;color:#cfd8ff!important;border:1px solid var(--line)!important}
.diff button.on,.diff button.sel,.diff button[aria-pressed=true]{background:linear-gradient(135deg,#5b5cff,#a43cff)!important;color:#fff!important}
.code{color:var(--gold)!important;text-shadow:0 0 14px rgba(255,213,74,.6)}
.mg{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;color:var(--txt)}.mg small{color:var(--dim)!important}
.mg.yt{border-color:var(--teal)!important;box-shadow:0 0 12px rgba(46,230,214,.35);background:rgba(46,230,214,.08)!important}
#toast{background:linear-gradient(135deg,rgba(91,92,255,.95),rgba(164,60,255,.95))!important;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 20px rgba(164,60,255,.6)}
#ostat{background:rgba(46,230,214,.12)!important;color:#bff!important}#ostat.away{background:rgba(255,138,60,.18)!important;color:#ffd0a8!important}
.replay{background:rgba(255,255,255,.1)!important;border:1px solid var(--line)!important;color:#cfd8ff!important}
#ver{color:var(--dim)}
.set{background:rgba(255,255,255,.07)!important;border:1px solid var(--line);border-radius:10px}
/* v31: no shape symbols; plain solid gems with a subtle gloss, 6 clearly distinct hues */
.tile::before{content:""!important;inset:auto!important;left:14%!important;right:14%!important;top:8%!important;height:34%!important;border-radius:40% 40% 50% 50%/60% 60% 40% 40%!important;
 background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))!important;filter:none!important}
.tile.star::before{content:none!important}
.tile.red,.red{background:radial-gradient(circle at 50% 35%,#ff6b6b,#e01b2f 70%,#9a0c1e)!important;--gc:#ff3045}
.tile.orange,.orange{background:radial-gradient(circle at 50% 35%,#ffb15c,#ff7a00 70%,#b04a00)!important;--gc:#ff8a1a}
.tile.yellow,.yellow{background:radial-gradient(circle at 50% 35%,#fff07a,#ffd400 70%,#b99300)!important;--gc:#ffe14a}
.tile.green,.green{background:radial-gradient(circle at 50% 35%,#7dffa0,#11d15b 70%,#067a33)!important;--gc:#2bff7a}
.tile.blue,.blue{background:radial-gradient(circle at 50% 35%,#7cc4ff,#1e6bff 70%,#0b35a8)!important;--gc:#3d8bff}
.tile.pink,.pink{background:radial-gradient(circle at 50% 35%,#ff9cf0,#d63cff 70%,#7a1499)!important;--gc:#e650ff}

/* v32 chat */
#infoBtn{position:relative}#infoBtn[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;background:#ff3b5c;color:#fff;font-size:12px;font-weight:900;border-radius:10px;padding:1px 6px;box-shadow:0 0 8px #ff3b5c}
#chat{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:60;background:rgba(3,5,20,.55)}#chat.show{display:flex}
.chcard{width:100%;max-width:480px;height:min(70vh,520px);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(40,36,110,.97),rgba(16,14,52,.98));border:1px solid var(--line);border-radius:18px 18px 0 0;padding:10px;box-sizing:border-box;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.chhead{display:flex;align-items:center;gap:6px;color:#fff;margin-bottom:6px}.chhead span{flex:1;color:var(--dim);font-size:13px}.chhead .btn{width:38px;height:34px;padding:0}
#chlist{flex:1;overflow-y:auto;touch-action:pan-y!important;display:flex;flex-direction:column;gap:6px;padding:4px}
.cm{max-width:78%;padding:7px 10px;border-radius:14px;font-size:15px;line-height:1.3;word-wrap:break-word;display:flex;flex-direction:column}
.cm small{font-size:10px;opacity:.65;margin-top:2px}.cm.me{align-self:flex-end;background:linear-gradient(135deg,#5b5cff,#a43cff);color:#fff;border-bottom-right-radius:4px}
.cm.them{align-self:flex-start;background:rgba(255,255,255,.1);color:#eef2ff;border:1px solid var(--line);border-bottom-left-radius:4px}.chempty{color:var(--dim);text-align:center;margin:auto}
.chemo{display:flex;justify-content:space-between;padding:6px 0}.chemo button{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:10px;font-size:22px;padding:3px 6px}
.chrow{display:flex;gap:6px}.chrow input{flex:1;min-width:0;font-size:16px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff}
.chrow .btn{padding:0 14px}#chat input,#chat *{touch-action:manipulation!important;-webkit-user-select:text;user-select:text}

/* v33: pop-up text always above board, tray and dragged piece */
#board,#rack,#tray,.board,.rack{isolation:isolate}
#toast{z-index:1000!important;position:fixed;background:linear-gradient(135deg,#4a4be0,#8a2fe0)!important;opacity:0;text-shadow:0 1px 2px #0008;box-shadow:0 6px 24px #000a,0 0 18px rgba(164,60,255,.6)!important;pointer-events:none;max-width:86vw;text-align:center}
#banner{position:relative;z-index:900;background:#1e1b5c!important}
#tbar{z-index:950!important;background:#1e1b5c!important}
#prev{z-index:900}
#chat{z-index:1100}#overlay{z-index:1200}#pmenu{z-index:1150}#onl{z-index:1250}
.drag,.drag.set{z-index:800!important}

#pmenu .armed{outline:3px solid #ffd84a;box-shadow:0 0 16px #ffd84a}

/* v37 missions */
.mis-open{position:relative}#misBtn[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;background:#ff3b5c;color:#fff;font-size:12px;font-weight:900;border-radius:10px;padding:1px 7px;box-shadow:0 0 8px #ff3b5c}
#missions{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:1300;background:rgba(3,5,20,.6)}#missions.show{display:flex}
.miscard{height:auto;max-height:82vh}#mislist{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px}
.mis{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:9px 11px;color:#eef2ff}.mis.got{opacity:.6}
.mis .mt{display:flex;justify-content:space-between;gap:8px;font-size:14px}.mis .mt span{color:#ffd84a;font-weight:900;white-space:nowrap}
.mbar{height:8px;border-radius:5px;background:rgba(255,255,255,.1);margin:7px 0 5px;overflow:hidden}.mbar i{display:block;height:100%;background:linear-gradient(90deg,#5b5cff,#ff4fd8);border-radius:5px;box-shadow:0 0 8px #a43cff}
.mis .mf{display:flex;justify-content:space-between;align-items:center;min-height:30px}.mis .mf small{color:var(--dim)}.mis .ok{color:#7dffb0!important;font-weight:800}
.mclaim{padding:5px 16px!important;font-size:14px!important;background:linear-gradient(135deg,#ffb020,#ff7a1a)!important;color:#1a0f00!important}
.miscard{background:#1a1850!important;opacity:1!important;backdrop-filter:none!important}#missions{isolation:isolate}

/* v38 star glow in set colors */
.tile.star.sglow{box-shadow:var(--gsh),inset 0 0 10px var(--g1)!important;border-color:var(--g1)!important;animation:sgp .7s ease-in-out infinite alternate}
.tile.star.sglow span{filter:drop-shadow(0 0 6px var(--g1)) drop-shadow(0 0 2px #fff)}
.tile.star.sglow.multi{border-color:transparent!important}
.tile.star.sglow.multi::after{content:"";position:absolute;inset:-6px;border-radius:inherit;padding:5px;background:var(--ring);filter:drop-shadow(0 0 6px rgba(255,255,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sgr 1.6s linear infinite;pointer-events:none}
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}@keyframes sgr{to{--sa:360deg}}@keyframes sgp{from{filter:brightness(1)}to{filter:brightness(1.35)}}
/* v38 score show + celebrations */
.fxh{position:fixed;width:0;height:0;z-index:850;pointer-events:none}.fxh .prt{animation:prt .75s ease-out forwards}
#potprev.tally{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:clamp(13px,4.6vw,22px)!important;letter-spacing:-.3px;max-width:62vw;overflow:hidden;text-overflow:clip}
#board.shk{animation:shk .28s ease-out}@keyframes shk{20%{transform:translate(var(--sh),calc(var(--sh)*-.5))}40%{transform:translate(calc(var(--sh)*-1),calc(var(--sh)*.4))}60%{transform:translate(calc(var(--sh)*.6),0)}80%{transform:translate(calc(var(--sh)*-.3),0)}}
#celeb{position:fixed;inset:0;z-index:1150;pointer-events:none;display:none}#celeb.show{display:block}
#celeb canvas{position:absolute;inset:0;width:100%;height:100%}
#celeb .cw{position:absolute;left:0;right:0;top:34%;text-align:center;font-weight:900;color:#fff;font-size:clamp(34px,11vw,56px);letter-spacing:1px;
 text-shadow:0 0 10px var(--c1),0 0 26px var(--c1),0 0 46px var(--c2),0 3px 0 #0008;animation:cwin .5s cubic-bezier(.2,1.7,.4,1) both;-webkit-text-stroke:1px rgba(255,255,255,.5)}
#celeb.t1 .cw{font-size:clamp(28px,9vw,44px)}#celeb.t3 .cw{font-size:clamp(40px,13vw,66px)}
#celeb.full{background:radial-gradient(circle at 50% 42%,rgba(40,20,110,.75),rgba(3,4,20,.92) 70%)}#celeb.full .cw{top:38%;font-size:clamp(42px,14vw,74px)}
#celeb.gold .cw{background:linear-gradient(180deg,#fff7c2,#ffd700 45%,#b8860b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px #ffd700) drop-shadow(0 0 40px #ff9d00);animation:cwin 1.4s cubic-bezier(.2,1.4,.4,1) both}
#celeb.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:cfl .35s ease-out forwards}
#celeb.out{opacity:0;transition:opacity .45s}
@keyframes cwin{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}100%{transform:scale(1)}}@keyframes cfl{from{opacity:.85}to{opacity:0}}
@media (prefers-reduced-motion:reduce){#board.shk{animation:none}}

/* v39 tally under Replay */
#tally{height:30px;line-height:30px;text-align:center;font-weight:900;font-size:clamp(16px,5vw,22px);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;color:var(--tc,#fff);
 text-shadow:0 0 8px var(--tc,#fff),0 0 18px var(--tc,#fff),0 1px 0 #000;letter-spacing:.3px;pointer-events:none;flex:none}
#tally.on{animation:tbump .18s ease-out}#tally[data-c=yellow]{color:#ffe36a}#tally[data-c=blue]{color:#7cc4ff}#tally[data-c=green]{color:#6ff0a4}#tally[data-c=red]{color:#ff6b84}#tally[data-c=pink]{color:#ff8ae0}#tally[data-c=orange]{color:#ffab5e}
#tally[data-c=mix]{background:linear-gradient(90deg,#ff5fd2,#ffd23a,#3ddc84,#3fa6ff,#b45cff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
#tally[data-c=gold]{color:#ffd84a;--tc:#ffb020}
@keyframes tbump{from{transform:scale(1.12)}to{transform:scale(1)}}

/* v41 end panel */
#endp{position:fixed;left:0;right:0;bottom:0;z-index:1120;display:none;justify-content:center;padding:0 10px max(12px,env(safe-area-inset-bottom));pointer-events:none}#endp.show{display:flex}
.endc{pointer-events:auto;width:100%;max-width:460px;background:#1a1850;border:1px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:0 -6px 30px #000a,0 0 24px rgba(164,60,255,.35);text-align:center;color:#eef2ff}
#endres{font-weight:800;font-size:16px;line-height:1.35}#endst{min-height:18px;color:#ffd84a;font-size:13px;margin:4px 0}
.endb{display:flex;gap:8px;margin-top:6px}.endb #endRe{flex:1;background:linear-gradient(135deg,#ff4fd8,#a43cff)!important;color:#fff!important}.endb #endHome{flex:none;padding:0 16px}

/* v41 floating board scores */
.flt{position:fixed;z-index:1000;transform:translate(-50%,-50%);pointer-events:none;font-weight:900;white-space:nowrap;color:var(--tc);font-variant-numeric:tabular-nums;
 text-shadow:0 0 6px var(--tc),0 0 14px var(--tc),0 2px 0 #000,0 0 2px #000;-webkit-text-stroke:.6px rgba(0,0,0,.55)}
.flt.f20{font-size:clamp(13px,4vw,18px);animation:f20 .85s ease-out forwards}
.flt.fgrp{font-size:clamp(18px,6vw,28px);padding:2px 10px;border-radius:12px;background:rgba(10,8,40,.78);border:1.5px solid var(--tc);box-shadow:0 0 16px var(--tc);animation:fin .25s cubic-bezier(.2,1.6,.4,1) both}
.flt.fgrp.bump{animation:fbump .22s ease-out}.flt.fgrp.done{animation:fout .8s ease-in forwards}
.flt[data-c=mix]{--tc:#ffd84a}
@keyframes f20{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}20%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}
@keyframes fin{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fbump{from{transform:translate(-50%,-50%) scale(1.25)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes fout{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-160%) scale(.8)}}

/* v42: total lives in the callout; under-Replay slot removed */
#tally{display:none!important}
#celeb .cw span{display:block}#celeb .cwt{font-size:.62em;margin-top:.12em;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:#fff}
#celeb.gold .cwt{color:transparent}
#celeb.plain .cw{font-size:clamp(30px,10vw,46px);--c1:#ffd84a;--c2:#ff9d00}#celeb.plain .cwt{font-size:1em;margin:0}
/* v42 multiplier badge on covered squares */
.mbadge{position:absolute;right:-3px;top:-4px;z-index:6;pointer-events:none;font-style:normal;font-weight:900;font-size:clamp(9px,2.8vmin,12px);line-height:1;padding:2px 4px;border-radius:7px;color:#061023;border:1.5px solid #061023;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 8px var(--mbc)}
.mbadge.m2{background:#7ffff3;--mbc:var(--teal,#39ffec)}.mbadge.m3{background:#ff9ae8;--mbc:#ff4fd8}
.cell:has(.mbadge) .tile{box-shadow:0 0 0 2px var(--mbc2,transparent)}

/* v43 header: reserved grid, narrow pill, auto-shrinking scores */
.scores{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;column-gap:5px}
.scores #s0{text-align:left}.scores #s1{text-align:right}
.scores b{min-width:0;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.5px;font-size:clamp(17px,6vw,26px)}
.scores b[data-len=m]{font-size:clamp(15px,5vw,22px)}.scores b[data-len=l]{font-size:clamp(13px,4.2vw,19px)}.scores b[data-len=xl]{font-size:clamp(11px,3.4vw,16px)}
#pot{width:auto!important;min-width:0!important;max-width:none!important;padding:1px 8px!important;width:clamp(78px,24vw,104px)!important}
#potprev{max-width:100%!important;font-size:clamp(13px,4.4vw,20px)!important;white-space:nowrap;overflow:hidden}#potn{font-size:clamp(8px,2.4vw,11px)!important;white-space:nowrap}
/* v43 bonus-square mark on tiles */
.mbadge{display:none!important}.tile.star em{display:none!important}
.tile .mmark{position:absolute;right:7%;bottom:5%;font-style:normal;font-weight:900;font-size:clamp(8px,2.5vmin,12px);line-height:1;color:rgba(255,255,255,.78);letter-spacing:.3px;pointer-events:none;
 text-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.35),0 0 6px var(--mk);z-index:2}
.tile.onm2{--mk:#39ffec}.tile.onm3{--mk:#ff6ee0}
.tile.onm2,.tile.onm3{box-shadow:inset 0 0 0 2px var(--mk),inset 0 0 10px color-mix(in srgb,var(--mk) 35%,transparent),0 0 8px color-mix(in srgb,var(--mk) 45%,transparent)!important}
.tile.star.onm2 .mmark,.tile.star.onm3 .mmark{bottom:4%;right:6%}

/* v44 account */
.acct{width:100%;margin:6px 0 0;font-size:15px}
#account{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:1300;background:rgba(3,5,20,.6)}#account.show{display:flex}
.acard{gap:8px;display:flex;flex-direction:column}.acard p{color:#eef2ff;margin:4px 2px;line-height:1.4}.acard small{color:var(--dim);text-align:center}
.apple{display:flex;align-items:center;justify-content:center;gap:8px;background:#000;color:#fff;border:1px solid #fff4;border-radius:12px;font:600 17px -apple-system,system-ui,sans-serif;height:48px}
.apple:disabled{opacity:.5}.acard .danger{background:rgba(255,59,92,.15)!important;color:#ff8da1!important;border:1px solid rgba(255,59,92,.5)!important}
.acpriv a{color:#9fb0ff}

/* v45 */
#potprev{display:block!important;width:100%;box-sizing:border-box;text-align:center;text-overflow:clip!important;padding:0 2px!important}

/* v45 shop / safety */
#shop{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:1300;background:rgba(3,5,20,.6)}#shop.show{display:flex}
#shopList{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto}
.shopi{position:relative;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#eef2ff;text-align:center}
.shopi.best{border-color:#ffd84a;box-shadow:0 0 14px rgba(255,216,74,.4)}.shopi em{position:absolute;top:-8px;font-style:normal;font-size:10px;font-weight:900;background:#ffd84a;color:#1a0f00;border-radius:8px;padding:1px 6px}
.shopi small{color:var(--dim);min-height:14px}.sbuy{width:100%;background:linear-gradient(135deg,#ffb020,#ff7a1a)!important;color:#1a0f00!important;font-weight:900}
#shopMsg{color:#ffd84a;text-align:center;min-height:16px}#shopCoins{color:#ffd84a;font-weight:900;text-align:center;flex:1}
.getapp{grid-column:1/-1;color:#eef2ff;text-align:center;line-height:1.5}.chtool{width:34px;height:34px;padding:0;margin-right:4px}
.supp{display:block;text-align:center;text-decoration:none}
html.native .installHint,html.native .a2hs{display:none!important}
/* v46 Master difficulty */
.diff button{font-size:clamp(9px,2.7vw,12px)!important;letter-spacing:-.3px;min-width:0;white-space:nowrap;padding-left:1px!important;padding-right:1px!important}
.diff button.master{flex:1.3;color:#ffd84a!important;border-color:rgba(255,216,74,.55)!important;background:linear-gradient(135deg,rgba(255,176,32,.14),rgba(164,60,255,.18))!important;text-shadow:0 0 8px rgba(255,216,74,.5)}
.diff button.master.on{background:linear-gradient(135deg,#ffb020,#ff5a1a 55%,#a43cff)!important;color:#1a0f00!important;text-shadow:none;box-shadow:0 0 14px rgba(255,150,40,.6)}

/* v47 daily */
.daily-open{background:linear-gradient(135deg,#1fb8a8,#3a7bff)!important}.daily-open small{display:block;font-size:11px;opacity:.85;font-weight:600}.dscore{font-size:30px;color:#ffd84a}.dgrid{font-size:20px;letter-spacing:2px;line-height:1.25}

/* v48 leaderboard */
.lb-open{background:linear-gradient(135deg,#ffb020,#ff6a3a)!important}.lb-open small{display:block;font-size:11px;opacity:.85;font-weight:600}
#lb{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:1300;background:rgba(3,5,20,.6)}#lb.show{display:flex}
.lbtabs{display:flex;gap:4px;margin:6px 0}.lbtabs button{flex:1;padding:8px 0;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#cfd8ff;font-weight:800;font-size:12px}.lbtabs button.on{background:linear-gradient(135deg,#5b5cff,#a43cff);color:#fff}
#lbList{overflow-y:auto;max-height:58vh}.lbo{margin:0;padding:0 0 0 28px;color:#eef2ff}.lbo li{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.07)}.lbo li span{display:inline-block;width:62%}.lbo li b{float:right;color:#ffd84a}.lbo li.me{background:rgba(91,92,255,.25);border-radius:8px}.lbo em{font-size:10px;color:var(--dim);font-style:normal}
.lbm{color:#cfd8ff;text-align:center}.achg{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ach{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center;opacity:.45;color:#eef2ff;filter:grayscale(1)}.ach.on{opacity:1;filter:none;border-color:#ffd84a}.ach i{font-style:normal;font-size:22px;display:block}.ach b{display:block;font-size:13px}.ach small{color:var(--dim);font-size:11px}

/* v49 ranked */
.rk{color:#ffd84a!important}.rk small{opacity:.7;font-weight:600}.rkline{color:#ffd84a;font-weight:900}

/* v50 streaks */
#loginb{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1400;background:rgba(3,5,20,.7)}.lgc{text-align:center;color:#eef2ff;max-width:360px;border-radius:20px!important}
.lgstrip{display:flex;gap:4px;justify-content:center;margin:8px 0}.lgd{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:5px 0;font-size:10px;color:var(--dim)}.lgd b{display:block;color:#ffd84a;font-size:13px}.lgd.done{opacity:.5}.lgd.now{border-color:#ffd84a;box-shadow:0 0 12px rgba(255,216,74,.5);color:#fff}
.lgamt{font-size:34px;font-weight:900;color:#ffd84a;margin:6px 0}.wsline{color:#ff9a3a;font-weight:900}.wsb{text-align:center;color:#ff9a3a;font-size:13px;margin:4px 0;font-weight:700}

/* v51 cosmetics */
.cos-open{background:linear-gradient(135deg,#ff4fa3,#8a3cff)!important}.cos-open small{display:block;font-size:11px;opacity:.85;font-weight:600}
#cos{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:1300;background:rgba(3,5,20,.6)}#cos.show{display:flex}
#cosList{overflow-y:auto;max-height:64vh}#cosList h3{color:#cfd8ff;font-size:13px;margin:10px 0 6px}#cosCoins{color:#ffd84a;font-weight:900;flex:1;text-align:center}
.cosg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cosi{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:8px 4px;color:#eef2ff;display:flex;flex-direction:column;align-items:center;gap:3px}
.cosi.on{border-color:#ffd84a;box-shadow:0 0 12px rgba(255,216,74,.4)}.cosi b{font-size:12px}.cosi small{font-size:10px;color:var(--dim)}
.cprev{display:flex;gap:3px;height:22px;align-items:center;padding:3px 5px;border-radius:7px;background:rgba(255,255,255,.06)}.cprev i{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,#ff6b8a,#e0325a)}.cprev i:nth-child(2){background:linear-gradient(135deg,#ffe066,#f2b705)}.cprev i:nth-child(3){background:linear-gradient(135deg,#5ad1ff,#2a7bf5)}
.tile-neon i{box-shadow:0 0 8px currentColor,0 0 0 2px #fff8;color:#f0f}.tile-pastel i{filter:saturate(.5) brightness(1.2)}.tile-glass i{opacity:.65;box-shadow:inset 0 0 0 2px #fff9}.tile-retro i{border-radius:0;filter:contrast(1.3)}
.board-aurora{background:linear-gradient(135deg,#0d3b3a,#1b6b4f)}.board-nebula{background:linear-gradient(135deg,#3a1050,#7a1f6b)}.board-ocean{background:linear-gradient(135deg,#031a3d,#0a4d7a)}.board-sunset{background:linear-gradient(135deg,#5a1f2e,#c4572a)}
.star-pulse i,.star-rainbow i,.star-comet i{background:radial-gradient(circle,#fff6b0,#ffc400)!important}.star-rainbow i{animation:sfrb 2s linear infinite}.star-pulse i{animation:sfpu 1s ease-in-out infinite}.star-comet i{box-shadow:-6px 0 8px #ffd84a99}
/* skins applied to real tiles (stars keep their own look) */
body.sk-neon .tile:not(.star){box-shadow:0 0 9px currentColor,inset 0 0 0 2px rgba(255,255,255,.55)!important;filter:saturate(1.5) brightness(1.1)}
body.sk-pastel .tile:not(.star){filter:saturate(.5) brightness(1.18)}
body.sk-glass .tile:not(.star){opacity:.78;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 6px 10px rgba(255,255,255,.35)!important}
body.sk-retro .tile:not(.star){border-radius:2px!important;filter:contrast(1.35) saturate(1.2);image-rendering:pixelated}
body.th-aurora #board{background:linear-gradient(135deg,rgba(13,90,80,.55),rgba(40,140,90,.35))!important;box-shadow:0 0 30px rgba(60,255,180,.25)!important}
body.th-nebula #board{background:linear-gradient(135deg,rgba(110,20,140,.5),rgba(200,40,150,.3))!important;box-shadow:0 0 30px rgba(255,80,200,.25)!important}
body.th-ocean #board{background:linear-gradient(180deg,rgba(5,40,100,.6),rgba(10,90,140,.4))!important;box-shadow:0 0 30px rgba(40,160,255,.3)!important}
body.th-sunset #board{background:linear-gradient(180deg,rgba(150,40,70,.5),rgba(230,110,40,.35))!important;box-shadow:0 0 30px rgba(255,140,60,.3)!important}
body.sf-pulse .tile.star{animation:sfpu 1.2s ease-in-out infinite}
body.sf-rainbow .tile.star{animation:sfrb 2.4s linear infinite}
body.sf-comet .tile.star{filter:drop-shadow(-5px 2px 5px rgba(255,216,74,.85)) drop-shadow(-9px 4px 6px rgba(255,140,40,.45))}
@keyframes sfpu{50%{transform:scale(1.1);filter:brightness(1.3)}}@keyframes sfrb{to{filter:hue-rotate(360deg) saturate(1.6)}}

/* v52 tutorial */
#tut{position:fixed;inset:0;z-index:1450;background:rgba(3,5,20,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.tutc{background:linear-gradient(160deg,#1c1f5a,#2a1450);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:18px;max-width:380px;width:100%;color:#eef2ff;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.tutc h2{margin:6px 0 10px;font-size:21px}.tutc p{line-height:1.45;color:#d7ddff;font-size:15px}#tutSt{display:flex;gap:5px;justify-content:center}#tutSt i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}#tutSt i.on{background:#ffd84a;width:18px;border-radius:4px}
.tutv{min-height:54px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;font-size:16px;color:#ffd84a;line-height:2.2}
.tt{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;font-size:11px;font-weight:900;color:#fff;vertical-align:middle;box-shadow:inset 0 -3px 5px rgba(0,0,0,.25)}
.tt.red{background:linear-gradient(135deg,#ff6b8a,#e0325a)}.tt.blue{background:linear-gradient(135deg,#5ad1ff,#2a7bf5)}.tt.ylw{background:linear-gradient(135deg,#ffe066,#f2b705)}.tt.star{background:radial-gradient(circle,#fff6b0,#ffb300);color:#7a4a00;font-size:18px}
.tutb{display:flex;gap:8px;margin-top:8px}.tutb .big{flex:1}#tutBtn{margin-top:6px;width:100%}

/* v53 invites */
.inv-open{background:linear-gradient(135deg,#20c070,#13a0a0)!important}.inv-open small{display:block;font-size:11px;opacity:.85;font-weight:600}

/* v55 */
#pname.needname{box-shadow:0 0 0 2px #ffd84a,0 0 14px rgba(255,216,74,.5)!important}

/* v55 compact home */
#overlay .card.compact{padding:12px 14px!important;gap:0}
.card.compact h1{font-size:30px!important;margin:2px 0 6px!important}
.card.compact .btn.big{padding:10px 12px!important;font-size:16px!important;margin:5px 0!important;min-height:0}
.card.compact .btn.big small{display:inline;font-size:11px;margin-left:6px}
.card.compact label.pname{margin:4px 0 2px!important;font-size:12px}.card.compact #pname{padding:8px 12px!important;font-size:16px!important}
.card.compact .hstat{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:12px;margin:3px 0}.card.compact .hstat>*{margin:0!important;font-size:12px!important}
.card.compact .diff{margin:4px 0!important}.card.compact .diff button{padding:7px 0!important}
.card.compact .online{display:flex;gap:6px;align-items:stretch;margin:5px 0;padding:0!important;border:0!important;background:none!important}
.card.compact .online #hostBtn{flex:1;margin:0!important;font-size:14px!important}.card.compact .online .joinrow{flex:1;display:flex;gap:4px;margin:0!important}
.card.compact .online .joinrow input{min-width:0;flex:1;font-size:14px!important;padding:6px 8px!important}.card.compact .online .joinrow .btn{padding:6px 10px!important}
.card.compact #vsP{background:rgba(255,255,255,.07)!important;font-size:14px!important;padding:8px!important}
.hproxy{display:none!important}
.htiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0}
.htile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#e6eaff;font-weight:800;font-size:11px}
.htile i{font-style:normal;font-size:20px;line-height:1}.htile[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-5px;right:-3px;background:#ff3b5c;color:#fff;font-size:11px;border-radius:9px;padding:0 6px}
.hmore{display:none;flex-direction:column;gap:5px;margin:4px 0}.hmore.open{display:flex}.hmore .btn{margin:0!important}
.card.compact #ver{margin-top:4px}
/* v55 every panel scrolls inside itself */
.chcard,.miscard,.acard,.tutc,.lgc,.endc,#overlay .card,#onl .card{max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
#shopList,#cosList,#lbList,#mislist,#chlist{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
/* v55 first mover is always the LEFT player */
#hud.flip .names{flex-direction:row-reverse}
#hud.flip .scores>.sw.blue{order:1}#hud.flip #s1{order:2;text-align:left}#hud.flip #pot{order:3}#hud.flip #s0{order:4;text-align:right}#hud.flip .scores>.sw.pink{order:5}
.card.compact #dailyBtn small{display:none}
/* v56: home overlay fully opaque; compact layout never squeezes sections */
#overlay{background:radial-gradient(ellipse at 50% 0%,#1b1f5e 0%,#0b1033 55%,#060920 100%)!important}
#overlay.show~*,body.homeopen #board,body.homeopen #rack,body.homeopen header{visibility:hidden}
#overlay .card.compact>*{flex-shrink:0}
#mygames{max-height:216px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;margin:6px 0!important;flex-shrink:0;display:block}
#mygames .mg{min-height:54px;padding:8px 10px!important;margin:5px 0!important;gap:8px}
#mygames .mgm{line-height:1.3}#mygames .mgm b{font-size:14px}#mygames .mgm small{font-size:11.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mygames .mgb{display:inline-block;margin-left:6px;vertical-align:1px}
#mygames .mga{flex:none;min-width:48px;padding:8px 10px!important;font-size:13px!important;margin:0!important}
#mygames .mga.x{min-width:34px}
#mygames .mgh{margin:2px 0!important;font-size:14px}
#mygames{overflow-x:hidden!important}#mygames .mg{width:100%;box-sizing:border-box;min-width:0}#mygames .mgm{flex:1 1 0!important;min-width:0!important;overflow:hidden}
#mygames .mgm b{display:inline-block;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
body.homeopen #celeb,body.homeopen .flt,body.homeopen .fxh,body.homeopen #banner,body.homeopen #tbar{visibility:hidden!important}
/* v57: frozen while an ad is on screen */
body.adpause *,body.adpause *::before,body.adpause *::after{animation-play-state:paused!important;transition:none!important}
/* v58 share sheet */
#shareP{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:9000}
#shareP.show{display:flex}
#shareP .shc{background:#151a33;color:#fff;border-radius:18px 18px 0 0;padding:16px;width:100%;max-width:480px;max-height:85vh;overflow:auto}
#shareP h3{margin:0 0 8px}#shareP .shtxt{white-space:pre-wrap;word-break:break-all;background:#0b0f22;padding:10px;border-radius:10px;font-size:13px}
#shareP .shrow{display:flex;flex-direction:column;gap:8px}#shareP .shrow .btn{text-align:center;text-decoration:none;display:block}
.shnote{display:block;opacity:.8;font-size:12px;margin:6px 0;text-align:center}
.shx{background:#000!important;color:#fff!important}.shfb{background:#1877f2!important;color:#fff!important}.shwa{background:#25d366!important;color:#04220f!important}
/* v59 team 2v2 */
.htiles{grid-template-columns:repeat(5,1fr)}
#board.b10{gap:2px;padding:3px}#board.b10 .cell{font-size:.8em}
#tchips{display:flex;width:100%;box-sizing:border-box;align-self:stretch;justify-content:space-between;gap:6px;padding:2px 8px 4px;font-size:11px}
#tchips .tcs{display:flex;gap:4px;flex-wrap:wrap}#tchips .tcs.tB{justify-content:flex-end}
.tchip{padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);white-space:nowrap;opacity:.75;max-width:44vw;overflow:hidden;text-overflow:ellipsis}
.tchip b{font-weight:600;opacity:.8}.tchip.act{opacity:1;border-color:#ffd54a;box-shadow:0 0 8px rgba(255,213,74,.5)}.tchip.me{text-decoration:underline}
.tA .tchip{color:#ff9bd6}.tB .tchip{color:#8fd8ff}
#teamP{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:8000;padding:12px}
#teamP.show{display:flex}#teamP .tcard{max-height:90vh;overflow:auto;width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px}
#teamP .tsub{font-size:12px;opacity:.75;margin:2px 0}#teamP details summary{list-style:none;text-align:center}#teamP details summary::-webkit-details-marker{display:none}
#teamP .tnames{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}#teamP .tnames b{grid-column:1/-1;font-size:12px}
#teamP input{padding:8px;border-radius:8px;border:1px solid #445;background:#0b0f22;color:#fff;font-size:16px;width:100%;box-sizing:border-box}
#teamP .trow{display:flex;gap:6px}#teamP .trow .btn{flex:1}

#tchips .tround{align-self:center;font-weight:700;color:#ffd54a;white-space:nowrap;font-size:12px}

/* v61 tray while others play */
#rack{position:relative}#rack.waiting .set{opacity:.38;filter:grayscale(.6);pointer-events:none}
#rack .rkwait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(10,14,34,.85);border:1px solid rgba(255,255,255,.18);color:#fff;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:2}

/* v64 used power-ups */
#pmenu .used{opacity:.4;filter:grayscale(1);position:relative}#pmenu .usedtag{position:absolute;right:10px;top:8px;font-size:11px;background:#555;color:#fff;padding:2px 7px;border-radius:999px}
/* v67: iPhone Duo / wide windows — use available width instead of a fixed 480px phone column */
#app{max-width:min(100vw,900px);width:100%;--t:min(34px,calc((min(100vw,480px) - 70px)/9.6))}
.rt{--t:inherit}
@media (min-width:600px){
 #app{--t:clamp(34px,calc((min(100vw,900px) - 70px)/12),60px)}
 .set .rt{--t:clamp(30px,calc(min(100vw,900px)/16),56px)}
 .sq{width:64px;height:50px}
 footer .btn{height:64px;font-size:14px}
 .names{font-size:16px}.scores{font-size:26px}
 #overlay>.card,.pcard,.tutc,.endc,#teamP .tcard{transform:scale(1.15);transform-origin:top center;margin-bottom:8%}
 .chcard,#shareP .shc{max-width:640px}
 .cell{font-size:clamp(14px,3.6vmin,34px)}.star span{font-size:min(44px,6vmin)}
 #rack{min-height:calc(var(--t)*3 + 40px)}
}

/* v67.1: landscape / wide-short windows — let the board use the height, tighter chrome */
@media (orientation: landscape) and (min-width:600px){
 #app{max-width:min(100vw,900px,calc(100dvh + 200px))}
 footer .btn{height:54px}
}
/* v67.2: keep footer + tray on-screen; board must shrink to fit */
footer{flex-shrink:0}
#rack{flex-shrink:0}