/*
WHAT THIS FILE DOES
  All the site's styles (colors, layout, phone layouts, dark mode, every game). Sections are marked
  with /* ---- name ---- */; search for the one you want, e.g. 'The Inkwell Mine'.
  CSS basics: '.name' targets class="name", '#name' targets id="name", @media (max-width:...) = phone rules.
HOW IT CONNECTS
  Loaded by learn/templates/learn/base.html on every page.
READ NEXT
  learn/templates/learn/base.html
*/
:root{
  --paper:#fbf8f1; --card:#ffffff; --ink:#1f2a3a; --muted:#636a76; --line:#e7e0d1;
  --accent:#1d6f6a; --accent-2:#b4532a; --good:#1f8a4c; --good-bg:#e8f6ee; --bad:#b42318; --bad-bg:#fdecea;
  --on-accent:#fff; --shadow:0 1px 2px rgba(31,42,58,.06),0 6px 24px rgba(31,42,58,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#14181f; --card:#1b212b; --ink:#e8e4da; --muted:#9aa3b2; --line:#2b3340;
  --accent:#4fb8ae; --accent-2:#e08a5c; --good:#4cc47f; --good-bg:#16301f; --bad:#f07167; --bad-bg:#3a1c1c;
  --on-accent:#0e1b1a; --shadow:none;}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans)}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);line-height:1.2;font-weight:600}
h1{font-size:2.3rem;margin:.2em 0 .4em}
code{background:rgba(127,127,127,.12);padding:.1em .35em;border-radius:4px;font-size:.9em}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink);text-decoration:none}
.mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--on-accent);margin-right:6px}
.top nav a{margin-left:20px;color:var(--muted);text-decoration:none;font-size:.95rem}
.top nav a:hover{color:var(--ink)}
main{max-width:1100px;margin:0 auto;padding:28px}
footer{text-align:center;color:var(--muted);font-size:.85rem;padding:40px 20px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:600;color:var(--accent-2);margin:0}
.lede{font-size:1.15rem;color:var(--muted);max-width:720px}
.muted{color:var(--muted)} .small{font-size:.85rem}
.hero{padding:30px 0 20px} .hero h1{font-size:2.8rem;max-width:800px}
.small-hero h1{font-size:2.4rem}
.btn{display:inline-block;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:10px;font:600 .95rem var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{background:transparent}
.small-btn{padding:6px 12px;font-size:.85rem;margin-top:10px}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#2fa39a);border-radius:99px;transition:width .4s}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
.course-card{display:flex;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.course-card:hover{border-color:var(--accent)}
.course-card h2{margin:0 0 4px}
.course-card p{margin:.3em 0}
.book-spine{flex:0 0 74px;height:110px;border-radius:4px 8px 8px 4px;background:linear-gradient(90deg,#5b2c1d,#8a4a2f 12%,#7a3f27);display:grid;place-items:end center;padding-bottom:10px;color:#f3d9a4;font:600 .8rem var(--serif);box-shadow:inset -3px 0 0 rgba(0,0,0,.2)}
.chapter{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 24px 14px;margin:22px 0;box-shadow:var(--shadow)}
.chapter-head{display:flex;justify-content:space-between;align-items:center}
.ch-num{color:var(--muted);font-size:1rem;font-weight:500;margin-right:6px}
.lesson-list{list-style:none;padding:0;margin:0}
.lesson-list li a{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:12px 6px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.lesson-list li a:hover .l-title{color:var(--accent)}
.l-title{font-weight:600}
.ring{width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0);position:relative}
.ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--card)}
.complete .ring::after{content:"✓";inset:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.lesson-layout{display:grid;grid-template-columns:230px 1fr;gap:40px}
.toc{position:sticky;top:20px;align-self:start;font-size:.92rem}
.toc-title{font-family:var(--serif);font-weight:600;font-size:1.1rem;margin:.2em 0 .6em}
.toc ol{padding-left:1.2em;margin:0}
.toc li{margin:.35em 0} .toc a{color:var(--muted);text-decoration:none}
.toc li.here a{color:var(--accent);font-weight:700}
.lesson{max-width:760px}
.prose blockquote{margin:1.2em 0;padding:12px 18px;border-left:4px solid var(--accent);background:rgba(29,111,106,.07);border-radius:0 10px 10px 0}
.prose blockquote p{margin:.3em 0}
.prose table{border-collapse:collapse;margin:1em 0}
.prose td,.prose th{border:1px solid var(--line);padding:6px 12px}
.history{margin:28px 0;background:#f5ecd9;border:1px solid #e6d5b0;border-radius:14px;padding:4px 22px;color:#3b2f1e;font-family:var(--serif);font-size:1.02rem}
@media (prefers-color-scheme:dark){.history{background:#2a2419;border-color:#4a3e28;color:#e9dcc0}}
.history summary{cursor:pointer;font-weight:700;padding:12px 0;font-size:1.05rem}
.exercises{margin-top:40px}
.ex-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.ex-top h2{margin:0}
.progress{min-width:220px} .progress .bar{margin-bottom:4px}
.ex-intro{font-weight:600}
.tips{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:8px 16px;margin:14px 0 18px;font-size:.92rem}
.tips summary{cursor:pointer;font-weight:600;color:var(--accent)}
.ex-heading{margin:26px 0 8px;padding:10px 16px;border-radius:10px;background:rgba(180,83,42,.08);font-weight:500}
.ex-heading p{margin:0}
.ex{display:grid;grid-template-columns:40px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0;box-shadow:var(--shadow);transition:border-color .3s,background .3s}
.ex-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);font-weight:700;font-size:.9rem;color:var(--muted)}
.ex.solved{border-color:var(--good)} .ex.solved .ex-num{background:var(--good);border-color:var(--good);color:#fff}
.ex.revealed .ex-num{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.prompt p{margin:.1em 0 .6em}
.part{margin:6px 0}
.part-label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:3px}
.field{display:flex;align-items:center;gap:8px}
.field input{flex:0 1 340px;font:1rem ui-monospace,SFMono-Regular,Menlo,monospace;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);outline:none}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,111,106,.15)}
.part.ok input{border-color:var(--good);background:var(--good-bg)}
.part.no input{border-color:var(--bad);background:var(--bad-bg)}
.unit{color:var(--muted);font-size:.9rem}
.preview{min-height:1.6em;font-size:1.05rem;color:var(--muted);padding:3px 2px}
.preview .err{font-size:.8rem}
.yesno{display:flex;gap:8px}
.yesno label{border:1.5px solid var(--line);border-radius:10px;padding:6px 14px;cursor:pointer;font-weight:600}
.yesno input{margin-right:6px}
.part.ok .yesno label:has(input:checked){border-color:var(--good);background:var(--good-bg)}
.part.no .yesno label:has(input:checked){border-color:var(--bad);background:var(--bad-bg)}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.feedback{font-weight:600;font-size:.95rem}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)}
.hint,.revealed{margin-top:10px;padding:10px 14px;border-radius:10px;background:rgba(29,111,106,.08);font-size:.95rem}
.hint p{margin:0}
.revealed{background:rgba(180,83,42,.1)}
.pager{display:flex;justify-content:space-between;margin:40px 0}
.challenge{max-width:780px;margin:0 auto}
.scoreboard{display:flex;gap:16px;margin:18px 0 26px}
.scoreboard div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 22px;text-align:center;box-shadow:var(--shadow)}
.scoreboard b{display:block;font:700 2rem var(--serif);color:var(--accent)}
.scoreboard span{font-size:.8rem;color:var(--muted)}
.from{margin:22px 0 -4px}
.challenge .ex-heading{margin-top:6px}
.finish{text-align:center;background:var(--card);border:2px solid var(--accent);border-radius:16px;padding:20px;margin-top:30px}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.pop{animation:pop .35s ease}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.shake{animation:shake .3s}
@media (max-width:800px){.lesson-layout{grid-template-columns:1fr}.toc{position:static}.hero h1{font-size:2rem}.cards{grid-template-columns:1fr}}
[hidden]{display:none!important}

/* ---- view settings: width and sidebar ---- */
.top nav{display:flex;align-items:center;gap:6px}
.tools{display:flex;align-items:center;gap:8px;margin-left:14px}
.tool,.seg button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:8px;padding:6px 10px;font:600 .85rem var(--sans);cursor:pointer}
.tool:hover,.seg button:hover{color:var(--ink);border-color:var(--accent)}
.tool svg,.seg svg{width:18px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
#calc-toggle svg{height:16px;width:14px} #calc-toggle circle{fill:currentColor;stroke:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:6px 8px}
.seg button+button{border-left:1px solid var(--line)}
html[data-width=comfortable] [data-set-width=comfortable],html[data-width=wide] [data-set-width=wide],
html[data-width=full] [data-set-width=full],html:not([data-sidebar=hidden]) #sidebar-toggle,.tool.on{background:var(--accent);color:var(--on-accent)}
html[data-width=wide] main{max-width:1500px}
html[data-width=wide] .lesson{max-width:1100px}
html[data-width=full] main{max-width:none;padding:20px 24px}
html[data-width=full] .lesson,html[data-width=full] .challenge{max-width:none}
html[data-width=wide] .challenge{max-width:1100px}
html[data-width=full] .lesson-layout{gap:28px}
html[data-sidebar=hidden] .lesson-layout{grid-template-columns:1fr}
html[data-sidebar=hidden] .toc{display:none}
html[data-sidebar=hidden][data-width=comfortable] .lesson{margin:0 auto}
.field input{flex-basis:340px}
html[data-width=full] .field input,html[data-width=wide] .field input{flex-basis:420px}

/* ---- inline quick checks ---- */
.prose .ex.quick{margin:18px 0 26px;border-left:4px solid var(--accent-2)}
.quick .ex-num{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);font-size:1rem}
.quick.solved .ex-num{background:var(--good);border-color:var(--good)}
.quick-label{margin-bottom:2px}

/* ---- calculator and grapher ---- */
.calc{position:fixed;right:24px;bottom:24px;width:340px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:50;user-select:none;resize:both;overflow:hidden;min-width:300px;min-height:260px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
.calc.graphing{width:700px;height:540px}
.calc.big{width:min(1040px,calc(100vw - 48px));height:min(760px,calc(100vh - 48px))}
.calc.big:not(.graphing){width:520px;height:min(720px,calc(100vh - 48px))}
.calc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 6px 10px;cursor:move;border-bottom:1px solid var(--line);flex:none}
.calc-tabs{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:2px}
.calc-tabs button{border:0;background:none;border-radius:7px;padding:4px 12px;font:700 .8rem var(--sans);color:var(--muted);cursor:pointer}
.calc-tabs button.on{background:var(--accent);color:var(--on-accent)}
.calc-win{display:flex;align-items:center;gap:2px}
.calc-size,.calc-x{border:0;background:none;color:var(--muted);cursor:pointer;border-radius:6px;width:28px;height:28px;display:grid;place-items:center;padding:0}
.calc-size:hover,.calc-x:hover{color:var(--ink);background:var(--paper)}
.calc-size svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.calc-size.on{color:var(--accent)}
.calc-x{font-size:1.35rem;line-height:1}
.calc-pane{flex:1;min-height:0}
.calc-main{display:flex;flex-direction:column}
.calc-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 0}
.angle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.angle button{border:0;background:var(--card);color:var(--muted);font:700 .7rem var(--sans);padding:3px 8px;cursor:pointer;letter-spacing:.04em}
.angle button+button{border-left:1px solid var(--line)}
.angle button.on{background:var(--accent);color:var(--on-accent)}
.h-clear{border:0;background:none;color:var(--muted);font:600 .72rem var(--sans);cursor:pointer;padding:2px 4px}
.h-clear:hover{color:var(--bad)}
.calc-hist{flex:1 1 auto;min-height:90px;max-height:none;overflow:auto;padding:6px 12px 2px;font:.8rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);user-select:text}
.calc:not(.big):not([style*=height]) .calc-hist{height:170px}
.h-row{display:flex;flex-direction:column;align-items:flex-end;padding:3px 0;border-bottom:1px dashed var(--line)}
.h-row button{border:0;background:none;padding:1px 4px;border-radius:6px;cursor:pointer;font:inherit;color:inherit;text-align:right;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-row button:hover{background:var(--paper);color:var(--accent)}
.h-res b{color:var(--ink);font-size:1rem}
.h-res small{color:var(--muted);font-size:.78rem}
.h-name{color:var(--accent-2);font-weight:700}
.h-empty{text-align:center;padding:10px 0;font:.8rem var(--sans)}
.h-empty code{font-size:.75rem}
.calc-vars{display:flex;flex-wrap:wrap;gap:4px;padding:6px 12px 0;justify-content:flex-end}
.calc-vars:empty{display:none}
.var-chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;background:var(--paper);font:600 .72rem ui-monospace,monospace;overflow:hidden}
.var-chip button,button.var-chip{border:0;background:none;color:var(--ink);font:inherit;padding:2px 8px;cursor:pointer}
.ans-chip{color:var(--accent)!important;font:600 .72rem ui-monospace,monospace!important;border:1px solid var(--line)!important;border-radius:99px;background:var(--paper)!important}
.var-chip .var-x{padding:2px 6px 2px 2px;color:var(--muted)}
.var-chip .var-x:hover{color:var(--bad)}
.var-chip button:hover{color:var(--accent)}
.calc-in{display:block;width:calc(100% - 24px);margin:6px 12px 0;text-align:right;font:1.2rem ui-monospace,monospace;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);outline:none;user-select:text;flex:none}
.calc-in:focus{border-color:var(--accent)}
.calc-in.err{border-color:var(--bad)}
.calc-msg{min-height:1.3em;padding:1px 14px;font-size:.75rem;color:var(--good);text-align:right}
.calc-msg.bad{color:var(--bad)}
.calc-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:2px 12px 12px;flex:none}
.calc-keys button{padding:8px 0;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:600 .92rem var(--sans);cursor:pointer}
.calc-keys button:hover{border-color:var(--accent)}
.calc-keys button:active{transform:translateY(1px)}
.calc-keys .fn{font-size:.8rem;color:var(--muted)}
.calc-keys .op{color:var(--accent)}
.calc-keys .eq{grid-column:span 2;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.calc.big .calc-keys button{padding:12px 0;font-size:1.05rem}
.calc.big .calc-keys .fn{font-size:.9rem}
/* grapher */
.graph-pane{display:grid;grid-template-columns:230px 1fr;min-height:0}
.calc.narrow .graph-pane{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.g-side{border-right:1px solid var(--line);overflow:auto;padding:10px;min-height:0;user-select:text}
.calc.narrow .g-side{border-right:0;border-bottom:1px solid var(--line);max-height:min(200px,40vh)}
.g-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-row{display:grid;grid-template-columns:18px 1fr 22px;gap:6px;align-items:center}
.g-dot{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--c);background:var(--c);cursor:pointer;padding:0}
.g-row.off .g-dot{background:transparent}
.g-row.off .g-in{opacity:.55}
.g-in{min-width:0;width:100%;font:.95rem ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 8px;border:1.5px solid var(--line);border-left:4px solid var(--c);border-radius:8px;background:var(--paper);color:var(--ink);outline:none}
.g-in:focus{border-color:var(--c)}
.g-row.err .g-in{border-color:var(--bad);border-left-color:var(--c)}
.g-del{border:0;background:none;color:var(--muted);font-size:1.15rem;cursor:pointer;padding:0;line-height:1}
.g-del:hover{color:var(--bad)}
.g-err{grid-column:2/4;font-size:.72rem;color:var(--bad);margin-top:-3px;line-height:1.3}
.g-err:empty{display:none}
.g-add{margin-top:8px;width:100%;border:1.5px dashed var(--line);background:none;border-radius:8px;padding:6px;color:var(--accent);font:600 .82rem var(--sans);cursor:pointer}
.g-add:hover{border-color:var(--accent)}
.g-points{margin-top:8px}
.g-h{margin:8px 0 4px;font:700 .7rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.g-pt{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:3px 4px;border-radius:6px;font:.8rem ui-monospace,monospace;color:var(--ink);cursor:pointer;text-align:left}
.g-pt:hover{background:var(--paper)}
.g-pt span{color:var(--muted);font-family:var(--sans);font-size:.72rem}
.g-pt.int b{font-size:.9rem}
.g-pt i,.g-note i{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;margin-right:-3px}
.g-pt i:last-of-type,.g-note i:last-of-type{margin-right:3px}
.g-note{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);padding:3px 4px}
.g-help{font-size:.72rem;color:var(--muted);margin:10px 0 0;line-height:1.5}
.g-help code{font-size:.7rem;white-space:nowrap}
.calc.narrow .g-help{display:none}
.g-stage{position:relative;min-height:0;min-width:0;overflow:hidden}
.g-stage canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:grab}
.g-stage canvas.dragging{cursor:grabbing}
.g-zoom{position:absolute;top:8px;right:8px;display:grid;gap:4px}
.g-zoom button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:700 1.05rem var(--sans);cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:var(--shadow)}
.g-zoom button:hover{border-color:var(--accent);color:var(--accent)}
.g-zoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.g-coord{position:absolute;left:8px;bottom:6px;font:.75rem ui-monospace,monospace;color:var(--muted);background:var(--card);padding:1px 6px;border-radius:6px;pointer-events:none}
.g-coord:empty{display:none}
/* "Graph this" buttons in lesson text */
.graph-this{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin:0 2px 0 6px;padding:1px 7px 1px 5px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--accent);font:600 .7rem var(--sans);cursor:pointer;line-height:1.5}
.graph-this:hover{border-color:var(--accent);background:rgba(29,111,106,.08)}
.graph-this svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.math.has-graph{position:relative;display:block}
.math.has-graph>.graph-this{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media (max-width:800px){.tools .seg,#sidebar-toggle span{display:none}}

/* ---- accounts ---- */
.inline-form{display:inline;margin:0}
.linklike{border:0;background:none;color:var(--muted);font:inherit;font-size:.95rem;cursor:pointer;margin-left:16px;padding:0}
.linklike:hover{color:var(--ink)}
.nav-btn{margin-left:14px;padding:6px 14px;color:#fff!important}
.who{display:inline-flex;align-items:center;gap:8px;color:var(--ink)!important;font-weight:600}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-2);color:var(--on-accent);display:grid;place-items:center;font-size:.85rem}
.auth-wrap{display:grid;place-items:center;padding:40px 0}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 34px;box-shadow:var(--shadow)}
.auth-card h1{font-size:1.9rem;margin:0 0 4px}
.frow{margin:16px 0}
.frow label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px}
.frow input{width:100%;font:1rem var(--sans);padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);outline:none}
.frow input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,111,106,.15)}
.has-err input{border-color:var(--bad)}
.ferr,.form-err{color:var(--bad);font-size:.85rem;margin-top:4px}
.form-err{background:var(--bad-bg);padding:8px 12px;border-radius:8px}
.fhelp{color:var(--muted);font-size:.8rem;margin-top:4px}
.fhelp ul{margin:4px 0;padding-left:18px}
.wide-btn{width:100%;padding:12px;margin-top:8px;font-size:1rem}
.alt{text-align:center;margin-top:18px}
.recent{list-style:none;padding:0} .recent li{padding:8px 0;border-top:1px solid var(--line)}

/* ---- creatures ---- */
.creatures-link{display:inline-flex;align-items:center;gap:4px}
.mini svg{display:block;margin:-8px 0 -4px}
.coin{display:inline-block;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#f5c518 45%,#d49b00);border:2px solid #b07d00;vertical-align:-4px;margin-right:6px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.coin.sm{width:15px;height:15px;border-width:1.5px;margin-right:4px;vertical-align:-2px}
.coin-pill{display:inline-flex;align-items:center;background:#fff6d6;border:1px solid #f0d27a;border-radius:99px;padding:3px 12px;margin-left:14px;color:#7a5600!important;font-size:.9rem}
@media (prefers-color-scheme:dark){.coin-pill{background:#3a3115;border-color:#6b5520;color:#ffd866!important}}
.pet-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;padding:40px 0}
.parade{display:flex;flex-wrap:wrap;justify-content:center}
.parade svg:nth-child(odd){animation:bob 2.4s ease-in-out infinite}.parade svg:nth-child(even){animation:bob 2.4s ease-in-out .6s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes squish{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}
.bob{animation:bob 2.6s ease-in-out infinite;transform-origin:50% 100%}
.mood-sad .bob,.mood-hungry .bob{animation:squish 3.5s ease-in-out infinite}
.stage{background:radial-gradient(ellipse at 50% 85%,rgba(29,111,106,.16),transparent 60%),linear-gradient(#eaf6f3,#fbf8f1);border-radius:20px;display:grid;place-items:center;padding:16px 0 6px}
@media (prefers-color-scheme:dark){.stage{background:radial-gradient(ellipse at 50% 85%,rgba(79,184,174,.2),transparent 60%),linear-gradient(#1d2a2c,#14181f)}}
.pet-btn{border:0;background:none;cursor:pointer;padding:0}
.pet-btn:active .bob{transform:scale(1.06,.92)}
.adopt h1{margin-bottom:10px}
.adopt-grid{display:grid;grid-template-columns:360px 1fr;gap:34px}
.adopt-preview{position:sticky;top:20px;align-self:start}
.sp-blurb{text-align:center;color:var(--muted);font-style:italic;min-height:3em}
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick-card{display:flex;flex-direction:column;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 14px 10px;cursor:pointer}
.pick input:checked+.pick-card{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,111,106,.18)}
.swatch{display:block;width:40px;height:40px;border-radius:50%;border:3px solid;cursor:pointer}
.pick input:checked+.swatch{outline:3px solid var(--ink);outline-offset:3px}
.name-in{font:1.1rem var(--sans);padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:min(360px,100%)}
.btn.big{display:block;margin-top:22px;padding:12px 36px;font-size:1.1rem}
.pet-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.pet-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.pet-card{text-align:center}
.pet-name{margin:12px 0 0}
.stats{display:grid;gap:10px;margin:16px 0 6px;text-align:left}
.stats>div{display:grid;grid-template-columns:96px 1fr 104px;gap:10px;align-items:center;font-size:.9rem}
.stats b{font-size:.82rem;color:var(--muted);text-align:right;font-weight:600}
.meter{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px}
.meter.food i{background:linear-gradient(90deg,#ff922b,#ffc078)}
.meter.joy i{background:linear-gradient(90deg,#f06595,#faa2c1)}
.meter.xp i{background:linear-gradient(90deg,#4c6ef5,#91a7ff)}
.pet-side{display:grid;gap:16px}
.panel h3{margin:6px 0 10px;font-size:1.05rem}
.wallet{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.wallet p{margin:2px 0 0}
.coin-big{font:700 2rem var(--serif);display:flex;align-items:center}
.coin-big .coin{width:30px;height:30px}
.boost{background:#fff6d6;border-color:#f0d27a;color:#6b4c00}
@media (prefers-color-scheme:dark){.boost{background:#3a3115;border-color:#6b5520;color:#ffd866}}
.inv{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.inv form{margin:0}
.inv-item{display:grid;justify-items:center;width:104px;padding:8px 6px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);cursor:pointer;font:.78rem var(--sans);position:relative}
.inv-item:hover{border-color:var(--accent)}
.inv-item span{font-weight:600;line-height:1.2;text-align:center}
.inv-item em{position:absolute;top:4px;right:6px;font-style:normal;font-weight:700;color:var(--accent-2)}
.inv-item small{margin-top:4px;color:var(--accent);font-weight:700}
.inv-item.worn{border-color:var(--accent);background:rgba(29,111,106,.08)}
.earned{list-style:none;padding:0;margin:0}
.earned li{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line);font-size:.9rem}
.toasts{display:grid;gap:8px;margin-bottom:16px}
.flash{padding:10px 16px;border-radius:12px;font-weight:600;background:var(--good-bg);color:var(--good);border:1px solid var(--good)}
.flash.error{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.flash.info{background:rgba(29,111,106,.08);color:var(--accent);border-color:var(--accent)}
.shop-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:6px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:26px}
.shop-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.shop-item h3{margin:6px 0 2px;font-size:1.05rem}
.shop-item p{margin:2px 0}
.shop-item form{margin-top:auto;padding-top:10px}
.shop-art{display:grid;place-items:center;height:96px;background:var(--paper);border-radius:12px}
#toast-zone{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:grid;gap:8px;z-index:60;pointer-events:none}
.reward-toast{background:var(--card);border:2px solid #f0d27a;border-radius:14px;padding:10px 18px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-weight:700;display:flex;align-items:center;gap:10px;animation:toastin .35s ease,toastout .4s ease 3.6s forwards}
.reward-toast.big{border-color:var(--accent)}
@keyframes toastin{from{transform:translateY(20px);opacity:0}}
@keyframes toastout{to{transform:translateY(10px);opacity:0}}
@media (max-width:900px){.pet-layout,.pet-hero,.adopt-grid{grid-template-columns:1fr}}

/* ---- Creature Quest (auto-battler) ---- */
.bt{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.bt-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}
.stage-nav{display:flex;align-items:center;gap:10px}
.stage-nav h1{margin:0;font-size:2rem;min-width:170px;text-align:center}
.stage-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}
.stage-nav button:disabled{opacity:.35;cursor:default}
.auto{font-size:.85rem;color:var(--muted);margin-left:10px;display:flex;gap:6px;align-items:center}
.gold-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 16px;box-shadow:var(--shadow)}
.gold-box b{font:700 1.7rem var(--serif)} .gold-box small{color:var(--muted)}
.gold-ico{display:inline-block;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe0,#ffcf3f 45%,#e09a00);border:2px solid #a86f00;position:relative}
.gold-ico::after{content:"";position:absolute;inset:5px;border:1.5px solid rgba(168,111,0,.5);border-radius:50%}
.gold-ico.sm{width:14px;height:14px;border-width:1.5px;vertical-align:-2px}.gold-ico.sm::after{display:none}
.arena{position:relative;height:430px;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);user-select:none}
.arena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(0,0,0,.06))}
.kills{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.kills i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.7);border:2px solid rgba(0,0,0,.15)}
.kills i.on{background:#ffcf3f;border-color:#a86f00}
.boss-tag{background:#b42318;color:#fff;font-weight:800;padding:4px 14px;border-radius:99px;letter-spacing:.04em}
.boss-timer{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:260px;height:14px;border-radius:99px;background:rgba(0,0,0,.12);overflow:hidden;z-index:2}
.boss-timer i{display:block;height:100%;background:linear-gradient(90deg,#f03e3e,#ff922b)}
.boss-timer span{position:absolute;inset:0;text-align:center;font:700 .7rem/14px var(--sans);color:#fff}
.party{position:absolute;left:6%;bottom:34px;z-index:1;display:flex;align-items:flex-end}
.hero{position:relative;z-index:2;animation:bob 2.6s ease-in-out infinite}
.hero.lunge svg{animation:lunge .18s ease}
@keyframes lunge{50%{transform:translateX(28px) rotate(6deg)}}
.ally-row{display:flex;flex-wrap:wrap-reverse;width:236px;margin-left:-8px;gap:0 2px}
.mini-ally svg{width:42px;height:auto;display:block}
.mini-ally.hop svg{animation:hop .35s ease}
@keyframes hop{50%{transform:translateY(-12px)}}
.foe{position:absolute;right:7%;bottom:30px;width:300px;text-align:center;z-index:1;transition:opacity .3s,transform .3s}
.foe.dead{opacity:0;transform:scale(.6) translateY(30px)}
.foe.enter{animation:enter .35s ease}
@keyframes enter{from{opacity:0;transform:translateX(60px)}}
.foe-name{font:700 1.15rem var(--serif);color:#2a2233}
.hp{position:relative;height:18px;border-radius:99px;background:rgba(0,0,0,.15);overflow:hidden;margin:6px 20px 4px;border:2px solid rgba(0,0,0,.12)}
.hp i{display:block;height:100%;background:linear-gradient(90deg,#e03131,#ff6b6b);transition:width .08s}
.hp span{position:absolute;inset:0;font:700 .72rem/14px var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.foe-art{border:0;background:none;padding:0;cursor:crosshair;width:240px;display:block;margin:0 auto}
.foe-art svg{width:100%;height:auto;display:block;animation:bob 2s ease-in-out infinite}
.foe-art svg.boss{transform-origin:50% 100%;width:115%;margin-left:-7%}
.foe-art.hurt svg{animation:hurt .15s ease}
@keyframes hurt{50%{transform:scale(.94,1.04) translateX(6px);filter:brightness(1.4)}}
.fx{position:absolute;inset:0;pointer-events:none;z-index:3}
.dmg{position:absolute;font:800 1.25rem var(--sans);color:#fff;text-shadow:0 2px 0 #c92a2a,0 0 6px rgba(0,0,0,.35);animation:floatup .9s ease-out forwards;white-space:nowrap}
.dmg.crit{font-size:2rem;color:#ffe066;text-shadow:0 2px 0 #e8590c,0 0 8px rgba(0,0,0,.35)}
.dmg.gold-pop{color:#ffd43b;text-shadow:0 2px 0 #a86f00;font-size:1.1rem}
.dmg.ally-pop{color:#e7f5ff;text-shadow:0 2px 0 #1c7ed6;font-size:1rem}
@keyframes floatup{to{transform:translateY(-70px);opacity:0}}
.bt-stats{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;align-items:stretch}
.bt-stats>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 16px}
.bt-stats small{display:block;color:var(--muted);font-size:.75rem}
.bt-stats b{font:700 1.3rem var(--serif)}
.boost-chip{background:#fff6d6!important;border-color:#f0d27a!important;color:#6b4c00;display:flex;align-items:center;gap:6px;font-weight:600}
.hint-chip{color:var(--muted);font-size:.85rem;display:flex;align-items:center}
.shop-col{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 12px 8px;box-shadow:var(--shadow);height:calc(100vh - 110px);min-height:520px;max-height:900px;display:flex;flex-direction:column;position:sticky;top:16px}
.buy-amt{display:flex;gap:4px;align-items:center;margin-bottom:10px;font-size:.85rem;color:var(--muted)}
.buy-amt span{margin-right:auto;font-weight:700}
.buy-amt button{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:4px 10px;font:600 .8rem var(--sans);cursor:pointer;color:var(--ink)}
.buy-amt button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.up{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:12px;border:1px solid var(--line);margin-bottom:8px;background:var(--paper)}
.up-art svg{width:56px;height:auto;display:block}
.up-info b{display:block;font-size:.95rem}
.up-info small{display:block;font-size:.75rem}
.hero-up{border-color:var(--accent);background:rgba(29,111,106,.06)}
.cost-btn{border:0;border-radius:10px;background:#ffcf3f;color:#5c3d00;font:700 .85rem var(--sans);padding:8px 10px;cursor:pointer;min-width:84px;box-shadow:0 2px 0 #c79100}
.cost-btn:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:default}
.cost-btn:not(:disabled):active{transform:translateY(2px);box-shadow:none}
.save-note{margin:4px 4px 0}
.shop-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:0 -2px 8px;flex:none}
.shop-tabs button{position:relative;flex:1 1 auto;border:0;background:none;padding:10px 4px 8px;font:700 .8rem var(--sans);white-space:nowrap;color:var(--muted);cursor:pointer;border-radius:10px 10px 0 0;margin-bottom:-2px;border-bottom:3px solid transparent}
.shop-tabs button:hover{color:var(--ink);background:var(--paper)}
.shop-tabs button.on{color:var(--accent);border-bottom-color:var(--accent);background:var(--paper)}
.shop-tabs .badge{position:absolute;top:-6px;right:-3px;z-index:1;min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:#c92a2a;color:#fff;font:800 .64rem/17px var(--sans);font-style:normal;box-shadow:0 1px 0 rgba(0,0,0,.2);animation:badgepop .3s ease}
@keyframes badgepop{from{transform:scale(.4)}}
.shop-panes{flex:1;min-height:0;overflow:auto;padding:0 2px;overscroll-behavior:contain}
.shop-foot{flex:none;border-top:1px solid var(--line);margin-top:6px}
.shop-foot .ascend{margin:8px 0 2px;padding:7px 10px}.shop-foot .ascend .muted{display:none}.shop-foot .save-note{font-size:.72rem}
.ally-filter{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.78rem;color:var(--muted);margin:-2px 2px 8px}
.ally-filter label{display:flex;align-items:center;gap:5px;cursor:pointer}
.ally-up.far{opacity:.55}
.up-hint a{font-weight:700;color:#8445a3;text-decoration:none;font-size:.74rem}
.pane-note{margin:8px 4px}
.pane-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 2px 8px}
.pane-head b{display:block;font-size:.95rem}.pane-head small{display:block;font-size:.72rem;color:var(--muted)}
.mini-btn{border:1px solid #f0b400;background:#fff6d6;border-radius:9px;padding:6px 9px;font:700 .74rem var(--sans);color:#5c3d00;cursor:pointer;white-space:nowrap}
.mini-btn:disabled{border-color:var(--line);background:var(--paper);color:var(--muted);cursor:default}
.urow{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--paper);margin-bottom:6px}
.urow.ready{background:#fffbea;border-color:#f0d27a}
.urow.locked{opacity:.6}
.u-art svg{width:40px;height:auto;display:block}
.u-info b{display:block;font-size:.85rem}
.u-info small{display:flex;align-items:center;gap:3px;font-size:.74rem}
.u-info small svg{width:16px;height:16px}
.u-info .m{font-weight:800;color:#8445a3}
.u-lock{font:700 .74rem var(--sans);color:var(--muted);padding:0 6px}
.urow .cost-btn{min-width:76px;font-size:.78rem;padding:7px 8px}
.ups-sub{margin:12px 4px 6px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.gups-owned{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:10px 2px}
.own-chip{display:inline-flex;align-items:center;gap:1px;border:1px solid #58c49c;background:#e6f6ee;color:#2f6f57;border-radius:99px;padding:1px 6px 1px 2px;font:700 .7rem var(--sans)}
.own-chip svg{width:18px;height:18px}
.gups{display:grid;gap:5px;margin-top:6px}
.gup{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:5px 8px;cursor:pointer;color:var(--ink);font:inherit}
.gup .gi b{display:block;font-size:.82rem}.gup .gi small{display:block;font-size:.7rem;color:var(--muted)}
.gup .gc{font:700 .75rem var(--sans);white-space:nowrap;color:#5c3d00}
.gup.ready{background:#fff6d6;border-color:#f0b400;box-shadow:0 2px 0 #c79100}
.gup.ready:active{transform:translateY(1px);box-shadow:none}
.gup:disabled{cursor:default}
.gup.locked{opacity:.5}.gup.locked .gc{color:var(--muted)}
.gup.owned{display:none}
.pet-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
@media (max-width:1000px){.bt{grid-template-columns:1fr}.shop-col{position:static;height:75vh;min-height:460px}}

/* ---- Marginalia: world map, shopfronts, fountain ---- */
.world-head{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:14px}
.world-head h1{font-size:2.8rem;margin:.1em 0}
.world-buddy{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 20px;box-shadow:var(--shadow);min-width:170px;text-align:center;font-size:.85rem}
.map-frame{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 40px rgba(58,47,74,.12)}
.world-map{display:block;width:100%;height:auto}
.world-map .pname{font:700 15px Georgia,serif;fill:#3a2f4a}
.world-map .psub{font:12px Inter,system-ui,sans-serif;fill:#7a6f88}
.world-map .place .ico{transition:transform .2s;transform-box:fill-box;transform-origin:50% 100%}
.world-map a:hover .ico{transform:translateY(-6px) scale(1.06)}
.world-map a:hover .label rect{fill:#fff6d6}
.world-map .soon{opacity:.45;filter:grayscale(1)}
.map-tip{text-align:center;margin-top:8px}
.fountain-note{display:block;text-align:center;background:#fff6d6;border:1px solid #f0d27a;color:#6b4c00;border-radius:12px;padding:10px;margin-bottom:14px;font-weight:600;text-decoration:none}
.shopfront{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px}
.awning{height:34px;background:repeating-linear-gradient(90deg,var(--shop) 0 40px,#fff 40px 80px);border-bottom:3px solid rgba(0,0,0,.08)}
.awning{position:relative}
.awning::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:radial-gradient(circle at 20px 0,var(--shop) 12px,transparent 13px) 0 0/80px 12px,radial-gradient(circle at 60px 0,#fff 12px,transparent 13px) 0 0/80px 12px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.06))}
.shopfront-body{display:grid;grid-template-columns:190px 1fr auto;gap:22px;align-items:center;padding:20px 26px 18px}
.shopfront h1{margin:.1em 0 .3em}
.keeper svg{display:block;animation:bob 2.8s ease-in-out infinite}
.bubble{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:12px 16px;max-width:560px}
.bubble::before{content:"";position:absolute;left:-10px;top:22px;border:10px solid transparent;border-right-color:var(--line);border-left:0}
.next-door{text-align:center}
.fountain-page{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 0}
.fountain-art{width:100%;max-width:460px}
.fountain-art .stars{opacity:.25}
.fountain-art.sparkle .stars{opacity:1;animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.3}}
.fountain-art .jet{stroke-dasharray:12 8;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.fountain-buddy{margin-top:16px}
.fountain-buddy svg{animation:bob 2.6s ease-in-out infinite}
@media (max-width:900px){.world-head,.fountain-page{flex-direction:column;grid-template-columns:1fr}.shopfront-body{grid-template-columns:1fr}}

.ascend{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;margin:12px 0 4px;background:linear-gradient(135deg,#2b2140,#4b3a78);color:#efe7ff}
.ascend small{display:block;font-size:.75rem}.ascend .muted{color:#b9acd9}
.asc-btn{border:0;border-radius:10px;padding:9px 12px;font:700 .82rem var(--sans);background:#b197fc;color:#21173a;cursor:pointer}
.asc-btn:disabled{background:#5a4a86;color:#a99bd0;cursor:default}

.asc-badge{display:inline-block;background:#2b2140;color:#e5dbff;border-radius:99px;padding:4px 14px;font-weight:700;font-size:.85rem}
.book-done{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:linear-gradient(135deg,#2b2140,#4b3a78);color:#efe7ff;border-radius:16px;padding:16px 20px;margin:12px 0 18px}
.big-asc{padding:12px 18px;font-size:.95rem}

/* ---- Quillquest (turn-based adventure) ---- */
.qq{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start;width:min(1380px,calc(100vw - 48px));margin-left:calc((100% - min(1380px,calc(100vw - 48px)))/2)}
.q-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:8px}
.q-title{margin:0;font-size:1.9rem}.q-title small{display:block;font:600 .9rem var(--sans);color:var(--muted);margin-top:2px}
.q-help{margin:0;text-align:right}.q-help kbd{font:600 .72rem var(--sans);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 4px;background:var(--card)}
.q-stage{--on-accent:#fff;--accent:#1d6f6a;--accent-2:#b4532a;--good:#1f8a4c;--bad:#b42318;--paper:#fbf8f1;--card:#fffdf6;--ink:#1f2a3a;--muted:#585f6c;--line:#d9d0bc;color:var(--ink);color-scheme:light;position:relative;border-radius:18px;overflow:hidden;border:3px solid #3a2f4a;box-shadow:var(--shadow);background:#2a2233;aspect-ratio:20/13}
.q-map{display:block;width:100%;height:100%;cursor:pointer;user-select:none}
.q-hero{transition:transform .13s linear}
.q-hero svg{overflow:visible}
.q-hero.flip>svg{transform:scaleX(-1);transform-origin:20px 0;transform-box:view-box}
.q-hero>svg{animation:qbob 1.6s ease-in-out infinite}
@keyframes qbob{50%{transform:translateY(-2px)}}
.q-hero.bonk>svg{animation:qbonk .2s ease}
@keyframes qbonk{30%{transform:translateX(3px)}70%{transform:translateX(-3px)}}
.q-sparkle{animation:qtw 1.4s ease-in-out infinite}
@keyframes qtw{50%{opacity:.15}}
.q-bang{animation:qbob 1s ease-in-out infinite}
.q-boss svg{animation:qbob 1.2s ease-in-out infinite}
.q-exit{opacity:.85}
.q-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(42,34,51,.85);color:#fff6d6;font:700 1.15rem var(--serif);padding:8px 22px;border-radius:99px;pointer-events:none}
.q-banner.show{animation:qban 2.2s ease forwards}
@keyframes qban{0%{opacity:0;transform:translate(-50%,-8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.q-dialog{position:absolute;left:3%;right:3%;bottom:4%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#fffdf6;border:3px solid #3a2f4a;border-radius:16px;padding:10px 16px;box-shadow:0 8px 0 rgba(0,0,0,.18);cursor:pointer;z-index:5}
.q-portrait svg{width:62px;height:auto;display:block}
.q-who{font:700 .95rem var(--serif);color:#6b4c9a}
.q-text{margin:2px 0 0;font-size:1rem;line-height:1.45}
.q-more{align-self:end;color:#6b4c9a;animation:qbob 1s ease-in-out infinite}
.q-modal{position:absolute;inset:0;background:rgba(42,34,51,.45);display:grid;place-items:center;z-index:8;padding:14px}
.q-card{background:var(--card);border:3px solid #3a2f4a;border-radius:16px;padding:14px 18px;width:min(560px,100%);max-height:100%;overflow:auto;box-shadow:0 10px 0 rgba(0,0,0,.18)}
.q-qhead{display:flex;justify-content:space-between;align-items:center;font:700 1.1rem var(--serif)}
.q-stars{color:#f59f00;letter-spacing:2px}
.q-sub{margin:4px 0 8px;color:var(--muted);font-size:.9rem}
.q-src{font-size:.72rem;color:#6741b0;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.q-heading{font-size:.9rem;color:var(--muted);margin-top:4px}.q-heading p{margin:0}
.q-prompt{font-size:1.25rem;margin:6px 0 10px}.q-prompt p{margin:0}
.q-form{display:flex;gap:8px}
.q-in{flex:1;font:1.1rem var(--sans);padding:9px 12px;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.q-in:focus{outline:none;border-color:var(--accent)}
.q-preview{min-height:1.6em;margin:6px 2px 0;color:var(--muted)}
.q-hint{display:block;margin:2px 2px 8px}
.q-timer{position:relative;height:14px;border-radius:99px;background:var(--line);overflow:hidden;margin:4px 0 10px}
.q-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f59f00,#ffd43b);transition:width .1s linear}
.q-timer span{position:absolute;inset:0;text-align:center;font:700 .7rem/14px var(--sans);color:#5c3d00}
.q-actions{display:flex;justify-content:flex-end;gap:8px}
.q-result{margin-top:8px;padding:8px 12px;border-radius:10px;font-weight:600}
.q-result.good{background:#e6f6ee;color:#2f6f57;border:1px solid #58c49c}
.q-result.bad{background:#fff4e6;color:#8a4b0f;border:1px solid #f0b46a}
.q-shop-list{display:grid;gap:6px;margin:10px 0}
.q-shop-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.q-shop-row small{display:block;font-size:.75rem;color:var(--muted)}
.q-purse,.q-shop-row .cost-btn{display:inline-flex;align-items:center;gap:5px}
.q-penny{display:inline-block;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e3d5ff,#9775fa 50%,#5f3dc4);border:1.5px solid #3b2a6b;vertical-align:-2px}
/* battle */
.q-battle{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;z-index:6;background:linear-gradient(180deg,#e6f0fb,#cdeccf)}
.q-battle.theme-forest{background:linear-gradient(180deg,#d3f9d8,#a7d39f)}
.q-battle.theme-cave{background:linear-gradient(180deg,#8f87a0,#d8d1c4)}
.q-battle.theme-keep{background:linear-gradient(180deg,#4b3a78,#c9bde6)}
.qb-scene{position:relative;overflow:hidden}
.qb-foe{position:absolute;right:6%;top:6%;display:flex;flex-direction:column;align-items:center;width:38%}
.qb-foe-art svg{width:min(210px,24vw);height:auto;display:block;animation:qbob 1.8s ease-in-out infinite}
.qb-foe-art.gone svg{animation:qgone .7s ease forwards}
@keyframes qgone{to{opacity:0;transform:scale(.4) translateY(40px)}}
.qb-hero{position:absolute;left:6%;bottom:2%;display:flex;align-items:flex-end;gap:12px;width:60%}
.qb-hero-art svg{width:min(150px,17vw);height:auto;display:block;animation:qbob 2s ease-in-out infinite}
.qb-foe-art.hit svg,.qb-hero-art.hit svg{animation:qhit .3s ease}
@keyframes qhit{30%{transform:translateX(8px);filter:brightness(1.6)}70%{transform:translateX(-6px)}}
.qb-plate{background:rgba(255,253,246,.94);border:2px solid #3a2f4a;border-radius:12px;padding:6px 12px;min-width:190px;box-shadow:0 4px 0 rgba(0,0,0,.15);margin-bottom:6px}
.qb-plate b{font-family:var(--serif)}.qb-plate small{display:block;font-size:.7rem;color:var(--muted)}
.qb-tag{background:#b42318;color:#fff;font:800 .62rem var(--sans);padding:1px 7px;border-radius:99px;vertical-align:2px}
.qb-st{color:#8445a3!important;font-weight:700}
.qb-bar{height:9px;border-radius:99px;background:rgba(0,0,0,.12);overflow:hidden;margin:3px 0 1px}
.qb-bar i{display:block;height:100%;border-radius:99px;transition:width .3s}
.qb-bar.hp i{background:linear-gradient(90deg,#e03131,#ff8787)}
.qb-bar.mp i{background:linear-gradient(90deg,#4263eb,#74c0fc)}
.qb-bar.xp i{background:linear-gradient(90deg,#f59f00,#ffe066)}
.qb-fx{position:absolute;inset:0;pointer-events:none}
.qb-pop{position:absolute;font:800 1.6rem var(--sans);color:#fff;text-shadow:0 2px 0 #c92a2a,0 0 6px rgba(0,0,0,.35);animation:floatup 1.1s ease-out forwards}
.qb-pop.foe{right:22%;top:28%}.qb-pop.hero{left:16%;bottom:42%}
.qb-pop.crit{font-size:2.2rem;color:#ffe066;text-shadow:0 2px 0 #e8590c,0 0 8px rgba(0,0,0,.4)}
.qb-pop.heal{color:#d3f9d8;text-shadow:0 2px 0 #2b8a3e}
.qb-pop.ink{color:#d0bfff;text-shadow:0 2px 0 #3b2a6b}
.qb-bottom{display:grid;grid-template-columns:1fr minmax(260px,46%);gap:10px;background:#fffdf6;border-top:3px solid #3a2f4a;padding:10px 12px;min-height:128px}
.qb-log{font-size:.86rem;line-height:1.35;overflow:hidden}.qb-log p{margin:0 0 3px}
.qb-log p.emp{color:#8445a3;font-weight:700}.qb-log p.bad{color:#b42318;font-weight:700}
.qb-menu{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start;max-height:150px;overflow:auto}
.qb-menu button{border:2px solid #3a2f4a;background:#fff;border-radius:10px;padding:8px 10px;font:700 .9rem var(--sans);cursor:pointer;text-align:left;color:var(--ink);box-shadow:0 3px 0 #3a2f4a}
.qb-menu button:hover:not(:disabled){background:#fff6d6}
.qb-menu button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #3a2f4a}
.qb-menu button:disabled{opacity:.45;cursor:default}
.qb-menu .qb-ab{grid-column:1/-1;padding:5px 10px}.qb-ab b{display:block;font-size:.85rem}.qb-ab small{display:block;font-size:.7rem;font-weight:500;color:var(--muted)}
.qb-menu .qb-back,.qb-menu .qb-cont{grid-column:1/-1;text-align:center}
.qb-menu .qb-cont{background:var(--accent);color:var(--on-accent)}
/* side panel */
.q-side{display:grid;gap:10px;position:sticky;top:16px}
.qs-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow)}
.qs-card h4{margin:0 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#qs-hero{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center}
#qs-hero b{font:700 1.1rem var(--serif)}#qs-hero small{display:block;font-size:.75rem;color:var(--muted)}
.qs-art svg{width:56px;height:auto;display:block}
.qs-row{display:grid;grid-template-columns:28px 1fr 56px;gap:6px;align-items:center;font-size:.8rem;font-weight:700}
.qs-row small{text-align:right;color:var(--muted)}
.qs-stats{display:flex;justify-content:space-between;margin-top:6px;font-weight:700;font-size:.9rem}
.qs-stats span{display:inline-flex;align-items:center;gap:4px}
.qs-glow{margin-top:6px;font-size:.75rem;background:#fff6d6;border:1px solid #f0d27a;border-radius:8px;padding:4px 8px;color:#6b4c00}
.qs-quest p{margin:0;font-size:.88rem}
.qs-slot{display:grid;grid-template-columns:58px 1fr;gap:6px;align-items:center;font-size:.75rem;text-transform:capitalize;color:var(--muted);margin-bottom:4px}
.qs-slot select{font:inherit;font-size:.82rem;text-transform:none;color:var(--ink);padding:3px 4px;border-radius:7px;border:1px solid var(--line);background:var(--paper)}
.qs-item{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:4px}
.qs-ab{font-size:.82rem;margin-bottom:2px}.qs-ab small{color:var(--muted)}.qs-ab.locked{opacity:.45}
.qs-foot{display:flex;align-items:center;gap:10px}
.q-guest{color:#4a3600;background:#fff6d6;border:1px solid #f0d27a;border-radius:10px;padding:8px 12px;margin-top:10px}.q-guest a{color:#7a3e00;font-weight:700}
@media (max-width:1000px){.qq{grid-template-columns:1fr}.q-side{position:static;grid-template-columns:1fr 1fr}.q-top{flex-direction:column;align-items:start}.q-help{text-align:left}}
@media (max-width:640px){.q-stage{aspect-ratio:auto;height:auto}.qb-bottom{grid-template-columns:1fr}.q-side{grid-template-columns:1fr}}
.q-battle:not([hidden])~.q-modal{place-items:end end;padding-right:3%;background:rgba(42,34,51,.25);padding-bottom:3%}
.q-battle:not([hidden])~.q-modal .q-card{width:min(520px,100%)}
.q-learn{display:inline-block;margin:-4px 0 10px;font-size:.8rem;font-weight:600;color:var(--accent)}

/* dark-theme contrast fixes for panels with fixed light backgrounds */
.urow.ready,.gup.ready{color:#2b2140}
.urow.ready small,.urow.ready .muted,.gup.ready small,.gup.ready .muted{color:#5f5440}
@media (prefers-color-scheme:dark){.up-hint a,.u-info .m{color:#c9a8f0}}
.urow.ready .u-info .m{color:#7a3c98}
/* Quillquest mentors, skill points and ranks */
.q-mentor{width:min(600px,100%)}
.q-mhead{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.q-mhead b{font:700 1.15rem var(--serif)}.q-mhead small{display:block;color:var(--muted);font-size:.8rem}
.q-mart svg{width:58px;height:auto;display:block}
.q-mab{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);margin-bottom:8px}
.q-mab small{display:block;font-size:.78rem;color:var(--muted)}
.q-mab .q-mstatus{color:#6741b0;font-weight:600;margin-top:2px}
.q-lesson{font-size:1.05rem;line-height:1.55;min-height:4.5em;margin:4px 0 8px}.q-lesson p{margin:0}
.q-dots{display:flex;gap:6px;justify-content:center;margin:6px 0 10px}.q-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.q-dots i.on{background:var(--accent)}
.q-card .btn:disabled{opacity:.55;cursor:default}
.qs-card h4{display:flex;justify-content:space-between;align-items:center}
.qs-sp{font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.qs-ab{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:3px 0;border-bottom:1px dashed var(--line)}
.qs-ab:last-child{border-bottom:0}
.qs-ab small{display:block}
.qs-ab.locked{opacity:1}.qs-ab.locked b{color:var(--muted)}
.qs-rank{font:800 .66rem var(--sans);background:#6741b0;color:#fff;border-radius:6px;padding:0 5px;vertical-align:1px}
.qs-max{font-size:.7rem;color:var(--muted)}
.mini-btn:disabled{opacity:.5;cursor:default}
/* Quillquest keyboard focus + key legend */
.q-help{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:flex-end;max-width:640px}
.q-help span{white-space:nowrap}
.qb-menu button:focus{outline:none}
.qb-menu button:focus-visible,.qb-menu button:focus{background:#fff3bf;box-shadow:0 0 0 3px #f59f00,0 3px 0 #3a2f4a;position:relative}
.qb-menu button:focus::before{content:"▸";position:absolute;left:-2px;top:50%;transform:translate(-100%,-50%);color:#f08c00;font-weight:900}
.q-stage .btn:focus-visible,.q-stage .mini-btn:focus-visible,.q-stage .cost-btn:focus-visible,.q-stage a:focus-visible{outline:3px solid #f59f00;outline-offset:2px}
.qb-menu{padding-left:12px}
/* Quillquest timer states */
.q-timer.low i{background:linear-gradient(90deg,#e8590c,#ff922b)}
.q-timer.paused i{background:repeating-linear-gradient(45deg,#74c0fc 0 8px,#a5d8ff 8px 16px)}
.q-timer.paused span{color:#0b3d66}
.q-timer.late{height:22px;background:#ffe3e3;border:2px solid #c92a2a;animation:qlate 1.2s ease-in-out infinite}
.q-timer.late i{background:repeating-linear-gradient(45deg,#ffc9c9 0 10px,#ffa8a8 10px 20px)}
.q-timer.late span{font-size:.78rem;line-height:18px;color:#7d1414;font-weight:800}
@keyframes qlate{50%{box-shadow:0 0 0 3px rgba(201,42,42,.25)}}
.q-late-note{margin:-4px 0 10px;font-size:.85rem;font-weight:600;color:#8a2a00;background:#fff4e6;border:1px solid #f0b46a;border-radius:8px;padding:5px 9px}
.q-learn-note{color:var(--muted);font-size:.75rem}
.qs-unknown b{color:var(--muted);letter-spacing:.02em}
.qb-pop.critword{right:auto;left:50%;top:12%;transform:translateX(-50%);font-size:3rem;letter-spacing:.04em;color:#ffd43b;text-shadow:0 3px 0 #c92a2a,0 0 14px rgba(0,0,0,.5);animation:critpop 1.1s ease-out forwards}
@keyframes critpop{0%{transform:translateX(-50%) scale(.4);opacity:0}25%{transform:translateX(-50%) scale(1.25);opacity:1}100%{transform:translateX(-50%) translateY(-30px) scale(1);opacity:0}}
/* error pages */
.err-page{max-width:560px;margin:56px auto;text-align:center;padding:30px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.err-mark{font:800 4rem/1 var(--sans,system-ui);color:var(--accent);letter-spacing:.05em}
.err-page p{color:var(--muted)}.err-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---- footer version stamp ---- */
.site-ver{margin-top:6px;font-size:.72rem;opacity:.8;letter-spacing:.01em}

/* ---- Quillquest touch controls (hidden on desktop) ---- */
.q-pad{display:none}
@media (pointer:coarse),(max-width:800px){
  .q-pad{display:flex;justify-content:space-between;align-items:center;margin:12px 4px 4px;user-select:none;-webkit-user-select:none;touch-action:none}
  .q-dpad{display:grid;grid-template:repeat(3,52px)/repeat(3,52px);gap:2px}
  .q-pad button{border:2px solid #3a2f4a;background:var(--card);color:var(--ink);border-radius:12px;font:700 1.1rem var(--sans);box-shadow:0 3px 0 #3a2f4a;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .q-pad button.held{transform:translateY(2px);box-shadow:0 1px 0 #3a2f4a;background:#fff3bf;color:#3a2f4a}
  .q-dpad .up{grid-area:1/2}.q-dpad .left{grid-area:2/1}.q-dpad .right{grid-area:2/3}.q-dpad .down{grid-area:3/2}
  .q-ab{display:flex;gap:14px;align-items:center}
  .q-ab button{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;align-content:center;line-height:1;font-size:1.3rem}
  .q-ab small{display:block;font-size:.6rem;font-weight:600;text-transform:uppercase;margin-top:2px;opacity:.75}
  .q-ab .a{background:var(--accent);color:var(--on-accent);margin-bottom:28px}
  .q-help{display:none}
}

/* ---- phones and small tablets ---- */
@media (max-width:800px){
  /* lesson list becomes a slide-out drawer opened from the "Lessons" button */
  html[data-sidebar] .toc{display:block;position:fixed;top:0;left:0;bottom:0;width:min(300px,84vw);z-index:70;background:var(--card);
    border-right:1px solid var(--line);padding:20px 18px 30px;overflow-y:auto;transform:translateX(-105%);transition:transform .22s ease;box-shadow:none}
  html.toc-open .toc{transform:none;box-shadow:0 0 0 100vmax rgba(20,24,31,.4)}
  .toc li{margin:0}.toc li a{display:block;padding:9px 0;min-height:44px}
  html:not([data-sidebar=hidden]) #sidebar-toggle{background:var(--card);color:var(--muted)}
  html.toc-open #sidebar-toggle{background:var(--accent);color:var(--on-accent)}
  #sidebar-toggle span{display:inline}
  html[data-sidebar=hidden][data-width=comfortable] .lesson{margin:0}
  .lesson{max-width:none;min-width:0}
}
@media (max-width:700px){
  body{font-size:16px;-webkit-text-size-adjust:100%}
  main,html[data-width] main{padding:16px 14px;max-width:none}
  h1{font-size:1.8rem}.hero h1,.small-hero h1{font-size:1.9rem}
  /* header: brand on one row, nav wraps below */
  .top{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .top nav{flex-wrap:wrap;gap:6px 14px;width:100%}
  .top nav a,.top nav .linklike,.coin-pill,.nav-btn{margin-left:0}
  .tools{margin-left:0;order:9}
  .tools .seg{display:none}
  .tool{min-height:40px;padding:8px 12px}
  .top nav>a,.linklike{min-height:36px;display:inline-flex;align-items:center}
  /* lesson text and math */
  .lesson-layout{display:block}
  .prose{overflow-wrap:break-word}
  .katex-display{overflow-x:auto;overflow-y:hidden;position:relative;padding:4px 0 6px;-webkit-overflow-scrolling:touch}
  .katex-display>.katex{max-width:none}
  .math.has-graph{padding-right:0}
  .math.has-graph>.graph-this{position:static;transform:none;margin:4px 0 0}
  .prose svg,.prose img,.lesson svg:not(.katex svg){max-width:100%;height:auto}
  main table{display:block;overflow-x:auto;max-width:100%;position:relative}
  .history{padding:4px 14px}
  .cards{grid-template-columns:1fr}
  .course-card{padding:16px;gap:14px}.book-spine{flex-basis:54px;height:84px}
  .chapter{padding:6px 14px 12px}
  .chapter-head{flex-wrap:wrap;gap:6px}
  /* exercises: full-width inputs, thumb-sized buttons, no iOS zoom */
  .ex-top{flex-direction:column;align-items:stretch;gap:8px}.progress{min-width:0}
  .ex{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:14px 12px}
  .ex-num{width:28px;height:28px;font-size:.8rem}
  .field{flex-wrap:wrap}
  .field input,html[data-width] .field input{flex:1 1 100%;min-width:0;min-height:46px;font-size:16px}
  .actions .btn,.actions button{flex:1 1 auto;min-height:44px}
  .yesno{flex-wrap:wrap}.yesno label{min-height:44px;display:inline-flex;align-items:center;flex:1 1 auto}
  .frow input,.name-in,.q-in,.calc-in,.g-in,input,select,textarea{font-size:16px}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pager{gap:10px;flex-wrap:wrap}.pager .btn{flex:1 1 140px;text-align:center}
  .scoreboard{flex-wrap:wrap}.scoreboard div{flex:1;padding:10px}
  /* reward toasts: top of the screen, out of the way of answer boxes and the keyboard */
  #toast-zone{bottom:auto;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;transform:none;justify-items:center}
  .reward-toast{font-size:.9rem;padding:8px 14px}
  .auth-card{padding:22px 18px}.auth-wrap{padding:16px 0}
  footer{padding:28px 16px}
}
/* calculator: bottom sheet on phones */
@media (max-width:600px){
  .calc,.calc.graphing,.calc.big,.calc.big:not(.graphing){left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;
    height:min(88vh,640px)!important;height:min(88dvh,640px)!important;max-width:none;max-height:none;min-width:0;border-radius:18px 18px 0 0;resize:none;
    border-bottom:0;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
  .calc-head{cursor:default;padding:8px 10px}
  .calc-head::before{content:"";position:absolute;left:50%;top:4px;width:40px;height:4px;margin-left:-20px;border-radius:99px;background:var(--line)}
  .calc-size{display:none}
  .calc-x{width:44px;height:44px;font-size:1.7rem}
  .calc-tabs button{padding:9px 16px;font-size:.9rem}
  .calc-hist,.calc:not(.big):not([style*=height]) .calc-hist{height:auto;min-height:60px}
  .calc-keys{gap:6px}.calc-keys button{min-height:44px;padding:0;font-size:1.05rem}.calc-keys .fn{font-size:.9rem}
  .angle button{padding:8px 12px}.h-clear{padding:8px}
  .calc .graph-pane{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .calc .g-side{border-right:0;border-bottom:1px solid var(--line);max-height:34%}
  .calc .g-help{display:none}
  .g-zoom button{width:40px;height:40px}
  .g-row{grid-template-columns:22px 1fr 34px}.g-del{min-height:40px}
  .g-add{min-height:40px}
}

/* ---- Marginalia, shops, creature page, auto-battler on phones ---- */
@media (max-width:700px){
  .world-head{gap:12px;align-items:stretch}.world-head h1{font-size:2rem}
  .world-buddy{flex-direction:row;gap:10px;min-width:0}
  .map-frame{border-radius:14px}
  .shop-head{flex-direction:column;align-items:start;gap:8px}
  .shopfront-body{padding:16px;gap:12px;justify-items:center;text-align:center}
  .bubble{text-align:left}.bubble::before{display:none}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .fountain-page{gap:16px;padding:10px 0}
  .fountain-art{margin:0 auto;display:block}
  .pet-layout{gap:16px}
  .stats>div{grid-template-columns:72px 1fr 84px;gap:6px;font-size:.82rem}
  .wallet{grid-template-columns:auto 1fr;gap:10px}.wallet>:last-child{grid-column:1/-1}
  .inv-item{width:calc(33.3% - 7px);min-width:92px}
  .pet-hero{padding:16px 0}
  .adopt-grid{gap:16px}.adopt-preview{position:static}
  .pick-card{padding:6px 10px 8px}
  .book-done{grid-template-columns:1fr}
  /* auto-battler */
  .bt-top{flex-wrap:wrap;gap:10px;align-items:center}
  .stage-nav h1{min-width:0;font-size:1.5rem}
  .stage-nav button{width:44px;height:44px}
  .arena{height:330px;border-radius:16px}
  .party{left:3%;bottom:24px}
  .party .hero svg{width:110px;height:auto}
  .ally-row{width:150px}.mini-ally svg{width:32px}
  .foe{right:2%;width:52%;bottom:20px}
  .foe-art{width:100%}.foe-name{font-size:.95rem}.hp{margin:4px 6px}
  .boss-timer{width:70%}
  .shop-col{height:auto;min-height:0;max-height:none}
  .shop-panes{max-height:70vh}
  .shop-tabs{overflow-x:auto;scrollbar-width:none}
  .shop-tabs button{min-height:44px;padding:10px 8px;font-size:.78rem}
  .cost-btn{min-height:44px}.buy-amt button{min-height:36px;padding:6px 12px}
  .mini-btn{min-height:40px}
  .bt-stats>div{flex:1 1 auto;padding:6px 10px}
  /* quillquest */
  .qq{width:auto;margin-left:0}
  .q-title{font-size:1.5rem}
  .q-stage{border-radius:12px;border-width:2px;aspect-ratio:20/13;height:auto}
  .q-stage:has(> .q-battle:not([hidden])),.q-stage:has(> .q-modal:not([hidden])){aspect-ratio:auto;height:min(600px,calc(100dvh - 120px));min-height:480px}
  .q-stage:has(> .q-dialog:not([hidden])){aspect-ratio:auto;height:max(300px,65vw)}
  .q-dialog{grid-template-columns:auto 1fr;padding:8px 10px;gap:8px}.q-more{display:none}
  .q-portrait svg{width:42px}.q-text{font-size:.92rem}
  .q-modal{padding:8px}.q-card{padding:12px}
  .q-form{flex-wrap:wrap}.q-in{min-height:46px;flex:1 1 100%}
  .q-actions .btn,.q-form .btn{flex:1 1 auto}
  .q-battle:not([hidden])~.q-modal{place-items:end center;padding:6px}
  .qb-foe{width:55%;right:2%;top:3%}.qb-foe-art svg{width:min(140px,36vw)}
  .qb-hero{width:70%;left:2%;gap:6px}.qb-hero-art svg{width:min(110px,26vw)}
  .qb-plate{min-width:0;padding:4px 8px;font-size:.85rem}
  .qb-bottom{grid-template-columns:1fr;padding:8px;min-height:0;gap:6px}
  .qb-log{font-size:.8rem;max-height:3.6em}
  .qb-menu{max-height:none;gap:6px}.qb-menu button{min-height:44px}
  .q-side{grid-template-columns:1fr}
  .qs-slot select{min-height:40px}
}
/* header wraps instead of overflowing on tablets and phones */
@media (max-width:900px){
  .top{flex-wrap:wrap;gap:8px 16px;padding:10px 16px}
  .top nav{flex-wrap:wrap;gap:6px 14px;min-width:0}
  .top nav a,.top nav .linklike,.coin-pill,.nav-btn{margin-left:0}
  .tools{margin-left:0}
  .brand{white-space:nowrap}
}

/* ---- Quillquest fullscreen / handheld mode ---- */
.q-fsbtn{position:absolute;top:8px;right:8px;z-index:7;width:40px;height:40px;border-radius:10px;border:2px solid #3a2f4a;background:rgba(255,253,246,.9);color:#3a2f4a;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 0 #3a2f4a}
.q-fsbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.q-fsbtn .fs-out,.qq.fs .q-fsbtn .fs-in{display:none}.qq.fs .q-fsbtn .fs-out{display:block}
.q-rotate{display:none}
html.qq-fs-on,html.qq-fs-on body{overflow:hidden;overscroll-behavior:none}
.qq.fs{position:fixed;inset:0;z-index:100;width:auto;height:var(--vvh,100dvh);margin:0;background:#1d1726;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:6px 10px;align-items:center;
  padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.qq.fs .q-main,.qq.fs .q-pad,.qq.fs .q-side{display:contents}
.qq.fs .q-top,.qq.fs .q-guest,.qq.fs .q-side>:not(.hh-strip){display:none}
.qq.fs .hh-strip{grid-area:1/1/2/4;justify-self:center;display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;justify-content:center;
  background:rgba(255,253,246,.94);border-radius:10px;padding:3px 12px;box-shadow:none;max-width:100%;color:#1f2a3a}
.qq.fs .hh-strip .qs-row{grid-template-columns:24px 80px 46px;font-size:.72rem}
.qq.fs .hh-strip .qs-stats{margin:0;gap:10px;font-size:.78rem}
.qq.fs .hh-strip .qs-glow{margin:0;padding:1px 6px;font-size:.66rem}
.qq.fs .q-stage{grid-area:2/2;justify-self:center;align-self:center;height:100%;max-height:100%;width:auto;max-width:100%;aspect-ratio:20/13;min-height:0;border-radius:12px}
.qq.fs .q-stage:has(> .q-battle:not([hidden])),.qq.fs .q-stage:has(> .q-modal:not([hidden])),.qq.fs .q-stage:has(> .q-dialog:not([hidden])){aspect-ratio:auto;width:100%;height:100%;min-height:0}
.qq.fs .q-dpad{display:grid;grid-area:2/1;grid-template:repeat(3,50px)/repeat(3,50px);gap:2px;align-self:end;margin-bottom:6px}
.qq.fs .q-ab{display:flex;grid-area:2/3;align-self:end;margin-bottom:6px;gap:10px}
.qq.fs .q-pad button{display:grid;border:2px solid #3a2f4a;background:#fffdf6;color:#3a2f4a;border-radius:12px;font:700 1.1rem var(--sans);box-shadow:0 3px 0 #0006;touch-action:none;user-select:none;-webkit-user-select:none}
.qq.fs .q-pad button.held{transform:translateY(2px);background:#fff3bf}
.qq.fs .q-ab button{width:60px;height:60px;border-radius:50%;place-items:center;align-content:center;line-height:1}
.qq.fs .q-ab small{display:block;font-size:.58rem;text-transform:uppercase;opacity:.75}
.qq.fs .q-ab .a{background:#1d6f6a;color:#fff;margin-bottom:26px}
.qq.fs .q-dpad .up{grid-area:1/2}.qq.fs .q-dpad .left{grid-area:2/1}.qq.fs .q-dpad .right{grid-area:2/3}.qq.fs .q-dpad .down{grid-area:3/2}
/* compact battle + overlays inside the short landscape stage */
.qq.fs .qb-foe{width:46%;right:3%;top:3%}.qq.fs .qb-foe-art svg{width:min(120px,22vh)}
.qq.fs .qb-hero{width:60%;left:3%;gap:6px}.qq.fs .qb-hero-art svg{width:min(90px,18vh)}
.qq.fs .qb-plate{min-width:0;padding:3px 8px;font-size:.78rem;margin-bottom:3px}
.qq.fs .qb-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);min-height:0;padding:6px 8px;gap:8px}
.qq.fs .qb-log{font-size:.74rem;max-height:6em}
.qq.fs .qb-menu{max-height:40vh;gap:5px}.qq.fs .qb-menu button{min-height:38px;padding:5px 8px;font-size:.82rem}
.qq.fs .q-modal{padding:6px;place-items:center}
.qq.fs .q-battle:not([hidden])~.q-modal{place-items:center;padding:6px}
.qq.fs .q-card{max-height:100%;padding:10px 12px;width:min(560px,100%)}
.qq.fs .q-prompt{font-size:1.05rem;margin:4px 0 6px}
.qq.fs .q-in{min-height:42px;font-size:16px}
.qq.fs .q-dialog{grid-template-columns:auto 1fr;padding:6px 10px;bottom:3%}.qq.fs .q-portrait svg{width:40px}.qq.fs .q-text{font-size:.9rem}
.qq.fs .q-fsbtn{top:6px;right:6px}
/* keyboard up: give the whole screen to the question card */
.qq.fs.kb{grid-template-rows:0 minmax(0,1fr);gap:0}
.qq.fs.kb .hh-strip,.qq.fs.kb .q-dpad,.qq.fs.kb .q-ab,.qq.fs.kb .q-fsbtn{display:none}
.qq.fs.kb .q-stage{grid-area:2/1/3/4;width:100%;height:100%;aspect-ratio:auto;border-width:0;border-radius:0}
.qq.fs.kb .q-modal{place-items:start center;padding:4px;overflow:auto}
.qq.fs.kb .q-card{max-height:none}
/* portrait while fullscreen: stacked, with a hint to rotate */
@media (orientation:portrait){
  .qq.fs{grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:start}
  .qq.fs .hh-strip{grid-area:2/1/3/3}
  .qq.fs .q-stage{grid-area:3/1/4/3;width:100%;height:auto;max-height:100%;align-self:start}
  .qq.fs .q-stage:has(> .q-battle:not([hidden])),.qq.fs .q-stage:has(> .q-modal:not([hidden])),.qq.fs .q-stage:has(> .q-dialog:not([hidden])){height:100%}
  .qq.fs .q-dpad{grid-area:4/1;justify-self:start;margin:0}
  .qq.fs .q-ab{grid-area:4/2;justify-self:end;margin:0}
  .qq.fs .q-rotate{display:block;grid-area:1/1/2/3;margin:0;text-align:center;color:#fff6d6;font-size:.85rem}
  .qq.fs .q-rotate span{display:inline-block;animation:qspin 2.4s ease-in-out infinite}
  .qq.fs.kb{grid-template-rows:0 0 minmax(0,1fr) 0}
  .qq.fs.kb .q-rotate{display:none}
  .qq.fs.kb .q-stage{grid-area:3/1/4/3}
}
@keyframes qspin{50%{transform:rotate(90deg)}}

/* ---- The Inkwell Mine ---- */
.m-stage{background:#1c1722}
.m-hero .m-flip{transform-box:view-box;transform-origin:20px 20px;transition:transform .1s}
.m-hero.flip .m-flip{transform:scaleX(-1)}
.m-hero.swinging .m-flip>g{animation:mswing .5s ease-in-out infinite}
@keyframes mswing{50%{transform:translate(0,-6px) rotate(-8deg)}}
.m-hero.hit .m-flip>g{animation:qhit .3s ease 2}
.m-hero{transition:transform .12s linear}
.m-glint{animation:qtw 1.6s ease-in-out infinite}
.m-critter{transition:transform .25s linear}
.m-critter>g{animation:qbob 1s ease-in-out infinite}
.m-critter.scared{opacity:.6}
.m-critter.hurt>g{filter:brightness(1.8)}
.m-pop{font:800 15px var(--sans);fill:#ffe066;stroke:#2a2233;stroke-width:3px;paint-order:stroke;text-anchor:middle;animation:floatup .9s ease-out forwards}
.m-pop.big{font-size:22px}
.m-boom{animation:mboom .45s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes mboom{from{transform:scale(.1);opacity:1}to{transform:scale(1.15);opacity:0}}
.m-flare{opacity:.5;animation:mboom .6s ease-out forwards;transform-box:fill-box;transform-origin:center}
.m-tools{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;z-index:4}
.m-tool{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:5px;border:2px solid #3a2f4a;background:rgba(255,253,246,.92);color:#2a2233;border-radius:10px;padding:5px 10px;font:700 .82rem var(--sans);cursor:pointer;box-shadow:0 2px 0 #3a2f4a;min-height:36px}
.m-tool b{background:#c92a2a;color:#fff;border-radius:99px;padding:0 6px;font-size:.72rem}
.m-tool .m-cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(42,34,51,.25);pointer-events:none}
.m-tool.cool{color:#7a7186}
.m-ore{display:inline-flex;align-items:center;gap:2px;margin-right:6px;font-weight:700}
.m-ore svg{display:block}
.qb-bar.sack i{background:linear-gradient(90deg,#a47b5a,#d9a066)}
.qb-bar.sack.full i{background:linear-gradient(90deg,#e8590c,#ff922b)}
.mine .qs-stats{flex-wrap:wrap;gap:4px 8px;justify-content:flex-start}
.ms-line{margin:2px 0;font-size:.85rem}
.ms-trink{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:.84rem;padding:3px 0;border-bottom:1px dashed var(--line)}
.ms-trink small{color:var(--muted);font-weight:700;min-width:52px;text-align:right}
.pips{display:inline-flex;gap:3px;vertical-align:middle}.pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid #8a7a9c;background:transparent}.pips i.on{background:#f59f00;border-color:#b07d00}
.ms-note{font-size:.76rem;color:var(--muted);margin:8px 0 0}
.ms-how p{font-size:.82rem;margin:.3em 0}
.qs-trinket{margin-top:6px;font-size:.75rem;background:#efe7ff;border:1px solid #b197fc;border-radius:8px;padding:4px 8px;color:#3b2a6b}
.trinket-chip{display:flex;align-items:center;gap:6px;background:#efe7ff!important;border-color:#b197fc!important;color:#3b2a6b;font-weight:600;font-size:.85rem}
.m-card .q-mab small{display:block}
.m-card .q-mab .m-ore svg{width:16px;height:16px}
.m-purse{display:inline-flex;font:600 .8rem var(--sans)}
.m-gotlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0 12px}
.m-got{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.m-q{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px;align-items:start}
.m-fig svg{width:100%;height:auto;display:block;background:#fffdf6;border:1px solid var(--line);border-radius:10px}
.m-how{font-size:.85rem;margin:4px 0}.m-how summary{cursor:pointer;color:var(--accent);font-weight:700}.m-how p{margin:4px 0}
.m-chg{vertical-align:middle}
@media (max-width:560px){.m-q{grid-template-columns:1fr}.m-fig svg{max-height:140px}}
.qq.fs .m-q{grid-template-columns:minmax(0,170px) minmax(0,1fr)}
.qq.fs .m-fig svg{max-height:120px}
.qq.fs .m-tools{bottom:6px;left:6px}
.qq.fs.kb .m-tools,.qq.fs.kb .m-how{display:none}
.qq.fs.kb .m-q{grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:8px}
.qq.fs.kb .m-fig svg{max-height:84px}
@media (max-width:700px),(pointer:coarse) and (max-height:500px){.m-tool span{display:none}.m-tool{padding:3px 7px;min-height:32px;font-size:.78rem}.m-tools{left:5px;bottom:5px;gap:4px}}
@media (prefers-color-scheme:dark){.qs-trinket,.trinket-chip{background:#2b2140!important;color:#e5dbff;border-color:#5f3dc4!important}}

/* ---- Ink Survivors (v1.6) ----
   The page reuses the Quillquest/mine layout classes (.qq, .q-stage, .q-modal, .q-pad) and the shared
   handheld mode. Only the bits below are its own: a 16:9 canvas and the level-up / question cards. */
.surv .q-stage{aspect-ratio:16/9;background:#fbf6e9}                 /* the canvas is 960 x 540 = 16:9 */
.qq.surv.fs .q-stage{aspect-ratio:16/9}                               /* fullscreen too (the default there is 20:13) */
.surv .q-fsbtn{z-index:9}                                             /* stays clickable above the start / level-up box */
.s-stage canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none}
.s-card{background:var(--card);border:2px solid #3a2f4a;border-radius:14px;padding:16px 18px;max-width:560px;width:100%;max-height:100%;overflow:auto;box-shadow:0 6px 0 #0003}
.s-card h2{margin:0 0 6px;font-family:var(--serif)}
.s-card p{margin:6px 0}
.s-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.s-choices{display:grid;gap:8px;margin:10px 0}
.s-choice{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;text-align:left;border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;font:inherit;color:inherit;cursor:pointer}
.s-choice:hover,.s-choice:focus-visible{border-color:#1d6f6a;background:#eefaf7;outline:none}
.s-icon{font-size:1.7rem;text-align:center}
.s-choice small{color:var(--muted)}
.s-reroll{width:100%}
.s-reroll small{opacity:.7}
.s-question{font-size:1.6rem;text-align:center;margin:12px 0}
.s-card input{font:600 1.2rem var(--sans);padding:8px 10px;border:2px solid var(--line);border-radius:10px;width:9em}
.s-coins{font:700 2rem var(--serif);color:#1f8a4c;margin:4px 0}
.surv .qs-stats{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:640px){.s-card{padding:10px 12px}.s-question{font-size:1.3rem}.s-choice{padding:6px 8px}}
/* phones held sideways in fullscreen: short screen, so tighten the cards */
@media (max-height:500px){.s-card{padding:8px 12px}.s-card h2{font-size:1.1rem}.s-choices{gap:4px;margin:6px 0}.s-icon{font-size:1.3rem}.s-question{font-size:1.2rem;margin:6px 0}}
/* Ink Survivors v1.7: plain-text reroll questions and the upgrade shop */
.s-ask{margin:4px 0 0;text-align:center;color:var(--muted)}
.s-qmark{color:#b4532a}
.s-drops{font-size:1.3rem;color:#1971c2;margin-left:8px}
.s-ups{display:grid;gap:6px;margin:8px 0}
.s-up{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;border:2px solid var(--line);border-radius:10px;padding:6px 8px;background:#fff}
.s-up small{color:var(--muted)}
.s-up .btn{padding:6px 10px;font-size:.85rem;white-space:nowrap}
.s-pips i{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid #3a2f4a;margin-right:2px;vertical-align:middle}
.s-pips i.on{background:#1d6f6a}
.s-relics{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.85rem;margin-bottom:10px}
.s-shop h2 small{font-size:.9rem;color:#1971c2}
@media (min-width:900px){.s-ups{grid-template-columns:1fr 1fr}}
@media (max-height:500px){.s-up{padding:3px 6px}.s-up small{display:none}}
/* Ink Survivors v1.7: merges (evolutions). Two icons spin into an ink swirl and the new one pops out. */
.s-merge-tag{background:#3b2f8f;color:#fff;border-radius:6px;padding:0 5px;font-weight:700}
.s-hint{color:#5f3dc4}
.s-merge{text-align:center}
.s-merge-stage{position:relative;height:110px;margin:6px auto;width:220px}
.s-merge-stage span{position:absolute;top:50%;left:50%;font-size:2.6rem;line-height:1;transform:translate(-50%,-50%)}
.s-merge-a{animation:s-merge-a 1s ease-in forwards}
.s-merge-b{animation:s-merge-b 1s ease-in forwards}
.s-merge-swirl{width:90px;height:90px;border-radius:50%;border:6px dashed #3b2f8f;border-top-color:transparent;opacity:0;animation:s-swirl 1.4s ease-out forwards}
.s-merge-new{opacity:0;animation:s-pop .5s ease-out .95s forwards}
@keyframes s-merge-a{from{transform:translate(-190%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(540deg) scale(.2);opacity:0}}
@keyframes s-merge-b{from{transform:translate(90%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-540deg) scale(.2);opacity:0}}
@keyframes s-swirl{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(1.4)}40%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) rotate(900deg) scale(.3)}}
@keyframes s-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.s-merge-stage span{animation-duration:.01s!important;animation-delay:0s!important}}
/* Ink Survivors v1.8: the treasure chest a boss drops. The box wobbles, the lid flips open, and the prize
   floats up out of it. Everything is CSS: @keyframes describes the movement, 'animation' plays it. */
.s-chest{position:relative;width:110px;height:110px;margin:.4rem auto 0}
.s-chest-box{position:absolute;left:15px;bottom:10px;width:80px;height:46px;background:#b5651d;border:3px solid #3a2410;border-radius:6px;animation:s-chest-wobble .5s ease-in-out 2}
.s-chest-lid{position:absolute;left:12px;bottom:54px;width:86px;height:26px;background:#d9822b;border:3px solid #3a2410;border-radius:40px 40px 4px 4px;transform-origin:0 100%;animation:s-chest-lid .4s ease-out 1s forwards}
.s-chest-prize{position:absolute;left:50%;bottom:30px;font-size:2.4rem;transform:translateX(-50%);opacity:0;animation:s-chest-prize .6s ease-out 1.25s forwards}
@keyframes s-chest-wobble{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes s-chest-lid{to{transform:rotate(-110deg)}}
@keyframes s-chest-prize{to{opacity:1;bottom:70px}}
@media (prefers-reduced-motion:reduce){.s-chest *{animation-duration:.01s!important;animation-delay:0s!important}}
.s-chestcard{text-align:center}

/* v1.8: KaTeX keeps a hidden copy of each formula (MathML, for screen readers). On phones that hidden copy
   could poke out past the right edge and make the whole page slide sideways. Clip it to nothing (still readable
   by screen readers), and let a long inline formula wrap instead of overflowing. */
.katex .katex-mathml{position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0}
.katex{max-width:100%}
/* v1.8: a long formula written inline (not in its own display block) can be wider than a phone. Let just that
   formula scroll sideways by itself, instead of the whole page. */
@media (max-width:700px){
  .math.done{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:bottom;-webkit-overflow-scrolling:touch}
}