/* Word search: the box on the page, the game screen, the letter grid, effects and sheets. Loaded on the word search page only (with game-page.css).
   The look is its own: a bright daylight notebook world, a white letter board, highlighter-marker strokes in pastel colours for every word you find.
   Colours come from the variables on .ws-box / .ws-app, one set per backdrop. The sheets, buttons and top bar share their shape with the other games. */

/* ---------- colours: one set per backdrop ---------- */
.ws-box,.ws-app{
  --ink:#33406b;--ink2:#6f7ca6;--card:#fff;--card2:#f4f8ff;--line:rgba(60,84,150,.14);--shade:40,56,110;
  --bg1:#f4faff;--bg2:#d9ecff;--bg3:#bcd9ff;--dot:90,130,200;
  --o1:rgba(255,236,160,.7);--o2:rgba(255,170,205,.5);--o3:rgba(160,215,255,.7);
  --panel:rgba(255,255,255,.86);--panel-edge:#fff;--let:#33406b;
  --a1:#ff7a9c;--a2:#ffa05c;--ad:#d94b72;--ag:rgba(255,106,142,.5);--lip:rgba(217,75,114,.2);
  --gem:#35b8ef;--gemd:#1b86c9;--gemg:rgba(53,184,239,.7);
}
.ws-app[data-theme=butter]{--bg1:#fffdf0;--bg2:#ffefb8;--bg3:#ffd9a0;--dot:200,150,60;--o1:rgba(255,200,120,.6);--o2:rgba(255,160,170,.5);--o3:rgba(255,238,150,.7);--a1:#ff8a4c;--a2:#ffb347;--ad:#d9602a;--ag:rgba(255,138,76,.5);--lip:rgba(217,96,42,.22);--ink:#5a3b1e;--ink2:#9b7a58;--card2:#fff9ec;--line:rgba(140,90,30,.15);--shade:90,60,20;--let:#5a3b1e}
.ws-app[data-theme=matcha]{--bg1:#f4fff4;--bg2:#d2f3d4;--bg3:#a9e3bd;--dot:60,140,90;--o1:rgba(255,246,170,.7);--o2:rgba(150,230,190,.7);--o3:rgba(200,240,255,.6);--a1:#3fbf86;--a2:#7ad66a;--ad:#1f9060;--ag:rgba(63,191,134,.5);--lip:rgba(31,144,96,.22);--ink:#1f4a3a;--ink2:#5f8f7b;--card2:#f2fcf5;--line:rgba(30,110,70,.15);--shade:20,70,50;--let:#1f4a3a}
.ws-app[data-theme=lilac]{--bg1:#faf6ff;--bg2:#e3d9ff;--bg3:#c9bcff;--dot:120,100,200;--o1:rgba(255,210,235,.65);--o2:rgba(180,160,255,.7);--o3:rgba(170,220,255,.6);--a1:#8a78ff;--a2:#b27cff;--ad:#5f4bd6;--ag:rgba(138,120,255,.5);--lip:rgba(95,75,214,.22);--ink:#36307a;--ink2:#7873b0;--card2:#f8f5ff;--line:rgba(90,70,190,.14);--shade:50,40,120;--let:#36307a}
.ws-app[data-theme=night]{--ink:#f2f0ff;--ink2:#aeb4e6;--card:#232a63;--card2:#2d3578;--line:rgba(255,255,255,.14);--shade:8,10,40;--let:#f2f0ff;
  --bg1:#2f3a8a;--bg2:#1d2565;--bg3:#111648;--dot:190,200,255;--o1:rgba(255,160,200,.35);--o2:rgba(110,140,255,.45);--o3:rgba(255,210,130,.25);
  --panel:rgba(255,255,255,.1);--panel-edge:rgba(255,255,255,.2);--a1:#ff8ab4;--a2:#ffb05c;--ad:#d44a80;--ag:rgba(255,138,180,.5);--lip:rgba(0,0,0,.28)}

/* the colours a found word is marked with, one after the other */
.p0{--lc:#ffb3cf;--ld:#ff7fae}.p1{--lc:#cdbcff;--ld:#9a82f2}.p2{--lc:#a6ecd0;--ld:#55cfa2}.p3{--lc:#ffcfa3;--ld:#ff9d58}
.p4{--lc:#b3dcff;--ld:#5fb0f5}.p5{--lc:#fff0a0;--ld:#f5c831}.p6{--lc:#ffb8b8;--ld:#ff7878}.p7{--lc:#c4cbff;--ld:#7f8df0}

/* ---------- the box on the page: a picture and a bar with the buttons, until someone plays ---------- */
.ws-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)}
.ws-box>.ws-adslot{display:none}
.ws-poster{position:relative;width:100%;aspect-ratio:1200/630;overflow:hidden;background:#ffe3d6}
.ws-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ws-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)}
.ws-pmeta[hidden]{display:none}
.ws-pmeta .ic{width:19px;height:19px}
.ws-pbar{position:relative;display:flex;gap:12px;justify-content:center;padding:16px 20px 20px;background:linear-gradient(180deg,#fff9f3,#ffeede)}
.ws-box:not(.ready) .ws-pbar{visibility:hidden}
.ws-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}
.ws-play:hover{transform:translateY(-2px)}
.ws-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)}
.ws-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ws-play .ic{width:22px;height:22px;flex:none}
.ws-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)}
.ws-play.alt:active{box-shadow:0 1px 0 rgba(88,56,128,.16),inset 0 0 0 2px rgba(88,56,128,.1)}
.ws-play.alt .ic{color:var(--a1)}
.ws-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}
.ws-play .fl[hidden]{display:none}
.ws-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) */
  .ws-poster{max-height:max(340px,calc(100vh - 360px))}
  /* once the game is open the box grows to the height of the screen */
  .ws-box.on{height:min(calc(100vh - 36px),820px);min-height:600px}
}
@media (max-width:820px){
  .ws-box{border-radius:0;margin-inline:0}
  .ws-poster{aspect-ratio:390/330}
  .ws-poster>img{object-position:50% 50%}
  .ws-pbar{padding:14px var(--gut) 18px;gap:10px}
  .ws-play{flex:1 1 0;min-width:0;padding:15px 8px;gap:7px;font-size:.98rem;white-space:nowrap;border-radius:18px}
  .ws-play .ic{width:20px;height:20px}
  .ws-play .fl{position:absolute;top:-10px;right:8px;margin:0;box-shadow:0 4px 10px -3px rgba(150,70,0,.6)}
}

/* ---------- the game screen ---------- */
.ws-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%)}
.ws-app[hidden]{display:none}
.ws-app.full{position:fixed;inset:0;z-index:3000;height:100vh;height:100dvh;border-radius:0}
.ws-app.noad{padding-bottom:12px}
.ws-app.noad.full{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.ws-app:fullscreen{width:100%;height:100%}
.ws-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ws-orb{position:absolute;border-radius:50%;will-change:transform}
.ws-orb.o1{left:-20%;top:-12%;width:78%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o1),transparent);animation:wsDrift 24s ease-in-out infinite alternate}
.ws-orb.o2{right:-24%;top:30%;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o2),transparent);animation:wsDrift 30s ease-in-out -9s infinite alternate-reverse}
.ws-orb.o3{left:6%;bottom:-26%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o3),transparent);animation:wsDrift 27s ease-in-out -15s infinite alternate}
@keyframes wsDrift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(6%,5%,0) scale(1.12)}}
/* soap bubbles drifting up behind the board */
/* little letters drifting up behind the board */
.ws-fl i{position:absolute;left:var(--l);top:105%;font:800 var(--s)/1 var(--display);font-style:normal;color:rgba(var(--dot),.42);opacity:0;animation:wsUp var(--t) linear var(--d) infinite}
.ws-app[data-theme=night] .ws-fl i{color:rgba(210,220,255,.32)}
@keyframes wsUp{0%{top:105%;transform:translateX(0) rotate(0);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{top:-10%;transform:translateX(var(--w)) rotate(var(--r));opacity:0}}
@supports (container-type:size){.ws-fl{position:absolute;inset:0;container-type:size}.ws-fl i{top:0;will-change:transform;animation-name:wsUp2}}
@keyframes wsUp2{0%{transform:translate3d(0,105cqh,0) rotate(0);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{transform:translate3d(var(--w),-12cqh,0) rotate(var(--r));opacity:0}}
/* while a block is in the hand nothing in the background moves: all the work goes to the finger */
/* while a finger is on the board nothing in the background moves: all the work goes to the finger */
.ws-app.dragging .ws-orb,.ws-app.dragging .ws-fl i{animation-play-state:paused}

/* top bar: round white stickers, the title in the middle */
.ws-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}
.ws-app.full .ws-top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.ws-tl,.ws-tr{display:flex;align-items:center;gap:8px}
.ws-tr{justify-content:flex-end}
.ws-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}
.ws-ib:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
.ws-ib:focus-visible,.ws-btn:focus-visible,.ws-row:focus-visible,.ws-th:focus-visible,.ws-hintb:focus-visible,.ws-w:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.ws-ib .ic{width:20px;height:20px}
.ws-title{min-width:0;max-width:60vw;text-align:center;line-height:1.1}
.ws-title b{display:block;font:800 1.14rem/1.1 var(--display);letter-spacing:-.01em}
.ws-title small{display:block;margin-top:3px;font:800 .64rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.ws-title small:empty{display:none}
.ws-app[data-theme=berry] .ws-title small,.ws-app[data-theme=mint] .ws-title small{color:var(--ad)}
.ws-fs,.ws-sndb{display:none}
.ws-row.mobonly{display:flex}
@media (min-width:821px){.ws-fs,.ws-sndb{display:grid}.ws-row.mobonly{display:none}.ws-top{padding:14px 18px 6px}.ws-ib{width:44px;height:44px}.ws-hud{width:100%;max-width:780px;margin-inline:auto}}

/* the numbers: time, the theme of the puzzle with the count of found words, and the gems you are still on for */
.ws-hud{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:4px 14px 6px}
.ws-time,.ws-starm{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 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}
.ws-time{justify-self:start}
.ws-time .ic{width:17px;height:17px;color:var(--a1)}
.ws-starm{justify-self:end;gap:2px;padding:7px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ws-starm .ic{width:21px;height:21px;transition:filter .3s,transform .3s}
.ws-starm .ic.off{filter:grayscale(1) opacity(.3);transform:scale(.82)}
.ws-theme{min-width:0;text-align:center;line-height:1.1}
.ws-theme b{display:block;font:800 clamp(1.1rem,4.6vw,1.55rem)/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.ws-app[data-theme=night] .ws-theme b{text-shadow:0 2px 0 rgba(0,0,0,.3)}
.ws-theme small{display:block;margin-top:4px;font:800 .66rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.ws-theme small b{display:inline;font:inherit;letter-spacing:inherit;text-shadow:none;color:var(--ad)}
.ws-app[data-theme=night] .ws-theme small b{color:#ffb0cc}

/* the board and the word list */
.ws-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:2px 0 6px}
.ws-wrap{flex:none;width:var(--bw)}
.ws-board{position:relative;width:var(--bw);height:var(--bh);border-radius:calc(var(--cs) * .6);touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none;
  background:linear-gradient(180deg,rgba(255,255,255,.96),var(--panel));
  box-shadow:0 calc(var(--cs) * .14) 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)}
.ws-app[data-theme=night] .ws-board{background:linear-gradient(180deg,#3a4694,#2b3580)}
.ws-board:focus-visible{box-shadow:0 0 0 3px var(--a1),0 calc(var(--cs) * .14) 0 var(--lip)}
.ws-grid{position:absolute;left:var(--fr);top:var(--fr);display:grid;grid-template-columns:repeat(var(--cols),var(--cs));grid-template-rows:repeat(var(--rows),var(--cs));z-index:2;pointer-events:none}
.ws-c{display:grid;place-items:center;width:var(--cs);height:var(--cs);font:800 calc(var(--cs) * .56)/1 var(--display);font-style:normal;color:var(--let);text-transform:uppercase;transition:color .2s}
.ws-c.f{color:#2c2352}
/* the marker strokes live under the letters: the ones for found words, the one you are drawing now, the hint rings */
.ws-hl{position:absolute;left:var(--fr);top:var(--fr);width:calc(var(--cols) * var(--cs));height:calc(var(--rows) * var(--cs));z-index:1;pointer-events:none}
.ws-ln{position:absolute;left:0;top:0;border-radius:99px;will-change:transform;background:var(--lc);
  box-shadow:inset 0 0 0 calc(var(--cs) * .05) var(--ld),0 calc(var(--cs) * .06) calc(var(--cs) * .16) rgba(var(--shade),.2)}
.ws-ln.sel{--lc:var(--a1);--ld:var(--ad);opacity:.52;box-shadow:inset 0 0 0 calc(var(--cs) * .06) var(--ad),0 0 calc(var(--cs) * .6) var(--ag);transition:opacity .15s}
.ws-ln.sel.bad{--lc:#ff5870;--ld:#d4284a;opacity:.6}
.ws-ln.sel.one{opacity:.62}
.ws-ln.anc{animation:wsAnc .7s ease-in-out infinite alternate}
@keyframes wsAnc{from{opacity:.4}to{opacity:.75}}
.ws-hr{position:absolute;left:0;top:0;border-radius:50%;border:calc(var(--cs) * .09) solid var(--a1);background:rgba(255,255,255,.4);box-shadow:0 0 calc(var(--cs) * .5) var(--ag);animation:wsRing .8s ease-in-out infinite alternate}
@keyframes wsRing{from{transform:var(--tr) scale(.86);opacity:.7}to{transform:var(--tr) scale(1.1);opacity:1}}
.ws-cur{position:absolute;left:0;top:0;border-radius:calc(var(--cs) * .3);border:calc(var(--cs) * .07) dashed var(--ad);pointer-events:none}

/* the words to find */
.ws-aside{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;width:var(--lw)}
.ws-words{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%}
.ws-w{display:inline-flex;align-items:center;gap:5px;padding:7px 20px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line);color:var(--ink);font:800 .76rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;transition:background .3s,box-shadow .3s,color .3s}
.ws-w .ic{display:none;width:13px;height:13px;margin-left:-2px}
.ws-w.found{padding-left:12px;padding-right:12px;background:var(--lc);box-shadow:inset 0 0 0 1.5px var(--ld),0 2px 0 var(--ld);color:#2c2352}
.ws-w.found .ic{display:block}
.ws-w.found span{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(44,35,82,.55)}
.ws-w.hint{animation:wsChip .6s ease-in-out infinite alternate}
@keyframes wsChip{from{transform:none;box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line)}to{transform:scale(1.08);box-shadow:inset 0 0 0 2.5px var(--a1),0 0 14px var(--ag)}}
.ws-w.pop{animation:wsChipPop .55s cubic-bezier(.3,1.7,.5,1)}
@keyframes wsChipPop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.ws-hintb{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px;padding:13px 24px 13px 18px;border:0;border-radius:99px;cursor:pointer;color:var(--ink);font:800 .98rem/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}
.ws-hintb .ic{width:20px;height:20px;color:#f5b400}
.ws-hintb:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px var(--line),0 0 0 var(--line)}
.ws-hintb:disabled{opacity:.45;cursor:default}
.ws-hintb.nudge{animation:wsNudge 1.2s ease-in-out infinite}
@keyframes wsNudge{0%,100%{transform:none;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line)}40%{transform:translateY(-3px) rotate(-2deg);box-shadow:inset 0 0 0 2.5px #f5b400,0 4px 0 var(--line),0 0 22px rgba(245,180,0,.6)}70%{transform:translateY(0) rotate(2deg)}}

/* wide screens: the board on the left, the words in a panel on the right */
.ws-stage.side{flex-direction:row;gap:calc(var(--cs) * .8);padding-top:calc(4px + var(--tp,0px) + var(--mg,0px));padding-bottom:calc(6px + var(--mg,0px))}
.ws-stage.side .ws-aside{padding:18px 16px 20px;border-radius:30px;background:var(--panel);box-shadow:0 5px 0 var(--lip),inset 0 0 0 2px var(--panel-edge);gap:16px}
.ws-stage.side .ws-words{justify-content:flex-start;gap:8px}
.ws-stage.side .ws-aside::before{content:"Find these words";display:block;align-self:flex-start;font:800 .7rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
@media (min-width:821px){.ws-hud{width:100%;max-width:880px;margin-inline:auto}.ws-time,.ws-starm{padding-block:8px}}

.ws-fx{position:absolute;inset:0;z-index:40;pointer-events:none}
/* effects */
.ws-sp{position:absolute;display:block;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.ws-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)}
.ws-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)}
.ws-ft.hot{font-size:1.5rem;color:#fff6c2;-webkit-text-stroke-color:#d9780a}
.ws-word{position:absolute;left:50%;top:40%;text-align:center;white-space:nowrap;line-height:1}
.ws-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)}
.ws-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)}
.ws-word.gold b{color:#fff6c2;-webkit-text-stroke-color:#d9780a}
.ws-word.gold small{color:#b86a00}
.ws-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)}
.ws-app[data-theme=night] .ws-toast{background:#fff;color:#2b2160}
.ws-toast.on{opacity:1;transform:translate(-50%,0)}
.ws-cfl{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.ws-cf{position:absolute;top:0;border-radius:2px}
.ws-cf.c1{border-radius:50%}
.ws-cf.c2{border-radius:60% 0 60% 0}
.ws-hand{position:absolute;z-index:44;width:54px;height:54px;margin:-10px 0 0 -16px;pointer-events:none;opacity:0;animation:wsHand 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 6px rgba(40,10,70,.35))}
.ws-hand .ic{width:100%;height:100%;fill:#fff;stroke:#3f2b56;stroke-width:1.5}
@keyframes wsHand{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) */
.ws-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)}
.ws-app[data-theme=night] .ws-adslot{background:rgba(8,4,30,.4)}
.ws-adslot .ad{margin:0;padding:2px 0}
.ws-adslot .ad .lbl{color:var(--ink2);margin-bottom:2px}
.ws-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){.ws-adslot{min-height:100px}.ws-adslot.prev::before{content:"Ad space \00b7  728 \00d7  90";padding:30px 60px}}

/* sheets: game over, menu, backdrops, help */
/* the end-of-game card: Play again with a round Share button beside it, the daily board as a small banner, and a quiet Exit link under them */
/* Share result: a golden button with a sheen that sweeps across it now and then, so it reads as a reward and not as a plain link */

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

/* a found word flies up from the middle of its stroke */
.ws-fw{position:absolute;white-space:nowrap;font:800 1.3rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff;-webkit-text-stroke:6px var(--ld);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.16)}
.ws-sp.t{background:var(--ld)}

/* the end of a puzzle: gems, then the numbers */

/* levels */

@media (max-height:640px){.ws-theme b{font-size:1.1rem}.ws-top{padding-bottom:0}}
@media (max-width:350px){.ws-hintb{min-width:0}}

/* end card: one clean line for the numbers, one row for the streak and the countdown, one for a new backdrop, the buttons and a quiet Exit */

/* When the screen is too short, VN.fitCard (game-stats.js) adds f1, f2, f3 one after the other (each keeps the ones before it); each step only tightens the room around the parts, none of them is hidden.
   On a wide, low screen (a phone on its side) the card goes into two columns (g). */

/* the same for the menu, the help and the backdrops: tighter rows, then no second lines, and the keyboard hint goes (it is of no use on a phone) */