/* Heroes: prominent career progress and actions, with a bounded reserve list. */
#app .roster-head-actions {
  float: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--fs-md) / 2);
  margin-top: var(--fs-sm);
}
#app .roster-head-actions > * {
  flex: 1;
  min-height: calc(var(--fs-md) * 3.5);
  padding: calc(var(--fs-md) / 2) var(--fs-sm);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: center;
}
#app .btn-recruit {
  background: var(--accent-ember);
  color: var(--bg-panel-raised);
  border-color: var(--accent-ember);
}
#app .btn-careermap {
  background: var(--element-dark-fill);
  color: var(--element-dark-text);
  border-color: var(--accent-arcane);
}
#app .roster-cap-note { display: grid; place-content: center; }
#app .roster-reserve-grid {
  max-height: calc(var(--fs-md) * 14);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#app .roster-reserve-card { flex-shrink: 0; }
#app .roster-reserves { margin-top: var(--fs-md); }
#app .roster-reserves summary {
  cursor: pointer;
  padding: var(--fs-sm) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}
#app .career-path-section.cps {
  margin: var(--fs-md) 0;
  padding: var(--fs-md);
  border: thin solid var(--accent-arcane);
  border-radius: var(--r-md);
  background: var(--element-dark-fill);
  gap: var(--fs-sm);
}
#app .cps-title { font-size: var(--fs-lg); color: var(--element-dark-text); }
#app .cps-progress { height: calc(var(--fs-md) * 2); background: var(--bg-panel-raised); }
#app .cps-progress-txt { font-size: var(--fs-sm); }
#app .cps-teasers-k, #app .cps-teaser { font-size: var(--fs-xs); }
#app .roster-detail .talent-branches {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fs-md) * 14)), 1fr));
}
#app .roster-detail .talent-branch { min-width: 0; overflow-wrap: anywhere; }
#career-map-modal .cm-line[hidden] { display: none; }
#career-map-modal .cm-head-static { flex-direction: column; align-items: start; gap: calc(var(--fs-md) / 2); padding: var(--fs-lg); padding-right: calc(var(--fs-md) * 5); }
#career-map-modal .cm-head-title { font-size: var(--fs-xl); }
#career-map-modal .cm-head-sub, #career-map-modal .cm-note { font-size: var(--fs-sm); }
#career-map-modal .cm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  gap: var(--fs-sm);
  padding: var(--fs-sm) var(--fs-lg);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--bg-panel);
  border-bottom: thin solid var(--border-soft);
}
#career-map-modal .cm-filter select {
  min-height: calc(var(--fs-md) * 3.5);
  min-width: 0;
  flex: 1;
  padding: calc(var(--fs-md) / 2) var(--fs-sm);
  font-size: var(--fs-md);
  color: var(--text-primary);
  background: var(--bg-panel-raised);
  border: thin solid var(--border-active);
  border-radius: var(--r-sm);
}
#career-map-modal .cm-modal-close {
  width: calc(var(--fs-md) * 3.5);
  height: calc(var(--fs-md) * 3.5);
  font-size: var(--fs-lg);
}
#career-map-modal .cm-line { padding: var(--fs-sm); gap: var(--fs-sm); }
#career-map-modal .cm-card { padding: var(--fs-md); gap: var(--fs-xs); }
#career-map-modal .cm-card-top { gap: var(--fs-sm); flex-wrap: wrap; }
#career-map-modal .cm-portrait {
  display: block;
  flex: 0 0 calc(var(--fs-md) * 4.5);
  width: calc(var(--fs-md) * 4.5);
  height: calc(var(--fs-md) * 4.5);
  border-radius: var(--r-sm);
  background-color: var(--surface-art-deep);
  image-rendering: pixelated;
}
#career-map-modal .cm-name { font-size: var(--fs-lg); line-height: 1.4; }
#career-map-modal .cm-role, #career-map-modal .cm-tagline,
#career-map-modal .cm-strengths { font-size: var(--fs-sm); }

.combat-build-timing {
  margin: var(--fs-xs) 0;
  padding: var(--fs-xs);
  border-inline-start: solid var(--accent-info);
  border-radius: var(--r-sm);
  background: var(--element-water-fill);
  color: var(--text-info);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.mail-capacity-warning {
  padding: 12px;
  margin: 0 0 12px;
  border: 1px solid var(--border-active);
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised);
  color: var(--text-ember);
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* style.css
 * Dashboard layout: TopBar / [Control Center | Operations | Inspector] / Live Log
 * Theme: warm paper light with dark art wells — tokens in :root below.
 * Design tokens: Page --bg-deep, Panel --bg-panel, Border --border-soft, Text --text-primary
 * Font: Inter (body), Cinzel (display/logo), JetBrains Mono (numbers)
 */

/* ============================================================== tokens */

:root {
  /* Warm paper light palette */
  --bg-deep:         #EFEAE2;
  --bg-panel:        #FBF8F3;
  --bg-panel-raised: #FFFDF9;
  --bg-hover:        #F3EEE5;
  --border-soft:     #DED5C6;
  --border-active:   #C4B79F;

  --accent-ember:   #C4501F;
  --accent-arcane:  #5B3FBF;
  --accent-gold:    #A87A17;
  --accent-info:    #2E7CC4;

  /* Text-role colours are intentionally separate from the brighter accents.
     Accent tokens remain available for fills, borders, meters, and FX. */
  --text-ember:     #9A3A12;
  --text-gold:      #6E4E06;
  --text-info:      #1F639B;
  --text-success:   #196B3A;
  --text-poison:    #2D7125;

  /* v9 Batch C (#14): text tiers darkened for legibility on the light theme —
     muted/faint were washing out on panels. Everything a step closer to ink. */
  --text-primary:   #1A1712;
  --text-secondary: #3B342A;
  --text:           #1A1712;
  --text-muted:     #5C5346;
  --text-faint:     #6E6558;
  --text-dim:       var(--text-faint);

  --hp-high:  #2E9E5B;
  --hp-mid:   #C8961E;
  --hp-low:   #D6402F;
  --danger:   #C0392B;
  --success:  #1F7A44;

  /* Element accents plus accessible text/fill pairs for the 11px badges. */
  --el-fire:  #E0562B;
  --el-water: #2E7CC4;
  --el-wind:  #2E9E5B;
  --el-earth: #B8860B;
  --el-light: #C9A227;
  --el-dark:  #6A4BD0;
  --el-void:  #8E44AD;
  --element-fire-text:  #A83221;
  --element-water-text: #1E6397;
  --element-wind-text:  #246D43;
  --element-earth-text: #725600;
  --element-light-text: #715900;
  --element-dark-text:  #5639B0;
  --element-void-text:  #762D91;
  --element-fire-fill:  #FBEAE7;
  --element-water-fill: #E7F1F8;
  --element-wind-fill:  #E8F4ED;
  --element-earth-fill: #F5F0E2;
  --element-light-fill: #F5F0DA;
  --element-dark-fill:  #EEEAF9;
  --element-void-fill:  #F3EAF7;

  /* Values in these extracted role tokens are intentionally unchanged in B1a. */

  /* Deliberate dark content-well ramp. */
  --well-deep:        #14181F;
  --well:             #1B2028;
  --well-raised:      #232A34;
  --well-line:        #3A424F;
  --well-line-strong: #4A5563;
  --well-text:        #E8E4DC;
  --well-text-muted:  #A7AEB9;

  /* Extracted surface roles */
  --surface-art-deep:         #221a3d;
  --surface-art-mid:          #3b2a63;
  --surface-art-raised:       #2f2452;
  --surface-battlefield:      var(--well-deep);
  --surface-brand:            #2A2E52;
  --surface-brand-deep:       #1B1E36;
  --surface-control:          var(--well);
  --surface-currency-action:  #0e9bb5;
  --surface-fab:              var(--well-raised);
  --surface-fab-deep:         var(--well-deep);
  --surface-modal:            var(--well-raised);
  --surface-modal-deep:       var(--well-deep);
  --surface-panel:            #FBF8F3;
  --surface-simulation:       var(--well-deep);
  --surface-well:             var(--well);
  --surface-well-hover:       var(--well-raised);

  /* Extracted border and divider roles */
  --line-class-active:       #8B6BFF;
  --line-class-fallback:     #555;
  --line-class-lock-active:  #d65f8a;
  --line-currency-action:    #0e9bb5;
  --line-dynamic-fallback:   #888;
  --line-gold:               #caa02e;
  --pvp-metal-gold:          #C59A2A;
  --pvp-metal-silver:        #9AA6B6;
  --pvp-metal-bronze:        #A8643B;
  --line-highlight:          #FFFFFF;
  --line-info:               #2f6fb2;
  --line-item-ready:         #c99a2e;
  --line-keystone:           #8FA0B5;
  --line-locked-accent:      #c9972f;
  --line-strong:             #000;
  --line-well:               var(--well-line);
  --line-well-active:        var(--well-line-strong);

  /* Extracted text roles */
  --text-art-primary:          #EDE7FF;
  --text-audio-muted:          #9aa4b2;
  --text-brand:                #F3DFA6;
  --text-combat-damage:        #f1f3f6;
  --text-combat-verb:          #778;
  --text-control-on-well:      var(--well-text-muted);
  --text-currency:             #0e9bb5;
  --text-effect-arcane:        #c39bd3;
  --text-effect-info:          #7ec8ff;
  --text-equipment-muted:      #8b94a3;
  --text-equipment-primary:    #e6ebf2;
  --text-equipment-secondary:  #9aa5b5;
  --text-fab-icon:             #f3cc68;
  --text-item-level:           #6b7480;
  --text-item-secondary:       #c9d2df;
  --text-lock:                 #ffb8d2;
  --text-lock-active:          #ffd6e6;
  --text-locked-muted:         #697180;
  --text-locked-strong:        #1e2430;
  --text-meter-label:          #0a0a0a;
  --text-modal-muted:          var(--well-text-muted);
  --text-modal-primary:        var(--well-text);
  --text-navigation-caption:   #9b958a;
  --text-navigation-muted:     #8A93A2;
  --text-on-bright:            #14101c;
  --text-on-class:             #12161c;
  --text-on-ember:             #1a0f08;
  --text-on-ember-aa:          #000;
  --text-on-gold:              #1a1008;
  --text-on-gold-deep:         #3a2705;
  --text-on-gold-item:         #4a3305;
  --text-on-gold-medium:       #4a2f06;
  --text-on-gold-muted:        #4A3606;
  --text-on-gold-strong:       #201700;
  --text-on-gold-stronger:     #2a1c00;
  --text-on-info:              #04222a;
  --text-on-info-deep:         #071018;
  --text-on-rarity:            #10131a;
  --text-on-success:           #1a1206;
  --text-on-well:              #FFFFFF;
  --text-overlay-muted:        #8a93a3;
  --text-skill:                #ffb84d;
  --text-warning:              #6b5406;
  --text-warning-deep:         #7d6608;
  --text-warning-medium:       #6b4e0a;
  --text-warning-on-art:       #FFD9CF;
  --text-warning-strong:       #5a4604;
  --text-well-faint:           var(--well-text-muted);
  --text-well-primary:         var(--well-text);

  /* Gold ramp */
  --gold:         #E3B23C;
  --gold-bright:  #e6c06a;
  --gold-deep:    #A9741C;
  --gold-pale:    #ffe9a8;

  /* Rarity roles */
  --rarity-common:              #8a9ba8;
  --rarity-common-text:         #556070;
  --rarity-epic:                #9b59b6;
  --rarity-epic-text:           #8843B0;
  --rarity-epic-text-bright:    #c08ad8;
  --rarity-legendary:           #e6c06a;
  --rarity-legendary-accent:    #f39c12;
  --rarity-legendary-text:      #9A6D12;
  --rarity-mythic:              #e74c3c;
  --rarity-mythic-text:         #C0392B;
  --rarity-mythic-text-bright:  #ef7b6d;
  --rarity-rare:                #3498db;
  --rarity-rare-bright:         #5dade2;
  --rarity-rare-text:           #1F6FB2;
  --rarity-rare-text-bright:    #7fc0ea;
  --rarity-uncommon:            #4caf50;
  --rarity-uncommon-bright:     #58d68d;
  --rarity-uncommon-text:       #1E8A4C;

  /* Status roles */
  --state-available:       #2b7a3f;
  --state-bleed:           #ff6b6b;
  --state-blocked:         #a3452e;
  --state-burning:         #ffa94d;
  --state-critical:        #ff5a4d;
  --state-critical-ally:   #ffe27a;
  --state-critical-enemy:  #ff8a5a;
  --state-damage:          #ff7a45;
  --state-danger:          #E74C3C;
  --state-defense:         #2980b9;
  --state-heal:            #69f08a;
  --state-info:            #3498db;
  --state-offense:         #c0392b;
  --state-poison:          #69db7c;
  --state-poison-bright:   #7dd45a;
  --state-regression:      #ff7b6b;
  --state-set-bonus:       #16a085;
  --state-slow:            #d68910;
  --state-success:         #27ae60;
  --state-success-bright:  #58D68D;
  --state-wall:            #7f8c8d;
  --state-warning:         #f39c12;
  --state-warning-deep:    #b9770e;

  /* Meter roles */
  --meter-arcane-start:   #8B7BE0;
  --meter-danger-deep:    #B02A17;
  --meter-danger-start:   #E88C6A;
  --meter-info-start:     #7FB6E8;
  --meter-success-end:    #3dbd7a;
  --meter-success-start:  #6FCB94;
  --meter-warning-end:    #e67e22;

  /* FX, glow, and animation roles */
  --fx-action-arcane:                #7B52E0;
  --fx-action-ember:                 #c85e28;
  --fx-action-ember-strong:          #C4441C;
  --fx-action-info:                  #5DADE2;
  --fx-brand-shadow:                 #8a6a12;
  --fx-cast:                         #7fd8ff;
  --fx-coin-deep:                    #a97a15;
  --fx-coin-highlight:               #fff6c9;
  --fx-coin-mid:                     #e8b53a;
  --fx-ember-highlight:              #FFE0A0;
  --fx-gold-action-deep:             #966D09;
  --fx-gold-fill:                    #f2c14e;
  --fx-gold-fill-bright:             #f5d98b;
  --fx-gold-fill-deep:               #d9a93f;
  --fx-gold-fill-pale:               #ffe08a;
  --fx-gold-shade:                   #D99A2F;
  --fx-highlight:                    #FFFFFF;
  --fx-info-fill-bright:             #bfe3ff;
  --fx-info-fill-deep:               #5aa2e6;
  --fx-metal-base:                   #9AA5B1;
  --fx-metal-handle:                 #7F5539;
  --fx-metal-highlight:              #D8DEE4;
  --fx-projectile-arcane:            #b388ff;
  --fx-projectile-arrow:             #e8d9a0;
  --fx-projectile-bean-deep:         #6b4128;
  --fx-projectile-bean-highlight:    #a9683c;
  --fx-projectile-danger:            #e74c3c;
  --fx-projectile-danger-bright:     #FF6B6B;
  --fx-projectile-electric:          #6ee7ff;
  --fx-projectile-ember:             #E0722B;
  --fx-projectile-enemy:             #d98880;
  --fx-projectile-enemy-electric:    #ff8a65;
  --fx-projectile-energy:            #7fdcff;
  --fx-projectile-energy-deep:       #238ed1;
  --fx-projectile-foam:              #BFE3F5;
  --fx-projectile-note:              #C77DFF;
  --fx-projectile-organic:           #6AB04C;
  --fx-projectile-packet-deep:       #3EC9A7;
  --fx-projectile-packet-highlight:  #9BF0DA;
  --fx-projectile-pellet:            #fff4bc;
  --fx-projectile-shell:             #b87832;
  --fx-resource-gain:                #E0B23C;
  --fx-slash-core:                   #dff1ff;
  --fx-slash-stab:                   #EAF2FF;
  --fx-slash-sweep:                  #CFE9A8;
  --fx-star:                         #ffcf3f;
  --fx-star-accent:                  #f39c12;
  --fx-star-bright:                  #f1c40f;
  --fx-support-action-bright:        #ffd970;
  --fx-support-action-deep:          #e6b23c;
  --fx-toast-highlight:              #fff6dd;

  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --fs-micro: 0.6875rem;  /* 11px */
  --fs-2xs:   0.75rem;    /* 12px */
  --fs-xs:    0.8125rem;  /* 13px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-md:    1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.375rem;   /* 22px */
  --fs-2xl:   1.75rem;    /* 28px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */

  /* Radius scale */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* Legacy radius aliases */
  --radius:    var(--r-sm);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-lg);

  /* Elevation scale — v7.5 C8 layered depth for the light theme */
  --e0: none;
  --e1: 0 1px 2px rgba(62, 47, 28, 0.06);
  --e2: 0 2px 6px rgba(62, 47, 28, 0.08), 0 8px 24px rgba(62, 47, 28, 0.06);
  --e3: 0 4px 14px rgba(62, 47, 28, 0.12), 0 12px 40px rgba(62, 47, 28, 0.10);
  --e4: 0 12px 32px rgba(62, 47, 28, 0.16), 0 32px 80px rgba(62, 47, 28, 0.12);

  /* Legacy elevation aliases */
  --shadow-sm: var(--e1);
  --shadow-md: var(--e2);
  --shadow-lg: var(--e3);

  /* Shell dimensions */
  --topbar-h:   52px;
  --log-h:      48px;
  --cc-w:       236px;
  --insp-w:     260px;
}

/* ============================================================== reset */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: 0.02em;
}

h1 { font-size: var(--fs-xl); color: var(--text-primary); }
h2 { font-size: var(--fs-md);   color: var(--accent-arcane); margin-bottom: 6px; }

.subtitle { color: var(--text-muted); margin: 4px 0 0; font-size: var(--fs-xs); }

button { font-family: var(--font-body); cursor: pointer; }

/* ============================================================== AppShell grid */

/* v6.4 (Batch D, item 6): the bottom Live Log strip was removed to give the
   combat feed / main content the full height. #live-log is kept in the DOM
   (hidden) so renderLiveLog() has a safe target, but it no longer occupies a
   grid row. */
#app-shell {
  display: grid;
  /* v7.4 (issue 3): the buff bar now has its OWN explicit grid row. It used to
     be an unplaced child auto-flowed into an implicit row BELOW main-content,
     which overflow:hidden clipped off-screen — so active-buff timers were
     invisible (worst on mobile). The `auto` track collapses to 0 when the bar
     carries `.hidden` (no active buffs), so there's zero layout cost when idle. */
  grid-template-rows: var(--topbar-h) auto 1fr;
  /* Single column MUST be capped at the viewport width. Without minmax(0,1fr)
     the implicit column expands to the topbar's min-content (~800px), which
     pushed #app off-screen on phones. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "topbar"
    "buff-bar"
    "main-content";
  height: 100vh;
  /* 100vh บนมือถือคือความสูงตอนซ่อนแถบ URL ปลายล่างของ #app จึงตกใต้ขอบจอ
     ขณะที่ .bottom-nav (fixed) เกาะขอบล่างที่มองเห็นจริง แล้วทับเนื้อหาแถวสุดท้าย */
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}
#buff-bar { grid-area: buff-bar; }

#live-log { display: none !important; }

#main-content {
  grid-area: main-content;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

/* ============================================================== TopBar */

#topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px 0 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

/* The art itself has a dark pixel outline, so it can sit directly on the bar. */
.tk-logo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-gold);
  letter-spacing: 0.12em;
  padding: 0 18px;
  white-space: nowrap;
  background: transparent;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Header logo image (falls back to the wordmark span if the file is missing).
   image-rendering stays AUTO: this is a non-integer downscale, and nearest-neighbour
   drops whole pixel rows out of the letterforms — measured, it's what made the first
   version unreadable. */
.tk-logo-picture { display: block; width: 190px; height: 26px; flex: none; }
.tk-logo-img { width: 190px; height: 26px; object-fit: contain; display: block; image-rendering: auto; }
.tk-logo-word { font-family: var(--font-display); font-weight: 700; color: var(--text-brand); letter-spacing: 0.12em; }
.tk-logo-mobile-word { display: none; }

.tk-topbar-resources {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  flex: 1;
}

.tk-resource {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.tk-resource-icon { font-size: var(--fs-sm); line-height: 1; }
.tk-gscoin-art { width: 15px; height: 15px; }
.tk-pvpcoin-art { width: 15px; height: 15px; }
.tk-pvpcoin-fb { color: var(--accent-arcane); font-weight: 900; }
.pvp-topbar-resource .tk-resource-val { color: var(--accent-arcane); }
.tk-resource-val  { color: var(--text-gold); font-weight: 700; }
.tk-resource-label{ color: var(--text-muted); font-size: var(--fs-micro); }

.tk-resource-sep {
  width: 1px;
  height: 20px;
  background: var(--border-soft);
  margin: 0 4px;
}

.tk-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.tk-player-lv {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.tk-player-lv strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.tk-version {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  padding: 2px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
}

/* Close-beta notice. Deliberately NOT in the mobile hide list below — the whole
   point is that every player sees the build is a test and when it ends. */
.tk-beta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-gold);
  padding: 2px 8px;
  margin-left: 12px;
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================== Control Center */

#control-center {
  width: var(--cc-w);
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.cc-section-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 12px 14px 6px;
}

/* Hero mini-cards */
.cc-heroes { padding: 0 8px 4px; display: flex; flex-direction: column; gap: 4px; }

.cc-hero-card {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--class-color, var(--line-class-fallback));
  border-radius: var(--r-sm);
  padding: 7px 9px;
  cursor: pointer;
  transition: background 0.1s;
}

.cc-hero-card:hover  { background: var(--bg-hover); }
.cc-hero-card.cc-hero-selected {
  border-color: var(--class-color, var(--line-class-active));
  background: color-mix(in srgb, var(--class-color, var(--line-class-active)) 15%, var(--bg-panel-raised));
}

.cc-hero-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

/* v9 Batch C (#15): hero/monster icons sit frame-free — no colored box or
   border, just a soft ground shadow for depth (same treatment as sim tokens). */
.cc-hero-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background: transparent;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs);
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Sprite avatar — front-facing frame from the hero's PIPOYA sheet */
.cc-hero-avatar-sprite {
  background-color: transparent;
  border: none;
  image-rendering: pixelated;
}

.cc-hero-avatar-img {
  background-size: cover;
  background-position: center top;
  border: none;
}
.cc-hero-info  { flex: 1; min-width: 0; }
.cc-hero-name  { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-hero-sub   { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-mono); }
.cc-hero-gs    { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--accent-arcane); white-space: nowrap; flex-shrink: 0; font-weight: 700; }

.cc-hp-bar { height: 8px !important; }
.cc-hp-bar .hp-label { font-size: 0.54rem; }

/* Battle button inside CC */
.cc-battle-btn {
  margin: 6px 8px 4px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--accent-ember), var(--fx-action-ember));
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-on-ember);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  width: calc(100% - 16px);
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cc-battle-btn:hover { opacity: 0.88; }
.cc-battle-btn:active { opacity: 0.75; }

/* Background battle running indicator chip */
.cc-battle-chip {
  display: block;
  width: calc(100% - 16px);
  margin: 4px 8px 2px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--accent-ember) 14%, var(--bg-panel-raised));
  border: 1px solid var(--accent-ember);
  border-radius: var(--r-xs);
  color: var(--text-ember);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  animation: battle-chip-pulse 2s ease-in-out infinite;
}
.cc-battle-chip:hover { opacity: 0.85; }
@keyframes battle-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Quick menu */
.cc-menu { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }

.cc-menu-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: left;
  width: 100%;
  transition: background 0.1s, color 0.1s;
  position: relative;
}

.cc-menu-item:hover:not([disabled]) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cc-menu-active {
  background: color-mix(in srgb, var(--accent-arcane) 14%, var(--bg-panel-raised));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 30%, transparent);
}

.cc-menu-disabled { opacity: 0.38; cursor: not-allowed; }

.cc-menu-battle {
  background: color-mix(in srgb, var(--accent-ember) 14%, var(--bg-panel-raised));
  color: var(--text-ember);
  border: 1px solid color-mix(in srgb, var(--accent-ember) 35%, transparent);
  font-weight: 700;
}
.cc-menu-battle:hover:not([disabled]) {
  background: color-mix(in srgb, var(--accent-ember) 22%, var(--bg-panel-raised));
  color: var(--text-primary);
}

.cc-menu-icon  { font-size: var(--fs-md); width: 18px; text-align: center; flex-shrink: 0; }
.cc-menu-label { flex: 1; }

.cc-menu-locked {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-faint);
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

.cc-empty {
  padding: 10px 14px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}

.cc-no-team-prompt {
  padding: 12px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-start-btn {
  min-height: 44px;
  padding: 9px 10px;
  background: var(--bg-panel-raised);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
.cc-start-btn:hover { border-color: var(--accent-arcane); color: var(--text-primary); }

/* ============================================================== Operations (#app) */

#app {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  min-width: 0;
  background: var(--bg-deep);
}

/* ============================================================== Inspector */

#inspector {
  width: var(--insp-w);
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-soft);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.insp-header {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.insp-empty {
  padding: 20px 14px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.6;
}

.insp-hero-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.insp-hero-avatar {
  width: 32px; height: 32px;
  /* Rounded square, not a circle. A 50% radius clips a full-body sprite at the
     top and bottom centre - exactly where the head and the feet are - so the
     hat brim came off. Corners are empty in every portrait, so 8px costs
     nothing and keeps the whole silhouette. */
  border-radius: var(--r-sm);
  background: transparent; /* v9 C (#15): no colored frame */
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.insp-hero-avatar-img {
  background-size: cover;
  background-position: center top;
  width: 48px; height: 48px;
}
.insp-hero-headinfo { flex: 1; min-width: 0; }
.insp-hero-name { font-weight: 700; font-size: var(--fs-sm); color: var(--text-primary); }
.insp-hero-role { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 1px; }

/* S8: editable hero name */
.insp-hero-name-input {
  width: 100%;
  font-weight: 700; font-size: var(--fs-md);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 2px 6px;
  font-family: var(--font-body);
  transition: border-color 0.15s, background 0.15s;
}
.insp-hero-name-input:hover { border-color: var(--border-soft); }
.insp-hero-name-input:focus { outline: none; border-color: var(--accent-gold); background: var(--bg-panel-raised); }

.insp-exp { padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }

.insp-section-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 8px 14px 4px;
}

.insp-stats {
  padding: 4px 14px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.insp-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.insp-stat-label { font-size: var(--fs-micro); color: var(--text-muted); }
.insp-stat-val   { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-primary); font-weight: 600; }

.insp-equip-slots { padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 4px; }

.insp-equip-slot {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  font-size: var(--fs-2xs);
}

.insp-slot-icon { font-size: var(--fs-sm); flex-shrink: 0; }
.insp-slot-name { flex: 1; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-slot-name.empty { color: var(--text-muted); font-style: italic; }
.insp-slot-gs   { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent-arcane); flex-shrink: 0; }

.insp-stage-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.insp-stage-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
}
.insp-stage-stat:last-child { border-bottom: none; }
.insp-stage-stat-label { color: var(--text-muted); }
.insp-stage-stat-val   { font-family: var(--font-mono); color: var(--text-gold); font-weight: 600; }

/* ============================================================== Live Log (compact strip) */

#live-log {
  grid-area: live-log;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  height: var(--log-h);
}

.log-strip-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 12px 0 16px;
  border-right: 1px solid var(--border-soft);
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.log-strip-entries {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  height: 100%;
}

.log-strip-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  border-right: 1px solid var(--border-soft);
  height: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}
.log-strip-entry:last-child { border-right: none; }

.log-strip-icon { font-size: var(--fs-xs); flex-shrink: 0; }

.log-strip-entry.log-entry-combat  { color: var(--text-muted); }
.log-strip-entry.log-entry-skill   { color: var(--accent-arcane); }
.log-strip-entry.log-entry-heal    { color: var(--text-success); }
.log-strip-entry.log-entry-bleed   { color: var(--danger); }
.log-strip-entry.log-entry-burn    { color: var(--text-ember); }
.log-strip-entry.log-entry-poison  { color: var(--text-poison); }
.log-strip-entry.log-entry-craft   { color: var(--accent-arcane); }
.log-strip-entry.log-entry-loot    { color: var(--text-gold); }
.log-strip-entry.log-entry-system  { color: var(--text-info); }
.log-strip-entry.log-entry-equip   { color: var(--text-success); }

.log-strip-empty {
  padding: 0 16px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  font-style: italic;
}

.log-strip-clear {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  background: none;
  border: none;
  border-left: 1px solid var(--border-soft);
  cursor: pointer;
  padding: 0 12px;
  height: 100%;
  flex-shrink: 0;
}
.log-strip-clear:hover { color: var(--text-muted); background: var(--bg-hover); }

/* ============================================================== Combat Feed (in Operations) */

.cf-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cf-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.cf-panel-title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.cf-panel-count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  padding: 1px 6px;
}

.cf-entries {
  overflow-y: auto;
  max-height: 220px;
  min-height: 80px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cf-new-events {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 55%, var(--border-soft));
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-panel-raised) 92%, transparent);
  color: var(--text-gold);
  box-shadow: var(--e2);
  font: 700 0.65rem/1 var(--font-body);
  cursor: pointer;
}
.cf-new-events:hover { border-color: var(--accent-gold); }
.cf-new-events[hidden] { display: none; }
/* v7.4 (Stage): FIXED-height combat feed (~20 rows) so the box never grows/shrinks
   as events stream in — it just scrolls. Scoped to the Stage (operations) screen;
   the battle screen keeps its own flex sizing. */
body[data-screen="operations"] .cf-entries {
  height: min(52vh, 520px);
  height: min(52dvh, 520px);
  min-height: min(52vh, 520px);
  min-height: min(52dvh, 520px);
  max-height: min(52vh, 520px);
  max-height: min(52dvh, 520px);
}

.cf-entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--text-muted);
  border-radius: var(--r-xs);
  margin: 0 4px;
  transition: background 0.05s;
}

.cf-entry-icon { font-size: var(--fs-2xs); flex-shrink: 0; line-height: 1; }

.cf-entry-combat  { color: var(--text-muted); }
.cf-entry-skill   { color: var(--accent-arcane); background: color-mix(in srgb, var(--accent-arcane) 6%, transparent); }
.cf-entry-heal    { color: var(--text-success); }
.cf-entry-bleed   { color: var(--danger); }
.cf-entry-burn    { color: var(--text-ember); }
.cf-entry-poison  { color: var(--text-poison); }
.cf-entry-craft   { color: var(--accent-arcane); }
.cf-entry-loot    { color: var(--text-gold); background: color-mix(in srgb, var(--accent-gold) 5%, transparent); }
.cf-entry-system  { color: var(--text-info); }
.cf-entry-equip       { color: var(--text-success); }
.cf-entry-range_debug { color: var(--text-muted); font-size: var(--fs-micro); opacity: 0.85; }
.cf-entry-range_debug.cf-blocked { color: var(--state-danger); opacity: 1; }

/* Per-hero tint: line text takes the acting hero's class colour + left accent.
   crit/skill classes below override the text colour for their warm highlight. */
.cf-entry-hero {
  color: var(--hero-col, var(--text-secondary));
  border-left: 3px solid var(--hero-col, transparent);
  padding-left: 9px;
  margin-left: 4px;
}

/* Skill damage (non-crit) = orange punch */
.cf-entry-skilldmg {
  color: var(--text-ember) !important;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-ember) 7%, transparent);
}

.cf-entry-crit {
  color: var(--state-critical) !important;
  font-weight: 800;
  background: color-mix(in srgb, var(--state-critical) 12%, transparent) !important;
  animation: critPop 0.32s ease-out; /* PXD: crit punch */
}
@keyframes critPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); background: color-mix(in srgb, var(--accent-ember) 22%, transparent) !important; }
  100% { transform: scale(1); }
}

.cf-empty {
  padding: 20px 12px;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
}

/* ============================================================== Inspector — hero management extensions */

.insp-equip-action-row {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.insp-equip-action-btn {
  flex: 1;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
  text-align: center;
}
.insp-equip-action-btn:hover { background: var(--bg-hover); }
.insp-equip-action-btn.btn-equip-primary {
  border-color: color-mix(in srgb, var(--accent-arcane) 50%, transparent);
  color: var(--accent-arcane);
}
.insp-equip-action-btn.btn-equip-primary:hover {
  background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-panel-raised));
}

/* S1-D: locked future slots */
.insp-equip-slot-locked {
  opacity: 0.35;
  border-style: dashed;
}
.insp-slot-future {
  font-size: var(--fs-micro); color: var(--text-muted);
  background: var(--bg-deep); border-radius: var(--r-xs);
  padding: 1px 5px; flex-shrink: 0;
}

/* S1-D: set bonus panel */
.insp-set-list { padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 4px; }
.insp-set-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 9px; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); border: 1px solid var(--border-soft);
}
.insp-set-active {
  border-color: var(--accent-gold);
  background: rgba(230,192,106,0.08);
}
.insp-set-name { color: var(--text-gold); font-weight: 600; }
.insp-set-bonus { color: var(--text-success); font-family: var(--font-mono); font-size: var(--fs-micro); }

/* S1-D: blueprint row effects line + delete button */
.bp-effects-line {
  font-size: var(--fs-2xs); color: var(--accent-arcane);
  padding: 2px 0 4px;
}
.bp-row-actions .btn { flex: 1; }

.insp-skill-list { padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 4px; }

/* v9 Batch E: registered-size skill loadout header + equip controls */
.skill-loadout { padding: 6px 14px 4px; }
.skill-loadout-label { font-size: var(--fs-micro); color: var(--text-muted); margin-bottom: 6px; }
.skill-loadout-slots { display: flex; gap: 8px; }
.skill-slot {
  flex: 1; position: relative; min-height: 56px; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px solid var(--border-soft); background: var(--bg-deep); text-align: center; padding: 4px;
}
.skill-slot-filled { border-color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-deep)); }
.skill-slot-num { position: absolute; top: 2px; left: 5px; font-size: var(--fs-micro); font-weight: 800; color: var(--text-faint); }
.skill-slot-name { font-size: var(--fs-micro); font-weight: 700; color: var(--text-secondary); line-height: 1.05; }
.skill-slot-plus { font-size: var(--fs-xl); color: var(--text-faint); font-weight: 300; }
.skill-slot-empty { border-style: dashed; }

.insp-skill-row-equipped { border-color: var(--accent-gold); box-shadow: inset 3px 0 0 var(--accent-gold); }
.insp-skill-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.skill-equip-btn {
  font-size: var(--fs-micro); font-weight: 700; padding: 4px 9px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--accent-arcane); background: transparent; color: var(--accent-arcane); white-space: nowrap;
}
.skill-equip-btn:hover:not([disabled]) { background: var(--accent-arcane); color: var(--text-on-well); }
.skill-equip-btn.skill-equip-on { border-color: var(--accent-gold); color: var(--text-on-gold-deep); background: linear-gradient(180deg, var(--fx-gold-fill-bright), var(--fx-gold-fill-deep)); }
.skill-equip-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.insp-skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
}

.insp-skill-icon { font-size: var(--fs-sm); flex-shrink: 0; }
.insp-skill-info { flex: 1; min-width: 0; }
.insp-skill-name { color: var(--text-primary); font-weight: 600; }
.insp-skill-desc { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 1px; }

.insp-skill-badge-active {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-success);
  background: color-mix(in srgb, var(--hp-high) 14%, var(--bg-deep));
  border: 1px solid color-mix(in srgb, var(--hp-high) 40%, transparent);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.insp-skill-badge-locked {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-faint);
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.insp-skill-row-locked {
  opacity: 0.55;
}

/* Compact rewards row */
.oc-rewards-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  flex-wrap: wrap;
}

.oc-reward-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.oc-reward-chip-gold  { color: var(--text-gold); }
.oc-reward-chip-exp   { color: var(--text-success); }
.oc-reward-chip-mat   { color: var(--text-primary); }
.oc-reward-chip-bonus { color: var(--accent-arcane); }

/* ============================================================== buttons */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.1s;
}

.btn:hover  { background: var(--bg-hover); }
.btn:active { transform: scale(0.97); }

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-ember), var(--fx-action-ember));
  border-color: transparent;
  color: var(--text-on-ember);
}
.btn-primary:hover { opacity: 0.9; background: linear-gradient(135deg, var(--accent-ember), var(--fx-action-ember)); }

.btn-large  { padding: 13px 18px; font-size: var(--fs-md); }
.btn-full   { width: 100%; }
.btn-small  { padding: 5px 10px; font-size: var(--fs-2xs); }
.btn-ghost  { background: transparent; }
.btn-ghost:hover { background: var(--bg-hover); }

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ============================================================== layout (screen-level) */

.screen { display: flex; flex-direction: column; gap: 10px; }

.screen-header { display: flex; flex-direction: column; gap: 2px; }

.roster-header {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.screen-footer {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.screen-footer .btn { flex: 1; }

/* ============================================================== team builder */

.team-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.team-slot {
  border-radius: var(--r-sm);
  padding: 12px 6px;
  text-align: center;
  font-size: var(--fs-xs);
  border: 1px dashed var(--border-soft);
  color: var(--text-muted);
}

.team-slot.filled {
  border: 1px solid var(--class-color);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--class-color) 14%, var(--bg-panel));
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.class-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 12px;
  text-align: left;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.class-card:hover  { background: var(--bg-panel-raised); border-color: var(--border-active); }
.class-card:active { border-color: var(--class-color); }

.class-badge {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--class-color);
  color: var(--text-on-bright);
}

.class-badge.small { width: 28px; height: 28px; font-size: var(--fs-sm); flex-shrink: 0; }

/* Sprite badge — front-facing PIPOYA frame instead of the letter initial */
.class-badge-sprite {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background-color: color-mix(in srgb, var(--class-color, var(--line-class-fallback)) 20%, var(--bg-deep));
  border: 1.5px solid var(--class-color, var(--line-class-fallback));
  image-rendering: pixelated;
}

.class-name    { font-weight: 700; font-size: var(--fs-md); margin-top: 4px; }
.class-name-th { color: var(--text-muted); font-size: var(--fs-2xs); }
.class-role    { color: var(--text-muted); font-size: var(--fs-2xs); }
.class-stat-line { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-gold); margin-top: 2px; }

.class-count {
  position: absolute; top: 8px; right: 8px;
  background: var(--class-color); color: var(--text-on-bright);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-full);
}

/* ============================================================== roster */

.gold-display {
  font-family: var(--font-mono);
  color: var(--text-gold);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.hero-list { display: flex; flex-direction: column; gap: 8px; }

.hero-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--class-color);
  border-radius: var(--r-sm);
  padding: 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.hero-card:hover { background: var(--bg-panel-raised); }

.hero-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.hero-name  { font-weight: 700; font-size: var(--fs-md); }
.hero-class { color: var(--text-muted); font-size: var(--fs-2xs); }

.hero-stat-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-primary);
}

.weapon-slot-empty  { color: var(--text-muted); font-style: italic; }
.weapon-slot-filled { color: var(--text-gold); font-weight: 600; }

.stage-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stage-info    { display: flex; flex-direction: column; gap: 4px; }
.stage-label   { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.stage-number  { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text-ember); min-width: 44px; text-align: center; }
.stage-cleared { font-size: var(--fs-micro); color: var(--text-muted); }
.stage-stepper { display: flex; align-items: center; gap: 8px; }

.stage-step-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  display: flex; align-items: center; justify-content: center;
}
.stage-step-btn:disabled { opacity: 0.3; }

.team-warning {
  background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-panel));
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--text-gold);
}

.save-toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel-raised);
  border: 1px solid var(--accent-arcane);
  padding: 8px 16px;
  border-radius: var(--r-full);
  max-width: calc(100vw - 24px);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: var(--fs-xs);
  z-index: 200;
  transition: opacity 0.2s ease;
}
.save-toast.hidden { opacity: 0; pointer-events: none; }

/* ============================================================== bars */

.hp-track {
  position: relative;
  height: 14px;
  background: var(--bg-deep);
  border-radius: var(--r-full);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.hp-fill { height: 100%; transition: width 0.3s ease; }
.hp-high { background: var(--hp-high); }
.hp-mid  { background: var(--hp-mid); }
.hp-low  { background: var(--hp-low); }

.hp-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--text-meter-label); font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,255,255,0.2);
}

.exp-track {
  height: 5px;
  background: var(--bg-deep);
  border-radius: var(--r-full);
  overflow: hidden;
}
.exp-fill     { height: 100%; background: var(--accent-gold); transition: width 0.3s ease; }
.exp-label    { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }

.exp-track-maxed  { border: 1px solid var(--accent-gold); }
.exp-fill-maxed   { background: linear-gradient(135deg, var(--accent-gold), var(--accent-ember)); }
.exp-label-maxed  { color: var(--text-gold); font-weight: 700; letter-spacing: 0.04em; margin-top: 2px; }

/* ============================================================== battle */

.battle-columns {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.battle-vs-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 700;
  background: linear-gradient(135deg, var(--accent-ember), var(--accent-arcane));
  color: var(--bg-deep);
  box-shadow: var(--e1);
  pointer-events: none;
}

.battle-side {
  background: var(--bg-panel);
  border-radius: var(--r-sm);
  padding: 10px;
  border: 1px solid var(--border-soft);
}

.unit-card {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  border-radius: var(--r-xs); padding: 4px 6px;
}
.unit-card:last-child { margin-bottom: 0; }
.unit-card.defeated  { opacity: 0.35; }

.unit-avatar {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); line-height: 1;
  background-size: 300% 400%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
/* v9 C (#15): frame-free — sprite/emoji sits on the field, shadow gives depth */
.unit-avatar-hero  { background-color: transparent; border: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.unit-avatar-enemy { background-color: transparent; border: none; background-size: contain; background-position: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

.unit-info { flex: 1; min-width: 0; }

.unit-name-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 6px;
  margin-bottom: 3px;
}
.unit-name  { font-size: var(--fs-2xs); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.unit-level { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); flex-shrink: 0; }

.battle-log {
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  height: 90px;
  overflow-y: auto;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  display: flex; flex-direction: column; gap: 3px;
}

.log-line   { color: var(--text-muted); }
.log-heal   { color: var(--text-success); }
.log-bleed  { color: var(--danger); }
.log-burn   { color: var(--text-ember); }
.log-poison { color: var(--text-poison); }

.crit-tag {
  color: var(--text-ember); font-weight: 700; font-size: var(--fs-micro);
  border: 1px solid var(--accent-ember); padding: 0 4px; border-radius: var(--r-xs); margin-left: 2px;
}
.steal-tag {
  color: var(--accent-arcane); font-weight: 700; font-size: var(--fs-micro);
  border: 1px solid var(--accent-arcane); padding: 0 4px; border-radius: var(--r-xs); margin-left: 2px;
}

.result-banner { border-radius: var(--r-sm); padding: 14px; text-align: center; }
.result-title  { font-family: var(--font-display); font-size: var(--fs-xl); }
.result-detail { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

.result-victory { background: color-mix(in srgb, var(--hp-high) 12%, var(--bg-panel)); border: 1px solid var(--hp-high); }
.result-victory .result-title { color: var(--text-success); }

.result-defeat { background: color-mix(in srgb, var(--danger) 12%, var(--bg-panel)); border: 1px solid var(--danger); }
.result-defeat .result-title { color: var(--danger); }

.result-timeout { background: var(--bg-panel-raised); border: 1px solid var(--border-soft); }
.result-timeout .result-title { color: var(--text-gold); }

.result-materials { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-gold); }
.result-material, .result-weapon { display: inline-flex; align-items: center; gap: 4px; }
.result-material-art { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; }

.reward-progress-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.reward-hero-progress  { font-size: var(--fs-2xs); }
.reward-hero-name      { display: block; margin-bottom: 2px; color: var(--text-primary); }
.reward-hero-progress .exp-label { margin-top: 1px; font-size: var(--fs-micro); }

/* ============================================================== inventory */

.inventory-tabs { display: flex; gap: 8px; }

.inventory-tab-btn {
  flex: 1; padding: 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs);
}
.inventory-tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.inventory-tab-btn.active {
  background: var(--bg-panel-raised);
  border-color: var(--accent-arcane);
  color: var(--text-primary);
}

.inventory-content {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 12px;
  min-height: 140px;
}

.material-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
}
.material-row:last-child { border-bottom: none; }
.material-row-locked { opacity: 0.4; }
.material-row-locked .material-name { font-style: italic; }

/* S1-C: Material grid + auto-sell */
.mat-autosell-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mat-autosell-label {
  font-size: var(--fs-2xs); color: var(--text-muted); flex-shrink: 0;
}
.mat-autosell-btn {
  padding: 4px 10px; border-radius: var(--r-xs); border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-secondary);
  font-size: var(--fs-2xs); cursor: pointer; transition: all 0.15s;
}
.mat-autosell-btn:hover { border-color: var(--accent-gold); color: var(--text-gold); }
.mat-autosell-btn.active {
  background: rgba(230,192,106,0.15); border-color: var(--accent-gold);
  color: var(--text-gold); font-weight: 600;
}
.mat-sell-price { opacity: 0.7; margin-left: 3px; }
/* #8 (2026-07-14): equipment sort bar (Weapons + Gear tabs) */
.inv-sort-bar { display: flex; align-items: center; gap: 6px; padding: 2px 0 10px; flex-wrap: wrap; }
.inv-sort-label { font-size: var(--fs-2xs); color: var(--text-muted); flex-shrink: 0; margin-right: 2px; }
.inv-sort-btn {
  padding: 4px 12px; border-radius: var(--r-full); border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-secondary);
  font-size: var(--fs-2xs); font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.inv-sort-btn:hover { border-color: var(--accent-gold); color: var(--text-gold); }
.inv-sort-btn.active { background: rgba(230,192,106,0.15); border-color: var(--accent-gold); color: var(--text-gold); }

/* v7.4 (issue 4): equipment/card auto-sell threshold bar + slot counts */
.mat-autosell-hint { font-size: var(--fs-micro); color: var(--text-muted); flex-basis: 100%; margin-top: 2px; }
.mat-autosell-state { font-size: var(--fs-micro); font-weight: 800; padding: 1px 7px; border-radius: var(--r-full); background: var(--bg-deep); color: var(--text-muted); margin-left: 4px; }
.mat-autosell-state.on { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--text-success); }
.inv-slot-count {
  font-size: var(--fs-micro); font-weight: 700; margin-left: 4px; padding: 1px 5px;
  border-radius: var(--r-full); background: var(--bg-deep); color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}
.inv-slot-count.inv-slot-warn { color: var(--text-gold); }
.inv-slot-count.inv-slot-full { color: var(--text-on-well); background: var(--danger); }

.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.mat-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px; border-radius: var(--r-xs); min-height: 90px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-soft);
  position: relative; cursor: pointer; transition: border-color 0.15s;
}
.mat-cell:hover { border-color: var(--accent-gold); border-left-color: inherit; }
.mat-cell-empty {
  opacity: 0.3; cursor: default; justify-content: center;
}
.mat-cell-empty:hover { border-color: var(--border-soft); }
.mat-cell-unk { font-size: var(--fs-xl); color: var(--text-muted); }

.rarity-bg-common    { border-left-color: var(--rarity-common); }
.rarity-bg-uncommon  { border-left-color: var(--rarity-uncommon); }
.rarity-bg-rare      { border-left-color: var(--accent-arcane, var(--rarity-epic)); }

.mat-cell-name {
  font-size: var(--fs-2xs); font-weight: 600; text-align: center;
  color: var(--text-primary); margin-bottom: 4px; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* Pixel-art atlas icon for materials (matches weapon/gear icons) */
.mat-cell-icon-img {
  display: inline-block;
  width: 30px; height: 30px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.mat-cell-qty {
  font-size: var(--fs-xs); color: var(--text-gold); margin-bottom: auto;
}
.mat-sell-btn {
  margin-top: 6px; padding: 3px 8px; width: 100%;
  border-radius: var(--r-xs); border: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.3); color: var(--text-secondary);
  font-size: var(--fs-micro); cursor: pointer; transition: all 0.12s;
}
.mat-sell-btn:hover {
  background: rgba(230,192,106,0.2); border-color: var(--accent-gold);
  color: var(--text-gold);
}

.material-name { color: var(--text-primary); }

.material-rarity {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full); white-space: nowrap;
}

.rarity-common   { color: var(--text-muted);  background: color-mix(in srgb, var(--text-muted)  14%, var(--bg-deep)); }
.rarity-uncommon { color: var(--text-success);      background: color-mix(in srgb, var(--hp-high)     14%, var(--bg-deep)); }
.rarity-rare     { color: var(--accent-arcane); background: color-mix(in srgb, var(--accent-arcane) 16%, var(--bg-deep)); }

.material-qty { font-family: var(--font-mono); color: var(--text-gold); white-space: nowrap; }

.inventory-empty { color: var(--text-muted); font-size: var(--fs-xs); text-align: center; padding: 20px 10px; }

/* ============================================================== weapons / chests */

.weapon-list { display: flex; flex-direction: column; }

.weapon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 6px 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
}
.weapon-row:last-child { border-bottom: none; }
.weapon-row[data-weapon-instance-id],
.weapon-row[data-chest-instance-id]  { cursor: pointer; }
.weapon-row[data-weapon-instance-id]:hover,
.weapon-row[data-chest-instance-id]:hover { background: var(--bg-panel-raised); }

.weapon-row-equipped {
  grid-template-columns: 1fr auto auto;
  background: color-mix(in srgb, var(--accent-arcane) 7%, transparent);
}

.weapon-name          { color: var(--text-primary); font-weight: 600; grid-column: 1; }
.weapon-atk           { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-2xs); grid-column: 1 / -1; }
.weapon-equipped-tag  { color: var(--accent-arcane); font-size: var(--fs-2xs); white-space: nowrap; }
.weapon-tap-hint      { color: var(--text-muted); font-size: var(--fs-2xs); white-space: nowrap; grid-row: 1; grid-column: 2; }
.weapon-rarity        { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); }

/* S2: weapon-row-btns — row of buttons below weapon/chest row */
.weapon-row-btns {
  display: flex; align-items: center; gap: 6px;
  grid-column: 1 / -1;
}
.weapon-row-btns .weapon-tap-hint { grid-row: unset; grid-column: unset; }

/* v8 Batch E: Beginner Journey + login streak */
.qs-journey-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.qs-journey-title { font-size: var(--fs-md); color: var(--text-gold); margin: 0; }
.qs-journey-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.qs-row-journey { border-left: 3px solid var(--accent-gold); }
.qs-streak-chip {
  font-size: var(--fs-2xs); font-family: var(--font-mono); vertical-align: middle;
  padding: 3px 10px; border-radius: var(--r-md); margin-left: 8px;
  border: 1px solid var(--border-soft); color: var(--text-muted); background: var(--bg-deep);
}
@keyframes refineBtnPulse {
  0%, 100% { box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(217,154,47,0.5); }
  50%      { box-shadow: 0 3px 0 var(--gold-deep), 0 6px 22px rgba(242,193,78,0.8); }
}
@keyframes refineBtnSheen {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}

/* S2: SP bar in hero inspector */
.insp-sp-bar-wrap { padding: 8px 14px 4px; }
.insp-sp-label { font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 4px; }
.insp-sp-avail { color: var(--text-gold); font-weight: 700; }
.insp-sp-total  { color: var(--text-secondary); }
.insp-sp-bar { height: 4px; background: var(--bg-deep); border-radius: var(--r-xs); overflow: hidden; margin-top: 4px; }
.insp-sp-bar-fill { height: 100%; background: var(--accent-arcane); border-radius: var(--r-xs); }

/* Attribute points in the Hero Sheet */
.attr-section { border-bottom: 1px solid var(--border-soft); }
.insp-passive-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--r-xs);
  background: var(--bg-panel-raised);
  font-size: var(--fs-2xs);
}
.insp-passive-name { flex: 0 0 auto; color: var(--text-gold); font-weight: 700; }
.insp-passive-bonuses { min-width: 0; color: var(--text-success); overflow-wrap: anywhere; }
.attr-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 14px 6px;
}
.attr-header .insp-section-label { padding: 8px 0 4px; flex: 0 0 auto; }
.attr-ap-bar-wrap { flex: 1 1 130px; min-width: 0; padding: 8px 0 4px; }
.attr-header-actions { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; }
.attr-header-actions .btn { padding: 6px 8px; font-size: var(--fs-micro); white-space: nowrap; }
.attr-preset-btn { border-color: var(--accent-gold); color: var(--text-gold); }
.attr-reset-btn { border-color: var(--danger); color: var(--danger); }
.attr-rows {
  margin: 0 14px 10px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.attr-row {
  display: grid;
  grid-template-columns: 20px minmax(42px, auto) minmax(28px, auto) 32px 32px minmax(0, 1fr);
  align-items: center; gap: 5px;
  min-width: 0; padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.attr-row:last-child { border-bottom: none; }
.attr-icon { font-size: var(--fs-sm); line-height: 1; }
.attr-name { min-width: 0; font-size: var(--fs-micro); font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.attr-affinity { margin-left: 3px; color: var(--text-gold); }
.attr-value { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--text-primary); text-align: right; }
.attr-step-btn {
  width: 32px; height: 32px; min-width: 32px; padding: 0;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  background: var(--bg-panel-raised); color: var(--danger);
  font-size: var(--fs-md); font-weight: 700; line-height: 1; cursor: pointer;
}
.attr-step-plus { color: var(--text-success); }
.attr-step-btn:hover:not([disabled]) { border-color: currentColor; }
.attr-section button[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.attr-effect { min-width: 0; color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.25; overflow-wrap: anywhere; }
.attr-reset-modal-box { width: min(360px, calc(100vw - 28px)); }
.attr-reset-copy { color: var(--text-muted); font-size: var(--fs-xs); margin-bottom: 12px; }
.attr-reset-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.attr-reset-choices .btn { flex: 1 1 auto; }

@media (max-width: 400px) {
  .attr-header-actions { width: 100%; }
  .attr-header-actions .btn { flex: 1 1 auto; min-width: 0; }
  .attr-row { grid-template-columns: 18px 42px minmax(26px, auto) 32px 32px minmax(0, 1fr); gap: 4px; padding-left: 6px; padding-right: 6px; }
}

/* S2: Skill level badge and invest button */
.insp-skill-lv { font-size: var(--fs-micro); font-weight: 700; color: var(--accent-arcane); margin-left: 4px; }
.insp-skill-cost { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }
.insp-skill-maxed { color: var(--text-gold); }
.insp-sp-invest-btn {
  flex-shrink: 0; padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--accent-arcane); background: rgba(155,89,182,0.15);
  color: var(--accent-arcane); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: all 0.12s;
}
.insp-sp-invest-btn:hover:not([disabled]) { background: rgba(155,89,182,0.3); }
.insp-sp-invest-btn[disabled] { opacity: 0.35; cursor: default; border-color: var(--border-soft); color: var(--text-muted); background: none; }

/* ============================================================== S3: Player Skill Tree */

.pst-screen { display: flex; flex-direction: column; gap: 14px; }

.pst-header { background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 14px; }
.pst-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.pst-pt-info { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 8px; }
.pst-pt-free { color: var(--text-gold); font-weight: 700; }
.pst-level-note { font-size: var(--fs-2xs); color: var(--text-muted); font-family: var(--font-mono); }

.pst-branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pst-branch { min-width: 0; }

.pst-branch { background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px; }
.pst-branch-header { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 10px; }
/* v7.4 (issue 14): SVG branch crest in a tinted disc — sharper than the emoji */
.pst-branch-icon {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent);
  margin-bottom: 2px;
}
.pst-branch-svg { width: 24px; height: 24px; display: block; }
.pst-branch-label { font-weight: 700; font-size: var(--fs-sm); }
.pst-branch-subdesc { font-size: var(--fs-micro); color: var(--text-muted); text-align: center; }

.pst-node-list { display: flex; flex-direction: column; align-items: center; gap: 0; }
.pst-connector { width: 2px; height: 10px; background: var(--border-soft); }

.pst-node {
  width: 100%; padding: 7px 9px; border-radius: var(--r-sm); cursor: default;
  border: 1px solid var(--border-soft); background: var(--bg-deep);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 9px; text-align: left;
  transition: border-color 0.15s, background 0.15s; opacity: 0.5;
  color: inherit; font-family: inherit; appearance: none;
}
/* v7.4: spell-art disc per node — UNIFORM large size everywhere (keystone keeps
   only its round shape + glow, not a bigger box). */
.pst-node-asset {
  grid-row: 1 / span 2; align-self: center;
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pst-col, var(--line-dynamic-fallback)) 14%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--pst-col, var(--line-dynamic-fallback)) 45%, transparent);
}
/* higher specificity than the base `.asset-icon{width:1em}` (defined later) so the
   node art actually fills the disc instead of shrinking to ~14px. */
.pst-node-asset .pst-node-asset-img.asset-icon { width: 34px; height: 34px; }
.pst-asset-keystone { border-radius: var(--r-full); box-shadow: 0 0 10px color-mix(in srgb, var(--pst-col, var(--line-dynamic-fallback)) 40%, transparent); }
.pst-node-name { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-secondary); display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.pst-node-desc { font-size: var(--fs-micro); color: var(--text-muted); }
/* v9 Batch A (#8): branch-investment gate lock label */
.pst-node-gate { font-size: var(--fs-micro); color: var(--state-blocked); font-weight: 600; }
.pst-node-gated { opacity: 0.65; }
/* v7.4 (issue 14): per-node gem markers (keystone=filled, notable=hollow, small=dot) */
.pst-node-ico { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-muted); filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); }
.pst-ico-key { width: 15px; height: 15px; }
.pst-node-available .pst-node-ico { color: var(--text-gold); }
.pst-node-active .pst-node-ico { color: var(--pst-col, var(--accent-arcane)); filter: drop-shadow(0 0 4px var(--pst-col, var(--accent-arcane))); }

.pst-node-available { opacity: 0.85; cursor: pointer; border-color: var(--accent-gold); }
.pst-node-available:hover { background: rgba(230,192,106,0.12); }
.pst-node-available .pst-node-name { color: var(--text-gold); }

.pst-node-active { opacity: 1; border-color: var(--accent-arcane); background: rgba(155,89,182,0.15); cursor: default; }
.pst-node-active .pst-node-name { color: var(--accent-arcane); }
.pst-node-active .pst-node-desc { color: var(--text-secondary); }

.pst-node-keystone { border-radius: var(--r-sm); border-width: 2px; }
.pst-node-keystone.pst-node-active { border-color: var(--accent-gold); background: rgba(230,192,106,0.15); }
.pst-node-keystone.pst-node-active .pst-node-name { color: var(--text-gold); }
.pst-node-notable { border-style: dashed; }
.pst-node-notable.pst-node-active { border-style: solid; }

.pst-footer { display: flex; justify-content: flex-end; padding-top: 4px; }
.pst-respec-btn {
  padding: 8px 18px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700;
  border: 1px solid var(--error, var(--state-danger)); background: rgba(231,76,60,0.12);
  color: var(--error, var(--state-danger)); cursor: pointer; transition: background 0.12s;
}
.pst-respec-btn:hover:not([disabled]) { background: rgba(231,76,60,0.25); }
.pst-respec-btn[disabled] { opacity: 0.35; cursor: default; }

/* ============================================================== S6 Marketplace */

.mkt-screen { display: flex; flex-direction: column; gap: 10px; }

.mkt-header {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 14px;
}
.mkt-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); flex: 1; margin: 0; }
.mkt-gold { font-size: var(--fs-xs); font-weight: 700; color: var(--text-gold); font-family: var(--font-mono); }
.mkt-sell-toggle-btn {
  padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid var(--accent-gold);
  background: rgba(230,192,106,0.12); color: var(--text-gold);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: background 0.12s;
}
.mkt-sell-toggle-btn:hover { background: rgba(230,192,106,0.25); }

/* Sell panel */
.mkt-sell-panel {
  background: var(--bg-panel-raised); border: 1px solid var(--accent-gold);
  border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.mkt-sell-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-gold); }
.mkt-sell-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.mkt-sell-row label { min-width: 72px; color: var(--text-muted); }
.mkt-sell-row select, .mkt-sell-row input {
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--r-xs);
  color: var(--text-primary); padding: 4px 8px; font-size: var(--fs-xs);
}
.mkt-sell-actions { display: flex; gap: 8px; margin-top: 2px; }
.mkt-confirm-btn {
  padding: 7px 18px; border-radius: var(--r-sm); border: none;
  background: var(--accent-gold); color: var(--text-on-gold); font-weight: 700; font-size: var(--fs-xs); cursor: pointer;
}
.mkt-confirm-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.mkt-cancel-btn-sm {
  padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  background: none; color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer;
}

/* Tabs + filter */
.mkt-tabs { display: flex; gap: 6px; }
.mkt-tab {
  padding: 7px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  background: none; color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer; transition: all 0.12s;
}
.mkt-tab.active { background: var(--bg-panel-raised); color: var(--text-primary); border-color: var(--accent-arcane); }

.mkt-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mkt-filter {
  padding: 4px 12px; border-radius: var(--r-lg); border: 1px solid var(--border-soft);
  background: none; color: var(--text-muted); font-size: var(--fs-2xs); cursor: pointer; transition: all 0.12s;
}
.mkt-filter.active { background: var(--bg-panel-raised); color: var(--text-primary); border-color: var(--accent-gold); }

/* Listing list */
.mkt-list { display: flex; flex-direction: column; gap: 8px; }
.mkt-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 12px;
  transition: border-color 0.15s;
}
.mkt-card:hover { border-color: var(--accent-arcane); }
.mkt-card-icon { font-size: var(--fs-xl); flex-shrink: 0; }
.mkt-card-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mkt-item-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.mkt-item-detail { font-size: var(--fs-2xs); color: var(--text-gold); font-family: var(--font-mono); }
.mkt-item-seller { font-size: var(--fs-micro); color: var(--text-muted); }
.mkt-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mkt-price { font-size: var(--fs-xs); font-weight: 700; color: var(--text-gold); font-family: var(--font-mono); }

.mkt-buy-btn {
  padding: 5px 14px; border-radius: var(--r-sm); border: none;
  background: linear-gradient(135deg, var(--accent-arcane), var(--fx-action-info));
  color: var(--text-on-well); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer; transition: opacity 0.12s;
}
.mkt-buy-btn:hover:not([disabled]) { opacity: 0.85; }
.mkt-buy-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.mkt-cancel-btn {
  padding: 5px 12px; border-radius: var(--r-sm); border: 1px solid var(--error, var(--state-danger));
  background: rgba(231,76,60,0.1); color: var(--error, var(--state-danger));
  font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.mkt-cancel-btn:hover { background: rgba(231,76,60,0.2); }

.mkt-status {
  text-align: center; padding: 32px 16px;
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6;
}
.mkt-error { color: var(--error, var(--state-danger)); }

/* ============================================================== §Trophy (v7.2) */
/* Rankings share the existing type, surface, radius and shell-size tokens. */
.trophy-screen { display: flex; flex-direction: column; gap: var(--fs-sm); min-width: 0; }
.trophy-header { display: flex; align-items: center; gap: var(--fs-sm); padding: var(--fs-sm); background: var(--bg-panel-raised); border: thin solid var(--border-soft); border-radius: var(--r-sm); }
.trophy-title { font-size: var(--fs-md); color: var(--text-primary); flex: 1; min-width: 0; margin: 0; }
.trophy-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--fs-md) / 2); }
.trophy-tab, .trophy-action {
  min-height: calc(var(--fs-md) * 3.25); min-width: 0; padding: calc(var(--fs-md) / 2) var(--fs-sm);
  border-radius: var(--r-sm); border: thin solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 700;
}
.trophy-tab.trophy-tab-active { color: var(--text-gold); border-color: var(--accent-gold); background: var(--bg-panel-raised); }
.trophy-screen button:focus-visible, .trophy-screen summary:focus-visible, #trophy-panel:focus-visible { outline: medium solid var(--accent-gold); outline-offset: calc(var(--fs-md) / 5); }
#trophy-panel { display: flex; flex-direction: column; gap: var(--fs-sm); min-width: 0; }
.trophy-context { display: flex; flex-direction: column; gap: var(--fs-sm); }
.trophy-explanation { font-size: var(--fs-sm); color: var(--text-primary); margin: 0; }
.trophy-note { font-size: var(--fs-xs); color: var(--text-secondary); margin: 0; }
.trophy-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--fs-md) / 2) var(--fs-sm); padding: var(--fs-sm); background: var(--bg-panel-raised); border: thin solid var(--border-soft); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.trophy-current strong { font-size: var(--fs-md); color: var(--text-gold); font-family: var(--font-mono); }
.trophy-current > span:last-child { font-size: var(--fs-xs); }
.trophy-results { display: flex; flex-direction: column; gap: var(--fs-sm); min-width: 0; }
.trophy-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 calc(var(--fs-md) / 2); }
.trophy-table-caption { text-align: left; font-weight: 700; padding: var(--fs-sm) 0; color: var(--text-secondary); }
.trophy-table th, .trophy-table td { padding: var(--fs-sm) calc(var(--fs-md) / 2); vertical-align: middle; overflow-wrap: anywhere; }
.trophy-table tbody th, .trophy-table tbody td { background: var(--bg-panel-raised); border-block: thin solid var(--border-soft); }
.trophy-table tbody td:first-child { border-left: thin solid var(--border-soft); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.trophy-table tbody td:last-child { border-right: thin solid var(--border-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.trophy-table thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-align: left; }
.trophy-table th:first-child { width: calc(var(--fs-md) * 4); }
.trophy-table th:last-child { width: calc(var(--fs-md) * 8); text-align: right; }
.trophy-table .trophy-rank { font-size: var(--fs-md); font-weight: 800; text-align: center; color: var(--text-secondary); }
.trophy-table .trophy-row-podium .trophy-rank { color: var(--text-gold); }
.trophy-row-rw { font-size: var(--fs-sm); white-space: nowrap; }
.trophy-name { font-size: var(--fs-sm); text-align: left; color: var(--text-primary); }
.trophy-you-tag { font-size: var(--fs-xs); color: var(--text-gold); }
.trophy-value { font-size: var(--fs-sm); font-weight: 700; text-align: right; color: var(--text-gold); font-family: var(--font-mono); }
.trophy-count { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 400; color: var(--text-secondary); margin-top: calc(var(--fs-md) / 4); }
.trophy-table .trophy-row-me th, .trophy-table .trophy-row-me td { background: rgba(230,192,106,0.08); border-color: var(--accent-gold); }
.trophy-guidance, .trophy-me-standing { padding: var(--fs-md); border: thin solid var(--border-soft); border-radius: var(--r-md); background: var(--bg-panel-raised); font-size: var(--fs-sm); }
.trophy-guidance p { margin: calc(var(--fs-md) / 2) 0 var(--fs-sm); }
.trophy-me-standing strong { color: var(--text-gold); }
.trophy-me-standing { border: thin dashed var(--accent-gold); background: rgba(230,192,106,0.10); }
.trophy-reward-standing { margin-top: var(--fs-sm); }
.trophy-own-reward { display: block; font-size: var(--fs-xs); margin-top: calc(var(--fs-md) / 2); }
.trophy-empty { margin: 0; padding: var(--fs-md); color: var(--text-secondary); }
.trophy-paging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fs-sm); font-size: var(--fs-xs); }
.trophy-season { border: thin solid var(--accent-gold); border-radius: var(--r-md); padding: var(--fs-sm) var(--fs-md); background: var(--bg-panel-raised); }
.trophy-season summary { min-height: calc(var(--fs-md) * 2.5); align-content: center; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--text-gold); }
.trophy-season-head { font-size: var(--fs-sm); font-weight: 800; color: var(--text-gold); margin: 0 0 calc(var(--fs-md) / 2); }
.trophy-season-reset { float: right; font-size: var(--fs-2xs); color: var(--text-info); font-family: var(--font-mono); margin-left: var(--fs-sm); }
.trophy-season-grid { display: flex; flex-direction: column; gap: calc(var(--fs-md) / 3); padding-top: calc(var(--fs-md) / 2); }
.trophy-bracket { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--fs-md) / 3) var(--fs-sm); font-size: var(--fs-xs); padding: calc(var(--fs-md) / 3) calc(var(--fs-md) / 2); border-radius: var(--r-sm); background: var(--bg-deep); }
.trophy-bracket-rank { font-weight: 700; color: var(--text-secondary); }
.trophy-bracket-rw { color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.trophy-season-note { font-size: var(--fs-xs); color: var(--text-secondary); margin: var(--fs-sm) 0 0; }
@media (max-width: 900px) {
  /* Keep personal rank text clear of the persistent mobile Contact Admin button. */
  .trophy-me-standing { padding-inline-end: calc(var(--fs-md) * 5); }
  /* Let the last standing scroll fully above the fixed Contact Admin button. */
  #app .trophy-screen { padding-bottom: calc(var(--fs-md) * 5); }
}



/* Shared daily standings: existing portraits, currencies and surface tokens. */
.trophy-daily .trophy-tab { display: flex; align-items: center; justify-content: center; gap: .35em; padding-inline: .3em; }
.trophy-tab .data-art-icon { width: 1.4em; height: 1.4em; }
.trophy-daily-heading { display:flex; align-items:center; justify-content:space-between; padding:var(--fs-md); border-bottom:thin solid var(--border-soft); }
.trophy-daily-heading h3 { font-size:var(--fs-xl); margin:.25em 0 0; }
.trophy-live { color:var(--text-secondary); font-size:var(--fs-xs); }
.trophy-clock { display:flex; flex-direction:column; text-align:right; gap:.25em; color:var(--text-secondary); font-size:var(--fs-xs); }
.trophy-clock strong { font:700 var(--fs-lg) var(--font-mono); color:var(--text-gold); font-variant-numeric:tabular-nums; }
.trophy-podium { list-style:none; padding:0; margin:var(--fs-sm) 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fs-sm); align-items:stretch; }
.trophy-podium-place { position:relative; display:flex; flex-direction:column; align-items:center; gap:.5em; min-width:0; text-align:center; padding:var(--fs-md) .5em; background:var(--bg-panel-raised); border:thin solid var(--border-soft); border-radius:var(--r-md); font-size:var(--fs-xs); overflow-wrap:anywhere; }
.trophy-place-1 { grid-column:2; grid-row:1; padding-top:calc(var(--fs-md)*2); border-color:var(--accent-gold); }
.trophy-place-2 { grid-column:1; grid-row:1; margin-top:1.2rem; }
.trophy-place-3 { grid-column:3; grid-row:1; margin-top:1.2rem; }
.trophy-place-1::after { content:'✧'; position:absolute; inset:.4em .6em auto auto; color:var(--text-gold); font-size:var(--fs-xl); pointer-events:none; animation:trophy-spark 3s ease-in-out infinite; }
.trophy-podium-medal { font-size:var(--fs-xl); color:var(--text-gold); line-height:1; }
.trophy-portrait { display:inline-flex; width:2.5rem; height:2.5rem; border-radius:var(--r-sm); background-size:cover; background-position:center; flex-shrink:0; }
.trophy-podium .trophy-portrait { width:3.5rem; height:3.5rem; }
.trophy-podium-score { color:var(--text-secondary); font-size:var(--fs-2xs); }
.trophy-delta { display:block; font:500 var(--fs-2xs) var(--font-body); color:var(--text-secondary); margin-top:.2em; }
.trophy-pending { display:inline-block; border:thin solid var(--border-soft); border-radius:var(--r-sm); padding:.25em .4em; color:var(--text-secondary); font:400 var(--fs-2xs) var(--font-body); }
.trophy-daily-reward { display:inline-block; color:var(--text-gold); font-size:var(--fs-xs); line-height:1.7; }
.trophy-player { display:flex; align-items:center; gap:.5em; min-width:0; }
.trophy-player > span:last-child { min-width:0; }
.trophy-daily .trophy-me-standing { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--fs-sm); }
.trophy-daily .trophy-me-standing .trophy-delta { display:inline; margin-inline-start:.5em; }
.trophy-yesterday { border:thin solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-panel-raised); padding:var(--fs-sm) var(--fs-md); font-size:var(--fs-xs); }
.trophy-yesterday summary { cursor:pointer; font-weight:700; min-height:2.5em; align-content:center; }
.trophy-yesterday ol { list-style:none; padding:0; margin:.5em 0; }
.trophy-yesterday li { display:flex; justify-content:space-between; gap:1em; padding:.5em 0; border-top:thin solid var(--border-soft); overflow-wrap:anywhere; }
.trophy-daily .trophy-table th:first-child { width:3.5em; }
.trophy-daily .trophy-table th:last-child { width:8em; }
.trophy-daily .trophy-row:focus { outline:medium solid var(--accent-gold); outline-offset:.1em; }
.trophy-daily .trophy-rank { white-space:nowrap; }
.trophy-daily #trophy-panel { animation:trophy-enter .2s ease-out; }
@keyframes trophy-enter { from { opacity:.6; transform:translateY(.4rem); } to { opacity:1; transform:translateY(0); } }
@keyframes trophy-spark { 0%,100% { opacity:.3; transform:scale(.8); } 50% { opacity:.85; transform:scale(1.1); } }
@media(min-width:901px) { .trophy-daily .trophy-season-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:480px) {
  .trophy-podium { gap:.4em; }
  .trophy-podium-place { padding-inline:.3em; }
  .trophy-daily .trophy-table th:last-child { width:6.5em; }
  .trophy-daily .trophy-player .trophy-portrait { width:1.8rem; height:1.8rem; }
  .trophy-daily .trophy-table th,.trophy-daily .trophy-table td { padding-inline:.25em; }
}
@media(prefers-reduced-motion:reduce) {
  .trophy-daily #trophy-panel,.trophy-place-1::after { animation:none; }
  .trophy-daily * { scroll-behavior:auto; transition:none; }
}

/* ============================================================== §Mailbox (v7.2) */
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.mail-row:not(.mail-row-claimed) { border-color: var(--accent-gold); box-shadow: 0 0 8px rgba(230,192,106,0.15); }
.mail-row-claimed { opacity: 0.55; }
.mail-icon { font-size: var(--fs-2xl); flex-shrink: 0; }
.mail-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.mail-desc { font-size: var(--fs-2xs); color: var(--text-muted); }
.mail-reward { font-size: var(--fs-xs); color: var(--text-gold); font-family: var(--font-mono); }
.mail-claimed-tag { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.mail-claim-btn { flex-shrink: 0; }

.btn-sm {
  padding: 6px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-primary); font-size: var(--fs-xs); cursor: pointer;
}

/* ============================================================== equip flow */

.equip-flow-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

.hero-pick-list { display: flex; flex-direction: column; gap: 8px; }

.hero-pick-btn {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 12px;
  color: var(--text-primary); font-family: var(--font-body);
}
.hero-pick-portrait { width: 48px; height: 48px; border-radius: var(--r-sm); }
.hero-pick-sprite { width: 32px; height: 32px; margin: 8px; border-radius: var(--r-xs); }
.hero-pick-fallback { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.hero-pick-name { display: flex; flex-direction: column; }
.hero-pick-class { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 500; }
.equip-item-head { display: flex; align-items: center; gap: 12px; }
.equip-item-head h1 { margin: 0; }
.equip-item-art { display: inline-block; width: 48px; height: 48px; }
.equip-item-art-fallback { font-size: var(--fs-2xl); }
.hero-pick-btn:hover { background: var(--bg-hover); border-color: var(--border-active); }

.hero-pick-name    { font-weight: 700; }
.hero-pick-current { color: var(--text-muted); font-size: var(--fs-xs); }

.compare-columns {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 14px;
}

.compare-col       { text-align: center; }
.compare-item-art { display: block; width: 48px; height: 48px; margin: 0 auto 6px; }
.compare-col-label { color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.compare-col-selected .compare-col-label { color: var(--accent-arcane); }
.compare-weapon-name { font-weight: 700; margin-bottom: 6px; }
.compare-stat        { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }
.compare-arrow       { color: var(--text-muted); font-size: var(--fs-lg); }

.compare-delta {
  display: flex; justify-content: center; gap: 18px; margin-top: 4px;
  font-family: var(--font-mono); font-weight: 700;
}

.delta-positive { color: var(--text-success); }
.delta-negative { color: var(--danger); }
.delta-neutral  { color: var(--text-muted); }
.slot-badge-weapon    { color: var(--text-ember);  background: color-mix(in srgb, var(--accent-ember)  12%, var(--bg-deep)); }
.slot-badge-chest     { color: var(--accent-arcane); background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-deep)); }
.slot-badge-accessory { color: var(--text-gold);   background: color-mix(in srgb, var(--accent-gold)   12%, var(--bg-deep)); }

.text-input {
  width: 100%;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 9px 12px;
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm);
  margin-bottom: 10px;
}
.text-input:focus { outline: none; border-color: var(--border-active); }

.designer-section {
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px;
}
.designer-section > label { display: block; font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 6px; }

.option-row          { margin-bottom: 10px; }
.option-row:last-child { margin-bottom: 0; }
.option-row label    { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-primary); margin-bottom: 4px; }
.option-row input[type="range"] { width: 100%; accent-color: var(--accent-arcane); }

.option-locked { color: var(--text-muted); font-size: var(--fs-2xs); font-style: italic; padding: 6px 0; }

#effect-select {
  width: 100%;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 7px 8px;
  color: var(--text-primary); font-family: var(--font-body);
  margin-bottom: 6px;
}
.designer-sec-label .set-sigil-note { font-weight: 400; }
/* stat / effect rows — name · value · GS cost */
.stat-row label, .effect-row label { align-items: baseline; gap: 8px; }
.opt-name { font-weight: 700; flex: 1; }
.opt-val { font-family: var(--font-mono); color: var(--accent-arcane); font-weight: 700; }
.opt-gs { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); min-width: 46px; text-align: right; }
.effect-row-name { color: var(--text-gold); }
.effect-remove-btn {
  border: none; background: transparent; color: var(--danger); font-size: var(--fs-lg);
  font-weight: 800; cursor: pointer; line-height: 1; padding: 0 2px; margin-left: 4px;
}
.effect-none-note { font-size: var(--fs-2xs); color: var(--text-muted); padding: 6px 0; }
.effect-cap-note { margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-success); font-weight: 700; }
/* add-effect chips (no dropdown) */
.effect-chip-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.effect-add-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--accent-arcane); border-radius: var(--r-full);
  background: transparent; color: var(--accent-arcane);
  padding: 5px 11px; font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.effect-add-chip:hover { background: var(--accent-arcane); color: var(--text-on-well); transform: translateY(-1px); }
.effect-add-chip:hover .eac-gs { color: rgba(255,255,255,0.85); }
.eac-plus { font-weight: 900; font-size: var(--fs-md); }
.eac-gs { font-family: var(--font-mono); font-size: var(--fs-micro); opacity: 0.75; }
.recipe-mat-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: var(--r-sm); background: var(--bg-deep); }
.recipe-mat-icon { width: 22px; height: 22px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; font-size: var(--fs-md); text-align: center; }
.recipe-mat-name { flex: 1; font-size: var(--fs-xs); color: var(--text-primary); }
.recipe-mat-qty { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--text-success); }
.recipe-mat-short .recipe-mat-qty { color: var(--danger); }
.recipe-mat-short { border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.recipe-core-row { background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-deep)); }
.recipe-empty    { color: var(--text-muted); font-style: italic; }
/* clickable owned-core rows */
.bp-core-clickable { cursor: pointer; transition: transform 0.08s, border-color 0.12s; }
.bp-core-clickable:hover { transform: translateY(-1px); border-color: var(--accent-gold); }
.bp-core-pick { color: var(--accent-arcane); font-weight: 700; }
.bp-core-usable { color: var(--text-success); font-weight: 700; }

.craft-btn         { margin-top: 8px; width: 100%; }
.craft-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tier-badge-inline { color: var(--accent-arcane); background: color-mix(in srgb, var(--accent-arcane) 14%, var(--bg-deep)); }

.weapon-effect { display: block; font-size: var(--fs-2xs); color: var(--accent-arcane); margin-top: 2px; }

.equip-effect-note { font-size: var(--fs-micro); color: var(--text-muted); font-style: italic; text-align: center; margin: 4px 0 0; }

/* ============================================================== fx & celebrations */

#floating-fx-layer {
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 600px; height: 100%;
  pointer-events: none; z-index: 500; overflow: hidden;
}

@keyframes float-up-fade {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -38px); }
}

.floating-number {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm);
  color: var(--hp-low); white-space: nowrap;
  animation: float-up-fade 900ms ease-out forwards;
}
.floating-number.crit   { font-size: var(--fs-xl); color: var(--text-ember); text-shadow: 0 0 6px rgba(255,122,69,0.6); }
.floating-number.heal   { color: var(--text-success); }
.floating-number.bleed  { color: var(--danger); }
.floating-number.burn   { color: var(--text-ember); }
.floating-number.poison { color: var(--state-poison-bright); }

@keyframes attack-lunge {
  0%  { transform: translateX(0); }
  35% { transform: translateX(14px); }
  100%{ transform: translateX(0); }
}
.fx-attack-lunge { animation: attack-lunge 200ms ease-out; }

@keyframes hit-flash {
  0%  { background-color: rgba(231,76,60,0); box-shadow: none; }
  30% { background-color: rgba(231,76,60,0.32); box-shadow: 0 0 0 1px rgba(231,76,60,0.55) inset; }
  100%{ background-color: rgba(231,76,60,0); box-shadow: none; }
}
.fx-hit-flash { animation: hit-flash 130ms ease-out; }

@keyframes death-fade {
  0%  { opacity: 1; transform: scale(1); }
  100%{ opacity: 0.35; transform: scale(0.85); }
}
.fx-death-fade { animation: death-fade 400ms ease-out forwards; }

@keyframes level-up-burst {
  0%  { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  25% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

.level-up-fx {
  position: fixed; top: 40%; left: 50%; z-index: 600;
  text-align: center; pointer-events: none;
  animation: level-up-burst 1800ms ease-out forwards;
}
.level-up-fx-title  { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--text-gold); letter-spacing: 0.05em; text-shadow: 0 0 16px rgba(230,192,106,0.7); }
.level-up-fx-detail { margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }

.power-up-fx .level-up-fx-title { color: var(--accent-arcane); text-shadow: 0 0 16px color-mix(in srgb, var(--accent-arcane) 70%, transparent); }

@keyframes result-stinger-pop {
  0%  { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

.battle-result-stinger {
  position: fixed; top: 15%; left: 50%; z-index: 610;
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700;
  letter-spacing: 0.06em; pointer-events: none;
  animation: result-stinger-pop 1600ms ease-out forwards;
}
.result-stinger-victory { color: var(--text-success); text-shadow: 0 0 22px rgba(88,214,141,0.7); }
.result-stinger-defeat  { color: var(--danger);  text-shadow: 0 0 22px rgba(231,76,60,0.7); }
.result-stinger-timeout { color: var(--text-gold); text-shadow: 0 0 18px rgba(230,192,106,0.6); }

.craft-success-fx .level-up-fx-title { color: var(--text-success); text-shadow: 0 0 16px color-mix(in srgb, var(--hp-high) 70%, transparent); }
.craft-fx-stats    { color: var(--accent-arcane); }
.craft-fx-consumed { color: var(--text-muted); font-size: var(--fs-2xs); }

.result-weapon-found { margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.rarity-text-common   { color: var(--text-muted); }
.rarity-text-uncommon { color: var(--text-success); }
.rarity-text-rare     { color: var(--accent-arcane); }

/* ============================================================== Phase 2: Operations Center */

.oc-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-height: 100%;
  box-sizing: border-box;
}

.oc-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oc-panel-header {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

/* -- Operation title row -- */
.oc-op-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.oc-op-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.oc-op-badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.oc-badge-farming  { background: rgba(93,173,226,0.18); color: var(--text-info); }
.oc-badge-frontier { background: rgba(230,192,106,0.18); color: var(--text-gold); }

/* -- GS + power badge row -- */
.oc-gs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-panel-raised);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.oc-gs-block { display: flex; flex-direction: column; gap: 2px; }
.oc-gs-label { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.oc-gs-value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.oc-gs-divider { width: 1px; height: 32px; background: var(--border-soft); margin: 0 2px; }

.oc-power-badge {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.power-badge-over      { background: rgba(88,214,141,0.18); color: var(--text-success);    border: 1px solid rgba(88,214,141,0.35); }
.power-badge-balanced  { background: rgba(230,192,106,0.18); color: var(--text-gold); border: 1px solid rgba(230,192,106,0.35); }
.power-badge-under     { background: rgba(231,76,60,0.18);  color: var(--danger);     border: 1px solid rgba(231,76,60,0.35); }

/* -- Stage stepper row -- */
.oc-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oc-stage-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}
.oc-step-btn {
  background: none;
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  border-radius: var(--r-xs);
  width: 24px;
  height: 24px;
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.oc-step-btn:hover:not([disabled]) { background: var(--bg-hover); }
.oc-step-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.oc-stage-num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  min-width: 54px;
  text-align: center;
}
.oc-stage-cleared { font-size: var(--fs-micro); color: var(--text-muted); margin-left: auto; }

/* -- S4b: Farm Decay indicator -- */
.oc-decay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-panel-raised);
  border-radius: var(--r-xs);
  border: 1px solid var(--border-soft);
}
.oc-decay-label { font-size: var(--fs-micro); color: var(--text-muted); flex: 1; }
.oc-decay-badge { font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); }
.oc-decay-recover { font-size: var(--fs-micro); color: var(--text-muted); }

/* -- Battle button -- */
.oc-battle-btn {
  width: 100%;
  padding: 11px 0;
  background: linear-gradient(135deg, var(--fx-action-arcane) 0%, var(--fx-action-info) 100%);
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-on-well);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.oc-battle-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.oc-battle-btn:active { opacity: 0.75; transform: translateY(0); }

/* -- Rewards section -- */
.oc-rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.oc-reward-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-panel-raised);
  border-radius: var(--r-xs);
  padding: 6px 10px;
}
.oc-reward-icon { font-size: var(--fs-sm); }
.oc-reward-val  { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); }

.oc-drops-section { display: flex; flex-direction: column; gap: 4px; }
.oc-drops-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.oc-drops {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.oc-drop-item {
  font-size: var(--fs-micro);
  padding: 2px 8px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
}
.oc-drop-guaranteed { background: rgba(88,214,141,0.12); color: var(--text-success); }
.oc-drop-bonus      { background: rgba(230,192,106,0.12); color: var(--text-gold); }
.oc-drop-chance { font-size: var(--fs-micro); opacity: 0.75; margin-left: 2px; }
.oc-drop-none   { font-size: var(--fs-micro); color: var(--text-muted); font-style: italic; }

/* ============================================================== Phase 2: Inspector extensions */

.insp-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.insp-item-icon { font-size: var(--fs-xl); line-height: 1; flex-shrink: 0; }
.insp-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.insp-item-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insp-item-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* Blueprint recipe in Inspector */
.insp-recipe {
  padding: 4px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.insp-recipe-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-micro);
  padding: 3px 0;
  border-bottom: 1px solid rgba(42,50,64,0.5);
}
.insp-recipe-row:last-child { border-bottom: none; }
.insp-recipe-ok      { color: var(--text-success); }
.insp-recipe-missing { color: var(--danger); }

.insp-craft-status {
  margin: 4px 14px 10px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  text-align: center;
}
.insp-craft-ready   { background: rgba(88,214,141,0.14); color: var(--text-success); }
.insp-craft-missing { background: rgba(231,76,60,0.14);  color: var(--danger); }

/* Inspector hero picker (blueprint comparison) */
.insp-hero-picker {
  display: flex; gap: 5px; margin: 6px 14px 2px; flex-wrap: wrap;
}
.insp-hero-tab {
  flex: 1; padding: 4px 6px; font-size: var(--fs-micro); font-weight: 600;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-xs); color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body);
}
.insp-hero-tab.active {
  background: color-mix(in srgb, var(--accent-arcane) 16%, var(--bg-panel-raised));
  border-color: var(--accent-arcane); color: var(--accent-arcane);
}

/* Equipment comparison grid in inspector */
.insp-compare {
  margin: 4px 14px 10px; font-size: var(--fs-2xs);
}
.insp-cmp-name {
  color: var(--text-muted); font-size: var(--fs-micro); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.insp-cmp-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2px; margin-bottom: 2px;
}
.cmp-col-label { color: var(--text-muted); font-size: var(--fs-micro); text-align: right; }
.insp-cmp-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2px; padding: 3px 0; border-bottom: 1px solid var(--border-soft);
}
.insp-cmp-row:last-child { border-bottom: none; }
.cmp-stat-label { color: var(--text-muted); font-weight: 600; }
.insp-cmp-row span:not(.cmp-stat-label) { text-align: right; font-family: var(--font-mono); color: var(--text-primary); }
.cmp-gain    { color: var(--text-success); font-weight: 700; }
.cmp-loss    { color: var(--danger);  font-weight: 700; }
.cmp-neutral { color: var(--text-muted); }

/* Craft result overlay */
.craft-result-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
}
.craft-result-panel {
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 24px 20px; width: min(340px, 90vw);
  text-align: center; box-shadow: var(--e3);
}
.craft-result-title {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--text-success); letter-spacing: 0.05em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--hp-high) 60%, transparent);
  margin-bottom: 6px;
}
.craft-result-name  { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.craft-result-art { width: 72px; height: 72px; margin: 4px auto 8px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); }
.craft-result-art-fallback { font-size: var(--fs-4xl); line-height: 1; margin: 4px 0 8px; }
.craft-result-tier  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-arcane); margin: 2px 0 8px; }
.craft-result-stats { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 12px; }
.craft-gain-section {
  background: color-mix(in srgb, var(--hp-high) 8%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--hp-high) 30%, transparent);
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px;
}
.craft-gain-label { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.craft-gain-rows { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.craft-gain-row { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; }
.gain-pos { color: var(--text-success); }
.gain-neg { color: var(--danger); }
.craft-result-consumed { font-size: var(--fs-micro); color: var(--text-muted); margin-bottom: 16px; }
.craft-result-dismiss  { width: 100%; }

/* ============================================================== Phase 2: Live Log upgrade */

.log-filter-row {
  display: flex;
  gap: 4px;
  padding: 4px 10px 2px;
  flex-shrink: 0;
}
.log-filter-btn {
  background: none;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  border-radius: var(--r-md);
  padding: 2px 8px;
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.log-filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.log-filter-active {
  background: rgba(123,82,224,0.22);
  border-color: rgba(123,82,224,0.5);
  color: var(--accent-arcane);
}

.log-entry-icon {
  font-size: var(--fs-micro);
  flex-shrink: 0;
  margin-right: 2px;
  line-height: 1;
}

/* ============================================================== M1-A session UI */

.session-header {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-gold);
}

.session-wave-count {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.session-progress-bar-wrap {
  height: 6px;
  background: var(--bg-deep);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.session-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--meter-success-end));
  border-radius: var(--r-xs);
  transition: width 0.4s ease;
  min-width: 0;
}

.session-monsters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-monsters-text {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.session-advancing {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
}

.wave-result-banner {
  padding: 10px 14px;
}

.result-first-clear {
  color: var(--text-gold);
  font-weight: 700;
}

.result-raid-progress {
  color: var(--text-info);
  font-size: var(--fs-xs);
  margin-top: 4px;
}

/* ============================================================== F2: Raid Selector */
.raid-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.raid-selector-label {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-weight: 600;
}
.raid-run-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: var(--bg-panel-raised);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.raid-run-btn.active,
.raid-run-btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-gold);
  background: rgba(230,192,106,0.08);
}

/* Topbar raid indicator */
.tk-raid-indicator {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-info);
  background: rgba(93,173,226,0.12);
  border: 1px solid rgba(93,173,226,0.3);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  margin-right: 8px;
}

/* ============================================================== F5: Roster Management */
.oc-panel-subheader {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 6px;
}
.roster-active-slots {
  display: grid;
  /* auto-fit so slots wrap to a new row instead of squeezing/overflowing the
     panel on narrow (mobile) widths — issue: data หลุดกรอบเฟรม */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.roster-active-slot {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: 7px 8px;
  background: var(--bg-deep);
  font-size: var(--fs-2xs);
  min-width: 0;        /* allow children to shrink/ellipsize instead of overflowing */
  overflow: hidden;
}
.roster-active-slot .roster-slot-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.roster-active-slot .roster-name-input { min-width: 0; flex: 1; max-width: 100%; }
.roster-active-slot .roster-slot-class,
.roster-active-slot .roster-slot-hp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-active-slot .roster-detail-btn { max-width: 100%; }
.roster-cap-note { float: right; font-size: var(--fs-micro); color: var(--text-muted); font-weight: 600; }
.roster-slot-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 12px 0;
}
.roster-slot-name {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-slot-class {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
}
.roster-slot-hp {
  color: var(--text-muted);
  font-size: var(--fs-micro);
  margin-top: 3px;
}
.roster-reserve-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roster-reserve-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;        /* swap buttons wrap below the name instead of overflowing */
  gap: 6px 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  font-size: var(--fs-2xs);
}
.roster-reserve-name { font-weight: 700; flex: 1; color: var(--text-primary); }
.roster-reserve-class { color: var(--text-muted); font-size: var(--fs-micro); margin-right: 4px; }
.roster-reserve-empty {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-style: italic;
  padding: 6px 0;
}
.btn-swap {
  padding: 3px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: var(--bg-panel-raised);
  color: var(--text-gold);
  font-size: var(--fs-micro);
  cursor: pointer;
  transition: border-color 0.12s;
}
.btn-swap:hover { border-color: var(--accent-gold); }
.btn-swap.disabled, .btn-swap:disabled { opacity: 0.4; cursor: not-allowed; }
/* Roster header actions — Recruit sits next to the Career Map button now, so
   the old `float: right` (which only works for a single trailing element) is
   replaced by a flex group the header lays out. */
.roster-head-actions { float: right; display: inline-flex; align-items: center; gap: 6px; }
.btn-recruit {
  padding: 2px 10px;
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-gold);
  font-size: var(--fs-micro);
  font-weight: 700;
  cursor: pointer;
}
.btn-recruit:hover { background: rgba(230,192,106,0.08); }
.btn-careermap {
  padding: 2px 10px; border: 1px solid var(--border-active); border-radius: var(--r-xs);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-micro); font-weight: 700; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.btn-careermap:hover {
  background: var(--bg-hover); border-color: var(--accent-arcane); color: var(--accent-arcane);
}

/* Recruit modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 20px;
  min-width: 280px;
  max-width: 360px;
  width: 90%;
}
.modal-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.recruit-class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.recruit-class-btn {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: 9px 8px;
  background: var(--bg-panel-raised);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.recruit-class-btn:hover { background: var(--bg-deep); }
.recruit-class-name {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
}
.recruit-class-role {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Recruit modal, informed edition ──────────────────────────────────────
   Picking a starter also picks which two Lv100 branches you can ever reach, so
   the card carries the class's identity, its statline and its future paths. */
.recruit-modal-box {
  max-width: min(1080px, 94vw); width: 94vw;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
}
.recruit-sub { margin: -8px 0 14px; font-size: var(--fs-micro); color: var(--text-muted); }
.recruit-modal-box .recruit-class-grid {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 10px;
}
.recruit-option {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 11px; border-radius: var(--r-md);
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--class-color, var(--accent-gold));
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}
.recruit-option:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--class-color, var(--accent-gold)) 55%, var(--border-soft));
  box-shadow: var(--e2);
}
.recruit-option-head { display: flex; align-items: center; gap: 9px; }
.recruit-face {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--class-color, var(--accent-gold)) 45%, transparent);
  color: var(--class-color, var(--accent-gold));
}
.recruit-face-sprite { image-rendering: pixelated; }
.recruit-option-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.recruit-owned {
  font-size: var(--fs-micro); font-weight: 800; color: var(--text-faint);
  padding: 2px 6px; border-radius: var(--r-full); background: var(--bg-deep);
}
/* The shared class card is a standalone panel elsewhere; inside a recruit
   option it is the body, so it drops its own frame. */
.recruit-option .cm-card { border: 0; background: transparent; padding: 0; }
.recruit-statline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 6px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-micro); color: var(--text-faint); text-align: center;
}
.recruit-statline b { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-primary); }
.recruit-paths {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: var(--fs-micro); color: var(--text-secondary);
}
.recruit-paths-k {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-right: 2px;
}
.recruit-path {
  padding: 2px 7px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-arcane) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 32%, transparent);
  color: var(--accent-arcane); font-weight: 700;
}
.recruit-path-sep { color: var(--text-faint); font-style: normal; }
.recruit-modal-box .recruit-class-btn {
  margin-top: auto; text-align: center; font-weight: 800; font-size: var(--fs-2xs);
  padding: 9px; border-radius: var(--r-sm);
  color: var(--text-on-class);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--class-color, var(--accent-gold)) 92%, var(--fx-highlight)),
    var(--class-color, var(--accent-gold)));
  border: 1px solid color-mix(in srgb, var(--class-color, var(--accent-gold)) 70%, var(--line-strong));
}
.recruit-modal-box .recruit-class-btn:hover { filter: brightness(1.08); background: var(--class-color, var(--accent-gold)); }

/* ── Career Map, as a modal ─────────────────────────────────────────────── */
.cm-modal-box {
  position: relative;
  max-width: min(1180px, 96vw); width: 96vw;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}
.cm-modal-box .career-map { margin-top: 0; border: 0; box-shadow: var(--e0); background: transparent; }
.cm-head-static { cursor: default; padding-right: 46px; }
.cm-head-static:hover { background: transparent; }
.cm-modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 28px; height: 28px; border-radius: var(--r-full);
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer;
}
.cm-modal-close:hover { color: var(--text-primary); border-color: var(--border-active); }

/* ============================================================== F3: Skills Panel */
.skill-hero-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-deep);
}
.skill-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.skill-hero-name {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
}
.skill-lv-badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  padding: 1px 7px;
}
.skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skill-name {
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  flex: 1;
}
.skill-name.skill-unlocked { color: var(--text-success); }
.skill-unlock-status { flex-shrink: 0; }
.skill-badge-active {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-success);
  background: rgba(88,214,141,0.1);
  border: 1px solid rgba(88,214,141,0.25);
  border-radius: var(--r-sm);
  padding: 1px 7px;
}
.skill-badge-locked {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-style: italic;
}
.btn-unlock-skill {
  padding: 3px 9px;
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-gold);
  font-size: var(--fs-micro);
  font-weight: 700;
  cursor: pointer;
}
.btn-unlock-skill:hover { background: rgba(230,192,106,0.1); }

.result-weapons {
  font-size: var(--fs-xs);
  color: var(--text-info);
  margin-top: 4px;
}
.result-weapons { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.result-weapon-art { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; }

/* ============================================================== Battle status strip */

.battle-status-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}

.bss-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bss-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-transform: uppercase;
  width: 44px;
  flex-shrink: 0;
}

.bss-units {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.bss-unit {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Wide enough that ordinary names ("Firefighter", "Bramble Archer") read in
     full now that the nameplate gets its own line rather than a 24px pill. */
  min-width: 118px;
  flex: 1;
}

/* S8: portrait / icon face in the HP strip */
.bss-face {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs);
  border: none; /* v9 C (#15): frame-free icon */
  background: transparent;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.bss-face-sprite {
  background-size: 300% 400%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
.unit-avatar-enemy.bss-face-sprite { background-size: contain; background-position: center; }
.bss-unit-boss .bss-face {
  border-color: var(--accent-gold);
  box-shadow: 0 0 6px rgba(230,192,106,0.8);
}

.bss-unit-name {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  width: 24px;
  overflow: hidden;
  text-overflow: clip;
}

/* Wraps so the nameplate can claim a full first line (see .bss-unit-name in the
   v10 block); the bar and the HP figure then sit together on the second. */
.bss-unit-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 5px; }

.bss-unit-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-deep);
  border-radius: var(--r-full);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.bss-unit-hp {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

.bss-unit-fill { height: 100%; transition: width 0.2s ease; }
.bss-fill-hero  { background: var(--hp-high); }
.bss-fill-mid   { background: var(--hp-mid); }
.bss-fill-low   { background: var(--hp-low); }
.bss-fill-enemy { background: var(--danger); opacity: 0.8; }
.bss-unit-dead { opacity: 0.4; }
.bss-unit-dead .bss-unit-bar { opacity: 0.25; }
.bss-unit-dead .bss-face { filter: grayscale(1); opacity: 0.5; }

/* ============================================================== M1-D dungeon field sim */

.dungeon-field {
  position: relative;
  width: 100%;
  height: 34vh;          /* S8: shrunk so the battle screen fits with no scrollbar */
  min-height: 220px;
  max-height: 360px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-battlefield);
  margin-bottom: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* S8: battle screen fits the viewport — internal combat feed scrolls, page does not.
   #app becomes a flex column ONLY while the battle screen is mounted, so the
   persistent dungeon-field (a sibling of .battle-screen inside #app) and the
   battle content share the available height instead of overflowing. */
body[data-screen="battle"] #app {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body[data-screen="battle"] #app > .dungeon-field { flex: 0 0 auto; }
.battle-screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 6px;
}
.battle-screen .combat-feed,
.battle-screen .cf-panel {
  flex: 1 1 auto;
  min-height: 60px;
  display: flex;
  flex-direction: column;
}
.battle-screen .cf-entries-scroll,
.battle-screen .cf-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.battle-screen .screen-footer { flex-shrink: 0; }
.battle-status-strip { flex-shrink: 0; }

/* Desktop Stage battle: give the live feed the spare vertical room. Kept out of
   the <=900px rules, where the page intentionally scrolls as one surface. */
@media (min-width: 901px) {
  body[data-screen="battle"] .dungeon-field {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
  }
  body[data-screen="battle"] .session-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "loop loop"
      "progress monsters"
      "bar bar";
    gap: 2px 12px;
    padding: 4px 10px;
    margin-bottom: 0;
  }
  body[data-screen="battle"] .session-header .sc-hud {
    grid-area: loop;
    gap: 6px;
    margin-bottom: 0;
    padding: 0 8px;
  }
  body[data-screen="battle"] .session-progress-row { grid-area: progress; }
  body[data-screen="battle"] .session-progress-bar-wrap {
    grid-area: bar;
    height: 4px;
  }
  body[data-screen="battle"] .session-monsters-row { grid-area: monsters; }
  body[data-screen="battle"] .cf-damage-slot .hdp-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 12px;
    margin: 4px 8px 5px;
    padding: 4px 8px;
  }
  body[data-screen="battle"] .cf-damage-slot .hdp-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  body[data-screen="battle"] .cf-damage-slot .hdp-row {
    min-width: 0;
    margin: 0;
  }
  body[data-screen="battle"] .cf-damage-slot .hdp-name { flex-basis: 60px; }
  body[data-screen="battle"] .cf-damage-slot .hdp-share { display: inline; }
  body[data-screen="battle"] .battle-screen .cf-panel {
    min-height: 0;
  }
  body[data-screen="battle"] .battle-screen .cf-entries {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* ---- Ambient walking field (Tower + World Map cosmetic map) ---- */
.ambient-mount { position: relative; }
.ambient-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
  /* subtle dungeon-floor look: dark base + faint grid, like the battle cave */
  background-color: var(--surface-battlefield);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}
.ambient-token {
  position: absolute;
  width: 32px; height: 32px;
  margin-left: -16px; margin-top: -16px;   /* left/top % marks the token centre */
  image-rendering: pixelated;
  will-change: left, top;
  z-index: 2;
}
.ambient-token.ambient-hero  { z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55)); } /* heroes read on top of monsters and bosses */
.ambient-token.ambient-enemy { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }
.ambient-token.is-boss { width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; z-index: 4; }

/* Cave terrain — drawn to canvas (clean dark dungeon, no background image) */
.sim-terrain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  image-rendering: pixelated;
}

/* Decorative obstacle props (rocks/trees/pillars) layered above terrain */
.sim-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sim-prop {
  position: absolute;
  transform: translate(-50%, -55%);
  font-size: var(--fs-md);
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
  user-select: none;
}

/* ---- Tokens (map dots) ---- */

.sim-hero-token,
.sim-monster-token,
.sim-summon-token {
  position: absolute;
  width: 32px;
  height: 32px;
  /* No box frame — sprites sit directly on the field (PXD: borders removed). */
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: 800;
  color: var(--text-primary);
  z-index: 3;
  user-select: none;
  /* a soft ground shadow gives depth without a square outline */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  transition: opacity 0.3s;
}

.sim-summon-token {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  opacity: 0.76;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.sim-summon-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-full);
  background: var(--bg-panel-raised);
  color: var(--text-gold);
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
}
.sim-summon-art {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  visibility: hidden;
  pointer-events: none;
}
.sim-summon-token.has-summon-art .sim-summon-art { visibility: visible; }
.sim-summon-token.has-summon-art .sim-summon-mark { visibility: hidden; }

/* Walking bob — vertical only; position handled by JS via left/top */
.sim-hero-token.is-walking {
  animation: simHeroWalk 0.3s ease-in-out infinite;
}

@keyframes simHeroWalk {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-4px); }
}

.sim-hero-token.is-wiped {
  opacity: 0.3;
  filter: grayscale(1);
}
/* Downed hero (continuous live sim) — death-pops, then hidden until respawn.
   The animation also outranks .spr-hero-walk's, so the corpse stops walking. */
.sim-hero-token.is-downed {
  opacity: 0;
  pointer-events: none;
  animation: tokDeath 0.28s ease-in forwards;
}

.sim-monster-token {
  color: var(--danger);
  font-size: var(--fs-2xs);
}

/* ---- Token stacking order ----
   Heroes read ON TOP of anything they are standing in: monsters (3), bosses (4),
   summons (3). Without this every token shared z-index 3 and DOM order alone
   decided, so a hero could disappear under the mob it was fighting. Damage
   popups (.sim-popups) and skill FX sit above heroes on purpose. */
.sim-hero-token { z-index: 5; }

/* B3: shared death pop — brief swell, then shrink + fade. fill:forwards holds
   the corpse invisible; the static opacity:0 on the state rules is the no-anim
   fallback. Class removal on respawn snaps back instantly (no reverse). */
@keyframes tokDeath {
  0%   { opacity: 1; transform: scale(1); }
  30%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(0.2); }
}

/* ---- Animated sprite system ----
   %-based background-position keyframes so one rule works at any box size.
   spr-anim-4  : 4-frame strip (monsters), bg-size 400% 100%, looping idle.
   spr-hero-walk: 3-frame walk on row 0 of a 3×4 hero sheet, bg-size 300% 400%. */
@keyframes sprWalk4 {
  0%,  24.9% { background-position-x: var(--spr-x0, 0%); }
  25%, 49.9% { background-position-x: var(--spr-x1, 33.333%); }
  50%, 74.9% { background-position-x: var(--spr-x2, 66.667%); }
  75%, 100%  { background-position-x: var(--spr-x3, 100%); }
}
@keyframes sprHeroWalk3 {
  0%,   33.2% { background-position: 0%   0%; }
  33.3%,66.5% { background-position: 50%  0%; }
  66.6%,100%  { background-position: 100% 0%; }
}
.spr-anim-4    { animation: sprWalk4 0.7s steps(1) infinite; }
.spr-hero-walk { animation: sprHeroWalk3 0.6s steps(1) infinite, simHeroBob 0.3s ease-in-out infinite; }

@keyframes simHeroBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Hero portrait token — sprite sheet shows front-facing frame */
.sim-hero-token.has-portrait { background-color: transparent; color: transparent; }

/* Monster sprite token */
.sim-monster-token.has-sprite { background-color: transparent; color: transparent; }

/* Boss monster token — bigger + gold glow via drop-shadow (no box frame) */
.sim-monster-token.is-boss {
  font-size: var(--fs-sm);
  z-index: 4;
  animation: simBossPulse 1.4s ease-in-out infinite;
}
@keyframes simBossPulse {
  0%, 100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 4px rgba(230,192,106,0.6)); }
  50%      { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(230,192,106,0.95)); }
}

/* Missing-art glyphs occupy approximately the native token area. Sprite
   dimensions, boss artwork and animation remain owned by their existing rules. */
.sim-monster-token:not(.has-sprite) { font-size: var(--fs-2xl); line-height: 1; }
.sim-monster-token.is-boss:not(.has-sprite) { font-size: var(--fs-4xl); }

/* Dead monster — death pop, held invisible. AFTER .is-boss on purpose: same
   specificity, so this later rule's animation beats simBossPulse and bosses
   die with the same pop instead of pulsing forever. */
.sim-monster-token.is-dead {
  opacity: 0;
  animation: tokDeath 0.28s ease-in forwards;
}
.sim-summon-token.is-dead {
  opacity: 0;
  animation: tokDeath 0.28s ease-in forwards;
}

.tok-statuses {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1px;
  width: max-content;
  max-width: 76px;
  pointer-events: auto;
  z-index: 5;
}
.sim-monster-token .tok-statuses { top: calc(100% + 4px); bottom: auto; }
.tok-status,
.tok-status-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13px;
  height: 13px;
  padding: 0 1px;
  box-sizing: border-box;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: var(--bg-panel-raised);
  color: var(--danger);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  filter: none;
}
.tok-status-count {
  position: absolute;
  right: -3px;
  bottom: -4px;
  padding: 0 2px;
  border-radius: var(--r-xs);
  background: var(--bg-panel-raised);
  color: var(--danger);
  font-size: 6px;
  line-height: 8px;
}
.tok-status-more { color: var(--text-gold); font-size: 7px; }
.tok-combo,
.tok-lifetime {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 16px;
  padding: 1px 3px;
  box-sizing: border-box;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised);
  color: var(--text-gold);
  font-size: 7px;
  font-weight: 800;
  line-height: 9px;
  text-align: center;
  white-space: nowrap;
  z-index: 5;
}
.tok-combo { bottom: -18px; }
.tok-lifetime { bottom: -17px; color: var(--text-success); }

/* ---- On-token HP bars (v8 UI: combat readability) ----
   Monsters wear the bar above the head, heroes under the feet — placement
   alone separates the sides even when sprites crowd together in a scrum. */
.tok-hp {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 3px;
  transform: translateX(-50%);
  background: rgba(10, 12, 16, 0.6);
  border-radius: var(--r-xs);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.sim-monster-token .tok-hp { top: -7px; }
.sim-hero-token .tok-hp    { bottom: -6px; }
.sim-summon-token .tok-hp  { bottom: -6px; width: 18px; height: 2px; }
.sim-monster-token.is-boss .tok-hp { width: 40px; height: 4px; top: -9px; }

.tok-hp-fill,
.tok-hp-chip {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xs);
  transform-origin: left center;
}
/* Monsters keep the flat red base; hero fills carry a tone class. The double
   selector outscores both this base rule and the generic .hp-high/.hp-mid/
   .hp-low rules, whatever the file order. */
.tok-hp-fill {
  background: var(--hp-low);
  transition: transform 0.12s ease-out;
}
.tok-hp-fill.hp-high { background: var(--hp-high); }
.tok-hp-fill.hp-mid  { background: var(--hp-mid); }
.tok-hp-fill.hp-low  { background: var(--hp-low); }
/* Damage chip: a pale band lingering where the HP just was, easing down after
   the fill — reads as "that hit took THIS much". It sits under the fill, so a
   rising (healing) fill simply covers it. */
.tok-hp-chip {
  background: rgba(255, 236, 200, 0.85);
  transition: transform 0.45s ease-out 0.12s;
}

/* Mini world-map field: shrink to fit the 20px tokens. */
.msim-tok .tok-hp { width: 14px; height: 2px; }
.msim-tok.sim-hero-token .tok-hp { bottom: -4px; }
.msim-tok.sim-monster-token .tok-hp { top: -5px; }
.msim-tok.is-boss .tok-hp { width: 18px; height: 3px; top: -5px; }

/* ---- Skill effect bursts (pre-baked 384×64, six 64px frames) ----
   The box matches the source cell exactly, so a frame draws 1:1 with NOTHING
   resampling it. There is deliberately no transform here: how big an effect
   reads is baked into the art by the SIZE column in tools/fxstrip.js. The old
   40px box scaled a 32px frame by 1.25 and then again by --fx-scale, which is
   what turned crisp art to mush under `pixelated`. */
.sim-skill-fx {
  position: absolute;
  width: 64px;
  height: 64px;
  background-size: 600% 100%;
  background-repeat: no-repeat;
  background-position-x: 0%;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 6;
  filter: var(--fx-filter, none);
  animation: skillFxPlay var(--fx-dur, 420ms) steps(1) forwards;
}
@keyframes skillFxPlay {
  0%,   15% { background-position-x: 0%;   }
  16%,  32% { background-position-x: 20%;  }
  33%,  49% { background-position-x: 40%;  }
  50%,  66% { background-position-x: 60%;  }
  67%,  83% { background-position-x: 80%;  }
  84%, 100% { background-position-x: 100%; }
}

/* ---- Cast tell (heal / buff / shield / summon) ----
   Non-damage skills land on an ALLY, so they get no hit-flash, no slash and no
   damage number — before this they were literally invisible on the field. The
   ring pulses outward from the caster in that hero's own class colour, so the
   eye can tell "someone just did something" from "someone just got hit". */
.sim-cast-ring {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--cast-col, var(--fx-cast));
  border-radius: var(--r-full);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 8px var(--cast-col, var(--fx-cast));
  animation: simCastRing var(--cast-dur, 520ms) cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes simCastRing {
  0%   { opacity: 0;   transform: scale(.28); }
  22%  { opacity: .95; }
  100% { opacity: 0;   transform: scale(1.55); }
}
/* A second, slower ring on TEAM-wide casts — one pulse reads as "me", two
   reads as "all of us", without needing a separate effect per ally. */
.sim-cast-ring.sim-cast-team {
  animation-name: simCastRingTeam;
}
@keyframes simCastRingTeam {
  0%   { opacity: 0;   transform: scale(.28); }
  18%  { opacity: .9;  }
  55%  { opacity: .5;  transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* ---- Damage / effect popups ---- */

.sim-popups {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7; /* above the raised hero tokens */
}

.sim-popup {
  position: absolute;
  --tx: 0px;
  --ty: -40px;
  --punch: 1.18; /* pop-in overshoot scale; crits punch harder */
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  /* solid 4-direction outline + soft halo — legible over the light cave floor */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.8), 1px -1px 0 rgba(0,0,0,0.8),
    -1px  1px 0 rgba(0,0,0,0.8), 1px  1px 0 rgba(0,0,0,0.8),
     0 0 6px rgba(0,0,0,0.55);
  transform: translate(-50%, -50%);
  /* 2026-09-23: numbers used to clear in 0.95s, which is not long enough to read
     a six-digit hit while the fight keeps moving. The extra 0.8s is spent
     HOLDING the number in place, not drifting more slowly — the pop-in and the
     arc keep their original wall-clock timing, so the hit still feels sharp. */
  animation: simPopFly 1.75s cubic-bezier(0.18, 0.8, 0.3, 1) forwards;
}

/* Pop in at the hit point, arc out along the launch vector, hold, then fade. */
@keyframes simPopFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(var(--punch, 1.18)); }
  16%  { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.55), calc(-50% + var(--ty) * 0.55)) scale(1); }
  64%  { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.8), calc(-50% + var(--ty) * 0.8)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) - 10px)) scale(0.9); }
}

/* Hero took the hit: the number drops below the unit — direction alone says
   which side is bleeding, before you even read the color. */
.sim-popup-fall { animation-name: simPopFall; }

@keyframes simPopFall {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(var(--punch, 1.18)); }
  19%  { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.5), calc(-50% + var(--ty) * 0.45)) scale(1); }
  64%  { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.75), calc(-50% + var(--ty) * 0.72)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 14px)) scale(0.85); }
}

.sim-popup-damage { color: var(--text-combat-damage); }
/* ally-dealt damage (we hit monsters) = bright; enemy-dealt (we get hit) = red. */
.sim-popup-ally  { color: var(--text-on-well); }
.sim-popup-enemy { color: var(--state-critical); }
.sim-popup-ally-crit {
  color: var(--state-critical-ally);
  font-size: var(--fs-xl); font-weight: 900;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85), 1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85), 1px  1px 0 rgba(0,0,0,0.85),
     0 0 12px rgba(255,205,70,0.95), 0 0 4px rgba(255,255,255,0.85);
}
.sim-popup-enemy-crit {
  color: var(--state-critical-enemy);
  font-size: var(--fs-lg); font-weight: 900;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85), 1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85), 1px  1px 0 rgba(0,0,0,0.85),
     0 0 12px rgba(231,76,60,0.95);
}
/* Shared crit juice only (punch + longer life + burst). Color/size/shadow live
   in the side-specific -ally-crit / -enemy-crit rules above — putting them here
   too would win the cascade (same specificity, later rule) and erase the
   side distinction, which is exactly the bug this used to have. */
.sim-popup-crit {
  --punch: 1.5;
  font-weight: 900;
  animation-duration: 2s;
}
/* Starburst flash behind the crit number — one expanding radial, self-fading. */
.sim-popup-crit::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  z-index: -1;
  background: radial-gradient(circle, rgba(255,214,90,0.5) 0%, rgba(255,214,90,0) 70%);
  animation: simCritBurst 0.5s ease-out forwards;
}
.sim-popup-enemy-crit::before {
  background: radial-gradient(circle, rgba(255,90,70,0.5) 0%, rgba(255,90,70,0) 70%);
}
@keyframes simCritBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
/* DoT ticks are ambient noise — keep them small and faint so real hits pop. */
.sim-popup-bleed  { color: var(--state-bleed); font-size: var(--fs-2xs); filter: opacity(0.75); }
.sim-popup-burn   { color: var(--state-burning); font-size: var(--fs-2xs); filter: opacity(0.75); }
.sim-popup-poison { color: var(--state-poison); font-size: var(--fs-2xs); filter: opacity(0.75); }
.sim-popup-shock  { color: var(--accent-info); font-size: var(--fs-2xs); filter: opacity(0.75); }
.sim-popup-heal   { color: var(--state-heal); font-size: var(--fs-sm); }
/* v7.4 (issue 15): skill-cast caption over the caster. Hero captions receive
   their popup-safe class colour inline; monsters keep the gold fallback. */
.sim-popup-skill {
  color: var(--gold-pale); font-size: var(--fs-xs); font-weight: 900;
}

/* ---- Obstacles ---- */

.sim-obstacle {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  border-radius: var(--r-xs);
  pointer-events: none;
  user-select: none;
}
.obs-rock   { background: rgba(80,70,60,0.55); border: 1px solid rgba(120,100,80,0.4); }
.obs-tree   { background: rgba(30,70,30,0.50); border: 1px solid rgba(40,100,40,0.3); border-radius: var(--r-full) var(--r-full) var(--r-full) var(--r-full); }
.obs-pillar { background: rgba(60,60,80,0.60); border: 1px solid rgba(100,100,130,0.4); border-radius: var(--r-xs); }
.obs-wall   { background: rgba(70,60,50,0.65); border: 1px solid rgba(120,100,80,0.4); border-radius: var(--r-xs); }

/* ---- Loot marker ---- */

.sim-loot {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: opacity 0.15s;
}

.sim-loot-chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.sim-loot-chest-lid {
  width: 18px;
  height: 6px;
  border: 1.5px solid var(--accent-gold);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: rgba(230, 192, 106, 0.20);
  transform: rotate(-8deg) translateY(2px);
  transform-origin: bottom left;
}

.sim-loot-chest-body {
  width: 18px;
  height: 9px;
  border: 1.5px solid var(--accent-gold);
  border-top: none;
  border-radius: 0 0 var(--r-xs) var(--r-xs);
  background: rgba(230, 192, 106, 0.12);
}

.sim-loot-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-gold);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ---- Mobile ---- */

@media (max-width: 900px) {
  .dungeon-field { height: 110px; }
}

/* ============================================================== mobile */

/* Desktop-only: the hamburger toggle + mobile bottom-nav are hidden until the
   mobile breakpoint. */
.tk-menu-toggle { display: none; }
.bottom-nav { display: none; }

@media (max-width: 900px) {
  #inspector { display: none; } /* supplementary — details live on the Heroes page */
  #app { padding: 12px 14px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); }

  /* Mobile menu toggle button in the topbar. */
  .tk-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 6px; flex-shrink: 0;
    background: transparent; border: none; color: var(--text-gold);
    font-size: var(--fs-xl); line-height: 1; cursor: pointer;
  }

  /* Control Center becomes a slide-in drawer from the left, hidden by default. */
  #control-center {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
    width: min(84vw, 340px); z-index: 60;
    transform: translateX(-102%); transition: transform 0.22s ease;
    visibility: hidden; pointer-events: none;
    box-shadow: var(--e2);
    display: flex; /* override any earlier display:none */
  }
  #app-shell.cc-drawer-open #control-center {
    transform: translateX(0); visibility: visible; pointer-events: auto;
  }

  /* Scrim behind the open drawer. */
  #app-shell.cc-drawer-open #main-content::before {
    content: ""; position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 55;
  }

  /* ---- Redesigned mobile header ----
     Clean, uncluttered:  [☰]  [logo]  ······  🟡 gold   💎 diamond
     Only the two glanceable currencies stay — borderless and right-aligned with
     real spacing. Everything else (skill-point nudge, account/Sign in, farmed
     map, player level, version, stage) lives in the drawer or its own page;
     surfacing all of them here was the source of the crowding. */
  #topbar { padding: 0 14px 0 2px; gap: 0; overflow: hidden; }
  .tk-logo { padding: 0 6px; border-right: none; }
  /* Width is what binds here, not height (the bar logo is ~7.4:1). 124px keeps
     the letters legible; below ~104px the counters start closing up. */
  .tk-logo-picture { width: 36px; height: 36px; }
  .tk-logo-img { width: 36px; height: 36px; }
  .tk-logo-mobile-word {
    display: block; margin-left: 5px; font: 900 18px/0.95 var(--font-display);
    letter-spacing: 0.03em; color: var(--text-gold); text-shadow: 1px 1px 0 var(--gold-bright);
  }

  .tk-topbar-resources {
    margin-left: auto; flex: 0 0 auto; gap: 16px; padding: 0; min-width: 0; overflow: visible;
  }
  .tk-resource {
    background: transparent; border: none; border-radius: 0; padding: 0;
    gap: 5px; font-size: var(--fs-xs); flex-shrink: 0;
  }
  .tk-resource-icon { font-size: var(--fs-md); }
  .tk-resource-label, .tk-resource-sep { display: none; }
  /* Drop the Stage chip on mobile — it lives on the Stage page + counter. */
  .tk-topbar-resources .tk-resource:last-of-type { display: none; }

  /* The whole right cluster is removed from the mobile header. */
  .tk-topbar-right { display: none; }
  /* The beta notice stays: it is the one label that must reach every player. */
  .tk-beta { margin-left: 8px; padding: 1px 6px; letter-spacing: 0.02em; }
  .tk-wm-chip, .tk-player-lv, .tk-version, .tk-raid-indicator,
  .tk-pt-badge, .tk-acct-chip { display: none; }

  /* ---- Persistent bottom tab bar (mobile-native navigation) ---- */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-panel, var(--surface-well));
    border-top: 1px solid var(--border-soft, var(--line-well));
    box-shadow: var(--e2);
  }
  .bn-item {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px 4px; background: transparent; border: none;
    color: var(--text-muted, var(--text-navigation-muted)); font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: 0.02em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .bn-item .bn-icon { font-size: var(--fs-lg); line-height: 1; }
  .bn-item .bn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bn-item.bn-active { color: var(--text-gold); }
  .bn-item.bn-active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 var(--r-xs) var(--r-xs); background: var(--accent-gold, var(--gold-bright));
  }
  .bn-item.bn-disabled { opacity: 0.4; }
  .bn-badge {
    position: absolute; top: 3px; left: 52%; min-width: 15px; height: 15px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--danger, var(--state-danger)); color: var(--text-on-well); font-size: var(--fs-micro); font-weight: 700;
    border-radius: var(--r-sm); line-height: 1;
  }

  /* Reserve space so page content + footers clear the fixed bar. */
  /* เมนูล่างสูง 56px + safe-area — เผื่อ 76px ให้ปุ่มแถวสุดท้ายกดได้สบายนิ้ว */
  #app { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* Drawer (72) sits above the bottom-nav (70), which sits above the scrim (55),
     so the bottom-nav stays tappable while the drawer is open. */
  #control-center { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 72; }

  /* Talent tree: 3 columns is unusable on a phone — stack each branch.
     #app prefix raises specificity above the base .talent-branches rule that
     is defined later in this file. */
  #app .talent-branches { grid-template-columns: 1fr; }

  /* Battle screen: on phones, let the WHOLE page scroll instead of hard-fitting
     the viewport (finding A). Otherwise the combat feed + per-hero damage panel
     — the most engaging content — get squeezed into a ~60px internal scroller.
     Now the field sits at the top and the feed gets its natural height below. */
  body[data-screen="battle"] #app { display: block; overflow-y: auto; }
  body[data-screen="battle"] .battle-screen { display: block; overflow: visible; }
  body[data-screen="battle"] .battle-screen .combat-feed,
  body[data-screen="battle"] .battle-screen .cf-panel { display: block; min-height: 0; }
  body[data-screen="battle"] .battle-screen .cf-entries-scroll,
  body[data-screen="battle"] .battle-screen .cf-scroll { overflow: visible; max-height: none; }
  /* The sim field is the centerpiece — give it more presence when the page scrolls. */
  body[data-screen="battle"] .dungeon-field { height: 200px; }
}

/* Tiny/legacy phones (≤360px, e.g. iPhone SE): shrink the logo a touch so the
   gold + diamond currencies always have room. (Stage chip, account, and the
   right cluster are already hidden by the ≤900 mobile-header redesign.) */
@media (max-width: 360px) {
  .tk-logo-picture, .tk-logo-img { width: 32px; height: 32px; }
  .tk-topbar-resources { gap: 12px; }
}

/* iPhone 16 Pro Max and narrower phones (~430px logical width). */
@media (max-width: 460px) {
  /* Keep the bottom clearance for the fixed tab bar (don't reset it here). */
  #app { padding: 10px 10px calc(76px + env(safe-area-inset-bottom, 0px)); }
  h1 { font-size: var(--fs-lg); }
  /* Four spendable currencies fit the 375px header without clipping the Arena balance. */
  #topbar:has(.pvp-topbar-resource) .tk-topbar-resources { gap: 10px; }
  .tk-topbar-resources .tk-resource-sep { margin: 0 2px; }
  /* Stacked, full-width action footers on small screens. */
  .screen-footer { flex-direction: column-reverse; gap: 8px; }
  .screen-footer .btn { width: 100%; }
  .compare-columns { gap: 8px; }

  /* Keep quest text readable without allowing reward/actions to widen #app.
     The #app prefix is load-bearing: the desktop `.qs-reward { white-space:
     nowrap }` and `.qs-claim-btn { min-width: 110px }` rules are declared LATER
     in this file, and a media query adds no specificity — without the prefix
     they win and the reward line pushes the screen 35px wide on a phone. */
  /* .mail-row belongs here too: it borrows .qs-claim-btn, so the full-width
     button below would otherwise be forced onto a nowrap row and push it out. */
  #app .qs-row, #app .qs-chest, #app .qs-vault, #app .mail-row { align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; padding: 10px; }
  #app .mail-body { flex: 1 1 calc(100% - 38px); }
  #app .qs-body { flex: 1 1 calc(100% - 38px); min-width: 0; }
  #app .qs-right { width: 100%; flex: 1 1 100%; align-items: stretch; min-width: 0; }
  #app .qs-reward { white-space: normal; overflow-wrap: anywhere; text-align: right; }
  #app .qs-claim-btn, #app .qs-claim-big { width: 100%; min-width: 0; }
}

/* ---- M3: Element System (Forge picker + badges) ---- */
.element-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.element-btn {
  padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-xs);
  background: var(--bg-panel-raised, var(--surface-control)); color: var(--text, var(--text-control-on-well));
  border: 1px solid var(--border-soft, var(--line-well));
}
.element-btn:hover { border-color: var(--accent-gold, var(--gold-bright)); }
.element-btn-active {
  border-color: var(--accent-gold, var(--gold-bright));
  box-shadow: 0 0 0 1px var(--accent-gold, var(--gold-bright)) inset;
  color: var(--text-gold);
}
.element-hint { margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-dim); }
.element-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-full); font-size: var(--fs-micro);
  font-weight: 600; vertical-align: middle; border: 1px solid transparent;
}
.element-fire  { background: var(--element-fire-fill);  color: var(--element-fire-text);  border-color: color-mix(in srgb, var(--element-fire-text) 38%, var(--element-fire-fill)); }
.element-water { background: var(--element-water-fill); color: var(--element-water-text); border-color: color-mix(in srgb, var(--element-water-text) 38%, var(--element-water-fill)); }
.element-wind  { background: var(--element-wind-fill);  color: var(--element-wind-text);  border-color: color-mix(in srgb, var(--element-wind-text) 38%, var(--element-wind-fill)); }
.element-earth { background: var(--element-earth-fill); color: var(--element-earth-text); border-color: color-mix(in srgb, var(--element-earth-text) 38%, var(--element-earth-fill)); }
.effect-remove-btn {
  margin-left: 6px; border: none; background: transparent; cursor: pointer;
  color: var(--danger, var(--state-danger)); font-size: var(--fs-sm); line-height: 1; padding: 0 4px;
}
.effect-cap-note { margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-dim); }
#effect-add-select { margin-top: 6px; }

/* ============================================================== S8 additions */

/* Inventory: empty-materials note (replaces the old "?" placeholder cells) */
.mat-empty-note { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- Refine menu list ---- */
.refine-list-screen .screen-sub { color: var(--text-muted); font-size: var(--fs-xs); margin: 2px 0 0; }
/* v7.4: refine category filter tabs */
.refine-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.refine-tab {
  padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--border-soft);
  background: var(--bg-panel); color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.refine-tab:hover { border-color: var(--accent-gold); color: var(--text-gold); }
.refine-tab.active { background: color-mix(in srgb, var(--accent-gold) 16%, transparent); border-color: var(--accent-gold); color: var(--text-gold); }
.refine-tab-n { font-family: var(--font-mono, monospace); opacity: 0.7; font-size: var(--fs-micro); }

/* v7.4 (issue 8): richer, unambiguous refine list rows */
.refine-list { display: flex; flex-direction: column; gap: 8px; }
/* Note: stays single-column — the dashboard's centre pane (#app) is a narrow
   column flanked by Control Center + Inspector, so a side-by-side split never
   has room. Picker scrolls; selecting a row scrolls the detail into view. */

/* ---- Stage Clear popup ---- */
.scp-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20, 24, 32, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: scpFade 0.18s ease-out;
}
@keyframes scpFade { from { opacity: 0; } to { opacity: 1; } }
.scp-card {
  width: 100%; max-width: 440px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--e3);
  padding: 20px 20px 16px;
  animation: scpPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes scpPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.scp-title { font-size: var(--fs-xl); font-weight: 700; text-align: center; font-family: var(--font-display); }
.scp-win  { color: var(--text-success); }
.scp-lose { color: var(--danger); }
.scp-sub { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.scp-totals { display: flex; justify-content: center; gap: 16px; margin: 12px 0; font-family: var(--font-mono); font-size: var(--fs-sm); }
.scp-gold { color: var(--text-gold); font-weight: 700; }
.scp-exp  { color: var(--text-info); font-weight: 700; }
.scp-table-head {
  display: grid; grid-template-columns: 1.4fr 0.65fr 0.65fr 1fr 1fr 0.9fr; gap: 4px;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 4px 4px; border-bottom: 1px solid var(--border-soft);
}
.scp-table-head .scp-h-hero { text-align: left; }
.scp-table-head span:not(.scp-h-hero) { text-align: right; }
.scp-rows { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.scp-row {
  display: grid; grid-template-columns: 1.4fr 0.65fr 0.65fr 1fr 1fr 0.9fr; gap: 4px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid var(--border-soft);
}
.scp-hero { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scp-portrait {
  width: 32px; height: 32px; border-radius: var(--r-xs); flex-shrink: 0;
  border: 1.5px solid var(--border-active);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs);
  image-rendering: pixelated;
}
.scp-portrait-fallback { background: var(--bg-panel-raised); }
.scp-portrait-sprite {
  background-size: 300% 400%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
.scp-name { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scp-stat { text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); }
.scp-atk   { color: var(--text-ember); font-weight: 700; }
.scp-def   { color: var(--text-info); font-weight: 700; }
.scp-dmg   { color: var(--text-ember); font-weight: 700; }
.scp-taken { color: var(--danger); }
.scp-heal  { color: var(--text-success); }
.scp-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); }
.scp-close-btn {
  width: 100%; margin-top: 14px; padding: 11px 0;
  background: linear-gradient(135deg, var(--fx-action-arcane) 0%, var(--fx-action-info) 100%);
  border: none; border-radius: var(--r-sm); color: var(--text-on-well);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: opacity 0.15s;
}
.scp-close-btn:hover { opacity: 0.88; }

/* ============================================================== S9 additions */

/* Weapon-type vector icons (replaces pic-asset portraits) */
.cls-weapon-svg { display: block; }
.cc-hero-avatar-weapon, .insp-hero-avatar-weapon {
  display: flex; align-items: center; justify-content: center;
  color: var(--class-color, var(--accent-gold));
  background: color-mix(in srgb, var(--class-color, var(--line-dynamic-fallback)) 14%, var(--bg-panel));
}
.insp-hero-avatar-weapon { color: var(--class-color, var(--accent-gold)); }

/* Fallback icon tokens (no sprite) */
.sim-hero-token.sim-token-shape { background: rgba(255,255,255,0.92); border-radius: var(--r-xs); }
.sim-hero-token.sim-token-shape .cls-weapon-svg { stroke-width: 2; }
.sim-monster-token.sim-token-shape { border-radius: var(--r-xs); }

/* Topbar unspent skill-point badge — a gentle glowing nudge */
.tk-pt-badge {
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--state-available);
  background: rgba(46,158,91,0.16);
  border: 1px solid rgba(46,158,91,0.4);
  border-radius: var(--r-full); padding: 2px 9px; cursor: pointer;
  animation: ptPulse 1.8s ease-in-out infinite;
}
.tk-pt-badge:hover { background: rgba(46,158,91,0.28); }
@keyframes ptPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,158,91,0.0); }
  50%     { box-shadow: 0 0 8px 1px rgba(46,158,91,0.5); }
}

/* Heroes screen: in-place rename + weapon icon + detail button */
.roster-slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.roster-slot-icon { flex-shrink: 0; display: flex; }
.roster-slot-sprite {
  width: 32px; height: 32px; border-radius: var(--r-xs);
  image-rendering: pixelated;
  background-color: rgba(0,0,0,0.18);
}
.roster-name-input {
  flex: 1; min-width: 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  padding: 2px 6px; font-family: var(--font-body); transition: border-color .15s, background .15s;
}
.roster-name-input:hover { border-color: var(--border-soft); }
.roster-name-input:focus { outline: none; border-color: var(--accent-gold); background: var(--bg-panel-raised); }
.roster-detail-btn {
  margin-top: 8px; width: 100%; padding: 6px 0;
  background: transparent; border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  color: var(--text-gold); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; transition: background .12s;
}
.roster-detail-btn:hover { background: var(--bg-hover); }

/* Stage-clear popup loot chips */
.scp-loot-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 4px 0 4px; }
.scp-loot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.scp-loot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-secondary);
}
.scp-loot-chip-icon {
  display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
  image-rendering: pixelated; vertical-align: middle;
}
.scp-loot-weapon { border-color: var(--accent-arcane); color: var(--accent-arcane); }
.scp-loot-card   { border-color: var(--rarity-epic); color: var(--rarity-epic); }
.scp-loot-empty  { color: var(--text-muted); font-size: var(--fs-2xs); }
.mail-claim-result-card { width: min(520px, 92vw); }
.mail-featured-reward .scp-loot-chip { padding: 7px 12px; font-size: var(--fs-sm); border-width: 2px; }
.mail-featured-reward .scp-loot-chip-icon { width: 32px; height: 32px; }
.mail-reward-art { width: 20px; height: 20px; }
.mail-currency-art { display: inline-flex; width: 20px; height: 20px; }
.mail-currency-art .ui-ic { width: 20px; height: 20px; }
.mail-claim-status { margin: 2px 0 10px; color: var(--text-muted); font-size: var(--fs-2xs); }
@media (max-width: 600px) {
  .mail-claim-result-card { width: calc(100vw - 32px); max-width: calc(100vw - 32px); padding: 16px 12px 14px; }
  .mail-claim-result-card .scp-loot-chip { max-width: 100%; }
}

/* Inspector: equipped effects summary */
.insp-eff-list { padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 4px; }
.insp-eff-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: var(--fs-2xs); padding: 4px 8px;
  background: var(--bg-panel-raised); border-radius: var(--r-xs);
}
.insp-eff-name { color: var(--accent-arcane); font-weight: 600; }
.insp-eff-val { font-family: var(--font-mono); color: var(--text-primary); font-weight: 700; }
.insp-eff-tree .insp-eff-name { color: var(--text-success); }
.insp-eff-tree .insp-eff-val { color: var(--text-secondary); font-weight: 600; font-size: var(--fs-micro); }
.insp-eff-empty { padding: 6px 14px 10px; font-size: var(--fs-2xs); color: var(--text-muted); }


/* ============================================================== S10: 10-slot gear */
.slotpick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0;
}
.slotpick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); cursor: pointer; transition: border-color .12s, background .12s;
}
.slotpick-btn:hover { border-color: var(--accent-gold); background: var(--bg-hover); }
.slotpick-icon { font-size: var(--fs-xl); }
.slotpick-icon-img {
  display: inline-block; width: 34px; height: 34px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.slotpick-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-primary); }

/* Inspector: 10 equip slots in a tidy 2-col grid */
.insp-equip-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 14px 8px; }
.insp-equip-slot {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-xs); padding: 5px 8px; min-width: 0;
}
.insp-slot-icon { flex-shrink: 0; font-size: var(--fs-md); }
.insp-slot-name { flex: 1; min-width: 0; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-slot-name.empty { color: var(--text-faint); font-weight: 400; }
.insp-slot-gs { font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-gold); flex-shrink: 0; }
.insp-equip-action-row { grid-column: auto; }
.insp-equip-action-btn {
  width: 100%; margin-top: 2px; padding: 3px 0; font-size: var(--fs-micro); font-weight: 600;
  background: transparent; border: 1px solid var(--border-soft); border-radius: var(--r-xs);
  color: var(--text-gold); cursor: pointer;
}
.insp-equip-action-btn:hover { background: var(--bg-hover); }
.insp-slot-unit { display: flex; flex-direction: column; gap: 3px; }
.insp-slot-unit .insp-equip-slot { flex-direction: row; }

/* v7.2: real pixel-art slot icon (atlas) — replaces slot emoji, which included
   🪖 (Military Helmet) that renders blank on some fonts/platforms. */
.insp-slot-icon-img {
  width: 18px; height: 18px; display: inline-block; flex-shrink: 0;
}
/* ============ v7.4: PAPER-DOLL equipment (slots around the avatar) ============ */
.pd-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 6px 12px 10px;
}
.pd-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-slot {
  display: flex; align-items: center; gap: 7px; text-align: left;
  background: var(--bg-deep); border: 1.5px solid var(--border-soft); border-radius: var(--r-sm);
  width: 100%; max-width: 100%; overflow: hidden;
  padding: 5px 7px; cursor: pointer; transition: transform .1s, box-shadow .15s; min-width: 0;
}
.pd-slot:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.pd-slot .insp-slot-icon, .pd-slot .insp-slot-icon-img { width: 26px; height: 26px; font-size: var(--fs-lg); flex-shrink: 0; }
.pd-slot-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.2; }
.pd-slot-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 700; }
.pd-slot-gs { font-size: var(--fs-micro); font-weight: 800; font-family: var(--font-mono, monospace); }
.pd-slot-empty { opacity: 0.85; border-style: dashed; }
.pd-slot-empty:hover { opacity: 1; }
.pd-slot-empty-txt { color: var(--text-secondary); font-weight: 600; }
.pd-slot-upgrade { box-shadow: 0 0 8px rgba(231,76,60,0.5); }

/* v8: equipped tile leads with the piece's name (rarity-coloured, truncated) */
.pd-slot-item {
  font-size: var(--fs-micro); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* v8: interactive card chips on the hero sheet (click → in-place card picker) */
.pd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.pd-card-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--bg-deep); border: 1.5px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 6px 8px; cursor: pointer; transition: transform .1s, box-shadow .15s; min-width: 0;
}
.pd-card-chip:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.pd-card-name {
  font-size: var(--fs-micro); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pd-card-stars { color: var(--text-gold); }
.pd-card-eff {
  font-size: var(--fs-micro); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pd-card-chip-empty {
  border-style: dashed; opacity: 0.9;
  flex-direction: row; align-items: center; gap: 6px;
}
.pd-card-chip-empty:hover { opacity: 1; }
.pd-card-plus { font-weight: 900; color: var(--accent-arcane); }
.pd-card-empty-txt { font-size: var(--fs-micro); color: var(--text-secondary); font-weight: 600; }
.pd-cards-hint { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 6px; }
.pd-slot-updot {
  flex-shrink: 0; margin-left: auto; width: 14px; height: 14px; border-radius: var(--r-full); background: var(--state-danger);
  color: var(--text-on-well); font-size: var(--fs-micro); font-weight: 800; line-height: 14px; text-align: center;
}
.pd-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pd-avatar { width: 64px !important; height: 64px !important; }
.pd-center-gs { font-size: var(--fs-micro); font-weight: 800; color: var(--text-gold); font-family: var(--font-mono, monospace); }
.insp-section-sub { margin-top: 4px; }
.pd-details { display: flex; flex-direction: column; gap: 5px; padding: 0 12px 6px; }
.pd-detail {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-left-width: 3px;
  border-radius: var(--r-sm); padding: 6px 9px;
}
.pd-d-slot { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 700; flex-shrink: 0; width: 52px; padding-top: 2px; }
.pd-d-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pd-d-name { font-size: var(--fs-xs); font-weight: 800; }
.pd-d-rar { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }
.pd-d-refine { color: var(--text-gold); font-family: var(--font-mono, monospace); }
.pd-d-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-d-stat { font-size: var(--fs-micro); color: var(--text-secondary); }
.pd-d-stat b { color: var(--text-primary); }
.pd-d-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-d-chip { font-size: var(--fs-micro); border-radius: var(--r-xs); padding: 1px 6px; background: var(--bg-deep); border: 1px solid var(--border-soft); }
.pd-d-elem { color: var(--text-info); }
.pd-d-eff { color: var(--text-gold); }
.pd-detail-empty { font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; padding: 12px; }

/* v7.2: red "upgrade available" marker on a slot + its menu/roster-card echoes */
.insp-slot-has-upgrade .insp-equip-slot { border-color: var(--state-danger); box-shadow: 0 0 6px rgba(231,76,60,0.35); }
.insp-slot-upgrade-dot {
  flex-shrink: 0; width: 15px; height: 15px; border-radius: var(--r-full); background: var(--state-danger);
  color: var(--text-on-well); font-size: var(--fs-micro); font-weight: 800; line-height: 15px; text-align: center;
}
.insp-equip-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.insp-equip-quick-actions { display: flex; gap: 6px; }
.btn-tiny { padding: 3px 8px; font-size: var(--fs-micro); }
.roster-slot-alert-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--state-danger); box-shadow: 0 0 5px rgba(231,76,60,0.6); flex-shrink: 0; margin-left: 2px;
}

/* ============================================================== S11: Account */
.tk-acct-chip {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text-secondary);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-full); padding: 3px 11px; cursor: pointer; transition: border-color .12s, background .12s;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-acct-chip:hover { border-color: var(--accent-gold); background: var(--bg-hover); }

.acc-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.acc-card {
  width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.acc-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.acc-tabs { display: flex; gap: 6px; }
.acc-tab {
  flex: 1; padding: 9px 0; border: 1px solid var(--border-soft); background: transparent;
  color: var(--text-muted); border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: var(--fs-sm);
}
.acc-tab.active { background: var(--bg-panel-raised); color: var(--text-primary); border-color: var(--accent-gold); }
/* Guest upgrade block. Bordered off from the rest of the card because it is the
   one action on this screen that a guest genuinely needs to notice. */
.acc-link-email {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-sm);
  background: var(--surface-well);
}
.acc-link-note {
  margin: 4px 0 12px;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.acc-link-status {
  margin-top: 8px;
  min-height: 18px;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.acc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.acc-field label { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.acc-field input {
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--r-xs);
  color: var(--text-primary); padding: 9px 12px; font-size: var(--fs-sm);
}
.acc-field input:focus { outline: none; border-color: var(--accent-gold); }
.acc-btn {
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-primary); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background .12s;
}
.acc-btn:hover { background: var(--bg-hover); }
.acc-btn-primary { background: var(--accent-gold); color: var(--text-on-gold); border: none; }
.acc-btn-ghost { background: transparent; color: var(--text-muted); }
/* #11 (2026-07-14): Reset Game (danger) section on the Account screen */
.acc-danger { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.acc-danger-note { font-size: var(--fs-2xs); color: var(--text-muted); margin: 4px 0 10px; line-height: 1.4; }
.acc-btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); width: 100%; }
.acc-btn-danger:hover { background: var(--danger); color: var(--text-on-well); }
.acc-err { color: var(--danger); font-size: var(--fs-xs); min-height: 1.1em; }
.acc-guest-row { text-align: center; }
.acc-id-block { background: var(--bg-panel-raised); border-radius: var(--r-sm); padding: 14px; }
.acc-name { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.acc-guest-tag { font-size: var(--fs-micro); background: rgba(46,124,196,0.18); color: var(--text-info); padding: 1px 7px; border-radius: var(--r-full); }
.acc-id { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 6px; }
.acc-id-mono { font-family: var(--font-mono); color: var(--text-gold); }
.acc-copy-btn { font-size: var(--fs-micro); padding: 2px 8px; border: 1px solid var(--border-soft); background: transparent; color: var(--text-muted); border-radius: var(--r-xs); cursor: pointer; margin-left: 4px; }
.acc-email { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.acc-role-admin { font-size: var(--fs-xs); color: var(--text-gold); margin-top: 6px; font-weight: 700; }
.acc-section-label { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.acc-cloud-btns { display: flex; gap: 8px; }
.acc-cloud-btns .acc-btn { flex: 1; }
.acc-cloud-status { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 8px; min-height: 1.1em; }

/* S11: Market wallet bar */
.mkt-wallet-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 8px;
}
.mkt-wallet-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.mkt-wallet-gold { font-size: var(--fs-md); font-weight: 700; color: var(--text-gold); font-family: var(--font-mono); }
.mkt-wallet-local { font-size: var(--fs-2xs); color: var(--text-muted); margin-left: auto; }
.mkt-wallet-btn {
  padding: 5px 11px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  background: transparent; color: var(--text-gold); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer;
}
.mkt-wallet-btn:hover { background: var(--bg-hover); }

/* S11: OAuth section on account screen */
.acc-oauth-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--text-faint); font-size: var(--fs-2xs); }
.acc-oauth-divider::before, .acc-oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.acc-oauth-row { display: flex; flex-direction: column; gap: 8px; }
.acc-oauth-btn { text-align: center; }

/* ============================================================== T1: Endless Tower */
.tower-screen, .tower-shop { display: flex; flex-direction: column; gap: 12px; }
.tower-header { display: flex; align-items: center; gap: 10px; background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 14px; }
.tower-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); flex: 1; margin: 0; }
.tower-marks { font-size: var(--fs-sm); font-weight: 700; color: var(--text-gold); font-family: var(--font-mono); }
.tower-shop-open { padding: 5px 12px; border-radius: var(--r-sm); border: 1px solid var(--accent-gold); background: rgba(184,134,11,0.1); color: var(--text-gold); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.tower-tagline { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 2px; }
.tower-spires { display: flex; flex-direction: column; gap: 10px; }
.tower-spire { display: flex; align-items: center; gap: 12px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px; }
.tower-spire-locked { opacity: 0.5; }
.tower-spire-icon { font-size: var(--fs-2xl); }
.tower-spire-info { flex: 1; }
.tower-spire-name { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.tower-spire-sub { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.tower-spire-actions { display: flex; flex-direction: column; gap: 6px; }
.tower-start-btn, .tower-resume-btn { padding: 7px 14px; border-radius: var(--r-sm); border: none; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.tower-start-btn { background: linear-gradient(135deg, var(--accent-arcane), var(--accent-gold)); color: var(--text-on-well); }
.tower-resume-btn { background: var(--accent-gold); color: var(--text-on-gold); }
.tower-revives { font-size: var(--fs-xs); color: var(--hp-low); }

/* v7.4 (issue 10): background-run banner + finished-run report on the Tower menu */
.tower-running {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent-info) 12%, var(--bg-panel));
  border: 1px solid var(--accent-info); border-radius: var(--r-md);
  padding: 10px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary);
}
.tower-running-dot { animation: buffChipWarn 1.4s ease-in-out infinite; }
.tower-running .tower-resume-btn { margin-left: auto; }
.tower-report {
  background: var(--bg-panel-raised); border: 1px solid var(--accent-gold);
  border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.tower-report-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tower-report-title { font-weight: 800; color: var(--text-gold); font-size: var(--fs-sm); }
.tower-report-close {
  padding: 5px 12px; border-radius: var(--r-full); border: 1px solid var(--border-soft);
  background: transparent; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.tower-report-close:hover { color: var(--text-primary); border-color: var(--text-muted); }
.tower-report-floor { font-size: var(--fs-sm); color: var(--text-primary); }
.tower-report-floor strong { color: var(--text-gold); }
.tower-report-tag { font-size: var(--fs-micro); padding: 2px 8px; border-radius: var(--r-full); background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--text-success); font-weight: 700; }
.tower-report-tag.tower-report-wipe { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }

/* v9 Batch D (#9): the pressable climb-reward chest */
.tower-bonus-block {
  border: 1px solid var(--accent-gold); border-radius: var(--r-sm);
  background: rgba(230,192,106,0.08); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.tower-bonus-label { font-size: var(--fs-xs); font-weight: 800; color: var(--text-gold); }
.tower-bonus-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tower-reward-art, .tower-currency-art { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.tower-currency-art .ui-ic { width: 20px; height: 20px; }
.tower-bonus-claim {
  align-self: flex-start; position: relative; overflow: hidden;
  border: none; border-radius: var(--r-sm); padding: 11px 22px;
  font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.3px; cursor: pointer; color: var(--text-on-gold-deep);
  background: linear-gradient(180deg, var(--fx-gold-fill-pale) 0%, var(--fx-gold-fill) 45%, var(--fx-gold-shade) 100%);
  box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(217,154,47,0.5);
  animation: refineBtnPulse 2s ease-in-out infinite;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.tower-bonus-claim::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-18deg); animation: refineBtnSheen 2.6s ease-in-out infinite;
}
.tower-bonus-claim:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tower-bonus-claim:active { transform: translateY(2px); }
.tower-bonus-claimed { font-size: var(--fs-xs); color: var(--text-success); font-weight: 700; }
.tower-report-loot { display: flex; flex-wrap: wrap; gap: 6px; }
.tower-report-empty { font-size: var(--fs-2xs); color: var(--text-muted); }

/* Climb HUD */
.tower-climb { display: flex; flex-direction: column; gap: 10px; }
.twc-field {
  position: relative;
}
/* The mounted sim field is shorter inside the Tower than a full battle. */
.twc-field .dungeon-field { height: 200px; min-height: 200px; max-height: 220px; margin-bottom: 0; }
.twc-top { display: flex; align-items: center; gap: 10px; background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 14px; }
.twc-floor { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); flex: 1; letter-spacing: 0.05em; }
.twc-floor-num { font-size: var(--fs-xl); color: var(--text-gold); font-family: var(--font-mono); }
.twc-type-badge { font-size: var(--fs-micro); font-weight: 800; padding: 2px 8px; border-radius: var(--r-full); margin-left: 6px; }
.twc-type-miniboss { background: rgba(231,76,60,0.18); color: var(--text-ember); }
.twc-type-floorboss { background: rgba(155,89,182,0.18); color: var(--accent-arcane); }
.twc-type-tierboss { background: rgba(184,134,11,0.2); color: var(--text-gold); }
.twc-run-marks { font-size: var(--fs-sm); font-weight: 700; color: var(--text-gold); font-family: var(--font-mono); }
.twc-cashout-btn { padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: transparent; color: var(--text-secondary); font-size: var(--fs-2xs); cursor: pointer; }
.twc-modifier { display: flex; align-items: center; gap: 10px; background: var(--bg-panel); border: 1px solid var(--accent-gold); border-radius: var(--r-sm); padding: 9px 12px; }
.twc-mod-none { border-color: var(--border-soft); color: var(--text-muted); font-size: var(--fs-xs); }
.twc-mod-icon { font-size: var(--fs-xl); }
.twc-mod-name { font-size: var(--fs-xs); font-weight: 700; color: var(--text-gold); }
.twc-mod-desc { font-size: var(--fs-micro); color: var(--text-secondary); }
.twc-side { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 8px 12px; }
.twc-side-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.twc-vs { text-align: center; font-size: var(--fs-micro); font-weight: 800; color: var(--text-faint); }
.twc-unit { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.twc-unit.twc-dead { opacity: 0.35; }
.twc-face { flex-shrink: 0; width: 20px; text-align: center; }
.twc-face-sprite {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  image-rendering: pixelated;
  background-color: rgba(0,0,0,0.18);
}
.twc-face.twc-face-sprite { width: 32px; height: 32px; }
.twc-bar { flex: 1; height: 7px; background: var(--bg-deep); border-radius: var(--r-xs); overflow: hidden; }
.twc-fill { height: 100%; border-radius: var(--r-xs); transition: width 0.25s; }
.twc-fill-enemy { background: var(--accent-ember); }
.twc-hp { font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-secondary); min-width: 44px; text-align: right; }

/* Cash-out */
.tower-cashout { display: flex; justify-content: center; padding: 14px 0; }
.twco-card { width: 100%; max-width: 380px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 22px; }
.twco-title { font-size: var(--fs-lg); font-weight: 800; text-align: center; margin-bottom: 16px; }
.twco-win { color: var(--text-gold); }
.twco-lose { color: var(--hp-low); }
.twco-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--text-secondary); }
.twco-marks { color: var(--text-gold); font-family: var(--font-mono); }
.twco-tip { margin: 12px 0; padding: 10px; background: var(--bg-panel-raised); border-radius: var(--r-sm); font-size: var(--fs-2xs); color: var(--text-secondary); }
.twco-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.twco-btn { padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-panel-raised); color: var(--text-primary); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.twco-btn-primary { background: var(--accent-gold); color: var(--text-on-gold); border: none; }

/* Tower shop */
.tsh-list { display: flex; flex-direction: column; gap: 8px; }
.tsh-row { display: flex; align-items: center; gap: 10px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 14px; }
.tsh-icon { flex-shrink: 0; width: 34px; height: 34px; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.tsh-label { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); }
.tsh-cost { font-size: var(--fs-xs); font-weight: 700; color: var(--text-gold); font-family: var(--font-mono); }
.tsh-buy { padding: 6px 14px; border-radius: var(--r-sm); border: none; background: var(--accent-gold); color: var(--text-on-gold); font-weight: 700; font-size: var(--fs-xs); cursor: pointer; }
.tsh-buy[disabled] { opacity: 0.4; cursor: not-allowed; background: var(--bg-panel-raised); color: var(--text-muted); }

/* §6: Set Sigil picker in designer */
.set-sigil-note { font-size: var(--fs-micro); color: var(--text-faint); font-weight: 400; }
.set-sigil-empty { font-size: var(--fs-2xs); color: var(--text-muted); padding: 4px 0; }
.set-sigil-btn.element-btn-active { border-color: var(--accent-arcane); color: var(--accent-arcane); }

/* ============================================================== T2: Diamonds + Silver Spire */
.tower-diamonds { font-size: var(--fs-sm); font-weight: 700; color: var(--text-currency); font-family: var(--font-mono); }
.tower-spire-mult { font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); background: var(--bg-panel-raised); border-radius: var(--r-full); padding: 1px 7px; vertical-align: middle; margin-left: 4px; }
.twc-run-dia { color: var(--text-currency); margin-left: 6px; }
.twco-dia { color: var(--text-currency); font-family: var(--font-mono); }
.tsh-section-label { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.04em; color: var(--text-gold); text-transform: uppercase; margin: 8px 2px 0; }
.tsh-section-dia { color: var(--text-currency); }
.tsh-section-dia ~ .tsh-list .tsh-cost { color: var(--text-currency); }
.tsh-section-dia ~ .tsh-list .tsh-buy { background: var(--surface-currency-action); color: var(--text-on-info); }

/* T2: Diamond "choose a Set Sigil" modal */
.modal-card { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 20px; width: 90%; max-width: 460px; max-height: 86vh; max-height: 86dvh; overflow-y: auto; box-shadow: var(--e4); }
.scm-title { font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.scm-cost { font-size: var(--fs-sm); color: var(--text-currency); font-family: var(--font-mono); }
.scm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scm-set { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-panel-raised); cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.scm-set:hover { border-color: var(--line-currency-action); transform: translateY(-1px); }
.scm-set-icon { font-size: var(--fs-xl); }
.scm-sigil-art { display: inline-block; width: 32px; height: 32px; }
.scm-set-name { font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); }
.scm-set-desc { font-size: var(--fs-micro); color: var(--text-muted); }
.scm-cancel { margin-top: 14px; width: 100%; padding: 9px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: transparent; color: var(--text-secondary); font-weight: 700; font-size: var(--fs-xs); cursor: pointer; }

/* ============================================================== PXD dopamine pack */
/* Boss intro banner — center flash, auto-removed by JS */
.boss-intro-fx { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 300; pointer-events: none; }
.boss-intro-inner { text-align: center; animation: bossIntro 1.7s cubic-bezier(0.2,0.9,0.2,1) forwards; }
.boss-intro-icon { font-size: var(--fs-4xl); line-height: 1; }
.boss-intro-label { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: 0.12em; color: var(--text-ember); text-shadow: 0 2px 18px rgba(231,76,60,0.5); }
.boss-intro-sub { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.05em; color: var(--text-secondary); margin-top: 4px; }
@keyframes bossIntro {
  0%   { opacity: 0; transform: scale(0.6); }
  14%  { opacity: 1; transform: scale(1.08); }
  24%  { transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .boss-intro-inner { animation: bossIntroStill 1.7s steps(1) forwards; }
  @keyframes bossIntroStill { 0%,80% { opacity: 1; } 100% { opacity: 0; } }
}
/* Stage-clear card: bouncier entrance than the base scpPop */
.scp-card-pop { animation: scpPopBounce 0.5s cubic-bezier(0.18,0.9,0.3,1.2); }
@keyframes scpPopBounce {
  0%   { transform: scale(0.82); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===================================================================== §7 Card System */
.card-inv-empty { padding: 24px; text-align: center; color: var(--text-muted); line-height: 1.6; }
.card-inv-list { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.card-item {
  background: var(--panel-bg);
  border: 1.5px solid var(--card-col, var(--line-dynamic-fallback));
  border-radius: var(--r-sm);
  padding: 10px 12px;
  box-shadow: var(--e1);
}
.card-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-rarity-badge {
  font-size: var(--fs-micro); font-weight: 700; color: var(--text-on-well); padding: 2px 6px;
  border-radius: var(--r-xs); white-space: nowrap; flex-shrink: 0;
}
.card-name { font-weight: 600; font-size: var(--fs-xs); }
.card-stars { color: var(--fx-star-accent); margin-left: 4px; }
.card-effects { font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 4px; }
.card-status { font-size: var(--fs-micro); margin-bottom: 6px; }
.card-free { color: var(--text-muted); font-style: italic; }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card-btn-equip, .card-btn-unequip, .card-btn-fuse { font-size: var(--fs-micro); padding: 3px 10px; }
.card-btn-fuse { background: var(--state-warning); color: var(--text-on-well); border: none; border-radius: var(--r-xs); cursor: pointer; }
.ceq-body { max-height: 300px; overflow-y: auto; padding: 8px 0; }
.ceq-hero { margin-bottom: 12px; }
.ceq-hero strong { display: block; margin-bottom: 4px; font-size: var(--fs-xs); }
.ceq-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.card-slot-pick { font-size: var(--fs-micro); padding: 3px 8px; }

/* ===================================================================== §9 Talent Tree */
.talent-locked-msg { padding: 10px 12px; color: var(--text-muted); font-size: var(--fs-2xs); font-style: italic; }
.talent-section { padding: 4px 0 12px; }
.talent-tp-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: var(--fs-2xs);
  background: var(--bg-deep); border-radius: var(--r-xs); margin-bottom: 10px;
}
.talent-tp-label { font-weight: 600; }
.talent-tp-val { font-weight: 700; color: var(--state-info); }
.talent-branches { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.talent-branch { display: flex; flex-direction: column; align-items: stretch; }
/* Careers Wave 2: a career whose talent tree has not shipped yet. */
.talent-branch-soon {
  border: 1px dashed var(--line, rgba(255,255,255,.18)); border-radius: var(--r-md);
  padding: 18px 16px; text-align: center; opacity: .8;
}
.talent-branch-soon .tbranch-head { font-size: var(--fs-sm); margin-bottom: 6px; }
.talent-branch-soon .tbranch-desc { max-width: 46ch; margin: 0 auto; line-height: 1.55; }
.tbranch-head { font-weight: 700; font-size: var(--fs-micro); padding: 4px 6px; text-align: center; border-bottom: 2px solid var(--br-col, var(--line-dynamic-fallback)); margin-bottom: 4px; }
.tbranch-desc { font-size: var(--fs-micro); color: var(--text-muted); text-align: center; margin-bottom: 6px; }
/* v7.4: talent nodes as icon cards (spell art disc + text), grid not text-strip */
.tbranch-nodes { display: flex; flex-direction: column; gap: 5px; }
.tnode {
  background: var(--bg-deep);
  border: 1px solid var(--border-soft, var(--border-color));
  border-radius: var(--r-sm);
  padding: 5px 7px;
  font-size: var(--fs-micro);
  display: flex; align-items: center; gap: 8px;
  transition: border-color .15s, background .15s;
  opacity: 0.55;
  width: 100%; color: inherit; font-family: inherit; text-align: left;
  appearance: none;
}
.tnode-icon {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--br-col, var(--line-dynamic-fallback)) 15%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--br-col, var(--line-dynamic-fallback)) 45%, transparent);
}
/* nodeIconHtml() emits class "pst-node-asset-img" everywhere (shared with the
   player skill tree), not "tnode-icon-img" - that class is never actually output,
   so this rule matched nothing and every talent icon fell back to .asset-icon's
   default 1em (11px, inheriting .tnode's font-size) instead of filling the 44px
   .tnode-icon box. */
.tnode-icon .pst-node-asset-img.asset-icon { width: 34px; height: 34px; }
.tnode-check {
  position: absolute; right: -4px; bottom: -4px; font-size: var(--fs-micro); font-weight: 900; color: var(--text-on-well);
  background: var(--state-success); border-radius: var(--r-full); width: 14px; height: 14px; line-height: 14px; text-align: center;
}
.tnode-body { min-width: 0; flex: 1; }
.tnode-avail {
  opacity: 1; border-color: var(--br-col, var(--state-info)); cursor: pointer;
  background: color-mix(in srgb, var(--br-col, var(--state-info)) 8%, transparent);
}
.tnode-avail:hover { background: color-mix(in srgb, var(--br-col, var(--state-info)) 18%, transparent); }
.tnode-alloc { opacity: 1; border-color: var(--br-col, var(--state-info)); background: color-mix(in srgb, var(--br-col, var(--state-info)) 16%, transparent); }
.tnode-partial { opacity: 1; }
.tnode-locked { opacity: .4; }
.tnode:focus-visible,
.pst-node:focus-visible,
.codex-section-head:focus-visible {
  outline: 3px solid var(--accent-arcane);
  outline-offset: 2px;
}
.codex-section-head:focus-visible { outline-offset: -3px; }
.tnode-name { font-weight: 700; font-size: var(--fs-2xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnode-desc { color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.3; }
.tnode-cost { font-size: var(--fs-micro); font-weight: 700; color: var(--br-col, var(--line-dynamic-fallback)); margin-top: 2px; }
.tnode-alloc .tnode-cost { color: var(--state-success); }
/* v9: talent branch-investment gate label */
.tnode-gate { font-size: 0.56rem; color: var(--state-blocked); font-weight: 700; margin-top: 2px; line-height: 1.2; }
.talent-reset-row { display: flex; gap: 6px; margin-top: 10px; padding: 0 4px; flex-wrap: wrap; }
.talent-reset-free  { border-color: var(--state-success); color: var(--state-success); }
.talent-reset-paid  { border-color: var(--state-warning); color: var(--state-warning); }

/* ============================================================== World Map (idle farm) */
.worldmap-screen { display: flex; flex-direction: column; gap: 12px; }
.wm-header h1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wm-subtitle { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; }

/* Map selector */
.wm-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.wm-card {
  display: flex; align-items: center; gap: 10px;
  text-align: left; cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--wm-col, var(--line-dynamic-fallback));
  border-radius: var(--r-sm); padding: 9px 11px;
  transition: transform 0.1s, box-shadow 0.12s, border-color 0.12s;
}
.wm-card:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.wm-card-active {
  border-color: var(--wm-col, var(--line-dynamic-fallback));
  box-shadow: 0 0 0 2px var(--wm-col, var(--line-dynamic-fallback)) inset, 0 2px 8px rgba(0,0,0,0.08);
  background: var(--bg-panel-raised);
}
.wm-card-icon { font-size: var(--fs-2xl); line-height: 1; flex: 0 0 auto; }
.wm-card-art { display: block; width: 48px; height: 32px; border-radius: var(--r-xs); }
.wm-card-body { min-width: 0; flex: 1; }
.wm-card-name { font-weight: 700; color: var(--text-primary); font-size: var(--fs-xs); display: flex; align-items: center; gap: 6px; }
.wm-card-label { min-width: 0; }
.wm-live-dot { font-size: var(--fs-micro); font-weight: 800; color: var(--state-success); letter-spacing: 0.05em; }
.wm-card-meta { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.wm-card-lv { font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); }
.wm-card-els { font-size: var(--fs-xs); }
.wm-card-warn { color: var(--text-gold); font-weight: 700; }

/* Active map live panel */
.wm-active-wrap {
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.wm-active-head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-soft); padding-bottom: 9px; }
.wm-active-icon { font-size: var(--fs-2xl); line-height: 1; }
.wm-active-art { display: block; width: 64px; height: 40px; border-radius: var(--r-sm); }
.wm-active-titles { min-width: 0; }
.wm-active-name { font-weight: 800; color: var(--wm-col, var(--text-primary)); font-size: var(--fs-md); }
.wm-active-desc { font-size: var(--fs-2xs); color: var(--text-muted); }
.wm-active-elements { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.wm-active-element { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-micro); color: var(--text-secondary); }
.wm-active-element .data-art-icon { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .wm-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wm-card {
    min-width: 0; min-height: 96px; padding: 6px 3px;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
    text-align: center; border-left-width: 2px;
  }
  .wm-card-icon { height: 32px; }
  .wm-card-body { width: 100%; min-width: 0; }
  .wm-card-name { display: block; font-size: var(--fs-micro); line-height: 1.25; }
  .wm-card-label {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; max-height: 2.5em; overflow: hidden; overflow-wrap: anywhere;
  }
  .wm-live-dot { display: block; font-size: var(--fs-micro); line-height: 1.2; margin-top: 2px; letter-spacing: 0; }
  .wm-card-meta { justify-content: center; flex-wrap: wrap; gap: 1px 4px; margin-top: 2px; font-size: var(--fs-micro); line-height: 1.2; }
  .wm-card-els { display: none; }
  .wm-card-warn { width: 100%; }
  .wm-card-high:not(.wm-card-active) { background: color-mix(in srgb, var(--bg-panel) 88%, var(--bg-deep)); }
}

/* Simulator field — positioned monster + hero tokens on a map plane */
.wm-field {
  position: relative;
  height: 240px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--wm-col, var(--line-dynamic-fallback)) 14%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.015) 0 10px, transparent 10px 20px),
    var(--bg-deep);
  overflow: hidden;
}
/* The live combat sim field fills the World Map panel. */
.wm-field .dungeon-field {
  height: 100%; min-height: 0; max-height: none;
  margin-bottom: 0; border: none; border-radius: var(--r-sm);
}
.wm-mon {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 40px; transition: left 0.6s ease, top 0.6s ease;
}
.wm-mon-face { position: relative; font-size: var(--fs-lg); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.wm-mon-el { position: absolute; right: -7px; bottom: -3px; font-size: 0.55rem; }
.wm-mon-bar { width: 30px; height: 3px; background: rgba(0,0,0,0.18); border-radius: var(--r-xs); overflow: hidden; }
.wm-mon-fill { height: 100%; background: linear-gradient(90deg, var(--danger), var(--meter-warning-end)); transition: width 0.3s linear; }
.wm-hero {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  transition: left 0.6s ease, top 0.6s ease; z-index: 2;
}
.wm-hero-face {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel); border: 2px solid var(--cls, var(--accent-gold));
  border-radius: var(--r-full); box-shadow: var(--e1); color: var(--cls);
}
.wm-hero-dead { opacity: 0.55; filter: grayscale(1); }
.wm-hero-revive { font-size: 0.55rem; font-weight: 700; color: var(--danger); margin-top: 1px; white-space: nowrap; }

/* HUD: estimate / kills / drops */
.wm-estimate { border-top: 1px solid var(--border-soft); padding-top: 8px; }
.wm-est-wait { font-size: var(--fs-2xs); color: var(--text-muted); font-style: italic; }
.wm-est-title, .wm-kills-title, .wm-drops-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin-bottom: 5px; }
.wm-est-grid, .wm-kills-grid, .wm-drops-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.wm-est-chip { font-size: var(--fs-2xs); font-weight: 700; background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-full); padding: 3px 9px; font-family: var(--font-mono); }
.wm-kills, .wm-drops { border-top: 1px solid var(--border-soft); padding-top: 8px; }
/* v7.4 (issue 12): sub-label within the "Earned this map" panel */
.wm-kills-sub { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; margin: 8px 0 4px; }
.wm-kill-chip, .wm-drop-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-micro); background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--r-xs); padding: 2px 7px; }
.wm-monster-art { display: inline-block; width: 32px; height: 32px; flex-shrink: 0; }
.wm-material-art, .wm-currency-art { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.wm-currency-art .ui-ic { width: 20px; height: 20px; }
.wm-drop-guar { border-color: var(--success); }
.wm-active-lv { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); font-family: var(--font-mono); }
.tk-wm-lv { font-size: var(--fs-micro); opacity: 0.8; }
.tk-wm-kpm { font-weight: 700; }

/* Offline farm report */
.ofr-card { max-width: 420px; }
.ofr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.ofr-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 9px 4px; }
.ofr-ico { font-size: var(--fs-lg); }
.ofr-v { font-weight: 800; font-family: var(--font-mono); font-size: var(--fs-sm); }
.ofr-l { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; }
.ofr-warn { color: var(--text-secondary); padding: 14px 6px; text-align: center; }

/* Raid diamond-cost label */
.raid-cost { font-size: var(--fs-micro); opacity: 0.9; }
.raid-cost.raid-free { color: var(--text-success); font-weight: 700; opacity: 1; }

/* ── Stage Counter (auto-advance) ── */
.raid-selector-disabled { opacity: 0.4; pointer-events: none; }
.sc-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%;
  margin-top: 8px; padding: 8px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  background: var(--bg-panel-raised); color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.sc-toggle:hover { border-color: var(--accent-gold); }
.sc-toggle.active {
  border-color: var(--accent-gold); color: var(--text-gold);
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-panel-raised));
}
.sc-toggle-icon { font-size: var(--fs-md); }
.sc-toggle-state {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-2xs);
  padding: 1px 8px; border-radius: var(--r-full);
  background: rgba(0,0,0,0.25);
}
.sc-toggle.active .sc-toggle-state { background: var(--accent-gold); color: var(--text-on-success); }
.sc-hint { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 5px; line-height: 1.45; }

/* Battle screen HUD */
.sc-hud {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 7px; padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-panel));
}
.sc-hud-icon { font-size: var(--fs-md); }
.sc-hud-item { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-gold); }
.sc-hud-stat {
  font-size: var(--fs-2xs); font-family: var(--font-mono); color: var(--text-secondary);
  padding: 1px 8px; border-radius: var(--r-full); background: rgba(0,0,0,0.2);
}
.sc-hud-stat.sc-hud-retry { color: var(--danger); }

.btn-leave-dungeon { margin-left: 10px; }

/* Blueprint slot-picker frame alert + detail chips */
.slotpick-ready { border-color: var(--success) !important; box-shadow: 0 0 0 1px var(--success) inset; }
.slotpick-noframe { opacity: 0.7; }
.slotpick-frametag { display: block; font-size: var(--fs-micro); margin-top: 2px; color: var(--text-muted); }
.slotpick-ready .slotpick-frametag { color: var(--text-success); font-weight: 700; }
.bp-detail-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.bp-stat-chip { font-size: var(--fs-micro); font-weight: 700; border-radius: var(--r-xs); padding: 2px 6px; background: var(--bg-panel-raised); border: 1px solid var(--border-soft); }
.bp-stat-atk { color: var(--state-offense); } .bp-stat-def { color: var(--state-defense); } .bp-stat-hp { color: var(--state-success); }
.bp-stat-elem { color: var(--el-void); } .bp-stat-eff { color: var(--text-gold); } .bp-stat-set { color: var(--state-set-bonus); }

/* Stats row */
.wm-stats { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border-soft); padding-top: 9px; }
.wm-stat { display: flex; flex-direction: column; gap: 1px; min-width: 90px; }
.wm-stat-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.wm-stat-val { font-weight: 700; font-size: var(--fs-sm); color: var(--text-primary); font-family: var(--font-mono); }
.wm-noteam { color: var(--text-muted); font-style: italic; min-width: 100%; }
.wmeff-fast  { color: var(--state-offense); }
.wmeff-good  { color: var(--state-success); }
.wmeff-slow  { color: var(--state-slow); }
.wmeff-crawl { color: var(--state-warning-deep); }
.wmeff-wall  { color: var(--state-wall); }

/* Topbar farm chip */
.tk-wm-chip {
  font-size: var(--fs-micro); font-weight: 700; cursor: pointer;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-full); padding: 2px 9px; color: var(--text-secondary);
  font-family: var(--font-mono);
}
.tk-wm-chip:hover { border-color: var(--accent-gold); color: var(--text-gold); }
.tk-wm-chip { display: inline-flex; align-items: center; gap: 4px; }
.tk-wm-art { display: inline-block; width: 24px; height: 16px; flex-shrink: 0; border-radius: var(--r-xs); }

/* ============================================================= Inventory Slot Grid */
/* Shared by Weapons / Gear / Frames / Cards tabs */
.inv-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.inv-item-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px 6px; border-radius: var(--r-sm); min-height: 96px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-soft);
  position: relative; cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s;
  text-align: center;
}
.inv-item-slot:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 1px var(--accent-gold);
}
.inv-item-icon {
  font-size: var(--fs-2xl); line-height: 1;
  margin-bottom: 5px; flex-shrink: 0;
}
.inv-card-art .asset-icon { width: 40px; height: 40px; }
/* Pixel-art atlas icon (weapons/gear) — crisp, slightly larger than emoji */
.inv-item-icon-img {
  width: 40px; height: 40px;
  margin: 2px auto 6px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.inv-item-name {
  font-size: var(--fs-micro); font-weight: 600; color: var(--text-primary);
  line-height: 1.25; word-break: break-word;
  margin-bottom: 2px;
  /* Reserve exactly two lines. A one-line name ("Tactical Headset Mk.II") and a
     two-line one ("Tactical Smartphone Prototype") otherwise produce 124px and
     136px tiles in the same grid, which is the ragged look the shared tile
     helper exists to prevent. Clamp rather than truncate: the full name is
     already in the tile's title= tooltip. */
  min-height: calc(2 * 1.25 * var(--fs-micro));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-item-gs {
  font-size: var(--fs-micro); color: var(--text-gold);
  font-family: var(--font-mono); margin-top: auto;
}
/* Legacy chip token retained for the design-token contract; equipment tiles no
   longer render this in-flow row, so Weapons/Gear/Crafted keep one height. */
.inv-item-wtype {
  font-size: 0.56rem; color: var(--text-item-secondary); opacity: 0.85;
  line-height: 1.1; margin-top: 2px;
}
/* v7: designer/blueprint core-requirement shortfall cue */
.base-gear-note.core-short, .bp-core-req.core-short { color: var(--state-danger); }
.wtype-class { opacity: 0.7; font-size: var(--fs-2xs); }

/* v7: tier picker in the blueprint designer */
.tier-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 44px; padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-control); border: 1px solid var(--line-well); color: var(--text-item-secondary);
  font-weight: 700; font-size: var(--fs-2xs); transition: background 0.12s, border-color 0.12s;
}
.tier-pick-btn:hover { background: var(--surface-well-hover); border-color: var(--line-well-active); }
.tier-pick-btn.tier-pick-active { background: rgba(230,192,106,0.16); border-color: var(--gold-bright); color: var(--gold-bright); }
.tier-pick-gs { font-size: var(--fs-micro); font-weight: 500; opacity: 0.7; font-family: var(--font-mono); }
/* v7.1: rarity picker + tier min-level note in the designer */
.rarity-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.rarity-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 62px; padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-control); border: 1px solid var(--line-well); font-weight: 700; font-size: var(--fs-2xs);
  transition: background 0.12s, border-color 0.12s;
}
.rarity-pick-btn:hover { background: var(--surface-well-hover); border-color: var(--line-well-active); }
.rarity-pick-btn.rarity-pick-active { border-color: currentColor; background: rgba(255,255,255,0.06); box-shadow: 0 0 8px rgba(255,255,255,0.12); }
.rarity-pick-mult { font-size: var(--fs-micro); font-weight: 500; opacity: 0.75; color: var(--text-equipment-muted); font-family: var(--font-mono); }

/* v7.1: in-place equip picker (Heroes page) */
.eqp-card { max-width: 460px; }
.eqp-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; max-height: 46dvh; overflow-y: auto; margin: 8px 0; }
.eqp-row {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 2px 10px;
  text-align: left; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-well); border: 1px solid var(--line-well); border-left-width: 3px;
  transition: background 0.12s, border-color 0.12s;
}
.eqp-art, .eqp-art-fallback { grid-row: 1 / span 3; width: 32px; height: 32px; align-self: center; }
.eqp-art-fallback { display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.eqp-card-art .asset-icon { width: 32px; height: 32px; }
.eqp-row:hover { background: var(--surface-control); border-color: var(--line-well-active); }
.eqp-name { font-weight: 700; font-size: var(--fs-xs); color: var(--text-equipment-primary); }
.eqp-meta { font-size: var(--fs-micro); color: var(--text-equipment-muted); font-family: var(--font-mono); text-align: right; }
.eqp-worn { grid-column: 2 / -1; font-size: var(--fs-micro); color: var(--gold-bright); opacity: 0.9; }
.eqp-empty { padding: 18px 8px; text-align: center; color: var(--text-equipment-muted); font-size: var(--fs-xs); }
.eqp-unequip { margin-bottom: 6px; }

/* v8: per-row stats/effects line + GS delta vs the equipped piece */
.eqp-stats { grid-column: 2 / -1; font-size: var(--fs-micro); color: var(--text-equipment-secondary); }
.eqp-delta { font-weight: 900; margin-right: 6px; }
.eqp-delta-up   { color: var(--state-success-bright); }
.eqp-delta-down { color: var(--state-regression); }
.eqp-delta-flat { color: var(--text-equipment-muted); }

/* v8: "currently equipped" summary pinned above the picker list */
.eqp-cur {
  display: grid; grid-template-columns: 32px auto 1fr; gap: 2px 10px; align-items: center;
  padding: 7px 10px; margin-bottom: 6px; border-radius: var(--r-sm);
  background: var(--surface-well); border: 1px solid var(--line-well); border-left-width: 3px;
}
.eqp-cur-tag { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: var(--text-equipment-muted); }
.eqp-cur-name { font-weight: 800; font-size: var(--fs-xs); color: var(--text-equipment-primary); }
.eqp-cur-gs { font-size: var(--fs-micro); font-weight: 700; color: var(--text-equipment-muted); font-family: var(--font-mono); }
.eqp-cur-stats { grid-column: 2 / -1; font-size: var(--fs-micro); color: var(--text-equipment-secondary); }
.eqp-cur-empty { display: block; text-align: center; font-size: var(--fs-2xs); color: var(--text-equipment-muted); }

/* v7: prominent rarity tiles — full colored border + glow (was faint left border) */
/* v9 Batch B (#4): rarity tiles punched up — thicker borders, a colored top
   edge, and real glow on Epic/Legendary so tiers read at a glance. */
.rarity-tile-common    { border: 2px solid var(--rarity-common) !important; }
.rarity-tile-uncommon  { border: 2px solid var(--rarity-uncommon-bright) !important; box-shadow: 0 0 8px rgba(88,214,141,0.35); }
.rarity-tile-rare      { border: 2px solid var(--rarity-rare-bright) !important; box-shadow: 0 0 10px rgba(93,173,226,0.45); }
.rarity-tile-epic      { border: 2px solid var(--rarity-epic) !important; box-shadow: 0 0 14px rgba(155,89,182,0.60), inset 0 2px 0 rgba(155,89,182,0.5); }
.rarity-tile-legendary { border: 2px solid var(--rarity-legendary) !important; box-shadow: 0 0 18px rgba(230,192,106,0.75), inset 0 2px 0 rgba(230,192,106,0.6); animation: leg-tile-pulse 2.2s ease-in-out infinite; }
.rarity-tile-mythic    { border: 2px solid var(--rarity-mythic) !important; box-shadow: 0 0 18px rgba(231,76,60,0.7); }
@keyframes leg-tile-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(230,192,106,0.55), inset 0 2px 0 rgba(230,192,106,0.6); }
  50%      { box-shadow: 0 0 22px rgba(230,192,106,0.9),  inset 0 2px 0 rgba(230,192,106,0.6); }
}

/* v9 Batch B: Inventory → Item tab (consumables & boxes) */
.item-tab-hint {
  font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 12px; margin-bottom: 10px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
}
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.item-cell {
  background: var(--bg-panel-raised); border-radius: var(--r-sm); padding: 12px;
  display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.item-cell-icon { font-size: var(--fs-2xl); line-height: 1; }
.item-cell-art { display: inline-block; width: 48px; height: 48px; }
.item-cell-name { font-weight: 700; font-size: var(--fs-sm); }
.item-cell-desc { font-size: var(--fs-2xs); color: var(--text-muted); min-height: 2.2em; }
.item-cell-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.item-cell-qty { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
.item-use-btn {
  border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 6px 14px;
  font-weight: 700; font-size: var(--fs-xs); cursor: pointer;
  background: var(--bg-deep); color: var(--text-muted);
}
.item-use-btn.item-use-ready {
  background: linear-gradient(180deg, var(--fx-gold-fill-bright), var(--fx-gold-fill-deep)); color: var(--text-on-gold-item);
  border-color: var(--line-item-ready); box-shadow: 0 2px 6px rgba(217,169,63,0.4); cursor: pointer;
}
.item-use-btn.item-use-ready:hover { filter: brightness(1.07); transform: translateY(-1px); }
.item-use-btn[disabled] { cursor: not-allowed; opacity: 0.7; }

/* v9 Batch B: Crafted tab */
.crafted-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.crafted-tab-hint { font-size: var(--fs-2xs); color: var(--text-muted); }
.crafted-row { cursor: pointer; }
/* v9: per-row Equip + Refine actions in the Crafted tab */
.crafted-row-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.crafted-row-actions .btn { white-space: nowrap; }
.inv-item-rarity { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.1; }
.inv-item-lvl { font-size: 0.56rem; color: var(--text-item-level); font-family: var(--font-mono); line-height: 1.1; }
/* v9: darker, legible rarity text for the light theme (mirror of
   RARITY_TEXT_COLOR in ui.js — keep the two in sync). */
.rarity-text-common    { color: var(--rarity-common-text); }
.rarity-text-uncommon  { color: var(--rarity-uncommon-text); }
.rarity-text-rare      { color: var(--rarity-rare-text); }
.rarity-text-epic      { color: var(--rarity-epic-text); }
.rarity-text-legendary { color: var(--rarity-legendary-text); }
.rarity-text-mythic    { color: var(--rarity-mythic-text); }
.idm-sell { color: var(--text-gold); }
.inv-item-qty {
  font-size: var(--fs-micro); color: var(--text-gold);
  font-family: var(--font-mono); margin-top: auto;
}
.inv-item-stars {
  font-size: var(--fs-micro); color: var(--fx-star-accent);
  margin-bottom: 2px;
}
.inv-item-eq-tag {
  position: absolute; top: 3px; right: 3px;
  font-size: 0.55rem; background: rgba(52,152,219,.85);
  color: var(--text-on-well); border-radius: var(--r-xs); padding: 1px 3px;
  max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-item-fuse-tag {
  position: absolute; bottom: 3px; right: 3px;
  font-size: 0.55rem; background: var(--state-warning);
  color: var(--text-on-well); border-radius: var(--r-xs); padding: 1px 4px;
}
.inv-item-obtain-tag {
  position: absolute; bottom: 3px; left: 3px;
  font-size: 0.52rem; background: rgba(0,0,0,.55);
  color: var(--text-muted); border-radius: var(--r-xs); padding: 1px 3px;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idm-obtain-rate {
  font-size: var(--fs-2xs); color: var(--text-muted); font-style: normal;
}

/* Card rarity left-border colors (matching rarity-bg-* names for cards) */
.rarity-bg-common    { border-left-color: var(--rarity-common); }
.rarity-bg-uncommon  { border-left-color: var(--rarity-uncommon); }
.rarity-bg-rare      { border-left-color: var(--rarity-rare); }
.rarity-bg-epic      { border-left-color: var(--rarity-epic); }
.rarity-bg-legendary { border-left-color: var(--rarity-legendary-accent); }
.rarity-bg-mythic    { border-left-color: var(--rarity-mythic); }

/* ===================================== v7.4 (issue 5) Cards screen ============ */
.cards-screen { display: flex; flex-direction: column; gap: 12px; }
/* Hero card overview: paper-doll chips, existing portrait art and rarity frames. */
.cards-overview { display: grid; gap: 12px; min-width: 0; }
.cards-overview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cards-overview-heading h2 { margin: 0; font-size: var(--fs-lg); color: var(--text-primary); }
.cards-overview-heading p, .cards-overview-hint { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.cards-overview-group-title { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-primary); }
.cards-overview-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; align-items: start; min-width: 0; }
.cards-overview-hero { min-width: 0; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--bg-panel); box-shadow: var(--e1); }
.cards-overview-hero-head { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; border-radius: var(--r-md); background: linear-gradient(135deg, var(--bg-panel-raised), var(--bg-panel)); }
.cards-overview-hero-head::-webkit-details-marker { display: none; }
.cards-overview-portrait { display: block; flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-sm); background-color: var(--bg-deep); image-rendering: pixelated; }
.cards-overview-hero-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.cards-overview-hero-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); overflow-wrap: anywhere; }
.cards-overview-class { font-size: var(--fs-2xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.cards-overview-usage { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-primary); }
.cards-overview-chevron { width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); flex-shrink: 0; margin: 0 4px 4px; }
.cards-overview-hero[open] > summary .cards-overview-chevron { transform: rotate(225deg); margin-top: 8px; }
.cards-overview-hero-body { padding: 0 12px 12px; }
.cards-overview-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.cards-overview-slot.pd-card-chip { flex-direction: row; gap: 10px; padding: 9px; align-items: center; width: 100%; border-left-width: 3px; }
.cards-overview-card-art { display: flex; flex: 0 0 40px; width: 40px; align-items: center; justify-content: center; }
.cards-overview-card-art > .asset-icon { display: block; width: 40px; height: 54px; background-size: 100% 100% !important; background-position: center !important; border-radius: var(--r-xs); }
.cards-overview-card-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.cards-overview-slot-label { font-size: var(--fs-2xs); color: var(--text-secondary); }
.cards-overview-card-name { font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); overflow-wrap: anywhere; }
.cards-overview-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-2xs); color: var(--text-secondary); }
.cards-overview-stars { color: var(--text-gold); font-weight: 700; white-space: nowrap; }
.cards-overview-effect { font-size: var(--fs-xs); color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }
.cards-overview-empty { margin-top: 10px; padding: 10px; border: 1px dashed var(--border-soft); border-radius: var(--r-sm); background: var(--bg-deep); }
.cards-overview-empty p { margin: 0 0 8px; font-size: var(--fs-2xs); color: var(--text-secondary); line-height: 1.5; }
.cards-overview-empty-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.cards-overview-empty-slot.pd-card-chip { min-width: 44px; min-height: 44px; justify-content: center; font-size: var(--fs-xs); color: var(--text-primary); }
.cards-overview-manage { margin-top: 10px; min-height: 44px; width: 100%; }
.cards-overview-reserve { min-width: 0; }
.cards-overview-reserve > summary { padding: 12px; cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--bg-panel); line-height: 1.5; }
.cards-overview-reserve > .cards-overview-heroes { margin-top: 10px; }
.cards-overview summary:focus-visible, .cards-overview button:focus-visible, .cards-overview a:focus-visible { outline: 2px solid var(--accent-arcane); outline-offset: 3px; }
#cards-collection { scroll-margin-top: 16px; }
@media (max-width: 700px) {
  #app .cards-overview-heroes { grid-template-columns: minmax(0, 1fr); }
  #app .cards-overview-heading > .btn { min-height: 44px; }
  #app .cards-overview-slot.pd-card-chip { padding: 10px; }
}
.cards-team-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.cards-hero-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-full); padding: 4px 11px;
}
.cards-hero-slots { font-family: var(--font-mono, monospace); color: var(--text-muted); }
.cards-hero-slots.cards-hero-free { color: var(--text-success); }
.cards-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cards-count-tag { margin-left: auto; font-size: var(--fs-2xs); font-family: var(--font-mono, monospace); color: var(--text-muted); }
.cards-count-tag.inv-slot-full { color: var(--danger); font-weight: 700; }
/* v9 Batch C (#5): card effect-type filter chips */
.cards-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.cards-filter-chip {
  font-size: var(--fs-2xs); padding: 4px 11px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--bg-deep); color: var(--text-secondary);
  transition: all 0.12s ease;
}
.cards-filter-chip:hover { border-color: var(--accent-arcane); color: var(--text-primary); }
.cards-filter-chip.active { background: var(--accent-arcane); border-color: var(--accent-arcane); color: var(--text-on-well); font-weight: 700; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cards-cell {
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-top-width: 3px;
  border-radius: var(--r-md); padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 5px;
}
/* Portrait "trading card" art panel dominates the top of each cell. */
.cards-cell-art {
  position: relative; aspect-ratio: 3 / 4; width: 100%; border-radius: var(--r-sm); border: 1px solid;
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 4px;
  isolation: isolate;
}
.cards-cell-icon {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-4xl); line-height: 1;
}
.cards-cell-icon > .asset-icon {
  display: block; width: 100%; height: 100%;
  background-size: 100% 100% !important; background-position: center !important;
  image-rendering: auto;
}
.cards-cell-art::before,
.cards-cell-art::after {
  content: ''; position: absolute; pointer-events: none; z-index: 1; border-radius: inherit;
}

/* C5a2: rarity frames extend the existing rarity-bg / rarity-tile language.
   The PNG remains full-bleed artwork; all scalable frame ornament stays here. */
.cards-cell.rarity-bg-common > .cards-cell-art {
  border-width: 1px; border-color: var(--rarity-common) !important;
}
.cards-cell.rarity-bg-rare > .cards-cell-art {
  border-width: 2px; border-color: var(--rarity-rare-bright) !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rarity-rare) 48%, transparent));
}
.cards-cell.rarity-bg-rare > .cards-cell-art::before {
  inset: 3px; border: 1px solid color-mix(in srgb, var(--rarity-rare-bright) 68%, transparent);
}
.cards-cell.rarity-bg-epic > .cards-cell-art {
  border-width: 2px; border-color: var(--rarity-epic) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rarity-epic) 68%, transparent));
}
.cards-cell.rarity-bg-epic > .cards-cell-art::before {
  inset: 3px; border: double 3px color-mix(in srgb, var(--rarity-epic-text-bright) 78%, transparent);
}
.cards-cell.rarity-bg-legendary > .cards-cell-art {
  border-width: 3px; border-style: double; border-color: var(--rarity-legendary) !important;
  animation: leg-tile-pulse 2.2s ease-in-out infinite;
}
.cards-cell.rarity-bg-legendary > .cards-cell-art::before {
  inset: 3px; border: 1px solid var(--rarity-legendary-accent);
  background:
    linear-gradient(135deg, var(--rarity-legendary) 0 9%, transparent 9%) top left / 24% 24% no-repeat,
    linear-gradient(225deg, var(--rarity-legendary) 0 9%, transparent 9%) top right / 24% 24% no-repeat,
    linear-gradient(45deg, var(--rarity-legendary) 0 9%, transparent 9%) bottom left / 24% 24% no-repeat,
    linear-gradient(315deg, var(--rarity-legendary) 0 9%, transparent 9%) bottom right / 24% 24% no-repeat;
}
.cards-cell.rarity-bg-mythic > .cards-cell-art {
  border-width: 3px; border-style: double; border-color: var(--rarity-mythic) !important;
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--rarity-mythic) 78%, transparent))
    drop-shadow(0 0 10px color-mix(in srgb, var(--rarity-epic) 52%, transparent));
}
.cards-cell.rarity-bg-mythic > .cards-cell-art::before {
  inset: 2px; border: double 3px var(--rarity-mythic);
  background:
    linear-gradient(135deg, var(--rarity-legendary) 0 12%, transparent 12%) top left / 28% 28% no-repeat,
    linear-gradient(225deg, var(--rarity-rare-bright) 0 12%, transparent 12%) top right / 28% 28% no-repeat,
    linear-gradient(45deg, var(--rarity-epic-text-bright) 0 12%, transparent 12%) bottom left / 28% 28% no-repeat,
    linear-gradient(315deg, var(--rarity-mythic-text-bright) 0 12%, transparent 12%) bottom right / 28% 28% no-repeat;
  animation: card-mythic-frame-pulse 1.8s ease-in-out infinite;
}
.cards-cell.rarity-bg-mythic > .cards-cell-art::after {
  inset: 7px; border: 1px solid color-mix(in srgb, var(--rarity-rare-bright) 54%, transparent);
  animation: card-mythic-frame-pulse 1.8s ease-in-out infinite reverse;
}
@keyframes card-mythic-frame-pulse {
  0%, 100% { opacity: 0.68; filter: brightness(0.9) saturate(1.05); }
  50% { opacity: 1; filter: brightness(1.28) saturate(1.42); }
}
@media (prefers-reduced-motion: reduce) {
  .rarity-tile-legendary,
  .cards-cell.rarity-bg-legendary > .cards-cell-art,
  .cards-cell.rarity-bg-mythic > .cards-cell-art::before,
  .cards-cell.rarity-bg-mythic > .cards-cell-art::after { animation: none; }
}

/* Card art is portrait on the Cards screen and a centered square crop elsewhere. */
.inv-card-art .asset-icon,
.eqp-card-art .asset-icon,
.idm-card-art .asset-icon,
.confirm-card-art .asset-icon,
.ceq-slot-occ .asset-icon {
  background-size: cover !important; background-position: center !important;
  image-rendering: auto;
}
.cards-cell-art-stars {
  position: absolute; left: 8px; bottom: 6px; z-index: 2; font-size: var(--fs-xs); color: var(--fx-star);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.cards-cell-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cards-cell-name { font-weight: 800; font-size: var(--fs-sm); }
.cards-cell-rarity {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-on-rarity); padding: 2px 7px; border-radius: var(--r-full); box-shadow: var(--e1);
}
.cards-cell-effects { font-size: var(--fs-xs); color: var(--text-primary); line-height: 1.45; }
.cards-cell-status { font-size: var(--fs-2xs); color: var(--text-secondary); }
.cards-unequipped { color: var(--text-muted); font-style: italic; }
.cards-fuse-preview {
  font-size: var(--fs-2xs); color: var(--text-gold); line-height: 1.4;
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent-gold) 45%, transparent);
  border-radius: var(--r-xs); padding: 5px 8px;
}
.cards-cell-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cards-cell-actions .btn-small { padding: 4px 10px; font-size: var(--fs-2xs); }

/* ============================================================= Item Detail Modal */
.idm-card {
  max-width: 360px; width: 90vw;
  background: var(--bg-panel); border-radius: var(--r-md);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.idm-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
.idm-icon { font-size: var(--fs-2xl); line-height: 1; }
.idm-art { display: inline-block; width: 48px; height: 48px; }
.idm-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.idm-sub { font-size: var(--fs-2xs); color: var(--text-muted); }
.idm-section { display: flex; flex-direction: column; gap: 3px; }
.idm-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.idm-stat-line { font-size: var(--fs-xs); color: var(--text-gold); font-family: var(--font-mono); }
.idm-effects { font-size: var(--fs-2xs); color: var(--text-secondary); }
.idm-status { font-size: var(--fs-xs); }
.idm-obtain { font-size: var(--fs-2xs); color: var(--text-secondary); font-style: italic; line-height: 1.4; }
.idm-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.idm-action { font-size: var(--fs-2xs); padding: 5px 12px; }
.idm-fuse { background: var(--state-warning) !important; color: var(--text-on-well) !important; border-color: var(--state-warning) !important; }
.idm-close { margin-top: 4px; font-size: var(--fs-2xs); width: 100%; }

/* ============================================================= Card Equip Modal (hero 10-slot) */
.ceq-hint { font-size: var(--fs-2xs); color: var(--text-muted); font-style: italic; margin: 4px 0 8px; }
.ceq-hero { margin-bottom: 14px; }
.ceq-hero-name { font-size: var(--fs-xs); font-weight: 700; margin-bottom: 6px; }
.ceq-free-count { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 400; }
.ceq-slots-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.ceq-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft); border-radius: var(--r-xs);
  padding: 4px 2px; cursor: pointer; min-height: 40px;
  transition: border-color .12s, background .12s;
}
.ceq-slot:hover { border-color: var(--accent-gold); background: rgba(230,192,106,.1); }
.ceq-slot-num { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1; }
.ceq-slot-empty { font-size: var(--fs-md); color: var(--state-success); line-height: 1; }
.ceq-slot-occ { font-size: var(--fs-sm); line-height: 1; }
.ceq-slot-occ .asset-icon { width: 18px; height: 18px; }
.idm-card-art .asset-icon { width: 48px; height: 48px; }
.ceq-slot-free { border-color: rgba(39,174,96,.4); }
.ceq-slot-busy { border-color: rgba(230,192,106,.3); background: rgba(230,192,106,.05); }

/* ── DETAILS panel = live mini-sim dashboard (v6) ─────────────────────────── */
.msim-card {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--msim-accent, var(--accent-gold));
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.msim-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.msim-icon { font-size: var(--fs-lg); line-height: 1; }
.msim-titles { min-width: 0; }
.msim-title { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.msim-live { font-size: 0.55rem; color: var(--text-success); letter-spacing: .04em; }
.msim-sub { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mini live field — real sprites on a real cave, like the full-screen sim */
.msim-field {
  position: relative; overflow: hidden;
  width: 100%; height: 100px;
  border-radius: var(--r-xs);
  background: var(--surface-simulation);
  border: 1px solid var(--border-soft);
}
.msim-terrain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated; z-index: 0;
}
/* Scale the shared 32px tokens down to fit the mini field. */
.msim-tok { width: 20px !important; height: 20px !important; z-index: 2; image-rendering: auto !important; }
.msim-tok.sim-hero-token { z-index: 3; }
.msim-stats { display: flex; gap: 6px; margin-top: 7px; }
.msim-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: var(--bg-panel); border-radius: var(--r-xs); padding: 4px 2px;
}
.msim-stat-label { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.msim-stat-val { font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); margin-top: 1px; }

/* ── Heroes page: roster list (left) + selected hero detail (right) ───────── */
.roster-layout { display: flex; flex-direction: column; gap: 14px; }
.roster-col-detail { min-width: 0; }
.roster-detail {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.roster-detail-empty { color: var(--text-muted); font-style: italic; text-align: center; padding: 40px 16px; }
.roster-active-slot { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.roster-slot-selected { box-shadow: 0 0 0 2px var(--accent-gold) inset; }
.roster-hero-picker {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
}
.roster-hero-picker label { flex: 0 0 auto; font-weight: 700; color: var(--text-secondary); }
.roster-hero-picker select {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  background: var(--bg-panel-raised); color: var(--text-primary); font: inherit;
}
.roster-team-drawer { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-sm); }
.roster-team-drawer > summary {
  min-height: 44px; display: flex; align-items: center; padding: 8px 14px;
  color: var(--text-gold); font-weight: 700; cursor: pointer;
}
.roster-team-drawer > summary::before { content: '▸'; margin-right: 8px; }
.roster-team-drawer[open] > summary::before { content: '▾'; }
.roster-team-drawer .roster-col-list { padding: 0 10px 10px; }
.hero-detail-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hero-detail-tab {
  min-height: 44px; min-width: 0; padding: 7px 5px; border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); background: var(--bg-panel); color: var(--text-secondary);
  font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; overflow-wrap: anywhere;
}
.hero-detail-tab.active { border-color: var(--accent-gold); border-bottom-width: 3px; background: var(--bg-panel-raised); color: var(--text-gold); }
.hero-detail-tab:focus-visible, .roster-team-drawer > summary:focus-visible, .roster-hero-picker select:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
@media (max-width: 600px) {
  .roster-hero-picker { align-items: stretch; flex-direction: column; gap: 4px; }
  .hero-detail-tabs { gap: 4px; }
  .hero-detail-tab { font-size: var(--fs-xs); padding-inline: 2px; }
}

/* ── Stage screen: Farm / Stage-Counter loop selector ─────────────────────── */
.stage-mode-selector { display: flex; gap: 8px; margin: 10px 0 8px; }
.stage-mode-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 6px; border-radius: var(--r-sm);
  background: var(--bg-panel); border: 1.5px solid var(--border-soft);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.stage-mode-btn:hover { border-color: var(--accent-gold); }
.stage-mode-btn.active { border-color: var(--accent-gold); background: rgba(230,192,106,.1); }
.stage-mode-icon { font-size: var(--fs-lg); line-height: 1; }
.stage-mode-label { font-weight: 700; font-size: var(--fs-xs); }
.stage-mode-desc { font-size: var(--fs-micro); color: var(--text-muted); text-align: center; }

/* ── Hero sheet: equipped cards ───────────────────────────────────────────── */
.insp-card-list { display: flex; flex-direction: column; gap: 5px; }
.insp-card-row {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; border-left: 3px solid var(--border-soft);
  background: var(--bg-panel-raised); border-radius: var(--r-xs);
}
.insp-card-name { font-weight: 700; font-size: var(--fs-xs); }
.insp-card-stars { color: var(--fx-star-bright); margin-left: 3px; }
.insp-card-eff { font-size: var(--fs-micro); color: var(--text-muted); }
.insp-eff-card .insp-eff-name { color: var(--text-effect-arcane); }

/* ── v6: sim attack visuals — projectiles + melee slash ───────────────────── */
.sim-projectile {
  position: absolute; z-index: 6; pointer-events: none;
  transform: rotate(var(--rot, 0deg));
  transition: none;
}
.sim-projectile.sim-proj-fly {
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot, 0deg));
  transition: transform 0.26s linear;
}
.sim-proj-arrow {
  width: 14px; height: 2px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, transparent, var(--fx-projectile-arrow) 60%, var(--fx-highlight));
  box-shadow: 0 0 3px rgba(255, 240, 180, 0.8);
}
.sim-proj-orb {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: radial-gradient(circle, var(--fx-highlight) 10%, var(--fx-projectile-arcane) 55%, transparent 75%);
  box-shadow: 0 0 6px rgba(179, 136, 255, 0.9);
}
.sim-proj-spark {
  width: 9px; height: 3px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, transparent, var(--fx-projectile-energy), var(--fx-highlight));
  box-shadow: 0 0 5px rgba(127, 220, 255, 0.9);
}
.sim-proj-wave {
  width: 8px; height: 8px; border-radius: var(--r-full); box-sizing: border-box;
  border: 2px solid rgba(210, 155, 255, 0.9);
  box-shadow: 0 0 5px rgba(179, 100, 255, 0.85);
}
.sim-proj-wave::before {
  content: ''; position: absolute; inset: -2px; border-radius: var(--r-full);
  border: 1px solid rgba(230, 195, 255, 0.75);
  animation: simProjWaveExpand 0.26s linear forwards;
}
.sim-proj-drop {
  width: 8px; height: 8px;
}
.sim-proj-drop::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-full) var(--r-full) var(--r-full) 0;
  transform: rotate(-45deg);
  background: radial-gradient(circle at 65% 35%, var(--fx-highlight) 5%, var(--fx-projectile-energy) 45%, var(--fx-projectile-energy-deep) 80%);
  box-shadow: 0 0 5px rgba(80, 190, 255, 0.9);
}
.sim-proj-bolt {
  width: 20px; height: 2px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, transparent, var(--fx-projectile-electric) 34%, var(--fx-highlight) 78%);
  box-shadow: 0 0 5px rgba(110, 231, 255, 0.95);
}
.sim-proj-shell {
  width: 12px; height: 7px; border-radius: var(--r-full) var(--r-full) var(--r-full) var(--r-full);
  background: linear-gradient(90deg, rgba(255, 190, 90, 0.15), var(--fx-projectile-shell) 38%, var(--fx-ember-highlight) 88%);
  box-shadow: -6px 0 5px rgba(255, 150, 55, 0.45), 0 0 3px rgba(255, 225, 170, 0.8);
}
.sim-proj-pellet {
  width: 4px; height: 4px; border-radius: var(--r-full);
  background: var(--fx-projectile-pellet);
  box-shadow: -3px 2px 3px rgba(255, 210, 100, 0.8), 0 0 4px rgba(255, 245, 190, 0.9);
}
.sim-proj-needle {
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225, 245, 255, 0.8) 45%, var(--fx-highlight));
  box-shadow: 0 0 2px rgba(220, 245, 255, 0.9);
}
.sim-proj-bubble {
  width: 10px; height: 10px; border-radius: var(--r-full);
  border: 1px solid rgba(185, 245, 255, 0.75);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.8) 0 10%, rgba(110,220,235,.28) 30% 65%, transparent 72%);
  box-shadow: 0 0 5px rgba(90, 210, 235, 0.55);
}
.sim-proj-beam {
  width: 30px; height: 5px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, transparent, rgba(120, 225, 255, 0.7) 20%, var(--fx-highlight) 75%, rgba(130,230,255,.8));
  box-shadow: 0 0 7px rgba(95, 215, 255, 0.9);
}
@keyframes simProjWaveExpand {
  from { transform: scale(0.65); opacity: 1; }
  to { transform: scale(1.45); opacity: 0; }
}
.sim-proj-enemy.sim-proj-arrow { background: linear-gradient(90deg, transparent, var(--fx-projectile-enemy) 60%, var(--fx-highlight)); box-shadow: 0 0 3px rgba(230,120,110,.8); }
.sim-proj-enemy.sim-proj-orb   { background: radial-gradient(circle, var(--fx-highlight) 10%, var(--fx-projectile-danger) 55%, transparent 75%); box-shadow: 0 0 6px rgba(231,76,60,.9); }
.sim-proj-enemy.sim-proj-spark { background: linear-gradient(90deg, transparent, var(--fx-projectile-enemy-electric), var(--fx-highlight)); box-shadow: 0 0 5px rgba(255,138,101,.9); }

.sim-slash {
  position: absolute; width: 24px; height: 24px; z-index: 6; pointer-events: none;
  transform: rotate(var(--slash-rot, 0deg));
  animation: simSlashArc 0.22s ease-out forwards;
}
.sim-slash::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--r-full);
  border-top: 2.5px solid rgba(255, 255, 255, 0.95);
  border-right: 2.5px solid rgba(255, 255, 255, 0.35);
  border-bottom: 2.5px solid transparent;
  border-left: 2.5px solid transparent;
  filter: drop-shadow(0 0 3px rgba(255, 255, 220, 0.8));
}
.sim-slash-enemy::before {
  border-top-color: rgba(255, 120, 100, 0.95);
  border-right-color: rgba(255, 120, 100, 0.35);
  filter: drop-shadow(0 0 3px rgba(255, 100, 80, 0.8));
}
.sim-slash-bash {
  width: 28px; height: 20px;
  animation: simSlashBash 0.30s ease-out forwards;
}
.sim-slash-bash::before {
  border: 0;
  border-radius: var(--r-full);
  background: radial-gradient(ellipse, rgba(255,255,255,.95) 0 18%, rgba(255,215,125,.7) 22% 40%, transparent 66%);
  filter: drop-shadow(0 0 4px rgba(255, 220, 145, 0.9));
}
.sim-slash-chop {
  width: 16px; height: 30px;
  animation: simSlashChop 0.24s ease-in forwards;
}
.sim-slash-chop::before {
  border-radius: var(--r-full) var(--r-full) var(--r-full) var(--r-full);
  border-top-width: 3px;
  border-right-width: 1px;
}
@keyframes simSlashArc {
  0%   { opacity: 0; transform: rotate(var(--slash-rot, 0deg)) scale(0.5); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--slash-rot, 0deg) + 120deg)) scale(1.15); }
}
@keyframes simSlashBash {
  0%   { opacity: 0; transform: rotate(var(--slash-rot, 0deg)) scale(0.35); }
  35%  { opacity: 1; transform: rotate(var(--slash-rot, 0deg)) scale(1.15); }
  100% { opacity: 0; transform: rotate(var(--slash-rot, 0deg)) scale(0.9); }
}
@keyframes simSlashChop {
  0%   { opacity: 0; transform: translateY(-8px) rotate(var(--slash-rot, 62deg)) scaleY(0.55); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(5px) rotate(var(--slash-rot, 62deg)) scaleY(1.2); }
}

/* v6: ranked talent / player-tree nodes */
.tnode-rank, .pst-node-rank { font-size: var(--fs-micro); color: var(--text-gold); font-weight: 700; }
.tnode-partial { border-color: color-mix(in srgb, var(--br-col, var(--line-dynamic-fallback)) 55%, transparent); }
.pst-node-partial { outline: 1px solid rgba(230, 192, 106, 0.5); }

/* v6: offline-farm promise chip on the World Map header */
.wm-offline-chip {
  margin-left: auto; align-self: center; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700; cursor: help;
  color: var(--text-warning-deep); background: rgba(241, 196, 15, 0.14);
  border: 1px solid rgba(241, 196, 15, 0.45);
  padding: 3px 9px; border-radius: var(--r-full);
}

/* ── v6.1: Daily Quests — the Golden Path (GDDv6 §35) ─────────────────────── */
.quests-screen { display: flex; flex-direction: column; gap: 12px; }
.qs-header .subtitle strong { color: var(--text-gold); }
.qs-list { display: flex; flex-direction: column; gap: 10px; }

.qs-row, .qs-chest, .qs-vault {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.qs-icon, .qs-chest-icon { font-size: var(--fs-2xl); line-height: 1; flex-shrink: 0; }
.qs-body { flex: 1; min-width: 0; }
.qs-name { font-weight: 700; font-size: var(--fs-md); }
.qs-desc { font-size: var(--fs-2xs); color: var(--text-muted); margin: 1px 0 6px; }
.qs-bar { height: 8px; border-radius: var(--r-full); background: var(--bg-panel-raised); overflow: hidden; }
.qs-bar-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold));
  transition: width .5s ease-out;
}
.qs-bar-full { background: linear-gradient(90deg, var(--success), var(--state-success-bright)); animation: qsBarGlow 1.4s ease-in-out infinite; }
@keyframes qsBarGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}
.qs-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.qs-reward { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }
.qs-reward-week { color: var(--text-warning-deep); font-weight: 700; }

.qs-claim-btn {
  min-width: 110px; padding: 7px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-muted);
  font-weight: 800; font-size: var(--fs-xs); letter-spacing: .04em;
  cursor: default;
}
.qs-claim-ready {
  cursor: pointer; color: var(--text-on-bright);
  background: linear-gradient(180deg, var(--gold-pale), var(--accent-gold));
  border-color: var(--accent-gold);
  animation: qsClaimPulse 1.1s ease-in-out infinite;
}
.qs-claim-ready:hover { filter: brightness(1.08); }
@keyframes qsClaimPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 192, 106, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 7px rgba(230, 192, 106, 0);   transform: scale(1.04); }
}
.qs-claim-big { min-width: 140px; padding: 10px 16px; font-size: var(--fs-sm); }
.qs-claimed-mark { color: var(--text-success); font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; }
.qs-row-ready { border-color: rgba(230, 192, 106, 0.55); }
.qs-row-claimed { opacity: 0.62; }

.qs-chest { border-left: 4px solid var(--accent-gold); }
.qs-vault { border-left: 4px solid var(--el-void); }
.qs-chest-ready { box-shadow: 0 0 14px rgba(230, 192, 106, 0.25); border-color: rgba(230, 192, 106, 0.6); }
.qs-chest-done { opacity: 0.62; }
.qs-chest-need { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 400; }
.qs-pips { display: flex; gap: 5px; margin: 4px 0; }
.qs-pip { font-size: var(--fs-md); opacity: 0.3; filter: grayscale(1); transition: all .25s; }
.qs-pip-lit { opacity: 1; filter: none; color: var(--text-gold); transform: scale(1.12); }

/* Claim burst particles */
.q-spark {
  position: fixed; z-index: 9999; width: 7px; height: 7px; border-radius: var(--r-full);
  background: radial-gradient(circle, var(--fx-highlight) 15%, var(--accent-gold) 60%, transparent 80%);
  pointer-events: none;
  animation: qSparkFly 0.6s ease-out forwards;
}
@keyframes qSparkFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--qx), var(--qy)) scale(0.4); }
}

/* Golden quest toast */
.quest-toast {
  position: fixed; top: 64px; right: 18px; z-index: 9998;
  background: linear-gradient(180deg, var(--fx-toast-highlight), var(--gold-pale));
  color: var(--text-warning-medium); font-weight: 800; font-size: var(--fs-sm);
  border: 1px solid var(--accent-gold); border-radius: var(--r-sm);
  padding: 10px 16px; max-width: 340px;
  box-shadow: 0 6px 18px rgba(184, 134, 11, 0.35);
  transition: opacity .3s, transform .3s;
}
.quest-toast.hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.quest-toast-pop { animation: qToastPop 0.35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes qToastPop {
  0%   { transform: scale(0.7) translateY(-10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Quests menu badge — the open loop that itches */
.cc-menu-badge {
  margin-left: auto; min-width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--danger); color: var(--text-on-well);
  font-size: var(--fs-micro); font-weight: 800; line-height: 18px; text-align: center;
  padding: 0 5px;
  animation: qBadgePulse 1.6s ease-in-out infinite;
}
@keyframes qBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ── v6.1: Blueprint Share Code (GDDv6 §36) ───────────────────────────────── */
.bp-share-card { max-width: 480px; }
.bp-share-code {
  width: 100%; box-sizing: border-box; resize: none;
  font-family: var(--font-mono, monospace); font-size: var(--fs-2xs);
  background: var(--bg-deep); color: var(--text-gold);
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 8px 10px; margin: 10px 0 4px;
  word-break: break-all;
}
.bp-import-err {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(231, 76, 60, 0.12); border: 1px solid rgba(231, 76, 60, 0.4);
  color: var(--danger); font-size: var(--fs-xs); font-weight: 700;
}
.bp-import-ok {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.bp-import-name { font-size: var(--fs-sm); margin-bottom: 6px; }
.bp-import-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.bp-import-warn {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--state-warning-deep);
  background: rgba(241, 196, 15, 0.12); border-radius: var(--r-xs); padding: 5px 8px;
}
.bp-import-fit {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--text-success);
  background: rgba(88, 214, 141, 0.1); border-radius: var(--r-xs); padding: 5px 8px;
}
@keyframes bpRowNew {
  0%   { box-shadow: 0 0 0 3px var(--accent-gold); background: rgba(230, 192, 106, 0.18); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── v6.2: Buff bar (shell strip) + Gold Shop (GDDv6 §37) ─────────────────── */
.buff-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 16px;
  background: linear-gradient(90deg, rgba(230,192,106,.10), rgba(30,36,48,.6));
  border-bottom: 1px solid var(--border-soft);
}
.buff-bar.hidden { display: none; }
.buff-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--buff-col, var(--gold-bright)) 16%, var(--bg-panel));
  border: 1px solid var(--buff-col, var(--gold-bright));
  border-radius: var(--r-full); padding: 3px 11px;
  font-size: var(--fs-2xs); font-weight: 700;
}
.buff-chip-icon { font-size: var(--fs-sm); }
.buff-chip-time { font-family: var(--font-mono, monospace); color: var(--buff-col, var(--gold-bright)); }
.buff-chip-warn { animation: buffChipWarn 1s ease-in-out infinite; }
@keyframes buffChipWarn { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.5);} }
.buff-bar-shop {
  margin-left: auto; padding: 4px 12px; border-radius: var(--r-full); cursor: pointer;
  background: var(--accent-gold); color: var(--text-on-gold); border: none; font-weight: 800; font-size: var(--fs-2xs);
}
.buff-bar-shop:hover { filter: brightness(1.08); }

.shop-screen { display: flex; flex-direction: column; gap: 12px; }
.shop-buffs-active {
  padding: 9px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-xs);
  background: rgba(230,192,106,.1); border: 1px solid rgba(230,192,106,.35);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.shop-buffs-none { color: var(--text-muted); background: var(--bg-panel); border-color: var(--border-soft); font-weight: 400; }
.shop-section-label {
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-gold);
  text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 2px;
}
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.shop-card {
  position: relative; background: var(--bg-panel);
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.shop-card-deal { border-color: var(--accent-gold); box-shadow: 0 0 14px rgba(230,192,106,.2); }
.shop-deal-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--accent-gold); color: var(--text-on-gold); font-size: var(--fs-micro); font-weight: 800;
  padding: 2px 10px; border-radius: var(--r-full); white-space: nowrap;
}
.shop-card-icon { font-size: var(--fs-2xl); line-height: 1; }
.shop-card-name { font-weight: 700; font-size: var(--fs-sm); }
.shop-card-desc { font-size: var(--fs-2xs); color: var(--text-muted); min-height: 2.4em; }
.shop-store-full { font-size: var(--fs-micro); color: var(--danger); font-weight: 700; }
.shop-card-foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.shop-limit { font-size: var(--fs-micro); color: var(--text-muted); }
.shop-limit-inf { color: var(--text-success); }
.shop-buy-btn {
  width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  color: var(--text-muted); font-weight: 800; font-size: var(--fs-xs); cursor: default;
}
.shop-buy-ready {
  cursor: pointer; color: var(--text-on-bright);
  background: linear-gradient(180deg, var(--gold-pale), var(--accent-gold)); border-color: var(--accent-gold);
}
.shop-buy-ready:hover { filter: brightness(1.08); }
/* 2026-07-14 (#6): GS COIN market — a cool-toned note + card accent vs the gold shop */
.shop-gscoin-note {
  margin: 12px 0 2px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-2xs); line-height: 1.45;
  background: rgba(90,170,255,.08); border: 1px solid rgba(90,170,255,.3); color: var(--text-secondary);
}
.shop-gscoin-art { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
/* Shared GS COIN mark (gsCoinIconHtml) — sell buttons, sell confirms, live log.
   Sized to sit on a text baseline rather than to lead a card like the shop's. */
.gscoin-art { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; flex-shrink: 0; }
.gscoin-fb { font-size: var(--fs-micro); line-height: 1; }
.confirm-payout { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
  font-size: var(--fs-xs); color: var(--text-secondary); }
.confirm-payout strong { color: var(--text-gold); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 4px; }
.shop-buy-btn .shop-gscoin-art { width: 16px; height: 16px; }
.shop-card-gscoin { border-color: rgba(90,170,255,.45); }
.shop-card-gscoin .shop-buy-ready {
  color: var(--text-on-info-deep); background: linear-gradient(180deg, var(--fx-info-fill-bright), var(--fx-info-fill-deep)); border-color: var(--accent-gold);
}
.shop-pvp-note {
  margin: 12px 0 2px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-2xs); line-height: 1.45;
  background: color-mix(in srgb, var(--accent-arcane) 8%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 32%, transparent); color: var(--text-secondary);
}
.shop-pvp-art { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.shop-pvp-fb { color: var(--accent-arcane); font-weight: 900; line-height: 1; }
.shop-buy-btn .shop-pvp-art { width: 16px; height: 16px; }
.shop-card-pvp { border-color: color-mix(in srgb, var(--accent-arcane) 45%, transparent); }
.shop-card-pvp .shop-buy-ready {
  color: var(--text-on-well); background: var(--accent-arcane); border-color: var(--accent-arcane);
}
/* 2026-08-20: a tier band you cannot equip yet. This reads differently from a
   plain unaffordable button — "come back at Lv 181" is a roadmap, not a refusal,
   so it keeps a warm border rather than fading out like a sold-out quota. */
.shop-buy-locked {
  color: var(--text-muted); background: repeating-linear-gradient(
    135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px), var(--bg-panel-raised);
  border-color: rgba(200,160,90,.42); font-size: var(--fs-2xs); letter-spacing: .01em;
}

/* ── Welcome overlay — "World Heroes" (rebuilt 2026-08-10) ────────────────────
   Two panes: a dark full-bleed art rail carrying the key art + wordmark, and a
   light content pane that matches the rest of the dashboard. The rail sits left
   on desktop and collapses to a short banner on mobile.
   .welcome-cta / .welcome-guide are kept below: renderCodex reuses .welcome-cta
   for its "Build your team" button.
   ------------------------------------------------------------------------- */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20,16,28,.92), rgba(8,9,12,.97));
  backdrop-filter: blur(3px);
  animation: welcomeFadeIn .3s ease;
}
.welcome-overlay.welcome-closing { animation: welcomeFadeOut .26s ease forwards; }
@keyframes welcomeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomeFadeOut { from { opacity: 1; } to { opacity: 0; } }
.welcome-card-pop { animation: welcomeCardPop .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes welcomeCardPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.wh-card {
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  width: min(940px, 100%); max-height: calc(100vh - 32px);
  background: var(--bg-panel);
  border: 1px solid rgba(230,192,106,.55); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--e4);
}

/* ---- art rail ---- */
.wh-art-rail {
  position: relative; overflow: hidden; min-height: 260px;
  /* Standing in for the key art until it loads, and the permanent look if the
     PNG is missing: a rift-violet sky over an ember horizon. */
  background: linear-gradient(180deg, var(--surface-art-deep) 0%, var(--surface-art-mid) 45%, var(--accent-arcane) 72%, var(--accent-ember) 100%);
}
.wh-keyart {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  image-rendering: pixelated;
}
.wh-art-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,22,.72) 0%, rgba(12,10,22,.18) 38%, rgba(12,10,22,.86) 100%);
}
.wh-art-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 26px 20px; text-align: center; gap: 6px;
}
.wh-emblem {
  width: 76px; height: 76px; display: block; margin: 0 auto 2px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.wh-brand { width: 100%; }
.wh-brand-img { display: block; width: 100%; max-width: 250px; margin: 0 auto; height: auto; aspect-ratio: 500 / 258; }
.wh-brand-text {
  font-family: var(--font-display); font-weight: 800; line-height: .96;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-brand); text-shadow: 0 2px 0 var(--fx-brand-shadow), 0 0 24px rgba(230,192,106,.45);
}
.wh-brand-text span { display: block; }
.wh-brand-text span:first-child { font-size: var(--fs-3xl); }
.wh-brand-text span:last-child  { font-size: var(--fs-3xl); }
.wh-tagline {
  font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,240,205,.82);
}

/* ---- content pane ---- */
.wh-pane {
  /* No bottom padding: .wh-actions is sticky and owns the bottom gutter, so the
     buttons pin to the true bottom edge instead of floating above the padding. */
  padding: 26px 28px 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.wh-eyebrow {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-arcane);
}
.wh-title {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1.2;
  color: var(--text-primary); margin: -8px 0 0;
}
.wh-lede { margin: -4px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); }

.wh-features { display: flex; flex-direction: column; gap: 8px; }
.wh-feature {
  display: flex; gap: 13px; align-items: center;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 10px 13px;
}
.wh-feature strong { display: block; font-size: var(--fs-sm); color: var(--text-primary); }
.wh-feature span   { display: block; font-size: var(--fs-2xs); line-height: 1.45; color: var(--text-muted); }
.wh-art { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; }
.wh-art img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.wh-art-fb { font-size: var(--fs-2xl); line-height: 1; }

/* content-scale pills — the "how much game is in here" line */
.wh-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-fact {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-full); padding: 4px 10px;
}
.wh-fact b { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-arcane); letter-spacing: 0; }

.wh-gift {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--text-warning);
  background: rgba(241,196,15,.13); border: 1px solid rgba(241,196,15,.45);
  border-radius: var(--r-sm); padding: 9px 12px;
}
.wh-gift strong { color: var(--text-warning-strong); }

/* ---- returning: stats, squad, offline haul, waiting items ---- */
.wh-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: -4px; }
.wh-stat { display: flex; flex-direction: column; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); }
.wh-stat b { font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: 0; color: var(--text-primary); }

.wh-team { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-team-chip {
  display: flex; align-items: center; gap: 8px; flex: 1 1 150px; min-width: 0;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--wh-cls, var(--accent-arcane));
  border-radius: var(--r-sm); padding: 6px 10px;
}
.wh-team-spr { width: 32px; height: 32px; flex: 0 0 auto; image-rendering: pixelated; }
.wh-team-ico { font-size: var(--fs-xl); line-height: 1; }
.wh-team-meta { min-width: 0; }
.wh-team-meta strong { display: block; font-size: var(--fs-xs); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-team-meta span  { display: block; font-size: var(--fs-micro); color: var(--text-muted); }

.wh-away {
  background: linear-gradient(180deg, var(--surface-art-deep), var(--surface-art-raised));
  border: 1px solid rgba(106,75,208,.6); border-radius: var(--r-md); padding: 12px 14px; color: var(--text-art-primary);
}
.wh-away-arrived { animation: whAwayIn .4s ease; }
@keyframes whAwayIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wh-away-head { font-size: var(--fs-xs); color: rgba(237,231,255,.78); margin-bottom: 10px; }
.wh-away-head strong { color: var(--text-brand); }
.wh-away-cap { font-size: var(--fs-micro); color: rgba(237,231,255,.6); }
.wh-away-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wh-away-cell { display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(255,255,255,.06); border-radius: var(--r-sm); padding: 8px 4px; }
.wh-away-ico { font-size: var(--fs-md); line-height: 1; }
.wh-away-v { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--text-on-well); }
.wh-away-l { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: rgba(237,231,255,.6); }
.wh-away-note { margin-top: 8px; font-size: var(--fs-micro); color: rgba(237,231,255,.6); }
.wh-away-idle { font-size: var(--fs-xs); line-height: 1.5; }
.wh-away-idle strong { color: var(--text-brand); }
.wh-away-warn { color: var(--text-warning-on-art); }

.wh-todos { display: flex; flex-direction: column; gap: 6px; }
.wh-todo {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--fs-xs); color: var(--text-secondary);
  font-family: var(--font-body);
}
.wh-todo-flat { cursor: default; }
.wh-todo-hot {
  cursor: pointer; font-weight: 600; color: var(--text-warning);
  background: rgba(241,196,15,.13); border-color: rgba(241,196,15,.5);
}
.wh-todo-hot:hover { background: rgba(241,196,15,.22); }
.wh-todo-ico { font-size: var(--fs-md); line-height: 1; }
.wh-todo-t { flex: 1; min-width: 0; }
.wh-todo-go { font-size: var(--fs-lg); color: var(--text-gold); }

/* ---- actions ----
   Sticky, because the returning pane is long enough to scroll on a phone (and on
   any short desktop window) — measured: the Continue button sat 130px below the
   fold before this. The fade keeps scrolled content from butting into the button. */
.wh-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: auto; padding: 12px 0 22px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, var(--bg-panel) 20%);
}
.wh-cta {
  width: 100%; padding: 13px; border-radius: var(--r-md); border: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; letter-spacing: .04em;
  color: var(--text-on-bright); background: linear-gradient(180deg, var(--gold-pale), var(--accent-gold));
  box-shadow: 0 6px 18px rgba(230,192,106,.35);
}
.wh-cta:hover { filter: brightness(1.07); }
.wh-cta:focus-visible { outline: 2px solid var(--accent-arcane); outline-offset: 2px; }
.wh-ghost {
  width: 100%; padding: 10px; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: var(--fs-sm); font-family: var(--font-body);
}
.wh-ghost:hover { border-color: var(--accent-gold); color: var(--text-primary); }

/* ---- narrow: rail becomes a banner above the content ---- */
@media (max-width: 720px) {
  .wh-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .wh-art-rail { min-height: 0; }
  .wh-art-inner { padding: 18px 16px 16px; }
  .wh-brand-img { max-width: 190px; }
  .wh-brand-text span:first-child { font-size: var(--fs-2xl); }
  .wh-brand-text span:last-child  { font-size: var(--fs-2xl); }
  .wh-pane { padding: 18px 18px 0; gap: 12px; }
  .wh-actions { padding: 10px 0 18px; }
  .wh-title { font-size: var(--fs-lg); }
  .wh-away-grid { grid-template-columns: repeat(2, 1fr); }
}

/* legacy — .welcome-cta is still used by renderCodex's "Build your team" button */
.welcome-cta {
  width: 100%; padding: 13px; border-radius: var(--r-sm); border: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; letter-spacing: .04em;
  color: var(--text-on-bright); background: linear-gradient(180deg, var(--gold-pale), var(--accent-gold));
  box-shadow: 0 6px 18px rgba(230,192,106,.35);
}
.welcome-cta:hover { filter: brightness(1.07); }

/* ── v6.3: Codex / Game Guide ─────────────────────────────────────────────── */
.codex-screen { display: flex; flex-direction: column; gap: 12px; }
.codex-cta { max-width: 280px; margin: 0 auto 4px; font-size: var(--fs-md); padding: 11px; }
.codex-search { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--bg-panel); border: 1px solid var(--border-soft); color: var(--text-primary); font-size: var(--fs-sm); }
.codex-search:focus { outline: none; border-color: var(--accent-gold); }
.codex-list { display: flex; flex-direction: column; gap: 10px; }
.codex-section { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-sm); overflow: hidden; }
.codex-section-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  cursor: pointer; user-select: none; appearance: none; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.codex-section-head:hover { background: var(--bg-panel-raised); }
.codex-section-ico { font-size: var(--fs-lg); }
.codex-section-title { font-weight: 700; font-size: var(--fs-md); flex: 1; }
.codex-section-count { font-size: var(--fs-micro); color: var(--text-muted); background: var(--bg-panel-raised); border-radius: var(--r-full); padding: 2px 9px; }
.codex-section-body { padding: 0 14px 8px; }
.codex-entry { border-top: 1px solid var(--border-soft); padding: 4px 0; }
.codex-entry summary { cursor: pointer; padding: 8px 4px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-gold); list-style-position: inside; }
.codex-entry summary:hover { color: var(--text-gold); }
.codex-answer { padding: 4px 8px 12px; font-size: var(--fs-xs); line-height: 1.7; color: var(--text-primary); }
.codex-answer strong { color: var(--text-gold); font-weight: 700; }
.codex-empty { text-align: center; color: var(--text-muted); padding: 30px; }

/* Smooth UI illustration avoids warped grids when 32px/64px sources meet fractional boxes. */
.asset-icon {
  display: inline-block; width: 1em; height: 1em;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  image-rendering: auto; vertical-align: middle;
}
.asset-icon-lg { width: 1.5em; height: 1.5em; }
.buff-chip-icon .asset-icon { width: 1.1em; height: 1.1em; }
.shop-card-icon .asset-icon-lg { width: 2rem; height: 2rem; }
.insp-skill-icon .asset-icon-lg { width: 1.6rem; height: 1.6rem; }

/* ===== v6.4 Batch C — base-gear crafting + weapon class-lock ===== */
.modal-sub { font-size: var(--fs-2xs); color: var(--text-muted, var(--text-overlay-muted)); margin: 2px 0 10px; text-align: center; }
.bp-name-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised, var(--surface-control)); color: var(--text, var(--text-well-primary));
  border: 1px solid var(--border-soft, var(--line-well)); font-size: var(--fs-sm);
}
.bp-name-input:focus { outline: none; border-color: var(--accent-gold, var(--gold-bright)); }
.forge-name-row label { display: block; font-size: var(--fs-2xs); color: var(--text-muted, var(--text-overlay-muted)); margin-bottom: 4px; }
/* v9 Batch C (#6): owned-cores panel in the blueprint designer */
.bp-cores-panel {
  margin: 8px 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.bp-cores-head { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.bp-cores-count { font-weight: 600; color: var(--text-gold); font-family: var(--font-mono); font-size: var(--fs-2xs); }
.bp-cores-empty { font-size: var(--fs-2xs); color: var(--text-muted); }
.bp-cores-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.bp-core-row { padding: 6px 8px; border-radius: var(--r-sm); background: var(--bg-deep); border: 1px solid transparent; }
.bp-core-match { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--bg-deep)); }
.bp-core-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bp-core-name { font-weight: 700; font-size: var(--fs-xs); }
.bp-core-tags { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
.bp-core-usable { color: var(--text-success); font-weight: 700; }
.bp-core-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bp-core-chip {
  font-size: var(--fs-micro); padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--bg-panel); border: 1px solid var(--border-soft); color: var(--text-secondary);
}
.bp-core-chip-eff { color: var(--accent-arcane); border-color: color-mix(in srgb, var(--accent-arcane) 40%, transparent); }

.class-lock-picker { flex-wrap: wrap; gap: 6px; }
.class-lock-btn {
  padding: 5px 10px; border-radius: var(--r-sm); font-size: var(--fs-2xs); cursor: pointer;
  background: var(--bg-panel-raised, var(--surface-control)); color: var(--text, var(--text-well-primary));
  border: 1px solid var(--border-soft, var(--line-well));
}
.class-lock-btn.class-lock-active {
  background: rgba(214,95,138,0.18); border-color: var(--line-class-lock-active); color: var(--text-lock-active);
}
.equip-flow-lock {
  margin: 4px 0 10px; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-xs);
  background: rgba(214,95,138,0.1); border: 1px solid rgba(214,95,138,0.3); color: var(--text-lock);
}
.hero-pick-class { font-size: var(--fs-micro); color: var(--text-muted, var(--text-overlay-muted)); font-weight: 400; }
.hero-pick-btn.hero-pick-blocked { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.6); }
.hero-pick-btn.hero-pick-blocked .hero-pick-current { color: var(--state-danger); }

/* ===== v6.4 Batch D — Ko-fi support button ===== */
.cc-support-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  margin: 4px 10px 14px; padding: 10px 12px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 700; font-size: var(--fs-xs);
  color: var(--text-on-gold-stronger); background: linear-gradient(180deg, var(--fx-support-action-bright), var(--fx-support-action-deep));
  border: 1px solid var(--line-gold); box-shadow: 0 2px 10px rgba(230,178,60,0.25);
  transition: transform 0.1s, box-shadow 0.15s;
}
.cc-support-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(230,178,60,0.4); }
.cc-support-btn:active { transform: translateY(0); }
.cc-support-icon { font-size: var(--fs-md); }

/* ===== v6.5 — audio control panel (control center) ===== */
.cc-audio { margin: 2px 10px 8px; }
.cc-language { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.cc-language-label { flex: 1; color: var(--text-muted); font-size: var(--fs-xs); }
.cc-language-btn {
  min-width: 52px; min-height: 44px; padding: 6px 10px;
  font: inherit; font-size: var(--fs-xs); cursor: pointer;
  border: 1px solid var(--border-active); border-radius: var(--r-sm);
  background: var(--bg-panel-raised); color: var(--text-primary);
}
.cc-language-btn[aria-pressed="true"] {
  background: var(--accent-gold); color: var(--text-primary);
  border-color: var(--accent-gold); font-weight: 700;
}
.cc-language-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
html[lang="th"] .cc-section-label, html[lang="th"] .tk-beta { letter-spacing: normal; }
@media (min-width: 901px) and (max-width: 1500px) {
  .tk-wm-chip { display: none; }
  .tk-logo { min-width: 0; padding: 0 12px; }
  .tk-logo-picture, .tk-logo-img { width: 190px; height: 26px; }
  .tk-topbar-right { gap: 8px; }
}
/* On a narrow phone the beta notice and currencies need separate rows.
   Keep all currencies visible, including the fourth one after Arena unlocks. */
@media (max-width: 600px) {
  :root { --topbar-h: 80px; }
  #topbar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: 44px 28px; column-gap: 6px; padding: 2px 10px 5px;
  }
  .tk-menu-toggle { grid-column: 1; grid-row: 1; margin: 0; }
  .tk-logo { grid-column: 2; grid-row: 1; min-width: 0; height: 40px; padding: 0 4px; }
  .tk-logo-picture, .tk-logo-img { width: 36px; height: 36px; }
  .tk-beta { grid-column: 3; grid-row: 1; margin: 0; padding: 2px 4px; max-width: 116px; white-space: normal; text-align: center; line-height: 1.1; }
  .tk-topbar-resources {
    grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0;
    justify-content: space-evenly; gap: 8px;
  }
}
.cc-audio-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.cc-audio-mute {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--surface-control); border: 1px solid var(--line-well); color: var(--gold-bright);
  font-size: var(--fs-sm); line-height: 1; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.cc-audio-mute:hover { background: var(--surface-well-hover); border-color: var(--line-well-active); }
.cc-audio-slider {
  flex: 1 1 auto; min-width: 0; height: 44px; -webkit-appearance: none; appearance: none;
  background: transparent; border-radius: var(--r-xs); cursor: pointer; outline: none;
}
.cc-audio-slider:disabled { opacity: 0.4; cursor: default; }
.cc-audio-slider::-webkit-slider-runnable-track {
  height: 4px; background: var(--line-well); border-radius: var(--r-xs);
}
.cc-audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: var(--r-full);
  margin-top: -5px;
  background: var(--gold-bright); border: 1px solid var(--line-gold); box-shadow: 0 1px 4px rgba(230,192,106,0.4);
}
.cc-audio-slider::-moz-range-track {
  height: 4px; background: var(--line-well); border-radius: var(--r-xs);
}
.cc-audio-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: var(--r-full); border: 1px solid var(--line-gold); background: var(--gold-bright);
}
.cc-audio-pct { flex: 0 0 auto; width: 34px; text-align: right; font-size: var(--fs-micro); color: var(--text-equipment-muted); font-variant-numeric: tabular-nums; }
.cc-audio-combat { display: flex; align-items: center; min-height: 44px; gap: 6px; font-size: var(--fs-2xs); color: var(--text-audio-muted); cursor: pointer; user-select: none; }
.cc-audio-combat input { accent-color: var(--gold-bright); cursor: pointer; }

/* ===== v6.4 item 12 — static hero cards (stats + exp) ===== */
.cc-hero-stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px;
  font-size: var(--fs-micro); color: var(--text-muted, var(--text-overlay-muted));
}
.cc-hero-stats span { white-space: nowrap; }
.cc-hero-exp { margin-top: 5px; }
.cc-hero-exp .exp-track { height: 5px; }
.cc-hero-exp .exp-label { font-size: var(--fs-micro); margin-top: 2px; color: var(--text-faint, var(--text-well-faint)); }

/* ===== v6.4 item 13 — hero rename edit affordance ===== */
.roster-name-edit {
  background: transparent; border: none; cursor: pointer; font-size: var(--fs-xs);
  padding: 2px 4px; border-radius: var(--r-xs); opacity: 0.65; transition: opacity 0.12s, background 0.12s;
}
.roster-name-edit:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.roster-name-input { border-bottom: 1px dashed rgba(230,192,106,0.35); }
.roster-name-input:focus { border-bottom-color: var(--accent-gold, var(--gold-bright)); }

/* ===== v6.4 item 5 — guide language toggle ===== */
.codex-lang-toggle { display: inline-flex; gap: 2px; margin: 6px 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border-soft, var(--line-well)); width: fit-content; }
.codex-lang-btn { padding: 5px 14px; font-size: var(--fs-2xs); background: var(--bg-panel-raised, var(--surface-control)); color: var(--text-muted, var(--text-overlay-muted)); border: none; cursor: pointer; }
.codex-lang-btn.codex-lang-active { background: var(--accent-gold, var(--gold-bright)); color: var(--text-on-gold-strong); font-weight: 700; }

/* ===== v6.4 items 7&8 — readable combat feed + per-hero damage ===== */
.hdp-panel {
  margin: 6px 8px 8px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised, var(--surface-control)); border: 1px solid var(--border-soft, var(--line-well));
}
.hdp-title { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint, var(--text-well-faint)); margin-bottom: 6px; }
.hdp-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-2xs); }
.hdp-name { flex: 0 0 68px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdp-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: var(--r-xs); overflow: hidden; }
.hdp-bar { display: block; height: 100%; border-radius: var(--r-xs); transition: width 0.3s ease; }
.hdp-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text, var(--text-well-primary)); font-weight: 600; }
.hdp-share { color: var(--text-faint, var(--text-well-faint)); font-weight: 400; font-size: var(--fs-micro); }

/* Feed line structure */
.cf-actor { color: var(--hero-col, var(--text-well-primary)); }
.cf-target { color: var(--text-muted, var(--text-overlay-muted)); }
.cf-verb { color: var(--text-faint, var(--text-combat-verb)); font-size: var(--fs-2xs); margin: 0 2px; }
.cf-verb-skill { color: var(--text-skill); font-weight: 700; }
.cf-verb-heal { color: var(--state-success-bright); font-weight: 700; }
.cf-dmg { color: var(--state-damage); font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-dmg-crit { color: var(--state-danger); }
.cf-crit { color: var(--state-danger); font-weight: 800; font-size: var(--fs-micro); }
.cf-heal { color: var(--state-success-bright); font-weight: 700; }
.cf-dot { font-size: var(--fs-micro); font-weight: 700; padding: 0 4px; border-radius: var(--r-xs); }
.cf-dot-bleed { color: var(--state-danger); } .cf-dot-burn { color: var(--state-damage); } .cf-dot-poison { color: var(--state-success-bright); } .cf-dot-shock { color: var(--accent-info); }

/* ============================================================== */
/* v7.5 Batch A — Dopamine FX (TopBar currency, drops, claims)    */
/* ============================================================== */

/* A1: currency gain glow — one-shot; JS re-adds .res-gain to replay.
   tabular-nums keeps the chip width rock-steady while the count-up runs. */
.tk-resource-val { font-variant-numeric: tabular-nums; }

@keyframes resGainGlow {
  0%   { box-shadow: 0 0 0 0 rgba(224, 178, 60, 0); }
  25%  { box-shadow: 0 0 12px 2px rgba(224, 178, 60, 0.55); border-color: var(--fx-resource-gain); }
  100% { box-shadow: 0 0 0 0 rgba(224, 178, 60, 0); }
}
@keyframes resGainPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.tk-resource.res-gain { animation: resGainGlow 0.9s ease-out; }
.tk-resource.res-gain .tk-resource-icon {
  display: inline-block;
  animation: resGainPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* D11: actionable inventory-full toast — the warning carries its own fix. */
.inv-full-toast {
  position: fixed;
  bottom: 64px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  width: min(92vw, 560px);
  padding: 10px 12px 10px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--danger);
  border-radius: var(--r-md);
  box-shadow: var(--e3);
  z-index: 230;
  animation: dropRevealIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ift-msg { font-size: var(--fs-sm); line-height: 1.5; min-width: 0; font-weight: 600; color: var(--text-primary); }
.ift-fix { flex-shrink: 0; white-space: nowrap; }
.ift-close {
  background: none; border: none; padding: 2px 4px;
  color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer;
}
.ift-close:hover { color: var(--text-primary); }
@media (max-width: 600px) {
  .inv-full-toast { display: grid; grid-template-columns: 1fr auto; }
  .inv-full-toast .ift-msg { grid-column: 1 / -1; }
  .inv-full-toast .ift-fix { justify-self: start; }
}

/* D12: quests batch-claim row */
.qs-claim-all-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
#qs-claim-all { animation: claimPulseSoft 1.1s ease-in-out infinite; }

/* D14: styled item tooltip (desktop hover) — instant, follows the tile. */
.item-tip {
  position: fixed;
  display: none;
  max-width: 280px;
  padding: 9px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: var(--r-sm);
  box-shadow: var(--e3);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-line;
  pointer-events: none;
  z-index: 240;
}

/* A2: rarity drop reveal — spotlight card, top-center under the topbar.
   Rarity colors mirror GEAR_RARITY_INFO in data.js. */
.drop-reveal {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: var(--bg-panel);
  border: 2px solid var(--rar-col, var(--rarity-rare-bright));
  border-radius: var(--r-md);
  box-shadow: 0 4px 18px rgba(30, 36, 48, 0.14), 0 0 16px 1px var(--rar-glow, rgba(93, 173, 226, 0.45));
  z-index: 210;
  animation: dropRevealIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.drop-reveal.drop-rare      { --rar-col: var(--rarity-rare-bright); --rar-glow: rgba(93, 173, 226, 0.45); }
.drop-reveal.drop-epic      { --rar-col: var(--rarity-epic); --rar-glow: rgba(155, 89, 182, 0.50); }
.drop-reveal.drop-legendary { --rar-col: var(--rarity-legendary); --rar-glow: rgba(230, 192, 106, 0.65); }

.drop-reveal-icon { font-size: var(--fs-xl); line-height: 1; }
.drop-reveal-icon-img {
  width: 40px; height: 40px; flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.drop-reveal-body { display: flex; flex-direction: column; }
.drop-reveal-rarity {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rar-col);
}
.drop-reveal-name { font-weight: 700; font-size: var(--fs-sm); color: var(--text-primary); }
/* #7 (2026-07-14): drop reveal now shows the piece's real details */
.drop-reveal-gs { font-size: var(--fs-micro); font-weight: 800; color: var(--text-gold); margin-top: 2px; }
.drop-reveal-stats { font-size: var(--fs-micro); color: var(--text-secondary); margin-top: 1px; }
.drop-reveal-effects { font-size: var(--fs-micro); color: var(--text-effect-info); margin-top: 1px; }

@keyframes dropRevealIn {
  0%   { transform: translate(-50%, -14px) scale(0.75); opacity: 0; }
  100% { transform: translate(-50%, 0)     scale(1);    opacity: 1; }
}
.drop-reveal-out {
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.92);
}

/* Epic+: particle burst radiating from the card (per-spark --sx/--sy from JS) */
.drop-reveal-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--rar-col, var(--rarity-epic));
  pointer-events: none;
  animation: dropSparkFly 0.7s ease-out both;
}
@keyframes dropSparkFly {
  0%   { transform: translate(0, 0)                 scale(1);   opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

/* Legendary: one soft gold wash over the whole screen — brief and gentle,
   never a strobe (respects the light theme). */
.drop-reveal-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(230, 192, 106, 0.34), rgba(230, 192, 106, 0) 65%);
  pointer-events: none;
  z-index: 205;
  animation: dropFlash 0.9s ease-out both;
}
@keyframes dropFlash {
  0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; }
}

/* A3: claim juice — coin/gem dots flying to the TopBar (motion via WAAPI in
   flyRewardToTopbar; this just sizes/layers the dots). */
.fly-reward {
  position: fixed;
  font-size: var(--fs-sm);
  line-height: 1;
  pointer-events: none;
  z-index: 220;
  will-change: transform, opacity;
}

/* A3: mailbox claim buttons pulse like quest CLAIM buttons, but box-shadow
   only — the transform channel stays free so :active press-down still works
   (an animated transform would override it). */
@keyframes claimPulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 192, 106, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(230, 192, 106, 0); }
}
.mail-claim-btn, #mailbox-claim-all { animation: claimPulseSoft 1.1s ease-in-out infinite; }
.mail-claim-btn:active, #mailbox-claim-all:active {
  transform: scale(0.93);
  transition: transform 0.05s ease;
}

/* C9: SVG UI icons — one markup (.ui-ic) sized per slot by its container. */
.ui-ic {
  width: 1.05em; height: 1.05em;
  display: inline-block;
  vertical-align: -0.16em;
}
.cc-menu-icon .ui-ic { width: 17px; height: 17px; display: block; margin: 0 auto; }
.bn-icon .ui-ic      { width: 21px; height: 21px; display: block; }
.tk-resource-icon .ui-ic { width: 15px; height: 15px; display: block; }

/* C8: depth pass — the topbar floats above the page; rows/cards sit on a soft
   shadow with a whisper of vertical gradient so the light theme reads layered
   instead of flat. */
#topbar { box-shadow: var(--e1); position: relative; z-index: 5; }

.qs-row, .mail-row, .trophy-row, .bp-row, .shop-card, .tower-spire,
.card-item, .inv-item-slot {
  box-shadow: var(--e1);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(30, 36, 48, 0.02));
}
/* Rarity tiles keep their glow (their box-shadow is !important by design). */

/* C10: one card language — same corner radius across screens. */
.shop-card, .card-item { border-radius: var(--r-md); }

/* C8: desktop hover lift — pointer devices only, so mobile taps don't stick. */
@media (hover: hover) and (pointer: fine) {
  .qs-row, .mail-row, .trophy-row, .bp-row, .shop-card, .tower-spire,
  .card-item, .inv-item-slot, .btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.14s ease;
  }
  .shop-card:hover, .tower-spire:hover, .mail-row:hover, .trophy-row:hover,
  .qs-row:hover, .card-item:hover, .bp-row:hover, .inv-item-slot:hover {
    transform: translateY(-1px);
    box-shadow: var(--e2);
    border-color: var(--border-active);
  }
  .btn:hover:not(:disabled)  { transform: translateY(-1px); box-shadow: var(--e1); }
  .btn:active:not(:disabled) { transform: translateY(0); }
}

/* B6: screen-change transition — .screen-enter is added by render() only when
   the screen id changes and removed ~280ms later, so partial re-renders never
   replay it. Children animate (not #app itself) to avoid creating a transform
   containing-block around the whole operations zone. */
@keyframes screenEnterChild {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#app.screen-enter > * { animation: screenEnterChild 0.18s ease-out both; }

/* B7: scope layout+paint of the always-animating layers so token movement
   never dirties the rest of the page (all three already clip overflow). */
.dungeon-field, .msim-field, .ambient-field { contain: layout paint; }
#floating-fx-layer { contain: layout style paint; }

/* B7: reduced motion — kill decorative animation globally; hide pure-decor
   particles outright (their cleanup uses timeouts, not animationend). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fly-reward, .drop-reveal-spark, .drop-reveal-flash { display: none !important; }
}

/* A4: near-miss shine — a white gleam sweeps any progress fill that's ≥90%.
   Implemented as an animated background-image so it layers over the fill's
   existing background-color without touching layout (paint-only). Appended
   last in the file so its background-image wins over `background:` shorthands
   on the fill classes. */
.bar-shine {
  background-image: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 75%);
  background-size: 44px 100%;
  background-repeat: no-repeat;
  background-position: -44px 0;
  animation: barShineSweep 1.5s ease-in-out infinite;
}
@keyframes barShineSweep {
  0%        { background-position: -44px 0; }
  55%, 100% { background-position: calc(100% + 44px) 0; }
}


/* ── FX expansion: 9 more projectile shapes (pure CSS, no art) ─────────────── */
@keyframes projSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sim-proj-wrench { width:10px;height:10px;border-radius:var(--r-xs);background:linear-gradient(45deg,var(--fx-metal-base) 40%,var(--fx-metal-highlight) 60%);box-shadow:0 0 4px rgba(200,210,220,.7); animation: projSpin 0.4s linear infinite; }
.sim-proj-note { width:8px;height:8px;border-radius:var(--r-full) var(--r-full) var(--r-full) 0;background:var(--fx-projectile-note);box-shadow:0 0 6px rgba(199,125,255,.9); }
.sim-proj-packet { width:9px;height:7px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--fx-projectile-packet-deep),var(--fx-projectile-packet-highlight));box-shadow:0 0 5px rgba(62,201,167,.8); }
.sim-proj-seed { width:7px;height:9px;border-radius:var(--r-full) var(--r-full) var(--r-full) var(--r-full);background:var(--fx-projectile-organic);box-shadow:0 0 4px rgba(106,176,76,.8); }
.sim-proj-ember { width:8px;height:8px;border-radius:var(--r-full);background:radial-gradient(circle,var(--fx-ember-highlight) 20%,var(--fx-projectile-ember) 60%,transparent 78%);box-shadow:0 0 7px rgba(224,114,43,.95); }
.sim-proj-laser { width:22px;height:2px;background:linear-gradient(90deg,transparent,var(--fx-projectile-danger-bright),var(--fx-highlight));box-shadow:0 0 6px rgba(255,107,107,.95); }
.sim-proj-star { width:9px;height:9px;background:var(--gold-bright);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);box-shadow:0 0 6px rgba(230,192,106,.9); animation: projSpin 0.4s linear infinite; }
.sim-proj-cleaver { width:12px;height:6px;border-radius:var(--r-xs) var(--r-xs) var(--r-xs) var(--r-xs);background:linear-gradient(180deg,var(--fx-metal-highlight) 55%,var(--fx-metal-handle) 55%);box-shadow:0 0 4px rgba(216,222,228,.7); animation: projSpin 0.4s linear infinite; }
.sim-proj-foamball { width:11px;height:11px;border-radius:var(--r-full);background:radial-gradient(circle,var(--fx-highlight) 30%,var(--fx-projectile-foam) 65%,transparent 80%);box-shadow:0 0 6px rgba(191,227,245,.85); }

/* Two more melee shapes so blunt / blade / thrust / sweep read apart. */
.sim-slash-stab::before {
  width: 26px; height: 4px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, transparent, var(--fx-slash-stab) 70%, var(--fx-highlight));
}
.sim-slash-sweep::before {
  width: 40px; height: 14px; border-radius: var(--r-full);
  border: 3px solid var(--fx-slash-sweep); border-top-color: transparent; border-left-color: transparent;
  background: transparent;
}
@keyframes simStab {
  0%   { opacity: 0; transform: translateX(-10px) rotate(var(--slash-rot, 0deg)) scaleX(0.4); }
  40%  { opacity: 1; transform: translateX(0) rotate(var(--slash-rot, 0deg)) scaleX(1.15); }
  100% { opacity: 0; transform: translateX(6px) rotate(var(--slash-rot, 0deg)) scaleX(0.9); }
}
@keyframes simSweep {
  0%   { opacity: 0; transform: rotate(calc(var(--slash-rot, 0deg) - 70deg)) scale(0.7); }
  45%  { opacity: 1; transform: rotate(var(--slash-rot, 0deg)) scale(1.15); }
  100% { opacity: 0; transform: rotate(calc(var(--slash-rot, 0deg) + 70deg)) scale(1.2); }
}
.sim-slash-stab  { animation: simStab  0.26s ease-out forwards; }
.sim-slash-sweep { animation: simSweep 0.34s ease-out forwards; }

/* Shop card artwork - the tile used to hold an emoji, so give the image a box. */
.shop-card-art { display:inline-block; width:44px; height:44px; background-size:100% 100%; background-repeat:no-repeat; image-rendering:pixelated; }


/* ── Skill-tree / talent rank rings ────────────────────────────────────────────
   The rank ring is CSS, not art. Asking image_gen for "a ring, not a filled disc"
   kept coming back as a white plate behind the symbol, so the icons are now
   symbol-only and the ring is drawn here. Bonus: it tracks --pst-col live, so a
   branch recolour needs no re-render. */
.pst-node-asset { position: relative; }
.pst-node-notable .pst-node-asset::after,
.pst-node-keystone .pst-node-asset::after {
  content: ''; position: absolute; inset: -3px; border-radius: var(--r-full);
  border: 2px solid color-mix(in srgb, var(--pst-col, var(--line-keystone)) 75%, transparent);
  pointer-events: none;
}
.pst-node-keystone .pst-node-asset::after {
  inset: -4px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--pst-col, var(--accent-gold));
  box-shadow: 0 0 7px color-mix(in srgb, var(--pst-col, var(--gold-bright)) 55%, transparent),
              inset 0 0 4px color-mix(in srgb, var(--pst-col, var(--gold-bright)) 35%, transparent);
}
/* Keystones also get two side spikes so the top tier reads at a glance. */
.pst-node-keystone .pst-node-asset::before {
  content: ''; position: absolute; inset: -4px; pointer-events: none;
  border-left: 3px solid var(--pst-col, var(--accent-gold));
  border-right: 3px solid var(--pst-col, var(--accent-gold));
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  border-radius: var(--r-full); transform: rotate(45deg);
}

/* ================================================================= §Raid
   One boss, one HP bar, three live simulations side by side. The lanes are a
   grid on desktop and a stack on mobile; each lane hosts a real sim field. */

.raid-lobby { display: flex; flex-direction: column; gap: 12px; }
.rd-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 12px 16px;
}
.rd-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); }
.rd-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.rd-runs {
  margin-left: auto; text-align: right; font-size: var(--fs-micro); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rd-runs strong { display: block; font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--text-gold); }

.rd-pending {
  background: rgba(184,134,11,0.12); border: 1px solid var(--accent-gold);
  color: var(--text-gold); font-weight: 700; font-size: var(--fs-xs);
  border-radius: var(--r-sm); padding: 9px 14px; cursor: pointer; text-align: left;
}

.rd-squads { display: flex; gap: 8px; flex-wrap: wrap; }
.rd-squad {
  flex: 1 1 160px; display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.rd-squad-empty { opacity: 0.55; }
.rd-squad-label { font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rd-squad-none { font-size: var(--fs-micro); color: var(--text-faint); font-style: italic; }
.rd-faces { display: flex; gap: 4px; margin-left: auto; }
.rd-face { width: 32px; height: 32px; border-radius: var(--r-xs); text-align: center; }
.rd-face-sprite { image-rendering: pixelated; background-color: rgba(0,0,0,0.12); }

.rd-cards { display: flex; flex-direction: column; gap: 8px; }
.rd-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.rd-card:hover { border-color: var(--border-active); }
.rd-locked { opacity: 0.55; }
.rd-card-icon { font-size: var(--fs-2xl); width: 44px; text-align: center; }
.rd-boss-art-wrap { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; }
.rd-boss-art { display: block; width: 64px; height: 64px; }
.rd-card-body { flex: 1; min-width: 0; }
.rd-card-name { font-weight: 800; font-size: var(--fs-md); color: var(--text-primary); }
.rd-card-desc { font-size: var(--fs-2xs); color: var(--text-muted); margin: 2px 0 4px; }
.rd-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--text-faint); font-family: var(--font-mono); }
.rd-best { color: var(--text-gold); font-weight: 700; }
/* v12: a rift scales to the player, so the card prints its live power. */
.rd-scaled { font-style: normal; color: var(--text-info); opacity: 0.85; }
.rd-threat { color: var(--danger); }
.rd-run-power { display: block; font-style: normal; font-size: var(--fs-micro); color: var(--text-info); font-family: var(--font-mono); }
.rd-req { color: var(--danger); }
.rd-start {
  flex-shrink: 0; background: var(--accent-ember); color: var(--text-on-well); border: none;
  border-radius: var(--r-sm); padding: 9px 16px; font-weight: 800; font-size: var(--fs-xs); cursor: pointer;
}
.rd-start:disabled { background: var(--bg-hover); color: var(--text-faint); cursor: not-allowed; }

/* ---- live run ---- */
.raid-run { display: flex; flex-direction: column; gap: 10px; }
.rd-run-top {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 14px;
}
.rd-run-boss { flex: 1; font-weight: 800; font-size: var(--fs-md); color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.rd-run-icon { font-size: var(--fs-xl); }
.rd-timer { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); }
.rd-timer-low { color: var(--danger); animation: rd-pulse 1s ease-in-out infinite; }
@keyframes rd-pulse { 50% { opacity: 0.45; } }
.rd-retreat {
  background: transparent; border: 1px solid var(--border-active); color: var(--text-secondary);
  border-radius: var(--r-sm); padding: 7px 12px; font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}

.rd-pool {
  position: relative; height: 30px; border-radius: var(--r-sm);
  background: var(--bg-deep); border: 1px solid var(--border-soft); overflow: hidden;
}
.rd-pool-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--meter-danger-deep), var(--accent-ember));
  transition: width 0.25s linear;
}
.rd-pool-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-primary); text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

.rd-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rd-lane {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 8px;
}
.rd-lane-down { opacity: 0.5; filter: grayscale(0.8); }
.rd-lane-head { display: flex; align-items: baseline; gap: 8px; }
.rd-lane-name { font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rd-lane-dmg { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--text-ember); }
.rd-lane-field { position: relative; }
.rd-lane-field .dungeon-field { height: 220px; min-height: 220px; max-height: 240px; margin-bottom: 0; }
.rd-lane-roster { font-size: var(--fs-micro); color: var(--text-faint); text-align: center; }

/* ---- report ---- */
.raid-result { display: flex; justify-content: center; padding: 14px 0; }
.rd-res-card {
  width: 100%; max-width: 480px; background: var(--bg-panel);
  border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 22px;
}
.rd-res-title { font-size: var(--fs-lg); font-weight: 800; text-align: center; color: var(--text-primary); }
.rd-res-win { color: var(--text-gold); }
.rd-res-pct { text-align: center; font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: 800; color: var(--text-ember); margin-top: 6px; }
.rd-res-best { font-size: var(--fs-micro); color: var(--text-gold); vertical-align: middle; }
.rd-res-sub { text-align: center; font-size: var(--fs-2xs); color: var(--text-faint); margin-bottom: 14px; }
.rd-res-lanes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.rd-res-lane { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); color: var(--text-secondary); }
.rd-res-lane strong { margin-left: auto; font-family: var(--font-mono); color: var(--text-ember); }
.rd-res-names { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-res-rewards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rd-chip {
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-full); padding: 4px 10px; font-size: var(--fs-2xs); color: var(--text-secondary);
}
.rd-res-level { font-size: var(--fs-2xs); color: var(--text-success); font-weight: 700; margin-bottom: 10px; }
.rd-res-actions { display: flex; gap: 8px; }
.rd-btn {
  flex: 1; padding: 10px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-xs);
  border: 1px solid var(--border-active); background: var(--bg-panel-raised); color: var(--text-secondary); cursor: pointer;
}
.rd-btn-primary { background: var(--accent-ember); border-color: var(--accent-ember); color: var(--text-on-well); }
.rd-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 900px) {
  .rd-lanes { grid-template-columns: 1fr; }
  .rd-lane-field .dungeon-field { height: 180px; min-height: 180px; max-height: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v10 — Stage & Tower redesign
   ---------------------------------------------------------------------------
   Both screens were flat stacks of same-weight white panels: every element
   competed, nothing led, and the Tower spent three quarters of its height on
   greyed-out locked rows. The rework gives each screen ONE hero block that
   answers "where am I / what do I face / what do I press", then supporting
   panels underneath. Same light dashboard theme and the same tokens — depth
   and hierarchy do the work, not new colour. The region/spire accent is passed
   in per-element as --zone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- shared: element colour set (light/dark/void were missing entirely) ---- */
.element-light { background: var(--element-light-fill); color: var(--element-light-text); border-color: color-mix(in srgb, var(--element-light-text) 38%, var(--element-light-fill)); }
.element-dark  { background: var(--element-dark-fill);  color: var(--element-dark-text);  border-color: color-mix(in srgb, var(--element-dark-text) 38%, var(--element-dark-fill)); }
.element-void  { background: var(--element-void-fill);  color: var(--element-void-text);  border-color: color-mix(in srgb, var(--element-void-text) 38%, var(--element-void-fill)); }

/* ══════════════════════════════ STAGE ══════════════════════════════ */

.oc2-screen { display: flex; flex-direction: column; gap: 12px; }

/* ---- hero briefing card ----
   This card IS the Stage screen. The stage-select grid that used to sit under
   it is gone, so everything needed to commit to a run reads top-to-bottom in
   one block: place → number → threat → readiness → loop mode → GO. */
.oc2-hero {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--zone) 12%, var(--surface-panel)) 0%, var(--bg-panel) 46%);
  box-shadow: var(--e3);
  padding: 18px 20px 20px;
  overflow: hidden;
}
/* Accent rule along the top edge — the one place the region colour is loud. */
.oc2-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--zone), color-mix(in srgb, var(--zone) 30%, transparent));
}
/* A very faint oversized region glyph bleeding off the right edge gives the
   card some atmosphere without costing an asset or hurting legibility. */
.oc2-hero::after {
  content: ''; position: absolute; top: -30px; right: -20px;
  width: 190px; height: 190px; border-radius: var(--r-full);
  background: radial-gradient(circle, color-mix(in srgb, var(--zone) 16%, transparent) 0%, transparent 68%);
  pointer-events: none;
}
.oc2-hero > * { position: relative; }

/* ── band 1: place ── */
.oc2-hero-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.oc2-hero-crest {
  font-size: var(--fs-2xl); line-height: 1;
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--zone) 35%, var(--border-soft));
  box-shadow: var(--e1);
}
.oc2-hero-place { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.oc2-hero-region {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: 0.04em; color: var(--zone); line-height: 1.15;
}
.oc2-hero-tier { font-size: var(--fs-2xs); color: var(--text-muted); }
.oc2-hero-badge {
  margin-left: auto; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: var(--r-full);
}
.oc2-hero-badge.is-farming  { background: rgba(46,124,196,0.14); color: var(--text-info); }
.oc2-hero-badge.is-frontier { background: rgba(184,134,11,0.18); color: var(--text-gold); }

/* Region completion — the number gets a scale it never had. */
.oc2-hero-regionbar {
  height: 4px; margin: 10px 0 0; border-radius: var(--r-full);
  background: var(--bg-hover); overflow: hidden;
}
.oc2-hero-regionfill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--zone) 55%, var(--fx-highlight)), var(--zone));
  transition: width .35s cubic-bezier(.22,.8,.3,1);
}

/* ── band 2: the number + the briefing ── */
.oc2-hero-main {
  display: flex; align-items: stretch; gap: 18px;
  margin: 14px 0 0; flex-wrap: wrap;
}

/* The plaque makes the stage number an object, not a label. */
.oc2-hero-plaque {
  flex-shrink: 0; width: 176px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 12px 11px; border-radius: var(--r-md);
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--zone) 28%, var(--border-soft));
  box-shadow: var(--e1);
}
.oc2-hero-kicker {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.28em;
  color: var(--text-faint); padding-left: 0.28em;
}
.oc2-hero-num {
  font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700;
  line-height: 0.98; color: var(--text-primary); letter-spacing: 0.01em;
}
.oc2-hero-steps { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.oc2-step {
  width: 34px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  color: var(--text-primary); font-size: var(--fs-lg); font-weight: 700; line-height: 1;
  transition: background .12s, transform .12s, border-color .12s;
}
.oc2-jump {
  height: 30px; padding: 0 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  color: var(--text-muted); font-size: var(--fs-micro); font-weight: 700; font-family: var(--font-mono);
  cursor: pointer; transition: background .12s, transform .12s, border-color .12s, color .12s;
}
.oc2-step:hover:not([disabled]), .oc2-jump:hover:not([disabled]) {
  background: var(--bg-hover); border-color: var(--zone); transform: translateY(-1px);
}
.oc2-jump:hover:not([disabled]) { color: var(--text-primary); }
.oc2-step[disabled], .oc2-jump[disabled] { opacity: 0.3; cursor: not-allowed; }
/* One tap back to the only stage that can advance your record. */
.oc2-jump-wide {
  width: 100%; margin-top: 5px; height: 28px;
  background: color-mix(in srgb, var(--accent-gold) 14%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--border-soft));
  color: var(--text-gold); font-family: var(--font-body); font-size: var(--fs-micro);
}
.oc2-jump-wide:hover:not([disabled]) {
  background: color-mix(in srgb, var(--accent-gold) 22%, var(--bg-panel));
  border-color: var(--accent-gold); color: var(--text-gold);
}

/* ── the briefing column ── */
.oc2-hero-brief { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 9px; }
.oc2-brief-row { display: flex; flex-direction: column; gap: 4px; }
.oc2-brief-k {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.oc2-brief-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc2-el-crest {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: var(--r-full); border: 1px solid transparent;
  font-size: var(--fs-xs); font-weight: 700;
}
.oc2-el-vs { font-size: var(--fs-micro); color: var(--text-faint); font-style: italic; }

/* Monsters read as named cards now — an emoji row alone was decoration. */
.oc2-mons { display: flex; gap: 5px; flex-wrap: wrap; }
.oc2-mon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 5px; border-radius: var(--r-full);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary);
}
.oc2-mon i { font-style: normal; font-size: var(--fs-md); line-height: 1; }
.oc2-mon .oc2-mon-art { display: inline-block; width: 32px; height: 32px; flex-shrink: 0; }
.oc2-mon.is-more {
  padding: 3px 9px; font-family: var(--font-mono);
  color: var(--text-faint); background: var(--bg-panel-raised);
}

/* ---- readiness meter ---- */
.oc2-ready {
  margin-top: 1px; padding: 11px 13px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.oc2-ready-head { display: flex; align-items: baseline; justify-content: space-between; }
.oc2-ready-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.oc2-ready-verdict { font-size: var(--fs-sm); font-weight: 800; }
.oc2-ready-track {
  position: relative; height: 11px; margin: 8px 0 7px;
  background: var(--bg-hover); border-radius: var(--r-full); overflow: hidden;
}
/* The "Balanced" window (GS ratio 0.85–1.15) is drawn ON the track, so the
   fill reads as a position against a target instead of a bare percentage.
   Track spans ratio 0–1.5, so 0.85 sits at 56.7% and 1.15 at 76.7%. */
.oc2-ready-band {
  position: absolute; top: 0; bottom: 0;
  left: 56.7%; right: 23.3%;
  background: rgba(46,158,91,0.16);
  border-left: 1px dashed rgba(46,158,91,0.55);
  border-right: 1px dashed rgba(46,158,91,0.55);
}
.oc2-ready-fill {
  position: relative; height: 100%; border-radius: var(--r-full);
  transition: width .35s cubic-bezier(.22,.8,.3,1);
}
/* The bare .power-badge-* rules above add a pill border + their own colours;
   these win on specificity, and the explicit border:0 stops that pill outline
   from leaking onto a progress fill and a bare text verdict. */
.oc2-ready-fill.power-badge-under,
.oc2-ready-fill.power-badge-balanced,
.oc2-ready-fill.power-badge-over,
.oc2-ready-verdict.power-badge-under,
.oc2-ready-verdict.power-badge-balanced,
.oc2-ready-verdict.power-badge-over { border: 0; background: none; }
.oc2-ready-fill.power-badge-under    { background: linear-gradient(90deg, var(--meter-danger-start), var(--danger)); }
.oc2-ready-fill.power-badge-balanced { background: linear-gradient(90deg, var(--meter-success-start), var(--success)); }
.oc2-ready-fill.power-badge-over     { background: linear-gradient(90deg, var(--meter-info-start), var(--accent-info)); }
.oc2-ready-verdict.power-badge-under    { color: var(--danger); }
.oc2-ready-verdict.power-badge-balanced { color: var(--text-success); }
.oc2-ready-verdict.power-badge-over     { color: var(--text-info); }
.oc2-ready-foot {
  display: flex; justify-content: space-between;
  font-size: var(--fs-micro); color: var(--text-muted);
}
.oc2-ready-foot b { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }
.oc2-ready-note {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-soft);
  font-size: var(--fs-micro); color: var(--text-muted);
}

/* ---- mode selector + primary CTA ---- */
.oc2-modes { margin-top: 14px; }
.oc2-go {
  width: 100%; margin-top: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent-ember), var(--fx-action-ember-strong));
  color: var(--text-on-well); box-shadow: var(--e2);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.oc2-go-main { font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.02em; }
.oc2-go-sub  { font-size: var(--fs-micro); opacity: 0.85; font-weight: 600; }
.oc2-go:hover  { transform: translateY(-1px); box-shadow: var(--e3); filter: brightness(1.04); }
.oc2-go:active { transform: translateY(0); filter: brightness(0.95); }

/* ---- supporting panels ---- */
.oc2-panel {
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); box-shadow: var(--e1);
  padding: 12px 14px;
}
.oc2-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.oc2-panel-title {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.oc2-panel-note { font-size: var(--fs-micro); color: var(--text-muted); flex: 1; }

/* ---- rewards ---- */
.oc2-loot { display: flex; gap: 8px; flex-wrap: wrap; }
.oc2-loot-big {
  flex: 1; min-width: 130px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.oc2-loot-ico { font-size: var(--fs-lg); }
.oc2-loot-big b { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.oc2-loot-unit { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.oc2-loot-gold { border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--border-soft)); }
.oc2-loot-exp  { border-color: color-mix(in srgb, var(--success) 30%, var(--border-soft)); }
.oc2-loot-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.oc2-loot-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); padding: 3px 9px 3px 4px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-secondary);
}
/* Real material artwork on the chip. materialIconCss returns a background
   image/position pair, so the element only supplies the box it draws into. */
.oc2-chip-art {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: var(--r-full);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
}
.oc2-chip-art-none { background: var(--bg-panel); }
.oc2-loot-chip.rarity-chip-uncommon  { border-color: rgba(88,214,141,0.45); }
.oc2-loot-chip.rarity-chip-rare      { border-color: rgba(93,173,226,0.55); color: var(--rarity-rare-text-bright); }
.oc2-loot-chip.rarity-chip-epic      { border-color: rgba(155,89,182,0.6);  color: var(--rarity-epic-text-bright); }
.oc2-loot-chip.rarity-chip-legendary { border-color: rgba(230,192,106,0.7); color: var(--rarity-legendary); }
.oc2-loot-chip.rarity-chip-mythic    { border-color: rgba(231,76,60,0.7);   color: var(--rarity-mythic-text-bright); }
.oc2-loot-chip b { font-family: var(--font-mono); color: var(--text-primary); }
.oc2-loot-chip.is-bonus {
  background: rgba(106,75,208,0.10); border-color: rgba(106,75,208,0.32);
  color: var(--accent-arcane); font-weight: 700;
}
.oc2-loot-sub {
  margin-top: 10px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
.oc2-loot-sub + .oc2-loot-chips { margin-top: 5px; }
.oc2-panel .oc-decay-row { margin-top: 9px; }

/* ══════════════════════════════ TOWER ══════════════════════════════ */

.tw2-screen { display: flex; flex-direction: column; gap: 12px; }

.tw2-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.tw2-title-wrap { flex: 1; min-width: 150px; display: flex; flex-direction: column; }
.tw2-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-primary); margin: 0; }
.tw2-sub   { font-size: var(--fs-micro); color: var(--text-muted); }
.tw2-cur {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.tw2-cur b { font-family: var(--font-mono); font-weight: 700; }
.tw2-cur-marks b { color: var(--text-gold); }
.tw2-cur-dia   b { color: var(--text-info); }
.tw2-cur-rev   b { color: var(--danger); }

.tw2-btn {
  padding: 7px 14px; border-radius: var(--r-sm); border: none;
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-arcane), var(--accent-gold)); color: var(--text-on-well);
  box-shadow: var(--e1); transition: transform .12s, filter .12s;
}
.tw2-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tw2-btn-ghost {
  padding: 7px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-active); background: var(--bg-panel);
  color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.tw2-btn-ghost:hover { background: var(--bg-hover); }
.tw2-shop { background: linear-gradient(135deg, var(--accent-gold), var(--fx-gold-action-deep)); }

/* ---- background-run strip ---- */
.tw2-running {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-info) 9%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent-info) 34%, var(--border-soft));
}
.tw2-running-dot { font-size: var(--fs-lg); animation: buffChipWarn 1.4s ease-in-out infinite; }
.tw2-running-txt { display: flex; flex-direction: column; flex: 1; }
.tw2-running-txt b    { font-size: var(--fs-xs); color: var(--text-primary); }
.tw2-running-txt span { font-size: var(--fs-micro);  color: var(--text-muted); }

/* ---- featured spire ---- */
.tw2-hero {
  display: flex; gap: 16px;
  padding: 16px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(106,75,208,0.07) 0%, var(--bg-panel) 46%);
  border: 1px solid var(--border-soft); box-shadow: var(--e2);
}
/* Left column IS the tower: an icon above a vertical fill rail. This screen is
   about height, so the progress indicator is vertical, not another flat bar. */
.tw2-hero-left { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 54px; flex-shrink: 0; }
.tw2-hero-ico  { font-size: var(--fs-2xl); line-height: 1; }
.tw2-hero-rail {
  position: relative; flex: 1; min-height: 92px; width: 12px;
  border-radius: var(--r-full); background: var(--bg-hover);
  border: 1px solid var(--border-soft); overflow: hidden;
  display: flex; align-items: flex-end;
}
/* --rail is set inline as a percentage; it drives HEIGHT while the rail is
   vertical and WIDTH once the media query lays it out horizontally, so one
   value serves both orientations. */
.tw2-hero-rail-fill {
  width: 100%; height: var(--rail, 0%);
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-arcane));
  border-radius: var(--r-full); transition: height .4s cubic-bezier(.22,.8,.3,1), width .4s cubic-bezier(.22,.8,.3,1);
}
.tw2-hero-railcap { font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-faint); }

.tw2-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tw2-hero-name {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tw2-card-mult {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
  background: rgba(184,134,11,0.14); color: var(--text-gold);
}
.tw2-hero-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.tw2-stat { display: flex; flex-direction: column; gap: 1px; }
.tw2-stat-k {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
.tw2-stat b { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--text-primary); }

/* ---- milestone ladder ---- */
.tw2-milestones {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.tw2-ms { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); }
.tw2-ms-ico   { min-width: 16px; text-align: center; white-space: nowrap; }
.tw2-ms-floor { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); min-width: 34px; }
.tw2-ms-label { font-weight: 700; color: var(--text-secondary); min-width: 122px; }
.tw2-ms-note  { color: var(--text-muted); flex: 1; }
.tw2-ms-away  { font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-faint); }
/* The nearest milestone is the one you are actually chasing. */
.tw2-ms:first-child .tw2-ms-floor,
.tw2-ms:first-child .tw2-ms-label { color: var(--text-gold); }

.tw2-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tw2-go {
  flex: 1; min-width: 180px; padding: 11px 16px;
  border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent-arcane), var(--accent-gold));
  color: var(--text-on-well); font-size: var(--fs-sm); font-weight: 800; cursor: pointer;
  box-shadow: var(--e2); transition: transform .12s, box-shadow .12s, filter .12s;
}
.tw2-go:hover  { transform: translateY(-1px); box-shadow: var(--e3); filter: brightness(1.05); }
.tw2-go:active { transform: translateY(0); }

/* ---- floor-modifier briefing ---- */
.tw2-brief {
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
  border-left: 3px solid var(--border-active);
}
.tw2-brief.is-warn { border-left-color: var(--accent-ember); background: color-mix(in srgb, var(--accent-ember) 5%, var(--bg-panel)); }
.tw2-brief.is-good { border-left-color: var(--success);      background: color-mix(in srgb, var(--success) 6%, var(--bg-panel)); }
.tw2-brief-head {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px;
}
.tw2-brief-body { display: flex; gap: 10px; align-items: flex-start; }
.tw2-brief-ico  { font-size: var(--fs-xl); line-height: 1.1; }
.tw2-brief-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); }
.tw2-brief-desc { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 1px; }

/* ---- floor rhythm legend ---- */
.tw2-rhythm {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border-radius: var(--r-md);
  background: var(--bg-panel-raised); border: 1px dashed var(--border-active);
  font-size: var(--fs-micro); color: var(--text-muted);
}
.tw2-rhythm-title {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.tw2-rhythm-item b { font-family: var(--font-mono); color: var(--text-primary); }
.tw2-rhythm-note { flex-basis: 100%; font-size: var(--fs-micro); color: var(--text-faint); font-style: italic; }

/* ---- other spires ---- */
.tw2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.tw2-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.tw2-card.is-locked { background: var(--bg-panel-raised); opacity: 0.78; }
.tw2-card-ico  { font-size: var(--fs-xl); }
.tw2-card-info { flex: 1; min-width: 0; }
.tw2-card-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tw2-card-sub  { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }
.tw2-card-actions { display: flex; flex-direction: column; gap: 5px; }
/* A locked spire now shows how far you are, not just that you cannot enter. */
.tw2-lock-track { height: 4px; margin-top: 5px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; }
.tw2-lock-fill  { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent-gold), var(--accent-ember)); }

/* ---- responsive ---- */
@media (max-width: 780px) {
  .oc2-hero { padding: 14px 14px 16px; }
  .oc2-hero-main { gap: 12px; }
  .oc2-hero-plaque { width: 100%; }
  .oc2-hero-num { font-size: var(--fs-4xl); }
  .oc2-hero-brief { min-width: 0; }
  .tw2-hero { flex-direction: column; }
  .tw2-hero-left { flex-direction: row; width: auto; align-items: center; }
  .tw2-hero-rail { min-height: 0; height: 12px; width: auto; flex: 1; align-items: stretch; }
  .tw2-hero-rail-fill { height: 100%; width: var(--rail, 0%); background: linear-gradient(90deg, var(--accent-gold), var(--accent-arcane)); }
  .tw2-ms-note { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v10 — Refine redesign
   ---------------------------------------------------------------------------
   The old screen put a 30-row picker first and the actual anvil below the fold,
   then answered the four questions that matter (how far along · what do I gain ·
   what are the odds · can I afford it) in one 0.8rem grey column. The rework
   inverts it: the ANVIL is the page, the picker is a strip under it, and each
   of those four questions gets its own block sized to how much it matters.
   Prefix rf-*, same light dashboard tokens as oc2-/tw2-.
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-screen { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- the anvil */
.rf-anvil {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(184,134,11,0.09) 0%, var(--bg-panel) 44%);
  box-shadow: var(--e3);
  overflow: hidden;
}
.rf-anvil::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), rgba(184,134,11,0.25));
}
.rf-anvil-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 20px; text-align: center;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.rf-anvil-empty::first-line { font-size: var(--fs-2xl); }

/* ---- identity ---- */
.rf-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.rf-art {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: var(--r-md);
  border: 2px solid var(--border-soft); background-color: var(--bg-panel-raised);
  background-repeat: no-repeat; background-position: center;
  box-shadow: var(--e1);
}
.rf-art-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); }
.rf-head-txt { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.rf-name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; }
.rf-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--text-muted); }
.rf-meta > span {
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.rf-meta-eq { color: var(--text-gold); font-weight: 700; }
.rf-effs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.rf-eff {
  font-size: var(--fs-micro); font-weight: 700; padding: 1px 7px; border-radius: var(--r-full);
  background: rgba(184,134,11,0.12); color: var(--text-gold);
}

/* The current level is the headline number of this screen. */
.rf-level {
  margin-left: auto; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 8px 16px; border-radius: var(--r-md);
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, var(--border-soft));
  box-shadow: var(--e1);
}
.rf-level b {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700;
  color: var(--text-gold);
}
.rf-level-next { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.08em; color: var(--text-faint); margin-top: 2px; }
.rf-level.is-max b { color: var(--text-success); }

/* ---- the 0→15 journey ---- */
.rf-track-wrap {
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.rf-track-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 9px;
}
.rf-track-head b { font-family: var(--font-mono); color: var(--text-primary); font-size: var(--fs-sm); }
.rf-track-goal b { color: var(--text-gold); }
/* 15 pips. Milestones are taller and carry the RUNNING TOTAL (30/65/100%), which
   is the number the old "+5 ✦ +10%" chips got wrong. */
.rf-track { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.rf-pip {
  position: relative; flex: 1; height: 13px; border-radius: var(--r-xs);
  background: var(--bg-hover); border: 1px solid var(--border-soft);
  transition: background .2s, transform .2s;
}
.rf-pip.is-mile { height: 30px; border-radius: var(--r-xs); }
.rf-pip.is-mile i {
  position: absolute; left: 50%; top: 3px; transform: translateX(-50%);
  font-style: normal; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700;
  color: var(--text-faint); letter-spacing: -0.02em;
}
.rf-pip.is-done {
  background: linear-gradient(180deg, var(--gold), var(--accent-gold));
  border-color: var(--accent-gold);
}
.rf-pip.is-done i { color: var(--text-on-gold-muted); }
.rf-pip.is-next {
  background: color-mix(in srgb, var(--accent-gold) 22%, var(--bg-panel));
  border-color: var(--accent-gold);
  animation: rfPipNext 1.6s ease-in-out infinite;
}
@keyframes rfPipNext {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,11,0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(184,134,11,0); }
}

/* ---- what the press buys ---- */
.rf-gain {
  padding: 12px 13px; border-radius: var(--r-sm);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
}
.rf-gain-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px;
}
.rf-gain-pct { font-size: var(--fs-sm); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.rf-gain-pct b { color: var(--text-success); }
.rf-mile-flag {
  font-size: var(--fs-micro); letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--r-full);
  background: rgba(184,134,11,0.18); color: var(--text-gold);
}
/* Base → Now → After as real columns. It used to be an inline text run:
   "DEF +33→34 · HP +130→135". */
.rf-stats { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.rf-stats thead th {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); text-align: right; padding-bottom: 4px;
}
.rf-stats thead th:first-child { text-align: left; }
.rf-stats tbody th {
  text-align: left; font-weight: 800; color: var(--text-secondary);
  font-size: var(--fs-micro); letter-spacing: 0.04em; padding: 4px 0;
}
.rf-stats td {
  text-align: right; font-family: var(--font-mono); color: var(--text-muted); padding: 4px 0 4px 12px;
}
.rf-stats tbody tr + tr th, .rf-stats tbody tr + tr td { border-top: 1px solid var(--border-soft); }
.rf-after { color: var(--text-primary) !important; font-weight: 700; }
.rf-delta { color: var(--text-success); font-size: var(--fs-micro); }
.rf-nostats { font-size: var(--fs-2xs); color: var(--text-muted); font-style: italic; }

/* ---- odds + cost, weighted equally, side by side ---- */
.rf-decide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rf-risk, .rf-cost {
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.rf-risk-top { display: flex; align-items: baseline; gap: 8px; }
.rf-risk-pct { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; line-height: 1; }
.rf-risk-word { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.rf-risk-track { height: 6px; margin: 8px 0 7px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; }
.rf-risk-fill { height: 100%; border-radius: var(--r-full); transition: width .3s; }
.rf-risk-fail { font-size: var(--fs-micro); color: var(--text-muted); }
/* A press that can DESTROY a level must not look like a guaranteed one. */
.rf-risk.is-safe   { border-color: color-mix(in srgb, var(--success) 34%, var(--border-soft)); }
.rf-risk.is-safe   .rf-risk-pct, .rf-risk.is-safe   .rf-risk-word { color: var(--text-success); }
.rf-risk.is-safe   .rf-risk-fill { background: var(--success); }
.rf-risk.is-fair   .rf-risk-pct, .rf-risk.is-fair   .rf-risk-word { color: var(--text-gold); }
.rf-risk.is-fair   .rf-risk-fill { background: var(--accent-gold); }
.rf-risk.is-warn   .rf-risk-pct, .rf-risk.is-warn   .rf-risk-word { color: var(--text-ember); }
.rf-risk.is-warn   .rf-risk-fill { background: var(--accent-ember); }
.rf-risk.is-danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--bg-panel-raised));
}
.rf-risk.is-danger .rf-risk-pct, .rf-risk.is-danger .rf-risk-word { color: var(--danger); }
.rf-risk.is-danger .rf-risk-fill { background: var(--danger); }
.rf-risk.is-danger .rf-risk-fail { color: var(--danger); font-weight: 700; }

.rf-cost-top { display: flex; align-items: center; gap: 6px; }
.rf-cost-ico { font-size: var(--fs-md); }
.rf-cost-name { font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); }
.rf-cost-qty { margin: 5px 0 3px; font-size: var(--fs-2xs); color: var(--text-muted); }
.rf-cost-qty b { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--text-primary); }
.rf-cost-have, .rf-cost-tomax { font-size: var(--fs-micro); color: var(--text-muted); }
.rf-cost-have b, .rf-cost-tomax b { font-family: var(--font-mono); color: var(--text-primary); }
.rf-cost-tomax { margin-top: 3px; padding-top: 4px; border-top: 1px dashed var(--border-soft); }
.rf-cost.is-short { border-color: color-mix(in srgb, var(--danger) 38%, var(--border-soft)); }
.rf-cost-warn { color: var(--danger); font-weight: 700; }

/* ---- the press ---- */
.rf-go {
  width: 100%; padding: 13px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  background: linear-gradient(135deg, var(--fx-gold-shade), var(--gold-deep));
  color: var(--text-on-well); box-shadow: var(--e2);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.rf-go-hammer { font-size: var(--fs-lg); line-height: 1; display: inline-block; transition: transform .15s; }
.rf-go-main { font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.02em; }
.rf-go-sub  { font-size: var(--fs-micro); opacity: 0.86; font-weight: 600; font-family: var(--font-mono); }
.rf-go:hover:not([disabled])  { transform: translateY(-1px); box-shadow: var(--e3); filter: brightness(1.06); }
.rf-go:hover:not([disabled]) .rf-go-hammer { transform: rotate(-22deg); }
.rf-go:active:not([disabled]) { transform: translateY(1px); filter: brightness(0.94); }
.rf-go.is-mile { background: linear-gradient(135deg, var(--gold), var(--accent-arcane)); }
.rf-go[disabled] {
  background: var(--bg-hover); color: var(--text-faint);
  box-shadow: var(--e0); cursor: not-allowed;
}
.rf-maxed {
  padding: 16px; text-align: center; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--success) 9%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border-soft));
  color: var(--text-success); font-weight: 800; font-size: var(--fs-sm);
}

.rf-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rf-core-btn {
  padding: 7px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-active); background: var(--bg-panel);
  color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.rf-core-btn:hover { background: var(--bg-hover); border-color: var(--accent-gold); color: var(--text-gold); }
.rf-foot-hint { font-size: var(--fs-micro); color: var(--text-faint); flex: 1; min-width: 140px; }

/* ---- press feedback ---- */
.rf-result {
  position: absolute; left: 50%; top: 18%;
  transform: translate(-50%, 0);
  padding: 9px 20px; border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight: 900; letter-spacing: 0.02em;
  white-space: nowrap; pointer-events: none; z-index: 4;
  box-shadow: var(--e3);
  animation: rfResult 1.9s cubic-bezier(.2,.8,.3,1) forwards;
}
.rf-result.is-success   { background: var(--success); color: var(--text-on-well); }
.rf-result.is-milestone { background: linear-gradient(135deg, var(--gold), var(--accent-arcane)); color: var(--text-on-well); }
.rf-result.is-fail      { background: var(--text-secondary); color: var(--text-on-well); }
.rf-result.is-drop      { background: var(--danger); color: var(--text-on-well); }
@keyframes rfResult {
  0%   { opacity: 0; transform: translate(-50%, 14px) scale(0.8); }
  12%  { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  22%  { transform: translate(-50%, 0) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(0.96); }
}
.rf-flash-success   { animation: rfFlashGood 0.7s ease-out; }
.rf-flash-milestone { animation: rfFlashMile 0.7s ease-out; }
.rf-flash-fail      { animation: rfShake 0.4s ease-out; }
.rf-flash-drop      { animation: rfShake 0.5s ease-out, rfFlashBad 0.7s ease-out; }
@keyframes rfFlashGood {
  0%   { box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(46,158,91,0.9); }
  100% { box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(46,158,91,0); }
}
@keyframes rfFlashMile {
  0%   { box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(227,178,60,0.95); }
  100% { box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(227,178,60,0); }
}
@keyframes rfFlashBad {
  0%   { box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(214,64,47,0.9); }
  100% { box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(214,64,47,0); }
}
@keyframes rfShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ═══════════════════════ v11: refine belongs to the SLOT ═══════════════════
   The screen is the hero's BODY now, not a gear list: a hero strip, the
   whole-body bonus rail, ten slot tiles, and the anvil beside them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- page frame: tiles left, anvil right (desktop-first) ----
   The dashboard's side panels mean this screen gets ~730px of a 1280px window,
   so the breakpoint has to watch the SCREEN's own width, not the viewport's —
   a viewport media query would keep a two-column bench in a column too narrow
   to hold the anvil, which is the panel that matters most here. */
.rf-screen { container-type: inline-size; }
.rf-body {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 12px; align-items: start;
}
.rfs-grid-wrap {
  padding: 12px 13px 13px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rfs-grid-head { margin-bottom: 9px; }
.rfs-grid-title {
  display: block; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.rfs-grid-note { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--text-muted); }

/* ---- hero strip ---- */
.rfh-strip {
  padding: 10px 12px 11px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rfh-strip-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary);
}
.rfh-strip-note { font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); }
.rfh-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.rfh-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 7px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cls, var(--border-soft));
  transition: background .12s, transform .12s, border-color .12s;
}
.rfh-chip:hover { background: var(--bg-hover); transform: translateY(-1px); }
.rfh-chip.is-sel {
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-panel));
  border-color: var(--accent-gold); border-left-color: var(--cls, var(--accent-gold));
  box-shadow: var(--e1);
}
.rfh-art {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-xs);
  background-color: var(--bg-panel); border: 1px solid var(--border-soft);
}
.rfh-art-fb { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); }
.rfh-txt { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.rfh-name { font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.rfh-team { color: var(--text-success); font-style: normal; }
.rfh-cls  { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.rfh-tier {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  padding: 3px 7px; border-radius: var(--r-xs); background: var(--bg-hover);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint);
}
.rfh-tier.is-on { background: color-mix(in srgb, var(--accent-gold) 20%, transparent); color: var(--text-gold); }
.rfh-tier i { font-style: normal; font-size: 0.55rem; letter-spacing: -0.02em; }

/* ---- whole-body bonus rail ---- */
.rfb-rail {
  display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 14px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(184,134,11,0.07), var(--bg-panel) 58%);
  border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rfb-rail.is-active { border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-soft)); }
.rfb-cap {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary);
}
.rfb-now { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.rfb-now b { font-family: var(--font-mono); font-size: var(--fs-2xl); line-height: 1; color: var(--text-gold); }
.rfb-now span { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.08em; color: var(--text-muted); }
.rfb-min { margin-top: 4px; font-size: var(--fs-micro); color: var(--text-muted); }
.rfb-min b { font-family: var(--font-mono); color: var(--text-primary); }

.rfb-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rfb-tier {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.rfb-tier-lv  { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); }
.rfb-tier-pct { font-size: var(--fs-sm); font-weight: 800; color: var(--text-faint); }
.rfb-tier-sub { font-size: 0.54rem; letter-spacing: 0.06em; color: var(--text-faint); }
.rfb-tier.is-done {
  background: color-mix(in srgb, var(--accent-gold) 16%, var(--bg-panel));
  border-color: var(--accent-gold);
}
.rfb-tier.is-done .rfb-tier-pct, .rfb-tier.is-done .rfb-tier-lv { color: var(--text-gold); }
.rfb-tier.is-next { border-color: color-mix(in srgb, var(--success) 45%, var(--border-soft)); border-style: dashed; }
.rfb-tier.is-next .rfb-tier-pct { color: var(--text-success); }
.rfb-goal { margin-top: 7px; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-secondary); }
.rfb-lags { margin-top: 4px; font-size: var(--fs-micro); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rfb-lag {
  padding: 1px 6px; border-radius: var(--r-xs); font-size: var(--fs-micro); font-weight: 700;
  background: var(--bg-hover); color: var(--text-secondary);
}
.rfb-lag.is-empty { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.rfb-lag i { font-style: normal; opacity: 0.75; }

/* ---- the ten slot tiles ----
   Named AREAS, not auto-placement: the earlier版 let the progress bar and the
   +N both claim column 3, so a long item name and its refine level printed on
   top of each other. Every part now owns a cell, and the only thing allowed to
   shrink is the item name (ellipsis). */
.rfs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.rfs-tile {
  position: relative; display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "ico slot plus"
    "ico name name"
    "foot foot foot";
  align-items: center; column-gap: 9px; row-gap: 1px;
  width: 100%; text-align: left;
  padding: 8px 10px 9px; border-radius: var(--r-md); cursor: pointer;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--rar, var(--border-soft));
  transition: background .14s, transform .14s, border-color .14s, box-shadow .14s;
}
.rfs-tile:hover {
  background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--e1);
  border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-soft));
}
.rfs-tile.is-sel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 15%, var(--bg-panel)), var(--bg-panel) 72%);
  border-color: var(--accent-gold); border-left-color: var(--rar, var(--accent-gold));
  box-shadow: var(--e2);
}
.rfs-tile.is-sel::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 55%, transparent);
  pointer-events: none;
}
.rfs-tile.is-empty { opacity: 0.78; }
.rfs-tile.is-empty .rfs-ico { border-style: dashed; }

.rfs-ico {
  grid-area: ico; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-soft); background-color: var(--bg-panel);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg);
}
.rfs-ico-img { background-repeat: no-repeat; background-position: center; background-size: contain; }

.rfs-slot {
  grid-area: slot; display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted); line-height: 1.2;
}
.rfs-line { font-style: normal; font-size: var(--fs-2xs); line-height: 1; opacity: 0.9; }
.rfs-item {
  grid-area: name; min-width: 0;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The +N sits on the SLOT-label row, so the item name below it gets the tile's
   full width — a long name now truncates late instead of colliding. */
.rfs-plus {
  grid-area: plus; align-self: center; padding-left: 8px;
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700;
  line-height: 1; color: var(--text-faint); letter-spacing: -0.02em;
}
.rfs-plus.has-lv { color: var(--text-gold); }

/* Progress + status share the bottom rail — the one place with room to spare. */
.rfs-foot { grid-area: foot; display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.rfs-flag {
  flex-shrink: 0; font-style: normal; font-size: 0.5rem; font-weight: 800;
  letter-spacing: 0.08em; padding: 1px 5px; border-radius: var(--r-xs); line-height: 1.4;
}
.rfs-flag.is-ready { color: var(--text-success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.rfs-flag.is-max   { color: var(--text-on-gold-muted); background: var(--accent-gold); }

.rfs-bar {
  flex: 1; height: 4px; border-radius: var(--r-full);
  background: var(--bg-hover); overflow: hidden;
}
.rfs-bar i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--gold), var(--accent-gold));
}
.rfs-tile.is-max .rfs-bar i { background: linear-gradient(90deg, var(--accent-gold), var(--success)); }

/* ---- kit stock: the two material lines, side by side ---- */
.rfk-stock {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.rfk-line { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rfk-name { font-size: var(--fs-micro); font-weight: 700; color: var(--text-secondary); display: flex; flex-direction: column; }
.rfk-name i { font-style: normal; font-size: var(--fs-micro); font-weight: 500; color: var(--text-faint); }
.rfk-cells { display: flex; gap: 4px; }
.rfk-cell {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--text-primary);
}
.rfk-cell i { font-style: normal; font-size: 0.55rem; color: var(--text-faint); }
.rfk-art { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; }
.rfk-cell.is-zero { color: var(--text-faint); }

/* ---- anvil additions ---- */
.rf-safe-note {
  margin-top: 6px; font-size: var(--fs-micro); color: var(--text-muted);
}
.rf-slot-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 15px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px dashed var(--border-active);
}
.rf-slot-empty-title { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); }
.rf-slot-empty-sub   { font-size: var(--fs-2xs); color: var(--text-muted); }
.rf-empty-hint {
  font-size: var(--fs-2xs); color: var(--text-gold); font-weight: 700;
}
.rf-cost-tomax span { display: inline-block; margin-right: 8px; }

/* Container breakpoints — see the note on .rf-screen. Declared after the base
   rules so they win on source order. */
@container (max-width: 900px) {
  .rf-body { grid-template-columns: 1fr; }
  .rfs-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@container (max-width: 560px) {
  .rfb-rail { grid-template-columns: 1fr; gap: 9px; }
  .rf-decide { grid-template-columns: 1fr; }
}
@container (max-width: 430px) {
  .rfs-grid { grid-template-columns: 1fr; }
  .rfb-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rfk-line { flex-direction: column; align-items: flex-start; gap: 3px; }
}
@media (max-width: 780px) {
  .rf-anvil { padding: 14px 13px 16px; }
  .rf-level { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v10 — Blueprint redesign (list + design bench)
   ---------------------------------------------------------------------------
   The designer was 13 same-weight sections stacked into 1556px of scroll, with
   the GS budget — the one constraint the whole screen exists to respect — as a
   27px sliver that scrolled away the moment you touched a slider, and the
   materials/readiness at the very bottom so you designed blind and found out
   last. The rework splits it into a two-column bench: the DESIGN on the left in
   numbered steps, and a STICKY verdict rail on the right holding the preview,
   the budget, and readiness — the three things you need while you drag.
   Prefixes bpd-* (bench) and bpl-* (list).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════ design bench ══════════════════════════ */

.bpd-screen { display: flex; flex-direction: column; gap: 12px; }

.bpd-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.bpd-head-txt { flex: 1; min-width: 170px; display: flex; flex-direction: column; }
.bpd-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-primary); margin: 0; }
.bpd-sub { font-size: var(--fs-micro); color: var(--text-muted); }
.bpd-slot-badge {
  font-size: var(--fs-2xs); font-weight: 700; padding: 4px 12px; border-radius: var(--r-full);
  background: rgba(106,75,208,0.12); color: var(--accent-arcane);
}
.bpd-cancel {
  padding: 6px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-active); background: var(--bg-panel);
  color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.bpd-cancel:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Two columns; the right one is the sticky verdict rail. */
.bpd-work { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.bpd-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bpd-right { min-width: 0; }
.bpd-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }

.bpd-card {
  padding: 13px 15px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
/* Numbered steps that MATCH the layout order. The old explainer promised
   "1 tier → 2 stats → 3 craft" while the page ran tier, rarity, budget, weapon
   type, core, owned, stats, effects, element, set, complexity, recipe. */
.bpd-step {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary);
  margin-bottom: 10px;
}
.bpd-step b {
  width: 21px; height: 21px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); background: var(--accent-arcane); color: var(--text-on-well);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
}
.bpd-step-note { font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); flex: 1; min-width: 130px; }
.bpd-sub-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 10px 0 6px;
}
.bpd-sub-label:first-of-type { margin-top: 0; }
.bpd-count { font-family: var(--font-mono); color: var(--accent-arcane); letter-spacing: 0; }
.bpd-legend { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
.bpd-legend-dot { color: var(--text-success); font-style: normal; }
.bpd-grade-note {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border-soft);
  font-size: var(--fs-micro); color: var(--text-muted);
}

/* Tier buttons carry two marks so 12 anonymous numbers become a decision. */
.tier-pick-btn { position: relative; }
.tier-pick-btn.is-yours::after {
  content: '★'; position: absolute; top: -5px; right: -3px;
  font-size: var(--fs-micro); color: var(--text-gold);
  text-shadow: 0 0 3px var(--fx-highlight), 0 0 3px var(--fx-highlight);
}
.tier-core-dot {
  position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  font-size: 0.42rem; color: var(--text-success); line-height: 1;
}
.tier-pick-btn.has-core { border-color: color-mix(in srgb, var(--success) 45%, var(--border-soft)); }

/* ---- the sticky verdict rail ---- */
.bpd-preview {
  padding: 12px 13px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(106,75,208,0.08) 0%, var(--bg-panel) 50%);
  border: 1px solid var(--border-soft); box-shadow: var(--e2);
}
.bpd-preview-label {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.bpd-preview-art { display: block; width: 64px; height: 64px; margin: 8px auto 5px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.bpd-preview-art-fallback { display: block; margin-top: 8px; text-align: center; font-size: var(--fs-2xl); }
.bpd-preview-name { font-size: var(--fs-md); font-weight: 800; margin-top: 3px; line-height: 1.25; }
.bpd-preview-lock { font-size: var(--fs-micro); color: var(--text-gold); font-weight: 700; margin-top: 2px; }
.bpd-preview-blank { font-size: var(--fs-micro); color: var(--text-faint); font-style: italic; margin-top: 7px; }
.bpd-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.bpd-chip {
  font-size: var(--fs-micro); font-weight: 700; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-secondary);
}
.bpd-chip-eff { background: rgba(184,134,11,0.13); border-color: rgba(184,134,11,0.3); color: var(--text-gold); }
.bpd-chip-set { background: rgba(106,75,208,0.13); border-color: rgba(106,75,208,0.3); color: var(--accent-arcane); }
.bpd-chip-el  { border-width: 1px; }

/* The budget: the number you are spending, always on screen. */
.bpd-budget {
  padding: 12px 13px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.bpd-budget-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bpd-budget-num { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); line-height: 1; }
.bpd-budget-max { font-size: var(--fs-sm); color: var(--text-faint); font-weight: 400; }
.bpd-budget-unit { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.bpd-budget-track { height: 9px; margin: 9px 0 7px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; }
.bpd-budget-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--meter-arcane-start), var(--accent-arcane));
  transition: width .25s cubic-bezier(.22,.8,.3,1);
}
.bpd-budget-foot { font-size: var(--fs-micro); color: var(--text-muted); }
.bpd-budget.is-full { border-color: color-mix(in srgb, var(--success) 38%, var(--border-soft)); }
.bpd-budget.is-full .bpd-budget-fill { background: linear-gradient(90deg, var(--meter-success-start), var(--success)); }
.bpd-budget.is-full .bpd-budget-foot { color: var(--text-success); font-weight: 700; }
.bpd-budget.is-over {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--bg-panel));
}
.bpd-budget.is-over .bpd-budget-num { color: var(--danger); }
.bpd-budget.is-over .bpd-budget-fill { background: var(--danger); }
.bpd-budget.is-over .bpd-budget-foot { color: var(--danger); font-weight: 700; }

/* Readiness, visible WHILE designing instead of only at the bottom. */
.bpd-ready {
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
  max-height: 250px; overflow-y: auto;
}
.bpd-ready.is-short { border-color: color-mix(in srgb, var(--danger) 30%, var(--border-soft)); }
.bpd-ready.is-ok    { border-color: color-mix(in srgb, var(--success) 34%, var(--border-soft)); }
.bpd-ready-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.bpd-ready-tag { font-size: var(--fs-micro); padding: 2px 8px; border-radius: var(--r-full); letter-spacing: 0.02em; }
.bpd-ready-tag.is-short { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.bpd-ready-tag.is-ok    { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text-success); }
.bpd-mats { display: flex; flex-direction: column; gap: 3px; }
.bpd-complex {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border-soft);
  font-size: var(--fs-micro); color: var(--text-ember); font-weight: 700;
}
.bpd-complex-why { color: var(--text-faint); font-weight: 500; }

.bpd-save {
  width: 100%; padding: 12px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  background: linear-gradient(135deg, var(--accent-arcane), var(--accent-gold));
  color: var(--text-on-well); box-shadow: var(--e2);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.bpd-save-main { font-size: var(--fs-md); font-weight: 800; }
.bpd-save-sub  { font-size: var(--fs-micro); opacity: 0.85; font-weight: 600; }
.bpd-save:hover:not([disabled])  { transform: translateY(-1px); box-shadow: var(--e3); filter: brightness(1.05); }
.bpd-save:active:not([disabled]) { transform: translateY(0); }
.bpd-save[disabled] { background: var(--bg-hover); color: var(--text-faint); box-shadow: var(--e0); cursor: not-allowed; }

@media (max-width: 900px) {
  .bpd-work { grid-template-columns: 1fr; }
  /* Stacked, the rail goes FIRST so the budget and preview stay above the
     controls rather than hiding under two screens of pickers. */
  .bpd-right { order: -1; }
  .bpd-rail { position: static; }
  .bpd-ready { max-height: none; }
}

/* ══════════════════════════ blueprint list ══════════════════════════ */

.bpl-screen { display: flex; flex-direction: column; gap: 12px; }

.bpl-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.bpl-head-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.bpl-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-primary); margin: 0; }
.bpl-sub { font-size: var(--fs-micro); color: var(--text-muted); }
.bpl-ready-n { color: var(--text-success); }
.bpl-new {
  padding: 8px 16px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-arcane), var(--accent-gold));
  color: var(--text-on-well); font-size: var(--fs-xs); font-weight: 800; box-shadow: var(--e1);
  transition: transform .12s, filter .12s;
}
.bpl-new:hover { transform: translateY(-1px); filter: brightness(1.06); }
.bpl-alt {
  padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--border-active); background: var(--bg-panel);
  color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.bpl-alt:hover { background: var(--bg-hover); }

.bpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bpl-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
  border-left: 3px solid var(--border-active);
  transition: transform .12s, box-shadow .12s;
}
.bpl-art, .bpl-art-fallback { display: block; width: 48px; height: 48px; align-self: center; flex-shrink: 0; }
.bpl-art { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.bpl-art-fallback { font-size: var(--fs-2xl); line-height: 48px; text-align: center; }
.bpl-card:hover { transform: translateY(-2px); box-shadow: var(--e2); }
/* Craftable-right-now designs are the point of this screen. */
.bpl-card.is-ready {
  border-left-color: var(--success);
  background: linear-gradient(180deg, color-mix(in srgb, var(--success) 7%, var(--bg-panel)) 0%, var(--bg-panel) 40%);
}
.bpl-top { display: flex; align-items: baseline; gap: 8px; }
.bpl-name { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpl-gs { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--accent-arcane); flex-shrink: 0; }
.bpl-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.bpl-tag {
  font-size: var(--fs-micro); font-weight: 700; padding: 1px 7px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-muted);
}
.bpl-tag-lock { color: var(--text-gold); border-color: rgba(184,134,11,0.32); }
.bpl-core { font-size: var(--fs-micro); color: var(--text-muted); }
.bpl-core b { font-family: var(--font-mono); color: var(--text-primary); }
.bpl-core.is-short { color: var(--danger); }
.bpl-core.is-short b { color: var(--danger); }

/* The full recipe is reference material, not a headline — it collapses. */
.bpl-recipe { font-size: var(--fs-micro); }
.bpl-recipe summary {
  cursor: pointer; color: var(--text-faint); font-weight: 700;
  letter-spacing: 0.04em; list-style: none; user-select: none;
}
.bpl-recipe summary::-webkit-details-marker { display: none; }
.bpl-recipe summary::before { content: '▸ '; }
.bpl-recipe[open] summary::before { content: '▾ '; }
.bpl-recipe-body { margin-top: 5px; color: var(--text-muted); line-height: 1.6; }

.bpl-shorts { display: flex; gap: 4px; flex-wrap: wrap; }
.bpl-short {
  font-size: var(--fs-micro); padding: 2px 8px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}
.bpl-short b { font-family: var(--font-mono); }
.bpl-short.is-core { font-weight: 800; }

.bpl-actions { display: flex; gap: 6px; margin-top: 2px; }
.bpl-craft {
  flex: 1; padding: 9px 12px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--accent-gold));
  color: var(--text-on-well); font-size: var(--fs-xs); font-weight: 800;
  box-shadow: var(--e1); transition: transform .12s, filter .12s;
}
.bpl-craft:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); }
.bpl-craft[disabled] { background: var(--bg-hover); color: var(--text-faint); box-shadow: var(--e0); cursor: not-allowed; }
.bpl-icon {
  width: 34px; flex-shrink: 0; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  font-size: var(--fs-sm); cursor: pointer; color: var(--text-muted);
}
.bpl-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

.bpl-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 24px; text-align: center;
  border-radius: var(--r-md); background: var(--bg-panel);
  border: 1px dashed var(--border-active);
}
.bpl-empty-ico { font-size: var(--fs-3xl); }
.bpl-empty-title { font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); }
.bpl-empty-sub { font-size: var(--fs-xs); color: var(--text-muted); max-width: 420px; line-height: 1.6; }

@media (max-width: 780px) {
  .bpl-grid { grid-template-columns: 1fr; }
}

/* ---- v10b: step 2 (Grade) + step 3 (Power) rework --------------------------
   Grade was two anonymous button walls whose consequence lived elsewhere on the
   page; both pickers now print the REAL resulting GS budget on every button and
   the step states its own verdict first. Power lost its raw stat sliders: base
   stats are the slot's identity (auto), and stat bonuses became opt-in picks
   sitting in the same shopping list as the effects. */

/* -- the verdict line that opens step 2 -- */
.bpd-grade-say {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 11px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  font-size: var(--fs-2xs);
}
.bpd-grade-say.is-ok    { border-color: color-mix(in srgb, var(--success) 34%, var(--border-soft)); }
.bpd-grade-say.is-short { border-color: color-mix(in srgb, var(--danger) 30%, var(--border-soft)); }
.bpd-grade-pick { font-weight: 800; }
.bpd-grade-arrow { color: var(--text-faint); }
.bpd-grade-budget { font-family: var(--font-mono); color: var(--text-muted); }
.bpd-grade-budget b { font-size: var(--fs-md); color: var(--accent-arcane); }
.bpd-grade-core { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-muted); }
.bpd-grade-core b { font-family: var(--font-mono); }
.bpd-grade-say.is-short .bpd-grade-core,
.bpd-grade-say.is-short .bpd-grade-core b { color: var(--danger); font-weight: 700; }
.bpd-grade-say.is-ok .bpd-grade-core b { color: var(--text-success); }

/* -- pickers: the number on the button IS the budget you get -- */
.tier-picker, .rarity-picker { display: flex; flex-wrap: wrap; gap: 5px; }
.tier-pick-btn, .rarity-pick-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 9px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  transition: background .12s, border-color .12s, transform .12s;
}
.tier-pick-btn:hover, .rarity-pick-btn:hover { background: var(--bg-hover); transform: translateY(-1px); }
.tier-pick-n   { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 800; color: var(--text-primary); }
.rarity-pick-n { font-size: var(--fs-2xs); font-weight: 800; }
.tier-pick-gs, .rarity-pick-mult {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); line-height: 1;
}
.tier-pick-active, .rarity-pick-active {
  border-color: var(--accent-arcane);
  background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-panel));
  box-shadow: inset 0 -2px 0 var(--accent-arcane);
}
.tier-pick-active .tier-pick-gs, .rarity-pick-active .rarity-pick-mult { color: var(--accent-arcane); font-weight: 700; }
/* Owning the cores is the difference between "I can design this" and "I can
   make this", so it gets a solid state rather than a 4px dot. */
.tier-pick-btn.has-core, .rarity-pick-btn.has-core {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 9%, var(--bg-panel-raised));
}
.tier-pick-btn.has-core .tier-pick-gs, .rarity-pick-btn.has-core .rarity-pick-mult { color: var(--text-success); }
.tier-pick-btn.is-yours::after {
  content: '★'; position: absolute; top: -6px; right: -4px;
  font-size: var(--fs-micro); color: var(--text-gold);
  text-shadow: 0 0 3px var(--fx-highlight), 0 0 3px var(--fx-highlight), 0 0 3px var(--fx-highlight);
}
.bpd-key {
  display: inline-block; width: 9px; height: 9px; border-radius: var(--r-xs);
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  margin-right: 2px; vertical-align: -1px;
}
.bpd-key.has-core { border-color: var(--success); background: color-mix(in srgb, var(--success) 30%, var(--surface-panel)); }
.bpd-key.is-yours { border-color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 34%, var(--surface-panel)); }

/* -- step 3: the built-in identity stats (read-only) -- */
.bpd-base-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bpd-base-stat {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.bpd-base-stat b { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.08em; color: var(--text-faint); }
.bpd-base-val { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.bpd-base-gs  { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }
/* Stat bonuses look like effect chips because they now ARE the same choice. */
.bpd-stat-chip .eac-gs { color: var(--text-info); }

.bp-stat-spd { color: var(--text-info); }

/* ---- v10c: one lane at a time, six times the map -------------------------
   v10b wrapped the lanes at minmax(320px) AND added a min-width:1500px rule
   that put them back to three abreast. That rule keyed off the VIEWPORT while
   the app content column stays ~770px wide, so a wide monitor got three ~245px
   fields — narrower than before the change. Hence "ไม่เห็นใหญ่ขึ้น".
   Now: one lane per row, full column width, tall enough that each map is ~6x
   the area it was. Three lanes means a long scroll, which is the deliberate
   trade for a field you can actually watch a fight in. */
.rd-lanes { grid-template-columns: 1fr; gap: 14px; }
.rd-lane-field .dungeon-field { height: 866px; min-height: 866px; max-height: 940px; }
/* The odd-lane full-width override from v10b is meaningless in one column. */
.rd-lane:last-child:nth-child(odd) { grid-column: auto; }

/* Raid boss token at 6x (32px -> 192px). Sim tokens are positioned by their
   TOP-LEFT at (x - 16), so a bigger box has to pull itself back by the extra
   half — 96 - 16 = 80 — or the boss renders offset down-right of where it
   actually stands. Scoped to raid lanes so stage/tower bosses are untouched,
   and heroes keep their 32px exactly as asked. */
.rd-lane .sim-monster-token.is-boss {
  width: 192px; height: 192px;
  margin-left: -80px; margin-top: -80px;
  font-size: var(--fs-4xl);
}
.rd-lane .sim-monster-token.is-boss .tok-hp { width: 150px; height: 9px; top: -14px; }
.rd-lane .sim-monster-token.is-boss .tok-statuses { top: calc(100% + 8px); }

@media (max-width: 900px) {
  .rd-lane-field .dungeon-field { height: 520px; min-height: 520px; max-height: 560px; }
  .rd-lane .sim-monster-token.is-boss {
    width: 128px; height: 128px; margin-left: -48px; margin-top: -48px; font-size: var(--fs-2xl);
  }
  .rd-lane .sim-monster-token.is-boss .tok-hp { width: 100px; height: 7px; top: -11px; }
}

/* -- per-rift daily quota on the lobby cards -- */
.rd-runs.has-left strong { color: var(--text-success); }
.rd-card-ready { border-color: color-mix(in srgb, var(--accent-ember) 45%, var(--border-soft)); }
.rd-card-runs {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: var(--fs-micro); color: var(--text-faint);
}
.rd-card-runs.has-left { color: var(--text-muted); }
.rd-pip {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--bg-hover); border: 1px solid var(--border-soft); display: inline-block;
}
.rd-pip.is-left { background: var(--accent-ember); border-color: var(--accent-ember); }
.rd-len { color: var(--text-info); }

/* ---- v10: battle status strip — whose HP is that? ------------------------
   The bars carried the hero name only in a title attribute, so three similar
   portraits gave no way to read the fight. Name + class now label every bar. */
.bss-unit-name {
  font-size: var(--fs-micro); font-weight: 800; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: baseline; gap: 4px;
  /* The v9 rule above still pinned this to a fixed 24px pill from back when the
     name was a two-letter abbreviation beside the bar. This block redefined the
     type but never the box, so every nameplate was clipped to about two
     characters — "Firefighter" wanted 122px and got 24px. Take the whole first
     line instead, and let the bar and HP share the line below. */
  flex: 1 0 100%; width: auto; min-width: 0;
  margin-bottom: 2px;
}
.bss-unit-class {
  font-size: 0.56rem; font-weight: 600; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.bss-unit-name-enemy { color: var(--text-muted); font-weight: 700; }
.bss-unit-dead .bss-unit-name { text-decoration: line-through; opacity: 0.6; }

/* ---- v10: per-stage loot notice for the Farm / Stage Counter loop --------
   The loop skips the modal stage-clear popup on purpose (it would block the
   chain), which left the player with no idea what a run dropped. */
.stage-loot-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  max-width: min(560px, 92vw);
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  box-shadow: var(--e3);
  animation: sltLife 5s ease-out forwards;
}
.stage-loot-toast.is-clear { border-left: 3px solid var(--success); }
.stage-loot-toast.is-fail  { border-left: 3px solid var(--danger); }
.slt-head { font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.stage-loot-toast.is-fail .slt-head { color: var(--danger); }
.slt-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.slt-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-micro); font-weight: 600; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-secondary);
}
.slt-chip-icon {
  display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
  image-rendering: pixelated; vertical-align: middle;
}
.slt-gold { color: var(--text-gold); }
.slt-exp  { color: var(--text-success); }
.slt-gear { color: var(--accent-arcane); border-color: rgba(106,75,208,0.3); }
.slt-card { color: var(--text-info); }
.slt-none { color: var(--text-faint); font-style: italic; }
.slt-lost { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); font-weight: 800; }
@keyframes sltLife {
  0%   { opacity: 0; transform: translate(-50%, 14px); }
  6%   { opacity: 1; transform: translate(-50%, 0); }
  88%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* Raid: the daily-cap testing switch reads as a state, not a number. */
.rd-runs.is-unlimited strong,
.rd-card-runs.is-unlimited span { color: var(--text-success); }

/* ---- v10: Career Map on the Heroes page ----------------------------------
   The roster never showed the class ladder, so a player had no way to answer
   "which branch should I take?" until the irreversible choice was already in
   front of them. Seven lines, each a starter and its two Lv100 paths, with the
   thing each class is actually FOR spelled out. */
.career-map {
  margin-top: 12px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
  overflow: hidden;
}
.cm-head {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 11px 15px; border: 0; background: transparent; cursor: pointer;
}
.cm-head:hover { background: var(--bg-hover); }
.cm-head-title { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); }
.cm-head-sub { flex: 1; font-size: var(--fs-micro); color: var(--text-muted); }
.cm-head-caret { color: var(--text-faint); font-size: var(--fs-xs); }
.cm-note {
  margin: 0 15px 10px; padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  font-size: var(--fs-2xs); color: var(--text-muted);
}
.cm-lines { display: flex; flex-direction: column; gap: 10px; padding: 0 15px 15px; }

.cm-line {
  display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 2fr);
  align-items: center; gap: 8px;
  padding: 9px; border-radius: var(--r-md);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
/* The selected hero's own line is the one that matters right now. */
.cm-line.is-selected-line {
  background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--border-soft));
}
.cm-line-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* A tier-1 line whose tier-2 pair has not shipped yet: one dashed placeholder
   across the full branch area instead of two empty card slots. */
.cm-line-branches.cm-line-soon { grid-template-columns: 1fr; align-content: center; }
.cm-soon {
  display: flex; align-items: center; justify-content: center; min-height: 64px;
  border: 1px dashed var(--line, rgba(255,255,255,.18)); border-radius: var(--r-md);
  font-size: var(--fs-2xs); letter-spacing: .02em; opacity: .62; text-align: center; padding: 10px 12px;
}
/* The fork: base on the left, two paths on the right. */
.cm-fork { position: relative; height: 100%; min-height: 40px; }
.cm-fork i {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--border-active);
}
.cm-fork i:first-child { top: 30%; }
.cm-fork i:last-child  { top: 70%; }
.cm-fork::before {
  content: ''; position: absolute; left: 50%; top: 30%; bottom: 30%;
  width: 1px; background: var(--border-active);
}

.cm-card {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cm, var(--border-active));
}
.cm-card.is-current  { box-shadow: inset 0 0 0 1px var(--cm); }
.cm-card.is-available { border-color: var(--success); background: color-mix(in srgb, var(--success) 6%, var(--bg-panel)); }
.cm-card-top { display: flex; align-items: center; gap: 7px; }
.cm-ico { color: var(--cm); display: inline-flex; flex-shrink: 0; }
.cm-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-name { font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.cm-role { font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.cm-flag {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: var(--r-full);
}
.cm-flag.is-current   { background: color-mix(in srgb, var(--cm) 20%, transparent); color: var(--cm); }
.cm-flag.is-available { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--text-success); }
.cm-flag.is-owned     { background: var(--bg-hover); color: var(--text-faint); font-family: var(--font-mono); }
.cm-tagline { font-size: var(--fs-2xs); font-weight: 700; color: var(--cm); }
.cm-strengths { margin: 0; padding-left: 15px; display: flex; flex-direction: column; gap: 1px; }
.cm-strengths li { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.45; }
/* Role tags + a qualitative rating. The card used to print raw HP/ATK/DEF/SPD;
   the Career Map answers "what is this class FOR", so the numbers moved out and
   dots (ranked against every other class) took their place. */
.cm-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cm-tag {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em;
  padding: 1px 7px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--cm) 13%, transparent);
  color: var(--cm); border: 1px solid color-mix(in srgb, var(--cm) 28%, transparent);
}
.cm-ratings {
  display: flex; flex-direction: column; gap: 2px; margin-top: 2px;
  padding-top: 6px; border-top: 1px dashed var(--border-soft);
}
.cm-rating { display: flex; align-items: center; gap: 5px; font-size: var(--fs-micro); color: var(--text-faint); }
.cm-rating b { font-weight: 700; min-width: 62px; letter-spacing: 0.04em; text-transform: uppercase; }
.cm-dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--bg-hover); border: 1px solid var(--border-soft); display: inline-block;
}
.cm-dot.is-on { background: var(--cm); border-color: var(--cm); }

@media (max-width: 900px) {
  .cm-line { grid-template-columns: 1fr; }
  .cm-fork { display: none; }
  .cm-line-branches { grid-template-columns: 1fr; }
}

/* ---- v10: effect names say what they DO ----------------------------------
   The pool used to read "Laceration / Precision / Adrenaline / Toxin" — names
   that told a player nothing. Every effect now carries a plain description, and
   the designer shows it inline instead of hiding it in a tooltip. */
.effect-add-chip { text-align: left; }
.eac-desc {
  display: block; margin-top: 2px;
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.35;
  color: var(--text-muted); white-space: normal; max-width: 210px;
}
.effect-row-desc {
  display: block; margin-top: 1px;
  font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); line-height: 1.35;
}
.effect-row-name { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   v10 — Raid after-action report (rdr-*)
   Raid is the EXP mode, so its report is the payoff screen: who did what, what
   each hero personally banked, and loot shown as real artwork rather than a
   row of text chips.
   ═══════════════════════════════════════════════════════════════════════════ */
.rdr { display: flex; flex-direction: column; gap: 12px; }

/* ---- banner ---- */
.rdr-banner {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(214,64,47,0.10), var(--bg-panel) 55%);
  border: 1px solid var(--border-soft); box-shadow: var(--e3);
  overflow: hidden;
  animation: rdrIn 0.45s cubic-bezier(.2,.8,.3,1) both;
}
.rdr-banner.is-win {
  background: linear-gradient(135deg, rgba(184,134,11,0.18), var(--bg-panel) 55%);
  border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-soft));
}
.rdr-banner::after {
  content: ''; position: absolute; right: -30px; top: -40px;
  width: 180px; height: 180px; border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(184,134,11,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.rdr-banner-boss { font-size: var(--fs-3xl); line-height: 1; flex-shrink: 0; }
.rdr-banner.is-win .rdr-banner-boss { animation: rdrPulse 1.8s ease-in-out infinite; }
.rdr-banner.is-win .rdr-boss-art-wrap { animation: none; }
.rdr-banner-txt { flex: 1; min-width: 0; }
.rdr-banner-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); }
.rdr-banner.is-win .rdr-banner-title { color: var(--text-gold); }
.rdr-banner-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.rdr-banner-pct { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.rdr-banner-pct b { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); line-height: 1; }
.rdr-banner-pct span { font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.rdr-best {
  margin-top: 4px; padding: 2px 9px; border-radius: var(--r-full);
  background: var(--accent-gold); color: var(--text-on-well); font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: 0.04em;
}
@keyframes rdrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rdrPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---- headline totals ---- */
.rdr-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rdr-total {
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rdr-total-k { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.rdr-total b { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.rdr-total-sub { font-size: var(--fs-micro); color: var(--text-muted); }
/* EXP is the reason this mode exists — give it the loudest tile. */
.rdr-total.is-exp {
  background: linear-gradient(180deg, color-mix(in srgb, var(--success) 12%, var(--bg-panel)), var(--bg-panel) 70%);
  border-color: color-mix(in srgb, var(--success) 42%, var(--border-soft));
}
.rdr-total.is-exp b { color: var(--text-success); font-size: var(--fs-2xl); }
.rdr-total.is-gold b { color: var(--text-gold); }

/* ---- panels ---- */
.rdr-panel {
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rdr-panel-head {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.rdr-panel-head span { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.rdr-empty { padding: 18px; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }

/* ---- per-hero rows ---- */
.rdr-hero {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 190px);
  align-items: center; gap: 12px;
  padding: 10px 11px; border-radius: var(--r-sm);
  border-left: 3px solid var(--hue, var(--border-active));
  background: var(--bg-panel-raised);
}
.rdr-hero + .rdr-hero { margin-top: 6px; }
.rdr-hero.is-mvp {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-gold) 12%, var(--bg-panel-raised)), var(--bg-panel-raised) 60%);
  border-left-color: var(--accent-gold);
}
.rdr-hero-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rdr-face {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm);
  background-color: var(--bg-panel); border: 1px solid var(--border-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.rdr-face-sprite { background-repeat: no-repeat; background-position: center; }
.rdr-hero-name { min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); }
.rdr-hero-class { font-size: var(--fs-micro); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.rdr-mvp-tag {
  flex-shrink: 0; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: var(--r-full); background: var(--accent-gold); color: var(--text-on-well);
}

.rdr-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-hero-stats {
  display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 5px;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary);
}
.rd-hero-stats > span { white-space: nowrap; }
.rd-hero-stats b { color: var(--text-primary); font-family: var(--font-mono); }
.rd-stats-note { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); }
.rd-live-damage { padding: 0 12px 12px; min-width: 0; }
.rd-live-damage .rd-hero-stats { margin-bottom: 10px; }
.rdr-bar-row { display: flex; align-items: center; gap: 7px; font-size: var(--fs-micro); }
.rdr-bar-k { min-width: 82px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.rdr-bar-track { flex: 1; min-width: 40px; height: 7px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; }
.rdr-bar-fill { display: block; height: 100%; border-radius: var(--r-full); transition: width .5s cubic-bezier(.22,.8,.3,1); }
.rdr-bar-fill.is-dealt { background: linear-gradient(90deg, var(--gold), var(--accent-ember)); }
.rdr-bar-fill.is-taken { background: linear-gradient(90deg, var(--meter-danger-start), var(--danger)); }
.rdr-bar-v { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-primary); min-width: 62px; text-align: right; }
.rdr-bar-share { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); min-width: 40px; text-align: right; }

.rdr-exp {
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
}
.rdr-exp.is-levelup {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 9%, var(--bg-panel));
}
.rdr-exp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rdr-exp-gain { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-success); }
.rdr-lv { font-size: var(--fs-micro); color: var(--text-faint); font-family: var(--font-mono); }
.rdr-lv-up { font-size: var(--fs-micro); font-weight: 800; color: var(--text-success); }
.rdr-lv-up b { font-family: var(--font-mono); }
.rdr-exp-track { height: 5px; margin-top: 5px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; }
.rdr-exp-fill { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--meter-success-start), var(--success)); }

/* ---- loot, with real artwork ---- */
.rdr-loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.rdr-loot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  text-align: center;
  animation: rdrPop 0.4s cubic-bezier(.2,.9,.3,1) both;
}
.rdr-loot-art {
  width: 44px; height: 44px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  image-rendering: pixelated;
}
.rdr-loot-art-fallback { display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); }
.rdr-loot-name { font-size: var(--fs-micro); font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.rdr-loot-qty { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; color: var(--text-gold); }
@keyframes rdrPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* ---- actions ---- */
.rdr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rdr-btn {
  flex: 1; min-width: 150px; padding: 12px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border-active); background: var(--bg-panel);
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 800;
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.rdr-btn:hover:not([disabled]) { transform: translateY(-1px); background: var(--bg-hover); }
.rdr-btn-primary {
  border: none; color: var(--text-on-well);
  background: linear-gradient(135deg, var(--accent-ember), var(--fx-action-ember-strong));
  box-shadow: var(--e2);
}
.rdr-btn-primary:hover:not([disabled]) { filter: brightness(1.06); box-shadow: var(--e3); }
.rdr-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.rdr-btn-sub { font-size: var(--fs-micro); font-weight: 600; opacity: 0.85; }

@media (max-width: 780px) {
  .rdr-hero { grid-template-columns: 1fr; gap: 8px; }
  .rdr-bar-k { min-width: 74px; }
  .rdr-banner { flex-wrap: wrap; }
  .rdr-banner-pct { text-align: left; align-items: flex-start; width: 100%; }
}

/* ══════════════════════════ CAREER PATH (Lv100 ascension) ══════════════════
   The single biggest decision a hero makes. It used to render as four lines of
   inline-styled text with a default grey button underneath — indistinguishable
   from a settings row. Now it is a moment: a banner that says it is time, the
   two futures side by side with their own artwork and colour, and a CTA in that
   class's own hue so choosing feels like committing to something. */
.career-path-section.cps { padding: 14px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.cps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cps-title { font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); letter-spacing: 0.02em; }
.cps-lock, .cps-done-flag {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-faint);
}
.cps-done-flag { color: var(--text-success); border-color: color-mix(in srgb, var(--success) 40%, var(--border-soft)); }

/* ── locked state: a ladder toward Lv100 ── */
.cps-progress {
  position: relative; height: 22px; border-radius: var(--r-full); overflow: hidden;
  background: var(--bg-deep); border: 1px solid var(--border-soft);
}
.cps-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent-arcane), var(--accent-gold));
  opacity: 0.5;
}
.cps-progress-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 700; color: var(--text-primary);
}
.cps-teasers { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cps-teasers-k {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.cps-teaser {
  padding: 3px 9px; border-radius: var(--r-full); font-size: var(--fs-micro); font-weight: 700;
  background: var(--bg-panel-raised); border: 1px dashed var(--border-active); color: var(--text-muted);
}

/* ── ready state: the banner ── */
.cps-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-arcane) 20%, var(--bg-panel-raised)),
    color-mix(in srgb, var(--accent-gold) 14%, var(--bg-panel-raised)));
  border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, var(--border-soft));
  box-shadow: 0 0 22px rgba(230,192,106,0.16);
}
.cps-banner-spark {
  font-size: var(--fs-xl); color: var(--text-gold);
  animation: cps-spark 2.4s ease-in-out infinite;
}
@keyframes cps-spark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.18) rotate(12deg); opacity: 1; }
}
.cps-banner-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cps-banner-txt b { font-size: var(--fs-sm); font-weight: 800; color: var(--text-primary); }
.cps-banner-txt span { font-size: var(--fs-micro); color: var(--text-secondary); }

/* ── cost row ── */
.cp-cost { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cp-cost-k {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.cp-cost-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-full); font-size: var(--fs-2xs); font-weight: 700;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); color: var(--text-primary);
}
.cp-cost-chip i {
  font-style: normal; font-size: var(--fs-micro); color: var(--text-faint); font-weight: 600;
}
.cp-cost-chip.is-short { border-color: var(--danger); color: var(--danger); }
.cp-cost-chip.is-short i { color: var(--danger); opacity: 0.8; }
.cp-cost-art {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: var(--r-xs);
  background-repeat: no-repeat; background-position: center; image-rendering: pixelated;
}
.cp-cost.is-free {
  gap: 6px; padding: 8px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  font-size: var(--fs-2xs); color: var(--text-success);
}
.cp-cost.is-free span { color: var(--text-muted); font-size: var(--fs-micro); }

/* ── the two paths ── */
.career-path-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;
}
.career-path-card {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 13px; border-radius: var(--r-md);
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--cp, var(--accent-gold));
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.career-path-options .career-path-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cp, var(--accent-gold)) 60%, var(--border-soft));
  box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 20px color-mix(in srgb, var(--cp, var(--accent-gold)) 22%, transparent);
}
.career-path-card.is-current {
  background: color-mix(in srgb, var(--cp, var(--accent-gold)) 8%, var(--bg-panel-raised));
}
.cp-head { display: flex; align-items: center; gap: 10px; }
.cp-face {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--cp, var(--accent-gold));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp, var(--accent-gold)) 50%, transparent);
}
.cp-face-sprite { image-rendering: pixelated; }
.cp-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-name { font-size: var(--fs-sm); font-weight: 800; color: var(--cp, var(--text-primary)); }
.cp-role { font-size: var(--fs-micro); color: var(--text-muted); }
.cp-flag {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-full);
  background: var(--bg-deep); border: 1px solid var(--border-active); color: var(--text-faint);
}
.cp-tagline { font-size: var(--fs-micro); font-style: italic; color: var(--text-secondary); }
.cp-block { display: flex; flex-direction: column; gap: 5px; }
.cp-block-k {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint);
}
.cp-passive-name { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-primary); }
.cp-bonuses { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-bonus {
  font-size: var(--fs-micro); font-weight: 700; padding: 2px 7px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--text-success);
}
.cp-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-skill { display: flex; align-items: flex-start; gap: 8px; }
.cp-skill-ico {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); border: 1px solid var(--border-soft);
}
.cp-skill-ico-fb { font-size: var(--fs-xs); }
.cp-skill-txt { display: flex; flex-direction: column; min-width: 0; }
.cp-skill-txt b { font-size: var(--fs-2xs); color: var(--text-primary); }
.cp-skill-txt i { font-style: normal; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.35; }
.cp-awaken {
  font-size: var(--fs-micro); color: var(--accent-arcane); font-weight: 700;
  padding: 6px 9px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-arcane) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 28%, transparent);
}

/* ── the CTA ── */
.cp-choose {
  margin-top: auto; padding: 11px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em; cursor: pointer;
  color: var(--text-on-class);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cp, var(--accent-gold)) 88%, var(--fx-highlight)), var(--cp, var(--accent-gold)));
  border: 1px solid color-mix(in srgb, var(--cp, var(--accent-gold)) 70%, var(--line-strong));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cp, var(--accent-gold)) 30%, transparent);
  transition: filter 0.12s, transform 0.12s, box-shadow 0.12s;
  position: relative; overflow: hidden;
}
.cp-choose:not([disabled]):hover {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--cp, var(--accent-gold)) 45%, transparent);
}
.cp-choose:not([disabled]):active { transform: translateY(0); }
/* A sheen that sweeps the button so it reads as available, not just coloured. */
.cp-choose:not([disabled])::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: cp-sheen 2.8s ease-in-out infinite;
}
@keyframes cp-sheen {
  0%        { left: -50%; }
  55%, 100% { left: 130%; }
}
.cp-choose-label { position: relative; z-index: 1; }
.cp-choose[disabled] {
  background: var(--bg-deep); color: var(--text-faint);
  border-color: var(--border-soft); box-shadow: var(--e0); cursor: default;
}
.cp-choose.is-current[disabled] { color: var(--cp, var(--text-muted)); border-color: var(--cp, var(--border-soft)); opacity: 0.75; }

.cps-switch {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary);
  background: var(--bg-panel-raised); border: 1px solid var(--border-active);
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.cps-switch span { font-size: var(--fs-micro); font-weight: 600; color: var(--text-faint); }
.cps-switch:hover { border-color: var(--accent-arcane); color: var(--accent-arcane); background: var(--bg-hover); }
.cps-switch.is-short { opacity: 0.6; }

@media (max-width: 720px) {
  .career-path-options { grid-template-columns: 1fr; }
  .cps-banner { flex-wrap: wrap; }
}

/* Career-path confirm modal — the transformation, not a text arrow. */
.cpc-box { max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.cpc-morph {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
}
.cpc-side { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.cpc-side b { font-size: var(--fs-xs); font-weight: 800; color: var(--cp, var(--text-primary)); text-align: center; }
.cpc-side span {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.cpc-face {
  width: 64px; height: 64px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--cp, var(--accent-gold));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp, var(--accent-gold)) 55%, transparent);
  image-rendering: pixelated;
}
.cpc-side.is-to .cpc-face {
  box-shadow: inset 0 0 0 2px var(--cp, var(--accent-gold)),
              0 0 18px color-mix(in srgb, var(--cp, var(--accent-gold)) 45%, transparent);
  animation: cpc-pulse 1.9s ease-in-out infinite;
}
@keyframes cpc-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.cpc-arrow { font-size: var(--fs-lg); color: var(--text-gold); }
.cpc-hero { text-align: center; font-size: var(--fs-2xs); color: var(--text-muted); }
.cpc-go { font-weight: 800; letter-spacing: 0.02em; }

/* ══════════════════════ RAID v11 — one squad of six, graded on speed ═══════
   The three-lane reserve draft is gone. A raid fields ONE squad the player
   builds (up to six, double any other mode) and the payout is decided by how
   much of the rift's own timer the kill took. Both facts get real estate: a
   squad builder above the rift list, and the grade ladder next to it so the
   deal is stated before the run, echoed live during it, and settled after. */

/* ---- squad builder ---- */
.rd-squadbuilder {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rd-sb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rd-sb-title { font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); }
.rd-sb-count {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--bg-deep); border: 1px solid var(--border-soft); color: var(--text-gold);
}
.rd-sb-gs { margin-left: auto; font-size: var(--fs-micro); color: var(--text-muted); }
.rd-sb-gs b { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }
.rd-sb-auto {
  padding: 4px 11px; border-radius: var(--r-full); cursor: pointer;
  font-size: var(--fs-micro); font-weight: 800;
  background: transparent; border: 1px solid var(--accent-arcane); color: var(--accent-arcane);
}
.rd-sb-auto:hover { background: color-mix(in srgb, var(--accent-arcane) 14%, transparent); }
.rd-sb-note { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.45; }

.rd-sb-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.rd-slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  padding: 9px 5px; border-radius: var(--r-sm); position: relative;
  border: 1px solid var(--border-soft); background: var(--bg-panel-raised);
  text-align: center;
}
.rd-slot.is-filled {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--hue, var(--accent-gold)) 45%, var(--border-soft));
  border-top: 3px solid var(--hue, var(--accent-gold));
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.rd-slot.is-filled:hover {
  transform: translateY(-2px);
  box-shadow: var(--e2);
  border-color: var(--danger);
}
.rd-slot.is-filled:hover .rd-slot-x { opacity: 1; }
.rd-slot-x {
  position: absolute; top: 3px; right: 5px; opacity: 0;
  font-size: var(--fs-micro); font-weight: 800; color: var(--danger); transition: opacity 0.12s;
}
.rd-slot.is-empty { border-style: dashed; opacity: 0.6; justify-content: center; min-height: 92px; }
.rd-slot-plus { font-size: var(--fs-lg); color: var(--text-faint); }
.rd-slot-face {
  /* 32, not 34: this box shows hero_*.png, which is a true pixel grid
     (96x32 = 3 frames of 32x32). At 34 the nearest-neighbour upscale doubles
     some pixel rows and triples others, so the box must be exactly 32 or 64. */
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--hue, var(--accent-gold));
  image-rendering: pixelated;
}
.rd-slot-name {
  font-size: var(--fs-micro); font-weight: 700; color: var(--text-primary);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-slot-sub { font-size: 0.56rem; color: var(--text-faint); }
.rd-slot-gs { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }

.rd-sb-bench-k {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint);
}
.rd-sb-bench { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-bench-none { font-size: var(--fs-micro); color: var(--text-faint); font-style: italic; }
.rd-bench-card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: var(--r-full); cursor: pointer;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  font-size: var(--fs-micro); color: var(--text-secondary);
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.rd-bench-card:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: var(--hue, var(--accent-gold)); background: var(--bg-hover); color: var(--text-primary);
}
.rd-bench-card[disabled] { opacity: 0.35; cursor: not-allowed; }
.rd-bench-face {
  width: 22px; height: 22px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--hue, var(--accent-gold)); image-rendering: auto !important;
}
.rd-bench-gs { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }

/* ---- the grade ladder (lobby) ---- */
.rd-ladder {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--border-soft); box-shadow: var(--e1);
}
.rd-ladder-head { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); font-weight: 800; color: var(--text-primary); }
.rd-ladder-head span { font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); line-height: 1.45; }
.rd-ladder-rows { display: flex; flex-direction: column; gap: 4px; }
/* The rule the rows cannot express: speed sets a FLOOR, damage can raise it.
   Muted like the header's sub-line so it reads as a footnote, not a fifth row. */
.rd-ladder-foot {
  margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--border-soft);
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.5; color: var(--text-muted);
}
.rd-ladder-foot b { font-weight: 800; color: var(--text-secondary); }
.rd-ladder-row {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  font-size: var(--fs-micro); color: var(--text-secondary);
}
.rd-ladder-g {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 800;
  background: var(--bg-deep); color: var(--grade, var(--text-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grade, var(--border-active)) 60%, transparent);
}
.rd-ladder-mult { font-family: var(--font-mono); font-weight: 700; color: var(--text-gold); }
.rd-ladder-gear { font-weight: 700; }

/* Grade colours, shared by the ladder, the live pace strip and the report. */
.rd-grade-S { --grade: var(--rarity-mythic); }
.rd-grade-A { --grade: var(--gold-bright); }
.rd-grade-B { --grade: var(--rarity-epic); }
.rd-grade-C { --grade: var(--rarity-rare-bright); }
.rd-grade-D { --grade: var(--rarity-common); }

/* ---- live pace strip (run screen) ---- */
.rd-pace {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--grade, var(--accent-gold)) 12%, var(--bg-panel-raised));
  border: 1px solid color-mix(in srgb, var(--grade, var(--accent-gold)) 42%, var(--border-soft));
}
.rd-pace-g {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 800;
  background: var(--bg-deep); color: var(--grade, var(--accent-gold));
  box-shadow: inset 0 0 0 1px var(--grade, var(--border-active));
}
.rd-pace-txt { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-secondary); }

/* ---- one solo lane ---- */
.rd-lane.is-solo .rd-lane-roster {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.rd-lane-hero {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 3px; border-radius: var(--r-full);
  background: var(--bg-panel-raised);
  border: 1px solid color-mix(in srgb, var(--hue, var(--accent-gold)) 40%, var(--border-soft));
  font-size: var(--fs-micro); color: var(--text-secondary);
}
.rd-lane-hero .rd-face {
  width: 20px; height: 20px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--hue, var(--accent-gold));
}

/* ---- speed verdict (report) ---- */
.rdr-speed {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--grade, var(--accent-gold)) 10%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--grade, var(--accent-gold)) 45%, var(--border-soft));
}
.rdr-speed.is-nokill {
  display: block; font-size: var(--fs-2xs); color: var(--text-muted);
  background: var(--bg-panel); border-color: var(--border-soft);
}
.rdr-speed-g { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rdr-speed-g b {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 800;
  background: var(--bg-deep); color: var(--grade, var(--accent-gold));
  box-shadow: inset 0 0 0 2px var(--grade, var(--border-active)),
              0 0 20px color-mix(in srgb, var(--grade, var(--accent-gold)) 35%, transparent);
}
.rdr-speed-g span {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.rdr-speed-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rdr-speed-time { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); }
.rdr-speed-time span { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; color: var(--text-faint); }
.rdr-speed-track { height: 7px; border-radius: var(--r-full); background: var(--bg-deep); overflow: hidden; }
.rdr-speed-fill { display: block; height: 100%; background: var(--grade, var(--accent-gold)); }
.rdr-speed-note { font-size: var(--fs-micro); color: var(--text-muted); }
.rdr-speed-pb { color: var(--text-gold); }
.rdr-speed-mult { display: flex; flex-direction: column; align-items: flex-end; }
.rdr-speed-mult b { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 800; color: var(--text-gold); }
.rdr-speed-mult span { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }

.rd-best.is-time { color: var(--grade, var(--accent-gold)); }

@media (max-width: 900px) {
  .rd-sb-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdr-speed { grid-template-columns: auto 1fr; }
  .rdr-speed-mult { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; gap: 8px; align-items: baseline; }
  .rd-ladder-row { grid-template-columns: 30px 1fr; row-gap: 3px; }
  .rd-ladder-mult, .rd-ladder-gear { grid-column: 2; }
}
/* V11 Batch E — progressive feature ladder -------------------------------- */
.cc-menu-feature-locked,
.bn-locked {
  opacity: .78;
  filter: saturate(.55);
  cursor: pointer;
}

.cc-menu-feature-locked:hover,
.bn-locked:hover {
  opacity: 1;
  filter: none;
}

.cc-menu-feature-locked .cc-menu-icon,
.bn-locked .bn-icon {
  filter: grayscale(1);
}

.cc-menu-feature-locked .cc-menu-locked {
  color: var(--text-gold);
  font-size: var(--fs-micro);
  white-space: nowrap;
}

.bn-label small {
  display: block;
  margin-top: 1px;
  color: var(--text-muted, var(--text-navigation-caption));
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.feature-inline-locked {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent-gold, var(--line-locked-accent)) 48%, var(--border-soft));
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised, var(--bg-panel-raised));
  color: var(--text-muted, var(--text-locked-muted));
}

.feature-inline-locked strong,
.feature-inline-locked span {
  display: block;
}

.feature-inline-locked strong {
  margin-bottom: 3px;
  color: var(--text-primary, var(--text-locked-strong));
}

.feature-inline-lock {
  flex: 0 0 auto;
  font-size: var(--fs-xl);
}

.feature-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 7, 10, .78);
  backdrop-filter: blur(6px);
}

.feature-modal-card {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  overflow: hidden;
  padding: 30px 28px 26px;
  border: 1px solid rgba(229, 185, 92, .5);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--surface-modal), var(--surface-modal-deep) 70%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .62), 0 0 45px rgba(229, 185, 92, .12);
  text-align: center;
  animation: feature-card-in .28s ease-out both;
}

.feature-modal-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border: 1px solid rgba(229, 185, 92, .5);
  border-radius: var(--r-lg);
  background: rgba(229, 185, 92, .12);
  box-shadow: 0 0 28px rgba(229, 185, 92, .18);
  font-size: var(--fs-3xl);
}

.feature-modal-eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 5px;
  color: var(--text-gold);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.feature-modal-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 9px;
  color: var(--text-modal-primary);
  font-size: var(--fs-2xl);
}

.feature-modal-card p {
  position: relative;
  z-index: 1;
  margin: 0 auto 22px;
  max-width: 34ch;
  color: var(--text-modal-muted);
  line-height: 1.55;
}

.feature-unlock-go {
  position: relative;
  z-index: 1;
  min-width: 190px;
}

.feature-unlock-rays {
  position: absolute;
  top: -116px;
  left: 50%;
  width: 310px;
  height: 310px;
  transform: translateX(-50%);
  border-radius: var(--r-full);
  background: repeating-conic-gradient(from 0deg, rgba(229,185,92,.13) 0 8deg, transparent 8deg 18deg);
  animation: feature-rays 18s linear infinite;
}

@keyframes feature-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes feature-rays {
  to { transform: translateX(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-modal-card,
  .feature-unlock-rays { animation: none; }
}

/* Shared finished/request states (A4). One visual grammar for every panel. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.empty-state,
.panel-error,
.panel-loading {
  width: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 20px;
  border: 1px dashed var(--border-active);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-panel-raised) 82%, var(--bg-panel));
  color: var(--text-secondary);
  text-align: center;
}

.empty-state-art,
.empty-state-emoji,
.panel-error-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background-color: var(--bg-panel);
  box-shadow: var(--e1);
}
.empty-state-art {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.empty-state-emoji,
.panel-error-icon { font-size: var(--fs-3xl); }
.empty-state-title { color: var(--text-primary); font-weight: 800; font-size: var(--fs-md); }
.empty-state-body { max-width: 42ch; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.empty-state-cta,
.panel-error-retry { margin-top: 5px; min-height: 44px; }
.empty-state-compact,
.panel-error-compact,
.panel-loading-compact { min-height: 132px; padding: 18px 14px; }
.empty-state-compact .empty-state-art,
.empty-state-compact .empty-state-emoji,
.panel-error-compact .empty-state-art,
.panel-error-compact .panel-error-icon { width: 50px; height: 50px; font-size: var(--fs-2xl); }

.panel-error { border-style: solid; border-color: color-mix(in srgb, var(--danger) 55%, var(--border-soft)); }
.panel-error-icon {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-panel));
}

.panel-loading { position: relative; overflow: hidden; }
.panel-skeleton {
  display: block;
  width: min(100%, 360px);
  height: 13px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--bg-hover), var(--border-soft), var(--bg-hover));
  background-size: 220% 100%;
  animation: panelSkeletonSweep 1.25s ease-in-out infinite;
}
.panel-skeleton-art { width: 64px; height: 64px; border-radius: var(--r-md); }
.panel-skeleton-title { width: min(68%, 240px); height: 18px; margin-top: 3px; }
.panel-skeleton-line-short { width: min(52%, 190px); }
@keyframes panelSkeletonSweep { to { background-position: -220% 0; } }

.mat-grid > .empty-state,
.inv-item-grid > .empty-state,
.item-grid > .empty-state,
.cards-grid > .empty-state { grid-column: 1 / -1; }

/* Guarded actions (A6). Cancel remains first and receives initial focus. */
.feature-modal-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.confirm-destructive-card,
.number-modal-card {
  color: var(--text-primary);
  border-color: var(--border-active);
  background: var(--bg-panel);
  box-shadow: var(--e3);
}
.confirm-destructive-card { border-color: color-mix(in srgb, var(--danger) 60%, var(--border-soft)); }
.confirm-destructive-card h2,
.number-modal-card h2 { color: var(--text-primary); }
.confirm-destructive-card p,
.number-modal-card p { color: var(--text-secondary); }
.confirm-destructive-icon {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-panel));
  box-shadow: var(--e0);
}
.confirm-destructive-detail {
  position: relative;
  z-index: 1;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-panel-raised);
  color: var(--text-secondary);
  text-align: left;
}
.confirm-item-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; }
.confirm-item-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.confirm-item-art,
.confirm-item-fallback,
.confirm-card-art {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background-color: var(--bg-panel);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: var(--fs-2xl);
}
.confirm-card-art .card-art-img { width: 100%; height: 100%; }
.confirm-summary { color: var(--text-secondary); line-height: 1.55; text-align: center; }
.confirm-lowest-gs-list {
  display: grid;
  gap: calc(var(--fs-md) / 4);
  max-height: calc(var(--fs-md) * 14);
  margin-top: var(--fs-sm);
  padding-right: calc(var(--fs-md) / 4);
  overflow-y: auto;
}
.confirm-lowest-gs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--fs-sm);
  align-items: center;
  padding: calc(var(--fs-md) / 2) var(--fs-sm);
  border-radius: var(--r-xs);
  background: var(--bg-hover);
  font-size: var(--fs-2xs);
}
.confirm-lowest-gs-row span:first-child { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font-weight: 700; }
.confirm-lowest-gs-row span:not(:first-child) { font-family: var(--font-mono); white-space: nowrap; }
.confirm-destructive-confirm:disabled { animation: none; opacity: 0.58; cursor: wait; }

.number-modal-label { display: block; color: var(--text-secondary); font-weight: 700; text-align: left; }
.number-modal-input,
.acc-copy-fallback {
  width: 100%;
  border: 1px solid var(--border-active);
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
}
.number-modal-input { margin-top: 6px; padding: 10px 12px; font: 700 1rem var(--font-mono); text-align: center; }
.number-modal-error { min-height: 1.5em; margin-top: 5px; color: var(--danger); font-size: var(--fs-xs); }
.acc-copy-fallback { width: min(190px, 55vw); padding: 3px 6px; font: inherit; font-family: var(--font-mono); }
.copy-status { min-height: 1.5em; margin-top: 6px; color: var(--text-muted); font-size: var(--fs-xs); }

.mail-claim-pending,
.mail-claim-btn:disabled,
#mailbox-claim-all:disabled {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 0.62;
  cursor: wait;
}

@media (max-width: 480px) {
  .empty-state,
  .panel-error,
  .panel-loading { min-height: 160px; padding: 20px 14px; }
  .empty-state-compact,
  .panel-error-compact,
  .panel-loading-compact { min-height: 120px; padding: 15px 10px; }
  .feature-modal-actions { flex-direction: column; }
  .feature-modal-actions .btn { width: 100%; min-height: 42px; }
  .confirm-item-row { grid-template-columns: 52px 1fr; }
  .confirm-item-row > b { grid-column: 1 / -1; text-align: center; }
  .confirm-item-art,
  .confirm-item-fallback,
  .confirm-card-art { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-skeleton,
  .mail-claim-btn,
  #mailbox-claim-all { animation: none !important; }
}

/* ============================================================== Contact Admin */

.contact-admin-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  min-height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 70%, var(--line-highlight));
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--surface-fab), var(--surface-fab-deep));
  color: var(--text-on-well);
  box-shadow: 0 8px 24px rgba(20, 24, 32, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  font: 700 .78rem/1 var(--font-body);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, opacity .14s ease;
}

.contact-admin-fab:hover {
  transform: translateY(-2px);
  border-color: var(--accent-gold);
  box-shadow: 0 11px 28px rgba(20, 24, 32, .34), 0 0 20px rgba(184, 134, 11, .16);
}

.contact-admin-fab:active { transform: translateY(0) scale(.98); }
.contact-admin-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-gold) 65%, var(--line-highlight)); outline-offset: 3px; }
.contact-admin-fab-icon { color: var(--text-fab-icon); font-size: var(--fs-md); }
.contact-admin-fab-icon .ui-ic { display: block; width: 20px; height: 20px; }

.contact-admin-fab-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-deep);
  border-radius: var(--r-full);
  background: var(--danger);
  color: var(--text-on-well);
  box-shadow: 0 3px 9px rgba(214, 64, 47, .35);
  font: 800 .68rem/1 var(--font-mono);
}

.contact-admin-fab-badge[hidden] { display: none; }

.contact-admin-overlay { padding: 18px; }

.contact-admin-modal {
  width: min(960px, calc(100vw - 36px));
  max-width: 960px;
  height: min(720px, calc(100vh - 36px));
  max-height: 720px;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-soft));
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--e4);
}

.contact-admin-header {
  min-height: 68px;
  padding: 13px 16px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-gold) 9%, var(--bg-panel)), var(--bg-panel));
}

.contact-admin-header .modal-title { margin: 0; color: var(--text-primary); font-size: var(--fs-lg); }
.contact-admin-eyebrow { color: var(--text-gold); font-size: var(--fs-micro); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.contact-admin-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-2xl);
  line-height: 1;
}

.contact-admin-close:hover { border-color: var(--border-soft); background: var(--bg-hover); color: var(--text-primary); }
.contact-admin-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-gold) 55%, var(--line-highlight)); outline-offset: 2px; }
.contact-admin-content { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.contact-admin-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
}

.contact-admin-sidebar {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  border-right: 1px solid var(--border-soft);
  background: var(--bg-panel-raised);
}

.contact-admin-compose,
.contact-admin-ticket-section {
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  box-shadow: var(--e1);
}

.contact-admin-compose { margin-bottom: 14px; }
.contact-admin-compose h3,
.contact-admin-ticket-section h3,
.contact-admin-thread-head h3 { margin: 0; color: var(--text-primary); font-size: var(--fs-sm); }
.contact-admin-compose form,
.contact-admin-reply { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }

.contact-admin-modal label {
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.contact-admin-modal select,
.contact-admin-modal textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font: .82rem/1.5 var(--font-body);
}

.contact-admin-modal select { min-height: 40px; padding: 7px 9px; }
.contact-admin-modal textarea { min-height: 82px; padding: 9px 10px; resize: vertical; }
.contact-admin-modal select:focus,
.contact-admin-modal textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent-gold) 48%, transparent); border-color: var(--accent-gold); }

.contact-admin-form-foot {
  min-height: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.contact-admin-inline { flex: 1 1 auto; color: var(--text-muted); font-size: var(--fs-micro); }
.contact-admin-inline.is-error,
.contact-admin-read-status.is-error { color: var(--danger); }
.contact-admin-inline.is-success { color: var(--text-success); }
.contact-admin-counter { flex: 0 0 auto; color: var(--text-muted); font: .66rem/1.5 var(--font-mono); }
.contact-admin-counter.is-over { color: var(--danger); font-weight: 800; }
.contact-admin-send { width: 100%; min-height: 40px; }

.contact-admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.contact-admin-refresh {
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-gold);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.contact-admin-refresh:hover { background: var(--bg-hover); }
.contact-admin-ticket-list { display: flex; flex-direction: column; gap: 7px; }

.contact-admin-ticket {
  width: 100%;
  min-height: 76px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  color: var(--text-primary);
  text-align: left;
}

.contact-admin-ticket:hover { border-color: var(--border-active); background: var(--bg-hover); }
.contact-admin-ticket.is-selected { border-color: var(--accent-gold); box-shadow: 0 0 0 1px var(--accent-gold) inset; }
.contact-admin-ticket:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-gold) 48%, var(--line-highlight)); outline-offset: 1px; }
.contact-admin-ticket-top,
.contact-admin-ticket-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contact-admin-ticket-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs); }
.contact-admin-ticket-preview { overflow: hidden; color: var(--text-muted); font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap; }
.contact-admin-ticket-meta { color: var(--text-faint); font-size: var(--fs-micro); }

.contact-admin-ticket-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--danger);
  color: var(--text-on-well);
  font: 800 .63rem/1 var(--font-mono);
}

.contact-admin-status {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  background: var(--bg-panel-raised);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 800;
}

.contact-admin-status.is-open { border-color: color-mix(in srgb, var(--accent-info) 38%, var(--border-soft)); color: var(--text-info); }
.contact-admin-status.is-answered { border-color: color-mix(in srgb, var(--success) 42%, var(--border-soft)); color: var(--text-success); }
.contact-admin-status.is-closed { color: var(--text-muted); }

.contact-admin-thread-pane {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
}

.contact-admin-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-admin-read-status { min-height: 24px; padding-top: 4px; color: var(--text-muted); font-size: var(--fs-micro); }

.contact-admin-messages {
  flex: 1 1 auto;
  min-height: 150px;
  padding: 6px 3px 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
}

.contact-admin-message {
  width: min(86%, 560px);
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-panel-raised);
}

.contact-admin-message.from-player {
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  border-color: color-mix(in srgb, var(--accent-info) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-info) 7%, var(--bg-panel));
}

.contact-admin-message.from-admin {
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel));
}

.contact-admin-message-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text-faint); font-size: var(--fs-micro); }
.contact-admin-message-meta strong { color: var(--text-secondary); }
.contact-admin-message-body { margin-top: 4px; color: var(--text-primary); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-admin-thread-empty { color: var(--text-muted); text-align: center; }

.contact-admin-reply {
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.contact-admin-signed-out {
  height: 100%;
  min-height: 280px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.contact-admin-signed-out-icon { color: var(--text-gold); font-size: var(--fs-3xl); }
.contact-admin-signed-out p { max-width: 44ch; margin: 0; color: var(--text-secondary); }

@media (max-width: 900px) {
  .contact-admin-fab {
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: var(--r-full);
  }
  .contact-admin-fab-label { display: none; }
  .contact-admin-fab-icon { font-size: var(--fs-lg); }
  #app-shell.cc-drawer-open ~ .contact-admin-fab { opacity: 0; visibility: hidden; pointer-events: none; }

  .contact-admin-overlay { padding: 8px; align-items: flex-end; }
  .contact-admin-modal {
    width: 100%;
    max-width: none;
    height: min(760px, calc(100vh - 16px));
    height: min(760px, calc(100dvh - 16px));
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .contact-admin-content { overflow-y: auto; }
  .contact-admin-grid { height: auto; display: block; }
  .contact-admin-sidebar { padding: 12px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .contact-admin-thread-pane { min-height: 460px; padding: 14px 12px; overflow: visible; }
  .contact-admin-messages { flex: 0 0 auto; max-height: 320px; }
  .contact-admin-message { width: 92%; }
}

@media (max-width: 420px) {
  .contact-admin-header { min-height: 62px; padding-left: 14px; }
  .contact-admin-sidebar { padding: 10px; }
  .contact-admin-compose,
  .contact-admin-ticket-section { padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-admin-fab { transition: none; }
}

/* Hero inspector: equipment-detail art and equipped-effect icons/descriptions */
.pd-d-art {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: auto;
  border-radius: var(--r-xs);
}
.pd-d-art-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
}
.eff-ic,
.eff-ic-fb {
  height: 1.15em;
  vertical-align: middle;
  margin-right: 3px;
}
.eff-ic {
  display: inline-block;
  width: 1.15em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: auto;
}
.eff-ic-fb {
  display: inline-block;
  width: 1.15em;
  line-height: 1.15em;
  text-align: center;
}
.insp-eff-row { align-items: flex-start; }
.insp-eff-name { min-width: 0; }
.insp-eff-desc {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1.3;
}

/* ==========================================================================
   Task A3 — Design Bench always-visible power dials and headline preview
   ========================================================================== */
.bpd-card .option-row.is-zero .opt-name,
.bpd-card .option-row.is-zero .opt-gs { color: var(--text-muted); }
.bpd-card .option-row.is-zero .opt-val {
  color: var(--text-muted);
  font-weight: 400;
}
.bpd-card .option-row.is-disabled { opacity: 0.62; }
.bpd-card .option-row input[type="range"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bpd-card .effect-row-cap-note {
  margin: 2px 0 0;
  padding: 0;
  color: var(--text-muted);
  font-weight: 400;
  text-align: right;
}
.bpd-preview {
  max-height: 150px;
  overflow: hidden;
}
.bpd-preview-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.bpd-preview-copy { min-width: 0; }
.bpd-preview-head .bpd-preview-art {
  width: 64px;
  height: 64px;
  margin: 0;
}
.bpd-preview-head .bpd-preview-art-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
}
.bpd-preview > .bpd-chips {
  max-height: 48px;
  overflow-y: auto;
}

/* ==========================================================================
   Task A4 — Quick Menu drawn icon art
   ========================================================================== */
.qm-ic {
  display: block;
  margin: 0 auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: auto !important;
}
.qm-ic-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  line-height: 1;
}
.cc-menu-icon .qm-ic,
.cc-menu-icon .qm-ic-fb {
  width: 18px;
  height: 18px;
}
.bn-icon .qm-ic,
.bn-icon .qm-ic-fb {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Task A5 — smooth UI illustration at non-integer and downscaled box sizes
   ========================================================================== */
.mat-cell-icon-img,
.scp-loot-chip-icon,
.slotpick-icon-img,
.tsh-icon,
.wh-emblem,
.wh-art img,
.shop-card-art,
.oc2-chip-art,
.slt-chip-icon,
.rdr-loot-art,
.cp-cost-art,
.hero-pick-portrait,
.cp-face-sprite,
.recruit-face-sprite {
  image-rendering: auto !important;
}
/* .rd-slot-face is deliberately NOT in the list above: now that its box is a
   clean 32px it renders at x1.000, so pixelated is what keeps it crisp. */

/* ── Delivery expansion: melee kinds + projectiles per WEAPON ────────────────
   meleeKindForClass used to answer with one of two values — `bash` if the class
   carried a baton or a pan, `slash` for everyone else — so five melee careers
   swung the identical white arc. Shears, a sickle, a car door and a cocktail
   shaker are not the same gesture. Three new kinds below give the weapons that
   had no motion one of their own; pure CSS, no art. */

/* Barber: two blades closing on the target. The only kind built from a PAIR of
   pseudo-elements — a single arc cannot say "scissors". */
.sim-slash-snip { width: 26px; height: 26px; animation: simSnip 0.24s ease-out forwards; }
.sim-slash-snip::before,
.sim-slash-snip::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 2.5px; margin: -1.25px 0 0 -11px;
  border: 0; border-radius: var(--r-xs); background: linear-gradient(90deg, transparent, var(--fx-slash-core) 55%, var(--fx-highlight));
  filter: drop-shadow(0 0 3px rgba(210, 240, 255, 0.9));
}
.sim-slash-snip::before { transform: rotate(calc(var(--slash-rot, 0deg) + 26deg)); }
.sim-slash-snip::after  { transform: rotate(calc(var(--slash-rot, 0deg) - 26deg)); }
@keyframes simSnip {
  0%   { opacity: 0; transform: scale(1.25); }
  45%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(0.82); }  /* the blades meet */
  100% { opacity: 0; transform: scale(0.92); }
}

/* Taxi: a bumper. Blunt, wide, and it drives THROUGH the target rather than
   arcing across it — the shove is the whole read. */
.sim-slash-ram { width: 30px; height: 18px; animation: simRam 0.26s cubic-bezier(.2,.9,.3,1) forwards; }
.sim-slash-ram::before {
  border: 0; border-radius: var(--r-full) var(--r-full) var(--r-full) var(--r-full);
  background: linear-gradient(90deg, rgba(255,235,160,0) 0%, rgba(255,214,110,.75) 45%, var(--fx-highlight) 100%);
  filter: drop-shadow(0 0 5px rgba(255, 205, 95, 0.9));
}
@keyframes simRam {
  0%   { opacity: 0; transform: translateX(-12px) rotate(var(--slash-rot, 0deg)) scaleX(0.6); }
  35%  { opacity: 1; transform: translateX(0) rotate(var(--slash-rot, 0deg)) scaleX(1.15); }
  100% { opacity: 0; transform: translateX(9px) rotate(var(--slash-rot, 0deg)) scaleX(0.95); }
}

/* Bartender: glass going everywhere. A short burst of thin shards, which is
   what a shaker/bottle connecting actually looks like. */
.sim-slash-shatter { width: 26px; height: 26px; animation: simShatter 0.28s ease-out forwards; }
.sim-slash-shatter::before {
  border: 0; border-radius: 0;
  background:
    linear-gradient(24deg,  transparent 46%, rgba(200,245,255,.95) 49% 51%, transparent 54%),
    linear-gradient(96deg,  transparent 46%, rgba(255,255,255,.9)  49% 51%, transparent 54%),
    linear-gradient(150deg, transparent 46%, rgba(180,235,255,.85) 49% 51%, transparent 54%);
  filter: drop-shadow(0 0 4px rgba(190, 240, 255, 0.85));
}
@keyframes simShatter {
  0%   { opacity: 0; transform: rotate(var(--slash-rot, 0deg)) scale(0.35); }
  30%  { opacity: 1; transform: rotate(var(--slash-rot, 0deg)) scale(1); }
  100% { opacity: 0; transform: rotate(var(--slash-rot, 0deg)) scale(1.5); }
}

/* Barista + business: the last two ranged careers still firing generic arrows. */
.sim-proj-bean {
  width: 8px; height: 6px; border-radius: var(--r-full);
  background: linear-gradient(120deg, var(--fx-projectile-bean-deep) 30%, var(--fx-projectile-bean-highlight) 70%);
  box-shadow: 0 0 4px rgba(190, 130, 80, .7);
}
.sim-proj-bean::before {
  content: ''; position: absolute; left: 1px; top: 50%; width: 6px; height: 1px;
  margin-top: -0.5px; background: rgba(30, 16, 8, .8); border-radius: var(--r-xs);
}
.sim-proj-coin {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: radial-gradient(circle at 34% 30%, var(--fx-coin-highlight) 0 25%, var(--fx-coin-mid) 45%, var(--fx-coin-deep) 85%);
  box-shadow: 0 0 5px rgba(240, 195, 80, .85);
  animation: projSpin 0.35s linear infinite;
}

/* Charge streak — the trail a `dash` skill leaves along the ground it covered.
   Without it the token simply appears somewhere else and reads as a teleport. */
.sim-dash-streak {
  position: absolute;
  height: 4px;
  margin-top: -2px;
  transform-origin: 0 50%;
  transform: rotate(var(--rot, 0deg)) scaleX(0.15);
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, rgba(255, 236, 170, 0) 0%, rgba(255, 226, 130, .55) 45%, rgba(255, 255, 255, .9) 100%);
  box-shadow: 0 0 7px rgba(255, 215, 110, .8);
  pointer-events: none;
  z-index: 5;
  animation: simDashStreak 0.34s cubic-bezier(.15, .85, .3, 1) forwards;
}
.sim-dash-streak.sim-dash-enemy {
  background: linear-gradient(90deg, rgba(255, 150, 130, 0) 0%, rgba(255, 130, 105, .55) 45%, rgba(255, 220, 210, .9) 100%);
  box-shadow: 0 0 7px rgba(255, 120, 95, .8);
}
@keyframes simDashStreak {
  0%   { opacity: 0;   transform: rotate(var(--rot, 0deg)) scaleX(0.15); }
  25%  { opacity: 1;   transform: rotate(var(--rot, 0deg)) scaleX(1); }
  100% { opacity: 0;   transform: rotate(var(--rot, 0deg)) scaleX(1); }
}

/* B2: data-backed illustration spans. These asset families are scaled UI art;
   _auCss supplies image-rendering:auto inline, so arbitrary UI sizes are safe. */
.data-art-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.element-art { width: 16px; height: 16px; vertical-align: -4px; }
.weapon-type-art { width: 18px; height: 18px; vertical-align: -5px; }
.screen-title-art { width: 32px; height: 32px; vertical-align: -8px; }
.shell-art-icon,
.item-notification-art { width: 18px; height: 18px; vertical-align: -5px; }
.feature-modal-art { display: block; width: 64px; height: 64px; }
.pst-branch-art { display: block; width: 32px; height: 32px; }

/* ═══════════════════════════════════════════════════════════════════════════
BATCH C2 — ARENA
   ---------------------------------------------------------------------------
   Arena rows must answer one expensive question at a glance: is this rival a
   credible 6,000-Gold fight? The ladder therefore gives power, a measured
   verdict, cost and mode equal structure; inspect expands the exact ten-slot
   snapshot. The live field stays mounted, and the result reconciles rank,
   coins and cost as a designed reward moment. Existing light surfaces, depth
   tokens and the Rift lozenge carry the identity until dedicated art exists.
   ═══════════════════════════════════════════════════════════════════════════ */

.pvp-screen { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.pvp-topbar-mark { color: var(--accent-arcane); font-weight: 900; }
.pvp-rift-mark { color: var(--accent-arcane); }
.pvp-podium {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-arcane) 8%, var(--bg-panel)), var(--bg-panel));
  box-shadow: var(--e3);
}
.pvp-podium-backdrop {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* _auCssIf supplies square-asset geometry inline. These overrides preserve
     this wide painting's aspect ratio instead of stretching it to the panel. */
  background-position: 50% 48% !important; background-repeat: no-repeat;
  background-size: cover !important;
}
.pvp-podium.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-panel-raised) 68%, transparent),
    color-mix(in srgb, var(--bg-panel-raised) 54%, transparent) 42%,
    color-mix(in srgb, var(--bg-panel-raised) 66%, transparent));
}
.pvp-podium-head,
.pvp-podium-stage { position: relative; z-index: 2; }
.pvp-podium-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent-arcane) 5%, var(--bg-panel-raised));
}
.pvp-podium-head > div { min-width: 0; }
.pvp-podium-head h1 {
  margin: 2px 0 3px; color: var(--text-primary); font-family: var(--font-display);
  font-size: var(--fs-2xl); line-height: 1.08;
}
.pvp-podium-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.pvp-podium-season {
  flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--border-soft);
  border-radius: var(--r-full); background: var(--bg-panel);
  color: var(--text-muted); font-size: var(--fs-micro); font-weight: 800;
}
.pvp-podium-stage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
  gap: 12px; padding: 22px 20px 18px;
}
.pvp-podium-entry {
  --medal: var(--pvp-metal-bronze);
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 0; min-height: 208px; padding: 16px 14px 14px;
  border: 2px solid var(--medal); border-bottom-width: 6px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 15%, var(--bg-panel-raised)), var(--bg-panel));
  box-shadow: var(--e2); text-align: center;
}
.pvp-podium-entry.is-gold { --medal: var(--pvp-metal-gold); }
.pvp-podium-entry.is-silver { --medal: var(--pvp-metal-silver); }
.pvp-podium-entry.is-bronze { --medal: var(--pvp-metal-bronze); }
.pvp-podium-entry.is-rank-1 { grid-column: 2; min-height: 264px; padding-top: 22px; }
.pvp-podium-entry.is-rank-2 { grid-column: 1; min-height: 232px; }
.pvp-podium-entry.is-rank-3 { grid-column: 3; min-height: 216px; }
.pvp-podium-entry.is-player {
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 18%, var(--bg-panel-raised)),
    color-mix(in srgb, var(--accent-arcane) 7%, var(--bg-panel)));
}
.pvp-podium-medal {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
  margin-top: -4px; border: 5px double var(--medal); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--medal) 22%, var(--bg-panel)); box-shadow: var(--e2);
}
.pvp-podium-medal span {
  color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 900; line-height: 1;
}
.pvp-podium-squad { display: flex; justify-content: center; min-width: 0; margin-top: 13px; }
.pvp-podium-identity {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 5px 7px; width: 100%; min-width: 0; margin-top: 10px;
}
.pvp-podium-identity strong {
  overflow: hidden; max-width: 100%; color: var(--text-primary); font-size: var(--fs-md);
  text-overflow: ellipsis; white-space: nowrap;
}
.pvp-podium-identity > span:not(.pvp-you-mark) {
  width: 100%; color: var(--text-muted); font-size: var(--fs-micro); font-weight: 800;
}
.pvp-podium-power { display: flex; flex-direction: column; min-width: 0; margin-top: 8px; }
.pvp-podium-power span {
  color: var(--text-faint); font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase;
}
.pvp-podium-power strong {
  overflow: hidden; color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-sm); text-overflow: ellipsis;
}
.pvp-podium-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  width: 100%; min-width: 0; margin-top: auto; padding-top: 12px;
}
.pvp-podium-actions .pvp-inspect-btn,
.pvp-podium-actions .pvp-challenge-btn { min-width: 0; padding: 7px 8px; }
.pvp-podium-current {
  display: grid; place-items: center; min-width: 0; padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 45%, var(--border-soft));
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent-arcane) 10%, var(--bg-panel));
  color: var(--accent-arcane); font-size: var(--fs-micro); font-weight: 900;
}
.pvp-podium.is-count-1 .pvp-podium-stage {
  grid-template-columns: minmax(0, 420px); justify-content: center;
}
.pvp-podium.is-count-1 .pvp-podium-entry:first-child { grid-column: 1; }
.pvp-podium.is-count-2 .pvp-podium-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pvp-podium.is-count-2 .pvp-podium-entry:first-child { grid-column: 2; }
.pvp-podium.is-count-2 .pvp-podium-entry:nth-child(2) { grid-column: 1; }
.pvp-standing { min-height: 246px; }
.pvp-standing .pvp-rift-mark {
  color: var(--zone); background: color-mix(in srgb, var(--zone) 8%, var(--bg-panel));
}
.pvp-rank-plaque { justify-content: center; }
.pvp-best-rank {
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700;
}
.pvp-standing-brief { justify-content: center; }
.pvp-standing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
}
.pvp-standing-grid > div {
  min-width: 0; padding: 12px; border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); background: var(--bg-panel-raised);
  display: flex; flex-direction: column; gap: 4px;
}
.pvp-standing-grid > div > span:first-child {
  color: var(--text-faint); font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.pvp-standing-grid strong {
  color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-md);
}
.pvp-standing-grid .pvp-stipend { border-color: color-mix(in srgb, var(--zone) 32%, var(--border-soft)); }
.pvp-stipend em { color: var(--text-success); font-size: var(--fs-micro); font-style: normal; font-weight: 800; }
.pvp-stipend button,
.pvp-refresh-btn,
.pvp-inspect-btn,
.pvp-modal-close {
  border: 1px solid var(--border-active); border-radius: var(--r-sm);
  background: var(--bg-panel); color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: 800; cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s, color .12s;
}
.pvp-stipend button { align-self: flex-start; margin-top: 3px; padding: 7px 11px; color: var(--text-gold); }
.pvp-stipend button:hover,
.pvp-refresh-btn:hover,
.pvp-inspect-btn:hover,
.pvp-modal-close:hover {
  transform: translateY(-1px); border-color: var(--accent-arcane); background: var(--bg-hover);
}
/* Ten 9px pips plus nine 4px gaps measure 126px; wrap remains a safe fallback
   if a translated label or unusually narrow cell reduces the available width. */
.pvp-run-pips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 126px; margin-top: 2px; }
.pvp-standing-rule {
  margin: 0; padding: 9px 11px; border-left: 3px solid var(--zone);
  background: color-mix(in srgb, var(--zone) 7%, var(--bg-panel));
  color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.45;
}

.pvp-action-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--state-warning) 46%, var(--border-soft));
  border-radius: var(--r-md); background: color-mix(in srgb, var(--state-warning) 9%, var(--bg-panel));
  color: var(--text-warning); font-size: var(--fs-sm); box-shadow: var(--e1);
}
.pvp-action-notice.is-stale { border-color: color-mix(in srgb, var(--accent-info) 42%, var(--border-soft)); color: var(--text-info); }
.pvp-action-notice .pvp-refresh-btn { flex: 0 0 auto; padding: 8px 12px; }

.pvp-ladder {
  overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--bg-panel); box-shadow: var(--e2);
}
.pvp-ladder-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 18px 20px 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-arcane) 11%, var(--bg-panel-raised)), var(--bg-panel));
  border-bottom: 1px solid var(--border-soft);
}
.pvp-ladder-head > div { min-width: 0; }
.pvp-eyebrow {
  display: block; color: var(--accent-arcane); font-size: var(--fs-micro);
  font-weight: 900; letter-spacing: .18em;
}
.pvp-ladder-head h2 {
  margin: 2px 0 3px; color: var(--text-primary); font-family: var(--font-display);
  font-size: var(--fs-xl); line-height: 1.15;
}
.pvp-ladder-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.pvp-ladder-count {
  flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--border-soft);
  border-radius: var(--r-full); background: var(--bg-panel-raised);
  color: var(--text-muted); font-size: var(--fs-micro); font-weight: 800;
}
.pvp-ladder-list { display: flex; flex-direction: column; }
.pvp-ladder-group { min-width: 0; border-bottom: 1px solid var(--border-soft); }
.pvp-ladder-group:last-child { border-bottom: 0; }
.pvp-ladder-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel-raised);
}
.pvp-ladder-group-head > div { display: flex; flex-direction: column; min-width: 0; }
.pvp-ladder-group-head strong {
  color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 900; letter-spacing: .08em;
}
.pvp-ladder-group-head span { color: var(--text-muted); font-size: var(--fs-micro); }
.pvp-ladder-group-head em {
  flex: 0 0 auto; min-width: 28px; padding: 4px 7px; border: 1px solid var(--border-soft);
  border-radius: var(--r-full); color: var(--text-muted); font-family: var(--font-mono);
  font-size: var(--fs-micro); font-style: normal; text-align: center;
}
.pvp-ladder-group.is-collapsed > summary { cursor: pointer; }
.pvp-ladder-group.is-collapsed:not([open]) > .pvp-ladder-row { display: none; }
.pvp-ladder-group.is-collapsed > summary:hover { background: var(--bg-hover); }
.pvp-ladder-group.is-collapsed[open] > summary { border-bottom-color: var(--border-active); }
.pvp-ladder-group.is-collapsed > summary::after {
  content: '+'; flex: 0 0 auto; color: var(--text-muted); font-size: var(--fs-md); font-weight: 900;
}
.pvp-ladder-group.is-collapsed[open] > summary::after { content: '\2212'; }
.pvp-ladder-group.is-collapsed > summary:focus-visible { outline: 2px solid var(--border-active); outline-offset: -2px; }
.pvp-ladder-group.is-actionable .pvp-ladder-group-head { border-left: 3px solid var(--success); }
.pvp-ladder-group.is-crown .pvp-ladder-group-head {
  border-left: 3px solid var(--text-gold);
  background: color-mix(in srgb, var(--text-gold) 7%, var(--bg-panel-raised));
}
.pvp-ladder-row {
  /* The identity column is the flexible one, but four fixed neighbours plus gaps
     and padding were consuming 647 of 727px, leaving it 165px — the three 32px
     portraits then took all of that and every opponent name rendered as
     "Echo of ..." with 49px for ~100px of text. Measured fix: trim the meter and
     power columns, and overlap the portrait stack, so the nameplate clears the
     longest generated Echo name. */
  grid-template-columns: 52px minmax(0, 1fr) 84px 148px 138px;
  gap: 11px; min-width: 0; padding: 12px 14px; border-width: 0 0 1px;
  border-radius: 0; box-shadow: var(--e0); background: var(--bg-panel);
}
.pvp-ladder-row:last-child { border-bottom: 0; }
.pvp-ladder-row:hover { background: var(--bg-panel-raised); transform: none; }
.pvp-ladder-row.is-player {
  background: color-mix(in srgb, var(--accent-arcane) 8%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent-arcane) 28%, var(--border-soft));
}
.pvp-ladder-row.is-exhibition { background: color-mix(in srgb, var(--accent-info) 4%, var(--bg-panel)); }
.pvp-row-rank {
  color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
}
.pvp-row-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Overlapped like a stacked-avatar group: the squad still reads as three heroes
   but returns ~18px to the nameplate beside it. The sprite BOX stays exactly
   32px (image-rendering: pixelated warps at any other size); only the layout
   footprint shrinks. */
.pvp-portrait-stack { display: flex; flex: 0 0 auto; padding-left: 8px; }
.pvp-portrait-stack > .pvp-portrait + .pvp-portrait { margin-left: -9px; }
.pvp-portrait {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: content-box;
  width: 32px; height: 32px; flex: 0 0 32px; overflow: hidden;
  margin-left: -8px; border: 2px solid var(--bg-panel-raised); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--lead) 12%, var(--bg-panel)); box-shadow: var(--e1);
}
.pvp-portrait.is-large {
  width: 64px; height: 64px; flex-basis: 64px; margin-left: 0;
  border-width: 3px; border-radius: var(--r-md);
}
.pvp-portrait-art,
.pvp-portrait-fallback { display: block; width: 100%; height: 100%; }
.pvp-portrait-fallback { display: grid; place-items: center; color: var(--lead); }
.pvp-nameplate { min-width: 0; padding-left: 10px; border-left: 3px solid var(--lead); }
.pvp-nameplate strong,
.pvp-row-identity > div strong {
  display: block; overflow: hidden; color: var(--text-primary); font-size: var(--fs-sm);
  text-overflow: ellipsis; white-space: nowrap;
}
.pvp-nameplate span,
.pvp-row-identity > div span {
  display: block; overflow: hidden; margin-top: 2px; color: var(--text-muted);
  font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap;
}
.pvp-nameplate span b { color: var(--text-info); }
.pvp-nameplate .pvp-match-note { white-space: normal; overflow: visible; }
.pvp-match-note .pvp-exhibition-badge {
  display: inline-block; padding: 2px 7px; border: 1px solid currentColor;
  border-radius: var(--r-sm); color: var(--text-info); background: var(--bg-panel);
  font-size: var(--fs-xs); line-height: 1.5; white-space: nowrap;
}
.pvp-all-exhibition { margin-bottom: 14px; }
.pvp-all-exhibition p { margin: 4px 0 0; }
.pvp-ladder-row:not(.is-exhibition) .pvp-nameplate span b { color: var(--text-gold); }
.pvp-you-mark,
.pvp-current-tag {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 5px 8px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-arcane) 13%, var(--bg-panel));
  color: var(--accent-arcane); font-size: var(--fs-micro); font-weight: 900;
}
.pvp-row-power { display: flex; flex-direction: column; min-width: 0; }
.pvp-row-power span { color: var(--text-faint); font-size: var(--fs-micro); text-transform: uppercase; }
.pvp-row-power strong {
  overflow: hidden; color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-sm); text-overflow: ellipsis;
}
.pvp-ready { min-width: 0; margin: 0; padding: 8px 10px; }
.pvp-ready .pvp-ready-track { height: 11px; margin: 5px 0; }
.pvp-ready-fill { background: linear-gradient(90deg, var(--meter-info-start), var(--accent-info)); }
.pvp-ready-favoured .pvp-ready-fill { background: linear-gradient(90deg, var(--meter-success-start), var(--success)); }
.pvp-ready-even .pvp-ready-fill { background: linear-gradient(90deg, var(--meter-info-start), var(--accent-info)); }
.pvp-ready-risky .pvp-ready-fill { background: linear-gradient(90deg, var(--state-warning), var(--meter-warning-end)); }
.pvp-ready-hopeless .pvp-ready-fill { background: linear-gradient(90deg, var(--meter-danger-start), var(--danger)); }
.pvp-ready-favoured .pvp-ready-verdict,
.pvp-run-verdict.pvp-ready-favoured { color: var(--text-success); }
.pvp-ready-even .pvp-ready-verdict,
.pvp-run-verdict.pvp-ready-even { color: var(--text-info); }
.pvp-ready-risky .pvp-ready-verdict,
.pvp-run-verdict.pvp-ready-risky { color: var(--text-warning); }
.pvp-ready-hopeless .pvp-ready-verdict,
.pvp-run-verdict.pvp-ready-hopeless { color: var(--danger); }
.pvp-ready-foot { gap: 8px; }
.pvp-row-current { color: var(--text-info); font-size: var(--fs-xs); font-weight: 800; text-align: center; }
.pvp-row-actions { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.pvp-inspect-btn { padding: 7px 9px; }
.pvp-challenge-btn {
  min-width: 0; padding: 9px 10px; border: 1px solid var(--accent-ember);
  border-radius: var(--r-sm); background: var(--accent-ember); color: var(--text-on-well);
  font-size: var(--fs-xs); font-weight: 900; cursor: pointer;
  transition: transform .12s, filter .12s, opacity .12s;
}
.pvp-challenge-btn span { display: block; margin-top: 1px; font-size: var(--fs-micro); font-weight: 700; }
.pvp-challenge-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.pvp-challenge-btn.is-hopeless {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-panel)); color: var(--danger);
}
.pvp-challenge-btn:disabled { opacity: .42; cursor: not-allowed; }
.pvp-refresh-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border-soft);
  background: var(--bg-panel-raised); color: var(--text-muted); font-size: var(--fs-xs);
}
.pvp-refresh-btn { padding: 7px 11px; }

.pvp-confirm-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 7px 14px;
  font-size: var(--fs-xs);
}
.pvp-confirm-grid span { color: var(--text-muted); }
.pvp-confirm-grid strong { min-width: 0; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.pvp-confirm-rule {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border-soft);
  color: var(--text-info); font-size: var(--fs-xs); font-weight: 700;
}

.pvp-inspect-overlay { align-items: center; }
.pvp-inspect-card {
  width: min(1180px, calc(100vw - 32px)); max-height: min(900px, calc(100vh - 32px));
  overflow-y: auto; padding: 22px; border-color: var(--border-active);
  background: var(--bg-panel); color: var(--text-primary); box-shadow: var(--e4); text-align: left;
}
.pvp-inspect-titlebar {
  display: grid; grid-template-columns: minmax(0, 48px) minmax(0, 1fr) minmax(0, 38px);
  align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft);
}
.pvp-inspect-titlebar > .pvp-rift-mark {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 35%, var(--border-soft));
  border-radius: var(--r-md); background: color-mix(in srgb, var(--accent-arcane) 9%, var(--bg-panel));
  font-size: var(--fs-2xl); font-weight: 900;
}
.pvp-inspect-titlebar h2 { margin: 0; color: var(--text-primary); font-size: var(--fs-xl); }
.pvp-inspect-titlebar p { margin: 3px 0 0; max-width: none; color: var(--text-muted); font-size: var(--fs-xs); }
.pvp-modal-close { width: 38px; height: 38px; padding: 0; font-size: var(--fs-xl); }
.pvp-inspect-summary { margin: 14px 0; }
.pvp-inspect-summary .pvp-ready { padding: 11px 13px; }
.pvp-inspect-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 12px;
}
.pvp-inspect-hero {
  min-width: 0; overflow: hidden; border: 1px solid var(--border-soft);
  border-top: 4px solid var(--lead); border-radius: var(--r-md);
  background: var(--bg-panel-raised); box-shadow: var(--e1);
}
.pvp-inspect-hero-head {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 14px; background: color-mix(in srgb, var(--lead) 7%, var(--bg-panel));
}
.pvp-inspect-identity { display: flex; flex-direction: column; min-width: 0; }
.pvp-inspect-identity strong {
  overflow: hidden; color: var(--text-primary); font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap;
}
.pvp-inspect-identity span { color: var(--text-muted); font-size: var(--fs-xs); }
.pvp-gear-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  padding: 1px; background: var(--border-soft);
}
.pvp-gear {
  display: grid; grid-template-columns: minmax(0, 32px) minmax(0, 1fr);
  align-items: start; gap: 8px; min-width: 0; min-height: 92px; padding: 7px;
  background: var(--bg-panel);
}
.pvp-gear.is-empty { opacity: .65; }
.pvp-gear-art,
.pvp-gear-fallback {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--border-soft); border-radius: var(--r-xs); background-color: var(--bg-hover);
}
.pvp-gear-fallback { color: var(--text-faint); }
.pvp-gear-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pvp-gear-slot-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.pvp-gear-slot { color: var(--text-faint); font-size: var(--fs-micro); text-transform: uppercase; }
.pvp-gear-gs { flex: 0 0 auto; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); }
.pvp-gear-copy strong {
  overflow: hidden; font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap;
}
.pvp-gear-copy strong em { font-style: normal; font-family: var(--font-mono); }
.pvp-gear-refine,
.pvp-gear-stats,
.pvp-gear-effects { overflow-wrap: anywhere; color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.3; }
.pvp-gear-refine { color: var(--text-info); }
.pvp-gear-stats b,
.pvp-gear-effects b { color: var(--text-secondary); font-weight: 800; }
.pvp-gear-effects .weapon-effect { display: inline; margin: 0; font-size: inherit; }
.pvp-gear-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.pvp-gear-chip { padding: 2px 5px; font-size: var(--fs-micro); }

.pvp-run { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-bottom: 16px; }
.pvp-run-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .6fr) minmax(0, 1fr);
  align-items: stretch; gap: 10px;
}
.pvp-run-side,
.pvp-run-versus,
.pvp-run-stat,
.pvp-run-round {
  min-width: 0; border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-panel); box-shadow: var(--e1);
}
.pvp-run-side { padding: 12px 14px; border-top: 4px solid var(--accent-info); }
.pvp-run-side.is-rival { border-top-color: var(--danger); text-align: right; }
.pvp-run-side-label {
  display: block; color: var(--text-faint); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .1em;
}
.pvp-run-side > strong {
  display: block; overflow: hidden; margin: 2px 0 8px; color: var(--text-primary);
  font-size: var(--fs-lg); text-overflow: ellipsis; white-space: nowrap;
}
.pvp-run-faces { display: flex; gap: 6px; min-width: 0; }
.pvp-run-side.is-rival .pvp-run-faces { justify-content: flex-end; }
.pvp-run-face {
  display: grid; grid-template-columns: minmax(0, 32px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 0 5px; min-width: 0; max-width: 118px;
}
.pvp-run-face i {
  grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid color-mix(in srgb, var(--lead) 42%, var(--border-soft));
  border-radius: var(--r-sm); background-color: color-mix(in srgb, var(--lead) 9%, var(--bg-panel));
}
.pvp-run-face b,
.pvp-run-face em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-run-face b { align-self: end; color: var(--text-secondary); font-size: var(--fs-micro); }
.pvp-run-face em { color: var(--text-faint); font-size: var(--fs-micro); font-style: normal; }
.pvp-run-versus {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-arcane) 10%, var(--bg-panel-raised)), var(--bg-panel));
}
.pvp-run-versus > .pvp-rift-mark { font-size: var(--fs-xl); font-weight: 900; }
.pvp-run-versus > strong { color: var(--text-primary); font-size: var(--fs-xs); letter-spacing: .12em; }
.pvp-run-verdict { font-size: var(--fs-sm); font-weight: 900; }
.pvp-run-power-track {
  width: 100%; height: 11px; overflow: hidden; border-radius: var(--r-full); background: var(--meter-danger-start);
}
.pvp-run-power-track span {
  display: block; height: 100%; border-radius: var(--r-full) 0 0 var(--r-full);
  background: linear-gradient(90deg, var(--meter-info-start), var(--accent-info));
}
.pvp-run-power-values { display: flex; justify-content: space-between; width: 100%; }
.pvp-run-power-values b { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-micro); }
.pvp-run-versus time {
  color: var(--accent-arcane); font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 900;
}
.pvp-run-score {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .22fr) minmax(0, 1fr); gap: 10px;
}
.pvp-run-stat { padding: 10px 12px; }
.pvp-run-stat > span,
.pvp-run-round span { color: var(--text-faint); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .08em; }
.pvp-run-stat > strong {
  float: right; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-xs);
}
.pvp-run-hp-track {
  clear: both; height: 9px; margin: 7px 0 5px; overflow: hidden;
  border-radius: var(--r-full); background: var(--bg-hover);
}
.pvp-run-hp-track i {
  display: block; width: 100%; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--meter-success-start), var(--success)); transition: width .2s linear;
}
.pvp-run-stat.is-rival .pvp-run-hp-track i { background: linear-gradient(90deg, var(--meter-danger-start), var(--danger)); }
.pvp-run-stat em { color: var(--text-muted); font-size: var(--fs-micro); font-style: normal; }
.pvp-run-stat em b { color: var(--text-primary); font-family: var(--font-mono); }
.pvp-run-round { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; }
.pvp-run-round strong { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-md); }
.pvp-run-field {
  position: relative; overflow: hidden; border: 1px solid var(--border-active);
  border-radius: var(--r-lg); background: var(--surface-battlefield); box-shadow: var(--e3);
}
.pvp-run-field .dungeon-field { height: 570px; min-height: 570px; max-height: 620px; margin-bottom: 0; }
.pvp-run-rule {
  margin: 0; padding: 8px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--danger) 7%, var(--bg-panel));
  color: var(--text-secondary); font-size: var(--fs-xs); text-align: center;
}

.pvp-result { display: flex; justify-content: center; padding: 12px 0 28px; }
.pvpr-card {
  width: min(720px, 100%); overflow: hidden; border: 1px solid var(--border-soft);
  border-top: 4px solid var(--danger); border-radius: var(--r-lg);
  background: linear-gradient(165deg, color-mix(in srgb, var(--danger) 7%, var(--bg-panel-raised)), var(--bg-panel));
  box-shadow: var(--e4); animation: pvpr-rise .36s ease-out both;
}
.pvpr-victory .pvpr-card {
  border-top-color: var(--success);
  background: linear-gradient(165deg, color-mix(in srgb, var(--success) 8%, var(--bg-panel-raised)), var(--bg-panel));
}
.pvpr-outcome { padding: 24px 24px 16px; text-align: center; }
.pvpr-outcome > .pvp-rift-mark { display: block; font-size: var(--fs-3xl); font-weight: 900; }
.pvpr-outcome > span:not(.pvp-rift-mark) {
  color: var(--text-faint); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .2em;
}
.pvpr-outcome h1 {
  margin: 3px 0 6px; color: var(--danger); font-family: var(--font-display); font-size: var(--fs-3xl);
}
.pvpr-victory .pvpr-outcome h1 { color: var(--text-success); }
.pvpr-outcome p { max-width: 54ch; margin: 0 auto; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.pvpr-rank-panel {
  margin: 0 20px; padding: 16px; border: 1px solid var(--border-soft);
  border-radius: var(--r-md); background: var(--bg-panel-raised); text-align: center; box-shadow: var(--e1);
}
.pvpr-kicker { color: var(--text-faint); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .18em; }
.pvpr-rank-move { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 6px; }
.pvpr-rank-move span { display: flex; flex-direction: column; }
.pvpr-rank-move small { color: var(--text-muted); font-size: var(--fs-micro); }
.pvpr-rank-move b { color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-3xl); }
.pvpr-rank-move i { color: var(--accent-arcane); font-size: var(--fs-2xl); font-style: normal; }
.pvpr-rank-panel p { margin: 4px 0 0; color: var(--text-info); font-size: var(--fs-xs); font-weight: 800; }
.pvpr-ledger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 20px 0;
}
.pvpr-reward,
.pvpr-cost {
  display: flex; flex-direction: column; align-items: center; padding: 15px;
  border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--bg-panel-raised);
}
.pvpr-reward { border-color: color-mix(in srgb, var(--success) 38%, var(--border-soft)); }
.pvpr-cost { border-color: color-mix(in srgb, var(--danger) 34%, var(--border-soft)); }
.pvpr-reward span,
.pvpr-cost span { color: var(--text-faint); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .1em; }
.pvpr-reward strong,
.pvpr-cost strong { font-family: var(--font-display); font-size: var(--fs-2xl); }
.pvpr-reward strong { color: var(--text-success); }
.pvpr-cost strong { color: var(--danger); }
.pvpr-reward em,
.pvpr-cost em { color: var(--text-muted); font-size: var(--fs-xs); font-style: normal; }
.pvpr-breakdown {
  margin: 14px 20px 0; padding: 14px 16px; border: 1px solid var(--border-soft);
  border-radius: var(--r-md); background: var(--bg-panel-raised);
}
.pvpr-breakdown h2 { margin: 0 0 8px; color: var(--text-primary); font-size: var(--fs-md); }
.pvpr-breakdown > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--text-muted); font-size: var(--fs-xs); }
.pvpr-breakdown > div b { color: var(--text-primary); font-family: var(--font-mono); }
.pvpr-breakdown > div.is-total { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--border-soft); color: var(--text-primary); font-weight: 900; }
.pvpr-runs {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px; color: var(--text-muted); font-size: var(--fs-xs);
}
.pvpr-runs strong { color: var(--text-primary); font-family: var(--font-mono); }
.pvpr-runs > span:last-child { display: flex; flex-wrap: wrap; gap: 4px; max-width: 126px; }
.pvpr-return {
  display: block; width: calc(100% - 40px); margin: 0 20px 20px; padding: 13px 16px;
  border: 0; border-radius: var(--r-md); background: var(--accent-arcane);
  color: var(--text-on-well); font-size: var(--fs-sm); font-weight: 900; cursor: pointer;
  transition: transform .12s, filter .12s;
}
.pvpr-return:hover { transform: translateY(-1px); filter: brightness(1.08); }
@keyframes pvpr-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  #app .pvp-standing-grid { grid-template-columns: minmax(0, 1fr); }
  #app .pvp-standing { min-height: 0; }
  #app .pvp-ladder-head { align-items: flex-start; flex-direction: column; }
  #app .pvp-ladder-row {
    grid-template-columns: minmax(0, 64px) minmax(0, 1fr); gap: 9px 11px; padding: 12px;
  }
  #app .pvp-row-rank { grid-row: 1 / 3; }
  #app .pvp-row-identity { grid-column: 2; }
  #app .pvp-row-power { grid-column: 2; }
  #app .pvp-ladder-row .pvp-ready,
  #app .pvp-row-current,
  #app .pvp-row-actions { grid-column: 1 / -1; }
  #app .pvp-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .pvp-current-tag { grid-column: 1 / -1; }
  #app .pvp-action-notice { align-items: stretch; flex-direction: column; }
  #app .pvp-refresh-bar { align-items: stretch; flex-direction: column; }
  #app .pvp-run-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .pvp-run-versus { grid-column: 1 / -1; grid-row: 2; }
  #app .pvp-run-side.is-rival { grid-column: 2; grid-row: 1; }
  #app .pvp-run-faces { flex-direction: column; }
  #app .pvp-run-side.is-rival .pvp-run-faces { align-items: flex-end; }
  #app .pvp-run-score { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .pvp-run-round { grid-column: 1 / -1; grid-row: 2; }
  #app .pvp-run-field .dungeon-field { height: 430px; min-height: 430px; max-height: 480px; }
  #app .pvpr-card { width: 100%; }
}

@media (max-width: 600px) {
  #app .pvp-screen { gap: 12px; }
  #app .pvp-podium-backdrop {
    background-position: 50% 34% !important; background-size: auto 100% !important;
  }
  #app .pvp-podium.has-art::before {
    background: color-mix(in srgb, var(--bg-panel-raised) 76%, transparent);
  }
  #app .pvp-podium-head { align-items: flex-start; flex-direction: column; padding: 15px; }
  #app .pvp-podium-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  #app .pvp-podium .pvp-podium-entry {
    display: grid; grid-template-columns: minmax(0, 56px) minmax(0, 1fr);
    grid-column: 1; min-height: 0; padding: 12px; border-bottom-width: 4px;
    border-radius: var(--r-md); text-align: left;
  }
  #app .pvp-podium-medal { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  #app .pvp-podium-squad { grid-column: 2; justify-content: flex-start; margin: 0; }
  #app .pvp-podium-identity { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
  #app .pvp-podium-identity > span:not(.pvp-you-mark) { width: auto; }
  #app .pvp-podium-power { grid-column: 1 / -1; margin-top: 10px; }
  #app .pvp-podium-actions { grid-column: 1 / -1; margin-top: 0; padding-top: 9px; }
  #app .pvp-standing { padding: 14px; }
  #app .pvp-standing .oc2-hero-main { gap: 12px; }
  #app .pvp-rank-plaque { width: 100%; }
  #app .pvp-standing-brief { min-width: 0; }
  /* openModal mounts this dialog on body, outside #app, so its mobile rules
     must target that actual ownership boundary to keep the detail readable. */
  body .pvp-inspect-card { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 12px; }
  body .pvp-inspect-titlebar { grid-template-columns: minmax(0, 38px) minmax(0, 1fr) minmax(0, 38px); gap: 8px; }
  body .pvp-inspect-titlebar > .pvp-rift-mark { width: 38px; height: 38px; }
  body .pvp-gear-grid { grid-template-columns: minmax(0, 1fr); }
  body .pvp-gear { min-height: 0; }
  #app .pvp-ladder-head { padding: 15px; }
  #app .pvp-ladder-row { grid-template-columns: minmax(0, 52px) minmax(0, 1fr); }
  #app .pvp-ready-foot { align-items: flex-start; flex-direction: column; }
  #app .pvp-run-header { grid-template-columns: minmax(0, 1fr); }
  #app .pvp-run-side.is-rival,
  #app .pvp-run-versus { grid-column: 1; grid-row: auto; text-align: left; }
  #app .pvp-run-side.is-rival .pvp-run-faces { align-items: flex-start; justify-content: flex-start; }
  #app .pvp-run-field .dungeon-field { height: 360px; min-height: 360px; max-height: 400px; }
  #app .pvpr-outcome { padding: 20px 16px 14px; }
  #app .pvpr-rank-panel,
  #app .pvpr-ledger,
  #app .pvpr-breakdown { margin-left: 12px; margin-right: 12px; }
  #app .pvpr-rank-move { gap: 14px; }
  #app .pvpr-ledger { grid-template-columns: minmax(0, 1fr); }
  #app .pvpr-return { width: calc(100% - 24px); margin: 0 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .pvpr-card { animation: none; }
  #app .pvp-challenge-btn,
  #app .pvp-refresh-btn,
  #app .pvp-inspect-btn,
  #app .pvpr-return { transition: none; }
}

/* ================================================= Guild Phase 2 Core === */

.guild-screen {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px;
  color: var(--text-primary);
}

.guild-hero,
.guild-find-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-panel-raised), color-mix(in srgb, var(--accent-arcane) 8%, var(--bg-panel)));
  box-shadow: var(--e2);
}

.guild-find-hero { justify-content: space-between; }

.guild-hero-art {
  display: inline-grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 40%, var(--border-soft));
  border-radius: var(--r-lg);
  background: var(--surface-art-deep);
  color: var(--text-art-primary);
  font-size: var(--fs-3xl);
  overflow: hidden;
}

.guild-hero-copy { min-width: 0; }

.guild-hero h1,
.guild-find-hero h1,
.guild-coming-soon h1,
.guild-coming-soon h2 {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.15;
}

.guild-hero h1 span,
.guild-directory-copy h3 span { color: var(--text-arcane, var(--accent-arcane)); }

.guild-hero p,
.guild-find-hero p,
.guild-coming-soon p,
.guild-card p,
.guild-state-card p { margin: 0; color: var(--text-muted); line-height: 1.55; }

.guild-eyebrow {
  margin: 0;
  color: var(--text-gold) !important;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.guild-quota-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.guild-quota {
  display: grid;
  min-width: 108px;
  min-height: 64px;
  padding: 8px 12px;
  place-items: center;
  border: 1px solid var(--line-well);
  border-radius: var(--r-md);
  background: var(--surface-well);
  color: var(--text-well-primary);
}

.guild-quota span,
.guild-quota small { color: var(--text-well-faint); font-size: var(--fs-micro); }
.guild-quota strong { font-family: var(--font-mono); font-size: var(--fs-xl); line-height: 1; }

.guild-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  box-shadow: var(--e1);
}

.guild-tab,
.guild-action {
  min-width: 44px;
  min-height: 44px;
}

.guild-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 750;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.guild-tab small {
  display: block;
  color: var(--text-faint);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.guild-tab:hover { background: var(--bg-hover); }
.guild-tab.is-active {
  border-color: color-mix(in srgb, var(--accent-arcane) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-arcane) 10%, var(--bg-panel-raised));
  color: var(--accent-arcane);
}

.guild-panel[hidden] { display: none; }
.guild-panels { min-width: 0; }

.guild-overview-grid,
.guild-discovery-grid,
.guild-members-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 16px;
}

.guild-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-panel-raised);
  box-shadow: var(--e1);
}

.guild-card-wide { grid-row: span 2; }
.guild-card h2 { margin: 3px 0 12px; font-size: var(--fs-lg); }

.guild-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.guild-notice { white-space: pre-wrap; overflow-wrap: anywhere; }

.guild-stats { margin: 14px 0 0; }
.guild-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.guild-stats dt { color: var(--text-muted); }
.guild-stats dd { margin: 0; font-family: var(--font-mono); font-weight: 800; }

.guild-progression-summary { align-self: start; }
.guild-progression-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line-well);
  border-radius: var(--r-sm);
  background: var(--surface-well);
  color: var(--text-well-primary);
}
.guild-progression-lead > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.guild-progression-lead strong { font-family: var(--font-display); font-size: var(--fs-xl); }
.guild-progression-lead > span { color: var(--text-well-faint); font-family: var(--font-mono); font-size: var(--fs-sm); }
.guild-tier-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 46%, var(--border-soft));
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-panel));
  color: var(--accent-arcane);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 850;
}
.guild-active7-self {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.guild-active7-self h3 { margin: 2px 0 0; font-size: var(--fs-md); }
.guild-active7-reasons { margin-bottom: 0; }
.guild-league-head { margin-bottom: 14px; }
.guild-league-grid + .guild-league-grid { margin-top: 16px; }
.guild-league-list { margin-top: 8px; }
.guild-phase-note { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); }

.guild-locked-summary {
  background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel-raised));
}
.guild-locked-summary > span { float: right; font-size: var(--fs-xl); }

.guild-alert,
.guild-recovery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
}

.guild-alert strong,
.guild-alert span { display: block; }
.guild-alert span { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-sm); }
.guild-alert-info { border-left: 4px solid var(--accent-info); }
.guild-alert-warning { border-left: 4px solid var(--state-warning); }
.guild-alert-danger,
.guild-alert-error { border-left: 4px solid var(--danger); }

.guild-live-status {
  min-height: 1.4em;
  color: var(--text-success);
  font-size: var(--fs-sm);
}

.guild-recovery {
  border-color: color-mix(in srgb, var(--state-warning) 55%, var(--border-soft));
  background: color-mix(in srgb, var(--state-warning) 8%, var(--bg-panel-raised));
}
.guild-recovery p { margin: 3px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

.guild-form { display: grid; gap: 8px; }
.guild-form-inline { grid-template-columns: minmax(130px, 1.5fr) minmax(88px, .65fr) minmax(120px, 1fr) auto; align-items: end; }
.guild-form label,
.guild-search label,
.guild-notice-dialog label { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 750; }
.guild-form label span { display: block; margin-top: 2px; color: var(--text-faint); font-size: var(--fs-micro); font-weight: 500; }

.guild-form input,
.guild-form select,
.guild-search input,
.guild-notice-dialog textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--border-active);
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font: inherit;
}

.guild-notice-dialog textarea { min-height: 132px; resize: vertical; }
.guild-form-note { font-size: var(--fs-xs); }
.guild-field-error { min-height: 1.35em; color: var(--danger); font-size: var(--fs-sm); }

.guild-management { margin-top: 16px; }
.guild-danger-zone,
.guild-claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.guild-member-sidebar { display: grid; align-content: start; gap: 16px; }
.guild-member-list,
.guild-request-list,
.guild-reason-list { margin: 0; padding: 0; list-style: none; }

.guild-member-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}

.guild-member-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guild-member-main strong,
.guild-member-main span { display: block; min-width: 0; overflow-wrap: anywhere; }
.guild-member-avatar {
  display: inline-grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-panel));
  color: var(--accent-arcane);
  font-weight: 850;
}
.guild-member-id { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-micro); }
.guild-you { color: var(--text-success); font-size: var(--fs-micro); }

.guild-member-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.guild-role,
.guild-probation,
.guild-capacity-full {
  padding: 4px 8px;
  border-radius: var(--r-full);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 750;
  text-transform: capitalize;
}
.guild-role-leader { background: color-mix(in srgb, var(--accent-gold) 17%, var(--bg-panel)); color: var(--text-gold); }
.guild-role-officer { background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-panel)); color: var(--accent-arcane); }
.guild-probation { background: color-mix(in srgb, var(--accent-info) 10%, var(--bg-panel)); color: var(--text-info); }
.guild-capacity-full { background: color-mix(in srgb, var(--danger) 9%, var(--bg-panel)); color: var(--danger); }

.guild-member-actions,
.guild-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.guild-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}
.guild-request-row strong,
.guild-request-row span { display: block; overflow-wrap: anywhere; }
.guild-request-row span { color: var(--text-faint); font-size: var(--fs-xs); }

.guild-search { margin-bottom: 14px; }
.guild-search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 7px; }
.guild-directory-list { display: grid; gap: 9px; }
.guild-directory-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
}
.guild-directory-emblem {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-well);
}
.guild-directory-copy { min-width: 0; }
.guild-directory-copy h3 { margin: 0 0 3px; font-size: var(--fs-md); overflow-wrap: anywhere; }
.guild-directory-copy p { font-size: var(--fs-xs); }

.guild-reason-list { margin-top: 10px; padding-left: 20px; list-style: disc; color: var(--text-muted); font-size: var(--fs-sm); }
.guild-reason-list li + li { margin-top: 5px; }

.guild-coming-soon {
  padding: 34px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, var(--border-soft));
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--bg-panel-raised), color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel)));
  text-align: center;
  box-shadow: var(--e1);
}
.guild-battle-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.guild-battle-subtabs button {
  min-width: 44px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
}
.guild-battle-subtabs span,
.guild-battle-subtabs small { display: block; }
.guild-battle-subtabs span { font-weight: 800; }
.guild-battle-subtabs small { margin-top: 2px; color: var(--text-faint); font-size: var(--fs-micro); }
.guild-coming-soon-mark { font-size: var(--fs-4xl); filter: grayscale(.35); }
.guild-state-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 22px;
  text-align: left;
}
.guild-state-card {
  display: flex;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg-panel-raised) 88%, transparent);
}
.guild-state-card strong { display: block; font-size: var(--fs-sm); }
.guild-state-card p { margin-top: 3px; font-size: var(--fs-xs); }
.guild-state-icon { color: var(--accent-gold); font-size: var(--fs-lg); }

.guild-entry-state { max-width: 760px; margin: 30px auto; }
.guild-entry-state .empty-state-cta { min-height: 44px; color: var(--text-on-ember-aa); }
.guild-entry-state .empty-state-cta:hover { opacity: 1; }
.guild-leave-card strong { display: block; margin-bottom: 4px; }
.guild-leave-card .guild-action { margin-top: 12px; }

.guild-screen button:focus-visible,
.guild-screen input:focus-visible,
.guild-screen select:focus-visible,
.guild-screen textarea:focus-visible,
.guild-notice-dialog button:focus-visible,
.guild-notice-dialog textarea:focus-visible {
  outline: 3px solid var(--accent-arcane);
  outline-offset: 2px;
}

.guild-tab:disabled,
.guild-action:disabled { cursor: not-allowed; opacity: .58; }

.guild-notice-dialog { width: min(540px, calc(100vw - 24px)); }
.guild-notice-dialog label { display: block; margin: 14px 0 6px; text-align: left; }

/* ================================================= Guild Phase 3 KVM/Feed === */

.guild-battle-subtabs button.is-active {
  border-color: color-mix(in srgb, var(--accent-arcane) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-arcane) 11%, var(--bg-panel-raised));
  color: var(--accent-arcane);
}

.guild-feed { margin-top: 16px; }
.guild-feed-list,
.guild-kvm-log-list,
.guild-kvm-rules ul { margin: 0; padding: 0; list-style: none; }
.guild-feed-list li,
.guild-kvm-log-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--border-soft);
}
.guild-feed-list strong,
.guild-feed-list p,
.guild-kvm-log-list strong,
.guild-kvm-log-list p { display: block; min-width: 0; overflow-wrap: anywhere; }
.guild-feed-list p,
.guild-kvm-log-list p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
.guild-feed-list time,
.guild-kvm-log-list time { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-micro); text-align: right; }
.guild-feed-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-arcane) 12%, var(--bg-panel));
  color: var(--accent-arcane);
}
.guild-feed-policy { margin-top: 10px !important; font-size: var(--fs-xs); }

/* ================================================= Guild Phase 7 Social === */

.guild-social-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-well);
  border-radius: var(--r-sm);
  background: var(--surface-well);
  color: var(--text-well-primary);
}
.guild-social-summary span { color: var(--text-well-faint); font-size: var(--fs-xs); }
.guild-feed-main { min-width: 0; }
.guild-feed-meta { display: grid; justify-items: end; gap: 7px; }
.guild-feed-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.guild-feed-badges span {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, var(--border-soft));
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-gold) 9%, var(--bg-panel));
  color: var(--text-gold);
  font-size: var(--fs-micro);
  font-weight: 750;
}
.guild-clap { min-width: 104px; padding-inline: 10px; }
.guild-clap.is-clapped { color: var(--text-success); }
.guild-feed-list li:focus,
#guild-feed-title:focus,
#guild-blueprint-library-title:focus { outline: 3px solid var(--accent-arcane); outline-offset: 2px; }

.guild-blueprint-library { margin-top: 16px; }
.guild-blueprint-quotas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.guild-blueprint-quotas > span {
  display: grid;
  min-height: 56px;
  padding: 8px 10px;
  place-content: center;
  border: 1px solid var(--line-well);
  border-radius: var(--r-sm);
  background: var(--surface-well);
  color: var(--text-well-faint);
  font-size: var(--fs-xs);
  text-align: center;
}
.guild-blueprint-quotas strong { color: var(--text-well-primary); font-family: var(--font-mono); }
.guild-blueprint-upload {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
}
.guild-blueprint-upload > div { align-self: center; }
.guild-blueprint-upload > div strong { display: block; }
.guild-blueprint-upload > div p { margin-top: 3px; font-size: var(--fs-xs); }
.guild-blueprint-list { margin: 0; padding: 0; list-style: none; }
.guild-blueprint-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border-soft);
}
.guild-blueprint-copy { min-width: 0; }
.guild-blueprint-copy strong,
.guild-blueprint-copy p,
.guild-blueprint-copy time { display: block; overflow-wrap: anywhere; }
.guild-blueprint-copy p { margin-top: 2px; font-size: var(--fs-xs); }
.guild-blueprint-copy time { margin-top: 4px; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-micro); }

.guild-kvm-hero {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(460px, 1.6fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 38%, var(--border-soft));
  border-radius: var(--r-lg);
  background: linear-gradient(130deg, var(--bg-panel-raised), color-mix(in srgb, var(--accent-arcane) 9%, var(--bg-panel)));
  box-shadow: var(--e1);
}
.guild-kvm-hero h2,
.guild-kvm-run h2 { margin: 3px 0 6px; font-family: var(--font-display); font-size: var(--fs-xl); }
.guild-kvm-hero p,
.guild-kvm-run p { margin: 0; color: var(--text-muted); }
.guild-kvm-hero dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.guild-kvm-hero dl div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-well);
  border-radius: var(--r-sm);
  background: var(--surface-well);
}
.guild-kvm-hero dt { color: var(--text-well-faint); font-size: var(--fs-micro); }
.guild-kvm-hero dd { margin: 4px 0 0; color: var(--text-well-primary); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 800; overflow-wrap: anywhere; }

.guild-kvm-offer { padding: 0; overflow: hidden; }
.guild-kvm-offer-banner,
.guild-kvm-offer-body,
.guild-kvm-offer-actions,
.guild-kvm-run-head,
.guild-kvm-squads,
.guild-kvm-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.guild-kvm-offer-banner { padding: 18px; background: color-mix(in srgb, var(--accent-arcane) 10%, var(--bg-panel)); }
.guild-kvm-offer-banner h2 { margin-bottom: 3px; }
.guild-kvm-shield { font-size: var(--fs-3xl); }
.guild-kvm-offer-body { padding: 18px; }
.guild-kvm-offer-body .pvp-portrait-stack { flex: 0 0 auto; }
.guild-kvm-offer-body .guild-stats { flex: 1 1 360px; margin-top: 0; }
.guild-kvm-offer-actions { padding: 13px 18px; border-top: 1px solid var(--border-soft); }
.guild-kvm-offer-actions p { max-width: 680px; font-size: var(--fs-xs); }

.guild-kvm-lower {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  margin-top: 14px;
}
.guild-kvm-rules li { position: relative; padding: 7px 0 7px 18px; color: var(--text-secondary); font-size: var(--fs-sm); }
.guild-kvm-rules li::before { position: absolute; left: 0; color: var(--accent-arcane); content: '◆'; font-size: var(--fs-micro); }
.guild-kvm-rules > p:last-child { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); }
.guild-kvm-log-result { min-width: 58px; color: var(--text-arcane, var(--accent-arcane)); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 850; }
.guild-kvm-log-list li.is-flagged { border-left: 3px solid var(--danger); padding-left: 9px; }
.guild-kvm-log-list li.is-flagged .guild-kvm-log-result { color: var(--danger); }

.guild-kvm-result { margin: 12px 0; }
.guild-kvm-result-mark {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-gold) 14%, var(--bg-panel));
  color: var(--text-gold);
  font-size: var(--fs-xl);
}
.guild-kvm-result[data-guild-state="flagged"] { border-left: 4px solid var(--danger); }

.guild-kvm-run {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 45%, var(--border-soft));
  border-radius: var(--r-lg);
  background: var(--bg-panel-raised);
  box-shadow: var(--e2);
}
.guild-kvm-run-clock { text-align: right; }
.guild-kvm-run-clock span,
.guild-kvm-squads section > span { display: block; color: var(--text-faint); font-size: var(--fs-micro); text-transform: uppercase; }
.guild-kvm-run-clock strong { font-family: var(--font-mono); font-size: var(--fs-lg); }
.guild-kvm-squads { margin: 14px 0; }
.guild-kvm-squads section { flex: 1 1 0; min-width: 0; }
.guild-kvm-squads section:last-child { text-align: right; }
.guild-kvm-squads section:last-child .pvp-run-faces { justify-content: flex-end; }
.guild-kvm-squads > strong { color: var(--text-gold); font-family: var(--font-display); font-size: var(--fs-xl); }
.guild-kvm-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}
.guild-kvm-score > div { min-width: 0; padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-well); }
.guild-kvm-score span,
.guild-kvm-score small { display: block; color: var(--text-well-faint); font-size: var(--fs-micro); }
.guild-kvm-score strong { color: var(--text-well-primary); font-family: var(--font-mono); }
.guild-kvm-score i { display: block; height: 5px; margin: 6px 0; border-radius: var(--r-full); background: var(--line-well); overflow: hidden; }
.guild-kvm-score i b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent-arcane); transition: width 180ms linear; }
.guild-kvm-score > div:last-child { text-align: right; }
.guild-kvm-score > div:last-child i b { margin-left: auto; background: var(--danger); }
.guild-kvm-round { display: grid; min-width: 132px; place-items: center; text-align: center; }
.guild-kvm-mount { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-art-deep); }
.guild-kvm-mount .dungeon-field { height: 520px; min-height: 520px; max-height: 570px; margin-bottom: 0; }
.guild-kvm-field { border-color: color-mix(in srgb, var(--accent-arcane) 42%, var(--border-soft)); }
.guild-kvm-field[data-relay-open="true"] { border-color: color-mix(in srgb, var(--text-success) 50%, var(--border-soft)); }
.guild-kvm-field[data-anti-sustain="true"] {
  outline: 2px solid color-mix(in srgb, var(--accent-info) 58%, transparent);
  outline-offset: -2px;
}
.guild-kvm-field[data-anti-sustain="true"]::before {
  position: absolute;
  z-index: 8;
  top: 8px;
  right: 8px;
  padding: 4px 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-info) 75%, var(--bg-panel));
  color: var(--text-primary);
  content: 'ANTI-SUSTAIN ×0.50';
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 800;
}
.guild-kvm-field[data-pulse="4"]::after,
.guild-kvm-field[data-pulse="6"]::after,
.guild-kvm-field[data-pulse="8"]::after {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  content: '';
  animation: guildKvmPulse 320ms ease-out both;
}
.guild-kvm-flux {
  position: absolute;
  z-index: 2;
  left: 43.333%;
  top: 38.889%;
  width: 13.333%;
  height: 22.222%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 78%, transparent);
  background: color-mix(in srgb, var(--accent-arcane) 18%, transparent);
  color: color-mix(in srgb, var(--accent-arcane) 82%, white);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .08em;
  pointer-events: none;
}
.sim-prop.guild-kvm-pillar { color: var(--text-gold); font-size: var(--fs-2xl); text-shadow: 0 2px 5px rgba(0, 0, 0, .8); }
.guild-kvm-live-note { margin-top: 9px !important; font-size: var(--fs-xs); text-align: center; }

/* ================================================= Guild Phase 5 Boss ======= */

.guild-boss-hero {
  border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-soft));
  background: linear-gradient(130deg, var(--bg-panel-raised), color-mix(in srgb, var(--accent-gold) 9%, var(--bg-panel)));
}
.guild-boss-window {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.guild-boss-window > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-well);
}
.guild-boss-window span,
.guild-boss-window strong { display: block; }
.guild-boss-window span { color: var(--text-well-faint); font-size: var(--fs-micro); text-transform: uppercase; }
.guild-boss-window strong { margin-top: 4px; color: var(--text-well-primary); font-family: var(--font-mono); overflow-wrap: anywhere; }
.guild-boss-grid,
.guild-boss-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.guild-boss-loadout,
.guild-boss-profile,
.guild-boss-ladder,
.guild-boss-rules { min-width: 0; }
.guild-boss-loadout-state {
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 800;
}
.guild-boss-heroes,
.guild-boss-intra ol {
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
.guild-boss-heroes li,
.guild-boss-intra li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
}
.guild-boss-heroes li > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent-gold) 14%, var(--bg-panel));
  color: var(--text-gold);
  font-family: var(--font-mono);
}
.guild-boss-heroes li > strong { flex: 1 1 auto; overflow-wrap: anywhere; }
.guild-boss-loadout .guild-action { margin-top: 12px; }
.guild-boss-next-loadout {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--text-success) 34%, var(--border-soft));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--text-success) 7%, var(--surface-well));
}
.guild-boss-next-loadout span { color: var(--text-secondary); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.guild-boss-next-loadout small { color: var(--text-faint); font-family: var(--font-mono); overflow-wrap: anywhere; }
.guild-boss-checksum { margin-top: 12px !important; font-size: var(--fs-micro); overflow-wrap: anywhere; }
.guild-boss-checksum code { color: var(--text-secondary); font-family: var(--font-mono); }
.guild-boss-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 46%, var(--border-soft));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel-raised));
}
.guild-boss-start p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.guild-boss-rules ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-secondary); }
.guild-boss-rules li + li { margin-top: 7px; }
.guild-boss-ladder .guild-table-wrap { margin-top: 12px; }
.guild-boss-intra { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.guild-boss-intra h3 { margin: 0; font-size: var(--fs-md); }
.guild-boss-intra li > span { min-width: 0; overflow-wrap: anywhere; }
.guild-boss-intra li > strong { flex: 0 0 auto; font-family: var(--font-mono); }
.guild-boss-result { margin: 12px 0; }
.guild-boss-result[data-guild-state="flagged"] { border-left: 4px solid var(--danger); }
.guild-boss-run { border-color: color-mix(in srgb, var(--accent-gold) 48%, var(--border-soft)); }
.guild-boss-field { border-color: color-mix(in srgb, var(--accent-gold) 46%, var(--border-soft)); }
.sim-prop.guild-boss-blocker { color: var(--text-gold); font-size: var(--fs-xl); text-shadow: 0 2px 5px rgba(0, 0, 0, .82); }

/* ========================================= Guild Phase 6 Wallet/Rewards === */

.guild-shop-head { margin-bottom: 14px; }
.guild-shop-head > div { min-width: 0; }
.guild-shop-head h2 { margin: 3px 0 5px; font-family: var(--font-display); font-size: var(--fs-xl); }
.guild-shop-head p:not(.guild-eyebrow) { max-width: 760px; color: var(--text-muted); }
.guild-shop-layout {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  margin-bottom: 14px;
}
.guild-wallet-card,
.guild-rewards-card,
.guild-shop-catalog { min-width: 0; }
.guild-wallet-balance,
.guild-shop-price {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 6px;
  color: var(--text-gold);
}
.guild-wallet-balance strong,
.guild-shop-price strong { font-family: var(--font-mono); font-size: var(--fs-2xl); line-height: 1; }
.guild-wallet-balance span,
.guild-shop-price span { font-size: var(--fs-xs); font-weight: 850; }
.guild-wallet-parity { margin-bottom: 18px; }
.guild-shop-subtitle { margin: 0 0 8px; font-size: var(--fs-md); }
.guild-wallet-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guild-wallet-ledger li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}
.guild-wallet-ledger strong,
.guild-wallet-ledger small { display: block; min-width: 0; overflow-wrap: anywhere; }
.guild-wallet-ledger small,
.guild-wallet-ledger time { color: var(--text-faint); font-size: var(--fs-micro); }
.guild-wallet-ledger time { text-align: right; }
.guild-wallet-delta { color: var(--text-success); font-family: var(--font-mono); text-align: right; }
.guild-wallet-delta.is-debit { color: var(--danger); }
.guild-delivery-flag,
.guild-entitlement-badge,
.guild-shop-kind {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  font-weight: 850;
}
.guild-delivery-flag.is-open,
.guild-entitlement-badge.is-applied {
  border-color: color-mix(in srgb, var(--text-success) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--text-success) 9%, var(--bg-panel));
  color: var(--text-success);
}
.guild-delivery-flag.is-gated,
.guild-entitlement-badge.is-gated {
  border-color: color-mix(in srgb, var(--state-warning) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--state-warning) 9%, var(--bg-panel));
  color: var(--state-warning);
}
.guild-entitlement-badge.is-pending {
  border-color: color-mix(in srgb, var(--accent-info) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent-info) 9%, var(--bg-panel));
  color: var(--text-info);
}
.guild-reward-list,
.guild-shop-offer-list { display: grid; gap: 10px; }
.guild-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent-info);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
}
.guild-reward-row.is-applied { border-left-color: var(--text-success); }
.guild-reward-row.is-gated { border-left-color: var(--state-warning); }
.guild-reward-main { min-width: 0; }
.guild-reward-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.guild-reward-main p { margin-top: 4px; font-size: var(--fs-xs); }
.guild-reward-reason,
.guild-reward-checksum {
  display: block;
  margin-top: 5px;
  color: var(--text-faint);
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}
.guild-reward-checksum { font-family: var(--font-mono); }
.guild-reward-side { display: grid; flex: 0 0 auto; justify-items: end; gap: 8px; }
.guild-reward-side time { color: var(--text-faint); font-size: var(--fs-micro); text-align: right; }
.guild-shop-catalog > .guild-alert { margin-bottom: 14px; }
.guild-shop-offer {
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-arcane) 30%, var(--border-soft));
  border-radius: var(--r-md);
  background: var(--bg-panel);
}
.guild-shop-offer.is-gated { border-color: var(--border-soft); opacity: .86; }
.guild-shop-offer-head,
.guild-shop-offer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.guild-shop-offer-head > div:first-child { min-width: 0; }
.guild-shop-offer h3 { margin: 7px 0 3px; font-size: var(--fs-md); overflow-wrap: anywhere; }
.guild-shop-offer p { font-size: var(--fs-xs); }
.guild-shop-kind { color: var(--accent-arcane); }
.guild-shop-price { min-width: 74px; justify-content: flex-end; }
.guild-shop-offer-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0;
}
.guild-shop-offer-meta div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-well);
  border-radius: var(--r-sm);
  background: var(--surface-well);
}
.guild-shop-offer-meta dt { color: var(--text-well-faint); font-size: var(--fs-micro); }
.guild-shop-offer-meta dd { margin: 3px 0 0; color: var(--text-well-primary); font-size: var(--fs-xs); font-weight: 750; overflow-wrap: anywhere; }
.guild-shop-reason { min-height: 1.45em; margin-bottom: 12px !important; color: var(--text-muted); }
.guild-shop-choice { display: grid; flex: 1 1 240px; gap: 5px; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 750; }
.guild-shop-choice select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-active);
  border-radius: var(--r-sm);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font: inherit;
}
.guild-shop-offer-actions .guild-action { flex: 0 0 auto; }

@keyframes guildKvmPulse {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 900px) {
  #app .guild-screen { padding: 16px; }
  #app .guild-tabs { grid-template-columns: repeat(5, minmax(118px, 1fr)); overflow-x: auto; overscroll-behavior-inline: contain; }
  #app .guild-tab { scroll-snap-align: start; }
  #app .guild-overview-grid,
  #app .guild-discovery-grid,
  #app .guild-members-layout { grid-template-columns: minmax(0, 1fr); }
  #app .guild-card-wide { grid-row: auto; }
  #app .guild-member-row { grid-template-columns: minmax(0, 1fr) auto; }
  #app .guild-member-actions { grid-column: 1 / -1; justify-content: flex-start; }
  #app .guild-form-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .guild-kvm-hero { grid-template-columns: minmax(0, 1fr); }
  #app .guild-kvm-hero dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .guild-kvm-lower { grid-template-columns: minmax(0, 1fr); }
  #app .guild-boss-grid,
  #app .guild-boss-lower { grid-template-columns: minmax(0, 1fr); }
  #app .guild-shop-layout { grid-template-columns: minmax(0, 1fr); }
  #app .guild-kvm-mount .dungeon-field { height: 430px; min-height: 430px; max-height: 480px; }
}

@media (max-width: 600px) {
  #app .guild-screen { padding: 10px; }
  #app .guild-hero,
  #app .guild-find-hero { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  #app .guild-hero-art { flex-basis: 56px; width: 56px; height: 56px; }
  #app .guild-quota-group { width: 100%; margin-left: 0; justify-content: stretch; }
  #app .guild-quota { min-width: 0; flex: 1 1 120px; }
  #app .guild-tabs { margin: 10px 0; padding: 5px; }
  #app .guild-tab { flex-direction: column; gap: 2px; padding: 7px; }
  #app .guild-card,
  #app .guild-coming-soon { padding: 14px; }
  #app .guild-card-head,
  #app .guild-shop-head,
  #app .guild-progression-lead,
  #app .guild-alert,
  #app .guild-recovery,
  #app .guild-danger-zone,
  #app .guild-claim,
  #app .guild-request-row { align-items: stretch; flex-direction: column; }
  #app .guild-wallet-ledger li { grid-template-columns: minmax(0, 1fr) auto; }
  #app .guild-wallet-ledger time { grid-column: 1 / -1; text-align: left; }
  #app .guild-reward-row,
  #app .guild-shop-offer-head,
  #app .guild-shop-offer-actions { align-items: stretch; flex-direction: column; }
  #app .guild-reward-side { justify-items: stretch; }
  #app .guild-reward-side time { text-align: left; }
  #app .guild-shop-price { min-width: 0; justify-content: flex-start; }
  #app .guild-shop-offer-meta { grid-template-columns: minmax(0, 1fr); }
  #app .guild-shop-offer-actions .guild-action,
  #app .guild-reward-side .guild-action,
  #app .guild-shop-head .guild-action { width: 100%; }
  #app .guild-form-inline { grid-template-columns: minmax(0, 1fr); }
  #app .guild-member-row { grid-template-columns: minmax(0, 1fr); }
  #app .guild-member-meta,
  #app .guild-member-actions,
  #app .guild-inline-actions { justify-content: flex-start; }
  #app .guild-directory-card { grid-template-columns: 44px minmax(0, 1fr); }
  #app .guild-directory-card > .guild-action { grid-column: 1 / -1; width: 100%; }
  #app .guild-search > div { grid-template-columns: minmax(0, 1fr); }
  #app .guild-search .guild-action { width: 100%; }
  #app .guild-battle-subtabs { grid-template-columns: minmax(0, 1fr); }
  #app .guild-kvm-hero dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .guild-kvm-offer-banner,
  #app .guild-kvm-offer-body,
  #app .guild-kvm-offer-actions,
  #app .guild-kvm-run-head,
  #app .guild-kvm-result { align-items: stretch; flex-direction: column; }
  #app .guild-kvm-offer-actions .guild-action,
  #app .guild-kvm-result .guild-action,
  #app .guild-boss-start .guild-action,
  #app .guild-boss-loadout .guild-action { width: 100%; }
  #app .guild-boss-window { grid-template-columns: minmax(0, 1fr); }
  #app .guild-boss-start { align-items: stretch; flex-direction: column; }
  #app .guild-kvm-squads { align-items: stretch; flex-direction: column; }
  #app .guild-kvm-squads section:last-child,
  #app .guild-kvm-run-clock { text-align: left; }
  #app .guild-kvm-squads section:last-child .pvp-run-faces { justify-content: flex-start; }
  #app .guild-kvm-squads > strong { align-self: center; }
  #app .guild-kvm-score { grid-template-columns: minmax(0, 1fr); }
  #app .guild-kvm-score > div:last-child { text-align: left; }
  #app .guild-kvm-score > div:last-child i b { margin-left: 0; }
  #app .guild-kvm-round { min-width: 0; }
  #app .guild-kvm-mount .dungeon-field { height: 340px; min-height: 340px; max-height: 390px; }
  #app .guild-feed-list li,
  #app .guild-kvm-log-list li { grid-template-columns: auto minmax(0, 1fr); }
  #app .guild-feed-list time,
  #app .guild-kvm-log-list time { grid-column: 2; text-align: left; }
  #app .guild-social-summary { align-items: flex-start; flex-direction: column; }
  #app .guild-feed-meta { grid-column: 2; justify-items: start; }
  #app .guild-feed-meta .guild-clap { width: 100%; }
  #app .guild-blueprint-quotas { grid-template-columns: minmax(0, 1fr); }
  #app .guild-blueprint-upload { grid-template-columns: minmax(0, 1fr); }
  #app .guild-blueprint-upload .guild-action { width: 100%; }
  #app .guild-blueprint-list li { grid-template-columns: minmax(0, 1fr); }
  #app .guild-blueprint-list .guild-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #app .guild-tab,
  #app .guild-action,
  #app .guild-kvm-score i b,
  #app .guild-kvm-field[data-pulse="4"]::after,
  #app .guild-kvm-field[data-pulse="6"]::after,
  #app .guild-kvm-field[data-pulse="8"]::after { animation: none; transition: none; }
}

/* Loading art keeps its existing box and adjacent text. No substitute artwork
   or extra network request is needed while transport retries. */
[data-art-state]:not(img):not(.sim-skill-fx) {
  background-color: var(--bg-panel-raised);
  outline: 1px solid var(--border-soft);
  outline-offset: -1px;
}
img[data-art-state] { color: transparent; }
.wh-brand, .tk-logo, .wh-art { position: relative; }
.wh-brand-img[data-art-state],
.tk-logo-img[data-art-state],
.wh-art img[data-art-state] { opacity: 0; }
.wh-brand-img[data-art-state] + .wh-brand-text,
.tk-logo-picture:has(.tk-logo-img[data-art-state]) + .tk-logo-word,
.wh-art img[data-art-state] + .wh-art-fb {
  display: block !important;
  position: absolute;
  inset: 0;
  align-content: center;
}
.tk-logo-picture:has(.tk-logo-img[data-art-state]) ~ .tk-logo-mobile-word { display: none; }
@media (max-width: 600px) {
  /* The responsive <source> can already be visible while the transport's
     desktop URL is pending; keep the mobile name beside that emblem. */
  .tk-logo-picture:has(.tk-logo-img[data-art-state]) + .tk-logo-word { display: none !important; }
  .tk-logo-picture:has(.tk-logo-img[data-art-state]) ~ .tk-logo-mobile-word { display: block; }
}
@media (max-width: 360px) {
  .tk-logo-picture, .tk-logo-img { width: 32px; height: 32px; }
}
/* First entry and completed logout share one empty account screen. */
body[data-account-entry] #topbar,
body[data-account-entry] #control-center,
body[data-account-entry] #inspector,
body[data-account-entry] #bottom-nav,
body[data-account-entry] #live-log,
body[data-account-entry] #buff-bar { display: none; }
body[data-account-entry] #main-content { grid-template-columns: minmax(0, 1fr); }
body[data-account-entry] #app { padding-bottom: 24px; }

/* Persistent farm-overflow choice; inline notice never blocks play. */
.farm-overflow-choice{display:flex;flex-wrap:wrap;gap:10px 18px;padding:12px;margin:10px 0;border:1px solid var(--border-soft);border-radius:var(--r-sm)}
.farm-overflow-choice strong,.farm-overflow-choice small{flex-basis:100%}
.farm-overflow-choice label{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}
.farm-overflow-choice small{line-height:1.5}
#farm-overflow-notice{margin:0 12px}

.mail-expiry{font-size:var(--fs-xs);line-height:1.5;margin-top:5px;color:var(--text-muted)}.mail-expiry-soon{color:var(--danger);font-weight:600}

.trophy-reward-chip { display:inline-flex; align-items:center; gap:.2em; white-space:nowrap; font:600 var(--fs-xs) var(--font-mono); }
.trophy-reward-icon,.trophy-reward-icon svg,.trophy-reward-icon .data-art-icon,.trophy-material-icon { display:inline-block; width:1.3rem; height:1.3rem; vertical-align:middle; }
/* Keep the destructive confirmation sentence readable on narrow screens. */
#hero-delete-modal .hero-delete-required { display:block; margin:12px 0; padding:14px; border:2px solid currentColor; border-radius:var(--r-sm); font-size:var(--fs-lg); font-weight:700; line-height:1.5; white-space:normal; overflow-wrap:anywhere; user-select:text; }
#hero-delete-phrase { display:block; width:100%; box-sizing:border-box; min-height:44px; font-size:var(--fs-md); }
#hero-delete-modal .hero-delete-ack { display:flex; align-items:flex-start; gap:10px; margin:16px 0; line-height:1.5; }
#hero-delete-ack { flex:none; width:22px; height:22px; }
#hero-delete-modal .btn { min-height:44px; white-space:normal; }

/* Guild v4: text-only social panels and rank editor. */
.guild-chat-messages { max-height:24rem; overflow:auto; padding:0 0 0 1.5rem; overflow-wrap:anywhere; }
.guild-chat-messages li, #guild-history-rows li { margin-block:.65rem; line-height:1.6; overflow-wrap:anywhere; }
.guild-chat-messages button { margin-inline-start:.5rem; min-height:36px; }
#guild-chat-panel summary, #guild-history-panel summary { cursor:pointer; padding-block:.5rem; font-weight:700; }
#guild-chat-panel input, #guild-history-panel select { max-width:100%; min-height:44px; }
[data-guild-chat-unread]:empty, [data-guild-notice-new]:empty { display:none; }
[data-guild-notice-new] { color:var(--text-gold); font-weight:700; }
#guild-ranks-form fieldset { display:flex; flex-wrap:wrap; gap:.65rem; min-width:0; margin-block:.8rem; }
#guild-ranks-form input { max-width:100%; }
@media (max-width:480px) { #app .guild-chat-messages { max-height:18rem; } #app .guild-chat-messages button { min-height:44px; } }

#guild-ranks-form label:has(input[type=checkbox]) { display:inline-flex; align-items:center; gap:.4rem; }
#guild-ranks-form input[type=checkbox] { width:20px; height:20px; min-height:20px; margin:0; }
#guild-ranks-form button, .guild-chat-messages button { padding:.4rem .65rem; border:1px solid var(--border-active); border-radius:var(--r-sm); background:var(--surface-panel); color:var(--text-secondary); font:inherit; cursor:pointer; }

.attr-step-btn,
.insp-sp-invest-btn {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Run B: one reused image plus a lightweight tint; content remains above it. */
.region-backdrop-host { position: relative; overflow: hidden; }
.region-backdrop { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.region-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.region-backdrop > span { position: absolute; inset: 0; }
.region-backdrop-host > :not(.region-backdrop) { position: relative; z-index: 1; }
.region-backdrop-host .oc2-hero-place { background: var(--bg-panel); border-radius: var(--r-sm); padding: 4px 8px; }
.region-backdrop-host .oc2-hero-region { color: var(--text-primary); }

.oc2-region-reward { padding: 12px 16px; border-bottom: 1px solid var(--border); line-height: 1.6; overflow-wrap: anywhere; }
.oc2-region-reward small { color: var(--text-muted); }
.guided-tour { position: fixed; inset: 0; z-index: 10020; pointer-events: none; }
.guided-tour-focus { position: fixed; border: 3px solid var(--line-gold); border-radius: var(--r-md); pointer-events: none; }
.guided-tour-card { position: fixed; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--line-gold); border-radius: var(--r-md); background: var(--well-deep); color: var(--well-text); box-shadow: var(--e4); pointer-events: auto; }
.guided-tour-card.guided-tour-top { top: 16px; bottom: auto; }
.guided-tour-count { color: var(--text-brand); font-weight: 700; }
.guided-tour-card p { margin: 9px 0 14px; line-height: 1.45; }
.guided-tour-actions { display: flex; justify-content: flex-end; gap: 8px; }
.guided-tour-actions button { min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); cursor: pointer; }
.guided-tour-actions [data-tour-next] { background: var(--line-gold); color: var(--well-deep); border: 0; font-weight: 700; }
.guided-tour-actions [data-tour-skip] { background: transparent; color: var(--well-text); border: 1px solid var(--well-text-muted); }
@media (max-width: 900px) { .guided-tour-card { bottom: calc(80px + env(safe-area-inset-bottom)); } .guided-tour-card.guided-tour-top { top: 8px; bottom: auto; } }

/* Release x: measured phone controls and dialogs. Keep the existing colors and layout language. */
@media (max-width: 600px) {
  .bn-item { min-height: 56px; font-size: var(--fs-xs); }
  .bn-item .bn-label { max-width: 100%; }
  #app .roster-name-edit, #app .roster-detail-btn, #app .btn-swap,
  #app .cp-choose, #app .insp-auto-equip-btn, #app .insp-remove-all-btn,
  #app .pd-card-chip, #app .oc2-step, #app .oc2-jump,
  #app .mat-autosell-btn, #app .cards-filter-chip, #app .rf-core-btn,
  #app .back-btn, #app .pst-respec-btn, #app .tw2-shop,
  #app .tower-start-btn, #app .rd-sb-auto, #app .rd-bench-card,
  #app .rd-start, #app .pvp-refresh-btn, #app .qs-claim-btn,
  #app .shop-buy-btn, #app .codex-lang-btn, #app .bpl-new,
  #app .bpl-alt, #app .acc-copy-btn, #app .acc-btn {
    min-height: 44px;
  }
  #app .inventory-screen .btn, #app .cards-screen .btn,
  body[data-screen="teamBuilder"] #app .btn, #app .tsh-buy,
  #app .bpd-cancel, #app .class-lock-btn, #app .tier-pick-btn,
  #app .rarity-pick-btn, #app .element-btn, #app .btn-leave-dungeon,
  body[data-screen="equipFlow"] #app .btn, #app .twc-cashout-btn,
  #app .twco-btn, #app .rd-retreat, #app .pvpr-return { min-height: 44px; }
  #app .roster-name-edit, #app .oc2-step, #app .oc2-jump:not(.oc2-jump-wide),
  #app .back-btn, #app .rd-start, #app .cards-filter-chip,
  #app .codex-lang-btn, #app .acc-copy-btn, #app .mat-autosell-btn,
  #app .element-btn { min-width: 44px; }
  #app .oc2-hero-steps { gap: 6px; }
  #app .oc2-hero-plaque { min-width: 0; }
  #app .roster-slot-head { gap: 4px; }
  #app .roster-name-input { min-height: 44px; }
  #app .qs-right { flex-shrink: 1; min-width: 0; }
  #app .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-overlay, .scp-overlay, .craft-result-overlay, .feature-modal-overlay { padding: 12px; overflow-y: auto; align-items: safe center; }
  .modal-box, .modal-card, .scp-card, .feature-modal-card, .craft-result-panel {
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cm-modal-close { width: 44px; height: 44px; }
  .guided-tour-card { max-height: calc(100dvh - 110px); overflow-y: auto; }
}

/* Shared public Guild portrait with persistent emblem fallback. */
.guild-profile-image{display:inline-flex;position:relative;flex-direction:column;align-items:center;justify-content:center;flex:0 0 64px;width:64px;min-height:64px;vertical-align:middle;gap:3px}.guild-profile-image img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-md)}.guild-profile-image [hidden]{display:none!important}.guild-image-report{font:inherit;font-size:var(--fs-xs);min-height:44px;line-height:1.2;max-width:100%;white-space:normal;background:transparent;color:inherit;border:1px solid currentColor;border-radius:var(--r-xs);padding:3px}.guild-profile-image[data-image-size="256"]{width:96px;flex-basis:96px}.guild-profile-image[data-image-size="256"] img{width:96px;height:96px}#guild-image-form input[type="file"]{max-width:100%;min-width:0}

#guild-image-form label:has(#guild-image-consent){display:flex;align-items:center;gap:8px;min-height:44px}#guild-image-consent{width:20px;height:20px;min-height:20px;flex:0 0 20px}
.guild-image-fallback,.guild-image-fallback-fallback{display:inline-block;width:64px;height:64px;font-size:var(--fs-3xl);line-height:64px;text-align:center}
/* Guild phase 1. Dark wells and gold from the existing feature-unlock / RPG surfaces.
   Palette aliases are local to the Guild; other game screens retain their tokens. */
#app .guild-screen {
  --bg-deep:var(--well-deep); --bg-panel:var(--well); --bg-panel-raised:var(--well-raised);
  --bg-hover:var(--well-raised); --surface-panel:var(--well); --border-soft:var(--well-line);
  --border-active:var(--line-gold); --text-primary:var(--well-text); --text-secondary:var(--well-text);
  --text-muted:var(--well-text-muted); --text-faint:var(--well-text-muted); --text-gold:var(--text-brand);
  --accent-arcane:var(--text-brand); --text-success:var(--meter-success-start);
  --font-mono:var(--font-body);
  box-sizing:border-box; width:100%; max-width:1180px; padding:16px; padding-bottom:100px;
  background:var(--well-deep); border:1px solid var(--well-line); border-radius:var(--r-lg);
  color:var(--well-text); font-family:var(--font-body); font-variant-numeric:tabular-nums;
}
#app .guild-screen *, #app .guild-screen *::before, #app .guild-screen *::after { box-sizing:border-box; }
#app .guild-screen [hidden] { display:none!important; }
#app .guild-screen h1, #app .guild-screen h2, #app .guild-screen h3 { font-family:var(--font-display); color:var(--text-brand); line-height:1.4; margin:0; }
#app .guild-screen h1 { font-size:var(--fs-2xl); }
#app .guild-screen h2 { font-size:var(--fs-xl); }
#app .guild-screen h3 { font-size:var(--fs-lg); }
#app .guild-screen p { line-height:1.6; }
#app .guild-screen button, #app .guild-screen select, #app .guild-screen input:not([type=checkbox]) {
  min-height:44px; min-width:44px; max-width:100%; border:1px solid var(--line-gold); border-radius:var(--r-sm);
  background:var(--well-raised); color:var(--well-text); padding:10px 12px; font:inherit; line-height:1.4;
}
#app .guild-screen button { cursor:pointer; white-space:normal; }
#app .guild-screen button:hover:not(:disabled) { background:var(--well-line); color:var(--text-brand); }
#app .guild-screen .btn-primary { background:var(--text-brand); color:var(--well-deep); border-color:var(--text-brand); font-weight:700; }
#app .guild-screen .btn-primary:hover:not(:disabled) { background:var(--text-fab-icon); color:var(--well-deep); }
#app .guild-screen .btn-danger, #app .guild-screen [data-rank-delete] { border-color:var(--hp-low); color:var(--well-text); background:color-mix(in srgb,var(--danger) 30%,var(--well-deep)); }
#app .guild-screen :focus-visible { outline:3px solid var(--text-brand); outline-offset:3px; }
#app .guild-screen button:disabled { cursor:not-allowed; opacity:.55; }
#app .guild-screen input::placeholder { color:var(--well-text-muted); opacity:1; }
#app .guild-screen .guild-hero { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; padding:4px 0 16px; background:none; border:0; box-shadow:initial; }
#app .guild-screen .guild-hero-copy { flex:1; min-width:0; }
#app .guild-screen .guild-hero h1 { overflow-wrap:anywhere; }
#app .guild-screen .guild-identity-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:var(--fs-xs); color:var(--well-text-muted); }
#app .guild-screen .guild-tag { color:var(--text-brand); font-weight:700; letter-spacing:.1em; }
#app .guild-screen .guild-tier-badge { padding:2px 7px; background:var(--well-raised); color:var(--text-brand); border:1px solid var(--well-line-strong); font-size:var(--fs-xs); }
#app .guild-screen .guild-more { flex:0 0 44px; padding:0; font-size:var(--fs-xl); }
#app .guild-screen .guild-crest { flex:0 0 60px; width:60px; height:66px; border:2px solid var(--line-gold); padding:3px; border-radius:var(--r-md) var(--r-md) var(--r-full) var(--r-full); background:var(--well-raised); overflow:hidden; }
#app .guild-screen .guild-crest .guild-profile-image, #app .guild-screen .guild-crest img, #app .guild-screen .guild-crest .guild-image-fallback, #app .guild-screen .guild-crest .guild-image-fallback-fallback { width:50px; height:56px; min-height:0; flex-basis:50px; line-height:56px; border-radius:0; object-fit:cover; }
#app .guild-screen .guild-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:sticky; top:0; z-index:5; gap:4px; padding:5px; margin:0 0 20px; border:1px solid var(--well-line); background:var(--well-deep); border-radius:var(--r-md); }
#app .guild-screen .guild-tab { display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:8px 2px; min-width:0; border-color:transparent; background:transparent; color:var(--well-text-muted); font-size:var(--fs-xs); white-space:nowrap; }
#app .guild-screen .guild-tab span { overflow:visible; text-overflow:clip; }
#app .guild-screen .guild-tab.is-active { background:var(--well-raised); color:var(--text-brand); border-color:var(--line-gold); border-bottom-width:3px; }
#app .guild-screen .guild-tab small { position:absolute; top:0; right:0; min-width:18px; border-radius:var(--r-full); background:var(--text-brand); color:var(--well-deep); font:700 var(--fs-micro) var(--font-body); text-align:center; }
#app .guild-screen .guild-card { margin:0 0 16px; padding:20px; background:var(--well); border:1px solid var(--well-line); border-radius:var(--r-md); box-shadow:initial; }
#app .guild-screen .guild-card-head { display:flex; flex-direction:row; align-items:center; gap:12px; margin:0 0 12px; }
#app .guild-screen .guild-card-head h2 { flex:1; }
#app .guild-screen .guild-pinned { border-inline-start:3px solid var(--line-gold); }
#app .guild-screen .guild-pinned .guild-card-head { margin:0; }
#app .guild-screen .guild-notice { margin:6px 0 0; color:var(--well-text); font-size:var(--fs-sm); white-space:pre-wrap; overflow-wrap:anywhere; }
#app .guild-screen [data-guild-notice-new]:not(:empty) { padding:3px 7px; border-radius:var(--r-xs); color:var(--text-brand); background:var(--well-raised); }
#app .guild-screen .guild-section-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin:24px 0 12px; }
#app .guild-screen .guild-section-heading > span { font-size:var(--fs-xs); color:var(--well-text-muted); }
#app .guild-screen .guild-mission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#app .guild-screen .guild-mission { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:10px; padding:16px; }
#app .guild-screen .guild-mission-icon { color:var(--text-brand); font-size:var(--fs-2xl); }
#app .guild-screen .guild-mission p { margin:6px 0; color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-mission .guild-ready { color:var(--meter-success-start); }
#app .guild-screen .guild-mission-count strong { color:var(--well-text); font-size:var(--fs-xl); }
#app .guild-screen .guild-mission > button { grid-column:1/-1; align-self:end; width:100%; }
#app .guild-screen .guild-mission-kvm { border-color:var(--line-gold); }
#app .guild-screen .guild-chat-messages { list-style:none; margin:0 0 16px; padding:0; max-height:none; }
#app .guild-screen .guild-chat-messages li { margin:0; padding:12px 0; border-bottom:1px solid var(--well-line); font-size:var(--fs-sm); line-height:1.6; }
#app .guild-screen .guild-chat-preview:not(.is-expanded) .guild-chat-messages button { display:none; }
#app .guild-screen .guild-chat-preview.is-expanded .guild-chat-messages { max-height:55vh; overflow:auto; }
#app .guild-screen .guild-chat-compose { display:flex; gap:8px; }
#app .guild-screen .guild-chat-compose input { flex:1; width:0; border-color:var(--well-line-strong); }
#app .guild-screen .guild-chat-preview > small { display:block; margin-top:10px; color:var(--well-text-muted); font-size:var(--fs-xs); }
#app .guild-screen .guild-chat-empty { color:var(--well-text-muted); }
#app .guild-screen .guild-xp-label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:var(--fs-sm); }
#app .guild-screen .guild-xp { height:10px; margin:12px 0; background:var(--well-deep); border:1px solid var(--well-line); border-radius:var(--r-full); overflow:hidden; }
#app .guild-screen .guild-xp i { display:block; height:100%; background:linear-gradient(90deg,var(--line-gold),var(--text-brand)); }
#app .guild-screen .guild-level > p { color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-level .guild-card { margin:16px 0 0; background:var(--well-deep); }
#app .guild-screen .guild-roster-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
#app .guild-screen .guild-roster-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.35fr); gap:12px; margin-bottom:12px; }
#app .guild-screen .guild-roster-filters label { display:grid; gap:6px; font-size:var(--fs-sm); color:var(--well-text-muted); }
#app .guild-screen .guild-roster-filters input, #app .guild-screen .guild-roster-filters select { width:100%; border-color:var(--well-line-strong); }
#app .guild-screen .guild-member-list { margin:0; padding:0; }
#app .guild-screen .guild-member-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; padding:18px 0; border:0; border-bottom:1px solid var(--well-line); border-radius:0; background:transparent; }
#app .guild-screen .guild-member-main { display:flex; align-items:center; gap:12px; }
#app .guild-screen .guild-member-main > div { min-width:0; }
#app .guild-screen .guild-member-main strong { color:var(--well-text); overflow-wrap:anywhere; }
#app .guild-screen .guild-member-avatar { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; background:var(--well-raised); border:1px solid var(--line-gold); border-radius:var(--r-md); color:var(--text-brand); font-size:var(--fs-lg); }
#app .guild-screen .guild-member-last-seen { display:block; color:var(--well-text-muted); font-size:var(--fs-xs); margin-top:4px; }
#app .guild-screen .guild-role { background:var(--well-raised); color:var(--well-text); border:1px solid var(--well-line-strong); }
#app .guild-screen .guild-role-leader { color:var(--text-brand); border-color:var(--line-gold); }
#app .guild-screen .guild-role-officer { color:var(--text-effect-info); }
#app .guild-screen .guild-member-meta { align-self:start; }
#app .guild-screen .guild-member-activity { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--well-text-muted); font-size:var(--fs-xs); }
#app .guild-screen .guild-member-activity b { color:var(--well-text); }
#app .guild-screen .guild-member-activity small { flex-basis:100%; }
#app .guild-screen .guild-member-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; }
#app .guild-screen .guild-member-actions:empty { display:none; }
#app .guild-screen .guild-member-actions label { display:flex; align-items:center; gap:8px; }
#app .guild-screen .guild-sheet { width:min(680px,calc(100vw - 32px)); max-height:90dvh; padding:0; color:var(--well-text); background:var(--well-deep); border:1px solid var(--line-gold); border-radius:var(--r-lg); box-shadow:var(--e3); overflow:auto; }
#app .guild-screen .guild-sheet::backdrop { background:color-mix(in srgb,var(--well-deep) 85%,transparent); }
#app .guild-screen .guild-sheet-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--well-line); background:var(--well-deep); }
#app .guild-screen .guild-sheet-head button { padding:0; flex:0 0 44px; font-size:var(--fs-xl); }
#app .guild-screen .guild-sheet-body { padding:20px; }
#app .guild-screen #guild-ranks-form fieldset { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:16px; gap:12px; border:1px solid var(--well-line); border-radius:var(--r-md); background:var(--well); }
#app .guild-screen #guild-ranks-form legend { padding:0 8px; font-family:var(--font-display); color:var(--text-brand); }
#app .guild-screen #guild-ranks-form label { min-width:0; }
#app .guild-screen #guild-ranks-form label:has([data-rank-name]) { grid-column:1/-1; display:grid; gap:8px; }
#app .guild-screen #guild-ranks-form .guild-switch { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; flex-direction:row-reverse; min-height:44px; gap:12px; color:var(--well-text); }
#app .guild-screen .guild-switch input[type=checkbox], #app .guild-screen #guild-image-consent { appearance:none; width:44px; min-width:44px; height:26px; min-height:26px; border:1px solid var(--well-line-strong); border-radius:var(--r-full); background:var(--well-deep); cursor:pointer; position:relative; margin:0; }
#app .guild-screen .guild-switch input::before, #app .guild-screen #guild-image-consent::before { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--well-text-muted); border-radius:var(--r-full); }
#app .guild-screen .guild-switch input:checked, #app .guild-screen #guild-image-consent:checked { border-color:var(--line-gold); background:var(--text-brand); }
#app .guild-screen .guild-switch input:checked::before, #app .guild-screen #guild-image-consent:checked::before { left:21px; background:var(--well-deep); }
#app .guild-screen .guild-all-permissions { grid-column:1/-1; color:var(--text-brand); }
#app .guild-screen .guild-next-rewards { padding-top:16px; border-top:1px solid var(--well-line); }
#app .guild-screen .guild-next-rewards p, #app .guild-screen .guild-next-rewards small { color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-member-manage { grid-column:1/-1; justify-self:start; }
/* Support lives outside #app. Only an active Guild root changes its placement;
   the same support dialog remains accessible through the Guild settings menu. */
body:has(#app > .guild-screen) > #contact-admin-fab { display:none; }
#app .guild-screen .guild-skeleton { display:grid; gap:10px; padding:12px 0; }
#app .guild-screen .guild-skeleton i { display:block; height:12px; width:90%; border-radius:var(--r-sm); background:var(--well-line); }
#app .guild-screen .guild-skeleton i:last-child { width:60%; }
@media (max-width:767px) {
  #app .guild-screen { padding:12px; padding-bottom:110px; border-radius:var(--r-md); }
  #app .guild-screen h1 { font-size:var(--fs-xl); }
  #app .guild-screen h2 { font-size:var(--fs-lg); }
  #app .guild-screen .guild-hero { gap:8px; padding-bottom:12px; }
  #app .guild-screen .guild-identity-line { gap:4px 8px; }
  #app .guild-screen .guild-tabs { margin-bottom:12px; gap:0; padding:3px; }
  #app .guild-screen .guild-card { padding:14px; }
  #app .guild-screen .guild-mission-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  #app .guild-screen .guild-mission { grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:8px; }
  #app .guild-screen .guild-mission > button { grid-column:3; max-width:102px; padding:8px; }
  #app .guild-screen .guild-mission h3 { font-size:var(--fs-md); }
  #app .guild-screen .guild-mission p { font-size:var(--fs-xs); }
  #app .guild-screen .guild-member-row { grid-template-columns:minmax(0,1fr); }
  #app .guild-screen .guild-member-meta { padding-left:56px; margin-top:-4px; }
  #app .guild-screen .guild-member-activity { padding-left:56px; }
  #app .guild-screen .guild-member-actions button { flex:1; }
  #app .guild-screen .guild-sheet { width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  #app .guild-screen .guild-sheet-body { padding:14px; }
  #app .guild-screen .guild-chat-preview .guild-card-head { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  #app .guild-screen *, #app .guild-screen *::before, #app .guild-screen *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Guild round 2: every rule stays inside the Guild root. */
#app .guild-screen .guild-tab > span:first-child { font-size:var(--fs-2xl); line-height:1.1; }
#app .guild-screen .guild-tab .asset-icon { width:26px; height:26px; }
#app .guild-screen .guild-waiting { color:var(--text-brand); }
#app .guild-screen .guild-ready { color:var(--meter-success-start); }
#app .guild-screen .guild-member-row { position:relative; padding-right:52px; }
#app .guild-screen .guild-member-manage { position:absolute; top:12px; right:0; width:44px; padding:0; font-size:var(--fs-xl); }
#app .guild-screen .guild-member-portrait { display:block; width:42px; height:42px; background-size:contain; background-position:center; background-repeat:no-repeat; }
#app .guild-screen .guild-member-actions { padding:12px; background:var(--well-deep); border:1px solid var(--line-gold); border-radius:var(--r-md); }
#app .guild-screen .guild-help-action { display:flex; justify-content:flex-end; margin-bottom:8px; }
#app .guild-screen .guild-help-action button { width:44px; padding:0; font-size:var(--fs-xl); }
#app .guild-screen .guild-battle-tabs { display:flex; gap:8px; margin:0 0 16px; }
#app .guild-screen .guild-battle-tab { flex:1; min-height:48px; }
#app .guild-screen .guild-battle-tab.is-active { border-color:var(--line-gold); background:var(--well-raised); color:var(--text-brand); }
#app .guild-screen .guild-kvm-offer { border-color:var(--line-gold); }
#app .guild-screen .guild-kvm-offer-banner { display:flex; align-items:center; gap:16px; padding:0 0 18px; background:none; }
#app .guild-screen .guild-kvm-offer-banner h2 { margin:4px 0; }
#app .guild-screen .guild-kvm-offer h2 { color:var(--well-text); }
#app .guild-screen .guild-kvm-log-list strong { color:var(--well-text); }
#app .guild-screen .guild-kvm-offer-banner { flex-direction:row; justify-content:flex-start; text-align:start; }
#app .guild-screen .guild-rival-power { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
#app .guild-screen .guild-rival-power strong { color:var(--text-brand); font-size:var(--fs-xl); }
#app .guild-screen .guild-rival-note { font-size:var(--fs-xs); color:var(--well-text-muted); }
#app .guild-screen .guild-shop-head > div { flex:1; min-width:0; }
#app .guild-screen .guild-shop-head > button { flex:0 0 auto; width:auto; }
#app .guild-screen .guild-kvm-offer-body { display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
#app .guild-screen .guild-kvm-offer-body .guild-stats { flex:1; min-width:180px; }
#app .guild-screen .guild-stats dd { color:var(--well-text); }
#app .guild-screen .guild-stats dt { color:var(--well-text-muted); }
#app .guild-screen .guild-kvm-offer-actions { display:flex; gap:20px; align-items:center; margin-top:16px; border-top:1px solid var(--well-line); padding-top:16px; }
#app .guild-screen .guild-kvm-offer-actions p { flex:1; margin:0; }
#app .guild-screen #guild-kvm-challenge { min-height:56px; min-width:200px; font-size:var(--fs-lg); }
#app .guild-screen .guild-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:22px 0; gap:0; }
#app .guild-screen .guild-timeline li { display:flex; flex-direction:column; gap:8px; padding:18px 10px 0 0; border-top:2px solid var(--line-gold); position:relative; }
#app .guild-screen .guild-timeline li::before { content:''; position:absolute; top:-6px; left:0; width:10px; height:10px; border-radius:var(--r-full); background:var(--text-brand); }
#app .guild-screen .guild-timeline strong { color:var(--text-brand); font-variant-numeric:tabular-nums; }
#app .guild-screen .guild-timeline span { color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-kvm-rules p { color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-boss-hero { display:flex; justify-content:space-between; gap:24px; border-color:var(--line-gold); }
#app .guild-screen .guild-boss-status { display:flex; flex-direction:column; gap:8px; min-width:180px; }
#app .guild-screen .guild-boss-window { display:flex; justify-content:space-between; gap:16px; padding:16px; margin-bottom:16px; border:1px solid var(--well-line); border-radius:var(--r-md); background:var(--well-deep); }
#app .guild-screen .guild-boss-window div { display:grid; gap:6px; }
#app .guild-screen .guild-boss-window span { color:var(--well-text-muted); }
#app .guild-screen .guild-boss-start { display:flex; align-items:center; gap:20px; padding:20px; margin:16px 0; border:1px solid var(--line-gold); background:var(--well-raised); border-radius:var(--r-md); }
#app .guild-screen .guild-boss-start > div { flex:1; }
#app .guild-screen #guild-boss-challenge { min-height:56px; }
#app .guild-screen .guild-boss-intra ol { list-style:none; padding:0; }
#app .guild-screen .guild-boss-rank-list { list-style:none; padding:0; }
#app .guild-screen .guild-boss-rank-list li { display:flex; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--well-line); }
#app .guild-screen .guild-boss-rank-list li > div { flex:1; min-width:0; }
#app .guild-screen .guild-boss-rank-list small { display:block; margin-top:6px; color:var(--well-text-muted); }
#app .guild-screen .guild-boss-rank-list .guild-profile-image, #app .guild-screen .guild-boss-rank-list .guild-image-fallback, #app .guild-screen .guild-boss-rank-list .guild-profile-image img { width:40px; height:40px; min-height:40px; flex-basis:40px; }
#app .guild-screen .guild-boss-rank-list b { color:var(--text-brand); }
#app .guild-screen .guild-boss-intra li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:18px 0; padding:0; border:0; }
#app .guild-screen .guild-damage-track { grid-column:1/-1; display:block; height:10px; background:var(--well-deep); border-radius:var(--r-full); overflow:hidden; }
#app .guild-screen .guild-damage-track i { display:block; height:100%; background:linear-gradient(90deg,var(--line-gold),var(--text-brand)); }
#app .guild-screen .guild-history-toggle { display:flex; width:100%; justify-content:space-between; align-items:center; text-align:start; font-family:var(--font-display); font-size:var(--fs-lg); }
#app .guild-screen .guild-history-filters { display:flex; flex-wrap:wrap; gap:16px; margin:20px 0; }
#app .guild-screen .guild-history-filters label { display:grid; gap:6px; flex:1; min-width:120px; }
#app .guild-screen #guild-history-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#app .guild-screen #guild-history-summary p { display:flex; flex-direction:column; gap:10px; margin:0; padding:14px; background:var(--well-deep); border:1px solid var(--well-line); border-radius:var(--r-md); }
#app .guild-screen .guild-wdl { display:flex; flex-wrap:wrap; gap:5px; }
#app .guild-screen .guild-wdl b, #app .guild-screen .guild-result-chip { padding:4px 8px; border-radius:var(--r-sm); border:1px solid currentColor; font-size:var(--fs-xs); }
#app .guild-screen .is-win { color:var(--meter-success-start); }
#app .guild-screen .is-draw { color:var(--text-brand); }
#app .guild-screen .is-loss { color:var(--hp-low); }
#app .guild-screen #guild-history-rows { list-style:none; padding:0; }
#app .guild-screen .guild-history-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--well-line); }
#app .guild-screen .guild-history-row > div { flex:1; min-width:0; }
#app .guild-screen .guild-history-row strong { display:block; overflow-wrap:anywhere; }
#app .guild-screen .guild-history-row small { display:block; margin-top:6px; color:var(--well-text-muted); }
#app .guild-screen .guild-history-row > b { white-space:nowrap; }
#app .guild-screen .guild-league-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:16px; }
#app .guild-screen .guild-league-tier { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-color:var(--line-gold); }
#app .guild-screen .guild-league-tier .guild-tier-badge { padding:18px 28px; margin:8px 0 16px; font:700 var(--fs-3xl) var(--font-display); border:1px solid var(--line-gold); color:var(--text-brand); background:var(--well-deep); }
#app .guild-screen .guild-score-equation { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0; }
#app .guild-screen .guild-score-equation div { display:flex; flex:1; flex-direction:column; gap:8px; text-align:center; }
#app .guild-screen .guild-score-equation > b { color:var(--text-brand); font-size:var(--fs-xl); }
#app .guild-screen .guild-score-equation small { color:var(--well-text-muted); }
#app .guild-screen .guild-settled-score { display:grid; grid-template-columns:1fr auto; gap:8px; border-top:1px solid var(--well-line); padding-top:16px; }
#app .guild-screen .guild-settled-score strong { font-size:var(--fs-2xl); color:var(--text-brand); }
#app .guild-screen .guild-season-dates { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-shop-offer-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#app .guild-screen .guild-shop-offer { display:flex; flex-direction:column; padding:18px; border:1px solid var(--well-line-strong); border-radius:var(--r-md); background:var(--well-deep); min-width:0; }
#app .guild-screen .guild-shop-offer.is-gated { opacity:1; }
#app .guild-screen .guild-shop-offer-head { display:flex; flex-direction:column; align-items:start; gap:12px; }
#app .guild-screen .guild-shop-art { display:grid; place-items:center; width:72px; height:72px; border:1px solid var(--line-gold); border-radius:var(--r-md); background:var(--well-raised); }
#app .guild-screen .guild-item-art { display:block; width:58px; height:58px; }
#app .guild-screen .guild-shop-offer h3 { color:var(--well-text); font-size:var(--fs-md); }
#app .guild-screen .guild-shop-offer p, #app .guild-screen .guild-shop-kind { color:var(--well-text-muted); font-size:var(--fs-sm); }
#app .guild-screen .guild-shop-price { display:flex; flex-direction:row; align-items:center; gap:6px; color:var(--text-brand); }
#app .guild-screen .guild-coin-mark { display:inline-grid; place-items:center; width:26px; height:26px; border:2px solid var(--line-gold); border-radius:var(--r-full); font-weight:800; }
#app .guild-screen .guild-shop-offer-meta { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
#app .guild-screen .guild-shop-offer-meta > div { display:grid; gap:4px; padding:0; border:0; background:none; }
#app .guild-screen .guild-shop-offer-meta dt { color:var(--well-text-muted); font-size:var(--fs-xs); }
#app .guild-screen .guild-shop-offer-meta dd { margin:0; color:var(--well-text); font-size:var(--fs-sm); }
#app .guild-screen .guild-shop-offer .guild-unlock-label { color:var(--text-brand); border:1px solid var(--line-gold); border-radius:var(--r-sm); padding:8px; }
#app .guild-screen .guild-shop-offer-actions { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
#app .guild-screen .guild-shop-offer-actions select, #app .guild-screen .guild-shop-offer-actions button { width:100%; }
#app .guild-screen .guild-shop-offer-actions label { min-width:0; flex:none; display:grid; gap:6px; }
#app .guild-screen .guild-shop-offer-actions select { height:44px; }
#app .guild-screen .guild-chat-message { position:relative; max-width:86%; width:fit-content; min-width:140px; padding:10px 44px 10px 0; margin:8px auto 8px 0; border:0; }
#app .guild-screen .guild-chat-message.is-own { margin-left:auto; margin-right:0; }
#app .guild-screen .guild-chat-message-head { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
#app .guild-screen .guild-chat-message-head strong { color:var(--well-text); }
#app .guild-screen .guild-chat-message-head time { font-size:var(--fs-xs); color:var(--well-text-muted); }
#app .guild-screen .guild-chat-message-head .guild-role { font-size:var(--fs-xs); padding:2px 6px; }
#app .guild-screen .guild-chat-bubble { margin:0; padding:12px 16px; border:1px solid var(--well-line-strong); border-radius:var(--r-md) var(--r-md) var(--r-md) 0; background:var(--well-raised); color:var(--well-text); white-space:pre-wrap; overflow-wrap:anywhere; }
#app .guild-screen .guild-chat-message.is-own .guild-chat-bubble { border-color:var(--line-gold); border-radius:var(--r-md) var(--r-md) 0 var(--r-md); }
#app .guild-screen .guild-chat-more { position:absolute; top:24px; right:0; padding:0; width:44px; font-size:var(--fs-xl); }
#app .guild-screen .guild-chat-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
#app .guild-screen .guild-chat-unread { text-align:center; color:var(--text-brand); border-bottom:1px solid var(--line-gold); padding:8px; }
#app .guild-screen .guild-chat-dialog { position:fixed; inset:0; margin:0 auto; padding:0; width:min(880px,100%); max-width:100%; max-height:none; border:1px solid var(--line-gold); background:var(--well-deep); color:var(--well-text); overflow:hidden; }
#app .guild-screen .guild-chat-dialog::backdrop { background:color-mix(in srgb,var(--well-deep) 85%,transparent); }
#app .guild-screen .guild-chat-dialog .guild-chat-preview { display:flex; flex-direction:column; height:100%; box-sizing:border-box; margin:0; border:0; padding:18px; }
#app .guild-screen .guild-chat-dialog .guild-card-head { flex-shrink:0; border-bottom:1px solid var(--well-line); padding-bottom:12px; }
#app .guild-screen .guild-chat-dialog .guild-chat-messages { flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; padding:8px 0; margin:0; }
#app .guild-screen .guild-chat-dialog .guild-chat-preview.is-expanded .guild-chat-messages { max-height:none; }
#app .guild-screen .guild-chat-compose { flex-shrink:0; padding-top:12px; background:var(--well); }
#app .guild-screen .guild-chat-dialog .guild-chat-compose { padding-bottom:env(safe-area-inset-bottom); }
#app .guild-screen .guild-picture-preview { display:grid; place-items:center; margin:0 auto 20px; width:144px; height:144px; padding:8px; border:2px solid var(--line-gold); border-radius:var(--r-lg); background:var(--well-deep); }
#app .guild-screen .guild-picture-preview .guild-profile-image, #app .guild-screen .guild-picture-preview img { width:124px; height:124px; }
#app .guild-screen .guild-privacy-note { color:var(--well-text-muted); font-size:var(--fs-sm); padding:12px; border-left:2px solid var(--line-gold); }
#app .guild-screen #guild-image-file { width:100%; min-width:0; box-sizing:border-box; }
#app .guild-screen #guild-image-file::file-selector-button { min-height:44px; border:1px solid var(--line-gold); background:var(--well-deep); color:var(--well-text); border-radius:var(--r-sm); margin-right:8px; }
#app .guild-screen #guild-image-form label:has(#guild-image-consent) { display:flex; align-items:center; gap:12px; min-height:44px; }
#app .guild-screen .guild-entry-requirements { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 24px; }
#app .guild-screen .guild-entry-requirements span { padding:10px 14px; border:1px solid var(--line-gold); border-radius:var(--r-md); background:var(--well-deep); color:var(--text-brand); }
#app .guild-screen .guild-directory-card { display:grid; grid-template-columns:60px minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px; margin-bottom:12px; background:var(--well-deep); border:1px solid var(--well-line-strong); border-radius:var(--r-md); }
#app .guild-screen .guild-directory-copy h3, #app .guild-screen .guild-directory-copy h3 span { color:var(--well-text); }
#app .guild-screen .guild-directory-copy p { color:var(--well-text-muted); }
#app .guild-screen .guild-find-hero { background:var(--well-deep); border-color:var(--line-gold); }
#app .guild-screen .guild-find-hero h1 { color:var(--text-brand); }
#app .guild-screen .guild-table-wrap { max-width:100%; }
#app .guild-screen table { color:var(--well-text); background:transparent; }
#app .guild-screen th, #app .guild-screen td { border-color:var(--well-line); }
@media (min-width:768px) {
  #app .guild-screen .guild-tab { flex-direction:row; gap:10px; min-height:54px; font-size:var(--fs-sm); }
}
@media (max-width:1000px) {
  #app .guild-screen .guild-shop-offer-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  #app .guild-screen .guild-kvm-offer-actions, #app .guild-screen .guild-boss-hero, #app .guild-screen .guild-boss-start { flex-direction:column; align-items:stretch; gap:12px; }
  #app .guild-screen #guild-kvm-challenge { width:100%; min-width:0; }
  #app .guild-screen .guild-timeline { grid-template-columns:minmax(0,1fr); margin:16px 0; }
  #app .guild-screen .guild-timeline li { display:grid; grid-template-columns:104px minmax(0,1fr); padding:0 0 22px 20px; border-top:0; border-left:2px solid var(--line-gold); }
  #app .guild-screen .guild-timeline li:last-child { padding-bottom:0; }
  #app .guild-screen .guild-timeline li::before { top:3px; left:-6px; }
  #app .guild-screen .guild-league-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  #app .guild-screen .guild-score-equation { gap:5px; font-size:var(--fs-sm); }
  #app .guild-screen #guild-history-summary { gap:6px; }
  #app .guild-screen #guild-history-summary p { padding:10px 6px; font-size:var(--fs-xs); }
  #app .guild-screen .guild-wdl { gap:4px; }
  #app .guild-screen .guild-wdl b { padding:2px 4px; }
  #app .guild-screen .guild-boss-window { flex-direction:column; }
  #app .guild-screen .guild-shop-offer-list { gap:10px; }
  #app .guild-screen .guild-shop-offer { padding:12px; }
  #app .guild-screen .guild-shop-offer h3 { font-size:var(--fs-sm); }
  #app .guild-screen .guild-shop-offer p, #app .guild-screen .guild-shop-offer-meta dd { font-size:var(--fs-xs); }
  #app .guild-screen .guild-chat-message { max-width:96%; }
  #app .guild-screen .guild-chat-dialog .guild-chat-preview { padding:12px; }
  #app .guild-screen .guild-chat-dialog .guild-card-head { flex-wrap:nowrap; gap:8px; }
  #app .guild-screen .guild-chat-dialog .guild-card-head button { font-size:var(--fs-xs); }
  #app .guild-screen .guild-directory-card { grid-template-columns:52px minmax(0,1fr); padding:14px; gap:12px; }
  #app .guild-screen .guild-directory-card > button { grid-column:1/-1; width:100%; }
}

#app .guild-screen .guild-panel { position:relative; }
#app .guild-screen .guild-help-action { position:absolute; right:0; top:0; margin:0; z-index:1; }
#app .guild-screen .guild-battle-subtabs { grid-template-columns:repeat(2,minmax(0,1fr)); padding-right:52px; margin-top:0; gap:8px; }
#app .guild-screen .guild-battle-subtabs button { padding:12px; text-align:center; background:var(--well); color:var(--well-text-muted); border-color:var(--well-line); }
#app .guild-screen .guild-battle-subtabs button.is-active { border-color:var(--line-gold); color:var(--text-brand); background:var(--well-raised); }
#app .guild-screen .guild-battle-subtabs small { display:none; }
#app .guild-screen .guild-league-head { padding-right:52px; min-height:44px; }
#app .guild-screen .guild-kvm-quota-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; padding:12px 0 16px; color:var(--well-text); }
#app .guild-screen .guild-kvm-quota-strip div { display:flex; flex-direction:column; gap:4px; }
#app .guild-screen .guild-kvm-quota-strip span, #app .guild-screen .guild-kvm-quota-strip p { color:var(--well-text-muted); font-size:var(--fs-xs); margin:0; }
#app .guild-screen .guild-boss-window div { padding:0; border:0; background:none; }
#app .guild-screen .guild-boss-window { padding:12px 16px; }
#app .guild-screen .guild-shop-balance { display:flex; align-items:center; gap:12px; border:1px solid var(--line-gold); padding:12px 16px; margin:0 0 16px; background:var(--well); border-radius:var(--r-md); }
#app .guild-screen .guild-shop-balance strong { flex:1; color:var(--text-brand); font-size:var(--fs-xl); }
#app .guild-screen .guild-chat-messages .guild-chat-message { position:relative; max-width:92%; width:fit-content; box-sizing:border-box; min-width:140px; padding:10px 44px 10px 0; margin:8px auto 8px 0; border:0; }
#app .guild-screen .guild-chat-messages .guild-chat-message.is-own { margin-left:auto; margin-right:0; }
#app .guild-screen .guild-chat-messages .guild-chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; }
#app .guild-screen .guild-chat-dialog #guild-chat-older { flex-shrink:0; }
#app .guild-screen .guild-chat-preview:not(.is-expanded) .guild-chat-message { padding-right:0; }
@media(max-width:767px) {
  #app .guild-screen .guild-boss-hero { padding:14px; }
  #app .guild-screen .guild-boss-status { flex-direction:row; flex-wrap:wrap; gap:8px 12px; font-size:var(--fs-sm); }
  #app .guild-screen .guild-boss-window { gap:6px; }
  #app .guild-screen .guild-boss-window > div:first-child strong { font-size:var(--fs-xs); }
  #app .guild-screen .guild-boss-window > div:last-child { display:flex; align-items:center; gap:8px; }
  #app .guild-screen .guild-chat-messages .guild-chat-message { max-width:100%; }
}
/* Guild round 3: compact products and chronological chat. */
#app .guild-screen .guild-shop-product { position:relative; display:flex; flex-direction:column; gap:10px; cursor:pointer; }
#app .guild-screen .guild-shop-product h3 { margin:0; }
#app .guild-screen .guild-shop-detail-link { padding:0; border:0; background:transparent; color:var(--well-text); text-align:left; width:100%; font:inherit; min-height:44px; }
#app .guild-screen .guild-shop-product .guild-shop-price { justify-content:flex-start; }
#app .guild-screen .guild-shop-product .guild-shop-stock { margin:0; color:var(--well-text-muted); }
#app .guild-screen .guild-shop-product .guild-shop-status { margin-top:auto; width:100%; min-height:44px; padding:8px; white-space:normal; background:var(--well-raised); color:var(--well-text); }
#app .guild-screen .guild-shop-product .guild-shop-status.btn-primary { background:var(--accent-gold); color:var(--text-on-gold); }
#app .guild-screen .guild-shop-reset { font-family:inherit; font-size:var(--fs-sm); color:var(--well-text-muted); margin:20px 0 12px; }
#app .guild-screen .guild-shop-stock-group { min-width:0; }
#app .guild-screen .guild-item-art-fallback { font-size:var(--fs-2xl); color:var(--text-brand); }
#app .guild-screen .guild-chat-more { top:20px; min-width:44px; min-height:44px; border:0; box-shadow:initial; background:transparent; color:var(--well-text-muted); }
#app .guild-screen .guild-chat-day { display:flex; align-items:center; gap:12px; margin:18px 0 8px; color:var(--well-text-muted); font-size:var(--fs-sm); text-align:center; }
#app .guild-screen .guild-chat-day::before, #app .guild-screen .guild-chat-day::after { content:''; height:1px; flex:1; background:var(--well-line-strong); }
#app .guild-screen .guild-chat-message.is-grouped { margin-top:0; padding-top:0; }
#app .guild-screen .guild-chat-message.is-grouped .guild-chat-message-head strong, #app .guild-screen .guild-chat-message.is-grouped .guild-chat-message-head .guild-role { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#app .guild-screen .guild-chat-message.is-grouped .guild-chat-more { top:10px; }
@media (hover:hover) and (pointer:fine) {
  #app .guild-screen .guild-chat-more { opacity:0; }
  #app .guild-screen .guild-chat-message:hover .guild-chat-more, #app .guild-screen .guild-chat-message:focus-within .guild-chat-more, #app .guild-screen .guild-chat-more[aria-expanded="true"] { opacity:1; }
}
#app .guild-screen .guild-shop-art > span { grid-area:1 / 1; }
#app .guild-screen .guild-item-art:not([data-art-state]) + .guild-item-art-fallback { visibility:hidden; }
#app .guild-screen .guild-item-art[data-art-state] { background-color:transparent; outline:0; }
#app .guild-screen .guild-shop-product .guild-shop-price { font-variant-numeric:tabular-nums; }
#app .guild-screen .guild-chat-messages .guild-chat-day { border:0; padding:8px 0; }
#app .guild-screen .guild-chat-messages .guild-chat-message { border:0; }
#app .guild-screen .guild-chat-message:has(.guild-chat-more) .guild-chat-bubble { min-width:44px; min-height:44px; box-sizing:border-box; cursor:pointer; }
#app .guild-screen .guild-shop-offer-actions button:disabled { opacity:1; background:var(--well-raised); color:var(--well-text-muted); }

/* Pet screens — light paper panels, pixel art at integer frame scale. */
.pt-screen { --pt-t1:var(--success);--pt-t2:var(--el-water);--pt-t3:var(--accent-arcane);--pt-t4:var(--accent-gold);--pt-grade-c:var(--text-muted);--pt-grade-b:var(--success);--pt-grade-a:var(--accent-arcane);--pt-grade-s:var(--accent-gold); color:var(--text-primary);max-width:1200px;margin:auto;padding:20px;display:grid;gap:18px;min-width:0 }
.pt-screen * { box-sizing:border-box }
.pt-screen h1,.pt-screen h2,.pt-screen h3 { margin:0 }
.pt-screen h1 { font-size:var(--fs-2xl) }
.pt-screen h2 { font-size:var(--fs-xl) }
.pt-screen h3 { font-size:var(--fs-md) }
.pt-screen p { margin:8px 0;color:var(--text-muted) }
.pt-head { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap }
.pt-head small { color:var(--text-gold);font-weight:800;text-transform:uppercase;letter-spacing:.08em }
.pt-icon { display:inline-block;width:26px;height:26px;min-width:26px;background-size:contain;background-repeat:no-repeat;background-position:center;vertical-align:middle;margin-right:5px }
.pt-wallet { display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--r-md) }
.pt-wallet>span { display:inline-flex;align-items:center;min-height:40px;padding:4px 9px;background:var(--bg-panel-raised);border:1px solid var(--border-soft);border-radius:var(--r-sm);font-weight:700;gap:3px }
.pt-btn,.pt-tab,.pt-card,.pt-stage,.pt-habitat { appearance:none;font:inherit;color:var(--text-primary);background:var(--bg-panel-raised);border:1px solid var(--border-soft);border-radius:var(--r-md);cursor:pointer;transition:background .15s,border-color .15s,transform .15s }
.pt-btn { padding:10px 14px;min-height:44px;font-weight:750 }
.pt-btn:hover:not(:disabled),.pt-tab:hover,.pt-card:hover,.pt-stage:hover:not(:disabled),.pt-habitat:hover { background:var(--bg-hover);border-color:var(--border-active);transform:translateY(-1px) }
.pt-btn:focus-visible,.pt-tab:focus-visible,.pt-card:focus-visible,.pt-stage:focus-visible,.pt-habitat:focus-visible { outline:3px solid var(--accent-arcane);outline-offset:2px }
.pt-btn:disabled,.pt-stage:disabled { cursor:not-allowed;opacity:.58 }
.pt-danger { color:var(--danger) }
.pt-reason { display:inline-block;color:var(--text-muted);margin:2px 8px }
.pt-panel { background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:18px;min-width:0;display:grid;align-content:start;gap:12px }
.pt-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;min-width:0 }
.pt-card { min-height:144px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;min-width:0 }
.pt-card b { overflow-wrap:anywhere }
.pt-card small,.pt-trait small { color:var(--text-muted);font-size:var(--fs-2xs) }
.pt-card.pt-active,.pt-tab.pt-active,.pt-stage.pt-active,.pt-habitat.pt-active { border-color:var(--accent-gold);background:var(--bg-hover);outline:1px solid var(--accent-gold);outline-offset:-1px }
.pt-sprite { display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;background-position:0 0 }
.pt-sprite-missing { font-size:var(--fs-2xl) }
.pt-tier,.pt-coat,.pt-grade { display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:var(--r-sm);padding:2px 7px;font-size:var(--fs-2xs);font-weight:800 }
.pt-tier-1 { color:var(--pt-t1) }.pt-tier-2 { color:var(--pt-t2) }.pt-tier-3 { color:var(--pt-t3) }.pt-tier-4 { color:var(--pt-t4) }
.pt-grade-C { color:var(--pt-grade-c) }.pt-grade-B { color:var(--pt-grade-b) }.pt-grade-A { color:var(--pt-grade-a) }.pt-grade-S { color:var(--pt-grade-s) }
.pt-coat-rift { color:var(--accent-arcane) }.pt-coat-shiny,.pt-shiny { color:var(--accent-gold);font-weight:800 }
.pt-tabs { display:flex;gap:8px;flex-wrap:wrap }.pt-tab { min-height:44px;padding:8px 16px;font-weight:750 }
.pt-layout { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.85fr);gap:16px;align-items:start;min-width:0 }.pt-layout>div { min-width:0;display:grid;gap:12px }
.pt-feature { display:flex;gap:18px;align-items:center;min-width:0 }.pt-feature>div { min-width:0 }.pt-feature strong { color:var(--text-gold);display:block;margin-top:7px }
.pt-traits { display:grid;gap:8px }.pt-trait { display:flex;align-items:center;gap:7px;min-width:0 }.pt-trait>span:nth-child(2) { display:grid;min-width:0;flex:1 }.pt-trait small { overflow-wrap:anywhere }.pt-innate { display:grid;gap:4px;padding:12px;background:var(--bg-hover);border-radius:var(--r-sm) }
.pt-actions { display:flex;gap:8px;flex-wrap:wrap;align-items:center }.pt-actions .pt-btn { flex:1 1 auto }
.pt-labrow { display:grid;gap:8px;padding:12px;border:1px solid var(--border-soft);border-radius:var(--r-sm) }.pt-labrow .pt-actions { justify-content:flex-end }
.pt-options { display:flex;gap:14px;flex-wrap:wrap;align-items:center }.pt-options label,.pt-check { display:inline-flex;align-items:center;gap:7px;min-height:40px }.pt-options select,.pt-modal select { min-height:40px;padding:6px;border-radius:var(--r-sm);background:var(--bg-panel-raised);border:1px solid var(--border-active);color:var(--text-primary) }
.pt-meter { display:grid;gap:6px }.pt-meter progress { width:100%;height:14px;accent-color:var(--accent-gold) }
.pt-compare { display:grid;grid-template-columns:1fr 1fr;gap:12px }.pt-compare>div { min-width:0;padding:12px;background:var(--bg-hover);border-radius:var(--r-sm) }
.pt-stations { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px }.pt-stations h2 { display:flex;align-items:center }.pt-choice { display:flex;flex-wrap:wrap;gap:8px }.pt-choice label { display:flex;align-items:center;min-height:40px;gap:5px;padding:3px 7px;border:1px solid var(--border-soft);border-radius:var(--r-sm) }
.pt-overlay { position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:15px;background:color-mix(in srgb,var(--text-primary) 45%,transparent) }.pt-modal { width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--bg-panel-raised);border:1px solid var(--border-active);border-radius:var(--r-lg);padding:22px;display:grid;gap:16px;box-shadow:var(--e3) }.pt-modal h2,.pt-modal h3,.pt-modal p { margin:0 }.pt-reveal { display:grid;justify-items:center;gap:8px }
.pt-ladder { display:flex;gap:8px;overflow-x:auto;padding:3px 2px 10px }.pt-stage { min-width:95px;min-height:64px;padding:8px;display:grid;gap:3px;justify-items:center }.pt-stage small { font-size:var(--fs-micro) }
.pt-habitats { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px }.pt-habitat { min-width:0;min-height:130px;padding:7px;display:grid;gap:5px;overflow:hidden;text-align:left }.pt-habitat small { display:flex;align-items:center;font-size:var(--fs-micro) }.pt-banner { display:block;height:65px;width:100%;border-radius:var(--r-xs);background-size:cover;background-position:center }
.pt-hero { display:flex;align-items:center;gap:7px;min-height:52px;padding:6px;border:1px solid var(--border-soft);border-radius:var(--r-sm);cursor:pointer;min-width:0 }.pt-hero small { margin-left:auto;color:var(--text-muted) }.pt-hero-face { display:inline-block;flex:none;width:40px;height:40px;background-size:contain;background-position:center;background-repeat:no-repeat;image-rendering:pixelated }
.pt-start { display:flex;justify-content:flex-end }.pt-arena { position:relative;height:260px;border:2px solid var(--border-active);border-radius:var(--r-md);overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-hover) }.pt-den,.pt-fence { position:absolute;top:44%;z-index:2 }.pt-den { right:2% }.pt-fence { left:1% }.pt-den .pt-icon,.pt-fence .pt-icon { width:65px;height:65px }.pt-fighters { position:absolute;left:13%;bottom:8px;z-index:3;display:flex;gap:4px }.pt-animal { position:absolute;z-index:2;will-change:left;transition:none }.pt-omen { filter:drop-shadow(0 0 7px var(--accent-gold)) }.pt-poof { transform:scale(1.5);opacity:0 }.pt-escape { opacity:0 }.pt-hud { display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:800 }.pt-multipliers { justify-content:center }.pt-multipliers>span { border:1px solid var(--border-soft);padding:5px 8px;border-radius:var(--r-sm) }.pt-multipliers>.pt-active { background:var(--accent-gold);color:var(--bg-panel-raised) }.pt-result { text-align:center;justify-items:center }.pt-unlock { color:var(--success)!important;font-weight:800 }
@media(max-width:700px) { .pt-screen { padding:12px;gap:14px }.pt-layout,.pt-stations { grid-template-columns:1fr }.pt-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }.pt-habitats { grid-template-columns:repeat(2,minmax(0,1fr)) }.pt-feature { align-items:flex-start }.pt-hero { flex-wrap:wrap }.pt-hero small { width:100%;margin-left:40px }.pt-compare { gap:6px }.pt-compare>div { padding:8px }.pt-hud { font-size:var(--fs-xs) } }
@media(prefers-reduced-motion:reduce) { .pt-screen .spr-anim-4 { animation:none }.pt-btn,.pt-card,.pt-tab,.pt-stage,.pt-habitat { transition:none } }
.pt-fleck { position:absolute;left:50%;top:-8px;color:var(--accent-gold);font-weight:900 }

.pt-fossil-chip { white-space:nowrap }
.pt-fossil-label { margin-right:4px;font-size:var(--fs-2xs) }
.pt-first-confirm { display:grid;justify-items:center;gap:8px;text-align:center }
.pt-first-confirm p { max-width:34ch }
.pt-banner { height:auto;aspect-ratio:16 / 6 }
.pt-habitat { align-content:start }
.pt-habitat small { gap:4px;min-width:0;overflow-wrap:anywhere }
.pt-habitat small .pt-icon { flex:none }
.pt-arena { background-size:cover;background-position:center }
.pt-den,.pt-fence { top:50%;width:80px;height:80px;display:grid;place-items:center;transform:translateY(-50%) }
.pt-den { right:0 }
.pt-fence { left:0 }
.pt-den .pt-icon,.pt-fence .pt-icon { width:64px;height:64px;margin:0 }
.pt-fighters { left:80px;bottom:8px;gap:0 }
.pt-fighters .pt-hero-face { width:64px;height:64px }
.pt-animal { left:calc(100% - 100px);width:40px;height:40px;will-change:transform,opacity }
.pt-animal .pt-sprite { width:40px;height:40px }
.pt-animal.pt-omen { width:80px;height:80px;filter:drop-shadow(0 0 9px var(--accent-gold)) }
.pt-animal.pt-omen .pt-sprite { width:80px;height:80px }
.pt-fleck { pointer-events:none }
.pt-multiplier-block { display:grid;gap:6px;justify-items:center }
.pt-multiplier-block .pt-ladder { max-width:100% }
@media(max-width:700px) { .pt-fossil-label { display:none } }

/* Catch Pet replay: an animal whose strip is still loading must not show the
   global white "loading" box on top of the painted arena — it stays invisible
   and simply appears once its art lands (a few hundred ms). */
.pt-arena [data-art-state]:not(img) {
  background-color: transparent;
  outline: none;
  opacity: 0;
}

/* The ×1.0–×1.8 ladder is nine chips; in the narrow result card it overflowed
   into a 10px sideways scroll. Wrap instead — every step stays readable. */
.pt-ladder.pt-multipliers {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
}