/* Donkey Jousting — tourney skin.
   Page-scoped: every rule lives under .jr so nothing leaks into the rest of the site. */

.jr{
  --ink:#151009;
  --field:#1b1710;
  --field-2:#241e15;
  --parch:#f0e5cb;
  --parch-dim:#c3b596;
  --crimson:#b8323c;
  --gold:#e8b73c;
  --ochre:#a06b34;
  --grass:#5c9c4a;
  --line:rgba(240,229,203,.14);

  --r-common:#9aa4b2; --r-uncommon:#4ade80; --r-rare:#38bdf8;
  --r-epic:#a78bfa;   --r-legendary:#fbbf24;

  color:var(--parch);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}

.jr h1,.jr h2,.jr h3{
  font-weight:800; letter-spacing:-.02em; margin:0; color:var(--parch);
}
.jr h1{font-size:clamp(28px,4vw,44px)}
.jr h2{font-size:20px}
.jr .flavor{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--parch-dim);font-size:13px;line-height:1.5}
.jr .muted{color:var(--parch-dim)}
.jr .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}

/* ---- surfaces ---- */
.jr-panel{
  background:var(--field); border:1px solid var(--line);
  border-radius:14px; padding:18px;
}
.jr-panel + .jr-panel{margin-top:14px}

/* ---- the tilt: a repeating barrier rule used as a divider ---- */
.jr-tilt{
  height:10px; margin:18px 0; border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--ochre) 0 6px,transparent 6px 20px);
  border-top:2px solid var(--ochre); border-bottom:2px solid var(--ochre);
  opacity:.5;
}

/* ---- buttons ---- */
.jr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:9px;border:1px solid var(--line);
  background:var(--field-2);color:var(--parch);font-weight:700;font-size:14px;
  cursor:pointer;text-decoration:none;transition:transform .09s ease,background .15s;
}
.jr-btn:hover{background:#2e2719;transform:translateY(-1px)}
.jr-btn:active{transform:translateY(0)}
.jr-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jr-btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.jr-btn.primary{background:var(--crimson);border-color:#d3505a;color:#fff}
.jr-btn.primary:hover{background:#cc3945}
.jr-btn.gold{background:var(--gold);border-color:#f5cf70;color:#2a2005}
.jr-btn.gold:hover{background:#f2c650}

/* ---- hover tooltip (the Career button explains itself) ---- */
/* The button's :hover transform makes it a stacking context; without a z-index the
   later-painted canvas stage would cover the tooltip, so lift the button on hover. */
.jr-tip{position:relative}
.jr-tip:hover,.jr-tip:focus-within{z-index:70}
.jr-tip::after{
  content:attr(data-tip);
  position:absolute;left:50%;top:calc(100% + 11px);
  transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:250px;padding:9px 12px;
  background:var(--field-2);color:var(--parch);
  border:1px solid var(--ochre);border-radius:9px;
  font-size:12px;line-height:1.5;font-weight:600;text-align:center;white-space:normal;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .16s ease,transform .16s ease;
}
.jr-tip::before{                 /* the little arrow pointing up at the button */
  content:'';position:absolute;left:50%;top:calc(100% + 5px);
  transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--ochre);
  opacity:0;pointer-events:none;z-index:61;transition:opacity .16s ease;
}
.jr-tip:hover::after,.jr-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.jr-tip:hover::before,.jr-tip:focus-visible::before{opacity:1}

/* ---- canvas stage ---- */
.jr-stage{
  position:relative;width:100%;aspect-ratio:16/9;min-height:340px;
  border-radius:14px;overflow:hidden;border:2px solid var(--ochre);
  background:#4aa3d8;
}
.jr-stage canvas{display:block;width:100%;height:100%;cursor:crosshair}
.jr-overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,8,4,.72);backdrop-filter:blur(3px);text-align:center;padding:24px;
}
.jr-overlay[hidden]{display:none}

/* ════════════════════════════════════════════════════════════════
   THE BRAYERY — loadout · tabbed armoury · chests
   A calmer, more legible layout: equipped gear big and up front, a
   real per-slot tab browser below, one clear bar per card.
   ════════════════════════════════════════════════════════════════ */

/* section header shared by each panel */
.jr-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}

/* ---- currency pills ---- */
.jr-cur{display:flex;gap:8px;flex-wrap:wrap}
.jr-coin{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;
  background:var(--field-2);border:1px solid var(--line);border-radius:10px;padding:7px 13px;min-width:76px;
}
.jr-coin b{font-size:18px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.jr-coin i{font-size:9.5px;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--parch-dim);margin-top:3px}
.jr-coin-bal b{color:var(--parch-dim)}

/* ---- 1 · loadout: portrait + eight squares ---- */
.jr-load{display:grid;grid-template-columns:270px 1fr;gap:22px;align-items:start}
@media (max-width:820px){.jr-load{grid-template-columns:1fr}}

.jr-doll{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0;
  background:linear-gradient(#3f7fb0,#8fc4dd);aspect-ratio:4/5;position:relative;
}
.jr-doll canvas{display:block;width:100%;height:100%}
.jr-doll figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:9px 13px;
  background:linear-gradient(transparent,rgba(10,8,4,.86) 62%);
  font-size:12.5px;font-weight:800;letter-spacing:.03em;
}
@media (max-width:820px){.jr-doll{max-width:280px;margin:0 auto}}

.jr-load-main{min-width:0}
.jr-load-hint{font-size:11.5px;margin:2px 0 11px}

.jr-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1080px){.jr-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.jr-slots{grid-template-columns:1fr}}

.jr-slot{
  position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;
  text-align:left;padding:11px 12px 12px;border-radius:11px;
  background:var(--field-2);border:1px solid var(--line);border-left:4px solid var(--r-common);
  color:var(--parch);cursor:pointer;transition:background .15s,box-shadow .15s,transform .08s;
}
.jr-slot:hover{background:#2e2719;transform:translateY(-1px)}
.jr-slot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jr-slot.is-active{background:#2b2417;box-shadow:0 0 0 2px var(--gold)}
.jr-slot.is-empty{opacity:.72}
.jr-slot-cap{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim);font-weight:700}
.jr-slot-nm{font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-slot-lv{font-size:11px;color:var(--parch-dim);font-variant-numeric:tabular-nums}
.jr-slot-lv i{font-style:normal;opacity:.75}
.jr-slot-foot{margin-top:1px}
.jr-slot-flag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:5px}

/* upgrade-status flags (loadout squares) */
.f-up{color:#2a2005;background:var(--gold)}
.f-lock{color:#e6ad6a;background:rgba(224,160,90,.13);border:1px solid rgba(224,160,90,.42)}
.f-max{color:var(--gold);background:rgba(232,183,60,.14)}
.f-dim{color:var(--parch-dim);background:rgba(240,229,203,.07)}

/* the thin level→cap bar (cards + squares) */
.jr-lvbar{height:6px;border-radius:4px;background:rgba(240,229,203,.10);overflow:hidden}
.jr-lvbar.sm{height:5px}
.jr-lvbar>span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ochre),var(--gold))}

/* rarity left-accent, shared by squares + cards */
.r-l-COMMON{border-left-color:var(--r-common)}
.r-l-UNCOMMON{border-left-color:var(--r-uncommon)}
.r-l-RARE{border-left-color:var(--r-rare)}
.r-l-EPIC{border-left-color:var(--r-epic)}
.r-l-LEGENDARY{border-left-color:var(--r-legendary)}

/* ---- 1 · stat totals + record ---- */
.jr-load-foot{display:grid;grid-template-columns:1fr 250px;gap:24px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:820px){.jr-load-foot{grid-template-columns:1fr}}
.jr-bars{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px}
@media (max-width:560px){.jr-bars{grid-template-columns:1fr}}
.jr-bar{display:grid;grid-template-columns:70px 1fr 30px;align-items:center;gap:10px;font-size:12px}
.jr-bar .k{color:var(--parch-dim);text-transform:capitalize}
.jr-bar .track{height:7px;border-radius:4px;background:rgba(240,229,203,.09);overflow:hidden}
.jr-bar .fill{height:100%;background:linear-gradient(90deg,var(--ochre),var(--gold))}
.jr-bar .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;color:var(--parch)}
.jr-record{display:grid;gap:0}
.jr-record>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--parch-dim);
  padding:6px 0;border-bottom:1px dashed var(--line)}
.jr-record>div:last-child{border-bottom:none}
.jr-record b{color:var(--parch);font-variant-numeric:tabular-nums;font-weight:800}

/* ---- 2 · armoury help + tabs ---- */
.jr-help{margin:0 0 16px;font-size:12.5px;line-height:1.65;color:var(--parch-dim)}
.jr-help b{color:var(--parch);font-weight:700}
.jr-help .ic-shard{color:#7ee0a0}
.jr-help .ic-coin{color:var(--gold)}

.jr-gtabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.jr-gtab{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--field-2);color:var(--parch-dim);
  font-size:13px;font-weight:700;cursor:pointer;
}
.jr-gtab:hover{color:var(--parch);border-color:rgba(240,229,203,.3)}
.jr-gtab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#2a2005}
.jr-gtab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jr-gtab-n{font-size:11px;font-weight:800;padding:1px 7px;border-radius:20px;
  background:rgba(240,229,203,.1);color:var(--parch-dim)}
.jr-gtab[aria-selected="true"] .jr-gtab-n{background:rgba(0,0,0,.16);color:#2a2005}

/* ---- 2 · gear cards ---- */
.jr-gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.jr-empty{grid-column:1/-1;padding:44px 20px;text-align:center;color:var(--parch-dim);font-size:13px;
  border:1px dashed var(--line);border-radius:12px}

.jr-gcard{
  position:relative;display:flex;flex-direction:column;gap:9px;
  background:var(--field-2);border:1px solid var(--line);border-left:4px solid var(--r-common);
  border-radius:11px;padding:14px;
}
.jr-gcard.is-eq{border-color:rgba(232,183,60,.5);box-shadow:inset 0 0 0 1px rgba(232,183,60,.32)}
.jr-gcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.jr-gcard-id{min-width:0}
.jr-gcard-name{font-size:14.5px;font-weight:800;line-height:1.2;color:var(--parch)}
.jr-rtag{display:inline-block;margin-top:5px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.jr-rtag.t-COMMON{color:var(--r-common)}
.jr-rtag.t-UNCOMMON{color:var(--r-uncommon)}
.jr-rtag.t-RARE{color:var(--r-rare)}
.jr-rtag.t-EPIC{color:var(--r-epic)}
.jr-rtag.t-LEGENDARY{color:var(--r-legendary)}
.jr-gcard-lv{flex:none;text-align:right;font-size:16px;font-weight:800;color:var(--parch);font-variant-numeric:tabular-nums}
.jr-gcard-lv i{font-style:normal;font-size:12px;font-weight:700;color:var(--parch-dim)}
.jr-lvcap{font-size:10.5px;color:var(--parch-dim);margin-top:-4px}
.jr-gcard-stats{display:flex;flex-wrap:wrap;gap:5px;min-height:20px}
.jr-gcard-acts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px;align-items:stretch}
.jr-gcard-acts .jr-btn{width:100%;padding:8px 6px;font-size:12px}
.jr-eqd{display:flex;align-items:center;justify-content:center;padding:8px 6px;border-radius:8px;
  font-size:12px;font-weight:800;color:var(--gold);background:rgba(232,183,60,.12)}

.jr-stat{
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;
  background:rgba(240,229,203,.08);color:var(--parch-dim);
}
.jr-stat b{color:var(--parch);font-weight:800}

/* ---- 3 · chests ---- */
.jr-chests{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.jr-chest{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  background:var(--field-2);border:1px solid var(--line);border-radius:12px;padding:16px 16px 15px;
}
.jr-chest.has{border-color:rgba(232,183,60,.42)}
.jr-chest-qty{display:flex;flex-direction:column;line-height:1}
.jr-chest-qty b{font-size:30px;font-weight:800;color:var(--gold)}
.jr-chest:not(.has) .jr-chest-qty b{color:var(--parch-dim)}
.jr-chest-qty span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim);margin-top:3px}
.jr-chest-name{font-size:14px;font-weight:800;color:var(--parch)}
.jr-chest-flav{margin:0;min-height:36px}
.jr-chest-acts{display:grid;gap:6px;width:100%;margin-top:2px}
.jr-chest-acts .jr-btn{width:100%;padding:8px;font-size:12px}
.jr-chest-free{font-size:10.5px;color:var(--parch-dim);font-style:italic;padding-top:2px}

/* ---- 4 · stat legend ---- */
.jr-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 26px;font-size:12.5px;line-height:1.5;color:var(--parch-dim)}
@media (max-width:640px){.jr-legend{grid-template-columns:1fr}}
.jr-legend>div{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:baseline}
.jr-legend-k{font-weight:800;color:var(--parch)}

/* ---- drop reveal ---- */
.jr-drops{display:grid;gap:10px;margin-top:16px}
.jr-drop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-radius:8px;background:var(--field-2);
  border-left:3px solid var(--r-common);border-radius:0 8px 8px 0;
  animation:jr-pop .34s cubic-bezier(.2,1.4,.4,1) backwards;
}
.jr-drop.b-COMMON{border-left-color:var(--r-common)}
.jr-drop.b-UNCOMMON{border-left-color:var(--r-uncommon)}
.jr-drop.b-RARE{border-left-color:var(--r-rare)}
.jr-drop.b-EPIC{border-left-color:var(--r-epic)}
.jr-drop.b-LEGENDARY{border-left-color:var(--r-legendary)}
@keyframes jr-pop{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .jr-drop{animation:none}
  .jr-card:hover,.jr-btn:hover{transform:none}
}

/* ---- circuit ladder ---- */
.jr-ladder{display:grid;gap:8px}
.jr-rung{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;
  padding:12px 14px;border-radius:9px;background:var(--field-2);
  border:1px solid var(--line);
}
.jr-rung .no{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:12px;background:rgba(240,229,203,.08);
}
.jr-rung[data-state="done"]{opacity:.55}
.jr-rung[data-state="done"] .no{background:var(--grass);color:#0d1a08}
.jr-rung[data-state="next"]{border-color:var(--gold)}
.jr-rung[data-state="next"] .no{background:var(--gold);color:#2a2005}
.jr-rung[data-state="locked"]{opacity:.30}
.jr-rung .who{font-weight:700;font-size:14px}
.jr-rung .where{font-size:11px;color:var(--parch-dim);letter-spacing:.06em;text-transform:uppercase}

/* ---- the lists (duel lobby) ---- */
.jr-herald{
  border:1px solid var(--line);border-left:4px solid var(--gold);
  background:linear-gradient(90deg,rgba(232,183,60,.10),transparent 60%);
  border-radius:0 12px 12px 0;padding:18px 20px;
}
.jr-herald.busy{border-left-color:var(--crimson);background:linear-gradient(90deg,rgba(184,50,60,.12),transparent 60%)}
.jr-herald .call{font-size:17px;font-weight:700;line-height:1.4}

.jr-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:8px;
  animation:jr-beat 1.6s ease-in-out infinite}
.jr-herald.busy .jr-pulse{background:var(--crimson)}
@keyframes jr-beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.jr-pulse{animation:none}}

.jr-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.jr-grid2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
@media (max-width:900px){.jr-grid2{grid-template-columns:1fr}}

.jr-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--field);border:1px solid var(--gold);color:var(--parch);
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:14px;z-index:60;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

/* ============================================================
   THE LONG ROAD — interactive 50-building map
   ============================================================ */
.jr-roadwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#bfe3f5}
.jr-map-scroll{overflow:visible}
.jr-map{display:block;width:100%;height:auto;user-select:none}


/* Hover/selection must NOT use CSS `transform`: the buildings are positioned with a
   `transform` attribute in JS (translate + scale), and a CSS transform overrides it
   entirely — the building would jump to the corner, leave the cursor, snap back, and
   flicker in a feedback loop. Use a non-transform cue (brightness + drop-shadow). */
.jr-b{cursor:pointer;transition:filter .12s;touch-action:manipulation}
.jr-b:hover{filter:brightness(1.12) drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.jr-b:focus-visible{outline:none;filter:brightness(1.12) drop-shadow(0 0 4px var(--gold))}
.jr-b.sel{filter:brightness(1.15) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.jr-b.sel .jr-b-diff{font-weight:900}
.jr-b-diff{font:800 10px system-ui}
.jr-b-check{font:800 11px system-ui}
.jr-courier{transition:none}

/* the small popup by a clicked building */
.jr-pop{
  position:absolute;z-index:6;width:260px;
  background:var(--field);border:1px solid var(--gold);border-radius:12px;
  padding:14px 15px 15px;box-shadow:0 16px 44px rgba(0,0,0,.55);
  animation:jr-pop-in .16s cubic-bezier(.2,1,.4,1);
}
@keyframes jr-pop-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.jr-pop-x{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--parch-dim);font-size:20px;line-height:1;cursor:pointer}
.jr-pop-x:hover{color:var(--parch)}
.jr-pop-diff{font:700 10px system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.jr-pop-name{font:800 16px system-ui;margin-top:3px;color:var(--parch)}
.jr-pop-name .crown{font-size:11px;color:var(--gold);font-weight:700}
.jr-pop-title{font-size:11.5px;font-style:italic;color:var(--parch-dim);margin-bottom:8px}
.jr-pop-diffbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--parch-dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;margin-bottom:8px}
.jr-pop-diffbar b{color:var(--parch);font-size:13px}
.jr-pop-stats{display:grid;gap:4px;margin-bottom:10px}
.jr-pop-stat{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;font-size:11px;color:var(--parch-dim)}
.jr-pop-bar{height:6px;border-radius:4px;background:rgba(240,229,203,.12);overflow:hidden}
.jr-pop-bar span{display:block;height:100%;background:linear-gradient(90deg,#e8b73c,#e05a3a);border-radius:4px}
.jr-pop-reward{display:flex;gap:8px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.jr-rw-coin{font:800 13px system-ui;color:#e8b73c}
.jr-rw-chest{font:700 10.5px system-ui;color:var(--parch);background:rgba(240,229,203,.1);border-radius:5px;padding:2px 8px}
.jr-pop-ride{width:100%;justify-content:center}

@media (prefers-reduced-motion:reduce){ .jr-pop{animation:none} }
/* On phones the rider popup is a bottom-sheet — always fully on screen and never clipped
   by the map frame (which the absolute-positioned version was). */
@media (max-width:820px){
  .jr-pop{
    position:fixed !important; left:50% !important; right:auto !important;
    top:auto !important; bottom:14px !important; transform:translateX(-50%);
    width:min(94vw,340px) !important; max-height:82vh; overflow-y:auto; z-index:90;
  }
}

/* ---- leveling: mastery bar + clear upgrade states ---- */
.jr-level-help{margin:0 0 14px;line-height:1.7;font-style:normal;font-family:inherit;font-size:12.5px}
.jr-card .lvl .cap{color:var(--parch-dim);font-weight:600}
.jr-mastery{margin:6px 0 8px}
.jr-mastery-bar{height:6px;border-radius:4px;background:rgba(240,229,203,.12);overflow:hidden}
.jr-mastery-bar span{display:block;height:100%;background:linear-gradient(90deg,#7ee0a0,#4ea45a);border-radius:4px;transition:width .3s}
.jr-mastery-tag{font-size:10.5px;color:var(--parch-dim);margin-top:3px}
.jr-up{display:block;text-align:center;padding:8px 6px;border-radius:8px;font:700 11.5px system-ui;line-height:1.3}
.jr-up-max{color:var(--gold);background:rgba(232,183,60,.12)}
.jr-up-locked{color:#e0a05a;background:rgba(224,160,90,.1);border:1px dashed rgba(224,160,90,.4)}
.jr-up-btn{display:flex !important;flex-direction:column;gap:1px;padding:7px 6px !important;line-height:1.25}
.jr-up-lvl{font-weight:800}
.jr-up-cost{font-size:11px;opacity:.85}

/* ---- game stage fullscreen ---- */
.jr-stage-fs{
  position:absolute;top:12px;right:12px;z-index:7;
  background:rgba(20,16,8,.72);color:var(--parch);border:1px solid var(--gold);
  border-radius:8px;padding:7px 12px;font:700 12px system-ui;cursor:pointer;
  transition:opacity .45s ease;
}
.jr-stage-fs:hover{background:rgba(40,32,12,.9)}
/* Video-player fade: after a short idle in fullscreen the exit button melts away; any
   move / tap brings it back (JS toggles .jr-fade-controls). */
.jr.jr-fade-controls .jr-stage-fs{ opacity:0; pointer-events:none; }

/* Mobile guard button — a big tap-target at the bottom-right of the stage. Touch screens
   only (phones have no right-click / keyboard to change stance). */
.jr-stage-guard{
  position:absolute;right:12px;bottom:12px;z-index:6;display:none;
  background:rgba(20,16,8,.8);color:var(--parch);border:1px solid var(--gold);
  border-radius:11px;padding:11px 15px;font:800 14px system-ui;cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
.jr-stage-guard:active{background:rgba(70,56,18,.96)}
/* Only on touch AND only while you're actually aiming a pass (JS adds .is-live during the
   charge phase), so it isn't hanging over the menus and result screens. */
@media (hover:none),(pointer:coarse),(max-width:820px){ .jr-stage-guard.is-live{display:block} }

/* Fullscreen is taken on the whole .jr. A positive rr-* class marks which surface is live:
     rr-game   → the tilt (the canvas)      rr-career → the Long Road map
   The GAME fills the ENTIRE screen — canvas edge to edge, no side bands, no scroll, page
   chrome hidden — on every device. The Career map stays padded and scrollable so it never
   blacks out. Esc always exits (browser default). */
.jr.is-fs{
  max-width:none;width:100%;margin:0;
  background:var(--ink);color:var(--parch);
}
/* GAME surface — edge to edge, nothing around it */
.jr.is-fs.rr-game{ padding:0; overflow:hidden; }
.jr.is-fs.rr-game > .jr-row:first-child,   /* header / nav row */
.jr.is-fs.rr-game #tiltView > .jr-panel{   /* the controls & help panel */
  display:none !important;
}
.jr.is-fs.rr-game #tiltView{ height:100vh; height:100dvh; }
.jr.is-fs.rr-game #tiltView .jr-stage{
  width:100vw; height:100vh; height:100dvh;
  max-height:none; min-height:0; aspect-ratio:auto;
  border:none; border-radius:0; margin:0;
}
/* CAREER + BRAYERY surfaces — padded + scrollable in fullscreen so they are never hidden */
.jr.is-fs.rr-career,
.jr.is-fs.rr-brayery,
.jr.is-fs.rr-lists{
  padding:16px clamp(14px,3.5vw,54px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.jr.is-fs.rr-brayery,
.jr.is-fs.rr-lists{ padding:0; }
@media (max-width:820px){ .jr.is-fs.rr-career{ padding:10px; } }

/* ── The Lists, in-game (mobile-first; reuses the Brayery top-bar look) ── */
.lst{ max-width:720px; margin:0 auto; padding:12px 12px 44px; color:var(--parch); }
.jr.is-fs.rr-lists .lst{ min-height:100dvh; }
.lst-card{ background:var(--field); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:14px; }
.lst-card-head{ margin-bottom:8px; }
.lst-eyebrow{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold); }
.lst-h2{ font-size:20px; margin:2px 0 0; }
.lst-flav{ font-family:Georgia,serif; font-style:italic; font-size:13px; color:var(--parch-dim); margin:0 0 12px; line-height:1.5; }
.lst-herald{ background:var(--field-2); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:14px; }
.lst-tag{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold); }
.lst-call{ font-size:15px; font-weight:700; line-height:1.4; margin-top:6px; }
.lst-acts{ margin-top:14px; gap:10px; flex-wrap:wrap; }
.lst-switch{ text-align:center; margin:4px 0 16px; }

/* ═══════════════════════ THE BRAYERY — in-game, mobile-first ═══════════════════════
   A stables & armoury that lives inside the game (surface rr-brayery), so it never leaves
   fullscreen. Namespaced .brz-* so it is self-contained. Built mobile-first; enhanced up. */
.brz{ max-width:1040px; margin:0 auto; padding:12px 12px 44px; color:var(--parch); }
.jr.is-fs.rr-brayery .brz{ min-height:100dvh; }

/* rarity accent, shared by slots / cards / drops */
.brz .r-COMMON{ --rc:var(--r-common); } .brz .r-UNCOMMON{ --rc:var(--r-uncommon); }
.brz .r-RARE{ --rc:var(--r-rare); } .brz .r-EPIC{ --rc:var(--r-epic); } .brz .r-LEGENDARY{ --rc:var(--r-legendary); }

/* sticky top bar */
.brz-top{
  position:relative; z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:0 -12px 16px;
  background:rgba(15,11,6,.92); border-bottom:1px solid var(--line);
}
.jr.is-fs .brz-top{ position:sticky; top:0; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.brz-back{
  flex:none; background:var(--field-2); color:var(--parch); border:1px solid var(--line);
  border-radius:9px; padding:9px 13px; font:800 13px system-ui; cursor:pointer;
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.brz-back:active{ background:#2b2417; }
.brz-heading{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.brz-eyebrow{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.brz-h1{ font-size:17px; font-weight:800; color:var(--parch); }
.brz-curs{ margin-left:auto; display:flex; gap:7px; }
.brz-cur{
  display:inline-flex; align-items:baseline; gap:3px; background:var(--field-2);
  border:1px solid var(--line); border-radius:9px; padding:6px 10px; font-variant-numeric:tabular-nums;
}
.brz-cur b{ font-size:15px; font-weight:800; } .brz-cur i{ font-style:normal; font-size:12px; }
.brz-cur.c-shard b, .brz-cur.c-shard i{ color:#7ee0a0; }
.brz-cur.c-coin b, .brz-cur.c-coin i{ color:var(--gold); }

/* hero: live portrait + stat totals */
.brz-hero{
  display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:18px;
  background:var(--field); border:1px solid var(--line); border-radius:16px; padding:12px;
}
.brz-doll{ margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  aspect-ratio:16/10; background:linear-gradient(#3f7fb0,#8fc4dd); }
.brz-doll canvas{ display:block; width:100%; height:100%; }
.brz-hero-body{ display:flex; flex-direction:column; gap:10px; justify-content:center; }
.brz-doll-name{ font-size:15px; font-weight:800; color:var(--parch); }
.brz-bars{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; }
.brz-bar{ display:grid; grid-template-columns:28px 1fr 26px; align-items:center; gap:7px; font-size:11px; }
.brz-bar .k{ color:var(--parch-dim); text-transform:uppercase; letter-spacing:.03em; font-weight:800; }
.brz-bar .track{ height:6px; border-radius:4px; background:rgba(240,229,203,.10); overflow:hidden; }
.brz-bar .fill{ display:block; height:100%; min-width:3px; border-radius:4px; background:linear-gradient(90deg,var(--ochre),var(--gold)); }
.brz-bar .v{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--parch); }
.brz-balance{ font-size:11px; color:var(--parch-dim); } .brz-balance b{ color:var(--parch); }

/* section labels */
.brz-label{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 2px 9px; font-size:12.5px; font-weight:800; color:var(--parch); }
.brz-label-hint{ font-size:10.5px; font-weight:600; font-style:italic; color:var(--parch-dim); }

/* loadout slots */
.brz-slots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.brz-slot{ --rc:var(--ochre); display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0;
  background:var(--field-2); border:1px solid var(--line); border-left:3px solid var(--rc);
  border-radius:11px; padding:9px 11px; color:var(--parch); cursor:pointer;
  touch-action:manipulation; transition:background .12s, box-shadow .12s; }
.brz-slot:active{ background:#2b2417; }
.brz-slot.is-active{ background:#2b2417; box-shadow:0 0 0 2px var(--gold); }
.brz-slot.is-empty{ opacity:.7; }
.brz-slot-cap{ font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--parch-dim); font-weight:800; }
.brz-slot-cap i{ font-style:normal; color:var(--gold); }
.brz-slot-nm{ font-size:13px; font-weight:800; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brz-slot-lv{ font-size:10.5px; color:var(--parch-dim); font-variant-numeric:tabular-nums; }
.brz-slot-lv i{ font-style:normal; opacity:.7; }
.brz-slot-foot{ margin-top:2px; }
.brz-flag{ display:inline-block; font-size:9px; font-weight:800; padding:2px 7px; border-radius:5px; }
.brz-flag.f-up{ background:rgba(126,224,160,.16); color:#7ee0a0; }
.brz-flag.f-max{ background:rgba(251,191,36,.16); color:var(--r-legendary); }
.brz-flag.f-lock, .brz-flag.f-dim{ background:rgba(240,229,203,.07); color:var(--parch-dim); }

/* level bars (slots + cards) */
.brz-lvbar{ height:5px; border-radius:4px; background:rgba(240,229,203,.10); overflow:hidden; margin-top:2px; }
.brz-lvbar.lg{ height:7px; margin:8px 0 4px; }
.brz-lvbar>span{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--rc,var(--ochre)),var(--gold)); }

/* armoury panel */
.brz-arm{ background:var(--field); border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:18px; }
.brz-arm-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.brz-arm-head span{ font-size:13px; font-weight:800; color:var(--gold); text-transform:capitalize; }
.brz-arm-close{ flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--field-2); color:var(--parch-dim); font-size:13px; cursor:pointer; }
.brz-arm-help{ margin:0 0 12px; font-size:11.5px; line-height:1.55; color:var(--parch-dim); }
.brz-arm-help b{ color:var(--parch); font-weight:700; }
.brz-arm-help .i-shard{ color:#7ee0a0; } .brz-arm-help .i-coin{ color:var(--gold); }
.brz-cards{ display:grid; grid-template-columns:1fr; gap:10px; }
.brz-card{ --rc:var(--ochre); background:var(--field-2); border:1px solid var(--line);
  border-left:3px solid var(--rc); border-radius:12px; padding:11px 12px; }
.brz-card.is-eq{ box-shadow:inset 0 0 0 1px rgba(232,183,60,.3); }
.brz-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.brz-card-nm{ font-size:14px; font-weight:800; color:var(--parch); line-height:1.15; }
.brz-rtag{ display:inline-block; margin-top:4px; font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.brz-rtag.t-COMMON{ color:var(--r-common); } .brz-rtag.t-UNCOMMON{ color:var(--r-uncommon); }
.brz-rtag.t-RARE{ color:var(--r-rare); } .brz-rtag.t-EPIC{ color:var(--r-epic); } .brz-rtag.t-LEGENDARY{ color:var(--r-legendary); }
.brz-card-lv{ flex:none; font-size:15px; font-weight:800; color:var(--parch); font-variant-numeric:tabular-nums; }
.brz-card-lv i{ font-style:normal; font-size:11px; color:var(--parch-dim); }
.brz-card-cap{ font-size:10px; color:var(--parch-dim); margin-bottom:8px; }
.brz-card-stats{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; min-height:18px; }
.brz-chip{ font-size:10.5px; background:rgba(240,229,203,.07); border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--parch-dim); }
.brz-chip b{ color:var(--parch); }
.brz-card-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.brz-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--field); color:var(--parch); border:1px solid var(--line); border-radius:9px;
  padding:10px 8px; font:800 12.5px system-ui; cursor:pointer; text-align:center; touch-action:manipulation; }
.brz-btn:active{ transform:translateY(1px); }
.brz-btn.gold{ background:var(--gold); border-color:#f5cf70; color:#2a2005; }
.brz-btn:disabled{ opacity:.4; cursor:default; }
.brz-btn em{ font-style:normal; font-size:10px; font-weight:700; opacity:.85; }
.brz-eqd{ display:flex; align-items:center; justify-content:center; padding:10px 8px; border-radius:9px;
  font:800 12px system-ui; color:var(--gold); background:rgba(232,183,60,.10); border:1px solid rgba(232,183,60,.3); }
.brz-up{ display:flex; align-items:center; justify-content:center; padding:10px 8px; border-radius:9px; font:700 11px system-ui; text-align:center; }
.brz-up.is-max{ color:var(--r-legendary); background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.28); }
.brz-up.is-lock{ color:var(--parch-dim); background:rgba(240,229,203,.05); border:1px solid var(--line); }
.brz-empty{ padding:22px; text-align:center; color:var(--parch-dim); font-size:12.5px; }

/* chests */
.brz-chests{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; }
.brz-chest{ background:var(--field-2); border:1px solid var(--line); border-radius:12px; padding:11px 12px; }
.brz-chest.has{ border-color:rgba(232,183,60,.4); }
.brz-chest-top{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.brz-chest-qty{ font-size:11px; color:var(--parch-dim); }
.brz-chest-qty b{ font-size:20px; font-weight:800; color:var(--gold); margin-right:2px; }
.brz-chest:not(.has) .brz-chest-qty b{ color:var(--parch-dim); }
.brz-chest-nm{ margin-left:auto; font-size:14px; font-weight:800; color:var(--parch); }
.brz-chest-flav{ font-family:Georgia,serif; font-style:italic; font-size:11.5px; color:var(--parch-dim); margin-bottom:9px; }
.brz-chest-acts{ display:flex; gap:8px; }
.brz-chest-acts .brz-btn{ flex:1; flex-direction:row; }
.brz-chest-free{ flex:1; display:flex; align-items:center; justify-content:center; font-size:11px; font-style:italic; color:var(--parch-dim); }

/* chest drops */
.brz-drops{ display:grid; gap:8px; margin-bottom:6px; }
.brz-drop{ --rc:var(--ochre); display:flex; gap:10px; justify-content:space-between; align-items:center;
  background:var(--field-2); border:1px solid var(--line); border-left:3px solid var(--rc);
  border-radius:11px; padding:10px 12px; animation:brz-pop .3s backwards; }
@keyframes brz-pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.brz-drop-nm{ font-size:13px; font-weight:800; color:var(--parch); }
.brz-drop-fl{ font-family:Georgia,serif; font-style:italic; font-size:11px; color:var(--parch-dim); }
.brz-drop-meta{ text-align:right; white-space:nowrap; }
.brz-drop-new{ font-size:10px; color:var(--parch-dim); margin-top:4px; }

/* record + stat legend (collapsible) */
.brz-more{ margin-top:16px; background:var(--field); border:1px solid var(--line); border-radius:14px; padding:2px 14px; }
.brz-more summary{ cursor:pointer; padding:12px 0; font-size:12.5px; font-weight:800; color:var(--parch); list-style:none; }
.brz-more summary::-webkit-details-marker{ display:none; }
.brz-more summary::after{ content:'▾'; float:right; color:var(--parch-dim); }
.brz-more[open] summary::after{ content:'▴'; }
.brz-record{ display:grid; margin-bottom:12px; }
.brz-record>div{ display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--parch-dim); padding:8px 0; border-bottom:1px solid var(--line); }
.brz-record>div:last-child{ border-bottom:none; }
.brz-record b{ color:var(--parch); font-weight:800; font-variant-numeric:tabular-nums; }
.brz-legend{ display:grid; gap:8px; padding-bottom:14px; }
.brz-legend>div{ font-size:11.5px; color:var(--parch-dim); line-height:1.4; }
.brz-legend b{ display:inline-block; min-width:66px; color:var(--gold); font-weight:800; }
.brz-legend span{ color:var(--parch-dim); }

/* wider screens */
@media (min-width:640px){
  .brz{ padding:16px 18px 52px; }
  .brz-hero{ grid-template-columns:300px 1fr; align-items:center; }
  .brz-doll{ aspect-ratio:1/1; }
  .brz-slots{ grid-template-columns:repeat(4,1fr); }
  .brz-cards{ grid-template-columns:1fr 1fr; }
  .brz-chests{ grid-template-columns:repeat(3,1fr); }
  .brz-chest-acts{ flex-direction:column; }
}
@media (min-width:960px){ .brz-cards{ grid-template-columns:repeat(3,1fr); } }
/* very narrow phones: tighten the Brayery top bar so the title stays on one line */
@media (max-width:430px){
  .brz-eyebrow{ display:none; }
  .brz-h1{ font-size:16px; }
  .brz-back{ padding:9px 11px; font-size:12.5px; }
  .brz-cur{ padding:6px 8px; } .brz-cur b{ font-size:14px; }
  .brz-top{ gap:8px; }
}