/* tutorial (tutorial.js): the game screen with a coach in place of the CPU's hand */
#tutSkip{display:none;margin-left:auto;min-height:36px}
body.tut #tutSkip{display:inline-flex}
body.tut #btnQuit,body.tut #btnHow,body.tut #btnSnd,body.tut #btnEmote,body.tut #tagTop{display:none}
body.tut #handTop,body.tut-fin #handBot{visibility:hidden}
/* outside the screens, so they get the screen's zoom themselves (tutPlace divides by it) */
.tut-coach,.tut-next,.tut-tag{zoom:var(--ui)}
.tut-coach{position:fixed;z-index:calc(var(--z-banner) - 2);display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;
  background:var(--surf2);border:1px solid var(--line2);color:var(--text);font:400 14.5px/1.4 var(--body);
  box-shadow:0 14px 36px rgba(var(--sh),calc(.7*var(--shk)));transition:opacity .25s}
.tut-coach[hidden],.tut-next[hidden]{display:none}
.tut-coach p{margin:0}
.tut-coach b{color:var(--accent-ink);font-weight:700}
.tut-coach.dim{opacity:.6}
.tut-coach.in{animation:tutIn .35s var(--spring)}
.tut-coach.shake{animation:tutShake .4s}
@keyframes tutIn{from{opacity:0;transform:translateY(-8px) scale(.97)}}
@keyframes tutShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tc-av{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:26px;background:linear-gradient(160deg,var(--blue1),var(--blue2))}
.tc-k{font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.tut-next{position:fixed;z-index:calc(var(--z-banner) - 2);translate:-50% -50%;padding:10px 26px;white-space:nowrap;animation:tutIn .35s var(--spring)}
@supports not (translate:0 0){.tut-next{transform:translate(-50%,-50%)}} /* Chrome before 104 */
/* the square to play on, and the card to pick */
.cell.tut-target{border-color:var(--hot);animation:tutGlow 1.1s ease-in-out infinite}
@keyframes tutGlow{50%{box-shadow:inset 0 0 26px color-mix(in srgb,var(--hot) 55%,transparent),0 0 18px var(--accent-glow)}}
.hand .card.tut-pulse{animation:tutLift 1.1s ease-in-out infinite}
@keyframes tutLift{50%{transform:translateY(-6px)}}
/* the lessons in the rule bar */
.rulebar span.tut-on{color:var(--on-accent);background:var(--accent);border-color:transparent;font-weight:600}
.rulebar span.tut-done{color:var(--accent-ink)}
/* a tag on the edge where two cards touch: "8 = 8", "2 + 3 = 5", "7 › 6"; older ones fade */
.tut-tag{position:fixed;z-index:calc(var(--z-banner) - 1);pointer-events:none;transform:translate(-50%,-50%) scale(.6);opacity:0;
  transition:opacity .2s,transform .3s var(--spring);font:800 calc(var(--cell) * .11) var(--display);padding:.2em .55em;border-radius:.55em;
  background:var(--surf2);border:1.5px solid var(--gold-tag);color:var(--gold-tag);white-space:nowrap;box-shadow:0 4px 14px rgba(var(--sh),calc(.5*var(--shk)))}
.tut-tag.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tut-tag.on.old{opacity:.4}
/* the touching numbers light up (also in How to play's examples) */
.card .nums b.hl{color:#ffd76a;scale:1.25;transition:scale .25s var(--spring)}
/* each grows outward, so a lit top and a lit left never run into each other */
.card .nums b.n0.hl{transform-origin:50% 100%}.card .nums b.n1.hl{transform-origin:0 50%}.card .nums b.n2.hl{transform-origin:50% 0}.card .nums b.n3.hl{transform-origin:100% 50%}
:root{--gold-tag:#ffd76a} :root[data-theme="light"]{--gold-tag:#9a6a00}
.tut-pk{display:flex;justify-content:center;margin:6px 0 10px}