/* Alchemy Path lab. Themes are variable sets on :root; chips stay parchment in every theme. Animations are transform/opacity only. */
:root,[data-theme="candlelit"]{--ink:#120f1c;--vellum:#1d1830;--leather:#3a1f1a;--gold:#d9b45a;--ember:#ff9a3c;--arcane:#8fd6ff;--text:#f0e6d0;--dim:#a99fbd;--line:rgba(217,180,90,.28);--sky:none}
[data-theme="moonlit"]{--ink:#0a111f;--vellum:#14213a;--leather:#1f3050;--gold:#c9d6ea;--ember:#8fb3ff;--arcane:#b8e1ff;--text:#e8eefb;--dim:#93a3c2;--line:rgba(201,214,234,.28)}
[data-theme="verdant"]{--ink:#0a1810;--vellum:#12291c;--leather:#244222;--gold:#c7d96a;--ember:#7fe08a;--arcane:#9ff0c9;--text:#e8f3df;--dim:#9db9a3;--line:rgba(199,217,106,.28)}
[data-theme="starlit"]{--ink:#0b0a22;--vellum:#17154a;--leather:#2a2468;--gold:#e6d27a;--ember:#c58bff;--arcane:#9fd3ff;--text:#ecebff;--dim:#a6a3d6;--line:rgba(230,210,122,.28);--sky:radial-gradient(2px 2px at 20% 30%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff 60%,transparent),radial-gradient(2px 2px at 40% 80%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 85% 65%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff 60%,transparent),radial-gradient(1px 1px at 55% 50%,#fff 60%,transparent)}
[data-theme="emberforge"]{--ink:#190908;--vellum:#2c120d;--leather:#4d1b10;--gold:#f0a04a;--ember:#ff5a2c;--arcane:#ffd29a;--text:#f8e6d6;--dim:#c19c88;--line:rgba(240,160,74,.3)}
[data-theme="gilded"]{--ink:#0a0906;--vellum:#17130a;--leather:#2b2108;--gold:#f2c94c;--ember:#ffd86b;--arcane:#fff1b5;--text:#f7efd3;--dim:#b7aa80;--line:rgba(242,201,76,.35)}
/* Overlay surfaces follow the theme instead of a fixed purple. */
:root{--glass:color-mix(in srgb,var(--ink) 90%,transparent);--card:color-mix(in srgb,var(--vellum) 96%,var(--ink))}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--sky);background-size:240px 240px;opacity:.8}
body{background:radial-gradient(120% 70% at 50% 0%,var(--vellum),var(--ink) 70%);background-color:var(--ink);color:var(--text);font:500 15px/1.35 Inter,system-ui,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold)}
h1,h2,h3{margin:0;font-family:"EB Garamond",Georgia,serif}
:focus-visible{outline:2px solid var(--arcane);outline-offset:2px}

/* ---------- shell ---------- */
.embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.embers i{position:absolute;bottom:-12px;border-radius:50%;background:var(--ember);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.4}100%{transform:translate3d(36px,-108vh,0);opacity:0}}
.paused .embers i{animation-play-state:paused}
.reduce .embers{display:none}
.vtag{position:fixed;left:6px;bottom:3px;z-index:5;font:600 10px Inter,sans-serif;opacity:.4;pointer-events:none;color:var(--dim);letter-spacing:.03em}
#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100dvh;padding-top:var(--gn-h);max-width:1100px;margin:0 auto}
/* World Seekers panel: the web view starts below the game's bar, so the site bar ignores the notch inset Android reports to it. */
html.al-ws #fbXpBar{padding-top:5px}
html.al-ws .fb-xp-toast{top:46px}
.apptop{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 10px}
.top-title{flex:1;min-width:0;font:700 19px "EB Garamond",serif;letter-spacing:.08em;font-variant:small-caps;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen{flex:1;min-height:0;overflow:auto;padding:10px 14px 28px;-webkit-overflow-scrolling:touch}
.screen.s-play{padding:0;overflow:hidden;display:flex}
.btn{min-height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--vellum),white 6%);color:var(--text);font-weight:600}
.btn:hover{border-color:var(--gold)}
.btn.small{min-height:40px;padding:0 12px;font-size:13px}
.apptop .btn.small,.apptop .seg button,.hud .btn.small,.see-all{min-height:44px}
.btn.primary{background:var(--gold);color:#241a08;border-color:var(--gold)}
.btn.gold{background:linear-gradient(135deg,#ffe28a,#e0a93a);color:#2a1a02;border-color:#ffcf4a}
.btn.danger{border-color:#c2523c;color:#ffb4a4}
.btn:disabled{opacity:.45;cursor:default}
.btn em{font-style:normal;opacity:.85;margin-left:2px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--vellum),white 5%);font-size:19px;display:grid;place-items:center;padding:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{border:0;background:transparent;min-height:40px;padding:0 12px;font-weight:600;font-size:13px;color:var(--dim)}
.seg button[aria-pressed="true"]{background:var(--gold);color:#241a08}
.dim{color:var(--dim)}
.state{text-align:center;padding:22px 14px;border:1px dashed var(--line);border-radius:14px;color:var(--dim)}
.state b{display:block;color:var(--text);font:700 19px "EB Garamond",serif;margin-bottom:4px}
.state p{margin:4px 0 12px}
.fatal{margin:40px auto;max-width:420px}

/* ---------- gate ---------- */
.gate{position:relative;z-index:2;padding:calc(48px + var(--gn-h)) 20px;text-align:center}
.gate h1{font-size:34px;letter-spacing:.1em;font-variant:small-caps;color:var(--gold)}
.gate-row{display:flex;gap:8px;justify-content:center;margin-top:14px}
.gate-row input{width:140px;min-height:42px;border-radius:12px;border:1px solid var(--line);background:var(--vellum);text-align:center;font-size:18px;letter-spacing:.3em}
.gate-msg{color:#ffb4a4}
.gate-back{margin-top:26px}

/* ---------- home ---------- */
.home,.sub{max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.hero{text-align:center;padding:6px 0 4px}
.sigil{font-size:38px;filter:drop-shadow(0 0 12px var(--ember))}
.hero h1{font-size:38px;letter-spacing:.14em;font-variant:small-caps;color:var(--gold);line-height:1.1}
.goalline{margin:6px 0 0;font:600 20px "EB Garamond",serif;background:linear-gradient(90deg,var(--gold),#fff3c4,var(--ember),var(--gold));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 6s linear infinite}
@keyframes shim{to{background-position:-220% 0}}
.reduce .goalline,.reduce .shimmer-text{animation:none}
.bigcard{display:flex;align-items:center;gap:14px;text-align:left;width:100%;min-height:88px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--vellum),white 7%),var(--vellum));box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s,border-color .15s}
.bigcard:hover{border-color:var(--gold);transform:translateY(-1px)}
.bigcard.disabled{opacity:.6}
.bc-em{font-size:42px;line-height:1;flex:none}
.bc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bc-body small{color:var(--dim);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:11px}
.bc-body b{font:700 26px/1.1 "EB Garamond",serif}
.bigcard.small b{font-size:20px}
.bigcard.small .bc-em{font-size:30px}
.bc-meta{color:var(--dim);font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bc-sub{color:var(--gold);font-size:13px}
.bc-go{flex:none;padding:8px 16px;border-radius:999px;background:var(--gold);color:#241a08;font-weight:700;font-size:14px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Stacked: side by side left the text 3 lines tall in a 100px column. */
.twocol .bigcard{min-height:76px;padding:12px;flex-direction:column;align-items:flex-start;gap:6px}
.twocol .bc-body{width:100%}
.tag{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.tag.ranked{color:#aef0b4;border-color:#58c26b}
.tag.whatif{color:var(--arcane);border-color:var(--arcane)}
.tag.cont{color:var(--ember);border-color:var(--ember)}
.shimmer-text{background:linear-gradient(90deg,var(--gold),#fff3c4,var(--ember),var(--gold));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 6s linear infinite}
.subbar{display:flex;align-items:center;gap:10px}
.subbar h2{font-size:24px;color:var(--gold)}
.past{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.past-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:62px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--vellum)}
.pr-em{font-size:30px}.pr-body{flex:1;min-width:0;display:flex;flex-direction:column}
.pr-body b{font:700 18px "EB Garamond",serif}.pr-body small,.pr-score small{color:var(--dim);font-size:12px}
.pr-score{display:flex;flex-direction:column;align-items:flex-end}
.sec{font-size:21px;color:var(--gold);margin-top:8px}
.dex{display:flex;flex-wrap:wrap;gap:6px}.dex .state{flex:1 1 100%;padding:16px 14px}.dex .state p{margin:0}
.dx{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;background:#f1e4c4;color:#2a1c10;font-weight:600;font-size:13px}
.dx i{font-style:normal;font-size:17px}.dx em{font-style:normal}
.search{width:100%;min-height:40px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink),white 6%);padding:0 12px}
.badges,.codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
/* Scoped: a bare .badge also matched the badge toast and turned it into a faded column. */
.badges .badge,.cx{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--vellum)}
.badges .badge:not(.got) .be,.cx:not(.got) .cxe{opacity:.55;filter:grayscale(1)}
.badges .badge:not(.got) b,.cx:not(.got) b{color:var(--dim)}
.badges .badge.got,.cx.got{border-color:var(--gold)}
.badges .badge small,.cx small{color:var(--dim);font-size:12px}.badges .badge em{font-style:normal;color:var(--arcane);font-size:12px}
.be,.cxe{font-size:28px}
.cx:not(.got) .cxe{opacity:1;filter:brightness(0) drop-shadow(0 0 4px var(--gold))}

/* ---------- play layout ---------- */
.play{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%}
.hud{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 10px;min-height:46px}
.hud .sp{flex:1}
.pill{display:flex;flex-direction:column;justify-content:center;min-width:56px;padding:2px 10px;border-radius:12px;border:1px solid var(--line);background:var(--vellum);line-height:1.05}
.pill small{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.pill b{font:700 18px "EB Garamond",serif;color:var(--gold);font-variant-numeric:tabular-nums}
.pill.hot b{color:var(--ember)}
.charges{display:flex;gap:4px}
.charge{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 7px;border-radius:999px;background:var(--vellum);border:1px solid var(--line);font-size:14px}
.charge i{font-style:normal;font-weight:700;font-size:12px;color:var(--gold)}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.drawer{flex:none;height:clamp(180px,34dvh,290px);display:flex;flex-direction:column;background:var(--vellum)}
.tray-bar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px 0}
.tb-title{font:700 16px "EB Garamond",serif;letter-spacing:.08em;font-variant:small-caps;color:var(--gold);flex:1}
.tb-count{color:var(--dim);font-size:12px;white-space:nowrap}
.tray-bar .search{min-height:36px}
.tray-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:6px 10px 10px;touch-action:pan-x;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tray-scroll.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.drawer{position:relative}
.drawer::after{content:"Release to cancel";position:absolute;inset:0;display:grid;place-items:center;font:700 15px Inter,sans-serif;color:var(--text);background:var(--glass);opacity:0;pointer-events:none;transition:opacity .12s}
.drawer.drop-hot::after{opacity:1}
.tray-inner{position:relative}

/* goals bar + panel */
.goalbar{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;gap:6px;padding:6px 8px;pointer-events:none}
.gb-main{pointer-events:auto;flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 12px;border-radius:14px;border:1px solid var(--gold);background:var(--glass);text-align:left}
.gb-em{font-size:26px;flex:none}
.gb-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.05}
.gb-sub{font-size:11px;color:var(--dim)}.gb-sub strong{color:var(--gold)}
.gb-title{font:700 22px/1.1 "EB Garamond",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-stats{display:flex;flex-direction:column;font-size:11px;color:var(--dim);text-align:right;flex:none}.gb-stats b{color:var(--text);font-size:14px}
.gb-caret{color:var(--gold);flex:none}
.broom{pointer-events:auto;flex:none;background:var(--glass)}
/* Map nodes slide under the goal bar: fade them out instead of a hard cut. */
.goalbar::before{content:"";position:absolute;inset:0 0 -16px;z-index:-1;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--leather) 70%,black),transparent)}
.goalpanel{position:absolute;z-index:7;top:58px;left:8px;right:8px;max-height:calc(100% - 66px);overflow:auto;overscroll-behavior:contain;padding:8px 10px 10px;border-radius:14px;border:1px solid var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.5);
  /* Scroll shadows (CSS only): a soft edge shows when there is more above or below. */
  background:linear-gradient(var(--vellum) 30%,transparent) 0 0/100% 22px no-repeat local,linear-gradient(transparent,var(--vellum) 70%) 0 100%/100% 22px no-repeat local,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.55),transparent) 0 0/100% 9px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.55),transparent) 0 100%/100% 9px no-repeat scroll,var(--vellum)}
.gp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.gp-head b{font:700 19px "EB Garamond",serif;color:var(--gold)}
.goalpanel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cp{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;background:color-mix(in srgb,var(--ink),white 5%);min-height:44px}
.cp.done{opacity:.75}.cp.legend{border:1px solid #ffcf4a}
.tier{width:6px;align-self:stretch;border-radius:3px;flex:none}
.sil{font-size:24px;filter:brightness(0) drop-shadow(0 0 1px #c9b98f) drop-shadow(0 0 3px rgba(201,185,143,.55));flex:none;display:inline-block}
.sil.gold{filter:brightness(0) drop-shadow(0 0 4px #ffcf4a)}
.sil.done{filter:none}
.sils{display:flex;gap:2px;flex:none}
.cpt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:1.2;overflow-wrap:anywhere}.cpt small{color:var(--dim);font-size:12px}
.cpt .rwd{color:var(--gold);font-weight:700}
.icon-btn.compact{width:40px;height:40px}
.rw{flex:none;font-size:12px;line-height:1.25;color:var(--gold);font-weight:700;text-align:right;max-width:30%}
.tick{flex:none;width:16px;color:#7ee08a;font-weight:700;text-align:center}

/* ---------- chips ---------- */
.chip{position:absolute;left:0;top:0;height:40px;display:flex;align-items:center;gap:6px;padding:0 8px;border:0;border-radius:10px;background:#f1e4c4;color:#2a1c10;font-weight:600;font-size:13px;text-align:left;box-shadow:0 2px 0 #b29c6a,0 4px 10px rgba(0,0,0,.35);touch-action:pan-x;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:box-shadow .15s}
.tchip{width:112px;touch-action:none;z-index:2}
.chip .ce{font-size:20px;line-height:1;flex:none}
.chip .cn{flex:1;min-width:0;overflow:hidden;line-height:1.12;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}   /* long names wrap to two lines, not Tornado ... */
.chip .cw{display:none;position:absolute;right:3px;top:3px;font-style:normal;font-size:9px;width:14px;height:14px;border-radius:50%;background:var(--gold);align-items:center;justify-content:center;line-height:1}
.chip.wf .cw{display:flex}
.chip.pin{background:#f6ecce;box-shadow:0 2px 0 #b29c6a,0 4px 10px rgba(0,0,0,.35),inset 0 0 0 1.5px var(--gold)}
.chip.legend{background:linear-gradient(135deg,#fff0b8,#f4d98a);box-shadow:0 0 0 2px #ffcf4a,0 0 14px rgba(255,207,74,.7)}
.chip.sel{background:#fff6dc;box-shadow:inset 0 0 0 3px var(--gold),0 2px 0 #b29c6a,0 4px 10px rgba(0,0,0,.35)}
.chip.hint{animation:hintp 1s ease-in-out infinite}
@keyframes hintp{50%{box-shadow:0 0 0 3px var(--arcane),0 0 18px var(--arcane)}}
.chip.pulse{animation:pulse .7s ease-out}
@keyframes pulse{0%{scale:1;box-shadow:0 0 0 0 var(--gold)}40%{scale:1.14;box-shadow:0 0 0 7px rgba(217,180,90,.35)}100%{scale:1}}
.chip.brewing{animation:brew .7s ease-in-out infinite}
@keyframes brew{50%{scale:1.06;box-shadow:0 0 0 3px var(--arcane),0 0 20px var(--arcane)}}
.chip.shimmer{box-shadow:0 0 0 3px #ffcf4a,0 0 22px #ffcf4a}
.chip.fizz::after{content:"";position:absolute;inset:0;border-radius:10px;background:#c2523c;opacity:0;animation:flick .42s steps(2) 1}
@keyframes flick{0%,60%{opacity:.7}30%,100%{opacity:0}}
.chip.dragging{opacity:.3}
.chip.drop-hot{background:#fff6dc;box-shadow:inset 0 0 0 3px var(--gold),0 0 0 4px rgba(217,180,90,.35)}
.drag-clone{position:fixed!important;left:0;top:0;z-index:100;pointer-events:none;margin:0;box-shadow:0 14px 28px rgba(0,0,0,.55)!important;transition:none;animation:none!important;will-change:transform}
.is-dragging,.is-dragging *{cursor:grabbing!important}
.drag-clone.compact{width:46px!important;height:46px!important;padding:0;border-radius:50%;justify-content:center;opacity:.92;box-shadow:0 0 0 2px var(--gold),0 10px 20px rgba(0,0,0,.5)!important}
.drag-clone.compact .cn,.drag-clone.compact .cw{display:none}.drag-clone.compact .ce{font-size:24px}
.table{position:absolute;inset:0;touch-action:none;background:radial-gradient(120% 90% at 50% 35%,color-mix(in srgb,var(--leather),white 10%),var(--leather) 62%,color-mix(in srgb,var(--leather),black 50%))}
.table.drop-hot{box-shadow:inset 0 0 0 3px var(--line)}
.table-empty{position:absolute;inset:64px 24px 20px;display:grid;place-items:center;text-align:center;color:var(--dim);font:500 19px/1.3 "EB Garamond",serif;pointer-events:none}
.ring{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 18px var(--gold);pointer-events:none}

/* ---------- web ---------- */
.web{position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,color-mix(in srgb,var(--leather),white 6%),color-mix(in srgb,var(--leather),black 45%))}
.web-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.see-all{position:absolute;right:8px;bottom:8px;z-index:3;background:var(--glass)}
.wn{cursor:pointer;outline:none}
.wn .rim{fill:#f1e4c4;stroke:#8d7d5a;stroke-width:3}
.wn.on .rim{stroke:#58c26b}.wn.off .rim{stroke:#e0a23a}.wn.explore .rim{stroke:#8fa6ff}.wn.legend .rim{stroke:#ffcf4a;fill:#fff0b8}
.wn.bad .rim{stroke:#e0523c}
.wn .em{font-size:20px}
.wn .lbl,.elabel,.glbl{font:600 11px Inter,sans-serif;font-size:calc(11px * var(--lk, 1));fill:var(--text);paint-order:stroke;stroke:var(--leather);stroke-width:3px;stroke-linejoin:round}
.elabel{font-size:10px;fill:var(--gold)}
.bd-wf circle{fill:var(--gold)}.bd-wf text{font-size:8px}
.bd-pu{font-size:12px}
.bd-col rect{fill:var(--ember)}.bd-col text{font:700 9px Inter,sans-serif;fill:#1a0f06}
.nolbl .lbl,.nolbl .elabel,.nolbl .glbl{display:none}
.wn:focus-visible .rim{stroke:var(--arcane);stroke-width:4.5}
.wn.hint .rim,.wn.pulse .rim{stroke:var(--arcane);stroke-width:5}
.wn .halo{fill:rgba(244,217,138,.22);stroke:var(--gold);stroke-width:2;opacity:0;transition:opacity .1s}
.wn.drop-hot .halo{opacity:1}.wn.drop-hot .rim{stroke:var(--gold);stroke-width:5}
.edge{stroke:rgba(217,180,90,.5);stroke-width:2;fill:none}
.edge.far{stroke:rgba(217,180,90,.3);stroke-width:1.5;stroke-dasharray:3 6}
.spoke{stroke:rgba(217,180,90,.2);stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.dupe{stroke:var(--arcane);stroke-width:2.5;stroke-dasharray:5 4;fill:none}
.gh rect{fill:var(--glass);stroke:var(--gold);stroke-width:2.5;stroke-dasharray:5 3}
.gh.goal rect{stroke:#fff;fill:rgba(255,255,255,.1);stroke-dasharray:none}
.gh.legend rect{stroke:#ffcf4a;fill:rgba(255,207,74,.14)}
.gh.t-bronze rect{stroke:#cd8a4b}.gh.t-silver rect{stroke:#c9d3dc}.gh.t-gold rect{stroke:#f1c24e}
.gem{font-size:18px}.gh.goal .gem{font-size:20px}

/* ---------- toasts, sheets, cards ---------- */
body.goals-open #toasts{top:auto!important;bottom:18px}
body.sheet-open #toasts{visibility:hidden}
.play-free #toasts{top:calc(var(--gn-h) + 112px)}.play-daily #toasts{top:calc(var(--gn-h) + 164px)}
.r-badges{display:flex;flex-wrap:wrap;gap:6px}.r-badge{padding:4px 10px;border-radius:999px;border:1px solid #ffcf4a;background:rgba(255,207,74,.12);font-weight:600;font-size:13px}
#toasts{position:fixed;z-index:60;top:calc(var(--gn-h) + 56px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;width:min(92vw,430px);pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13px;line-height:1.25;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.4);animation:tin .22s ease-out;transition:opacity .3s,transform .3s}
.toast.out{opacity:0;transform:translateY(-8px)}
.toast .ti{font-size:16px;flex:none}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}
.toast.good{border-color:#58c26b}.toast.warn{border-color:#e0a23a}.toast.bad{border-color:#e0523c}.toast.gold,.toast.badge{border-color:#ffcf4a;background:linear-gradient(135deg,color-mix(in srgb,var(--card),#ffcf4a 14%),var(--card))}.toast.power{border-color:var(--arcane)}
.sheet-back{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(5,4,10,.7);opacity:0;transition:opacity .2s}
.sheet-back.in{opacity:1}
.sheet-back.min{opacity:0;pointer-events:none}
.results-pill{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:49;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.r-goal .r-min{margin-left:auto;align-self:center}
.sheet{width:min(94vw,470px);max-height:min(88dvh,760px);overflow:auto;padding:14px;border-radius:18px;border:1px solid var(--gold);background:var(--vellum);box-shadow:0 18px 50px rgba(0,0,0,.6)}
.sheet.small{width:min(90vw,360px)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-head h2{font-size:24px;color:var(--gold)}
.row{display:flex;gap:8px;margin-top:12px}.row.end{justify-content:flex-end;flex-wrap:wrap}
.confirm p{margin:6px 0 0}
.settings{display:flex;flex-direction:column;gap:10px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.set-c{display:flex;gap:8px;align-items:center}
.set-l{font-weight:600}
.set-block{display:flex;flex-direction:column;gap:6px}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.theme{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--ink);text-align:left;font-size:13px;font-weight:600}
.theme small{color:var(--dim);font-weight:500;font-size:11px}
.theme[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.theme:disabled{opacity:.5}
.theme .sw{display:inline-block;width:34px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.t-candlelit .sw{--c1:#1d1830;--c2:#d9b45a}.t-moonlit .sw{--c1:#14213a;--c2:#c9d6ea}.t-verdant .sw{--c1:#12291c;--c2:#c7d96a}.t-starlit .sw{--c1:#17154a;--c2:#e6d27a}.t-emberforge .sw{--c1:#4d1b10;--c2:#ff5a2c}.t-gilded .sw{--c1:#17130a;--c2:#f2c94c}
.ver{margin:0;color:var(--dim);font-size:12px;text-align:center}
.infocard{position:absolute;z-index:30;padding:10px 12px;border-radius:12px;border:1px solid var(--gold);background:var(--vellum);box-shadow:0 10px 26px rgba(0,0,0,.5);font-size:13px}
.infocard[data-sticky=""]{pointer-events:none}
.infocard p{margin:4px 0}.infocard .ic-by{color:#e3b83b;font-weight:600}.ic-head{display:flex;align-items:center;gap:8px;font:700 18px "EB Garamond",serif}.ic-em{font-size:24px}
.legend-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.legend-card h3{font-size:30px;color:#ffcf4a}
.lg-em{font-size:64px;filter:drop-shadow(0 0 16px #ffcf4a);animation:float 2.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.lg-verb{margin:0;font:700 14px Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lg-pow{margin:0;color:var(--arcane);font-weight:600}
.legend-card p{margin:0}
.picker p{margin:0 0 8px}
.pick-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:46dvh;overflow:auto}
.pick-row{display:flex;flex-wrap:wrap;gap:6px;min-height:44px;align-items:center;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--ink);text-align:left}
.pick-row:hover{border-color:var(--gold)}.pk{font-weight:600}

/* results */
.results{display:flex;flex-direction:column;gap:10px}
.r-goal{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.r-em{font-size:44px}.r-goal small{display:block;color:var(--dim);text-transform:uppercase;font-size:11px;letter-spacing:.06em}.r-goal b{font:700 26px "EB Garamond",serif}
.r-score{display:flex;flex-direction:column;align-items:center}.r-score small{color:var(--dim);text-transform:uppercase;font-size:11px;letter-spacing:.06em}.r-score b{font:700 52px/1 "EB Garamond",serif;color:var(--gold);font-variant-numeric:tabular-nums}
.r-status{padding:8px 12px;border-radius:10px;border:1px solid var(--line);font-weight:600;font-size:14px;text-align:center}
.r-status.ranked{border-color:#58c26b}.r-status.ranked.ok{background:rgba(88,194,107,.14)}.r-status.bad{border-color:#e0a23a}.r-status.whatif{border-color:var(--arcane)}
/* Moves gets its own full-width row (its value plus two notes never fit a third of a phone). */
.r-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.r-grid>div.r-moves{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}.r-grid.n4>div:last-child{grid-column:1/-1}
.r-grid>div{display:flex;flex-direction:column;padding:8px;border-radius:10px;background:var(--ink)}.r-grid small{color:var(--dim);font-size:11px;text-transform:uppercase}.r-grid b{font-size:16px}.r-grid em{font-style:normal;color:var(--dim);font-size:12px}.r-grid em.good{color:#7ee08a;font-weight:700}
.r-break{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.r-break li{display:flex;justify-content:space-between;padding:5px 8px;border-radius:8px;background:var(--ink);font-size:14px}.r-break li.zero{opacity:.45}.r-break b{font-variant-numeric:tabular-nums;color:var(--gold)}
/* Actions stay in reach while the long breakdown scrolls. */
.results-sheet .row.end{position:sticky;bottom:-14px;margin:4px -14px -14px;padding:18px 14px 14px;background:linear-gradient(transparent,var(--vellum) 14px);justify-content:flex-end}
.r-share{display:flex;gap:8px;align-items:flex-start}.r-share pre{flex:1;margin:0;padding:8px;border-radius:10px;background:var(--ink);font:13px/1.3 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.r-h{font-size:20px;color:var(--gold)}
.skeleton{display:flex;flex-direction:column;gap:6px}.skeleton i{height:28px;border-radius:8px;background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink),white 10%),var(--ink));background-size:200% 100%;animation:shim 1.4s linear infinite}
.r-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.r-rows li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--ink)}.rk{width:22px;color:var(--dim);font-weight:700}.nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.r-rows small{color:var(--dim)}

/* effects */
.fx-flash{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,232,150,.95),rgba(255,207,74,.55) 40%,transparent 72%);animation:flash 1.1s ease-out forwards}
.fx-flash.soft{background:radial-gradient(circle at 50% 50%,rgba(255,226,130,.45),transparent 65%);animation-duration:.8s}
@keyframes flash{from{opacity:1}to{opacity:0}}
.fx-sigil{position:fixed;left:50%;top:45%;z-index:71;font-size:90px;line-height:1;color:#ffcf4a;pointer-events:none;translate:-50% -50%;animation:sigil 1.4s ease-out forwards}
.fx-sigil::after{content:"";position:absolute;inset:-30px;border:4px solid #ffcf4a;border-radius:50%}
@keyframes sigil{from{transform:scale(.3);opacity:1}to{transform:scale(7);opacity:0}}
.fx-spark{position:fixed;z-index:70;width:7px;height:7px;margin:-3px;border-radius:50%;background:var(--ember);pointer-events:none}.fx-spark.gold{background:#ffcf4a}
.reduce *{animation-duration:.001s!important;transition-duration:.001s!important}

@media (min-width:900px){
  .goalbar{right:auto;width:min(100%,560px)}
  .drawer{height:clamp(210px,32dvh,320px)}
  .chip{font-size:14px}
  .home,.sub{max-width:600px}
}
@media (max-width:380px){
  .gb-title{font-size:19px}.pill{min-width:50px;padding:2px 8px}.charge{padding:0 5px}
}
@media (max-width:440px){body.play-daily .top-title,body.play-free .top-title{visibility:hidden}}
@media (max-width:440px){.bc-body b{font-size:23px}.bc-go{padding:8px 13px}}

/* ---------- invisible path, inspect window, goal pin (v0.3) ---------- */
.edge-glow{stroke:#5fd47a;stroke-width:3.5;fill:none;stroke-linecap:round;opacity:0;animation:pathglow 4.2s ease-in-out infinite;pointer-events:none}
@keyframes pathglow{0%,100%{opacity:0}50%{opacity:.85}}
.reduce .edge-glow{animation:none;opacity:.5}
/* the lifted element's known lines flash red while it is held */
.edge.lit{stroke:#ff4d4d;stroke-width:4;stroke-linecap:round;animation:edgelit .5s ease-in-out infinite alternate}
.edge.lit + .edge-glow{display:none}
.edge.far.lit{stroke-dasharray:none}
@keyframes edgelit{from{stroke-opacity:.35;stroke-width:3}to{stroke-opacity:1;stroke-width:5.5}}
.reduce .edge.lit{animation:none;stroke-opacity:1}
/* echo: a small copy of a far starter beside the result it feeds */
.echo{pointer-events:none}.echo circle{fill:#f1e4c4;stroke:#8d7d5a;stroke-width:2}.echo text{font-size:13px}
.echo.lit circle{stroke:#ff4d4d;stroke-width:3;animation:resflash .5s ease-in-out infinite alternate}
.wn.lit-res .rim{stroke:#ff4d4d;stroke-width:5;animation:resflash .5s ease-in-out infinite alternate}.wn.lit-res .halo{opacity:.8}
@keyframes resflash{from{stroke-opacity:.4}to{stroke-opacity:1}}
.reduce .wn.lit-res .rim{animation:none;stroke-opacity:1}
.fill-ring{fill:none;stroke:#5fd47a;stroke-width:3;transform-box:fill-box;transform-origin:center;pointer-events:none}
.wn.sel .rim{stroke:var(--gold);stroke-width:5}.wn.sel .halo{opacity:.7}
.wn.boon .rim{stroke:#8fd6ff}
.goal-pin{position:absolute;left:0;top:0;z-index:4;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:var(--glass);display:grid;place-items:center;padding:0;box-shadow:0 0 0 3px rgba(255,255,255,.15),0 6px 14px rgba(0,0,0,.45);will-change:transform}
.goal-pin .gp-em{font-size:22px;line-height:1}
.goal-pin .gp-arrow{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;font-size:14px;line-height:16px;text-align:center;color:#fff;pointer-events:none}
.inspect{position:absolute;z-index:6;left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:14px;border:1px solid var(--gold);background:var(--card);box-shadow:0 10px 26px rgba(0,0,0,.5);font-size:13px;display:flex;flex-direction:column;gap:6px}
.in-head{display:flex;align-items:center;gap:8px}
.in-em{font-size:30px;line-height:1;flex:none}
.in-id{flex:1;min-width:0;display:flex;flex-direction:column}
.in-id b{font:700 20px/1.15 "EB Garamond",serif;overflow-wrap:anywhere}
.in-id small{color:var(--gold);font-size:11.5px}
.in-row{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;touch-action:pan-x;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}
.in-row::-webkit-scrollbar{display:none}
.in-l{flex:none;width:44px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.in-pair{display:inline-flex;align-items:center;gap:3px}.in-pair i{font-style:normal;color:var(--dim)}
.ip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#f1e4c4;color:#2a1c10;font-weight:600;font-size:12.5px;flex:none}
.in-more{display:inline-flex;align-items:center;gap:3px;color:var(--gold);font-weight:700;font-size:12px;flex:none;margin-left:2px}
.iq{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px dashed var(--gold);color:var(--gold);font-weight:700;font-size:11px}
.in-row .dim{font-size:12px}
.icon-btn.small{font-size:14px}

/* Freebie signaling: banner, FREE flash on Moves, labelled charge pills (transform/opacity animations only). */
.burst{position:fixed;left:50%;top:40%;z-index:80;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 22px;border-radius:18px;background:rgba(24,17,32,.94);border:2px solid var(--gold);box-shadow:0 0 36px rgba(232,185,60,.5);text-align:center;transform:translate(-50%,-50%);animation:burst 2.2s ease-out forwards}
.burst .bi{font-size:46px;line-height:1}
.burst b{font:700 24px "EB Garamond",serif;color:var(--gold)}
.burst span{font-size:13px;color:#f3e6c4;max-width:250px}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}22%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(.98)}}
.reduce .burst{animation:burstfade 2.2s linear forwards}
@keyframes burstfade{0%,85%{opacity:1}100%{opacity:0}}
.gb-moves{position:relative}
.free-tag{position:absolute;right:-6px;top:-14px;padding:1px 6px;border-radius:6px;background:var(--gold);color:#1a1208;font:800 10px Inter,sans-serif;font-style:normal;letter-spacing:.06em;animation:freetag 1.8s ease-out forwards}
@keyframes freetag{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.25)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.charge small{font-size:10px;color:var(--dim);margin-left:2px}
.charge.up{animation:chargeup .9s ease-out 2}
@keyframes chargeup{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* More ways to play + level picker */
.more-h{margin:14px 2px 6px;font:600 13px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.grade-pick{display:flex;flex-direction:column;gap:8px}.grade-pick .bigcard{width:100%}
.bigcard.cont{border-color:var(--gold)}

/* Quest: zones, story card, quest map */
.zone-lbl{font:700 15px "EB Garamond",serif;letter-spacing:.2em;text-transform:uppercase;fill:rgba(255,255,255,.22)}
.zone-lbl.on{fill:rgba(255,255,255,.55)}
.zone-rim{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1.5;stroke-dasharray:6 8}.zone-rim.on{stroke:rgba(255,255,255,.22)}
.story-card{display:flex;flex-direction:column;gap:10px;border-left:4px solid var(--stage,#e8b93c);padding:4px 4px 4px 14px}
.story-card .sc-stage{font:700 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.story-card p{margin:0;font:400 19px/1.4 "EB Garamond",serif;color:var(--text,#f3e6c4)}
.story-card .sc-by{font-size:12px;color:var(--dim)}
.quest-map .qm{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.qm-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--line);border-left:6px solid var(--stage);background:var(--vellum);color:inherit;text-align:left;cursor:pointer}
.qm-card.locked{opacity:.5;cursor:default}
.qm-card.done{box-shadow:inset 0 0 0 1px var(--stage)}
.qm-dot{font-size:30px;width:44px;text-align:center}
.qm-body{display:flex;flex-direction:column;flex:1;min-width:0}.qm-body small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}.qm-body b{font:700 20px "EB Garamond",serif}.qm-body span{font-size:13px;color:var(--dim)}
.qm-go{font-weight:700;color:var(--gold);white-space:nowrap}

/* Owner admin */
.admin .admin-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.ad-pane{display:flex;flex-direction:column;gap:10px}
.ad-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ad-stat{display:flex;flex-direction:column;padding:10px;border-radius:12px;background:var(--vellum);border:1px solid var(--line)}.ad-stat b{font:700 24px "EB Garamond",serif;color:var(--gold)}.ad-stat small{color:var(--dim);font-size:12px}
.ad-list{margin:0;padding-left:18px;font-size:13px;color:var(--dim);display:flex;flex-direction:column;gap:3px}
.ad-rows{display:flex;flex-direction:column;gap:4px}
.ad-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;background:var(--vellum);font-size:14px}.ad-row.ai{border-left:3px solid var(--gold)}
.ad-eq{flex:1;min-width:220px}.ad-acts{display:flex;gap:4px}
.ad-row.over{border-left:3px solid var(--arcane)}.ad-row.suspect{background:color-mix(in srgb,var(--vellum),#c2523c 14%)}.tag.bad{border-color:#c2523c;color:#ffb4a4}
.btn.tiny{padding:2px 8px;font-size:12px;min-height:28px}
.ad-story{display:flex;flex-direction:column;gap:4px}.ad-story small{color:var(--dim)}.ad-story textarea{width:100%;font:15px/1.4 Inter,sans-serif;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:inherit}
.ad-table{width:100%;border-collapse:collapse;font-size:13px}.ad-table th,.ad-table td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line)}
.ad-switch{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--vellum)}.ad-switch input{width:22px;height:22px;margin-top:2px}.ad-switch span{display:flex;flex-direction:column;gap:2px}.ad-switch small{color:var(--dim)}
.ad-json{max-height:360px;overflow:auto;font-size:11px;background:var(--ink);padding:8px;border-radius:8px}
.state.bad b{color:#ff8a80}

/* Alchemy lore in the inspect strip */
.in-sig{color:var(--gold);font-weight:400}
.in-lore{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font:italic 15px/1.3 "EB Garamond",serif;color:var(--text,#f3e6c4);padding:2px 0 4px}
.in-lore a{font:600 12px Inter,sans-serif;font-style:normal;color:var(--gold);text-decoration:none;white-space:nowrap}
/* v0.9.6 polish: notch-safe tray, landscape phones keep a playable map, a full HUD stays on one row */
.drawer{padding-bottom:env(safe-area-inset-bottom,0px)}
.tray-bar .search{min-height:40px}
@media (max-height:480px){.drawer{height:42dvh;min-height:96px}.tray-bar{display:none}}
@media (max-width:440px){.charges:has(.charge + .charge) .charge small{display:none}}
.in-lore a{display:inline-block;padding:10px 4px;margin:-10px 0}
/* Public page: the how-to text below the game scrolls into view on Home; play locks the page again. */
body[data-alchemy="public"]:not(.play-daily):not(.play-free){overflow:auto;height:auto}
.al-foot{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:30px 18px 90px;color:var(--dim);font-size:15px;line-height:1.6;border-top:1px solid var(--line)}
.al-foot h2{font:700 24px/1.2 "EB Garamond",serif;color:var(--gold);margin:22px 0 6px}
.al-foot h3{font-size:16px;color:var(--text);margin:16px 0 2px}
.al-foot ul{padding-left:20px;margin:6px 0 12px}
body.play-daily .al-foot,body.play-free .al-foot{display:none}
/* Hints (Jeff 11-02): a bar that stays until the next move, plus a copy flying from one ingredient onto the other. */
.hintbar{position:absolute;z-index:7;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;border:2px solid var(--arcane);background:var(--vellum);box-shadow:0 0 18px rgba(143,214,255,.35);font-size:15px;line-height:1.25;animation:hbIn .35s ease-out}
.hintbar .hb-l{font-size:22px;animation:hbGlow 1.6s ease-in-out infinite}
.hintbar .hb-t{flex:1;min-width:0}.hintbar .hb-t b{color:var(--arcane);white-space:nowrap}
.hintbar .btn{flex:none;min-height:40px}
@keyframes hbIn{from{transform:translateY(12px);opacity:0}}
@keyframes hbGlow{50%{filter:drop-shadow(0 0 8px var(--arcane))}}
.hint-ghost{position:fixed;left:0;top:0;z-index:80;pointer-events:none;font-size:34px;line-height:1;filter:drop-shadow(0 0 10px var(--arcane)) drop-shadow(0 0 3px #fff);will-change:transform,opacity}
.chip.hint-lift{animation:hLift .5s ease-out}.chip.hint-hit{animation:hHit .52s ease-out}
@keyframes hLift{40%{transform:translateY(-6px) scale(1.12)}}
@keyframes hHit{30%{transform:scale(1.22);box-shadow:0 0 0 4px var(--arcane),0 0 26px var(--arcane)}}
.wn.hint-lift .rim,.wn.hint-hit .rim{stroke:#fff;stroke-width:7}
.wn.hint-hit{filter:drop-shadow(0 0 14px var(--arcane))}
.wn.hint .rim{animation:hRim 1s ease-in-out infinite}
@keyframes hRim{50%{stroke-width:8}}
.reduce .hintbar,.reduce .hintbar .hb-l,.reduce .wn.hint .rim{animation:none}

/* Hint button after three misses or with a free hint: shine sweep + flash + pulsing ring (Jeff 11-04: must be unmissable) */
.hintbtn{position:relative;transition:box-shadow .3s}
.hintbtn.beckon{border-color:#ffd65c;color:#2a1c00;font-weight:800;background:linear-gradient(110deg,#f3c64b 30%,#fffbe6 50%,#f3c64b 70%);background-size:250% 100%;box-shadow:0 0 0 3px rgba(255,214,92,.55),0 0 22px rgba(255,214,92,.9);animation:hintshine 1.1s linear infinite,hintbob 1.1s ease-in-out infinite,hintflash 1.1s ease-in-out infinite}
.hintbtn.beckon em{color:#5a3a00;font-weight:800}
.hintbtn.beckon::after{content:"";position:absolute;inset:-6px;border-radius:16px;border:2px solid #ffd65c;pointer-events:none;animation:hintring 1.1s ease-out infinite}
.hintbtn.beckon.isfree{background:linear-gradient(110deg,#5fd47a 30%,#eafff0 50%,#5fd47a 70%);background-size:250% 100%;border-color:#7dff9a;box-shadow:0 0 0 3px rgba(95,212,122,.55),0 0 22px rgba(95,212,122,.9)}
.hintbtn.beckon.isfree::after{border-color:#7dff9a}
.hintbtn.beckon.isfree em{color:#0b3a17}
@keyframes hintshine{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes hintbob{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes hintflash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@keyframes hintring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
.reduce .hintbtn.beckon,.reduce .hintbtn.beckon::after{animation:none}

/* ---------- the Formulary (formulary.js): docked beside the stage when wide, swapped into the drawer when narrow ---------- */
.arena{position:relative;flex:1;min-height:0;display:flex}
.arena>.stage{flex:1;min-width:0}
.formulary{display:flex;flex-direction:column;min-height:0;background:var(--vellum)}
.formulary[hidden],.fm-edge[hidden],.fm-tab[hidden]{display:none!important}
.fm-head{flex:none;display:flex;align-items:center;gap:8px;padding:6px 6px 0 12px}
.fm-head b{flex:1;font:700 16px "EB Garamond",serif;letter-spacing:.08em;font-variant:small-caps;color:var(--gold)}
.fm-body{position:relative;flex:1;min-height:0;overflow-y:auto;padding:6px 10px 10px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.fm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fm-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 5px;padding:5px 6px;border-radius:10px;background:color-mix(in srgb,var(--ink),white 5%);border:1px solid transparent}
.fm-row.wf{border-color:var(--line)}
.fm-row.fresh{animation:fmin .45s ease-out}
@keyframes fmin{from{opacity:0;transform:translateY(-8px)}}
.fm-op{font-style:normal;font-weight:700;color:var(--gold)}
.fm-br{display:none}
.fm-first{margin-left:auto;font-size:13px}
.fm-tok{display:inline-flex;align-items:center;gap:5px;min-height:36px;max-width:100%;padding:0 8px;border:0;border-radius:9px;background:#f1e4c4;color:#2a1c10;font:600 13px Inter,system-ui,sans-serif;box-shadow:0 2px 0 #b29c6a,0 3px 8px rgba(0,0,0,.3);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fm-tok .ce{font-size:18px;line-height:1;flex:none}
.fm-tok .cn{min-width:0;max-width:96px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fm-tok.sel{background:#fff6dc;box-shadow:inset 0 0 0 3px var(--gold),0 2px 0 #b29c6a}
.fm-tok.dragging{opacity:.3}
.fm-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 18px;text-align:center;pointer-events:none}
.fm-empty[hidden]{display:none}
.fm-empty b{font:700 19px "EB Garamond",serif;color:var(--gold)}
.fm-empty span{color:var(--dim);font:500 15px/1.3 "EB Garamond",serif}
.fm-edge{position:absolute;top:8px;right:8px;z-index:6;min-height:36px;background:var(--glass)}
.fm-title,.drawer.f-open .tray-scroll{display:none}
.drawer.f-open .fm-title{display:block}
.drawer.f-open .tray-bar>:not(.fm-title):not(.tb-count):not(.fm-tab){display:none}
.drawer>.formulary{flex:1;animation:fmup .22s ease-out}
.drawer>.formulary .fm-head{display:none}
@keyframes fmup{from{opacity:0;transform:translateY(14px)}}
@media (min-width:900px){
  .fm-br{display:block}
  .arena>.formulary{flex:none;width:240px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
  .fm-row{padding:6px}
  .fm-br{flex-basis:100%;height:0}   /* wide: ingredients on line one, the result on line two */
  .fm-tok .cn{max-width:150px}
}