/* ============================================================
   menu.css — the menu system (js/menu.js): the pause hub and every screen it opens

   Every screen is a .mn element holding one .mn-frame of a fixed DESIGN size (1200 x 660). The page scales the whole frame
   to the window with CSS zoom: --mn (set by fitMenu() in menu.js, 0.35 to 1.5). Zoom scales text and every old px / rem
   rule inside it for free, so inside the frame a design pixel is just 1px (--ux) and a design rem 1rem (--ur); sizes are
   still written calc(N * var(--ux)) so the unit is named. (The battle screen cannot use zoom - its effects are placed from
   getBoundingClientRect - so it scales its sizes instead; the menus have no such positioning.) Nothing is ever cut off:
   a long list scrolls inside its own pane, and a 1080p screen gets bigger, sharper menus.
   ============================================================ */

.mn, .mn-dialog { --ux: 1px; --ur: 1rem; }

/* ── the screen, the frame, the three bands ───────────────────── */
.mn {
  display: none; position: absolute; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 38%, rgba(18,12,38,0.80) 0%, rgba(3,3,9,0.95) 100%);
  backdrop-filter: blur(calc(5 * var(--ux))); -webkit-backdrop-filter: blur(calc(5 * var(--ux)));
  font-family: 'Rajdhani', sans-serif; color: var(--text-body);
}
.mn.active { display: flex; animation: mnFade 0.18s ease-out; }
.mn-frame {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: calc(1200 * var(--ux)); height: calc(660 * var(--ux)); zoom: var(--mn, 1);
  background: linear-gradient(180deg, rgba(22,16,44,0.94), rgba(9,7,20,0.96));
  border: 1px solid rgba(212,168,67,0.3); border-radius: calc(18 * var(--ux));
  box-shadow: 0 calc(24 * var(--ux)) calc(80 * var(--ux)) rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03);
  animation: mnRise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes mnFade { from { opacity: 0; } }
@keyframes mnRise { from { opacity: 0; transform: translateY(calc(14 * var(--ux))) scale(0.985); } }

.mn-head {
  display: flex; align-items: center; gap: calc(18 * var(--ux)); flex-shrink: 0;
  padding: calc(12 * var(--ux)) calc(22 * var(--ux));
  border-bottom: 1px solid rgba(212,168,67,0.2);
  background: linear-gradient(180deg, rgba(212,168,67,0.08), transparent);
}
.mn-title { display: flex; align-items: center; gap: calc(12 * var(--ux)); }
.mn-ico { font-size: calc(1.6 * var(--ur)); line-height: 1; }
.mn-title h2 {
  margin: 0; font-family: 'Cinzel', serif; font-size: calc(1.35 * var(--ur)); color: var(--gold);
  letter-spacing: calc(4 * var(--ux)); text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 calc(18 * var(--ux)) rgba(212,168,67,0.4);
}
.mn-count { font-size: calc(0.9 * var(--ur)); color: var(--text-dim); letter-spacing: 1px; white-space: nowrap; }
.mn-count.wallet { color: var(--gold-light); font-weight: 700; font-size: calc(1 * var(--ur)); }
.mn-head-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(10 * var(--ux)); }
.mn-actions { display: flex; align-items: center; gap: calc(10 * var(--ux)); }

.mn-jump { display: flex; gap: calc(3 * var(--ux)); padding: calc(3 * var(--ux)); border-radius: calc(10 * var(--ux)); background: rgba(20,20,36,0.75); border: 1px solid rgba(255,255,255,0.05); }
.mn-jump-btn {
  width: calc(34 * var(--ux)); height: calc(30 * var(--ux)); border: none; border-radius: calc(8 * var(--ux));
  background: transparent; font-size: calc(1 * var(--ur)); line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, background 0.15s;
}
.mn-jump-btn:hover { opacity: 1; background: rgba(212,168,67,0.14); }
.mn-jump-btn.here { opacity: 1; background: rgba(212,168,67,0.22); box-shadow: inset 0 0 0 1px rgba(212,168,67,0.5); }
.mn-back {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: calc(0.8 * var(--ur)); letter-spacing: calc(2 * var(--ux)); text-transform: uppercase;
  padding: calc(8 * var(--ux)) calc(16 * var(--ux)); border-radius: calc(20 * var(--ux));
  border: 1px solid rgba(212,168,67,0.4); background: transparent; color: var(--gold-light); cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.mn-back:hover { background: rgba(212,168,67,0.14); box-shadow: 0 0 calc(14 * var(--ux)) rgba(212,168,67,0.25); }

.mn-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--ux)); padding: calc(16 * var(--ux)) calc(22 * var(--ux)); }
.mn-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,168,67,0.3) transparent; }
.mn-split { display: flex; flex-direction: row; gap: calc(18 * var(--ux)); }
.mn-split > * { min-height: 0; }

.mn-foot {
  display: flex; align-items: center; gap: calc(22 * var(--ux)); flex-shrink: 0;
  padding: calc(8 * var(--ux)) calc(22 * var(--ux)); border-top: 1px solid rgba(255,255,255,0.06);
  font-size: calc(0.8 * var(--ur)); color: #7c7c90; letter-spacing: 0.04em; background: rgba(0,0,0,0.18);
}
.mn-foot .mn-foot-r { margin-left: auto; }
.mn kbd, .mn-dialog kbd {
  display: inline-block; min-width: calc(22 * var(--ux)); padding: calc(1 * var(--ux)) calc(6 * var(--ux)); margin: 0 calc(1 * var(--ux));
  font-family: 'Rajdhani', sans-serif; font-size: 0.92em; font-weight: 700; text-align: center; color: var(--gold-light);
  background: rgba(212,168,67,0.1); border: 1px solid rgba(212,168,67,0.3); border-radius: calc(6 * var(--ux));
}

/* the keyboard cursor */
.mn :focus-visible, .mn-dialog :focus-visible { outline: calc(2 * var(--ux)) solid var(--gold); outline-offset: calc(2 * var(--ux)); }
.mn [tabindex]:focus, .mn-dialog [tabindex]:focus { outline: none; }
.mn [tabindex]:focus-visible { outline: calc(2 * var(--ux)) solid var(--gold); }

/* ── small parts ──────────────────────────────────────────────── */
.mn-btn {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: calc(0.9 * var(--ur)); letter-spacing: 1px; text-transform: uppercase;
  padding: calc(8 * var(--ux)) calc(18 * var(--ux)); border-radius: calc(8 * var(--ux));
  border: 1px solid #3a3a52; background: rgba(24,22,40,0.95); color: var(--text-soft); cursor: pointer; transition: all 0.16s;
}
.mn-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-light); background: rgba(46,38,16,0.9); }
.mn-btn.primary { border-color: rgba(212,168,67,0.65); color: var(--gold-light); }
.mn-btn.danger:hover:not(:disabled) { border-color: var(--red); color: #ff8a7a; background: rgba(54,16,16,0.9); }
.mn-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.mn-btn.sm { padding: calc(4 * var(--ux)) calc(12 * var(--ux)); font-size: calc(0.8 * var(--ur)); flex-shrink: 0; }
.mn-tabs { display: flex; gap: calc(6 * var(--ux)); flex-wrap: wrap; }
.mn-tab {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: calc(0.85 * var(--ur)); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  padding: calc(7 * var(--ux)) calc(14 * var(--ux)); border-radius: calc(8 * var(--ux));
  border: 1px solid #2a2a3a; background: rgba(20,20,36,0.8); color: #7c7c90; cursor: pointer; transition: all 0.16s;
}
.mn-tab:hover { color: #d0d0dc; border-color: rgba(212,168,67,0.3); }
.mn-tab.active { background: rgba(212,168,67,0.16); color: var(--gold); border-color: rgba(212,168,67,0.5); }
.chip-n { margin-left: calc(4 * var(--ux)); font-size: 0.85em; font-weight: 500; opacity: 0.6; }
.mn-input, .mn-select {
  font-family: 'Rajdhani', sans-serif; font-size: calc(0.9 * var(--ur)); color: var(--text-body);
  padding: calc(7 * var(--ux)) calc(12 * var(--ux)); border-radius: calc(8 * var(--ux)); border: 1px solid #34344a; background: rgba(14,12,28,0.9);
}
.mn-input { width: calc(230 * var(--ux)); }
.mn-input:focus, .mn-select:focus { border-color: rgba(212,168,67,0.7); outline: none; }
.mn-empty { color: var(--text-faint); text-align: center; padding: calc(30 * var(--ux)) calc(20 * var(--ux)); font-size: calc(1 * var(--ur)); line-height: 1.6; grid-column: 1 / -1; }
.mn-empty.big { font-size: calc(1.3 * var(--ur)); padding-top: calc(80 * var(--ux)); } .mn-empty small { font-size: 0.7em; color: var(--text-dim); }
.mn-ring {                                        /* a round progress meter: set --p to 0-100 */
  --p: 0; position: relative; width: calc(76 * var(--ux)); height: calc(76 * var(--ux)); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255,255,255,0.08) 0); flex-shrink: 0;
}
.mn-ring::before { content: ''; position: absolute; inset: calc(7 * var(--ux)); border-radius: 50%; background: #0e0b1c; }
.mn-ring b { position: relative; font-family: 'Cinzel', serif; font-size: calc(0.9 * var(--ur)); color: var(--gold-light); }
.mn-ring.sm { width: calc(40 * var(--ux)); height: calc(40 * var(--ux)); } .mn-ring.sm::before { inset: calc(5 * var(--ux)); }
.mn-segs { display: flex; gap: calc(4 * var(--ux)); padding: calc(3 * var(--ux)); background: rgba(20,20,36,0.8); border-radius: calc(10 * var(--ux)); flex-shrink: 0; }
.mn-seg {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: calc(0.9 * var(--ur)); letter-spacing: 1px; text-transform: uppercase;
  padding: calc(7 * var(--ux)) calc(16 * var(--ux)); border: none; border-radius: calc(8 * var(--ux)); background: transparent; color: #7c7c90; cursor: pointer;
}
.mn-seg:hover { color: #d0d0dc; } .mn-seg.active { background: rgba(212,168,67,0.2); color: var(--gold); }

/* ── the dialog ───────────────────────────────────────────────── */
.mn-dialog { display: none; position: absolute; inset: 0; z-index: 80; align-items: center; justify-content: center; background: rgba(2,2,8,0.74); font-family: 'Rajdhani', sans-serif; }
.mn-dialog.active { display: flex; animation: mnFade 0.15s ease-out; }
.mn-dialog-box {
  width: calc(540 * var(--ux)); zoom: var(--mn, 1); padding: calc(26 * var(--ux)) calc(30 * var(--ux)); border-radius: calc(16 * var(--ux));
  background: linear-gradient(180deg, #1c1536, #0e0a1e); border: 1px solid rgba(212,168,67,0.5);
  box-shadow: 0 calc(20 * var(--ux)) calc(70 * var(--ux)) rgba(0,0,0,0.8); animation: mnRise 0.2s ease-out;
}
.mn-dialog-box h3 { margin: 0 0 calc(10 * var(--ux)); font-family: 'Cinzel', serif; font-size: calc(1.2 * var(--ur)); color: var(--gold); letter-spacing: calc(2 * var(--ux)); }
.mn-dialog-box p { margin: 0; color: #b8b0a0; line-height: 1.55; font-size: calc(1 * var(--ur)); }
.mn-dialog-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(10 * var(--ux)); margin-top: calc(22 * var(--ux)); }

/* ── the Waypoint's destinations (waypoint.js, inside the dialog) ─ */
.wp-list { display: flex; flex-direction: column; gap: calc(6 * var(--ux)); margin-top: calc(14 * var(--ux)); }
.wp-dest {
  display: flex; align-items: center; gap: calc(12 * var(--ux)); text-align: left; cursor: pointer; width: 100%;
  padding: calc(8 * var(--ux)) calc(14 * var(--ux)); border-radius: calc(10 * var(--ux));
  background: rgba(20,20,36,0.85); border: 1px solid #2a2a3a; border-left: calc(4 * var(--ux)) solid var(--c, #888);
  color: var(--text-body); font-family: 'Rajdhani', sans-serif; transition: border-color 0.15s, background 0.15s;
}
.wp-dest:hover:not(:disabled), .wp-dest:focus-visible { background: rgba(212,168,67,0.14); border-color: var(--c, var(--gold)); }
.wp-ico { font-size: calc(1.5 * var(--ur)); width: calc(34 * var(--ux)); text-align: center; flex-shrink: 0; }
.wp-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wp-txt b { font-family: 'Cinzel', serif; font-size: calc(1.0 * var(--ur)); letter-spacing: calc(1 * var(--ux)); color: var(--c, var(--gold)); }
.wp-txt small { font-size: calc(0.8 * var(--ur)); color: var(--text-muted); line-height: 1.3; }
.wp-state { font-size: calc(1.0 * var(--ur)); color: var(--text-dim); flex-shrink: 0; }
.wp-dest.here { border-style: dashed; opacity: 0.75; cursor: default; }
.wp-dest.shut { opacity: 0.5; cursor: not-allowed; }
.wp-dest.shut .wp-txt b { color: var(--text-dim); }
/* the compact list (the fast-travel menu): two columns of slim rows in a wider box */
.mn-dialog.wide .mn-dialog-box { width: calc(700 * var(--ux)); padding: calc(20 * var(--ux)) calc(24 * var(--ux)); }
.wp-list.compact { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: calc(5 * var(--ux)); margin-top: calc(10 * var(--ux)); }
.wp-list.compact .wp-dest { padding: calc(4 * var(--ux)) calc(10 * var(--ux)); gap: calc(8 * var(--ux)); border-radius: calc(8 * var(--ux)); }
.wp-list.compact .wp-ico { font-size: calc(1.1 * var(--ur)); width: calc(22 * var(--ux)); }
.wp-list.compact .wp-txt b { font-size: calc(0.85 * var(--ur)); }
.wp-list.compact .wp-txt small { font-size: calc(0.72 * var(--ur)); line-height: 1.2; }
.wp-list.compact .wp-state { font-size: calc(0.85 * var(--ur)); }

/* ── the pause hub ────────────────────────────────────────────── */
.mn-frame.hub { display: grid; grid-template-columns: calc(380 * var(--ux)) 1fr; grid-template-rows: 1fr auto; }
.hub-left { padding: calc(24 * var(--ux)) calc(26 * var(--ux)) calc(14 * var(--ux)); display: flex; flex-direction: column; min-height: 0; }
.hub-logo h2 { margin: 0; font-family: 'Cinzel', serif; font-size: calc(1.45 * var(--ur)); color: var(--gold); letter-spacing: calc(3 * var(--ux)); white-space: nowrap; text-transform: uppercase; text-shadow: 0 0 calc(30 * var(--ux)) rgba(212,168,67,0.5); }
.hub-logo p { margin: calc(2 * var(--ux)) 0 calc(14 * var(--ux)); font-size: calc(0.8 * var(--ur)); color: var(--text-faint); letter-spacing: calc(4 * var(--ux)); text-transform: uppercase; }
.hub-menu { display: flex; flex-direction: column; gap: calc(4 * var(--ux)); }
.hub-item {
  display: flex; align-items: center; gap: calc(14 * var(--ux)); width: 100%; min-height: calc(40 * var(--ux)); padding: calc(4 * var(--ux)) calc(14 * var(--ux));
  border: 1px solid transparent; border-left: calc(3 * var(--ux)) solid transparent; border-radius: calc(10 * var(--ux));
  background: transparent; color: var(--text-soft); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: calc(0.9 * var(--ur)); letter-spacing: calc(2 * var(--ux)); text-transform: uppercase;
}
.hub-item:hover, .hub-item:focus-visible { background: rgba(212,168,67,0.12); border-left-color: var(--gold); color: var(--gold-light); transform: translateX(calc(3 * var(--ux))); }
.hub-item .hi-ico { width: calc(28 * var(--ux)); text-align: center; font-size: calc(1.15 * var(--ur)); }
.hub-item .hi-label { flex: 1; display: flex; flex-direction: column; }
.hub-item .hi-label small { font-family: 'Rajdhani', sans-serif; font-weight: 500; font-size: calc(0.72 * var(--ur)); letter-spacing: 0.04em; text-transform: none; color: #7c8a84; }
.hub-item kbd { font-family: 'Rajdhani', sans-serif; letter-spacing: 0; }
.hub-item.primary { color: var(--gold-light); }
.hub-item.save { color: #5cc4a8; } .hub-item.save:hover, .hub-item.save:focus-visible { background: rgba(68,170,153,0.14); border-left-color: #5cc4a8; color: #7ee0c6; }
.hub-item.danger:hover, .hub-item.danger:focus-visible { background: rgba(192,57,43,0.14); border-left-color: var(--red); color: #ff8a7a; }
.hub-sep { height: 1px; margin: calc(6 * var(--ux)) calc(8 * var(--ux)); background: linear-gradient(90deg, transparent, rgba(212,168,67,0.3), transparent); }
.mn-frame.hub .mn-foot { grid-column: 1 / -1; }

.hub-right {
  display: grid; grid-template-columns: calc(250 * var(--ux)) 1fr; gap: calc(26 * var(--ux)); align-content: start;
  padding: calc(26 * var(--ux)) calc(30 * var(--ux)); border-left: 1px solid rgba(212,168,67,0.12); min-height: 0; overflow: hidden;
  background: radial-gradient(circle at 24% 18%, rgba(100,76,180,0.16), transparent 60%);
}
.hub-lead { --aura: #7a90ff; text-align: center; }
.hub-holo {
  position: relative; width: calc(230 * var(--ux)); height: calc(230 * var(--ux)); margin: 0 auto calc(14 * var(--ux)); border-radius: calc(12 * var(--ux)); overflow: hidden; background: #0a0818;
  box-shadow: 0 0 0 calc(2 * var(--ux)) rgba(255,255,255,0.5), 0 0 calc(40 * var(--ux)) var(--aura), 0 calc(16 * var(--ux)) calc(30 * var(--ux)) rgba(0,0,0,0.7);
  transform: perspective(calc(900 * var(--ux))) rotateY(-9deg) rotateX(3deg); animation: hubFloat 4s ease-in-out infinite;
}
.hub-holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(112deg, transparent 38%, rgba(150,220,255,0.3) 46%, rgba(255,255,255,0.5) 50%, rgba(255,170,240,0.3) 54%, transparent 62%) no-repeat; background-size: 300% 100%; animation: holoSweep 6.5s ease-in-out infinite; }
.hub-art { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes hubFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-5 * var(--ux)); } }
.hub-lead-name { font-family: 'Cinzel', serif; font-size: calc(1.15 * var(--ur)); color: var(--gold-light); }
.hub-lead-sub { margin-top: calc(2 * var(--ux)); font-size: calc(0.85 * var(--ur)); color: #8a9ab5; }
.hub-lead-hp { display: flex; align-items: center; gap: calc(8 * var(--ux)); margin: calc(8 * var(--ux)) calc(10 * var(--ux)) 0; }
.hub-lead-hp small { font-size: calc(0.8 * var(--ur)); color: #9a8a78; white-space: nowrap; }
.hub-lead-cap { margin-top: calc(10 * var(--ux)); font-size: calc(0.66 * var(--ur)); letter-spacing: calc(4 * var(--ux)); color: #5e5e72; }
.hub-hp { position: relative; flex: 1; height: calc(8 * var(--ux)); border-radius: calc(6 * var(--ux)); background: #1a1a2a; overflow: hidden; display: block; }
.hub-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: inherit; }
.hub-hp i.low { background: #e67e22; } .hub-hp i.crit { background: var(--red); }
.hub-info { min-width: 0; display: flex; flex-direction: column; gap: calc(12 * var(--ux)); }
.hub-who { display: flex; align-items: baseline; gap: calc(12 * var(--ux)); }
.hub-who b { font-family: 'Cinzel', serif; font-size: calc(1.5 * var(--ur)); color: var(--gold-light); letter-spacing: calc(1 * var(--ux)); }
.hub-who span { font-size: calc(0.8 * var(--ur)); color: var(--text-faint); letter-spacing: 2px; text-transform: uppercase; }
.hub-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--ux)); }
.hub-chips span { padding: calc(4 * var(--ux)) calc(12 * var(--ux)); border-radius: calc(20 * var(--ux)); background: rgba(20,20,36,0.8); border: 1px solid rgba(255,255,255,0.07); font-size: calc(0.9 * var(--ur)); color: var(--text-soft); }
.hub-goal { padding: calc(10 * var(--ux)) calc(14 * var(--ux)); border-radius: calc(10 * var(--ux)); background: linear-gradient(90deg, rgba(212,168,67,0.12), rgba(212,168,67,0.03)); border-left: calc(3 * var(--ux)) solid var(--gold); }
.hub-goal i { font-style: normal; font-size: calc(0.66 * var(--ur)); letter-spacing: calc(3 * var(--ux)); color: var(--gold); }
.hub-goal p { margin: calc(2 * var(--ux)) 0 0; font-size: calc(1 * var(--ur)); color: #e6dcc4; }
.hub-roster-head { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(0.72 * var(--ur)); letter-spacing: calc(3 * var(--ux)); color: var(--text-warm-dim); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: calc(4 * var(--ux)); }
.hub-roster-head small { letter-spacing: 0; font-size: 1.1em; color: #7c7c90; }
.hub-roster { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--ux)) calc(14 * var(--ux)); }
.hub-mon { display: grid; grid-template-columns: calc(34 * var(--ux)) 1fr auto; grid-template-rows: auto auto; column-gap: calc(8 * var(--ux)); align-items: center; padding: calc(4 * var(--ux)) calc(6 * var(--ux)); border-radius: calc(8 * var(--ux)); background: rgba(20,20,36,0.6); }
.hub-mon.down { opacity: 0.45; filter: grayscale(0.8); }
.hub-mon-art { grid-row: 1 / 3; width: calc(34 * var(--ux)); height: calc(34 * var(--ux)); border-radius: calc(6 * var(--ux)); object-fit: cover; }
.hub-mon-name { font-size: calc(0.9 * var(--ur)); color: var(--gold-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hub-mon-lv { font-size: calc(0.8 * var(--ur)); color: #8a9ab5; }
.hub-mon .hub-hp { grid-column: 2 / 4; height: calc(5 * var(--ux)); }
.hub-rings { display: flex; gap: calc(14 * var(--ux)); margin-top: auto; padding-top: calc(4 * var(--ux)); }
.hub-ring { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--ux)); }
.hub-ring span { font-size: calc(0.8 * var(--ur)); color: var(--text-soft); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.hub-ring small { font-size: calc(0.75 * var(--ur)); color: #7c7c90; }

/* ── the Journey ──────────────────────────────────────────────── */
.mn-body.jr { gap: calc(14 * var(--ux)); }
.jr-map { position: relative; flex-shrink: 0; height: calc(288 * var(--ux)); }
.jr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jr-edge { stroke: rgba(255,255,255,0.1); stroke-width: calc(5 * var(--ux)); stroke-linecap: round; fill: none; }
.jr-edge.fill { stroke: var(--gold); filter: drop-shadow(0 0 calc(5 * var(--ux)) rgba(212,168,67,0.7)); }
.jr-node {
  position: absolute; transform: translate(-50%, -50%); width: calc(150 * var(--ux)); padding: 0; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--ux)); color: var(--text-soft); --c: #aaa; --p: 0;
}
.jr-ring {
  position: relative; width: calc(86 * var(--ux)); height: calc(86 * var(--ux)); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,0.1) 0); transition: transform 0.18s, box-shadow 0.18s;
}
.jr-core { position: relative; width: calc(70 * var(--ux)); height: calc(70 * var(--ux)); border-radius: 50%; display: grid; place-items: center; font-size: calc(2.1 * var(--ur)); background: radial-gradient(circle at 35% 30%, #2a2248, #0d0a1c); box-shadow: inset 0 0 calc(14 * var(--ux)) rgba(0,0,0,0.6); }
.jr-tick { position: absolute; right: calc(-2 * var(--ux)); bottom: calc(-2 * var(--ux)); width: calc(26 * var(--ux)); height: calc(26 * var(--ux)); border-radius: 50%; display: grid; place-items: center; font-size: calc(0.95 * var(--ur)); font-weight: 900; color: #1a1200; background: var(--gold); box-shadow: 0 0 calc(10 * var(--ux)) rgba(212,168,67,0.8); }
.jr-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: calc(0.8 * var(--ur)); letter-spacing: 1px; text-align: center; color: var(--gold-light); }
.jr-count { font-size: calc(0.8 * var(--ur)); color: var(--text-dim); }
.jr-here { position: absolute; top: calc(-24 * var(--ux)); padding: calc(1 * var(--ux)) calc(8 * var(--ux)); border-radius: 20px; background: var(--gold); color: #1a1200; font-size: calc(0.62 * var(--ur)); font-weight: 800; letter-spacing: calc(2 * var(--ux)); animation: jrPulse 1.6s ease-in-out infinite; }
@keyframes jrPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-4 * var(--ux))); } }
.jr-node.open .jr-ring { box-shadow: 0 0 calc(18 * var(--ux)) var(--c); }
.jr-node.done .jr-ring { background: conic-gradient(var(--gold) 100%, transparent 0); box-shadow: 0 0 calc(22 * var(--ux)) rgba(212,168,67,0.55); }
.jr-node.locked { opacity: 0.55; filter: grayscale(0.7); }
.jr-node:hover .jr-ring, .jr-node.sel .jr-ring { transform: scale(1.1); }
.jr-node.sel .jr-name { color: #fff; text-shadow: 0 0 calc(10 * var(--ux)) var(--c); }
.jr-bottom { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr calc(340 * var(--ux)); gap: calc(18 * var(--ux)); }
.jr-detail, .jr-side > div { padding: calc(14 * var(--ux)) calc(18 * var(--ux)); border-radius: calc(12 * var(--ux)); background: rgba(16,13,32,0.85); border: 1px solid rgba(255,255,255,0.06); }
.jr-detail { overflow-y: auto; min-height: 0; }
.jr-detail-head { display: flex; align-items: center; gap: calc(14 * var(--ux)); padding-bottom: calc(10 * var(--ux)); border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: calc(10 * var(--ux)); }
.jr-detail-ico { font-size: calc(2.2 * var(--ur)); filter: drop-shadow(0 0 calc(8 * var(--ux)) var(--c)); }
.jr-detail-head h3 { margin: 0; font-family: 'Cinzel', serif; font-size: calc(1.15 * var(--ur)); color: var(--gold-light); }
.jr-detail-head p { margin: calc(2 * var(--ux)) 0 0; font-size: calc(0.9 * var(--ur)); color: var(--text-muted); }
.jr-detail-head > div { flex: 1; }
.jr-chip { padding: calc(3 * var(--ux)) calc(12 * var(--ux)); border-radius: 20px; font-size: calc(0.75 * var(--ur)); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.jr-chip.done { background: rgba(212,168,67,0.2); color: var(--gold); } .jr-chip.open { background: rgba(46,204,113,0.16); color: var(--green); } .jr-chip.locked { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.jr-detail-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(20 * var(--ux)); }
.jr-sub { font-size: calc(0.72 * var(--ur)); letter-spacing: calc(3 * var(--ux)); text-transform: uppercase; color: var(--text-warm-dim); margin-bottom: calc(5 * var(--ux)); }
.jr-npcs { display: flex; flex-wrap: wrap; gap: calc(5 * var(--ux)) calc(6 * var(--ux)); }
.jr-npc { padding: calc(2 * var(--ux)) calc(10 * var(--ux)); border-radius: 20px; background: rgba(255,255,255,0.05); font-size: calc(0.85 * var(--ur)); color: #b0a898; }
.jr-npc.beaten { background: rgba(212,168,67,0.14); color: var(--gold-light); }
.jr-req { margin: 0 0 calc(10 * var(--ux)); font-size: calc(0.9 * var(--ur)); color: var(--text-soft); line-height: 1.45; }
.jr-side { display: flex; flex-direction: column; gap: calc(12 * var(--ux)); }
.jr-goal { background: linear-gradient(90deg, rgba(212,168,67,0.14), rgba(212,168,67,0.03)) !important; border-left: calc(3 * var(--ux)) solid var(--gold) !important; }
.jr-goal i { font-style: normal; font-size: calc(0.66 * var(--ur)); letter-spacing: calc(3 * var(--ux)); color: var(--gold); }
.jr-goal p { margin: calc(3 * var(--ux)) 0 0; font-size: calc(1 * var(--ur)); color: #e6dcc4; line-height: 1.4; }
.jr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--ux)); }
.jr-stats > div { display: flex; flex-direction: column; align-items: center; padding: calc(6 * var(--ux)) 0; }
.jr-stats b { font-family: 'Cinzel', serif; font-size: calc(1.25 * var(--ur)); color: var(--gold-light); }
.jr-stats span { font-size: calc(0.72 * var(--ur)); letter-spacing: 2px; text-transform: uppercase; color: #7c7c90; }
.jr-side > .jr-stats { padding: 0; background: none; border: none; }
.jr-side > .jr-stats > div { background: rgba(16,13,32,0.85); border: 1px solid rgba(255,255,255,0.06); border-radius: calc(10 * var(--ux)); }

/* ── Achievements ─────────────────────────────────────────────── */
#achievements-content { gap: calc(10 * var(--ux)); }
.achv-bar-top { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--ux)); flex-wrap: wrap; }
.achv-cats { display: flex; flex-wrap: wrap; gap: calc(6 * var(--ux)); }
.achv-cat { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: calc(0.8 * var(--ur)); letter-spacing: 1px; text-transform: uppercase; padding: calc(4 * var(--ux)) calc(12 * var(--ux)); border-radius: 20px; border: 1px solid #2a2a3a; background: transparent; color: #7c7c90; cursor: pointer; }
.achv-cat:hover { color: #d0d0dc; } .achv-cat.active { color: var(--gold); border-color: rgba(212,168,67,0.5); background: rgba(212,168,67,0.1); }
.achv-sec { font-family: 'Cinzel', serif; font-size: calc(0.75 * var(--ur)); letter-spacing: calc(3 * var(--ux)); text-transform: uppercase; color: var(--text-warm-dim); margin-top: calc(4 * var(--ux)); }
.achv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--ux)); }
.achv-tile { display: flex; gap: calc(14 * var(--ux)); align-items: center; padding: calc(12 * var(--ux)) calc(14 * var(--ux)); border-radius: calc(12 * var(--ux)); background: rgba(18,15,34,0.9); border: 1px solid #2a2a3a; transition: border-color 0.16s, transform 0.16s; }
.achv-tile:hover { transform: translateY(calc(-2 * var(--ux))); border-color: rgba(212,168,67,0.4); }
.achv-medal { width: calc(54 * var(--ux)); height: calc(54 * var(--ux)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: calc(1.6 * var(--ur)); background: radial-gradient(circle at 35% 30%, #2a2548, #0e0b1e); border: calc(2 * var(--ux)) solid #34344a; filter: grayscale(1) brightness(0.7); }
.achv-main { min-width: 0; flex: 1; }
.achv-name { font-family: 'Cinzel', serif; font-size: calc(0.9 * var(--ur)); color: var(--text-muted); }
.achv-desc { font-size: calc(0.8 * var(--ur)); color: #7c7c90; margin: calc(2 * var(--ux)) 0 calc(5 * var(--ux)); line-height: 1.3; }
.achv-bar { height: calc(6 * var(--ux)); border-radius: 4px; background: #1a1a2a; overflow: hidden; } .achv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a87820, var(--gold)); border-radius: 4px; }
.achv-state { font-size: calc(0.75 * var(--ur)); letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin-top: calc(3 * var(--ux)); } .achv-state.dim { color: var(--text-faint); }
.achv-tile.progress { border-color: rgba(212,168,67,0.25); } .achv-tile.progress .achv-medal { filter: grayscale(0.4) brightness(0.9); border-color: rgba(212,168,67,0.4); } .achv-tile.progress .achv-name { color: #d6cba8; }
.achv-tile.unlocked { border-color: rgba(212,168,67,0.6); background: linear-gradient(135deg, rgba(212,168,67,0.12), rgba(18,15,34,0.9)); }
.achv-tile.unlocked .achv-medal { filter: none; border-color: var(--gold); box-shadow: 0 0 calc(16 * var(--ux)) rgba(212,168,67,0.5); }
.achv-tile.unlocked .achv-name { color: var(--gold-light); } .achv-tile.unlocked .achv-desc { color: #a89a80; }
.achv-grid.near { grid-template-columns: repeat(3, 1fr); }

/* ── Items ────────────────────────────────────────────────────── */
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--ux)); }
.inv-grid.holders { margin-top: calc(4 * var(--ux)); }
.inv-grid.holders .inv-section-title { grid-column: 1 / -1; }
.mn .inv-section-title { font-family: 'Cinzel', serif; font-size: calc(0.75 * var(--ur)); letter-spacing: calc(3 * var(--ux)); text-transform: uppercase; color: var(--text-warm-dim); margin: calc(4 * var(--ux)) 0 calc(2 * var(--ux)); }
.mn .inv-card { display: flex; align-items: center; gap: calc(14 * var(--ux)); padding: calc(12 * var(--ux)) calc(16 * var(--ux)); border-radius: calc(12 * var(--ux)); background: rgba(18,15,34,0.9); border: 1px solid #2a2a3a; }
.inv-active { display: flex; align-items: center; gap: calc(10 * var(--ux)); padding: calc(8 * var(--ux)) calc(14 * var(--ux)); border-radius: calc(10 * var(--ux)); background: linear-gradient(90deg, rgba(212,168,67,0.14), rgba(212,168,67,0.03)); border-left: calc(3 * var(--ux)) solid var(--gold); }
.inv-active span { font-size: calc(0.66 * var(--ur)); letter-spacing: calc(3 * var(--ux)); color: var(--gold); }
.inv-active b { padding: calc(2 * var(--ux)) calc(10 * var(--ux)); border-radius: 20px; background: rgba(20,20,36,0.8); border: 1px solid rgba(212,168,67,0.4); font-size: calc(0.9 * var(--ur)); color: var(--gold-light); }
.mn .inv-card-icon { font-size: calc(2 * var(--ur)); flex-shrink: 0; }
.mn .inv-card-name { font-family: 'Cinzel', serif; font-size: calc(0.9 * var(--ur)); color: var(--gold-light); }
.mn .inv-card-qty { color: var(--text-dim); font-size: calc(0.8 * var(--ur)); font-family: 'Rajdhani', sans-serif; }
.mn .inv-card-desc { font-size: calc(0.8 * var(--ur)); color: var(--text-warm-dim); margin-top: calc(3 * var(--ux)); line-height: 1.35; }

/* ── Settings ─────────────────────────────────────────────────── */
.mn .options-panel { display: flex; flex-direction: column; gap: calc(4 * var(--ux)); }
.mn .options-panel h3 { margin: calc(14 * var(--ux)) 0 calc(6 * var(--ux)); padding-bottom: calc(5 * var(--ux)); border-bottom: 1px solid #2a2a3a; font-family: 'Cinzel', serif; font-size: calc(1 * var(--ur)); color: var(--gold); letter-spacing: calc(2 * var(--ux)); text-transform: uppercase; }
.mn .options-panel h3:first-child, .mn .set-cols > div > h3:first-child { margin-top: 0; }
.mn .options-desc { font-size: calc(0.95 * var(--ur)); color: var(--text-muted); line-height: 1.6; margin-bottom: calc(8 * var(--ux)); } .mn .options-desc strong { color: var(--gold-light); }
.mn .control-row { display: flex; gap: calc(12 * var(--ux)); align-items: center; font-size: calc(0.9 * var(--ur)); color: #b0a898; padding: calc(4 * var(--ux)) 0; }
.mn .control-key { min-width: calc(110 * var(--ux)); padding: calc(3 * var(--ux)) calc(10 * var(--ux)); font-size: calc(0.8 * var(--ur)); border-radius: calc(6 * var(--ux)); }
.set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(34 * var(--ux)); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: calc(30 * var(--ux)); padding: calc(12 * var(--ux)) calc(4 * var(--ux)); border-bottom: 1px solid rgba(255,255,255,0.05); }
.set-row b { display: block; font-size: calc(1 * var(--ur)); color: var(--gold-light); } .set-row small { display: block; margin-top: calc(2 * var(--ux)); font-size: calc(0.85 * var(--ur)); color: var(--text-dim); max-width: calc(620 * var(--ux)); line-height: 1.4; }
.mn .music-vol-row { gap: calc(10 * var(--ux)); } .mn .music-slider { width: calc(360 * var(--ux)); }
.mn .type-chart { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--ux)) calc(18 * var(--ux)); }
.mn .options-body { padding-right: calc(30 * var(--ux)); }

/* ── Bestiary ─────────────────────────────────────────────────── */
.mn-body.be { overflow: hidden; }
.be-split { flex: 1; min-height: 0; }
.be-gridwrap { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,168,67,0.3) transparent; padding: calc(4 * var(--ux)) calc(8 * var(--ux)) calc(4 * var(--ux)) calc(4 * var(--ux)); }
.mn .bestiary-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(10 * var(--ux)); }
.be-side { width: calc(400 * var(--ux)); flex-shrink: 0; overflow-y: auto; scrollbar-width: thin; padding: calc(4 * var(--ux)); }
.mn .bestiary-card { padding: calc(8 * var(--ux)) calc(6 * var(--ux)) calc(6 * var(--ux)); border-radius: calc(10 * var(--ux)); gap: calc(5 * var(--ux)); }
.mn .bestiary-card.sel { border-color: var(--gold); box-shadow: 0 0 calc(14 * var(--ux)) rgba(212,168,67,0.4); }
.mn .bestiary-art { width: calc(76 * var(--ux)); height: calc(76 * var(--ux)); border-radius: calc(8 * var(--ux)); }
.mn .bestiary-card-name { font-size: calc(0.8 * var(--ur)); } .mn .bestiary-card-zone { font-size: calc(0.72 * var(--ur)); }
.mn .bestiary-filters { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: calc(5 * var(--ux)); max-width: none; flex-shrink: 0; }
.mn .bestiary-filters .mn-tab { padding: calc(6 * var(--ux)) calc(10 * var(--ux)); font-size: calc(0.8 * var(--ur)); }
.mn .bestiary-empty { grid-column: 1 / -1; text-align: center; color: var(--text-faint); padding: calc(30 * var(--ux)); }
.be-side .bestiary-detail, .pov-right .party-summary { display: flex; flex-direction: column; gap: calc(12 * var(--ux)); padding: calc(16 * var(--ux)); border-radius: calc(14 * var(--ux)); background: rgba(16,13,32,0.9); border: 1px solid rgba(255,255,255,0.07); }
.pov-empty { padding: calc(40 * var(--ux)) calc(20 * var(--ux)); text-align: center; color: var(--text-faint); font-size: calc(1 * var(--ur)); border: 1px dashed rgba(255,255,255,0.1); border-radius: calc(14 * var(--ux)); }
.mn .bestiary-lore { font-size: calc(0.9 * var(--ur)); }

/* ── Party ────────────────────────────────────────────────────── */
.mn-body.pov { overflow: hidden; }
.pov-left { width: calc(650 * var(--ux)); flex-shrink: 0; display: flex; flex-direction: column; gap: calc(8 * var(--ux)); min-height: 0; }
.pov-right { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,168,67,0.3) transparent; }
.pov-modebar { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--ux)); min-height: calc(26 * var(--ux)); }
.mn .party-ov-subtitle { margin: 0; font-size: calc(0.8 * var(--ur)); color: #7c7c90; letter-spacing: 2px; text-transform: uppercase; }
.mn .party-ov-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(7 * var(--ux)); overflow-y: auto; padding-right: calc(6 * var(--ux)); scrollbar-width: thin; scrollbar-color: rgba(212,168,67,0.3) transparent; }
.mn .party-ov-entry { gap: calc(12 * var(--ux)); padding: calc(8 * var(--ux)) calc(12 * var(--ux)); border-radius: calc(10 * var(--ux)); flex-shrink: 0; }
.mn .party-ov-entry.sel { border-color: var(--gold); background: linear-gradient(90deg, rgba(212,168,67,0.14), rgba(20,20,30,0.9)); box-shadow: inset calc(3 * var(--ux)) 0 0 var(--gold); }
.mn .party-ov-art, .mn .party-ov-art-placeholder { width: calc(54 * var(--ux)); height: calc(54 * var(--ux)); border-radius: calc(8 * var(--ux)); }
.mn .party-ov-name { font-size: calc(1 * var(--ur)); } .mn .party-ov-detail { font-size: calc(0.8 * var(--ur)); }
.mn .party-ov-hp-bar { width: calc(150 * var(--ux)); height: calc(6 * var(--ux)); }
.mn .party-ov-tag { font-size: calc(0.66 * var(--ur)); padding: calc(2 * var(--ux)) calc(8 * var(--ux)); }
.mn .deck-tabs { gap: calc(6 * var(--ux)); }
.mn .deck-sort { display: flex; align-items: center; gap: calc(6 * var(--ux)); }
.mn .deck-sort-btn { padding: calc(5 * var(--ux)) calc(12 * var(--ux)); font-size: calc(0.85 * var(--ur)); border-radius: calc(8 * var(--ux)); }
.mn .deck-sort-label { font-size: calc(0.75 * var(--ur)); }
.mn .deck-tools, .mn .team-presets { width: 100%; }
.mn .party-summary { display: none; } .mn .party-summary.active { display: flex; }
.mn .pov-action-btn { font-size: calc(0.8 * var(--ur)); padding: calc(5 * var(--ux)) calc(12 * var(--ux)); border-radius: calc(6 * var(--ux)); }
.pd-actions { display: flex; flex-wrap: wrap; gap: calc(8 * var(--ux)); }
.mn .summary-header { display: flex; gap: calc(16 * var(--ux)); align-items: center; }
.mn .summary-art img, .mn #bestiary-detail-art img { width: calc(110 * var(--ux)); height: calc(110 * var(--ux)); border-radius: calc(10 * var(--ux)); object-fit: cover; }
.mn .summary-name { font-size: calc(1.2 * var(--ur)); } .mn .summary-meta { font-size: calc(0.9 * var(--ur)); }
.mn .summary-stat .stat-label, .mn .summary-stat .stat-value { font-size: calc(0.9 * var(--ur)); }
.mn .summary-atk-name { font-size: calc(0.95 * var(--ur)); } .mn .summary-atk-detail, .mn .summary-atk-desc { font-size: calc(0.8 * var(--ur)); }
.mn .held-block { margin: 0; }

/* ── the map ──────────────────────────────────────────────────── */
.mn-body.map-body { align-items: center; justify-content: center; gap: calc(14 * var(--ux)); }
.mn #map-overlay-canvas { width: calc(500 * var(--ux)); height: calc(500 * var(--ux)); border: 1px solid rgba(212,168,67,0.35); border-radius: calc(12 * var(--ux)); box-shadow: 0 calc(10 * var(--ux)) calc(30 * var(--ux)) rgba(0,0,0,0.55); flex-shrink: 0; }   /* (drawMinimap, main.js, gives it the map's own shape as big as the body allows, and a bitmap with one pixel per screen pixel) */
.mn .map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--ux)) calc(22 * var(--ux)); }
.mn .legend-item { font-size: calc(0.85 * var(--ur)); }
.mn .legend-sym { width: calc(16 * var(--ux)); height: calc(16 * var(--ux)); flex-shrink: 0; }     /* (the map's own symbols, drawn the same way: mapart.js) */
.mn .map-place:not(:empty) {                                                                         /* where you are (drawMinimap fills it), next to the title */
  font-family: 'Cinzel', serif; font-weight: 700; font-size: calc(0.95 * var(--ur)); color: #f6dc94; letter-spacing: calc(1.5 * var(--ux)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: calc(5 * var(--ux)) calc(14 * var(--ux)); margin-left: calc(10 * var(--ux)); border-radius: calc(16 * var(--ux));
  background: rgba(8,6,20,0.6); border: 1px solid rgba(212,168,67,0.35);
}

/* ── "reduce motion": the Settings switch (and the system's own) ─ */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
html.reduce-motion #screen-wipe, html.reduce-motion #vs-banner { display: none !important; }