/* Root Camp — layout: one column, max 820px, sticky top bar. Camp palette: forest green + safety orange on pale moss paper. */
:root {
  --bg: #f3f6f2; --card: #ffffff; --fg: #16231b; --muted: #5d6b62; --line: #d7dfd8; --grid: #cfd8d0;
  --accent: #ff6a13; --accent-ink: #ffffff; --accent-soft: #fff0e6;
  --green: #1f7a4d; --green-soft: #e3f3ea; --warn: #c92a2a; --warn-soft: #fde8e8; --gold: #e9b949; --gold-soft: #fff6dc; --purple: #9b51e0;
  --font-display: 'Bungee', 'Arial Black', Impact, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-math: 'STIX Two Text', 'Cambria Math', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive;
  --ink: #2a62d6;
  --radius: 14px; --shadow: 0 1px 2px rgba(20, 40, 30, .06), 0 6px 20px rgba(20, 40, 30, .06);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1713; --card: #182219; --fg: #eaf0ea; --muted: #9fb0a4; --line: #2a3a2e; --grid: #2f3f33; --accent: #ff7a2e; --accent-soft: #3a2314; --green: #3fbf7f; --green-soft: #17352a; --warn: #ff6b6b; --warn-soft: #3a1d1d; --gold: #f2c94c; --gold-soft: #3a3014; --ink: #9dbdff; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #0f1713; --card: #182219; --fg: #eaf0ea; --muted: #9fb0a4; --line: #2a3a2e; --grid: #2f3f33; --accent: #ff7a2e; --accent-soft: #3a2314; --green: #3fbf7f; --green-soft: #17352a; --warn: #ff6b6b; --warn-soft: #3a1d1d; --gold: #f2c94c; --gold-soft: #3a3014; --ink: #9dbdff; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.15; }
h1 { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: .01em; }
h2.h-sec { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .04em; color: var(--muted); margin: 28px 0 12px; }
h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg); padding: 1px 6px; border-radius: 6px; }
.muted { color: var(--muted); font-size: .92em; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 820px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .03em; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--green); color: #fff; font-family: var(--font-math); font-size: 1.3rem; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .9rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.pill.xp { background: var(--gold-soft); border-color: transparent; }
.pill.nick { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* page */
#app { max-width: 820px; margin: 0 auto; padding-block: 18px 60px; padding-inline: 16px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 14px 0; min-width: 0; }
.hero, .sec-hero { padding: 10px 0 6px; }
.hero h1 { margin: 6px 0 0; color: var(--green); }
.scribble { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 10px 14px; font-family: var(--font-hand); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--ink); transform: rotate(-3deg); transform-origin: left center; }
.scribble-arrow { display: inline-block; width: 46px; height: 34px; margin-top: -18px; }
.scribble-arrow svg { width: 100%; height: 100%; }
.scribble-text { text-decoration: underline wavy; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
@media (max-width: 480px) { .scribble { font-size: 1.35rem; margin-left: 6px; } .scribble-arrow { width: 36px; height: 28px; } }
.lede { font-size: 1.08rem; max-width: 62ch; margin: 6px 0 12px; }
.nick-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nick-input { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; width: 260px; max-width: 100%; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 10px 0 6px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.stat-ico { grid-row: span 2; font-size: 1.6rem; }
.stat b { font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span:last-child { font-size: .8rem; color: var(--muted); }

.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.section-card { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; transition: transform .12s, box-shadow .12s; min-width: 0; }
.section-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.section-card.mastered { border-color: var(--green); background: linear-gradient(180deg, var(--green-soft), var(--card)); }
.sc-top { display: flex; justify-content: space-between; align-items: center; }
.sc-emoji { font-size: 1.6rem; }
.sc-id { font-family: var(--font-display); font-size: .85rem; color: var(--muted); }
.section-card h3 { margin: 2px 0 0; }
.section-card p { margin: 0 0 6px; color: var(--muted); font-size: .92rem; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 8px; flex-wrap: wrap; }
.acc { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pips { display: inline-flex; align-items: center; gap: 4px; }
.pips i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; }
.pips i.on { background: var(--accent); border-color: var(--accent); }
.pips.done i { background: var(--green); border-color: var(--green); }
.pips b { font-family: var(--font-display); font-size: .7rem; color: var(--green); margin-left: 4px; letter-spacing: .05em; }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mode { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); text-decoration: none; border: 1px solid var(--line); background: var(--card); }
.mode b { font-family: var(--font-display); font-size: 1rem; }
.mode span { font-size: .92rem; color: var(--muted); }
.mode.boss { background: linear-gradient(135deg, var(--accent-soft), var(--card)); border-color: var(--accent); }
.mode.trap { background: linear-gradient(135deg, var(--gold-soft), var(--card)); }
.mode.report { background: linear-gradient(135deg, var(--green-soft), var(--card)); }
.site-foot { max-width: 820px; margin: 0 auto; padding: 22px 16px 36px; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.5; color: var(--muted); }
.site-foot p { margin: 0 0 8px; max-width: 78ch; }
.site-foot .sf-brand { font-size: .95rem; color: var(--fg); }
.site-foot a { color: inherit; }
.back { display: inline-block; text-decoration: none; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.back:hover { color: var(--fg); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--card); font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .08s, background .12s; min-height: 44px; }
.btn:hover { background: var(--bg); } .btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn.big { padding: 14px 20px; font-size: 1.05rem; }
.btn.tiny { padding: 5px 10px; min-height: 0; font-size: .85rem; border-radius: 8px; }
.btn.danger { color: var(--warn); border-color: var(--warn); }
.btn:disabled { opacity: .55; cursor: default; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.card.cheat ul, .card.irl p { margin: 0; padding-left: 20px; }
.card.cheat li { margin: 4px 0; }
.card.irl { background: var(--green-soft); border-color: transparent; }
.card.irl p { padding: 0; }
.type-list { display: flex; flex-direction: column; gap: 6px; }
.type-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.type-row span { color: var(--muted); font-size: .85rem; }
.sec-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* problem */
.prac-head { display: flex; flex-direction: column; gap: 4px; }
.prac-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.problem-card { padding: 20px; }
.prompt { font-size: 1.15rem; margin-bottom: 10px; line-height: 1.6; }
.part { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 14px; }
.part:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.part-q { font-weight: 700; margin-bottom: 8px; }
.part-n { display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-right: 6px; font-family: var(--font-display); }
.ans-row { display: flex; gap: 8px; }
.ans { flex: 1; min-width: 0; padding: 11px 14px; border: 2px solid var(--line); border-radius: 11px; background: var(--card); font-family: var(--font-math); font-size: 1.15rem; }
.ans:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ans.short { width: 150px; flex: 0 0 auto; font-size: 1rem; }
.keypad { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.keypad button { min-width: 42px; min-height: 38px; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); font-family: var(--font-math); font-size: 1.05rem; cursor: pointer; }
.keypad button:hover { border-color: var(--accent); }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choices.row { flex-direction: row; flex-wrap: wrap; }
.choice { text-align: left; padding: 11px 14px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; min-height: 44px; line-height: 1.35; }
.choice:hover:not(:disabled) { border-color: var(--accent); }
.choice.right { border-color: var(--green); background: var(--green-soft); }
.choice.wrong { border-color: var(--warn); background: var(--warn-soft); }
.choice.meh { border-color: var(--gold); background: var(--gold-soft); }
.choice:disabled { cursor: default; }
.feedback { margin-top: 10px; padding: 0; border-radius: 10px; font-size: .98rem; }
.feedback:not(:empty) { padding: 10px 14px; }
.feedback.ok { background: var(--green-soft); } .feedback.bad { background: var(--warn-soft); } .feedback.meh { background: var(--gold-soft); }
.feedback .hint { display: block; color: var(--muted); font-size: .9em; margin-top: 2px; }
.solution { margin-top: 20px; border-top: 2px solid var(--line); padding-top: 16px; display: grid; gap: 14px; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.steps li::marker { font-weight: 800; color: var(--accent); }
.trapcard, .irlcard { border-radius: 12px; padding: 12px 16px; }
.trapcard { background: var(--gold-soft); }
.irlcard { background: var(--green-soft); }
.trapcard b, .irlcard b { font-family: var(--font-display); font-size: .75rem; letter-spacing: .1em; display: block; margin-bottom: 4px; }
.trapcard p, .irlcard p { margin: 0; }
.banner { padding: 12px 16px; border-radius: 12px; font-weight: 700; margin-top: 14px; }
.banner.win { background: var(--green); color: #fff; font-family: var(--font-display); font-size: 1rem; }
.banner.good { background: var(--green-soft); } .banner.meh { background: var(--gold-soft); }
.share-line { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.after { margin-top: 6px; }

/* graphs */
.graph-wrap { margin: 10px 0; }
canvas.graph { display: block; width: 100%; max-width: 100%; height: 260px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.legend { font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* math markup */
.math { font-family: var(--font-math); font-size: 1.06em; white-space: nowrap; }
.prompt .math, .part-q .math, .steps .math { white-space: normal; }
.math i { font-style: italic; }
.math sup { font-size: .72em; vertical-align: .55em; line-height: 0; }
.math sub { font-size: .72em; vertical-align: -.3em; line-height: 0; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .9em; line-height: 1.15; margin: 0 2px; }
.frac .fnum { border-bottom: 1.5px solid currentColor; padding: 0 4px; }
.frac .fden { padding: 0 4px; }
.sqrt { display: inline-flex; align-items: stretch; }
.sqrt .rad { font-size: 1.15em; line-height: 1; align-self: flex-end; }
.sqrt .ov { border-top: 1.5px solid currentColor; padding: 0 2px; margin-left: -1px; }

/* boss */
.boss-hero h1 { color: var(--accent); }
.boss-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--accent); border-radius: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.boss-bar b { font-family: var(--font-display); }
.timer { font-family: var(--font-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.timer.low { color: var(--warn); }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: 10px; font-size: .92rem; }
.bar { height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--green); transition: width .4s; }
.bar i.gold { background: var(--gold); }
.review { display: grid; gap: 8px; }
.rev { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
.rev.bad { border-color: var(--warn); } .rev summary { cursor: pointer; font-weight: 700; }
.rev-body { margin-top: 10px; }
.rev-part { padding: 8px 12px; border-radius: 10px; margin: 6px 0; background: var(--bg); }
.rev-part.bad { background: var(--warn-soft); } .rev-part.ok { background: var(--green-soft); }
ul.plain { margin: 0; padding-left: 18px; } ul.plain li { margin: 4px 0; }
.report-text { width: 100%; max-width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .82rem; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); resize: vertical; }
.reset { margin-top: 24px; font-size: .9rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
ul.about { padding-left: 20px; } ul.about li { margin: 8px 0; }
.board { margin: 0; padding-left: 26px; } .board li { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0; } .board li.me { font-weight: 800; color: var(--green); }
.b-nick { min-width: 120px; }

/* trap hunt */
.hunt { padding-left: 24px; display: grid; gap: 8px; margin: 12px 0; }
.hunt-line { width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; }
.hunt-line:hover { border-color: var(--accent); }
.hunt-line.found { border-color: var(--warn); background: var(--warn-soft); text-decoration: line-through; }
.hunt-line.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* labs */
.lab .formula { font-size: 1.25rem; margin: 10px 0; }
.lab .words { color: var(--muted); margin: 6px 0; }
.lab-controls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
label.slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font-size: .9rem; }
label.slider span { grid-column: 1 / -1; font-weight: 700; }
label.slider input[type=range] { width: 100%; accent-color: var(--accent); }
label.slider output { font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
label.slider select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); grid-column: 1 / -1; }
.foil { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; margin: 10px 0; }
.foil-head { display: grid; place-items: center; font-family: var(--font-math); font-size: 1.1rem; padding: 6px; }
.foil-cell { min-height: 58px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--bg); cursor: pointer; font-size: 1.05rem; }
.foil-cell.open { border-style: solid; background: var(--card); }
.foil-cell.i2.open { border-color: var(--accent); }
.foil-cell.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { background: var(--accent-soft); } 100% { background: var(--card); } }
.arms { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 3rem; margin: 10px 0; }
.arm.up { color: var(--green); } .arm.down { color: var(--warn); }
.arm-mid { font-size: 1.6rem; }
.synth { margin: 14px 0; display: grid; gap: 6px; font-family: var(--font-math); font-size: 1.15rem; }
.srow { display: flex; gap: 6px; align-items: center; }
.scell { min-width: 52px; text-align: center; padding: 4px 6px; border-radius: 8px; }
.scell.empty { border: 1.5px dashed var(--warn); min-height: 30px; }
.srow.top.bad .scell:not(.empty) { background: var(--gold-soft); }
.srow.bot .scell:not(.empty) { background: var(--green-soft); font-weight: 700; }
.scell.boxed { border: 2px solid var(--fg); }
.sline { border-top: 2px solid var(--fg); margin-left: 60px; }
.warn-flash { background: var(--warn-soft); color: var(--warn); padding: 8px 12px; border-radius: 10px; font-family: var(--font-body); font-size: .95rem; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: .7; } to { opacity: 1; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; min-height: 36px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-size: 1.05rem; }
.chip.used { opacity: .4; } .chip.sel { border-color: var(--accent); background: var(--accent-soft); }
.chip.hole { border-style: dashed; text-decoration: line-through; color: var(--muted); }
.chip.va { border-color: var(--warn); background: var(--warn-soft); }
.flip { width: 120px; height: 52px; perspective: 600px; }
.flip-in { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font-size: 1.05rem; }
.flip-back { transform: rotateY(180deg); background: var(--green-soft); border-color: var(--green); }
.flip.spawn .flip-front { background: var(--accent-soft); }
.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.region { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; text-align: center; font-size: .9rem; }
.region.shaded { background: var(--accent-soft); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .flip-in, .section-card, .btn { transition: none; } .warn-flash, .foil-cell.flash, .hunt-line.shake { animation: none; } }

/* toasts + confetti */
.toasts { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 50; pointer-events: none; }
.toast { background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: all .25s; font-size: .9rem; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.xp { background: var(--gold); color: #2b2400; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; display: none; }
@media (max-width: 480px) { body { font-size: 16px; } .problem-card { padding: 14px; } .bar-row { grid-template-columns: 1fr; gap: 4px; } .regions { grid-template-columns: 1fr; } }