/* Wordle Blast, «05 Pulse»: crystals of light in the dark. A glass stack whose dark
   crystals breathe in a wave, a block opens with a flash and a ring, a guess blasts
   the rest with a shockwave from the bottom up. Layout sizes of the game come from
   game.js (fit), so ten rows always fit the screen */

/* ---------- fonts (OFL, static/fonts) ---------- */
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/exo2-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/exo2-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/exo2-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/exo2-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/exo2-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/michroma-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- palette ---------- */
:root{
  --g:#22cf8f;--g-rgb:34,207,143;
  --y:#ffd84a;--y-rgb:255,216,74;
  --x:#343a52;
  --ink:#f4f7ff;--ink-g:#032a1c;--ink-y:#1b1500;--ink-x:rgba(244,247,255,.8);
  --cyan:#4de3ff;--cyan-rgb:77,227,255;
  --mag:#ff5ad1;--mag-rgb:255,90,209;
  --violet:#b48cff;--violet-rgb:180,140,255;
  --key-ink:#dfe6ff;
  --cr-a:#2a2e7a;--cr-b:#1c1f5a;--cr-c:#15173f;--cr-glow:#4a4fd0;
  --txt2:#c3cbef;
  --txt3:#9aa5d6;
  --pulse:linear-gradient(100deg,#4de3ff 0%,#8ea6ff 52%,#ff5ad1 100%);
  --exo:'Exo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mich:'Michroma','Exo 2',system-ui,sans-serif;
}
/* high contrast: orange for the right spot, blue for the wrong one, dark letters on both */
.hc{--g:#f5793a;--g-rgb:245,121,58;--y:#85c0f9;--y-rgb:133,192,249;--ink-g:#1f0a00;--ink-y:#04213d}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#05060f;color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
body{margin:0;min-height:100vh;min-height:100svh;font:400 16px/1.45 var(--exo);-webkit-tap-highlight-color:transparent}
html.in-game,html.in-game body{height:100%;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit}
a{color:var(--cyan)}
h1,h2,h3{font-weight:600;line-height:1.2}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;background:#0c1032;color:var(--ink);box-shadow:inset 0 0 0 1px var(--cyan);text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px}
.noscript{position:relative;margin:40px 16px;text-align:center;font:600 18px/1.4 var(--exo);color:var(--ink)}
.app{display:block;outline:none}
.flip-rtl{transition:none}
[dir=rtl] .flip-rtl{transform:scaleX(-1)}

/* ---------- the deep: background, stars ---------- */
.deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.deco .bg{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 18%,#141a4a 0%,#0c1032 45%,#05060f 100%)}
.deco .bg-alt{background:radial-gradient(120% 70% at 50% 18%,#1a1458 0%,#100d36 45%,#05060f 100%);opacity:0;animation:p-hue 6s ease-in-out infinite alternate}
.deco .stars{position:absolute;left:0;right:0;top:0;height:calc(100% + 211px);will-change:transform}
.deco .s1{background-image:radial-gradient(1px 1px at 23px 41px,rgba(255,255,255,.75) 50%,transparent 100%),radial-gradient(1px 1px at 87px 133px,rgba(255,255,255,.5) 50%,transparent 100%),radial-gradient(1.5px 1.5px at 141px 77px,rgba(170,220,255,.85) 50%,transparent 100%),radial-gradient(1px 1px at 59px 180px,rgba(255,255,255,.45) 50%,transparent 100%),radial-gradient(1px 1px at 160px 196px,rgba(255,200,240,.6) 50%,transparent 100%);background-size:170px 211px;animation:p-drift 60s linear infinite}
.deco .s2{background-image:radial-gradient(1px 1px at 12px 90px,rgba(255,255,255,.35) 50%,transparent 100%),radial-gradient(1px 1px at 101px 25px,rgba(180,230,255,.4) 50%,transparent 100%),radial-gradient(1px 1px at 70px 170px,rgba(255,255,255,.3) 50%,transparent 100%);background-size:130px 211px;animation:p-drift 90s linear infinite}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;font:600 16px/1.1 var(--exo);color:var(--ink);text-decoration:none;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .12s,box-shadow .15s,background-color .15s,filter .15s;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn .ico{width:20px;height:20px;flex:none}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07))}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.btn-go{color:#06122a;background:var(--pulse);box-shadow:0 0 22px rgba(var(--cyan-rgb),.35),0 0 30px rgba(var(--mag-rgb),.18),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-go:hover{background:var(--pulse);filter:brightness(1.08)}
.btn-go .ico{stroke:#06122a}
.btn-ghost{color:var(--ink)}
.btn-danger{color:#ffb3ea;box-shadow:inset 0 0 0 1px rgba(var(--mag-rgb),.7),0 0 12px rgba(var(--mag-rgb),.18)}
.btn-danger .ico{stroke:#ffb3ea}
.btn-link{min-height:40px;padding:0 12px;background:none;box-shadow:none;color:var(--txt2);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.btn-link:hover{background:none;color:var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico .fill{fill:currentColor;stroke:none}
.ibtn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);cursor:pointer;text-decoration:none;transition:background-color .15s,box-shadow .15s,transform .12s;touch-action:manipulation}
.ibtn:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.6),0 0 12px rgba(var(--cyan-rgb),.25)}
.ibtn:active{transform:scale(.94)}
.ibtn .ico{width:20px;height:20px}

/* ---------- glass cards and dialogs ---------- */
.glass-card{position:relative;border-radius:22px;padding:22px 20px;background:linear-gradient(180deg,rgba(32,38,104,.78),rgba(12,15,48,.88));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.14),0 22px 50px rgba(0,0,0,.45),0 0 44px rgba(var(--cyan-rgb),.08);overflow:hidden}
.card-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.13) 46%,transparent 60%);transform:translateX(-110%);animation:p-glint 1.5s ease-out .25s forwards}
.acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.acts-col{flex-direction:column;align-items:stretch}
.dlg{width:min(92vw,400px);max-width:none;max-height:92vh;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.dlg::backdrop{background:rgba(3,4,16,.72)}
.dlg .glass-card{padding:26px 22px 22px;max-height:92vh;overflow-y:auto;animation:p-rise-in .38s cubic-bezier(.2,.8,.3,1) both}
.dlg h2{margin:0 0 8px;font:600 22px/1.25 var(--exo);text-align:center}
.dlg p{margin:0;color:var(--txt2);text-align:center;text-wrap:balance}
.dlg .dlg-t{margin-top:4px}
.dlg-x{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;z-index:2}

/* settings sheet */
.sw-list{display:grid;gap:10px;margin-top:16px}
.sw-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 14px;border:0;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--ink);font:500 16px/1.2 var(--exo);text-align:start;cursor:pointer}
.sw-row .ico{flex:none;color:var(--cyan)}
.sw-l{flex:1}
.sw{position:relative;flex:none;width:48px;height:28px;border-radius:14px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background-color .2s,box-shadow .2s}
.sw-k{position:absolute;top:4px;inset-inline-start:4px;width:20px;height:20px;border-radius:50%;background:#aeb8e6;transition:transform .2s,background-color .2s}
.sw-row[aria-checked=true] .sw{background:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:0 0 12px rgba(var(--cyan-rgb),.45)}
.sw-row[aria-checked=true] .sw-k{transform:translateX(20px);background:#fff}
[dir=rtl] .sw-row[aria-checked=true] .sw-k{transform:translateX(-20px)}
.sw-note{margin-top:12px!important;font-size:13px;color:var(--txt3)!important}

/* first-launch card */
.intro .glass-card{text-align:start}
.intro-demo{display:grid;gap:4px;justify-content:center;margin:14px 0 6px}
.intro-list{margin:12px 0 0;padding:0 0 0 22px;display:grid;gap:8px;color:var(--txt2);font-size:15px;line-height:1.4}
[dir=rtl] .intro-list{padding:0 22px 0 0}
.intro-list li::marker{color:var(--cyan);font-weight:600}

/* mini crystals: rules, intro */
.mini{display:inline-grid;grid-template-columns:repeat(5,30px);gap:4px;direction:ltr}
.mc{position:relative;display:grid;place-items:center;height:30px;border-radius:7px;font:600 17px/1 var(--exo);color:var(--ink);background:linear-gradient(135deg,var(--cr-a) 0%,var(--cr-b) 50%,var(--cr-c) 100%);box-shadow:inset 0 0 0 1px rgba(90,95,255,.25),inset 0 0 10px rgba(74,79,208,.45)}
.mc.m-g{background:var(--g);color:var(--ink-g);box-shadow:0 0 10px rgba(var(--g-rgb),.5)}
.mc.m-y{background:var(--y);color:var(--ink-y);box-shadow:0 0 10px rgba(var(--y-rgb),.5)}
.mc.m-x{background:var(--x);color:var(--ink-x);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.mini.is-closed .mc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 12px rgba(74,79,208,.8);opacity:.35;animation:p-breathe 2s ease-in-out infinite;pointer-events:none}

/* toast */
.toast-wrap{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 17vh);z-index:60;display:flex;justify-content:center;pointer-events:none}
.toast{max-width:min(88vw,380px);padding:11px 18px;border-radius:14px;background:rgba(12,16,50,.94);box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.5),0 0 20px rgba(var(--cyan-rgb),.22),0 10px 30px rgba(0,0,0,.4);font:600 15px/1.35 var(--exo);text-align:center;color:var(--ink);opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .2s,transform .2s}
.toast:empty{display:none}
.toast.show{opacity:1;transform:none}

/* rating */
.rate-stars{display:flex;justify-content:center;gap:6px;margin:18px 0 6px}
.rate-star{width:50px;height:50px;padding:5px;border:0;border-radius:14px;background:transparent;cursor:pointer;transition:transform .15s}
.rate-star:hover{transform:translateY(-2px) scale(1.06)}
.cstar{width:100%;height:100%;overflow:visible}
.cstar .cs-b{fill:rgba(255,255,255,.07);stroke:rgba(200,210,255,.45);stroke-width:1;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.cstar .cs-f{fill:rgba(255,255,255,0);transition:fill .15s}
.rate-star.is-lit .cs-b{fill:var(--cyan);stroke:#d9faff;filter:drop-shadow(0 0 6px rgba(var(--cyan-rgb),.8))}
.rate-star.is-lit .cs-f{fill:rgba(255,255,255,.35)}
.rate-star.is-lit:nth-child(4) .cs-b,.rate-star.is-lit:nth-child(5) .cs-b{fill:var(--mag);stroke:#ffd6f4;filter:drop-shadow(0 0 6px rgba(var(--mag-rgb),.8))}
.rate-label{display:flex;justify-content:space-between;gap:10px;margin:14px 2px 6px;font-size:14px;color:var(--txt2)}
.rate-text{width:100%;min-height:76px;padding:10px 12px;border:0;border-radius:12px;resize:vertical;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--ink);font:400 15px/1.4 var(--exo)}
.rate-text::placeholder{color:var(--txt3)}
.rate-text:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.invite-gem{width:72px;height:72px;margin:4px auto 12px;animation:p-gem-in .7s cubic-bezier(.2,.8,.3,1) both}
.invite-gem .cs-b{fill:var(--mag);stroke:#ffe0f6;filter:drop-shadow(0 0 10px rgba(var(--mag-rgb),.9))}
.invite-gem .cs-f{fill:rgba(255,255,255,.35)}

/* ---------- home ---------- */
.home{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:640px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0}
.topbar h1{flex:1;margin:0;text-align:center;font:600 20px/1.2 var(--exo)}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:4px 20px 28px;text-align:center}
.hero-stack{position:relative;width:200px;height:186px;margin-bottom:6px}
.hs-col{position:absolute;inset:0;display:flex;flex-direction:column-reverse;gap:4px;padding:8px 9px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));box-shadow:inset 0 -18px 26px -18px rgba(var(--cyan-rgb),.4),inset 0 1px 0 rgba(255,255,255,.08),0 0 40px rgba(var(--cyan-rgb),.1)}
.hrow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;flex:1}
.hc-cell{position:relative;display:grid;place-items:center;border-radius:6px;font:600 15px/1 var(--exo);color:var(--ink);background:linear-gradient(135deg,var(--cr-a) 0%,var(--cr-b) 50%,var(--cr-c) 100%);box-shadow:inset 0 0 0 1px rgba(90,95,255,.22),inset 0 1px 0 rgba(255,255,255,.1)}
.hrow:not(.is-open) .hc-cell::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 10px var(--cr-glow);opacity:.35;animation:p-breathe 2s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms)}
.hc-cell.m-g{background:var(--g);color:var(--ink-g);box-shadow:0 0 12px rgba(var(--g-rgb),.55)}
.hc-cell.m-y{background:var(--y);color:var(--ink-y);box-shadow:0 0 12px rgba(var(--y-rgb),.55)}
.hc-cell.m-x{background:var(--x);color:var(--ink-x)}
.hs-wave{position:absolute;left:50%;top:78%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1px solid var(--cyan);box-shadow:0 0 10px rgba(var(--cyan-rgb),.7),inset 0 0 10px rgba(var(--cyan-rgb),.5);opacity:0;animation:p-hero-wave 4.2s ease-out infinite;pointer-events:none}
.hs-wave-b{border-color:var(--mag);box-shadow:0 0 10px rgba(var(--mag-rgb),.6);animation-delay:.18s}
.brand{margin:4px 0 0;display:flex;flex-direction:column;align-items:center;gap:6px;font:400 26px/1.1 var(--mich);letter-spacing:.32em;padding-inline-start:.32em;color:rgba(255,255,255,.92);text-shadow:0 0 18px rgba(var(--cyan-rgb),.45)}
.brand .b2{font-size:38px;letter-spacing:.24em;padding-inline-start:.24em;background:var(--pulse);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(var(--cyan-rgb),.35))}
.tagline{margin:2px 0 6px;max-width:330px;color:var(--txt2);font-size:16px;text-wrap:balance}
.hero-acts{display:flex;flex-direction:column;align-items:center;gap:4px}
.btn-play{flex-direction:column;gap:2px;min-width:250px;min-height:64px;padding:10px 30px;border-radius:22px;color:#06122a;background:var(--pulse);box-shadow:0 0 22px rgba(var(--cyan-rgb),.35),0 0 36px rgba(var(--mag-rgb),.16),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-play::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 34px rgba(var(--cyan-rgb),.45),0 0 52px rgba(var(--mag-rgb),.28);opacity:0;animation:p-glow 2.6s ease-in-out infinite;pointer-events:none}
.btn-play:hover{background:var(--pulse);filter:brightness(1.08)}
.bp-main{display:inline-flex;align-items:center;gap:10px;font:700 21px/1.1 var(--exo);letter-spacing:.02em}
.bp-main .ico{width:22px;height:22px;fill:#06122a;stroke:#06122a}
.bp-sub{font:500 13px/1.2 var(--exo);opacity:.85}
.best{display:inline-flex;align-items:center;gap:8px;margin:4px 0 0;padding:6px 14px;border-radius:999px;color:var(--txt2);box-shadow:inset 0 0 0 1px rgba(var(--y-rgb),.35);font-size:15px}
.best .ico{width:18px;height:18px;color:var(--y)}
.best b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.btn-rules{margin-top:4px}

/* about and more games, below the first screen */
.about{padding:8px 16px 56px}
.about-in{display:grid;gap:22px;max-width:640px;margin:0 auto}
.about-card h2,.more-h{margin:0 0 10px;font:600 21px/1.25 var(--exo)}
.about-card p{margin:0 0 10px;color:var(--txt2)}
.about-card p:last-child{margin-bottom:0}
.games{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.games a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:16px;text-decoration:none;color:var(--ink);background:linear-gradient(135deg,rgba(42,46,122,.6),rgba(21,23,63,.75));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .15s,transform .12s}
.games a:hover{box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.6),0 0 16px rgba(var(--cyan-rgb),.2);transform:translateY(-1px)}
.gname{font:600 17px/1.2 var(--exo);color:var(--cyan)}
.gblurb{font-size:14px;color:var(--txt2)}
.gblurb:empty{display:none}

/* ---------- rules ---------- */
.rules{max-width:640px;margin:0 auto;padding:0 16px 48px}
.rules .topbar{padding-inline:0;margin-bottom:14px}
.rules-card{margin-bottom:16px}
.rsec+.rsec{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.rsec h2{margin:0 0 6px;font:600 18px/1.25 var(--exo);color:var(--ink)}
.rsec p{margin:0;color:var(--txt2)}
.rdemo{display:grid;gap:4px;margin-top:12px}
.legend{list-style:none;margin:10px 0 10px;padding:0;display:grid;gap:10px}
.legend li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--txt2)}
.rperks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.rperk{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.35)}
.rp-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rp-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rp-top b{font-weight:600}
.rp-desc{font-size:14px;color:var(--txt2);text-wrap:pretty}
.rules-go{display:flex;justify-content:center;margin-top:8px}

/* rarity colours */
.r-common{--rc:var(--cyan);--rc-rgb:var(--cyan-rgb)}
.r-rare{--rc:var(--violet);--rc-rgb:var(--violet-rgb)}
.r-epic{--rc:var(--mag);--rc-rgb:var(--mag-rgb)}
.pc-gem{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;margin:6px;border-radius:10px;transform:rotate(45deg);background:linear-gradient(135deg,rgba(var(--rc-rgb),.5),rgba(var(--rc-rgb),.08) 70%);box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.8),inset 0 0 12px rgba(var(--rc-rgb),.35),0 0 16px rgba(var(--rc-rgb),.35)}
.pc-gem .pglyph{width:24px;height:24px;transform:rotate(-45deg);color:#fff}
.pglyph{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pglyph .fill{fill:currentColor;stroke:none}
.pc-rar{font:700 11px/1 var(--exo);letter-spacing:.14em;text-transform:uppercase;color:var(--rc)}

/* =====================================================================
   the game
   ===================================================================== */
.game{position:relative;height:var(--vh,100vh);height:var(--vh,100dvh);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.safe-probe{position:absolute;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.g-frame{position:relative;display:flex;flex-direction:column;align-items:center;width:var(--fw,390px);height:100%;margin:0 auto;padding-top:calc(var(--safe-t,0px) + var(--slack,0px) * .3)}
.g-flash{position:absolute;left:0;right:0;top:0;height:62%;pointer-events:none;opacity:0;background:radial-gradient(90% 60% at 50% 20%,rgba(var(--cyan-rgb),.6) 0%,rgba(var(--mag-rgb),.25) 50%,transparent 78%)}
.game.fx-blast .g-flash{animation:p-flash .8s ease-out both}

/* ---- header ---- */
.hud{position:relative;flex:none;width:100%;height:calc(var(--hud-h) + var(--strip-h));z-index:3;--side:clamp(14px,5.2%,22px);direction:ltr}
.hud .logo{position:absolute;left:0;right:0;top:calc(16px * var(--hk));text-align:center;font:400 calc(14px * var(--hk))/1 var(--mich);letter-spacing:.35em;padding-left:.35em;color:rgba(255,255,255,.8);text-shadow:0 0 12px rgba(var(--cyan-rgb),.35);pointer-events:none;white-space:nowrap}
.hud .ibtn{position:absolute;top:calc(8px * var(--hk));width:calc(28px * var(--hk));height:calc(28px * var(--hk));background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.hud .ibtn::before{content:"";position:absolute;inset:-9px}
.hud .ibtn .ico{width:calc(16px * var(--hk));height:calc(16px * var(--hk));stroke-width:2}
.hud-gear{left:var(--side)}
.hud-pause{right:var(--side)}
.game.is-paused .hud-pause{box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.8),0 0 10px rgba(var(--cyan-rgb),.35);color:var(--cyan)}
.hud .score{position:absolute;left:var(--side);top:calc(48px * var(--hk));font:300 calc(44px * var(--hk))/1 var(--exo);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.hud .score b{font-weight:300}
.game.fx-blast .score b{animation:p-score 1s ease-out .4s}
.hud .mid{position:absolute;left:50%;top:calc(38px * var(--hk));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(5px * var(--hk))}
.hud .round{font:600 calc(11px * var(--hk))/1 var(--exo);letter-spacing:.2em;padding-inline-start:.2em;text-transform:uppercase;color:rgba(223,230,255,.72);white-space:nowrap}
.hud .reward{display:block;min-width:calc(72px * var(--hk));height:calc(28px * var(--hk));padding:0 10px;border:1px solid var(--cyan);border-radius:calc(14px * var(--hk));color:var(--cyan);font:500 calc(16px * var(--hk))/calc(26px * var(--hk)) var(--exo);font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 0 10px rgba(var(--cyan-rgb),.25),inset 0 0 8px rgba(var(--cyan-rgb),.12);transition:transform .2s,border-color .2s,color .2s}
.hud .reward b{font-weight:500}
.hud .reward.is-double{border-color:var(--mag);color:#ff8fe0;box-shadow:0 0 12px rgba(var(--mag-rgb),.35),inset 0 0 8px rgba(var(--mag-rgb),.15)}
.hud .timer{position:absolute;right:var(--side);top:calc(36px * var(--hk));width:calc(64px * var(--hk));height:calc(64px * var(--hk))}
.timer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring circle{fill:none;transform:rotate(-90deg);transform-origin:32px 32px}
.ring-track{stroke:rgba(255,255,255,.08);stroke-width:5}
.ring-glow,.ring-fg{stroke:url(#wb-ring);stroke-dasharray:175.93;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.ring-glow{stroke-width:10;opacity:.35;filter:blur(3px)}
.ring-fg{stroke-width:5}
.timer b{position:absolute;inset:0;display:grid;place-items:center;padding-top:1px;font:500 calc(22px * var(--hk))/1 var(--exo);font-variant-numeric:tabular-nums}
.game.is-urgent .ring-glow,.game.is-urgent .ring-fg{stroke:var(--mag)}
.game.is-urgent .timer b{color:var(--mag);text-shadow:0 0 10px rgba(var(--mag-rgb),.6)}
.game.is-urgent .timer{animation:p-pulse 1s ease-in-out infinite}

/* strip: lives and perk badges */
.strip{position:absolute;left:var(--side);right:var(--side);top:var(--hud-h);height:var(--strip-h);display:flex;align-items:center;justify-content:space-between;gap:10px}
.lives{display:flex;align-items:center;gap:3px;flex:none}
.gem{width:calc(var(--strip-h) * .72);height:calc(var(--strip-h) * .72);overflow:visible}
.gem .g-b{fill:var(--mag);stroke:#ffd0f2;stroke-width:.8}
.gem .g-f{fill:rgba(255,255,255,.28)}
.gem.is-on{filter:drop-shadow(0 0 4px rgba(var(--mag-rgb),.75))}
.gem.is-off .g-b{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.28);stroke-width:1.2}
.gem.is-off .g-f{fill:none}
.gem.is-breaking{animation:p-gem-break .9s ease-out forwards}
.badges{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;overflow:hidden}
.badges>span{display:block;flex:none}
.badge{position:relative;display:grid;place-items:center;width:calc(var(--strip-h) * .92);height:calc(var(--strip-h) * .92);padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;background:radial-gradient(circle at 35% 30%,rgba(var(--rc-rgb),.5),rgba(var(--rc-rgb),.1) 70%);box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.85),0 0 8px rgba(var(--rc-rgb),.35)}
.badge::before{content:"";position:absolute;inset:-6px -2px}
.badge .pglyph{width:62%;height:62%;stroke-width:2}
.badge sup{position:absolute;right:-4px;bottom:-4px;min-width:13px;height:13px;padding:0 3px;border-radius:7px;background:#0b0f30;box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.9);font:700 9px/13px var(--exo);color:#fff;text-align:center}
.badge::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),1),0 0 12px rgba(var(--rc-rgb),.7);opacity:0;pointer-events:none}
.badge.is-once::after{animation:p-glow 2s ease-in-out infinite}
.badge.is-wait{opacity:.7;box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.85);background:transparent}
.badge.is-new{animation:p-badge-in .6s cubic-bezier(.2,.8,.3,1) both}

/* ---- the glass stack ---- */
.column{position:relative;flex:none;width:var(--col-w,330px);margin-top:var(--g1);padding:var(--col-pad) 7px;border-radius:18px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));box-shadow:inset 0 -20px 30px -20px rgba(var(--cyan-rgb),.25),inset 0 1px 0 rgba(255,255,255,.08);z-index:1}
.column::after{content:"";position:absolute;inset:-1px;border-radius:18px;border:1px solid rgba(var(--ec,var(--cyan-rgb)),.9);box-shadow:inset 0 -20px 30px -20px rgba(var(--ec,var(--cyan-rgb)),.5),0 0 22px rgba(var(--ec,var(--cyan-rgb)),.45);opacity:0;pointer-events:none}
.game.fx-blast .column::after{animation:p-edge .5s ease-out both}
.game.fx-lost .column::after{--ec:var(--mag-rgb);animation:p-edge 1s ease-out both}
.stack{display:flex;flex-direction:column-reverse;gap:var(--row-gap,3px)}
.row{position:relative;height:var(--row-h,38px);display:grid;grid-template-columns:repeat(5,1fr);column-gap:calc(6px * var(--k,1));align-items:center}
.cell{position:relative;height:calc(var(--row-h,38px) - 2px)}
.face{position:absolute;inset:0;border-radius:8px;display:grid;place-items:center;padding-top:1px;font:600 calc(var(--row-h,38px) * .68)/1 var(--exo);color:var(--ink)}
/* closed crystal */
.row:not(.is-open) .face{background:linear-gradient(135deg,var(--cr-a) 0%,var(--cr-b) 50%,var(--cr-c) 100%);box-shadow:inset 0 0 0 1px rgba(90,95,255,.2),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.35)}
.row:not(.is-open) .face::before{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.04) 28%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 58%,rgba(120,130,255,.14) 72%,rgba(255,255,255,0) 100%),linear-gradient(62deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.14) 49.5%,rgba(255,255,255,.06) 50.5%,rgba(255,255,255,0) 68%)}
.row:not(.is-open) .face::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 12px var(--cr-glow);opacity:.35;animation:p-breathe 2s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms)}
/* the next block heats up in the last seconds */
.game.is-urgent .row.is-next .face{box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.8),0 0 12px rgba(var(--cyan-rgb),.35)}
.game.is-urgent .row.is-next .face::after{box-shadow:inset 0 0 14px var(--cyan);animation-name:p-breathe-hot;animation-duration:1s}
.spark{position:absolute;left:calc(10% + var(--k) * 26%);bottom:16px;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px var(--cyan);opacity:0;pointer-events:none}
.game.is-hot .row.is-next .spark{animation:p-rise 1.2s ease-out infinite;animation-delay:calc(var(--k) * .3s)}
/* locked slot: an empty glass socket a perk can fill */
.row.is-locked .face{background:rgba(255,255,255,.022);box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.035)}
.row.is-locked .face::before,.row.is-locked .face::after{display:none}
.lock{display:none;position:absolute;left:50%;top:50%;width:calc(var(--row-h) * .44);height:calc(var(--row-h) * .44);transform:translate(-50%,-50%);fill:none;stroke:rgba(200,210,255,.4);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.row.is-lock-first .lock{display:block}
.row.is-gone .face{opacity:0}
/* open block */
.row.is-open .face::before{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%)}
.face[data-m=g]{background:var(--g);color:var(--ink-g);box-shadow:0 0 14px rgba(var(--g-rgb),.55)}
.face[data-m=y]{background:var(--y);color:var(--ink-y);box-shadow:0 0 14px rgba(var(--y-rgb),.55)}
.face[data-m=x]{background:var(--x);color:var(--ink-x);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.face[data-m=x]::before{opacity:.4}

/* shards and sparks: only while a block opens or blasts */
.sh{display:none;position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,var(--cr-a) 0%,var(--cr-b) 50%,var(--cr-c) 100%);box-shadow:inset 0 0 0 1px rgba(90,95,255,.3),inset 0 0 10px rgba(74,79,208,.6);opacity:0;pointer-events:none}
.sh0{clip-path:polygon(0 0,100% 0,50% 50%);--dx:0px;--dy:-18px;--r:-8deg}
.sh1{clip-path:polygon(100% 0,100% 100%,50% 50%);--dx:18px;--dy:0px;--r:10deg}
.sh2{clip-path:polygon(100% 100%,0 100%,50% 50%);--dx:0px;--dy:16px;--r:6deg}
.sh3{clip-path:polygon(0 100%,0 0,50% 50%);--dx:-16px;--dy:0px;--r:-10deg}
.dot{display:none;position:absolute;left:calc(14px + var(--k) * 14px);top:40%;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px var(--cyan);opacity:0;pointer-events:none}
.veil{position:absolute;left:-4px;right:-4px;top:-3px;bottom:-3px;border-radius:10px;background:#fff;opacity:0;pointer-events:none}
.wave{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1px solid var(--cyan);box-shadow:0 0 8px rgba(var(--cyan-rgb),.7),inset 0 0 8px rgba(var(--cyan-rgb),.5);opacity:0;transform:scale(0);pointer-events:none}
/* opening: flash, shards, ring */
.row.is-flip .veil{animation:p-veil .25s ease-out forwards}
.row.is-flip .wave{animation:p-wave .6s ease-out .05s forwards}
.row.is-flip .sh{display:block;animation:p-shard .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--c) * 30ms + 40ms)}
.row.is-flip .face{animation:p-grow .55s ease-out both;animation-delay:calc(var(--c) * 30ms + 60ms)}
/* blast: rows crack as the wave passes */
.row.is-boom .face{animation:p-vanish .01s linear forwards;animation-delay:var(--d)}
.row.is-boom .sh{display:block;animation:p-shard .45s ease-out forwards;animation-delay:calc(var(--d) + var(--c) * 15ms)}
.row.is-boom .dot{display:block;animation:p-dot .7s ease-out forwards;animation-delay:calc(var(--d) + var(--c) * 15ms + var(--k) * 40ms)}
/* refill: crystals appear top to bottom */
.game.fx-refill .row{animation:p-appear .3s ease-out backwards;animation-delay:calc((9 - var(--i)) * 40ms)}
.row.is-unlock .face{animation:p-unlock 1.2s cubic-bezier(.2,.8,.3,1) both}
/* lost: the stack goes dim under a magenta edge */
.game.fx-lost .row.is-open .face{animation:p-dim 1s ease-out both}
/* shield */
.ward{display:none;position:absolute;left:-5px;right:-5px;top:-4px;bottom:-4px;border-radius:12px;border:1.5px solid var(--cyan);background:linear-gradient(90deg,transparent,rgba(var(--cyan-rgb),.3),transparent);box-shadow:0 0 16px rgba(var(--cyan-rgb),.6),inset 0 0 12px rgba(var(--cyan-rgb),.4);pointer-events:none}
.row.is-warded .ward{display:block;animation:p-ward .9s ease-out forwards}

/* fx layer: shockwave, flying points, round banner */
.g-fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.shock{position:absolute;left:var(--ex,50%);top:var(--ey,66%);width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:2px solid var(--cyan);box-shadow:0 0 18px 2px rgba(var(--cyan-rgb),.6),inset 0 0 18px 2px rgba(var(--cyan-rgb),.4);opacity:0;transform:scale(0)}
.shock-b{border-width:1px;border-color:var(--mag);box-shadow:0 0 12px rgba(var(--mag-rgb),.6)}
.game.fx-blast .shock{animation:p-shock .7s ease-out both}
.game.fx-blast .shock-b{animation-delay:.12s;animation-duration:.8s}
.plus{position:absolute;left:var(--px,50%);top:var(--py,40%);width:220px;margin:-24px 0 0 -110px;text-align:center;font:600 46px/1 var(--exo);color:#fff;text-shadow:0 0 16px var(--cyan),0 0 32px rgba(var(--cyan-rgb),.8);opacity:0;white-space:nowrap}
.game.fx-blast .plus{animation:p-fly 1s linear .05s forwards}
.round-flash{position:absolute;left:var(--rx,50%);top:var(--ry,40%);width:260px;margin:-16px 0 0 -130px;text-align:center;font:400 22px/32px var(--mich);letter-spacing:.3em;padding-left:.3em;color:#fff;text-transform:uppercase;text-shadow:0 0 14px rgba(var(--cyan-rgb),.9),0 0 30px rgba(var(--mag-rgb),.5);opacity:0;white-space:nowrap}
.game.fx-round .round-flash{animation:p-round 1.25s ease-out both}

/* ---- the input row ---- */
.entry{position:relative;flex:none;display:grid;grid-template-columns:repeat(5,var(--entry-w,56px));gap:calc(8px * var(--k,1));margin-top:var(--g2);border-radius:12px;box-shadow:0 8px 24px -8px rgba(var(--cyan-rgb),.4);z-index:2}
.ecell{position:relative;height:var(--entry-h,56px);border-radius:10px;display:grid;place-items:center;font:600 calc(var(--entry-h,56px) * .6)/1 var(--exo);color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.14);transition:background-color .15s,box-shadow .15s}
.ecell .ch{padding-top:2px;font-weight:600}
.ecell.is-filled{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07))}
.ecell.is-typed{animation:p-pop .2s ease-out}
.ecell[data-ghost]::after{content:attr(data-ghost);position:absolute;inset:0;display:grid;place-items:center;padding-top:2px;color:rgba(var(--g-rgb),.62);text-shadow:0 0 12px rgba(var(--g-rgb),.7);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.45)}
.cur{display:none;position:absolute;left:50%;top:18%;width:2px;height:64%;margin-left:-1px;border-radius:1px;background:var(--cyan);box-shadow:0 0 8px 1px rgba(var(--cyan-rgb),.8)}
.ecell.is-cur .cur{display:block;animation:p-blink 1s steps(1) infinite}
.ecell[data-ghost] .cur{left:16%}
.entry.is-win .ecell{background:var(--g);color:var(--ink-g);box-shadow:0 0 16px rgba(var(--g-rgb),.6),inset 0 1px 0 rgba(255,255,255,.3);animation:p-pop .3s ease-out backwards;animation-delay:calc(var(--c) * 40ms)}
.entry.is-win .cur,.entry.is-win .ecell::after{display:none}
.entry.is-shake{animation:p-shake .42s cubic-bezier(.36,.07,.19,.97) both}
.entry.is-shake .ecell{box-shadow:inset 0 0 0 1px rgba(var(--mag-rgb),.85),0 0 12px rgba(var(--mag-rgb),.4)}
.entry.is-sent .ch{animation:p-send .23s ease-in forwards;animation-delay:calc(var(--c) * 0ms)}

/* ---- glass keyboard ---- */
.kb{flex:none;display:flex;flex-direction:column;gap:var(--kb-gap,10px);width:100%;margin-top:var(--g3);z-index:2}
.kb-row{display:flex;justify-content:center;gap:3px}
.key{display:grid;place-items:center;flex:none;width:var(--key-w,32px);height:var(--key-h,56px);padding:0;border:0;border-radius:8px;color:var(--key-ink);font:600 calc(var(--key-w,32px) * .56)/1 var(--exo);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.1);cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s,transform .08s;touch-action:manipulation}
.key:active,.key.is-press{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 12px rgba(var(--cyan-rgb),.35);transform:translateY(1px)}
.key.is-wide{width:calc(var(--key-w,32px) * 1.5);font-size:calc(var(--key-w,32px) * .36);letter-spacing:.04em}
.key.is-enter{box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.7),0 0 8px rgba(var(--cyan-rgb),.2);color:var(--cyan)}
.key.is-back{box-shadow:inset 0 0 0 1px rgba(var(--mag-rgb),.7),0 0 8px rgba(var(--mag-rgb),.2);color:var(--mag)}
.key.is-back .ico{width:calc(var(--key-w,32px) * .66);height:calc(var(--key-w,32px) * .66);stroke-width:2}
.key[data-m=g]{background:var(--g);box-shadow:0 0 10px rgba(var(--g-rgb),.45),inset 0 1px 0 rgba(255,255,255,.25);color:var(--ink-g)}
.key[data-m=y]{background:var(--y);box-shadow:0 0 10px rgba(var(--y-rgb),.45),inset 0 1px 0 rgba(255,255,255,.35);color:var(--ink-y)}
.key[data-m=x]{background:var(--x);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);color:rgba(223,230,255,.62)}

/* ---- pause: the stack and the hints are hidden ---- */
.game.is-paused .stack,.game.is-paused .entry,.game.is-paused .kb,.game.is-held .stack,.game.is-held .entry,.game.is-held .kb{visibility:hidden}
.game.is-paused .column,.game.is-held .column{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}

/* ---- overlays between rounds ---- */
.g-ov{position:absolute;left:50%;width:var(--fw,390px);transform:translateX(-50%);top:calc(var(--safe-t,0px) + var(--slack,0px) * .3 + var(--hud-h) + var(--strip-h));bottom:0;z-index:6;display:none}
.game.has-ov .g-ov{display:block}
.game.ov-perk .stack,.game.ov-lost .stack{opacity:.2;transition:opacity .3s}
.game.ov-lost .hud .reward,.game.ov-over .hud .reward,.game.ov-perk .hud .timer,.game.ov-lost .hud .timer,.game.ov-over .hud .timer{opacity:.45;transition:opacity .3s}
.game.ov-perk .entry,.game.ov-perk .kb,.game.ov-lost .entry,.game.ov-lost .kb,.game.ov-over .entry,.game.ov-over .kb,.game.ov-over .column{opacity:.16;transition:opacity .3s;pointer-events:none}
.ov-kicker{margin:0;font:600 12px/1.3 var(--exo);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);text-align:center}
.ov-hint{margin:12px 0 0;font-size:13px;color:var(--txt3);text-align:center}
@media (pointer:coarse){.ov-hint,.pc-key{display:none}}

/* perk choice */
.perk-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 16px calc(var(--pb,12px) + 8px);animation:p-fade .3s ease-out both}
.perk-ov h2{margin:4px 0 16px;text-align:center;font:600 26px/1.2 var(--exo);text-shadow:0 0 18px rgba(var(--cyan-rgb),.45)}
.pcards{display:grid;gap:12px}
.pcard{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:86px;padding:12px 16px 12px 12px;border:0;border-radius:18px;text-align:start;color:var(--ink);cursor:pointer;background:linear-gradient(135deg,rgba(42,46,122,.92),rgba(21,23,63,.95));box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.6),0 0 22px rgba(var(--rc-rgb),.18),inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.35);overflow:hidden;animation:p-card-in .55s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(var(--n) * 90ms + 80ms);transition:transform .15s,box-shadow .15s}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 60%);transform:translateX(-110%);animation:p-glint 1.1s ease-out forwards;animation-delay:calc(var(--n) * 90ms + 420ms)}
.pcard:hover,.pcard:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--rc),0 0 28px rgba(var(--rc-rgb),.4),inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px rgba(0,0,0,.4)}
.pcard:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pcard.r-epic::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(var(--mag-rgb),.95),inset 0 0 26px rgba(var(--mag-rgb),.3);opacity:0;animation:p-glow 2.4s ease-in-out 1s infinite;pointer-events:none}
.pc-txt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pc-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pc-name{font:600 18px/1.2 var(--exo)}
.pc-desc{font:400 14px/1.35 var(--exo);color:var(--txt2);text-wrap:pretty}
.pc-key{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font:600 12px/1 var(--exo);color:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pcard.is-picked{animation:p-pick .55s ease-out forwards}
.pcard.is-dropped{animation:p-drop .35s ease-in forwards}

/* round lost */
.lost-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 14px calc(var(--pb,12px) + 8px);animation:p-fade .3s ease-out both}
.lost-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:24px 16px 20px;text-align:center;background:linear-gradient(180deg,rgba(34,30,96,.95),rgba(13,12,44,.97));box-shadow:inset 0 0 0 1px rgba(var(--mag-rgb),.4),inset 0 1px 0 rgba(255,255,255,.14),0 22px 50px rgba(0,0,0,.45),0 0 44px rgba(var(--mag-rgb),.14);animation:p-rise-in .45s cubic-bezier(.2,.8,.3,1) both}
.lost-ov h2{margin:0 0 6px;font:600 26px/1.2 var(--exo);color:#ffd2f2;text-shadow:0 0 18px rgba(var(--mag-rgb),.6)}
.lost-ov .ov-kicker{color:var(--txt2)}
.answer{display:grid;grid-template-columns:repeat(5,52px);gap:8px;margin:4px 0;direction:ltr}
.ac{display:grid;place-items:center;height:56px;border-radius:12px;font:600 32px/1 var(--exo);color:var(--ink-g);background:var(--g);box-shadow:0 0 18px rgba(var(--g-rgb),.6),inset 0 1px 0 rgba(255,255,255,.3);animation:p-ans .5s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(var(--c) * 90ms + 150ms)}
.lost-mean{max-width:330px;margin:4px 0 0;color:var(--txt2);font-size:15px}
.lost-mean .pos{margin-inline-end:6px;font-style:italic;color:var(--cyan)}
.lost-life{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0 0;color:var(--ink);font-weight:600}
.ll-gem .gem{width:22px;height:22px}
.gem.is-broken .g-b{fill:rgba(var(--mag-rgb),.25);stroke:var(--mag)}
.gem.is-broken{filter:drop-shadow(0 0 6px rgba(var(--mag-rgb),.7));animation:p-gem-pulse 1.4s ease-in-out infinite}
.ll-sep{width:4px;height:4px;border-radius:50%;background:var(--txt3)}
.lost-ov .acts{margin-top:14px}
.lost-ov .btn-go,.pause-card .btn-go{min-width:200px;min-height:54px;font-size:18px}

/* run over */
.over-ov{position:absolute;inset:0;overflow-y:auto;padding:4px 14px calc(var(--pb,12px) + 14px);overscroll-behavior:contain}
.over-card{text-align:center;padding:24px 18px 20px;background:linear-gradient(180deg,rgba(30,36,100,.95),rgba(11,14,46,.97));animation:p-rise-in .5s cubic-bezier(.2,.8,.3,1) both}
.over-card h2{margin:0;font:600 24px/1.2 var(--exo)}
.over-score{display:flex;flex-direction:column;align-items:center;margin:10px 0 2px}
.os-num{font:300 64px/1 var(--exo);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(var(--cyan-rgb),.55)}
.os-lbl{font:600 12px/1.6 var(--exo);letter-spacing:.2em;text-transform:uppercase;color:var(--txt3)}
.over-best{position:relative;display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;padding:5px 14px;border-radius:999px;color:var(--txt2);box-shadow:inset 0 0 0 1px rgba(var(--y-rgb),.35)}
.over-best .ico{width:18px;height:18px;color:var(--y)}
.over-best.is-new{color:#1b1500;background:var(--y);box-shadow:0 0 22px rgba(var(--y-rgb),.55);font-weight:700}
.over-best.is-new::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 34px rgba(var(--y-rgb),.8);opacity:0;animation:p-glow 1.6s ease-in-out .6s infinite;pointer-events:none}
.over-best.is-new .ico{color:#1b1500}
.over-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px}
.over-stats div{padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.over-stats dt{font-size:12px;line-height:1.25;color:var(--txt3)}
.over-stats dd{margin:4px 0 0;font:600 22px/1 var(--exo);font-variant-numeric:tabular-nums}
.over-card h3{margin:14px 0 8px;font:600 12px/1.3 var(--exo);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.wchips,.pchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.wchip{padding:5px 10px;border-radius:8px;font:600 14px/1 var(--exo);letter-spacing:.06em;color:var(--ink-g);background:var(--g);box-shadow:0 0 10px rgba(var(--g-rgb),.4);animation:p-ans .4s ease-out backwards;animation-delay:calc(var(--n) * 50ms + 400ms)}
.pchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;font-size:14px;box-shadow:inset 0 0 0 1px rgba(var(--rc-rgb),.6);color:var(--ink)}
.pchip .pglyph{width:18px;height:18px;color:var(--rc)}
.wchips .none,.pchips .none{color:var(--txt3);font-size:14px}
.over-card .acts{margin-top:20px}
.over-card .acts .btn-go{flex-basis:100%;min-height:54px;font-size:18px}

/* pause */
.pause-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 22px calc(var(--pb,12px) + 30px);animation:p-fade .2s ease-out both}
.pause-card{width:100%;max-width:340px;text-align:center}
.pause-card h2{margin:0;font:600 26px/1.2 var(--exo)}
.pause-meta{margin:6px 0 0;color:var(--txt2)}
.pause-card .acts{margin-top:18px}

/* loading */
.game.is-loading .stack{opacity:.4}
.load-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;color:var(--txt2)}

/* =====================================================================
   motion
   ===================================================================== */
@keyframes p-hue{to{opacity:1}}
@keyframes p-drift{to{transform:translateY(-211px)}}
@keyframes p-flash{0%{opacity:0}30%{opacity:.5}100%{opacity:0}}
@keyframes p-edge{0%,55%{opacity:1}100%{opacity:0}}
@keyframes p-glow{50%{opacity:1}}
@keyframes p-breathe{0%,100%{opacity:.35}50%{opacity:.6}}
@keyframes p-breathe-hot{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes p-rise{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
@keyframes p-veil{from{opacity:.9}to{opacity:0}}
@keyframes p-wave{0%{transform:scale(0);opacity:.8}100%{transform:scale(3);opacity:0}}
@keyframes p-shard{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.4)}}
@keyframes p-grow{0%{transform:scale(.9);filter:brightness(1.8)}45%{transform:scale(1.03);filter:brightness(1.6)}100%{transform:none;filter:brightness(1)}}
@keyframes p-vanish{to{opacity:0}}
@keyframes p-dot{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--ax),var(--ay))}}
@keyframes p-shock{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes p-fly{
  0%{opacity:0;transform:translate(0,0) scale(1.4);animation-timing-function:ease-out}
  12%{opacity:1;transform:translate(0,0) scale(1.2);animation-timing-function:ease-in-out}
  32%{opacity:1;transform:translate(0,0) scale(1);animation-timing-function:cubic-bezier(.5,0,.3,1)}
  86%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(.55)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.4)}
}
@keyframes p-score{30%{text-shadow:0 0 22px rgba(var(--cyan-rgb),.95)}100%{text-shadow:0 0 0 transparent}}
@keyframes p-pop{50%{transform:scale(1.12)}}
@keyframes p-blink{50%{opacity:0}}
@keyframes p-pulse{50%{transform:scale(1.06)}}
@keyframes p-appear{from{opacity:0;transform:scale(1.1)}}
@keyframes p-fade{from{opacity:0}}
@keyframes p-glint{to{transform:translateX(110%)}}
@keyframes p-rise-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes p-unlock{0%{opacity:0;transform:scale(.6);box-shadow:0 0 0 rgba(var(--cyan-rgb),0)}40%{opacity:1;transform:scale(1.08);box-shadow:inset 0 0 0 1.5px var(--cyan),0 0 22px rgba(var(--cyan-rgb),.8)}100%{transform:none}}
@keyframes p-dim{to{filter:saturate(.35) brightness(.6)}}
@keyframes p-ward{0%{opacity:0;transform:scaleX(.7)}25%{opacity:1;transform:scaleX(1.02)}100%{opacity:0;transform:scaleX(1.08)}}
@keyframes p-round{0%{opacity:0;transform:scale(.8);letter-spacing:.1em}25%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.08);letter-spacing:.4em}}
@keyframes p-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes p-send{to{opacity:0;transform:translateY(-22px) scale(.8)}}
@keyframes p-card-in{0%{opacity:0;transform:translateY(26px) scale(.92);filter:brightness(2)}60%{opacity:1;filter:brightness(1.25)}100%{transform:none;filter:none}}
@keyframes p-pick{0%{transform:none}35%{transform:scale(1.05);box-shadow:inset 0 0 0 2px var(--rc),0 0 44px rgba(var(--rc-rgb),.8);filter:brightness(1.4)}100%{transform:scale(1.02) translateY(-30px);opacity:0;filter:brightness(2)}}
@keyframes p-drop{to{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes p-ans{0%{opacity:0;transform:scale(.6) translateY(10px);filter:brightness(2)}100%{opacity:1;transform:none;filter:none}}
@keyframes p-gem-break{0%{transform:none;opacity:1}30%{transform:scale(1.5);filter:drop-shadow(0 0 10px var(--mag)) brightness(2)}100%{transform:scale(.4) rotate(25deg);opacity:0}}
@keyframes p-gem-pulse{50%{transform:scale(1.12)}}
@keyframes p-gem-in{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
@keyframes p-badge-in{0%{opacity:0;transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:none}}
@keyframes p-hero-wave{0%,62%{transform:scale(0);opacity:0}64%{opacity:.8}100%{transform:scale(2.6);opacity:0}}

/* no motion: only the change of state */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .deco .stars,.deco .bg-alt{animation:none!important}
  .sh,.dot,.wave,.veil,.spark,.shock,.plus,.hs-wave,.round-flash,.card-glint,.pcard::after{display:none!important}
}

/* =====================================================================
   desktop: the column in the middle, the deep all around
   ===================================================================== */
@media (min-width:1100px){
  .topbar{max-width:1000px;padding-top:24px}
  .hero{gap:14px}
  .hero-stack{width:240px;height:224px}
  .hc-cell{font-size:18px}
  .brand{font-size:32px}
  .brand .b2{font-size:48px}
  .tagline{font-size:18px;max-width:420px}
  .about{padding:24px 24px 80px}
  .about-in{max-width:1000px;grid-template-columns:1.25fr 1fr;align-items:start;gap:28px}
  .rules{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .rules .topbar{grid-column:1/-1}
  .rules-card{margin:0}
  .rules-go{grid-column:1/-1}
  .game .g-frame::after{content:"";position:absolute;left:-60px;right:-60px;top:0;bottom:0;z-index:-1;background:radial-gradient(60% 50% at 50% 55%,rgba(var(--cyan-rgb),.06),transparent 70%);pointer-events:none}
  .toast-wrap{top:14vh}
}