/* Java Quest — v6 theme: warm stone, bronze & gold frames, classic-MMO inspired (original art direction) */
:root {
  --bg: #0c0a07;
  --panel: #18130d;
  --panel2: #211a11;
  --line: #4d3c22;
  --gold: #f2c75c;
  --gold-2: #c9973b;
  --text: #efe6d2;
  --muted: #b2a689;
  --green: #8ed37f;
  --violet: #c9a2f5;
  --crimson: #8c1d14;
  --frame: 0 0 0 1px #000, inset 0 0 0 1px #6a5330, inset 0 0 0 3px #1a140c, inset 0 0 0 4px #3b2e1a, 0 10px 26px #000a;
}
html { font-size: 16px; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 60% -10%, #3a2a1255, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, #2a1a0a44, transparent 60%),
    repeating-linear-gradient(45deg, #ffffff03 0 2px, transparent 2px 6px),
    var(--bg);
  color: var(--text);
  font-size: 15px;
}
::selection { background: #f2c75c55; }
* { scrollbar-color: #5a4626 #120e09; }

/* ───── type ───── */
h1 {
  font-family: var(--serif); font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff0c2 0%, #f2c75c 55%, #b9832c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px #000);
}
h2, h3 { color: #f6e2ae; }
.eyebrow { color: var(--gold); font-size: 10.5px; letter-spacing: .2em; }
p { color: #e3d9c2; }
.muted { color: var(--muted) !important; }

/* ───── frames ───── */
.panel, .exercise, .lesson, .region-card, .quest-row, .atlas, .journey-strip, .welcome, .daily-goal, .boss-arena, .character-stage, .gear, .walk, .dungeon-card {
  border-radius: 6px;
}
.panel, .lesson, .region-card, .journey-strip, .welcome, .daily-goal, .character-stage {
  background: linear-gradient(180deg, #1f1810, #15110b 70%);
  border: 1px solid #000 !important;
  box-shadow: var(--frame);
}
.panel { position: relative; }
.panel::after {   /* corner rivets */
  content: ''; position: absolute; inset: 6px; pointer-events: none; border-radius: 4px;
  background:
    radial-gradient(circle at 0 0, #d9a94a 0 2px, transparent 2.5px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 100% 0, #d9a94a 0 2px, transparent 2.5px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 0 100%, #d9a94a 0 2px, transparent 2.5px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 100% 100%, #d9a94a 0 2px, transparent 2.5px) bottom right / 10px 10px no-repeat;
  opacity: .55;
}
.callout { background: #231b10; border-left: 3px solid var(--gold-2); color: #e9dcc0; font-size: 13.5px; border-radius: 0 4px 4px 0; }
.transfer { background: #142027; border-left-color: #5d97c4; color: #cfe1ef; }

/* ───── sidebar: unit frame + spellbook tabs ───── */
.sidebar {
  background:
    linear-gradient(90deg, transparent calc(100% - 3px), #000 calc(100% - 3px), #5a4626 calc(100% - 1px), #000 100%),
    linear-gradient(180deg, #1a140c, #0f0c08);
  border-right: 0;
}
.brand { padding-bottom: 4px; }
.brandmark { color: var(--gold); text-shadow: 0 0 12px #f2c75c88; }
.brand > span:last-child { font-family: var(--serif); color: #f6dc97; letter-spacing: .08em; }
.character-mini {
  background: linear-gradient(180deg, #2a2114, #17120b); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6a5330;
  border-radius: 40px 8px 8px 40px; padding: 6px 10px 6px 6px; gap: 10px;
}
.portrait-frame { position: relative; flex: none; width: 54px; height: 54px; }
.portrait-frame .avatar {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle at 35% 30%, #5b3f8a, #22163a 70%); color: #f6e6ff;
  border: 2px solid #d4a44a; box-shadow: 0 0 0 2px #000, inset 0 0 12px #000;
}
#lvl-badge {
  position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
  display: grid; place-items: center; font: 700 11px var(--sans); color: #ffe9a8;
  background: radial-gradient(circle at 40% 30%, #6b4b1c, #2c1e0b); border: 2px solid #d4a44a; box-shadow: 0 0 0 1px #000;
}
.character-mini strong { color: #fff3d0; font-size: 14px; }
.character-mini small { color: var(--muted); font-size: 11.5px; }
.side-xp > div:first-child { font-size: 11px; color: var(--muted); }
.side-xp .meter { height: 8px; background: #0b0906; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3b2e1a; }
.side-xp .meter i { background: linear-gradient(180deg, #c48cff, #6c2fa9); }
.nav {
  border: 1px solid transparent; border-radius: 4px; color: #d9cdb2; font-size: 13.5px; margin: 2px 0;
}
.nav > span {
  width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 4px;
  background: linear-gradient(180deg, #2b2216, #120e09); border: 1px solid #000; box-shadow: inset 0 0 0 1px #5a4626; color: var(--gold);
}
.nav:hover:not(.active) { background: #201910; border-color: #3b2e1a; }
.nav.active { background: linear-gradient(90deg, #3a2c15, #1d160d); border-color: #6a5330; color: #fff3d0; box-shadow: inset 3px 0 0 var(--gold); }
.nav.active > span { box-shadow: inset 0 0 0 1px var(--gold), 0 0 8px #f2c75c55; }
.nav kbd { background: #120e09; border-color: #4d3c22; color: var(--muted); }
.nav b { background: var(--crimson); color: #ffe7b0; border: 1px solid #000; }
.exam-nav { color: #ffd98a !important; }
.camp { background: linear-gradient(180deg, #1d170e, #120e09); border: 1px solid #000; box-shadow: inset 0 0 0 1px #4d3c22; border-radius: 6px; }
.camp strong { color: #f6dc97; }
.camp p { font-size: 12px; color: #cfc3a6; }
.camp.rested { box-shadow: inset 0 0 0 1px #4f7fd6, 0 0 14px #3d6ad833; }
.camp.rested strong { color: #9cc3ff; }
.camp.rested .camp-fire { color: #9cc3ff; }
.settings-row button, .settings-row label { background: #120e09; border: 1px solid #4d3c22; color: #d9cdb2; border-radius: 3px; }

/* ───── header ───── */
header { border-bottom: 1px solid #3b2e1a; box-shadow: 0 1px 0 #000; color: #cdbf9f; font-size: 11px; }
#location { color: #f6dc97; font-family: var(--serif); font-size: 14px; letter-spacing: .04em; }
#gold { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 13px; }
#gold small { color: #e2c46b; font-weight: 500; }
.coin { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #e2a92b 55%, #8a5a10); box-shadow: 0 0 0 1px #000, 0 0 6px #f2c75c66; display: inline-block; }
.server-dot { background: #4fd16b; box-shadow: 0 0 8px #4fd16b; }

/* ───── buttons ───── */
.button {
  border-radius: 4px; font-size: 12.5px; letter-spacing: .02em; text-shadow: 0 1px 1px #000; transition: filter .15s, transform .05s;
  background: linear-gradient(180deg, #3a2e1c, #1e170d); border: 1px solid #000; box-shadow: inset 0 0 0 1px #7a6038, inset 0 1px 0 #ffffff14; color: #f1e2bd;
}
.button:hover:not(:disabled) { filter: brightness(1.18); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button.gold {   /* classic crimson + gold call-to-action */
  background: linear-gradient(180deg, #b8281c 0%, #7c150e 55%, #5a0e09 100%);
  color: #ffd75e; border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #e8b04a, inset 0 2px 0 #ff8a6a55, 0 2px 6px #000a;
}
.button.ghost { background: linear-gradient(180deg, #241c12, #15110b); color: #e6d6b2; box-shadow: inset 0 0 0 1px #5a4626; }
.button.purple { background: linear-gradient(180deg, #4b2f6e, #2a1842); color: #f0dcff; box-shadow: inset 0 0 0 1px #9a73c9, inset 0 2px 0 #ffffff18; }
.button:disabled { filter: grayscale(.8) brightness(.7); }
.back { color: #e2c46b; font-size: 12.5px; }
.back:hover { color: #fff1c4; }
.pill { border-color: #6a5330; color: #f0deb0; background: #1d160d; font-size: 10.5px; }
.pill.purple { border-color: #7e5ba8; color: #dcc4fa; }

/* ───── world map & regions ───── */
.atlas { border: 1px solid #000; box-shadow: var(--frame); }
.map-node .pin { background: radial-gradient(circle at 40% 30%, #3b2c14, #120d06); border: 2px solid #d4a44a; box-shadow: 0 0 0 2px #000, 0 0 14px #f2c75c55; color: #ffe08a; }
.map-node.selected .pin { box-shadow: 0 0 0 2px #000, 0 0 22px #ffd36a; transform: scale(1.12); }
.map-node strong { color: #fff0c8; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.map-node small { background: #000a; border-radius: 3px; padding: 1px 5px; }
.quest-track { background: linear-gradient(180deg, #221a10, #140f09) !important; }
.quest-symbol { color: #ffd100 !important; text-shadow: 0 0 10px #ffb30088, 0 2px 0 #000; }
.region-card { color: var(--text); }
.region-card:hover { box-shadow: var(--frame), 0 0 0 1px var(--gold-2); filter: brightness(1.07); }
.region-card .region-icon { color: var(--gold); text-shadow: 0 0 10px #f2c75c66; }
.meter { background: #0b0906; border: 1px solid #000; }
.meter i { background: linear-gradient(90deg, #8a6420, #f2c75c); }
.region-banner { border: 1px solid #000; box-shadow: var(--frame); }
.region-banner h1 { font-size: 40px; }
.journey-strip strong { color: #fff0c8; font-family: var(--serif); }
.exam-banner { box-shadow: var(--frame); border: 1px solid #000; background: linear-gradient(90deg, #3a2a10, #1a140b 60%, #24190c); }

/* quest log rows */
.quest-row { background: linear-gradient(180deg, #1c160e, #120e09); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3b2e1a; }
.quest-row:hover { box-shadow: inset 0 0 0 1px #8a6a35, 0 0 10px #f2c75c22; }
.quest-row .qmark {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 20px;
  background: radial-gradient(circle at 40% 30%, #3b2c14, #120d06); border: 1px solid #000; box-shadow: inset 0 0 0 1px #8a6a35;
  color: #ffd100 !important; text-shadow: 0 0 8px #ffb300aa;
}
.quest-row.done .qmark { color: #8ed37f !important; text-shadow: none; }
.quest-row h3 { font-size: 14.5px; color: #ffd100; }
.quest-row.done h3 { color: #a4a08f; }
.quest-row small { font-size: 11.5px; color: var(--muted); }
.quest-row .xp-tag { color: #d6b8ff; font-weight: 700; font-size: 12px; }
.quest-row h3.diff-grey { color: #9d9d9d; } .quest-row h3.diff-green { color: #40c040; } .quest-row h3.diff-yellow { color: #ffd100; } .quest-row h3.diff-orange { color: #ff8040; } .quest-row h3.diff-red { color: #ff3b30; }

/* ───── lesson & practice ───── */
.lesson-head .goal { background: #231b10; border: 1px solid #000; box-shadow: inset 0 0 0 1px #5a4626; border-left: 3px solid var(--gold); }
.lesson-steps a { background: #1a140c; border-color: #4d3c22; color: #e3d3ad; }
.lesson-steps a:hover { border-color: var(--gold); color: #fff0c8; }
.lesson { border: 1px solid #000 !important; }
.lesson-h { color: #f6dc97; border-bottom: 1px solid #3b2e1a; padding-bottom: 6px; }
.lesson p, .lesson li { color: #e8dfca; }
.mentor .portrait { background: radial-gradient(circle at 40% 30%, #3b2c14, #120d06); border: 2px solid #d4a44a; color: #ffe08a; }
.mentor strong { color: #f6dc97; }
.exercise { background: linear-gradient(180deg, #17120c, #100c08); border: 1px solid #000; box-shadow: var(--frame); }
.exercise-top { background: linear-gradient(180deg, #33281a, #1f180f); border-bottom: 1px solid #000; box-shadow: 0 1px 0 #5a4626; color: #f0deb0; font-size: 11px; letter-spacing: .08em; }
.pips i { background: #2e2518; border: 1px solid #000; }
.pips i.now { background: var(--gold); box-shadow: 0 0 6px #f2c75c; }
.pips i.ok { background: #5fbf4f; }

/* answer choices as action-bar slots */
.choice {
  background: linear-gradient(180deg, #221a10, #150f09); border: 1px solid #000; box-shadow: inset 0 0 0 1px #4d3c22;
  color: #efe2c4; font-size: 14px; padding: 12px 14px; border-radius: 5px;
}
.choice:hover { box-shadow: inset 0 0 0 1px #a3803f, 0 0 8px #f2c75c22; }
.choice.selected { background: linear-gradient(180deg, #3a2c15, #20180d); box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px #f2c75c44; color: #fff3cf; }
.choice.correct { background: linear-gradient(180deg, #1f3a18, #12240e); box-shadow: inset 0 0 0 2px #5fbf4f, 0 0 12px #5fbf4f44; color: #dcffcf; }
.choice-letter {
  width: 26px; height: 26px; border-radius: 4px; border: 1px solid #000 !important; box-shadow: inset 0 0 0 1px #8a6a35;
  background: linear-gradient(180deg, #2f2414, #120d06); color: #ffe08a !important; font-size: 12px;
}
.text-input, textarea, select { background: #0e0b07; border: 1px solid #000; box-shadow: inset 0 0 0 1px #4d3c22; color: var(--text); border-radius: 4px; }
.text-input:focus, textarea:focus, select:focus { box-shadow: inset 0 0 0 1px var(--gold), 0 0 8px #f2c75c33; outline: none; }
.feedback { background: linear-gradient(180deg, #1c3417, #12220f); border: 1px solid #000; box-shadow: inset 0 0 0 1px #4f8a43; color: #d8f2cc; }
.feedback strong { color: #b6ff9e; }
.feedback.error { background: linear-gradient(180deg, #3a1a14, #22100c); box-shadow: inset 0 0 0 1px #9a4a36; color: #f2d2c6; }
.feedback.error strong { color: #ff9b85; }
.hint { color: #e0c8ff; }
.builder-line { background: #150f09; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3b2e1a; }
.builder-line button { background: #241c12; border: 1px solid #000; box-shadow: inset 0 0 0 1px #5a4626; color: #f0deb0; }
.builder-line.correct { box-shadow: inset 0 0 0 1px #5fbf4f; }
pre.code { background: #0a0806; border-color: #2e2416; box-shadow: inset 0 0 0 1px #000; }
.walk { background: #110d09; border: 1px solid #000; box-shadow: var(--frame); }
.walk-top { background: linear-gradient(180deg, #33281a, #1f180f); color: #f0deb0; }
.walk-code li.on { background: #3e3014; border-left-color: var(--gold); }
.walk-note { background: #1a140c; color: #fff0c8 !important; }
.note.key { background: #2a2210; border-color: #7a6030; }
.note.tip { background: #142027; border-color: #3e6a82; }
.note.warn { background: #2e1a12; border-color: #8a4a2c; }
.lesson-table th { background: #2a2114; color: #f6dc97; }
.lesson-table th, .lesson-table td { border-color: #3b2e1a; }
.netbeans, .recap { border: 1px solid #000 !important; }

/* ───── bosses ───── */
.boss-arena { background: radial-gradient(ellipse at 50% 0%, #4a1a12, #1a0d08 70%); border: 1px solid #000; box-shadow: var(--frame); }
.boss-sigil { color: #ffb36a; text-shadow: 0 0 22px #ff5a1a; }
.boss-health { background: #0b0604; border: 1px solid #000; box-shadow: inset 0 0 0 1px #6a2a1a; height: 14px; }
.boss-health i { background: linear-gradient(180deg, #e84a2c, #7c140a); }

/* ───── dialogs: one parchment style everywhere ───── */
dialog#reward {
  background: radial-gradient(ellipse at top, #f4e7c6, #e2cd9c 70%, #d4bb85); color: #3a2a14;
  border: 3px solid #6b4e22; border-radius: 8px; box-shadow: 0 0 0 2px #000, 0 20px 60px #000c;
}
dialog#reward h2 { color: #3a2205; font-family: var(--serif); }
dialog#reward p, dialog#reward .eyebrow { color: #4a3418; }
dialog#reward .reward-rays { color: #8a5a00; text-shadow: 0 0 18px #ffcc55; }
dialog#reward .close-modal { color: #6b4e22; }
dialog::backdrop { background: #000b; backdrop-filter: blur(2px); }

/* ───── on-screen messages (replaces toast + chat) ───── */
#toast, #ui-msg {
  position: fixed; left: calc(50% + 123px); top: 86px; transform: translateX(-50%); z-index: 66;
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0;
  font: 700 17px var(--sans); color: #ffd100; text-shadow: 0 2px 2px #000, 0 0 8px #000; text-align: center; max-width: 70vw;
}
#ui-msg { opacity: 0; pointer-events: none; }
#ui-msg.show { animation: uimsg 4.2s ease forwards; }
#ui-msg b { color: #fff; }
@keyframes uimsg { 0% { opacity: 0; transform: translate(-50%, 6px); } 8% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* loot window stack */
#loot-stack { position: fixed; right: 18px; bottom: 34px; z-index: 64; display: grid; gap: 8px; width: 300px; pointer-events: none; }
.loot-card {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; pointer-events: auto;
  background: linear-gradient(180deg, #1f1810f2, #120e09f2); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6a5330, 0 8px 20px #000c;
  border-radius: 6px; padding: 8px 10px; animation: lootIn .35s ease;
}
.loot-card.out { animation: lootOut .6s ease forwards; }
.lc-icon { width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; border-radius: 5px; background: #0a0806; border: 2px solid #8a6a35; color: #ffe08a; }
.loot-card.skill .lc-icon { border-color: #4f7fd6; color: #9cc3ff; }
.lc-text { font-size: 13px; color: #e8dcc0; line-height: 1.35; }
.lc-text small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@keyframes lootIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes lootOut { to { opacity: 0; transform: translateX(30px); } }

/* XP bar & tracker */
#xpbar { left: 246px; height: 18px; background: #0a0806; border-top: 1px solid #000; box-shadow: inset 0 1px 0 #6a5330, 0 -4px 12px #000a; }
#xpbar .xp-text { line-height: 18px; font-size: 11px; }
#tracker { top: 92px; }
.tr-head { font-size: 14px; }

/* misc */
.welcome { border-left: 3px solid var(--gold) !important; }
.daily-goal { color: #e3d9c2; }
footer { color: #8f8468; }
footer a { color: #e2c46b; }
.region-info .panel h2, .quest-track h2 { color: #fff0c8; }
.dungeon-card.capstone { background: linear-gradient(180deg, #2a1d3a, #15110b) !important; }
.ready-ring b { background: #17120c; }
.solution .file-tabs button.on { background: #0a0806; }
.slot, .bag-slot { box-shadow: inset 0 0 0 1px #000; }

@media (max-width: 1150px) { #xpbar { left: 215px; } #toast, #ui-msg { left: calc(50% + 107px); } }
@media (max-width: 650px) {
  #xpbar { left: 0; }
  #toast, #ui-msg { left: 50%; top: 120px; font-size: 15px; max-width: 92vw; }
  #loot-stack { right: 8px; left: 8px; width: auto; bottom: 26px; }
  .portrait-frame, .portrait-frame .avatar { width: 40px; height: 40px; }
  .region-banner h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .loot-card, #ui-msg.show { animation: none; opacity: 1; } }
.q-lvl{font-family:var(--sans);font-size:11px;opacity:.85;margin-right:2px}
.character-mini > span:nth-child(2){min-width:0}.character-mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-chip{display:inline-block;background:#120d06;padding:3px 10px;border-radius:4px;border:1px solid #6b4e22;margin:4px 0}
dialog#reward [class*="rarity-"]{display:inline-block;background:#120d06;padding:3px 10px;border-radius:4px;border:1px solid #6b4e22;color:#c77dff!important;margin:4px 0}
.pd-stats div{gap:8px}.pd-stats span{color:var(--muted)}
.ready-ring{background:conic-gradient(var(--gold) calc(var(--p)*1%),#2a2114 0);box-shadow:0 0 0 1px #000,0 0 18px #f2c75c22}
.sidebar{overflow-y:auto}
@media(max-height:760px){.nav{margin:0;padding-top:6px;padding-bottom:6px}.nav>span{width:24px;height:24px}.camp p{display:none}}

/* ═════════ v7: Arena, Vendor, Talents, Codex, frames ═════════ */
.gold-text{color:#ffe08a;white-space:nowrap}
.button .coin{width:11px;height:11px;margin-right:4px;vertical-align:-1px}
/* next steps */
.next-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:18px 0 22px}
.next-step{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;text-align:left;padding:12px 14px;border-radius:6px;background:linear-gradient(180deg,#241b10,#150f09);border:1px solid #000;box-shadow:inset 0 0 0 1px #6a5330;color:var(--text)}
.next-step:hover{box-shadow:inset 0 0 0 1px var(--gold),0 0 14px #f2c75c33}
.ns-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:18px;color:#ffd100;background:radial-gradient(circle at 40% 30%,#3b2c14,#120d06);box-shadow:inset 0 0 0 1px #8a6a35;text-shadow:0 0 8px #ffb300}
.next-step strong{display:block;font-size:13.5px;color:#fff0c8}
.next-step small{font-size:12px;color:var(--muted)}
.ns-go{color:var(--gold);font-size:18px}
/* arena lobby */
.arena-lobby{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:20px;align-items:start}
.diff-tabs,.vendor-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.diff-tab{background:linear-gradient(180deg,#241c12,#15110b);border:1px solid #000;box-shadow:inset 0 0 0 1px #5a4626;color:#e6d6b2;border-radius:5px;padding:9px 16px;font:600 14px var(--serif);text-align:left}
.diff-tab small{display:block;font:500 11px var(--sans);color:var(--muted)}
.diff-tab.on{box-shadow:inset 0 0 0 2px var(--gold),0 0 12px #f2c75c33;color:#fff0c8}
.diff-tab.locked{opacity:.55}
.arena-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.arena-stats div{background:#100c08;border:1px solid #000;box-shadow:inset 0 0 0 1px #3b2e1a;border-radius:5px;padding:10px;text-align:center}
.arena-stats span{display:block;font-size:12px;color:var(--muted)}
.arena-stats b{display:block;font:700 26px var(--serif);color:#fff0c8}
.arena-stats small{display:block;font-size:10.5px;color:#8f8468;line-height:1.3}
.rank-list{list-style:none;padding:0;margin:10px 0}
.rank-list li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:7px 8px;border-bottom:1px solid #2a2114;font-size:14px}
.rank-list li.you{background:#2a2112;box-shadow:inset 3px 0 0 var(--gold);color:#fff0c8}
.rank-pos{font:700 14px var(--serif);color:var(--gold);text-align:center}
.rank-list b{color:#fff;font-variant-numeric:tabular-nums}
/* arena battle */
.arena-battle{max-width:900px;margin:22px auto 0}
.arena-hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.arena-hearts i{font-style:normal;font-size:24px;color:#3a2a20;margin-right:2px;text-shadow:0 1px 0 #000}
.arena-hearts i.full{color:#ff3b3b;text-shadow:0 0 8px #ff3b3b88,0 1px 0 #000}
.arena-score{font:600 13px var(--sans);color:var(--muted);letter-spacing:.08em}
.arena-score b{color:#fff0c8;font-size:16px}
.arena-tools{display:flex;gap:8px}
.arena-tools kbd{font-size:10px;background:#0008;border:1px solid #fff3;border-radius:3px;padding:0 4px}
.arena-enemy{text-align:center;padding:18px;border-radius:8px;background:radial-gradient(ellipse at 50% 0%,#4a1a12,#1a0d08 75%);border:1px solid #000;box-shadow:var(--frame);margin-bottom:10px}
.arena-enemy.elite{background:radial-gradient(ellipse at 50% 0%,#5a3a10,#1a0d08 75%)}
.arena-enemy.elite .enemy-name{color:#ffcf5a}
.arena-enemy.struck{animation:struck .35s}
@keyframes struck{20%{transform:translateX(-6px);filter:brightness(1.6)}60%{transform:translateX(5px)}}
.enemy-name{font:700 22px var(--serif);color:#ffb08a;text-shadow:0 2px 4px #000;margin-bottom:10px}
.enemy-hp{position:relative;height:20px;max-width:520px;margin:0 auto;background:#0b0604;border:1px solid #000;box-shadow:inset 0 0 0 1px #6a2a1a;border-radius:3px;overflow:hidden}
.enemy-hp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#e84a2c,#7c140a);transition:width .4s}
.enemy-hp span{position:relative;font:700 11px/20px var(--sans);color:#fff;text-shadow:0 1px 2px #000}
.arena-timer{height:8px;background:#0b0906;border:1px solid #000;border-radius:4px;overflow:hidden;margin-bottom:12px}
.arena-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#d4a44a,#ffe08a);transition:width .1s linear}
.arena-timer i.low{background:linear-gradient(90deg,#a3201a,#ff6b4a)}
.choice.gone{opacity:.18;text-decoration:line-through;pointer-events:none}
.saved{color:#ffd100;font-weight:700;margin-top:8px}
.arena-result{text-align:center}
.result-score{font:700 60px var(--serif);background:linear-gradient(180deg,#fff0c2,#f2c75c 55%,#b9832c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px #000)}
.arena-result .qd-rewards{justify-content:center;color:#e8dcc0;font-size:15px}
.missed-list{padding-left:18px}
.missed-list li{margin-bottom:14px;font-size:14px}
.missed-list p{font-size:13px;margin:4px 0 6px}
/* vendor */
.vendor-note{font-size:13.5px}
.vendor-h{font-family:var(--serif);color:#f6dc97;margin:18px 0 10px}
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.vendor-item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;background:linear-gradient(180deg,#1c160e,#120e09);border:1px solid #000;box-shadow:inset 0 0 0 1px #3b2e1a;border-radius:6px;padding:10px 12px}
.vendor-item.owned{box-shadow:inset 0 0 0 1px #4f8a43}
.vi-icon{width:48px;height:48px;display:grid;place-items:center;font-size:22px;background:#0a0806;border:2px solid #8a6a35;border-radius:6px;color:#ffe08a}
.vi-icon.big{font-size:26px}
.vi-body strong{display:block;font-size:14px}
.vi-body strong small{color:var(--muted);font-weight:500}
.vi-body span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
/* codex */
.codex{display:grid;gap:16px;margin-top:16px}
.codex-card h2{font-size:18px}
.codex-card.locked{opacity:.6}
/* talents */
.talents .class-perk{border-bottom:1px solid #3b2e1a;margin-bottom:12px}
.talent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.talent{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:#120e09;border:1px solid #000;box-shadow:inset 0 0 0 1px #3b2e1a;border-radius:6px;padding:10px}
.talent.has{box-shadow:inset 0 0 0 1px #d4a44a,0 0 10px #f2c75c22}
.talent.locked{opacity:.55}
.t-icon{position:relative;width:52px;height:52px;display:grid;place-items:center;font-size:22px;color:#ffe08a;background:radial-gradient(circle at 40% 30%,#3b2c14,#0a0705);border:2px solid #6a5330;border-radius:8px}
.talent.has .t-icon{border-color:#f2c75c}
.t-icon b{position:absolute;right:-6px;bottom:-6px;font:700 10px var(--sans);background:#0a0705;border:1px solid #8a6a35;color:#5fff5f;padding:1px 4px;border-radius:3px}
.t-body strong{display:block;font-size:14px;color:#fff0c8}
.t-body span{font-size:12px;color:var(--muted)}
.t-btns{display:flex;gap:4px}
.t-btns .button{padding:4px 10px;min-width:30px}
/* portrait frames (cosmetics) */
.portrait-frame.mini{width:40px;height:40px;position:relative;display:inline-block}
.portrait-frame.mini .avatar{width:40px;height:40px;font-size:18px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#5b3f8a,#22163a 70%);border:2px solid #d4a44a}
.portrait-frame.frame_silver .avatar{border-color:#e6edf5;box-shadow:0 0 0 2px #000,0 0 10px #cfe3ff88,inset 0 0 12px #000}
.portrait-frame.frame_arcane .avatar{border-color:#c77dff;box-shadow:0 0 0 2px #000,0 0 14px #b65cffaa,inset 0 0 12px #000;animation:arcane 3s ease-in-out infinite}
@keyframes arcane{50%{box-shadow:0 0 0 2px #000,0 0 22px #d79bffdd,inset 0 0 12px #000}}
.portrait-frame.frame_rare_elite::before,.portrait-frame.frame_elite::before,.portrait-frame.frame_legend::before{content:'';position:absolute;left:-14px;right:-14px;top:-6px;bottom:-6px;z-index:-1;clip-path:polygon(0 30%,22% 0,26% 22%,50% 0,74% 22%,78% 0,100% 30%,88% 62%,100% 100%,0 100%,12% 62%)}
.portrait-frame.frame_rare_elite::before{background:linear-gradient(180deg,#f2f6fb,#8c98a6)}
.portrait-frame.frame_elite::before{background:linear-gradient(180deg,#ffe9a0,#b8862c)}
.portrait-frame.frame_legend::before{background:linear-gradient(180deg,#ffb35a,#c24a00);filter:drop-shadow(0 0 6px #ff8000)}
.portrait-frame.frame_rare_elite .avatar{border-color:#e6edf5}
.portrait-frame.frame_elite .avatar{border-color:#ffd56a;box-shadow:0 0 0 2px #000,0 0 12px #ffd56a88}
.portrait-frame.frame_legend .avatar{border-color:#ff9a2a;box-shadow:0 0 0 2px #000,0 0 18px #ff8000;animation:legend 2.4s ease-in-out infinite}
@keyframes legend{50%{box-shadow:0 0 0 2px #000,0 0 28px #ffb35a}}
.portrait-frame{isolation:isolate}
/* print the codex */
@media print{
  body{background:#fff!important;color:#000!important}
  .sidebar,header,footer,#xpbar,#tracker,#loot-stack,#ui-msg,#toast,.no-print,.back,.page-head p{display:none!important}
  main{margin:0!important;padding:0!important}
  .panel{background:#fff!important;box-shadow:none!important;border:1px solid #999!important;break-inside:avoid}
  .panel::after{display:none}
  h1,h2{color:#000!important;background:none!important;-webkit-text-fill-color:#000;filter:none}
  pre.code{background:#f6f6f6!important;color:#000!important;border:1px solid #ccc!important;white-space:pre-wrap;font-size:10.5px}
  pre.code span{color:#000!important}
  .muted{color:#333!important}
}
@media(max-width:900px){.arena-lobby{grid-template-columns:1fr}.arena-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.vendor-grid,.talent-grid{grid-template-columns:1fr}.vendor-item{grid-template-columns:40px 1fr}.vi-buy{grid-column:1/-1}.enemy-name{font-size:18px}.result-score{font-size:44px}}
/* v10: quick "correct" feedback in the Arena auto-continues */
.feedback.quick{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;overflow:hidden;padding-bottom:16px}
.feedback.quick strong{margin:0}
.feedback.quick .actions{margin:0}
.feedback.quick .auto-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#7ee06a;transform-origin:left;animation:autobar 1.2s linear forwards}
@keyframes autobar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ═════════ v11: vector art ═════════ */
.icon-art{display:inline-grid;place-items:center;width:100%;height:100%;line-height:0}
.icon-art svg.art{width:84%;height:84%;overflow:visible;filter:drop-shadow(0 1px 1px #000)}
.icon-art.q-common{color:#e8e8e8}.icon-art.q-uncommon{color:#1eff00}.icon-art.q-rare{color:#3d9bff}.icon-art.q-epic{color:#c77dff}.icon-art.q-legendary{color:#ff9a2a}
.icon-art.q-epic svg.art{filter:drop-shadow(0 0 3px #b65cff99) drop-shadow(0 1px 1px #000)}
.icon-art.q-legendary svg.art{filter:drop-shadow(0 0 5px #ff8000) drop-shadow(0 1px 1px #000)}
.bag-slot{padding:2px;background:radial-gradient(circle at 50% 35%,#2a2114,#0a0806 75%)}
.bag-slot.q-rare{box-shadow:inset 0 0 10px #3d9bff44}.bag-slot.q-epic{box-shadow:inset 0 0 12px #b65cff55}.bag-slot.q-legendary{box-shadow:inset 0 0 14px #ff800066,0 0 10px #ff800088}
.slot-icon{padding:1px;background:radial-gradient(circle at 50% 35%,#2a2114,#0a0806 75%)!important}
.lc-icon{padding:2px;background:radial-gradient(circle at 50% 35%,#2a2114,#0a0806 75%)}
.vi-icon{padding:3px}
.tt-head{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:center;margin-bottom:4px}
.tt-head .icon-art{width:40px;height:40px;border:1px solid #6a5330;border-radius:5px;background:radial-gradient(circle at 50% 35%,#2a2114,#0a0806 75%)}
/* arena enemies */
.arena-enemy{position:relative}
.enemy-art{position:relative;width:150px;height:125px;margin:0 auto 4px;animation:bob 2.6s ease-in-out infinite}
.enemy-art svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px #000a)}
.enemy-art.elite{width:180px;height:150px}
.enemy-art.elite svg{filter:drop-shadow(0 0 10px #ffcf5a) drop-shadow(0 6px 6px #000a)}
.enemy-art.hit svg{animation:hitflash .32s}
.enemy-art.dying{animation:die .9s ease-in forwards}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes hitflash{0%{filter:brightness(3) saturate(0) drop-shadow(0 0 12px #fff)}100%{filter:drop-shadow(0 6px 6px #000a)}}
@keyframes die{0%{opacity:1;transform:scale(1)}30%{filter:brightness(2.5)}100%{opacity:0;transform:scale(.4) translateY(20px) rotate(-8deg)}}
.spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffe08a;box-shadow:0 0 8px #ffb300;pointer-events:none;animation:spark .65s ease-out forwards}
.spark.crit{width:8px;height:8px;background:#fff6c8;box-shadow:0 0 12px #ff8a2a}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
/* world map progress */
.routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.route{fill:none;stroke:#1a120a;stroke-width:.9;stroke-dasharray:1.6 1.4;vector-effect:non-scaling-stroke;stroke-width:3px;opacity:.75}
.route.lit{stroke:#ffd36a;stroke-dasharray:none;stroke-width:4px;opacity:1;filter:drop-shadow(0 0 4px #ffb300);animation:routeGlow 3s ease-in-out infinite}
@keyframes routeGlow{50%{opacity:.75}}
.atlas .map-node{z-index:3}
.fog{position:absolute;z-index:2;width:30%;aspect-ratio:1.4;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,#0d0a07e6 0%,#0d0a07b3 35%,#0d0a0700 70%);animation:fogDrift 12s ease-in-out infinite}
@keyframes fogDrift{50%{transform:translate(-46%,-52%) scale(1.08)}}
.boss-ready{position:absolute;z-index:2;width:74px;height:74px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px #ff4a2a,0 0 24px 6px #ff3b1a99;animation:bossPulse 1.6s ease-in-out infinite}
@keyframes bossPulse{50%{box-shadow:0 0 0 3px #ff8a5a,0 0 34px 12px #ff3b1acc}}
.you-here{position:absolute;z-index:4;transform:translate(-50%,-150%);pointer-events:none;display:flex;flex-direction:column;align-items:center;margin-top:-26px}
.yh-pin{width:30px;height:30px;display:grid;place-items:center;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:radial-gradient(circle at 40% 30%,#6b3fa0,#2a1842);border:2px solid #ffd36a;box-shadow:0 0 0 1px #000,0 0 14px #ffd36a99;color:#fff;font-size:13px;animation:pinBob 1.8s ease-in-out infinite}
.yh-pin{line-height:1}
.yh-label{margin-top:4px;font:700 9.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#ffe08a;text-shadow:0 1px 2px #000,0 0 6px #000;white-space:nowrap}
@keyframes pinBob{50%{transform:rotate(-45deg) translate(3px,-3px)}}
/* region banner crop of the world map */
.region-banner{background-size:260% auto!important;min-height:170px}
@media(max-width:650px){.enemy-art{width:110px;height:92px}.enemy-art.elite{width:130px;height:108px}.yh-label{display:none}.boss-ready{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.enemy-art,.fog,.route.lit,.yh-pin,.boss-ready{animation:none!important}}
.yh-pin b{display:block;transform:rotate(45deg);font-weight:400}
/* v11 fixes: visible fog (desaturate + dim unexplored zones) and boss glow on the pin itself */
.fog{width:34%;background:radial-gradient(ellipse at center,#0d0a0799 0%,#0d0a0766 45%,#0d0a0700 72%);-webkit-backdrop-filter:grayscale(.95) brightness(.55) blur(1.5px);backdrop-filter:grayscale(.95) brightness(.55) blur(1.5px);-webkit-mask-image:radial-gradient(ellipse at center,#000 38%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 38%,transparent 72%)}
.map-node.boss-wait .pin{border-color:#ff5a3a!important;animation:bossPin 1.5s ease-in-out infinite}
.map-node.boss-wait small::after{content:' · BOSS';color:#ff8a6a;font-weight:700}
@keyframes bossPin{50%{box-shadow:0 0 0 2px #000,0 0 26px 8px #ff3b1acc;transform:scale(1.1)}0%,100%{box-shadow:0 0 0 2px #000,0 0 12px 2px #ff3b1a88}}

/* ═════════ v13: portraits ═════════ */
.portrait-art{width:100%;height:100%;display:block}
.portrait.has-art,.qd-portrait.has-art{padding:0!important;overflow:hidden;background:none!important}
.mentor .portrait.has-art{width:64px;height:64px;border-radius:50%;border:2px solid #d4a44a;box-shadow:0 0 0 2px #000,0 0 12px #f2c75c33}
.qd-portrait.has-art{width:68px!important;height:68px!important;border-radius:50%;border:3px solid #b8933e!important;box-shadow:0 0 0 2px #3a2a14}
.boss-portrait{width:150px;height:150px;margin:6px auto 10px;border-radius:50%;overflow:hidden;border:3px solid #a3201a;box-shadow:0 0 0 3px #000,0 0 30px #ff3b1a88;animation:bossBreath 3.2s ease-in-out infinite}
.boss-portrait.examiner{border-color:#e8b54a;box-shadow:0 0 0 3px #000,0 0 34px #ffcf5aaa}
@keyframes bossBreath{50%{transform:scale(1.03);box-shadow:0 0 0 3px #000,0 0 44px #ff3b1acc}}
.boss-mini{width:72px;height:72px;margin:10px 0 0;border-radius:50%;overflow:hidden;border:2px solid #a3201a;box-shadow:0 0 0 2px #000}
@media(max-width:650px){.boss-portrait{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.boss-portrait{animation:none}}

/* ═════════ v13: Your Path, onboarding, placement ═════════ */
.path-panel{margin:18px 0 22px}
.path-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.path-head h2{margin:4px 0 0}
.path-meta{font-size:12.5px;color:var(--muted)}
.chapters{display:flex;align-items:center;gap:0;margin:16px 0;overflow-x:auto;padding:6px 2px 10px}
.chap{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;background:none;border:0;color:var(--text);padding:0}
.chap-pin{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:17px;background:radial-gradient(circle at 40% 30%,#3b2c14,#120d06);border:2px solid #4d3c22;color:#8f8468;box-shadow:0 0 0 1px #000}
.chap-name{font-size:11px;color:var(--muted);text-align:center;line-height:1.2}
.chap small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chap-bar{width:54px;height:4px;background:#0b0906;border-radius:2px;overflow:hidden}
.chap-bar i{display:block;height:100%;background:var(--gold)}
.chap-link{flex:1 0 14px;min-width:14px;height:2px;background:#4d3c22;margin-bottom:34px}
.chap.done .chap-pin{border-color:#5fbf4f;color:#8ed37f}
.chap.placed .chap-pin{border-color:#4f7fd6;color:#9cc3ff}
.chap.placed small{color:#9cc3ff}
.chap.boss .chap-pin{border-color:#ff5a3a;color:#ffb08a}
.chap.boss small{color:#ff8a6a}
.chap.current .chap-pin{border-color:var(--gold);color:#ffe08a;box-shadow:0 0 0 1px #000,0 0 16px #f2c75c88;animation:pinGlow 2s ease-in-out infinite}
.chap.current .chap-name{color:#fff0c8;font-weight:700}
.chap.current small{color:var(--gold)}
.chap.exam .chap-pin{color:#ffd36a}
@keyframes pinGlow{50%{box-shadow:0 0 0 1px #000,0 0 26px #f2c75ccc}}
.path-cta{width:100%;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;text-align:left;padding:14px 18px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#b8281c 0%,#7c150e 60%,#5a0e09 100%);border:1px solid #000;box-shadow:inset 0 0 0 1px #e8b04a,inset 0 2px 0 #ff8a6a55,0 4px 14px #000a;color:#ffe9b0}
.path-cta:hover{filter:brightness(1.12)}
.path-cta strong{display:block;font:700 18px var(--serif);color:#ffd75e;text-shadow:0 1px 2px #000}
.path-cta small{font-size:12.5px;color:#f3d9b0}
.pc-icon{width:64px;height:64px;display:grid;place-items:center;font-size:28px;color:#ffd75e}
.pc-portrait{display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid #e8b04a;box-shadow:0 0 0 2px #000}
.pc-go{font-size:26px;color:#ffd75e}
.path-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:12px;padding:6px 11px;border-radius:999px;background:#17120c;border:1px solid #000;box-shadow:inset 0 0 0 1px #4d3c22;color:#e3d3ad}
.chip:hover{box-shadow:inset 0 0 0 1px var(--gold);color:#fff0c8}
.chip.blue{box-shadow:inset 0 0 0 1px #4f7fd6;color:#9cc3ff}
/* onboarding dialog */
dialog#onboard{border:0;background:transparent;padding:0;width:min(720px,94vw);max-width:94vw;color:var(--parch-ink)}
dialog#onboard::backdrop{background:#000c;backdrop-filter:blur(3px)}
.parchment.ob{border-radius:8px;max-height:88vh}
.ob h2{font:700 26px var(--serif);color:#3a2205;margin:6px 0 14px}
.ob .eyebrow{color:#8a5a00}
.ob .answer-label{color:#4a3418}
.ob .text-input{background:#fffaf0;color:#2a1a08;box-shadow:inset 0 0 0 1px #a88a55}
.ob-dots{display:flex;gap:6px;margin-bottom:10px}
.ob-dots i{width:28px;height:5px;border-radius:3px;background:#c9b183}
.ob-dots i.on{background:#8a5a00}.ob-dots i.done{background:#5f8a43}
.ob-classes,.ob-paths,.ob-loop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.ob-paths{grid-template-columns:1fr 1fr}
.ob-loop{grid-template-columns:repeat(4,1fr)}
.ob-class,.ob-path{text-align:left;background:#f6ead0;border:2px solid #b89b62;border-radius:8px;padding:12px;color:#3a2a14;display:flex;flex-direction:column;gap:3px}
.ob-class:hover,.ob-path:hover{border-color:#8a5a00;background:#fbf2dd}
.ob-class.on{border-color:#8a5a00;box-shadow:0 0 0 2px #e8b54a}
.ob-cicon{font-size:26px;color:#5b3f8a}
.ob-class strong,.ob-path strong{font:700 15px var(--serif)}
.ob-class small,.ob-path small{font-size:12.5px;color:#5c4526;line-height:1.45}
.ob-class em{font-style:normal;font-size:11.5px;color:#7a2a14;font-weight:700}
.ob-path span{font-size:22px}
.ob-path.rec{border-color:#8a5a00;box-shadow:0 0 0 2px #e8b54a}
.ob-path.rec::after{content:'Recommended if unsure';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a5a00;font-weight:700}
.ob-path select{margin-top:6px;width:100%;font-size:12.5px;padding:6px}
.ob-loop div{background:#f6ead0;border:1px solid #c9b183;border-radius:8px;padding:12px;text-align:center}
.ob-loop span{font-size:24px;display:block}
.ob-loop strong{display:block;font:700 15px var(--serif);color:#3a2205}
.ob-loop small{font-size:12px;color:#5c4526}
.ob .muted{color:#5c4526!important}
/* placement test */
.pt-wrap{max-width:860px;margin:22px auto 0}
.pt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12.5px}
.pt-bar{height:10px;background:#0b0906;border:1px solid #000;border-radius:5px;overflow:hidden;margin-bottom:16px;box-shadow:inset 0 0 0 1px #3b2e1a}
.pt-bar i{display:block;height:100%;background:linear-gradient(90deg,#5fbf4f,#b6ff9e);transition:width .4s}
.pt-results{display:grid;gap:8px}
.pt-row{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:6px;background:#120e09;box-shadow:inset 0 0 0 1px #3b2e1a}
.pt-portrait{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #4d3c22}
.pt-row strong{display:block;font-size:14px;color:#fff0c8}
.pt-row small{font-size:12px;color:var(--muted)}
.pt-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:#1d160d;border:1px solid #4d3c22;color:var(--muted)}
.pt-row.strong .pt-badge{color:#b6ff9e;border-color:#4f8a43}.pt-row.strong .pt-portrait{border-color:#5fbf4f}
.pt-row.shaky .pt-badge{color:#ffd36a;border-color:#8a6a35}
.pt-row.new .pt-badge{color:#ff9b85;border-color:#8a4a36}
@media(max-width:700px){.ob-classes,.ob-paths,.ob-loop{grid-template-columns:1fr}.path-cta{grid-template-columns:48px 1fr auto;padding:12px}.pc-icon,.pc-portrait{width:48px;height:48px}.path-cta strong{font-size:15px}.chap{width:76px}}
@media(prefers-reduced-motion:reduce){.chap.current .chap-pin{animation:none}}

/* ═════════ v14: full-width layout ═════════ */
main{max-width:none}
.lesson,.practice,.netbeans,.recap,.lesson-head .goal{max-width:none}
/* wide screens: lesson on the left, practice pinned on the right */
@media(min-width:1280px){
  body[data-view="quest"] #app{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(400px,1fr);column-gap:26px;align-items:start}
  body[data-view="quest"] #app > .back,
  body[data-view="quest"] #app > .lesson-head,
  body[data-view="quest"] #app > .lesson-steps{grid-column:1 / -1}
  body[data-view="quest"] #app > #learn{grid-column:1;grid-row:4}
  body[data-view="quest"] #app > #netbeans{grid-column:1;grid-row:5}
  body[data-view="quest"] #app > .recap{grid-column:1;grid-row:6}
  body[data-view="quest"] #app > #practice{grid-column:2;grid-row:4 / span 3;position:sticky;top:16px;max-height:calc(100vh - 60px);overflow-y:auto;margin-bottom:0}
  body[data-view="quest"] #app > #practice .exercise-top{position:sticky;top:0;z-index:2}
}
@media(min-width:1800px){body[data-view="quest"] #app{grid-template-columns:minmax(0,1.6fr) minmax(460px,1fr)}}
body[data-view="quest"] #tracker,body[data-view="boss"] #tracker,body[data-view="arena"] #tracker,body[data-view="placement"] #tracker{display:none!important}

/* v16 — Arena: uncharted lore, last heart */
.arena-q.uncharted{border-color:#7b5bb8;box-shadow:0 0 0 1px #7b5bb855,0 0 28px #6a3fd033}
.uncharted-banner{background:linear-gradient(90deg,#2a1d45,#1b1530);color:#c9b2ff;font:600 11px/1.4 var(--mono,monospace);letter-spacing:.06em;padding:8px 14px;border-bottom:1px solid #5b4590}
.lore-note{font-size:13px;color:#cdbf9f;margin:6px 0}
.last-heart{font:700 10px var(--mono,monospace);letter-spacing:.12em;color:#ff7a6b;margin-right:8px;animation:lastHeart 1s ease-in-out infinite alternate}
@keyframes lastHeart{from{opacity:.55}to{opacity:1}}
.arena-leave{margin-top:14px;opacity:.8}
.lore-links{display:flex;flex-wrap:wrap;gap:8px}.lore-links .pill-button small{opacity:.65;margin-left:6px}.lore-links .hit{border-color:#5f9b5f}

/* ═════ v16 — quest trail: cards, checkpoints, trial, forge ═════ */
.trail .card{position:relative;background:linear-gradient(180deg,#1a2220,#161d1b);border:1px solid #39463a;border-radius:8px;padding:22px 26px 20px;margin:0 0 18px;transition:border-color .3s,opacity .3s}
.trail .card.current{border-color:#a98a4c;box-shadow:0 0 0 1px #a98a4c33,0 10px 40px #0005;animation:cardIn .45s ease-out}
.trail .card.past{opacity:.86}
.trail .card.past:hover{opacity:1}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.card-head h3{margin:0;font-size:18px;color:#efe0b6}
.card-num{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;border:1px solid #8c7444;color:var(--gold);font:600 13px var(--serif);background:#221f16}
.card.past .card-num{background:#203520;border-color:#5f8d55;color:#a6d897}
.card-tick{margin-left:auto;display:flex;gap:4px;font-size:12px;color:#7d8b7b}.card-tick .ok{color:#8fd07f;font-style:normal}.card-tick .bad{color:#e08f6c;font-style:normal}.card-tick i{font-style:normal}
.card.traps{border-color:#7a4f3a}.card.traps .card-num{border-color:#b0714f;color:#f0a77f}
.card-body>p{font-size:14.5px;line-height:1.8}
.card-continue{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px dashed #4a5440}
.card-continue small{color:#b8a77c;font-style:italic;font-size:12px}
.checkpoint{margin-top:20px;border:1px solid #6f5d36;border-radius:7px;overflow:hidden;background:#141a17}
.cp-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(90deg,#2d2716,#1d211a);border-bottom:1px solid #5a4d2f;font:700 10px var(--sans);letter-spacing:.14em;color:#e6c77f}
.cp-top small{font:400 11px var(--sans);letter-spacing:0;color:#b9b195}
.cp-body{padding:18px 20px}
.choice.correct{border-color:#6fae5f!important;background:#203a1f!important;color:#cdf1c0!important}
.choice.wrong{border-color:#b0613f!important;background:#3a221a!important;color:#f2c3aa!important}
.choice:disabled{opacity:1;cursor:default}
/* trial */
.trial-gate,.trial-result{display:flex;gap:22px;align-items:flex-start;padding:26px;border-radius:9px;margin:26px 0 18px;border:1px solid #8f6d3a;background:radial-gradient(ellipse at top left,#3b2c18,#171b17 70%);box-shadow:0 10px 40px #0006}
.trial-gate.cleared{border-color:#58804d;background:radial-gradient(ellipse at top left,#22361f,#161c18 70%)}
.trial-result.win{border-color:#6fa05f;background:radial-gradient(ellipse at top left,#284423,#161c18 70%)}
.trial-result.loss{border-color:#9b5a3d;background:radial-gradient(ellipse at top left,#3d2219,#171b17 70%)}
.trial-crest{flex:0 0 64px;height:64px;display:grid;place-items:center;font-size:34px;color:var(--gold);border:2px solid #b38f4d;border-radius:50%;background:#1d1a12;box-shadow:0 0 30px #e1b45f33}
.trial-result.win .trial-crest{color:#bff0a9;border-color:#78b064}
.trial-gate h2,.trial-result h2{font-size:24px;margin:6px 0 4px;color:#f2dda6}
.trial-gate p,.trial-result p{font-size:14px;color:#d3cdb7}
.trial-live{margin:26px 0 18px;border:1px solid #b38f4d;border-radius:9px;overflow:hidden;background:#151b18;box-shadow:0 0 0 1px #b38f4d33,0 12px 40px #0006}
.trial-top{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:linear-gradient(90deg,#3a2c16,#1f2019);border-bottom:1px solid #6b5631;font:700 10px var(--sans);letter-spacing:.15em;color:#f0cf86}
.trial-top .pips i.bad{background:#c0623f}
.trial-tag{display:inline-block;font:600 10px var(--sans);letter-spacing:.08em;color:#d7c08a;border:1px solid #6b5a36;border-radius:3px;padding:2px 8px;margin-bottom:6px}
.trial-missed{display:grid;gap:12px;margin:14px 0}.trial-missed>div{background:#1a1512;border:1px solid #5e3f30;border-radius:6px;padding:12px 14px}.trial-missed p{margin:6px 0;font-size:13px}
.forge-locked{display:flex;gap:16px;align-items:center;padding:18px 22px;border:1px dashed #5b5a4c;border-radius:8px;color:#9fa596;margin-bottom:18px}.forge-locked>span{font-size:28px;opacity:.6}.forge-locked strong{display:block;color:#cfc7a8}.forge-locked small{font-size:12px}
.quest-done{border-color:#5f8d55;margin-bottom:18px}.recap-list li{margin-bottom:6px}
/* quest log (right column) */
.quest-log .log-steps{list-style:none;padding:0;margin:14px 0;display:grid;gap:2px}
.quest-log .log-steps li{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:5px;font-size:13px;color:#8e9a8b}
.quest-log .log-steps li>span{flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1px solid #4b574a;font-size:11px}
.quest-log .log-steps li.done{color:#bcd8b2}.quest-log .log-steps li.done>span{background:#2b4a28;border-color:#5f8d55;color:#bff0a9}
.quest-log .log-steps li.now{color:#f3dfa9;background:#2a2617}.quest-log .log-steps li.now>span{border-color:var(--gold);color:var(--gold)}
.quest-log .log-steps li.big{margin-top:6px;border-top:1px solid #2f3a30;padding-top:11px;border-radius:0}
.quest-log b.ok{color:#9fdc8c}
.log-score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}.log-score>div{background:#141b18;border:1px solid #344033;border-radius:6px;padding:10px 12px}.log-score b{display:block;font:600 20px var(--serif);color:var(--gold)}.log-score small{font-size:11px;color:var(--muted)}
.log-note{font-size:12px}
@media(min-width:1280px){body[data-view="quest"] #practice.quest-log{max-height:calc(100vh - 40px)}}
@media(max-width:1279px){.quest-log{display:none}}
/* forge (in-browser Java) */
.forge-panel{border:1px solid #6b5aa0;border-radius:9px;background:linear-gradient(180deg,#1b1a26,#151720);padding:22px 24px;margin:0 0 18px;box-shadow:0 10px 40px #0006}
.forge-panel.passed{border-color:#5f8d55}
.forge-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.forge-head .eyebrow{color:#c7a4ed}
.jvm-status{font:600 11px var(--sans);color:#a9a2c4}
.forge-title{font-size:20px;margin:10px 0 6px;color:#ece0ff}
.forge-brief p,.forge-brief{font-size:14px;line-height:1.7;color:#d6d2e4}
.given{margin:10px 0}.given summary{color:#b9b0d6}
.editor-wrap{border:1px solid #423c5e;border-radius:6px;overflow:hidden;margin:14px 0 4px;background:#0f1117}
.editor-tab{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;background:#1d1b2b;border-bottom:1px solid #393350;font:12px ui-monospace,Menlo,monospace;color:#d9cff7}.editor-tab small{color:#8d86a8;font-family:var(--sans)}
.code-input{display:block;width:100%;min-height:260px;border:0;border-radius:0;background:#0f1117;color:#e3e6f0;font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:12px 14px;tab-size:4;resize:vertical}
.editor-wrap .CodeMirror{height:auto;min-height:260px;background:#0f1117;color:#e3e6f0;font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.editor-wrap .CodeMirror-scroll{min-height:260px;max-height:70vh}
.editor-wrap .CodeMirror-gutters{background:#14161f;border-right:1px solid #2b2d3c}.editor-wrap .CodeMirror-linenumber{color:#5b6078}
.editor-wrap .CodeMirror-cursor{border-left:2px solid #f0cf86}.editor-wrap .CodeMirror-selected,.editor-wrap .CodeMirror-focused .CodeMirror-selected{background:#3a3560}
.editor-wrap .cm-keyword{color:#e39ab5}.editor-wrap .cm-type,.editor-wrap .cm-variable-3{color:#8fd0e0}.editor-wrap .cm-string{color:#b8de8a}.editor-wrap .cm-number{color:#f2b36b}.editor-wrap .cm-comment{color:#6f7590;font-style:italic}.editor-wrap .cm-def{color:#f0cf86}.editor-wrap .cm-meta{color:#c7a4ed}.editor-wrap .cm-atom{color:#f2b36b}.editor-wrap .cm-builtin{color:#8fd0e0}
.editor-wrap .CodeMirror-matchingbracket{color:#fff!important;background:#3d3a5a}
.cm-error-line{background:#4a1f1f!important}
.forge-actions{margin-top:12px}
.forge-results .feedback{margin-top:14px}
.forge-running{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border:1px solid #3d3758;border-radius:6px;color:#cfc6ee;font-size:13px}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid #6b5aa0;border-top-color:#f0cf86;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.cerr{margin:10px 0;padding:10px 12px;background:#2a1a17;border-left:3px solid #c0623f;border-radius:4px}
.cerr-line{background:#3d241d;border:1px solid #7a4533;color:#f5c4ac;border-radius:3px;font:600 11px var(--sans);padding:2px 8px;margin-right:8px}
.cerr code{color:#ffd9c6}.cerr p{margin:6px 0 0;font-size:13px;color:#ebd2c2}
.j8{font-size:12.5px;color:#cbbfe6;margin:8px 0}
.case-group{margin-top:12px}.case-group h4{font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#cdd8c4;margin:0 0 6px}
.case{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 8px;align-items:baseline;padding:6px 0;border-top:1px solid #ffffff10;font-size:13px}
.case b{font-size:13px}.case.ok b{color:#9fdc8c}.case.bad b{color:#f08f68}
.case small{grid-column:2;font-size:12px;color:#cdbfae;font-family:ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.case pre.mini{grid-column:2;margin:6px 0;padding:8px 10px;font-size:11.5px}
.console-out{margin-top:12px}.console-out span{font:700 10px var(--sans);letter-spacing:.14em;color:#a9b4a4}.console-out pre{margin:6px 0 0;max-height:240px;overflow:auto}
.forge-foot{font-size:11px;color:#7f7a96;margin:12px 0 0}.forge-foot a{color:#a99bd4}
.cj-console{display:none}
@media(max-width:650px){.trail .card{padding:16px}.trial-gate,.trial-result{flex-direction:column;padding:18px}.forge-panel{padding:16px}.code-input,.editor-wrap .CodeMirror{font-size:12.5px}}
.cj-display{width:640px;height:420px;background:#d9d9d9;border:1px solid #555;border-radius:4px;overflow:hidden}
.cj-display.offscreen{position:fixed;left:-10000px;top:0}

/* v16 — zones, projects, attunement */
.map-node.undiscovered .pin{background:#1d2422!important;border-color:#5d6560!important;color:#8e9a94!important;box-shadow:0 0 0 5px #0d151299,0 0 30px #000!important;filter:grayscale(1)}
.map-node.undiscovered strong{color:#9aa49c;font-style:italic}
.map-node.undiscovered small{color:#8a958d}
.map-node.undiscovered::before{content:'';position:absolute;inset:-26px -34px;border-radius:50%;background:radial-gradient(closest-side,#0e1613cc,#0e161300);pointer-events:none;z-index:-1}
.region-card.undiscovered{opacity:.62;filter:grayscale(.75)}.region-card.undiscovered .region-icon{color:#8a958d}
.zone-project{border-top:2px solid #8a72c9}.zone-project.ready{border-color:#c9a45a;box-shadow:0 0 0 1px #c9a45a44,0 0 24px #e1b45f22}.zone-project.done{border-top-color:#5f8d55}
.zone-project h2{font-size:17px;margin-top:8px}
.project-banner h1{font-size:30px}
.project-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.project-side{position:sticky;top:16px}.project-side p{font-size:13px}.project-steps{padding-left:18px;font-size:13px;color:#c9d2c3}.project-steps li{margin-bottom:6px}
@media(max-width:1100px){.project-layout{grid-template-columns:1fr}.project-side{position:static}}
.project-locked h2{font-size:20px}
.undiscovered-banner{filter:grayscale(.6) brightness(.8)}
.attunement{border-top:2px solid #c9a45a;margin:18px 0}
.attune-steps{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.attune-steps li{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid #344033;border-radius:6px;font-size:13px;color:#9aa69a}
.attune-steps li>span{width:20px;text-align:center}.attune-steps li.done{color:#c7e3bd;border-color:#4f7a47}.attune-steps li.done>span{color:#9fdc8c}
.attune-steps li.big{grid-column:1/-1;border-color:#8f6d3a;background:#211d14;color:#f0d9a2}.attune-steps li.now{box-shadow:0 0 0 1px #c9a45a66,0 0 20px #e1b45f22}
.attune-steps .link-button{background:none;border:0;color:inherit;padding:0;text-align:left;font:inherit;cursor:pointer;text-decoration:underline dotted #ffffff44}
.final-boss.sealed .boss-portrait{filter:grayscale(.8) brightness(.6)}
.final-boss.sealed h2::after{content:' · sealed';color:#9a8f78;font-size:14px}
.discover-art{display:block;height:110px;border-radius:8px;margin:0 0 14px;border:1px solid #8f7746;background-size:cover!important;box-shadow:inset 0 0 40px #000a}
.needs{margin:6px 0 4px;padding-left:20px}.needs li{margin:3px 0}

/* v16 — mentor voice, Examiner's Scroll */
.trail .mentor small{font-size:13.5px;line-height:1.55;color:#d9cfb2;font-style:italic;display:block;max-width:760px}
.scroll-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media(max-width:1100px){.scroll-layout{grid-template-columns:1fr}}
.scroll-sheet{background:linear-gradient(180deg,#2b2417,#1d1912);border:1px solid #8f7746;border-radius:10px;padding:20px 22px;box-shadow:inset 0 0 60px #0008,0 10px 40px #0007}
.scroll-meter{position:relative;height:26px;background:#14110c;border:1px solid #6b5a36;border-radius:13px;overflow:hidden;margin-bottom:16px}
.scroll-meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8f6d3a,#e6c27a);transition:width .6s}
.scroll-meter span{position:relative;display:block;text-align:center;font:600 12px/26px var(--sans);color:#fff6dc;text-shadow:0 1px 2px #000}
.scroll-file{margin-bottom:18px}.scroll-tab{display:inline-block;font:12px ui-monospace,Menlo,monospace;color:#f0d9a2;background:#3a2f1c;border:1px solid #6b5a36;border-bottom:0;border-radius:6px 6px 0 0;padding:4px 12px}
.scroll-code{list-style:none;margin:0;padding:10px 0;background:#15120d;border:1px solid #4d4128;border-radius:0 6px 6px 6px;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;counter-reset:ln;overflow-x:auto}
.scroll-code li{counter-increment:ln;white-space:pre;padding:0 12px 0 46px;position:relative;cursor:default;color:#d8d2bf}
.scroll-code li::before{content:counter(ln);position:absolute;left:0;width:34px;text-align:right;color:#5e5640}
.scroll-code li.sealed{color:#8a6fc4;text-shadow:0 0 6px #6a3fd099;letter-spacing:.06em;cursor:pointer;opacity:.75}
.scroll-code li.open:not(.plain){cursor:pointer}
.scroll-code li:hover:not(.plain),.scroll-code li.focus{background:#2c2618}
.scroll-code li.sealed:hover{opacity:1}
.scroll-side{position:sticky;top:16px}
.scroll-teaser{display:block;width:100%;text-align:left;background:linear-gradient(180deg,#2b2417,#1d1912);border:1px solid #8f7746;border-radius:8px;padding:14px 16px;margin:16px 0;color:inherit;cursor:pointer}
.scroll-teaser .scroll-code.mini{margin:8px 0;padding:6px 0;font-size:11.5px;pointer-events:none}
.scroll-teaser small{color:#cdbb8d}
.scroll-teaser.wide{margin:0 0 18px}
.scroll-side pre{overflow-x:auto;white-space:pre}
.how-it-works{border-top:2px solid var(--gold)}.hiw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}.hiw-grid>div{background:#151c19;border:1px solid #344033;border-radius:6px;padding:12px 14px}.hiw-grid b{color:#f0d9a2}.hiw-grid p{font-size:13px;margin:6px 0 0}
@media(max-width:1100px){.scroll-layout,.project-layout{grid-template-columns:minmax(0,1fr)}}
.scroll-sheet,.project-layout>div,.forge-panel,.editor-wrap{min-width:0}
.editor-wrap .CodeMirror{max-width:100%}
@media(max-width:650px){.scroll-sheet{padding:12px}.scroll-code{font-size:11px}.scroll-code li{padding-left:36px}.scroll-code li::before{width:26px}}

/* v20 — clearer forge goals, near misses, honest turn-in, inspectable loot */
.forge-goal{background:#14131d;border:1px solid #4a4268;border-left:3px solid #c7a4ed;border-radius:6px;padding:12px 16px;margin:12px 0}
.forge-goal p{font-size:13.5px;margin:6px 0}.forge-goal ul{margin:6px 0;padding-left:18px;font-size:13.5px}
.goal-out{margin:8px 0;font-size:12.5px}
.goal-table{border-collapse:collapse;font-size:13px;margin-top:6px}.goal-table td{padding:3px 8px 3px 0;vertical-align:top}.goal-table td:nth-child(2){color:#8d86a8}
.case.near b{color:#f0c96a}.case.near small{color:#e6d6a8}
.near-note{margin:10px 0;padding:10px 12px;border:1px solid #8f7746;background:#2a2414;border-radius:6px;font-size:13px;color:#ecdcae}
.first-diff{grid-column:2;margin:6px 0;padding:8px 10px;background:#2a1a17;border-left:3px solid #c0623f;border-radius:4px;font-size:12.5px;color:#f1d3c3}.first-diff code{white-space:pre-wrap}
.qd-summary{list-style:none;padding:0;margin:10px 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.qd-summary li{font-size:12px;padding:3px 9px;border:1px solid #8f7746;border-radius:12px;background:#00000014}
.qd-itemcard{display:flex;justify-content:center;margin:10px 0 0}.qd-itemcard>*{position:static!important;display:block!important;max-width:320px;text-align:left}
dialog #tooltip{position:fixed;z-index:10}
.goal-explain{font-size:13px;color:#d6d0e6}
.try-call{display:flex;gap:8px;align-items:center;margin:12px 0 4px;flex-wrap:wrap}.try-call label{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#c7a4ed}.try-call input{flex:1;min-width:180px;padding:8px 10px;background:#0f1117;border-color:#423c5e}
.try-out{font-size:13px;padding:6px 0}.try-ok code{color:#cfe9c6}.try-ok b code{color:#9fdc8c;font-size:14px}.try-bad{color:#f1c3aa}

/* v22 — momentum: next-step button, combo, sprints, confetti */
#next-fab{position:fixed;right:18px;bottom:46px;z-index:60;display:flex;align-items:flex-end;gap:8px}
.fab-next{display:flex;flex-direction:column;align-items:flex-start;max-width:300px;padding:10px 16px;border-radius:12px;border:1px solid #edce90;background:linear-gradient(180deg,#ebcb87,#cda65b);color:#201d12;box-shadow:0 8px 28px #000a,0 0 0 4px #e6c27a22;cursor:pointer;text-align:left}
.fab-next small{font:800 9px var(--sans);letter-spacing:.18em;opacity:.7}.fab-next b{font:700 13px var(--sans)}
.fab-next:hover{transform:translateY(-2px)}
.fab-sprint{width:46px;height:46px;border-radius:50%;border:1px solid #79608e;background:#2a2238;color:#e9d6ff;font-size:20px;box-shadow:0 8px 28px #000a;cursor:pointer}
.fab-menu{position:absolute;right:0;bottom:56px;width:260px;padding:14px;background:#17151f;border:1px solid #6b5aa0;border-radius:10px;box-shadow:0 12px 40px #000c;display:grid;gap:8px}
.fab-menu[hidden]{display:none}.fab-menu b{color:#ece0ff}.fab-menu small{font-size:12px;color:#c9c2dd}.fab-menu>div{display:flex;gap:6px}
#combo{position:fixed;right:22px;top:84px;z-index:55;pointer-events:none}
.combo-badge{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:20px;background:#211d14ee;border:1px solid #8f7746;color:#f0d9a2;box-shadow:0 6px 20px #0008}
.combo-badge b{font:800 20px var(--serif)}.combo-badge span{font:800 9px var(--sans);letter-spacing:.18em}
.combo-badge.warm{border-color:#e6a24a;color:#ffd08a;box-shadow:0 0 18px #e6a24a55}.combo-badge.hot{border-color:#ff7a4a;color:#ffb48f;box-shadow:0 0 26px #ff7a4a77}
.combo-badge.pop{animation:comboPop .35s ease-out}@keyframes comboPop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
#sprint-hud{position:fixed;left:50%;transform:translateX(-50%);top:10px;z-index:58;display:none}
#sprint-hud.on{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:#17151fee;border:1px solid #6b5aa0;border-radius:30px;box-shadow:0 8px 28px #000a}
.sprint-ring{--p:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#c7a4ed calc(var(--p)*1%),#2d2840 0)}
.sprint-ring span{width:36px;height:36px;border-radius:50%;background:#17151f;display:grid;place-items:center;font:700 11px var(--sans);color:#ece0ff}
.sprint-tally{display:grid;gap:2px}.sprint-tally b{font:800 9px var(--sans);letter-spacing:.16em;color:#c7a4ed}.sprint-tally small{font-size:11px;color:#d6d0e6}
.chest-bar{display:block;width:150px;height:5px;border-radius:3px;background:#2d2840;overflow:hidden}.chest-bar i{display:block;height:100%;background:linear-gradient(90deg,#8f6d3a,#e6c27a);transition:width .4s}
.sprint-end{background:none;border:0;color:#8d86a8;font-size:14px;cursor:pointer}
.sprint-chest{display:block;font-size:54px;margin-bottom:8px;animation:glow 1.2s ease-in-out infinite alternate}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
#confetti i{position:absolute;top:30vh;width:8px;height:12px;border-radius:2px;animation:confetti 1.5s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.focus-mode #combo,.focus-mode #confetti{display:none}
@media(max-width:650px){#next-fab{right:10px;bottom:40px}.fab-next{max-width:220px;padding:8px 12px}#combo{top:auto;bottom:100px;right:12px}#sprint-hud{top:6px}.chest-bar{width:100px}}
body[data-view="arena"] #next-fab .fab-next,body[data-view="boss"] #next-fab .fab-next{display:none}
#sprint-hud{top:auto;bottom:44px;left:calc(246px + 24px);transform:none}
@media(max-width:1150px){#sprint-hud{left:calc(215px + 16px)}}
@media(max-width:650px){#sprint-hud{left:10px;bottom:96px}}
@media(max-width:650px){#combo{top:10px;bottom:auto;right:10px}.combo-badge{padding:4px 10px}.combo-badge b{font-size:16px}#sprint-hud.on{padding:5px 8px 5px 5px;gap:8px}.sprint-tally small{display:none}.sprint-ring{width:38px;height:38px}.sprint-ring span{width:30px;height:30px;font-size:10px}.chest-bar{width:70px}}
@media(max-width:650px){#combo{top:auto;bottom:96px;right:10px}}

/* v23 — visual polish */
#embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#embers i{position:absolute;bottom:-10px;border-radius:50%;background:radial-gradient(circle,#ffd58a,#e0782a 60%,transparent 70%);opacity:0;animation:ember linear infinite;filter:blur(.3px)}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.55}80%{opacity:.25}100%{transform:translate(var(--sway),-105vh);opacity:0}}
main{position:relative;z-index:1}
.focus-mode #embers{display:none}
/* answer feedback */
.flash-ok{animation:flashOk .9s ease-out}
@keyframes flashOk{0%{box-shadow:0 0 0 0 #8fd07f00}25%{box-shadow:0 0 0 3px #8fd07faa,0 0 40px #8fd07f66}100%{box-shadow:0 0 0 0 #8fd07f00}}
.shake{animation:shake .42s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
/* forge */
.forge-panel.forging{animation:forging 1.1s ease-in-out infinite alternate;border-color:#e0782a}
@keyframes forging{from{box-shadow:0 0 0 1px #e0782a55,0 0 18px #e0782a33}to{box-shadow:0 0 0 1px #ffb15c99,0 0 40px #e0782a66}}
.forge-panel.forged-flash{animation:forged 1.4s ease-out}
@keyframes forged{0%{box-shadow:0 0 0 0 #ffd58a00}20%{box-shadow:0 0 0 3px #ffd58acc,0 0 70px #ffb15c99}100%{box-shadow:0 10px 40px #0006}}
/* buttons: a light sweep on gold buttons */
.button.gold{position:relative;overflow:hidden}
.button.gold::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff8 50%,transparent);transform:skewX(-20deg);transition:left .6s ease}
.button.gold:hover:not(:disabled)::after{left:130%}
/* current card */
.trail .card.current .card-num{animation:numPulse 2.4s ease-in-out infinite}
@keyframes numPulse{0%,100%{box-shadow:0 0 0 0 #e6c27a00}50%{box-shadow:0 0 0 5px #e6c27a33}}
.trail .card.current::before{content:'';position:absolute;inset:-1px;border-radius:8px;pointer-events:none;background:linear-gradient(120deg,transparent 30%,#e6c27a22 50%,transparent 70%) 0 0/250% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{from{background-position:150% 0}to{background-position:-100% 0}}
/* trial result + discovery */
.trial-result .trial-crest,.trial-gate .trial-crest{animation:crestIn .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes crestIn{from{transform:scale(.3) rotate(-120deg);opacity:0}to{transform:none;opacity:1}}
.discover-art{position:relative;overflow:hidden}
.discover-art::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#0000 0%,#0f1613 70%),linear-gradient(#cfd8d0cc,#9aa69ecc);animation:fogClear 2.2s ease-out .2s forwards}
@keyframes fogClear{to{opacity:0;transform:scale(1.3)}}
/* xp bar shimmer */
#xpbar{position:fixed}
#xpbar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff22,transparent) 0 0/30% 100% no-repeat;animation:xpShine 5s linear infinite;pointer-events:none}
@keyframes xpShine{from{background-position:-30% 0}to{background-position:130% 0}}
/* quest rows & panels: gentle lift */
.quest-row,.region-card,.panel.zone-project{transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.quest-row:hover,.region-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0007;border-color:#7e6a40}
.sound-offer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border:1px solid #8f7746;border-radius:8px;background:linear-gradient(90deg,#2b2417,#1a1f1c)}
.sound-offer>span{font-size:24px}.sound-offer p{flex:1;min-width:200px;margin:0;font-size:13.5px}
@media(prefers-reduced-motion:reduce){#embers{display:none}}
/* v24: no continuous light sweeps (distracting while reading) */
.trail .card.current::before{content:none;animation:none}
#xpbar::after{content:none;animation:none}

/* v26: the lesson lives in its current zone. Scenery stays behind opaque text surfaces. */
body[data-zone="0"]{--zone-accent:224,169,92;--zone-surface:#271f17}
body[data-zone="1"]{--zone-accent:93,210,195;--zone-surface:#122629}
body[data-zone="2"]{--zone-accent:139,180,224;--zone-surface:#1a2230}
body[data-zone="3"]{--zone-accent:185,148,239;--zone-surface:#251c32}
body[data-zone="4"]{--zone-accent:145,187,124;--zone-surface:#1c291e}
body[data-zone="5"]{--zone-accent:116,208,226;--zone-surface:#172830}
body[data-zone="6"]{--zone-accent:225,149,117;--zone-surface:#2a201c}
body[data-zone]:not([data-zone=""])::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#080c1099,#080c10e8),url('assets/realm.png') var(--zone-x) var(--zone-y)/max(220vw,170vh) auto no-repeat;}
body[data-view="quest"] .lesson-head{position:relative;overflow:hidden;border:1px solid rgba(var(--zone-accent),.45);border-radius:12px;padding:30px 28px 24px;background:linear-gradient(90deg,#0b1015f5 0%,#0b1015d9 46%,#0b101533 100%),url('assets/realm.png') var(--zone-x) var(--zone-y)/260% auto no-repeat;box-shadow:0 12px 35px #0005;margin-bottom:18px;}
.lesson-zone{color:rgb(var(--zone-accent));font:700 13px var(--sans);letter-spacing:.07em;margin-bottom:22px;text-transform:uppercase}.lesson-zone span{color:#d0d7d6;font-weight:400;letter-spacing:.03em}
body[data-view="quest"] .lesson-head h1{color:#fff6df;text-shadow:0 2px 12px #000;margin-bottom:18px}
body[data-view="quest"] .lesson-head .goal{background:#101719ed;border-color:rgba(var(--zone-accent),.35);border-left-color:rgb(var(--zone-accent));box-shadow:none;max-width:850px}
body[data-view="quest"] .trail .card{background:linear-gradient(150deg,var(--zone-surface),#151c1b 85%);border-color:rgba(var(--zone-accent),.26);opacity:1}
body[data-view="quest"] .trail .card.current{border-color:rgba(var(--zone-accent),.8);box-shadow:0 0 0 1px rgba(var(--zone-accent),.12),0 12px 30px #0004}
body[data-view="quest"] .trail-resume,body[data-view="quest"] .mentor{background:var(--zone-surface);border-color:rgba(var(--zone-accent),.3)}
body[data-view="quest"] .card-num{color:rgb(var(--zone-accent));border-color:rgba(var(--zone-accent),.45)}
body[data-view="quest"] .back{background:#0c1412d9;border-radius:5px;padding:8px 12px}
body.focus-mode[data-zone]::before{display:none}
body.focus-mode[data-view="quest"] .lesson-head{background:var(--zone-surface)}
@media(max-width:650px){body[data-view="quest"] .lesson-head{padding:22px 17px;background-size:auto,auto 240%;background-position:0 0,var(--zone-x) var(--zone-y)}.lesson-zone{font-size:11px;line-height:1.8;margin-bottom:14px}.lesson-zone span{display:block}.lesson-head .eyebrow{flex-wrap:wrap;gap:8px}}

/* v27 — the mentor drawer */
#mentor-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:90;display:flex;flex-direction:column;background:linear-gradient(180deg,#1b1a26,#13141b);border-left:1px solid #6b5aa0;box-shadow:-20px 0 60px #000a;animation:mdIn .25s ease-out}
#mentor-drawer[hidden]{display:none}
@keyframes mdIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.md-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #3d3758}
.md-portrait{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid #8f7746;flex:0 0 44px;display:grid;place-items:center;background:#2b3226}
.md-portrait svg,.md-portrait img{width:100%;height:100%}
.md-head b{display:block;font:600 14px var(--serif);color:#f0d9a2}.md-head small{font-size:11.5px;color:#aaa3c4}
.md-close{margin-left:auto;background:none;border:0;color:#aaa3c4;font-size:24px;cursor:pointer}
.md-thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.md-msg{max-width:92%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.55}
.md-msg p{margin:0 0 8px}.md-msg p:last-child{margin:0}.md-msg ul{margin:4px 0 8px;padding-left:18px}.md-msg pre{margin:8px 0;font-size:12px;padding:10px}
.md-msg.md-user{align-self:flex-end;background:#3a3020;border:1px solid #8f7746;color:#f4e6c2;white-space:pre-wrap}
.md-msg.md-mentor{align-self:flex-start;background:#22202f;border:1px solid #453d66;color:#e2dcf2}
.md-msg.intro{font-style:italic;color:#cfc6ee}.md-msg.err{border-color:#8b5f42;color:#f1c3aa;background:#2a1a17}
.md-msg.thinking{display:flex;gap:5px}.md-msg.thinking span{width:7px;height:7px;border-radius:50%;background:#c7a4ed;animation:mdDot 1s infinite ease-in-out}.md-msg.thinking span:nth-child(2){animation-delay:.15s}.md-msg.thinking span:nth-child(3){animation-delay:.3s}
@keyframes mdDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.md-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 10px}.md-chip{font-size:12px;padding:5px 10px;border-radius:14px;border:1px solid #5b4f86;background:#211d30;color:#d9cff7;cursor:pointer}.md-chip:hover{border-color:#c7a4ed}
.md-form{display:flex;gap:8px;padding:10px 18px;border-top:1px solid #3d3758}.md-form textarea{flex:1;min-height:44px;max-height:140px;resize:vertical;font:13.5px/1.5 var(--sans);background:#0f1117;border:1px solid #423c5e;border-radius:8px;padding:9px 11px;color:#eee}
.md-foot{font-size:10.5px;color:#8a83a6;margin:0;padding:0 18px 14px}
@media(max-width:650px){#mentor-drawer{width:100vw;border-left:0}}
body.mentor-open #next-fab{display:none}

/* v27 — zone theming beyond lessons: region pages, zone projects and bosses wear their zone's colours */
body[data-zone]:not([data-zone=""]) .region-banner{border-color:rgba(var(--zone-accent),.55);box-shadow:0 12px 35px #0006,inset 0 0 0 1px rgba(var(--zone-accent),.12)}
body[data-zone]:not([data-zone=""]) .region-banner .eyebrow,body[data-zone]:not([data-zone=""]) .project-banner .eyebrow{color:rgb(var(--zone-accent))}
body[data-view="region"] .quest-row{background:linear-gradient(150deg,var(--zone-surface),#151c1b 85%);border-color:rgba(var(--zone-accent),.22)}
body[data-view="region"] .quest-row:hover{border-color:rgba(var(--zone-accent),.75)}
body[data-view="region"] .quest-row .qmark{color:rgb(var(--zone-accent))}body[data-view="region"] .quest-row.done .qmark{color:var(--green)}
body[data-view="region"] .region-info .panel,body[data-view="project"] .project-side{background:linear-gradient(170deg,var(--zone-surface),#161d1c 70%);border-color:rgba(var(--zone-accent),.25)}
body[data-view="region"] .zone-project.ready{border-color:rgb(var(--zone-accent));box-shadow:0 0 0 1px rgba(var(--zone-accent),.3),0 0 24px rgba(var(--zone-accent),.15)}
body[data-view="project"] .forge-panel{border-color:rgba(var(--zone-accent),.55)}
body[data-view="boss"] .boss-arena{border-color:rgba(var(--zone-accent),.6);background:radial-gradient(ellipse at top,rgba(var(--zone-accent),.22),#12181a 72%)}
body[data-view="boss"] .boss-health i{background:linear-gradient(90deg,rgba(var(--zone-accent),.7),rgb(var(--zone-accent)))}
body[data-zone]:not([data-zone=""]) .back{background:#0c1412d9;border-radius:5px;padding:8px 12px}
/* header: wrap cleanly instead of overlapping when the buttons do not fit */
header{height:auto;min-height:72px;flex-wrap:wrap;row-gap:8px;padding:10px 0}
.header-right{flex-wrap:wrap;align-items:center;justify-content:flex-end;row-gap:8px}
body.is-fullscreen header{min-height:56px}

/* v27 — the gear-drawn hero */
.avatar.has-hero{padding:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3a3150,#1a1d24)}
.avatar.has-hero svg{width:100%;height:100%}
.avatar-stage{font-size:0;line-height:0;margin:0 auto}
.avatar-stage .hero-avatar.full{width:min(240px,70vw);height:auto;filter:drop-shadow(0 10px 22px #000a)}
.av-float{animation:avFloat 3s ease-in-out infinite}@keyframes avFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.focus-mode .av-float{animation:none}