/* Yarn Link: the box on the page, the game screen, the board (patchwork squares, yarn, buttons), the tools and what the shared windows do not have. Loaded on the Yarn Link page only (with game-page.css and game-sheet.css).
   The look is its own: a table of cloth (linen, gingham, denim, green felt, floral calico, knitted wool), a dark quilted board on it, yarn that twists, buttons that shine, labels that look sewn on.
   Colours come from the variables on .lk-box / .lk-app, one set per cloth. The sheets, buttons and top bar share their shape with the other games. */

/* ---------- colours: one set per cloth ---------- */
.lk-box,.lk-app{
  --ink:#4a3522;--ink2:#8a7258;--card:#fffaf1;--card2:#f4e9d4;--line:rgba(120,85,40,.2);--shade:70,48,24;
  --bg1:#efe3cb;--bg2:#e0cfae;--bg3:#cdb88f;
  --a1:#d9743c;--a2:#f2a766;--ad:#a64e1d;--ag:rgba(217,116,60,.5);--lip:rgba(120,70,30,.28);
  --gemg:rgba(255,190,40,.75);--gold:255,196,40;
  --quilt:#d2bc94;--tile:#f5eddc;--stitch:rgba(125,90,48,.42);--pdot:rgba(120,88,48,.09);--pgl:rgba(255,255,255,.28);--psh1:rgba(120,85,40,.3);--psh2:rgba(110,75,30,.5);--pin:rgba(255,255,255,.45);--cloth:url(/img/link/bg-linen.webp?v=5c408d67);
  --font:var(--display);
}
.lk-app[data-theme=gingham]{--ink:#1f3560;--ink2:#5f78a8;--card:#ffffff;--card2:#eaf1fc;--line:rgba(50,90,170,.2);--shade:30,55,110;--bg1:#f4f7fc;--bg2:#cfdcf1;--bg3:#9ebbe0;--a1:#3f82e0;--a2:#7bb2f5;--ad:#2257a8;--ag:rgba(63,130,224,.5);--lip:rgba(34,87,168,.3);--quilt:#c4d5ee;--tile:#f3f8fe;--stitch:rgba(60,100,170,.44);--pdot:rgba(50,90,160,.09);--pgl:rgba(255,255,255,.3);--psh1:rgba(40,70,130,.3);--psh2:rgba(30,60,120,.45);--pin:rgba(255,255,255,.5);--cloth:url(/img/link/bg-gingham.webp?v=79060bb8)}
.lk-app[data-theme=denim]{--ink:#22344f;--ink2:#5e7190;--card:#fbf7ee;--card2:#ece6d6;--line:rgba(40,60,100,.22);--shade:12,24,50;--bg1:#5d82b0;--bg2:#3f628f;--bg3:#2f4f7a;--a1:#e08a2e;--a2:#ffbf63;--ad:#a85f12;--ag:rgba(224,138,46,.55);--lip:rgba(10,24,50,.4);--quilt:#1b2335;--tile:#34425e;--stitch:rgba(255,208,150,.3);--pdot:rgba(255,236,205,.07);--pgl:rgba(255,255,255,.05);--psh1:rgba(0,0,0,.34);--psh2:rgba(0,0,0,.6);--pin:rgba(255,255,255,.1);--cloth:url(/img/link/bg-denim.webp?v=aeedfb62)}
.lk-app[data-theme=felt]{--ink:#1d3f2a;--ink2:#5a7d66;--card:#f8f4e6;--card2:#e7e6cf;--line:rgba(30,80,50,.22);--shade:6,40,20;--bg1:#2f8a52;--bg2:#1c6b3d;--bg3:#12512d;--a1:#1f9d6a;--a2:#58cf96;--ad:#0e6a46;--ag:rgba(31,157,106,.55);--lip:rgba(4,40,20,.42);--quilt:#15251a;--tile:#2f4636;--stitch:rgba(220,255,225,.26);--pdot:rgba(255,236,205,.07);--pgl:rgba(255,255,255,.05);--psh1:rgba(0,0,0,.34);--psh2:rgba(0,0,0,.6);--pin:rgba(255,255,255,.1);--cloth:url(/img/link/bg-felt.webp?v=7387d33d)}
.lk-app[data-theme=floral]{--ink:#4a2342;--ink2:#8b5d84;--card:#fff7fb;--card2:#f6e4ef;--line:rgba(120,50,100,.2);--shade:60,20,56;--bg1:#a57ca0;--bg2:#8a5f87;--bg3:#6f4a6e;--a1:#b24f94;--a2:#e07fc2;--ad:#7d2b67;--ag:rgba(178,79,148,.5);--lip:rgba(60,20,56,.38);--quilt:#2e1b2c;--tile:#4f3a52;--stitch:rgba(255,225,245,.27);--pdot:rgba(255,236,205,.07);--pgl:rgba(255,255,255,.05);--psh1:rgba(0,0,0,.34);--psh2:rgba(0,0,0,.6);--pin:rgba(255,255,255,.1);--cloth:url(/img/link/bg-floral.webp?v=70c4cd22)}
.lk-app[data-theme=knit]{--ink:#4d2417;--ink2:#94604a;--card:#fff6ea;--card2:#f6e0cc;--line:rgba(130,60,30,.22);--shade:80,28,10;--bg1:#e07b4a;--bg2:#c8603a;--bg3:#b6532b;--a1:#c4452b;--a2:#f08058;--ad:#8c2a14;--ag:rgba(196,69,43,.5);--lip:rgba(90,25,8,.4);--quilt:#33201a;--tile:#563a2f;--stitch:rgba(255,224,200,.27);--pdot:rgba(255,236,205,.07);--pgl:rgba(255,255,255,.05);--psh1:rgba(0,0,0,.34);--psh2:rgba(0,0,0,.6);--pin:rgba(255,255,255,.1);--cloth:url(/img/link/bg-knit.webp?v=e838061b)}

/* ---------- the board (also used for the pictures in the help cards) ---------- */
.lk-svg{display:block;overflow:visible;-webkit-user-select:none;user-select:none;touch-action:none}
.lk-tile{fill:var(--tile,#4a4038)}
.lk-stitch{fill:none;stroke:var(--stitch,rgba(255,236,205,.24));stroke-width:2.4;stroke-dasharray:5 7;stroke-linecap:round}
.lk-cv{pointer-events:none;transition:fill-opacity .15s}
.lk-bt{transition:opacity .2s}
.lk-bt .lk-halo{transition:fill-opacity .3s}
.lk-bt.on .lk-halo{animation:lkHalo 2.4s ease-in-out infinite alternate}
.lk-halos{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}      /* html halos of the finished pairs, between the thread svg and the svg of the buttons */
.lk-hl{position:absolute;display:block;border-radius:50%;opacity:0;transform:scale(.936);transition:opacity .3s}
.lk-hl.on{opacity:.3;animation:lkHaloH 2.4s ease-in-out infinite alternate}
@keyframes lkHaloH{from{transform:scale(.851)}to{transform:scale(1)}}
@keyframes lkHalo{from{r:40}to{r:47}}
.lk-knob{pointer-events:none}
.lk-svg .lk-fx{pointer-events:none}

/* ---------- the box on the page: a picture and a bar with the buttons, until someone plays ---------- */
.lk-box{position:relative;margin:0 0 6px;border-radius:30px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#f6ecd8,#e4d3b0);box-shadow:0 30px 56px -30px rgba(110,70,30,.55),0 0 0 1px rgba(140,100,50,.25)}
.lk-box>.lk-adslot{display:none}
.lk-poster{position:relative;width:100%;aspect-ratio:1200/630;overflow:hidden;background:#d8c6a2}
.lk-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-pbar{position:relative;display:flex;gap:12px;justify-content:center;padding:16px 20px 20px;background:linear-gradient(180deg,#f7eedc,#e8d8b8)}
.lk-box:not(.ready) .lk-pbar{visibility:hidden}
.lk-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 1px 1px rgba(90,40,10,.35);
  background:linear-gradient(180deg,#f6b077,var(--a1) 55%,#c4612c);box-shadow:0 6px 0 var(--ad),0 18px 26px -10px var(--ag),inset 0 2px 0 rgba(255,255,255,.5);transition:transform .12s,box-shadow .12s}
.lk-play::after{content:"";position:absolute;inset:5px;border:2px dashed rgba(255,255,255,.5);border-radius:15px;pointer-events:none}
.lk-play:hover{transform:translateY(-2px)}
.lk-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,.5)}
.lk-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.lk-play .ic{width:22px;height:22px;flex:none}
.lk-play.alt{color:var(--ink);text-shadow:none;background:#fffaf1;box-shadow:0 6px 0 rgba(120,80,40,.22),0 14px 22px -12px rgba(100,60,20,.4),inset 0 0 0 2px rgba(120,85,40,.14)}
.lk-play.alt::after{border-color:rgba(120,85,40,.28)}
.lk-play.alt:active{box-shadow:0 1px 0 rgba(120,80,40,.22),inset 0 0 0 2px rgba(120,85,40,.14)}
.lk-play.alt .ic{color:var(--a1)}
.lk-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}
.lk-play .fl[hidden]{display:none}
.lk-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) */
  .lk-poster{max-height:max(340px,calc(100vh - 360px));container-type:size;background:#c9623a url(/img/link/poster-knit.webp?v=4837eb73) 50% 50%/460px auto}
  /* the board fills most of the picture's height, so a short window must not crop it: the whole picture is kept, and the knit goes on at both sides, with soft edges where the picture ends */
  @container (min-aspect-ratio:48/25){
    .lk-poster>img{inset:0 auto 0 50%;width:auto;height:100%;aspect-ratio:1200/630;transform:translateX(-50%);object-fit:fill;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  }
  /* once the game is open the box grows to the height of the screen */
  .lk-box.on{height:min(calc(100vh - 36px),820px);min-height:600px}
}
@media (max-width:820px){
  .lk-box{border-radius:0;margin-inline:0}
  .lk-poster{aspect-ratio:390/330}
  .lk-poster>img{object-position:42.7% 50%}      /* the board whole, half of the ball, and none of the column of buttons that would be cut at the edge */
  .lk-pbar{padding:14px var(--gut) 18px;gap:10px}
  .lk-play{flex:1 1 0;min-width:0;padding:15px 8px;gap:7px;font-size:.98rem;white-space:nowrap;border-radius:18px}
  .lk-play .ic{width:20px;height:20px}
  .lk-play .fl{position:absolute;top:-10px;right:8px;margin:0;box-shadow:0 4px 10px -3px rgba(150,70,0,.6)}
}

/* ---------- the game screen: cloth on the table ---------- */
.lk-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:var(--bg2)}
.lk-app[hidden]{display:none}
.lk-app.full{position:fixed;inset:0;z-index:3000;height:100vh;height:100dvh;border-radius:0}
.lk-app.noad{padding-bottom:12px}
.lk-app.noad.full{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.lk-app:fullscreen{width:100%;height:100%}
.lk-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lk-cloth{position:absolute;inset:0;background:var(--cloth) center/cover no-repeat,linear-gradient(180deg,var(--bg1),var(--bg3))}
.lk-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(var(--shade),.38) 100%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 22%,rgba(var(--shade),.14))}

/* top bar: round buttons like sewn-on buttons, a label in the middle */
.lk-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}
.lk-app.full .lk-top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.lk-tl,.lk-tr{display:flex;align-items:center;gap:8px}
.lk-tr{justify-content:flex-end}
.lk-ib{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;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 -8px rgba(var(--shade),.55),inset 0 0 0 4px var(--card),inset 0 0 0 5.5px var(--line);transition:transform .12s}
.lk-ib:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip),inset 0 0 0 4px var(--card),inset 0 0 0 5.5px var(--line)}
.lk-ib:focus-visible,.lk-btn:focus-visible,.lk-row:focus-visible,.lk-th:focus-visible,.lk-tool:focus-visible,.lk-lvb:focus-visible,.lk-pt:focus-visible,.lk-tab:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.lk-ib .ic{width:20px;height:20px}
.lk-title{min-width:0;max-width:60vw;text-align:center;line-height:1.1;padding:7px 18px 7px;border-radius:15px;background:var(--card);box-shadow:0 3px 0 var(--lip),0 10px 16px -10px rgba(var(--shade),.6),inset 0 0 0 1px var(--line)}
.lk-title{position:relative}
.lk-title::after{content:"";position:absolute;inset:3px;border:1.8px dashed var(--line);border-radius:12px;pointer-events:none}
.lk-title b{display:block;font:800 1.08rem/1.1 var(--display);letter-spacing:-.01em}
.lk-title small{display:block;margin-top:3px;font:800 .6rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.lk-title small:empty{display:none}
.lk-fs,.lk-sndb{display:none}
@media (min-width:821px){.lk-fs,.lk-sndb{display:grid}.lk-top{padding:14px 18px 6px}.lk-hud{width:100%;max-width:780px;margin-inline:auto}}

/* on a dark cloth the plates, round buttons and numbers are dark as well, with light writing (the windows stay cream) */
.lk-app[data-theme=denim] :is(.lk-ib,.lk-title,.lk-moves,.lk-gemm,.lk-lvb,.lk-tool){--card:#131f37;--ink:#f4ecda;--ink2:#a9bad9;--line:rgba(255,236,205,.18);--lip:rgba(2,8,22,.62);--shade:0,0,0;color:var(--ink)}
.lk-app[data-theme=felt] :is(.lk-ib,.lk-title,.lk-moves,.lk-gemm,.lk-lvb,.lk-tool){--card:#0d2417;--ink:#f3efd9;--ink2:#a7c8b2;--line:rgba(230,255,235,.18);--lip:rgba(0,14,5,.62);--shade:0,0,0;--a1:#58cf96;color:var(--ink)}
.lk-app[data-theme=floral] :is(.lk-ib,.lk-title,.lk-moves,.lk-gemm,.lk-lvb,.lk-tool){--card:#2a172e;--ink:#f8eaf4;--ink2:#d1abc9;--line:rgba(255,225,245,.18);--lip:rgba(20,5,22,.62);--shade:0,0,0;--a1:#e07fc2;color:var(--ink)}
.lk-app:is([data-theme=denim],[data-theme=felt],[data-theme=floral]) .lk-tool[data-a=hint] .lk-tb{background:linear-gradient(180deg,#463a1b,#2c2410);box-shadow:0 4px 0 rgba(0,0,0,.5),0 14px 18px -10px rgba(0,0,0,.7),inset 0 0 0 5px #382d14,inset 0 0 0 6.5px rgba(255,201,60,.42)}
.lk-app:is([data-theme=denim],[data-theme=felt],[data-theme=floral]) .lk-tool[data-a=hint] .ic{color:#ffcf4a}

/* the numbers: strokes, the level (a button: it opens the levels), the gems you are still on for */
.lk-hud{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:6px 14px 6px}
.lk-moves,.lk-gemm{display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 10px;border-radius:99px;background:var(--card);box-shadow:0 3px 0 var(--lip),inset 0 0 0 1px var(--line);font:800 .95rem/1 var(--display);font-variant-numeric:tabular-nums}
.lk-moves{justify-self:start}
.lk-moves .ic{width:19px;height:19px;flex:none;color:var(--a1)}
.lk-moves span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.lk-moves b{min-width:1.1em;text-align:right;font-weight:800}
.lk-gemm{justify-self:end;gap:2px;padding:6px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lk-gemm .ic{width:22px;height:22px;transition:filter .3s,transform .3s}
.lk-gemm .ic.off{filter:grayscale(1) opacity(.3);transform:scale(.82)}
.lk-lvb{min-width:0;border:0;padding:7px 18px 7px;border-radius:18px;background:var(--card);color:inherit;cursor:pointer;text-align:center;line-height:1.1;box-shadow:0 3px 0 var(--lip),inset 0 0 0 1px var(--line);-webkit-tap-highlight-color:transparent;transition:transform .12s}
.lk-lvb:active{transform:translateY(2px)}
.lk-lvb b{display:block;font:800 clamp(1.05rem,4.4vw,1.45rem)/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.lk-lvb small{display:block;margin-top:4px;font:800 .62rem/1 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}

/* the board: a quilted patch on the cloth, pale on the pale cloths (linen, gingham) and dark on the dark ones; the squares are the patches, a hole shows the dark backing */
.lk-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:2px 0 6px}
.lk-wrap{position:relative;flex:none}
.lk-patch{position:relative;margin:0 auto;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none}
.lk-patch::before{content:"";position:absolute;inset:calc(var(--cs) * -.15);border-radius:calc(var(--cs) * .3);pointer-events:none;
  background:radial-gradient(circle at 1px 1px,var(--pdot) 1px,transparent 1.4px) 0 0/9px 9px,linear-gradient(180deg,var(--pgl),transparent 30%),var(--quilt);
  box-shadow:0 calc(var(--cs) * .09) 0 var(--psh1),0 calc(var(--cs) * .5) calc(var(--cs) * .8) calc(var(--cs) * -.3) var(--psh2),inset 0 0 0 calc(var(--cs) * .035) var(--pin)}
.lk-patch::after{content:"";position:absolute;inset:calc(var(--cs) * -.08);border:2px dashed var(--stitch);border-radius:calc(var(--cs) * .24);pointer-events:none}
.lk-patch .lk-svg{position:relative;z-index:1}
.lk-patch .lk-svg.lk-above{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:auto;touch-action:none}      /* the layer above the threads: buttons, rings, sparks (see create() in link-render.js). It is the topmost thing on the board, so it takes the touches itself (and says touch-action:none itself): on a phone a quick swipe over a layer that did not say so was taken for a scroll and cancelled. No will-change here or on .lk-hl: the same swipe was cancelled over such layers, and the frame times are the same without it */
.lk-app.dragging .lk-patch{cursor:grabbing}
.lk-ghost{position:absolute;left:0;top:0;z-index:4;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,#fff,#ffeab8 55%,#f3b550);box-shadow:0 0 0 5px rgba(255,255,255,.42),0 6px 16px rgba(0,0,0,.5)}

/* every thread is joined but some squares are still bare: they glow softly (there is no bar of progress, as in the other games) */
.lk-svg.lk-need .lk-cv[fill-opacity="0"]{fill:#ffe08a;animation:lkNeed 1.1s ease-in-out infinite alternate}
@keyframes lkNeed{from{fill-opacity:0}to{fill-opacity:.2}}
.lk-app:is([data-theme=linen],[data-theme=gingham]) .lk-svg.lk-need .lk-cv[fill-opacity="0"]{fill:#ffa21c;animation-name:lkNeedL}
@keyframes lkNeedL{from{fill-opacity:0}to{fill-opacity:.36}}
@media (max-width:480px){.lk-moves span{display:none}.lk-moves{padding-inline:11px}.lk-lvb{padding-inline:14px}}

/* the tools: round buttons with a small label under each */
.lk-tools{display:flex;justify-content:center;gap:clamp(14px,6vw,34px);margin-top:calc(var(--cs) * .2)}
.lk-tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lk-tb{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--card);box-shadow:0 4px 0 var(--lip),0 14px 18px -10px rgba(var(--shade),.6),inset 0 0 0 5px var(--card),inset 0 0 0 6.5px var(--line);transition:transform .12s,box-shadow .12s}
.lk-tb .ic{width:25px;height:25px}
.lk-tl2{padding:3px 10px;border-radius:99px;background:var(--card);box-shadow:0 2px 0 var(--lip);font:800 .64rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.lk-tool:active .lk-tb{transform:translateY(4px);box-shadow:0 0 0 var(--lip),inset 0 0 0 5px var(--card),inset 0 0 0 6.5px var(--line)}
.lk-tool:disabled{opacity:.45;cursor:default}
.lk-tool[data-a=hint] .ic{color:#e0a000}
.lk-tool[data-a=hint] .lk-tb{background:linear-gradient(180deg,#fffdf4,#fff1c7);box-shadow:0 4px 0 rgba(150,100,0,.34),0 14px 18px -10px rgba(var(--shade),.6),inset 0 0 0 5px #fff8e0,inset 0 0 0 6.5px rgba(200,140,0,.3)}
.lk-tool.nudge .lk-tb{animation:lkNudge 1.2s ease-in-out infinite}
@keyframes lkNudge{0%,100%{transform:none}40%{transform:translateY(-5px) rotate(-6deg)}70%{transform:translateY(0) rotate(5deg)}}
@media (max-height:700px){.lk-tb{width:50px;height:50px}.lk-tb .ic{width:22px;height:22px}.lk-tools{gap:clamp(12px,5vw,26px)}}
@media (max-height:600px){.lk-tl2{display:none}.lk-tb{width:46px;height:46px}}
/* a phone on its side: the title makes room, the strokes, the level and the gems sit in the middle of the top bar */
@media (max-height:480px) and (min-width:560px){.lk-title{display:none}.lk-top{grid-template-columns:minmax(0,1fr) auto}.lk-hud{position:absolute;z-index:4;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:auto;max-width:none;padding:0}.lk-app.full .lk-hud{top:calc(8px + env(safe-area-inset-top,0px))}.lk-stage{flex-direction:row;gap:20px}.lk-tools{flex-direction:column;gap:10px;margin-top:0}.lk-tl2{display:none}}

/* effects */
.lk-stage>.lk-fx{position:absolute;inset:0;z-index:40;pointer-events:none}
.lk-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),.8);font:800 .9rem/1.25 var(--display);transition:opacity .22s,transform .22s}
.lk-toast.on{opacity:1;transform:translate(-50%,0)}
.lk-cfl{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.lk-cf{position:absolute;top:0;border-radius:2px}
.lk-cf.c1{border-radius:50%}
.lk-cf.c2{border-radius:60% 0 60% 0}

/* the strip kept free for a wide banner (320x50 on phones, 728x90 on big screens) */
.lk-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,.55);border-top:1px solid var(--line)}
.lk-adslot .ad{margin:0;padding:2px 0}
.lk-adslot .ad .lbl{color:var(--ink2);margin-bottom:2px}
.lk-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){.lk-adslot{min-height:100px}.lk-adslot.prev::before{content:"Ad space \00b7  728 \00d7  90";padding:30px 60px}}
@media (max-height:640px){.lk-lvb b{font-size:1.1rem}.lk-top{padding-bottom:0}}

/* ---------- the windows: what the shared ones do not have ---------- */
.lk-idemo{display:flex;justify-content:center;margin:6px 0 12px}
.lk-demo{display:block;width:min(220px,64%);height:auto;box-sizing:content-box;padding:calc(10px);border-radius:18px;background:var(--quilt);box-shadow:0 8px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.1)}
.lk-idemo.sm .lk-demo{width:min(150px,50%)}
.lk-help{text-align:left}
.lk-help p{margin:0 0 .75em;font-size:.93rem;line-height:1.5;color:var(--k-ink)}
.lk-help .lk-idemo{margin-top:2px}
/* a wide and low window (a phone on its side) puts the card in two columns: the pictures shrink so that the button stays on screen, and the text keeps clear of the close button */
.lk-card.g .lk-demo{width:min(124px,100%)}
.lk-card.g .lk-r>.lk-idemo{margin:0 0 8px}
.lk-card.g .lk-idemo.sm .lk-demo{width:min(108px,100%)}
.lk-card.f3 .lk-demo,.lk-card.f3 .lk-idemo.sm .lk-demo{width:92px;padding:7px;border-radius:14px}
.lk-card.how.g .lk-r{padding-top:30px}
.lk-card.intro.g .lk-sub,.lk-card.intro.g .sub{font-size:.88rem;margin-bottom:8px}
.lk-sw{position:relative;flex:none;width:44px;height:26px;border-radius:99px;background:var(--k-line);box-shadow:inset 0 0 0 1.5px var(--k-line);transition:background-color .2s;margin-left:auto}
.lk-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.lk-sw.on{background:linear-gradient(135deg,var(--k-a2),var(--k-a1))}
.lk-sw.on::after{transform:translateX(18px)}
.lk-row .fl{display:inline-flex;align-items:center;gap:3px;margin-left:auto;padding:3px 9px 3px 6px;border-radius:99px;background:linear-gradient(135deg,#ff9a56,#ff5f7e);color:#fff;font:800 .82rem/1 var(--display);font-style:normal}
.lk-row .fl .ic{width:14px;height:14px;color:#fff3c4}
.lk-lnk{display:flex;justify-content:center;gap:6px}
.lk-nb{margin:8px 0 0;font:800 .8rem/1.2 var(--display);color:var(--k-ec)}

/* the levels: a quilt of patches, chapters as tabs over it */
.lk-tabs{display:flex;gap:6px;margin:6px -4px 12px;padding:2px 4px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:left}
.lk-tabs::-webkit-scrollbar{display:none}
.lk-tab{flex:none;display:block;padding:7px 12px 6px;border:0;border-radius:14px;background:var(--k-soft);color:var(--k-ink);cursor:pointer;text-align:center;box-shadow:inset 0 0 0 1.5px var(--k-line);-webkit-tap-highlight-color:transparent;transition:transform .12s}
.lk-tab b{display:block;font:800 .82rem/1.1 var(--display);white-space:nowrap}
.lk-tab small{display:block;margin-top:3px;font:800 .6rem/1 var(--display);letter-spacing:.08em;color:var(--k-ink2)}
.lk-tab.cur{background:linear-gradient(145deg,var(--k-a2),var(--k-a1));color:#fff;box-shadow:0 8px 14px -8px var(--k-ag),inset 0 1.5px 0 rgba(255,255,255,.45)}
.lk-tab.cur small{color:rgba(255,255,255,.85)}
.lk-tab.full:not(.cur) small{color:var(--k-ec)}
.lk-tab.lock:not(.cur){opacity:.5}
.lk-quilt{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:6px;text-align:center}
.lk-pt{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0 0 8px;border:0;border-radius:14px;cursor:pointer;color:var(--k-ink);background:var(--k-soft);box-shadow:inset 0 0 0 1.5px var(--k-line);font:800 1.05rem/1 var(--display);transition:transform .12s;-webkit-tap-highlight-color:transparent}
.lk-pt::before{content:"";position:absolute;inset:3px;border:1.6px dashed var(--k-line);border-radius:11px;pointer-events:none}
.lk-pt:active{transform:scale(.93)}
.lk-pt b{font:inherit}
.lk-pt.done{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18);background:linear-gradient(145deg,var(--k-a2),var(--k-a1));box-shadow:0 8px 14px -8px var(--k-ag),inset 0 1.5px 0 rgba(255,255,255,.45)}
.lk-pt.done::before{border-color:rgba(255,255,255,.45)}
.lk-pt.cur{box-shadow:0 0 0 3px #ffc83a,0 0 18px 3px rgba(255,200,58,.5)}
.lk-pt.next{box-shadow:0 0 0 2.5px var(--k-a1),0 0 16px -2px var(--k-ag);animation:lkNext 1.4s ease-in-out infinite alternate}
@keyframes lkNext{from{transform:scale(1)}to{transform:scale(1.07)}}
.lk-pt.lock{opacity:.42;cursor:default}
.lk-pt .ic.lk{width:17px;height:17px;margin-bottom:5px}
.lk-gd{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:3px}
.lk-gd i{width:7px;height:7px;border-radius:50%;background:rgba(var(--shade),.2)}
.lk-pt.done .lk-gd i{background:rgba(255,255,255,.4)}
.lk-gd i.on{background:radial-gradient(circle at 35% 30%,#fff3b8,#ffc93c 55%,#d98a06);box-shadow:0 0 5px rgba(255,200,60,.85)}
.lk-pt.done .lk-gd i.on{background:#fff6c4}
@media (max-width:380px){.lk-quilt{gap:6px}.lk-pt{font-size:.95rem;border-radius:12px}}

/* stats: a bar for every chapter */
.lk-sum.two{grid-template-columns:repeat(2,1fr)}
.lk-chs{display:grid;gap:7px;margin-top:12px;text-align:left}
.lk-cs{display:grid;grid-template-columns:92px minmax(0,1fr) 46px;align-items:center;gap:10px;font:800 .82rem/1 var(--display);color:var(--k-ink)}
.lk-cs em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--k-ink2)}
.lk-cb{height:10px;border-radius:99px;overflow:hidden;background:var(--k-soft);box-shadow:inset 0 0 0 1.5px var(--k-line)}
.lk-cb i{display:block;height:100%;border-radius:99px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 3px,transparent 3px 8px),linear-gradient(180deg,var(--k-a2),var(--k-a1))}

/* the cloths: a swatch of every one */
.lk-th i{background:linear-gradient(145deg,var(--c1),var(--c2))}
.lk-th i.lk-sw-linen{background:repeating-linear-gradient(0deg,rgba(120,90,50,.12) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,90,50,.12) 0 1px,transparent 1px 3px),linear-gradient(145deg,#eadfc8,#d3c19c)}
.lk-th i.lk-sw-gingham{background:repeating-linear-gradient(0deg,rgba(100,150,215,.5) 0 8px,transparent 8px 16px),repeating-linear-gradient(90deg,rgba(100,150,215,.5) 0 8px,transparent 8px 16px),#fbfcff}
.lk-th i.lk-sw-denim{background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 2px,transparent 2px 5px),linear-gradient(145deg,#4a70a0,#2a4772)}
.lk-th i.lk-sw-felt{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 50%),linear-gradient(145deg,#2c7d4a,#12512d)}
.lk-th i.lk-sw-floral{background:radial-gradient(circle,#f0dfe0 0 2px,transparent 2.5px) 0 0/14px 14px,radial-gradient(circle,#f0dfe0 0 1.5px,transparent 2px) 7px 7px/14px 14px,linear-gradient(145deg,#a57ca0,#6f4a6e)}
.lk-th i.lk-sw-knit{background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 3px,rgba(0,0,0,.1) 3px 6px),linear-gradient(145deg,#e07b4a,#b6532b)}

/* the end of a board: a card with the gems; a wide screen puts the result on the left and the buttons on the right (shared), the gems get their own place */
/* gold buttons fill their whole circle, so the row of three needs a little air under the title */
.lk-card .lk-srow{margin-top:12px;margin-bottom:4px}
.lk-card.f1 .lk-srow,.lk-card.f2 .lk-srow{margin-top:8px}