/* ═══════════════════════════════════════════
   THE GUIDE (js/tutorial.js) — Pocket-style lesson layer + the Guide list
   One spotlight (cyan brackets) on a washed-out board, one short line.
═══════════════════════════════════════════ */
.tut-dim,.tut-brackets,.tut-bubble,.tut-hand,.tut-catch,.tut-chip,.tut-done{display:none;}
.tut-dim.on,.tut-catch.on,.tut-chip.on{display:block;}
.tut-dim{position:fixed;inset:0;z-index:1100;background:rgba(238,243,250,.8);transition:clip-path .25s ease;}
.tut-catch{position:fixed;inset:0;z-index:1103;cursor:pointer;}
/* a card tapped open on a choice step: the Guide steps aside while it's read */
body.tut-peek :is(.tut-dim,.tut-brackets,.tut-bubble,.tut-hand){display:none !important;}

/* cyan corner brackets around the spotlight */
.tut-brackets.on{display:block;position:fixed;z-index:1101;pointer-events:none;transition:all .25s ease;animation:tutPulse 1.2s ease-in-out infinite alternate;}
.tut-br{position:absolute;width:18px;height:18px;border:3.5px solid #2fc4e2;filter:drop-shadow(0 0 4px #2fc4e299);}
.tut-br.tl{left:-4px;top:-4px;border-right:0;border-bottom:0;border-radius:8px 0 0 0;}
.tut-br.tr{right:-4px;top:-4px;border-left:0;border-bottom:0;border-radius:0 8px 0 0;}
.tut-br.bl{left:-4px;bottom:-4px;border-right:0;border-top:0;border-radius:0 0 0 8px;}
.tut-br.br{right:-4px;bottom:-4px;border-left:0;border-top:0;border-radius:0 0 8px 0;}
@keyframes tutPulse{from{transform:scale(1);}to{transform:scale(1.025);}}

/* focus on a small detail inside the spotlight (a stamina number): it pops up and a cyan ring pulses out of it */
.tut-focus{z-index:6!important;outline:1.5px solid #fff;filter:drop-shadow(0 0 1.5px #2fc4e2) drop-shadow(0 0 1.5px #2fc4e2) drop-shadow(0 2px 4px #1d3c5a55);
  animation:tutFocusPop .45s cubic-bezier(.2,1.6,.4,1) both,tutFocusBeat 1.1s ease-in-out .45s infinite;}
.tut-focus::after{content:'';position:absolute;inset:-1px;border-radius:4px;pointer-events:none;box-shadow:0 0 0 2px #2fc4e2;animation:tutFocusRing 1.1s ease-out infinite;}
@keyframes tutFocusPop{0%{transform:scale(1);}60%{transform:scale(2.3);}100%{transform:scale(1.9);}}
@keyframes tutFocusBeat{0%,100%{transform:scale(1.9);}50%{transform:scale(1.7);}}
@keyframes tutFocusRing{0%{opacity:1;inset:-1px;}100%{opacity:0;inset:-7px;}}
@media(prefers-reduced-motion:reduce){.tut-focus{animation:none;transform:scale(1.9);}.tut-focus::after{animation:none;opacity:0;}}
/* the thing to tap: a cyan outline and a ring rippling out (shows on any card colour).
   No scale: the spotlight hole follows the target's rect, and a beat would make it jitter. */
.tut-tap{outline:2.5px solid #2fc4e2!important;outline-offset:2px;animation:tutTapPulse 1.1s ease-out infinite!important;}
@keyframes tutTapPulse{0%{box-shadow:0 0 0 0 #2fc4e2dd,0 0 10px #2fc4e299;}70%,100%{box-shadow:0 0 0 14px #2fc4e200,0 0 10px #2fc4e299;}}
@media(prefers-reduced-motion:reduce){.tut-tap{animation:none!important;box-shadow:0 0 10px #2fc4e2;}}

/* one short line, typed out */
.tut-bubble.on{display:block;position:fixed;z-index:1102;pointer-events:none;background:#fff;border-radius:22px;padding:14px 20px;
  box-shadow:0 0 0 2px #bfeef8,0 0 18px #2fc4e255,0 8px 24px #1d3c5a26;animation:tutIn .25s ease-out both;}
.tut-text{font:600 15px/1.45 var(--font-ui);color:var(--ui-ink);min-height:22px;}
.tut-feedback-title,.tut-retry{display:none;}
.tut-bubble.feedback{pointer-events:auto;border:2px solid #b76a19;background:#fffaf1;box-shadow:0 8px 24px #1d3c5a26;}
.tut-bubble.feedback .tut-feedback-title{display:block;margin-bottom:8px;color:#87460c;font:750 19px/1.3 var(--font-ui);}
.tut-bubble.feedback .tut-retry{display:block;width:100%;min-height:44px;margin-top:16px;border:0;border-radius:12px;background:#87460c;color:#fff;font:700 14px var(--font-ui);cursor:pointer;}
.tut-retry:focus-visible{outline:3px solid #294465;outline-offset:3px;}
.tut-more{position:absolute;right:14px;bottom:4px;font-size:12px;color:#2fc4e2;opacity:0;}
.tut-bubble.typed .tut-more{opacity:1;animation:tutBob .8s ease-in-out infinite alternate;}
@keyframes tutIn{from{opacity:0;transform:translateY(6px);}}
@keyframes tutBob{from{transform:translateY(0);}to{transform:translateY(3px);}}

/* pointing hand on the one thing you can tap */
.tut-hand.on{display:block;position:fixed;z-index:1102;pointer-events:none;font-size:34px;line-height:1;
  filter:drop-shadow(0 3px 4px #0003);animation:tutTap 1s ease-in-out infinite;}
@keyframes tutTap{0%,100%{transform:translate(0,10px) scale(1);}50%{transform:translate(0,0) scale(.88);}}

/* lesson label + skip */
.tut-chip{position:fixed;left:12px;top:10px;z-index:1104;background:#294465;color:#fff;border-radius:999px;padding:4px 10px;
  font:600 10.5px var(--font-ui);pointer-events:none;}

/* lesson complete */
.tut-done.on{display:grid;place-items:center;position:fixed;inset:0;z-index:1105;background:rgba(32,57,82,.45);backdrop-filter:blur(3px);}
.tut-done-card{width:min(320px,calc(100vw - 40px));background:#fff;border-radius:24px;padding:26px 22px 18px;text-align:center;
  box-shadow:0 12px 40px #0004;animation:tutIn .3s ease-out both;font-family:var(--font-ui);}
.tut-done-tick{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:#2f8f6a;color:#fff;font:700 28px/56px var(--font-ui);
  box-shadow:0 0 0 6px #2f8f6a22;}
.tut-done-k{font:600 11px var(--font-ui);letter-spacing:1px;text-transform:uppercase;color:var(--ui-muted);}
.tut-done-card h2{font:700 21px/1.25 var(--font-ui);color:var(--ui-ink);margin:4px 0 18px;}
.tut-done-card .game-primary{width:100%;}
.tut-done-back{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--ui-muted);font:600 13px var(--font-ui);padding:8px;cursor:pointer;}

/* ═══ Guide list (Learn screen) ═══ */
.guide-head{text-align:center;padding:6px 20px 14px;}
.guide-head .guide-ic{width:46px;height:46px;margin:0 auto 6px;border-radius:14px;background:#e3f6fb;color:#1fa3c4;display:grid;place-items:center;font-size:22px;}
.guide-head p{margin:0;font:500 12px var(--font-ui);color:var(--m-ink2,#5c737b);}
.guide-list{display:flex;flex-direction:column;gap:9px;padding:0 16px 18px;}
.guide-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--m-line,#dce5e3);
  border-radius:16px;padding:10px 12px 10px 10px;cursor:pointer;font-family:var(--font-ui);}
.guide-row .gr-num{flex:none;width:38px;height:38px;border-radius:12px;background:#2fc4e2;color:#fff;display:grid;place-items:center;font:700 14px var(--font-ui);}
.guide-row .gr-t{flex:1;font:600 14px var(--font-ui);color:var(--m-ink,#183842);}
.guide-row .gr-t small{display:block;font:500 11px var(--font-ui);color:#1fa3c4;margin-top:1px;}
.guide-row .gr-ck{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--m-line,#dce5e3);display:grid;place-items:center;font:700 12px var(--font-ui);color:transparent;}
.guide-row.done .gr-num{background:#9fb6c4;}
.guide-row.done .gr-ck{background:#2f8f6a;border-color:#2f8f6a;color:#fff;}
.guide-row.next{box-shadow:0 0 0 2px #2fc4e2,0 4px 14px #2fc4e233;}
.guide-play{padding:4px 16px 24px;}
.guide-play .game-primary{width:100%;}

/* lesson reward (shown on the Guide screen) */
.tut-reward-card{width:120px;margin:2px auto 8px;animation:tutGift .5s cubic-bezier(.2,1.5,.4,1) both;}
.tut-reward-card .mc{width:100%;box-shadow:0 8px 22px #1d3c5a33,0 0 0 3px #fff,0 0 22px #2fc4e266;}
.tut-reward-t{margin:0 0 16px;font:500 13px var(--font-ui);color:var(--ui-muted);}
.tut-reward-t b{color:var(--ui-ink);font-weight:700;}
@keyframes tutGift{from{opacity:0;transform:scale(.6) rotate(-8deg);}}
.guide-lock{margin:0;text-align:center;font:500 12px var(--font-ui);color:var(--ui-muted);background:#f2f6fb;border:1px dashed #cdd9e6;border-radius:14px;padding:12px;}
.tut-learned{margin:-8px 0 18px;font:500 13.5px/1.45 var(--font-ui);color:var(--ui-muted);}
.tut-reward-pack{width:110px;margin:4px auto 10px;animation:tutGift .5s cubic-bezier(.2,1.5,.4,1) both;}
.tut-reward-pack .pack{width:100%;}
/* drag hint: the hand slides from the card to where it goes */
.tut-hand.on.drag{animation:tutDrag 1.6s ease-in-out infinite;}
@keyframes tutDrag{0%,12%{transform:translate(0,0) scale(1);opacity:0;}20%{opacity:1;transform:translate(0,0) scale(.88);}
  72%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(.88);}88%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1);}}
@media(prefers-reduced-motion:reduce){.tut-hand.on.drag{animation:none;}}