/* CricScroll — looks rebuilt in CSS from the cricwords Reel templates (v5 themes, v6 + variants, v7.2). */
@font-face{font-family:Poppins;font-weight:500;src:url(../fonts/Poppins-Medium.woff2) format('woff2');font-display:swap}
@font-face{font-family:Poppins;font-weight:600;src:url(../fonts/Poppins-SemiBold.woff2) format('woff2');font-display:swap}
@font-face{font-family:Poppins;font-weight:700;src:url(../fonts/Poppins-Bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:Poppins;font-weight:800;src:url(../fonts/Poppins-ExtraBold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(../fonts/DMSerifDisplay-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:Kalam;font-weight:700;src:url(../fonts/Kalam-Bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Patrick Hand';src:url(../fonts/PatrickHand-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Special Elite';src:url(../fonts/SpecialElite-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Courier Prime';font-weight:700;src:url(../fonts/CourierPrime-Bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(../fonts/BebasNeue-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Permanent Marker';src:url(../fonts/PermanentMarker-Regular.woff2) format('woff2');font-display:swap}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#05070f;color:#fff;font-family:Poppins,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.acc{color:var(--acc,#ff9e30)}

/* ---------- HUD (like the IG Reels top bar) ---------- */
.hud{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}
.hud>*{pointer-events:auto}
.brand{font-weight:800;font-size:19px;letter-spacing:-.3px;color:#fff;--acc:#ff9e30;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.score{margin-left:auto;font-size:12px;font-weight:600;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);padding:5px 10px;border-radius:99px;white-space:nowrap;backdrop-filter:blur(6px)}
.score b{font-size:14px}.score em{font-style:normal;color:#ffd84a;font-weight:800}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700;min-width:34px;height:30px;padding:0 9px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.ico.wallet{width:14px;height:10px;border:1.6px solid currentColor;border-radius:2px;display:inline-block;position:relative;flex:none}
.ico.wallet::after{content:"";position:absolute;left:-1px;right:-1px;top:3px;border-top:1.6px solid currentColor}
.ico.admark{width:12px;height:12px;border:1.6px solid currentColor;border-radius:50%;display:inline-block;position:relative;flex:none}
.ico.admark::after{content:"";position:absolute;left:-1px;right:-1px;top:4px;border-top:1.6px solid currentColor;transform:rotate(-40deg)}

/* ---------- feed ---------- */
.feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:0}
.feed::-webkit-scrollbar{display:none}
.card{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--bg,#0a1022);color:var(--fg,#fff)}
.card .inner{position:relative;height:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 58px) 16px calc(env(safe-area-inset-bottom) + 44px)}
.decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.card .inner>*:not(.decor){position:relative;z-index:1}
/* Don't let the column squash the clue or the options onto each other.
   .body is flex:1 (basis 0), so it also needs a content basis or it collapses to nothing. */
.card .inner>*{flex-shrink:0}
.card .inner>.body{flex-grow:1;flex-basis:auto;min-height:min-content}
.top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
.pill{font-size:10.5px;font-weight:700;letter-spacing:1.2px;padding:4px 11px;border-radius:99px;background:var(--acc);color:#1a1206;text-transform:uppercase}
.hook{margin:0;font-family:var(--hook);font-weight:800;font-size:clamp(24px,7.4vw,32px);line-height:1.12;letter-spacing:-.4px;text-wrap:balance;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.light .hook{text-shadow:none}
.clue{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 14px;text-align:center}
.light .clue{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.clue .cl{font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--acc)}
.clue p{margin:3px 0 0;font-weight:700;font-size:14.5px;line-height:1.3;text-transform:uppercase}
.body{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.play{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.sub{font-size:12px;opacity:.75;text-align:center}
.actions{display:flex;gap:10px;align-items:center;justify-content:center;width:100%}
.hint{display:flex;flex-direction:column;align-items:center;line-height:1.05;padding:8px 18px;border-radius:99px;background:var(--acc);color:#1a1206;font-weight:800;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hint small{font-size:9.5px;font-weight:600;opacity:.75;letter-spacing:.6px;text-transform:uppercase}
.give{font-size:12.5px;font-weight:600;opacity:.7;text-decoration:underline;padding:8px}
.solved .actions{visibility:hidden}
.rail{position:absolute!important;right:8px;bottom:calc(env(safe-area-inset-bottom) + 22px);display:flex;flex-direction:column;align-items:center;gap:2px;z-index:3}
.rail .like{font-size:20px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.25)}
.light .rail .like{background:rgba(255,255,255,.6);color:#c0262a}
.rail .like.on{color:#ff4d6a}
.rail .num{font-size:10px;font-weight:700;opacity:.7}

/* ---------- slots + tiles (v5 orange tiles) ---------- */
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;max-width:100%}
.word{display:flex;gap:5px}
.slot{width:38px;height:44px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:22px;background:rgba(0,0,0,.38);border:2px solid rgba(255,255,255,.28);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);transition:background .25s,transform .2s}
.slots.long .slot{width:30px;height:38px;font-size:18px;border-radius:7px}
.slots.long .word{gap:4px}
.light .slot{background:#fff;border-color:rgba(0,0,0,.18);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.slot.filled{background:linear-gradient(180deg,#ffa53e,#f0761c);border-color:#ffd29a;color:#fff;box-shadow:0 3px 0 #b04f0c}
.slot.given{background:linear-gradient(180deg,#ffffff,#f1e7d6);color:#1b1b22;border-color:#fff;box-shadow:0 3px 0 #b9a888}
.slot.hinted{outline:2px dashed var(--acc);outline-offset:2px}
.slot.pop{animation:pop .22s ease}
.slot.win{background:linear-gradient(180deg,#5ad682,#2fa457)!important;border-color:#b8f5c9!important;color:#fff!important;box-shadow:0 3px 0 #1d6e38!important;animation:flip .45s ease;outline:0}
.bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px}
.tile{width:44px;height:48px;border-radius:10px;font-weight:800;font-size:22px;color:#2a1a08;background:linear-gradient(180deg,#fffaf0,#f1dfbf);box-shadow:0 4px 0 #b99a68,0 8px 16px rgba(0,0,0,.25);transition:transform .15s,opacity .2s}
.tile:active{transform:translateY(2px)}
.tile.used{opacity:.18;transform:scale(.9);pointer-events:none}
.bank.spent{opacity:0;transition:opacity .5s}
.balls{display:flex;gap:7px}.balls i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.balls i.on{background:radial-gradient(circle at 35% 35%,#ff7a7a,#b5121b);border-color:#ffb0b0}
@keyframes pop{50%{transform:scale(1.14)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px var(--acc);transform:scale(1.08)}}

/* ---------- versus ---------- */
.vs{display:flex;align-items:center;justify-content:center;gap:22px}
.av{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:1px}
.av b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.vsball{width:44px;height:44px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800}
.vs.youwin .av:first-child b{box-shadow:0 0 0 4px #2fa457}
.vbars{width:86%;display:flex;flex-direction:column;gap:6px}
.vbar{height:10px;border-radius:99px;background:rgba(0,0,0,.12);overflow:hidden}.vbar i{display:block;height:100%;width:0;transition:width .8s ease;border-radius:99px}
.vbar.you i{background:#f06a28}.vbar.fr i{background:#3aa0a0}.vbar.stuck i{opacity:.55}
.d-neongrid .vbar{background:rgba(255,255,255,.14)}

/* ---------- wheel ---------- */
.ring{position:relative;width:min(70vw,270px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);backdrop-filter:blur(3px);box-shadow:0 0 40px rgba(255,210,140,.18)}
.light .ring{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.12)}
.rl{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;font-weight:800;font-size:24px;background:#fff;color:#1b1b22;box-shadow:0 4px 0 #c9b999;transition:background .2s,transform .2s}
.rl.used{background:var(--acc);color:#fff;transform:scale(.92)}
.rline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rline polyline{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rclear{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;font-size:22px;background:rgba(0,0,0,.35);color:#fff}
.ring.done{box-shadow:0 0 0 6px #2fa457,0 0 50px rgba(90,214,130,.5)}

/* ---------- hex (cricwords.com game) ---------- */
.hexboard{position:relative;width:min(84vw,330px);max-height:42vh}
.hx{position:absolute;transform:translate(0,0);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#f7faff;color:#10204a;font-weight:800;font-size:clamp(20px,6vw,28px);box-shadow:inset 0 -4px 0 #c8d6ee;transition:background .2s,transform .15s}
.hx.sel{background:#f08a2a;color:#fff}
.hx.win{background:#3cc46a;color:#fff}
.hx.pulse{animation:hexpulse 1s ease-in-out infinite}
@keyframes hexpulse{50%{background:#ffd29a}}
.t-hex .slot{background:#fff;border-color:#c8d6ee;color:#10204a}
.t-hex .slot.filled{background:#10204a;border-color:#10204a;color:#fff;box-shadow:none}

/* ---------- keyboard ---------- */
.kbd{display:flex;flex-direction:column;gap:6px;width:100%;max-width:400px}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1;max-width:36px;height:42px;border-radius:7px;background:rgba(255,255,255,.92);color:#1b1b22;font-weight:700;font-size:16px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.key.wide{max-width:52px;flex:1.5}
.key:active{background:var(--acc);color:#fff}
.type-play{gap:20px}

/* ---------- options ---------- */
.opts{width:100%;display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border-radius:99px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);font-weight:700;font-size:15px;text-align:left;transition:all .2s}
.light .opt{background:#fff;border-color:rgba(0,0,0,.12)}
.opt .ol{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#1a1206;font-size:13px;flex:none}
.opt.right{background:#2fa457;border-color:#b8f5c9;color:#fff}
.opt.wrong{background:rgba(200,40,40,.45);border-color:#ff9a9a}
.opt.dim{opacity:.35}
.opts.big{flex-direction:row;gap:12px}
.opts.big .opt{flex-direction:column;justify-content:center;border-radius:18px;padding:22px 10px;font-size:17px;text-align:center;min-height:130px}
.opts.big .ol{width:40px;height:40px;font-size:20px}
.qhead{font-weight:700;font-size:15px;opacity:.9;text-align:center}

/* ---------- quiz show (rays) ---------- */
.d-rays .decor{background:repeating-conic-gradient(from 0deg at 50% 32%,rgba(255,255,255,.07) 0 8deg,transparent 8deg 16deg)}
.t-quiz .clue{background:#fff;color:#17202a;border:0;border-radius:16px}
.t-quiz .clue p{color:#17202a}
.t-quiz .pill{background:#ffd84a}
.t-quiz .opt{border-radius:14px}

/* ---------- case file ---------- */
.d-stripes .hook{font-family:'Special Elite',monospace;font-weight:400;font-size:clamp(22px,6.6vw,28px)}
.exhibits{width:100%;display:flex;flex-direction:column;gap:12px}
.exhibit{position:relative;background:#f6f1e3;color:#2a2620;border-radius:4px;padding:12px 14px 12px;box-shadow:0 6px 16px rgba(0,0,0,.35);transform:rotate(-1.2deg);font-family:'Courier Prime',monospace;font-weight:700}
.exhibit:nth-child(2){transform:rotate(1deg)}
.exhibit::before{content:'';position:absolute;top:-9px;left:22px;width:14px;height:30px;border:3px solid #9aa3ad;border-radius:8px;border-bottom-color:transparent}
.exl{display:inline-block;font-size:10.5px;letter-spacing:1px;border:1.5px solid #2a2620;padding:1px 6px}
.exhibit p{margin:6px 0 0;font-size:14.5px;line-height:1.35;text-transform:uppercase}
.exhibit.closed p{filter:blur(6px);user-select:none}
.exhibit .open{display:none}
.exhibit.closed .open{display:block;position:absolute;right:10px;top:10px;font-size:11px;background:var(--acc);color:#fff;padding:2px 8px;border-radius:99px;font-family:Poppins}
.t-casefile .opt{border-radius:6px;font-family:'Courier Prime',monospace}

/* ---------- counter / arcade ---------- */
.coinrow{display:flex;gap:10px;align-items:center}
.meter{font-weight:800;font-size:12px;letter-spacing:1px;padding:5px 12px;border-radius:99px;background:#2fd36a;color:#06210f}
.coin{font-weight:800;font-size:13px;padding:8px 14px;border-radius:99px;border:2px solid var(--acc);color:var(--fg)}
.coin:disabled{opacity:.35}
.d-neongrid .hook{text-shadow:0 0 18px rgba(255,79,216,.45)}
.t-counter.d-neongrid .hook{font-family:'Bebas Neue';font-weight:400;font-size:clamp(34px,10vw,44px);letter-spacing:1px}

/* ---------- word search card (v7.2 uncle) ---------- */
.gridcard{background:#fbf6ea;color:#1d2433;border-radius:16px;padding:12px 12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.35);width:min(92vw,360px)}
.gtitle{font-weight:800;font-size:14px;text-align:center;letter-spacing:.6px}
.gsub{font-size:11px;text-align:center;opacity:.6;margin:2px 0 8px;letter-spacing:.6px;text-transform:uppercase}
.wgrid{display:grid;gap:2px}
.wc{aspect-ratio:1;border-radius:50%;font-weight:700;font-size:clamp(14px,4.4vw,19px);color:#1d2433;transition:background .2s}
.wc.sel{background:#ffd29a}
.wc.found{background:#ff9e3d;color:#fff;border-radius:8px;animation:pop .3s}
.wc.pulse{background:#ffe7c4}

/* ---------- ladder ---------- */
.steps{display:flex;gap:28px;position:relative}
.steps::before{content:'';position:absolute;left:12px;right:12px;top:50%;height:3px;background:rgba(255,255,255,.25)}
.step{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#1c2340;border:2px solid rgba(255,255,255,.3)}
.step.cur{background:var(--acc);color:#1a1206;border-color:#fff}
.step.ok{background:#2fa457;border-color:#b8f5c9}
.lvl{font-weight:800;letter-spacing:1px;font-size:13px}
.clue.inner{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;color:#17202a;border-radius:14px;padding:10px 14px;max-width:340px}
.clue.inner .tag{font-size:10px;font-weight:800;letter-spacing:1px;color:#fff;background:#f08a2a;border-radius:99px;padding:2px 8px}
.clue.inner p{margin:0;font-weight:700;font-size:14px;text-transform:uppercase;text-align:center}
.larea{display:flex;flex-direction:column;align-items:center;gap:14px}

/* ---------- decor layers ---------- */
.d-orbs .decor::before,.d-orbs .decor::after{content:'';position:absolute;border-radius:50%;filter:blur(40px);opacity:.45}
.d-orbs .decor::before{width:220px;height:220px;left:-60px;top:18%;background:var(--acc);animation:drift 14s ease-in-out infinite alternate}
.d-orbs .decor::after{width:260px;height:260px;right:-80px;bottom:12%;background:#6ec8ff;opacity:.25;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(40px,-30px)}}
.d-stadium .decor{background:
  radial-gradient(60px 18px at 14% 9%,rgba(255,255,255,.55),transparent 70%),radial-gradient(60px 18px at 86% 9%,rgba(255,255,255,.55),transparent 70%),
  linear-gradient(200deg,transparent 30%,rgba(255,255,255,.05) 45%,transparent 60%),linear-gradient(160deg,transparent 30%,rgba(255,255,255,.05) 45%,transparent 60%)}
.d-stadium .decor::after{content:'';position:absolute;left:50%;bottom:-20px;width:170px;height:240px;transform:translateX(-50%);background:url(../img/stumps_silhouette.png) center bottom/contain no-repeat;opacity:.08}
.d-ground .decor::before{content:'';position:absolute;left:-10%;right:-10%;top:44%;height:14%;background:radial-gradient(60% 100% at 30% 100%,#203a2a 60%,transparent 61%),radial-gradient(50% 90% at 75% 100%,#26402e 60%,transparent 61%);opacity:.85}
.d-ground .decor::after{content:'';position:absolute;left:50%;top:56%;width:90px;height:44%;transform:translateX(-50%) perspective(300px) rotateX(55deg);background:linear-gradient(#c9b48a,#a8935e);opacity:.55;border-radius:6px}
.d-dots .decor{background:radial-gradient(rgba(0,0,0,.07) 1.2px,transparent 1.3px) 0 0/18px 18px}
.d-neongrid .decor::before{content:'';position:absolute;left:-50%;right:-50%;bottom:0;height:34%;background:linear-gradient(rgba(255,79,216,.55) 2px,transparent 2px) 0 0/100% 34px,linear-gradient(90deg,rgba(255,79,216,.55) 2px,transparent 2px) 0 0/40px 100%;transform:perspective(220px) rotateX(58deg);transform-origin:bottom}
.d-neongrid .decor::after{content:'';position:absolute;left:0;right:0;bottom:33%;height:2px;background:#ff4fd8;box-shadow:0 0 20px #ff4fd8}
.d-split .decor{background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.35) 0 6px,transparent 7px) 0 0/70px 70px}
.d-graph .inner{background:#fdfdf8 linear-gradient(rgba(70,120,200,.18) 1px,transparent 1px) 0 0/100% 22px,#fdfdf8 linear-gradient(90deg,rgba(70,120,200,.18) 1px,transparent 1px) 0 0/22px 100%;margin:0 auto;box-shadow:0 10px 40px rgba(0,0,0,.4);border-left:3px solid #e05a5a}
.d-graph .hook{font-family:Kalam;font-weight:700;color:#1a2a8a}
.d-graph .hook .acc{color:#d8262a}
.d-newsprint .inner{background:#f1e9d6;color:#1a1a1a;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.d-newsprint .top::before{content:'THE CRICWORDS DAILY';font-family:'DM Serif Display';font-size:22px;letter-spacing:1px;border-bottom:3px double #1a1a1a;padding-bottom:4px;width:100%;text-align:center}
.d-newsprint .hook{font-family:'DM Serif Display';font-weight:400}
.d-newsprint .clue{background:#fbe0d8;border-radius:2px;font-family:'Courier Prime',monospace}
.d-chalk .inner{border:12px solid #7a5232;border-radius:4px;max-width:440px}
.d-chalk .hook{font-family:'Patrick Hand';font-weight:400;font-size:clamp(30px,9vw,38px);text-shadow:0 0 1px #fff}
.d-chalk .clue{background:transparent;border:2px dashed rgba(255,255,255,.4);font-family:'Patrick Hand'}
.d-chalk .clue p{font-weight:400;font-size:19px}
.d-card .decor{background:radial-gradient(circle at 50% 0,rgba(255,255,255,.12),transparent 60%)}

/* ---------- reveal sheet ---------- */
.reveal{position:absolute!important;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:5!important;background:rgba(8,12,24,.88);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:14px 16px 12px;text-align:center;backdrop-filter:blur(10px);transform:translateY(130%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .3s;pointer-events:none}
.reveal.show{transform:none;opacity:1;pointer-events:auto}
.rlab{font-weight:800;font-size:13px;letter-spacing:1.5px;color:#ffd84a}
.rans{font-weight:800;font-size:26px;letter-spacing:1px;margin:2px 0}
.rnote{font-size:11px;opacity:.7}
.rfact{margin:6px 0 8px;font-size:13.5px;line-height:1.4;opacity:.92}
.rnext{font-size:12px;font-weight:700;opacity:.75}
.bounce{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}

/* ---------- intro / outro ---------- */
.intro .inner,.outro .inner{justify-content:center;text-align:center;--acc:#ff9e30}
.logo{font-weight:800;font-size:54px;letter-spacing:-1.5px}
.tagline{margin:0;opacity:.85;font-weight:600}
.how{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:8px;max-width:320px}
.how li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:9px 12px;border-radius:12px;font-size:14px}
.final{font-size:38px;font-weight:800;margin:14px 0}
.again{padding:12px 22px;border-radius:99px;background:var(--acc);color:#1a1206;font-weight:800}

/* ---------- modal / toasts ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.modal.show{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:460px;background:#fff;color:#17202a;border-radius:22px 22px 0 0;padding:18px 20px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:8px;transform:translateY(30px);transition:transform .3s}
.modal.show .sheet{transform:none}
.sheet h3{margin:0;font-size:19px}.sheet p{margin:0;font-size:13.5px;line-height:1.45;opacity:.85}
.adtag{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#b04f0c}
.adbar{height:6px;border-radius:99px;background:#eee;overflow:hidden;margin:6px 0}.adbar i{display:block;height:100%;width:0;background:#f08a2a;transition:width 1.5s linear}
.claim{padding:12px;border-radius:99px;background:#f08a2a;color:#1a1206;font-weight:800}.claim:disabled{opacity:.45}
.cancel{padding:10px;font-weight:600;opacity:.7}
.about .sheet{max-height:80vh;overflow:auto}
.toast{position:fixed;z-index:40;left:50%;top:calc(env(safe-area-inset-top) + 58px);transform:translateX(-50%);background:rgba(10,14,28,.92);color:#fff;padding:9px 16px;border-radius:99px;font-size:13px;font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.2);animation:tin .3s ease}
.toast.bad{border-color:#ff8a8a}.toast.gold{background:#ffd84a;color:#1a1206}
.toast.out{opacity:0;transition:opacity .5s}
@keyframes tin{from{transform:translate(-50%,-10px);opacity:0}}
.err{padding:80px 20px;text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:700px){.card .inner{border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06)}}

.hbtn{white-space:nowrap}
#score{white-space:nowrap}
/* slots shrink so the longest word always fits a 390px screen */
.slot{width:min(38px,calc((100vw - 56px) / var(--n,8) - 5px));font-size:min(22px,calc((100vw - 56px) / var(--n,8) * .55))}
.slots.long .slot{width:min(30px,calc((100vw - 56px) / var(--n,8) - 4px))}
/* arcade floor sits low so the horizon never crosses the options */
.d-neongrid .decor::before{height:15%;opacity:.7}
.d-neongrid .decor::after{bottom:14.6%;opacity:.8}

/* ---------- speller controls + music invite ---------- */
.bankctl{display:flex;justify-content:center;gap:10px;margin-top:10px}
.bankctl.spent{opacity:0;pointer-events:none;transition:opacity .5s}
.bctl{min-width:88px;height:38px;padding:0 16px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.bctl:active{background:var(--acc)}
.key.clr{max-width:140px;flex:0 0 140px;font-size:14px}
#snd{font-size:15px;min-width:64px;height:34px}
#snd[aria-pressed="false"]{animation:sndpulse 2.4s ease-in-out 4;border-color:#ffd84a}
#snd[aria-pressed="true"]{background:#ffd84a;color:#1a1206}
@keyframes sndpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,216,74,.0)}50%{box-shadow:0 0 0 6px rgba(255,216,74,.35)}}
.minvite{position:fixed;z-index:41;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%);width:min(320px,calc(100vw - 24px));display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(10,14,28,.94);color:#fff;padding:10px 14px;border-radius:16px;font-size:14px;font-weight:700;border:1px solid #ffd84a;text-align:center;animation:invitein .3s ease}
@keyframes invitein{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}
.minvite p{margin:0;line-height:1.25;white-space:nowrap}
.minvite-actions{display:flex;gap:8px;justify-content:center}
.minvite button{height:30px;padding:0 12px;border-radius:99px;font-weight:700;white-space:nowrap}
.minvite .yes{background:#ffd84a;color:#1a1206}.minvite .no{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
body.invite-open .card .inner{padding-top:calc(env(safe-area-inset-top) + 156px)}
/* Short phones, including the cricwords top bar: smaller title, the long-answer tile size, tighter options. */
@media (max-height:900px){
  .card .inner{gap:8px}
  .play{gap:8px}
  .play>*{flex-shrink:0}
  .hook{font-size:clamp(20px,6vw,26px)}
  .clue{padding:8px 12px}
  .slot,.slots.long .slot{width:min(30px,calc((100vw - 56px) / var(--n,8) - 4px));height:38px;font-size:18px;border-radius:7px}
  .word,.slots.long .word{gap:4px}
  .opt{padding:8px 12px}
  .opts{gap:6px}
  .hexboard{width:min(68vw,250px);max-height:28vh}
  .mult.big{font-size:28px;padding:4px 16px}
  .lvend .lvbig.done b{font-size:32px}
  .lvend .final{font-size:26px;margin:4px 0}
}
/* Shorter phones (iPhone SE/8 at 667 px, 360x740 Androids) under the cricwords top bar: a counter card's clue, three rows
   of tiles, the coin row, four options and the Hint bar all fit on the one card (measured 8 Nov 2026). */
@media (max-height:760px){
  .card .inner{gap:6px;padding-bottom:calc(env(safe-area-inset-bottom) + 34px)}
  .top{gap:4px}
  .hook{font-size:clamp(18px,5.4vw,22px);line-height:1.08}
  .t-counter.d-neongrid .hook{font-size:clamp(22px,6.6vw,28px);line-height:1}
  .clue{padding:6px 10px}
  .clue p{font-size:13px;line-height:1.3}
  .slots{gap:6px 10px}
  .slot,.slots.long .slot{height:32px;font-size:16px}
  .play{gap:6px}
  .coin{padding:6px 12px;font-size:12px}
  .meter{padding:4px 10px;font-size:11px}
  .opt{padding:6px 12px;font-size:14px}
  .opts{gap:5px}
}