/* Block puzzle: the box on the page, the game screen, the jelly blocks, effects and sheets. Loaded on the block puzzle page only (with game-page.css).
   The look is its own: a bright candy daylight world, chunky "pressable" buttons, glossy jelly blocks. Colours come from the variables on .bp-box / .bp-app, one set per backdrop. */

/* ---------- colours: one set per backdrop ---------- */
.bp-box,.bp-app{
  --ink:#3f2b56;--ink2:#7d6a93;--card:#fff;--card2:#fbf6ff;--line:rgba(88,56,128,.14);--shade:63,43,86;
  --bg1:#fff8ef;--bg2:#ffdfd2;--bg3:#ffc2d4;--dot:176,112,150;
  --o1:rgba(255,226,140,.75);--o2:rgba(255,150,190,.6);--o3:rgba(150,205,255,.6);
  --panel:rgba(255,255,255,.72);--panel-edge:#fff;--cell:rgba(122,84,170,.10);--cell-in:rgba(86,50,140,.16);
  --a1:#ff7a96;--a2:#ff9d52;--ad:#d94b72;--ag:rgba(255,106,142,.5);--lip:rgba(217,75,114,.22);
}
.bp-app[data-theme=mint]{--bg1:#f3fff8;--bg2:#cbf5e3;--bg3:#a2e3d6;--dot:60,140,120;--o1:rgba(255,246,170,.7);--o2:rgba(140,230,200,.7);--o3:rgba(255,190,210,.55);--a1:#2fcf9f;--a2:#56d8a0;--ad:#169a76;--ag:rgba(47,207,159,.5);--lip:rgba(22,154,118,.22);--ink:#21463f;--ink2:#5b8a80}
.bp-app[data-theme=berry]{--bg1:#f7f5ff;--bg2:#dcd9ff;--bg3:#b9c6ff;--dot:100,100,200;--o1:rgba(255,200,230,.6);--o2:rgba(170,160,255,.7);--o3:rgba(150,220,255,.6);--a1:#8a78ff;--a2:#b27cff;--ad:#5f4bd6;--ag:rgba(138,120,255,.5);--lip:rgba(95,75,214,.22);--ink:#2f2b66;--ink2:#716ea8}
.bp-app[data-theme=night]{--ink:#f6f1ff;--ink2:#b3a7da;--card:#2b2160;--card2:#352a73;--line:rgba(255,255,255,.14);--shade:12,8,40;
  --bg1:#38297d;--bg2:#24195a;--bg3:#150f3a;--dot:200,180,255;--o1:rgba(255,130,190,.38);--o2:rgba(110,120,255,.45);--o3:rgba(255,190,110,.28);
  --panel:rgba(255,255,255,.09);--panel-edge:rgba(255,255,255,.2);--cell:rgba(255,255,255,.07);--cell-in:rgba(6,2,30,.5);--a1:#ff7fb0;--a2:#ffa45c;--ad:#d4467f;--ag:rgba(255,127,176,.5);--lip:rgba(0,0,0,.28)}

/* ---------- the jelly blocks, one set of colours per block ---------- */
.k0{--l:#ffc0da;--b:#ff5f9e;--d:#e03a82;--dd:rgba(150,10,70,.3);--sh:rgba(224,58,130,.5)}
.k1{--l:#cdbbff;--b:#9a78ff;--d:#7550e6;--dd:rgba(60,20,150,.3);--sh:rgba(117,80,230,.5)}
.k2{--l:#a8f3d8;--b:#35d49e;--d:#17ab7c;--dd:rgba(0,90,60,.28);--sh:rgba(23,171,124,.5)}
.k3{--l:#ffd1a3;--b:#ff9340;--d:#ee7416;--dd:rgba(150,60,0,.28);--sh:rgba(238,116,22,.5)}
.k4{--l:#b4e1ff;--b:#46aaff;--d:#2287ea;--dd:rgba(0,50,140,.28);--sh:rgba(34,135,234,.5)}
.k5{--l:#fff0a0;--b:#ffd02e;--d:#f0aa00;--dd:rgba(140,90,0,.28);--sh:rgba(240,170,0,.5)}
.k6{--l:#ffb4b8;--b:#ff5864;--d:#e0343f;--dd:rgba(150,0,20,.3);--sh:rgba(224,52,63,.5)}
.k7{--l:#bcc5ff;--b:#6f80ff;--d:#4a5ae6;--dd:rgba(20,30,150,.3);--sh:rgba(74,90,230,.5)}
.bp-c.f,.bk{position:relative;border-radius:calc(var(--u) * .3);
  background:radial-gradient(120% 80% at 30% 6%,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),linear-gradient(180deg,var(--l) 0%,var(--b) 52%,var(--d) 100%);
  box-shadow:inset 0 calc(var(--u) * .07) 0 rgba(255,255,255,.6),inset 0 calc(var(--u) * -.11) 0 var(--dd),inset 0 0 0 calc(var(--u) * .025) rgba(255,255,255,.2),0 calc(var(--u) * .08) calc(var(--u) * .14) var(--sh)}
.bp-c.f::before,.bk::before{content:"";position:absolute;left:13%;top:9%;width:52%;height:24%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.2));transform:rotate(-7deg);pointer-events:none}
.bp-c.f::after,.bk::after{content:"";position:absolute;right:15%;top:16%;width:11%;height:11%;border-radius:50%;background:rgba(255,255,255,.9);pointer-events:none}

/* ---------- the box on the page: a picture and a bar with the buttons, until someone plays ---------- */
.bp-box{position:relative;margin:0 0 6px;border-radius:30px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--bg1),var(--bg2));box-shadow:0 30px 56px -30px rgba(214,86,120,.55),0 0 0 1px rgba(200,120,150,.22)}
.bp-box>.bp-adslot{display:none}
.bp-poster{position:relative;width:100%;aspect-ratio:1200/630;overflow:hidden;background:#ffe3d6}
.bp-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-pmeta{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:99px;background:#fff;color:var(--ink);font:800 .88rem/1 var(--display);box-shadow:0 3px 0 rgba(217,75,114,.2),0 10px 18px -10px rgba(217,75,114,.55)}
.bp-pmeta[hidden]{display:none}
.bp-pmeta .ic{width:17px;height:17px;color:#f0aa00}
.bp-pbar{position:relative;display:flex;gap:12px;justify-content:center;padding:16px 20px 20px;background:linear-gradient(180deg,#fff9f3,#ffeede)}
.bp-box:not(.ready) .bp-pbar{visibility:hidden}
.bp-play{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:220px;padding:16px 26px 16px 22px;border:0;border-radius:20px;cursor:pointer;color:#fff;font:800 1.12rem/1 var(--display);letter-spacing:.01em;text-shadow:0 2px 0 rgba(150,30,70,.3);
  background:linear-gradient(180deg,#ff9bb0,var(--a1) 45%,#ff6a88);box-shadow:0 6px 0 var(--ad),0 18px 26px -10px var(--ag),inset 0 2px 0 rgba(255,255,255,.55);transition:transform .12s,box-shadow .12s}
.bp-play:hover{transform:translateY(-2px)}
.bp-play:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ad),0 6px 12px -6px var(--ag),inset 0 2px 0 rgba(255,255,255,.55)}
.bp-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bp-play .ic{width:22px;height:22px;flex:none}
.bp-play.alt{color:var(--ink);text-shadow:none;background:#fff;box-shadow:0 6px 0 rgba(88,56,128,.16),0 14px 22px -12px rgba(88,56,128,.4),inset 0 0 0 2px rgba(88,56,128,.1)}
.bp-play.alt:active{box-shadow:0 1px 0 rgba(88,56,128,.16),inset 0 0 0 2px rgba(88,56,128,.1)}
.bp-play.alt .ic{color:var(--a1)}
.bp-play .fl{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:3px 8px 3px 5px;border-radius:99px;background:linear-gradient(135deg,#ff9a56,#ff5f7e);color:#fff;font:800 .82rem/1 var(--display);font-style:normal}
.bp-play .fl[hidden]{display:none}
.bp-play .fl .ic{width:14px;height:14px;color:#fff3c4}
@media (min-width:821px){
  /* before the game the picture is kept short enough to show the buttons without scrolling (the art keeps its subject in the middle) */
  .bp-poster{max-height:max(340px,calc(100vh - 360px))}
  /* once the game is open the box grows to the height of the screen */
  .bp-box.on{height:min(calc(100vh - 36px),820px);min-height:600px}
}
@media (max-width:820px){
  .bp-box{border-radius:0;margin-inline:0}
  .bp-poster{aspect-ratio:390/330}
  .bp-poster>img{object-position:50% 50%}
  .bp-pbar{padding:14px var(--gut) 18px;gap:10px}
  .bp-play{flex:1 1 0;min-width:0;padding:15px 8px;gap:7px;font-size:.98rem;white-space:nowrap;border-radius:18px}
  .bp-play .ic{width:20px;height:20px}
  .bp-play .fl{position:absolute;top:-10px;right:8px;margin:0;box-shadow:0 4px 10px -3px rgba(150,70,0,.6)}
}

/* ---------- the game screen ---------- */
.bp-app{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);font-family:var(--display);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(circle at 1px 1px,rgba(var(--dot),.2) 1.3px,transparent 1.8px) 0 0/22px 22px,linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 58%,var(--bg3) 100%)}
.bp-app[hidden]{display:none}
.bp-app.full{position:fixed;inset:0;z-index:3000;height:100vh;height:100dvh;border-radius:0}
.bp-app.noad{padding-bottom:12px}
.bp-app.noad.full{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.bp-app:fullscreen{width:100%;height:100%}
.bp-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bp-orb{position:absolute;border-radius:50%;will-change:transform}
.bp-orb.o1{left:-20%;top:-12%;width:78%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o1),transparent);animation:bpDrift 24s ease-in-out infinite alternate}
.bp-orb.o2{right:-24%;top:30%;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o2),transparent);animation:bpDrift 30s ease-in-out -9s infinite alternate-reverse}
.bp-orb.o3{left:6%;bottom:-26%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o3),transparent);animation:bpDrift 27s ease-in-out -15s infinite alternate}
@keyframes bpDrift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(6%,5%,0) scale(1.12)}}
/* soap bubbles drifting up behind the board */
.bp-fl i{position:absolute;left:var(--l);top:105%;width:var(--s);height:var(--s);border-radius:50%;opacity:0;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.18) 48%,rgba(255,255,255,.05) 70%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75);animation:bpUp var(--t) linear var(--d) infinite}
.bp-app[data-theme=night] .bp-fl i{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0 12%,rgba(255,255,255,.1) 48%,rgba(255,255,255,.02) 70%)}
@keyframes bpUp{0%{top:105%;transform:translateX(0) scale(.7);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{top:-10%;transform:translateX(var(--w)) scale(1.05);opacity:0}}
@supports (container-type:size){.bp-fl{position:absolute;inset:0;container-type:size}.bp-fl i{top:0;will-change:transform;animation-name:bpUp2}}
@keyframes bpUp2{0%{transform:translate3d(0,105cqh,0) scale(.7);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{transform:translate3d(var(--w),-12cqh,0) scale(1.05);opacity:0}}
/* while a block is in the hand nothing in the background moves: all the work goes to the finger */
.bp-app.dragging .bp-orb,.bp-app.dragging .bp-fl i,.bp-app.dragging .bp-board.tight::after{animation-play-state:paused}

/* top bar: round white stickers, the title in the middle */
.bp-top{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 14px 4px}
.bp-app.full .bp-top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.bp-tl,.bp-tr{display:flex;align-items:center;gap:8px}
.bp-tr{justify-content:flex-end}
.bp-ib{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--lip),0 10px 16px -10px var(--ag);transition:transform .12s}
.bp-ib:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
.bp-ib:focus-visible,.bp-btn:focus-visible,.bp-row:focus-visible,.bp-th:focus-visible,.bp-slot:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.bp-ib .ic{width:20px;height:20px}
.bp-title{min-width:0;max-width:60vw;text-align:center;line-height:1.1}
.bp-title b{display:block;font:800 1.14rem/1.1 var(--display);letter-spacing:-.01em}
.bp-title small{display:block;margin-top:3px;font:800 .64rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.bp-app[data-theme=berry] .bp-title small,.bp-app[data-theme=mint] .bp-title small{color:var(--ad)}
.bp-fs,.bp-sndb{display:none}
.bp-row.mobonly{display:flex}
@media (min-width:821px){.bp-fs,.bp-sndb{display:grid}.bp-row.mobonly{display:none}.bp-top{padding:14px 18px 6px}.bp-ib{width:44px;height:44px}.bp-hud{width:100%;max-width:780px;margin-inline:auto}}

/* the numbers */
.bp-hud{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px;padding:2px 16px 4px}
.bp-best{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 9px;border-radius:99px;background:var(--card);box-shadow:0 3px 0 var(--lip);font:800 .95rem/1 var(--display);font-variant-numeric:tabular-nums}
.bp-best .ic{width:18px;height:18px;color:#f0aa00}
.bp-best.hot{background:linear-gradient(135deg,#fff3b0,#ffd02e);color:#6a4300;box-shadow:0 3px 0 #d99a00,0 0 18px 2px rgba(255,208,46,.7)}
.bp-score{text-align:center;line-height:1}
.bp-score small{display:block;font:800 .66rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.bp-score b{display:block;margin-top:3px;font:800 2.55rem/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 rgba(255,255,255,.65)}
.bp-app[data-theme=night] .bp-score b{text-shadow:0 3px 0 rgba(0,0,0,.35)}
.bp-combo{justify-self:end;display:inline-flex;align-items:center;gap:4px;padding:7px 13px 7px 9px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#ffa02e,#ff4f7a);box-shadow:0 3px 0 #c93a5a,0 10px 18px -8px rgba(255,79,122,.8);font:800 .95rem/1 var(--display);opacity:0;transform:scale(.5) translateY(6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.bp-combo.on{opacity:1;transform:none}
.bp-combo .ic{width:16px;height:16px;color:#fff3c4}
.bp-combo small{font:700 .66rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;opacity:.9}

/* the board and the three blocks under it */
.bp-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:4px 0 6px}
.bp-wrap{flex:none;width:var(--bw)}
.bp-board{--u:var(--cs);position:relative;display:grid;grid-template-columns:repeat(8,var(--cs));grid-template-rows:repeat(8,var(--cs));gap:var(--gp);padding:var(--fr);width:var(--bw);border-radius:calc(var(--cs) * .62);
  background:linear-gradient(180deg,rgba(255,255,255,.9),var(--panel));
  box-shadow:0 calc(var(--cs) * .16) 0 var(--lip),0 calc(var(--cs) * .6) calc(var(--cs) * .9) calc(var(--cs) * -.4) var(--ag),inset 0 0 0 calc(var(--cs) * .06) var(--panel-edge),inset 0 calc(var(--cs) * .08) 0 rgba(255,255,255,.9)}
.bp-app[data-theme=night] .bp-board{background:linear-gradient(180deg,rgba(255,255,255,.16),var(--panel))}
.bp-c{display:block;border-radius:calc(var(--cs) * .28);background:var(--cell);box-shadow:inset 0 calc(var(--cs) * .05) calc(var(--cs) * .1) var(--cell-in)}
.bp-c.f{background-color:transparent}
/* the preview layer over the board: the block that would land, and a glowing frame round each line that would go */
.bp-ov{position:absolute;inset:0;pointer-events:none;z-index:2}
.bp-lb{position:absolute;left:0;top:0;opacity:0;border-radius:calc(var(--cs) * .3);background:rgba(255,255,255,.3);box-shadow:0 0 calc(var(--cs) * .34) var(--hc,#fff),inset 0 0 0 calc(var(--cs) * .07) rgba(255,255,255,.9)}
.bp-lb.on{opacity:1;will-change:opacity;animation:bpLb .55s ease-in-out infinite alternate}
@keyframes bpLb{from{opacity:.62}to{opacity:1}}
.bp-lb.r{width:calc(var(--bw) - 2 * var(--fr));height:var(--cs);transform:translate3d(var(--fr),calc(var(--fr) + var(--i) * (var(--cs) + var(--gp))),0)}
.bp-lb.c{width:var(--cs);height:calc(var(--bw) - 2 * var(--fr));transform:translate3d(calc(var(--fr) + var(--i) * (var(--cs) + var(--gp))),var(--fr),0)}
.bp-pvp{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;--pg:var(--gp)}
.bp-pvp.on{opacity:.55}
.bp-pvp.hint{animation:bpHint .8s ease-in-out infinite alternate}
@keyframes bpHint{from{opacity:.4}to{opacity:.95}}
.bp-c.zap{z-index:3}
.bp-board.tight::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;will-change:opacity;box-shadow:0 0 calc(var(--cs) * .9) calc(var(--cs) * .1) rgba(255,90,110,.55);animation:bpTight 1.8s ease-in-out infinite}
@keyframes bpTight{50%{opacity:1}}
.bp-board.bad{outline:3px solid #ff5870;outline-offset:3px}
.bp-board.over .bp-c{pointer-events:none}

.bp-tray{flex:none;width:var(--bw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--cs) * .1);padding:calc(var(--cs) * .1);border-radius:calc(var(--cs) * .5);touch-action:none;
  background:var(--panel);box-shadow:0 calc(var(--cs) * .1) 0 var(--lip),inset 0 2px 0 rgba(255,255,255,.7)}
.bp-slot{all:unset;box-sizing:border-box;display:grid;place-items:center;height:calc(5 * (var(--cs) + var(--gp)) * var(--ts));border-radius:calc(var(--cs) * .38);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;--u:calc(var(--cs) * var(--ts));--pg:calc(var(--gp) * var(--ts))}
.bp-slot .bp-piece{transition:transform .18s cubic-bezier(.3,1.6,.5,1),opacity .15s,filter .2s}
@media (hover:hover){.bp-slot:not(.empty):not(.lifted):hover .bp-piece{transform:scale(1.08)}}
.bp-slot.lifted .bp-piece{opacity:.22;transform:scale(.9)}
.bp-slot.nofit .bp-piece{filter:grayscale(.85) brightness(1.08);opacity:.5}
.bp-slot.empty{cursor:default}
.bp-slot.hint .bp-piece{animation:bpWob .7s ease-in-out infinite}
@keyframes bpWob{0%,100%{transform:scale(1)}50%{transform:scale(1.14) rotate(-3deg)}}
.bp-piece{display:grid;grid-template-columns:repeat(var(--w),var(--u));grid-template-rows:repeat(var(--h),var(--u));gap:var(--pg)}
.bp-ghost{position:fixed;left:0;top:0;z-index:5000;pointer-events:none;will-change:transform;opacity:0;--pg:calc(var(--u) * .07)}
.bp-ghost.on{opacity:1}
.bp-ghost .bk{box-shadow:inset 0 calc(var(--u) * .07) 0 rgba(255,255,255,.6),inset 0 calc(var(--u) * -.11) 0 var(--dd),inset 0 0 0 calc(var(--u) * .025) rgba(255,255,255,.2),0 calc(var(--u) * .08) calc(var(--u) * .14) var(--sh),0 calc(var(--u) * .36) calc(var(--u) * .34) rgba(40,10,70,.3)}
.bp-fx{position:absolute;inset:0;z-index:40;pointer-events:none}

/* wide screens: the three blocks stand beside the board */
.bp-stage.side{flex-direction:row;gap:calc(var(--cs) * .7);padding-top:calc(4px + var(--tp,0px) + var(--mg,0px));padding-bottom:calc(6px + var(--mg,0px))}
.bp-stage.side .bp-tray{width:calc(5 * (var(--cs) + var(--gp)) * var(--ts) + var(--cs) * .5);grid-template-columns:1fr;grid-template-rows:repeat(3,auto);align-content:center}

/* effects */
.bp-sp{position:absolute;display:block;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.bp-rg{position:absolute;width:90px;height:90px;border-radius:50%;border:4px solid rgba(255,255,255,.95);box-shadow:0 0 22px rgba(255,255,255,.9),inset 0 0 18px rgba(255,255,255,.7)}
.bp-ft{position:absolute;white-space:nowrap;font:800 1.15rem/1 var(--display);color:#fff;-webkit-text-stroke:5px var(--ad);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.bp-ft.hot{font-size:1.5rem;color:#fff6c2;-webkit-text-stroke-color:#d9780a}
.bp-word{position:absolute;left:50%;top:40%;text-align:center;white-space:nowrap;line-height:1}
.bp-word b{display:block;font:900 2.4rem/1 var(--display);letter-spacing:.01em;color:#fff;-webkit-text-stroke:9px var(--ad);paint-order:stroke fill;text-shadow:0 5px 0 rgba(0,0,0,.2)}
.bp-word small{display:inline-block;margin-top:10px;padding:5px 12px;border-radius:99px;background:#fff;color:var(--ad);font:800 .8rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 0 var(--lip)}
.bp-word.gold b{color:#fff6c2;-webkit-text-stroke-color:#d9780a}
.bp-word.gold small{color:#b86a00}
.bp-toast{position:absolute;left:50%;top:6px;z-index:45;width:max-content;max-width:92%;padding:11px 18px;border-radius:99px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;text-align:center;background:var(--ink);color:var(--card);box-shadow:0 12px 22px -10px rgba(var(--shade),.7);font:800 .9rem/1.25 var(--display);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.bp-app[data-theme=night] .bp-toast{background:#fff;color:#2b2160}
.bp-toast.on{opacity:1;transform:translate(-50%,0)}
.bp-cfl{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.bp-cf{position:absolute;top:0;border-radius:2px}
.bp-cf.c1{border-radius:50%}
.bp-cf.c2{border-radius:60% 0 60% 0}
.bp-hand{position:absolute;z-index:44;width:54px;height:54px;margin:-10px 0 0 -16px;pointer-events:none;opacity:0;animation:bpHand 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 6px rgba(40,10,70,.35))}
.bp-hand .ic{width:100%;height:100%;fill:#fff;stroke:#3f2b56;stroke-width:1.5}
@keyframes bpHand{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}22%{transform:translate(0,0) scale(.88);opacity:1}72%{transform:translate(var(--dx),var(--dy)) scale(.88);opacity:1}86%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* the strip kept free for a wide banner (320x50 on phones, 728x90 on big screens) */
.bp-adslot{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:center;min-height:calc(54px + env(safe-area-inset-bottom,0px));padding:2px 0 env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.5);border-top:1px solid var(--line)}
.bp-app[data-theme=night] .bp-adslot{background:rgba(8,4,30,.4)}
.bp-adslot .ad{margin:0;padding:2px 0}
.bp-adslot .ad .lbl{color:var(--ink2);margin-bottom:2px}
.bp-adslot.prev::before{content:"Ad space \00b7  320 \00d7  50";font:800 .72rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border:1px dashed var(--ink2);border-radius:10px;padding:14px 22px}
@media (min-width:821px){.bp-adslot{min-height:100px}.bp-adslot.prev::before{content:"Ad space \00b7  728 \00d7  90";padding:30px 60px}}

/* sheets: game over, menu, backdrops, help */
.bp-sheet{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(var(--shade),.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .22s}
.bp-sheet[hidden]{display:none}
.bp-sheet.on{opacity:1}
.bp-card{position:relative;width:min(460px,100%);max-height:92%;overflow:auto;padding:30px 20px calc(22px + env(safe-area-inset-bottom,0px));border-radius:30px 30px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -18px 44px -18px rgba(var(--shade),.6);transform:translateY(46px) scale(.98);transition:transform .38s cubic-bezier(.2,1.25,.4,1);text-align:center}
.bp-card::before{content:"";position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:var(--line)}
.bp-sheet.on .bp-card{transform:none}
.bp-card h2{margin:0 0 4px;font:800 1.6rem/1.15 var(--display);color:var(--ink);letter-spacing:-.01em}
.bp-card .sub{margin:0 0 16px;color:var(--ink2);font-size:.92rem;line-height:1.45}
.bp-sh-x{position:absolute;right:12px;top:14px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--card2);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.bp-sh-x .ic{width:18px;height:18px}
@media (min-width:821px){.bp-sheet{align-items:center}.bp-card{border-radius:30px}.bp-card::before{display:none}}
.bp-sheet.is-win{align-items:center;padding:14px}
.bp-sheet.is-win .bp-card{border-radius:32px;overflow:hidden;padding-top:28px}
.bp-sheet.is-win .bp-card::before{display:none}
.bp-glow{position:absolute;left:50%;top:-80px;width:420px;height:300px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--ag),rgba(255,255,255,0) 72%);opacity:.7;pointer-events:none}
.bp-card .eyebrow{position:relative;margin:0 0 4px;font:800 .7rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--a1)}
.bp-app[data-theme=berry] .bp-card .eyebrow,.bp-app[data-theme=mint] .bp-card .eyebrow{color:var(--ad)}
.bp-final{position:relative;margin:8px 0 4px}
.bp-final small{display:block;font:800 .68rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.bp-final b{display:block;margin-top:2px;font:900 3.6rem/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--a2),var(--a1) 60%,var(--ad));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 var(--lip))}
.bp-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.bp-stats>div{padding:10px 4px;border-radius:18px;background:var(--card2);box-shadow:inset 0 0 0 1.5px var(--line)}
.bp-stats dt{font:800 .62rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.bp-stats dd{margin:6px 0 0;font:800 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.bp-nb{margin:10px 0 0;font:800 .78rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#d99a00}
.bp-streak{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:9px 16px 9px 12px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#ffa02e,#ff4f7a);box-shadow:0 3px 0 #c93a5a,0 10px 20px -10px rgba(255,79,122,.9)}
.bp-streak .ic{width:22px;height:22px;color:#fff3c4}
.bp-streak b{font:800 1.3rem/1 var(--display)}
.bp-streak span{font:700 .85rem/1 var(--display)}
.bp-soon{margin:10px 0 0;color:var(--ink2);font-size:.88rem}
.bp-soon b{font-variant-numeric:tabular-nums;color:var(--ink)}
.bp-unl{display:flex;align-items:center;gap:10px;margin:14px auto 0;padding:9px 14px 9px 9px;max-width:100%;border-radius:18px;background:var(--card2);box-shadow:inset 0 0 0 1.5px var(--line);font-size:.88rem;text-align:left}
.bp-unl i{flex:none;width:34px;height:34px;border-radius:11px;box-shadow:0 0 0 2px #fff,0 3px 8px -2px rgba(var(--shade),.4)}
.bp-btns{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.bp-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px 20px;border-radius:20px;border:0;cursor:pointer;color:var(--ink);font:800 1.02rem/1 var(--display);background:var(--card);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line);transition:transform .12s,box-shadow .12s}
.bp-btn:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px var(--line),0 0 0 var(--line)}
.bp-btn .ic{width:19px;height:19px}
.bp-btn.pri{color:#fff;text-shadow:0 2px 0 rgba(150,30,70,.3);background:linear-gradient(180deg,#ff9bb0,var(--a1) 45%,#ff6a88);box-shadow:0 5px 0 var(--ad),0 16px 24px -10px var(--ag),inset 0 2px 0 rgba(255,255,255,.55)}
.bp-app[data-theme=mint] .bp-btn.pri{background:linear-gradient(180deg,#6fe3bd,var(--a1) 50%,#22b98c);text-shadow:0 2px 0 rgba(0,70,50,.3)}
.bp-app[data-theme=berry] .bp-btn.pri{background:linear-gradient(180deg,#b2a6ff,var(--a1) 50%,#7360f0);text-shadow:0 2px 0 rgba(30,10,120,.3)}
.bp-btn.pri:active{box-shadow:0 1px 0 var(--ad),0 6px 12px -6px var(--ag),inset 0 2px 0 rgba(255,255,255,.55)}
.bp-btn.ghost{background:transparent;box-shadow:none;color:var(--ink2)}
.bp-btn.ghost:active{transform:none;opacity:.7}
.bp-btn.danger{color:#d4284a;box-shadow:inset 0 0 0 2px rgba(212,40,74,.4),0 4px 0 rgba(212,40,74,.18)}
.bp-menu{display:grid;gap:10px;margin-top:16px;text-align:left}
.bp-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px 11px 11px;border:0;border-radius:22px;cursor:pointer;color:var(--ink);text-align:left;background:var(--card2);box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 var(--line);transition:transform .12s,box-shadow .12s}
.bp-row:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--line),0 0 0 var(--line)}
.bp-row>.ic{flex:none;width:42px;height:42px;padding:10px;border-radius:15px;color:#fff;background:linear-gradient(160deg,var(--a2),var(--a1));box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.bp-row:nth-child(3n+2)>.ic{background:linear-gradient(160deg,#7fc6ff,#5f8bff)}
.bp-row:nth-child(3n)>.ic{background:linear-gradient(160deg,#7ae6c0,#2fc79a)}
.bp-row span{flex:1;min-width:0}
.bp-row b{display:block;font:800 1rem/1.2 var(--display)}
.bp-row small{display:block;margin-top:3px;color:var(--ink2);font:600 .8rem/1.25 var(--display)}
.bp-row .fl{display:inline-flex;align-items:center;gap:3px;padding:4px 9px 4px 6px;border-radius:99px;background:linear-gradient(135deg,#ffa02e,#ff4f7a);color:#fff;font:800 .85rem/1 var(--display);font-style:normal}
.bp-row .fl .ic{width:14px;height:14px;color:#fff3c4}
.bp-row.quiet{margin-top:6px;background:transparent;box-shadow:none;color:var(--ink2)}
.bp-row.quiet>.ic{background:var(--card2);color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--line)}
.bp-help{text-align:left;margin-top:12px}
.bp-help p{margin:0 0 10px;color:var(--ink);font-size:.95rem;line-height:1.5}
.bp-help b{color:var(--ad)}
.bp-app[data-theme=night] .bp-help b{color:#ffb0cc}
.bp-themes{display:grid;gap:10px;text-align:left}
.bp-th{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px 10px 10px;border:0;border-radius:22px;cursor:pointer;color:var(--ink);text-align:left;background:var(--card2);box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 var(--line)}
.bp-th i{flex:none;width:64px;height:64px;border-radius:18px;box-shadow:0 0 0 3px #fff,0 8px 14px -8px rgba(var(--shade),.6)}
.bp-th b{display:block;font:800 1.02rem/1.2 var(--display)}
.bp-th small{display:flex;align-items:center;gap:5px;margin-top:3px;color:var(--ink2);font:700 .82rem/1.2 var(--display)}
.bp-th small .ic{width:14px;height:14px}
.bp-th.cur{box-shadow:inset 0 0 0 2.5px var(--a1),0 3px 0 var(--lip)}
.bp-th.lock{opacity:.55;cursor:default}

@media (max-height:640px){.bp-score b{font-size:2.1rem}.bp-top{padding-bottom:0}}