/* =========================================================================
   XP Hero Builder — reskinned to match the real game's UI.

   Palette, 9-slice buttons/panels, rarity chrome (circle/ribbon/grade), and
   the display font are all pulled directly from the game's own extracted
   assets (assets/img/ui/) — colors sampled from the actual textures, corner
   insets read from each sprite's real Unity border metadata (see
   assets/img/ui/nine-slice.json), not guessed. BakbakOne is the game's own
   real display font, and it happens to be a legitimate open Google Font.
   No composed screenshots were available to work from, so exact layout is
   still this app's own judgment — see CLAUDE.md for what that means for
   fidelity.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Bakbak+One&family=Noto+Sans:wght@400;600;800&display=swap');

:root {
  /* Real colors sampled from the game's own UI textures */
  --parchment: #d5bba1;        /* Panel_Brown_R10 fill */
  --parchment-light: #efdfc5;  /* Frame_Brown_R14 fill */
  --parchment-header: #d8c0a9; /* Panel_Header_Brown_R10 fill */
  --wood-dark: #4a3423;        /* derived shadow of the parchment family — page backdrop */
  --wood-darker: #34240f;
  --ink: #3a2a1c;              /* dark brown text, warm not pure black */
  --ink-muted: #6b5541;
  --ink-faint: #8a7860;
  --line: #b89a7a;
  --line-soft: #c9ad8d;

  --gold: #feda16;             /* Btn_Yellow fill — primary accent/CTA */
  --gold-soft: #feda1626;
  --green: #6ad71e;            /* Btn_Green fill — confirm/positive */
  --red: #e6335c;              /* Btn_Red fill — danger/negative */
  --blue: #6c8de6;             /* Btn_Blue fill — info/secondary */
  --gray-btn: #939393;

  --shadow: 0 4px 10px rgba(52,36,15,0.35), 0 1px 3px rgba(52,36,15,0.3);
  --radius: 14px;
  --radius-sm: 9px;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 15% -15%, #6b4c2e55, transparent),
    radial-gradient(900px 500px at 100% 10%, #7a5a3455, transparent),
    var(--wood-darker);
  color: var(--ink);
  font-family: 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: 'Bakbak One', 'Baloo 2', sans-serif; margin: 0; text-wrap: balance; letter-spacing: 0.01em; }
p { margin: 0 0 10px; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; }

/* ---------- reusable real-asset primitives ---------- */

/* Parchment panel — Panel_Brown_R10, real 9-slice border (L53 B35 R53 T35) */
.rt-panel {
  border-image: url('../assets/img/ui/panel/Panel_Brown_R10.png') 35 53 35 53 fill;
  border-image-width: 22px 32px;
  border-style: solid;
  border-width: 22px 32px;
  background-color: var(--parchment);
}
/* Cream inset frame — Frame_Brown_R14, border(30,30,30,30) */
.rt-frame {
  border-image: url('../assets/img/ui/frame/Frame_Brown_R14.png') 30 fill;
  border-image-width: 16px;
  border-style: solid;
  border-width: 16px;
  background-color: var(--parchment-light);
}

/* Real buttons — border-image from the game's own button sprites */
.rt-btn {
  appearance: none; cursor: pointer; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  border-style: solid; background: transparent; transition: transform .08s, filter .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rt-btn:hover { filter: brightness(1.06); }
.rt-btn:active { transform: scale(0.96); }
.rt-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.rt-btn--gold {
  border-image: url('../assets/img/ui/btn/Btn_Yellow_H60.png') 0 15 fill;
  border-image-width: 0 15px; border-width: 0 15px; padding: 9px 4px;
}
.rt-btn--green {
  border-image: url('../assets/img/ui/btn/Btn_Green_H84.png') 40 16 fill;
  border-image-width: 16px 8px; border-width: 16px 8px; padding: 4px 8px; color: #1e3d05;
}
.rt-btn--gray {
  border-image: url('../assets/img/ui/btn/Btn_Gray.png') 36 fill;
  border-image-width: 16px; border-width: 16px; padding: 2px 6px; color: #33322f;
}
.rt-btn--red {
  border-image: url('../assets/img/ui/btn/Btn_Red.png') 32 fill;
  border-image-width: 14px; border-width: 14px; padding: 2px 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.rt-btn--blue {
  border-image: url('../assets/img/ui/btn/Btn_Blue_H64.png') 32 fill;
  border-image-width: 14px; border-width: 14px; padding: 2px 6px; color: #12224f;
}
.rt-btn--sm { font-size: 0.78rem; }

/* Rarity chrome: circle ring behind an icon, ribbon tag, text-plate badge —
   all real per-tier art from assets/img/ui/{circle,ribbon,grade}/. */
.rarity-ring {
  background-image: var(--ring-img);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.rarity-ribbon-badge {
  background-image: var(--ribbon-img);
  background-size: 100% 100%; background-repeat: no-repeat;
  width: 84px; height: 21px; display: flex; align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 9.5px; letter-spacing: 0.03em;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); text-transform: uppercase;
}
.rarity-grade-plate {
  background-image: var(--grade-img);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  width: 67px; height: 20px;
}

/* Real progress-bar gauge: track (Gauge_Bg_H28) + fill (Gauge_*_Yellow/Green) */
.rt-gauge { position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  border-image: url('../assets/img/ui/gauge/Gauge_Bg_H28.png') 12 fill; border-image-width: 6px; border-style: solid; border-width: 6px; }
.rt-gauge-fill { position: absolute; inset: 0; width: var(--pct, 0%);
  background-image: url('../assets/img/ui/gauge/Gauge_Weapon_Level_Yellow.png'); background-size: auto 100%; background-repeat: repeat-x;
  transition: width .25s ease; }
.rt-gauge-fill--green { background-image: url('../assets/img/ui/gauge/Gauge_Special_UpGrade_Green.png'); }

/* Real star icons for hero star-grade */
.rt-star { width: 18px; height: 17px; background-size: contain; background-repeat: no-repeat;
  background-image: url('../assets/img/ui/misc_star/Icon_star_grey.png'); display: inline-block; }
.rt-star.filled { background-image: url('../assets/img/ui/misc_star/Icon_star.png'); }
.rt-star.maxed { background-image: url('../assets/img/ui/misc_star/Icon_star_rainbow.png'); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

/* ---------- layout shell ---------- */
.app-header {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, var(--wood-dark), #3d2c1c);
  border-bottom: 3px solid var(--wood-darker);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.header-row {
  max-width: 1180px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Bakbak One', sans-serif; font-size: 1.15rem; letter-spacing: 0.01em;
  margin-right: auto; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.brand .brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(145deg, var(--gold), #c98a1f);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; box-shadow: var(--shadow);
}
.tabs { display: flex; gap: 4px; background: var(--wood-darker); border-radius: 999px; padding: 4px; border: 2px solid #2a1c0f; }
.tab-btn {
  border: none; background: transparent; color: #d8c3a8;
  padding: 8px 16px; border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.88rem;
  cursor: pointer; transition: background .15s, color .15s;
  position: relative; /* anchors .fm-tab-badge (forum @mention count) */
}
.fm-tab-badge {
  position: absolute; top: 0; right: 2px; transform: translate(50%, -40%);
  background: #e23; color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 1;
  min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}
.tab-btn:hover { color: #fff; }
.tab-btn.active { background: var(--gold); color: #3a2a05; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }
.tab-btn--profile[hidden] { display: none; }
.tab-btn--profile:not([hidden]) { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 4px; }
.tab-btn--admin[hidden] { display: none; }
.tab-btn--admin:not([hidden]) { display: flex; align-items: center; }
.header-actions { display: flex; gap: 8px; }
.mobile-menu-btn { display: none; font-size: 1.1rem; font-weight: 900; padding: 8px 12px; line-height: 1; }

/* ---------- mobile bottom tab bar (phones/tablets, see @media block below) ---------- */
.mobile-tabbar { display: none; }

/* Personalized avatar — a colored initials badge by default (see
   ui-account.js's avatarColorFor/initialsFor); nothing here stops a
   future "upload a real picture" feature from overriding it per user. */
.profile-avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 800; flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.profile-avatar--tab { width: 26px; height: 26px; font-size: 0.72rem; }
.profile-avatar--large { width: 64px; height: 64px; font-size: 1.4rem; }
.profile-tab-label { font-size: 0.88rem; }
.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }

.btn {
  border: 1px solid #00000022; background: var(--parchment-light); color: var(--ink);
  padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; transition: filter .12s, transform .1s; font-family: 'Baloo 2', sans-serif;
  box-shadow: 0 2px 0 #00000022;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 0.76rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
input[type=file] { display: none; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 80px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

.section-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.section-title h2 { font-size: 1.2rem; font-weight: 800; color: #fff2dd; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.section-sub { color: #d8c3a8cc; font-size: 0.88rem; margin-bottom: 18px; max-width: 74ch; }

/* ---------- weapon equip rig (matches the real Equipment screen: 3 slots
   flanking each side of a center hero-preview panel, not a plain row) ---------- */
.equip-rig { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.equip-col { display: flex; flex-direction: column; gap: 12px; }
.equip-center { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; }
.equip-center-portrait {
  width: 130px; height: 130px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background-image: var(--ring-img); background-size: cover; background-position: center;
  border: 4px solid var(--wood-dark); box-shadow: var(--shadow);
}
.equip-center-portrait.empty { background: var(--wood-dark); color: #a5896a; font-size: 2rem; font-family: 'Bakbak One', sans-serif; }
.equip-center-portrait img { max-width: 82%; max-height: 82%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.4)); }
.equip-center-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #fff2dd; text-shadow: 0 2px 0 rgba(0,0,0,0.4); font-size: 0.9rem; text-align: center; }

.weapon-slot {
  width: 88px; height: 88px; border-radius: 18px; padding: 6px; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center; transition: transform .1s, filter .12s;
  background: linear-gradient(160deg, #e99aa0, #d9707c);
  border: 3px solid #f6c7cb;
  box-shadow: inset 0 0 0 2px #b8505f66, 0 3px 0 #00000022;
}
.weapon-slot:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
.weapon-slot.filled { background: linear-gradient(160deg, #f0b3b8, #dc8088); }
.weapon-slot .slot-main-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--wood-dark); color: #f0d9b8; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 0.6rem; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.weapon-slot .slot-empty-icon { font-size: 1.8rem; color: #ffffffbb; opacity: 0.8; }
.weapon-slot .slot-art {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background-image: var(--ring-img); background-size: 90% 90%; background-repeat: no-repeat; background-position: center;
  border-radius: 12px;
}
.weapon-slot .slot-art img { max-height: 78%; max-width: 78%; image-rendering: -webkit-optimize-contrast; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.weapon-slot .rarity-pip {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px;
}
.weapon-slot .slot-level-badge {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  background: var(--wood-dark); border-radius: 999px; padding: 1px 8px; color: var(--gold);
  box-shadow: 0 2px 0 rgba(0,0,0,.25); white-space: nowrap;
}
.weapon-slot .slot-level-badge--empty { color: #d8c3a8; }
@media (max-width: 480px) { .equip-rig { gap: 14px; } .weapon-slot { width: 76px; height: 76px; } }

/* ---------- generic card grid (picker items) ---------- */
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.picker-card {
  border-radius: var(--radius-sm); padding: 10px; cursor: pointer; text-align: center; transition: transform .1s, filter .12s;
  border-image: url('../assets/img/ui/frame/Frame_Brown_R14.png') 30 fill;
  border-image-width: 12px; border-style: solid; border-width: 12px;
  background-color: var(--parchment-light);
}
.picker-card:hover { transform: translateY(-2px); filter: brightness(1.03); }
.picker-card.selected { box-shadow: 0 0 0 3px var(--gold) inset; }
.picker-card img { height: 56px; margin: 0 auto 6px; object-fit: contain; }
.picker-card .pc-name { font-family: 'Baloo 2', sans-serif; font-size: 0.78rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.picker-card .pc-tag { font-size: 0.68rem; color: var(--ink-muted); margin-top: 2px; }

.monster-card { position: relative; }
.tag--boss {
  background: var(--red); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.monster-card .tag--boss {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 0.62rem; padding: 2px 10px; letter-spacing: 0.05em; box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.picker-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  border: none; background: var(--wood-dark); color: #d8c3a8;
  border-radius: 999px; padding: 5px 12px; font-size: 0.76rem; font-weight: 700; cursor: pointer; font-family: 'Baloo 2', sans-serif;
}
.chip.active { background: var(--gold); color: #3a2a05; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,12,4,0.72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%; max-width: 860px; max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow); border-radius: 18px;
  border-image: url('../assets/img/ui/panel/Panel_Header_Brown_R10.png') 42 53 fill;
  border-image-width: 26px 34px; border-style: solid; border-width: 26px 34px;
  background-color: var(--parchment-header);
}
.modal-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 6px; border-bottom: 2px solid var(--line);
}
.modal-header h3 { font-family: 'Bakbak One', sans-serif; font-size: 1rem; flex: 1; color: var(--ink); }
.modal-close {
  border: none; width: 30px; height: 30px; cursor: pointer; font-size: 0;
  background-image: url('../assets/img/ui/btn/Btn_Close_01.png'); background-size: contain; background-repeat: no-repeat; background-color: transparent;
}
.modal-close:hover { filter: brightness(1.1); }
.modal-body { padding: 12px 8px 18px; overflow-y: auto; }
.modal-footer { padding: 14px 8px; border-top: 2px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- detail panel ---------- */
.detail-layout { display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
@media (max-width: 620px) { .detail-layout { grid-template-columns: 1fr; } }
.detail-art {
  background-image: var(--ring-img); background-size: 150px 150px; background-repeat: no-repeat; background-position: center;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; padding: 18px; min-height: 180px;
}
.detail-art img { max-height: 150px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.detail-name { font-family: 'Bakbak One', sans-serif; font-size: 1.15rem; color: var(--ink); }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.tag {
  font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-family: 'Baloo 2', sans-serif;
  background: var(--wood-dark); color: #e8d5b8;
}
.detail-desc { font-size: 0.86rem; color: var(--ink-muted); margin-bottom: 14px; }

.stat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 8px; margin: 10px 0; }
.stat-pill {
  background: var(--parchment); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 8px 10px; display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem;
}
.stat-pill .stat-name { color: var(--ink-muted); }
.stat-pill .stat-val { font-weight: 800; color: #a5580e; font-family: 'JetBrains Mono', monospace; }

.level-control { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.level-control input[type=range] { flex: 1; min-width: 80px; accent-color: var(--gold); height: 14px; }
.level-control .level-num { min-width: 64px; text-align: right; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--ink); }
.lc-step {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; border: none;
  background: #2e2013; color: #f0d9b8; cursor: pointer; font-weight: 800; font-size: 1.1rem; line-height: 1;
}
.lc-step:hover { background: #1c1409; }
.lc-step:active { transform: scale(0.92); }
.lc-step:disabled { opacity: 0.35; cursor: not-allowed; }

.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.section-head { margin: 14px 0 6px; font-size: 0.9rem; display: flex; align-items: baseline; gap: 6px; }
.section-head-icon { font-size: 0.8em; }
.section-head-sub { font-size: 0.72rem; font-weight: 500; color: var(--ink-muted); }

/* Milestone rows — matches the real Level Up tab's unlock-list style. */
.milestone-list { display: flex; flex-direction: column; gap: 6px; }
.milestone-row { background: var(--parchment); border-radius: 999px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }

.nbu-row {
  background: var(--parchment); border-radius: 999px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; transition: background .12s;
}
.nbu-row:hover { background: var(--parchment-light); }
.nbu-row .nbu-delta { color: #a5580e; font-family: 'JetBrains Mono', monospace; font-weight: 800; flex-shrink: 0; }
.milestone-row--locked { background: transparent; border: 1px dashed var(--ink-faint); color: var(--ink-faint); font-weight: 500; }

.caveat {
  font-size: 0.74rem; color: var(--ink-muted); border-left: 3px solid var(--line);
  padding: 6px 10px; margin-top: 12px; background: var(--parchment); border-radius: 0 6px 6px 0;
}

/* ---------- hero roster ---------- */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.hero-card {
  border-radius: var(--radius); padding: 12px; text-align: center; position: relative; cursor: pointer;
  transition: transform .1s, filter .12s;
  border-image: url('../assets/img/ui/frame/Frame_Brown_R14.png') 30 fill;
  border-image-width: 15px; border-style: solid; border-width: 15px;
  background-color: var(--parchment-light);
}
.hero-card:hover { transform: translateY(-2px); filter: brightness(1.03); }
.hero-card.active { box-shadow: 0 0 0 3px var(--gold); }
.hero-card img { height: 88px; margin: 0 auto 6px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.hero-card .hc-name { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.hero-card .hc-meta { font-size: 0.72rem; color: var(--ink-muted); margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.hero-card .hc-meta .rt-star { width: 13px; height: 12px; vertical-align: -2px; }
.hero-card .hc-active-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #3a2a05; font-size: 0.64rem; font-weight: 800; font-family: 'Baloo 2', sans-serif;
  padding: 2px 10px; border-radius: 999px; letter-spacing: 0.04em; box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.hero-card .hc-remove {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: var(--wood-dark); color: #d8c3a8; font-size: 0.78rem; cursor: pointer;
}
.hero-card .hc-remove:hover { color: var(--red); }
.add-hero-card {
  border: 3px dashed var(--line); border-radius: var(--radius); min-height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--wood-dark); cursor: pointer; font-weight: 800; font-family: 'Baloo 2', sans-serif;
  background: #00000010;
}
.add-hero-card:hover { border-color: var(--gold); color: #a5580e; }
.add-hero-card .plus { font-size: 1.8rem; }

/* ---------- equipment tab: traits + upgrade trees ---------- */
.equip-columns { display: grid; grid-template-columns: 1fr; gap: 32px; }
.trait-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.trait-group { border-radius: var(--radius); padding: 14px;
  border-image: url('../assets/img/ui/panel/Panel_Brown_R10.png') 35 53 fill; border-image-width: 18px 26px; border-style: solid; border-width: 18px 26px;
  background-color: var(--parchment); }

.rune-panel { border-radius: var(--radius-sm); padding: 12px; background: var(--parchment); border: 1px solid var(--line-soft); }
.trait-group h4 { font-family: 'Baloo 2', sans-serif; font-size: 0.92rem; margin-bottom: 10px; color: var(--ink); }
.trait-slot-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line-soft); }
.trait-slot-row:first-of-type { border-top: none; }
.trait-slot-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--parchment-light); display:flex; align-items:center; justify-content:center; font-size: 0.78rem; flex-shrink: 0; font-weight: 800; color: var(--ink-muted); }
.trait-slot-info { flex: 1; min-width: 0; }
.trait-slot-info .ts-title { font-size: 0.82rem; font-weight: 700; font-family: 'Baloo 2', sans-serif; color: var(--ink); }
.trait-slot-info .ts-sub { font-size: 0.72rem; color: var(--ink-muted); }
.synergy-summary { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.synergy-row { display: flex; justify-content: space-between; font-size: 0.8rem; background: var(--parchment); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; }

.upgrade-tree-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

/* Upgrade rows — matches the real Upgrades screen's stacked horizontal list
   (not a card grid): colored icon slot far left (color = which tree, real
   screenshots show warm-brown/Ability, indigo/Special, magenta/Extra —
   Soul wasn't in any reference screenshot, given its own teal accent),
   title/desc/value in the middle, stepper on the right. */
:root {
  --tree-ability: linear-gradient(160deg, #c17a3a, #90531d);
  --tree-special: linear-gradient(160deg, #4b4a8f, #322f66);
  --tree-extra:   linear-gradient(160deg, #a3477a, #7a2f5c);
  --tree-soul:    linear-gradient(160deg, #2f9a86, #1e6e5f);
}
.upgrade-grid { display: flex; flex-direction: column; gap: 10px; }
.upgrade-row {
  display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 10px 14px;
  background: linear-gradient(90deg, #4a3323, #5c4230);
  border: 2px solid #2e2013;
}
.upgrade-row--grade { background: linear-gradient(90deg, #3a2c47, #4a3a5c); }
.ur-icon {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  box-shadow: inset 0 0 0 2px #ffffff22, 0 2px 0 rgba(0,0,0,.3);
}
.ur-body { flex: 1; min-width: 0; }
.ur-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 0.9rem; color: #fff2dd; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.ur-sub { font-size: 0.72rem; color: #d8c3a8aa; margin-bottom: 3px; }
.ur-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.92rem; color: #fff; }
.ur-arrow { color: #d8c3a877; }
.ur-next { color: #4ee0c8; }
.ur-level { font-size: 0.7rem; color: #7ee0c8; font-weight: 700; margin-top: 2px; }

.stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.stepper button { width: 28px; height: 28px; border-radius: 8px; border: none; background: #2e2013; color: #f0d9b8; cursor: pointer; font-weight: 800; }
.stepper button:hover { background: #1c1409; }
.stepper input[type=number] { width: 56px; background: #2e2013; border: 1px solid #1c1409; color: #fff2dd; border-radius: 6px; padding: 4px 4px; text-align: center; font-family: 'JetBrains Mono', monospace; }
@media (max-width: 560px) { .upgrade-row { flex-wrap: wrap; } .stepper { width: 100%; justify-content: flex-end; } }

/* ---------- guide tab ---------- */
.guide-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 720px) { .guide-layout { grid-template-columns: 1fr; } }
.guide-hero-list { display: flex; flex-direction: column; gap: 8px; }
.guide-hero-item {
  display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer;
  border-image: url('../assets/img/ui/frame/Frame_Brown_R14.png') 30 fill; border-image-width: 10px; border-style: solid; border-width: 10px;
  background-color: var(--parchment-light);
}
.guide-hero-item img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--parchment); }
.guide-hero-item.active { box-shadow: 0 0 0 2px var(--gold); }
.guide-hero-item .gh-name { font-weight: 700; font-size: 0.85rem; font-family: 'Baloo 2', sans-serif; color: var(--ink); }
.guide-hero-item .gh-meta { font-size: 0.7rem; color: var(--ink-muted); }
.guide-panel { border-radius: var(--radius); padding: 20px;
  border-image: url('../assets/img/ui/panel/Panel_Brown_R10.png') 35 53 fill; border-image-width: 20px 30px; border-style: solid; border-width: 20px 30px;
  background-color: var(--parchment); }
.advice-block { margin-bottom: 18px; }
.advice-block h4 { font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-family: 'Baloo 2', sans-serif; color: var(--ink); }
.advice-block ul { margin: 0; padding-left: 20px; }
.advice-block li { margin-bottom: 6px; font-size: 0.86rem; }
.severity-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sev-good { background: var(--green); }
.sev-warn { background: var(--gold); }
.sev-bad { background: var(--red); }

.empty-state {
  text-align: center; padding: 50px 20px; color: var(--ink-muted);
  border: 2px dashed var(--line); border-radius: var(--radius); background: #ffffff22;
}
.empty-state .es-icon { font-size: 2.4rem; margin-bottom: 10px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--wood-dark); border: 2px solid var(--gold); color: #fff2dd;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; font-family: 'Baloo 2', sans-serif;
  box-shadow: var(--shadow); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

footer.app-footer {
  max-width: 1180px; margin: 40px auto 0; padding: 20px; color: #d8c3a899; font-size: 0.76rem;
  border-top: 1px solid #ffffff22;
}

/* ---------- Total DPS estimate (Guide tab) ---------- */
.dps-estimate { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
  border-image: url('../assets/img/ui/panel/Panel_Header_Brown_R10.png') 42 53 fill; border-image-width: 22px 30px; border-style: solid; border-width: 22px 30px;
  background-color: var(--parchment-header); }
.de-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.de-label { font-size: 0.76rem; color: var(--ink-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-family: 'Baloo 2', sans-serif; }
.de-value { font-family: 'Bakbak One', sans-serif; font-size: 2rem; color: #a5580e; line-height: 1.1; }
.de-inputs { display: flex; gap: 14px; }
.de-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 0.7rem; color: var(--ink-muted); font-weight: 700; }
.de-inputs input { width: 100px; background: var(--parchment); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 5px 8px; font-family: 'JetBrains Mono', monospace; }
.de-breakdown { margin-top: 14px; }
.de-breakdown summary { cursor: pointer; font-size: 0.8rem; color: var(--ink-muted); font-weight: 700; }
.de-formula { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.9; margin: 12px 0; background: var(--parchment); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.de-row { display: grid; grid-template-columns: minmax(0, 190px) 90px 1fr 90px; gap: 10px; align-items: center; font-size: 0.78rem; padding: 6px 0; border-top: 1px dashed var(--line-soft); }
.de-row:first-of-type { border-top: none; }
.de-key { font-family: 'JetBrains Mono', monospace; color: var(--ink); font-size: 0.7rem; overflow-wrap: anywhere; line-height: 1.3; }
.de-note { color: var(--ink-muted); }
.de-val { text-align: right; font-weight: 700; }
.de-tag { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; width: fit-content; font-family: 'Baloo 2', sans-serif; }
.de-tag--confirmed { color: #fff; background: #1a6e5c; }
.de-tag--mapped { color: #fff; background: var(--green); }
.de-tag--manual { color: #3a2a05; background: var(--gold); }
.de-tag--unmodeled { color: var(--ink-faint); background: #00000014; }
@media (max-width: 700px) { .de-row { grid-template-columns: 1fr; gap: 2px; } .de-val { text-align: left; } }

/* ---------- Farmable Items tab ---------- */
.farm-card { min-height: 150px; }
.farm-source-row { display: flex; align-items: center; gap: 12px; background: var(--parchment); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.farm-source-thumb { width: 40px; height: 40px; object-fit: contain; background: var(--parchment-light); border-radius: 8px; flex-shrink: 0; }
.farm-source-info { flex: 1; min-width: 0; }
.fs-title { font-size: 0.84rem; font-weight: 700; font-family: 'Baloo 2', sans-serif; color: var(--ink); }
.fs-sub { font-size: 0.72rem; color: var(--ink-muted); margin-top: 1px; }

/* Community reports — a real backend exception to this app's "static site,
   no server" architecture (see CLAUDE.md). Visually distinct (blue accent,
   dashed border) from the confirmed ChestData/MinimapRewardData sources
   above it, since this is unverified player-submitted data, not extracted
   game data. */
.farm-source-row--community { border-style: dashed; border-color: var(--blue); background: #6c8de614; }
.tag--community { background: var(--blue); color: #fff; }

/* Shop Exclusive tag/row — distinguishes "buy with currency in the Shop"
   (not earned via gameplay) from every other real farm/drop source above
   it, same visual-distinction principle as Community Reports but its own
   color so the two are never confused with each other either. */
.farm-source-row--shop { border-style: dashed; border-color: var(--gold); background: #feda1614; }
.tag--shop { background: var(--gold); color: var(--wood-dark); }

/* Craftable tag/row — a real multi-item recipe (built from other farmed
   items, not currency), distinct from both a plain farm source and a
   Shop currency purchase so none of the three get confused. */
.farm-source-row--craft { border-style: dashed; border-color: var(--green); background: #6ad71e14; }
.tag--craft { background: var(--green); color: var(--wood-dark); }

/* ---------- Admin tab ---------- */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.admin-stat-tile { background: var(--parchment); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; text-align: center; }
.admin-stat-num { font-size: 1.5rem; font-weight: 800; font-family: 'Baloo 2', sans-serif; color: var(--ink); }
.admin-stat-label { font-size: 0.7rem; color: var(--ink-muted); margin-top: 2px; }
.admin-chart { display: flex; align-items: flex-end; gap: 2px; height: 80px; background: var(--parchment); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px; }
.admin-chart-bar { flex: 1; background: var(--gold); border-radius: 2px 2px 0 0; min-height: 4px; transition: background .15s; }
.admin-chart-bar:hover { background: var(--wood-dark); }
.admin-users-table { display: flex; flex-direction: column; gap: 8px; }
.admin-user-row { display: flex; align-items: center; gap: 10px; background: var(--parchment); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; flex-wrap: wrap; }
.admin-user-info { flex: 1; min-width: 160px; }
.admin-online-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ink-faint); flex-shrink: 0; }
.admin-online-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }

.form-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-field label { font-size: 0.76rem; font-weight: 700; color: var(--ink-muted); font-family: 'Baloo 2', sans-serif; }
.form-field select, .form-field input[type=text], .form-field input[type=email], .form-field input[type=password], .form-field textarea,
.gs-input {
  background: var(--parchment-light); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 8px 10px; font-size: 0.84rem; color: var(--ink); font-family: 'Baloo 2', sans-serif;
}
.gs-input { width: 100%; margin-bottom: 12px; box-sizing: border-box; }
.form-field textarea { resize: vertical; min-height: 60px; }
.form-field select[size] { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }

.oauth-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.oauth-btn { width: 100%; }
.auth-divider { text-align: center; font-size: 0.76rem; color: var(--ink-faint); margin-bottom: 14px; position: relative; }
.auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--line-soft); }
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

/* Real in-game minimap — see js/ui-map.js. .chapter-map-canvas is a fixed
   720:600 aspect box (the real Minimap prefab's own canvas size); each
   .map-tile is positioned with the exact normalized x/y/w/h extracted from
   that prefab's real RectTransform data, not estimated. */
.chapter-map-card { margin-bottom: 24px; }
.chapter-map-title { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 10px; font-family: 'Baloo 2', sans-serif; }
.chapter-map-canvas {
  position: relative; width: 100%; aspect-ratio: 720 / 600; max-width: 640px;
  border-image: url('../assets/img/ui/frame/Frame_Brown_R14.png') 30 fill; border-image-width: 14px; border-style: solid; border-width: 14px;
  background: var(--wood-dark); border-radius: 10px; overflow: hidden;
}
/* The spawn/patrol overlay shares this class but is embedded alongside a
   full stat block rather than living in its own map-only modal — the real
   720:600 minimap ratio made it tall enough to push its own legend,
   caveat, and zoom controls off the bottom of the modal on a typical
   window (reported as "maps run off screen"). Capped shorter here only;
   the standalone story-stage board keeps the authentic ratio. */
.spawn-overlay-canvas { aspect-ratio: 16 / 10; }
.map-tile { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.map-tile.hit { z-index: 5; }
.map-tile-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.map-tile-num {
  position: absolute; bottom: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--wood-darker); color: #e8d5b8; font-size: 0.62rem; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  display: flex; align-items: center; justify-content: center;
}
.map-tile.hit .map-tile-art { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.map-tile-pin {
  position: absolute; z-index: 10; top: -8px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: var(--parchment-light);
  border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,.5); animation: pin-bounce 1.4s ease-in-out infinite;
}
@keyframes pin-bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }

/* MapZoom (js/ui-map.js) — pan/zoom chrome shared by both map canvases.
   .map-zoom-viewport is the fixed-size frame (reuses whatever canvas class
   it's paired with for border-image/aspect-ratio/background); everything
   that used to be the canvas's direct content now lives in
   .map-zoom-stage, which JS transforms (translate+scale) while the
   viewport clips it via overflow:hidden. touch-action:pan-y deliberately
   leaves a single finger free to scroll the modal normally (a lone touch
   over a tall map used to get trapped into panning the map instead,
   making the rest of the modal feel unreachable — reported as "maps run
   off screen"); it still blocks the browser's own pinch-zoom so a second
   finger landing goes to our own Pointer Events pinch handling instead. */
.map-zoom-wrap { position: relative; margin-bottom: 10px; max-width: 640px; }
.map-zoom-viewport { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.map-zoom-viewport:active { cursor: grabbing; }
.map-zoom-stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map-zoom-controls {
  position: absolute; right: 8px; bottom: 8px; z-index: 20; display: flex; flex-direction: column; gap: 4px;
}
.map-zoom-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(0,0,0,.4);
  background: var(--wood-darker); color: #e8d5b8; font-size: 1rem; font-weight: 800; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;
}
.map-zoom-btn:hover { filter: brightness(1.2); }
.map-zoom-btn:active { filter: brightness(0.9); }

/* SpawnMapUI overlays real spawn/patrol data on top of MapUI's own real
   chapter-map-canvas art (see ui-map.js's SpawnMapUI header comment for
   why — no real free-roam-world terrain art exists to use instead). The
   board (.spawn-overlay-board) and a darkening scrim sit at the bottom of
   the stack so the real portrait dots/gold patrol lines read clearly on
   top of the busy tile art underneath. */
.spawn-overlay-board { position: absolute; inset: 0; z-index: 0; }
.spawn-overlay-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(20, 12, 6, 0.55); }
.spawn-dot {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--wood-darker); border: 1px solid rgba(0,0,0,.5); opacity: 0.85; overflow: hidden;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.spawn-dot img { width: 100%; height: 100%; object-fit: cover; }
.spawn-dot.own {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; background: var(--parchment-light);
  border: 2px solid var(--gold); box-shadow: 0 0 8px var(--gold); opacity: 1; z-index: 4;
}
.spawn-map-legend { font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spawn-map-legend .spawn-dot { width: 16px; height: 16px; margin: 0; position: static; }
.spawn-map-legend .spawn-dot.own { width: 22px; height: 22px; margin: 0; position: static; }
.spawn-path-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.spawn-path { fill: none; stroke: var(--parchment-light); stroke-width: 0.4; stroke-dasharray: 1.2 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
.spawn-path.own { stroke: var(--gold); stroke-width: 0.8; opacity: 0.95; }
.spawn-path-swatch { display: inline-block; width: 20px; height: 2px; background: var(--gold); vertical-align: middle; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================================
   Mobile layout (phones/tablets — anything under 860px, portrait tablets
   included). Deliberately a CSS-breakpoint toggle on the SAME markup/JS,
   not a separate page or bundle: nothing on GitHub Pages can do real
   server-side device detection, and this way desktop/mobile always share
   one source of truth (tabs, state, auth) with zero duplication. Inspired
   by the fixed-top-bar + fixed-bottom-tab-bar pattern in the YourSpace
   project's MobileNav.jsx (itself just a Tailwind `md:hidden` breakpoint
   toggle under the hood) — adapted here in plain CSS since this app has no
   build step/framework.
   ========================================================================= */
@media (max-width: 860px) {
  /* Header shrinks to brand + account/profile + a "⋯" overflow menu for
     Import/Export/Reset. The 6 main tabs move to the new bottom bar below;
     the profile avatar button stays right where it is (it's still the
     same real #tab-profile element, just restyled) rather than being
     duplicated. */
  .header-row { padding: 10px 14px; gap: 10px; }
  .brand { font-size: 0.98rem; }
  .brand .brand-mark { width: 30px; height: 30px; font-size: 1rem; }
  #tabs > .tab-btn:not(.tab-btn--profile):not(.tab-btn--admin) { display: none; }
  #tabs { background: none; border: none; padding: 0; }
  .header-actions .btn { display: none; }
  .header-actions #btn-account, .header-actions .mobile-menu-btn { display: inline-flex; }

  main { padding: 16px 14px calc(78px + env(safe-area-inset-bottom, 0px)); }

  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: linear-gradient(0deg, var(--wood-darker), #3d2c1c);
    border-top: 3px solid var(--wood-darker);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-tab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px; border-radius: 10px; background: transparent;
  }
  .mobile-tab-btn.active { background: transparent; box-shadow: none; color: var(--gold); }
  .mtb-icon { font-size: 1.25rem; line-height: 1; }
  .mtb-label { font-size: 0.6rem; font-weight: 700; font-family: 'Baloo 2', sans-serif; letter-spacing: 0.01em; }

  .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* Everything else (picker/roster grids, modals, detail layouts) already
     uses auto-fill/minmax grids or its own narrow-viewport media query
     (see .equip-rig, .upgrade-row, .detail-layout, .guide-layout above) —
     those reflow correctly without any mobile-specific override here. */
}

/* =============================================================================
   FORUM TAB — Discord-inspired dark theme, deliberately scoped to .forum-wrap
   only (own color tokens below, not the app's shared :root ones) rather than
   reskinning this tab to match the parchment/Bakbak-One identity everywhere
   else. Same reasoning this project already applied to the Traits tab's
   real-but-unmatched blue theme (see CLAUDE.md Open Items): a brand-new
   community feature explicitly modeled on Discord reads better in Discord's
   own dark/blurple palette than forced into a fantasy-RPG parchment frame.
   ========================================================================= */
.forum-wrap {
  --fm-bg: #313338;
  --fm-bg-deep: #1e1f22;
  --fm-bg-raised: #2b2d31;
  --fm-bg-hover: #35373c;
  --fm-text: #f2f3f5;
  --fm-text-muted: #949ba4;
  --fm-text-faint: #6d6f78;
  --fm-border: #26272b;
  --fm-blurple: #5865f2;
  --fm-blurple-hover: #4752c4;
  --fm-green: #23a55a;
  --fm-red: #da373c;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-family: 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
}
.fm-top-banner {
  background: var(--fm-bg-deep); color: var(--fm-text-muted); font-size: 0.82rem;
  padding: 8px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--fm-border);
}
.fm-mentions-banner { background: #2b2140; color: #e8dcff; border-bottom-color: var(--fm-blurple); }
.fm-mention-row {
  padding: 10px 4px; border-bottom: 1px solid var(--fm-border); cursor: pointer; border-radius: 6px;
}
.fm-mention-row:hover { background: var(--fm-bg-hover); }
.fm-mention-row:last-child { border-bottom: none; }
.fm-mention-meta { color: var(--fm-text-muted); font-size: 0.76rem; }
.fm-mention-title { font-weight: 700; color: var(--fm-text); margin: 2px 0; }
.fm-mention-snippet { color: var(--fm-text-muted); font-size: 0.84rem; overflow-wrap: break-word; }
.fm-layout { display: flex; min-height: 560px; max-height: 76vh; background: var(--fm-bg); }
.fm-sidebar {
  width: 240px; flex-shrink: 0; background: var(--fm-bg-deep); padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.fm-channel-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 6px;
  background: transparent; color: var(--fm-text-muted); border: none; cursor: pointer;
  font-size: 0.88rem; font-weight: 600; text-align: left; font-family: inherit;
}
.fm-channel-btn:hover { background: var(--fm-bg-hover); color: var(--fm-text); }
.fm-channel-btn.active { background: var(--fm-bg-hover); color: #fff; }
.fm-channel-hash { color: var(--fm-text-faint); font-weight: 700; }
.fm-channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-channel-count { font-size: 0.7rem; color: var(--fm-text-faint); background: var(--fm-bg-deep); border-radius: 8px; padding: 1px 6px; }

.fm-main { flex: 1; overflow-y: auto; padding: 16px 20px; color: var(--fm-text); min-width: 0; }
.fm-loading, .fm-main .empty-state { color: var(--fm-text-muted); }
.fm-channel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fm-channel-header > div:first-child { font-size: 1.15rem; font-weight: 800; color: #fff; }
.fm-hash { color: var(--fm-text-faint); }
.fm-channel-desc { color: var(--fm-text-muted); font-size: 0.84rem; margin-bottom: 14px; }

.fm-thread-list { display: flex; flex-direction: column; gap: 6px; }
.fm-thread-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--fm-bg-raised); cursor: pointer; border: 1px solid transparent;
}
.fm-thread-row:hover { border-color: var(--fm-blurple); background: var(--fm-bg-hover); }
.fm-thread-info { min-width: 0; flex: 1; }
.fm-thread-title { font-weight: 700; color: #fff; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-thread-meta { color: var(--fm-text-muted); font-size: 0.76rem; margin-top: 2px; }
.fm-pin { font-size: 0.9rem; }

.fm-signin-prompt {
  margin-top: 14px; padding: 10px 14px; border-radius: 8px; background: var(--fm-bg-raised);
  color: var(--fm-text-muted); font-size: 0.84rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

#fm-back { background: var(--fm-bg-raised); color: var(--fm-text); margin-bottom: 14px; }

.fm-post { display: flex; gap: 12px; padding: 10px 0; }
.fm-post--op { border-bottom: 1px solid var(--fm-border); padding-bottom: 16px; }
.fm-post-body-wrap { flex: 1; min-width: 0; }
.fm-post-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fm-post-author { font-weight: 700; color: #fff; font-size: 0.9rem; }
.fm-post-time { color: var(--fm-text-faint); font-size: 0.72rem; }
.fm-pin-badge { color: var(--fm-green); font-size: 0.72rem; font-weight: 700; }
.fm-thread-title-full { color: #fff; font-family: inherit; font-size: 1.3rem; margin: 4px 0 8px; }
.fm-post-content { color: var(--fm-text); font-size: 0.92rem; line-height: 1.5; word-break: break-word; }
.fm-mention { background: #5865f233; color: #c9cdfb; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.fm-code { background: var(--fm-bg-deep); border-radius: 4px; padding: 1px 5px; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
.fm-codeblock { background: var(--fm-bg-deep); border-radius: 6px; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; overflow-x: auto; white-space: pre-wrap; }
.fm-quote { display: block; color: var(--fm-text-muted); border-left: 3px solid var(--fm-text-faint); padding-left: 8px; margin: 4px 0; }
.fm-post-image { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin: 6px 0; background: var(--fm-bg-deep); }

.fm-replies .fm-post { border-bottom: 1px solid var(--fm-border); }
.fm-replies .fm-post:last-child { border-bottom: none; }

.fm-reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; position: relative; }
.fm-reaction-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fm-reaction-pill {
  background: var(--fm-bg-raised); border: 1px solid var(--fm-border); border-radius: 10px;
  color: var(--fm-text-muted); font-size: 0.78rem; padding: 2px 8px; cursor: pointer; font-family: inherit;
}
.fm-reaction-pill.reacted { background: #5865f22e; border-color: var(--fm-blurple); color: #c9cdfb; }
.fm-reaction-add {
  background: transparent; border: 1px solid var(--fm-border); border-radius: 10px;
  color: var(--fm-text-faint); font-size: 0.78rem; padding: 2px 8px; cursor: pointer; font-family: inherit;
}
.fm-reaction-add:hover { color: var(--fm-text); border-color: var(--fm-text-faint); }
.fm-emoji-picker {
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 5; display: flex; gap: 4px;
  background: var(--fm-bg-raised); border: 1px solid var(--fm-border); border-radius: 10px; padding: 6px; box-shadow: var(--shadow);
}
.fm-emoji-opt { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.fm-emoji-opt:hover { background: var(--fm-bg-hover); }

.fm-post-actions { display: flex; gap: 8px; margin-top: 6px; }
.fm-post-actions .btn { background: transparent; color: var(--fm-text-faint); border: none; padding: 2px 6px; font-size: 0.74rem; }
.fm-post-actions .btn:hover { color: var(--fm-text); }
.fm-post-actions .btn-danger { color: var(--fm-red); }
.fm-post-actions .btn-danger:hover { color: #ff6b6f; }

.fm-edit-title-input, .fm-edit-body-input {
  width: 100%; background: var(--fm-bg-deep); color: var(--fm-text); border: 1px solid var(--fm-blurple);
  border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.92rem; box-sizing: border-box;
}
.fm-edit-title-input { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.fm-edit-body-input { resize: vertical; min-height: 70px; }

#fm-new-activity-banner:not(:empty) { margin: 10px 0; }
.fm-refresh-banner {
  width: 100%; background: var(--fm-blurple); color: #fff; border: none; border-radius: 8px;
  padding: 8px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit;
}
.fm-refresh-banner:hover { background: var(--fm-blurple-hover); }

.fm-composer { margin-top: 16px; display: flex; gap: 10px; align-items: flex-end; position: relative; }
.fm-composer textarea {
  flex: 1; background: var(--fm-bg-raised); color: var(--fm-text); border: 1px solid var(--fm-border);
  border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 44px;
}
.fm-composer textarea:focus { outline: none; border-color: var(--fm-blurple); }
.fm-composer .btn { background: var(--fm-blurple); color: #fff; border: none; }
.fm-composer .btn:hover { background: var(--fm-blurple-hover); }

.fm-mention-dropdown {
  position: absolute; bottom: calc(100% + 4px); left: 0; min-width: 200px; max-width: 320px; z-index: 6;
  background: var(--fm-bg-raised); border: 1px solid var(--fm-border); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow);
}
.fm-mention-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--fm-text); font-size: 0.86rem; cursor: pointer; }
.fm-mention-option:hover { background: var(--fm-bg-hover); }
.fm-mention-option .profile-avatar { width: 22px; height: 22px; font-size: 0.6rem; }

@media (max-width: 860px) {
  .fm-layout { flex-direction: column; max-height: none; }
  .fm-sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--fm-border); }
  .fm-channel-btn { flex-shrink: 0; }
  .fm-channel-name { max-width: 90px; }
  .fm-main { max-height: 64vh; }
  .fm-post { flex-wrap: wrap; }
}