/* ============================================
     MYSTVALE — Arena v0.3
     - Mouse movement (hold right-click to move)
     - Cursor aiming (facing follows mouse)
     - 1 / 2 / 3 / 4 / R abilities
     - Solo vs AI
     ============================================ */
  :root {
    --bg-deep:#0b0a10; --bg-stone:#1a1620; --bg-arena:#2a2028;
    --wall:#4a3a3a; --pillar:#3a2e30;
    --ember:#ff6a2c; --ember-soft:#ffb07a; --gold:#e8c572;
    --gold-lit:#f5d98a; --gold-tarnished:#c9922a;
    --codex-ink:#100e16;
    --steel:#b8c5d6; --crimson:#c4324a; --shadow:#6a2aa8;
    --holy:#f6e3a1; --text:#e8e4dc; --text-dim:#9a8f85;
    --ally:#5a9aee; --enemy:#e03252;

    /* Phase 3 P1 colorize (2026-05-09): DESIGN.md token aliases. The source
       names above stay (cascade-safe, used in 600+ rules); these aliases let
       DESIGN.md examples paste-work directly without renaming. Add new code
       using the DESIGN.md names; legacy code stays. */
    --divine-order-gold:           var(--gold);
    --divine-order-gold-lit:       var(--gold-lit);
    --divine-order-gold-tarnished: var(--gold-tarnished);
    --holy-lumen:                  var(--holy);
    --brazier-ember:               var(--ember);
    --ember-glow:                  var(--ember-soft);
    --vault-black:                 var(--bg-deep);
    --reliquary-stone:             var(--bg-stone);
    --arena-slate:                 var(--bg-arena);
    --battlement-stone:            var(--wall);
    --pillar-stone:                var(--pillar);
    --iron-covenant-steel:         var(--steel);
    --hollow-court-shadow:         var(--shadow);
    --abyssal-pact-crimson:        var(--crimson);
    --codex-parchment:             var(--text);
    --faded-ink:                   var(--text-dim);
    --ally-banner-blue:            var(--ally);
    --enemy-banner-red:            var(--enemy);

    /* Text-on-dark hierarchy (Tarnish-rule compliant; replaces raw rgba(255,255,255,…)
       at hot-path sites). Parchment-tinted so dark surfaces never get pure-white
       overlay. Apply at new sites; sweep old sites incrementally. */
    --text-on-dark-strong: rgba(232,228,220,0.95);
    --text-on-dark:        rgba(232,228,220,0.85);
    --text-on-dark-soft:   rgba(232,228,220,0.55);
    --text-on-dark-faint:  rgba(232,228,220,0.35);

    --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --fs-micro: 0.72rem;  /* gameplay-critical floor (Phase 3 P0, 2026-05-09 — WCAG 1.4.4 ergonomic minimum) */
    --fs-xs: 0.7rem;  --fs-sm: 0.82rem; --fs-md: 0.95rem;
    --fs-lg: 1.15rem; --fs-xl: 1.5rem;  --fs-2xl: 2rem;
    --fs-3xl: 2.6rem; --fs-hero: 3.2rem;
    --ls-tight: 0.04em; --ls-normal: 0.08em; --ls-wide: 0.18em; --ls-wider: 0.28em;
    --lh-tight: 1.15; --lh-normal: 1.45; --lh-relaxed: 1.6;

    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px;

    --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

    --sh-sm:       0 1px 4px rgba(0,0,0,0.35);
    --sh-md:       0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    --sh-lg:       0 10px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.05);
    --sh-glow-gold:     0 0 24px rgba(232,197,114,0.38);
    --sh-glow-gold-hi:  0 0 36px rgba(232,197,114,0.55);
    --sh-glow-ember:    0 0 26px rgba(255,106,44,0.45);

    --dur-fast:   0.14s;
    --dur-normal: 0.22s;
    --dur-slow:   0.38s;
    --ease-out:   cubic-bezier(0.2, 0.65, 0.25, 1);

    --focus-ring: 0 0 0 2px rgba(232,197,114,0.6), 0 0 0 4px rgba(11,10,16,0.95);
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body {
    background: radial-gradient(ellipse at center, #1c1526 0%, #0b0a10 100%);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start; padding:4px 0 0; overflow:hidden;
    touch-action: none;
  }
  /* Subtle grain texture over the entire page */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 280px 280px;
  }
  body.touch-mode {
    padding: 0;
    justify-content: flex-start;
    align-items: center;
  }
  h1, h2, h3, .screen-title, .logo-title, .big-btn-title, .mode-card-title, .profile-section-title, .mp-panel-title {
    font-family: var(--font-display);
    font-weight: 600;
  }
  h1 {
    font-size: var(--fs-3xl); letter-spacing: var(--ls-wider); text-transform: uppercase;
    color: var(--gold); text-shadow: 0 0 20px rgba(232,197,114,0.3);
    margin-bottom: var(--s-1); font-weight: 600;
    line-height: var(--lh-tight);
  }
  .subtitle {
    color: var(--text-dim); font-style: italic; letter-spacing: var(--ls-normal);
    margin-bottom: var(--s-5); font-size: var(--fs-sm);
  }
  :focus { outline: none; }
  :focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--r-sm); }

  /* ===== Ambient embers (menu atmosphere) ===== */
  #ambient-embers {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  body:has(#arena-wrap.playing) #ambient-embers { display: none; }
  @media (prefers-reduced-motion: reduce) { #ambient-embers { display: none; } }
  .ember {
    position: absolute;
    bottom: -20px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,120,0.9) 0%, rgba(232,140,60,0.55) 45%, transparent 75%);
    box-shadow: 0 0 6px rgba(255,180,90,0.55);
    opacity: 0;
    will-change: transform, opacity;
    animation: ember-rise linear infinite;
  }
  .ember.s2 { width: 2px; height: 2px; box-shadow: 0 0 5px rgba(255,180,90,0.4); }
  .ember.s4 { width: 4px; height: 4px; box-shadow: 0 0 10px rgba(255,180,90,0.65); }
  @keyframes ember-rise {
    0%   { transform: translate3d(0, 0, 0)            scale(0.8); opacity: 0; }
    8%   { opacity: 0.85; }
    50%  { transform: translate3d(20px, -50vh, 0)     scale(1);   opacity: 0.7; }
    90%  { opacity: 0.55; }
    100% { transform: translate3d(-30px, -110vh, 0)   scale(0.4); opacity: 0; }
  }

  /* ===== Cinematic screen transitions =====
     Phase 3 P0 distill (2026-05-09): merged with the duplicate definition
     that previously lived later in the file. Single source of truth, with
     the polished filter-blur version that the duplicate defined last. */
  .menu-screen.active {
    animation: screen-enter var(--dur-normal) var(--ease-out);
  }
  @keyframes screen-enter {
    from { opacity: 0; transform: translateY(10px); filter: blur(1px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
  }

  /* ===== Match end — Victory / Defeat dramatic reveal ===== */
  #screen-match-end { position: relative; }
  #match-end-title { letter-spacing: 0.18em; }
  .me-letter {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity, filter;
    animation-fill-mode: forwards;
    animation-duration: 0.55s;
    animation-timing-function: var(--ease-out);
  }
  #screen-match-end.me-won  #match-end-title { color: var(--gold); }
  #screen-match-end.me-won  .me-letter {
    text-shadow: 0 0 18px rgba(232,197,114,0.7), 0 0 36px rgba(232,197,114,0.45);
    animation-name: me-letter-victory;
  }
  #screen-match-end.me-lost #match-end-title { color: #d04040; }
  #screen-match-end.me-lost .me-letter {
    text-shadow: 0 0 14px rgba(196,50,74,0.55);
    animation-name: me-letter-defeat;
  }
  @keyframes me-letter-victory {
    0%   { opacity: 0; transform: translateY(22px) scale(0.7);  filter: brightness(2.6); }
    55%  { opacity: 1; transform: translateY(-3px) scale(1.18); filter: brightness(1.55); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    filter: brightness(1); }
  }
  @keyframes me-letter-defeat {
    0%   { opacity: 0; transform: translateY(-10px) scale(1.08); filter: blur(6px); }
    35%  { opacity: 0.45; }
    60%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    68%  { opacity: 0.55; }
    100% { opacity: 1; }
  }
  #screen-match-end.me-won::before {
    content: '';
    position: absolute;
    top: 14%; left: 50%;
    width: 600px; height: 600px;
    transform: translate3d(-50%, -50%, 0) scale(0);
    background: radial-gradient(circle, rgba(232,197,114,0.35) 0%, rgba(232,197,114,0.10) 32%, transparent 60%);
    pointer-events: none;
    animation: me-burst 1.5s ease-out forwards;
    z-index: 0;
  }
  #screen-match-end.me-won > * { position: relative; z-index: 1; }
  @keyframes me-burst {
    0%   { transform: translate3d(-50%, -50%, 0) scale(0);    opacity: 1; }
    60%  { opacity: 0.65; }
    100% { transform: translate3d(-50%, -50%, 0) scale(1.5);  opacity: 0; }
  }

  /* ===== Queue atmosphere — when matchmaking ===== */
  body.queueing #overlay::before {
    background: radial-gradient(ellipse at center, transparent 22%, rgba(0,0,0,0.72) 100%);
    transition: background var(--dur-slow) ease;
  }
  body.queueing .ember {
    animation-duration: 5.5s !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .me-letter { animation: none !important; opacity: 1 !important; }
    #screen-match-end.me-won::before { animation: none; display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-screen.active { animation: none; }
    .logo-title { animation: none; }
    .logo-title::before { animation: none; display: none; }
  }

  /* ===== Game Frame (wraps hud + arena + self-hud) ===== */
  #game-frame {
    position: absolute;
    top: 0; left: 0;
    display:flex; flex-direction:column; align-items:stretch;
    width:1100px;
    box-shadow:0 0 60px rgba(0,0,0,0.8), 0 0 0 1px var(--pillar);
    flex-shrink: 0;
    will-change: transform;
  }

  #hud {
    display:grid; grid-template-columns: 1fr 160px 1fr;
    width:100%; gap:0;
    background:linear-gradient(180deg, rgba(28,20,34,0.98) 0%, rgba(14,11,20,0.98) 55%, rgba(8,6,14,0.99) 100%);
    border:2px solid rgba(80,55,65,0.9);
    border-bottom:1px solid rgba(58,46,48,0.5);
    box-shadow: 0 3px 14px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .team-panel {
    background:transparent;
    padding:10px 14px;
    display:flex; flex-direction:column; gap:4px;
    min-width:0;
  }
  /* Phase 3 P0 distill follow-up (2026-05-09): team-color side-stripes
     replaced with stronger inset directional glow + a leading
     background-gradient that fades from the team color. Preserves team
     identity without the AI-slop 4px stripe. The inner panel border
     (right side on the ally panel) stays as a separator. */
  .team-panel:nth-child(1) {
    border-right:1px solid rgba(58,46,48,0.5);
    background:linear-gradient(90deg, rgba(90,154,238,0.10), transparent 32%);
    box-shadow:inset 6px 0 22px rgba(90,154,238,0.18);
  }
  .team-panel:nth-child(3) {
    background:linear-gradient(90deg, rgba(224,50,82,0.10), transparent 32%);
    box-shadow:inset 6px 0 22px rgba(224,50,82,0.18);
  }

  .team-hdr {
    display:flex; align-items:baseline;
    justify-content:space-between; margin-bottom:2px;
  }

  .team-label {
    font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase;
    font-weight:bold;
  }
  .team-label.blue { color:#7fb8ff; }
  .team-label.red  { color:#ff7a7a; }
  /* Shape glyphs alongside color so red/green-blind players have a non-color
     team signal. Filled diamond = allies, cross = enemies. Universal unicode. */
  .team-label.blue::before { content:'\25C6\00A0'; opacity:0.95; font-size:0.85em; }
  .team-label.red::before  { content:'\2715\00A0'; opacity:0.95; font-size:0.85em; font-weight:900; }

  .team-score {
    font-size:1.9rem; font-weight:700; color:var(--gold);
    font-family: var(--font-display);
    text-shadow:0 0 14px rgba(232,197,114,0.6), 0 0 28px rgba(232,197,114,0.25);
    line-height:1; display:inline-block;
  }
  /* Phase 3 polish (2026-05-09): the canonical scoreBump @keyframes lives
     later in the file (~line 5765) with the polished filter+brightness pop;
     the inline copy that previously sat here was dead code (last-wins
     cascade). Just the rule that uses it remains. */
  .team-score.score-bump { animation: scoreBump 0.42s ease-out; }

  .team-hp-list {
    display:flex; flex-direction:column; gap:3px;
  }
  .team-hp-row {
    display:flex; align-items:center; gap:8px;
    font-size:0.68rem; color:var(--text-dim);
  }
  .team-hp-row.you { color:var(--gold); }
  .team-hp-row.dead { opacity:0.4; }
  .team-hp-row .name { flex-shrink:0; min-width:80px; letter-spacing:0.08em; }
  .team-hp-row .mini-bar {
    flex:1; height:11px; background:#0a0508; border:1px solid var(--pillar);
    position:relative; overflow:hidden;
    border-radius: 4px;
  }
  /* Phase 3 P1 optimize (2026-05-09): width-based animation → transform: scaleX
     so per-frame HP changes don't trigger layout. JS sets `style.transform =
     scaleX(pct/100)` instead of `style.width = pct + '%'`. The container
     (.team-hp-row > .mini-hp parent) has overflow:hidden so scaleX from the
     left origin reads as a fill animation. width:100% baseline keeps the bar
     full-DOM-width; transform-origin:left makes scaleX shrink toward the
     right. */
  .team-hp-row .mini-hp {
    height:100%; width:100%;
    background:linear-gradient(90deg, #8a1a28, #d02840, #e83a58);
    transform-origin: left;
    transform: scaleX(1);
    transition: transform 0.15s ease-out;
    box-shadow:0 0 6px rgba(196,50,74,0.5);
    border-radius: 3px;
  }
  .team-hp-row.ally .mini-hp { background:linear-gradient(90deg, #1a5a9a, #5ab8f4); box-shadow:0 0 6px rgba(90,184,244,0.55); border-radius: 3px; }

  .round-indicator {
    padding:8px 4px; text-align:center;
    align-self:stretch; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px;
    border-left:1px solid rgba(80,55,65,0.6);
    border-right:1px solid rgba(80,55,65,0.6);
    background: rgba(0,0,0,0.15);
  }
  .ri-round {
    font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--gold); white-space:nowrap; font-weight:bold; line-height:1;
  }
  .ri-pips { display:flex; gap:4px; }
  .ri-pip { width:16px; height:8px; background:#0e0810; border:1px solid rgba(58,46,48,0.7); border-radius: 3px; }
  .ri-pip.blue { background:#3a7abf; border-color:#6aacee; box-shadow:0 0 10px rgba(90,172,238,0.90); border-radius: 3px; animation: pipGlowBlue 2.4s ease-in-out infinite; }
  .ri-pip.red  { background:#b02240; border-color:#e03252; box-shadow:0 0 10px rgba(224,50,82,0.90); border-radius: 3px; animation: pipGlowRed  2.4s ease-in-out infinite; }

  /* Phase 3 P0 distill follow-up (2026-05-09): #self-hud's 6px gold
     side-stripe replaced with a thin gold-tinted full border. The
     existing inset gold glow already carries the directional accent;
     the override block later in this file beefs it up further. */
  #self-hud {
    width:100%; margin-top:0;
    background:linear-gradient(180deg, rgba(26,18,32,0.98) 0%, rgba(12,9,18,0.98) 60%, rgba(7,5,12,0.99) 100%);
    border:1px solid rgba(232,197,114,0.45); border-top:1px solid rgba(58,46,48,0.5);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.6), inset 6px 0 18px rgba(232,197,114,0.06);
    padding:10px 18px 10px;
    display:grid;
    grid-template-columns: 160px 1fr auto;
    grid-template-rows: auto auto;
    column-gap:14px; row-gap:0;
    align-items:center;
  }
  .self-name {
    font-size:0.9rem; letter-spacing:0.15em; text-transform:uppercase;
    color:var(--gold); font-weight:bold;
  }
  .self-bars { display:flex; flex-direction:column; gap:4px; }
  /* Phase 3 P0 distill follow-up (2026-05-09): p1/p2 side-stripes
     replaced with team-tinted full borders + leading gradient tint.
     Steel + crimson identity preserved. */
  .player-panel {
    flex:1; background:linear-gradient(180deg, rgba(26,22,32,0.9), rgba(11,10,16,0.9));
    border:2px solid var(--pillar); padding:12px 16px; position:relative;
  }
  .player-panel.p1 {
    border-color: rgba(184,197,214,0.55);
    background: linear-gradient(90deg, rgba(184,197,214,0.10), rgba(26,22,32,0.9) 32%, rgba(11,10,16,0.9));
  }
  .player-panel.p2 {
    border-color: rgba(196,50,74,0.55);
    background: linear-gradient(90deg, rgba(196,50,74,0.10), rgba(26,22,32,0.9) 32%, rgba(11,10,16,0.9));
  }
  .player-name {
    font-size:0.9rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); margin-bottom:2px;
  }
  .player-class {
    font-size:0.75rem; color:var(--text-dim);
    font-style:italic; margin-bottom:8px;
  }
  .bar {
    height:20px;
    background: linear-gradient(90deg,
      #0a0508 0, #0a0508 24.4%, rgba(58,46,48,0.55) 24.4%, rgba(58,46,48,0.55) 25.6%, #0a0508 25.6%,
      #0a0508 49.4%, rgba(58,46,48,0.55) 49.4%, rgba(58,46,48,0.55) 50.6%, #0a0508 50.6%,
      #0a0508 74.4%, rgba(58,46,48,0.55) 74.4%, rgba(58,46,48,0.55) 75.6%, #0a0508 75.6%);
    border:1px solid var(--pillar);
    position:relative; margin-bottom:5px; overflow:hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.3);
    border-radius: 5px;
  }
  .bar-fill { height:100%; transition:width 0.15s ease-out; border-radius: 4px; }
  .hp-fill { background:linear-gradient(90deg, #6a0a18, #d02840, #f04060); box-shadow:0 0 10px rgba(208,40,64,0.45); }
  @keyframes hpDamageFlash {
    0% { filter: brightness(2.5) saturate(0.5); }
    100% { filter: brightness(1) saturate(1); }
  }
  .hp-fill.damaged { animation: hpDamageFlash 0.35s ease-out; }
  .ult-fill { background:linear-gradient(90deg, var(--ember), var(--gold)); box-shadow:0 0 14px rgba(255,106,44,0.65); }
  .rage-fill { background:linear-gradient(90deg, #6a1a08, var(--ember)); box-shadow:0 0 10px rgba(255,106,44,0.5); }
  .bar.small { height:8px; margin-bottom:4px; }
  .bar-label {
    position:absolute; top:0; left:8px;
    font-size:0.68rem; line-height:20px;
    color:var(--text); text-shadow:1px 1px 0 #000; letter-spacing:0.1em;
  }
  .bar-num {
    position:absolute; top:0; right:8px;
    font-size:0.65rem; line-height:20px;
    color:rgba(255,255,255,0.8); text-shadow:1px 1px 0 #000; letter-spacing:0.04em;
    font-weight:bold; pointer-events:none;
  }

  .cooldowns { display:flex; gap:6px; margin-top:5px; }
  .cd-slot {
    flex:1; height:58px; background:linear-gradient(180deg, #150c14, #080508);
    border:1px solid var(--pillar);
    position:relative; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-size:0.65rem; letter-spacing:0.1em;
    color:var(--text-dim); overflow:hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.4);
  }
  .cd-slot .key { font-size:0.9rem; color:var(--gold); font-weight:bold; }
  .cd-slot .name { font-size:0.6rem; margin-top:2px; letter-spacing:0.05em; }
  .cd-overlay {
    position:absolute; left:0; bottom:0; width:100%;
    background:rgba(0,0,0,0.75); pointer-events:none;
  }
  .cd-timer {
    position:absolute; bottom:5px; left:0; right:0; text-align:center;
    font-size:0.82rem; font-weight:bold; color:rgba(255,255,255,0.92);
    letter-spacing:0.02em; pointer-events:none; z-index:3; display:none;
    text-shadow:0 1px 4px #000, 0 0 6px rgba(0,0,0,0.9);
  }
  .cd-slot.cooling .cd-timer { display:block; }
  .cd-slot.ready { color:var(--ember-soft); border-color:var(--ember); animation:cdReadyPulse 1.8s ease-in-out infinite; }
  .cd-slot.ult-ready { color:var(--gold); border-color:var(--gold); animation:ultReadyPulse 1.2s ease-in-out infinite; }

  #kill-feed {
    position:absolute; top:8px; right:8px;
    display:flex; flex-direction:column; gap:3px;
    pointer-events:none; z-index:10; max-width:240px;
  }
  /* Phase 3 P0 distill (2026-05-09): side-stripe replaced with full 1px
     border so the kill/death color encoding stays without violating the
     DESIGN.md "Never use side-stripe borders" rule. */
  .kf-entry {
    background:rgba(8,5,14,0.82); border:1px solid rgba(255,255,255,0.18);
    padding:5px 10px 4px; font-size:0.70rem; color:rgba(255,255,255,0.85);
    font-family:inherit; letter-spacing:0.05em;
    animation: kfSlideIn 0.32s cubic-bezier(0.2,0.65,0.25,1), kfFade 4.2s forwards; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
    border-radius:4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .kf-entry .kf-line { display:flex; align-items:center; gap:5px; }
  .kf-entry .kf-name  { font-weight:700; }
  .kf-entry .kf-cls   { font-size:var(--fs-micro); opacity:0.65; letter-spacing:0.08em; text-transform:uppercase; font-weight:400; }
  .kf-entry .kf-sword { opacity:0.7; font-size:0.78rem; color:#e8c572; }
  .kf-entry.you-kill { border-color:rgba(112,208,112,0.65); color:rgba(255,255,255,0.97); box-shadow:0 2px 12px rgba(0,0,0,0.7),0 0 10px rgba(112,208,112,0.20); }
  .kf-entry.you-died { border-color:rgba(208,96,96,0.65); color:rgba(255,255,255,0.97); box-shadow:0 2px 12px rgba(0,0,0,0.7),0 0 10px rgba(208,96,96,0.20); }
  @keyframes kfFade { 0%,60%{opacity:1} 100%{opacity:0} }
  #mp-ping {
    font-size:0.62rem; text-align:center; margin-top:2px;
    color:rgba(255,255,255,0.35); display:none;
  }
  #mp-ping.good { color:#70d070; }
  #mp-ping.ok   { color:#e8c572; }
  #mp-ping.bad  { color:#d06060; }

  #arena-wrap {
    position:relative;
    border-left:2px solid rgba(80,55,65,0.9);
    border-right:2px solid rgba(80,55,65,0.9);
    border-top:none; border-bottom:none;
    box-shadow:inset 0 0 100px rgba(0,0,0,0.5), inset 0 0 200px rgba(0,0,0,0.2);
    transition:transform 0.05s;
  }
  canvas { display:block; background:var(--bg-arena); image-rendering:pixelated; cursor:crosshair; touch-action:none; }
  #arena-wrap.playing canvas { cursor: none; }
  #glow-canvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(2px);
    opacity: 0.92;
    background: transparent;
    cursor: none;
  }

  #overlay {
    position:fixed; inset:0;
    background: radial-gradient(ellipse at 35% 0%, rgba(34,18,52,0.99) 0%, #0e0c18 40%, #07060e 100%);
    display:none; align-items:center; justify-content:flex-start;
    z-index:100;
    overflow-y:auto; padding:40px 20px;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    flex-direction:column;
  }
  #overlay.show { display:flex; opacity: 1; }

  #menu-bg-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
  }

  /* Vignette overlay on the menu bg */
  #overlay::before {
    content: '';
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* ===== Menu Screens =====
     Phase 3 P0 distill (2026-05-09): the duplicate `screenFadeIn` animation
     was racing with `screen-enter` (defined on .menu-screen.active above).
     Both fired on every screen swap. Removed `screenFadeIn` here; the
     design-token `screen-enter var(--dur-normal) var(--ease-out)` on the
     .active selector is the single source of truth now. */
  .menu-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
    width: 100%;
    padding: 20px;
  }
  .menu-screen.active { display: flex; }

  .screen-title {
    font-size: 1.75rem;
    letter-spacing: 0.28em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(232,197,114,0.48), 0 0 48px rgba(232,197,114,0.18);
    position: relative;
    padding: 0 120px;
    display: inline-block;
  }
  .screen-title::before, .screen-title::after {
    content: '';
    position: absolute;
    top: 50%; height: 1px; width: 100px;
  }
  .screen-title::before { right: 0; background: linear-gradient(to right, transparent, rgba(232,197,114,0.72)); }
  .screen-title::after  { left:  0; background: linear-gradient(to left,  transparent, rgba(232,197,114,0.72)); }

  /* ===== Home Screen ===== */
  .logo-wrap {
    text-align: center;
    margin-bottom: 44px;
    position: relative;
    padding: 20px 60px;
  }
  .logo-wrap::before, .logo-wrap::after {
    content: '';
    position: absolute;
    height: 1px;
    top: 50%;
    width: 60px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
  }
  .logo-wrap::before { left: -20px; }
  .logo-wrap::after { right: -20px; transform: scaleX(-1); }
  .logo-title {
    font-size: clamp(2.6rem, 4vh, 4.2rem);
    letter-spacing: 0.5em;
    font-weight: 700;
    margin: 0;
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(180deg, #fff4cc 0%, #D4AF37 50%, #c09428 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.75)) drop-shadow(0 0 28px rgba(212,175,55,0.4));
    animation: logo-breathe 5.5s ease-in-out infinite;
  }
  .logo-title::after {
    content: '';
    display: block;
    width: 140px;
    height: 1px;
    margin: 10px auto 0;
    background: linear-gradient(to right, transparent, rgba(212,175,55,0.5), transparent);
  }
  .logo-sigil {
    display: block;
    height: clamp(130px, 14vh, 210px);
    width: auto;
    margin: 0 auto 6px;
    animation: logo-breathe 5.5s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(232,197,114,0.60));
  }
  #screen-home .logo-wrap  { margin-top: 6vh; }
  #screen-home .logo-sigil { height: clamp(200px, 28vh, 420px); }
  #screen-home .logo-title { font-size: clamp(3rem, 5vh, 5.5rem); }
  #screen-login .logo-sigil { height: clamp(150px, 20vh, 300px); }
  #screen-login .logo-title { font-size: clamp(2.8rem, 5vh, 5rem); }
  @keyframes logo-breathe {
    0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 18px rgba(232,197,114,0.40)); }
    50%      { transform: scale(1.014); filter: drop-shadow(0 0 28px rgba(255,210,140,0.62)); }
  }
  .logo-title::before {
    content: '';
    position: absolute;
    top: 0; left: -30%;
    width: 30%; height: 100%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,235,180,0.22) 50%, transparent 70%);
    pointer-events: none;
    animation: logo-shimmer 9s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  @keyframes logo-shimmer {
    0%, 60%, 100% { transform: translateX(0);    opacity: 0; }
    65%           { opacity: 1; }
    95%           { transform: translateX(450%); opacity: 0; }
  }
  .logo-sub {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: rgba(212,175,55,0.72);
    font-style: italic;
    margin-top: 8px;
  }

  .home-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(560px, 92%);
    margin: 0 auto;
  }
  .big-btn {
    background: linear-gradient(180deg, rgba(60,40,20,0.55), rgba(20,10,5,0.85));
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 20px 60px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.22s, background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s, opacity 0.22s, filter 0.22s;
    text-align: center;
    min-width: 260px;
    box-shadow: 0 0 28px rgba(232,197,114,0.22), 0 3px 18px rgba(0,0,0,0.5);
    border-radius: 10px;
    position: relative; overflow: hidden;
  }
  .big-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.07) 50%, transparent 62%);
    transform: translateX(-100%); transition: transform 0.55s;
    pointer-events: none;
  }
  .big-btn:hover::after { transform: translateX(100%); }
  .big-btn:hover {
    background: linear-gradient(180deg, rgba(110,78,32,0.70), rgba(50,25,10,0.97));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 36px rgba(232,197,114,0.40), 0 0 0 1px rgba(240,216,130,0.5);
  }
  .big-btn:active { transform: translateY(0) scale(1); transition: transform 0.09s, background 0.09s, box-shadow 0.09s, border-color 0.09s, color 0.09s, opacity 0.09s, filter 0.09s; }
  .big-btn-title {
    font-size: 1.45rem; letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
  }
  .big-btn-sub {
    font-size: 0.74rem; letter-spacing: 0.16em;
    color: var(--ember-soft); font-style: italic;
    white-space: nowrap;
  }
  .side-btn {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--pillar);
    color: var(--text);
    padding: 10px 28px;
    font-family: inherit; font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
    min-width: 200px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .side-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(232,197,114,0.07);
    box-shadow: 0 0 14px rgba(232,197,114,0.18);
    transform: translateY(-1px);
  }
  .side-btn.muted { opacity: 0.62; font-size: 0.78rem; }
  .side-btn.muted:hover { opacity: 1; }

  .side-btn-notif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
  }
  .home-notif-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ff4a4a;
    box-shadow: 0 0 10px rgba(255,74,74,0.85), 0 0 2px rgba(255,255,255,0.6) inset;
    animation: notifPulse 1.6s ease-in-out infinite;
  }
  @keyframes notifPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.75; }
  }

  .home-play-btn {
    width: 100%;
    padding: 24px 0;
  }
  .home-play-btn .big-btn-title { font-size: 1.7rem; }

  /* ===== Home Action Grid (tier 2 — primary navigation) ===== */
  .home-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  .home-action-btn {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--text);
    padding: 18px 12px 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
    position: relative;
    overflow: hidden;
  }
  .home-action-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.05) 50%, transparent 62%);
    transform: translateX(-100%); transition: transform 0.55s;
    pointer-events: none;
  }
  .home-action-btn:hover::after { transform: translateX(100%); }
  .home-action-btn:hover {
    border-color: rgba(232,197,114,0.45);
    background: rgba(232,197,114,0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 22px rgba(232,197,114,0.12);
  }
  .home-action-btn:active { transform: translateY(0); transition: transform 0.09s, background 0.09s, box-shadow 0.09s, border-color 0.09s, color 0.09s, opacity 0.09s, filter 0.09s; }
  .home-action-btn .home-notif-dot {
    position: absolute;
    top: 8px; right: 8px;
  }
  .home-action-icon {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.80;
    display: block;
  }
  .home-action-label {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* ===== Home Utility Row (tier 3 — settings / report / etc.) ===== */
  .home-utility-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 2px;
  }
  .home-util-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.36);
    font-family: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 5px 9px;
    transition: color 0.18s;
    border-radius: 4px;
    position: relative;
  }
  .home-util-btn:hover { color: rgba(255,255,255,0.72); }
  .home-util-btn .home-notif-dot {
    position: absolute;
    top: 3px; right: 3px;
    width: 7px; height: 7px;
  }
  .home-util-sep {
    color: rgba(255,255,255,0.16);
    font-size: 0.62rem;
    user-select: none;
    pointer-events: none;
  }

  /* ===== Home Player Card ===== */
  .home-player-card {
    width: min(560px, 92%);
    margin: 4px auto 2px;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(38,30,22,0.72), rgba(18,14,10,0.85));
    border: 1px solid rgba(232,197,114,0.28);
    border-radius: 10px;
    box-shadow: 0 0 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hpc-head {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .hpc-portrait-wrap {
    flex-shrink: 0;
    width: 56px; height: 64px;
    background: radial-gradient(ellipse at center, rgba(232,197,114,0.10) 0%, rgba(11,10,16,0.35) 75%);
    border: 1px solid rgba(232,197,114,0.22);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 16px rgba(232,197,114,0.08), 0 2px 6px rgba(0,0,0,0.45);
    overflow: hidden;
  }
  .hpc-portrait {
    display: block;
    image-rendering: pixelated;
    animation: hpc-portrait-bob 3.4s ease-in-out infinite;
  }
  @keyframes hpc-portrait-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
  }
  @media (prefers-reduced-motion: reduce) { .hpc-portrait { animation: none; } }
  .hpc-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hpc-greeting {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .hpc-rank-wrap { margin-top: 2px; }
  .hpc-name {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(220px, 60%, 340px);
  }
  .hpc-rank-wrap .rank-badge {
    transform: scale(0.88);
    transform-origin: left center;
  }
  .hpc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }
  .hpc-gold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(180deg, rgba(232,197,114,0.10), rgba(232,197,114,0.04));
    border: 1px solid rgba(232,197,114,0.32);
    color: var(--gold);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    border-radius: var(--r-full);
    box-shadow: 0 1px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    white-space: nowrap;
  }
  .hpc-gold-icon { font-size: 0.95rem; line-height: 1; }
  .hpc-streak {
    color: #ff8a3a;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    text-shadow: 0 0 10px rgba(255,138,58,0.55);
    white-space: nowrap;
  }
  /* Friends-online chip in the home card meta column. Hidden when the slot is
     empty (no friends online) so the meta row stays clean. */
  .hpc-friends-slot:empty { display: none; }
  .hpc-friends-online {
    appearance: none;
    border: 1px solid rgba(127, 200, 127, 0.45);
    background: rgba(127, 200, 127, 0.12);
    color: #b8eab8;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
  }
  .hpc-friends-online:hover {
    background: rgba(127, 200, 127, 0.22);
    border-color: rgba(127, 200, 127, 0.7);
    transform: translateY(-1px);
  }
  .hpc-friends-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #7fc87f;
    box-shadow: 0 0 8px rgba(127, 200, 127, 0.85);
    animation: hpc-friends-pulse 2.4s ease-in-out infinite;
  }
  @keyframes hpc-friends-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(127, 200, 127, 0.6); }
    50%      { box-shadow: 0 0 12px rgba(127, 200, 127, 1); }
  }
  .hpc-bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hpc-bar-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .hpc-label { color: var(--ember-soft); font-weight: 600; }
  .hpc-sub   { color: rgba(255,255,255,0.55); }
  .hpc-bar {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .hpc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(232,197,114,0.6), rgba(240,216,130,0.95));
    box-shadow: 0 0 10px rgba(232,197,114,0.45);
    border-radius: 999px;
    transition: width 0.4s ease;
  }
  .hpc-bar-fill.hpc-bar-xp {
    background: linear-gradient(90deg, rgba(232,197,114,0.5), rgba(255,220,140,1));
  }
  .hpc-last-match {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.07);
  }
  .hpc-won  { color: #7fd88a; font-weight: 700; }
  .hpc-lost { color: #e26767; font-weight: 700; }
  .hpc-ago  { color: rgba(255,255,255,0.4); font-style: italic; }

  .hpc-guest {
    text-align: center;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .hpc-guest-title {
    font-size: 0.95rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .hpc-guest-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
    max-width: 400px;
    line-height: 1.5;
  }

  /* ===== Home Daily Strip ===== */
  .home-daily-strip {
    width: min(560px, 92%);
    margin: 0 auto 4px;
    padding: 10px 14px 12px;
    background: linear-gradient(180deg, rgba(30,25,22,0.55), rgba(15,12,10,0.72));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .home-daily-strip:empty { display: none; }
  .hds-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .hds-title { color: var(--ember-soft); font-weight: 700; }
  .hds-see-all {
    background: none; border: none;
    color: rgba(255,255,255,0.55);
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.18s;
  }
  .hds-see-all:hover { color: var(--gold); }
  .hds-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .hds-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.76rem;
  }
  .hds-desc {
    flex: 1;
    min-width: 0;
    color: rgba(255,255,255,0.78);
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .hds-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .hds-bar {
    width: 90px; height: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .hds-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(232,197,114,0.6), rgba(240,216,130,0.95));
    box-shadow: 0 0 6px rgba(232,197,114,0.5);
  }
  .hds-prog {
    min-width: 48px;
    text-align: right;
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  .hds-item.done .hds-desc { color: #7fd88a; }
  .hds-item.done .hds-fill { background: linear-gradient(90deg, #5fae6f, #9ee8a6); box-shadow: 0 0 8px rgba(127,216,138,0.55); }
  .hds-item.claimed { opacity: 0.55; }
  .hds-item.claimed .hds-desc::after {
    content: ' ✓';
    color: #7fd88a;
    font-weight: 700;
  }

  /* ===== Play Hub grid ===== */
  .play-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 14px 0 24px;
    width: 100%;
    max-width: 760px;
  }
  .play-hub-grid .big-btn { min-width: 0; padding: 22px 28px; }
  .play-hub-grid .big-btn-title {
    /* Scales smoothly between mobile + 760px-grid widths so multi-word titles
       like "Play with Friend" don't wrap to 3 lines at the 1024px breakpoint. */
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    letter-spacing: clamp(0.08em, 0.5vw, 0.13em);
    white-space: normal;
    line-height: 1.15;
  }
  .play-hub-grid .big-btn-sub { white-space: normal; line-height: 1.35; }
  @media (max-width: 720px) { .play-hub-grid { grid-template-columns: 1fr; max-width: 360px; } }

  /* ===== Profile nav row ===== */
  .profile-nav-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
  }
  .profile-nav-row .side-btn { min-width: 150px; padding: 8px 20px; font-size: 0.78rem; }

  /* ===== Mode Select ===== */
  .mode-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
  }
  @media (max-width: 700px) { .mode-grid { grid-template-columns: repeat(2, 1fr); } }
  .mode-card {
    background: linear-gradient(180deg, rgba(30,24,38,0.92), rgba(11,10,16,0.92));
    border: 2px solid var(--pillar);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.22s, background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s, opacity 0.22s, filter 0.22s;
    position: relative; overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 16px rgba(0,0,0,0.45);
  }
  .mode-card::after { display: none; }
  .mode-card:hover {
    border-color: var(--ember);
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 14px 38px rgba(255,106,44,0.36), 0 0 0 1px rgba(255,106,44,0.28), 0 0 60px rgba(255,106,44,0.08);
    background: linear-gradient(180deg, rgba(55,30,18,0.95), rgba(18,10,6,0.98));
  }
  .mode-card.selected {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(55,45,25,0.65), rgba(18,13,8,0.97));
    box-shadow: 0 0 26px rgba(232,197,114,0.35), 0 4px 18px rgba(0,0,0,0.5);
  }
  .mode-card-size {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  .mode-card-title {
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ember-soft);
    margin-bottom: 10px;
  }
  .mode-card-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.4;
  }

  /* ===== Class Select ===== */
  .class-select-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    width: 100%;
    margin-bottom: 20px;
  }
  @media (max-width: 800px) {
    .class-select-layout { grid-template-columns: 1fr; }
  }

  .class-portrait-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .class-portrait {
    background: linear-gradient(180deg, rgba(30,24,38,0.92), rgba(11,10,16,0.92));
    border: 2px solid var(--pillar);
    cursor: pointer;
    transition: transform 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s, filter 0.18s;
    padding: 8px 6px 10px;
    text-align: center;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  .class-portrait:hover {
    border-color: var(--ember);
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(255,106,44,0.22);
  }
  .class-portrait.selected {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(60,50,30,0.55), rgba(20,15,10,0.85));
    box-shadow: 0 0 22px rgba(232,197,114,0.42);
  }
  .class-portrait canvas {
    display: block;
    margin: 0 auto 6px;
    image-rendering: pixelated;
  }
  .class-portrait-name {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
  }
  .class-portrait-faction {
    font-size: 0.6rem;
    color: var(--text-dim);
    font-style: italic;
  }
  .class-portrait-mastery {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.7); border: 1px solid var(--gold);
    color: var(--gold); font-size: 0.65rem;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
  }

  .class-detail {
    background: linear-gradient(180deg, rgba(30,24,38,0.92), rgba(11,10,16,0.92));
    border: 2px solid var(--pillar);
    padding: 18px;
    min-height: 360px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  .class-detail .cd-class-name {
    font-size: 1.3rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .class-detail .cd-faction {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-style: italic;
    margin-bottom: 12px;
  }
  .class-detail .cd-tagline {
    font-size: 0.85rem;
    color: var(--ember-soft);
    margin-bottom: 16px;
    font-style: italic;
  }
  .class-detail .cd-stats {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pillar);
  }
  .cd-stat { font-size: 0.78rem; }
  .cd-stat-label { color: var(--text-dim); margin-right: 4px; }
  .cd-stat-value { color: var(--text); font-weight: bold; }
  .class-detail .cd-abilities {
    display: flex; flex-direction: column; gap: 10px;
  }
  .cd-ab {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    font-size: 0.77rem;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 3px;
    align-items: start;
  }
  .cd-ab-key {
    background: #0a0508; border: 1px solid var(--pillar);
    padding: 4px 6px;
    font-size: 0.68rem; text-align: center;
    color: var(--gold); font-weight: bold;
    margin-top: 1px;
  }
  .cd-ab-info { line-height: 1.5; }
  .cd-ab-name { color: var(--gold); font-weight: bold; margin-bottom: 2px; }
  .cd-ab-desc { color: var(--text-dim); font-size: 0.72rem; }
  .class-detail .cd-mastery {
    padding-top: 10px;
    border-top: 1px solid var(--pillar);
  }
  .cd-mastery-label {
    font-size: 0.72rem;
    color: var(--text-dim); letter-spacing: 0.15em;
    text-transform: uppercase; margin-bottom: 4px;
  }
  .cd-mastery-bar {
    height: 6px; background: #0a0508; border: 1px solid var(--pillar);
    position: relative; overflow: hidden;
  }
  .cd-mastery-fill {
    height: 100%; background: linear-gradient(90deg, #3a5f7a, #7fb8ff);
    transition: width 0.3s;
  }

  .config-row {
    display: flex; flex-wrap: wrap; gap: 20px;
    justify-content: center; width: 100%; margin-bottom: 16px;
  }
  .config-group {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  .config-label {
    font-size: 0.75rem; letter-spacing: 0.2em;
    color: var(--text-dim); text-transform: uppercase;
  }
  #opp-class-wrap { margin-bottom: 16px; width: 100%; }
  .class-grid.compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .screen-actions {
    display: flex; gap: 16px; align-items: center; margin-top: 12px;
  }
  .btn.primary {
    background: linear-gradient(180deg, #ffe87c 0%, #e8c572 38%, #c8a230 100%);
    color: #0b0910;
    border-color: #f0d870;
    box-shadow: 0 0 28px rgba(232,197,114,0.52), 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.24);
    text-shadow: 0 1px 0 rgba(255,255,255,0.16);
    font-weight: 700;
  }
  .btn.primary:hover {
    background: linear-gradient(180deg, #ffec96 0%, #f0d455 38%, #d4a824 100%);
    color: #07060c;
    border-color: #f8e080;
    box-shadow: 0 0 44px rgba(232,197,114,0.76), 0 6px 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.28);
    transform: translateY(-3px) scale(1.012);
  }
  .back-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim); font-family: inherit;
    font-size: 0.82rem; letter-spacing: 0.15em;
    padding: 8px 18px; cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    border-radius: 6px;
  }
  .back-btn:hover {
    color: var(--gold);
    border-color: rgba(232,197,114,0.22);
    background: rgba(232,197,114,0.04);
  }

  /* ===== Profile / Mastery / Achievements ===== */
  .profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px; width: 100%;
    margin-bottom: 28px;
  }
  @media (max-width: 700px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }
  .profile-stat-card {
    background: linear-gradient(180deg, rgba(30,24,38,0.92), rgba(11,10,16,0.92));
    border: 2px solid var(--pillar);
    padding: 14px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.45);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
  }
  .profile-stat-value {
    font-size: 1.6rem; color: var(--gold); font-weight: bold;
    margin-bottom: 2px;
  }
  .profile-stat-label {
    font-size: 0.72rem; color: var(--text-dim);
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .profile-stat-sub {
    font-size: 0.62rem; color: var(--text-dim);
    letter-spacing: 0.08em; margin-top: 3px; opacity: 0.7;
  }

  .profile-section-title {
    font-size: 1rem; color: var(--ember-soft);
    letter-spacing: 0.2em; text-transform: uppercase;
    margin-bottom: 12px; align-self: flex-start;
  }
  .mastery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; width: 100%; margin-bottom: 24px;
  }
  @media (max-width: 700px) { .mastery-grid { grid-template-columns: 1fr; } }
  .mastery-row {
    background: rgba(26,22,32,0.7);
    border: 1px solid var(--pillar);
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    align-items: center;
  }
  .mastery-row canvas { image-rendering: pixelated; }
  .mastery-info { display: flex; flex-direction: column; gap: 4px; }
  .mastery-name {
    font-size: 0.82rem; color: var(--gold); font-weight: bold;
    letter-spacing: 0.1em;
  }
  .mastery-bar {
    height: 6px; background: #0a0508; border: 1px solid var(--pillar);
    position: relative; overflow: hidden;
  }
  .mastery-fill {
    height: 100%; background: linear-gradient(90deg, #3a5f7a, #7fb8ff);
  }
  .mastery-level {
    font-size: 1.1rem; color: var(--gold); font-weight: bold;
  }

  #screen-achievements {
    overflow-y: auto; padding-bottom: 20px;
  }
  .achievement-list {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; max-width: 680px; margin: 0 auto 24px;
  }
  .achievement-row {
    /* Phase 3 P0 distill (2026-05-09): redundant 4px border-left dropped;
       full 1px border already defines the row. */
    background: rgba(26,22,32,0.7);
    border: 1px solid var(--pillar);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    align-items: center;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
    border-radius: 8px;
  }
  .achievement-row:hover { background: rgba(30,25,38,0.85); transform: translateX(3px); }
  .achievement-row.earned {
    border-color: var(--gold);
    background: linear-gradient(90deg, rgba(60,45,20,0.35), rgba(26,22,32,0.75));
  }
  .achievement-icon {
    font-size: 1.6rem; text-align: center;
    opacity: 0.3;
  }
  .achievement-row.earned .achievement-icon { opacity: 1; }
  .achievement-name {
    font-weight: bold; color: var(--text);
    font-size: 0.9rem; margin-bottom: 2px;
  }
  .achievement-row.earned .achievement-name { color: var(--gold); }
  .achievement-desc {
    font-size: 0.72rem; color: var(--text-dim); font-style: italic;
  }
  .achievement-reward {
    font-size: 0.75rem; color: var(--ember-soft);
    font-weight: bold;
  }

  /* ===== Dodge HUD slot ===== */
  .dodge-cd-wrap {
    margin-left: 6px;
    border-color: rgba(180,180,255,0.4);
  }
  .dodge-cd-wrap.ready { border-color: rgba(180,180,255,0.9); }

  /* ===== Class lock overlay ===== */
  .class-portrait.locked,
  .coll-card.locked {
    opacity: 0.55;
    filter: grayscale(0.7);
  }
  .class-lock-badge {
    position: absolute; top: 4px; right: 4px;
    font-size: 1rem;
  }
  .class-portrait { position: relative; }
  .coll-locked-label {
    font-size: 0.68rem; color: #c4324a; font-style: italic;
  }

  /* ===== Unlock panel in collection detail ===== */
  .unlock-panel {
    background: rgba(196,50,74,0.1);
    border: 1px solid rgba(196,50,74,0.4);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 10px 0;
  }
  .unlock-title {
    font-weight: bold; color: #c4324a; font-size: 0.85rem; margin-bottom: 10px;
  }
  .unlock-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .unlock-req {
    flex: 1; min-width: 120px;
    background: rgba(255,255,255,0.04); border-radius: 4px; padding: 8px 10px;
  }
  .unlock-req.met, .unlock-req.affordable { border: 1px solid var(--gold); }
  .unlock-req-label {
    font-size: 0.68rem; color: var(--text-dim); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em;
  }
  .unlock-req-cond { font-size: 0.8rem; color: var(--text); }
  .unlock-prog { color: var(--gold); font-size: 0.75rem; }
  .unlock-or {
    font-size: 0.7rem; color: var(--text-dim); font-weight: bold; flex-shrink: 0;
  }

  /* ===== Match history ===== */
  .match-history {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; max-width: 520px; margin-bottom: 8px;
  }
  .history-empty { font-size: 0.8rem; color: var(--text-dim); font-style: italic; text-align: center; padding: 12px; }
  .history-row {
    display: grid;
    grid-template-columns: 28px 46px 1fr 46px 40px 60px;
    gap: 8px; align-items: center;
    /* Phase 3 P0 distill (2026-05-09): side-stripe replaced with full 1px
       transparent border that takes the win/loss color via state classes. */
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    background: rgba(26,22,32,0.6);
    border: 1px solid transparent;
  }
  .history-row.win  { border-color: rgba(90,154,238,0.55); background: linear-gradient(90deg, rgba(90,154,238,0.08), rgba(26,22,32,0.6) 60%); }
  .history-row.loss { border-color: rgba(224,50,82,0.55); background: linear-gradient(90deg, rgba(224,50,82,0.08), rgba(26,22,32,0.6) 60%); }
  .history-result { font-weight: bold; }
  .history-row.win  .history-result { color: var(--ally); }
  .history-row.loss .history-result { color: var(--enemy); }
  .history-mode, .history-class { color: var(--text-dim); }
  .history-score { color: var(--gold); font-weight: bold; }
  .history-kills { color: var(--ember-soft); }
  .history-date  { color: var(--text-dim); font-size: 0.7rem; text-align: right; width: 72px; flex-shrink: 0; }

  /* ===== Daily Challenges ===== */
  .daily-sub {
    font-size: 0.78rem; color: var(--text-dim); font-style: italic;
    margin-bottom: 18px; text-align: center;
  }
  #daily-list {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; max-width: 520px;
  }
  .daily-card {
    /* Phase 3 P0 distill (2026-05-09): side-stripe dropped; the existing
       1px border + gradient background carry the card without it. */
    background: linear-gradient(135deg, rgba(28,22,36,0.92), rgba(14,11,20,0.95));
    border: 1px solid rgba(80,55,65,0.55);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    transition: transform 0.22s, background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s, opacity 0.22s, filter 0.22s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }
  .daily-card:hover {
    background: linear-gradient(135deg, rgba(34,26,44,0.95), rgba(18,14,26,0.97));
    border-color: rgba(255,255,255,0.11);
    transform: translateX(3px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  }
  .daily-card.done {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(40,32,18,0.88), rgba(18,14,10,0.95));
    box-shadow: 0 2px 14px rgba(0,0,0,0.35), inset 4px 0 16px rgba(232,197,114,0.06);
  }
  .daily-card.claimed { border-color: rgba(110,195,161,0.55); opacity: 0.62; }
  .daily-card-desc {
    flex: 1; font-weight: bold; font-size: 0.88rem; color: var(--text);
  }
  .daily-card-progress {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 110px;
  }
  .daily-prog-bar {
    width: 100%; height: 6px; background: rgba(255,255,255,0.1);
    border-radius: 3px; overflow: hidden;
  }
  .daily-prog-fill {
    height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.4s;
  }
  .daily-prog-text {
    font-size: 0.7rem; color: var(--text-dim);
  }
  .daily-card-right {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px;
  }
  .daily-card-reward {
    font-size: 0.78rem; color: var(--ember-soft); font-weight: bold;
  }
  .daily-claimed-badge {
    font-size: 0.72rem; color: #6ec3a1; font-weight: bold;
  }

  /* ===== Settings ===== */
  .settings-list {
    display: flex; flex-direction: column; gap: 12px;
    width: 100%; max-width: 500px; margin-bottom: 24px;
  }
  .setting-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: rgba(26,22,32,0.75);
    border: 1px solid var(--pillar);
    border-radius: 8px;
    transition: background 0.15s;
  }
  .setting-row:hover { background: rgba(32,26,42,0.85); }
  .setting-row label {
    font-size: 0.85rem; color: var(--text-dim);
    letter-spacing: 0.1em;
  }
  .setting-row input[type=range] {
    width: 100%; accent-color: var(--gold);
  }

  /* ===== Match End ===== */
  .match-end-score {
    font-size: 3rem; color: var(--gold);
    letter-spacing: 0.3em; margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(232,197,114,0.4);
  }
  .match-end-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; width: 100%; max-width: 600px; margin-bottom: 20px;
  }
  .match-stat {
    background: rgba(26,22,32,0.75);
    border: 1px solid var(--pillar);
    padding: 12px; text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  .match-stat-value {
    font-size: 1.4rem; color: var(--gold); font-weight: bold;
  }
  .match-stat-label {
    font-size: 0.7rem; color: var(--text-dim);
    letter-spacing: 0.15em; text-transform: uppercase;
  }
  .match-end-rewards {
    background: linear-gradient(90deg, rgba(60,45,20,0.35), rgba(26,22,32,0.75), rgba(60,45,20,0.35));
    border: 1px solid var(--gold);
    padding: 16px 24px;
    display: flex; gap: 20px; align-items: center;
    margin-bottom: 20px;
    animation: rewardPulse 1.5s ease-in-out infinite;
    border-radius: 10px;
  }
  @keyframes rewardPulse {
    0%,100% { box-shadow: 0 0 18px rgba(232,197,114,0.25); }
    50%     { box-shadow: 0 0 30px rgba(232,197,114,0.5); }
  }
  .reward-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .reward-value {
    font-size: 1.4rem; color: var(--gold); font-weight: bold;
  }
  .reward-label {
    font-size: 0.7rem; color: var(--text-dim);
    letter-spacing: 0.15em; text-transform: uppercase;
  }

  .big-btn.secondary {
    border-color: var(--ember);
    box-shadow: 0 0 24px rgba(255,106,44,0.15);
  }
  .big-btn.secondary:hover {
    box-shadow: 0 0 36px rgba(255,106,44,0.35);
  }
  .big-btn.queue-btn {
    border-color: var(--gold);
    box-shadow: 0 0 24px rgba(232,197,114,0.15);
  }
  .big-btn.queue-btn:hover {
    box-shadow: 0 0 36px rgba(232,197,114,0.35);
  }

  /* ===== Multiplayer ===== */
  .mp-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
  }
  @media (max-width: 800px) { .mp-wrap { grid-template-columns: 1fr; } }
  .mp-panel {
    background: linear-gradient(180deg, rgba(30,24,38,0.92), rgba(11,10,16,0.92));
    border: 2px solid var(--pillar);
    padding: 22px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  .mp-panel-title {
    font-size: 1.1rem; color: var(--gold);
    letter-spacing: 0.25em; text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mp-panel-desc {
    font-size: 0.82rem; color: var(--text-dim);
    margin-bottom: 16px; font-style: italic;
  }
  .mp-panel .btn { margin: 6px; }
  .mp-panel input[type=text] {
    width: 100%;
    background: #0a0508;
    border: 1px solid var(--pillar);
    color: var(--text);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .mp-panel input[type=text]:focus {
    outline: none;
    border-color: var(--gold);
  }
  .mp-status {
    font-size: 0.8rem;
    color: var(--ember-soft);
    margin-top: 10px;
    min-height: 16px;
    font-style: italic;
  }
  .mp-status.error { color: #ff7070; font-style: normal; }
  .mp-status.ok { color: #7ae888; font-style: normal; }
  .mp-code-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 14px;
  }
  .mp-code {
    font-size: 1.3rem;
    color: var(--gold);
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 10px 16px;
    margin: 6px auto 10px;
    background: #0a0508;
    border: 1px solid var(--gold);
    display: inline-block;
    user-select: all;
  }
  /* Lobby */
  .mp-lobby-row {
    display: flex; align-items: center; gap: 24px;
    margin-bottom: 10px;
  }
  .mp-player-card {
    background: rgba(26,22,32,0.9);
    border: 2px solid var(--pillar);
    padding: 14px 20px;
    text-align: center;
    min-width: 160px;
  }
  .mp-player-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .mp-lobby-portrait {
    image-rendering: pixelated;
    display: block; margin: 0 auto;
  }
  .mp-player-class {
    font-size: 0.95rem; color: var(--gold);
    letter-spacing: 0.15em; margin: 6px 0;
    text-transform: uppercase;
  }
  .mp-player-ready {
    font-size: 0.75rem;
    color: var(--ember-soft); font-style: italic;
  }
  .mp-player-ready.ready { color: #7ae888; font-weight: bold; font-style: normal; }
  .mp-vs {
    font-size: 1.6rem; color: var(--ember);
    font-weight: bold; letter-spacing: 0.2em;
  }
  .class-portrait-grid.compact {
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
  }
  .class-portrait-grid.compact .class-portrait canvas { width: 60px; height: 70px; }
  .class-portrait-grid.compact .class-portrait-name { font-size: 0.66rem; }
  .class-portrait-grid.compact .class-portrait-faction { display: none; }

  .mp-size-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 14px;
  }
  .mp-size-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--pillar);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
  }
  .mp-size-opt:has(input:checked) {
    border-color: var(--gold);
    background: rgba(232,197,114,0.08);
    color: var(--gold);
  }
  .mp-size-opt input { accent-color: var(--gold); }
  .mp-teams-row {
    display: flex; align-items: center; gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .mp-team-col {
    display: flex; flex-direction: column; gap: 10px;
  }
  .mp-team-header {
    font-size: 0.75rem; letter-spacing: 0.25em;
    text-align: center; font-weight: bold;
    margin-bottom: 2px;
  }
  .mp-team-blue .mp-team-header { color: #5aa0ff; }
  .mp-team-red .mp-team-header { color: #ff5a5a; }
  .mp-player-card.local-slot {
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(232,197,114,0.3);
  }

  /* ===== Achievement toast (pops during matches) ===== */
  /* ===== Generic message toast (replaces alert()) ===== */
  #msg-toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
    background: rgba(14,10,20,0.96); border: 1.5px solid rgba(180,120,60,0.5);
    color: #ddd; font-size: 0.88rem; padding: 10px 22px;
    border-radius: 4px; z-index: 9999; opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
    pointer-events: none; white-space: nowrap; max-width: 480px; text-align: center;
  }
  #msg-toast.show  { transform: translateX(-50%) translateY(0); opacity: 1; }
  #msg-toast.error { border-color: rgba(220,60,60,0.7); color: #ff9090; }
  #msg-toast.warn  { border-color: rgba(232,197,114,0.7); color: var(--gold); }
  #msg-toast.ok    { border-color: rgba(80,220,100,0.7); color: #7ae888; }

  /* ===== Streak bonus highlight ===== */
  .reward-item.streak-bonus { border-color: rgba(232,197,114,0.6); background: rgba(232,197,114,0.08); }
  .streak-badge { color: var(--gold); font-weight: bold; margin-left: 4px; }

  /* ===== Profile "no matches yet" hint ===== */
  .profile-first-match {
    grid-column: 1 / -1; text-align: center;
    font-size: 0.78rem; color: var(--ember-soft); opacity: 0.6;
    padding: 6px 0 2px; letter-spacing: 0.04em;
  }

  /* ===== Rank decay notice ===== */
  .rank-decay-notice {
    font-size: 0.68rem; color: #e06060; opacity: 0.8;
    text-align: center; margin-top: 4px; letter-spacing: 0.04em;
  }

  /* ===== Upgrade pip in HUD slot ===== */
  .upg-pip {
    font-size: 0.45rem; color: var(--gold); vertical-align: super;
    margin-left: 2px; opacity: 0.85;
  }

  #achievement-toast {
    position: fixed; bottom: 80px; right: 20px;
    background: linear-gradient(180deg, rgba(60,45,20,0.95), rgba(20,15,10,0.95));
    border: 2px solid var(--gold);
    padding: 12px 20px;
    display: none; align-items: center; gap: 12px;
    z-index: 200;
    box-shadow: 0 4px 24px rgba(232,197,114,0.4);
    animation: toastSlide 0.4s ease-out;
  }
  #achievement-toast.show { display: flex; }
  @keyframes toastSlide {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
  .toast-icon { font-size: 1.6rem; }
  .toast-title {
    font-size: 0.7rem; color: var(--ember-soft);
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .toast-name { font-size: 0.95rem; color: var(--gold); font-weight: bold; }

  .class-card.selected {
    border-color:var(--gold); background:rgba(232,197,114,0.08);
    box-shadow: 0 0 16px rgba(232,197,114,0.3);
    animation: selGlow 2.2s ease-in-out infinite;
  }
  @keyframes selGlow {
    0%,100% { box-shadow: 0 0 12px rgba(232,197,114,0.25); }
    50%     { box-shadow: 0 0 22px rgba(232,197,114,0.5); }
  }
  .panel h2 {
    font-size:2.5rem; letter-spacing:0.3em;
    color:var(--gold); margin-bottom:8px;
    text-transform:uppercase; font-weight:normal;
  }
  .panel .victor {
    font-size:1.05rem; color:var(--ember-soft);
    margin-bottom:20px; font-style:italic;
  }

  .btn {
    background: linear-gradient(180deg, rgba(232,197,114,0.07) 0%, transparent 100%);
    color: var(--gold);
    border: 2px solid var(--gold); padding: 12px 28px;
    font-family: inherit; font-size: 0.95rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    cursor: pointer; transition: transform 0.22s, background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s, opacity 0.22s, filter 0.22s; margin: 6px;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative; overflow: hidden;
  }
  .btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
    transform: translateX(-100%); transition: transform 0.5s;
    pointer-events: none;
  }
  .btn:hover::after { transform: translateX(100%); }
  .btn:hover {
    background: linear-gradient(180deg, rgba(232,197,114,0.20) 0%, rgba(232,197,114,0.07) 100%);
    color: var(--gold);
    box-shadow: 0 0 26px rgba(232,197,114,0.40), 0 4px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.09);
    transform: translateY(-2px);
    border-color: #f0d882;
  }
  .btn:active { transform: translateY(1px); box-shadow: 0 1px 8px rgba(0,0,0,0.5); transition: transform 0.08s, background 0.08s, box-shadow 0.08s, border-color 0.08s, color 0.08s, opacity 0.08s, filter 0.08s; }
  .btn.small { padding: 8px 18px; font-size: 0.8rem; }
  .btn.selected { background: linear-gradient(180deg, rgba(232,197,114,0.22), rgba(232,197,114,0.09)); color: var(--gold); box-shadow: 0 0 22px rgba(232,197,114,0.48), inset 0 1px 0 rgba(255,255,255,0.1); border-color: #f0d882; }

  .controls-hint {
    grid-column: 1 / -1;
    margin-top:8px; padding-top:8px; width:100%;
    border-top:1px solid rgba(58,46,48,0.45);
    text-align:center; font-size:0.72rem; color:var(--text-dim);
    letter-spacing:0.1em; line-height:1.6;
  }
  .controls-hint strong { color:var(--gold); }

  .section-label {
    color:var(--text-dim); font-size:0.82rem;
    margin:14px 0 8px; letter-spacing:0.18em; text-transform:uppercase;
    display: flex; align-items: center; gap: 10px; width: 100%;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.08), transparent);
    display: block;
  }
  .row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .class-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:8px 0 4px;
  }
  @media (max-width: 700px) { .class-grid { grid-template-columns:repeat(2,1fr); } }
  .class-card {
    border:2px solid var(--pillar); padding:12px; cursor:pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s; background:rgba(0,0,0,0.3); text-align:left;
  }
  .class-card:hover {
    border-color:var(--ember); transform:translateY(-2px);
    box-shadow:0 4px 20px rgba(255,106,44,0.3);
  }
  .class-card.selected { border-color:var(--gold); background:rgba(232,197,114,0.08); }
  .class-card h3 { color:var(--gold); letter-spacing:0.15em; margin-bottom:2px; font-size:0.88rem; }
  .class-card .faction { color:var(--text-dim); font-style:italic; font-size:0.65rem; margin-bottom:6px; }
  .class-card p { font-size:0.7rem; color:var(--text); line-height:1.45; }

  /* ===== Persistent always-visible controls ===== */
  #exit-match-btn {
    position: fixed; top: 12px; left: 12px; z-index: 200;
    display: none;
    background: rgba(11,10,16,0.92); border: 1px solid var(--pillar);
    color: var(--text-dim); font-family: inherit; font-size: 0.72rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 7px 14px; cursor: pointer; transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55);
  }
  #exit-match-btn:hover { border-color: var(--crimson); color: var(--crimson); box-shadow: 0 0 14px rgba(196,50,74,0.28); }

  #music-toggle-btn {
    position: fixed; bottom: 16px; right: 16px; z-index: 200;
    background: rgba(11,10,16,0.92); border: 1px solid var(--pillar);
    color: var(--gold); font-family: inherit; font-size: 1.1rem;
    padding: 8px 12px; cursor: pointer; transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55);
  }
  #music-toggle-btn:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(232,197,114,0.38); }
  #music-toggle-btn.muted { opacity: 0.35; }

  #fullscreen-btn {
    position: fixed; bottom: 16px; right: 62px; z-index: 200;
    background: rgba(11,10,16,0.92); border: 1px solid var(--pillar);
    color: var(--gold); font-family: inherit; font-size: 1.1rem;
    padding: 8px 12px; cursor: pointer; transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55);
  }
  #fullscreen-btn:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(232,197,114,0.38); }

  #emote-bar {
    position: fixed; bottom: 56px; right: 16px; z-index: 200;
    display: none; flex-direction: column; gap: 5px; align-items: flex-end;
  }
  #emote-bar.visible { display: flex; }
  .emote-btn {
    background: rgba(11,10,16,0.88); border: 1px solid var(--pillar);
    color: var(--text-dim); font-family: inherit; font-size: 0.7rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 5px 10px; cursor: pointer; transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
    min-width: 52px; text-align: center;
  }
  .emote-btn:hover { border-color: var(--gold); color: var(--gold); }

  /* ===== Cooldown animations ===== */
  @keyframes cdReadyPulse {
    0%,100% { box-shadow: inset 0 0 0px rgba(255,106,44,0), 0 0 0px rgba(255,106,44,0); border-color: rgba(255,106,44,0.5); }
    50%     { box-shadow: inset 0 0 18px rgba(255,106,44,0.35), 0 0 14px rgba(255,106,44,0.50); border-color: var(--ember); }
  }
  @keyframes ultReadyPulse {
    0%,100% { box-shadow: inset 0 0 0px rgba(232,197,114,0), 0 0 0px rgba(232,197,114,0); border-color: rgba(232,197,114,0.5); }
    50%     { box-shadow: inset 0 0 24px rgba(232,197,114,0.42), 0 0 20px rgba(232,197,114,0.75); border-color: var(--gold); }
  }

  /* ===== Class portrait faction colors ===== */
  .class-portrait[data-faction="human"]     { border-color: rgba(184,197,214,0.35); }
  .class-portrait[data-faction="undead"]    { border-color: rgba(110,195,161,0.35); }
  .class-portrait[data-faction="celestial"] { border-color: rgba(246,227,161,0.35); }
  .class-portrait[data-faction="demon"]     { border-color: rgba(196,50,74,0.35); }
  .class-portrait[data-faction="human"]:hover     { border-color: #b8c5d6; box-shadow: 0 6px 22px rgba(184,197,214,0.32), 0 0 16px rgba(184,197,214,0.20); transform: translateY(-3px); }
  .class-portrait[data-faction="undead"]:hover    { border-color: #6ec3a1; box-shadow: 0 6px 22px rgba(110,195,161,0.32), 0 0 16px rgba(110,195,161,0.20); transform: translateY(-3px); }
  .class-portrait[data-faction="celestial"]:hover { border-color: #f6e3a1; box-shadow: 0 6px 22px rgba(246,227,161,0.32), 0 0 16px rgba(246,227,161,0.20); transform: translateY(-3px); }
  .class-portrait[data-faction="demon"]:hover     { border-color: #c4324a; box-shadow: 0 6px 22px rgba(196,50,74,0.32), 0 0 16px rgba(196,50,74,0.20); transform: translateY(-3px); }
  .class-portrait[data-faction="human"].selected     { border-color:#b8c5d6; background:linear-gradient(180deg,rgba(40,50,60,0.55),rgba(11,10,16,0.97)); box-shadow:0 0 24px rgba(184,197,214,0.42); }
  .class-portrait[data-faction="undead"].selected    { border-color:#6ec3a1; background:linear-gradient(180deg,rgba(15,38,30,0.55),rgba(11,10,16,0.97)); box-shadow:0 0 24px rgba(110,195,161,0.42); }
  .class-portrait[data-faction="celestial"].selected { border-color:#f6e3a1; background:linear-gradient(180deg,rgba(48,42,22,0.55),rgba(11,10,16,0.97)); box-shadow:0 0 24px rgba(246,227,161,0.42); }
  .class-portrait[data-faction="demon"].selected     { border-color:#c4324a; background:linear-gradient(180deg,rgba(40,12,18,0.55),rgba(11,10,16,0.97)); box-shadow:0 0 24px rgba(196,50,74,0.42); }

  /* ===== Passive section in class detail ===== */
  .cd-passive {
    /* Phase 3 P0 distill (2026-05-09): side-stripe dropped; the gold tinted
       border + background carries the section. Symmetric border-radius. */
    margin-top:10px; padding:9px 11px;
    background: rgba(232,197,114,0.05);
    border: 1px solid rgba(232,197,114,0.4);
    border-radius: 6px;
  }
  .cd-passive-label {
    font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 3px;
  }
  .cd-passive-name { color: var(--gold); font-weight: bold; font-size: 0.8rem; margin-bottom: 3px; }
  .cd-passive-desc { color: var(--text-dim); font-size: 0.7rem; font-style: italic; line-height: 1.4; }

  /* ===== Upgrade section in class detail ===== */
  .cd-upgrades {
    /* Phase 3 P0 distill (2026-05-09): side-stripe dropped per DESIGN.md. */
    margin-top: 10px; padding: 9px 11px;
    background: rgba(127,184,255,0.04);
    border: 1px solid rgba(127,184,255,0.32);
    border-radius: 6px;
  }
  .cd-upgrades-label {
    font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 6px;
  }
  .upg-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); gap: 6px;
  }
  .upg-row:last-child { border-bottom: none; }
  .upg-info { flex: 1; min-width: 0; }
  .upg-name { font-size: 0.75rem; font-weight: bold; color: var(--text); }
  .upg-desc { font-size: var(--fs-micro); color: var(--text-dim); }
  .upg-lock { font-size: var(--fs-micro); color: #c4324a; margin-top: 2px; }
  .upg-action { flex-shrink: 0; }
  .upg-btn {
    background: rgba(232,197,114,0.12); border: 1px solid rgba(232,197,114,0.4);
    color: var(--gold); font-size: 0.72rem; font-weight: bold;
    padding: 4px 9px; cursor: pointer; font-family: inherit;
    border-radius: 5px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
  }
  .upg-btn:hover:not(.disabled) { background: rgba(232,197,114,0.24); box-shadow: 0 0 10px rgba(232,197,114,0.25); }
  .upg-btn.disabled { opacity: 0.42; cursor: not-allowed; color: var(--text-dim); border-color: rgba(255,255,255,0.1); }
  .upg-owned-badge {
    font-size: 0.65rem; color: #5daa5d; font-weight: bold;
    background: rgba(93,170,93,0.1); border: 1px solid rgba(93,170,93,0.35);
    padding: 3px 7px;
    border-radius: 5px;
  }
  .upg-row.owned .upg-name { color: var(--text-dim); }

  /* ===== Collection screen ===== */
  #screen-collection { flex-direction: column; align-items: stretch; padding: 16px 24px 10px; gap: 10px; }
  .coll-layout {
    display: grid; grid-template-columns: 220px 1fr; gap: 14px;
    flex: 1; min-height: 0; overflow: hidden;
  }
  .coll-roster {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; padding-right: 4px;
  }
  .coll-roster::-webkit-scrollbar { width: 4px; }
  .coll-roster::-webkit-scrollbar-thumb { background: rgba(232,197,114,0.25); border-radius: 2px; }
  .coll-card {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
  }
  .coll-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); transform: translateX(2px); }
  .coll-card.selected { border-color: var(--gold); background: rgba(232,197,114,0.08); box-shadow: 0 0 12px rgba(232,197,114,0.15); }
  .coll-card[data-faction="human"].selected    { border-color: #b8c5d6; background: rgba(184,197,214,0.07); }
  .coll-card[data-faction="undead"].selected   { border-color: #6ec3a1; background: rgba(110,195,161,0.07); }
  .coll-card[data-faction="celestial"].selected{ border-color: #f6e3a1; background: rgba(246,227,161,0.07); }
  .coll-card[data-faction="demon"].selected    { border-color: #c4324a; background: rgba(196,50,74,0.07); }
  .coll-portrait-canvas { flex-shrink: 0; image-rendering: pixelated; }
  .coll-info { flex: 1; min-width: 0; }
  .coll-class-name { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .coll-mastery-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
  .coll-mastery-lv { font-size: var(--fs-micro); color: var(--gold); font-weight: bold; min-width: 18px; }
  .coll-mbar { flex: 1; height: 3px; background: rgba(255,255,255,0.1); }
  .coll-mfill { height: 100%; background: var(--gold); transition: width 0.3s; }
  .coll-pips { display: flex; gap: 4px; margin-top: 4px; }
  .coll-pip {
    width: 8px; height: 8px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .coll-pip.owned     { background: #5daa5d; border-color: #5daa5d; }
  .coll-pip.available { background: var(--gold); border-color: var(--gold); }
  .coll-pip.locked    { background: transparent; border-color: rgba(255,255,255,0.18); }
  .coll-detail {
    overflow-y: auto; padding: 16px 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .coll-detail[data-faction="human"]    { border-color: rgba(184,197,214,0.25); }
  .coll-detail[data-faction="undead"]   { border-color: rgba(110,195,161,0.25); }
  .coll-detail[data-faction="celestial"]{ border-color: rgba(246,227,161,0.25); }
  .coll-detail[data-faction="demon"]    { border-color: rgba(196,50,74,0.25); }
  .coll-detail::-webkit-scrollbar { width: 4px; }
  .coll-detail::-webkit-scrollbar-thumb { background: rgba(232,197,114,0.2); border-radius: 2px; }
  .coll-detail-name { font-size: 1.5rem; font-weight: bold; color: var(--gold); letter-spacing: 0.1em; }

  /* ===== Win streak badge on match-end ===== */
  .match-streak {
    text-align: center; font-size: 0.85rem; font-weight: bold;
    color: #ff9e2c; letter-spacing: 0.06em;
    background: rgba(255,158,44,0.09); border: 1px solid rgba(255,158,44,0.28);
    padding: 5px 14px; margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 0 14px rgba(255,158,44,0.18);
  }

  /* ===== Login / Auth screen ===== */
  #screen-login { justify-content: center; align-items: center; gap: 28px; }
  .auth-box {
    width: 340px;
    background: rgba(11,10,16,0.96);
    border: 1px solid rgba(232,197,114,0.28);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,197,114,0.08);
  }
  .auth-tabs { display: flex; border-bottom: 1px solid rgba(232,197,114,0.15); }
  .auth-tab {
    flex: 1; padding: 11px; background: none; border: none;
    color: var(--text-dim); font-family: inherit; font-size: 0.8rem;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    transition: color 0.15s, background 0.15s;
  }
  .auth-tab.active { color: var(--gold); background: rgba(232,197,114,0.06); }
  .auth-tab:hover:not(.active) { color: var(--text); }
  .auth-form { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
  .auth-field { display: flex; flex-direction: column; }
  .auth-input {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    color: var(--text); font-family: inherit; font-size: 0.85rem;
    padding: 9px 12px; outline: none;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .auth-input:focus { border-color: rgba(232,197,114,0.55); box-shadow: 0 0 10px rgba(232,197,114,0.15); }
  .auth-input::placeholder { color: var(--text-dim); }
  .auth-error { color: #c4324a; font-size: 0.72rem; min-height: 16px; text-align: center; }
  .auth-submit-btn { width: 100%; padding: 11px; margin-top: 2px; }
  .auth-divider { text-align: center; color: var(--text-dim); font-size: 0.7rem; letter-spacing: 0.15em; }
  .auth-guest-btn { width: 100%; padding: 9px; background: rgba(255,255,255,0.04); }
  .auth-guest-btn:hover { background: rgba(255,255,255,0.08); }
  .auth-guest-note { text-align: center; color: var(--text-dim); font-size: 0.65rem; }
  .auth-forgot-link { color: var(--text-dim); font-size: 0.68rem; text-decoration: none; }
  .auth-forgot-link:hover { color: var(--text); text-decoration: underline; }

  /* ===== Guest banner ===== */
  #guest-banner {
    display: none; align-items: center; justify-content: center; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: rgba(196,50,74,0.12); border-top: 1px solid rgba(196,50,74,0.35);
    padding: 7px 16px; font-size: 0.72rem; color: #e07080;
  }
  #guest-banner button {
    background: rgba(196,50,74,0.2); border: 1px solid rgba(196,50,74,0.5);
    color: #e07080; font-family: inherit; font-size: 0.7rem; padding: 3px 10px; cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
  }
  #guest-banner button:hover { background: rgba(196,50,74,0.38); }

  /* ===== Leaderboard ===== */
  #screen-leaderboard, #screen-lobbies {
    flex-direction: column; align-items: stretch; padding: 16px 24px; gap: 8px;
  }
  .lb-tabs {
    display: flex; gap: 6px; margin-bottom: 2px;
  }
  .lb-tab {
    flex: 1; padding: 7px 0; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55);
    font-size: 0.78rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
  }
  .lb-tab:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
  .lb-tab.active {
    background: rgba(232,197,114,0.14); border-color: rgba(232,197,114,0.4);
    color: var(--gold); font-weight: 600;
  }
  .lb-header-row {
    display: flex; gap: 8px; padding: 4px 12px;
    font-size: 0.62rem; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .lb-col-rank  { width: 36px; flex-shrink: 0; }
  .lb-col-name  { flex: 1; min-width: 0; }
  .lb-col-stat  { width: 56px; text-align: right; flex-shrink: 0; }
  /* Wide column for the ranked-sort "Arena Rank" header — must match the body's
     `.lb-rank-main` flex behavior so header and rows align. */
  .lb-col-stat-wide { flex: 1 1 auto; min-width: 0; text-align: left; }
  /* Narrow badge column for the All Time tab — matches the body's
     `.lb-rank-badge-wrap` width so columns stay aligned across tab swaps. */
  .lb-col-badge { width: 120px; flex-shrink: 0; text-align: left; }
  .lb-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.82rem; transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
    border-radius: 6px;
  }
  .lb-row:hover { background: rgba(255,255,255,0.055); transform: translateX(2px); }
  .lb-row.lb-self { background: rgba(232,197,114,0.09); border: 1px solid rgba(232,197,114,0.18); }
  .lb-rank  { width: 36px; flex-shrink: 0; color: rgba(255,255,255,0.4); font-size: 0.75rem; }
  .lb-row:nth-child(1) .lb-rank { color: var(--gold); font-weight: bold; }
  .lb-row:nth-child(2) .lb-rank { color: #c0c0c0; }
  .lb-row:nth-child(3) .lb-rank { color: #cd7f32; }
  .lb-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-stat  { width: 56px; text-align: right; flex-shrink: 0; color: rgba(255,255,255,0.75); }
  .lb-label { color: rgba(255,255,255,0.35); font-size: 0.72em; }
  .lb-streak { width: 56px; text-align: right; flex-shrink: 0; font-size: 0.78rem; }
  .lb-loading { text-align: center; padding: 32px; color: rgba(255,255,255,0.4); font-size: 0.82rem; }
  .lb-empty { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.45); font-size: 0.9rem; letter-spacing: 0.05em; }
  .lb-empty::before { content: '🏟'; display: block; font-size: 2rem; margin-bottom: 10px; opacity: 0.5; }
  /* Lobby browser */
  .lobby-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem;
  }
  .lobby-row-full { opacity: 0.55; background: rgba(255,0,0,0.04); }
  .lobby-host { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lobby-mode { width: 40px; text-align: center; color: var(--gold); font-weight: bold; flex-shrink: 0; }
  .lobby-map  { width: 74px; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.75rem; flex-shrink: 0; }
  .lobby-count { width: 54px; text-align: center; color: rgba(255,255,255,0.5); font-size: 0.75rem; flex-shrink: 0; }
  .lobby-count-full { color: var(--crimson); font-weight: bold; }
  .lobby-type { width: 54px; text-align: center; font-size: 0.7rem; font-weight: bold; padding: 2px 4px; border-radius: 3px; flex-shrink: 0; }
  .lobby-type-ranked { color: #ffd700; background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3); }
  .lobby-type-casual { color: #88bbee; background: rgba(136,187,238,0.1); border: 1px solid rgba(136,187,238,0.2); }
  .btn.small:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

  /* ===== Ranked/Casual mode badge in lobby ===== */
  .mp-mode-badge { padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; }
  .mp-mode-badge.ranked { color: #ffd700; background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.4); }
  .mp-mode-badge.casual { color: #88bbee; background: rgba(136,187,238,0.1); border: 1px solid rgba(136,187,238,0.25); }

  /* ===== Queue / Matchmaking ===== */
  #screen-queue {
    flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  }
  .queue-title {
    font-size: 2rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); text-shadow: 0 0 32px rgba(232,197,114,0.6), 0 0 8px rgba(232,197,114,0.3);
  }
  /* Spinner ring stack */
  .queue-spinner-wrap {
    position: relative; width: 110px; height: 110px;
    display: flex; align-items: center; justify-content: center;
  }
  .queue-spinner {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(232,197,114,0.12);
    border-top-color: var(--gold);
    animation: queueSpin 1.1s linear infinite;
    box-shadow: 0 0 18px rgba(232,197,114,0.25);
  }
  .queue-spinner-outer {
    position: absolute; inset: -14px;
    border-radius: 50%;
    border: 1.5px dashed rgba(232,197,114,0.22);
    animation: queueSpin 3.8s linear infinite reverse;
  }
  .queue-spinner-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px 4px rgba(232,197,114,0.55);
    animation: queueDotPulse 1.6s ease-in-out infinite;
  }
  @keyframes queueSpin { to { transform: rotate(360deg); } }
  @keyframes queueDotPulse {
    0%,100% { opacity: 0.6; transform: scale(0.85); }
    50%      { opacity: 1.0; transform: scale(1.15); }
  }
  .queue-status-wrap { text-align: center; }
  #queue-status {
    font-size: 1rem; color: rgba(255,255,255,0.8); letter-spacing: 0.05em; min-height: 1.4em;
  }
  #queue-elapsed {
    font-size: 1.6rem; font-weight: 700; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45); margin-top: 6px; font-variant-numeric: tabular-nums;
  }
  #queue-class-label {
    font-size: 0.8rem; color: var(--gold); opacity: 0.6; margin-top: 10px; letter-spacing: 0.08em;
  }
  #queue-cancel-btn {
    margin-top: 6px; padding: 9px 28px;
    background: transparent; border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.55); border-radius: 5px;
    font-family: inherit; font-size: 0.82rem; cursor: pointer; letter-spacing: 0.07em;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
  }
  #queue-cancel-btn:hover { border-color: rgba(255,255,255,0.4); color: var(--text); }
  #queue-cancel-btn:disabled { opacity: 0.3; pointer-events: none; }

  /* ===== Online Count ===== */
  .online-count-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 7px; margin-top: -28px; margin-bottom: 18px;
    font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.07em;
  }
  .online-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4cde80;
    box-shadow: 0 0 6px 2px rgba(76,222,128,0.55);
    animation: onlinePulse 2.2s ease-in-out infinite;
  }
  @keyframes onlinePulse {
    0%,100% { opacity: 0.7; transform: scale(0.9); }
    50%      { opacity: 1.0; transform: scale(1.2); }
  }

  /* ===== Warband button ===== */
  .big-btn.warband-btn {
    border-color: var(--shadow);
    box-shadow: 0 0 24px rgba(106,42,168,0.18);
  }
  .big-btn.warband-btn:hover {
    box-shadow: 0 0 36px rgba(106,42,168,0.4);
  }

  /* ===== Party / Warband screen ===== */
  #screen-party { align-items: center; gap: 0; }
  .party-tabs {
    display: flex; gap: 0; border: 1px solid var(--pillar);
    margin-bottom: 18px; border-radius: 4px; overflow: hidden;
  }
  .party-tab {
    flex: 1; padding: 8px 26px;
    background: transparent; border: none;
    color: var(--text-dim); font-family: inherit; font-size: 0.82rem;
    letter-spacing: 0.08em; cursor: pointer; transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
  }
  .party-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
  .party-tab.selected { color: var(--gold); background: rgba(232,197,114,0.08); }
  .party-hint {
    font-size: 0.8rem; color: var(--text-dim); text-align: center;
    margin-bottom: 14px; font-style: italic;
  }
  .party-join-row {
    display: flex; gap: 8px; justify-content: center; align-items: center;
  }
  .party-code-input {
    background: rgba(0,0,0,0.35); border: 1px solid var(--pillar);
    color: var(--gold); font-family: inherit; font-size: 1.5rem;
    letter-spacing: 0.3em; text-align: center; text-transform: uppercase;
    padding: 7px 14px; border-radius: 4px; width: 130px;
    outline: none; transition: border-color 0.15s;
  }
  .party-code-input:focus { border-color: var(--gold); }
  .party-code-section {
    text-align: center; margin-bottom: 18px;
  }
  .party-code-label {
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 6px;
  }
  .party-code-display {
    font-size: 2.8rem; font-weight: bold; letter-spacing: 0.4em;
    color: var(--gold); text-shadow: 0 0 22px rgba(232,197,114,0.5);
    cursor: pointer; transition: text-shadow 0.15s; user-select: all;
  }
  .party-code-display:hover { text-shadow: 0 0 32px rgba(232,197,114,0.75); }
  .party-code-hint {
    font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; font-style: italic;
  }
  .party-members-section { width: 100%; max-width: 320px; margin-bottom: 16px; }
  .party-members-list { display: flex; flex-direction: column; gap: 4px; }
  .party-member-row {
    /* Phase 3 P0 distill (2026-05-09): side-stripe replaced with full
       border that takes the gold color on the .you state. */
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(80,55,65,0.5);
    padding: 7px 12px; border-radius: 4px;
    font-size: 0.82rem;
  }
  .party-member-row.you { border-color: rgba(232,197,114,0.55); background: linear-gradient(90deg, rgba(232,197,114,0.06), rgba(255,255,255,0.04) 50%); }
  .party-member-name { color: var(--text); letter-spacing: 0.06em; }
  .party-member-class { color: var(--text-dim); font-style: italic; font-size: 0.76rem; }

  /* ===== Faction Banner Lore ===== */
  .fac-lore {
    font-size: 0.6rem; text-align: center; padding: 5px 8px 0; line-height: 1.4;
    font-style: italic; letter-spacing: 0.03em; pointer-events: none;
  }
  /* Right-side banners sit 8px off-screen — shift text left so it stays visible */
  .fb-celestial .fac-lore, .fb-demon .fac-lore { transform: translateX(-8px); }
  .fb-human    .fac-lore { color: rgba(184,197,214,0.80); }
  .fb-undead   .fac-lore { color: rgba(110,195,161,0.80); }
  .fb-celestial .fac-lore { color: rgba(246,227,161,0.80); }
  .fb-demon    .fac-lore { color: rgba(196,50,74,0.90); }

  /* ===== Faction Lore Modal ===== */
  #faction-lore-modal {
    /* Phase 3 P0 distill (2026-05-09): glassmorphism removed per DESIGN.md
       "the landing nav is the single permitted exception." Backdrop is now
       a solid darkening overlay; the modal panel still has its structural
       shadow and inset highlight (Lifted+Lit rule). */
    display: none; position: fixed; inset: 0; z-index: 1001;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.28s;
  }
  #faction-lore-modal.show {
    display: flex;
    animation: flmBackdrop 0.3s forwards;
  }
  @keyframes flmBackdrop {
    from { background: rgba(0,0,0,0); }
    to   { background: rgba(8,5,12,0.88); }
  }
  .flm-panel {
    /* Phase 3 P1 colorize (2026-05-09): Tarnish-rule defaults — replaced
       pure-white fallbacks with codex-parchment-tinted neutrals. JS still
       sets --flm-color and --flm-glow per faction; defaults only fire when
       JS is mid-load or the faction is unknown. */
    background: linear-gradient(160deg, #18151f 0%, #13111a 60%);
    border: 1.5px solid var(--flm-color, rgba(232,228,220,0.18));
    border-radius: 14px;
    max-width: 540px; width: 90%; max-height: 84vh; overflow-y: auto;
    box-shadow: 0 0 80px var(--flm-glow, rgba(232,197,114,0.08)), 0 24px 48px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(255,255,255,0.05);
    animation: flmIn 0.30s cubic-bezier(0.22,1,0.36,1);
  }
  @keyframes flmIn {
    from { transform: scale(0.90) translateY(18px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
  }
  .flm-header {
    padding: 26px 28px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
  }
  .flm-faction-label {
    /* Tarnish-rule default: codex-parchment instead of pure white. */
    font-size: 0.62rem; letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--flm-color, var(--codex-parchment)); opacity: 0.65; margin-bottom: 6px;
    font-family: var(--font-body); font-weight: 600;
  }
  .flm-name {
    font-size: 1.55rem; font-weight: 700; line-height: 1.15;
    color: var(--flm-color, var(--codex-parchment)); margin-bottom: 7px;
    text-shadow: 0 0 28px var(--flm-glow, transparent);
  }
  .flm-motto {
    font-style: italic; color: rgba(255,255,255,0.42); font-size: 0.8rem; line-height: 1.5;
  }
  .flm-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.35); font-size: 1.35rem; line-height: 1; padding: 4px;
    transition: color 0.15s;
  }
  .flm-close:hover { color: rgba(255,255,255,0.85); }
  .flm-body { padding: 22px 28px 28px; }
  .flm-body p {
    color: rgba(255,255,255,0.70); font-size: 0.835rem; line-height: 1.80;
    margin-bottom: 15px;
  }
  .flm-body p:last-child { margin-bottom: 0; }
  .flm-tagline {
    /* Phase 3 P0 distill (2026-05-09): side-stripe replaced with full
       faction-tinted border + symmetric radius. Default token uses
       codex-parchment instead of pure white per Tarnish rule. */
    margin: 18px 0 0; padding: 16px 20px;
    border: 1px solid var(--flm-color, rgba(232,228,220,0.3));
    background: rgba(232,228,220,0.03);
    border-radius: 8px;
    font-size: 1.05rem; font-style: italic; font-weight: 600; line-height: 1.45;
    color: var(--flm-color, rgba(232,228,220,0.85));
    text-shadow: 0 0 20px var(--flm-glow, transparent);
    letter-spacing: 0.01em;
  }
  .flm-identity {
    margin: 10px 0 0; font-size: 0.65rem; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--flm-color, rgba(232,228,220,0.45)); opacity: 0.65; text-align: center;
  }
  .flm-classes {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);
  }
  .flm-classes-label {
    width: 100%; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.28); margin-bottom: 6px;
  }
  .flm-class-chip {
    background: rgba(232,228,220,0.05); border: 1px solid var(--flm-color, rgba(232,228,220,0.18));
    border-radius: 20px; padding: 4px 14px; font-size: 0.73rem;
    color: var(--flm-color, rgba(255,255,255,0.6)); opacity: 0.85;
  }

  /* ===== Share Card Modal (match summary) =====
     Phase 4 (2026-05-10): governed by DESIGN.md — Tarnish (solid darken
     overlay, no glassmorphism), Lifted+Lit (structural shadow + a single
     gold inset highlight, never glow alone), Inscribed and weathered
     (codex-parchment gold trim, no pure white). */
  #share-card-modal {
    display: none; position: fixed; inset: 0; z-index: 1002;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.28s;
  }
  #share-card-modal.show {
    display: flex;
    animation: scmBackdrop 0.3s forwards;
  }
  @keyframes scmBackdrop {
    from { background: rgba(0,0,0,0); }
    to   { background: rgba(8,5,12,0.90); }
  }
  .scm-panel {
    background: linear-gradient(160deg, #18151f 0%, #13111a 60%);
    border: 1.5px solid rgba(216,193,121,0.30);
    border-radius: 14px;
    width: min(960px, 94vw); max-height: 92vh; overflow-y: auto;
    padding: 22px 24px 20px;
    box-shadow: 0 0 80px rgba(232,197,114,0.10), 0 24px 48px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(245,225,180,0.06);
    position: relative;
    animation: scmIn 0.30s cubic-bezier(0.22,1,0.36,1);
  }
  @keyframes scmIn {
    from { transform: scale(0.94) translateY(14px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
  }
  .scm-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; cursor: pointer;
    color: rgba(232,210,160,0.55); font-size: 1.35rem; line-height: 1; padding: 4px;
    transition: color 0.15s;
  }
  .scm-close:hover { color: rgba(245,228,184,0.95); }
  .scm-canvas-wrap {
    width: 100%;
    margin: 4px 0 18px;
    display: flex; align-items: center; justify-content: center;
  }
  #share-card-canvas {
    width: 100%; max-width: 880px;
    height: auto; aspect-ratio: 1200 / 630;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,193,121,0.18);
    image-rendering: -webkit-optimize-contrast;
  }
  .scm-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
  }
  .scm-actions .btn { padding: 12px 22px; font-size: 0.9rem; letter-spacing: 0.16em; }
  .scm-hint {
    text-align: center;
    font-size: 0.78rem; color: rgba(212,196,168,0.58);
    letter-spacing: 0.04em;
    line-height: 1.45;
  }

  /* ===== Match-end title ===== */
  #match-end-title {
    font-size: 3.8rem; letter-spacing: 0.35em; font-weight: bold;
    padding: 0 80px; text-shadow: 0 0 40px currentColor, 0 0 15px currentColor;
    animation: matchTitleGlow 2.2s ease-in-out infinite;
  }
  @keyframes matchTitleGlow {
    0%,100% { filter: brightness(1); }
    50%     { filter: brightness(1.25); }
  }

  /* ===== Side-btn radius (replaces old chamfer) ===== */
  .side-btn {
    border-radius: 6px;
  }

  /* ===== Team panel inner glow accents ===== */
  .team-panel:nth-child(1) { box-shadow: inset 4px 0 18px rgba(127,184,255,0.06); }
  .team-panel:nth-child(3) { box-shadow: inset -4px 0 18px rgba(196,50,74,0.06); }
  #self-hud { box-shadow: inset 4px 0 20px rgba(232,197,114,0.07); }

  /* ===== Profile stat card accent =====
     Phase 3 P0 distill (2026-05-09): side-stripe → full border, gold on hover. */
  .profile-stat-card {
    border: 1px solid var(--pillar);
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  }
  .profile-stat-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 20px rgba(232,197,114,0.10);
  }

  /* ===== Achievement row improvements ===== */
  .achievement-row.earned { box-shadow: inset 0 0 20px rgba(232,197,114,0.04); }

  /* ===== Custom scrollbar ===== */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: #0a0508; }
  ::-webkit-scrollbar-thumb { background: var(--pillar); border-radius: 0; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ember); }

  /* ===== HUD separator improvements ===== */
  #hud { box-shadow: 0 2px 16px rgba(0,0,0,0.6); }

  /* ===== class-card radius (replaces old chamfer) ===== */
  .class-card {
    border-radius: 8px;
  }

  /* ===== Guest sign-in prompt on home ===== */
  .home-signin-btn {
    border-color: rgba(232,197,114,0.6) !important;
    color: var(--gold) !important;
  }
  .home-signin-btn:hover { border-color: var(--gold) !important; background: rgba(232,197,114,0.1) !important; }

  /* ===== Bug Report Modal ===== */
  #bug-modal {
    display:none; position:fixed; inset:0; z-index:999;
    background:rgba(0,0,0,0.88); align-items:center; justify-content:center;
  }
  #bug-modal.show { display:flex; }
  .bug-modal-box {
    background:var(--bg-stone); border:1px solid var(--pillar);
    border-radius:8px; padding:28px 32px; width:420px; max-width:95vw;
    display:flex; flex-direction:column; gap:12px;
    box-shadow:0 8px 40px rgba(0,0,0,0.7);
  }
  .bug-modal-box h2 { color:var(--gold); font-size:1.2rem; letter-spacing:0.15em; text-transform:uppercase; }
  .bug-select, .bug-textarea {
    background:var(--bg-deep); border:1px solid var(--pillar); border-radius:4px;
    color:var(--text); font-family:inherit; font-size:0.9rem; padding:8px 10px; width:100%;
  }
  .bug-select:focus, .bug-textarea:focus { outline:none; border-color:var(--ember); }
  .bug-textarea { resize:vertical; min-height:110px; }
  .bug-char-count { font-size:0.75rem; color:var(--text-dim); text-align:right; }
  .bug-actions { display:flex; gap:10px; justify-content:flex-end; }
  .bug-status { font-size:0.82rem; text-align:center; min-height:1.2em; }
  .bug-status.ok  { color:#7fc87f; }
  .bug-status.err { color:var(--crimson); }

  /* ===== Rank Badge ===== */
  .rank-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:3px;
    border:1px solid var(--rank-border, rgba(112,112,112,0.4));
    color:var(--rank-color, #808080);
    font-size:0.78rem; font-weight:bold; letter-spacing:0.06em;
    background:rgba(0,0,0,0.35);
    white-space:nowrap;
  }
  .rank-badge.large {
    padding:6px 14px; font-size:1rem; gap:7px;
  }
  .rank-icon { font-size:1em; }
  .rank-name { letter-spacing:0.04em; }

  /* Rank LP bar */
  .rank-lp-bar-wrap { display:flex; align-items:center; gap:8px; margin-top:4px; }
  .rank-lp-bar {
    flex:1; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden;
  }
  .rank-lp-fill {
    height:100%; width:var(--fill,0%);
    background:var(--color, #808080);
    border-radius:3px;
    transition:width 0.4s ease;
  }
  .rank-lp-text { font-size:0.72rem; color:var(--text-dim); white-space:nowrap; }
  .rank-promo-label { color:var(--gold); font-weight:bold; margin-left:4px; }

  /* Profile rank card */
  .profile-rank-card {
    grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 20px; background:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.07); border-radius:4px;
    margin-bottom:4px;
  }
  .profile-peak { font-size:0.7rem; color:var(--text-dim); margin-top:2px; }

  /* Match-end rank section */
  #match-end-rank { margin:8px 0; }
  .rank-end-wrap {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px 16px; background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.07); border-radius:4px;
  }
  .rank-event {
    font-size:0.82rem; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase;
  }
  .rank-event.up      { color:#7fc87f; }
  .rank-event.down    { color:#e06060; }
  .rank-event.neutral { color:var(--text-dim); }
  .rank-event.rank-invalid { color:#ffaa55; font-size:0.72rem; text-transform:none; letter-spacing:0; opacity:0.85; }

  /* Account bar rank badge */
  #account-rank-badge { margin-top:2px; }
  #account-rank-badge .rank-badge { font-size:0.68rem; padding:2px 7px; }

  /* Leaderboard rank column — width matches the .lb-col-badge header cell so
     the All Time tab's header and body rows stay aligned. Without an explicit
     width this cell sized to content and the columns drifted on tab swap. */
  .lb-rank-badge-wrap { width: 120px; flex-shrink: 0; text-align: left; }
  .lb-rank-badge-wrap.lb-rank-main { width: auto; }
  .lb-rank-badge-wrap .rank-badge { font-size:0.68rem; padding:2px 6px; }
  .lb-unranked { color:var(--text-dim); font-size:0.78rem; }

  /* ===== Touch Controls ===== */
  #joy-zone {
    display: none;
    position: fixed;
    bottom: 24px; left: 12px;
    width: 150px; height: 150px;
    z-index: 500;
    touch-action: none;
    user-select: none;
  }
  #joy-base {
    position: absolute;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: rgba(232,197,114,0.07);
    border: 2px solid rgba(232,197,114,0.25);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s;
  }
  #joy-nub {
    position: absolute;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,230,140,0.95), rgba(180,140,50,0.85));
    border: 2px solid var(--gold);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px rgba(232,197,114,0.55);
  }
  #btn-zone {
    display: none;
    position: fixed;
    bottom: 14px; right: 10px;
    width: 158px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    z-index: 500;
    touch-action: none;
    user-select: none;
  }
  .tch-btn {
    height: 64px;
    background: linear-gradient(180deg, rgba(28,18,34,0.92), rgba(12,8,18,0.95));
    border: 2px solid rgba(232,197,114,0.35);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 10px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    transition: background 0.08s, border-color 0.08s, box-shadow 0.08s;
    padding: 4px 2px;
    line-height: 1.2;
  }
  .tch-btn .tch-key {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
  .tch-btn.active {
    background: rgba(232,197,114,0.22);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(232,197,114,0.45);
  }
  .tch-ult {
    grid-column: 1 / -1;
    height: 52px;
    border-color: rgba(255,106,44,0.45);
    color: var(--ember-soft);
  }
  .tch-ult.active {
    background: rgba(255,106,44,0.28);
    border-color: var(--ember);
    box-shadow: 0 0 16px rgba(255,106,44,0.5);
  }
  .tch-dodge {
    border-color: rgba(180,180,255,0.35);
    color: #b8b8ff;
    font-size: 0.58rem;
  }
  #portrait-warn {
    display: none;
    position: fixed; inset: 0;
    background: rgba(11,10,16,0.97);
    align-items: center; justify-content: center;
    z-index: 999;
    flex-direction: column; gap: 20px;
  }
  .portrait-msg {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--gold);
    letter-spacing: 0.15em;
    text-align: center;
    padding: 0 30px;
    text-shadow: 0 0 20px rgba(232,197,114,0.4);
  }
  .portrait-sub {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
    letter-spacing: 0.1em;
  }
  /* Show touch UI only on touch devices */
  body.touch-mode #joy-zone { display: block; }
  body.touch-mode #btn-zone { display: grid; }
  /* On touch mode, hide desktop-only elements */
  body.touch-mode .controls-hint { display: none; }

  /* ===== Faction Banner Crests ===== */
  #faction-bg {
    position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
  }
  .fac-banner {
    position: absolute;
    width: 160px;
    animation: bannerFloat 7s ease-in-out infinite;
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.28s, transform 0.28s;
  }
  .fb-human    { left: -8px;  top: 36px;    filter: drop-shadow(3px 5px 20px rgba(184,197,214,0.38)); animation: bannerFloat 7s ease-in-out infinite, glowPulseH 4.0s ease-in-out infinite; }
  .fb-undead   { left: -8px;  bottom: 36px; filter: drop-shadow(3px 5px 20px rgba(110,195,161,0.38)); animation: bannerFloat 7s ease-in-out infinite -1.75s, glowPulseU 4.4s ease-in-out infinite -0.9s; }
  .fb-celestial{ right: -8px; top: 36px;    filter: drop-shadow(-3px 5px 20px rgba(246,227,161,0.38)); animation: bannerFloat 7s ease-in-out infinite -3.50s, glowPulseC 4.8s ease-in-out infinite -2.1s; }
  .fb-demon    { right: -8px; bottom: 36px; filter: drop-shadow(-3px 5px 20px rgba(196,50,74,0.38)); animation: bannerFloat 7s ease-in-out infinite -5.25s, glowPulseD 3.6s ease-in-out infinite -1.4s; }
  .fb-human:hover    { filter: drop-shadow(3px 5px 36px rgba(184,197,214,0.90)) brightness(1.18); transform: scale(1.06) translateX(4px); }
  .fb-undead:hover   { filter: drop-shadow(3px 5px 36px rgba(110,195,161,0.90)) brightness(1.18); transform: scale(1.06) translateX(4px); }
  .fb-celestial:hover { filter: drop-shadow(-3px 5px 36px rgba(246,227,161,0.90)) brightness(1.18); transform: scale(1.06) translateX(-4px); }
  .fb-demon:hover    { filter: drop-shadow(-3px 5px 36px rgba(196,50,74,1.00)) brightness(1.18); transform: scale(1.06) translateX(-4px); }
  .fac-banner svg { display: block; width: 100%; height: auto; }
  /* Scale banners proportionally — no crop. 400×940 PNGs at 160px wide = 376px tall,
     which overlaps top+bottom banners on a 660px viewport. max-height forces a
     proportional scale-down so the full image is visible and banners don't overlap. */
  .fac-banner img { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(200px, 36vh, 260px); margin: 0 auto; }
  @keyframes bannerFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
  }
  @keyframes glowPulseH {
    0%,100% { filter: drop-shadow(3px 5px 20px rgba(184,197,214,0.38)); }
    50%     { filter: drop-shadow(3px 5px 34px rgba(184,197,214,0.70)) brightness(1.07); }
  }
  @keyframes glowPulseU {
    0%,100% { filter: drop-shadow(3px 5px 20px rgba(110,195,161,0.38)); }
    50%     { filter: drop-shadow(3px 5px 34px rgba(110,195,161,0.72)) brightness(1.07); }
  }
  @keyframes glowPulseC {
    0%,100% { filter: drop-shadow(-3px 5px 20px rgba(246,227,161,0.38)); }
    50%     { filter: drop-shadow(-3px 5px 34px rgba(246,227,161,0.72)) brightness(1.07); }
  }
  @keyframes glowPulseD {
    0%,100% { filter: drop-shadow(-3px 5px 20px rgba(196,50,74,0.38)); }
    50%     { filter: drop-shadow(-3px 5px 38px rgba(196,50,74,0.82)) brightness(1.09); }
  }
  @media (max-width: 600px) { #faction-bg { display: none; } }

/* ===== Match History ===== */
#screen-history {
  flex-direction: column; align-items: stretch; padding: 16px 24px; gap: 8px;
}
.hist-header-row {
  display: flex; gap: 8px; padding: 4px 12px;
  font-size: 0.62rem; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hist-col-result { width: 48px; flex-shrink: 0; }
.hist-col-class  { flex: 1; min-width: 0; }
.hist-col-mode   { width: 46px; flex-shrink: 0; }
.hist-col-score  { width: 40px; text-align: center; flex-shrink: 0; }
.hist-col-stat   { width: 64px; text-align: right; flex-shrink: 0; }
.hist-col-ago    { width: 60px; text-align: right; flex-shrink: 0; }
.hist-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.82rem; border-radius: 6px; transition: background 0.15s;
}
.hist-row:hover { background: rgba(255,255,255,0.05); }
.hist-win  { color: #6ec3a1; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; }
.hist-loss { color: #c4324a; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; }
.hist-result { width: 48px; flex-shrink: 0; }
.hist-class  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hist-mode   { width: 46px; flex-shrink: 0; color: rgba(255,255,255,0.4); font-size: 0.74rem; }
.hist-score  { width: 40px; text-align: center; flex-shrink: 0; color: rgba(255,255,255,0.6); font-size: 0.78rem; }
.hist-stat   { width: 64px; text-align: right; flex-shrink: 0; color: rgba(255,255,255,0.75); }
.hist-label  { color: rgba(255,255,255,0.35); font-size: 0.72em; }
.hist-ago    { width: 60px; text-align: right; flex-shrink: 0; color: rgba(255,255,255,0.35); font-size: 0.74rem; }
.hist-empty  { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.45); font-size: 0.9rem; }

/* ===== What's New ===== */
#screen-news {
  flex-direction: column; align-items: stretch; padding: 16px 24px; gap: 12px;
}
.news-feed { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; }
.news-entry {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; padding: 16px 20px;
}
.news-version {
  font-size: 1rem; font-weight: 700; color: var(--gold); letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.news-date { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-bottom: 12px; }
.news-list {
  margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px;
}
.news-list li { font-size: 0.83rem; color: rgba(255,255,255,0.8); line-height: 1.4; }

/* ===== Training button in play hub ===== */
.play-hub-grid .training-btn { border-color: rgba(100,200,160,0.5); }
.play-hub-grid .training-btn:hover { border-color: rgba(100,200,160,0.9); box-shadow: 0 0 18px rgba(100,200,160,0.25); }

/* ===== Tutorial overlay ===== */
#tutorial-overlay {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  width: 480px;
}
.tut-panel {
  background: rgba(11,10,16,0.92);
  border: 1px solid rgba(232,197,114,0.45);
  border-radius: 10px;
  padding: 12px 18px 14px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.55), 0 0 18px rgba(232,197,114,0.08);
  pointer-events: all;
}
.tut-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tut-label {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gold, #e8c572);
  opacity: 0.75;
}
.tut-skip-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: color 0.15s, border-color 0.15s;
}
.tut-skip-btn:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.4); }
.tut-body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
}
.tut-key-hint {
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
  background: rgba(232,197,114,0.12);
  border: 1px solid rgba(232,197,114,0.35);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold, #e8c572);
  letter-spacing: 0.05em;
}
.tut-content { flex: 1; }
.tut-step-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.tut-step-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.35;
}
.tut-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.tut-dots { display: flex; gap: 7px; align-items: center; }
.tut-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.25s, transform 0.2s;
}
.tut-dot.done  { background: rgba(100,200,130,0.6); }
.tut-dot.active {
  background: var(--gold, #e8c572);
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(232,197,114,0.5);
}
.tut-done-btn { pointer-events: all; }
@keyframes tut-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tut-body { animation: tut-step-in 0.25s ease both; }
@media (prefers-reduced-motion: reduce) { .tut-body { animation: none; } }

/* ========== KILL RECAP ========== */
#match-end-recap { margin: 10px auto 0; max-width: 380px; }
.recap-wrap {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 14px 12px;
}
.recap-header {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.recap-header span { font-weight: 600; }
.recap-list { display: flex; flex-direction: column; gap: 4px; }
.recap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  font-size: 0.83rem;
}
.recap-row.recap-fatal {
  background: rgba(200,50,50,0.18);
  border: 1px solid rgba(200,50,50,0.3);
}
.recap-icon { font-size: 0.9rem; flex-shrink: 0; width: 18px; text-align: center; }
.recap-cls  { flex: 1; font-weight: 600; }
.recap-dmg  { color: #e07070; font-weight: 700; font-size: 0.88rem; margin-left: auto; }
.recap-tag  {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.recap-tag.fatal { background: rgba(220,60,60,0.7); color: #fff; }
.recap-tag.crit  { background: rgba(255,200,50,0.7); color: #111; }

/* ========== SEASON BANNER / LEADERBOARD ========== */
#lb-season-banner { margin: 0 0 4px; }
.lb-season-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(232,197,114,0.12) 0%, rgba(255,106,44,0.08) 100%);
  border: 1px solid rgba(232,197,114,0.25);
  border-radius: 6px;
  margin-bottom: 2px;
}
.lb-season-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold, #e8c572);
  letter-spacing: 0.06em;
}
.lb-season-timer {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

/* Ranked / Season leaderboard row */
.lb-row-ranked { gap: 10px; }
.lb-rank-main  { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.lb-rank-name-str {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.lb-col-stat-wide { flex: 1 1 auto; min-width: 120px; }

/* ── Title tags ─────────────────────────────────────────────────────────────── */
.title-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: middle;
  opacity: 0.92;
  border: 1px solid currentColor;
  color: var(--cosm-color, #aaa);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-common    { color: #aaa; border-color: #aaa; }
.title-uncommon  { color: #4fc; border-color: #4fc; }
.title-rare      { color: #6af; border-color: #6af; }
.title-epic      { color: #b06fff; border-color: #b06fff; }
.title-legendary { color: #f90; border-color: #f90; }
.title-mythic    {
  color: #ff4aff; border-color: #ff4aff;
  animation: title-mythic-pulse 2.2s ease-in-out infinite;
}
@keyframes title-mythic-pulse {
  0%, 100% { text-shadow: 0 0 6px #ff4aff88; }
  50%       { text-shadow: 0 0 14px #ff4affcc; }
}

/* ── Cosmetics panel (profile screen) ───────────────────────────────────────── */
#profile-cosmetics {
  margin: 10px 0 4px;
}
.cosm-section {
  margin-bottom: 12px;
}
.cosm-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.cosm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cosm-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cosm-chip:hover:not(.locked) {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.9);
}
.cosm-chip.selected {
  background: rgba(232,197,114,0.15);
  border-color: var(--cosm-color, #e8c572);
  color: var(--cosm-color, #e8c572);
  box-shadow: 0 0 8px var(--cosm-color, #e8c57244);
}
.cosm-chip.locked {
  opacity: 0.38;
  cursor: default;
  border-style: dashed;
}

/* ===== FRIENDS SCREEN ===== */
#screen-friends {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 80px;
}
.friends-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  max-height: 380px;
  overflow-y: auto;
}
.friends-section-title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 14px 0 4px;
}
.friends-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.06);
}
.friends-row-pending { border-color: rgba(255,200,80,0.25); }
.friends-name { flex: 1; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-actions { display: flex; gap: 6px; flex-shrink: 0; }
.friends-btn-accept  { background: rgba(80,200,120,0.18); color: #6efa9a; font-size: 0.78rem; padding: 4px 10px; }
.friends-btn-decline { background: rgba(200,80,80,0.14);  color: #f87a7a; font-size: 0.78rem; padding: 4px 10px; }
.friends-btn-invite  { background: rgba(80,140,255,0.18); color: #7ab4ff; font-size: 0.78rem; padding: 4px 10px; }
.friends-btn-remove  { background: rgba(180,60,60,0.14);  color: #f08080; font-size: 0.78rem; padding: 4px 10px; }
.friends-empty { color: var(--text-dim); font-size: 0.85rem; text-align: center; padding: 24px 0; line-height: 1.6; }
.friends-empty-sub  { display:block; margin-top:6px; color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.friends-empty-hint { display:block; margin-top:8px; color: rgba(232,197,114,0.65); font-size: 0.72rem; letter-spacing: 0.06em; }
.friends-row-sent {
  /* Phase 3 P0 distill (2026-05-09): side-stripe → full border. */
  background: rgba(232,197,114,0.05);
  border: 1px solid rgba(232,197,114,0.4);
}
.friends-pending-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: rgba(232,197,114,0.7); margin-right:8px;
  animation: friendsPendingPulse 1.6s ease-in-out infinite;
}
.friends-pending-label {
  margin-left:auto; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color: rgba(232,197,114,0.7);
}
@keyframes friendsPendingPulse {
  0%,100% { opacity:0.4; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.25); }
}

/* Empty-state CTAs (match history full screen + profile widget). */
.hist-empty-sub { display:block; margin-top:6px; color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.hist-empty-cta { margin-top:14px; }
.history-empty  { text-align:center; padding:32px 16px; color: rgba(255,255,255,0.55); font-size: 0.85rem; line-height:1.5; }

/* Achievements list header — earned count + zero-state hint. */
.achievement-header {
  /* Phase 3 P0 distill (2026-05-09): side-stripe → full border. */
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 14px; margin-bottom: 8px;
  background: rgba(232,197,114,0.05);
  border: 1px solid rgba(232,197,114,0.5);
  border-radius: var(--r-sm);
}
.achievement-header .ach-count {
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.achievement-header .ach-hint {
  font-size: 0.78rem; color: rgba(255,255,255,0.55); font-style: italic;
}

/* Mastery grid — top class crown + subtle highlight on the row. */
.mastery-row.mastery-row-top {
  /* Phase 3 P0 distill (2026-05-09): side-stripe → full border, gold tint. */
  background: linear-gradient(90deg, rgba(232,197,114,0.10), rgba(232,197,114,0));
  border: 1px solid rgba(232,197,114,0.55);
}
.mastery-crown {
  color: var(--gold);
  font-size: 0.95em;
  margin-left: 6px;
  text-shadow: 0 0 8px rgba(232,197,114,0.65);
}
.friends-add-row { display: flex; gap: 8px; margin-top: 12px; }
.friends-uid-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  color: #fff;
  font-size: 0.85rem;
  font-family: inherit;
}
.friends-uid-hint { font-size: 0.72rem; color: var(--text-dim); margin-top: 8px; text-align: center; }
.friends-uid-value { font-family: monospace; user-select: all; color: var(--text-muted); }

/* Friend party invite banner */
.friend-invite-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(80,160,255,0.12);
  border: 1px solid rgba(80,160,255,0.28);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  flex-wrap: wrap;
}

/* Party screen — friends invite list */
.party-friends-invite-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.party-friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-xs);
}
.party-friend-name { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-friends-empty { font-size: 0.78rem; color: var(--text-dim); padding: 6px 0; font-style: italic; }

/* ===== FRIENDS ONLINE STATUS DOT ===== */
.friends-online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.12);
}
.friends-online-dot.online {
  background: #4cec6c;
  border-color: #3ad055;
  box-shadow: 0 0 5px #4cec6c88;
}

/* ===== SPECTATE SCREEN ===== */
#screen-spectate { max-width: 560px; margin: 0 auto; padding: 0 16px 80px; }
.spectate-hint { font-size: 0.82rem; color: var(--text-dim); text-align: center; margin: -6px 0 18px; }
.spectate-list { display: flex; flex-direction: column; gap: 8px; }
.spectate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
}
.spectate-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spectate-map { font-size: 0.92rem; font-weight: 600; }
.spectate-players { font-size: 0.78rem; color: var(--text-dim); }
.spectate-ranked {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 6px; background: rgba(255,200,50,0.18); color: #ffd060;
  border-radius: var(--r-xs); border: 1px solid rgba(255,200,50,0.25);
}
.spectate-watchers { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }
.spectate-btn-watch { font-size: 0.82rem; padding: 6px 14px; flex-shrink: 0; }
.spectate-loading, .spectate-empty { text-align: center; color: var(--text-dim); padding: 40px 0; font-size: 0.88rem; line-height: 1.7; }

/* ===== SPECTATOR HUD OVERLAY (during match) ===== */
body.spectating #self-hud { display: none; }
body.spectating #emote-bar { display: none !important; }
.spectator-badge {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 4px 16px;
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); pointer-events: none; z-index: 200;
}

/* ===== MATCH-END BREAKDOWN (all players) ===== */
.me-breakdown-wrap {
  margin: 12px auto;
  max-width: 480px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.me-bd-header {
  display: grid;
  grid-template-columns: 1fr 90px 16px 40px 70px;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.me-bd-row {
  display: grid;
  grid-template-columns: 1fr 90px 16px 40px 70px;
  gap: 8px;
  padding: 7px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.82rem;
  align-items: center;
}
.me-bd-self { background: rgba(255,255,255,0.05); }
.me-bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-bd-cls { color: var(--cls-color, #aaa); font-size: 0.78rem; }
.me-bd-ally { color: #6ab0ff; }
.me-bd-enemy { color: #ff8080; }
.me-bd-stat { text-align: right; }
.me-bd-label { font-size: 0.64rem; color: var(--text-dim); margin-left: 2px; }

/* ===== MATCH-END OPPONENTS (add friend) ===== */
.me-opponents-wrap {
  margin: 10px auto;
  max-width: 480px;
}
.me-opponents-title {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.me-opponent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-xs);
  margin-bottom: 4px;
}
.me-opponent-cls { font-size: 0.78rem; min-width: 80px; }
.me-opponent-name { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-opponent-add { font-size: 0.72rem; padding: 3px 10px; flex-shrink: 0; }

/* ===================================================================
   ONLINE MATCH HUD  (body.in-mp-match)
   Applied when playing a live multiplayer match — cleaner, denser,
   less chrome than the solo/tutorial layout.
   =================================================================== */

/* Class-dot and HP number elements in team rows */
.team-hp-row .cls-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.team-hp-row .hp-num {
  font-size: 0.60rem;
  color: rgba(255,255,255,0.38);
  flex-shrink: 0;
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Hide controls hint — online players already know the controls */
body.in-mp-match .controls-hint { display: none; }

/* Ping is always shown in online matches */
body.in-mp-match #mp-ping { display: block; }

/* Top HUD bar — deeper, more contrast */
body.in-mp-match #hud {
  background: linear-gradient(180deg,
    rgba(6,4,12,0.99) 0%,
    rgba(11,7,18,0.99) 60%,
    rgba(8,5,14,1.00) 100%);
  border-color: rgba(55,36,50,0.95);
}

/* Team panels — tighter padding */
body.in-mp-match .team-panel { padding: 7px 12px; gap: 3px; }

/* Ally panel left accent — stronger glow */
body.in-mp-match .team-panel:nth-child(1) {
  border-left-width: 3px;
  box-shadow: inset 3px 0 20px rgba(90,154,238,0.14), inset 0 0 40px rgba(40,80,160,0.06);
}
/* Enemy panel right accent */
body.in-mp-match .team-panel:nth-child(3) {
  border-left-width: 3px;
  box-shadow: inset -3px 0 20px rgba(224,50,82,0.14), inset 0 0 40px rgba(160,30,60,0.06);
}

/* Team label — slightly smaller, more breathing room */
body.in-mp-match .team-label { font-size: 0.68rem; letter-spacing: 0.22em; }

/* Score numbers — larger, more dominant */
body.in-mp-match .team-score {
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(232,197,114,0.7), 0 0 36px rgba(232,197,114,0.28);
}

/* HP rows — one-line compact layout */
body.in-mp-match .team-hp-row {
  gap: 5px;
  font-size: 0.66rem;
}
body.in-mp-match .team-hp-row .name {
  min-width: 68px;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
}
body.in-mp-match .team-hp-row .mini-bar {
  height: 9px;
  border-radius: 3px;
}
body.in-mp-match .team-hp-row .mini-hp { border-radius: 2px; }

/* Round center panel — clean info center */
body.in-mp-match .round-indicator {
  background: rgba(0,0,0,0.22);
  gap: 4px;
  padding: 6px 4px;
}
body.in-mp-match .ri-round {
  font-size: 0.72rem;
  letter-spacing: 0.20em;
}
body.in-mp-match .ri-pip {
  width: 13px; height: 6px;
  border-radius: 2px;
  transition: background 0.25s, box-shadow 0.25s;
}
body.in-mp-match .ri-pip.blue {
  animation: pipGlowBlue 2.2s ease-in-out infinite;
}
body.in-mp-match .ri-pip.red {
  animation: pipGlowRed 2.2s ease-in-out infinite;
}
@keyframes pipGlowBlue {
  0%,100% { box-shadow: 0 0 6px rgba(90,172,238,0.65); }
  50%      { box-shadow: 0 0 13px rgba(90,172,238,1.0); }
}
@keyframes pipGlowRed {
  0%,100% { box-shadow: 0 0 6px rgba(224,50,82,0.65); }
  50%      { box-shadow: 0 0 13px rgba(224,50,82,1.0); }
}

/* Ping — bolder, color-coded, visible */
body.in-mp-match #mp-ping {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* Self-HUD — tighter, no redundant hint */
body.in-mp-match #self-hud {
  padding: 8px 16px 9px;
  border-left-width: 5px;
}

/* Cooldown slots — cleaner in MP */
body.in-mp-match .cd-slot {
  height: 54px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(14,9,20,0.95), rgba(6,4,10,0.97));
}
body.in-mp-match .cd-slot.ready {
  box-shadow: 0 0 10px rgba(255,106,44,0.35), inset 0 0 8px rgba(255,106,44,0.08);
}
body.in-mp-match .cd-slot.ult-ready {
  box-shadow: 0 0 14px rgba(232,197,114,0.45), inset 0 0 10px rgba(232,197,114,0.10);
}

/* Kill feed — slide in from right (Phase 3 P0 distill 2026-05-09: glass blur
   removed; opaque background carries the surface). */
body.in-mp-match .kf-entry {
  animation: kfSlideIn 4.2s forwards;
  background: rgba(5,3,10,0.92);
  border-radius: 5px;
  padding: 5px 11px 4px;
}
body.in-mp-match .kf-entry.you-kill {
  background: rgba(5,14,5,0.90);
}
body.in-mp-match .kf-entry.you-died {
  background: rgba(14,5,5,0.90);
}
@keyframes kfSlideIn {
  0%   { opacity: 0; transform: translateX(22px); }
  9%   { opacity: 1; transform: translateX(0); }
  62%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}

/* ===================================================================
   BOSS RAID — VALDRIS, THE HOLLOW SOVEREIGN
   =================================================================== */

/* ---- Raid boss HUD (top of game frame, replaces team panels in raid) ---- */
#raid-boss-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 8px 16px 6px;
  background: rgba(10,6,20,0.88);
  border-bottom: 1px solid rgba(120,40,220,0.35);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.raid-boss-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
#raid-boss-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c080ff;
  letter-spacing: 0.04em;
}
#raid-boss-phase-label {
  font-size: 0.65rem;
  color: rgba(200,160,255,0.6);
  letter-spacing: 0.06em;
}
#raid-boss-hp-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
#raid-boss-hp-bar {
  flex: 1;
  position: relative;
  height: 8px;
  background: rgba(60,20,80,0.8);
  border-radius: 4px;
  overflow: visible;
}
#raid-boss-hp-fill {
  height: 100%;
  border-radius: 4px;
  background: #7030c8;
  transition: width 0.12s ease-out;
}
.raid-phase-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  background: rgba(255,255,255,0.55);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: opacity 0.4s;
}
#raid-boss-hp-text {
  font-size: 0.68rem;
  color: rgba(220,200,255,0.78);
  min-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#raid-decay-stacks {
  font-size: 0.68rem;
  color: #d080ff;
  letter-spacing: 0.08em;
  min-height: 14px;
}
#raid-decay-stacks.decay-active { color: #cc8800; }
#raid-decay-stacks.decay-danger { color: #cc2020; animation: decayPulse 0.6s infinite; }
@keyframes decayPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ---- Raid entry screen ---- */
.raid-entry-lore {
  text-align: center;
  font-size: 0.82rem;
  color: rgba(200,160,255,0.7);
  max-width: 480px;
  margin: -8px auto 18px;
  font-style: italic;
  line-height: 1.5;
}
.raid-class-kill-note {
  font-size: 0.72rem;
  color: #7ad870;
  margin-top: 6px;
}

/* ---- Home screen raid card ---- */
.home-raid-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(30,10,60,0.85) 0%, rgba(60,20,100,0.6) 100%);
  border: 1px solid rgba(120,40,220,0.45);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 4px 0;
  gap: 12px;
}
.home-raid-inner { flex: 1; }
.home-raid-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180,120,255,0.6);
  margin-bottom: 2px;
}
.home-raid-name {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c080ff;
}
.home-raid-sub {
  font-size: 0.68rem;
  color: rgba(200,160,255,0.55);
  margin-top: 2px;
}
.raid-card-stats {
  font-size: 0.7rem;
  color: rgba(200,160,255,0.65);
  margin-top: 4px;
}
.home-raid-btn {
  border-color: rgba(120,40,220,0.7);
  color: #c080ff;
  background: rgba(60,20,100,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.home-raid-btn:hover {
  background: rgba(90,30,150,0.7);
  border-color: #9040e0;
}

/* ---- Raid end screen ---- */
.raid-reward-header {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #c080ff;
  margin: 12px 0 6px;
  text-transform: uppercase;
}
.raid-reward-item {
  display: inline-block;
  background: rgba(80,20,120,0.5);
  border: 1px solid rgba(160,80,255,0.45);
  border-radius: 6px;
  padding: 6px 12px;
  margin: 4px;
  font-size: 0.82rem;
  color: #d090ff;
}
.raid-reward-item.aura-item {
  border-color: rgba(120,60,200,0.6);
  background: rgba(40,10,80,0.6);
}
.raid-reward-desc {
  font-size: 0.68rem;
  color: rgba(200,160,255,0.6);
  margin-top: 3px;
}

/* ---- Profile raid section ---- */
.raid-profile-stats {
  display: flex;
  gap: 18px;
  font-size: 0.8rem;
  color: rgba(200,160,255,0.75);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.raid-p3-badge {
  background: rgba(80,20,120,0.5);
  border: 1px solid rgba(120,40,220,0.5);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: #b060ff;
}
.raid-profile-empty {
  font-size: 0.75rem;
  color: rgba(200,160,255,0.4);
  font-style: italic;
  margin-bottom: 10px;
}

/* =================================================================
   VISUAL OVERHAUL — Session 5 (2026-05-01)
   Comprehensive UI polish pass: atmosphere, depth, micro-interactions
   ================================================================= */

/* ── Global kill feed surface (Phase 3 P0 distill 2026-05-09: glass blur
     dropped; was decorative, opaque background reads cleaner) ──────── */
.kf-entry {
  background: rgba(5,3,12,0.90);
  border-radius: 5px;
}
.kf-entry.you-kill { background: rgba(4,12,4,0.90); }
.kf-entry.you-died { background: rgba(12,4,4,0.90); }

/* ── HUD atmosphere — slightly richer shadow stack ────────────────── */
#hud {
  box-shadow:
    0 3px 20px rgba(0,0,0,0.80),
    0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
#self-hud {
  box-shadow:
    0 -3px 20px rgba(0,0,0,0.75),
    inset 6px 0 22px rgba(232,197,114,0.07),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ── Round indicator — richer center panel ───────────────────────── */
.round-indicator {
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.14) 100%);
}
.ri-round {
  text-shadow: 0 0 14px rgba(232,197,114,0.55);
}

/* ── Big-btn shimmer gets slightly brighter ──────────────────────── */
.big-btn::after {
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.10) 50%, transparent 64%);
}
.big-btn:hover {
  box-shadow: 0 10px 42px rgba(232,197,114,0.46), 0 0 0 1px rgba(240,216,130,0.55);
}

/* ── Home play button — largest CTA extra prominence ─────────────── */
.home-play-btn {
  box-shadow: 0 0 44px rgba(232,197,114,0.28), 0 6px 24px rgba(0,0,0,0.55);
  border-width: 2.5px;
}
.home-play-btn:hover {
  box-shadow: 0 12px 56px rgba(232,197,114,0.52), 0 0 0 1px rgba(240,216,130,0.65);
}

/* ── Home player card — deeper, richer ───────────────────────────── */
.home-player-card {
  background: linear-gradient(160deg, rgba(42,32,24,0.75), rgba(16,12,8,0.92));
  border-color: rgba(232,197,114,0.34);
  box-shadow: 0 0 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,197,114,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Achievement row earned — richer gold backing ────────────────── */
.achievement-row.earned {
  background: linear-gradient(90deg, rgba(62,48,20,0.40), rgba(26,22,32,0.82));
  box-shadow: inset 0 0 24px rgba(232,197,114,0.05), 0 2px 10px rgba(0,0,0,0.35);
}
.achievement-row.earned:hover {
  background: linear-gradient(90deg, rgba(72,55,22,0.48), rgba(32,26,38,0.88));
}

/* ── Login / Auth box glass upgrade ──────────────────────────────── */
.auth-box {
  background: linear-gradient(160deg, rgba(18,14,26,0.98), rgba(10,8,18,0.98));
  border-color: rgba(232,197,114,0.32);
  box-shadow: 0 12px 52px rgba(0,0,0,0.78), 0 0 0 1px rgba(232,197,114,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}
.auth-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  border-radius: 8px;
}
.auth-input:focus {
  border-color: rgba(232,197,114,0.62);
  box-shadow: 0 0 14px rgba(232,197,114,0.18);
  background: rgba(255,255,255,0.07);
}

/* ── Logo sigil — stronger home glow ─────────────────────────────── */
#screen-home .logo-sigil {
  filter: drop-shadow(0 0 28px rgba(232,197,114,0.75)) drop-shadow(0 0 56px rgba(232,197,114,0.30));
}

/* ── Online count — slightly more visible ────────────────────────── */
.online-count-bar {
  background: rgba(76,222,128,0.04);
  border: 1px solid rgba(76,222,128,0.12);
  padding: 4px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.65);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-top: -22px;
  margin-bottom: 14px;
}

/* ── Mode card size numbers — glow ───────────────────────────────── */
.mode-card-size {
  text-shadow: 0 0 18px rgba(232,197,114,0.55);
}

/* ── Class portrait — slightly stronger hover lift ───────────────── */
.class-portrait:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 26px rgba(255,106,44,0.28);
}

/* ── Mastery rows — better appearance ────────────────────────────── */
.mastery-row {
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.mastery-row:hover {
  background: rgba(30,26,38,0.85);
  border-color: rgba(232,197,114,0.22);
}
.mastery-bar, .cd-mastery-bar { border-radius: 4px; }
.mastery-fill, .cd-mastery-fill { border-radius: 4px; }

/* ── Leaderboard top-3 rank numbers ──────────────────────────────── */
.lb-row:first-child { background: rgba(232,197,114,0.06); }
.lb-row:first-child .lb-rank { font-size: 0.9rem; }
.lb-row:nth-child(2) { background: rgba(192,192,192,0.04); }
.lb-row:nth-child(3) { background: rgba(205,127,50,0.04); }

/* ── Settings rows — softer hover ────────────────────────────────── */
.setting-row {
  border-radius: 10px;
  transition: background 0.18s, border-color 0.18s;
}
.setting-row:hover {
  background: rgba(32,26,42,0.90);
  border-color: rgba(255,255,255,0.1);
}

/* ── Queue screen — more dramatic ────────────────────────────────── */
.queue-title {
  text-shadow:
    0 0 40px rgba(232,197,114,0.75),
    0 0 80px rgba(232,197,114,0.28),
    0 0 10px rgba(232,197,114,0.4);
}
.queue-spinner {
  border-top-color: var(--gold);
  border-right-color: rgba(232,197,114,0.25);
  box-shadow: 0 0 24px rgba(232,197,114,0.35), inset 0 0 10px rgba(232,197,114,0.06);
}
.queue-spinner-dot {
  box-shadow: 0 0 18px 6px rgba(232,197,114,0.65);
}

/* ── Match end score — more weight ───────────────────────────────── */
.match-end-score {
  font-size: 3.4rem;
  letter-spacing: 0.35em;
  text-shadow: 0 0 28px rgba(232,197,114,0.55), 0 0 56px rgba(232,197,114,0.22);
}
.match-stat {
  transition: transform 0.2s, box-shadow 0.2s;
}
.match-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 14px rgba(232,197,114,0.08);
}

/* ── Match end rewards — stronger pulse ──────────────────────────── */
@keyframes rewardPulse {
  0%,100% { box-shadow: 0 0 22px rgba(232,197,114,0.28), 0 4px 18px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 42px rgba(232,197,114,0.58), 0 6px 24px rgba(0,0,0,0.5); }
}

/* ── Party code display — more dramatic ──────────────────────────── */
.party-code-display {
  text-shadow: 0 0 28px rgba(232,197,114,0.65), 0 0 56px rgba(232,197,114,0.25);
  letter-spacing: 0.44em;
}

/* ── Lobby code box — richer ─────────────────────────────────────── */
.mp-code {
  background: linear-gradient(180deg, rgba(12,8,18,0.98), rgba(6,4,12,0.98));
  border-color: rgba(232,197,114,0.55);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(232,197,114,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
  letter-spacing: 0.15em;
}

/* ── MP panel — glass depth ──────────────────────────────────────── */
.mp-panel {
  background: linear-gradient(160deg, rgba(32,24,42,0.95), rgba(12,10,18,0.98));
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
}
.mp-panel input[type=text] {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.mp-panel input[type=text]:focus {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 12px rgba(232,197,114,0.16);
}

/* ── Class detail panel — richer ────────────────────────────────── */
.class-detail {
  background: linear-gradient(160deg, rgba(28,22,38,0.95), rgba(12,10,18,0.98));
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Bug modal box ───────────────────────────────────────────────── */
.bug-modal-box {
  background: linear-gradient(160deg, rgba(22,16,32,0.99), rgba(10,8,18,0.99));
  border-color: rgba(232,197,114,0.22);
  box-shadow: 0 16px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(232,197,114,0.06);
}

/* ── Faction lore modal panel — deeper ──────────────────────────── */
.flm-panel {
  background: linear-gradient(160deg, #1a1624 0%, #110f1c 60%);
}

/* ── Overlay vignette — slightly deeper ─────────────────────────── */
#overlay::before {
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.58) 100%);
}

/* ── Spectate rows ────────────────────────────────────────────────  */
.spectate-row {
  transition: background 0.18s, transform 0.18s;
}
.spectate-row:hover {
  background: rgba(30,24,40,0.85);
  transform: translateX(3px);
}

/* ── Home daily strip — more integrated ─────────────────────────── */
.home-daily-strip {
  background: linear-gradient(160deg, rgba(32,26,22,0.62), rgba(14,11,10,0.78));
  border-color: rgba(255,255,255,0.07);
}

/* ── Scrollbar theme ─────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(120,80,50,0.45); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,197,114,0.45); }

/* ── Gold accent glow on body.queueing embers ────────────────────── */
body.queueing .ember {
  box-shadow: 0 0 10px rgba(232,197,114,0.60);
  background: radial-gradient(circle, rgba(255,220,140,0.95) 0%, rgba(255,170,60,0.60) 45%, transparent 75%);
}

/* Phase 3 P0 distill (2026-05-09): the duplicate `screenFadeIn` and
   `screen-enter` @keyframes that previously lived here have been
   consolidated into the single canonical `screen-enter` definition near
   the `.menu-screen.active` rule earlier in this file. */

/* =================================================================
   VISUAL OVERHAUL — Session 6 (2026-05-01) — PHASE 2
   True visual detail: mode themes, HUD depth, bar highlights,
   screen atmospheres, faction identity, theatrical moments
   ================================================================= */

/* ── Mode cards — per-mode faction identity ───────────────────────── */
.mode-card { position: relative; overflow: hidden; }

/* Decorative ghost icon top-right */
.mode-card::before {
  position: absolute;
  right: 14px; top: 10px;
  font-size: 2.6rem; line-height: 1;
  opacity: 0.13;
  pointer-events: none;
  transition: opacity 0.28s;
}
.mode-card:hover::before { opacity: 0.26; }

/* Bottom accent bar that sweeps in on hover */
.mode-card::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  height: 3px !important; width: 0 !important;
  transition: width 0.32s var(--ease-out) !important;
  border-radius: 0 0 10px 10px !important;
  background: var(--ember) !important;
}
.mode-card:hover::after { width: 100% !important; }

/* 1v1 — Steel blue / Duelist */
.mode-card[data-mode="1v1"] {
  background: linear-gradient(148deg, rgba(16,26,44,0.94) 0%, rgba(8,12,22,0.97) 100%);
  border-color: rgba(90,154,238,0.42);
}
.mode-card[data-mode="1v1"]::before { content: '⚔'; }
.mode-card[data-mode="1v1"]::after  { background: rgba(90,154,238,0.85) !important; }
.mode-card[data-mode="1v1"] .mode-card-size  { color: #7fb8ff; text-shadow: 0 0 22px rgba(127,184,255,0.65); }
.mode-card[data-mode="1v1"] .mode-card-title { color: #9ecfff; }
.mode-card[data-mode="1v1"]:hover {
  border-color: rgba(90,154,238,0.80);
  box-shadow: 0 14px 40px rgba(90,154,238,0.26), 0 0 0 1px rgba(90,154,238,0.22), 0 0 60px rgba(90,154,238,0.07);
  background: linear-gradient(148deg, rgba(20,34,60,0.96) 0%, rgba(10,16,30,0.99) 100%);
}

/* 2v2 — Ember orange / Pair */
.mode-card[data-mode="2v2"] {
  background: linear-gradient(148deg, rgba(38,20,12,0.94) 0%, rgba(16,8,4,0.97) 100%);
  border-color: rgba(255,106,44,0.42);
}
.mode-card[data-mode="2v2"]::before { content: '🛡'; }
.mode-card[data-mode="2v2"]::after  { background: var(--ember) !important; }
.mode-card[data-mode="2v2"] .mode-card-size  { color: #ff9060; text-shadow: 0 0 22px rgba(255,144,96,0.65); }
.mode-card[data-mode="2v2"] .mode-card-title { color: #ffb07a; }
.mode-card[data-mode="2v2"]:hover {
  border-color: rgba(255,106,44,0.80);
  box-shadow: 0 14px 40px rgba(255,106,44,0.26), 0 0 0 1px rgba(255,106,44,0.22), 0 0 60px rgba(255,106,44,0.07);
  background: linear-gradient(148deg, rgba(54,26,12,0.96) 0%, rgba(22,10,4,0.99) 100%);
}

/* 3v3 — Gold / Squad */
.mode-card[data-mode="3v3"] {
  background: linear-gradient(148deg, rgba(36,26,12,0.94) 0%, rgba(16,12,4,0.97) 100%);
  border-color: rgba(232,197,114,0.42);
}
.mode-card[data-mode="3v3"]::before { content: '★'; }
.mode-card[data-mode="3v3"]::after  { background: var(--gold) !important; }
.mode-card[data-mode="3v3"] .mode-card-size  { color: var(--gold); text-shadow: 0 0 22px rgba(232,197,114,0.65); }
.mode-card[data-mode="3v3"] .mode-card-title { color: var(--gold); }
.mode-card[data-mode="3v3"]:hover {
  border-color: rgba(232,197,114,0.80);
  box-shadow: 0 14px 40px rgba(232,197,114,0.26), 0 0 0 1px rgba(232,197,114,0.22), 0 0 60px rgba(232,197,114,0.07);
  background: linear-gradient(148deg, rgba(50,38,16,0.96) 0%, rgba(22,16,6,0.99) 100%);
}

/* 5v5 — Crimson / War */
.mode-card[data-mode="5v5"] {
  background: linear-gradient(148deg, rgba(42,12,16,0.94) 0%, rgba(18,6,8,0.97) 100%);
  border-color: rgba(196,50,74,0.42);
}
.mode-card[data-mode="5v5"]::before { content: '⚡'; }
.mode-card[data-mode="5v5"]::after  { background: var(--crimson) !important; }
.mode-card[data-mode="5v5"] .mode-card-size  { color: #ff6080; text-shadow: 0 0 22px rgba(255,96,128,0.65); }
.mode-card[data-mode="5v5"] .mode-card-title { color: #ff8090; }
.mode-card[data-mode="5v5"]:hover {
  border-color: rgba(196,50,74,0.80);
  box-shadow: 0 14px 40px rgba(196,50,74,0.26), 0 0 0 1px rgba(196,50,74,0.22), 0 0 60px rgba(196,50,74,0.07);
  background: linear-gradient(148deg, rgba(58,16,20,0.96) 0%, rgba(24,8,10,0.99) 100%);
}

/* ── Play hub buttons — distinctive decorative icons ─────────────── */
.play-hub-grid .big-btn { position: relative; overflow: hidden; }

/* Ghost icon (right side, behind text content) */
.play-hub-grid .big-btn::before {
  content: '';
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  font-style: normal;
  font-size: 2rem; line-height: 1;
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 0;
}
.play-hub-grid .big-btn:hover::before { opacity: 0.30; }

/* Assign icons per button type */
.play-hub-grid .big-btn:not(.secondary):not(.queue-btn):not(.warband-btn):not(.training-btn)::before { content: '⚔'; }
.play-hub-grid .big-btn.secondary::before   { content: '◎'; }
.play-hub-grid .big-btn.queue-btn::before   { content: '⚡'; }
.play-hub-grid .big-btn.warband-btn::before { content: '◈'; }
.play-hub-grid .big-btn.training-btn::before { content: '⊕'; }

/* Warband — shadow/purple identity */
.big-btn.warband-btn {
  border-color: rgba(120,60,180,0.70);
  box-shadow: 0 0 28px rgba(106,42,168,0.18), 0 4px 16px rgba(0,0,0,0.45);
}
.big-btn.warband-btn:hover {
  box-shadow: 0 12px 48px rgba(106,42,168,0.42), 0 0 0 1px rgba(130,70,200,0.55);
}

/* Training — steel teal */
.big-btn.training-btn {
  border-color: rgba(70,130,195,0.60);
  box-shadow: 0 0 24px rgba(70,130,195,0.12), 0 4px 16px rgba(0,0,0,0.40);
}
.big-btn.training-btn:hover {
  box-shadow: 0 12px 48px rgba(70,130,195,0.36), 0 0 0 1px rgba(70,130,195,0.50);
}

/* ── In-game HP / ULT / RAGE bar fills — richer multi-stop gradients ─ */

/* Bar container: inner top highlight streak */
.bar { position: relative; }
.bar::after {
  content: '';
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent);
  border-radius: 5px 5px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* HP fill — vivid crimson combat aesthetic with highlight */
.hp-fill {
  background: linear-gradient(90deg,
    #5c0810 0%,
    #a01c2e 22%,
    #d82c44 45%,
    #f04864 60%,
    #d82c44 78%,
    #a01c2e 100%
  );
  box-shadow: 0 0 14px rgba(220,44,68,0.60), inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ULT fill — amber-to-gold ritual power */
.ult-fill {
  background: linear-gradient(90deg,
    #b05208 0%,
    #d8800c 25%,
    #ffc030 48%,
    #ffd84a 55%,
    #ffc030 68%,
    #d8800c 80%,
    #b05208 100%
  );
  box-shadow: 0 0 16px rgba(220,128,20,0.72), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* RAGE fill — deep crimson berserker fire */
.rage-fill {
  background: linear-gradient(90deg,
    #7a1400 0%,
    #bc2200 28%,
    #ec4000 52%,
    #ff6420 60%,
    #ec4000 72%,
    #bc2200 88%,
    #7a1400 100%
  );
  box-shadow: 0 0 14px rgba(200,36,0,0.70), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* Mini HP in team panel — inner top highlight */
.mini-hp { position: relative; overflow: hidden; }
.mini-hp::after {
  content: '';
  position: absolute; inset: 0; top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.team-hp-row.ally .mini-hp {
  background: linear-gradient(90deg, #145a9a, #2890d8, #44b0f4);
  box-shadow: 0 0 8px rgba(68,176,244,0.50);
}

/* ── HUD team panels — vivid team color header strips ──────────────── */
#team-p1 {
  border-top: 3px solid rgba(100,170,255,0.88) !important;
  box-shadow:
    inset 0 5px 22px rgba(100,170,255,0.12),
    inset 4px 0 16px rgba(90,154,238,0.07) !important;
}
#team-p1 .team-label.blue { text-shadow: 0 0 16px rgba(127,184,255,0.70); }
#team-p1 .team-score      { text-shadow: 0 0 20px rgba(127,184,255,0.55); }

#team-p2 {
  border-top: 3px solid rgba(222,62,82,0.88) !important;
  box-shadow:
    inset 0 5px 22px rgba(220,60,80,0.12),
    inset -4px 0 16px rgba(224,50,82,0.07) !important;
}
#team-p2 .team-label.red { text-shadow: 0 0 16px rgba(255,120,120,0.70); }
#team-p2 .team-score     { text-shadow: 0 0 20px rgba(255,120,120,0.55); }

/* ── Round indicator — decorative treatment ───────────────────────── */
.round-indicator { position: relative; overflow: hidden; }
.round-indicator::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 50px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,197,114,0.75), transparent);
  border-radius: 1px;
}
.ri-round {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(232,197,114,0.55);
}

/* ── Self-HUD — deeper atmosphere, stronger gold edge ──────────────
   Phase 3 P0 distill follow-up (2026-05-09): 6px gold side-stripe
   dropped; the inset gold glow at 32px / 12% alpha already carries the
   directional gold motif, and the canonical rule above set a thin
   gold full border. */
#self-hud {
  background: linear-gradient(180deg,
    rgba(22,14,30,0.99) 0%,
    rgba(13,8,20,0.99) 55%,
    rgba(7,4,12,0.99) 100%
  ) !important;
  box-shadow:
    0 -5px 26px rgba(0,0,0,0.85),
    inset 6px 0 32px rgba(232,197,114,0.12),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.self-name {
  border-bottom: 1px solid rgba(232,197,114,0.14);
  padding-bottom: 4px;
  margin-bottom: 3px;
  text-shadow: 0 0 14px rgba(232,197,114,0.35);
}

/* ── Cooldown slots — glass depth, sharper key labels ─────────────── */
.cd-slot {
  background: linear-gradient(160deg, rgba(24,16,32,0.97), rgba(12,7,18,0.99)) !important;
  border: 1px solid rgba(76,50,62,0.65) !important;
  box-shadow:
    0 3px 14px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
  border-radius: 9px !important;
}
.cd-slot .key {
  font-size: 1.0rem !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(232,197,114,0.48) !important;
  letter-spacing: 0.03em !important;
}
.cd-slot .name {
  color: rgba(195,178,158,0.62) !important;
  font-size: 0.54rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}
#dodge-slot {
  background: linear-gradient(160deg, rgba(18,13,26,0.97), rgba(10,6,16,0.99));
  border: 1px solid rgba(70,45,58,0.60);
  box-shadow: 0 3px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  border-radius: 9px;
}
#dodge-slot .key { color: rgba(195,178,158,0.88); text-shadow: none; font-weight: 600; }

/* ── Arena wrap — decorative gold corner accents ──────────────────── */
#arena-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 24px;
  border-top: 2px solid rgba(232,197,114,0.50);
  border-left: 2px solid rgba(232,197,114,0.50);
  pointer-events: none;
  z-index: 10;
}
#arena-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 24px; height: 24px;
  border-bottom: 2px solid rgba(232,197,114,0.50);
  border-right: 2px solid rgba(232,197,114,0.50);
  pointer-events: none;
  z-index: 10;
}

/* ── Per-screen atmospheric backgrounds ──────────────────────────── */
#screen-class       { background: radial-gradient(ellipse at 50% 0%, rgba(56,32,12,0.20) 0%, transparent 52%); }
#screen-leaderboard { background: radial-gradient(ellipse at 50% 0%, rgba(232,197,114,0.09) 0%, transparent 48%); }
#screen-achievements{ background: radial-gradient(ellipse at 50% 0%, rgba(232,197,114,0.07) 0%, transparent 50%); }
#screen-profile     { background: radial-gradient(ellipse at 50% 0%, rgba(80,130,200,0.08) 0%, transparent 50%); }
#screen-daily       { background: radial-gradient(ellipse at 50% 0%, rgba(196,140,48,0.08) 0%, transparent 50%); }
#screen-mp          { background: radial-gradient(ellipse at 50% 0%, rgba(80,140,220,0.07) 0%, transparent 50%); }
#screen-mp-lobby    { background: radial-gradient(ellipse at 50% 0%, rgba(80,140,220,0.07) 0%, transparent 50%); }
#screen-party       { background: radial-gradient(ellipse at 50% 0%, rgba(106,42,168,0.09) 0%, transparent 50%); }
#screen-queue       { background: radial-gradient(ellipse at 50% 20%, rgba(232,197,114,0.07) 0%, transparent 55%); }
#screen-collection  { background: radial-gradient(ellipse at 50% 0%, rgba(70,110,175,0.08) 0%, transparent 50%); }
#screen-friends     { background: radial-gradient(ellipse at 50% 0%, rgba(60,180,110,0.05) 0%, transparent 45%); }
#screen-raid        { background: radial-gradient(ellipse at 50% 0%, rgba(100,20,180,0.12) 0%, transparent 48%); }
#screen-raid-end    { background: radial-gradient(ellipse at 50% 0%, rgba(80,20,140,0.10) 0%, transparent 50%); }
#screen-match-end.me-won  { background: radial-gradient(ellipse at 50% 8%, rgba(232,197,114,0.13) 0%, transparent 52%); }
#screen-match-end.me-lost { background: radial-gradient(ellipse at 50% 8%, rgba(196,50,74,0.09) 0%, transparent 52%); }

/* ── Leaderboard — medal treatment for top 3 ─────────────────────── */
.lb-row:first-child {
  /* Phase 3 P0 distill (2026-05-09): gold side-stripe → full gold border. */
  background: linear-gradient(90deg, rgba(232,197,114,0.11), rgba(232,197,114,0.02)) !important;
  border: 1px solid rgba(232,197,114,0.55);
}
.lb-row:first-child .lb-rank {
  color: var(--gold) !important;
  font-size: 0.95rem !important;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(232,197,114,0.65);
}
.lb-row:nth-child(2) {
  /* Phase 3 P0 distill (2026-05-09): silver side-stripe → full silver border. */
  background: linear-gradient(90deg, rgba(195,210,225,0.07), rgba(195,210,225,0.01)) !important;
  border: 1px solid rgba(195,210,225,0.45);
}
.lb-row:nth-child(2) .lb-rank { color: rgba(200,215,228,0.90) !important; font-weight: 700; }
.lb-row:nth-child(3) {
  /* Phase 3 P0 distill (2026-05-09): bronze side-stripe → full bronze border. */
  background: linear-gradient(90deg, rgba(195,120,58,0.08), rgba(195,120,58,0.01)) !important;
  border: 1px solid rgba(195,120,58,0.45);
  padding-left: 9px;
}
.lb-row:nth-child(3) .lb-rank { color: rgba(215,140,75,0.90) !important; font-weight: 700; }

/* ── Section labels — enhanced gold gradient trailing line ────────── */
.section-label::after {
  background: linear-gradient(to right, rgba(232,197,114,0.25), transparent) !important;
}

/* ── Profile section title — gold underline accent ─────────────────── */
.profile-section-title {
  position: relative;
  padding-bottom: 9px;
  margin-bottom: 15px;
}
.profile-section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 2px;
  background: linear-gradient(to right, rgba(232,197,114,0.72), transparent);
  border-radius: 1px;
}

/* ── Profile stat cards — richer hover + gradient values ──────────── */
.profile-stat-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 26px rgba(0,0,0,0.55), 0 0 18px rgba(232,197,114,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
.profile-stat-value {
  /* Phase 3 P0 distill (2026-05-09): gradient text removed per DESIGN.md
     "A solid `divine-order-gold` carries every other heading." Logo is the
     only permitted gradient-text exception. */
  color: var(--gold);
  text-shadow: 0 0 6px rgba(232,197,114,0.45);
}

/* ── Faction banners — per-faction hover identity glow ───────────── */
.fb-human   { box-shadow: inset 0 0 50px rgba(90,154,238,0.07); }
.fb-undead  { box-shadow: inset 0 0 50px rgba(50,200,180,0.07); }
.fb-celestial { box-shadow: inset 0 0 50px rgba(232,197,114,0.07); }
.fb-demon   { box-shadow: inset 0 0 50px rgba(196,50,74,0.07); }
.fb-human:hover    { border-color: rgba(90,154,238,0.58) !important; box-shadow: 0 0 42px rgba(90,154,238,0.18), inset 0 0 80px rgba(90,154,238,0.13) !important; }
.fb-undead:hover   { border-color: rgba(50,200,180,0.58) !important; box-shadow: 0 0 42px rgba(50,200,180,0.18), inset 0 0 80px rgba(50,200,180,0.13) !important; }
.fb-celestial:hover{ border-color: rgba(232,197,114,0.68) !important; box-shadow: 0 0 42px rgba(232,197,114,0.22), inset 0 0 80px rgba(232,197,114,0.15) !important; }
.fb-demon:hover    { border-color: rgba(196,50,74,0.58) !important;  box-shadow: 0 0 42px rgba(196,50,74,0.18), inset 0 0 80px rgba(196,50,74,0.13) !important; }

/* ── Class portraits — selected ring more prominent ─────────────── */
.class-portrait:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(255,106,44,0.35), 0 0 0 2px rgba(255,106,44,0.42) !important;
}
.class-portrait.selected {
  box-shadow: 0 0 0 3px var(--gold), 0 6px 26px rgba(232,197,114,0.45) !important;
}

/* ── MP lobby player cards — team color identity (Phase 3 P0 distill,
     2026-05-09: side-stripe → full team-tinted border. The inset glow
     preserves the directional team accent without the AI-slop stripe.) */
.mp-team-blue .mp-player-card {
  border: 1px solid rgba(90,154,238,0.55);
  box-shadow: inset 3px 0 16px rgba(90,154,238,0.08);
}
.mp-team-red .mp-player-card {
  border: 1px solid rgba(224,50,82,0.55);
  box-shadow: inset 3px 0 16px rgba(224,50,82,0.08);
}
.mp-team-blue .mp-team-header {
  color: #7fb8ff;
  border-bottom: 1px solid rgba(90,154,238,0.28);
  text-shadow: 0 0 14px rgba(127,184,255,0.40);
  font-family: var(--font-display);
  letter-spacing: 0.2em;
}
.mp-team-red .mp-team-header {
  color: #ff7a7a;
  border-bottom: 1px solid rgba(224,50,82,0.28);
  text-shadow: 0 0 14px rgba(255,122,122,0.40);
  font-family: var(--font-display);
  letter-spacing: 0.2em;
}
.mp-vs {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(232,197,114,0.55);
  letter-spacing: 0.1em;
}

/* ── Mastery fill — ember-to-gold vibrant gradient ───────────────── */
.mastery-fill {
  background: linear-gradient(90deg, #d04000 0%, var(--ember) 40%, var(--gold) 100%) !important;
  box-shadow: 0 0 8px rgba(232,197,114,0.30);
}
.cd-mastery-fill {
  background: linear-gradient(90deg, rgba(70,130,220,0.7) 0%, rgba(120,176,255,0.9) 100%) !important;
  box-shadow: 0 0 7px rgba(120,176,255,0.28);
}

/* ── Match end stat labels — sharper typographic treatment ────────── */
.match-stat-label {
  letter-spacing: 0.16em;
  font-size: 0.60rem;
  text-transform: uppercase;
  color: rgba(175,160,140,0.70);
}
.match-stat-value {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(232,197,114,0.38);
}

/* ── Daily challenge cards — richer progress treatment ───────────── */
.daily-card {
  background: linear-gradient(135deg, rgba(28,22,36,0.95), rgba(12,9,18,0.98)) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.50);
}
.daily-card:hover {
  box-shadow: 0 7px 26px rgba(0,0,0,0.58), 0 0 18px rgba(232,197,114,0.06);
  transform: translateX(5px);
}
.daily-card.done {
  border-left-color: var(--gold) !important;
  box-shadow: 0 3px 16px rgba(0,0,0,0.45), inset 4px 0 18px rgba(232,197,114,0.07) !important;
}

/* ── Lobby browser rows — richer glass row ───────────────────────── */
.lobby-row {
  background: linear-gradient(90deg, rgba(24,18,32,0.90), rgba(14,11,20,0.94));
  border-radius: 6px;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.lobby-row:hover {
  background: linear-gradient(90deg, rgba(30,22,42,0.94), rgba(18,13,26,0.97));
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,197,114,0.10);
}

/* ── Party member rows — cleaner dark glass ───────────────────────── */
.party-member-row {
  background: linear-gradient(90deg, rgba(24,18,34,0.92), rgba(14,10,20,0.96)) !important;
  border-radius: 8px !important;
  transition: background 0.18s !important;
}
.party-member-row:hover {
  background: linear-gradient(90deg, rgba(32,24,44,0.95), rgba(20,14,28,0.98)) !important;
}
.party-member-row.you {
  border-left-color: var(--gold) !important;
  box-shadow: inset 3px 0 12px rgba(232,197,114,0.07) !important;
}

/* ── Spectate screen rows ─────────────────────────────────────────── */
.spectate-row {
  background: linear-gradient(90deg, rgba(22,16,30,0.90), rgba(13,10,20,0.94));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.spectate-row:hover {
  background: linear-gradient(90deg, rgba(28,20,40,0.94), rgba(17,12,26,0.98));
  border-color: rgba(232,197,114,0.14);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.48);
}

/* ── msg-toast — richer themed shadows ───────────────────────────── */
#msg-toast       { box-shadow: 0 4px 22px rgba(0,0,0,0.68); }
#msg-toast.ok    { box-shadow: 0 4px 22px rgba(0,0,0,0.68), 0 0 14px rgba(80,220,100,0.18); }
#msg-toast.error { box-shadow: 0 4px 22px rgba(0,0,0,0.68), 0 0 14px rgba(224,50,82,0.20); }
#msg-toast.warn  { box-shadow: 0 4px 22px rgba(0,0,0,0.68), 0 0 14px rgba(232,197,114,0.18); }

/* ── Tutorial panel — glass treatment ────────────────────────────── */
.tut-panel {
  background: linear-gradient(160deg, rgba(18,12,28,0.97), rgba(10,7,18,0.99)) !important;
  border: 1px solid rgba(232,197,114,0.28) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.72), 0 0 0 1px rgba(232,197,114,0.06) !important;
}
.tut-key-hint {
  background: linear-gradient(160deg, rgba(38,28,52,0.95), rgba(20,14,30,0.98)) !important;
  border-color: rgba(232,197,114,0.48) !important;
  box-shadow: 0 0 20px rgba(232,197,114,0.22) !important;
}

/* ── Home action buttons — icon drop-shadow polish ────────────────── */
.home-action-icon {
  filter: drop-shadow(0 0 6px rgba(232,197,114,0.30));
  transition: filter 0.2s;
}
.home-action-btn:hover .home-action-icon {
  filter: drop-shadow(0 0 10px rgba(232,197,114,0.55));
}

/* ── Kill feed — refined glass borders ────────────────────────────── */
.kf-entry {
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.60) !important;
}
.kf-entry.you-kill {
  border-color: rgba(70,210,90,0.14) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.65), inset 0 0 16px rgba(70,210,90,0.04) !important;
}
.kf-entry.you-died {
  border-color: rgba(224,50,82,0.14) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.65), inset 0 0 16px rgba(224,50,82,0.04) !important;
}

/* ── Rank badge glows ──────────────────────────────────────────────── */
.rank-badge        { box-shadow: 0 1px 6px rgba(0,0,0,0.42); }
.rank-badge.large  { box-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 0 22px rgba(232,197,114,0.12); }

/* ── Home player card — extra depth on portrait area ─────────────── */
.hpc-portrait-wrap {
  box-shadow: 0 0 0 1px rgba(232,197,114,0.22), 0 0 18px rgba(232,197,114,0.14) !important;
}

/* ── Screen titles — slightly longer flanking lines ──────────────── */
.screen-title::before { width: 110px !important; }
.screen-title::after  { width: 110px !important; }

/* ── Coll-card faction faction-color glow borders ─────────────────── */
.coll-card[data-faction="human"]:hover     { border-color: rgba(90,154,238,0.55);  box-shadow: 0 6px 22px rgba(90,154,238,0.18); }
.coll-card[data-faction="undead"]:hover    { border-color: rgba(50,200,180,0.55);  box-shadow: 0 6px 22px rgba(50,200,180,0.18); }
.coll-card[data-faction="celestial"]:hover { border-color: rgba(232,197,114,0.65); box-shadow: 0 6px 22px rgba(232,197,114,0.22); }
.coll-card[data-faction="demon"]:hover     { border-color: rgba(196,50,74,0.55);   box-shadow: 0 6px 22px rgba(196,50,74,0.18); }

/* ── Achievement rows — richer earned glow (Phase 3 P0 distill 2026-05-09:
     side-stripe → full gold border) */
.achievement-row.earned {
  background: linear-gradient(90deg, rgba(60,46,18,0.42), rgba(24,20,32,0.84)) !important;
  border: 1px solid rgba(232,197,114,0.50);
  box-shadow: inset 0 0 26px rgba(232,197,114,0.06), 0 2px 10px rgba(0,0,0,0.38) !important;
}

/* ── Auth inputs — golden focus ring ─────────────────────────────── */
.auth-input:focus {
  border-color: rgba(232,197,114,0.65) !important;
  box-shadow: 0 0 0 3px rgba(232,197,114,0.10), 0 0 16px rgba(232,197,114,0.18) !important;
}

/* ── Match end reward cards ───────────────────────────────────────── */
.match-reward-row {
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(28,22,36,0.94), rgba(14,11,20,0.97));
}

/* ── Online match: in-mp-match scoped reinforcements ─────────────── */
body.in-mp-match #team-p1 {
  border-top-color: rgba(100,170,255,0.95) !important;
}
body.in-mp-match #team-p2 {
  border-top-color: rgba(224,62,85,0.95) !important;
}

/* =================================================================
   RAID ENTRY SCREEN — Full redesign
   ================================================================= */
.raid-entry-screen { padding: 0 !important; overflow: hidden; }
.raid-entry-layout {
  display: flex; height: 100%; width: 100%; overflow: hidden;
}

/* ── Left: Boss Briefing Panel ─────────────────────────────────── */
.raid-brief-panel {
  width: 340px; min-width: 300px; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(18,6,40,0.98) 0%, rgba(8,3,20,0.99) 100%);
  border-right: 1px solid rgba(140,50,220,0.3);
  padding: 28px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.raid-brief-eyebrow {
  font-size: 0.58rem; letter-spacing: 0.22em; color: rgba(180,100,255,0.5);
  text-transform: uppercase;
}
.raid-brief-name {
  font-family: Cinzel, serif; font-size: 1.5rem; font-weight: 700;
  color: #d090ff; line-height: 1.15;
  text-shadow: 0 0 24px rgba(160,60,255,0.5);
}
.raid-brief-name span { font-size: 0.95rem; color: rgba(200,140,255,0.75); }
.raid-brief-tagline {
  /* Phase 3 P0 distill (2026-05-09): side-stripe → leading sigil mark + indent. */
  font-style: italic; font-size: 0.8rem; color: rgba(180,130,255,0.6);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.raid-brief-tagline::before {
  content: '✦';
  position: absolute;
  left: 0; top: 0;
  color: rgba(140,50,220,0.7);
  font-size: 0.7rem;
}
.raid-brief-danger {
  display: flex; align-items: center; gap: 5px;
}
.danger-pip {
  width: 12px; height: 12px; border-radius: 2px;
  background: #cc2020; box-shadow: 0 0 6px rgba(220,30,30,0.7);
}
.danger-label {
  font-size: 0.62rem; letter-spacing: 0.14em; color: #cc4040;
  text-transform: uppercase; margin-left: 4px;
}

/* Phase list */
.raid-brief-phases { display: flex; flex-direction: column; gap: 8px; }
.raid-phase-entry {
  /* Phase 3 P0 distill (2026-05-09): side-stripe → full purple-tinted border;
     phase-state classes override the color. */
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(60,20,100,0.2); border-radius: 6px;
  padding: 8px 10px; border: 1px solid rgba(100,40,180,0.5);
}
.raid-phase-entry.p2 { border-color: rgba(40,160,200,0.5); }
.raid-phase-entry.p3 { border-color: rgba(200,30,30,0.6); background: rgba(80,10,20,0.25); }
.rpe-num {
  font-family: Cinzel, serif; font-size: 0.75rem; font-weight: 700;
  color: rgba(200,140,255,0.6); min-width: 14px; padding-top: 1px;
}
.rpe-title { font-size: 0.78rem; font-weight: 600; color: rgba(220,170,255,0.85); }
.rpe-desc { font-size: 0.68rem; color: rgba(180,130,255,0.55); margin-top: 2px; }

/* Mechanics */
.raid-brief-mechanic-header {
  font-size: 0.58rem; letter-spacing: 0.18em; color: rgba(180,100,255,0.45);
  text-transform: uppercase; margin-top: 4px;
}
.raid-mechanics-list { display: flex; flex-direction: column; gap: 9px; }
.raid-mechanic-row {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.72rem; color: rgba(200,155,255,0.65); line-height: 1.45;
}
.raid-mechanic-row strong { color: rgba(220,180,255,0.9); }
.rm-icon { color: rgba(180,80,255,0.6); flex-shrink: 0; margin-top: 1px; }

/* ── Right: Class Picker Panel ─────────────────────────────────── */
.raid-class-panel {
  flex: 1; display: flex; flex-direction: column;
  padding: 22px 22px 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(14,8,28,0.97) 0%, rgba(10,6,20,0.99) 100%);
}
.raid-class-header {
  font-family: Cinzel, serif; font-size: 0.9rem; letter-spacing: 0.1em;
  color: rgba(200,150,255,0.7); text-transform: uppercase;
  margin-bottom: 14px; text-align: center;
}
.raid-class-grid-new {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.raid-class-tile {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(40,15,70,0.5); border: 1px solid rgba(100,40,180,0.3);
  border-radius: 8px; padding: 8px 6px 6px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.raid-class-tile:hover { background: rgba(60,20,100,0.6); border-color: rgba(140,60,220,0.6); }
.raid-class-tile.selected {
  border-color: #9040e0; background: rgba(80,20,130,0.65);
  box-shadow: 0 0 12px rgba(140,60,220,0.3);
}
.raid-class-tile.locked { opacity: 0.4; cursor: not-allowed; }
.raid-class-tile canvas { border-radius: 4px; }
.raid-tile-name {
  font-size: 0.65rem; color: rgba(200,160,255,0.8); margin-top: 4px;
  text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; width: 100%;
}
.raid-tile-role {
  font-size: 0.57rem; color: rgba(160,110,230,0.55);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px;
  text-align: center;
}
.raid-class-kills-badge {
  position: absolute; top: 4px; right: 4px;
  background: rgba(80,200,80,0.2); border: 1px solid rgba(80,200,80,0.45);
  border-radius: 3px; font-size: 0.55rem; color: #7ad870;
  padding: 1px 4px; line-height: 1.3;
}

/* Detail panel */
.raid-class-detail-new {
  background: rgba(30,10,60,0.45); border: 1px solid rgba(100,40,180,0.25);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; min-height: 54px;
  flex-shrink: 0;
}
.rcd-name { font-family: Cinzel,serif; font-size:0.85rem; color:#c080ff; font-weight:700; }
.rcd-faction { font-size:0.65rem; color:rgba(160,110,230,0.6); text-transform:uppercase; letter-spacing:0.1em; margin:2px 0 4px; }
.rcd-passive { font-size:0.73rem; color:rgba(200,160,255,0.75); }
.rcd-passive strong { color:rgba(220,180,255,0.9); }
.rcd-kills { font-size:0.68rem; color:#7ad870; margin-top:5px; }

/* Entry action buttons */
.raid-entry-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.raid-solo-btn { background: rgba(80,20,140,0.6) !important; border-color: rgba(140,60,220,0.7) !important; color: #c080ff !important; flex: 1; }
.raid-solo-btn:hover { background: rgba(100,30,170,0.75) !important; }
.raid-party-btn { background: rgba(20,60,100,0.6) !important; border-color: rgba(50,140,220,0.6) !important; color: #70c0ff !important; flex: 1; }
.raid-party-btn:hover { background: rgba(20,70,120,0.75) !important; }
.raid-join-btn { background: rgba(20,80,50,0.6) !important; border-color: rgba(50,180,100,0.6) !important; color: #70d890 !important; flex: 1; }
.raid-join-btn:hover { background: rgba(20,90,60,0.75) !important; }
.raid-join-row {
  display: flex; gap: 8px; margin-top: 8px; align-items: center;
}
.raid-code-input {
  flex: 1; background: rgba(20,10,40,0.8); border: 1px solid rgba(100,40,180,0.4);
  border-radius: 6px; color: #d090ff; padding: 8px 12px;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  outline: none;
}
.raid-code-input:focus { border-color: rgba(140,60,220,0.8); }

/* =================================================================
   RAID PARTY SCREEN
   ================================================================= */
#screen-raid-party { padding: 0 !important; }
.raid-party-layout {
  display: flex; flex-direction: column; height: 100%;
}
.raid-party-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: rgba(12,6,26,0.95);
  border-bottom: 1px solid rgba(120,40,220,0.25);
  flex-shrink: 0;
}
.rp-title-wrap { flex: 1; display: flex; align-items: baseline; gap: 12px; }
.rp-screen-title {
  font-family: Cinzel,serif; font-size: 1rem; color: #c080ff;
  letter-spacing: 0.12em;
}
.rp-code-label { font-size: 0.75rem; color: rgba(200,150,255,0.55); }
.rp-code-label strong {
  color: #e0a0ff; font-family: monospace; font-size: 1rem;
  letter-spacing: 0.18em;
}
.rp-member-count { font-size: 0.72rem; color: rgba(200,150,255,0.5); }

.raid-party-body {
  flex: 1; display: flex; gap: 0; overflow: hidden;
}
.raid-party-left {
  width: 280px; flex-shrink: 0; border-right: 1px solid rgba(100,40,180,0.2);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.raid-party-right {
  flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 8px;
}
.rp-section-title {
  font-size: 0.6rem; letter-spacing: 0.18em; color: rgba(180,100,255,0.45);
  text-transform: uppercase; margin-bottom: 4px;
}

/* Member list */
.rp-member-list { display: flex; flex-direction: column; gap: 6px; }
.rp-member-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(40,15,70,0.45); border: 1px solid rgba(100,40,180,0.25);
  border-radius: 6px; padding: 7px 10px;
}
.rp-member-row.is-leader { border-color: rgba(220,160,80,0.4); background: rgba(50,25,10,0.4); }
.rp-member-avatar { width: 36px; height: 44px; flex-shrink: 0; border-radius: 4px; }
.rp-member-info { flex: 1; min-width: 0; }
.rp-member-name {
  font-size: 0.78rem; font-weight: 600; color: rgba(220,180,255,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-member-row.is-leader .rp-member-name::after {
  content: ' ♛'; color: rgba(220,160,80,0.8); font-size: 0.65rem;
}
.rp-member-class { font-size: 0.65rem; color: rgba(170,120,230,0.6); }
.rp-empty-slot {
  font-size: 0.7rem; color: rgba(140,80,200,0.3); font-style: italic;
  background: rgba(30,10,50,0.3); border: 1px dashed rgba(100,40,180,0.2);
  border-radius: 6px; padding: 7px 10px;
}

/* Class row */
.rp-class-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: rgba(30,10,60,0.4);
  border: 1px solid rgba(100,40,180,0.2); border-radius: 6px;
  font-size: 0.75rem; color: rgba(180,130,255,0.6);
}
.rp-my-class-name { color: #c080ff; font-weight: 600; flex: 1; }

/* Chat */
.rp-chat-log {
  flex: 1; overflow-y: auto; background: rgba(12,6,24,0.6);
  border: 1px solid rgba(80,30,140,0.25); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.rp-chat-msg {
  font-size: 0.75rem; line-height: 1.4;
}
.rp-chat-name { color: #c080ff; font-weight: 600; margin-right: 5px; }
.rp-chat-system { color: rgba(180,130,255,0.45); font-style: italic; }
.rp-chat-input-row {
  display: flex; gap: 8px; flex-shrink: 0;
}
.rp-chat-input {
  flex: 1; background: rgba(20,10,40,0.8); border: 1px solid rgba(100,40,180,0.35);
  border-radius: 6px; color: #d090ff; padding: 8px 12px; font-size: 0.8rem;
  outline: none;
}
.rp-chat-input:focus { border-color: rgba(140,60,220,0.7); }

/* Footer */
.raid-party-footer {
  padding: 14px 20px; background: rgba(12,6,26,0.95);
  border-top: 1px solid rgba(120,40,220,0.2);
  display: flex; justify-content: center; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.rp-waiting-msg {
  font-size: 0.78rem; color: rgba(180,130,255,0.5); font-style: italic;
}
.rp-coop-hint {
  font-size: 0.85rem; color: rgba(255,200,140,0.92);
  padding: 14px 18px; border-radius: 8px;
  background: rgba(120,60,20,0.22);
  border: 1px solid rgba(255,180,120,0.35);
  max-width: 540px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.rp-coop-hint strong { color: rgba(255,220,160,1); font-size: 0.95rem; letter-spacing: 0.04em; }
.rp-coop-hint-sub  { color: rgba(255,200,140,0.78); font-style: italic; font-size: 0.78rem; line-height: 1.45; }
.rp-coop-hint-actions { margin-top: 4px; }
.rp-coop-hint-actions .btn.small { padding: 8px 16px; font-size: 0.78rem; letter-spacing: 0.12em; }
#rp-start-btn:disabled,
#rp-start-btn.disabled {
  opacity: 0.42; cursor: not-allowed; pointer-events: none;
  filter: saturate(0.5);
}

/* =================================================================
   RAID CHALLENGE WARNING MODAL
   ================================================================= */
#raid-warn-overlay {
  /* Phase 3 P0 distill (2026-05-09): glassmorphism dropped; the 88% black
     overlay reads as a vault closing on the player without the AI-slop blur. */
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.90);
  display: flex; align-items: center; justify-content: center;
  animation: rwmIn 0.32s cubic-bezier(0.22,1,0.36,1);
}
@keyframes rwmIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.raid-warn-modal {
  background: linear-gradient(160deg, rgba(18,6,36,0.99) 0%, rgba(8,3,18,0.99) 100%);
  border: 1px solid rgba(180,30,30,0.50);
  border-radius: 14px;
  padding: 36px 42px;
  max-width: 540px; width: 92%;
  text-align: center;
  box-shadow: 0 0 80px rgba(180,20,20,0.18), 0 24px 70px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.rwm-eyebrow {
  font-size: 0.58rem; letter-spacing: 0.24em;
  color: rgba(200,80,80,0.5); text-transform: uppercase;
}
.rwm-boss-name {
  font-family: Cinzel, serif; font-size: 2.4rem; font-weight: 700;
  color: #d03030; letter-spacing: 0.06em; line-height: 1;
  text-shadow: 0 0 50px rgba(200,30,30,0.60), 0 0 100px rgba(180,20,20,0.25);
}
.rwm-boss-name span {
  display: block; font-size: 0.82rem; letter-spacing: 0.12em;
  color: rgba(200,100,100,0.65); margin-top: 5px; font-weight: 600;
}
.rwm-chamber {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(160,100,255,0.45);
}
.rwm-danger-bar {
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.rwm-lore {
  font-size: 0.80rem; color: rgba(195,155,175,0.65); line-height: 1.65;
  font-style: italic;
  border-top: 1px solid rgba(140,30,30,0.22);
  border-bottom: 1px solid rgba(140,30,30,0.22);
  padding: 14px 0; max-width: 440px;
}
.rwm-tip {
  font-size: 0.72rem; color: rgba(180,220,180,0.55); line-height: 1.5;
  background: rgba(20,60,20,0.25); border: 1px solid rgba(60,160,60,0.2);
  border-radius: 7px; padding: 9px 14px; max-width: 440px;
}
.rwm-tip strong { color: rgba(120,220,120,0.75); }
.rwm-actions { display: flex; gap: 12px; justify-content: center; }
.rwm-accept-btn {
  background: rgba(120,16,16,0.65) !important;
  border-color: rgba(200,40,40,0.75) !important;
  color: #ff8585 !important;
}
.rwm-accept-btn:hover {
  background: rgba(160,20,20,0.85) !important;
  box-shadow: 0 0 24px rgba(200,40,40,0.35) !important;
}

/* =================================================================
   RAID BOSS ENTRANCE CINEMATIC OVERLAY
   ================================================================= */
#raid-entrance-overlay {
  position: absolute; inset: 0; z-index: 48;
  pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(55,12,110,0.96) 0%, rgba(4,2,14,0.99) 65%);
  display: flex; align-items: center; justify-content: center;
}
#raid-entrance-overlay.reo-show {
  animation: reoLifetime 3.6s ease-in-out forwards;
}
@keyframes reoLifetime {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}
.reo-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: reoSlide 0.55s cubic-bezier(0.22,1,0.36,1);
}
@keyframes reoSlide {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.reo-eyebrow {
  font-size: 0.60rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(170,90,255,0.45);
}
.reo-name {
  font-family: Cinzel, serif; font-size: 3.8rem; font-weight: 700;
  color: #c840ff; letter-spacing: 0.14em;
  text-shadow: 0 0 70px rgba(160,40,255,0.80), 0 0 140px rgba(120,20,200,0.40), 0 2px 5px rgba(0,0,0,0.9);
  animation: reoNamePop 0.65s cubic-bezier(0.22,1,0.36,1);
}
@keyframes reoNamePop {
  0%   { transform: scale(0.75); opacity: 0; }
  65%  { transform: scale(1.05); }
  100% { transform: scale(1);    opacity: 1; }
}
.reo-sub {
  font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(200,130,255,0.65);
}
.reo-chamber {
  font-size: 0.66rem; letter-spacing: 0.12em;
  color: rgba(160,100,255,0.35); margin-top: 4px;
}
.reo-phase {
  font-size: 0.70rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(140,80,255,0.40); margin-top: 16px;
  animation: reoPhaseIn 0.6s ease-out 0.5s both;
}
@keyframes reoPhaseIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   RAID VICTORY / DEFEAT CINEMATICS
   ================================================================= */

/* ── Shared overlay base ────────────────────────────────────────── */
#raid-victory-cinematic,
#raid-defeat-cinematic {
  position: absolute; inset: 0; z-index: 52;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}

/* ── Victory ────────────────────────────────────────────────────── */
#raid-victory-cinematic.rvc-show {
  animation: rvcLifetime 3.8s ease-in-out forwards;
}
@keyframes rvcLifetime {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.rvc-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: rvcSlide 0.5s cubic-bezier(0.22,1,0.36,1);
}
@keyframes rvcSlide {
  from { transform: translateY(-18px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.rvc-eyebrow {
  font-size: 0.62rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(220,180,80,0.55);
}
.rvc-title {
  /* Phase 3 P0 distill (2026-05-09): gradient text removed. Solid gold reads
     ceremonial enough on the cinematic raid victory; the drop-shadow halo
     does the heavy lifting per DESIGN.md "Lifted + Lit" rule. */
  font-family: Cinzel, serif; font-size: 4.4rem; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,200,60,0.55), 0 0 32px rgba(255,200,60,0.25);
  filter: drop-shadow(0 0 22px rgba(255,200,60,0.55));
  animation: rvcTitlePop 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes rvcTitlePop {
  0%   { transform: scale(0.72); opacity: 0; }
  65%  { transform: scale(1.06); }
  100% { transform: scale(1);    opacity: 1; }
}
.rvc-sub {
  font-size: 0.88rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(220,180,80,0.60); margin-top: 2px;
}
.rvc-time {
  font-size: 0.72rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  color: rgba(255,215,80,0.45); margin-top: 18px;
  animation: rvcTimeIn 0.5s ease-out 0.55s both;
}
@keyframes rvcTimeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Defeat ─────────────────────────────────────────────────────── */
#raid-defeat-cinematic.rdc-show {
  animation: rdcLifetime 3.8s ease-in-out forwards;
}
@keyframes rdcLifetime {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.rdc-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: rdcSlide 0.55s cubic-bezier(0.22,1,0.36,1);
}
@keyframes rdcSlide {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.rdc-eyebrow {
  font-size: 0.62rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(200,40,40,0.50);
}
.rdc-title {
  font-family: Cinzel, serif; font-size: 3.4rem; font-weight: 700;
  letter-spacing: 0.12em; color: #cc2828;
  filter: drop-shadow(0 0 18px rgba(200,30,30,0.55));
  animation: rdcTitleIn 0.65s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes rdcTitleIn {
  0%   { transform: scale(1.18); opacity: 0; filter: blur(4px); }
  100% { transform: scale(1);    opacity: 1; filter: blur(0); }
}
.rdc-quote {
  font-size: 0.88rem; font-style: italic; letter-spacing: 0.06em; max-width: 440px;
  color: rgba(200,80,80,0.60); margin-top: 20px; text-align: center; line-height: 1.55;
  animation: rdcQuoteIn 0.6s ease-out 0.6s both;
}
@keyframes rdcQuoteIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   VISUAL OVERHAUL — Session 7 Phase 3 (2026-05-01)
   Faction HUD tint · Map cards · ULT/HP animations · Rank shimmer
   Queue screen · Class detail panel overhaul
   ================================================================= */

/* ── Self-HUD: faction tinting by player class ────────────────────── */
/* Human (Warrior, Archer) — steel blue */
body[data-self-class="warrior"] #self-hud,
body[data-self-class="archer"]  #self-hud {
  border-left-color: #6aaae8 !important;
  box-shadow: 0 -5px 26px rgba(0,0,0,0.85), inset 6px 0 32px rgba(106,170,232,0.16), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body[data-self-class="warrior"] .self-name,
body[data-self-class="archer"]  .self-name {
  color: #7fb8ff !important;
  text-shadow: 0 0 14px rgba(127,184,255,0.50) !important;
  border-bottom-color: rgba(127,184,255,0.20) !important;
}

/* Undead (Lich, Rogue) — teal */
body[data-self-class="lich"]  #self-hud,
body[data-self-class="rogue"] #self-hud {
  border-left-color: #3ec8b0 !important;
  box-shadow: 0 -5px 26px rgba(0,0,0,0.85), inset 6px 0 32px rgba(62,200,176,0.16), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body[data-self-class="lich"]  .self-name,
body[data-self-class="rogue"] .self-name {
  color: #50e0c8 !important;
  text-shadow: 0 0 14px rgba(80,224,200,0.50) !important;
  border-bottom-color: rgba(80,224,200,0.20) !important;
}

/* Celestial (Paladin, DivineMage) — ivory holy */
body[data-self-class="paladin"]    #self-hud,
body[data-self-class="divinemage"] #self-hud {
  border-left-color: #f0e090 !important;
  box-shadow: 0 -5px 26px rgba(0,0,0,0.85), inset 6px 0 32px rgba(240,224,144,0.14), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body[data-self-class="paladin"]    .self-name,
body[data-self-class="divinemage"] .self-name {
  color: #f6e3a1 !important;
  text-shadow: 0 0 14px rgba(246,227,161,0.50) !important;
  border-bottom-color: rgba(246,227,161,0.20) !important;
}

/* Demon (Warlock, Axeman) — crimson */
body[data-self-class="warlock"] #self-hud,
body[data-self-class="axeman"]  #self-hud {
  border-left-color: #c4324a !important;
  box-shadow: 0 -5px 26px rgba(0,0,0,0.85), inset 6px 0 32px rgba(196,50,74,0.16), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body[data-self-class="warlock"] .self-name,
body[data-self-class="axeman"]  .self-name {
  color: #e05070 !important;
  text-shadow: 0 0 14px rgba(224,80,112,0.50) !important;
  border-bottom-color: rgba(224,80,112,0.20) !important;
}

/* ── Map selection — themed card buttons ──────────────────────────── */
/* All map buttons: add subtle radial glow on hover via ::before */
.config-group [data-map] {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s !important;
}
.config-group [data-map]::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
  border-radius: inherit;
}
.config-group [data-map]:hover::before,
.config-group [data-map].selected::before { opacity: 1; }

/* Courtyard — stone amber */
[data-map="courtyard"]::before  { background: radial-gradient(ellipse, rgba(185,148,90,0.18), transparent 70%); }
[data-map="courtyard"]:hover    { border-color: rgba(200,165,100,0.70) !important; color: #d4a860 !important; }
[data-map="courtyard"].selected { background: linear-gradient(135deg, rgba(38,28,14,0.92), rgba(18,13,5,0.97)) !important; border-color: rgba(210,175,110,0.85) !important; box-shadow: 0 0 16px rgba(200,165,100,0.30) !important; color: #d4a860 !important; }

/* Temple — gold fire */
[data-map="temple"]::before  { background: radial-gradient(ellipse, rgba(210,165,70,0.18), transparent 70%); }
[data-map="temple"]:hover    { border-color: rgba(225,180,70,0.70) !important; color: #e8c040 !important; }
[data-map="temple"].selected { background: linear-gradient(135deg, rgba(40,30,10,0.92), rgba(18,13,4,0.97)) !important; border-color: rgba(230,190,80,0.85) !important; box-shadow: 0 0 16px rgba(220,175,65,0.30) !important; color: #e8c040 !important; }

/* Frozen — ice blue */
[data-map="frozen"]::before  { background: radial-gradient(ellipse, rgba(110,175,245,0.18), transparent 70%); }
[data-map="frozen"]:hover    { border-color: rgba(130,195,255,0.70) !important; color: #90c8ff !important; }
[data-map="frozen"].selected { background: linear-gradient(135deg, rgba(10,20,40,0.92), rgba(5,10,20,0.97)) !important; border-color: rgba(140,200,255,0.85) !important; box-shadow: 0 0 16px rgba(120,185,255,0.30) !important; color: #90c8ff !important; }

/* Infernal — lava orange-red */
[data-map="infernal"]::before  { background: radial-gradient(ellipse, rgba(225,75,25,0.18), transparent 70%); }
[data-map="infernal"]:hover    { border-color: rgba(245,90,30,0.70) !important; color: #ff7040 !important; }
[data-map="infernal"].selected { background: linear-gradient(135deg, rgba(44,14,6,0.92), rgba(20,6,3,0.97)) !important; border-color: rgba(250,95,35,0.85) !important; box-shadow: 0 0 16px rgba(235,80,28,0.30) !important; color: #ff7040 !important; }

/* Crucible — storm purple */
[data-map="crucible"]::before  { background: radial-gradient(ellipse, rgba(118,58,205,0.18), transparent 70%); }
[data-map="crucible"]:hover    { border-color: rgba(140,75,220,0.70) !important; color: #b080e8 !important; }
[data-map="crucible"].selected { background: linear-gradient(135deg, rgba(26,12,46,0.92), rgba(12,6,22,0.97)) !important; border-color: rgba(148,82,225,0.85) !important; box-shadow: 0 0 16px rgba(130,68,210,0.30) !important; color: #b080e8 !important; }

/* Random — neutral */
[data-map="random"]:hover    { border-color: rgba(200,190,175,0.65) !important; }
[data-map="random"].selected { border-color: rgba(232,197,114,0.80) !important; box-shadow: 0 0 14px rgba(232,197,114,0.22) !important; }

/* ── ULT bar — pulse when fully charged ──────────────────────────── */
@keyframes ultFullPulse {
  0%,100% { box-shadow: 0 0 16px rgba(220,128,20,0.70), inset 0 1px 0 rgba(255,255,255,0.25); filter: brightness(1.0); }
  50%     { box-shadow: 0 0 40px rgba(255,215,70,1.00), inset 0 1px 0 rgba(255,255,255,0.38); filter: brightness(1.30); }
}
.ult-fill.ult-ready {
  background: linear-gradient(90deg, #c87800 0%, #f0b818 30%, #ffe040 50%, #f0b818 70%, #c87800 100%) !important;
  animation: ultFullPulse 1.15s ease-in-out infinite !important;
}

/* ── HP bar — danger pulse below 25% ─────────────────────────────── */
@keyframes lowHpDanger {
  0%,100% { box-shadow: 0 0 14px rgba(255,40,60,0.65); filter: brightness(1.0); }
  50%     { box-shadow: 0 0 32px rgba(255,40,60,1.00); filter: brightness(1.40); }
}
.hp-fill.low-hp {
  background: linear-gradient(90deg,
    #6e0808 0%, #b41010 18%, #e82424 40%, #ff4848 55%, #e82424 72%, #b41010 88%, #6e0808 100%
  ) !important;
  animation: lowHpDanger 0.72s ease-in-out infinite !important;
}

/* ── Rank badge — holographic shimmer sweep ──────────────────────── */
.rank-badge { position: relative; overflow: hidden; }
.rank-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(108deg, transparent 28%, rgba(255,255,255,0.24) 50%, transparent 72%);
  animation: badgeShimmer 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeShimmer {
  0%, 55% { left: -100%; opacity: 0; }
  57%     { opacity: 1; }
  78%     { left: 170%; opacity: 0; }
  100%    { left: 170%; opacity: 0; }
}

/* ── Queue screen — atmospheric redesign ─────────────────────────── */
#screen-queue {
  position: relative;
  justify-content: center;
  gap: 18px !important;
  min-height: 500px;
}
/* Ambient radial glow behind everything */
#screen-queue::before {
  content: '';
  position: absolute;
  top: 25%; left: 50%; transform: translate(-50%, -50%);
  width: 440px; height: 440px;
  background: radial-gradient(ellipse, rgba(232,197,114,0.09) 0%, transparent 68%);
  pointer-events: none;
  animation: queueGlowPulse 3.2s ease-in-out infinite;
  z-index: 0;
}
@keyframes queueGlowPulse {
  0%,100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1.00); }
  50%     { opacity: 1.00; transform: translate(-50%, -50%) scale(1.14); }
}

/* Portrait — breathing class portrait */
.queue-portrait-wrap {
  position: relative;
  width: 80px; height: 90px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(232,197,114,0.38);
  box-shadow: 0 0 0 4px rgba(232,197,114,0.06), 0 4px 22px rgba(0,0,0,0.60), 0 0 22px rgba(232,197,114,0.18);
  animation: queuePortraitBob 3.8s ease-in-out infinite;
  z-index: 1;
}
.queue-portrait-canvas { display: block; }
.queue-portrait-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,197,114,0.14) 0%, transparent 55%);
  pointer-events: none;
}
@keyframes queuePortraitBob {
  0%,100% { transform: translateY(0px); box-shadow: 0 0 0 4px rgba(232,197,114,0.06), 0 4px 22px rgba(0,0,0,0.60), 0 0 22px rgba(232,197,114,0.18); }
  50%     { transform: translateY(-5px); box-shadow: 0 0 0 4px rgba(232,197,114,0.10), 0 10px 30px rgba(0,0,0,0.65), 0 0 30px rgba(232,197,114,0.25); }
}

/* Title — bigger, heavier glow */
.queue-title {
  font-size: 2.3rem !important;
  letter-spacing: 0.28em !important;
  text-shadow:
    0 0 50px rgba(232,197,114,0.95),
    0 0 100px rgba(232,197,114,0.38),
    0 0 14px rgba(232,197,114,0.60) !important;
  z-index: 1;
}

/* Spinner — larger */
.queue-spinner-wrap {
  width: 128px !important;
  height: 128px !important;
  z-index: 1;
}
.queue-spinner {
  border-width: 3.5px !important;
  border-top-color: var(--gold) !important;
  border-right-color: rgba(232,197,114,0.18) !important;
  box-shadow: 0 0 28px rgba(232,197,114,0.38), inset 0 0 14px rgba(232,197,114,0.07) !important;
}
.queue-spinner-outer {
  inset: -16px !important;
}
/* Extra ring via wrap::after */
.queue-spinner-wrap::after {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px dashed rgba(232,197,114,0.11);
  animation: queueSpin 7s linear infinite;
  pointer-events: none;
}

/* Elapsed — bold tabular */
#queue-elapsed {
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.52) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.12em !important;
}

/* Class label — Cinzel font, prominent */
#queue-class-label {
  font-family: var(--font-display) !important;
  font-size: 1.0rem !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  opacity: 1 !important;
  letter-spacing: 0.22em !important;
  text-shadow: 0 0 18px rgba(232,197,114,0.45) !important;
}

/* Wait hint */
.queue-wait-hint {
  font-size: 0.65rem;
  opacity: 0.28;
  margin-top: 6px;
  letter-spacing: 0.07em;
}

/* Cancel — red on hover */
#queue-cancel-btn {
  border-radius: 8px !important;
  padding: 10px 34px !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.11em !important;
  z-index: 1;
}
#queue-cancel-btn:hover {
  border-color: rgba(220,50,80,0.65) !important;
  color: rgba(220,80,100,0.92) !important;
  box-shadow: 0 0 18px rgba(220,50,80,0.15) !important;
}

/* ── Class detail panel — faction strip + stat bars + key badges ──── */
.cd-faction-strip {
  margin: -14px -14px 14px;
  padding: 12px 14px 14px;
  border-radius: 8px 8px 0 0;
}
.cd-faction-label {
  font-family: var(--font-display);
  font-size: 0.60rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 2px;
  opacity: 0.90;
}
.cd-class-name-large {
  /* Phase 3 P1 colorize (2026-05-09): Tarnish-rule fix — pure white text +
     pure white halo replaced with codex-parchment + gold halo. */
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.1;
  color: var(--codex-parchment);
  text-shadow: 0 0 20px rgba(232,197,114,0.18);
}
.cd-role-tag {
  font-size: 0.60rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,185,165,0.45);
  margin-top: 3px;
}
.cd-tagline {
  font-style: italic !important;
  color: rgba(195,180,158,0.60) !important;
  font-size: 0.76rem !important;
  margin-bottom: 12px !important;
  padding: 0 2px !important;
  line-height: 1.5 !important;
}

/* Stat bars */
.cd-stat-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cd-statbar-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cd-statbar-label {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(175,160,140,0.60);
  width: 36px;
  flex-shrink: 0;
  text-align: right;
}
.cd-statbar-track {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.cd-statbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s var(--ease-out);
  position: relative;
}
.cd-statbar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  border-radius: 4px 4px 0 0;
}
.cd-statbar-fill.hp-bar {
  background: linear-gradient(90deg, #a01c2e, #d82c44, #f05060);
  box-shadow: 0 0 8px rgba(220,44,68,0.48);
}
.cd-statbar-fill.spd-bar {
  background: linear-gradient(90deg, #1860a8, #2e90d4, #44b4f0);
  box-shadow: 0 0 8px rgba(68,180,240,0.42);
}
.cd-statbar-val {
  font-size: 0.66rem;
  color: rgba(195,180,158,0.50);
  width: 28px;
  flex-shrink: 0;
  text-align: left;
}

/* Ability rows — glassmorphism key badge */
.cd-abilities { display: flex; flex-direction: column; gap: 0 !important; }
.cd-ab {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  gap: 10px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.046) !important;
  align-items: start !important;
}
.cd-ab:last-child { border-bottom: none !important; }
.cd-ab-key {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  background: linear-gradient(160deg, rgba(48,36,60,0.96), rgba(22,16,32,0.99)) !important;
  border: 1px solid rgba(232,197,114,0.30) !important;
  border-radius: 7px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(232,197,114,0.38) !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
}
/* ULT key — gold accent */
.cd-ab-ult .cd-ab-key,
.cd-ab-ult-key {
  background: linear-gradient(160deg, rgba(66,46,16,0.97), rgba(34,22,6,0.99)) !important;
  border-color: rgba(232,197,114,0.68) !important;
  color: #ffd840 !important;
  box-shadow: 0 0 12px rgba(232,197,114,0.28), 0 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.cd-ab-name {
  font-family: var(--font-display) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: rgba(232,220,200,0.94) !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}
.cd-ab-desc {
  font-size: 0.64rem !important;
  color: rgba(155,142,122,0.72) !important;
  line-height: 1.42 !important;
}

/* Passive — richer block */
.cd-passive {
  /* Phase 3 P0 distill (2026-05-09): side-stripe → unified gold-tinted
     full border. Inset shadow already provides directional gold accent. */
  margin-top: 10px !important;
  padding: 9px 12px !important;
  background: linear-gradient(135deg, rgba(34,24,46,0.90), rgba(14,10,22,0.96)) !important;
  border: 1px solid rgba(232,197,114,0.55) !important;
  border-radius: 8px !important;
  box-shadow: inset 3px 0 14px rgba(232,197,114,0.05) !important;
}
.cd-passive-label {
  font-size: 0.55rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(232,197,114,0.50) !important;
  margin-bottom: 3px !important;
}
.cd-passive-name {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 3px !important;
}
.cd-passive-desc {
  font-size: 0.64rem !important;
  color: rgba(180,165,142,0.70) !important;
  line-height: 1.42 !important;
  font-style: italic !important;
}

/* ── Difficulty buttons — themed subtle colors ────────────────────── */
[data-diff="recruit"]:hover,  [data-diff="recruit"].selected  { border-color: rgba(90,200,100,0.75) !important; color: #70d080 !important; }
[data-diff="veteran"]:hover,  [data-diff="veteran"].selected  { border-color: rgba(232,197,114,0.75) !important; color: var(--gold) !important; }
[data-diff="mythic"]:hover,   [data-diff="mythic"].selected   { border-color: rgba(220,60,80,0.75) !important; color: #e05070 !important; }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 — Cooldowns, damage numbers, kill feed, round banner,
              match-end polish, score flash, home card faction tint
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Cooldown slot faction glow (top border per faction) ───────── */
body[data-self-class="warrior"] #self-cds .cd-slot,
body[data-self-class="archer"]  #self-cds .cd-slot {
  border-top: 2px solid rgba(106,170,232,0.55) !important;
  box-shadow: inset 0 2px 14px rgba(106,170,232,0.14) !important;
}
body[data-self-class="lich"]  #self-cds .cd-slot,
body[data-self-class="rogue"] #self-cds .cd-slot {
  border-top: 2px solid rgba(80,210,180,0.55) !important;
  box-shadow: inset 0 2px 14px rgba(80,210,180,0.14) !important;
}
body[data-self-class="paladin"]    #self-cds .cd-slot,
body[data-self-class="divinemage"] #self-cds .cd-slot {
  border-top: 2px solid rgba(230,220,185,0.55) !important;
  box-shadow: inset 0 2px 14px rgba(230,220,185,0.14) !important;
}
body[data-self-class="warlock"] #self-cds .cd-slot,
body[data-self-class="axeman"] #self-cds .cd-slot {
  border-top: 2px solid rgba(210,70,70,0.55) !important;
  box-shadow: inset 0 2px 14px rgba(210,70,70,0.14) !important;
}

/* ── CD ready flash — gold sweep when ability comes off cooldown ──
   Phase 3 P1 colorize (2026-05-09): pure-white halo → gold per the Sigil
   Rule. CD-ready IS the "important action glows before it fires" moment. */
@keyframes cdReadyFlash {
  0%   { box-shadow: inset 0 0 0 0 rgba(232,197,114,0), 0 0 0 0 rgba(232,197,114,0); background: rgba(232,197,114,0.0); }
  22%  { box-shadow: inset 0 0 18px 4px rgba(232,197,114,0.42), 0 0 18px 3px rgba(232,197,114,0.30); background: rgba(232,197,114,0.08); }
  100% { box-shadow: inset 0 0 0 0 rgba(232,197,114,0), 0 0 0 0 rgba(232,197,114,0); background: rgba(232,197,114,0.0); }
}
.cd-slot.cd-flash {
  animation: cdReadyFlash 0.48s ease-out !important;
}

/* ── 2. Score HUD — team panel flash when a round is scored ───────
   Phase 3 polish (2026-05-09): white halo regression caught in re-audit.
   Same Sigil-rule fix as scoreBump / cdReadyFlash neighbors above. */
@keyframes scoreTeamFlash {
  0%   { box-shadow: 0 0 0 0 rgba(232,197,114,0); }
  25%  { box-shadow: 0 0 24px 6px rgba(232,197,114,0.32), inset 0 0 18px rgba(232,197,114,0.14); }
  100% { box-shadow: 0 0 0 0 rgba(232,197,114,0); }
}
.team-panel.score-team-flash { animation: scoreTeamFlash 0.55s ease-out !important; }

/* Phase 3 P1 colorize (2026-05-09): dramatic scoreBump variant — same
   white-halo Tarnish fix as the canonical above. Gold halo + brightness
   lift carries the dramatic peak. CSS keyframe last-wins, so this is
   the active version. */
@keyframes scoreBump {
  0%   { transform: scale(1); filter: brightness(1); }
  28%  { transform: scale(1.9); color: var(--gold); text-shadow: 0 0 28px rgba(232,197,114,0.85), 0 0 50px rgba(232,197,114,0.45); filter: brightness(1.5); }
  60%  { transform: scale(1.05); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ── 3. Kill feed — class icon badge ─────────────────────────────── */
.kf-icon {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.92;
}

/* ── 4. Round transition banner overlay ──────────────────────────── */
#round-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  transition: none;
}
#round-banner-overlay.show {
  animation: rboBannerIn 1.6s ease forwards;
}
@keyframes rboBannerIn {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.rbo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 24px;
  animation: rboScaleIn 0.28s cubic-bezier(0.18,0.88,0.32,1.28) forwards;
}
@keyframes rboScaleIn {
  0%   { transform: scaleX(0.7) scaleY(0.6); }
  100% { transform: scaleX(1)   scaleY(1); }
}
.rbo-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232,197,114,0.0) 5%, rgba(232,197,114,0.75) 30%, rgba(232,197,114,0.75) 70%, rgba(232,197,114,0.0) 95%, transparent 100%);
}
.rbo-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, transparent 0%, rgba(11,10,16,0.72) 30%, rgba(11,10,16,0.72) 70%, transparent 100%);
  pointer-events: none;
}
.rbo-number {
  font-family: var(--font-display), 'Georgia', serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-shadow: 0 0 32px rgba(232,197,114,0.90), 0 0 60px rgba(232,197,114,0.40);
  position: relative;
  z-index: 1;
  line-height: 1;
  padding: 8px 0 4px;
}
.rbo-map {
  font-family: var(--font-display), 'Georgia', serif;
  font-size: 0.88rem;
  letter-spacing: 0.34em;
  color: rgba(255,180,100,0.80);
  text-shadow: 0 0 14px rgba(255,160,80,0.55);
  position: relative;
  z-index: 1;
  padding-bottom: 8px;
}

/* ── 5. Match-end portrait canvas ────────────────────────────────── */
.me-portrait-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 160px;
  height: 184px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
}
.me-portrait-wrap canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Match-end stat count-up — animate value reveal */
@keyframes meStatPop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.match-stat-value {
  animation: meStatPop 0.5s cubic-bezier(0.18,0.88,0.32,1.28) both;
}

/* ── 6. Home player card — faction tint per class
   Phase 3 P0 distill (2026-05-09): side-stripes → full faction-tinted
   borders. The inset glow preserves directional accent without the
   AI-slop stripe. Note: faction palette here still uses placeholder
   colors (teal Undead, cream Celestial); audit-flagged drift to be
   fixed in /impeccable colorize landing+game pass. */
body[data-home-class="warrior"] #home-player-card,
body[data-home-class="archer"]  #home-player-card {
  border: 1px solid rgba(106,170,232,0.55) !important;
  box-shadow: inset 4px 0 24px rgba(106,170,232,0.09), 0 4px 24px rgba(0,0,0,0.55) !important;
}
body[data-home-class="warrior"] #home-player-card .hpc-name,
body[data-home-class="archer"]  #home-player-card .hpc-name {
  text-shadow: 0 0 18px rgba(127,184,255,0.35) !important;
}
body[data-home-class="lich"]  #home-player-card,
body[data-home-class="rogue"] #home-player-card {
  border: 1px solid rgba(80,210,180,0.55) !important;
  box-shadow: inset 4px 0 24px rgba(80,210,180,0.09), 0 4px 24px rgba(0,0,0,0.55) !important;
}
body[data-home-class="lich"]  #home-player-card .hpc-name,
body[data-home-class="rogue"] #home-player-card .hpc-name {
  text-shadow: 0 0 18px rgba(80,210,180,0.35) !important;
}
body[data-home-class="paladin"]    #home-player-card,
body[data-home-class="divinemage"] #home-player-card {
  border: 1px solid rgba(230,220,185,0.55) !important;
  box-shadow: inset 4px 0 24px rgba(230,220,185,0.09), 0 4px 24px rgba(0,0,0,0.55) !important;
}
body[data-home-class="paladin"]    #home-player-card .hpc-name,
body[data-home-class="divinemage"] #home-player-card .hpc-name {
  text-shadow: 0 0 18px rgba(230,220,185,0.35) !important;
}
body[data-home-class="warlock"] #home-player-card,
body[data-home-class="axeman"]  #home-player-card {
  border: 1px solid rgba(210,70,70,0.55) !important;
  box-shadow: inset 4px 0 24px rgba(210,70,70,0.09), 0 4px 24px rgba(0,0,0,0.55) !important;
}
body[data-home-class="warlock"] #home-player-card .hpc-name,
body[data-home-class="axeman"]  #home-player-card .hpc-name {
  text-shadow: 0 0 18px rgba(210,80,80,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 5 — HUD Identity, CD overflow fix, Home 2-col layout, SVG icons
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Cooldown slot ability name — prevent overflow ─────────────── */
.cd-slot .name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  padding: 0 3px !important;
  display: block !important;
}

/* ── 2. HUD identity strip ────────────────────────────────────────── */
.hud-identity {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
#hud-portrait-canvas {
  width: 28px;
  height: 32px;
  image-rendering: pixelated;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  background: rgba(0,0,0,0.45);
}
.hud-name-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex-shrink: 1;
}
.hud-name-block .self-name {
  font-size: 0.68rem !important;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--gold) !important;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  text-shadow: 0 0 12px rgba(232,197,114,0.5) !important;
}
.hud-class-badge {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(200,185,170,0.60);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.hud-bars-inline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hud-bars-inline .bar {
  width: 100%;
}
/* Slightly taller HP bar for prominence */
.hud-bar-hp { height: 22px !important; }
.hud-bar-ult { height: 18px !important; }
.hud-bar-rage { height: 10px !important; }

/* Faction-colored HUD portrait border matches left-edge tint */
body[data-self-class="warrior"] #hud-portrait-canvas,
body[data-self-class="archer"]  #hud-portrait-canvas {
  border-color: rgba(106,170,232,0.45);
  box-shadow: 0 0 8px rgba(106,170,232,0.25);
}
body[data-self-class="lich"] #hud-portrait-canvas,
body[data-self-class="rogue"] #hud-portrait-canvas {
  border-color: rgba(62,200,176,0.45);
  box-shadow: 0 0 8px rgba(62,200,176,0.25);
}
body[data-self-class="paladin"]    #hud-portrait-canvas,
body[data-self-class="divinemage"] #hud-portrait-canvas {
  border-color: rgba(230,220,185,0.45);
  box-shadow: 0 0 8px rgba(230,220,185,0.25);
}
body[data-self-class="warlock"] #hud-portrait-canvas,
body[data-self-class="axeman"]  #hud-portrait-canvas {
  border-color: rgba(210,70,70,0.45);
  box-shadow: 0 0 8px rgba(210,70,70,0.25);
}

/* ── 3. Home screen 2-column layout ──────────────────────────────── */
#screen-home {
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  width: 100%;
}
.home-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  width: 100%;
  background: linear-gradient(90deg, rgba(14,10,20,0.5), rgba(8,6,14,0.5));
  box-sizing: border-box;
}
.home-logo-strip {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-logo-icon {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(232,197,114,0.50));
  animation: logo-breathe 5.5s ease-in-out infinite;
}
.home-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-logo-name {
  font-family: var(--font-display), 'Georgia', serif;
  font-size: 1.3rem;
  letter-spacing: 0.38em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(232,197,114,0.55);
  line-height: 1;
  display: block;
}
.home-logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: lowercase;
  display: block;
  line-height: 1;
}
#screen-home .online-count-bar {
  margin: 0 !important;
}
.home-body {
  display: flex;
  width: 100%;
  min-height: 460px;
  box-sizing: border-box;
}
.home-left {
  width: 305px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 14px 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}
.home-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 14px 16px;
  min-width: 0;
  box-sizing: border-box;
}
/* Override fixed widths from old styles */
#screen-home .home-player-card {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
#screen-home .home-daily-strip {
  width: 100% !important;
  margin: 0 !important;
}
#screen-home .home-play-btn {
  width: 100% !important;
  flex-shrink: 0;
}
#screen-home .home-action-grid {
  width: 100% !important;
}
#screen-home .home-utility-row {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
#screen-home .home-signin-btn {
  width: 100% !important;
}

/* ── 4. SVG action icons ──────────────────────────────────────────── */
.home-action-icon {
  width: 26px !important;
  height: 26px !important;
  color: var(--gold) !important;
  filter: drop-shadow(0 0 5px rgba(232,197,114,0.30)) !important;
  transition: filter 0.2s !important;
  flex-shrink: 0;
  display: block;
}
.home-action-btn:hover .home-action-icon {
  filter: drop-shadow(0 0 11px rgba(232,197,114,0.65)) !important;
  transform: scale(1.08);
}
.home-action-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 14px 8px !important;
  min-height: 80px;
}
.home-action-label {
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}

/* ── 5. CD slot upgraded visuals ─────────────────────────────────── */
.cd-slot {
  height: 60px !important;
}
.cd-slot .key {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}
.cd-slot .name {
  font-size: 0.56rem !important;
  letter-spacing: 0.06em !important;
  color: rgba(205,190,172,0.70) !important;
  margin-top: 3px !important;
}
/* Ult slot gets gold name tint when ready */
.cd-slot.ult-ready .name {
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(232,197,114,0.6) !important;
}
/* CD timer — bigger, more readable */
.cd-timer {
  font-size: 0.78rem !important;
  font-weight: bold !important;
  letter-spacing: 0.04em !important;
  bottom: 5px !important;
}

/* ── 6. Ability denied flash ──────────────────────────────────────── */
/* Plays when player presses an ability key while on cooldown / no ult */
@keyframes cdDeny {
  0%   { background-color: rgba(220, 40, 60, 0.55); box-shadow: 0 0 14px rgba(220, 40, 60, 0.55), inset 0 0 10px rgba(220, 40, 60, 0.35); }
  60%  { background-color: rgba(220, 40, 60, 0.18); }
  100% { background-color: transparent; box-shadow: none; }
}
.cd-slot.cd-deny {
  animation: cdDeny 0.38s ease-out forwards;
}

/* ── 7. HUD class badge — ellipsis safety at narrow widths ───────── */
.hud-class-badge {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── 8. Home screen — narrow viewport responsive layout ──────────── */
/* Below 640px width the 2-column layout breaks (305px left col leaves
   ~80px for right col). Switch to vertical stack so each column gets
   the full width. Touch devices always render at internal 1100px so
   they never hit this — only narrow desktop browsers do. */
@media (max-width: 640px) {
  .home-body {
    flex-direction: column;
    min-height: 0;
  }
  .home-left {
    width: 100%;
    padding: 12px 16px 8px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .home-right {
    width: 100%;
    padding: 10px 16px 14px;
  }
  .home-top-bar {
    padding: 10px 16px 8px;
  }
  /* Action grid stays 2x2 — still usable at narrow widths */
  /* Logo strip text shrinks to fit alongside online count */
  .home-logo-name {
    font-size: 1.1rem;
    letter-spacing: 0.32em;
  }
  .home-logo-sub {
    font-size: 0.55rem;
  }
  .home-logo-icon {
    height: 32px;
  }
}

/* Very narrow viewports: action grid collapses to 1 column.
   Below ~440px, even 2x2 buttons of ~180px each are cramped. */
@media (max-width: 440px) {
  #screen-home .home-action-grid {
    grid-template-columns: 1fr !important;
  }
  .home-action-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 10px 14px !important;
    min-height: 50px !important;
  }
  .home-action-btn .home-action-label {
    font-size: 0.75rem !important;
  }
}

/* ── 9. Match-end Share button ────────────────────────────────────── */
.share-result-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.share-result-btn .share-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(232,197,114,0.35));
  transition: transform 0.18s var(--ease-out);
}
.share-result-btn:hover .share-icon {
  transform: scale(1.12) rotate(-6deg);
  filter: drop-shadow(0 0 8px rgba(232,197,114,0.65));
}
/* Inline 'Copied!' feedback on the Share button itself — reuses the same
   uidCopiedPulse keyframe so all copy-buttons share a consistent feel. */
.share-result-btn.copied {
  background: rgba(72,180,108,0.18) !important;
  border-color: rgba(72,180,108,0.55) !important;
  color: #b3f0c5 !important;
  animation: uidCopiedPulse 0.4s ease-out;
}
.share-result-btn.copied .share-icon {
  color: #b3f0c5;
  filter: drop-shadow(0 0 8px rgba(72,180,108,0.55));
}

/* ── 11. Profile nav row — count-aware buttons ────────────────────── */
/* Replaces three plain side-btns with informative cards: SVG icon + label
   + dynamic progress count (e.g. "12 / 40" achievements). Same overall
   visual weight as side-btn but communicates at a glance how full each
   section is — turns dead nav buttons into mini status cards. */
.profile-nav-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.profile-nav-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 150px;
  padding: 10px 18px 9px;
  background: linear-gradient(180deg, rgba(36,28,46,0.78), rgba(16,12,22,0.85));
  border: 1px solid rgba(232,197,114,0.22);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  position: relative;
  overflow: hidden;
}
.profile-nav-btn:hover {
  border-color: rgba(232,197,114,0.55);
  background: linear-gradient(180deg, rgba(46,36,58,0.85), rgba(22,16,28,0.92));
  transform: translateY(-1px);
}
.profile-nav-btn:active { transform: translateY(0); }
.pnb-icon {
  width: 22px; height: 22px;
  color: var(--gold);
  filter: drop-shadow(0 0 5px rgba(232,197,114,0.30));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pnb-icon svg { width: 100%; height: 100%; }
.pnb-label {
  font-weight: 600;
  letter-spacing: 0.14em;
}
.pnb-count {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: none;
  opacity: 0.78;
  font-weight: 400;
}
.profile-nav-btn:hover .pnb-icon {
  filter: drop-shadow(0 0 9px rgba(232,197,114,0.55));
}
@media (max-width: 540px) {
  .profile-nav-btn { min-width: 0; flex: 1 1 0; padding: 8px 12px; }
  .pnb-label { font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* ── 10. Friends UID copy button ──────────────────────────────────── */
/* Replaces the static UID span with a one-click copy button. The icon
   sits beside the button as a hint that the value is interactive. */
.friends-uid-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.friends-uid-copy {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--gold);
  background: rgba(232,197,114,0.06);
  border: 1px solid rgba(232,197,114,0.22);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: all;
}
.friends-uid-copy:hover {
  background: rgba(232,197,114,0.14);
  border-color: rgba(232,197,114,0.5);
  color: #ffe093;
}
.friends-uid-copy:active {
  transform: scale(0.97);
}
.friends-uid-copy.copied {
  background: rgba(72,180,108,0.20);
  border-color: rgba(72,180,108,0.6);
  color: #b3f0c5;
  animation: uidCopiedPulse 0.4s ease-out;
}
@keyframes uidCopiedPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.friends-uid-copy-icon {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0.7;
}

/* ── 12. Settings — section grouping + cleanup of inline styles ─── */
/* Was: every input row had inline styles for flex/gap/colors. The bottom
   data section was a malformed setting-row with paragraph styling crammed
   inline. Now grouped into Audio / Display / Account / Data sections with
   small section labels, and every layout primitive uses a class. */
.settings-section-title {
  font-family: var(--font-display), 'Georgia', serif;
  font-size: 0.78rem;
  letter-spacing: 0.36em;
  color: rgba(232,197,114,0.78);
  text-transform: uppercase;
  margin: 14px 0 -2px 4px;
  padding-bottom: 4px;
  position: relative;
  border-bottom: 1px solid rgba(232,197,114,0.12);
  text-shadow: 0 0 14px rgba(232,197,114,0.22);
}
.settings-section-title:first-child { margin-top: 0; }
.settings-section-data {
  color: rgba(220,160,140,0.78);
  border-bottom-color: rgba(220,140,120,0.16);
  text-shadow: 0 0 14px rgba(220,140,100,0.18);
}
.setting-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setting-range {
  flex: 1;
  accent-color: var(--gold);
}
.setting-vol-value {
  min-width: 38px;
  text-align: right;
  color: var(--gold);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.setting-btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.setting-username-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setting-username-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.setting-text-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.82rem;
  border-radius: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.setting-text-input:focus {
  outline: none;
  border-color: rgba(232,197,114,0.55);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 2px rgba(232,197,114,0.18);
}
.setting-username-status {
  font-size: 0.72rem;
  min-height: 14px;
  color: var(--text-dim);
}
/* Data section row stretches the content column to span two lines */
.setting-row-data {
  align-items: stretch;
}
.setting-data-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setting-data-note {
  font-size: 0.74rem;
  color: rgba(232,224,212,0.55);
  line-height: 1.5;
}
.setting-data-actions {
  flex-wrap: wrap;
}
.setting-danger-btn {
  border-color: rgba(220,90,90,0.55) !important;
  color: #ff7a7a !important;
}
.setting-danger-btn:hover {
  border-color: rgba(220,90,90,0.85) !important;
  background: rgba(180,40,40,0.12) !important;
  color: #ff9090 !important;
}
.setting-quiet-btn {
  opacity: 0.62;
}
.setting-quiet-btn:hover {
  opacity: 1;
}

/* ===================================================================
   P1 LAYOUT FIXES + MOBILE RESPONSIVE PASS (session 32)
   ---
   Consolidated tweaks for issues the layout audit flagged at <= 1024px.
   Kept at the bottom so they unambiguously override earlier rules.
   Breakpoints used (matching the audit): 1200, 1024, 768, 480.
   =================================================================== */

/* L5 — Match-end opponents grid + breakdown wrap responsive bounds.
   Both wraps had max-width 480px which was fine on desktop but not
   shrinking on smaller viewports — the inner rows then overflowed
   horizontally. Switch to a fluid max-width clamp + per-breakpoint
   density tweaks. */
.me-breakdown-wrap, .me-opponents-wrap {
  max-width: min(560px, 92%);
}
@media (max-width: 600px) {
  .me-bd-header, .me-bd-row {
    /* Drop the side glyph at narrow widths; allies/enemies are still
       distinguishable by the cls color stripe + name color. */
    grid-template-columns: 1fr 70px 32px 60px;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .me-bd-header > :nth-child(3),
  .me-bd-row    > .me-bd-side { display: none; }
  .me-opponent-row { gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
  .me-opponent-cls { min-width: 60px; font-size: 0.74rem; }
  .me-opponent-add { padding: 3px 8px; }
}

/* L6 — Leaderboard name column needs `min-width: 0` on the flex item so
   text-overflow: ellipsis actually fires when the row is constrained.
   Without this, a long name + rank badge could push the badge out of the
   row instead of truncating the name. */
.lb-row .lb-name { min-width: 0; max-width: 100%; }
.lb-row .lb-rank-name-str { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

/* L7 — Profile section title underline alignment. The `::after` underline
   was sized off the parent's content box but the parent used flex with
   align-self:flex-start, so the underline drifted at narrow widths.
   Pin the underline to the title's intrinsic width and clip overflow. */
.profile-section-title {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

/* L8 — Friends list rows: stack actions below name on narrow screens so
   the Invite/Remove buttons don't squeeze the name column. */
@media (max-width: 600px) {
  .friends-row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 6px;
  }
  .friends-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .friends-name { flex: 1 1 100%; min-width: 0; }
}

/* L9 — Settings label/slider grid template was `150px 1fr`; at <520px
   the label took 30% of width and the slider overflowed. Switch to a
   stacked layout below the breakpoint. */
@media (max-width: 520px) {
  .setting-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .setting-row label { font-size: 0.85rem; }
  .setting-row input[type=range] { width: 100%; }
}

/* L10 — Match-end title letter-spacing: 0.35em on a 7-char word at 3.8rem
   overflows below 1200px. Clamp both font-size and letter-spacing so it
   gracefully shrinks. */
@media (max-width: 1200px) {
  #match-end-title {
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    letter-spacing: clamp(0.14em, 1.4vw, 0.35em);
    padding: 0 16px;
  }
}

/* L11 — Collection class name max-width 120px clipped "🔒 Divine Mage".
   Bump the cap and let it scale with the available column. */
.coll-class-name { max-width: clamp(110px, 28vw, 180px); }

/* L12 — Faction Lore Modal: the panel needs a min-width so the title
   doesn't collapse on small screens, and the title font should clamp. */
.flm-panel { min-width: min(320px, 92vw); }
.flm-panel .flm-name { font-size: clamp(1.15rem, 4.5vw, 1.55rem); }

/* ===================================================================
   #4 — Mobile responsive pass (focused: typography + critical rows)
   Goal: nothing breaks at 480px; readable at 320px; desktop unchanged.
   =================================================================== */

@media (max-width: 1024px) {
  /* Common heading clamps so titles stop overflowing on narrow tablets. */
  .screen-title { font-size: clamp(1.2rem, 3vw, 1.6rem); letter-spacing: 0.18em; }
  .logo-title   { font-size: clamp(2.2rem, 6vw, 3.6rem); }
  .big-btn-title { font-size: clamp(0.95rem, 2.4vw, 1.25rem); letter-spacing: clamp(0.10em, 0.6vw, 0.18em); }
  .mode-card-title { font-size: clamp(0.95rem, 2.2vw, 1.15rem); }
  .queue-title { font-size: clamp(1.4rem, 4.2vw, 2rem); letter-spacing: clamp(0.12em, 0.8vw, 0.2em); }
  .party-code-display { font-size: clamp(1.8rem, 6vw, 2.8rem); }
}

@media (max-width: 768px) {
  /* Buttons trim padding so inline rows don't push past the viewport. */
  .btn        { padding: 10px 18px; font-size: 0.9rem; letter-spacing: 0.12em; }
  .side-btn   { padding: 10px 18px; letter-spacing: 0.12em; }
  .big-btn    { padding: 18px 22px; }

  /* Match HUD kill feed should not exceed half the viewport. */
  body.in-mp-match #kill-feed { max-width: 60vw; font-size: 0.78rem; }

  /* History row: date column needs a hair more room for "5 months ago". */
  .history-date { min-width: 90px; flex-shrink: 0; }
}

@media (max-width: 480px) {
  /* Home player card: single column on phones — meta items stack below
     the identity block instead of squeezing the right edge. */
  .hpc-head { flex-wrap: wrap; row-gap: 10px; }
  .hpc-meta { width: 100%; flex-direction: row; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
  .hpc-portrait-wrap { width: 48px; }
  .hpc-portrait { width: 48px; height: 56px; }
  .hpc-name { font-size: clamp(0.95rem, 4vw, 1.1rem); }

  /* Daily strip: stack each item's bar row below the description. */
  .hds-item { flex-wrap: wrap; gap: 6px; }
  .hds-bar-row { flex: 1 1 100%; }

  /* Profile nav row: scroll horizontally instead of forcing wrap soup. */
  .profile-nav-row { flex-wrap: nowrap; overflow-x: auto; }
  .profile-nav-row .btn { flex-shrink: 0; }
}

/* Touch-target minimum (WCAG): every interactive control gets a 36px
   minimum hit area on touch devices, regardless of visual padding. */
@media (hover: none) and (pointer: coarse) {
  .btn, .side-btn, .big-btn, .hpc-friends-online, .lb-tab,
  .friends-btn-invite, .friends-btn-remove, .me-opponent-add {
    min-height: 36px;
  }
}

/* ===================================================================
   PROFILE IDENTITY CARD + RAID IDENTITY STRIP (session 33)
   Practical visibility — name + title chip + portrait + rank are now
   prominent on the profile screen and raid setup screen, not buried in
   the screen-title text or absent entirely.
   =================================================================== */

/* Smaller, subdued screen title on profile — the identity card below it
   is now the dominant element. */
.profile-screen-eyebrow {
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  letter-spacing: 0.32em;
  opacity: 0.5;
  margin-bottom: 4px;
}

.profile-identity-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(640px, 96%);
  margin: 4px auto 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(38,30,22,0.78), rgba(18,14,10,0.88));
  border: 1px solid rgba(232,197,114,0.32);
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.pic-portrait-wrap {
  flex-shrink: 0;
  width: 64px; height: 76px;
  background: radial-gradient(ellipse at center, rgba(232,197,114,0.12) 0%, rgba(11,10,16,0.4) 75%);
  border: 1px solid rgba(232,197,114,0.28);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 18px rgba(232,197,114,0.10), 0 2px 8px rgba(0,0,0,0.5);
  overflow: hidden;
}
.pic-portrait { display: block; image-rendering: pixelated; }
.pic-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pic-name {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing: 0.10em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(232,197,114,0.35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pic-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pic-level {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-soft, #f3c574);
  font-weight: 600;
}
.pic-rank-slot { display: inline-flex; align-items: center; }
.pic-rank-slot .rank-badge { font-size: 0.72rem; padding: 2px 7px; }

/* Raid entry identity strip — thin, subtle, sits above the boss-vs-class grid.
   Says "Playing as <name> <title> · <class>" so the raid-entry screen also
   answers the question 'who am I in this run?'. */
.raid-identity-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(680px, 96%);
  margin: 0 auto 12px;
  padding: 6px 16px;
  background: linear-gradient(90deg, rgba(46,18,18,0.55), rgba(28,12,12,0.7));
  border: 1px solid rgba(220,90,90,0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
}
.ris-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220,90,90,0.85);
  font-weight: 700;
}
.ris-name {
  font-weight: 700;
  color: var(--gold, #e8c572);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.ris-sep { opacity: 0.4; }
.ris-class { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }

@media (max-width: 600px) {
  .profile-identity-card { padding: 10px 14px; gap: 12px; }
  .pic-portrait-wrap { width: 52px; height: 62px; }
  .pic-name { font-size: clamp(1rem, 4.5vw, 1.3rem); letter-spacing: 0.06em; }
  .raid-identity-strip { flex-wrap: wrap; row-gap: 4px; padding: 6px 12px; }
  .ris-name { max-width: 100%; }
}

/* Home player card "View Profile" footer button — small, unobtrusive, but
   the obvious entry point to cosmetics/achievements/mastery for signed-in
   users. Hidden via the JS guard for guests. */
.hpc-profile-footer {
  appearance: none;
  margin-top: 6px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(232,197,114,0.07);
  border: 1px solid rgba(232,197,114,0.18);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  color: rgba(255,255,255,0.78);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hpc-profile-footer:hover {
  background: rgba(232,197,114,0.14);
  border-color: rgba(232,197,114,0.4);
  color: #fff;
}
.hpc-footer-count { letter-spacing: 0.04em; }
.hpc-footer-count-dim { opacity: 0.55; font-style: italic; }
.hpc-footer-cta {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #e8c572);
  font-weight: 700;
  white-space: nowrap;
}

/* =================================================================
   COOP RAID PARTY HUD
   Lives in #raid-party-hud (shown only when state.isCoopRaid).
   Compact left-anchored strip showing each party member's HP + ult.
   ================================================================= */
#raid-party-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;            /* HUD doesn't block clicks */
  font-family: var(--font-body, sans-serif);
}
.rph-row {
  display: grid;
  grid-template-columns: 14px 96px 160px 70px;
  align-items: center;
  gap: 8px;
  background: rgba(8,4,18,0.62);
  border: 1px solid rgba(120,60,180,0.32);
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 22px;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.rph-row.dead   { opacity: 0.42; filter: grayscale(0.7) saturate(0.5); }
.rph-row.dc     { opacity: 0.55; border-color: rgba(255,180,80,0.45); }
.rph-row.is-me  { border-color: rgba(232,197,114,0.6); background: rgba(40,24,8,0.62); }
.rph-color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cls-color, #aaa);
  box-shadow: 0 0 8px var(--cls-color, #aaa);
  flex-shrink: 0;
}
.rph-name {
  color: rgba(255,235,200,0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rph-bar-wrap {
  display: flex; flex-direction: column; gap: 2px;
}
.rph-hp-bar, .rph-ult-bar {
  width: 100%;
  height: 9px;
  background: rgba(0,0,0,0.55);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(120,60,180,0.28);
}
.rph-ult-bar { height: 4px; }
.rph-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #d24a4a 0%, #e88a3a 75%, #ffd66b 100%);
  transition: width 0.22s ease;
  box-shadow: inset 0 0 6px rgba(255,180,80,0.4);
}
.rph-hp-fill.low  { background: linear-gradient(90deg, #d24a4a 0%, #ff6a3a 100%); }
.rph-hp-fill.crit { background: linear-gradient(90deg, #ff2030 0%, #ff5040 100%); animation: rph-crit-pulse 0.6s ease-in-out infinite; }
.rph-ult-fill {
  height: 100%;
  background: linear-gradient(90deg, #6080ff 0%, #c080ff 100%);
  transition: width 0.18s ease;
}
.rph-ult-fill.full { background: linear-gradient(90deg, #ffd66b 0%, #ffaa44 100%); animation: rph-ult-ready 1.4s ease-in-out infinite; }
.rph-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(220,200,160,0.55);
  text-align: right;
  white-space: nowrap;
}
.rph-status.dead { color: #ff5050; }
.rph-status.dc   { color: #ffaa44; }
@keyframes rph-crit-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.3); }
}
@keyframes rph-ult-ready {
  0%,100% { box-shadow: 0 0 8px rgba(255,214,107,0.5); }
  50%     { box-shadow: 0 0 14px rgba(255,214,107,0.95); }
}

/* =================================================================
   COOP RAID END SCREEN — party breakdown
   Shown inside #raid-end-stats when state.isCoopRaid.
   ================================================================= */
.raid-end-party-header {
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232,197,114,0.78);
  font-weight: 700;
}
.raid-end-party-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.raid-end-party-row {
  /* Phase 3 P0 distill (2026-05-09): class-color side-stripe → full border. */
  display: grid;
  grid-template-columns: minmax(120px,1fr) 100px 60px 100px 96px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(20,10,40,0.45);
  border: 1px solid var(--cls-color, rgba(120,60,180,0.55));
  border-radius: 6px;
  font-size: 0.8rem;
  color: rgba(255,235,200,0.88);
}
.raid-end-party-row.is-me {
  background: rgba(50,30,8,0.55);
  border-color: rgba(232,197,114,0.55);
}
.raid-end-party-name {
  font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,240,210,0.96);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.raid-end-party-class {
  color: var(--cls-color, #aaa);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.raid-end-party-stat {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: rgba(255,235,200,0.92);
}
.raid-end-stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(220,200,160,0.6);
  margin-left: 2px;
}
.raid-end-party-status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: right;
}
.raid-end-party-status.raid-end-alive { color: #80ff90; }
.raid-end-party-status.raid-end-died  { color: #ff6060; }

/* ── Manual lobby casual-only banner (Phase 2 P1, 2026-05-09) ─────────────────
   Replaces inline styles previously hard-coded in game.html. Token-driven so
   future theme work picks this up. */
.mp-casual-banner {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
  opacity: 0.85;
  line-height: var(--lh-normal);
}
.mp-casual-banner .mp-casual-dot { opacity: 0.6; }
.mp-casual-banner .mp-casual-sub {
  font-size: var(--fs-xs);
  opacity: 0.6;
}
.lobbies-subtitle {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  opacity: 0.78;
  margin: -2px 0 var(--s-3);
  line-height: var(--lh-normal);
}

/* Faction banner focus ring (keyboard nav) — Phase 3 P0 a11y, 2026-05-09.
   The banners on the home screen are now keyboard-accessible via role=button +
   tabindex=0 (game.html). Without this rule, focus is invisible because the
   default browser ring gets clipped by overflow on the parent. */
.fac-banner:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 12px var(--gold)) drop-shadow(0 0 24px rgba(232,197,114,0.35));
  transform: scale(1.04);
}

/* ── Global reduced-motion gate (Phase 3 P0, 2026-05-09) ─────────────────────
   PRODUCT.md commits to respecting `prefers-reduced-motion: reduce` as a
   non-negotiable. The Phase 1 frontend audit found only 5 of ~67 animations
   were gated. This wildcard rule disables animation + transition on every
   element under the query, so individual @media gates throughout the file
   become belt-and-braces (the earlier ones can stay; they're harmless).
   Combat is canvas-driven (JS), not CSS, so this rule does NOT affect player
   movement, projectiles, hit registration. It DOES disable: ember particles,
   screen-enter transitions, ult-charge pulses, button hover lifts, faction
   banner float, kf slide-in, friends-online pulse, mythic title pulse, score
   bump, victory burst, and every other CSS-driven motion. JS-side hitstop
   and screen shake are not addressed here; those are tracked as a separate
   follow-up since they require code-side gates, not CSS. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Pause all CSS animations when the tab is hidden (Phase 3 P1 optimize,
   2026-05-09) ─────────────────────────────────────────────────────────────
   js/setup.js toggles `body.tab-hidden` via the visibilitychange event. When
   set, every CSS animation pauses (paused element retains its current frame).
   Resumes instantly on tab focus. Cuts idle GPU + battery cost when Mystvale
   is a background tab. Combat is JS-driven (rAF) and naturally throttles
   when the tab is hidden, so no gameplay impact. */
body.tab-hidden *,
body.tab-hidden *::before,
body.tab-hidden *::after {
  animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 1 — GAME UI REDESIGN  (Session 62, 2026-05-12)
   "The Living Grimoire" applied to the in-match surfaces. Loads AT END
   of main.css so the cascade is authoritative over accumulated legacy
   rules. Removable as one block.
   Surfaces touched: top-bar (Ledger of Combatants), self-HUD (Caster's
   Ledger), kill feed (Chronicle), round banner (Page Turn), match-end
   (The Verdict), raid boss HUD (Sovereign's Ledger).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Local tokens for the redesign block ─────────────── */
:root {
  --grimoire-bg:        linear-gradient(180deg, #1d1622 0%, #120e18 40%, #0a0810 100%);
  --grimoire-border:    rgba(168,128,52,0.42);
  --grimoire-border-lit:rgba(232,197,114,0.62);
  --grimoire-inset:     inset 0 1px 0 rgba(245,217,138,0.10), inset 0 -1px 0 rgba(0,0,0,0.55);
  --grimoire-gilt-rule: linear-gradient(90deg, transparent 0%, rgba(232,197,114,0.0) 5%, rgba(232,197,114,0.42) 22%, rgba(232,197,114,0.65) 50%, rgba(232,197,114,0.42) 78%, rgba(232,197,114,0.0) 95%, transparent 100%);
}

/* ─────────────── 2. Top-bar — Ledger of Combatants ──────────────────── */
#hud {
  background: var(--grimoire-bg) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-bottom: 1px solid rgba(168,128,52,0.20) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.72), var(--grimoire-inset) !important;
  grid-template-columns: 1fr 168px 1fr !important;
  position: relative;
}
#hud::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 1px;
  background: var(--grimoire-gilt-rule);
  pointer-events: none;
}

.team-panel { padding: 10px 18px 11px !important; gap: 5px !important; }
.team-panel:nth-child(1) {
  background: linear-gradient(90deg, rgba(106,170,232,0.085), transparent 42%) !important;
  box-shadow: inset 8px 0 22px rgba(106,170,232,0.13) !important;
  border-right: 1px solid rgba(168,128,52,0.20) !important;
}
.team-panel:nth-child(3) {
  background: linear-gradient(-90deg, rgba(224,80,100,0.085), transparent 42%) !important;
  box-shadow: inset -8px 0 22px rgba(224,80,100,0.13) !important;
  border-left: 1px solid rgba(168,128,52,0.20) !important;
}
.team-hdr { gap: 12px; margin-bottom: 4px !important; align-items: baseline; }
.team-label {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.26em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.75);
}
.team-label.blue { color: #a8c8f0 !important; }
.team-label.red  { color: #f0a8a8 !important; }
.team-label.blue::before {
  content: '\25C6';
  display: inline-block;
  margin-right: 8px;
  font-size: 0.95em;
  color: #6aa8ee;
  text-shadow: 0 0 10px rgba(106,168,238,0.65);
  opacity: 1;
}
.team-label.red::before {
  content: '\2715';
  display: inline-block;
  margin-right: 8px;
  font-size: 0.92em;
  font-weight: 900;
  color: #ee6868;
  text-shadow: 0 0 10px rgba(238,104,104,0.65);
  opacity: 1;
}

.team-score {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 0.9 !important;
  color: var(--gold-lit) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 14px rgba(232,197,114,0.65),
    0 0 30px rgba(232,197,114,0.32) !important;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.55));
}
body.in-mp-match .team-score { font-size: 2.3rem !important; }

.round-indicator {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(232,197,114,0.10) 0%, transparent 65%),
    rgba(8,5,12,0.55) !important;
  border-left: 1px solid rgba(168,128,52,0.30) !important;
  border-right: 1px solid rgba(168,128,52,0.30) !important;
  padding: 10px 6px 9px !important;
  gap: 7px !important;
}
.ri-round {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.30em !important;
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(232,197,114,0.55) !important;
}

/* Wax-seal round pips — replace the existing rectangular pips */
.ri-pips { gap: 6px !important; }
.ri-pip {
  width: 12px !important;
  height: 12px !important;
  background: radial-gradient(circle at 35% 30%, #1c1620 0%, #0a070d 75%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    inset 0 -1px 1px rgba(0,0,0,0.6) !important;
  transition: all 0.32s var(--ease-out);
}
.ri-pip.blue {
  background: radial-gradient(circle at 35% 30%, #b4dcff 0%, #2e6fbb 60%, #0a2240 100%) !important;
  border-color: #6ab0ee !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -2px 2px rgba(0,0,0,0.5),
    0 0 10px rgba(106,176,238,0.85),
    0 0 22px rgba(106,176,238,0.35) !important;
  animation: rip-seal-pulse 2.6s ease-in-out infinite !important;
}
.ri-pip.red {
  background: radial-gradient(circle at 35% 30%, #ffc4c4 0%, #d0445a 55%, #5a0e1e 100%) !important;
  border-color: #ee6878 !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -2px 2px rgba(0,0,0,0.5),
    0 0 10px rgba(238,104,120,0.85),
    0 0 22px rgba(238,104,120,0.35) !important;
  animation: rip-seal-pulse 2.6s ease-in-out infinite !important;
}
@keyframes rip-seal-pulse {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.06); filter: brightness(1.15); }
}

/* ─────────────── 3. Self-HUD — Caster's Ledger ──────────────────────── */
#self-hud {
  background: var(--grimoire-bg) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-top: 1px solid rgba(168,128,52,0.20) !important;
  box-shadow:
    0 -4px 14px rgba(0,0,0,0.72),
    var(--grimoire-inset) !important;
  padding: 13px 22px 13px !important;
  grid-template-columns: 200px 1fr auto auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 20px !important;
  row-gap: 0 !important;
  position: relative;
  align-items: center;
  overflow: visible;
}
#self-hud::before {
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: -1px;
  height: 1px;
  background: var(--grimoire-gilt-rule);
  pointer-events: none;
}

.hud-identity {
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  padding: 2px 0 !important;
  grid-column: 1 / 2;
}
#hud-portrait-canvas {
  width: 46px !important;
  height: 52px !important;
  border: 1.5px solid rgba(232,197,114,0.55) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #1a1018 0%, #0a070d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 2px 8px rgba(0,0,0,0.6),
    0 0 0 1px rgba(8,5,12,0.9) !important;
  position: relative;
  flex-shrink: 0;
  transition: box-shadow 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
}
/* The Sigil Rule: portrait gains gold halo when ult crosses 75%, full bloom at 100% */
#self-hud[data-ult-state="charging"] #hud-portrait-canvas {
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 2px 8px rgba(0,0,0,0.6),
    0 0 0 1px rgba(8,5,12,0.9),
    0 0 14px rgba(232,197,114,0.40) !important;
}
#self-hud[data-ult-state="ready"] #hud-portrait-canvas {
  border-color: var(--gold-lit) !important;
  animation: ult-portrait-sigil 1.4s ease-in-out infinite;
}
@keyframes ult-portrait-sigil {
  0%,100% {
    box-shadow:
      inset 0 1px 0 rgba(245,217,138,0.20),
      0 2px 8px rgba(0,0,0,0.6),
      0 0 0 1px rgba(8,5,12,0.9),
      0 0 22px rgba(232,197,114,0.55);
    transform: scale(1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(245,217,138,0.30),
      0 2px 12px rgba(0,0,0,0.7),
      0 0 0 1px rgba(245,217,138,0.4),
      0 0 38px rgba(255,210,140,0.85),
      0 0 58px rgba(255,180,90,0.45);
    transform: scale(1.04);
  }
}

.hud-name-block {
  gap: 5px !important;
  flex: 1;
  min-width: 0;
}
.hud-name-block .self-name {
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 14px rgba(232,197,114,0.55) !important;
  line-height: 1.05 !important;
}
.hud-class-badge {
  font-family: var(--font-body) !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.18em !important;
  color: var(--faded-ink) !important;
  text-transform: uppercase;
}

/* Bars in the codex strip — wax-sealed ribbons */
.hud-bars-inline {
  gap: 4px !important;
  min-width: 0;
  grid-column: 2 / 3;
}
.hud-bars-inline .bar {
  height: 18px !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(168,128,52,0.0) 0,
      rgba(168,128,52,0.0) 24px,
      rgba(168,128,52,0.14) 24px,
      rgba(168,128,52,0.14) 25px),
    linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    inset 0 -1px 1px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.5) !important;
  overflow: hidden !important;
  position: relative;
}
.hud-bar-hp  { height: 22px !important; }
.hud-bar-ult { height: 18px !important; }
.hud-bar-rage { height: 11px !important; }

.hud-bars-inline .bar-fill {
  border-radius: 2px !important;
  position: relative;
}
.hud-bars-inline .bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 45%);
  pointer-events: none;
  border-radius: 2px;
}
.hud-bars-inline .hp-fill {
  background: linear-gradient(180deg, #f04060 0%, #d02840 55%, #7a0d20 100%) !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4) !important;
}
.hud-bars-inline .ult-fill {
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 50%, var(--gold-tarnished) 100%) !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3) !important;
}
.hud-bars-inline .rage-fill {
  background: linear-gradient(180deg, #ffb070 0%, var(--ember) 50%, #a8240c 100%) !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4) !important;
}
.hud-bars-inline .bar-label {
  font-family: var(--font-display) !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  color: rgba(232,228,220,0.92) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7) !important;
  left: 10px !important;
}
.hud-bar-hp .bar-label { line-height: 22px !important; }
.hud-bar-rage .bar-label { line-height: 11px !important; font-size: 0.5rem !important; letter-spacing: 0.18em !important; }
.hud-bars-inline .bar-num {
  font-family: var(--font-body) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  color: rgba(245,232,200,0.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.95) !important;
  letter-spacing: 0.02em !important;
  right: 10px !important;
}
.hud-bar-hp .bar-num { line-height: 22px !important; }

/* Ult-ready shimmer on the bar itself */
#self-hud[data-ult-state="ready"] .ult-fill {
  background: linear-gradient(180deg, #fff4d4 0%, var(--gold-lit) 50%, var(--gold) 100%) !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 18px rgba(255,210,140,0.55) !important;
}
#self-hud[data-ult-state="ready"] .ult-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,250,210,0.65) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ult-bar-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ult-bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}

/* Ability cooldown cards — inscribed runes */
#self-hud .cooldowns {
  gap: 7px !important;
  margin-top: 0 !important;
  align-self: center;
  grid-column: 3 / 4;
}
#self-hud .cd-slot {
  width: 58px !important;
  height: 64px !important;
  flex: none !important;
  background: linear-gradient(180deg, #1a1218 0%, #0a070d 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.55) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
#self-hud .cd-slot::before,
#self-hud .cd-slot::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border: 1px solid rgba(232,197,114,0.32);
  pointer-events: none;
  z-index: 2;
}
#self-hud .cd-slot::before { top: 2px;    left: 2px;    border-right: none; border-bottom: none; }
#self-hud .cd-slot::after  { bottom: 2px; right: 2px;   border-left: none;  border-top: none; }

#self-hud .cd-slot .key {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 8px rgba(232,197,114,0.45) !important;
  z-index: 1;
}
#self-hud .cd-slot .name {
  font-family: var(--font-body) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
  margin-top: 4px !important;
  z-index: 1;
}
#self-hud .cd-slot .cd-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.84) 100%) !important;
}
#self-hud .cd-slot.cooling {
  border-color: rgba(168,128,52,0.20) !important;
  filter: saturate(0.4);
}
#self-hud .cd-slot.ready {
  border-color: var(--ember) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.15),
    0 0 16px rgba(255,106,44,0.55),
    0 2px 6px rgba(0,0,0,0.55) !important;
  color: var(--ember-soft) !important;
}
#self-hud .cd-slot.ult-ready {
  border-color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.25),
    0 0 24px rgba(255,210,140,0.85),
    0 0 46px rgba(255,180,90,0.40),
    0 2px 6px rgba(0,0,0,0.55) !important;
  animation: cd-ult-sigil 1.4s ease-in-out infinite !important;
}
@keyframes cd-ult-sigil {
  0%,100% { transform: scale(1);    filter: brightness(1.05); }
  50%     { transform: scale(1.05); filter: brightness(1.3); }
}
#self-hud .cd-slot .cd-timer {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: rgba(255,250,220,0.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.9) !important;
  font-weight: 700;
  z-index: 3;
}

/* Dodge slot — same form, blue ink */
#dodge-slot {
  width: 58px !important;
  height: 64px !important;
  background: linear-gradient(180deg, #1a1218 0%, #0a070d 100%) !important;
  border: 1px solid rgba(106,170,232,0.34) !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(180,210,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.55) !important;
  align-self: center;
  grid-column: 4 / 5;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  flex: none !important;
}
#dodge-slot::before,
#dodge-slot::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border: 1px solid rgba(106,170,232,0.42);
  pointer-events: none;
  z-index: 2;
}
#dodge-slot::before { top: 2px;    left: 2px;    border-right: none; border-bottom: none; }
#dodge-slot::after  { bottom: 2px; right: 2px;   border-left: none;  border-top: none; }
#dodge-slot .key {
  font-family: var(--font-display) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.05em !important;
  color: #a8c8f0 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 8px rgba(106,170,232,0.55) !important;
}
#dodge-slot .name {
  font-family: var(--font-body) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: rgba(168,200,240,0.62) !important;
  margin-top: 4px !important;
}
#dodge-slot .cd-overlay {
  position: absolute;
  left: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.84) 100%);
  pointer-events: none;
}

/* Controls hint — single fine-print line spanning the strip */
#self-hud .controls-hint {
  grid-column: 1 / -1 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(168,128,52,0.16) !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.10em !important;
  color: var(--faded-ink) !important;
  text-align: center !important;
  opacity: 0.62 !important;
}
#self-hud .controls-hint strong {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* ─────────────── 4. Kill feed — The Chronicle ───────────────────────── */
#kill-feed {
  top: 10px !important;
  right: 10px !important;
  max-width: 280px !important;
  gap: 4px !important;
}
.kf-entry {
  background:
    linear-gradient(90deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.38) !important;
  border-radius: 3px !important;
  padding: 6px 12px 5px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  box-shadow:
    0 3px 12px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(245,217,138,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.45) !important;
  position: relative;
  overflow: hidden !important;
  animation:
    kf-chronicle-in 0.42s var(--ease-out),
    kfFade 4.2s forwards !important;
}
.kf-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,200,120,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: kf-ember-sweep 0.95s ease-out 0.12s;
  pointer-events: none;
}
.kf-entry .kf-name {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.kf-entry .kf-cls {
  font-family: var(--font-display) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.16em !important;
  opacity: 0.62 !important;
  text-transform: uppercase;
}
.kf-entry .kf-sword {
  color: var(--gold) !important;
  opacity: 0.85 !important;
  font-size: 0.82rem !important;
  margin: 0 3px;
}
.kf-entry .kf-icon {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.kf-entry.you-kill {
  border-color: rgba(232,197,114,0.70) !important;
  box-shadow:
    0 3px 14px rgba(0,0,0,0.7),
    0 0 18px rgba(232,197,114,0.28),
    inset 0 1px 0 rgba(245,217,138,0.18) !important;
  background: linear-gradient(90deg, rgba(40,30,15,0.92) 0%, rgba(20,14,8,0.92) 100%) !important;
}
.kf-entry.you-died {
  border-color: rgba(208,80,100,0.70) !important;
  box-shadow:
    0 3px 14px rgba(0,0,0,0.7),
    0 0 18px rgba(208,80,100,0.28),
    inset 0 1px 0 rgba(255,180,180,0.10) !important;
  background: linear-gradient(90deg, rgba(40,18,20,0.92) 0%, rgba(20,8,10,0.92) 100%) !important;
}
@keyframes kf-chronicle-in {
  0%   { opacity: 0; transform: translateX(28px) skewX(-3deg); }
  60%  { opacity: 1; transform: translateX(0)    skewX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes kf-ember-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─────────────── 5. Round banner — The Page Turn ────────────────────── */
#round-banner-overlay {
  background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(11,10,16,0.55) 55%, rgba(11,10,16,0.75) 100%);
}
.rbo-inner {
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 30px 44px !important;
  position: relative;
}
.rbo-line {
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(232,197,114,0) 4%, rgba(232,197,114,0.85) 22%, rgba(245,217,138,0.95) 50%, rgba(232,197,114,0.85) 78%, rgba(232,197,114,0) 96%, transparent 100%) !important;
  transform: scaleX(0);
  transform-origin: center;
  animation: rbo-line-sweep 0.46s var(--ease-out) forwards;
}
.rbo-inner > .rbo-line:nth-child(1) { animation-delay: 0s; }
.rbo-inner > .rbo-line:nth-child(4) { animation-delay: 0.06s; }
@keyframes rbo-line-sweep {
  0%   { transform: scaleX(0);  opacity: 0; }
  100% { transform: scaleX(1);  opacity: 1; }
}
.rbo-number {
  font-family: var(--font-display) !important;
  font-size: 4.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  color: var(--gold-lit) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.9),
    0 0 32px rgba(232,197,114,0.85),
    0 0 64px rgba(232,197,114,0.45),
    0 0 110px rgba(232,197,114,0.18) !important;
  padding: 14px 0 6px !important;
  animation: rbo-number-drop 0.55s var(--ease-out) 0.28s both;
}
@keyframes rbo-number-drop {
  0%   { opacity: 0; transform: translateY(-22px) scale(0.85); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0); }
}
.rbo-map {
  font-family: var(--font-display) !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.42em !important;
  color: var(--ember-soft) !important;
  text-shadow: 0 0 14px rgba(255,176,122,0.55) !important;
  padding-bottom: 10px !important;
  animation: rbo-map-rise 0.55s var(--ease-out) 0.46s both;
}
@keyframes rbo-map-rise {
  0%   { opacity: 0; transform: translateY(6px); letter-spacing: 0.18em; }
  100% { opacity: 1; transform: translateY(0);   letter-spacing: 0.42em; }
}

/* ─────────────── 6. Match-end — The Verdict ─────────────────────────── */
#screen-match-end {
  position: relative;
  padding-top: 28px !important;
}
#match-end-title {
  font-size: clamp(3.4rem, 7vh, 5.2rem) !important;
  letter-spacing: 0.32em !important;
  margin-bottom: 6px !important;
}
#match-end-score {
  position: relative;
  font-family: var(--font-display) !important;
  letter-spacing: 0.14em !important;
}
/* Sigil dividers around the score */
#match-end-score::before,
#match-end-score::after {
  content: '';
  display: block;
  height: 1px;
  width: 240px;
  margin: 18px auto 14px;
  background: linear-gradient(90deg, transparent 0%, rgba(232,197,114,0.55) 50%, transparent 100%);
}
#match-end-score::after { margin: 14px auto 6px; }

/* Stronger victory burst */
#screen-match-end.me-won::before {
  width: 920px !important;
  height: 920px !important;
  background: radial-gradient(circle, rgba(255,230,170,0.42) 0%, rgba(232,197,114,0.20) 22%, rgba(232,197,114,0.05) 48%, transparent 70%) !important;
  filter: blur(3px);
  animation: me-burst 2.0s ease-out forwards !important;
}
/* Defeat ash-fall */
#screen-match-end.me-lost::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(196,50,74,0.55) 0px, transparent 2.5px),
    radial-gradient(circle at 26% 22%, rgba(196,50,74,0.45) 0px, transparent 2px),
    radial-gradient(circle at 42% 8%,  rgba(196,50,74,0.55) 0px, transparent 2.5px),
    radial-gradient(circle at 58% 18%, rgba(196,50,74,0.40) 0px, transparent 2px),
    radial-gradient(circle at 72% 12%, rgba(196,50,74,0.55) 0px, transparent 2.5px),
    radial-gradient(circle at 84% 24%, rgba(196,50,74,0.45) 0px, transparent 2px),
    radial-gradient(circle at 18% 38%, rgba(196,50,74,0.40) 0px, transparent 2px),
    radial-gradient(circle at 92% 44%, rgba(196,50,74,0.50) 0px, transparent 2.5px),
    radial-gradient(circle at 6%  62%, rgba(196,50,74,0.40) 0px, transparent 2px),
    radial-gradient(circle at 50% 58%, rgba(196,50,74,0.45) 0px, transparent 2px);
  background-repeat: no-repeat;
  animation: me-ashfall 1.8s ease-out forwards;
  z-index: 0;
}
#screen-match-end.me-lost > * { position: relative; z-index: 1; }
@keyframes me-ashfall {
  0%   { transform: translateY(-50px); opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: translateY(160px); opacity: 0; }
}

/* Ledger-style breakdown */
.me-breakdown-wrap {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.38) !important;
  border-radius: 5px !important;
  box-shadow:
    var(--grimoire-inset),
    0 4px 16px rgba(0,0,0,0.6) !important;
  margin: 14px auto !important;
  overflow: hidden !important;
}
.me-bd-header {
  background: linear-gradient(180deg, rgba(40,28,40,0.85) 0%, rgba(22,16,24,0.92) 100%) !important;
  border-bottom: 1px solid rgba(168,128,52,0.32) !important;
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  padding: 9px 14px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
  text-transform: uppercase;
}
.me-bd-row {
  border-top: 1px solid rgba(168,128,52,0.10) !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  transition: background 0.15s;
}
.me-bd-row:nth-child(even) { background: rgba(168,128,52,0.04) !important; }
.me-bd-row:hover           { background: rgba(168,128,52,0.10) !important; }
.me-bd-self {
  background: linear-gradient(90deg, rgba(232,197,114,0.14) 0%, rgba(232,197,114,0.06) 100%) !important;
  position: relative;
}
.me-bd-self::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 8%, var(--gold-lit) 50%, transparent 92%);
  box-shadow: 0 0 8px rgba(232,197,114,0.65);
}
.me-bd-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.me-bd-self .me-bd-name { color: var(--gold-lit); }
.me-bd-row:not(.me-bd-self) .me-bd-name { color: var(--text); font-weight: 500; }
.me-bd-cls {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
.me-bd-stat {
  font-family: var(--font-display) !important;
  color: var(--gold-lit) !important;
  font-weight: 600 !important;
}
.me-bd-label {
  font-family: var(--font-body) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
  font-size: 0.6rem !important;
}

.me-opponents-wrap {
  background: rgba(8,5,12,0.55) !important;
  border: 1px solid rgba(168,128,52,0.18);
  border-radius: 5px;
  padding: 10px 14px 12px !important;
  margin: 10px auto !important;
}
.me-opponents-title {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.24em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
.me-opponent-row {
  background: rgba(28,20,28,0.55) !important;
  border: 1px solid rgba(168,128,52,0.12) !important;
  border-radius: 4px !important;
}
.me-opponent-cls {
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
.me-opponent-name { color: var(--text) !important; }

.rank-event {
  font-family: var(--font-display) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

/* ─────────────── 7. Raid boss HUD — The Sovereign's Ledger ──────────── */
#raid-boss-hud {
  background: linear-gradient(180deg, rgba(28,12,40,0.96) 0%, rgba(14,6,22,0.96) 100%) !important;
  border-bottom: 1px solid rgba(168,80,232,0.45) !important;
  box-shadow:
    var(--grimoire-inset),
    0 4px 14px rgba(80,20,140,0.18) !important;
  padding: 12px 28px 11px !important;
  gap: 8px !important;
  position: relative;
}
#raid-boss-hud::after {
  content: '';
  position: absolute;
  left: 28px; right: 28px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(180,120,240,0.55) 25%, rgba(232,197,114,0.55) 50%, rgba(180,120,240,0.55) 75%, transparent 100%);
  pointer-events: none;
}
.raid-boss-identity { gap: 14px !important; align-items: baseline !important; }
#raid-boss-name {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  color: #d8b0ff !important;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 18px rgba(180,120,240,0.65),
    0 0 36px rgba(180,120,240,0.30) !important;
}
#raid-boss-phase-label {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.28em !important;
  color: rgba(200,160,255,0.75) !important;
  text-transform: uppercase;
}
#raid-boss-hp-wrap { gap: 14px !important; }
#raid-boss-hp-bar {
  height: 14px !important;
  background: linear-gradient(180deg, #1a0820 0%, #0a040e 100%) !important;
  border: 1px solid rgba(168,80,232,0.45) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232,180,255,0.10),
    inset 0 -1px 1px rgba(0,0,0,0.6) !important;
  overflow: visible;
}
#raid-boss-hp-fill {
  background: linear-gradient(180deg, #e4b8ff 0%, #8a40e0 55%, #4a1080 100%) !important;
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,0.4),
    0 0 14px rgba(180,120,240,0.55) !important;
  height: 100% !important;
  border-radius: 2px !important;
}
.raid-phase-marker {
  width: 3px !important;
  height: 22px !important;
  top: -5px !important;
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 50%, var(--gold-tarnished) 100%) !important;
  border-radius: 1px !important;
  box-shadow:
    0 0 6px rgba(232,197,114,0.85),
    0 0 14px rgba(232,197,114,0.45) !important;
}
.raid-phase-marker[data-phase]::before {
  content: attr(data-phase);
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--gold-lit);
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 6px rgba(232,197,114,0.5);
}
#raid-boss-hp-text {
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.16em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 8px rgba(232,197,114,0.5) !important;
}
#raid-decay-stacks {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
}

/* ─────────────── 8. Reduced-motion guards ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ri-pip.blue, .ri-pip.red { animation: none !important; }
  #self-hud[data-ult-state="ready"] #hud-portrait-canvas { animation: none !important; }
  #self-hud[data-ult-state="ready"] .ult-fill::before { animation: none !important; display: none !important; }
  #self-hud .cd-slot.ult-ready { animation: none !important; }
  .kf-entry { animation: none !important; opacity: 1 !important; }
  .kf-entry::before { display: none !important; }
  .rbo-line { animation: none !important; transform: scaleX(1) !important; opacity: 1 !important; }
  .rbo-number { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .rbo-map { animation: none !important; opacity: 1 !important; transform: none !important; letter-spacing: 0.42em !important; }
  #screen-match-end.me-won::before { animation: none !important; display: none !important; }
  #screen-match-end.me-lost::after { animation: none !important; display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — GAME UI REDESIGN  (Session 63, 2026-05-12)
   The Living Grimoire applied to the on-ramp surfaces: Home, Play Hub,
   Mode Select, Class Select, Queue Setup, Queue, Party. Sequencing the
   path INTO a match — every screen reads as a ritual the player is
   performing before the codex opens.
   Loads cascade-last so its selectors win against accumulated legacy
   rules. Removable as one block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Shared ornament — gilt rule + display labels ─────── */
.section-label {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-shadow: 0 0 12px rgba(232,197,114,0.35) !important;
  font-weight: 600 !important;
  text-align: center;
  margin: 14px auto 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.section-label::before,
.section-label::after {
  content: '';
  display: inline-block;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,197,114,0.6), transparent);
}

/* ─────────────── 2. Home — top bar + body chrome ─────────────────────── */
#screen-home { max-width: 1120px !important; }

.home-top-bar {
  position: relative;
  border-bottom: none !important;
  padding-bottom: 18px !important;
  margin-bottom: 16px !important;
}
.home-top-bar::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 4px;
  height: 1px;
  background: var(--grimoire-gilt-rule);
  pointer-events: none;
}
.home-logo-strip { gap: 14px !important; }
.home-logo-icon {
  filter: drop-shadow(0 0 18px rgba(232,197,114,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: filter 0.32s var(--ease-out);
}
.home-logo-name {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.34em !important;
  background: linear-gradient(180deg, #fff4cc 0%, #e8c572 50%, #c09428 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(232,197,114,0.5));
}
.home-logo-sub {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.28em !important;
  color: var(--ember-soft) !important;
  font-style: normal !important;
  text-transform: uppercase;
  opacity: 0.78;
}

.online-count-bar {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.5) !important;
  font-family: var(--font-display);
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  gap: 8px !important;
}
.online-dot {
  width: 8px !important;
  height: 8px !important;
  background: radial-gradient(circle at 35% 30%, #b4ffc4 0%, #4ad06a 60%, #0a3014 100%) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    0 0 8px rgba(74,208,106,0.85),
    0 0 18px rgba(74,208,106,0.35) !important;
  animation: online-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes online-dot-pulse {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.12); filter: brightness(1.18); }
}

/* Home body — two-column codex layout */
.home-body {
  gap: 24px !important;
}
.home-left, .home-right { gap: 14px !important; }

/* Home player card outer chrome — keeps the JS-rendered inner HTML untouched */
#home-player-card {
  background: var(--grimoire-bg) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.6),
    var(--grimoire-inset) !important;
  padding: 16px 18px !important;
  position: relative;
}
#home-player-card::before {
  content: '';
  position: absolute;
  top: 8px; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,197,114,0.30), transparent);
  pointer-events: none;
}

/* Home daily strip — same codex treatment */
#home-daily-strip {
  background: var(--grimoire-bg) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.55),
    var(--grimoire-inset) !important;
}

/* ─────────────── 3. Home — play CTA + action grid + utility row ──────── */
.home-play-btn {
  background: linear-gradient(180deg, rgba(74,52,28,0.82) 0%, rgba(28,20,12,0.95) 100%) !important;
  border: 2px solid var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.22),
    0 0 36px rgba(232,197,114,0.32),
    0 6px 22px rgba(0,0,0,0.6) !important;
  position: relative;
}
.home-play-btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(232,197,114,0.18);
  border-radius: 6px;
  pointer-events: none;
}
.home-play-btn .big-btn-title {
  font-size: 2rem !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 22px rgba(232,197,114,0.55) !important;
}
.home-play-btn .big-btn-sub {
  font-family: var(--font-display) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  font-style: normal !important;
}

.home-action-grid {
  gap: 12px !important;
}
.home-action-btn {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    0 3px 10px rgba(0,0,0,0.5) !important;
  padding: 14px 12px !important;
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.home-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(232,197,114,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
  pointer-events: none;
}
.home-action-btn:hover {
  border-color: var(--grimoire-border-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.14),
    0 0 22px rgba(232,197,114,0.22),
    0 4px 14px rgba(0,0,0,0.55) !important;
  transform: translateY(-2px);
}
.home-action-btn:hover::before { opacity: 1; }
.home-action-btn .home-action-icon {
  color: var(--gold) !important;
  filter: drop-shadow(0 0 6px rgba(232,197,114,0.45));
}
.home-action-btn:hover .home-action-icon {
  color: var(--gold-lit) !important;
  filter: drop-shadow(0 0 10px rgba(255,210,140,0.7));
  transform: scale(1.08);
}
.home-action-label {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--text) !important;
  font-weight: 600 !important;
}
.home-action-btn:hover .home-action-label { color: var(--gold-lit) !important; }

/* Utility row — marginalia */
.home-utility-row {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
  margin-top: 14px;
  opacity: 0.85;
}
.home-util-btn {
  background: transparent !important;
  border: none !important;
  color: var(--faded-ink) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  cursor: pointer;
  padding: 4px 8px !important;
  transition: color 0.18s var(--ease-out);
  position: relative;
}
.home-util-btn:hover { color: var(--gold) !important; }
.home-util-sep { color: rgba(168,128,52,0.5) !important; }

/* ─────────────── 4. Play Hub — illuminated paths ─────────────────────── */
#screen-play-hub .screen-title {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  letter-spacing: 0.34em !important;
  margin-bottom: 28px !important;
}
.play-hub-grid {
  gap: 14px !important;
  max-width: 820px !important;
}
.play-hub-grid .big-btn {
  background: linear-gradient(180deg, rgba(30,22,32,0.92) 0%, rgba(14,10,16,0.95) 100%) !important;
  border: 1.5px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.08),
    0 4px 14px rgba(0,0,0,0.55),
    0 0 0 1px rgba(8,5,12,0.6) !important;
  padding: 22px 28px !important;
  position: relative;
  overflow: hidden;
}
.play-hub-grid .big-btn:hover {
  background: linear-gradient(180deg, rgba(60,42,28,0.92) 0%, rgba(28,18,12,0.97) 100%) !important;
  border-color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 0 32px rgba(232,197,114,0.30),
    0 6px 22px rgba(0,0,0,0.65) !important;
}
.play-hub-grid .big-btn::before {
  font-family: var(--font-display);
  font-size: 5.5rem !important;
  color: var(--gold) !important;
  opacity: 0.10 !important;
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  filter: drop-shadow(0 0 12px rgba(232,197,114,0.4));
}
.play-hub-grid .big-btn:hover::before {
  opacity: 0.22 !important;
  transform: translateY(-50%) scale(1.04) rotate(-3deg);
}
.play-hub-grid .big-btn > * { position: relative; z-index: 1; }

.play-hub-grid .big-btn .big-btn-title {
  font-size: 1.4rem !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 14px rgba(232,197,114,0.45) !important;
}
.play-hub-grid .big-btn .big-btn-sub {
  font-family: var(--font-display) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.20em !important;
  font-style: normal !important;
  text-transform: uppercase;
  color: rgba(255,176,122,0.8) !important;
}

/* Per-option accent colors */
.play-hub-grid .big-btn.queue-btn { border-color: rgba(232,197,114,0.55) !important; }
.play-hub-grid .big-btn.queue-btn:hover { border-color: var(--gold-lit) !important; }
.play-hub-grid .big-btn.warband-btn { border-color: rgba(196,80,100,0.55) !important; }
.play-hub-grid .big-btn.warband-btn:hover {
  border-color: #ea8090 !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.18), 0 0 32px rgba(196,80,100,0.30), 0 6px 22px rgba(0,0,0,0.65) !important;
}
.play-hub-grid .big-btn.warband-btn::before { color: #ea8090 !important; filter: drop-shadow(0 0 12px rgba(196,80,100,0.45)); }
.play-hub-grid .big-btn.warband-btn .big-btn-title { color: #ffb0b8 !important; }
.play-hub-grid .big-btn.warband-btn:hover .big-btn-title { color: #ffd0d8 !important; }

.play-hub-grid .big-btn.training-btn { border-color: rgba(100,200,160,0.55) !important; }
.play-hub-grid .big-btn.training-btn:hover {
  border-color: #80e8c0 !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.18), 0 0 32px rgba(100,200,160,0.30), 0 6px 22px rgba(0,0,0,0.65) !important;
}
.play-hub-grid .big-btn.training-btn::before { color: #80e8c0 !important; filter: drop-shadow(0 0 12px rgba(100,200,160,0.45)); }
.play-hub-grid .big-btn.training-btn .big-btn-title { color: #b0eed8 !important; }

.play-hub-grid .big-btn.secondary { border-color: rgba(168,128,52,0.42) !important; }
.play-hub-grid .big-btn.secondary:hover { border-color: var(--gold) !important; }

/* ─────────────── 5. Play (mode select) — banner cards ────────────────── */
#screen-play .screen-title {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  letter-spacing: 0.32em !important;
  margin-bottom: 28px !important;
}
.mode-grid { gap: 14px !important; }
.mode-card {
  background: linear-gradient(180deg, rgba(30,22,32,0.92) 0%, rgba(14,10,16,0.96) 100%) !important;
  border: 1.5px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.08),
    0 4px 14px rgba(0,0,0,0.55) !important;
  padding: 24px 20px !important;
  text-align: center;
}
.mode-card-size {
  font-family: var(--font-display) !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.5));
}
.mode-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}
.mode-card-desc {
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em !important;
  color: var(--faded-ink) !important;
  font-style: italic;
}

/* ─────────────── 6. Class Select — tarot frames ──────────────────────── */
#screen-class .screen-title {
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  letter-spacing: 0.32em !important;
}
.class-select-layout {
  gap: 18px !important;
}
.class-portrait-grid {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  gap: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}
.class-portrait-grid .class-portrait {
  background: linear-gradient(180deg, #1a1018 0%, #0a070d 100%) !important;
  border: 1.5px solid rgba(168,128,52,0.34) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 3px 10px rgba(0,0,0,0.5) !important;
  position: relative;
  transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.class-portrait-grid .class-portrait::before,
.class-portrait-grid .class-portrait::after {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border: 1px solid rgba(232,197,114,0.38);
  pointer-events: none;
  z-index: 2;
}
.class-portrait-grid .class-portrait::before { top: 3px;    left: 3px;    border-right: none; border-bottom: none; }
.class-portrait-grid .class-portrait::after  { bottom: 3px; right: 3px;   border-left: none;  border-top: none; }
.class-portrait-grid .class-portrait:hover {
  border-color: var(--gold) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 0 22px rgba(232,197,114,0.32),
    0 4px 14px rgba(0,0,0,0.6) !important;
  transform: translateY(-2px);
}
.class-portrait-grid .class-portrait.selected {
  border-color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.25),
    0 0 28px rgba(255,210,140,0.55),
    0 0 56px rgba(232,197,114,0.30),
    0 4px 14px rgba(0,0,0,0.6) !important;
}

.class-detail {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.95) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.08),
    0 4px 16px rgba(0,0,0,0.6) !important;
}

.config-row {
  background: rgba(8,5,12,0.42) !important;
  border: 1px solid rgba(168,128,52,0.18) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  gap: 24px !important;
  margin-top: 14px !important;
}
.config-label {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.26em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}

/* ─────────────── 7. Queue Setup — sealed parchment tabs ──────────────── */
#screen-queue-setup .screen-title {
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  letter-spacing: 0.32em !important;
}
#screen-queue-setup .btn.small {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.35) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    0 2px 6px rgba(0,0,0,0.45) !important;
  transition: all 0.18s var(--ease-out);
}
#screen-queue-setup .btn.small:hover {
  border-color: var(--gold) !important;
  color: var(--gold-lit) !important;
  background: linear-gradient(180deg, rgba(60,42,28,0.85) 0%, rgba(28,18,12,0.92) 100%) !important;
}
#screen-queue-setup .btn.small.selected {
  border-color: var(--gold-lit) !important;
  color: var(--gold-lit) !important;
  background: linear-gradient(180deg, rgba(74,52,28,0.95) 0%, rgba(40,28,16,0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.22),
    0 0 14px rgba(232,197,114,0.45),
    0 2px 6px rgba(0,0,0,0.5) !important;
}

/* ─────────────── 8. Queue (searching) — the ritual ───────────────────── */
#screen-queue {
  position: relative;
}
.queue-title {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  letter-spacing: 0.42em !important;
  color: var(--gold) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 22px rgba(232,197,114,0.65),
    0 0 56px rgba(232,197,114,0.25) !important;
  text-transform: uppercase;
  margin-bottom: 32px !important;
}

.queue-portrait-wrap {
  width: 96px !important;
  height: 108px !important;
  border: 1.5px solid rgba(232,197,114,0.55) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #1a1018 0%, #0a070d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 4px 14px rgba(0,0,0,0.65),
    0 0 28px rgba(232,197,114,0.30) !important;
  margin-bottom: 28px !important;
  position: relative;
}
.queue-portrait-wrap::before,
.queue-portrait-wrap::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid rgba(232,197,114,0.55);
  pointer-events: none;
}
.queue-portrait-wrap::before { top: 3px;    left: 3px;    border-right: none; border-bottom: none; }
.queue-portrait-wrap::after  { bottom: 3px; right: 3px;   border-left: none;  border-top: none; }
.queue-portrait-glow {
  position: absolute;
  inset: -6px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(232,197,114,0.25) 0%, transparent 70%);
  animation: queue-portrait-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes queue-portrait-pulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}

.queue-spinner-wrap {
  width: 160px !important;
  height: 160px !important;
  position: relative;
  margin: 0 auto 28px !important;
}
.queue-spinner {
  position: absolute;
  inset: 12px !important;
  border: 2px solid transparent !important;
  border-top-color: var(--gold) !important;
  border-right-color: var(--gold-tarnished) !important;
  border-radius: 50% !important;
  animation: queue-spin 1.8s linear infinite;
  box-shadow:
    0 0 24px rgba(232,197,114,0.45),
    inset 0 0 14px rgba(232,197,114,0.18) !important;
}
.queue-spinner-outer {
  position: absolute;
  inset: 0 !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-radius: 50%;
  animation: queue-spin-reverse 6s linear infinite;
}
.queue-spinner-outer::before,
.queue-spinner-outer::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 30%, #fff4cc 0%, var(--gold) 60%, #5a4010 100%);
  border-radius: 50%;
  top: 50%; left: 50%;
  box-shadow: 0 0 12px rgba(232,197,114,0.85);
}
.queue-spinner-outer::before { transform: translate(-50%, -82px); }
.queue-spinner-outer::after  { transform: translate(-50%,  74px); }
.queue-spinner-wrap::after {
  content: '';
  position: absolute;
  inset: 24px !important;
  border: 1px solid rgba(232,197,114,0.18) !important;
  border-radius: 50% !important;
  animation: queue-spin 4s linear infinite reverse;
}
.queue-spinner-dot {
  width: 14px !important;
  height: 14px !important;
  background: radial-gradient(circle at 35% 30%, #fff4cc 0%, var(--gold-lit) 50%, var(--ember) 100%) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 18px rgba(232,197,114,0.85),
    0 0 36px rgba(255,180,90,0.45) !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: queue-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes queue-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes queue-spin-reverse { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes queue-dot-pulse {
  0%,100% { transform: translate(-50%, -50%) scale(1);    filter: brightness(1); }
  50%     { transform: translate(-50%, -50%) scale(1.18); filter: brightness(1.25); }
}

.queue-status-wrap { gap: 8px; display: flex; flex-direction: column; align-items: center; }
#queue-status {
  font-family: var(--font-display) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.30em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.45) !important;
  text-transform: uppercase;
}
#queue-elapsed {
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--gold) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 18px rgba(232,197,114,0.65),
    0 0 36px rgba(232,197,114,0.30) !important;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.5));
}
#queue-class-label {
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.34em !important;
  color: var(--ember-soft) !important;
  text-shadow: 0 0 10px rgba(255,176,122,0.45) !important;
  text-transform: uppercase;
  padding-top: 4px;
}
.queue-wait-hint {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.10em !important;
  color: var(--faded-ink) !important;
  font-style: italic;
  margin-top: 6px !important;
}
#queue-cancel-btn {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.96) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  color: var(--faded-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
  padding: 10px 28px !important;
  border-radius: 4px !important;
  margin-top: 36px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    0 2px 8px rgba(0,0,0,0.5) !important;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
}
#queue-cancel-btn:hover {
  border-color: rgba(208,80,90,0.65) !important;
  color: rgba(255,180,180,0.95) !important;
  background: linear-gradient(180deg, rgba(60,18,22,0.92) 0%, rgba(28,8,10,0.96) 100%) !important;
}

/* ─────────────── 9. Party — sealed scroll + banner standards ────────── */
#screen-party .screen-title {
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  letter-spacing: 0.32em !important;
}
.party-tabs {
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.party-tab {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  color: var(--faded-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  padding: 9px 22px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
}
.party-tab:hover { color: var(--gold) !important; border-color: rgba(232,197,114,0.5) !important; }
.party-tab.selected {
  background: linear-gradient(180deg, rgba(74,52,28,0.95) 0%, rgba(40,28,16,0.98) 100%) !important;
  border-color: var(--gold-lit) !important;
  color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.22),
    0 0 12px rgba(232,197,114,0.4) !important;
}

.party-hint {
  font-family: var(--font-body);
  font-size: 0.78rem !important;
  color: var(--faded-ink) !important;
  font-style: italic;
  text-align: center;
  max-width: 480px;
  margin: 0 auto 14px !important;
  line-height: 1.6;
}

.party-code-section {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.96) 100%) !important;
  border: 1.5px solid var(--grimoire-border-lit) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 24px rgba(232,197,114,0.18) !important;
  padding: 18px 24px !important;
  text-align: center;
  position: relative;
  margin-bottom: 18px;
}
.party-code-section::before,
.party-code-section::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(232,197,114,0.55);
  pointer-events: none;
}
.party-code-section::before { top: 5px;    left: 5px;    border-right: none; border-bottom: none; }
.party-code-section::after  { bottom: 5px; right: 5px;   border-left: none;  border-top: none; }
.party-code-label {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.28em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
  opacity: 0.82;
}
.party-code-display {
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.36em !important;
  color: var(--gold-lit) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 18px rgba(232,197,114,0.65),
    0 0 40px rgba(232,197,114,0.25) !important;
  cursor: pointer;
  margin: 4px 0 !important;
  transition: filter 0.18s var(--ease-out);
}
.party-code-display:hover { filter: brightness(1.2); }
.party-code-hint {
  font-family: var(--font-body) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.06em !important;
  color: var(--faded-ink) !important;
  font-style: italic;
}

.party-code-input {
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1.5px solid rgba(168,128,52,0.45) !important;
  border-radius: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: var(--gold-lit) !important;
  text-align: center;
  padding: 12px 16px !important;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(245,217,138,0.08) !important;
}
.party-code-input:focus {
  border-color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.6),
    0 0 18px rgba(232,197,114,0.45) !important;
  outline: none !important;
}

.party-members-section {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px;
}
.party-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px !important;
}
.party-member-row,
.party-members-list > * {
  background: linear-gradient(90deg, rgba(28,20,28,0.55) 0%, rgba(14,10,16,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.18) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  position: relative;
}
.party-member-row::before,
.party-members-list > *::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 12%, rgba(232,197,114,0.55) 50%, transparent 88%);
  pointer-events: none;
}

/* ─────────────── 10. Mode/Class config buttons everywhere ────────────── */
.config-group .btn.small {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}

/* ─────────────── 11. Back buttons — consistent treatment ─────────────── */
.back-btn {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
}
.back-btn:hover {
  color: var(--gold) !important;
}

/* ─────────────── 12. Reduced-motion guards ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none !important; }
  .queue-portrait-glow { animation: none !important; }
  .queue-spinner { animation: none !important; }
  .queue-spinner-outer { animation: none !important; }
  .queue-spinner-wrap::after { animation: none !important; }
  .queue-spinner-dot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — GAME UI REDESIGN  (Session 64, 2026-05-12)
   The Living Grimoire applied to the deep menus: Login, Profile,
   Achievements, Collection, Leaderboard, Friends, Settings, Daily,
   History, News, Spectate, Lobbies, MP, MP-Lobby. Completes the
   end-to-end visual system across every game.html surface.

   Loads cascade-last so its selectors win against accumulated legacy
   rules. Removable as one block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Universal screen title — gilt rule under heading ── */
.menu-screen > .screen-title {
  font-family: var(--font-display) !important;
  font-size: 1.75rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 0 22px rgba(232,197,114,0.50),
    0 0 50px rgba(232,197,114,0.20) !important;
}

/* ─────────────── 2. Login — sealed auth box ─────────────────────────── */
#screen-login {
  max-width: 520px !important;
}
.auth-box {
  background: var(--grimoire-bg) !important;
  border: 1px solid var(--grimoire-border-lit) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    0 6px 28px rgba(0,0,0,0.65),
    0 0 32px rgba(232,197,114,0.18) !important;
  padding: 24px !important;
  width: min(440px, 96%) !important;
  position: relative;
}
.auth-box::before,
.auth-box::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(232,197,114,0.55);
  pointer-events: none;
}
.auth-box::before { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.auth-box::after  { bottom: 6px; right: 6px;   border-left: none;  border-top: none; }

.auth-tabs { gap: 8px !important; margin-bottom: 18px !important; }
.auth-tab {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  color: var(--faded-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  padding: 9px 22px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
}
.auth-tab:hover { color: var(--gold) !important; border-color: rgba(232,197,114,0.5) !important; }
.auth-tab.active {
  background: linear-gradient(180deg, rgba(74,52,28,0.95) 0%, rgba(40,28,16,0.98) 100%) !important;
  border-color: var(--gold-lit) !important;
  color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.22),
    0 0 14px rgba(232,197,114,0.42) !important;
}

.auth-input {
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  padding: 11px 14px !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(245,217,138,0.06) !important;
  width: 100%;
}
.auth-input::placeholder { color: var(--faded-ink) !important; font-style: italic; opacity: 0.62; }
.auth-input:focus {
  outline: none !important;
  border-color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 14px rgba(232,197,114,0.42) !important;
}
.auth-submit-btn {
  width: 100% !important;
  margin-top: 6px !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  padding: 12px 28px !important;
}
.auth-divider {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.28em !important;
  color: var(--faded-ink) !important;
  text-transform: uppercase;
  text-align: center !important;
  margin: 14px 0 !important;
  position: relative;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,128,52,0.45), transparent);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-guest-btn {
  width: 100% !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.auth-guest-note {
  font-size: 0.66rem !important;
  letter-spacing: 0.06em !important;
  color: var(--faded-ink) !important;
  font-style: italic;
  text-align: center !important;
  margin-top: 8px !important;
  opacity: 0.78;
}
.auth-forgot-link {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
  text-decoration: none !important;
}
.auth-forgot-link:hover { color: var(--gold) !important; }
.auth-error {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: #ee8090 !important;
  text-align: center;
  min-height: 1em;
  font-style: italic;
}

/* ─────────────── 3. Profile — identity card + stats + mastery + history ─ */
#screen-profile { max-width: 960px !important; }
.profile-identity-card {
  background: var(--grimoire-bg) !important;
  border: 1px solid var(--grimoire-border-lit) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    0 6px 22px rgba(0,0,0,0.6),
    0 0 28px rgba(232,197,114,0.18) !important;
  padding: 18px 24px !important;
  margin-bottom: 16px !important;
  position: relative;
}
.profile-identity-card::before,
.profile-identity-card::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(232,197,114,0.45);
  pointer-events: none;
}
.profile-identity-card::before { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.profile-identity-card::after  { bottom: 6px; right: 6px;   border-left: none;  border-top: none; }

.profile-stats {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--grimoire-inset), 0 4px 16px rgba(0,0,0,0.55) !important;
  padding: 14px 20px !important;
  margin-bottom: 14px !important;
}

.profile-section-title {
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-shadow: 0 0 12px rgba(232,197,114,0.4) !important;
  text-align: center;
  margin: 22px auto 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}
.profile-section-title::before,
.profile-section-title::after {
  content: '';
  display: inline-block;
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,197,114,0.5), transparent);
}

.profile-nav-row {
  background: linear-gradient(180deg, rgba(20,14,22,0.6) 0%, rgba(12,8,14,0.75) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.profile-nav-row .btn,
.profile-nav-row > * {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}

.mastery-grid {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  gap: 10px !important;
}
.mastery-grid > * {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.28) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.06), 0 2px 6px rgba(0,0,0,0.45) !important;
  padding: 10px !important;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.mastery-grid > *:hover {
  border-color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.12), 0 0 14px rgba(232,197,114,0.22), 0 2px 6px rgba(0,0,0,0.5) !important;
}

.match-history,
#match-history {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--grimoire-inset), 0 4px 14px rgba(0,0,0,0.55) !important;
  overflow: hidden;
}

/* ─────────────── 4. Achievements — chronicled grid ──────────────────── */
#screen-achievements { max-width: 920px !important; }
.achievement-list,
#achievement-list {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.achievement-list > *,
#achievement-list > * {
  background: linear-gradient(90deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.20) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.05), 0 2px 6px rgba(0,0,0,0.4) !important;
  position: relative;
  transition: border-color 0.18s var(--ease-out);
}
.achievement-list > *::before,
#achievement-list > *::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 14%, rgba(168,128,52,0.35) 50%, transparent 86%);
  pointer-events: none;
}
.achievement-list > *.earned,
.achievement-list > *.unlocked,
.achievement-list > *.achv-earned,
#achievement-list > *.earned,
#achievement-list > *.unlocked,
#achievement-list > *.achv-earned {
  border-color: var(--grimoire-border-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.12),
    0 0 14px rgba(232,197,114,0.22),
    0 2px 6px rgba(0,0,0,0.5) !important;
}
.achievement-list > *.earned::before,
.achievement-list > *.unlocked::before,
.achievement-list > *.achv-earned::before,
#achievement-list > *.earned::before,
#achievement-list > *.unlocked::before,
#achievement-list > *.achv-earned::before {
  background: linear-gradient(180deg, transparent 8%, var(--gold-lit) 50%, transparent 92%);
  box-shadow: 0 0 8px rgba(232,197,114,0.6);
}

/* ─────────────── 5. Collection — illuminated roster ────────────────── */
#screen-collection { max-width: 1060px !important; }
.coll-layout {
  display: flex;
  gap: 18px;
}
.coll-roster {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.06), inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}
.coll-detail {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.95) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.08),
    0 4px 16px rgba(0,0,0,0.6) !important;
  padding: 18px !important;
}

/* ─────────────── 6. Leaderboard — ledger tabs + table ────────────────── */
#screen-leaderboard { max-width: 920px !important; }
.lb-tabs { gap: 8px !important; margin-bottom: 12px !important; }
.lb-tab {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  color: var(--faded-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
}
.lb-tab:hover { color: var(--gold) !important; border-color: rgba(232,197,114,0.5) !important; }
.lb-tab.active {
  background: linear-gradient(180deg, rgba(74,52,28,0.95) 0%, rgba(40,28,16,0.98) 100%) !important;
  border-color: var(--gold-lit) !important;
  color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.22), 0 0 14px rgba(232,197,114,0.42) !important;
}
.lb-header-row {
  background: linear-gradient(180deg, rgba(40,28,40,0.85) 0%, rgba(22,16,24,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
  padding: 10px 16px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
}
#leaderboard-list,
#lobbies-list,
#history-list {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.04), 0 4px 14px rgba(0,0,0,0.55) !important;
  overflow: hidden;
}
#leaderboard-list > *,
#lobbies-list > *,
#history-list > * {
  padding: 9px 16px !important;
  border-top: 1px solid rgba(168,128,52,0.10) !important;
  font-family: var(--font-body) !important;
}
#leaderboard-list > *:nth-child(even),
#lobbies-list > *:nth-child(even),
#history-list > *:nth-child(even) { background: rgba(168,128,52,0.04) !important; }
#leaderboard-list > *:hover,
#lobbies-list > *:hover,
#history-list > *:hover { background: rgba(168,128,52,0.10) !important; }

.hist-header-row {
  background: linear-gradient(180deg, rgba(40,28,40,0.85) 0%, rgba(22,16,24,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
  padding: 10px 16px !important;
}

/* ─────────────── 7. Friends — tome-page list ────────────────────────── */
#screen-friends { max-width: 720px !important; }
.friends-content,
#friends-content {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--grimoire-inset), 0 4px 14px rgba(0,0,0,0.55) !important;
  padding: 12px !important;
  min-height: 80px;
}
.friend-invite-banner,
#friend-invite-banner {
  background: linear-gradient(90deg, rgba(40,28,40,0.92) 0%, rgba(22,16,24,0.95) 100%) !important;
  border: 1px solid var(--grimoire-border-lit) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.15),
    0 0 18px rgba(232,197,114,0.22),
    0 4px 14px rgba(0,0,0,0.55) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px;
  position: relative;
}
.friends-add-row {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  margin-top: 14px !important;
  display: flex;
  gap: 8px;
  align-items: center;
}
.friends-uid-input {
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55) !important;
  flex: 1;
}
.friends-uid-input:focus {
  outline: none !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 0 12px rgba(232,197,114,0.38) !important;
}
.friends-uid-hint {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
  margin-top: 8px;
  text-align: center;
}
.friends-uid-copy {
  background: rgba(28,20,28,0.85) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.friends-uid-copy:hover {
  border-color: var(--gold-lit) !important;
  background: rgba(40,28,18,0.85) !important;
}

/* ─────────────── 8. Settings — codex preferences ────────────────────── */
#screen-settings { max-width: 720px !important; }
.settings-list {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--grimoire-inset), 0 4px 16px rgba(0,0,0,0.6) !important;
  padding: 8px 0 !important;
  overflow: hidden;
}
.settings-section-title {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  background: linear-gradient(90deg, rgba(40,28,40,0.55) 0%, rgba(22,16,24,0.65) 100%) !important;
  border-top: 1px solid rgba(168,128,52,0.20) !important;
  border-bottom: 1px solid rgba(168,128,52,0.20) !important;
  padding: 8px 22px !important;
  margin: 8px 0 0 !important;
  text-shadow: 0 0 12px rgba(232,197,114,0.35);
}
.settings-list > .settings-section-title:first-child { border-top: none !important; margin-top: 0 !important; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px !important;
  border-bottom: 1px solid rgba(168,128,52,0.10) !important;
  gap: 14px;
}
.setting-row:last-child { border-bottom: none !important; }
.setting-row > label {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  color: var(--text) !important;
  flex-shrink: 0;
}
.setting-controls,
.setting-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.setting-range {
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  height: 6px;
  background: linear-gradient(90deg, rgba(8,5,12,0.92) 0%, rgba(16,12,20,0.92) 100%);
  border: 1px solid rgba(168,128,52,0.32);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.setting-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 30%, #fff4cc 0%, var(--gold) 60%, var(--gold-tarnished) 100%);
  border: 1px solid #fff4cc;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(232,197,114,0.65), 0 0 2px rgba(255,255,255,0.4) inset;
}
.setting-range::-moz-range-thumb {
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 30%, #fff4cc 0%, var(--gold) 60%, var(--gold-tarnished) 100%);
  border: 1px solid #fff4cc;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(232,197,114,0.65);
}
.setting-vol-value {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  color: var(--gold) !important;
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.setting-btn-group .btn.small,
#screen-settings .btn.small {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.35) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.06), 0 2px 6px rgba(0,0,0,0.4) !important;
  transition: all 0.16s var(--ease-out);
}
.setting-btn-group .btn.small:hover,
#screen-settings .btn.small:hover {
  border-color: var(--gold) !important;
  color: var(--gold-lit) !important;
}
.setting-btn-group .btn.small.selected,
.setting-btn-group .btn.small.active {
  background: linear-gradient(180deg, rgba(74,52,28,0.95) 0%, rgba(40,28,16,0.98) 100%) !important;
  border-color: var(--gold-lit) !important;
  color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 0 rgba(245,217,138,0.20), 0 0 12px rgba(232,197,114,0.42) !important;
}
.setting-text-input {
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55) !important;
}
.setting-text-input:focus {
  outline: none !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 0 12px rgba(232,197,114,0.38) !important;
}
.setting-danger-btn {
  background: linear-gradient(180deg, rgba(60,18,22,0.85) 0%, rgba(28,8,10,0.95) 100%) !important;
  border-color: rgba(208,80,90,0.55) !important;
  color: rgba(255,180,180,0.95) !important;
}
.setting-danger-btn:hover {
  border-color: #ea8090 !important;
  background: linear-gradient(180deg, rgba(96,18,28,0.92) 0%, rgba(48,8,12,0.96) 100%) !important;
  box-shadow: 0 0 14px rgba(208,80,90,0.32) !important;
}
.setting-data-note {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  line-height: 1.5;
  color: var(--faded-ink) !important;
  font-style: italic;
  max-width: 480px;
  margin-bottom: 8px;
}

/* ─────────────── 9. Daily challenges ────────────────────────────────── */
#screen-daily { max-width: 720px !important; }
.daily-sub {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--ember-soft) !important;
  text-align: center;
  margin-bottom: 14px !important;
  opacity: 0.78;
}
#daily-list,
.daily-list {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--grimoire-inset), 0 4px 14px rgba(0,0,0,0.55) !important;
  padding: 14px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#daily-list > *,
.daily-list > * {
  background: linear-gradient(90deg, rgba(40,28,40,0.55) 0%, rgba(22,16,24,0.65) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 5px !important;
  padding: 12px 16px !important;
  position: relative;
}
#daily-list > *::before,
.daily-list > *::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 12%, rgba(232,197,114,0.45) 50%, transparent 88%);
  pointer-events: none;
}

/* ─────────────── 10. News — chronicled patch entries ────────────────── */
#screen-news { max-width: 760px !important; }
.news-feed { display: flex; flex-direction: column; gap: 12px; }
.news-entry {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--grimoire-inset), 0 4px 16px rgba(0,0,0,0.55) !important;
  padding: 18px 22px !important;
  position: relative;
}
.news-entry::before,
.news-entry::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid rgba(232,197,114,0.38);
  pointer-events: none;
}
.news-entry::before { top: 4px;    left: 4px;    border-right: none; border-bottom: none; }
.news-entry::after  { bottom: 4px; right: 4px;   border-left: none;  border-top: none; }
.news-version {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.22em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.55) !important;
  text-transform: uppercase;
  margin-bottom: 4px !important;
}
.news-date {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  color: var(--ember-soft) !important;
  text-transform: uppercase;
  margin-bottom: 10px !important;
  opacity: 0.82;
}
.news-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text);
}
.news-list li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 0;
  color: var(--gold);
  font-size: 0.7em;
  opacity: 0.75;
}

/* ─────────────── 11. Spectate ───────────────────────────────────────── */
#screen-spectate { max-width: 760px !important; }
.spectate-hint {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: var(--faded-ink) !important;
  font-style: italic;
  text-align: center;
  margin-bottom: 14px;
}
.spectate-list,
#spectate-list {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--grimoire-inset), 0 4px 14px rgba(0,0,0,0.55) !important;
  padding: 8px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
}
#spectate-list > * {
  background: linear-gradient(90deg, rgba(40,28,40,0.55) 0%, rgba(22,16,24,0.65) 100%) !important;
  border: 1px solid rgba(168,128,52,0.18) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
}

/* ─────────────── 12. Lobbies (custom-lobby browser) ─────────────────── */
#screen-lobbies { max-width: 920px !important; }
.lobbies-subtitle {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--ember-soft) !important;
  text-align: center;
  margin-bottom: 14px !important;
  opacity: 0.78;
}

/* ─────────────── 13. MP create/join + lobby ─────────────────────────── */
#screen-mp { max-width: 880px !important; }
.mp-wrap { gap: 18px !important; }
.mp-panel {
  background: linear-gradient(180deg, rgba(28,20,28,0.92) 0%, rgba(14,10,16,0.95) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.08),
    0 4px 16px rgba(0,0,0,0.6) !important;
  padding: 18px !important;
  position: relative;
}
.mp-panel-title {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.4) !important;
  margin-bottom: 6px !important;
}
.mp-panel-desc {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: var(--faded-ink) !important;
  font-style: italic;
  margin-bottom: 14px;
}
.mp-size-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mp-size-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(20,14,22,0.85) 0%, rgba(10,8,14,0.92) 100%) !important;
  border: 1px solid rgba(168,128,52,0.28) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.mp-size-opt:hover { border-color: var(--gold) !important; }
.mp-size-opt input[type="radio"] { accent-color: var(--gold); }
.mp-size-opt span {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--text);
}
.mp-code {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.22em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.55) !important;
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  text-align: center;
  margin: 8px 0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6) !important;
}
.mp-code-label {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: 4px;
  opacity: 0.82;
}

#mp-join-input {
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55) !important;
}
#mp-join-input:focus {
  outline: none !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 0 12px rgba(232,197,114,0.38) !important;
}

.mp-status { font-family: var(--font-body); font-size: 0.78rem; color: var(--faded-ink); margin-top: 8px; font-style: italic; }

/* MP lobby team panels — banner standards */
.mp-teams-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.mp-team-col {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1px solid var(--grimoire-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--grimoire-inset), 0 4px 14px rgba(0,0,0,0.55) !important;
  padding: 14px !important;
  flex: 1;
  max-width: 340px;
  position: relative;
}
.mp-team-blue {
  border-left: 1px solid rgba(106,170,232,0.45) !important;
  background:
    linear-gradient(90deg, rgba(106,170,232,0.085), transparent 32%),
    linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
}
.mp-team-red {
  border-right: 1px solid rgba(224,80,100,0.45) !important;
  background:
    linear-gradient(-90deg, rgba(224,80,100,0.085), transparent 32%),
    linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
}
.mp-team-header {
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px !important;
}
.mp-team-blue .mp-team-header { color: #a8c8f0 !important; text-shadow: 0 0 12px rgba(106,170,232,0.55); }
.mp-team-red  .mp-team-header { color: #f0a8a8 !important; text-shadow: 0 0 12px rgba(224,80,100,0.55); }
.mp-vs {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--gold) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 18px rgba(232,197,114,0.65) !important;
  text-transform: uppercase;
}
.mp-player-card {
  background: linear-gradient(180deg, rgba(20,14,22,0.55) 0%, rgba(12,8,14,0.7) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 5px !important;
  padding: 10px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.mp-player-label {
  font-family: var(--font-display);
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--faded-ink);
}
.mp-player-class {
  font-family: var(--font-display);
  font-size: 0.74rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--gold);
}
.mp-player-ready {
  font-family: var(--font-body);
  font-size: 0.66rem;
  color: var(--faded-ink);
  font-style: italic;
}
.mp-lobby-portrait {
  border: 1px solid rgba(168,128,52,0.32);
  border-radius: 3px;
  background: linear-gradient(180deg, #1a1018 0%, #0a070d 100%);
}
.mp-casual-banner {
  background: linear-gradient(90deg, rgba(20,14,22,0.6) 0%, rgba(12,8,14,0.75) 100%) !important;
  border: 1px solid rgba(168,128,52,0.22) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: var(--faded-ink) !important;
  text-align: center;
  margin: 10px 0;
}
.mp-casual-dot { color: var(--gold) !important; margin-right: 6px; }
.mp-casual-sub {
  font-family: var(--font-display);
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--ember-soft) !important;
  opacity: 0.75;
  display: inline-block;
  margin-top: 4px;
}

/* ─────────────── 14. Privacy + small static screens ──────────────────── */
#screen-privacy { max-width: 720px !important; }
#screen-privacy .screen-title { margin-bottom: 18px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 4 — MOTION CHOREOGRAPHY  (Session 65, 2026-05-12)
   Animation layer on top of Phases 1-3. Adds in-between choreography:
   cross-screen transitions, CTA press feedback, card hover-tilt, gilt
   rule reveals, faction banner hover, home grid cascade, logo ignition.
   Every animation gated under `prefers-reduced-motion: reduce`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Cross-screen transition — settle into focus ─────── */
/* Replaces the basic screen-enter from earlier in the file (cascade-last
   wins). New version layers an opacity + Y + scale + filter blur reveal
   with a one-shot gold radial flare in the upper area, like a page being
   turned and the brazier light catching on the new spread. */
.menu-screen.active {
  animation: p4-screen-enter 380ms var(--ease-out) !important;
}
@keyframes p4-screen-enter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(2px) brightness(0.9);
  }
  60% {
    filter: blur(0) brightness(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1);
  }
}
/* Gold flare that crosses behind the screen content for the first ~520ms */
.menu-screen.active::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,197,114,0.22) 0%, transparent 55%);
  opacity: 0;
  animation: p4-screen-flare 520ms var(--ease-out);
  z-index: 0;
}
@keyframes p4-screen-flare {
  0%   { opacity: 0; transform: scaleY(0.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1.1); }
}
/* Make sure direct content stays above the flare */
.menu-screen.active > * { position: relative; z-index: 1; }

/* ─────────────── 2. CTA press feedback — sealed wax pressing ────────── */
/* Primary buttons (Play, Start Searching, Create Party, etc.) get a
   "wax seal pressing" feedback — quick scale-down + gold ember pulse */
.big-btn:active,
.btn.primary:active,
.home-play-btn:active {
  transform: translateY(1px) scale(0.97) !important;
  transition: transform 60ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
.big-btn::after,
.home-play-btn::after {
  pointer-events: none;
}
/* Quick ember radial flash on primary-CTA click */
.big-btn:active::after,
.home-play-btn:active::after,
.btn.primary:active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,210,140,0.4) 0%, rgba(232,197,114,0.18) 30%, transparent 60%);
  pointer-events: none;
  animation: p4-cta-press 220ms ease-out;
  border-radius: inherit;
  z-index: 2;
}
@keyframes p4-cta-press {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ─────────────── 3. Class portrait tarot hover-tilt ─────────────────── */
/* Subtle perspective tilt on hover — like flipping a tarot card to read
   its face. ~2-3 degrees on either axis depending on where the cursor
   sits (we use a static rotateY since we can't track cursor in pure CSS;
   but combining with scale + Y-shift sells the lift). */
.class-portrait-grid {
  perspective: 1200px;
}
.class-portrait-grid .class-portrait {
  transform-style: preserve-3d;
  transition:
    transform 0.34s var(--ease-out),
    box-shadow 0.34s var(--ease-out),
    border-color 0.22s var(--ease-out) !important;
}
.class-portrait-grid .class-portrait:hover {
  transform: translateY(-4px) rotateX(4deg) scale(1.04) !important;
}
.class-portrait-grid .class-portrait.selected {
  transform: translateY(-2px) scale(1.02) !important;
}
.class-portrait-grid .class-portrait.selected:hover {
  transform: translateY(-5px) rotateX(4deg) scale(1.06) !important;
}

/* ─────────────── 4. Section-title gilt rule reveal ──────────────────── */
/* The horizontal gilt rules around section titles (Phase 2 added these
   to .section-label and .profile-section-title via ::before/::after)
   draw in from center on screen entry. */
.menu-screen.active .section-label::before,
.menu-screen.active .section-label::after,
.menu-screen.active .profile-section-title::before,
.menu-screen.active .profile-section-title::after {
  animation: p4-gilt-rule-in 720ms var(--ease-out);
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes p4-gilt-rule-in {
  0%   { opacity: 0; transform: scaleX(0.2); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}

/* Screen-title (h2 with gilt rules built into the rule chain earlier)
   also gets the draw-in if its ::before/::after are present */
.menu-screen.active > .screen-title::before,
.menu-screen.active > .screen-title::after {
  animation: p4-gilt-rule-in 720ms var(--ease-out);
  transform-origin: center;
}

/* ─────────────── 5. Faction banner side-glyph hover lift ────────────── */
/* The overlay-edge faction banners (Human / Undead / Celestial / Demon)
   already are interactive (open lore modal). Phase 4 adds a subtle lift
   + glow intensification + scroll-edge shimmer on hover. */
.fac-banner {
  transition:
    transform 0.34s var(--ease-out),
    filter 0.34s var(--ease-out) !important;
}
.fac-banner:hover {
  transform: translateY(-3px) scale(1.02) !important;
  filter: brightness(1.12) drop-shadow(0 8px 22px rgba(0,0,0,0.55)) !important;
}
.fac-banner img {
  transition: filter 0.34s var(--ease-out);
}
.fac-banner:hover img {
  filter: drop-shadow(0 0 18px rgba(232,197,114,0.35));
}
.fac-banner.fb-human:hover img      { filter: drop-shadow(0 0 18px rgba(106,170,232,0.45)); }
.fac-banner.fb-undead:hover img     { filter: drop-shadow(0 0 18px rgba(180,120,240,0.40)); }
.fac-banner.fb-celestial:hover img  { filter: drop-shadow(0 0 18px rgba(232,197,114,0.55)); }
.fac-banner.fb-demon:hover img      { filter: drop-shadow(0 0 18px rgba(208,80,90,0.45)); }
.fac-banner .fac-lore {
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.fac-banner:hover .fac-lore {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ─────────────── 6. Home action grid cascade ────────────────────────── */
/* The four home-action-btns enter with a 60ms cascade between siblings */
.menu-screen.active#screen-home .home-action-btn {
  animation: p4-cascade-up 460ms var(--ease-out) both;
}
.menu-screen.active#screen-home .home-action-btn:nth-child(1) { animation-delay: 0ms; }
.menu-screen.active#screen-home .home-action-btn:nth-child(2) { animation-delay: 60ms; }
.menu-screen.active#screen-home .home-action-btn:nth-child(3) { animation-delay: 120ms; }
.menu-screen.active#screen-home .home-action-btn:nth-child(4) { animation-delay: 180ms; }
@keyframes p4-cascade-up {
  0%   { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Play hub buttons also cascade */
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn {
  animation: p4-cascade-up 480ms var(--ease-out) both;
}
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn:nth-child(1) { animation-delay: 0ms; }
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn:nth-child(2) { animation-delay: 70ms; }
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn:nth-child(3) { animation-delay: 140ms; }
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn:nth-child(4) { animation-delay: 210ms; }
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn:nth-child(5) { animation-delay: 280ms; }

/* Mode cards cascade */
.menu-screen.active#screen-play .mode-card {
  animation: p4-cascade-up 460ms var(--ease-out) both;
}
.menu-screen.active#screen-play .mode-card:nth-child(1) { animation-delay: 0ms; }
.menu-screen.active#screen-play .mode-card:nth-child(2) { animation-delay: 80ms; }
.menu-screen.active#screen-play .mode-card:nth-child(3) { animation-delay: 160ms; }
.menu-screen.active#screen-play .mode-card:nth-child(4) { animation-delay: 240ms; }

/* ─────────────── 7. Logo ignition — first-paint flare ───────────────── */
/* The logo already breathes (logo-breathe infinite). Phase 4 adds a
   one-shot "ignite" overlay that fires on the screen's first activation
   — a quick ember-to-gold burst behind the sigil, then fades. */
.logo-wrap {
  position: relative;
}
.logo-wrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(circle, rgba(255,210,140,0.55) 0%, rgba(232,197,114,0.30) 20%, rgba(255,106,44,0.18) 38%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  animation: p4-logo-ignite 1.4s var(--ease-out) 0.18s;
  filter: blur(8px);
}
@keyframes p4-logo-ignite {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
  35%  { opacity: 0.95; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.4); }
}

/* ─────────────── 8. Ability-rune cards — gentle hover ───────────────── */
/* In-match self-HUD ability cards get a subtle hover indicator. The cards
   are mouse-target-able even though abilities use keyboard — kept subtle
   so it doesn't distract during combat. */
#self-hud .cd-slot:not(.cooling) {
  transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out) !important;
}
#self-hud .cd-slot:not(.cooling):hover {
  transform: translateY(-1px) !important;
}

/* ─────────────── 9. Score bump — Phase 4 intensification ────────────── */
/* Phase 1 already styles team scores. Phase 4 makes the score-bump feel
   like a hammer struck the bell — quick scale up + filter brighten + a
   one-shot gold glow halo that fades. */
@keyframes p4-score-strike {
  0%   { transform: scale(1);    filter: brightness(1); }
  18%  { transform: scale(1.32); filter: brightness(1.8) drop-shadow(0 0 26px rgba(255,210,140,0.85)); }
  40%  { transform: scale(0.96); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.team-score.score-bump {
  animation: p4-score-strike 0.52s cubic-bezier(0.18, 0.9, 0.32, 1.1) !important;
}

/* ─────────────── 10. Match-end Play Again / Main Menu cascade ───────── */
/* Match-end action buttons enter on a small cascade after the verdict
   letters finish their reveal (the existing me-letter animation runs
   ~0.55s with up to 0.06s × N stagger; we delay buttons to 0.9s+). */
#screen-match-end.me-won .screen-actions .btn,
#screen-match-end.me-lost .screen-actions .btn {
  animation: p4-cascade-up 520ms var(--ease-out) both;
}
#screen-match-end.me-won .screen-actions .btn:nth-child(1),
#screen-match-end.me-lost .screen-actions .btn:nth-child(1) { animation-delay: 900ms; }
#screen-match-end.me-won .screen-actions .btn:nth-child(2),
#screen-match-end.me-lost .screen-actions .btn:nth-child(2) { animation-delay: 960ms; }
#screen-match-end.me-won .screen-actions .btn:nth-child(3),
#screen-match-end.me-lost .screen-actions .btn:nth-child(3) { animation-delay: 1020ms; }

/* ─────────────── 11. Reduced-motion guards ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .menu-screen.active { animation: none !important; }
  .menu-screen.active::before { display: none !important; animation: none !important; }
  .menu-screen.active .section-label::before,
  .menu-screen.active .section-label::after,
  .menu-screen.active .profile-section-title::before,
  .menu-screen.active .profile-section-title::after,
  .menu-screen.active > .screen-title::before,
  .menu-screen.active > .screen-title::after { animation: none !important; }
  .class-portrait-grid .class-portrait:hover { transform: none !important; }
  .class-portrait-grid .class-portrait.selected { transform: none !important; }
  .class-portrait-grid .class-portrait.selected:hover { transform: none !important; }
  .fac-banner:hover { transform: none !important; }
  .menu-screen.active#screen-home .home-action-btn,
  .menu-screen.active#screen-play-hub .play-hub-grid .big-btn,
  .menu-screen.active#screen-play .mode-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .logo-wrap::after { animation: none !important; display: none !important; }
  .team-score.score-bump { animation: none !important; }
  #screen-match-end.me-won .screen-actions .btn,
  #screen-match-end.me-lost .screen-actions .btn { animation: none !important; }
  .big-btn:active,
  .btn.primary:active,
  .home-play-btn:active { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 5 — STRUCTURAL FIXES + MODALS + TOUCH  (Session 66, 2026-05-12)
   User feedback: "profile banner in main menu is too small to read
   everything, same with Valdris chamber, lots of stuff like this, in-game
   make it look like a proper game." Real layout fixes for the cramped
   surfaces, not just chrome polish.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. In-match self-HUD — proper game-feel structure ──── */
/* The legacy HTML nested .hud-bars-inline inside .hud-identity, so the
   bars were stuck at ~90px wide inside a 200px grid cell. Phase 5 HTML
   flattens that — portrait, vitals (name + bars), abilities, dodge are
   now siblings in a 4-column grid. CSS below targets the new structure. */
#self-hud {
  grid-template-columns: 76px minmax(280px, 1fr) auto auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
  padding: 14px 24px 14px !important;
  min-height: 96px;
  align-items: center;
}
.hud-portrait-cell {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud-portrait-cell #hud-portrait-canvas {
  width: 56px !important;
  height: 64px !important;
  border: 1.5px solid var(--gold-lit) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #1a1018 0%, #0a070d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.20),
    0 2px 10px rgba(0,0,0,0.7),
    0 0 0 1px rgba(8,5,12,0.9) !important;
  transition: box-shadow 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
}
.hud-vitals {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hud-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
.hud-name-row .self-name {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 14px rgba(232,197,114,0.55) !important;
  line-height: 1 !important;
  text-transform: uppercase;
  /* allow up to ~24 chars before truncation — display names cap at 20 */
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-name-row .hud-class-badge {
  font-family: var(--font-body) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  color: var(--faded-ink) !important;
  white-space: nowrap;
}
.hud-bars-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.hud-bars-stack .bar {
  width: 100% !important;
  height: 20px !important;
  position: relative;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(168,128,52,0.0) 0,
      rgba(168,128,52,0.0) 48px,
      rgba(168,128,52,0.14) 48px,
      rgba(168,128,52,0.14) 49px),
    linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.06),
    inset 0 -1px 1px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.5) !important;
  overflow: hidden;
}
.hud-bars-stack .hud-bar-hp { height: 22px !important; }
.hud-bars-stack .hud-bar-ult { height: 18px !important; }
.hud-bars-stack .hud-bar-rage { height: 11px !important; }
.hud-bars-stack .bar-fill {
  height: 100%;
  border-radius: 2px !important;
  transition: width 0.18s ease-out;
  position: relative;
}
.hud-bars-stack .bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%);
  pointer-events: none;
  border-radius: 2px;
}
.hud-bars-stack .hp-fill {
  background: linear-gradient(180deg, #f04060 0%, #d02840 55%, #7a0d20 100%) !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4) !important;
}
.hud-bars-stack .ult-fill {
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 50%, var(--gold-tarnished) 100%) !important;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3) !important;
}
.hud-bars-stack .rage-fill {
  background: linear-gradient(180deg, #ffb070 0%, var(--ember) 50%, #a8240c 100%) !important;
}
.hud-bars-stack .bar-label {
  position: absolute;
  top: 0; left: 12px;
  font-family: var(--font-display) !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.24em !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  color: rgba(232,228,220,0.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.8) !important;
  text-transform: uppercase;
  z-index: 1;
}
.hud-bars-stack .hud-bar-ult .bar-label { line-height: 18px !important; }
.hud-bars-stack .hud-bar-rage .bar-label { line-height: 11px !important; font-size: 0.52rem !important; letter-spacing: 0.20em !important; }
.hud-bars-stack .bar-num {
  position: absolute;
  top: 0; right: 12px;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  color: rgba(245,232,200,0.98) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7) !important;
  letter-spacing: 0.02em !important;
  z-index: 1;
}
/* Bigger ability cards — full-name display, no truncation */
#self-cds {
  grid-column: 3 / 4;
  display: flex;
  gap: 8px !important;
  align-items: center;
}
#self-cds .cd-slot {
  width: 72px !important;
  height: 72px !important;
  flex: none !important;
  background: linear-gradient(180deg, #1a1218 0%, #0a070d 100%) !important;
  border: 1.5px solid rgba(168,128,52,0.45) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 3px 8px rgba(0,0,0,0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px !important;
  position: relative;
  overflow: hidden;
}
#self-cds .cd-slot .key {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 8px rgba(232,197,114,0.5) !important;
  line-height: 1 !important;
}
#self-cds .cd-slot .name {
  font-family: var(--font-body) !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--text) !important;
  line-height: 1 !important;
  white-space: normal !important;
  max-width: 100% !important;
  text-overflow: clip !important;
  overflow: visible !important;
  text-align: center;
  word-wrap: break-word;
}
#self-cds .cd-slot.ready .name { color: var(--ember-soft) !important; }
#self-cds .cd-slot.ult-ready .name { color: var(--gold-lit) !important; }
/* Dodge slot — same dimensions as ability cards */
#dodge-slot {
  width: 72px !important;
  height: 72px !important;
  grid-column: 4 / 5;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px !important;
}
#dodge-slot .key {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #a8c8f0 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 8px rgba(106,170,232,0.55) !important;
  line-height: 1 !important;
}
#dodge-slot .name {
  font-family: var(--font-body) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(168,200,240,0.7) !important;
  line-height: 1 !important;
}
/* Controls hint spans the full strip, second row */
#self-hud .controls-hint {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(168,128,52,0.18) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.10em !important;
  text-align: center;
  color: var(--faded-ink) !important;
}

/* Ult-charge sigil pulse (Sigil Rule) lifted to the new portrait */
#self-hud[data-ult-state="charging"] .hud-portrait-cell #hud-portrait-canvas {
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.20),
    0 2px 10px rgba(0,0,0,0.7),
    0 0 0 1px rgba(8,5,12,0.9),
    0 0 18px rgba(232,197,114,0.45) !important;
}
#self-hud[data-ult-state="ready"] .hud-portrait-cell #hud-portrait-canvas {
  border-color: var(--gold-lit) !important;
  animation: p5-ult-portrait-pulse 1.4s ease-in-out infinite;
}
@keyframes p5-ult-portrait-pulse {
  0%,100% {
    box-shadow:
      inset 0 1px 0 rgba(245,217,138,0.20),
      0 2px 10px rgba(0,0,0,0.7),
      0 0 0 1px rgba(8,5,12,0.9),
      0 0 22px rgba(232,197,114,0.55);
    transform: scale(1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(245,217,138,0.30),
      0 2px 14px rgba(0,0,0,0.8),
      0 0 0 1px rgba(245,217,138,0.4),
      0 0 40px rgba(255,210,140,0.85),
      0 0 64px rgba(255,180,90,0.45);
    transform: scale(1.05);
  }
}

/* ─────────────── 2. Home — wider left column, hero player card ──────── */
.home-body {
  display: grid !important;
  grid-template-columns: minmax(380px, 1.4fr) minmax(420px, 1fr) !important;
  gap: 28px !important;
  align-items: start;
}
@media (max-width: 900px) {
  .home-body { grid-template-columns: 1fr !important; }
}

/* ─────────────── 3. Home Valdris card — HERO presentation ───────────── */
#home-raid-card .home-raid-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 20px 22px 18px !important;
  background:
    linear-gradient(135deg, rgba(30,10,60,0.92) 0%, rgba(50,16,86,0.85) 55%, rgba(28,10,48,0.92) 100%) !important;
  border: 1.5px solid rgba(168,80,232,0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(232,180,255,0.14),
    0 6px 24px rgba(60,20,120,0.42),
    0 0 32px rgba(180,80,240,0.18) !important;
  position: relative;
  overflow: hidden;
}
#home-raid-card .home-raid-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(232,197,114,0.22);
  border-radius: 7px;
  pointer-events: none;
}
#home-raid-card .home-raid-banner {
  min-width: 0;
}
#home-raid-card .home-raid-label {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase;
  color: rgba(200,160,255,0.7) !important;
  margin-bottom: 4px !important;
  text-shadow: 0 0 10px rgba(180,120,240,0.4);
}
#home-raid-card .home-raid-name {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  color: var(--gold-lit) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.9),
    0 0 18px rgba(255,210,140,0.55),
    0 0 36px rgba(180,120,240,0.40) !important;
  text-transform: uppercase;
  white-space: nowrap !important;
  margin-bottom: 4px !important;
}
#home-raid-card .home-raid-btn {
  width: 100% !important;
  margin-top: 4px !important;
}
#home-raid-card .home-raid-epithet {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 0.88rem !important;
  letter-spacing: 0.14em !important;
  color: #d8b0ff !important;
  text-shadow: 0 0 12px rgba(180,120,240,0.4);
  text-transform: lowercase;
  margin-bottom: 6px !important;
  white-space: nowrap;
}
#home-raid-card .home-raid-sub {
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
  color: rgba(200,160,255,0.65) !important;
  font-style: italic;
  margin-bottom: 8px !important;
  white-space: nowrap;
}
#home-raid-card .raid-card-stats {
  display: flex !important;
  gap: 18px !important;
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin-top: 6px;
}
#home-raid-card .raid-card-stat-k {
  color: rgba(200,160,255,0.65) !important;
}
#home-raid-card .raid-card-stat-v {
  color: var(--gold-lit) !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(232,197,114,0.45);
}
#home-raid-card .home-raid-btn {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  padding: 14px 26px !important;
  border: 1.5px solid rgba(232,197,114,0.55) !important;
  background: linear-gradient(180deg, rgba(74,52,28,0.92) 0%, rgba(40,24,14,0.96) 100%) !important;
  color: var(--gold-lit) !important;
  border-radius: 6px !important;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.20),
    0 0 18px rgba(232,197,114,0.32),
    0 4px 14px rgba(0,0,0,0.5) !important;
  transition: all 0.22s var(--ease-out);
}
#home-raid-card .home-raid-btn:hover {
  background: linear-gradient(180deg, rgba(110,76,32,0.95) 0%, rgba(60,38,18,0.98) 100%) !important;
  border-color: var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.30),
    0 0 28px rgba(232,197,114,0.55),
    0 6px 22px rgba(0,0,0,0.6) !important;
  transform: translateY(-2px);
}

/* ─────────────── 4. Home player card — wider room for everything ─── */
#home-player-card { padding: 20px 22px !important; }
#home-player-card .hpc-head {
  display: grid !important;
  grid-template-columns: 72px 1fr auto !important;
  gap: 16px !important;
  align-items: center;
  margin-bottom: 12px !important;
}
#home-player-card .hpc-portrait-wrap {
  width: 72px !important;
  height: 82px !important;
}
#home-player-card .hpc-portrait {
  width: 72px !important;
  height: 82px !important;
}
#home-player-card .hpc-identity { min-width: 0; }
#home-player-card .hpc-greeting {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  color: var(--faded-ink) !important;
  text-transform: uppercase;
  margin-bottom: 4px !important;
}
#home-player-card .hpc-name {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  line-height: 1.05 !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 14px rgba(232,197,114,0.5) !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
#home-player-card .hpc-rank-wrap { display: flex; align-items: center; }
#home-player-card .hpc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
#home-player-card .hpc-gold {
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 10px rgba(232,197,114,0.4) !important;
}
#home-player-card .hpc-streak {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ember-soft) !important;
  text-shadow: 0 0 10px rgba(255,176,122,0.55);
}
#home-player-card .hpc-bar-row {
  margin: 8px 0 !important;
}
#home-player-card .hpc-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  gap: 12px;
}
#home-player-card .hpc-label {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
}
#home-player-card .hpc-sub {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--faded-ink) !important;
  letter-spacing: 0.02em;
}
#home-player-card .hpc-bar {
  height: 8px !important;
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.32) !important;
  border-radius: 3px !important;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55) !important;
}
#home-player-card .hpc-bar-fill {
  height: 100%;
  transition: width 0.32s var(--ease-out);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3);
}
#home-player-card .hpc-bar-xp {
  background: linear-gradient(90deg, var(--gold-tarnished) 0%, var(--gold) 50%, var(--gold-lit) 100%) !important;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3), 0 0 8px rgba(232,197,114,0.45);
}
#home-player-card .hpc-last-match {
  margin-top: 10px !important;
  padding: 8px 12px !important;
  background: rgba(8,5,12,0.45) !important;
  border: 1px solid rgba(168,128,52,0.18) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.04em !important;
  color: var(--text) !important;
}
#home-player-card .hpc-won { color: #7fc88a !important; font-weight: 600; }
#home-player-card .hpc-lost { color: #e08080 !important; font-weight: 600; }
#home-player-card .hpc-ago { color: var(--faded-ink); font-style: italic; }
#home-player-card .hpc-guest {
  text-align: center;
  padding: 20px 16px;
}
#home-player-card .hpc-guest-title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.26em !important;
  color: var(--gold) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.45) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
#home-player-card .hpc-guest-sub {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: var(--faded-ink) !important;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 14px !important;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Daily challenges strip — more space per row */
#home-daily-strip {
  padding: 14px 18px !important;
}
.hds-row,
#home-daily-strip > * > *,
#home-daily-strip .home-daily-item {
  padding: 8px 12px !important;
  font-size: 0.78rem !important;
}

/* ─────────────── 5. Profile screen — hero header ──────────────────── */
.profile-identity-card {
  padding: 22px 28px !important;
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-identity-card .pic-portrait-wrap {
  width: 84px !important;
  height: 96px !important;
  flex-shrink: 0;
}
.profile-identity-card .pic-portrait-wrap canvas {
  width: 84px !important;
  height: 96px !important;
  border: 1.5px solid var(--gold-lit) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #1a1018 0%, #0a070d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.20),
    0 4px 14px rgba(0,0,0,0.7),
    0 0 24px rgba(232,197,114,0.32) !important;
}
.profile-identity-card .pic-name {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--gold-lit) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 18px rgba(232,197,114,0.55) !important;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 6px;
}

.profile-stats {
  padding: 18px 24px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 18px !important;
}
.profile-stats > * {
  text-align: center;
}

/* Mastery grid cards — bigger so 12-class portraits breathe */
.mastery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 12px !important;
}

/* ─────────────── 6. Class select — wider detail panel ──────────────── */
.class-select-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 380px) !important;
  gap: 18px !important;
  align-items: start;
}
@media (max-width: 900px) {
  .class-select-layout { grid-template-columns: 1fr !important; }
}
.class-detail {
  padding: 22px !important;
  min-height: 320px;
}

/* ─────────────── 7. Modals — codex chrome (Phase 5 polish target) ──── */
.bug-modal-box,
.raid-warn-modal,
#share-card-modal .modal-box,
.modal-box {
  background: var(--grimoire-bg) !important;
  border: 1.5px solid var(--grimoire-border-lit) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    0 12px 40px rgba(0,0,0,0.75),
    0 0 36px rgba(232,197,114,0.16) !important;
  padding: 22px 26px !important;
  position: relative;
  max-width: 480px !important;
  width: min(480px, 92vw) !important;
}
.bug-modal-box::before,
.bug-modal-box::after,
.raid-warn-modal::before,
.raid-warn-modal::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(232,197,114,0.55);
  pointer-events: none;
}
.bug-modal-box::before,
.raid-warn-modal::before { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.bug-modal-box::after,
.raid-warn-modal::after  { bottom: 6px; right: 6px;   border-left: none;  border-top: none; }

.bug-modal-box h2 {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--gold-lit) !important;
  margin-bottom: 14px !important;
  text-align: center;
}
.bug-select,
.bug-textarea {
  background: linear-gradient(180deg, #0a070d 0%, #060409 100%) !important;
  border: 1px solid rgba(168,128,52,0.42) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  padding: 10px 14px !important;
  width: 100%;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55) !important;
}
.bug-select:focus,
.bug-textarea:focus {
  outline: none !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 0 14px rgba(232,197,114,0.4) !important;
}
.bug-char-count {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  color: var(--faded-ink) !important;
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 12px;
}

/* Raid warning modal — keep its existing dramatic chrome but harmonize fonts */
.raid-warn-modal .rwm-eyebrow {
  font-family: var(--font-display) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--ember-soft) !important;
  text-align: center;
  margin-bottom: 8px !important;
}
.raid-warn-modal .rwm-boss-name {
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--gold-lit) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.9),
    0 0 22px rgba(232,197,114,0.65),
    0 0 56px rgba(180,120,240,0.32) !important;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px !important;
}
.raid-warn-modal .rwm-boss-name span {
  display: block;
  font-size: 0.9rem !important;
  font-style: italic;
  letter-spacing: 0.14em !important;
  color: #d8b0ff !important;
  text-transform: lowercase;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(180,120,240,0.4);
}

/* ─────────────── 8. Achievement toasts — game-feel pop ───────────── */
.achv-toast,
.achievement-toast,
#achievement-toast,
.toast {
  background: var(--grimoire-bg) !important;
  border: 1.5px solid var(--grimoire-border-lit) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 6px 22px rgba(0,0,0,0.7),
    0 0 28px rgba(232,197,114,0.32) !important;
  padding: 12px 18px !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.14em !important;
  color: var(--gold-lit) !important;
}

/* ─────────────── 9. Touch HUD — mobile virtual joystick + buttons ─── */
body.touch-mode #touch-joystick,
#touch-joystick {
  border: 1.5px solid rgba(168,128,52,0.42) !important;
  background: radial-gradient(circle, rgba(28,20,28,0.65) 0%, rgba(14,10,16,0.55) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    0 4px 14px rgba(0,0,0,0.7) !important;
}
#touch-joystick-thumb {
  background: radial-gradient(circle at 35% 30%, rgba(245,217,138,0.85) 0%, rgba(232,197,114,0.65) 50%, rgba(80,56,20,0.85) 100%) !important;
  border: 1.5px solid var(--gold-lit) !important;
  box-shadow:
    inset 0 2px 4px rgba(255,235,180,0.4),
    0 0 14px rgba(232,197,114,0.65) !important;
}
.touch-ability-btn,
#touch-ability-btn-1,
#touch-ability-btn-2,
#touch-ability-btn-3,
#touch-ability-btn-4,
#touch-ability-btn-attack,
#touch-ability-btn-dodge {
  background: linear-gradient(180deg, rgba(28,20,28,0.85) 0%, rgba(14,10,16,0.92) 100%) !important;
  border: 1.5px solid rgba(168,128,52,0.45) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.12),
    0 3px 10px rgba(0,0,0,0.7) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 8px rgba(232,197,114,0.5) !important;
  transition: transform 0.12s ease-out, box-shadow 0.18s ease-out;
}
.touch-ability-btn:active,
[id^="touch-ability-btn"]:active {
  transform: scale(0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.25),
    0 0 18px rgba(232,197,114,0.55),
    0 2px 6px rgba(0,0,0,0.7) !important;
}

/* ─────────────── 10. Loading screen polish ──────────────────────────── */
#loading-screen {
  background: radial-gradient(ellipse at center, #1c1526 0%, #0b0a10 70%, #07060e 100%) !important;
}
.ls-spinner {
  border: 2px solid rgba(232,197,114,0.18) !important;
  border-top-color: var(--gold-lit) !important;
  box-shadow: 0 0 20px rgba(232,197,114,0.32) !important;
}
.ls-tag {
  font-family: var(--font-display) !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.45) !important;
}

/* ─────────────── 11. Faction lore modal — harmonize ─────────────────── */
.faction-lore-modal,
#faction-lore-modal .flm-box,
.flm-box {
  background: var(--grimoire-bg) !important;
  border: 1.5px solid var(--grimoire-border-lit) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,217,138,0.10),
    0 12px 40px rgba(0,0,0,0.75),
    0 0 36px rgba(232,197,114,0.18) !important;
}
.flm-tagline {
  font-family: var(--font-display) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.14em !important;
  color: var(--gold-lit) !important;
  text-shadow: 0 0 14px rgba(232,197,114,0.45) !important;
  font-style: italic;
  text-align: center;
  margin: 14px 0 !important;
}

/* ─────────────── 12. Reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #self-hud[data-ult-state="ready"] .hud-portrait-cell #hud-portrait-canvas { animation: none !important; }
  #home-raid-card .home-raid-btn:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 6 — CRAFT PASS  (Session 67, 2026-05-12)
   The work-to-be-proud-of pass. WCAG AA contrast fixes (real audit, not
   guessing), focus-visible everywhere (accessibility commitment in
   PRODUCT.md was unfulfilled), empty states designed properly,
   screen-edge damage vignette (Dark Souls / Diablo feel), killstreak
   banner CSS overlay (Cinzel ceremonial treatment), 375x667 mobile
   responsive fixes for every screen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. WCAG AA contrast fixes ─────────────────────────────
   Audit (node script in commit body) found 12+ rules using opacity 0.5-0.78
   on faded-ink text that drop below 4.5:1 ratio on dark backgrounds. Fix:
   raise opacity to 0.85 minimum, or switch to a pre-dimmed solid color that
   already meets AA. */
.side-btn.muted { opacity: 0.85 !important; }
.home-utility-row { opacity: 1 !important; }
.home-utility-row .home-util-btn { color: rgba(232,228,220,0.78) !important; }
.home-utility-row .home-util-btn:hover { color: var(--gold) !important; }
.online-count-bar { opacity: 1 !important; }
.home-logo-sub { opacity: 1 !important; color: rgba(255,176,122,0.92) !important; }
.daily-sub { opacity: 1 !important; color: rgba(255,176,122,0.92) !important; }
.lobbies-subtitle { opacity: 1 !important; color: rgba(255,176,122,0.92) !important; }
.party-hint { opacity: 1 !important; color: rgba(232,228,220,0.78) !important; }
.spectate-hint { opacity: 1 !important; color: rgba(232,228,220,0.78) !important; }
.mp-panel-desc { opacity: 1 !important; color: rgba(232,228,220,0.78) !important; }
#home-raid-card .home-raid-label { opacity: 1 !important; color: rgba(216,176,255,0.95) !important; }
#home-raid-card .home-raid-sub { color: rgba(216,176,255,0.85) !important; }
#home-raid-card .raid-card-stat-k { color: rgba(216,176,255,0.85) !important; }
.auth-input::placeholder { opacity: 1 !important; color: rgba(232,228,220,0.55) !important; }
.auth-guest-note { opacity: 1 !important; color: rgba(232,228,220,0.72) !important; }
.party-code-hint { color: rgba(232,228,220,0.72) !important; }
.friends-uid-hint { color: rgba(232,228,220,0.72) !important; }
.queue-wait-hint { color: rgba(232,228,220,0.72) !important; }
.setting-data-note { color: rgba(232,228,220,0.78) !important; }
.news-date { opacity: 1 !important; color: rgba(255,176,122,0.92) !important; }
.bug-char-count { color: rgba(232,228,220,0.72) !important; }

/* ─────────────── 2. Focus-visible — universal keyboard nav ring ───────
   PRODUCT.md noted full keyboard nav as "not committed", but the design
   tokens defined --focus-ring early. Phase 6 wires it consistently so
   keyboard users have a trail through every interactive surface. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(232,197,114,0.75),
    0 0 0 4px rgba(11,10,16,0.95),
    0 0 14px rgba(232,197,114,0.4) !important;
  border-radius: var(--r-sm);
  position: relative;
  z-index: 2;
}
/* Some elements (big-btn, cd-slot) have non-rectangular shapes — preserve their radius */
.big-btn:focus-visible,
.home-play-btn:focus-visible {
  box-shadow:
    0 0 0 2px rgba(232,197,114,0.75),
    0 0 0 5px rgba(11,10,16,0.95),
    inset 0 1px 0 rgba(245,217,138,0.22),
    0 0 36px rgba(232,197,114,0.42),
    0 6px 22px rgba(0,0,0,0.6) !important;
}
.class-portrait-grid .class-portrait:focus-visible {
  box-shadow:
    0 0 0 2px rgba(232,197,114,0.85),
    0 0 0 4px rgba(11,10,16,0.95),
    inset 0 1px 0 rgba(245,217,138,0.18),
    0 0 22px rgba(232,197,114,0.45) !important;
  transform: translateY(-3px) !important;
}
/* Skip-link style — usually invisible, gets revealed on focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 999;
  background: var(--gold);
  color: var(--vault-black);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.skip-link:focus-visible { top: 12px; }

/* ─────────────── 3. Empty states — ceremonial blank pages ───────────────
   Every list container that can be empty gets a proper "blank tome page"
   styling. The empty-state element should be added by the rebuild JS as
   the only child when the list is empty. We also style the common
   inline-empty patterns used now ("No matches yet.", "Empty.", etc.). */
.empty-state,
.lb-empty,
.hist-empty,
.daily-empty,
.friends-empty,
.recap-empty,
.spectate-empty,
.lobbies-empty,
#leaderboard-list:empty::after,
#history-list:empty::after,
#daily-list:empty::after,
#friends-content:empty::after,
#spectate-list:empty::after,
#lobbies-list:empty::after,
#achievement-list:empty::after {
  display: block;
  padding: 40px 28px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: rgba(232,228,220,0.72);
  font-style: italic;
  line-height: 1.6;
}
#leaderboard-list:empty::after { content: 'No champions inscribed yet. The ledger awaits its first victor.'; }
#history-list:empty::after     { content: 'No matches recorded. Step into the arena to begin your chronicle.'; }
#daily-list:empty::after       { content: 'The challenges of the day are still being inked. Check back shortly.'; }
#friends-content:empty::after  { content: 'You walk alone. Add an ally by username or UID below.'; }
#spectate-list:empty::after    { content: 'No matches in progress. Return when the arena stirs.'; }
#lobbies-list:empty::after     { content: 'No casual lobbies open. Host one and share your code, or queue Warband for ranked play.'; }
#achievement-list:empty::after { content: 'No deeds recorded. Every fight you win, every kill you take, leaves its mark.'; }

/* The empty-state class — for richer JS-rendered empty pages */
.empty-state {
  background: linear-gradient(180deg, rgba(20,14,22,0.4) 0%, rgba(12,8,14,0.6) 100%);
  border: 1px dashed rgba(168,128,52,0.32);
  border-radius: 6px;
  margin: 12px 0;
}
.empty-state-icon {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: rgba(168,128,52,0.42);
  display: block;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.20em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.empty-state-body {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(232,228,220,0.72);
  font-style: italic;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─────────────── 4. Screen-edge damage vignette ────────────────────────
   Triggered by render.js toggling body.hp-low (under 30%) and
   body.hp-critical (under 12%). Pulsing crimson edge that intensifies as
   HP drops — the "you're in trouble" feedback every action game has.
   Hidden during menus + cleared by exitMatch (menu.js Phase 6 hook). */
.hp-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 999;
  background:
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(196,50,74,0.0) 60%,
      rgba(208,55,80,0.55) 88%,
      rgba(140,20,40,0.85) 100%);
  transition: opacity 0.32s var(--ease-out);
}
body.hp-low .hp-vignette {
  opacity: 1;
  animation: hp-low-pulse 1.6s ease-in-out infinite;
}
body.hp-critical .hp-vignette {
  opacity: 1;
  animation: hp-critical-pulse 0.85s ease-in-out infinite;
  background:
    radial-gradient(ellipse at center,
      transparent 28%,
      rgba(208,55,80,0.0) 42%,
      rgba(220,60,90,0.78) 82%,
      rgba(160,20,46,0.96) 100%);
}
@keyframes hp-low-pulse {
  0%,100% { opacity: 0.85; }
  50%     { opacity: 1; }
}
@keyframes hp-critical-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.7; }
}

/* ─────────────── 5. Killstreak banner — CSS overlay ────────────────────
   The legacy killStreak effect renders text on the canvas. Phase 6 adds a
   parallel DOM overlay element with proper Cinzel ceremonial treatment.
   Created/updated by `showKillstreakBanner(text, color)` in render.js (wired
   below). Auto-fades after 1.6s. */
#killstreak-overlay {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  pointer-events: none;
  z-index: 80;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.9),
    0 0 22px currentColor,
    0 0 56px currentColor;
}
#killstreak-overlay.show {
  animation: killstreak-banner-flash 1.7s var(--ease-out) forwards;
}
#killstreak-overlay::before,
#killstreak-overlay::after {
  content: '';
  position: absolute;
  top: 50%; height: 2px;
  width: 80px;
  background: linear-gradient(90deg, transparent, currentColor);
  filter: drop-shadow(0 0 6px currentColor);
}
#killstreak-overlay::before { right: 100%; margin-right: 18px; }
#killstreak-overlay::after  { left:  100%; margin-left:  18px; background: linear-gradient(90deg, currentColor, transparent); }
@keyframes killstreak-banner-flash {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(20px); filter: blur(8px); }
  15%  { opacity: 1; transform: translateX(-50%) scale(1.08) translateY(0);   filter: blur(0); }
  35%  { transform: translateX(-50%) scale(1.0); }
  78%  { opacity: 1; transform: translateX(-50%) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.96); filter: blur(2px); }
}

/* ─────────────── 6. Mobile responsive — 375x667 sweep ──────────────────
   Most layout works at desktop. Phase 6 makes it work at phone width by
   adapting grids that assume horizontal space. Touch hit targets stay
   ≥36px per PRODUCT.md. */
@media (max-width: 768px) {
  /* Home — already single-column from Phase 5 (max-width 900px on home-body
     grid). At 768px the play-hub-grid becomes single column too. */
  .play-hub-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .play-hub-grid .big-btn::before {
    font-size: 4rem !important;
    right: 8px !important;
  }
  .play-hub-grid .big-btn .big-btn-title { font-size: 1.2rem !important; }

  /* Mode select — 2 col instead of 4 */
  .mode-grid { grid-template-columns: 1fr 1fr !important; }
  .mode-card { padding: 18px 12px !important; }
  .mode-card-size { font-size: 2.4rem !important; }

  /* Class select — single column, detail panel below */
  .class-select-layout { grid-template-columns: 1fr !important; }
  .class-portrait-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Profile stats grid — fewer columns */
  .profile-stats { grid-template-columns: 1fr 1fr !important; padding: 14px !important; }
  .profile-identity-card { padding: 16px 18px !important; flex-direction: column; text-align: center; align-items: center; gap: 14px; }
  .profile-identity-card .pic-portrait-wrap { width: 72px !important; height: 84px !important; }
  .profile-identity-card .pic-name { font-size: 1.3rem !important; }
  .mastery-grid { grid-template-columns: 1fr 1fr !important; }

  /* Settings — section banners + rows */
  .setting-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }
  .setting-row > label { font-size: 0.78rem !important; }
  .setting-controls,
  .setting-btn-group {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .setting-range { width: 100% !important; }

  /* MP teams row — stack vertically */
  .mp-teams-row { flex-direction: column !important; gap: 12px !important; }
  .mp-team-col { max-width: 100% !important; }
  .mp-vs { font-size: 1.2rem !important; padding: 4px 0; }
  .mp-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Leaderboard / Lobbies / History — drop secondary columns at narrow width */
  .lb-header-row,
  .hist-header-row,
  #leaderboard-list > *,
  #lobbies-list > *,
  #history-list > * {
    font-size: 0.74rem !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
  }
  .lb-col-stat:nth-child(n+4),
  .hist-col-stat:nth-child(n+5) {
    display: none;
  }

  /* Screen titles on phone — clamp + tighter tracking so they fit on 1-2 lines */
  .menu-screen > .screen-title,
  #screen-home .screen-title,
  #screen-leaderboard .screen-title,
  #screen-profile .screen-title,
  #screen-class .screen-title,
  #screen-play-hub .screen-title,
  #screen-play .screen-title,
  #screen-queue-setup .screen-title,
  #screen-party .screen-title,
  #screen-settings .screen-title,
  #screen-achievements .screen-title,
  #screen-collection .screen-title,
  #screen-friends .screen-title,
  #screen-history .screen-title,
  #screen-news .screen-title,
  #screen-spectate .screen-title,
  #screen-lobbies .screen-title,
  #screen-mp .screen-title,
  #screen-mp-lobby .screen-title,
  #screen-daily .screen-title {
    font-size: clamp(1.05rem, 5.5vw, 1.55rem) !important;
    letter-spacing: 0.14em !important;
    padding: 0 4px !important;
    max-width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.15 !important;
  }
  .menu-screen > .screen-title::before,
  .menu-screen > .screen-title::after {
    width: 40px !important;
  }

  /* News list — bigger touch padding */
  .news-entry { padding: 14px 16px !important; }
  .news-version { font-size: 0.95rem !important; }

  /* Friends — full-width input + button */
  .friends-add-row { flex-direction: column !important; gap: 10px !important; }
  .friend-uid-input { width: 100% !important; }

  /* In-match HUD — proportional shrink for handheld */
  #self-hud {
    grid-template-columns: 56px 1fr auto auto !important;
    padding: 10px 12px !important;
    column-gap: 12px !important;
  }
  .hud-portrait-cell #hud-portrait-canvas {
    width: 42px !important;
    height: 48px !important;
  }
  .hud-name-row .self-name { font-size: 0.84rem !important; max-width: 200px; }
  .hud-bars-stack .bar { height: 18px !important; }
  .hud-bars-stack .hud-bar-hp { height: 20px !important; }
  .hud-bars-stack .bar-label { line-height: 18px !important; font-size: 0.56rem !important; }
  .hud-bars-stack .hud-bar-hp .bar-label { line-height: 20px !important; }
  .hud-bars-stack .bar-num { line-height: 18px !important; font-size: 0.7rem !important; }
  #self-cds { gap: 4px !important; }
  #self-cds .cd-slot { width: 54px !important; height: 56px !important; }
  #self-cds .cd-slot .key { font-size: 0.85rem !important; }
  #self-cds .cd-slot .name { font-size: 0.50rem !important; letter-spacing: 0.08em !important; }
  #dodge-slot { width: 54px !important; height: 56px !important; }
  #dodge-slot .key { font-size: 0.85rem !important; }

  /* HUD top bar — denser */
  #hud { grid-template-columns: 1fr 100px 1fr !important; }
  .team-score { font-size: 1.6rem !important; }
  .team-label { font-size: 0.62rem !important; letter-spacing: 0.18em !important; }
  .ri-round { font-size: 0.62rem !important; letter-spacing: 0.18em !important; }

  /* Match-end — smaller verdict on phone */
  #match-end-title { font-size: clamp(2.4rem, 12vw, 3.4rem) !important; letter-spacing: 0.22em !important; }
  #match-end-score { font-size: 1.4rem !important; }
  #match-end-score::before,
  #match-end-score::after { width: 140px !important; }
  .me-breakdown-wrap { font-size: 0.78rem; }

  /* Round banner cinematic at phone width */
  .rbo-number { font-size: 3.2rem !important; }
  .rbo-map { font-size: 0.74rem !important; letter-spacing: 0.32em !important; }

  /* Queue searching — tighter spinner */
  .queue-spinner-wrap { width: 130px !important; height: 130px !important; }
  .queue-spinner-outer::before,
  .queue-spinner-outer::after { width: 6px; height: 6px; }
  .queue-title { font-size: 1.4rem !important; letter-spacing: 0.30em !important; }
  #queue-elapsed { font-size: 1.8rem !important; }
}

@media (max-width: 480px) {
  .play-hub-grid .big-btn { padding: 16px 18px !important; }
  .play-hub-grid .big-btn .big-btn-title { font-size: 1.05rem !important; letter-spacing: 0.14em !important; }
  .mode-grid { grid-template-columns: 1fr !important; }
  .class-portrait-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .home-action-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .home-action-btn { padding: 12px 8px !important; }
  .home-action-label { font-size: 0.66rem !important; }
  .auth-box { padding: 18px !important; }
  .auth-tabs { gap: 6px !important; }
  .auth-tab { padding: 8px 16px !important; font-size: 0.66rem !important; }
  .party-code-display { font-size: 1.8rem !important; letter-spacing: 0.28em !important; }
  .friends-uid-hint { font-size: 0.58rem !important; }
}

/* Touch hit area minimum — PRODUCT.md commitment */
@media (hover: none) and (pointer: coarse) {
  .btn, .side-btn, .home-action-btn, .home-util-btn,
  .party-tab, .auth-tab, .lb-tab,
  .config-row [data-map], .config-row [data-diff] {
    min-height: 38px;
  }
  .home-action-btn { min-height: 64px; }
  .friends-uid-copy { min-height: 32px; padding: 6px 12px !important; }
}

/* ─────────────── 7. Portrait frame tension — pixel-art respect ─────────
   The canvas pixel-art portrait in an ornate gold-leaf frame was visually
   jarring (PRODUCT.md noted the placeholder-art tension explicitly). Phase
   6 tightens the frame so the pixel art reads as intentional artwork
   contained in a frame, not crushed inside ornament. */
.class-portrait-grid .class-portrait canvas,
.hud-portrait-cell #hud-portrait-canvas,
.hpc-portrait,
.mp-lobby-portrait,
.queue-portrait-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;  /* Firefox fallback */
}
/* Tighter frame inset for the in-match self-HUD portrait — no ornament
   crowding the small pixel art. */
.hud-portrait-cell #hud-portrait-canvas {
  border-width: 1px !important;
  padding: 0;
}

/* ─────────────── 8. Cards — explicit "this is clickable" affordance ────
   Mastery cards, opponent rows, history rows, friend rows — when they're
   interactive but visually static, add cursor:pointer and hover-elevate. */
.mastery-grid > *,
.me-opponent-row,
#friends-content > *,
.recap-row,
.spectate-row {
  cursor: default;
  transition: background 0.2s var(--ease-out);
}
.mastery-grid > *[onclick],
.spectate-row[onclick] { cursor: pointer; }

/* Lobby browser rows are clickable */
#lobbies-list > *[onclick] {
  cursor: pointer;
}

/* ─────────────── 9. Reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.hp-low .hp-vignette,
  body.hp-critical .hp-vignette { animation: none !important; }
  #killstreak-overlay.show { animation: none !important; opacity: 1 !important; transform: translateX(-50%) scale(1) !important; }
  .class-portrait-grid .class-portrait:focus-visible { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 6.1 — POST-SHIP FIXES  (Session 67 follow-up, 2026-05-12)
   User feedback after Phase 6 ship:
   1. "The profile box i can see worse than before now rank is only half
      shown same with name" — .pic-text never got flex:1+min-width:0, so
      long names + title chip + rank badge clip.
   2. "Slight shake to the entire screen now thats kinda annoying" — the
      Phase 4 screen-enter animation is too aggressive (translate + scale
      + filter brightness pop). Tone it WAY down — just a quick fade.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Profile identity card: fix overflow on name + rank ─── */
.profile-identity-card {
  align-items: stretch !important;
  gap: 18px !important;
}
.profile-identity-card .pic-text {
  flex: 1 !important;
  min-width: 0 !important;   /* CRITICAL: allow shrinking + ellipsis */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.profile-identity-card .pic-name {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem) !important;
  letter-spacing: 0.10em !important;  /* tightened from 0.14em */
  line-height: 1.1 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
  /* The name itself overflows to ellipsis; the title chip wraps next line */
  word-break: break-word;
}
.profile-identity-card .pic-name .title-tag {
  flex-shrink: 0;
  max-width: 100%;
}
.profile-identity-card .pic-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.profile-identity-card .pic-level {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(0,0,0,0.85);
  white-space: nowrap;
}
.profile-identity-card .pic-rank-slot { flex-shrink: 0; }

/* Mobile profile identity — stack vertically so nothing clips */
@media (max-width: 600px) {
  .profile-identity-card {
    flex-direction: column !important;
    text-align: center;
    padding: 16px 14px !important;
  }
  .profile-identity-card .pic-text {
    align-items: center;
  }
  .profile-identity-card .pic-name {
    justify-content: center;
  }
  .profile-identity-card .pic-meta {
    justify-content: center;
  }
}

/* ─── 2. Same flex-shrink fix for home-player-card identity ─── */
#home-player-card .hpc-name {
  flex-wrap: wrap;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
#home-player-card .hpc-name .title-tag {
  flex-shrink: 0;
  max-width: 100%;
}
#home-player-card .hpc-identity {
  min-width: 0;
}

/* ─── 3. Stop the "shake" — minimal screen-enter ───
   Phase 4's screen-enter did opacity + translateY(14px) + scale(0.985) +
   filter blur + brightness. Stacked, that reads as "the screen is settling
   into place every time" — annoying after the first viewing. Replace with
   plain fade. Keep duration short. */
.menu-screen.active {
  animation: p6-screen-fade 200ms ease-out !important;
}
@keyframes p6-screen-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Remove the screen-flare radial — it added perceived motion */
.menu-screen.active::before {
  animation: none !important;
  display: none !important;
}
/* Cascade animations dampened — translate 12px → 4px, no scale */
@keyframes p4-cascade-up {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Reduce home cascade duration so it lands quicker, less "settling" feel */
.menu-screen.active#screen-home .home-action-btn,
.menu-screen.active#screen-play-hub .play-hub-grid .big-btn,
.menu-screen.active#screen-play .mode-card {
  animation-duration: 280ms !important;
}

/* ─── 4. Online-dot pulse — tone down (visual jitter on edge of vision) ─── */
@keyframes online-dot-pulse {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.06); filter: brightness(1.1); }
}

/* ─── 5. Logo-breathe — slower, less amplitude ─── */
@keyframes logo-breathe {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 18px rgba(232,197,114,0.40)); }
  50%      { transform: scale(1.008); filter: drop-shadow(0 0 24px rgba(255,210,140,0.55)); }
}

/* ─── 6. ri-pip wax-seal pulse — calmer ─── */
@keyframes rip-seal-pulse {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.03); filter: brightness(1.10); }
}

/* ─── 7. Class portrait hover — drop the rotateX tilt that compounds with scale ───
   The Phase 4 rotateX(4deg) on top of scale(1.04) + translateY(-4px) read as
   "wobbly" on rapid hover-out. Just lift + scale, no perspective tilt. */
.class-portrait-grid .class-portrait:hover {
  transform: translateY(-3px) scale(1.04) !important;
}
.class-portrait-grid .class-portrait.selected:hover {
  transform: translateY(-4px) scale(1.05) !important;
}

/* ─── 8. Reduced-motion respect for the new fade ─── */
@media (prefers-reduced-motion: reduce) {
  .menu-screen.active { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 7.1 — REVERT  (Session 68.1, 2026-05-12)
   User feedback after Phase 7 ship: "i believe you ruined the layout even
   more". Phase 7 was speculation without seeing the populated state — I
   guessed at hero sizing, big PLAY CTA, wider max-width, etc. Reverted.
   Keeping only the one verified fix from the audit: the legacy title-tag
   cap that clipped "Hollow Sovereign's Bane" to "HO..." in the meta
   column. That fix was confirmed against the user's actual screenshot.
   The rest is rolled back to Phase 6.1 state — waiting for the user to
   share a screenshot of the current layout so the next fix is surgical
   rather than another guess.
   ═══════════════════════════════════════════════════════════════════════ */
.title-tag {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}