/* Layout: a dark carved-stone frame holding a single parchment "quest log" page, tabs along the top like the old game windows. Committed single look. */
:root{
  --stone:#17130f; --stone-2:#241d16; --leather:#2f251b;
  --parch:#f0e3c2; --parch-2:#e3d1a4; --parch-edge:#c9b27a;
  --ink:#2a1c0d; --ink-soft:#5a4426; --title:#7d1712;
  --gold:#d2ad55; --gold-dim:#8f7434; --sky:#2f7fa8; --sky-light:#9fd0ea;
  --q-green:#1d6e05; --q-blue:#0d4f9c; --q-purple:#5e2b99;
  --f-display:"Marcellus SC","Trajan Pro",Georgia,serif;
  --f-body:"Alegreya",Georgia,"Times New Roman",serif;
  --f-label:"Alegreya Sans SC","Gill Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--stone);color:var(--parch);font-family:var(--f-body);font-size:17px;line-height:1.6;
  background-image:radial-gradient(ellipse at top,#2c2218 0%,var(--stone) 60%);min-height:100%}
.wrap{max-width:1040px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{text-align:center;padding:8px 0 18px}
.eyebrow{font-family:var(--f-label);letter-spacing:.14em;color:var(--sky-light);font-size:14px}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,6vw,52px);line-height:1.1;margin:6px 0 4px;color:var(--gold);
  text-shadow:0 2px 0 #000,0 0 18px rgba(210,173,85,.25);text-wrap:balance}
.sub{color:#cdbb92;max-width:62ch;margin:0 auto;font-style:italic}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.badge{font-family:var(--f-label);font-size:13px;letter-spacing:.06em;padding:3px 10px;border:1px solid var(--gold-dim);border-radius:3px;color:var(--gold);background:rgba(0,0,0,.25)}
.badge.sky{border-color:var(--sky);color:var(--sky-light)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--stone)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--stone);padding-top:6px;margin:0 -2px}
.lvlbar{display:flex;align-items:center;gap:10px;padding:4px 8px 2px}
.lvlbar label{font-family:var(--f-label);letter-spacing:.08em;font-size:13px;color:var(--sky-light);white-space:nowrap}
.lvlbar input{flex:1;accent-color:var(--gold);min-width:0}
.lvlbar .lvl{color:var(--gold);font-size:26px}
.lvlbar .stp{font-family:var(--f-label);font-size:14px;color:var(--parch);background:var(--stone-2);border:1px solid var(--gold-dim);border-radius:3px;width:30px;height:30px;cursor:pointer}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;margin:0 0 18px}
.glance>div{border:1px solid var(--parch-edge);border-radius:3px;padding:8px 12px;background:rgba(255,255,255,.035);min-width:0}
.glance .k{display:block;margin-bottom:2px}
.glance b{color:var(--title)}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:6;font-family:var(--f-label);font-size:13px;letter-spacing:.05em;background:var(--leather);color:var(--gold);border:1px solid var(--gold-dim);border-radius:3px;padding:7px 11px;cursor:pointer}
.mapctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mapctl select{font:inherit;font-size:15px;padding:5px 8px;background:var(--parch-2);color:var(--ink);border:1px solid var(--parch-edge);border-radius:3px}
.map{border:1px solid var(--parch-edge);border-radius:3px;background:#2a2116;padding:0;overflow:hidden}
.map svg{width:100%;height:auto;max-height:84vh;display:block;-webkit-user-select:none;user-select:none}
.zone{cursor:pointer}
.zone rect{fill:rgba(24,17,8,.78);stroke:#c9a45c;stroke-width:.6}
.zone.ally rect{stroke:#7fb2e5}
.zone.horde rect{stroke:#ec7d6f}
.zone.neutral rect{stroke:#e8d9a8}
.zone.new rect{stroke:var(--sky);stroke-dasharray:2 1.2}
.zone.now rect{fill:rgba(44,78,18,.92);stroke:#a8ea62;stroke-width:1}
.zone.pet rect{stroke:var(--gold);stroke-width:1.2}
.zone.dim{opacity:.5}
.zone.sel rect{stroke:#fff;stroke-width:1.1}
.zone text{fill:#f1e4c0;font-family:var(--f-label);text-anchor:middle;pointer-events:none}
.zone text.nm{font-size:6.4px}
.zone text.lv{fill:#d7c08e;font-size:5.2px}
.zone text.pt{fill:var(--gold);font-size:5px}
#mapSvg.zoomed{touch-action:none;cursor:grab}
.lay{font-family:var(--f-label);font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.lay input{accent-color:var(--title)}
.map .hit{fill:transparent;stroke:transparent}
.map .route polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.map .route .hit{stroke:transparent;stroke-width:7;cursor:pointer}
.map .route .halo{stroke:rgba(255,246,222,.6);stroke-width:2.6}
.map .route .ln{stroke-width:1.3;stroke-dasharray:3 2}
.map .route.boat .ln{stroke:#1f5f8c}
.map .route.zeppelin .ln{stroke:#9a3320}
.map .route.air .ln{stroke:#6a3fa0}
.map .stop circle{fill:#e8b45e;stroke:#2a1a04;stroke-width:.7}
.map .stop text{fill:#241707;font-family:var(--f-label);font-size:6px;font-weight:700;text-anchor:middle;pointer-events:none}
.map .dng,.map .place{cursor:pointer}
.map .dng circle:not(.hit){fill:#b77cf0;stroke:#fff;stroke-width:.8}
.map .place circle:not(.hit){fill:#7fb2e5;stroke:#10202e;stroke-width:.7}
.map .place.H circle:not(.hit){fill:#ec7d6f}
.map .place.N circle:not(.hit){fill:#f6dd8f}
.map .place.cap path{fill:#7fb2e5;stroke:#0c1a26;stroke-width:.8}
.map .place.cap.H path{fill:#ec7d6f}
.map .place.cap.N path{fill:#f6dd8f}
.map .place.cap text{fill:#fff3d6;font-family:var(--f-label);font-size:6px;paint-order:stroke;stroke:#1a1006;stroke-width:1.6px;stroke-linejoin:round;pointer-events:none}
.mapcredit{font-size:13px;color:var(--ink-soft);margin:4px 2px 0}
.maplegend{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--ink-soft)}
.maplegend i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:4px;border:1px solid #4d3c26}
.count{display:flex;justify-content:center;gap:10px;margin-top:16px}
.cd{min-width:64px;padding:6px 8px;border:1px solid var(--gold-dim);border-radius:3px;background:rgba(0,0,0,.35);text-align:center}
.cd b{display:block;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.cd span{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;color:#cdbb92}
.cdnote{font-family:var(--f-label);font-size:13px;letter-spacing:.04em;color:var(--sky-light);margin:8px 0 0;text-align:center}
.count.live .cd b{color:#9fe05c}
.tabs-scroll{overflow-x:auto;scrollbar-width:none;margin-top:8px;border-bottom:3px solid var(--gold-dim);box-shadow:0 10px 14px -10px rgba(0,0,0,.95)}
.tabs-scroll::-webkit-scrollbar{display:none}
.secsel{display:none;align-items:center;gap:8px;padding:2px 8px 8px}
.secsel label{font-family:var(--f-label);letter-spacing:.08em;font-size:13px;color:var(--sky-light)}
.secsel select{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 10px;background:var(--stone-2);color:var(--parch);border:1px solid var(--gold-dim);border-radius:3px}
.mapzoom{display:flex;gap:6px;margin-left:auto}
.mapzoom button{font-family:var(--f-label);font-size:15px;width:36px;height:36px;border:1px solid var(--parch-edge);background:var(--parch-2);color:var(--ink);border-radius:3px;cursor:pointer}
.mapzoom button.wide{width:auto;padding:0 10px}
@media (max-width:640px){
  .tabs-scroll{display:none}
  .secsel{display:flex}
  .bar{margin:0 -4px}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:14px}
  .glance>div{padding:6px 8px;font-size:14px;line-height:1.4}
  .glance>div:last-child{grid-column:1/-1}
  table{font-size:14px}
  th,td{padding:6px 7px}
  h2{font-size:24px}
  h3{font-size:19px}
  .lede{font-size:16.5px}
  .page{padding:16px 12px 22px}
  .lvlbar .lvl{font-size:22px}
  .box{padding:12px 12px}
  .medal .pts{width:32px;height:32px;font-size:14px}
  .totop{padding:6px 9px;font-size:12px}
  .chips{gap:5px}
  .chip{padding:6px 10px;font-size:13px}
}
/* Folder tabs: one strip on a gold base line (the frame's top edge). The selected tab
   rises, gets a gold top edge and joins the page; the others sit darker behind it. */
nav.tabs{display:flex;gap:3px;min-width:max-content;padding:0 6px;margin-bottom:-3px;align-items:flex-end}
nav.tabs button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  font-family:var(--f-label);font-weight:500;font-size:16px;letter-spacing:.05em;color:#b9a47a;
  background:linear-gradient(#2b2219,#18120d);border:1px solid #5a4a2c;border-bottom:3px solid var(--gold-dim);
  border-radius:8px 8px 0 0;padding:8px 16px 7px;margin-top:4px;cursor:pointer;position:relative;
  transition:color .15s,background-color .15s}
@media (hover:hover){nav.tabs button:hover{color:#f1e4c0;background:linear-gradient(#3a2d20,#221a13)}}
nav.tabs button[aria-selected="true"]{color:#ffd77a;background:var(--leather);border-color:var(--gold);
  border-bottom-color:var(--leather);margin-top:0;padding-top:11px;box-shadow:inset 0 3px 0 var(--gold);z-index:1}
nav.tabs button:focus{outline:none}
nav.tabs button:focus-visible{box-shadow:inset 0 0 0 2px var(--sky-light)}
nav.tabs button[aria-selected="true"]:focus-visible{box-shadow:inset 0 3px 0 var(--gold),inset 0 0 0 2px var(--sky-light)}
.frame{border:3px solid var(--gold-dim);outline:1px solid #000;border-radius:4px;background:var(--leather);padding:6px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.page{--parch:#1f1812;--parch-2:#2c2219;--parch-edge:#4d3c26;--ink:#e9dbb7;--ink-soft:#b9a47a;--title:#e8b45e;
  --q-green:#62d24c;--q-blue:#79b2ff;--q-purple:#c08cf5;--sky:#4f9cc4;
  background:var(--parch);color:var(--ink);border:1px solid var(--parch-edge);padding:22px clamp(16px,3vw,34px) 30px;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(232,180,94,.06),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.35),transparent 60%)}
section[role="tabpanel"]{display:flex;flex-direction:column;gap:22px}
h2{font-family:var(--f-display);font-weight:400;color:var(--title);font-size:28px;margin:0;line-height:1.2;text-wrap:balance}
h3{font-family:var(--f-display);font-weight:400;color:var(--title);font-size:21px;margin:0 0 6px;text-wrap:balance}
h4{font-family:var(--f-label);font-size:15px;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 4px}
p{margin:0;max-width:68ch}
ul{margin:0;padding-left:1.2em}
li+li{margin-top:4px}
.lede{font-size:18px;max-width:70ch}
.rule{height:12px;background:radial-gradient(circle,var(--gold-dim) 0 3px,transparent 4px) center/100% 12px no-repeat,linear-gradient(var(--gold-dim),var(--gold-dim)) center/100% 1px no-repeat;opacity:.7}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.grid2>*,.grid3>*{min-width:0}
.box{border:1px solid var(--parch-edge);background:rgba(255,255,255,.035);border-radius:3px;padding:14px 16px}
.note{border-left:4px solid var(--sky);border-radius:0;background:rgba(79,156,196,.12);padding:10px 14px;font-size:15.5px}
.warn{border-left-color:#c0563f;background:rgba(192,86,63,.12)}
.k{font-family:var(--f-label);letter-spacing:.05em;color:var(--ink-soft);font-size:14px}
.num{font-variant-numeric:tabular-nums}
.spell{color:var(--q-blue);font-weight:500}
.new{font-family:var(--f-label);font-size:12px;letter-spacing:.06em;background:var(--sky);color:#fff;padding:1px 6px;border-radius:2px;vertical-align:2px;margin-left:4px}
.tbl{overflow-x:auto;border:1px solid var(--parch-edge);border-radius:3px}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th{font-family:var(--f-label);font-weight:700;letter-spacing:.05em;text-align:left;background:var(--parch-2);color:var(--ink-soft);padding:8px 10px;font-size:14px;white-space:nowrap}
td{padding:7px 10px;border-top:1px solid rgba(160,130,70,.22);vertical-align:top}
tr.dim td{opacity:.38}
tr.hit td{background:rgba(79,156,196,.18)}
.q-g{color:var(--q-green);font-weight:500}.q-b{color:var(--q-blue);font-weight:500}.q-p{color:var(--q-purple);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--f-label);font-size:14px;letter-spacing:.04em;padding:5px 12px;border:1px solid var(--gold-dim);background:var(--parch-2);color:var(--ink);border-radius:3px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--title);color:#241707;border-color:var(--title)}
.chip:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.spec{display:flex;flex-direction:column;gap:12px}
.medals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}
.medal{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--parch-edge);padding:10px;border-radius:3px;background:rgba(255,255,255,.035)}
.medal .pts{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:16px;color:#3a2a06;
  background:radial-gradient(circle at 35% 30%,#f6dd8f,#c79a34 70%,#8c6a1f);border:1px solid #6b4f14}
.medal div{min-width:0}
.rot{counter-reset:s;list-style:none;padding:0;display:grid;gap:5px}
.rot li{counter-increment:s;padding-left:30px;position:relative;margin:0}
.rot li::before{content:counter(s);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--parch);font-family:var(--f-label);font-size:13px;display:grid;place-items:center}
.slider{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.slider input{flex:1 1 220px;accent-color:var(--title)}
.lvl{font-family:var(--f-display);font-size:30px;color:var(--title);min-width:2.2ch;text-align:right}
.route{display:grid;gap:8px}
.leg{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:start;padding:10px 12px;border:1px solid var(--parch-edge);border-radius:3px;background:rgba(255,255,255,.03)}
.leg.on{border-color:var(--sky);background:rgba(79,156,196,.16)}
.leg .r{font-family:var(--f-display);color:var(--title);font-size:18px}
.leg>div{min-width:0}
.check{list-style:none;padding:0;display:grid;gap:6px}
.check li{margin:0}
.check label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:6px 8px;border-radius:3px}
@media (hover:hover){.check label:hover{background:rgba(255,255,255,.05)}}
.check input{margin-top:5px;accent-color:var(--title);width:17px;height:17px;flex:none}
.check input:checked+span{text-decoration:line-through;color:var(--ink-soft)}
.prog{height:10px;background:var(--parch-2);border:1px solid var(--parch-edge);border-radius:6px;overflow:hidden}
.prog>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),#5fb0d6);transition:width .3s}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px}
pre{background:#120d09;color:#f3e3bb;border:1px solid var(--parch-edge);padding:10px 12px;border-radius:3px;overflow-x:auto;margin:6px 0 0;line-height:1.5}
.btn{font-family:var(--f-label);font-size:13px;letter-spacing:.05em;border:1px solid var(--gold-dim);background:var(--parch-2);color:var(--ink);padding:3px 10px;border-radius:3px;cursor:pointer}
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
footer{margin-top:22px;color:#b9a77d;font-size:14.5px}
footer a{color:var(--sky-light)}
footer ul{padding-left:1.1em;columns:2 280px;column-gap:28px}
a{color:var(--q-blue)}
@media (max-width:520px){.leg{grid-template-columns:1fr;gap:4px}body{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- multi-class additions ---------- */
.small{font-size:15px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.search{flex:1 1 220px;font:inherit;padding:6px 10px;border:1px solid var(--parch-edge);border-radius:3px;background:var(--parch-2);color:var(--ink)}
.tbl.flat{border:none}
.charbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:12px}
.charname{font-family:var(--f-label);letter-spacing:.06em;font-size:16px;color:var(--parch)}
.cname{color:var(--cc,var(--gold));font-family:var(--f-label);letter-spacing:.04em;text-shadow:0 1px 0 #000}
.lvtag{display:inline-block;min-width:2.4ch;margin-right:8px;padding:0 5px;border:1px solid var(--parch-edge);border-radius:3px;font-family:var(--f-label);font-size:13px;color:var(--ink-soft);text-align:center}
.petctl{display:inline-flex;align-items:center;gap:6px}
.maplegend .lg-now{background:#2c4e12;border-color:#a8ea62}
.maplegend .lg-ally{background:#18110a;border-color:#7fb2e5}
.maplegend .lg-horde{background:#18110a;border-color:#ec7d6f}
.maplegend .lg-cont{background:#18110a;border-color:#c9a45c}
.maplegend .lg-new{background:#18110a;border:1px dashed #4f9cc4}
.maplegend .lg-pet{background:#18110a;border:2px solid #d2ad55}
.maplegend .lg-stop{background:#e8b45e;border-radius:50%;border-color:#000}
.maplegend .lg-dng{background:#b77cf0;border-radius:50%;border-color:#fff}
.maplegend .lg-city{background:#7fb2e5;transform:rotate(45deg);width:9px;height:9px}
.maplegend .lg-fp{background:#f6dd8f;border-radius:50%;width:9px;height:9px}
.maplegend .lg-route{width:18px;height:0;border:0;border-top:2px dashed #1f5f8c;border-radius:0;background:none}
.chip.cchip{border-left:4px solid var(--cc)}
.chip.cchip[aria-pressed="true"]{background:var(--cc);border-color:var(--cc);color:#1a1209}
.btn.big{font-size:16px;padding:9px 22px;background:linear-gradient(#e8c26a,#b8902f);color:#241707;border-color:#6b4f14}
.btn.big:disabled{opacity:.45;cursor:not-allowed}
.btn{min-height:32px}

/* Character picker: a full-screen parchment panel over the stone background */
body.modal{overflow:hidden}
.picker{position:fixed;inset:0;z-index:20;background:rgba(10,8,6,.86);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.pk-inner{--parch:#1f1812;--parch-2:#2c2219;--parch-edge:#4d3c26;--ink:#e9dbb7;--ink-soft:#b9a47a;--title:#e8b45e;
  width:100%;max-width:1000px;background:var(--parch);color:var(--ink);border:3px solid var(--gold-dim);outline:1px solid #000;border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.7);padding:20px clamp(14px,3vw,30px) 0;display:flex;flex-direction:column;gap:14px;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(232,180,94,.08),transparent 55%)}
.pk-head{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.pk-head h2{font-size:clamp(26px,5vw,36px);color:var(--gold);text-shadow:0 2px 0 #000}
.pk-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
#pkMain,#pkQuizView{display:flex;flex-direction:column;gap:10px}
#pkMain[hidden],#pkQuizView[hidden]{display:none}
.pk-factions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.pk-answers{display:grid;gap:8px}
.pk-card{font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:44px;
  border:1px solid var(--parch-edge);border-radius:3px;background:rgba(255,255,255,.035);padding:12px 14px;line-height:1.45}
.pk-card:hover{border-color:var(--gold-dim);background:rgba(255,255,255,.06)}
.pk-card:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px}
.pk-card[aria-pressed="true"]{border-color:var(--gold);background:rgba(232,180,94,.14);box-shadow:inset 0 0 0 1px var(--gold)}
.pk-card>b{font-family:var(--f-display);font-weight:400;font-size:21px;color:var(--title)}
.pk-card.cls{border-top:4px solid var(--cc)}
.pk-card.cls>b.cname{font-family:var(--f-display);font-size:22px}
.pk-card.cant{opacity:.5}
.pk-card.fac b{font-size:26px}
.pk-card.fac-alliance{border-left:5px solid #3f72b8}
.pk-card.fac-horde{border-left:5px solid #b8433a}
.pk-card .fit{font-style:italic;color:var(--ink-soft)}
.pk-chips{display:flex;flex-wrap:wrap;gap:4px}
.pk-chips i{font-style:normal;font-family:var(--f-label);font-size:12.5px;letter-spacing:.04em;padding:1px 7px;border:1px solid var(--parch-edge);border-radius:2px;color:var(--cc,var(--ink-soft))}
.pk-flag{font-family:var(--f-label);font-size:12.5px;color:#e9a08f}
.pk-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:4px calc(-1 * clamp(14px,3vw,30px)) 0;padding:12px clamp(14px,3vw,30px) max(12px,env(safe-area-inset-bottom,0px));
  background:#18120d;border-top:1px solid var(--gold-dim)}
@media (max-width:640px){
  .pk-card{padding:10px 12px}
  .pk-card>b{font-size:19px}
  .pk-foot .btn.big{flex:1}
}

/* ---------- tablets ----------
   Made for a tablet kept beside the PC while playing: every control easy to hit with a
   finger, every tab visible, and landscape uses the whole screen. */
button,.chip,label,select,summary{touch-action:manipulation}
.mapgrid{display:grid;gap:12px}
.mapcol,.infocol{min-width:0;display:flex;flex-direction:column;gap:8px}
@media (min-width:641px){
  /* all tabs visible: wrap onto a second row instead of scrolling off-screen */
  .tabs-scroll{overflow:visible}
  .frame{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
  nav.tabs{min-width:0}
}
@media (min-width:641px) and (max-width:899px){
  /* portrait tablets: two even rows of six tabs */
  nav.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  nav.tabs button{padding-left:4px;padding-right:4px;font-size:15px;letter-spacing:.03em;white-space:nowrap}
}
@media (min-width:900px){
  /* landscape: all twelve tabs share one row */
  nav.tabs button{flex:1 1 auto;padding-left:6px;padding-right:6px;font-size:15px;letter-spacing:.04em;white-space:nowrap}
}
@media (min-width:1180px){
  nav.tabs button{font-size:16px;padding-left:10px;padding-right:10px}
}
@media (min-width:900px){
  .glance{grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
}
@media (min-width:1100px){
  .wrap{max-width:1280px}
}
/* landscape tablet or desktop: zone details beside the map, so a tap shows info without scrolling */
@media (min-width:900px) and (orientation:landscape){
  .mapgrid{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);align-items:start}
  .infocol{position:sticky;top:calc(var(--barh,100px) + 10px);max-height:calc(100vh - var(--barh,100px) - 20px);overflow-y:auto}
  .map svg{max-height:calc(100vh - var(--barh,100px) - 30px)}
}
/* touch screens (tablets and phones): finger-sized controls */
@media (pointer:coarse){
  .lvlbar{gap:8px}
  .lvlbar .stp{width:44px;height:44px;font-size:20px}
  .lvlbar input[type=range]{height:44px}
  nav.tabs button{min-height:46px}
  nav.tabs button[aria-selected="true"]{min-height:50px}
  .chip{min-height:40px;padding:8px 14px}
  .btn{min-height:40px;padding:6px 14px}
  .mapzoom button{width:44px;height:44px;font-size:18px}
  .mapzoom button.wide{width:auto;padding:0 14px}
  .mapctl select,.secsel select{min-height:44px}
  .lay{min-height:40px;padding:0 6px}
  .lay input{width:20px;height:20px}
  .check label{min-height:44px;padding:9px 10px;align-items:center}
  .check input{width:22px;height:22px;margin-top:0}
  .totop{padding:10px 14px;font-size:14px}
}

/* ---------- players, modes, level-up card ---------- */
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:4px 8px 2px}
.ctl .lvlbar{flex:1 1 100%;order:3;padding:0}
.players{display:flex;gap:6px;flex:1 1 auto;min-width:0}
.pchip{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-width:0;max-width:260px;flex:0 1 auto;padding:4px 12px;min-height:44px;border:1px solid #5a4a2c;border-radius:5px;background:var(--stone-2);
  color:var(--parch);font-family:var(--f-label);text-align:left;line-height:1.2;cursor:pointer}
.pchip b{font-size:15px;letter-spacing:.04em;color:#e9dbb7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pchip span{font-size:13px;letter-spacing:.03em;color:#b9a47a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pchip[aria-pressed="true"]{border-color:var(--gold);background:var(--leather);box-shadow:inset 0 -3px 0 var(--cc,var(--gold))}
.pchip[aria-pressed="true"] b{color:#ffd77a}
.pchip.add{border-style:dashed;border-color:var(--sky)}
.pchip.add b{color:var(--sky-light)}
.pchip:focus{outline:none}
.pchip:focus-visible{outline:2px solid var(--sky-light);outline-offset:1px}
.modes{display:flex;gap:6px;flex:0 0 auto}
.mode{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font-family:var(--f-label);font-size:14px;letter-spacing:.05em;
  padding:6px 12px;min-height:44px;border:1px solid var(--gold-dim);border-radius:5px;background:transparent;color:#cdbb92;cursor:pointer}
.mode[aria-pressed="true"]{background:linear-gradient(#e8c26a,#b8902f);color:#241707;border-color:#6b4f14}
.mode.unavail{opacity:.6}
.mode .short{display:none}
@media (max-width:640px){
  .mode .long{display:none}
  .mode .short{display:inline}
  .mode{padding:6px 10px}
  .pchip{padding:4px 8px;max-width:none;flex:1 1 0}
  .players{flex:1 1 0}
  .modes{gap:4px}
  .mode{padding:6px 8px;font-size:13px}
}
@media (min-width:1000px){
  .ctl{flex-wrap:nowrap}
  .ctl .lvlbar{order:0;flex:1 1 auto;min-width:0}
}
@media (min-width:1000px) and (max-width:1199px){
  .ctl .lvlbar label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pchip{max-width:190px}
}
/* play mode: no big title or countdown, bigger at-a-glance cards */
body.play header.top{display:none}
body.play .wrap{padding-top:8px}
body.play .glance>div{padding:10px 14px}
body.play .glance .k{font-size:15px}
body.play .glance b{font-size:20px;line-height:1.3}
body.play footer{display:none}
.lvlcard{position:fixed;inset:0;z-index:25;background:rgba(10,8,6,.72);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.lu-card{width:100%;max-width:540px;max-height:86vh;overflow-y:auto;background:#1f1812;color:#e9dbb7;border:3px solid var(--gold);outline:1px solid #000;
  border-radius:6px;padding:22px 24px 20px;box-shadow:0 20px 60px rgba(0,0,0,.85);animation:luIn .25s ease-out}
.lu-card .k{margin:0;color:#b9a47a}
.lu-card h2{font-family:var(--f-display);font-weight:400;color:var(--gold);font-size:36px;margin:2px 0 6px;text-shadow:0 2px 0 #000}
.lu-card ul{margin:6px 0 18px;padding-left:1.2em;font-size:18px;line-height:1.45}
.lu-card li+li{margin-top:8px}
.lu-card b{color:#ffd77a}
.lu-card .btn.big{width:100%;min-height:48px}
@keyframes luIn{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;width:max-content;max-width:min(92vw,560px);
  background:var(--leather);color:var(--parch);border:1px solid var(--gold-dim);border-radius:5px;padding:12px 16px;font-size:15.5px;box-shadow:0 8px 24px rgba(0,0,0,.7)}
.pk-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pk-name input{font:inherit;font-size:17px;padding:8px 12px;min-height:44px;width:min(260px,70vw);background:var(--parch-2);color:var(--ink);
  border:1px solid var(--parch-edge);border-radius:4px}

/* ---------- news ---------- */
.newsbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:8px 10px 8px 12px;border:1px solid var(--parch-edge);
  border-left:4px solid var(--sky);border-radius:3px;background:rgba(79,156,196,.08)}
.newsbar .nw-text{flex:1 1 260px;min-width:0;line-height:1.35}
.newsbar .nw-text b{color:var(--ink)}
.newsbar .btn{white-space:nowrap}
.nw-type{display:inline-block;font-family:var(--f-label);font-size:12.5px;letter-spacing:.06em;padding:2px 8px;border-radius:3px;
  background:#2c4a5e;color:#d8ecf7;white-space:nowrap}
.nw-type.t-launch{background:#6b5016;color:#ffe3a1}
.nw-type.t-maintenance,.nw-type.t-issue{background:#6b2a1c;color:#ffd0c4}
.nw-type.t-notes{background:#2e4d1d;color:#d6f2bf}
.nw-type.t-hotfix{background:#4a2f63;color:#ead8ff}
.nw-badge{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;background:var(--title);color:#241707;font-size:12px}
.news-card{max-width:720px}
.nw-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nw-head h2{font-size:30px}
.nw-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.nw-item{border:1px solid #4d3c26;border-radius:4px;padding:12px 14px;background:rgba(255,255,255,.03)}
.nw-item h3{font-family:var(--f-display);font-weight:400;color:#e8b45e;font-size:20px;margin:6px 0 4px}
.nw-item p{margin:4px 0;font-size:16.5px;line-height:1.5}
.nw-item a{color:var(--sky-light);font-family:var(--f-label);letter-spacing:.04em;font-size:15px;display:inline-block;padding:6px 0}
.nw-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nw-when{color:#ffd77a;font-family:var(--f-label);letter-spacing:.03em}
.nw-guide{color:#b9a47a}
body.play .newsbar{margin-bottom:10px}

/* after launch: the countdown becomes one gold line */
.cdnote.live{display:table;max-width:min(92vw,720px);margin:14px auto 0;padding:6px 14px;border:1px solid var(--gold-dim);border-radius:4px;background:rgba(0,0,0,.3);
  font-size:15px;color:#e9dbb7}
.cdnote.live b{color:#9fe05c;letter-spacing:.06em}
.badge.live{border-color:#5f9b34;color:#b6ec85}

/* ---------- search ---------- */
.mode.icon{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;min-width:44px}
.srdlg{align-items:flex-start}
.search-card{max-width:720px;margin-top:max(4vh,env(safe-area-inset-top,0px));display:flex;flex-direction:column;max-height:88vh;padding:16px 18px}
.sr-head{display:flex;gap:8px;align-items:center}
.sr-head input{flex:1;min-width:0;font:inherit;font-size:18px;padding:10px 12px;min-height:48px;background:#2c2219;color:#f1e4c0;
  border:1px solid var(--gold-dim);border-radius:5px}
.sr-head input:focus{outline:2px solid var(--gold);outline-offset:1px}
#srHint{margin:8px 2px}
.sr-results{overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0}
.sr-hit{-webkit-appearance:none;appearance:none;flex:none;display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;padding:10px 12px;min-height:48px;
  border:1px solid #4d3c26;border-radius:4px;background:rgba(255,255,255,.03);color:#e9dbb7;font:inherit;font-size:16px;line-height:1.4;cursor:pointer}
.sr-hit:focus-visible{outline:2px solid var(--sky-light)}
@media (hover:hover){.sr-hit:hover{border-color:var(--gold-dim);background:rgba(232,180,94,.07)}}
.sr-tab{font-family:var(--f-label);font-size:13px;letter-spacing:.05em;color:#b9a47a}
.sr-text{overflow-wrap:anywhere}
.sr-hit mark{background:rgba(232,180,94,.35);color:#fff3d6;border-radius:2px;padding:0 1px}
.sr-flash{animation:srFlash 2.4s ease-out}
@keyframes srFlash{0%,25%{box-shadow:0 0 0 3px var(--gold);background-color:rgba(232,180,94,.22)}100%{box-shadow:0 0 0 3px transparent;background-color:transparent}}
[id],.box,li,tr,p,h3,h4{scroll-margin-top:calc(var(--barh,100px) + 16px)}
@media (max-width:640px){
  .search-card{margin-top:0;max-height:none;height:100%;border-radius:0}
  .srdlg{padding:0}
}

/* ---------- addons ---------- */
.addon{display:flex;flex-direction:column;gap:6px}
.addon-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.addon-top h4{font-family:var(--f-display);font-size:19px;letter-spacing:0;color:var(--title);margin:0}
.addon-top h4 a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold-dim);text-underline-offset:3px}
.addon p{margin:0}
.addon .k a{color:var(--sky-light)}

/* ---------- official icons ---------- */
.ico{display:inline-block;vertical-align:middle;border-radius:5px;border:1px solid #000;box-shadow:0 0 0 1px var(--gold-dim);object-fit:cover;flex:none}
.ico-xs{width:20px;height:20px;margin-right:6px;border-radius:3px}
.ico-s{width:28px;height:28px;margin-right:4px}
.ico-m{width:30px;height:30px;margin-right:4px}
.ico-l{width:40px;height:40px;margin-right:10px;border-radius:6px}
.pk-title{display:flex;align-items:center}
.pchip{flex-direction:row;align-items:center;gap:8px}
.pc-txt{display:flex;flex-direction:column;min-width:0}
.pchip .ico-s{margin-right:0}
.charname .ico-m{margin-right:6px}
.chip.cchip{display:inline-flex;align-items:center}
@media (max-width:640px){.pchip .ico-s{width:24px;height:24px}.ico-l{width:34px;height:34px}}