/* Join the yarn (/play/yarn, yarn.js): the board. The frame (bar, win card, confetti, How to play) is game.css. */
/* the way back has a row of its own here, with the question mark on its right on phones */
.yarn-page .mg-head{margin-bottom:80px}
/* JOINED and TIME: more room between them than the frame's 22 px, the two numbers read as one otherwise */
.yarn-page .mg-stats{gap:40px}
.yw-toprow{display:flex;justify-content:space-between;align-items:flex-start}
/* how to play (Yarn.astro .yw-help): a card over the field like the win card, at the first visit and from the question mark button.
   The demo on it: a little board in the middle of a game, played by a hand, on a loop. It shows the rule that is easy to
   miss: the short way leaves squares empty, so the thread goes round */
.yw-help{position:absolute;inset:0;display:grid;place-items:center;background:#fffcf3d9;border-radius:inherit;z-index:4;animation:mg-fade .3s both;padding:12px}
.yw-help[hidden]{display:none}
.yw-help-card{background:var(--cream);border:1.5px solid var(--line);border-radius:28px;padding:26px 32px 28px;text-align:center;max-width:min(400px,100%);box-shadow:0 20px 50px #20242822;animation:mg-deal .5s var(--ease-pop) both}
.yw-demo-board{display:block;width:min(210px,52vw);height:auto;margin:0 auto 16px;overflow:visible}
.yw-help-title{font:700 clamp(24px,2.6vw,30px)/1.15 Rubik,sans-serif;letter-spacing:-.03em;margin:0 0 6px}
.yw-help-text{margin:0 0 20px;font-size:16px;line-height:1.5;color:#45484b}
/* the question mark: a small round button lying on the field, top left (the board is square, so there is room beside it) */
.yw-tip{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff0bf;color:var(--ink);transition:transform .25s var(--ease-pop),background .2s}
.yw-tip .mg-ico{width:22px;height:22px}
.yw-tip:hover{transform:rotate(-10deg) scale(1.06);background:#fde7a2}
.yw-tip.is-field{position:absolute;left:16px;top:14px;z-index:2}
.yw-tip.is-top,.yw-tip.yw-print-top{display:none}
.yw-toptools{display:flex;gap:10px}
.yw-demo .sq{fill:#fffcf3}
.yw-demo .tn{opacity:.32}
.yw-demo .th{fill:none;stroke-width:.3;stroke-linecap:round;stroke-linejoin:round}
.yw-demo .bl circle{stroke:var(--ink);stroke-width:.05}
.yw-demo .bl path{fill:none;stroke:var(--ink);stroke-opacity:.35;stroke-width:.03;stroke-linecap:round}
.yw-demo .bl.blue>*{transform-box:fill-box;transform-origin:center}
.yw-demo .hole{fill:none;stroke:#e9b500;stroke-width:.05;stroke-dasharray:.12 .08;opacity:0}
.yw-demo .hand path{fill:var(--ink);stroke:#fffcf3;stroke-width:14;paint-order:stroke}
.yw-demo .hand{filter:drop-shadow(0 .03px .05px #20242840)}
/* one round is 7 s: short way (8-18%), the holes blink (18-34%), back (34-40%), round the long way (40-70%), joined (70%),
   a rest, then everything fades for the next round */
.yw-demo .short,.yw-demo .long{stroke-dasharray:100;stroke-dashoffset:100}
.yw-demo .short{animation:ywd-short 7s linear infinite}
.yw-demo .long{animation:ywd-long 7s linear infinite}
.yw-demo .hole{animation:ywd-hole 7s linear infinite}
.yw-demo .d0{animation:ywd-d0 7s linear infinite}
.yw-demo .d1{animation:ywd-d1 7s linear infinite}
.yw-demo .d2{animation:ywd-d2 7s linear infinite}
.yw-demo .bl.blue>*{animation:ywd-pop 7s linear infinite}
.yw-demo .hand{animation:ywd-hand 7s ease-in-out infinite}
@keyframes ywd-short{0%,8%{stroke-dashoffset:100;opacity:1}18%,34%{stroke-dashoffset:0;opacity:1}38%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ywd-long{0%,40%{stroke-dashoffset:100;opacity:1}50%{stroke-dashoffset:66.7}60%{stroke-dashoffset:33.3}70%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ywd-hole{0%,18%{opacity:0}21%{opacity:1}24%{opacity:.2}27%{opacity:1}30%{opacity:.2}33%{opacity:1}36%,100%{opacity:0}}
@keyframes ywd-d0{0%,8%{opacity:0}10%,90%{opacity:.32}96%,100%{opacity:0}}
@keyframes ywd-d1{0%,49%{opacity:0}51%,90%{opacity:.32}96%,100%{opacity:0}}
@keyframes ywd-d2{0%,59%{opacity:0}61%,90%{opacity:.32}96%,100%{opacity:0}}
@keyframes ywd-pop{0%,69%{transform:none}73%{transform:scale(1.3)}77%{transform:scale(.94)}80%,100%{transform:none}}
@keyframes ywd-hand{0%{transform:translate(1.5px,1.5px);opacity:0}5%,8%{transform:translate(1.5px,1.5px);opacity:1}18%,34%{transform:translate(2.5px,1.5px)}
  40%{transform:translate(1.5px,1.5px)}50%{transform:translate(1.5px,2.5px)}60%{transform:translate(2.5px,2.5px)}70%,80%{transform:translate(2.5px,1.5px);opacity:1}86%,100%{transform:translate(2.5px,1.5px);opacity:0}}
.yw-stage{position:relative}
/* the board is square and never taller than the screen minus menu and bar (as the maze, maze.css), and its squares
   never bigger than --cell (yarn.js sets --n, the squares on a side): big squares look like a toy board and a thread
   has to be dragged a long way, so the easy board stays small and the hard one grows */
.yw-box{--budget:328px;position:relative;display:block;margin:0 auto;width:min(100%,calc(100svh - var(--budget)));max-width:calc(var(--n,5) * var(--cell));--cell:88px;border-radius:18px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.yw-box:focus{outline:none}
.yw-box:focus-visible{outline:3px solid #7254c4;outline-offset:6px}
.yw-svg{display:block;width:100%;height:auto;overflow:visible}
.yw-box.is-new .yw-svg{animation:mg-deal .45s var(--ease-pop) both}
/* squares: flat paper tiles; a square with a thread on it takes a light wash of the thread's colour */
.yw-squares rect{fill:#f0ede2}
.yw-tint rect{opacity:.32}
/* threads: the colour, with a lighter twist along it like a strand of wool */
.yw-thread{fill:none;stroke-width:.3;stroke-linecap:round;stroke-linejoin:round}
.yw-twist{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:.06;stroke-dasharray:.06 .1;stroke-linecap:round;stroke-linejoin:round}
/* balls: colour, ink outline, strands of wound yarn */
.yw-ball circle{stroke:var(--ink);stroke-width:.05}
.yw-strand{fill:none;stroke:var(--ink);stroke-opacity:.35;stroke-width:.03;stroke-linecap:round}
.yw-ball>*{transform-box:fill-box;transform-origin:center}
/* the other ball of the pair bounces when one is picked up; both pop when the pair is joined */
.yw-ball.is-buddy>*{animation:yw-buddy .5s var(--ease-pop)}
.yw-ball.is-pop>*{animation:yw-pop .45s var(--ease-pop)}
@keyframes yw-buddy{40%{transform:scale(1.22)}}
@keyframes yw-pop{35%{transform:scale(1.3)}70%{transform:scale(.94)}}
/* the keyboard frame (only when the board has keyboard focus); solid while a thread is in hand */
.yw-frame{fill:none;stroke:#7254c4;stroke-width:.06;stroke-dasharray:.14 .1;opacity:0;pointer-events:none}
.yw-frame.is-on{opacity:1}
.yw-frame.is-holding{stroke-dasharray:none;stroke-width:.08}
/* solved: the threads take a little breath together */
.yw-box.is-done .yw-threads{animation:yw-done .6s var(--ease-pop)}
@keyframes yw-done{50%{transform:scale(1.015)}}
.yw-threads{transform-box:fill-box;transform-origin:center}

/* half way (every pair joined, squares still empty): the empty squares blink with a dashed edge in a deeper yellow (ink
   was too hard next to the yarn) like in the demo, and
   Cubi says what's next in a yellow bubble over the middle of the board for a few seconds (drags go through it) */
.yw-holes rect{fill:#feda62;fill-opacity:0;stroke:#e9b500;stroke-width:.06;stroke-dasharray:.12 .08;animation:yw-hole 1.3s ease-in-out infinite}
@keyframes yw-hole{50%{fill-opacity:.45;stroke-opacity:.45}}
.yw-note{position:absolute;inset:0;display:grid;place-items:center;background:#fffcf373;border-radius:inherit;z-index:3;padding:12px;animation:mg-fade .3s both}
.yw-note[hidden]{display:none}
.yw-note-card{position:relative;background:#feda62;border-radius:26px;padding:18px 24px 20px;text-align:center;max-width:min(380px,100%);box-shadow:0 16px 40px #20242830;animation:mg-deal .5s var(--ease-pop) both}
.yw-note-card .yw-demo-board{width:min(130px,40vw);margin-bottom:10px}
.yw-note-card .sq{fill:#fffcf3}
.yw-note-title{margin:0 0 10px;font:700 21px/1.2 Rubik,sans-serif;letter-spacing:-.02em}
/* Cubi cheering beside the card, at its bottom left corner, half outside, so the texts on the card stay centred. Drawn
   from the parts of her reactions file (Cubi Reakcje): the body stays still, only the arms wave (her cb-wave, slower and
   smaller) and the eyes blink (her cb-blink) */
.yw-note-cubi{position:absolute;left:-60px;bottom:-6px;width:104px;height:auto;overflow:visible;pointer-events:none;animation:yw-note-cubi-in .5s var(--ease-pop) .2s both}
@keyframes yw-note-cubi-in{from{opacity:0;transform:translate(24px,10px) scale(.6) rotate(10deg)}}
.yw-note-cubi .arm{transform-box:view-box;animation:yw-wave-r 1.6s ease-in-out infinite}
.yw-note-cubi .arm.r{transform-origin:2100px 947px}
.yw-note-cubi .arm.l{transform-origin:1660px 947px;animation-name:yw-wave-l;animation-delay:-.4s}
@keyframes yw-wave-r{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(22deg)}}
@keyframes yw-wave-l{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-22deg)}}
.yw-note-cubi .eye{transform-box:fill-box;transform-origin:center;animation:yw-blink 3.6s ease-in-out infinite}
@keyframes yw-blink{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.08)}}
.yw-note-text{margin:0 0 22px;font:500 15px/1.4 'DM Sans',sans-serif}
/* on the half way card the demo starts where the player is: the short way taken, the empty squares blinking */
.yw-demo.is-half *{animation-delay:-1.26s!important}

/* New board pluses, as New maze (maze.css): on hover they twinkle one after another; on a click all three spin and the
   small ones jump out from the big one and back (yarn.js adds .is-burst) */
.mg-new .mg-ico path,.mg-again .mg-ico path{transform-box:fill-box;transform-origin:center}
.mg-new:hover .mg-ico path,.mg-again:hover .mg-ico path{animation:yw-twinkle .5s var(--ease-pop) both}
.mg-new:hover .mg-ico path:nth-of-type(2),.mg-again:hover .mg-ico path:nth-of-type(2){animation-delay:.08s}
.mg-new:hover .mg-ico path:nth-of-type(3),.mg-again:hover .mg-ico path:nth-of-type(3){animation-delay:.16s}
@keyframes yw-twinkle{50%{transform:scale(1.35) rotate(45deg)}100%{transform:rotate(90deg)}}
.is-burst .mg-ico path{animation:yw-spin .6s var(--ease-pop) both!important}
.is-burst .mg-ico path:nth-of-type(2){animation-name:yw-out-lo!important}
.is-burst .mg-ico path:nth-of-type(3){animation-name:yw-out-hi!important}
@keyframes yw-spin{40%{transform:scale(.7) rotate(-90deg)}100%{transform:rotate(180deg)}}
@keyframes yw-out-lo{45%{transform:translate(3px,3px) scale(1.4) rotate(90deg)}100%{transform:rotate(180deg)}}
@keyframes yw-out-hi{45%{transform:translate(3px,-3px) scale(1.4) rotate(90deg)}100%{transform:rotate(180deg)}}
/* win: Cubi dances, Mini dances along (as the maze) */
.yw-duo{display:flex;align-items:flex-end;justify-content:center;margin:0 auto -6px}
.yw-duo .mg-dance{width:min(190px,42vw);margin:0}
.yw-duo-mini{width:min(92px,21vw);height:auto;margin:0 0 14px -18px;transform-origin:50% 100%;animation:yw-mini-dance .75s ease-in-out infinite alternate}
@keyframes yw-mini-dance{0%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(0)}100%{transform:translateY(0) rotate(8deg)}}

/* "Print this board": a quiet link in the bottom right corner of the field */
.yw-print-btn{position:absolute;right:16px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;border:0;background:none;border-radius:20px;padding:7px 12px 7px 10px;font-weight:600;font-size:13px;color:#45484b;transition:background .2s,color .2s}
.yw-print-btn .mg-ico{width:18px;height:18px}
.yw-print-btn:hover{background:#fff0bf;color:var(--ink)}
.yw-sheet{display:none}
@media print{
  @page{size:A4 portrait;margin:14mm}
  body>*:not(.yw-sheet){display:none!important}
  html,body{background:#fff!important}
  .yw-sheet{display:flex;flex-direction:column;align-items:center;gap:3mm;width:100%;height:265mm;color:#202428;font-family:'DM Sans',sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .yw-sheet-logo{height:9mm;width:auto}
  .yw-sheet-title{margin:3mm 0 0;font:700 26pt/1.1 Rubik,sans-serif;letter-spacing:-.03em}
  .yw-sheet-level{margin:0;display:flex;align-items:center;gap:2mm;font:600 11pt Rubik,sans-serif;color:#45484b}
  .yw-sheet-level .mg-dots{display:inline-flex;gap:1mm}.yw-sheet-level .mg-dots u{width:2.2mm;height:2.2mm;border-radius:50%;background:#d8d8d8}.yw-sheet-level .mg-dots u.on{background:#202428}
  .yw-sheet-board{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;margin-top:4mm}
  .yw-sheet-board svg{max-width:100%;max-height:190mm}
  /* on paper the squares are outlines, so a crayon shows on them */
  .yw-sheet-board .yw-squares rect{fill:#fff;stroke:#202428;stroke-width:.03}
  .yw-sheet-text{margin:0;font-size:11pt;line-height:1.5;color:#45484b;text-align:center;max-width:178mm}
  .yw-sheet-foot{margin:0;font-size:9pt;color:#626466}
}

@media(pointer:coarse) and (min-width:761px){
  .yw-box{--cell:72px;--budget:calc(var(--bar,48px) + 256px);width:min(100%,calc(var(--screen,100svh) - var(--budget)))}
}
/* computers: the field keeps the height of the biggest board, so the tray does not jump between levels and the easy
   board sits in the middle with room above and below; the easy board's squares are a little bigger */
@media(min-width:761px) and (pointer:fine){
  .yw-stage{display:flex;flex-direction:column;justify-content:center;min-height:calc(min(100svh - 328px, 792px) + 64px)}
  .yw-box[data-n="5"]{--cell:100px}
}
/* full screen and focus mode: squares a little bigger (the board is all there is to see), the board in the middle of the field */
.mg-game.is-full .yw-box{--cell:88px;--budget:calc(var(--bar,48px) + 110px);width:min(100%,calc(var(--fh,100vh) - var(--budget)))}
.mg-game.is-full .yw-stage{display:flex;flex-direction:column;justify-content:center}
/* bigger than a phone: the board leaves a gutter on both sides of the field for the round buttons lying on it (the
   question mark top left, the printer bottom right), so a big board never covers them */
@media(min-width:761px){
  .yw-box{max-width:min(calc(100% - 112px),calc(var(--n,5) * var(--cell)))}
  /* a narrower tray (tablets): the printer is a small round button in the corner, without its label */
  @container tray (max-width:1000px){
    .yw-print-btn{right:12px;bottom:12px;width:40px;height:40px;padding:0;justify-content:center;background:#fff0bf}
    .yw-print-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }
  @container tray (max-width:800px){.mg-new span{display:none}.mg-new{padding:0}}
  @container tray (max-width:690px){.mg-stats{display:none}}
}
@media(max-width:760px){
  /* phones: the printer on the field would sit on a ball (the board fills the field), so it waits above the tray, next to the question mark */
  .yw-print-btn{display:none}
  .yw-box{--budget:260px;border-radius:12px;width:min(100%,calc(var(--screen,100svh) - var(--budget)))}
  .yw-note-card{padding:14px 18px 16px;border-radius:22px}
  .yw-note-card .yw-demo-board{width:104px}
  .yw-note-title{font-size:18px}
  .yw-note-text{font-size:14px;margin-bottom:16px}
  .yw-note-title{margin-bottom:8px}
  /* phones: the card is almost as wide as the field, so Cubi jumps on its top left corner instead */
  .yw-note-cubi{left:-10px;top:-50px;bottom:auto;width:80px}
  .mg-stats{display:none}
}
@media(max-width:760px){
  .yarn-page .mg-head{margin-bottom:34px}
  /* phones: the board fills the field, so the question mark goes above the tray, opposite the way back */
  .yw-tip.is-field{display:none}
  .yw-tip.is-top,.yw-tip.yw-print-top{display:grid;width:48px;height:48px}
  .yw-help-card{padding:18px 20px 20px;border-radius:22px}
  .yw-demo-board{width:140px;margin-bottom:12px}
  .yw-help-title{font-size:22px}
  .yw-help-text{font-size:15px;margin-bottom:16px}
}
/* without motion: the board already solved the long way round, no hand */
@media(prefers-reduced-motion:reduce){
  .yw-demo .short,.yw-demo .hole,.yw-demo .hand{display:none}
  .yw-demo .long{animation:none!important;stroke-dashoffset:0}
  .yw-demo .d0,.yw-demo .d1,.yw-demo .d2{animation:none!important;opacity:.32}
  .yw-ball>*,.mg-ico path,.yw-note,.yw-note-cubi,.yw-note-cubi *,.yw-holes rect,.yw-duo-mini,.yw-box.is-done .yw-threads{animation:none!important}
  .yw-box.is-new .yw-svg{animation:none}
  .yw-holes rect{fill-opacity:.3}
}