/* =====================================================================
   learn.css · the tutorials' boards (learn.js draws them). Shared by
   tutorial.html and the pictures on guide.html. Uses the site tokens.
   ===================================================================== */
:root{--well:#2B1838;--mark:rgba(43,24,56,.5);--tgt:#2B1838;--wall:#FFFDF8;--wall-side:#CDBDCB;--pit:#EEE6ED;--seam:rgba(43,24,56,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--well:#0C0611;--mark:rgba(253,240,220,.6);--tgt:#FDF0DC;--wall:#4A3956;--wall-side:#2B1F37;--pit:#1A1221;--seam:rgba(253,240,220,.05)}}
:root[data-theme="dark"]{--well:#0C0611;--mark:rgba(253,240,220,.6);--tgt:#FDF0DC;--wall:#4A3956;--wall-side:#2B1F37;--pit:#1A1221;--seam:rgba(253,240,220,.05)}

.board{position:relative;width:min(100%,480px,calc(100svh - 460px));min-width:min(100%,270px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;border-radius:24px}
.board:focus-visible{box-shadow:0 0 0 4px var(--focus)}
.board>svg{display:block;width:100%;height:auto;overflow:visible}
.cchip{display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 38%,var(--surface));border:1.5px solid var(--line);color:var(--ink);font-weight:700;line-height:1.3}
.cchip::before{content:"";width:9px;height:9px;margin-right:5px;border-radius:50%;background:var(--c);border:1.5px solid #2B1838}

/* glowing target: where the guide wants you to act */
.target{fill:#fff;fill-opacity:.12;stroke:var(--tgt);stroke-width:6;stroke-dasharray:16 11;pointer-events:none;animation:march 1.1s linear infinite,glow 1.6s ease-in-out infinite}
@keyframes march{to{stroke-dashoffset:-27}}
@keyframes glow{50%{fill-opacity:.34}}
.kcur{fill:none;stroke:var(--focus);stroke-width:7;pointer-events:none}
.finger circle{fill:#FFFBF3;stroke:#2B1838;stroke-width:5;filter:drop-shadow(0 4px 0 rgba(43,24,56,.35));pointer-events:none}
@media (prefers-reduced-motion:reduce){.target{animation:none}}

/* ---------- Geode ---------- */
.gcell{cursor:pointer}
.gtile{transition:fill .45s ease}
@media (hover:hover){.gcell:not(.gem):not(.miss):hover .gtile{filter:brightness(1.07) saturate(1.1)}}
.gx{fill:none;stroke:var(--mark);stroke-width:9;stroke-linecap:round}
.gmiss{fill:rgba(43,24,56,.85)}
.gmx{fill:none;stroke:#ff5d6c;stroke-width:8;stroke-linecap:round}
.gslab{transition:fill .6s ease}
.ggem{transform-box:fill-box;transform-origin:50% 50%}
.ggem.pop-in{animation:gempop .55s var(--spring) both}
@keyframes gempop{0%{transform:scale(.2) rotate(-25deg);opacity:0}60%{opacity:1}}
.geode-board.won .ggem{animation:gembob .8s var(--spring) both}
@keyframes gembob{40%{transform:translateY(-10px) scale(1.12)}}

/* ---------- Pipes ---------- */
.p-plate{fill:var(--surface-2);stroke:var(--line);stroke-width:5}
.p-cell{fill:var(--surface);stroke:var(--line);stroke-width:3;transition:fill .25s ease}
.p-br{fill:color-mix(in srgb,var(--surface-2) 60%,var(--surface))}
.p-lane{fill:none;stroke:var(--hair);stroke-width:3;stroke-dasharray:6 6}
.p-obst{fill:var(--well);stroke:var(--line);stroke-width:3}
.p-hatch{stroke:rgba(255,255,255,.14);stroke-width:5;stroke-linecap:round}
.p-ink{fill:none;stroke:#2B1838;stroke-width:44;stroke-linecap:round;stroke-linejoin:round}
.p-pipe{fill:none;stroke-width:31;stroke-linecap:round;stroke-linejoin:round}
.p-rail{fill:none;stroke:#2B1838;stroke-width:5;stroke-linecap:round}
.p-route{fill:none;stroke-width:22;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 30;opacity:.85;animation:march 1.1s linear infinite;pointer-events:none}
.p-wall{stroke:#2B1838;stroke-width:13;stroke-linecap:round}
.p-dot{stroke:#2B1838;stroke-width:5;transition:r .2s var(--spring)}
.p-pulse{fill:none;stroke-width:9;opacity:.75;transform-box:fill-box;transform-origin:center;animation:ppulse 1.3s ease-out infinite;pointer-events:none}
@keyframes ppulse{0%{transform:scale(.8);opacity:.85}100%{transform:scale(1.25);opacity:0}}
.pipes-board.won .p-pipe{animation:pipeglow .9s ease both}
@keyframes pipeglow{40%{filter:brightness(1.25) saturate(1.2)}}

/* ---------- Slick: the same tray as the game (tokens match slick.html) ---------- */
.s-side{fill:var(--wall-side);stroke:var(--line);stroke-width:5}
.s-top{fill:var(--wall);stroke:var(--line);stroke-width:5}
.s-pit{fill:var(--pit)}
.s-seam{fill:none;stroke:var(--seam);stroke-width:2}
.s-tile{fill:var(--paint);opacity:0}
.s-tile.on{opacity:1}
/* only tiles painted by this move animate; the rest stay put when the board redraws */
.s-tile.on.fresh{animation:spaint .3s var(--spring) both;transform-box:fill-box;transform-origin:center}
@keyframes spaint{0%{opacity:0;transform:scale(.3)}45%{fill:color-mix(in srgb,var(--paint) 60%,#fff)}}
.s-shade{fill:#14081E;opacity:.3}
.s-face{fill:var(--wall-side)}
.s-edge{fill:none;stroke:var(--line);stroke-width:5;stroke-linejoin:round}
/* the cube: the level colour, darkened, with a lit top and a darker front */
.s-cast{fill:#14081E;opacity:.22}
.s-cube{fill:color-mix(in srgb,var(--paint) 55%,#000)}
.s-g0{stop-color:color-mix(in srgb,color-mix(in srgb,var(--paint) 70%,#000) 68%,#fff)}
.s-g1{stop-color:color-mix(in srgb,var(--paint) 70%,#000)}
.s-lid{stroke:var(--line);stroke-width:3}
.s-rim{fill:none;stroke:var(--line);stroke-width:7}
.s-chev{fill:none;stroke:var(--tgt);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;animation:snudge 1s ease-in-out infinite}
.s-chev.b{animation-delay:.12s;opacity:.55}
@keyframes snudge{50%{transform:translateX(12px)}}
.slick-board.won .s-tile.on{animation:swave .7s ease both}
@keyframes swave{40%{fill:color-mix(in srgb,var(--paint) 60%,#fff)}}
.s-hud{margin:0;display:flex;align-items:center;gap:16px;font-weight:700;font-size:14px;color:var(--ink-2)}
.s-hud b{font-family:var(--mono);font-weight:800;color:var(--ink);font-size:16px}
.s-stars{display:flex;gap:2px}
.s-stars i{color:var(--hair)}
.s-stars i.on{color:var(--sun)}

/* ---------- Topple ---------- */
.topple-board{width:min(100%,560px);aspect-ratio:auto;padding:10px 6px;border:var(--bw) solid var(--line);border-radius:28px;background:linear-gradient(180deg,var(--sky-a,#E8D5EF) 0%,var(--sky-c,#F9D6C6) 55%,var(--sky-b,#FFF0E0) 100%);box-shadow:0 6px 0 var(--line);overflow:hidden}
.topple-board>svg{max-height:calc(100svh - 520px);min-height:180px;margin-inline:auto;width:auto;max-width:100%}
:root{--sky-a:#E8D5EF;--sky-b:#FFF0E0;--sky-c:#F9D6C6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky-a:#140C24;--sky-b:#3A2452;--sky-c:#24163A}}
:root[data-theme="dark"]{--sky-a:#140C24;--sky-b:#3A2452;--sky-c:#24163A}
.t-crack{fill:none;stroke:rgba(122,72,58,.55);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-ring{fill:none;stroke:rgba(255,255,255,.75);stroke-width:4;stroke-linejoin:round}
.t-arrow{fill:#fff;fill-opacity:.85;stroke:#2B1838;stroke-width:4;stroke-linejoin:round;animation:tarrow 1s ease-in-out infinite}
@keyframes tarrow{50%{fill-opacity:.45}}
.topple-board.won .t-goal polygon{filter:brightness(1.12)}
.t-under{display:flex;align-items:center;justify-content:center;gap:12px 22px;flex-wrap:wrap}
.t-pad{display:flex;gap:8px}
.t-pad .iconbtn{width:50px;height:44px;font-size:21px;font-weight:800;line-height:1}
.t-pad .iconbtn.glow{background:var(--game);color:#2B1838;animation:padglow 1.2s ease-in-out infinite}
@keyframes padglow{50%{transform:translateY(-3px)}}

/* ---------- card games: The Impostor, Majority, Timeline ---------- */
.pill{display:inline-flex;align-items:center;padding:2px 10px;border:1.5px solid var(--line);border-radius:999px;background:var(--game);color:#2B1838;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.imp,.maj,.tl{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
/* the ghost finger (tapCue): a fingertip that glides to a choice and taps it */
.tap-hand{position:absolute;left:0;top:0;z-index:4;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#FFFBF3;border:4px solid #2B1838;box-shadow:0 5px 0 rgba(43,24,56,.35);pointer-events:none;transition:transform .55s cubic-bezier(.34,1.3,.5,1)}
.tap-hand::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px solid var(--game);opacity:0}
.tap-hand.tap::after{animation:tapring .9s .45s ease-out}
@keyframes tapring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.cue-on{outline:3px dashed var(--game);outline-offset:4px}
.cue-all{animation:cueall 1.6s ease-in-out infinite}
@keyframes cueall{50%{outline-offset:8px;outline-color:color-mix(in srgb,var(--game) 45%,transparent)}}
@media (prefers-reduced-motion:reduce){.tap-hand{transition:none}}
.imp-head{width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imp-head h3{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;line-height:1.05}
.imp-worth{margin-left:auto;font-weight:700;font-size:14px;color:var(--ink-2)}
.imp-worth b{font-family:var(--mono);color:var(--ink)}
.imp-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.imp-card{--lift:5px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:136px;padding:16px 16px 14px;border:var(--bw) solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:0 var(--lift) 0 var(--line);transition:transform .45s var(--spring),box-shadow .45s var(--spring),background-color .3s}
@media (hover:hover){.imp-card:not(:disabled):hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 calc(var(--lift) + 3px) 0 var(--line)}}
.imp-card:not(:disabled):active{transform:translateY(var(--lift));box-shadow:0 0 0 var(--line);transition-duration:.06s}
.imp-lab{font-weight:700;font-size:15px;color:var(--ink-2);line-height:1.25}
.imp-val{margin-top:auto;font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:clamp(36px,6vw,50px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.imp-unit{font-weight:700;font-size:13px;color:var(--ink-3)}
.imp-card:disabled{cursor:default}
.imp-card.out,.imp-card.real{opacity:.62;box-shadow:0 2px 0 var(--line);transform:translateY(3px)}
.imp-card.fake{background:color-mix(in srgb,var(--bad) 16%,var(--surface));animation:caught .6s var(--spring)}
@keyframes caught{30%{transform:rotate(-3deg) scale(1.04)}}
.imp-card.anchor{box-shadow:0 5px 0 var(--line),0 0 0 4px var(--game)}
.imp-stamp{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1.5px solid var(--line);border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(4deg)}
.imp-stamp.ok{background:color-mix(in srgb,var(--mint) 45%,var(--surface))}
.imp-stamp.bad{background:var(--bad);color:#fff;font-size:14px;transform:rotate(-6deg) scale(1.1)}
.imp-why{width:100%;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:var(--bw) dashed var(--line);border-radius:16px;background:color-mix(in srgb,var(--game) 16%,var(--surface));animation:pop .4s var(--spring) both}
.imp-why p{margin:0;font-size:15px;line-height:1.45}
.imp-why a{color:var(--ink-2);font-weight:700}
.maj-q{margin:0;width:100%;font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.maj-n{font-family:var(--mono);font-weight:800;font-size:13px;color:var(--ink-3)}
.maj-opts{width:100%;display:flex;flex-direction:column;gap:10px}
.maj-opt{--lift:4px;position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:12px 16px;border:var(--bw) solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font-weight:700;font-size:17px;text-align:left;overflow:hidden;box-shadow:0 var(--lift) 0 var(--line);transition:transform .45s var(--spring),box-shadow .45s var(--spring)}
@media (hover:hover){.maj-opt:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 calc(var(--lift) + 2px) 0 var(--line)}}
.maj-opt:not(:disabled):active{transform:translateY(var(--lift));box-shadow:0 0 0 var(--line);transition-duration:.06s}
.maj-opt span,.maj-opt b,.maj-opt em{position:relative}
.maj-fill{position:absolute;inset:0 auto 0 0;width:var(--p);background:color-mix(in srgb,var(--game) 30%,transparent);border-right:var(--bw) solid transparent;transition:width .9s var(--spring)}
.maj-opt.win .maj-fill{background:var(--game);border-right-color:var(--line)}
.maj-opt b{margin-left:auto;font-family:var(--display);font-weight:800;font-size:24px}
.maj-opt em{font-style:normal;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:1px 8px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface)}
.maj-opt:disabled{cursor:default}
.tl-ends{width:100%;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tl-tries{display:flex;align-items:center;gap:5px;color:var(--ink-2)}
.tl-tries i{width:14px;height:14px;border:1.5px solid var(--line);border-radius:5px;background:transparent}
.tl-tries i.on{background:var(--game)}
.tl-row{list-style:none;margin:0;padding:0 0 26px;width:100%;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;position:relative}
.tl-row::after{content:"";position:absolute;left:0;right:6px;bottom:8px;height:3px;border-radius:3px;background:var(--line)}
.tl-row li{position:relative}
.tl-row li::after{content:"";position:absolute;left:50%;bottom:-25px;width:14px;height:14px;translate:-50% 0;border:2.5px solid var(--line);border-radius:50%;background:var(--surface);z-index:1}
.tl-card{--lift:5px;position:relative;width:100%;height:100%;min-height:150px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 14px;border:var(--bw) solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:0 var(--lift) 0 var(--line);touch-action:none;transition:transform .45s var(--spring),box-shadow .45s var(--spring),background-color .3s}
.tl-card b{margin-top:auto;font-weight:800;font-size:15.5px;line-height:1.2}
.tl-card .tl-grip{position:absolute;top:10px;right:10px;color:var(--ink-3);font-size:16px}
.tl-card.sel{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 calc(var(--lift) + 8px) 0 var(--line),0 0 0 4px var(--game)}
.tl-card.drag{z-index:5;transition:none;pointer-events:none;box-shadow:0 14px 0 var(--line)}
.tl-card.lock{background:color-mix(in srgb,var(--mint) 34%,var(--surface));cursor:default;animation:pop .45s var(--spring) both}
.tl-card.miss{background:color-mix(in srgb,var(--sun) 30%,var(--surface))}
.tl-year{font-family:var(--display);font-weight:800;font-size:26px;line-height:1}
@media (max-width:640px){
  .imp-grid{gap:10px}.imp-card{min-height:118px;padding:13px 12px 12px}
  .tl-row{grid-template-columns:1fr;gap:10px;padding:0 0 0 26px}
  .tl-row::after{left:6px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .tl-row li::after{left:-20px;top:50%;bottom:auto;translate:0 -50%}
  .tl-card{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 40px 12px 12px}
  .tl-card b{margin-top:0;flex-basis:100%}
  .tl-year{position:absolute;right:12px;top:50%;translate:0 -50%;font-size:22px}
}
.t-ghost{fill:none;stroke-width:4;stroke-dasharray:10 8;opacity:.9}
.t-notch{fill:none;stroke:#FFFBF3;stroke-width:5;stroke-linecap:round}

/* ---------- Cobble (pictures) ---------- */
.c-sand{fill:#F2E3C2}
.c-sock{fill:none;stroke:rgba(122,92,72,.28);stroke-width:3;stroke-dasharray:9 11}
.c-tile{fill:#FFFBF3;stroke:#2B1838;stroke-width:4.5}
.c-n{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:36px;fill:#2B1838;text-anchor:middle;dominant-baseline:central}
.c-n.q{fill:#D9644A}
.c-carve{font-family:"Caveat Brush","Comic Sans MS",cursive;font-size:60px;fill:#2B1838;fill-opacity:.72;text-anchor:middle;dominant-baseline:central}
.c-carve.lip{fill:#fff;fill-opacity:.6}
.c-stone.bad>path:nth-child(2){stroke:#D52F4A;stroke-width:7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-sand{fill:#4A3A2E}}
:root[data-theme="dark"] .c-sand{fill:#4A3A2E}