:root{
  --metal-0:#15171a;--metal-1:#1e2125;--metal-2:#2a2e33;--metal-3:#3a3f46;--rivet:#5b6169;
  --gold:#d2a94a;--gold-2:#f0cf7e;--ink:#3a2a14;--ink-2:#5f4a28;
  --parch:#ecdcb2;--parch-2:#d9c48f;--parch-3:#bfa569;
  --text:#e6e2d6;--dim:#a9a899;--ok:#8fcf8a;--warn:#e0a458;
  --classic:#d2a94a;--emu:#7fb4d6;--rumor:#c88fd0;--hunch:#cfa070;
  --glass-a:.68;--glass-bg:rgba(28,22,15,var(--glass-a));--glass-bg-chrome:rgba(10,24,20,calc(var(--glass-a) + .08));--glass-blur:blur(20px) saturate(1.35);--glass-edge:1px solid rgba(255,236,200,.10);--glass-hi:inset 0 1px 0 rgba(255,236,200,.06);--glass-shadow:0 12px 32px rgba(0,0,0,.35);   /* T8 glass tokens: the one glass for shell panels, hover lists, cards */
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--metal-0);color:var(--text);font:14px/1.4 var(--sans);overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.app{display:grid;grid-template-columns:minmax(0,1fr) 316px;height:100vh;height:100dvh;transition:grid-template-columns .2s}
.app.tucked{grid-template-columns:minmax(0,1fr) 0}

/* ---------- dark metal panels ---------- */
.answer{background:linear-gradient(180deg,var(--metal-2),var(--metal-1) 40%,var(--metal-0));position:relative;overflow:hidden;min-height:0}
.answer{overflow:visible;z-index:3}
.app.tucked .answer-body{visibility:hidden}
.answer{border-left:1px solid #000;box-shadow:inset 1px 0 0 var(--metal-3)}
.blk{padding:10px 0 12px;border-bottom:1px solid #0008;box-shadow:0 1px 0 #ffffff0a}
.blk.foot{border:0;box-shadow:none}
.lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;display:block;font-weight:600}
.you{margin:6px 0 12px;color:var(--text);font-size:13px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.rowlbl{font-size:12.5px;color:var(--dim)}
#pole-lbl{margin:12px 0 6px}
.search{position:relative}
input[type=search],input[type=number]{background:#0b0c0e;border:1px solid var(--metal-3);border-radius:4px;padding:8px 28px 8px 10px;width:100%;color:var(--text)}
input[type=search]::placeholder{color:#7d7d70}
.x{position:absolute;right:3px;top:3px;width:28px;height:28px;background:none;border:0;color:var(--dim);font-size:18px;line-height:1}
.results{list-style:none;margin:6px 0 0;padding:0;max-height:190px;overflow:auto}
.results:empty{display:none}
.results li button{display:flex;width:100%;gap:8px;align-items:center;text-align:left;padding:6px 8px;border:0;border-radius:4px;background:transparent}
.results li button:hover,.results li button[aria-selected=true]{background:#ffffff12}
.results .rn{font-weight:600;font-size:13px}
.results .rm{color:var(--dim);font-size:11.5px}
.results .none{padding:6px 8px;color:var(--dim);font-size:12.5px}
.stepper{display:flex;border:1px solid var(--metal-3);border-radius:4px;overflow:hidden;background:#0b0c0e}
.stepper button{width:32px;background:var(--metal-2);border:0;font-size:16px}
.stepper button:hover{background:var(--metal-3)}
.stepper input{width:54px;padding:6px 2px;text-align:center;border:0;border-radius:0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{padding:4px 9px;border:1px solid var(--metal-3);background:var(--metal-1);border-radius:99px;font-size:12px;color:var(--dim)}
.chip[aria-pressed=true]{border-color:var(--gold);color:var(--gold-2);background:#d2a94a1c}
.seg{display:flex;flex-direction:column;gap:5px}
.seg button{text-align:left;padding:7px 10px;border:1px solid var(--metal-3);background:var(--metal-1);border-radius:4px;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.seg.two{flex-direction:row;margin-bottom:6px}.seg.two button{flex:1;justify-content:center}
.seg button small{color:var(--dim);font-size:11.5px}
.seg button[aria-checked=true]{border-color:var(--gold);background:#d2a94a1c;color:var(--gold-2)}
.layers{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
.layer{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;padding:3px 0;user-select:none}
.layer input{accent-color:var(--gold);margin:0}
.layer svg{width:16px;height:16px;flex:none}
.ghost{background:transparent;border:1px solid var(--metal-3);border-radius:4px;padding:6px 10px;color:var(--dim);font-size:12.5px}
.ghost:hover{color:var(--text);border-color:var(--rivet)}

/* ---------- the chart ---------- */
.stage{min-width:0;min-height:0;background:linear-gradient(135deg,var(--parch-2),var(--parch) 30%,var(--parch-3));padding:12px;position:relative}
.parch{position:absolute;inset:0;padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;background:
  radial-gradient(ellipse at 20% 10%,#f7ecc9aa,transparent 60%),
  linear-gradient(135deg,var(--parch-2),var(--parch) 30%,var(--parch-3))}
.viewport{position:relative;width:100%;flex:1;min-height:0;overflow:hidden;background:#17201a;cursor:grab;touch-action:none;
  border:2px solid var(--ink);outline-offset:-2px;border-radius:2px;
  box-shadow:0 0 0 3px var(--parch-3),0 0 0 4px var(--ink),0 6px 18px #0006,inset 0 0 22px #000a}
.viewport.drag{cursor:grabbing}
.world{position:absolute;left:0;top:0;width:5076px;height:3384px;transform-origin:0 0;will-change:transform}
.tiles{position:absolute;inset:0;overflow:hidden}
.tiles img{position:absolute;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.overlay{position:absolute;inset:0;width:5076px;height:3384px;pointer-events:none;z-index:5}
.overlay path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.road-under{stroke:#2a1c08;stroke-width:4.5px;opacity:.55}
.road{stroke:var(--gold-2);stroke-width:2px}
/* v1 org-frame: two street traces (gate, Doras); the one you came in by is the stronger line */
#roadg g[data-from]{opacity:.4}
#roads[data-arrive="gate"] #roadg g[data-from="gate"],#roads[data-arrive="npc-3310"] #roadg g[data-from="npc-3310"]{opacity:1}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #1a0f0299}
.pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* cartouche */
.cartouche{position:absolute;left:14px;top:14px;max-width:min(330px,60%);padding:9px 14px 10px;background:linear-gradient(180deg,#f2e5bf,#e1cd98);color:var(--ink);
  border:1px solid var(--ink);border-radius:3px;box-shadow:0 0 0 2px #e1cd98,0 0 0 3px var(--ink-2),0 4px 12px #0007;pointer-events:none}
.c-title{font:700 26px/1 var(--serif);letter-spacing:.04em;text-transform:uppercase}
.c-sub{font:italic 13px var(--serif);color:var(--ink-2);margin:2px 0 5px}
.c-base{font-size:11.5px;line-height:1.3;color:var(--ink-2);border-top:1px solid #5f4a2855;padding-top:5px}
.coords{position:absolute;left:14px;bottom:12px;font:11px ui-monospace,monospace;color:#f3e7c5;background:#14100a99;padding:2px 7px;border-radius:3px;pointer-events:none}
.zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;box-shadow:0 3px 10px #0008;border:1px solid #000}
.zoom button{width:38px;height:36px;background:linear-gradient(180deg,var(--metal-3),var(--metal-1));border:0;border-bottom:1px solid #000;font-size:19px;color:var(--gold-2)}
.zoom button:last-child{border-bottom:0;font-size:16px}
.zoom button:hover{background:var(--metal-3)}
.reopen{position:absolute;right:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;padding:14px 7px;background:linear-gradient(90deg,var(--metal-2),var(--metal-1));border:1px solid #000;border-right:0;border-radius:6px 0 0 6px;color:var(--gold-2);letter-spacing:.1em;font-size:12px;text-transform:uppercase}

/* pins */
.pin{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;padding:0;width:0;height:0;color:inherit}
.pin .gl{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--metal-3),var(--metal-1));border:2px solid var(--c,var(--gold));box-shadow:0 2px 6px #000a,0 0 0 1px #000}
.pin .gl svg{width:15px;height:15px;fill:none;stroke:var(--c,var(--gold));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pin.trainer{--c:#f0cf7e}.pin.supply{--c:#86c5e6}.pin.cook{--c:#e89a6a}.pin.inn{--c:#c8a8e8}.pin.gate{--c:#f0cf7e}
.pin:hover .gl,.pin.sel .gl{transform:scale(1.18);box-shadow:0 0 0 3px #f0cf7e66,0 2px 8px #000c}
.pin.sel .gl{background:var(--gold);}
.pin.sel .gl svg{stroke:var(--metal-0)}
.pin .num{position:absolute;left:5px;top:-24px;min-width:19px;height:19px;border-radius:50%;background:var(--gold-2);color:#1d1507;font:700 12px/19px var(--sans);text-align:center;border:1.5px solid #1d1507;box-shadow:0 1px 3px #000a}
.pin .nm{position:absolute;left:17px;top:-9px;white-space:nowrap;font:600 12.5px/1 var(--serif);color:var(--ink);background:#f0e3bce6;padding:3px 6px 3px;border-radius:3px;border:1px solid #5f4a2888;box-shadow:0 1px 3px #0006;pointer-events:none}
.pin .nm.hide{display:none}
.pin.key .gl{box-shadow:0 0 0 4px #f0cf7e55,0 0 14px 4px #f0cf7e66,0 2px 6px #000a}
.town{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;padding:0;width:0;height:0}
.town .tg{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:var(--parch);border:2px solid var(--ink);transform:rotate(45deg);box-shadow:0 1px 4px #000a}
.town.sel .tg{background:var(--gold-2)}
.town .tn{position:absolute;left:0;top:-44px;transform:translateX(-50%);white-space:nowrap;font:700 13px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#fbf2d4;text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;pointer-events:none}
.town.capital .tn{font-size:18px;top:-6px;color:#ffe3a0}
.region{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.region span{position:absolute;left:0;transform:translate(-50%,-50%);white-space:nowrap;font:italic 600 13px var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#fff3d0cc;text-shadow:0 0 3px #000,0 0 7px #000}
.tip{position:absolute;z-index:14;max-width:260px;pointer-events:none;background:#14100aee;color:#f3e7c5;border:1px solid var(--gold);border-radius:4px;padding:7px 10px;font-size:12.5px;box-shadow:0 4px 14px #000a}
.tip b{font:700 14px var(--serif);color:var(--gold-2);display:block}
.tip .t2{color:#cfc6aa}

/* ---------- answer ---------- */
.tuck{position:absolute;left:0;top:50%;transform:translate(-100%,-50%);z-index:5;width:20px;height:56px;border:1px solid #000;border-right:0;background:linear-gradient(90deg,var(--metal-3),var(--metal-1));color:var(--gold-2);border-radius:5px 0 0 5px;font-size:16px;padding:0;display:none}
.answer-body{padding:16px 18px 22px;height:100%;overflow:auto;width:316px}
.answer .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.answer h2{font:700 21px/1.2 var(--serif);margin:0 0 6px;color:#f4ecd4}
.answer .lead{color:var(--dim);font-size:13px;margin:0 0 14px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;padding:10px 0;border-top:1px solid #ffffff14}
.step:first-child{border-top:0}
.step>*:not(.n){grid-column:2}
.step .n{grid-row:1/span 6;width:26px;height:26px;border-radius:50%;background:var(--gold-2);color:#1d1507;font:700 14px/26px var(--sans);text-align:center;margin-top:1px}
.step.done .n{background:#2c3a2a;color:var(--ok);border:1px solid #4d6b4a}
.step .go.plain{font:700 15px/1.25 var(--serif);color:#f4ecd4}
.step button.go{all:unset;cursor:pointer;font:700 15px/1.25 var(--serif);color:#f4ecd4;border-bottom:1px dotted var(--gold);}
.step button.go:hover{color:var(--gold-2)}
.step button.go:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.step .where{font-size:12px;color:var(--dim)}
.step .what{font-size:13px;color:#d9d6c8;margin:0}
.badge{display:inline-block;font-size:10.5px;letter-spacing:.05em;padding:1px 6px;border-radius:99px;border:1px solid currentColor;margin-left:5px;vertical-align:1px;white-space:nowrap;font-weight:600;text-transform:uppercase}
.b-classic{color:var(--classic)}.b-emu{color:var(--emu)}.b-rumor{color:var(--rumor)}.b-hunch{color:var(--hunch)}.b-forever{color:var(--ok)}
.total{margin:10px 0 0;padding:9px 11px;border:1px solid #ffffff1f;border-radius:5px;background:#ffffff08;font-size:13px}
.total b{color:var(--gold-2)}
.note{font-size:12.5px;color:var(--dim);margin:12px 0 0}
.card .sub{color:var(--dim);font-size:13px;margin:-2px 0 10px}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px}
.card dt{color:var(--dim)}
.card dd{margin:0}
.card ul{margin:4px 0 0;padding-left:18px;font-size:13px}
.btnrow{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
.btn{padding:7px 12px;border-radius:4px;border:1px solid var(--gold);background:#d2a94a22;color:var(--gold-2);font-size:13px;font-weight:600}
.btn:hover{background:#d2a94a44}
.btn.quiet{border-color:var(--metal-3);background:transparent;color:var(--text);font-weight:400}
.how{margin-top:16px;border-top:1px solid #ffffff14;padding-top:10px;font-size:12px;color:var(--dim)}
.how summary{cursor:pointer;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:600}
.how ul{margin:8px 0 0;padding-left:16px}
.how li{margin:0 0 5px}
.how em{font-style:normal;color:var(--text)}
.fan{margin:10px 0 0;font-size:11px;color:#7d7d70}

@media (max-width:900px){
  .app,.app.tucked{grid-template-columns:1fr;grid-template-rows:minmax(260px,1fr) auto}
  .stage{padding:6px}
  .parch{padding:6px;gap:6px}
  .strip h1{display:none}
  .strip .search{flex-basis:100%;order:5}
  .drawer{left:0;right:0;width:auto}
  .cartouche{left:8px;top:8px;padding:6px 10px;max-width:70%}
  .c-title{font-size:19px}
  .c-sub{display:none}
  .c-base{font-size:10.5px}
  .zoom{right:8px;bottom:8px}
  .coords{display:none}
  .answer{border-left:0;border-top:1px solid #000;max-height:38vh}
  .app.tucked .answer{max-height:0;border:0}
  .answer-body{width:auto;padding:10px 14px 16px}
  .answer h2{font-size:17px}
  .answer .lead{margin-bottom:8px}
  .tuck{display:block;left:50%;top:0;transform:translate(-50%,-100%) rotate(90deg);width:20px;height:56px;border-radius:5px 0 0 5px;z-index:7}
  .reopen{writing-mode:horizontal-tb;right:50%;top:auto;bottom:0;transform:translateX(50%);padding:7px 16px;border-radius:6px 6px 0 0;border:1px solid #000;border-bottom:0}
  .pin .nm{font-size:12px}
}
@media (min-width:901px){.tuck{display:block}}

/* ---------- strip: profile, search, layers ---------- */
.strip{position:relative;z-index:15;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;background:linear-gradient(180deg,var(--metal-2),var(--metal-1));border:1px solid #000;border-radius:4px;box-shadow:inset 0 1px 0 var(--metal-3),0 3px 10px #0005}
.strip h1{font:700 17px/1 var(--serif);margin:0 6px 0 0;color:var(--gold-2);white-space:nowrap}
.sbtn{display:flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--metal-3);border-radius:4px;background:var(--metal-1);color:var(--text);font-size:13px;white-space:nowrap;max-width:100%}
.sbtn:hover,.sbtn[aria-expanded=true]{border-color:var(--gold);color:var(--gold-2)}
.sbtn i{font-style:normal;color:var(--gold);font-size:11px}
.at{padding:4px 10px;border-radius:99px;border:1px solid var(--gold);background:#d2a94a1c;color:var(--gold-2);font-size:12.5px;white-space:nowrap}
.strip .search{flex:1;min-width:180px;max-width:360px;margin-left:auto}
.strip input[type=search]{padding:6px 28px 6px 10px}
.strip .results{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;background:var(--metal-1);border:1px solid var(--metal-3);border-radius:4px;box-shadow:0 8px 20px #000a;z-index:14}
.strip .results:empty{display:none}
.drawer{position:absolute;left:10px;top:100%;margin-top:6px;width:300px;padding:6px 14px 10px;background:linear-gradient(180deg,var(--metal-2),var(--metal-1) 60%);border:1px solid #000;border-radius:4px;box-shadow:inset 0 1px 0 var(--metal-3),0 10px 26px #000b;z-index:13;max-height:calc(100vh - 90px);overflow:auto}
.drawer[hidden]{display:none}
.drawer-layers{left:auto;right:10px;width:250px;padding:12px 14px}

/* ---------- door extras ---------- */
.overlay path.pool{fill:#2b3530;fill-opacity:.5;stroke:#9fe0ff;stroke-opacity:.8;stroke-width:1.4px}
.overlay path.pool.sel{fill:#4aa8d4;fill-opacity:.55;stroke:#fff;stroke-width:2.6px}
.pin.water{--c:#9fe0ff}
.pin.start{--c:#f0cf7e}
.pin.start .gl{background:var(--gold);width:30px;height:30px;left:-15px;top:-15px}
.pin.start .gl svg{stroke:#1d1507;stroke-width:3;width:18px;height:18px}
.pin.start .nm{left:20px;top:-10px;font-size:13.5px}
.linkbtn{display:inline-block;margin-top:8px;text-decoration:none}
.road-copy{margin-top:6px;color:var(--dim)}
@media (prefers-reduced-motion:reduce){.app{transition:none}}

/* One board: two short lines below each icon. */
.step{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 17px;margin:0 0 17px;gap:4px}
.step .go,.step .what{margin:0;padding:0}.step .go{font-size:15px}.step .what{font-size:12px;line-height:1.4}
.step-icon{display:block;width:28px;height:28px;color:var(--gold)}.step-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.card-baseline{font-size:11px;color:var(--dim);margin:8px 0 20px}.answer h2{font-size:24px}.steps{margin-top:20px}

.item-icon{width:32px;height:32px;object-fit:cover;border:1px solid #8e784b;border-radius:3px;flex-shrink:0}.item-label{display:flex;align-items:center;gap:8px}.item-label .item-icon{width:28px;height:28px}.item-list{display:grid;gap:7px}.card dl{align-items:center;grid-template-columns:minmax(0,1fr) auto}.card dd{max-width:150px}.card dt{line-height:1.25}

.person-icons{display:flex;align-items:center;gap:8px;font-size:12px;margin:10px 0}.race-icon{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#152d31;color:#86b8b6}.race-icon.orc{background:#263722;color:#a2bb7c}.race-icon.goblin{background:#263824;color:#9fc676}.race-icon svg{fill:none;stroke:currentColor;stroke-width:1.5}.picture-slot{border:1px dashed #777463;height:90px;display:grid;place-items:center;color:var(--dim);font-size:12px;margin:12px 0 18px}.way{color:var(--gold-2);white-space:nowrap}

.pin.quest .gl{width:18px;height:23px;border-radius:4px;background:#d7b543}.pin.quest .nm{font-size:11px}

.mode-nav{display:flex;gap:5px;white-space:nowrap}.mode-nav a{text-decoration:none}.mode-nav [aria-current=page]{color:var(--gold-2);border-color:var(--gold)}
.fish-heading{display:flex;align-items:center;gap:10px}.fish-heading h2{font-size:22px;margin:0}.fish-heading .item-icon{width:48px;height:48px}.fish-result{border-bottom:1px solid #ffffff18;padding-bottom:14px}.purpose-line{font-size:13px;margin:0 0 10px}.water-choice{width:100%;display:flex;align-items:center;gap:7px;padding:6px 8px;margin:5px 0;background:#31372b;border:1px solid #74895d;color:#e6edcf;border-radius:3px;text-align:left}.water-choice svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.8}.school-count,.other-waters{font-size:11px;color:var(--dim);margin:9px 0}.recipe-row{font-size:11px;margin:8px 0}.purpose-filter{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:16px 0;font-size:12px}.purpose-filter>span{width:100%;color:var(--dim)}.fish-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.fish-group h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:14px 0 8px}.fish-tile{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid transparent;padding:4px 1px;border-radius:4px;font-size:10px;line-height:1.15}.fish-tile .item-icon{width:43px;height:43px}.fish-tile[aria-pressed=true]{background:#d2a94a16;border-color:var(--gold)}.pin.school .gl{width:18px;height:18px;background:#d2a94a;color:#33240f;border-color:#33240f}.pin.school .nm{display:none}.pin.school:hover .nm{display:block}.pin.school{z-index:5}.pin.school .num{display:none}
@media(max-width:800px){.mode-nav{display:none}}

.pin.water .gl .item-icon{width:28px;height:28px}.pin.quest:hover .nm{display:block!important}

.pin.quest .gl svg,.pin.school .gl svg{stroke:#33240f}

.town.destination .tg{background:var(--gold-2);box-shadow:0 0 0 4px #f0cf7e66}.town.destination .tn{color:var(--gold-2)}

.pin.quest:hover{z-index:12!important}.pin.quest:focus-visible{z-index:12!important}.pin.quest:focus-visible .nm{display:block!important}

.portrait{display:block;width:128px;height:128px;padding:0;margin:10px 0 4px;border:1px solid var(--gold);border-radius:6px;background:#14100a;cursor:zoom-in;overflow:hidden}.portrait img{display:block;width:100%;height:100%;object-fit:cover}.portrait.open{width:100%;height:auto;aspect-ratio:1;max-width:300px;cursor:zoom-out}
.tip.has-pic{display:flex;gap:9px;align-items:center}.tip.has-pic img{flex:none;border-radius:4px;border:1px solid var(--gold)}

/* day-one landing and picks (v1 s1) */
.lines{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 14px;padding:0}.lines li{font-size:12px;color:var(--dim);border:1px solid var(--metal-3);border-radius:99px;padding:2px 9px}
.picks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.pick{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border:1px solid var(--metal-3);border-radius:6px;background:var(--metal-1);color:#f4ecd4;text-decoration:none}.pick b{font:700 15px/1.25 var(--serif)}.pick span{font-size:12px;color:var(--dim)}.pick:hover,.pick:focus-visible{border-color:var(--gold);outline:0}
.next{font-size:13px;margin:0 0 12px;color:#d9d6c8}.next a{color:var(--gold-2)}
span.item-icon{display:inline-block;background:#ffffff0d}
a.ghost{text-decoration:none;display:inline-block}
.step .what .badge{line-height:1.15;padding:0 6px}

/* ---------- Jam 9 B: the map is the page (map-first trail) ---------- */
.app.mapfirst{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.mapfirst .answer,.mapfirst .reopen,.mapfirst .cartouche{display:none}
.mapfirst .pin.sel .nm{display:none}
.trail{position:absolute;left:14px;top:14px;z-index:7;width:290px;padding:10px 12px 9px;background:linear-gradient(180deg,#f2e5bf,#e1cd98);color:var(--ink);border:1px solid var(--ink);border-radius:3px;box-shadow:0 0 0 2px #e1cd98,0 0 0 3px var(--ink-2),0 4px 12px #0007}
.t-top{display:flex;gap:10px;align-items:center;margin-bottom:8px}.t-top>div{flex:1;min-width:0}   /* polish 4: the title wraps inside its column and the profile line always sits below it */
.trail .race-icon{width:38px;height:38px;flex:none}.trail .race-icon svg{width:100%;height:100%}
.t-title{display:block;font:700 22px/1 var(--serif);letter-spacing:.04em;text-transform:uppercase}
.t-you{font-size:12.5px;line-height:1.4;color:var(--ink-2);margin-top:4px}
.dots{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:3px}
.dot{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:3px 8px 3px 3px;border:1px solid transparent;border-radius:99px;background:transparent;color:var(--ink-2);font:600 13.5px/1.2 var(--serif)}
.dot i{flex:none;width:20px;height:20px;border-radius:50%;background:#bfa569;border:1.5px solid var(--ink-2);color:var(--ink);font:700 12px/17px var(--sans);text-align:center}
.dot:hover{border-color:#5f4a2866}
.dot.cur{color:var(--ink);background:#fff7;border-color:var(--ink-2)}
.dot.cur i{background:var(--gold-2);border-color:#1d1507;box-shadow:0 0 0 3px #d2a94a66}
.dot.done i{opacity:.55}
.t-moved{margin:2px 0 4px;font-size:12px;font-style:italic;color:var(--ink)}
.trail .card-baseline{font-size:11px;color:var(--ink-2);margin:4px 0 0;border-top:1px solid #5f4a2855;padding-top:5px}
.tcard{position:absolute;left:0;top:0;z-index:8;width:292px;max-height:calc(100% - 16px);overflow:visible;padding:12px 14px 12px;--dim:#e8e5d6;--classic:#ecce7a;--emu:#9ccbe8;--rumor:#dca9e3;--hunch:#e3b98a;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-edge);border-radius:6px;box-shadow:var(--glass-hi),var(--glass-shadow)}
.tcard[hidden]{display:none}
.tcard::before{content:"";position:absolute;top:calc(var(--arrow,30px) - 7px);width:12px;height:12px;background:var(--metal-2);border:1px solid var(--gold);transform:rotate(45deg)}
.tcard[data-side=r]::before{left:-7px;border-right:0;border-top:0}
.tcard[data-side=l]::before{right:-7px;border-left:0;border-bottom:0}
.tx{position:absolute;right:6px;top:4px;width:26px;height:26px;border:0;background:none;color:var(--dim);font-size:19px;line-height:1}
.tx:hover{color:var(--text)}
.t-head{display:flex;align-items:center;gap:10px;margin-right:18px}
.t-face{flex:none;width:56px;height:56px;border:1px solid var(--gold);border-radius:6px;background:#14100a;object-fit:cover}
.tcard .step-icon{flex:none}
.tcard .race-icon{flex:none;width:44px;height:44px}.tcard .race-icon svg{width:100%;height:100%}
.tcard h3{font:700 20px/1.15 var(--serif);margin:0;color:#f4ecd4}
.tcard .sub{margin:2px 0 0;color:var(--dim);font-size:12.5px}
.t-line{margin:10px 0 0;font-size:13.5px}
.t-items{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.t-items li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.t-items .pr{color:var(--gold-2);white-space:nowrap;font-size:12.5px}
.t-more{max-height:190px;overflow:auto;padding-right:4px}
.t-all{all:unset;cursor:pointer;margin-top:8px;font-size:12.5px;color:var(--gold-2);border-bottom:1px dotted var(--gold)}
.t-all:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.t-note{margin:10px 0 0;font-size:12.5px;color:var(--dim)}
.t-next{display:block;width:100%;margin-top:12px;padding:8px 12px;text-align:left;border:1px solid var(--gold);border-radius:4px;background:#d2a94a22;color:var(--gold-2);font-size:13.5px;font-weight:600}
.t-next:hover{background:#d2a94a44}
.t-more[hidden]{display:none}
.tcard[data-side=d]::before{display:none}
.mapfirst .pin.water .num{left:-27px;top:7px}
.tcard::before{display:none!important}
.ttail{position:absolute;inset:0;z-index:9;pointer-events:none}.ttail[hidden]{display:none}
.ttail svg{position:absolute;left:0;top:0;overflow:visible}.ttail polygon,.ttail circle{fill:var(--gold);stroke:none}
.trail{width:320px}.t-title{font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.mapfirst .pin.start .gl{width:36px;height:36px;left:-18px;top:-18px;background:#152d31;border:2.5px solid var(--gold-2);box-shadow:0 0 0 4px #f0cf7e55,0 0 14px 4px #f0cf7e55,0 2px 6px #000a}
.mapfirst .pin.start .gl svg{width:28px;height:28px;stroke:#9fd0cc;stroke-width:1.4;fill:none}
.mapfirst .pin.start .nm{left:24px;font-weight:700}

/* two layers: the answer panel is the deeper layer, closed until a card opens it */
.mapfirst .tuck{display:none}
/* The drawer: the steady guide as a right-edge drawer over the map, collapsed to a slim tab to start. */
.app.mapfirst .answer{display:block;position:absolute;right:12px;top:84px;bottom:14px;width:344px;z-index:12;border:1px solid var(--gold);border-radius:6px;background:linear-gradient(180deg,rgba(42,46,51,.9),rgba(30,33,37,.92));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 10px 30px #000a;overflow:hidden;transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .26s,visibility 0s .26s}
.app.mapfirst.drawer-open .answer{transform:none;visibility:visible;transition:transform .26s}
.mapfirst .answer-body{width:100%}
.dtab{position:absolute;z-index:13;right:0;top:72%;transform:translateY(-50%);width:24px;height:92px;border:1px solid var(--gold);border-right:0;border-radius:6px 0 0 6px;background:linear-gradient(90deg,rgba(58,63,70,.92),rgba(30,33,37,.94));color:var(--gold-2);font-size:20px;line-height:1;padding:0;box-shadow:-2px 2px 10px #0008;transition:right .26s}
.dtab[hidden]{display:none}.dtab:hover{background:var(--metal-3)}
.app.drawer-open .dtab{right:356px}
.pin.hub .gl{width:26px;height:32px;left:-13px;top:-16px;border-radius:6px;background:#d7b543;border-color:#33240f}.pin.hub .gl svg{stroke:#33240f}.pin.hub{--c:#d7b543}

/* ---------- Jam 9 B: "You" at top right ---------- */
.sbtn.you{border-color:var(--gold);background:#d2a94a1f;color:var(--gold-2);gap:7px;padding:5px 6px 5px 11px}
.sbtn.you .you-l{font:700 13px var(--serif);letter-spacing:.04em;color:var(--gold)}
.sbtn.you #you-sum{color:var(--text)}
.sbtn.you .you-edit{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;background:var(--gold);color:#241a08;font-size:12px;font-weight:700}
.sbtn.you .you-edit i{color:#241a08;font-size:12px}
.sbtn.you:hover,.sbtn.you[aria-expanded=true]{border-color:var(--gold-2);background:#d2a94a38}
[hidden]{display:none!important}
/* The you panel: a compact drop-down hanging under its chip, top right. Who you are (race faces), where you start (places, who underneath),
   then level, skill and pole in a row each. A first visit has it open and glowing a little until it settles. */
#drawer-you{left:auto;right:10px;width:318px;padding:4px 12px 8px;max-height:none}
#drawer-you .blk{padding:7px 0 8px}
#drawer-you .rowhint{margin:-2px 0 6px;font-size:12px;color:var(--dim)}
#drawer-you .rowlbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 5px}
.seg.races{flex-direction:row;gap:5px;margin-bottom:9px}
.seg.races button{flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 2px 4px;font-size:11.5px}
.seg.races .rg svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;display:block}
#start-list .picks{display:grid;grid-template-columns:1fr;gap:4px;margin:0}
#start-list .pick{display:grid;grid-template-columns:20px 1fr auto;align-items:center;column-gap:8px;padding:6px 9px;width:100%;text-align:left;font:inherit;border-radius:5px}
#start-list .pick i{width:18px;height:18px;display:block;color:var(--gold)}
#start-list .pick i svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#start-list .pick b{font:700 13.5px/1.2 var(--serif);color:#f4ecd4}
#start-list .pick span{font-size:11.5px;color:var(--dim);white-space:nowrap}
#start-list .pick[aria-current=true]{border-color:var(--gold);background:#d2a94a1c}
#drawer-you .you{margin:6px 0 0;font-size:12.5px;color:var(--dim)}
#drawer-you .duo{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-items:end}
#drawer-you .duo .row{display:grid;gap:3px;margin:0}
#drawer-you .duo .chips{grid-column:1/-1}
#drawer-you .duo .stepper input{width:100%;min-width:0;flex:1}
.seg.poles{flex-direction:row;gap:5px}
.seg.poles button{flex:1 1 0;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 4px;font-size:11.5px;justify-content:flex-start}
.seg.poles .item-icon{width:26px;height:26px}.seg.poles .nopole{display:block;width:26px;height:26px;font:400 20px/26px var(--sans);text-align:center;color:var(--dim)}
.seg.poles small{font-size:10.5px}
#drawer-you .blk.foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:2px}
#drawer-you .blk.foot .btn{flex:1}
.seg button:disabled{opacity:.55;cursor:default}
@media (prefers-reduced-motion:no-preference){
 .sbtn.you.attn{animation:youpulse 1.5s ease-in-out 3}
 #drawer-you.attn-on{animation:youglow 1.5s ease-in-out 3}
}
.sbtn.you.attn{box-shadow:0 0 0 3px #f0cf7e55,0 0 14px 3px #f0cf7e66}
@keyframes youpulse{50%{box-shadow:0 0 0 6px #f0cf7e66,0 0 22px 7px #f0cf7e88}}
@keyframes youglow{50%{border-color:var(--gold-2);box-shadow:inset 0 1px 0 var(--metal-3),0 0 0 3px #f0cf7e55,0 10px 26px #000b}}

/* ---------- Jam 9 B: the fishing area on the water ---------- */
.cast{opacity:.55;transition:opacity .5s;mix-blend-mode:screen}.cast-on .cast{opacity:1}
.cast path{fill:none;stroke:#ffe7a3;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.cast .g1{stroke-width:230;stroke-opacity:.12}.cast .g2{stroke-width:150;stroke-opacity:.16}.cast .g3{stroke-width:80;stroke-opacity:.22}.cast .g4{stroke-width:32;stroke-opacity:.32}
.cast .isl{stroke-width:22;stroke-opacity:.16;stroke:#ffe7a3}
.cast .sh{stroke:#fffbe8;stroke-width:3.5;stroke-dasharray:16 52;stroke-opacity:.8;animation:castflow 9s linear infinite}
@keyframes castflow{to{stroke-dashoffset:-136}}
@media (prefers-reduced-motion:reduce){.cast .sh{animation:none}}
.t-zone{margin:6px 0 8px;font-size:13.5px;color:#cfeef6}
.app.mapfirst{position:relative;overflow:hidden}

/* ---------- Jam 9 B leg 1c: coins, rank hovers, the Next trail, the fishing zone ---------- */
.coins{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.coin{display:inline-flex;align-items:center;gap:2px}
.coin .cn{display:inline-block;width:15px;height:15px}.coin .cn svg{width:100%;height:100%;display:block}
.t-items .pr{display:inline-flex;align-items:center}
.seg.poles small{display:inline-flex}
.rank{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:help;border-bottom:1px dotted var(--gold)}
.rank .rk-i{font-style:normal;width:14px;height:14px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-2);font:700 10px/12px var(--sans);text-align:center}
.rank .rk-tip{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:12;width:210px;padding:7px 10px;background:#14100af2;border:1px solid var(--gold);border-radius:4px;color:#f3e7c5;font:400 12.5px/1.35 var(--sans);box-shadow:0 4px 14px #000a;white-space:normal}
.rank:hover .rk-tip,.rank:focus .rk-tip,.rank.open .rk-tip{display:block}
.t-next{display:flex;align-items:center;gap:9px;padding:10px 12px;background:linear-gradient(180deg,#e8c36a,#c9992f);color:#241a08;border-color:var(--gold-2);font-size:14px;font-weight:700;box-shadow:0 0 0 2px #f0cf7e44}
.t-next:hover{background:linear-gradient(180deg,#f2d27e,#d4a63a)}
.t-next span{flex:1}
.t-next .nx-n{flex:none;width:22px;height:22px;border-radius:50%;background:#241a08;color:var(--gold-2);font:700 13px/22px var(--sans);text-align:center;font-style:normal}
.t-next b{font-size:17px}
.hopline{position:absolute;inset:0;z-index:9;pointer-events:none}.hopline svg{position:absolute;left:0;top:0}
.hopline path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hopline mask path{stroke:#fff;stroke-width:16;stroke-dasharray:1;stroke-dashoffset:0;animation:hopdraw 1.2s linear forwards}
.hopline .hp-under{stroke:#2a1c08;stroke-width:7;stroke-opacity:.45;stroke-dasharray:9 8}
.hopline .hp{stroke:#ffe7a3;stroke-width:3.5;stroke-dasharray:9 8;filter:drop-shadow(0 0 4px #ffd36a)}
.hopline .ha{fill:#ffe7a3;stroke:#2a1c08;stroke-width:1.5;filter:drop-shadow(0 0 5px #ffd36a)}
@keyframes hopdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hopline{animation:hopfade 2.3s ease-out forwards}@keyframes hopfade{0%,70%{opacity:1}100%{opacity:0}}
.pin.hop .gl{animation:hopring 1.1s ease-out 2}.pin.hop .num{animation:hopnum 1.1s ease-out 2}
.dot.hop,.dot.hop i{animation:hopdot 1.1s ease-out 2}
@keyframes hopring{0%{box-shadow:0 0 0 0 #ffe7a3cc}100%{box-shadow:0 0 0 22px #ffe7a300}}
@keyframes hopnum{40%{transform:scale(1.5)}}
@keyframes hopdot{40%{transform:scale(1.07);box-shadow:0 0 0 5px #f0cf7e88}}
@media (prefers-reduced-motion:reduce){.hopline,.hopline mask path{animation:none}.hopline{opacity:.8}.hopline .ha{display:none}.pin.hop .gl,.pin.hop .num,.dot.hop,.dot.hop i{animation:none}.pin.hop .gl{box-shadow:0 0 0 6px #ffe7a399}}
.cdot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#ffe7a3;border:2px solid #7a5a1e;box-shadow:0 0 0 4px #ffe7a355,0 0 12px 4px #ffe7a399;z-index:3;pointer-events:none}
.cast{opacity:.78}.cast-on .cast{opacity:1}
.cast .g3{stroke-opacity:.27}.cast .g4{stroke-opacity:.42}
.pin .num.done{background:#2c3a2a;color:#9fd69a;border-color:#4d6b4a}
#start-list .pick.later{opacity:.6;cursor:default}
#start-list .pick.later:hover{border-color:var(--metal-3)}
#start-list .pick.later span{color:var(--gold);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.coords:empty{display:none}
.pin.school .gl .item-icon{width:26px;height:26px}

/* 1e: scan-first cards. Price column right-aligned; "from skill" under the rank; water card as short bold-led lines. */
.t-items li{align-items:flex-start}
.t-items .pr{margin-left:auto;text-align:right;align-self:center}
.t-items .lblc{display:flex;flex-direction:column;gap:1px}.t-items .lblc small{font-size:11px;color:var(--dim)}
.t-bul{margin:6px 0 0;font-size:13px;line-height:1.35}.t-bul b{color:#f4ecd4}
.t-lure{display:block}.t-lure .item-icon{width:18px;height:18px;vertical-align:-4px;border-radius:3px}.t-lure .coins{vertical-align:-3px}
.t-show{all:unset;cursor:pointer;color:var(--gold-2);border-bottom:1px dotted var(--gold);font-size:12.5px}.t-show:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.cdot{pointer-events:auto;cursor:pointer;padding:0}.cdot::after{content:"";position:absolute;inset:-9px}
.cdot:hover,.cdot:focus-visible{background:#fffbe8;box-shadow:0 0 0 5px #ffe7a3aa,0 0 14px 5px #ffe7a3cc}
/* step 3 as one thing: the bank stretch lights as a band in the step colour (gold), with marker 3 and its dots on it */
.band{opacity:0;transition:opacity .35s;pointer-events:none}.band-on .band{opacity:1}
.band path{fill:none;stroke:#f0cf7e;stroke-linejoin:round;stroke-linecap:round}
.band .bd1{stroke-width:70;stroke-opacity:.22}.band .bd2{stroke-width:42;stroke-opacity:.42}.band .bd3{stroke-width:14;stroke-opacity:.9}
.band-on .cdot{background:var(--gold-2);border-color:#1d1507;box-shadow:0 0 0 3px #f0cf7e99,0 0 10px 3px #f0cf7ecc}
.band-on .pin.water .num{box-shadow:0 0 0 3px #f0cf7e99}

/* limited-stock note under a vendor item: its own line, quiet */
.t-items .lim{flex-basis:100%;display:block;margin-top:-2px;padding-left:36px;font-size:11.5px;color:var(--dim)}
.t-items li:has(.lim){flex-wrap:wrap}

/* v1 leg 3 (Orgrimmar): inn and flight pins, the pond card's closing Classic line */
.pin.flight{--c:#b9c8f0}   /* the inn colour is leg 2's (line 98): one inn style for both legs */
.t-foot{opacity:.8;font-size:.92em}.tcard .t-foot{opacity:1}
/* v1 leg 2: the whole road once, thin; only on leg 2 (merged) */
.legtrace{display:none}#app.guides.leg2 .legtrace,#app.guides.packleg .legtrace{display:block}
.lt-under{stroke:#2a1c08;stroke-width:4.4px;opacity:.55}.lt-line{stroke:#ffe7a3;stroke-width:2.2px}
a.t-next.t-door{text-decoration:none}
/* v1 polish 1: one gold button per card. The next stop in the leg is gold; leaving the zone while there is a next stop is a quiet link under it. At a leg's last stop the door is the Next and stays gold. */
a.t-next.t-door.quiet{display:inline-block;width:auto;margin-top:10px;padding:0;border:0;border-bottom:1px dotted var(--gold);border-radius:0;background:none;box-shadow:none;color:var(--gold-2);font-size:12.5px;font-weight:400}
a.t-next.t-door.quiet:hover,a.t-next.t-door.quiet:focus-visible{background:none;color:#fff3d0}
a.t-next.t-door.quiet b{font-size:13px;margin-left:5px}

/* v1 leg 4: the "ways" lines on a card (three ways at first water; switch-it-up links) */
.t-way a{color:#e8b86a;text-decoration:underline;text-underline-offset:2px}.t-way a:hover,.t-way a:focus-visible{color:#fff3d0}

/* ---- badge round (Astra): the water-level badge. Whole bobber on a dark inset; broken/whole rim carries readiness. The selection halo stays outside the glyph. ---- */
.bdg{--ink:#2b1d0a;color:var(--ink)}
.bdg[data-state=no]{--ink:#b7afa0}.bdg[data-state=some]{--ink:#c5a45b}.bdg[data-state=set]{--ink:#7eab80}
.bdg-svg{display:block;width:100%;height:100%;overflow:visible}
.pin .gl.bdg,.pin.sel .gl.bdg{background:#202c31;border:2px solid var(--ink);box-shadow:0 1px 3px #0008}
.pin .gl.bdg{box-sizing:border-box;width:24px;height:24px;left:-12px;top:-12px}
.pin .gl.bdg svg,.pin.sel .gl.bdg svg{width:20px;height:20px;stroke:none;fill:none}
.pin.sel .gl.bdg,.pin:hover .gl.bdg{box-shadow:0 0 0 3px #fff4d7,0 0 0 5px #1d1507,0 2px 8px #000c}
.step-icon.bdg,.water-choice .bdg{box-sizing:border-box;flex:none;width:34px;height:34px;padding:3px;border-radius:50%;background:#202c31;border:2px solid var(--ink)}
.step-icon.bdg{width:24px;height:24px;padding:0}
.water-choice .bdg{width:24px;height:24px;padding:0}.water-choice .bdg svg{width:100%;height:100%;stroke:none}
.step-icon.bdg svg{stroke:none;fill:none}
.tcard .step-icon.bdg{width:32px;height:32px;padding:1px;margin-top:3px}
.bdg-state{font-weight:700}
.tip .bdg-line{font-weight:700}
.pin .gl .bdg-mini{pointer-events:none;position:absolute;right:-9px;bottom:-8px;width:22px;height:22px;box-sizing:border-box;padding:1px;border-radius:50%;background:#202c31;border:2px solid var(--ink);box-shadow:0 1px 3px #000a}
.pin .gl .bdg-mini svg{width:100%;height:100%;stroke:none;fill:none}
.dot .bdg-dot{display:inline-block;box-sizing:border-box;flex:none;width:22px;height:22px;padding:1px;margin:0 5px 0 -1px;vertical-align:middle;border-radius:50%;background:#202c31;border:2px solid var(--ink)}.dot .bdg-dot svg{width:100%;height:100%;stroke:none;fill:none}
.bdg-fix{all:unset;cursor:pointer;color:#e8b86a;text-decoration:underline;text-underline-offset:2px;font-weight:700}.bdg-fix:hover,.bdg-fix:focus-visible{color:#fff3d0}
@media (max-width:520px){.pin.sel{z-index:7!important}}   /* badge round, phone: the open card may cover its pin; the card carries the same badge and the trail row links them, so no text lies under a dot */
/* transit round: the stage over the map (pull out, trace, settle), the route button, the short walk and the trail. Rules live here; the shot lives in proto/v1/transit/transit.js. */
.transit{position:absolute;inset:0;z-index:14;overflow:hidden;background:#0d0a06;cursor:pointer}
.transit .tr-art{position:absolute;left:0;top:0;display:block}
.transit .tr-svg{position:absolute;left:0;top:0;overflow:hidden}
.tr-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tr-svg .tr-mk{stroke:#fff;stroke-width:26}
.tr-svg .tr-fly-u{stroke:#2a1c08;stroke-opacity:.5;stroke-width:7;vector-effect:non-scaling-stroke;stroke-dasharray:9 8}
.tr-svg .tr-fly{stroke:#ffe7a3;stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-dasharray:9 8;filter:drop-shadow(0 0 4px #ffd36a)}
.tr-svg .tr-walk-u{stroke:#2a1c08;stroke-opacity:.45;stroke-width:4;vector-effect:non-scaling-stroke}
.tr-svg .tr-walk{stroke:#f4e6bd;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-dasharray:2 5}
.transit .tr-lab{position:absolute;left:0;top:0;z-index:2;pointer-events:none;will-change:transform}
.transit .tr-lab>*{position:absolute;white-space:nowrap}
.tr-pin i{left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#ffe7a3;border:2px solid #2a1c08;box-shadow:0 0 0 3px #ffe7a355}
.tr-pin b{left:10px;top:-9px;font:700 13px var(--sans);color:#fff3d0;text-shadow:0 1px 3px #000,0 0 6px #000}
.tr-pin.to b{left:-10px;transform:translateX(-100%)}
.tr-pin b em{font:700 10.5px var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#ffd98a;margin-right:2px}.tr-pin b em::after{content:' ·'}
.tr-zn{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#f4e6bdcc;text-shadow:0 1px 3px #000;transform-origin:0 0;opacity:.7}
.tr-zn{transform:none}
.tr-cost{color:#2a1c08}
.tr-cost>*:first-child{left:-11px;top:-11px}
.tr-cost{font:700 12px var(--sans)}
.tr-cost span.tr-g{display:block;width:22px;height:22px;border-radius:50%;background:#ffe7a3;box-shadow:0 0 0 2px #2a1c08;padding:3px;color:#2a1c08}
.tr-cost span:last-child{left:14px;top:-9px;background:#241a08d9;color:#ffe7a3;padding:2px 7px;border-radius:9px;font-style:normal}
.tr-g svg{display:block;width:100%;height:100%}
.tr-card{position:absolute;left:16px;bottom:16px;z-index:3;width:min(320px,calc(100% - 32px));padding:12px 14px;border:1px solid var(--gold);border-radius:6px;background:#1c1409f2;color:#f4e6bd;cursor:default;box-shadow:0 6px 24px #0009}
.tr-card[hidden]{display:none}
.transit .tr-card{animation:trcard .45s ease .25s backwards}@keyframes trcard{from{opacity:0;transform:translateY(8px)}}
.tr-card h3{margin:0 0 8px;font:700 16px var(--serif,inherit);color:var(--gold-2)}
.tr-card ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.tr-card li{display:flex;gap:9px;align-items:center;font-size:14px;line-height:1.3}
.tr-card li .tr-g{flex:none;width:22px;height:22px;color:var(--gold-2)}
.tr-card b{color:var(--gold-2)}
.tr-btns{display:flex;gap:8px}
.tr-go{flex:1;padding:8px 12px;border:1px solid var(--gold-2);border-radius:4px;background:linear-gradient(180deg,#e8c36a,#c9992f);color:#241a08;font:700 14px var(--sans);cursor:pointer}
.tr-skip{padding:8px 12px;border:1px solid #d2a94a88;border-radius:4px;background:none;color:#f4e6bd;font:600 13px var(--sans);cursor:pointer}
.t-how{display:block;margin-top:10px;padding:7px 12px;border:1px solid var(--gold);border-radius:4px;background:#d2a94a22;color:var(--gold-2);font:600 13px var(--sans);cursor:pointer;text-align:left}
.t-how:hover{background:#d2a94a44}
#roads .tr-short path{fill:none;stroke:#f4e6bd;stroke-width:4;stroke-dasharray:3 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
#roads .tr-short path.u{stroke:#2a1c08;stroke-opacity:.5;stroke-width:7;stroke-dasharray:none}
.tr-trail{position:absolute;inset:0;z-index:6;pointer-events:none}
.tr-trail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tr-trail path{fill:none;stroke:#f4e6bd;stroke-opacity:.55;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.tr-tag{position:absolute;left:0;top:0;padding:2px 8px;border-radius:9px;background:#241a08cc;color:#f4e6bd;font:italic 600 12px var(--sans);white-space:nowrap}
@media (max-width:520px){.tr-card{bottom:8px;left:8px;width:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){.transit{transition:none}}

/* Leg planning traces: selected water leads, the alternatives stay in pencil. */
#roads .tr-plan{opacity:.28;pointer-events:none}
#roads .tr-plan path{stroke-width:2;stroke-dasharray:2 7}
#roads .tr-plan path.u{stroke-width:4}
#roads .tr-plan.selected{opacity:.85}
#roads .tr-plan.selected path{stroke-width:3}
#roads .tr-plan-fly{opacity:.35;pointer-events:none}
#roads .tr-plan-fly.selected{opacity:.85}
#roads .tr-plan-fly path{fill:none;stroke:#dfb552;stroke-width:2;stroke-dasharray:7 7;vector-effect:non-scaling-stroke}
.tr-plan-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:2px 5px;background:#261e0cdd;color:#efcf78;font:12px Georgia,serif;border-radius:3px;pointer-events:none}
.tr-plan-label .tr-g{width:20px;height:20px}

/* v1 org-frame: footprints (?prints=1). Idle prints never animate; the walk-in plays once. */
#roads .prints{opacity:.45;fill:#f4e6bd;stroke:#2a1c08;stroke-opacity:.55;stroke-width:.5px}
#roads .prints.strong{opacity:.9}
#roads .prints.go .print{animation:print-in .35s ease-out backwards}
@keyframes print-in{from{opacity:0}to{opacity:1}}

/* polish 2: "Not yet?" puts back only what Next ticked; quiet, like the dotted door link */
.t-undo{display:block;width:max-content;margin:8px 0 0;padding:0;border:0;border-bottom:1px dotted var(--dim);background:none;color:var(--dim);font:400 12px/1.3 var(--sans);cursor:pointer}
.t-undo:hover,.t-undo:focus-visible{color:var(--ink)}
.dots li{position:relative}
.dots .t-undo{display:inline-block;position:absolute;right:10px;top:50%;margin:0;transform:translateY(-50%);font-size:11.5px}
/* polish 3: skill where you read it (class-based so a new badge drops in; colours inherit so it reads on the dark card and the parchment box) */
.sk-ctl{display:inline-flex;align-items:center;gap:2px;margin-top:5px;font-size:12px;color:inherit}
.sk-ctl button{width:22px;height:22px;padding:0;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;font-size:14px;line-height:1;cursor:pointer;opacity:.75}
.sk-ctl button:hover,.sk-ctl button:focus-visible{opacity:1;background:rgba(127,127,127,.25)}
.sk-ctl .sk-lbl{margin:0 4px 0 6px;opacity:.8}
.sk-ctl input{width:44px;height:22px;padding:0 2px;text-align:center;font:inherit;color:inherit;background:rgba(127,127,127,.18);border:1px solid currentColor;border-radius:4px;-moz-appearance:textfield}
.sk-ctl input::-webkit-outer-spin-button,.sk-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sk-ctl input:last-child{margin-right:2px}
.t-you .sk-ctl{margin-top:0;vertical-align:middle}
.t-part{padding:0;border:0;border-bottom:1px dotted currentColor;background:none;color:inherit;font:inherit;cursor:pointer}
.t-part:hover,.t-part:focus-visible{border-bottom-style:solid}

/* A broken rim means some get away; a whole rim means set. */
.bdg[data-state=none]{--ink:#40575a}
.pin .gl.bdg[data-state=none],.step-icon.bdg[data-state=none],.water-choice .bdg[data-state=none],.dot .bdg-dot[data-state=none]{border-style:dashed}
.water-odds{display:inline-block;flex:none;font:700 11px/1.3 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:7px;padding-left:6px;border-left:1px solid currentColor}
.water-choice .water-odds{margin-left:auto}
.water-key{position:absolute;z-index:8;left:16px;bottom:46px;max-width:300px;padding:9px 12px;background:#f6efd9f5;color:#2b1d0a;border:1px solid #5f4a28;border-radius:4px;box-shadow:0 2px 7px #0007;font:12px/1.4 var(--sans)}
.water-key summary{cursor:pointer;font-weight:700}
.water-key-body{display:flex;flex-wrap:wrap;gap:7px 12px;padding-top:8px}
.water-key-state{display:flex;align-items:center;gap:4px}
.water-key .bdg{width:22px;height:22px;box-sizing:border-box;display:inline-block;background:#202c31;border:2px solid var(--ink);border-radius:50%;flex:none}
.water-key p{width:100%;margin:0;font-size:10px}
.water-key-types{display:flex;align-items:center;gap:5px;border-top:1px solid #5f4a2855;padding-top:5px;width:100%;font-size:11px}
.water-key-types span{width:22px;height:22px;display:inline-block}
.water-key-types span+span{margin-left:10px}
.water-key-types svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:900px){.water-key{left:8px;bottom:8px;max-width:270px;padding:7px 9px}}

.bdg-state .landing-lead{display:flex;align-items:baseline;gap:7px;margin:5px 0;color:#fff3d5;font-size:13px;font-weight:400}
.bdg-state .water-odds{border:0;padding:0;margin:0;font:700 30px/1.1 var(--sans)}
.landing-source{display:block;font:10px/1.5 var(--sans);color:#ece6d6;margin:5px 0 8px}
.readiness-note{display:block}.cast-action{display:inline-block;margin-left:6px;font-size:10px;font-weight:700}
.bdg[data-state=no] .bobber{filter:grayscale(1);opacity:.5}
.bdg[data-state=none]{color:#bed0cf}
.pin .gl.bdg[data-state=some],.bdg[data-state=some]{border-style:dashed}
.bdg[data-state=set]{border-style:solid}



.drawer-you .water-key{position:static;max-width:none;margin-top:12px;color:#2b1d0a;box-shadow:none}

/* Selected water reads against a quiet surface; desktop placement leaves its bank clear. */
/* T4b: the water card is glass like every card (dark 88%, blur); a solid fallback where backdrop-filter is missing */
.tcard.water-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);overflow:auto;overscroll-behavior:contain}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tcard,.tcard.water-card{background:#25292c}}
.water-catches{margin-top:12px;border-top:1px solid #ffffff24;padding-top:9px}
.water-catches summary{cursor:pointer;color:var(--gold-2);font-size:13px}
.water-catches[open] summary{margin-bottom:9px}
.mapfirst:has(.tcard[data-docked=true]) .pin.water.sel .nm{display:block}

/* polish 4: the water sign on the spot you cast from: quiet, the pin's own water blue, never a marker */
.cast-sign{position:absolute;left:-8px;top:-18px;width:16px;height:20px;z-index:2;pointer-events:none;opacity:.8;filter:drop-shadow(0 1px 1px #000a)}
.cast-sign svg{display:block;width:100%;height:100%;fill:#2b3530;stroke:#9fe0ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* polish 5: the ask when your stand is unknown, fish icons first on a water card, the nudge dismiss */
.fish-ask{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.fish-ask .sk-ctl{margin-top:0}
.ask-pole{height:22px;padding:0 8px;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer;opacity:.85}
.ask-pole:hover,.ask-pole:focus-visible{opacity:1;background:rgba(127,127,127,.25)}
.card .fish-ask,.tcard .fish-ask{margin-top:5px}
.t-fish{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;cursor:pointer}
.t-fish .item-icon{width:40px;height:40px;border-width:2px;border-radius:5px;display:block}
.t-skip{display:block;margin:8px 0 0;padding:0;border:0;background:none;color:var(--dim);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.t-skip:hover,.t-skip:focus-visible{color:var(--text)}
.ask-lbl{font-size:12px;font-weight:600;width:100%}

/* v1 baseline: the plain card and the legend */
.legend{position:absolute;z-index:8;right:66px;bottom:16px;width:fit-content;max-width:min(900px,calc(100% - 420px));padding:5px 10px;text-align:right;text-wrap:balance;background:#f6efd9f5;color:#2b1d0a;border:1px solid #5f4a28;border-radius:4px;box-shadow:0 2px 7px #0007;font:12px/1.4 var(--sans)}
.legend[hidden]{display:none}.legend .lg{display:inline-flex;align-items:center;gap:5px;margin-left:12px;white-space:nowrap}.legend .lg:first-child{margin-left:0}
.legend .lg-pin{position:relative;display:inline-block;width:22px;height:22px;flex:none}.legend .lg-pin .gl{left:0;top:0;width:22px;height:22px;transform:none}.legend .lg-pin .gl svg{width:13px;height:13px}
.t-role{display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-3px}.t-role svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-glyph{width:56px;height:56px;flex:none;display:grid;place-items:center}.t-glyph svg{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:1.6}
.t-sec{margin:10px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2)}
.t-allstock{margin-top:8px}.t-allstock summary{cursor:pointer;color:var(--gold-2)}
@media(max-width:900px){.legend{right:58px;bottom:8px;max-width:calc(100% - 66px)}}
/* v1 points: pins n8db adds (trade goods, zeppelin) and the Old charts badge */
.pin.goods{--c:#9fd49a}.pin.zeppelin{--c:#b9c8f0}.b-old{color:var(--classic)}
.m-credit{position:absolute;left:14px;bottom:10px;max-width:min(560px,52%);margin:0;padding:3px 9px;font:10.5px/1.35 system-ui,sans-serif;color:rgba(242,229,191,.78);background:rgba(14,34,48,.62);border-radius:4px;pointer-events:none;z-index:3}   /* same rule as jam10/merged.css, for the boards merged.js does not load on */

/* the flight-fare chip is a Guides thing */
#app:not(.guides) .tr-plan-label{display:none}

/* ---- T4 (2026-10-30): card type and chips. Full width: 14px floor, width capped at 300; a side window (1200 and under) keeps the earlier sizes. ---- */
.sk-bar{margin:10px 0 0}
.sk-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font:600 15px/1.25 var(--sans);color:#f4ecd4}
.sk-name b{font-weight:700;color:var(--gold-2);white-space:nowrap}
.sk-row{display:flex;align-items:center;gap:10px;margin-top:5px}
.sk-track{flex:1;height:8px;border-radius:99px;background:#14100a;border:1px solid #8e784b;overflow:hidden}
.sk-track i{display:block;height:100%;background:var(--gold-2)}
.sk-bar .sk-ctl{margin-top:0}.sk-bar .sk-lbl{display:none}
@media (min-width:1201px){
 .tcard{width:min(292px,100%)}
 .tcard h3{font-size:18px}
 .tcard .sub,.tcard .t-line,.tcard .t-items li,.tcard .t-items .pr,.tcard .t-items .lblc small,.tcard .t-note,.tcard .t-bul,.tcard .t-all,.tcard .t-how,.tcard .t-sec,.tcard .t-allstock summary,.tcard .water-catches summary,.tcard .badge,.tcard .t-foot,.tcard .sp-link,.tcard .sk-ctl,.tcard .sk-ctl input,.tcard .ask-lbl,.tcard .landing-source,.tcard .readiness-note,.tcard .landing-lead,.tcard .bdg-fix,.tcard .t-show,.tcard .rank .rk-tip{font-size:14px}
 .tcard .sub{line-height:1.3}
 .tcard .sp-link,.tcard .ask-pole,.tcard .landing-lead>span:not(.water-odds){font-size:14px}
 .tcard .rank .rk-i{width:18px;height:18px;font:700 14px/16px var(--sans)}
 .tcard .t-sec{text-transform:none;letter-spacing:0;font-weight:600}
 .tcard .badge{letter-spacing:.02em;padding:1px 8px;margin-left:0}
 .tcard .t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 0}
 .tcard .t-meta .t-role{margin-right:0}
 .tcard .sk-ctl button{width:26px;height:26px;font-size:16px}.tcard .sk-ctl input{width:48px;height:26px}
 .tcard .water-catches .t-items li{flex-wrap:wrap;row-gap:0}.tcard .water-catches .t-items .pr{width:100%;padding-left:36px}   /* a catch's share sits under its name, so no name is left with one word on a last line */
}

/* F-045: Orgrimmar and Sen'jin are one fork: two equal buttons, side by side, stacked when the card is narrow */
.t-fork{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px;align-items:stretch}
.t-fork .t-next{margin-top:0;width:auto}
.t-next .fk{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.t-next .fk strong{font-size:15px}
.t-next .fk small{font-size:12px;font-weight:600;opacity:.85}
/* F-045 r2: Orgrimmar is the encouraged way (filled); Sen'jin stays a full choice, outlined */
.t-fork .t-next:not(.t-door){background:transparent;color:var(--gold-2);box-shadow:none}
.t-fork .t-next:not(.t-door):hover{background:#d2a94a22}
/* ALLYAPP (wave 3): faction access on travel cards (Q10 #4), in faction colours: Horde merlot, Alliance deep blue (argon-1), both = brass */
.fac{display:inline-block;padding:1px 7px;margin-right:4px;border-radius:3px;font:700 10.5px/1.5 Arial,sans-serif;letter-spacing:.6px;text-transform:uppercase;border:1px solid}
.fac-horde{background:#381921;color:#e48876;border-color:#8e2632}
.fac-alliance{background:#1c3152;color:#84b6ea;border-color:#2e5a92}
.fac-neutral{background:#3a3220;color:#e7c873;border-color:#8a6d2a}
.badge.fac-alliance{color:#84b6ea}
.how-tag{font-size:11px;color:var(--dim);font-style:italic}
#drawer-you .fac-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}#drawer-you .fac-row .rowlbl{margin:0}
.seg.two.faction{margin:0;gap:4px;flex:none}.seg.two.faction button{flex:none;padding:2px 9px;font-size:11.5px;line-height:1.3}
/* ALLYWALK (2026-10-31): travel facts on the floating card (who may use it, routes), the same rows the side-panel card shows */
.tcard .t-dl{margin:8px 0 0;font-size:12.5px;line-height:1.4}.tcard .t-dl dt{margin-top:6px;font-weight:700;color:#f4ecd4}.tcard .t-dl dd{margin:0;color:var(--dim)}.tcard .t-dl .how-tag{margin-left:4px;font-size:11px;color:var(--dim)}
.t-forkline{margin-top:10px}

/* F-103 (L9-13): an item with no icon file shows no empty box (the slot stays in the markup) */
.item-icon.no-art{display:none}