:root{
    --bg:#05070e;
    --bg2:#0b1020;
    --panel-top:#141d33;
    --panel-bot:#0c1322;
    --line:#202d49;
    --line-soft:#16203a;
    --gold:#d4af37;
    --gold-bright:#f7dd88;
    --gold-dim:#9a7d28;
    --text:#eaf0fb;
    --muted:#8493b2;
    --green:#37c46f;
    --red:#e84a4f;
    --blue:#5a8be0;
    --shadow:0 24px 70px rgba(0,0,0,.6);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;line-height:1.4;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* living, layered background */
  body::before{
    content:"";position:fixed;inset:0;z-index:-2;
    background:
      radial-gradient(1100px 620px at 50% -240px, #1c2747 0%, rgba(0,0,0,0) 60%),
      radial-gradient(900px 520px at 100% 110%, #15203c 0%, rgba(0,0,0,0) 55%),
      radial-gradient(800px 500px at 0% 100%, #121a30 0%, rgba(0,0,0,0) 55%),
      linear-gradient(180deg,#05070e,#070b16);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(circle at 50% 38%, rgba(212,175,55,.06), rgba(0,0,0,0) 55%);
    animation:breathe 9s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

  h1,h2,h3,h4,.font-head{font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;text-transform:uppercase}
  .wrap{max-width:1060px;margin:0 auto;padding:22px 18px 90px}

  /* ---------- Header ---------- */
  header.app{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0 20px;border-bottom:1px solid var(--line-soft);margin-bottom:24px;
    position:sticky;top:0;z-index:30;
    backdrop-filter:blur(10px);
    background:linear-gradient(180deg,rgba(5,7,14,.82),rgba(5,7,14,.35));
  }
  .brand{display:flex;align-items:center;gap:13px}
  .brand .logo{
    width:48px;height:48px;border-radius:12px;display:grid;place-items:center;overflow:hidden;
    background:linear-gradient(145deg,#222e4d,#0b1020);
    border:1px solid var(--gold-dim);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 22px rgba(212,175,55,.22), 0 8px 22px rgba(0,0,0,.5);
    font-family:'Barlow Condensed';font-weight:700;font-size:24px;color:var(--gold-bright);
  }
  .brand .logo img{width:100%;height:100%;object-fit:cover;display:block}
  .brand h1{font-size:27px;font-weight:700;line-height:1}
  .brand h1 .thin{color:var(--gold);font-weight:500}
  .brand .tag{font-size:11px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:2px}
  .hdr-right{display:flex;align-items:center;gap:14px}
  .rec-pill{text-align:right;font-family:'Barlow Condensed'}
  .rec-pill .rl{font-size:10px;color:var(--muted);letter-spacing:2px}
  .rec-pill .rv{font-size:22px;color:var(--gold-bright);font-weight:600;line-height:1}
  .btn-ghost{
    background:rgba(255,255,255,.02);border:1px solid var(--line);color:var(--muted);
    font-family:'Inter';font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    padding:9px 15px;border-radius:9px;cursor:pointer;transition:.18s;
  }
  .btn-ghost:hover{border-color:var(--gold-dim);color:var(--gold-bright);background:rgba(212,175,55,.06)}

  /* ---------- Cards ---------- */
  .card{
    position:relative;
    background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));
    border:1px solid var(--line);border-radius:18px;
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
    padding:26px;
    animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
  }
  .card::before{
    content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 22%);
  }
  .card + .card{margin-top:20px}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  /* ===== Game section navigation (tabs) ===== */
  .game-nav{position:sticky;top:8px;z-index:40;display:grid;grid-template-columns:repeat(9,1fr);gap:6px;
    background:linear-gradient(180deg,#0c1426,#080d18);border:1px solid var(--line);border-radius:16px;
    padding:7px;margin-bottom:20px;box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(6px)}
  .gnav-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
    background:transparent;border:1px solid transparent;border-radius:11px;padding:10px 4px 8px;color:var(--muted);transition:.16s}
  .gnav-btn:hover{color:var(--text);background:rgba(255,255,255,.03)}
  .gnav-btn .gnav-ico{width:23px;height:23px;display:block;color:inherit}
  .gnav-btn .gnav-ico svg{width:23px;height:23px}
  .gnav-btn .gnav-lab{font-family:'Barlow Condensed';font-weight:600;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
  .gnav-btn.active{color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    border-color:var(--gold);box-shadow:0 6px 18px rgba(212,175,55,.4),inset 0 1px 0 rgba(255,255,255,.5)}
  .gnav-btn.active .gnav-ico{color:#15110a}
  .gnav-btn .gnav-dot{display:none;position:absolute;top:6px;right:calc(50% - 22px);width:9px;height:9px;border-radius:50%;
    background:#ff4d52;box-shadow:0 0 8px #ff4d52;border:1.5px solid #0c1426;animation:livePulse 1.2s ease-in-out infinite}
  /* numbered count badge (Quests "ready to claim") */
  .gnav-btn .gnav-dot.count{width:auto;min-width:17px;height:17px;padding:0 4px;border-radius:9px;top:3px;right:calc(50% - 26px);
    place-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:11px;line-height:1;color:#fff;
    box-shadow:0 0 9px rgba(255,77,82,.9)}
  @media(max-width:560px){
    .game-nav{gap:2px;padding:4px}
    .gnav-btn{padding:8px 1px 6px}
    .gnav-btn .gnav-ico,.gnav-btn .gnav-ico svg{width:19px;height:19px}
    .gnav-btn .gnav-lab{font-size:7.5px;letter-spacing:0}
  }
  @media(max-width:400px){   /* 9 tabs on the smallest phones — keep labels readable + on one line */
    .gnav-btn{padding:7px 0 5px}
    .gnav-btn .gnav-lab{font-size:7px}
  }
  /* one section at a time */
  .tab-panel{display:none;animation:tabIn .3s ease both}
  .tab-panel.active{display:block}
  @keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  /* re-trigger the card rise per tab without stacking delays */
  .tab-panel.active > .card{animation:rise .42s cubic-bezier(.2,.8,.2,1) both}
  .section-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .section-title .num{
    font-family:'Barlow Condensed';font-weight:700;color:#0a0e18;
    background:linear-gradient(145deg,var(--gold-bright),var(--gold));
    width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:17px;
    box-shadow:0 4px 12px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .section-title h2{font-size:25px}
  .section-sub{color:var(--muted);font-size:15px;margin-bottom:22px}

  /* ---------- Forms ---------- */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  label.fld{display:block}
  label.fld .lab,.lab{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:600}
  input[type=text], select{
    width:100%;background:#080d19;border:1px solid var(--line);border-radius:10px;
    color:var(--text);font-family:'Inter';font-weight:600;font-size:16px;padding:12px 13px;
    transition:.18s;outline:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
  }
  input[type=text]:focus, select:focus{border-color:var(--gold);box-shadow:inset 0 2px 6px rgba(0,0,0,.4), 0 0 0 3px rgba(212,175,55,.14)}
  select{appearance:none;cursor:pointer;color-scheme:dark;   /* color-scheme:dark = native option menu renders dark+light on macOS/Safari (which ignore option bg) */
    background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
    background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  /* CROSS-BROWSER FIX: never rely on inherited/default option colors — set BOTH explicitly so every
     option is readable at all times (not just on hover) on Chrome, Safari, Firefox, Windows & Mac. */
  select option, select optgroup{ background-color:#0c1322; color:#eaf0fb; }
  select option:checked{ background-color:#1a2336; color:#f7dd88; font-weight:700; }
  select option:hover{ background-color:#1a2336; color:#fff; }

  /* ---------- Create hero preview ---------- */
  .create-hero{
    display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center;
    background:linear-gradient(180deg,#0c1426,#080d19);
    border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:22px;
  }
  .create-hero .ch-name{font-family:'Barlow Condensed';font-size:26px;font-weight:700;line-height:1}
  .create-hero .ch-nick{color:var(--gold);font-style:italic;font-size:16px;margin:2px 0 8px}
  .create-hero .ch-style{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .create-hero .ch-ovr{margin-top:8px;display:flex;align-items:baseline;gap:8px}
  .create-hero .ch-ovr b{font-family:'Barlow Condensed';font-size:38px;color:var(--gold-bright);line-height:1}
  .create-hero .ch-ovr span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

  /* ---------- Avatar ---------- */
  .avatar-frame{
    position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
    background:radial-gradient(120% 110% at 50% 8%, #1a2542 0%, #0a1020 62%, #060a14 100%);
    border:1px solid var(--line);
    box-shadow:inset 0 0 44px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .avatar-frame::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,0) 30%, rgba(0,0,0,.25));
  }
  .avatar-frame svg{display:block;width:100%;height:100%;position:relative}
  .avatar-frame img,img.avatar-svg{display:block;width:100%;height:100%;object-fit:cover;position:relative}

  /* ---------- Style chooser ---------- */
  .style-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:4px}
  .style-card{
    background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;
    transition:.2s;position:relative;text-align:center;overflow:hidden;
  }
  .style-card:hover{border-color:var(--gold-dim);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
  .style-card.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.25),0 12px 30px rgba(0,0,0,.5),inset 0 0 40px rgba(212,175,55,.08)}
  .style-card.sel::before{content:"✓ SELECTED";position:absolute;top:9px;right:10px;font-family:'Barlow Condensed';font-size:10px;letter-spacing:1px;color:var(--gold-bright)}
  .style-card .ico{font-size:32px;margin-bottom:8px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
  .style-card .nm{font-family:'Barlow Condensed';font-weight:600;font-size:19px;letter-spacing:1px}
  .style-card .ds{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.35}
  .style-card .bonus{display:inline-block;font-size:11px;color:var(--gold-bright);margin-top:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;background:rgba(212,175,55,.1);border:1px solid var(--gold-dim);padding:3px 10px;border-radius:20px}

  /* ---------- Stat allocation ---------- */
  .pts-banner{
    display:flex;align-items:center;justify-content:space-between;
    background:linear-gradient(90deg,rgba(212,175,55,.1),rgba(212,175,55,.02));
    border:1px solid var(--gold-dim);border-radius:12px;padding:13px 17px;margin:18px 0 14px;
  }
  .pts-banner .pl{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600}
  .pts-banner .pv{font-family:'Barlow Condensed';font-size:28px;font-weight:700;color:var(--gold-bright);line-height:1}
  .stat-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
  .stat-row:last-child{border-bottom:none}
  .stat-row .shint{flex-basis:100%;width:100%;margin:-2px 0 0;font-size:11.5px;font-weight:400;line-height:1.35;color:var(--muted);font-family:'Inter'}
  .stat-row .sname{width:128px;font-weight:600;font-size:14px;display:flex;align-items:center}
  .stat-row .sname .star{color:var(--gold-bright);font-size:11px;margin-left:4px}
  .bar{flex:1;height:12px;background:#0a0e18;border:1px solid rgba(255,138,61,.16);border-radius:7px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}
  .bar > span{display:block;height:100%;background:linear-gradient(90deg,#e23c0f 0%,#ff6a1a 42%,#ff9b2f 76%,#ffc24b 100%);border-radius:7px;transition:width .55s cubic-bezier(.2,.8,.2,1);width:0;box-shadow:0 0 8px rgba(255,120,30,.45),inset 0 1px 0 rgba(255,255,255,.28)}
  .stat-row .sval{width:40px;text-align:right;font-family:'Barlow Condensed';font-weight:600;font-size:20px;color:var(--gold-bright)}
  /* read-only starting spread (creation) */
  .stat-row.ro{padding:8px 0;gap:12px}
  .stat-row.ro .sval{width:32px;font-size:18px;color:#ffb648}
  .stat-row .lean{width:36px;text-align:right;font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;letter-spacing:.3px}
  .stat-row .lean.up{color:#5fd38a}
  .stat-row .lean.dn{color:#ff7a6b}
  .stat-row .lean.even{color:var(--muted);opacity:.4}
  .spread-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:16px 0 2px}
  .spread-head .spread-note{font-size:12px;color:var(--muted)}
  .start-info{display:flex;flex-direction:column;gap:7px;margin-top:14px}
  .si-row{display:flex;align-items:flex-start;gap:10px;background:linear-gradient(180deg,#0d1326,#080c16);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
  .si-tag{flex:0 0 auto;font-family:'Barlow Condensed';font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9fb0d0;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:20px;padding:3px 9px;margin-top:1px}
  .si-tag.gold{color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  .si-txt{font-size:12.5px;color:var(--text);line-height:1.4}
  .si-txt.dim{color:var(--muted)}
  .stepper{display:flex;gap:6px}
  .stepper button{
    width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:linear-gradient(180deg,#131d33,#0a1020);color:var(--text);
    font-size:19px;font-weight:700;cursor:pointer;transition:.13s;font-family:'Barlow Condensed';line-height:1;
  }
  .stepper button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
  .stepper button:active:not(:disabled){transform:translateY(1px)}
  .stepper button:disabled{opacity:.3;cursor:not-allowed}

  /* ---------- Buttons ---------- */
  .btn{
    position:relative;overflow:hidden;
    font-family:'Barlow Condensed';font-weight:600;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;
    border:none;border-radius:12px;padding:15px 26px;cursor:pointer;transition:transform .14s, box-shadow .18s;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;
    box-shadow:0 10px 26px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:.5s;opacity:0}
  .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 34px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.5)}
  .btn:hover:not(:disabled)::after{left:130%;opacity:1}
  .btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
  .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
  .btn.full{width:100%}
  .btn.big{font-size:20px;padding:18px 28px}
  .btn.red{background:linear-gradient(180deg,#ff6b70,var(--red));color:#fff;box-shadow:0 10px 26px rgba(232,74,79,.34), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn.red:hover:not(:disabled){box-shadow:0 16px 36px rgba(232,74,79,.5), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn.dark{background:linear-gradient(180deg,#1d2842,#121a2e);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);border:1px solid var(--line)}
  .btn.dark::after{display:none}
  .btn.dark:hover:not(:disabled){border-color:var(--gold-dim);color:var(--gold-bright)}

  /* ---------- Fighter HUD ---------- */
  .fighter-hud{display:grid;grid-template-columns:200px 1fr auto;gap:20px;align-items:center}
  .hud-info .fname{font-family:'Barlow Condensed';font-size:32px;font-weight:700;line-height:1}
  .hud-info .fnick{color:var(--gold);font-size:18px;font-style:italic;margin:3px 0 8px}
  .meta-line{display:flex;gap:8px;flex-wrap:wrap}
  .chip{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:#080d19;border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-weight:600}
  .chip.gold{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.08)}
  .ovr-badge{text-align:center;padding-left:6px}
  .ovr-badge .ol{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
  .ovr-badge .ov{font-family:'Barlow Condensed';font-size:54px;font-weight:700;color:var(--gold-bright);line-height:1;text-shadow:0 0 24px rgba(212,175,55,.4)}

  /* ---------- Overall rating tiers (applied to every Overall number) ---------- */
  /* !important so the tier colour wins over each site's base colour rule */
  .ovr-gray{color:#7d8aa6 !important;text-shadow:none !important}
  .ovr-bronze{color:#d68b4c !important;text-shadow:0 0 16px rgba(205,127,50,.4) !important}
  .ovr-silver{color:#cfd8e8 !important;text-shadow:0 0 16px rgba(200,212,230,.35) !important}
  .ovr-gold{color:#f7dd88 !important;text-shadow:0 0 20px rgba(212,175,55,.5) !important}
  /* elite 90+: shimmering gold gradient with a glowing halo */
  .ovr-elite{
    color:#f7dd88;
    background:linear-gradient(100deg,#e7b94a 0%,#f7dd88 24%,#fff8db 44%,#f7dd88 64%,#e7b94a 100%);
    background-size:230% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 12px rgba(247,221,136,.7));
    animation:ovrShine 2.8s linear infinite}
  @keyframes ovrShine{0%{background-position:210% 0}100%{background-position:-30% 0}}

  /* mini stats */
  .mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;margin-top:22px}
  /* attribute category grouping (HUD, training, create) */
  #hudStats{margin-top:18px}
  .mini-stats-row,.train-grid-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:9px}
  .stat-cat-head{font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#ff9242;
    margin:18px 0 9px;padding-bottom:5px;border-bottom:1px solid color-mix(in srgb,#ff8a3d 22%,transparent)}
  .stat-cat-head:first-child{margin-top:0}
  .stat-cat-head.sm{display:flex;align-items:center;gap:9px;margin:15px 0 9px;font-size:11px;letter-spacing:3px;color:#ff9242;font-weight:700;border:none;padding:0}
  .stat-cat-head.sm::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,140,60,.38),transparent)}
  .stat-row .sname .smi{width:16px;height:16px;display:inline-flex;vertical-align:-3px;margin-right:6px;color:#ff8a3d;opacity:.95}
  /* backstory text */
  .hud-bg{font-size:12px;color:var(--muted);font-style:normal;letter-spacing:0}
  .corner .cbg{font-size:11px;color:var(--gold-bright);opacity:.85;line-height:1.3;margin-top:3px;max-width:150px;margin-left:auto;margin-right:auto}
  .mini-stat{background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:12px;padding:12px 8px 11px;text-align:center;transition:.2s;cursor:help}
  .hud-tip{margin-top:12px;font-size:11.5px;color:var(--muted);text-align:center;letter-spacing:.3px;font-style:italic}
  /* attribute-balance explainer */
  .balance-note{line-height:1.6}
  .balance-note p{color:var(--text);font-size:14px;margin:0 0 12px}
  .balance-note p:last-child{margin-bottom:0}
  .balance-note b{color:var(--gold-bright);font-weight:600}
  .balance-note .bn-keys{font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:13px;margin-top:4px}
  .balance-note .bn-keys b{color:var(--text)}
  .balance-note .bn-keys span{display:inline-block;background:rgba(212,175,55,.10);border:1px solid var(--gold-dim);color:var(--gold-bright);
    border-radius:6px;padding:1px 8px;margin:2px 3px 0 0;font-size:12px;font-weight:600}
  .balance-note a{color:var(--gold-bright);text-decoration:none;border-bottom:1px dotted var(--gold-dim);white-space:nowrap}
  .balance-note a:hover{color:var(--gold-bright);border-bottom-style:solid}
  .mini-stat .mv{font-family:'Barlow Condensed';font-size:25px;font-weight:600;color:var(--gold-bright);line-height:1}
  .mini-stat .ml{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:3px}
  .mini-stat .mbar{height:4px;background:#080d19;border-radius:3px;overflow:hidden;margin-top:7px}
  .mini-stat .mbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));transition:width .5s}
  .mini-stat.bump{animation:bump .55s ease;border-color:var(--gold);box-shadow:0 0 18px rgba(212,175,55,.3)}

  /* ===== 6-AXIS RADAR / SPIDER CHART (FIFA / NBA-2K style) ===== */
  .radar-host{margin:4px 0 2px}
  .radar-box{display:flex;flex-direction:column;align-items:center;
    background:radial-gradient(ellipse at 50% 42%,rgba(212,175,55,.06),transparent 70%);
    border:1px solid rgba(212,175,55,.16);border-radius:14px;padding:8px 6px 10px;margin:2px 0 4px}
  .radar-title{font-family:'Barlow Condensed';font-weight:600;font-size:12px;letter-spacing:1.4px;
    color:var(--gold-bright,#f7c948);opacity:.85;text-transform:uppercase;margin:2px 0 0}
  .radar-svg{width:100%;max-width:330px;height:auto;display:block;margin:0 auto}
  .rdr-ring{fill:none;stroke:rgba(214,188,120,.13);stroke-width:1}
  .rdr-ring.out{stroke:rgba(214,188,120,.28)}
  .rdr-spoke{stroke:rgba(214,188,120,.11);stroke-width:1}
  .rdr-shape{stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
  .rdr-dot{stroke:rgba(0,0,0,.35);stroke-width:.6}
  .rdr-lab{font-family:'Inter','Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
    fill:#dac892;letter-spacing:.3px}
  .rdr-val{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;fill:#f7c948}
  .radar-legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:2px 0 1px;
    font-family:'Inter','Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.3px}
  .radar-legend .rl-item{display:inline-flex;align-items:center;gap:7px;color:#e7ddc4}
  .radar-legend .rl-item i{width:13px;height:13px;border-radius:4px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
  .match-radar{margin:14px 0 4px}

  /* ===== COMPACT attribute rows (NBA-2K style: name · slim bar · number) ===== */
  .attr-wrap{margin-top:6px}
  .attr-list{display:flex;flex-direction:column;gap:2px;margin:3px 0 11px}
  .attr-row{display:flex;align-items:center;gap:10px;padding:3px 7px;border-radius:7px;transition:background .12s}
  .attr-row .ar-name{flex:0 0 118px;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attr-row .ar-name .ar-ic{flex:0 0 15px;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;color:#ff8a3d;opacity:.95}
  .attr-row .ar-name .ar-ic svg{width:15px;height:15px}
  .attr-row .ar-bar{flex:1;height:9px;min-width:34px;background:#0a0e18;border:1px solid rgba(255,138,61,.16);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}
  .attr-row .ar-bar > i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#e23c0f 0%,#ff6a1a 42%,#ff9b2f 76%,#ffc24b 100%);box-shadow:0 0 8px rgba(255,120,30,.45),inset 0 1px 0 rgba(255,255,255,.28);transition:width .45s cubic-bezier(.2,.8,.2,1)}
  .attr-row .ar-val{flex:0 0 26px;text-align:right;font-family:'Barlow Condensed';font-weight:700;font-size:16px;color:#ffb648;line-height:1;text-shadow:0 0 8px rgba(255,140,40,.3)}
  .attr-row .ar-val.boosted{color:#5fd38a;text-shadow:0 0 9px rgba(95,211,138,.6)}  /* stat raised by skills — green glow, no badge */
  .attr-row .ar-act{flex:0 0 58px;text-align:right;font-family:'Barlow Condensed';font-size:10.5px;letter-spacing:.4px}
  .attr-row .ar-act .ar-add{color:var(--gold-bright)}
  .attr-row .ar-act .ar-cap{color:var(--muted)}
  .attr-row.clickable{cursor:pointer}
  .attr-row.clickable:hover:not(.disabled){background:rgba(212,175,55,.09)}
  .attr-row.clickable:hover:not(.disabled) .ar-name{color:var(--gold-bright)}
  .attr-row.disabled{opacity:.4;cursor:not-allowed}
  .attr-row.bump{background:rgba(212,175,55,.18)}
  .attr-row.bump .ar-val{animation:bump .5s ease}
  /* inline + spend button (only when you have attribute points) */
  .attr-row.spendable{background:rgba(212,175,55,.05)}
  .attr-row .ar-plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:none;cursor:pointer;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#15110a;font-family:'Barlow Condensed';font-weight:700;font-size:15px;line-height:1;
    box-shadow:0 2px 6px rgba(212,175,55,.4);transition:transform .1s,box-shadow .12s}
  .attr-row .ar-plus:hover{transform:scale(1.13);box-shadow:0 3px 12px rgba(212,175,55,.6)}
  .attr-row .ar-plus:active{transform:scale(.94)}
  .attr-pts-badge .apb{font-family:'Barlow Condensed';font-size:12px;letter-spacing:.4px;color:var(--gold-bright);background:rgba(212,175,55,.12);
    border:1px solid var(--gold-dim);border-radius:20px;padding:3px 11px;white-space:nowrap}
  .attr-pts-badge .apb b{font-size:15px}
  .attr-pts-badge .apb-plus{display:inline-block;width:16px;height:16px;line-height:15px;text-align:center;border-radius:5px;
    background:var(--gold);color:#15110a;font-weight:700;font-size:12px;vertical-align:-2px}
  /* tiny one-line readiness on My Fighter (no big bars — full version on Training) */
  .mini-readiness{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
  .mini-readiness .mr-lab{font-family:'Barlow Condensed';font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase}
  .mini-readiness .mr-item{display:flex;align-items:center;gap:5px;color:var(--text);font-weight:600}
  .mini-readiness .mr-dot{width:8px;height:8px;border-radius:50%}
  .mini-readiness .mr-dot.good{background:#43d97e}
  .mini-readiness .mr-dot.mid{background:var(--gold-bright)}
  .mini-readiness .mr-dot.low{background:#ff6b70}
  .mini-readiness .mr-link{margin-left:auto;color:var(--gold-dim);font-size:11px}

  /* ===== INJURY PANEL (My Fighter) ===== */
  .injury-panel{margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft)}
  .inj-fit{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#7fd6a0;font-weight:600}
  .inj-fit .inj-fit-ic{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:rgba(67,217,126,.16);color:#7dffb4;font-weight:800;font-size:11px}
  .inj-head{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed';font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#ef8b8b;margin-bottom:8px}
  .inj-head .inj-h-ic{width:15px;height:15px;color:#ef6b6b}
  .inj-head .inj-count{margin-left:auto;background:rgba(239,107,107,.16);border:1px solid rgba(239,107,107,.4);color:#ffb3b3;border-radius:20px;padding:1px 9px;font-size:11px}
  .inj-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
  .inj-row:last-of-type{border-bottom:none}
  .inj-tier{flex-shrink:0;font-family:'Barlow Condensed';font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:600;
    color:var(--it);border:1px solid color-mix(in srgb,var(--it) 45%,transparent);background:color-mix(in srgb,var(--it) 12%,transparent);
    border-radius:6px;padding:3px 7px;width:64px;text-align:center}
  .inj-mid{flex:1;min-width:0}
  .inj-name{font-family:'Barlow Condensed';font-weight:600;font-size:14.5px;display:block;letter-spacing:.3px}
  .inj-eff{font-size:11.5px;color:#ef9a9a;font-weight:600}
  .inj-heal{display:block;margin-top:5px}
  .inj-bar{display:block;height:5px;background:#0a0f1c;border:1px solid var(--line);border-radius:4px;overflow:hidden;max-width:220px}
  .inj-bar > i{display:block;height:100%;background:linear-gradient(90deg,#5aa86a,#7fd6a0);border-radius:4px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .inj-time{flex-shrink:0;font-family:'Barlow Condensed';font-weight:700;font-size:15px;color:var(--text);text-align:right;line-height:1.05}
  .inj-time small{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .inj-foot{font-size:11px;color:var(--muted);margin-top:9px}

  /* ===== COMPACT condition bars (My Fighter summary · Fight night) ===== */
  .cbars{display:flex;flex-direction:column;gap:9px}
  .cbar{display:flex;align-items:center;gap:11px}
  .cbar .cb-lab{flex:0 0 76px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
  .cbar .cb-track{flex:1;height:8px;background:#080d19;border:1px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
  .cbar .cb-track > i{display:block;height:100%;border-radius:5px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .cbar.good .cb-track > i{background:linear-gradient(90deg,#1f9e55,#43d97e)}
  .cbar.mid  .cb-track > i{background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright))}
  .cbar.low  .cb-track > i{background:linear-gradient(90deg,#a83a3e,#ff6b70)}
  .cbar .cb-val{flex:0 0 30px;text-align:right;font-family:'Barlow Condensed';font-weight:700;font-size:14px;color:var(--text)}
  .cc-hint{font-size:11px;color:var(--muted)}
  .cc-hint b{color:var(--gold-bright)}
  .fight-readiness{margin:14px 0;padding:12px 14px;background:linear-gradient(180deg,#11182b,#0a0f1c);border:1px solid var(--line);border-radius:12px}
  .fr-head{font-size:11.5px;letter-spacing:.3px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
  .fr-head b{color:var(--gold-bright)}
  .fr-head .mmi{font-size:15px;color:var(--gold-bright)}
  @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
  /* career progress: level / tier / progress-to-next-tier */
  .career-prog{margin-top:20px;background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
  /* FAME — street reputation box */
  .fame-box{margin:-2px 0 14px;padding:11px 13px;border-radius:11px;background:linear-gradient(180deg,#181006,#0d0a05);border:1px solid #4a3414}
  .fame-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
  .fame-top .fame-ic{width:18px;height:18px;display:grid;place-items:center;color:var(--gold-bright)}.fame-top .fame-ic svg{width:17px;height:17px}
  .fame-title{font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-bright)}
  .fame-val{margin-left:auto;font-family:'Barlow Condensed';font-weight:700;font-size:18px;color:#f3e6bd}.fame-val span{font-size:11px;color:var(--muted);font-weight:400}
  .fame-bar{height:7px;border-radius:5px;background:#0a0e18;border:1px solid #3a2c16;overflow:hidden}
  .fame-bar > i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-bright));box-shadow:0 0 10px rgba(212,175,55,.5);transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .fame-sub{margin-top:6px;font-size:11.5px;color:var(--muted)}
  /* M22 S1 — Fanbase card (reuses .fame-box / .fame-top / .fame-bar / .fame-sub) */
  .fame-box.fanbase .fame-val span{font-size:11px}
  .fanbase-row{display:flex;align-items:center;justify-content:space-between;margin:-1px 0 7px}
  .fb-today{font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:.3px;color:#5fd39a}
  .fb-fame{font-family:'Inter';font-weight:600;font-size:11.5px;color:var(--muted)}
  .fame-news{margin-top:7px;padding-top:7px;border-top:1px solid #2a2113;font-family:'Inter';font-weight:600;
    font-size:12px;color:#e6cf8a;line-height:1.35}
  .career-prog .cp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .career-prog .cp-tier{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--gold-bright)}
  .career-prog .cp-lvl{font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:2px;color:var(--text)}
  .career-prog .cp-bar{height:9px;background:#080d19;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
  .career-prog .cp-bar > i{display:block;height:100%;border-radius:6px;transition:width .55s cubic-bezier(.2,.8,.2,1)}
  .career-prog .cp-bar.tier > i{background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-bright));box-shadow:0 0 10px rgba(212,175,55,.5)}
  .career-prog .cp-bar.xp{height:5px;margin-top:8px}
  .career-prog .cp-bar.xp > i{background:linear-gradient(90deg,#2f5aa8,#6a99ec)}
  .career-prog .cp-sub{font-size:12px;color:var(--muted);margin:7px 0 0}
  .career-prog .cp-sub.small{font-size:11px;margin-top:4px;letter-spacing:.5px}
  .career-prog .cp-sub b{color:var(--gold-bright)}
  .rung .rname .rlvl{font-family:'Barlow Condensed';font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:500;margin-left:4px}
  .rung.current .rname .rlvl{color:var(--gold-bright)}

  /* ---------- Economy: cash, quests, gyms & coaches ---------- */
  .rec-pill.cash .rv{color:#7dffb4}
  /* make bare ICO svgs in chips / badges a clean, consistent size */
  .chip > svg, .badge-rank > svg{width:1.05em;height:1.05em;vertical-align:-0.16em;margin-right:.3em;display:inline-block}
  /* quests */
  .q-cap{font-family:'Barlow Condensed';font-size:12px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
  .quest-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line-soft)}
  .quest-row:last-child{border-bottom:none}
  .quest-row .q-check{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;color:var(--muted);font-weight:700;font-family:'Barlow Condensed'}
  .quest-row.done .q-check{background:rgba(55,196,111,.16);border-color:rgba(55,196,111,.5);color:#7dffb4}
  .quest-row .q-info{flex:1;min-width:0}
  .quest-row .q-name{font-family:'Barlow Condensed';font-weight:600;font-size:16px;display:block;letter-spacing:.4px}
  .quest-row.done .q-name{color:var(--muted);text-decoration:line-through}
  .quest-row .q-desc{font-size:12.5px;color:var(--muted);margin-top:1px}
  .quest-row .q-bonus{display:block;font-family:'Inter','Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;margin-top:3px;
    color:#d9b14a;letter-spacing:.2px}
  .quest-row .q-bonus.earned{color:#7dffb4}
  .quest-row .q-reward{font-family:'Barlow Condensed';font-size:12px;color:var(--gold-bright);background:rgba(212,175,55,.1);border:1px solid var(--gold-dim);border-radius:20px;padding:4px 11px;white-space:nowrap;flex-shrink:0}
  /* quest progress bar + category tag + completed section */
  .quest-row .q-name .q-cat{font-family:'Barlow Condensed';font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--line);border-radius:10px;padding:1px 7px;margin-left:6px;vertical-align:1px}
  .quest-row .q-prog{display:flex;align-items:center;gap:8px;margin-top:6px}
  .quest-row .q-bar{flex:1;height:6px;background:#080d19;border:1px solid var(--line);border-radius:4px;overflow:hidden;max-width:240px}
  .quest-row .q-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));border-radius:4px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .quest-row .q-num{font-family:'Barlow Condensed';font-size:11px;color:var(--muted);flex-shrink:0}
  #questList .q-donehead{font-family:'Barlow Condensed';font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
    margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line-soft)}
  .quest-row.done{opacity:.6}
  .quest-row .q-reward.claimed{color:#7dffb4;background:rgba(55,196,111,.12);border-color:rgba(55,196,111,.4)}
  .quest-row.flash{animation:questFlash 1.6s ease}
  @keyframes questFlash{0%{background:rgba(212,175,55,.35);box-shadow:0 0 0 1px var(--gold)}100%{background:transparent;box-shadow:none}}
  #questList{margin:6px 0 0}

  /* ===== READY-TO-CLAIM quest row + glowing CLAIM button ===== */
  .quest-row.ready{background:linear-gradient(90deg,rgba(212,175,55,.10),transparent);border-radius:10px;padding-left:8px;padding-right:8px}
  .quest-row.ready .q-check{background:rgba(212,175,55,.22);border-color:var(--gold);color:var(--gold-bright)}
  .quest-row.ready .q-name{color:var(--gold-bright)}
  .q-claim{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;
    font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:1.2px;color:#1a1206;
    background:linear-gradient(180deg,#ffe7a0,#e7b53e);border:1px solid #ffd86b;border-radius:11px;padding:7px 16px;
    box-shadow:0 3px 14px rgba(231,181,62,.5);animation:claimGlow 1.5s ease-in-out infinite}
  .q-claim:hover{filter:brightness(1.08)}
  .q-claim:active{transform:translateY(1px)}
  .q-claim .qc-amt{font-size:9.5px;font-weight:600;letter-spacing:.3px;color:#3a2a08;opacity:.85}
  @keyframes claimGlow{0%,100%{box-shadow:0 3px 12px rgba(231,181,62,.45)}50%{box-shadow:0 3px 22px rgba(255,216,107,.9)}}

  /* ===== PRIZE POPUP (claim reveal) ===== */
  .prize-ov{position:fixed;inset:0;z-index:100050;display:grid;place-items:center;padding:20px;
    background:rgba(3,5,10,.74);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease}
  .prize-ov.show{opacity:1}
  .prize-card{position:relative;width:min(380px,92vw);text-align:center;overflow:hidden;
    background:radial-gradient(ellipse at 50% 0%,#1d2840,#0b1120 75%);
    border:1px solid var(--gold);border-radius:20px;padding:30px 26px 24px;
    box-shadow:0 28px 80px rgba(0,0,0,.7),0 0 0 1px rgba(212,175,55,.25),0 0 60px rgba(212,175,55,.18);
    transform:scale(.7) translateY(14px);opacity:0;transition:transform .42s cubic-bezier(.2,.9,.25,1.2),opacity .3s ease}
  .prize-ov.show .prize-card{transform:scale(1) translateY(0);opacity:1}
  .pp-shine{position:absolute;top:-60%;left:-40%;width:55%;height:220%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,234,170,.28),transparent);transform:rotate(8deg);
    animation:ppShine 1.5s ease-out .25s both}
  @keyframes ppShine{0%{left:-50%}100%{left:130%}}
  .pp-burst{width:58px;height:58px;margin:0 auto 6px;display:grid;place-items:center;color:#15100a;
    background:radial-gradient(circle,#ffe7a0,#e7b53e);border-radius:50%;box-shadow:0 0 30px rgba(255,216,107,.7);
    animation:ppPop .5s cubic-bezier(.2,.9,.3,1.4) both}
  .pp-burst svg{width:32px;height:32px}
  @keyframes ppPop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
  .pp-title{font-family:'Barlow Condensed';font-weight:700;font-size:24px;letter-spacing:1.5px;color:var(--gold-bright);
    text-shadow:0 0 20px rgba(212,175,55,.6)}
  .pp-quest{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--text);margin:2px 0 16px;opacity:.9}
  .pp-rewards{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
  .pp-reward{display:flex;align-items:center;gap:11px;justify-content:flex-start;
    background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:9px 14px;
    animation:ppRise .45s ease both}
  .pp-reward:nth-child(2){animation-delay:.08s}.pp-reward:nth-child(3){animation-delay:.16s}
  @keyframes ppRise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
  .pp-reward .ppr-ic{width:22px;height:22px;flex-shrink:0}
  .pp-reward .ppr-val{font-family:'Barlow Condensed';font-weight:700;font-size:22px;min-width:74px;text-align:left}
  .pp-reward .ppr-lab{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-left:auto}
  .pp-reward.money .ppr-ic,.pp-reward.money .ppr-val{color:#7dffb4}
  .pp-reward.xp    .ppr-ic,.pp-reward.xp .ppr-val{color:#6fc6ff}
  .pp-reward.fame  .ppr-ic,.pp-reward.fame .ppr-val{color:var(--gold-bright)}
  .pp-bonus{font-family:'Barlow Condensed';font-size:12px;letter-spacing:.5px;color:#ffd86b;margin-bottom:12px}
  .pp-collect{width:100%}
  .qc-ready{color:var(--gold-bright)}
  /* quest-complete toast */
  #toast.quest{background:linear-gradient(180deg,#2a2207,#15110a);border:1px solid var(--gold);color:var(--gold-bright);
    box-shadow:0 14px 40px rgba(212,175,55,.4),inset 0 1px 0 rgba(255,255,255,.1);font-weight:700;letter-spacing:.5px}
  #toast.major{background:linear-gradient(180deg,#3a2c05,#191204);border:1.5px solid var(--gold-bright);color:var(--gold-bright);
    box-shadow:0 18px 54px rgba(212,175,55,.55),inset 0 1px 0 rgba(255,255,255,.18);font-weight:700;letter-spacing:.6px;font-size:15px}
  /* ===== MAJOR quest accordions ===== */
  .major{background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
  .major:last-child{margin-bottom:0}
  .major.open{border-color:var(--gold-dim);box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .major.complete{border-color:rgba(55,196,111,.4)}
  /* GROUP has ready-to-claim rewards inside — glowing header so it's obvious even when collapsed */
  .major.has-claim{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.35),0 0 26px rgba(212,175,55,.26),0 12px 30px rgba(0,0,0,.45)}
  .major.has-claim .major-head{background:linear-gradient(180deg,rgba(212,175,55,.10),transparent)}
  .major.has-claim .mj-name{color:var(--gold-bright)}
  .major.has-claim .mj-ico{background:rgba(212,175,55,.16);border-color:var(--gold);color:var(--gold-bright)}
  .mj-claim-badge{font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
    color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border:1px solid var(--gold-bright);
    border-radius:20px;padding:3px 11px;white-space:nowrap;animation:claimPulse 1.6s ease-in-out infinite}
  @keyframes claimPulse{0%,100%{box-shadow:0 0 9px rgba(247,221,136,.5)}50%{box-shadow:0 0 20px rgba(247,221,136,.95)}}
  .major-head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 15px;background:transparent;border:none;cursor:pointer;text-align:left;color:var(--text);font:inherit}
  .major-head:hover{background:rgba(255,255,255,.025)}
  .mj-ico{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:rgba(212,175,55,.1);border:1px solid var(--gold-dim);color:var(--gold-bright)}
  .major .mj-ico svg{width:21px;height:21px}
  .major.complete .mj-ico{background:rgba(55,196,111,.14);border-color:rgba(55,196,111,.45);color:#7dffb4}
  .mj-info{flex:1;min-width:0}
  .mj-name{font-family:'Barlow Condensed';font-weight:600;font-size:17px;letter-spacing:.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .mj-badge{font-family:'Barlow Condensed';font-size:9px;letter-spacing:1.5px;color:#7dffb4;border:1px solid rgba(55,196,111,.5);background:rgba(55,196,111,.12);border-radius:10px;padding:1px 7px}
  .mj-tag{display:block;font-size:12px;color:var(--muted);margin:1px 0 9px}
  .mj-progwrap{display:flex;align-items:center;gap:9px;max-width:360px}
  .mj-bar{flex:1;height:7px;background:#080d19;border:1px solid var(--line);border-radius:5px;overflow:hidden}
  .mj-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));border-radius:5px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
  .major.complete .mj-bar > i{background:linear-gradient(90deg,#2c8f54,#7dffb4)}
  .mj-count{font-family:'Barlow Condensed';font-size:12px;color:var(--muted);flex-shrink:0;min-width:30px}
  .mj-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0}
  .mj-reward{font-family:'Barlow Condensed';font-size:11.5px;color:var(--gold-bright);background:rgba(212,175,55,.1);border:1px solid var(--gold-dim);border-radius:20px;padding:3px 10px;white-space:nowrap}
  .mj-chevron{color:var(--muted);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:grid;place-items:center}
  .major .mj-chevron svg{width:18px;height:18px}
  .major.open .mj-chevron{transform:rotate(180deg);color:var(--gold-bright)}
  .major-body{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.2,.8,.2,1)}
  .major.open .major-body{max-height:1600px}
  .major-body-inner{padding:0 15px 6px;border-top:1px solid var(--line-soft)}
  .major.mflash{animation:majorFlash 2s ease}
  @keyframes majorFlash{0%,40%{border-color:var(--gold-bright);box-shadow:0 0 0 2px var(--gold),0 0 34px rgba(212,175,55,.55)}100%{border-color:rgba(55,196,111,.4);box-shadow:none}}
  /* shop cards (gyms & coaches) */
  .shop-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
  @media(min-width:680px){ .shop-grid{grid-template-columns:repeat(3,1fr)} }
  .shop-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.18s}
  .shop-card.owned{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-dim),inset 0 0 34px rgba(212,175,55,.07)}
  .shop-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px}
  .shop-name{font-family:'Barlow Condensed';font-weight:700;font-size:16.5px;letter-spacing:.4px;line-height:1.12}
  .shop-cost{font-family:'Barlow Condensed';font-weight:700;color:#7dffb4;font-size:16px;flex-shrink:0}
  .shop-card.owned .shop-cost{color:var(--gold-bright)}
  .shop-story{font-size:13px;color:var(--muted);line-height:1.46;flex:1;margin-bottom:12px}
  .shop-tags{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
  .shop-tags .tag{font-size:12px;line-height:1.32;padding:5px 9px;border-radius:8px}
  .shop-tags .tag.pro{color:#9be9bb;background:rgba(55,196,111,.1);border:1px solid rgba(55,196,111,.28)}
  .shop-tags .tag.con{color:#f0a9ac;background:rgba(232,74,79,.08);border:1px solid rgba(232,74,79,.24)}
  .shop-btn{font-size:14px;padding:12px;margin-top:auto}
  .shop-btn.cant{opacity:.55}
  .shop-owned-tag{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed';font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-bright);margin-bottom:6px}

  /* ---------- Training ---------- */
  .train-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
  .train-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;margin-top:4px}
  .train-card{
    background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:14px;padding:18px 10px;text-align:center;cursor:pointer;transition:.18s;position:relative;overflow:hidden;
  }
  .train-card:hover:not(.disabled){border-color:var(--gold);transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.5)}
  .train-card:active:not(.disabled){transform:translateY(-1px)}
  .train-card.disabled{opacity:.4;cursor:not-allowed}
  .train-card .ti{font-size:28px;margin-bottom:7px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
  .train-card .tn{font-family:'Barlow Condensed';font-weight:600;font-size:15px;letter-spacing:.5px}
  .train-card .tc{font-size:13px;color:var(--muted);margin-top:4px}
  .sessions-left{display:flex;gap:8px;align-items:center}
  /* ===== Energy / Condition / Stamina bars ===== */
  .fighter-bars{display:flex;flex-direction:column;gap:12px}
  .fbar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
  .fbar-lab{font-family:'Barlow Condensed';font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase}
  .fbar-val{font-family:'Barlow Condensed';font-weight:700;font-size:17px}
  .fbar-val small{font-size:11px;color:var(--muted);font-weight:400}
  .fbar-track{height:11px;background:#080d19;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
  .fbar-track > i{display:block;height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
  .fbar-hint{font-size:11px;color:var(--muted);margin-top:4px}
  .fbar-clock{color:#8fb7e8;font-weight:600}
  .fbar-full{color:#43d97e;font-weight:600}
  /* ---- Daily free recovery ---- */
  .daily-refill{margin:0 0 16px}
  .daily-btn{display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px}
  .daily-btn .mmi{font-size:19px}
  .daily-btn:not(.used){background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#15110a;border-color:var(--gold);
    box-shadow:0 6px 18px rgba(212,175,55,.35),inset 0 1px 0 rgba(255,255,255,.5);animation:dailyGlow 1.8s ease-in-out infinite}
  .daily-btn.used{opacity:.7;cursor:default}
  @keyframes dailyGlow{0%,100%{box-shadow:0 6px 18px rgba(212,175,55,.30)}50%{box-shadow:0 6px 26px rgba(212,175,55,.55)}}
  .daily-note{font-size:12px;color:var(--muted);margin-top:7px;text-align:center}
  .daily-note.ready{color:var(--gold-bright)}
  .daily-note b{color:var(--text);font-family:'Barlow Condensed';letter-spacing:.5px}
  .fbar.good .fbar-track > i{background:linear-gradient(90deg,#1f9e55,#43d97e)}
  .fbar.mid  .fbar-track > i{background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright))}
  .fbar.low  .fbar-track > i{background:linear-gradient(90deg,#a83a3e,#ff6b70)}
  .fbar.good .fbar-val{color:#7dffb4}.fbar.mid .fbar-val{color:var(--gold-bright)}.fbar.low .fbar-val{color:#ff9da0}
  .sharp-note{font-family:'Barlow Condensed';font-size:12px;letter-spacing:.5px;color:var(--gold-bright);background:rgba(212,175,55,.08);
    border:1px solid var(--gold-dim);border-radius:9px;padding:8px 11px;margin-top:2px}
  /* intensity selector */
  .intensity-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
  @media(max-width:560px){ .intensity-row{grid-template-columns:repeat(3,1fr)} }
  .int-btn{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;background:linear-gradient(180deg,#0d1730,#080d19);
    border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--text);transition:.15s}
  .int-btn:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
  .int-btn.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-dim),inset 0 0 24px rgba(212,175,55,.08)}
  .int-btn.cant{opacity:.45}
  .int-btn .int-name{font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.5px}
  .int-btn .int-cost{font-family:'Barlow Condensed';font-size:12px;color:var(--gold-bright)}
  .int-btn .int-desc{font-size:11px;color:var(--muted);line-height:1.25}

  /* ===== Activity-based training (STEP 1 intensity → STEP 2 activity → preview) ===== */
  .train-step-lab{display:flex;align-items:center;gap:9px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;
    letter-spacing:2px;text-transform:uppercase;color:var(--gold-bright);margin:18px 0 10px}
  .train-step-lab:first-of-type{margin-top:8px}
  .train-step-lab .tsl-num{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;
    font-size:13px;color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 12px rgba(212,175,55,.4)}
  .act-group{margin-bottom:14px}
  .act-group-head{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed';font-weight:600;font-size:11px;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .act-group-head .agh-ico{width:16px;height:16px;color:var(--gold-dim)}
  .act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px}
  .act-card{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;color:var(--text);
    background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:11px;padding:11px 12px;transition:.15s}
  .act-card:hover{border-color:var(--gold-dim);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
  .act-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-dim),inset 0 0 22px rgba(212,175,55,.10)}
  .act-card .ac-name{font-family:'Barlow Condensed';font-weight:600;font-size:14.5px;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
  .act-card .ac-flags{display:inline-flex;gap:3px;margin-left:auto}
  .ac-flag{font-size:11px;line-height:1}.ac-flag.sharp{color:var(--gold-bright)}.ac-flag.risk{color:#ff8b6b}
  .act-card .ac-stat{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:#9be9bb}
  .act-card .ac-stat b{color:#bff5d3}
  .act-card .ac-sec{color:var(--muted);font-weight:500}
  .act-card .ac-stat.recov{color:#6fc6ff}

  /* session preview card + TRAIN NOW */
  .sess-empty{font-size:12.5px;color:var(--muted);text-align:center;padding:14px;border:1px dashed var(--line);border-radius:12px;margin-top:4px}
  .sess-card{margin-top:6px;border:1px solid var(--gold-dim);border-radius:14px;padding:15px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.07),transparent 70%),linear-gradient(180deg,#121a2e,#0b1120);
    box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 22px rgba(212,175,55,.12)}
  .sess-card.lowE{border-color:#a13b3b}
  .sess-head{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
  .sess-head .sess-act{font-family:'Barlow Condensed';font-weight:700;font-size:18px;letter-spacing:.4px;color:#fff}
  .sess-head .sess-int{margin-left:auto;font-family:'Barlow Condensed';font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-bright)}
  .sess-desc{font-size:12px;color:var(--muted);margin-bottom:11px}
  .sess-costs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
  .sc-pill{font-family:'Barlow Condensed';font-size:11px;letter-spacing:.4px;border-radius:20px;padding:3px 10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)}
  .sc-pill.energy{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.08)}
  .sc-pill.energy.bad{color:#ff8b8b;border-color:#a13b3b;background:rgba(161,59,59,.14)}
  .sc-pill.cond{color:#ff9da0}.sc-pill.cond.ok{color:var(--muted)}.sc-pill.cond.gain{color:#7dffb4;border-color:rgba(55,196,111,.4)}
  .sc-pill.sharp{color:var(--gold-bright);border-color:var(--gold-dim)}
  .sc-pill.risk{color:#ff8b6b;border-color:rgba(255,139,107,.4);background:rgba(255,139,107,.08)}
  .sess-gains{background:rgba(0,0,0,.22);border:1px solid var(--line-soft);border-radius:11px;padding:10px 12px;margin-bottom:13px}
  .sess-gains .sg-lab{font-family:'Barlow Condensed';font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
  .sg-list{display:flex;flex-direction:column;gap:5px}
  .sg-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sg-row .sg-stat{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--text)}
  .sg-row .sg-stat em{font-style:normal;font-family:'Barlow Condensed';font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-left:5px}
  .sg-amt{font-family:'Barlow Condensed';font-weight:700;font-size:15px}
  .sg-amt.prim{color:#7dffb4}.sg-amt.sec{color:#9be9bb}.sg-amt.cap{color:var(--muted)}.sg-amt.none{color:#6fc6ff;font-size:12px}
  .btn.sess-train{font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:1.5px;padding:13px}
  /* recovery cards */
  .recovery-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px}
  @media(min-width:620px){ .recovery-grid{grid-template-columns:1fr 1fr} }
  .rec-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:13px;padding:14px}
  .rec-card.cant{opacity:.7}
  .rec-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  .rec-head .rec-ico{color:var(--gold-bright);font-size:18px}
  .rec-head .rec-name{font-family:'Barlow Condensed';font-weight:700;font-size:16px;flex:1}
  .rec-head .rec-cost{font-family:'Barlow Condensed';font-weight:700;color:#7dffb4;font-size:15px}
  .rec-desc{font-size:12.5px;color:var(--muted);line-height:1.4;flex:1;margin-bottom:8px}
  .rec-eff{font-family:'Barlow Condensed';font-size:11.5px;letter-spacing:.5px;color:#9be9bb;margin-bottom:11px}
  .rec-btn{font-size:13px;padding:10px}.rec-btn.cant{opacity:.6}
  /* Rest cooldown: greyed, non-clickable button with a live countdown */
  .rec-card.on-cooldown{opacity:.82}
  .rec-card.on-cooldown .rec-cost{color:var(--muted)}
  .rec-btn.cooldown{font-family:'Barlow Condensed';font-weight:600;letter-spacing:.5px;color:var(--gold-dim);
    background:rgba(212,175,55,.06);border:1px solid var(--gold-dim);cursor:not-allowed;opacity:1}
  .rec-btn.cooldown .rec-cd-ic{margin-right:3px;filter:grayscale(.2)}
  /* fight readiness warning */
  .fight-warn{margin-top:12px;background:rgba(232,74,79,.1);border:1px solid rgba(232,74,79,.4);border-radius:11px;
    padding:11px 14px;font-size:13.5px;color:#ffc2c4;line-height:1.45}
  .fight-warn b{color:#ff9da0}
  /* fighter-creation inline validation message */
  .create-msg{margin-top:14px;background:rgba(232,74,79,.1);border:1px solid rgba(232,74,79,.45);border-radius:11px;
    padding:11px 14px;font-family:'Inter';font-weight:600;font-size:14px;letter-spacing:.3px;color:#ffc2c4;text-align:center}
  .create-msg.hidden{display:none}
  .fight-warn.danger{background:linear-gradient(180deg,rgba(232,40,46,.22),rgba(120,16,20,.18));border:1.5px solid rgba(255,70,76,.7);
    box-shadow:0 0 22px rgba(232,40,46,.28),inset 0 1px 0 rgba(255,255,255,.06);animation:warnPulse 1.4s ease-in-out infinite}
  .fight-warn.danger .fw-head{font-family:'Barlow Condensed';font-weight:700;letter-spacing:1.5px;font-size:14px;color:#ff7a7e;margin-bottom:5px}
  .fight-warn.danger .fw-body{color:#ffd2d4;font-size:13.5px;line-height:1.5}
  @keyframes warnPulse{0%,100%{border-color:rgba(255,70,76,.55);box-shadow:0 0 16px rgba(232,40,46,.20)}50%{border-color:rgba(255,90,96,.95);box-shadow:0 0 30px rgba(232,40,46,.45)}}
  .fight-ready{margin-top:12px;background:rgba(55,196,111,.08);border:1px solid rgba(55,196,111,.35);border-radius:11px;
    padding:11px 14px;font-size:13.5px;color:#9be9bb}
  .dot{width:14px;height:14px;border-radius:50%;background:#080d19;border:1px solid var(--line);transition:.3s}
  .dot.full{background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold));border-color:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.65)}
  /* reward points (earned by winning) */
  .points-badge{display:flex;align-items:baseline;gap:5px;font-family:'Barlow Condensed';background:rgba(212,175,55,.1);
    border:1px solid var(--gold-dim);border-radius:20px;padding:5px 14px;flex-shrink:0}
  .points-badge b{font-size:22px;font-weight:700;color:var(--gold-bright);line-height:1}
  .points-badge span{font-size:10px;letter-spacing:2px;color:var(--muted)}
  #cardPoints.has-points{border-color:var(--gold-dim);box-shadow:inset 0 0 30px rgba(212,175,55,.06),0 14px 34px rgba(212,175,55,.12)}
  #cardPoints.has-points .points-badge{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  #cardPoints.has-points .points-badge b{color:#1a1305}
  #cardPoints.has-points .points-badge span{color:#3a2e0a}

  /* ---------- Ladder ---------- */
  .ladder{display:flex;flex-direction:column;margin-top:6px}
  .rung{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;border:1px solid transparent;position:relative;transition:.2s}
  .rung .rdot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:16px;background:#080d19;border:1px solid var(--line);color:var(--muted);flex-shrink:0;z-index:2;transition:.3s}
  .rung .rinfo{flex:1}
  .rung .rname{font-family:'Barlow Condensed';font-weight:600;font-size:18px;letter-spacing:.5px}
  .rung .rsub{font-size:12px;color:var(--muted)}
  .rung.done .rdot{background:linear-gradient(145deg,#43d97e,#1f9e55);border-color:var(--green);color:#06210f;box-shadow:0 0 14px rgba(55,196,111,.4)}
  .rung.done .rname{color:#bdf0cf}
  .rung.current{background:linear-gradient(90deg,rgba(212,175,55,.14),rgba(212,175,55,.01));border-color:var(--gold-dim);box-shadow:inset 0 0 30px rgba(212,175,55,.05)}
  .rung.current .rdot{background:linear-gradient(145deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:#15110a;box-shadow:0 0 18px rgba(212,175,55,.6);animation:pulseDot 2s ease-in-out infinite}
  @keyframes pulseDot{0%,100%{box-shadow:0 0 14px rgba(212,175,55,.5)}50%{box-shadow:0 0 24px rgba(212,175,55,.9)}}
  .rung.current .rname{color:var(--gold-bright)}
  .rung.locked{opacity:.4}
  .rung .connector{position:absolute;left:32px;top:52px;width:2px;height:18px;background:var(--line);z-index:1}
  .rung.done .connector{background:linear-gradient(180deg,var(--green),var(--line))}

  /* ---------- Opponent card ---------- */
  .opp-card{background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  /* ARC 1 — venue + story framing on the fight card */
  .venue-banner{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;padding:7px 12px;border-radius:10px;background:linear-gradient(90deg,#141a10,#0c0f08);border:1px solid #2a3320;border-left:3px solid #6f7d4a}
  .venue-banner.streets{background:linear-gradient(90deg,#1a1410,#0f0b08);border-color:#3a2c20;border-left-color:#a8702f}
  .venue-banner .vb-ico{width:16px;height:16px;display:grid;place-items:center;color:#c9a15a}.venue-banner .vb-ico svg{width:15px;height:15px}
  .venue-banner .vb-name{font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#e9ddc4}
  .venue-banner .vb-tier{margin-left:auto;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
  .story-banner{margin:0 0 14px;padding:10px 13px;border-radius:11px;background:linear-gradient(180deg,#1a1206,#0e0a05);border:1px solid #4a3414}
  .story-banner .sb-tag{display:inline-block;font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;letter-spacing:2px;color:var(--gold-bright);margin-bottom:5px}
  .story-banner .sb-blurb{display:block;font-size:13px;line-height:1.4;color:#d8cdb8;font-style:italic}
  .story-banner.boss{border-color:#7a1e22;background:linear-gradient(180deg,#21080a,#120606);box-shadow:0 0 24px rgba(180,40,46,.18)}
  .story-banner.boss .sb-tag{color:#ff6065;animation:bossPulse 1.8s ease-in-out infinite}
  @keyframes bossPulse{0%,100%{opacity:.7}50%{opacity:1;text-shadow:0 0 12px rgba(255,96,101,.7)}}
  /* M12 — THE NATIONAL CIRCUIT (Amateur League): clean, official, blue/silver/white — a deliberate contrast to the gritty Colosseum */
  .venue-banner.national{background:linear-gradient(90deg,#0e1828,#0a1016);border-color:#2c3f5c;border-left-color:#5a8be0}
  .venue-banner.national .vb-name{color:#dce8f6}
  .venue-banner.national .vb-ico{color:#7fa9e6}
  .venue-banner.national .vb-tier{color:#8aa6c8}
  .story-banner.national{border:1px solid #2c4060;background:linear-gradient(180deg,#0f1a2a,#0a1018)}
  .story-banner.national .sb-tag{color:#a9c6ee}
  .story-banner.national .sb-blurb{color:#c4d3e6}
  .story-banner.boss.national{border-color:#3a5f93;background:linear-gradient(180deg,#10243f,#0a141f);box-shadow:0 0 24px rgba(90,139,224,.20)}
  .story-banner.boss.national .sb-tag{color:#bcd6ff;animation:natlPulse 1.8s ease-in-out infinite}
  @keyframes natlPulse{0%,100%{opacity:.75}50%{opacity:1;text-shadow:0 0 12px rgba(140,180,255,.65)}}
  .si-card.si-amateur .si-kicker{color:#9fc0ef}
  .si-card.si-amateur.si-boss .si-kicker{color:#cfe0ff;text-shadow:0 0 18px rgba(120,165,240,.5)}
  .arena-card.arena-tier-2{border-color:#5a8be0}.arena-card.arena-tier-2 .ac-loc{color:#9fc0ef}
  .story-waiting{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:9px 12px;border-radius:10px;background:rgba(212,175,55,.06);border:1px dashed var(--gold-dim)}
  .story-waiting .sw-txt{flex:1;font-size:12.5px;color:#d8cdb8}
  .story-waiting .sw-btn{padding:7px 12px;font-size:12px}
  .corner.story .covr{color:#ffcf6a}.corner.boss .covr{color:#ff6065;text-shadow:0 0 20px rgba(255,96,101,.45)}
  .corner.boss .cn{color:#ff8a8e}
  /* CAREER ARC — roadmap of named opponents */
  .arc-road{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:2px 0 10px}
  .rm-node{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;padding:7px 4px;border-radius:9px;border:1px solid #232d49;background:#0c1322}
  .rm-node .rm-ic{width:17px;height:17px;display:grid;place-items:center;color:#5e6f93}.rm-node .rm-ic svg{width:15px;height:15px}
  .rm-node .rm-nm{font-family:'Barlow Condensed';font-weight:600;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#8294b4}
  .rm-node .rm-lv{font-size:8.5px;color:var(--muted)}
  .rm-link{flex:1 1 8px;min-width:6px;height:2px;background:#1c2740;border-radius:2px}
  .rm-node.open{border-color:#3b4a6e}
  .rm-node.cur{border-color:var(--gold-bright);box-shadow:0 0 0 1px rgba(212,175,55,.4),0 0 12px rgba(212,175,55,.25)}
  .rm-node.cur .rm-ic,.rm-node.cur .rm-nm{color:var(--gold-bright)}
  .rm-node.done{border-color:var(--gold);background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(212,175,55,.03))}
  .rm-node.done .rm-ic,.rm-node.done .rm-nm{color:#f3e6bd}
  .rm-node.lock{opacity:.45}
  .rm-node.boss{min-width:58px}.rm-node.boss .rm-nm{color:#ff8a8e}
  .rm-node.boss.cur{border-color:#ff6065;box-shadow:0 0 0 1px rgba(255,96,101,.45),0 0 14px rgba(255,96,101,.3)}
  .rm-node.boss.done{border-color:#ff6065;background:linear-gradient(180deg,rgba(255,96,101,.16),rgba(255,96,101,.03))}
  .arc-banner{font-size:12px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:9px;padding:8px 11px;margin-bottom:12px}
  .arc-banner.done{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.08);font-family:'Barlow Condensed';letter-spacing:.5px}
  /* named/boss career fight card */
  .cf-opp{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;background:linear-gradient(180deg,#0d1426,#080d19);border:1px solid var(--line);margin-bottom:12px}
  .cf-opp.boss{border-color:#7a1e22;background:linear-gradient(180deg,#1a0b0d,#0c0708)}
  .cf-opp .cav{width:74px;flex:0 0 auto;margin:0}
  .cf-info{flex:1;min-width:0}
  .cf-name{font-family:'Barlow Condensed';font-weight:700;font-size:19px;line-height:1.1}
  .cf-opp.boss .cf-name{color:#ff8a8e}
  .cf-sub{font-size:12px;color:var(--muted);margin:3px 0 7px}
  .cf-stat{display:flex;gap:12px;font-family:'Barlow Condensed';font-weight:700}
  .cf-ovr{color:var(--gold-bright);font-size:17px}.cf-win{color:#9cc0ff;font-size:14px;align-self:center}
  /* PICK 1 OF 3 */
  .pick-head{font-family:'Barlow Condensed';font-size:12px;letter-spacing:1.5px;color:var(--gold-bright);margin:2px 0 10px;text-transform:uppercase}
  .pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px}
  .pick-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 10px;border-radius:13px;
    background:linear-gradient(180deg,#0d1426,#080d19);border:1px solid var(--line);transition:transform .12s,border-color .15s,box-shadow .2s}
  .pick-card:hover{transform:translateY(-3px);border-color:var(--gold-dim);box-shadow:0 12px 26px rgba(0,0,0,.45)}
  .pick-card .pk-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:8px}
  .pick-card .pk-style{font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9cc0ff}
  .pick-card .pk-ovr{font-family:'Barlow Condensed';font-weight:700;font-size:13px;color:var(--gold-bright)}
  .pick-card .cav{width:78px;margin:0 0 8px}
  .pick-card .pk-name{font-family:'Barlow Condensed';font-weight:700;font-size:15px;line-height:1.1}
  .pick-card .pk-bio{font-size:11px;color:var(--gold-bright);opacity:.85;font-style:italic;line-height:1.3;margin:4px 0 7px;min-height:28px}
  .pick-card .pk-win{font-size:12px;color:var(--muted);margin-bottom:9px}.pick-card .pk-win b{color:#cfe0ff}
  .pick-card .pk-btn{width:100%;padding:8px}
  .arc-ready{margin-top:12px;font-size:11.5px;color:var(--muted);text-align:center}.arc-ready b{color:var(--gold-bright)}
  /* CAREER MATCHUP — centered, big, premium fight-game pick screen */
  .pickx-head{text-align:center;font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:2px;color:var(--gold-bright);text-transform:uppercase;margin:6px 0 13px}
  .pickx-head span{display:block;font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:none;font-weight:400;margin-top:2px}
  .match-stage{display:flex;justify-content:center;align-items:stretch;gap:14px;flex-wrap:wrap;margin:4px 0 18px}
  .opp-x{position:relative;width:218px;max-width:88vw;display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:18px 14px 15px;border-radius:16px;cursor:pointer;
    background:linear-gradient(180deg,#111a2e,#080d18);border:1.5px solid #28324e;
    transition:transform .15s,border-color .2s,box-shadow .25s}
  .match-stage.pick .opp-x:hover{transform:translateY(-4px);border-color:var(--gold-dim)}
  .opp-x.sel{border-color:var(--gold-bright);box-shadow:0 0 0 2px rgba(212,175,55,.35),0 18px 40px rgba(0,0,0,.55),inset 0 0 42px rgba(212,175,55,.06);transform:translateY(-4px)}
  .opp-x.boss{width:320px;cursor:default;border-color:#7a1e22;background:linear-gradient(180deg,#220a0c,#0c0708)}
  .opp-x.boss.sel{box-shadow:0 0 0 2px rgba(255,96,101,.4),0 22px 52px rgba(0,0,0,.6),inset 0 0 54px rgba(180,40,46,.12)}
  .ox-ribbon{font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:2px;padding:3px 12px;border-radius:20px;margin-bottom:10px;color:#9fb0d0;background:rgba(255,255,255,.05);border:1px solid var(--line-soft)}
  .ox-ribbon.story{color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  .ox-ribbon.boss{color:#ff6065;background:rgba(255,96,101,.1);border-color:#7a1e22}
  .opp-x .ox-av{width:118px;margin:0 0 4px}
  .opp-x.boss .ox-av{width:150px}
  .ox-ovr{font-family:'Barlow Condensed';font-weight:700;font-size:34px;line-height:.9;color:var(--gold-bright);text-shadow:0 0 18px rgba(212,175,55,.35)}
  .ox-ovr span{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);text-shadow:none;margin-top:1px}
  .opp-x.boss .ox-ovr{font-size:42px;color:#ff8a8e;text-shadow:0 0 18px rgba(255,96,101,.4)}
  .ox-name{font-family:'Barlow Condensed';font-weight:700;font-size:18px;line-height:1.12;margin-top:9px}
  .opp-x.boss .ox-name{font-size:23px;color:#ff9a9e}
  .ox-name .nkn{color:var(--gold);font-style:italic;font-weight:600}
  .opp-x.boss .ox-name .nkn{color:#ffb36a}
  .ox-rec{display:inline-block;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:1px;color:#cfe0ff;background:rgba(120,150,210,.12);border:1px solid #2c3a5c;border-radius:7px;padding:2px 11px;margin-top:8px}
  .ox-rec.boss{color:#ff9a9e;background:rgba(255,96,101,.12);border-color:#7a1e22}
  .ox-meta{display:flex;gap:11px;justify-content:center;align-items:center;margin-top:10px;font-family:'Barlow Condensed'}
  .ox-style{font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9cc0ff}
  .ox-win{font-weight:700;font-size:12px;color:#5fd38a}
  .ox-flavor{font-size:11px;color:var(--muted);margin-top:7px;font-style:italic}
  .ox-bio{font-size:11px;color:#cdbb8e;line-height:1.3;margin-top:6px;min-height:28px}
  .walk-btn{display:block;width:100%;max-width:380px;margin:2px auto 0;font-size:16px;letter-spacing:2px}
  /* YOUR corner — current stamina-adjusted OVR + fatigue state */
  .match-you{display:flex;align-items:center;gap:13px;margin:4px 0 12px;padding:11px 13px;border-radius:13px;
    background:linear-gradient(180deg,#0e1830,#080d18);border:1px solid #28324e;border-left:3px solid #6a99ec}
  .match-you.tired{border-left-color:#f0b84a}
  .match-you.depleted{border-left-color:#ff6b5b;background:linear-gradient(180deg,#1c1216,#0a0708)}
  .match-you .my-av{width:58px;flex:0 0 auto;margin:0}
  .match-you .my-mid{flex:1;min-width:0}
  .my-name{font-family:'Barlow Condensed';font-weight:700;font-size:15px;line-height:1.2}
  .my-name .my-rec{font-size:12.5px;color:#cfe0ff;background:rgba(120,150,210,.12);border:1px solid #2c3a5c;border-radius:6px;padding:1px 7px;font-weight:600}
  .my-statline{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:6px}
  .my-stat{font-family:'Barlow Condensed';font-size:11px;letter-spacing:.5px;color:var(--muted)}
  .my-stat b{color:#cfe0ff;font-size:13px;margin-right:2px}
  .my-ovrbox{flex:0 0 auto;text-align:center;min-width:66px}
  .my-ovr{font-family:'Barlow Condensed';font-weight:700;font-size:34px;line-height:.9;color:var(--gold-bright);text-shadow:0 0 16px rgba(212,175,55,.35)}
  .my-ovr.tired{color:#f0b84a;text-shadow:0 0 16px rgba(240,184,74,.4)}
  .my-ovr.depleted{color:#ff6b5b;text-shadow:0 0 16px rgba(255,107,91,.45)}
  .my-ovr-lab{font-family:'Barlow Condensed';font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:1px}
  .my-fat{font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:.5px;margin-top:5px;padding:2px 7px;border-radius:20px;display:inline-block}
  .my-fat.fresh{color:#5fd38a;background:rgba(95,211,138,.12);border:1px solid rgba(95,211,138,.35)}
  .my-fat.tired{color:#f0b84a;background:rgba(240,184,74,.12);border:1px solid rgba(240,184,74,.4)}
  .my-fat.depleted{color:#ff6b5b;background:rgba(255,107,91,.14);border:1px solid rgba(255,107,91,.45)}
  /* big low-stamina warning */
  .depleted-warn{display:flex;align-items:flex-start;gap:11px;margin:0 0 13px;padding:10px 13px;border-radius:11px;
    background:rgba(240,184,74,.08);border:1px solid rgba(240,184,74,.4)}
  .depleted-warn .dw-ico{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;color:#f0b84a;margin-top:1px}
  .depleted-warn .dw-ico svg{width:19px;height:19px}
  .depleted-warn .dw-txt{font-size:12px;color:#e7dcc4;line-height:1.45}
  .depleted-warn.big{gap:13px;padding:14px 16px;background:linear-gradient(180deg,rgba(255,80,70,.16),rgba(255,80,70,.06));
    border:1.5px solid #ff5046;box-shadow:0 0 22px rgba(255,80,70,.2);animation:bossPulse 1.8s ease-in-out infinite}
  .depleted-warn.big .dw-ico{width:26px;height:26px;color:#ff7060}.depleted-warn.big .dw-ico svg{width:25px;height:25px}
  .depleted-warn.big .dw-head{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:1px;color:#ff8a7a;margin-bottom:3px}
  .depleted-warn.big .dw-txt{font-size:13px;color:#f3d9d2}
  .vs-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
  .corner{text-align:center}
  .corner .cav{width:108px;margin:0 auto 12px}
  .corner .cn{font-family:'Barlow Condensed';font-size:21px;font-weight:700;line-height:1.05}
  .corner .cnick{color:var(--gold);font-style:italic;font-size:14px;margin:3px 0}
  .corner .crec{font-size:13px;color:var(--muted)}
  .corner .covr{font-family:'Barlow Condensed';font-size:42px;font-weight:700;color:var(--gold-bright);margin-top:6px;line-height:1;text-shadow:0 0 20px rgba(212,175,55,.35)}
  .corner.you .covr{color:#9cc0ff;text-shadow:0 0 20px rgba(90,139,224,.4)}
  .corner-tag{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .corner.you .corner-tag{color:#9cc0ff}
  .corner:not(.you) .corner-tag{color:#f08185}
  .vs-badge{font-family:'Barlow Condensed';font-size:34px;font-weight:700;color:var(--gold);text-shadow:0 0 22px rgba(212,175,55,.5);position:relative}
  .odds-wrap{text-align:center;margin-top:4px}
  .odds-track{height:14px;border-radius:8px;overflow:hidden;display:flex;border:1px solid var(--line);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
  .odds-track .you-fill{background:linear-gradient(90deg,#2f5aa8,#5a8be0);transition:width .8s cubic-bezier(.2,.8,.2,1)}
  .odds-track .opp-fill{background:linear-gradient(90deg,#e2484d,#a83a3e);flex:1;transition:.8s}
  .odds-labels{display:flex;justify-content:space-between;margin-top:7px;font-family:'Barlow Condensed';font-size:15px}
  .odds-labels .you-pct{color:#9cc0ff}.odds-labels .opp-pct{color:#f08185}

  /* ---------- Fight Overlay ---------- */
  /* FULL-SCREEN FIGHT — the owner's packed-arena art fills the WHOLE screen behind the fight (so the
     sides are crowd, not black bands — like a real fight game); the HUD/cage/feed sit composed on top. */
  .fight-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;
    background:
      radial-gradient(circle at 50% 32%, rgba(10,14,28,.66), rgba(3,5,11,.90) 78%),
      url(../images/bg_fight.jpg?v=260) center center / cover no-repeat;
    opacity:0;transition:opacity .4s;overflow-y:auto}
  .fight-overlay.show{display:flex;opacity:1}
  .fight-overlay.result-mode{align-items:flex-start}
  .fo-inner{width:100%;max-width:min(940px,96vw);position:relative}

  /* live status bar (always shows the round + a broadcast "LIVE" bug) */
  .fo-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
    font-family:'Barlow Condensed';letter-spacing:2px;font-size:12px;text-transform:uppercase;color:var(--muted)}
  .fo-status .live{display:inline-flex;align-items:center;gap:6px;color:#ff7479;font-weight:600}
  .fo-status .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4d52;
    box-shadow:0 0 8px #ff4d52;animation:livePulse 1.1s ease-in-out infinite}
  @keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
  .fo-status .roundchip{color:var(--gold-bright);font-weight:700}
  /* cinematic vignette over the cage */
  .fo-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:18px;
    box-shadow:inset 0 0 120px 24px rgba(0,0,0,.75);background:radial-gradient(circle at 50% 38%, transparent 52%, rgba(0,0,0,.45))}
  /* stylized referee standing between the fighters, in the open centre of the cage */
  .fo-arena > .ref-figure{position:absolute;left:50%;top:30px;width:32px;height:auto;z-index:3;
    pointer-events:none;opacity:.96;filter:drop-shadow(0 4px 8px rgba(0,0,0,.65));
    transform-origin:bottom center;animation:refSway 4.6s ease-in-out infinite}
  @keyframes refSway{0%,100%{transform:translateX(-66%)}50%{transform:translateX(-34%)}}
  @media (max-width:560px){ .fo-arena > .ref-figure{width:26px;top:24px} }
  /* low-health heartbeat on the bars */
  .fo-hbar.low > span{animation:hpDanger .85s ease-in-out infinite}
  @keyframes hpDanger{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5) saturate(1.4)}}
  /* dramatic finish banner colours */
  .round-banner.ko{color:#ff8a6a;text-shadow:0 0 46px rgba(255,90,60,.9)}
  .round-banner.sub{color:#9cc0ff;text-shadow:0 0 46px rgba(106,153,236,.9)}
  .round-banner.dec{color:#e9d28a;text-shadow:0 0 40px rgba(212,175,55,.7)}
  /* in-feed referee verdict — the big call before the report */
  .feed .ln.verdict{font-family:'Barlow Condensed';font-weight:700;letter-spacing:1px;font-size:18px;color:#fff;
    border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);padding:11px 0;margin-top:4px;
    background:linear-gradient(90deg,transparent,rgba(212,175,55,.12),transparent);text-align:center;animation:hypePop .45s ease}
  .feed .ln.verdict.win b{color:#5fe89a}.feed .ln.verdict.loss b{color:#ff7479}
  .feed .ln.ref{color:#ffcf6e;font-style:italic;text-align:center}

  /* entrance */
  .fo-entrance{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;text-align:center}
  .fo-entrance .ent-corner{opacity:0}
  .fo-entrance .ent-corner.left{animation:slideL .6s cubic-bezier(.2,.8,.2,1) .1s both}
  .fo-entrance .ent-corner.right{animation:slideR .6s cubic-bezier(.2,.8,.2,1) .1s both}
  @keyframes slideL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
  @keyframes slideR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
  .fo-entrance .ent-av{width:150px;aspect-ratio:1;margin:0 auto 10px;overflow:hidden}
  .fo-entrance .ent-name{font-family:'Barlow Condensed';font-size:24px;font-weight:700;line-height:1.05}
  .fo-entrance .ent-nick{color:var(--gold);font-style:italic;font-size:15px;margin:3px 0}
  .fo-entrance .ent-ovr{font-family:'Barlow Condensed';font-size:46px;font-weight:700;color:var(--gold-bright);line-height:1;text-shadow:0 0 22px rgba(212,175,55,.4)}
  .fo-entrance .ent-vs{font-family:'Barlow Condensed';font-size:48px;font-weight:700;color:var(--gold);text-shadow:0 0 30px rgba(212,175,55,.7);animation:vsPop .5s .3s both}
  @keyframes vsPop{from{opacity:0;transform:scale(.3) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
  .fo-entrance .ent-tier{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:6px}

  /* arena */
  .fo-arena{position:relative}
  .fo-bars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
  .fo-fighter{display:flex;align-items:center;gap:9px}
  .fo-fighter.opp{flex-direction:row-reverse;text-align:right}
  .fo-fighter .fav{width:82px;flex-shrink:0;border-radius:10px;transition:.15s}
  .fo-fighter .fav.fight-face{height:82px;overflow:hidden}
  @media(max-width:560px){ .fo-fighter .fav{width:66px} .fo-fighter .fav.fight-face{height:66px} }
  .fo-fighter.hurt .fav{animation:hurt .4s}
  @keyframes hurt{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  /* fresh face damage just landed — brief flash + flinch as the portrait swaps to a worse one */
  .fo-fighter .fav.face-worse{animation:faceWorse .7s ease-out}
  /* SUBTLER: a soft fade when the face marks up mid-fight — no bright flash / scale pop (owner found it distracting) */
  @keyframes faceWorse{0%{filter:brightness(1.22) saturate(1.08)}100%{filter:none}}
  .fo-fighter .fmeta{flex:1;min-width:0}
  .fo-fighter .fnm{font-family:'Barlow Condensed';font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fo-hbar{height:15px;background:#080d19;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:5px;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
  .fo-hbar > span{display:block;height:100%;border-radius:8px;transition:width .55s ease}
  .fo-fighter.you .fo-hbar > span{background:linear-gradient(90deg,#2f5aa8,#6a99ec)}
  .fo-fighter.opp .fo-hbar > span{background:linear-gradient(90deg,#e2484d,#a83a3e)}
  .fo-hp{font-family:'Barlow Condensed';font-size:12px;color:var(--muted);margin-top:3px}
  /* HEAD / BODY / LEGS zone bars (Stage-1 engine — replaces the single HP bar) */
  .zoneset{display:flex;flex-direction:column;gap:2px;margin-top:3px}
  .zrow{display:flex;align-items:center;gap:7px}
  .fo-fighter.opp .zrow{flex-direction:row-reverse}
  .zlab{flex:0 0 32px;font-family:'Barlow Condensed';font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--muted)}
  .fo-fighter.opp .zlab{text-align:right}
  .zbar{flex:1;height:8px;background:#080d19;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
  .zbar > i{display:block;height:100%;border-radius:6px;width:100%;transition:width .45s ease}
  .fo-fighter.you .zbar > i{background:linear-gradient(90deg,#2f5aa8,#6a99ec)}
  .fo-fighter.opp .zbar > i{background:linear-gradient(90deg,#e2484d,#a83a3e)}
  .zbar.low > i{background:linear-gradient(90deg,#b8862a,#f0b84a)!important}
  .zbar.crit > i{background:linear-gradient(90deg,#c0392b,#ff6b5b)!important;animation:hpDanger .8s ease-in-out infinite}
  /* small zone icon next to each bar */
  .zrow .zico{flex:0 0 15px;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold-dim);opacity:.85}
  .zrow .zico svg{width:14px;height:14px}
  .fo-fighter .zrow .zlab{flex:0 0 30px}
  /* GAS tank — in-fight stamina, separated from the health zones and coloured teal (endurance) */
  .zrow.gasrow{margin-top:3px;padding-top:4px;border-top:1px dashed var(--line-soft)}
  .zrow.gasrow .zico{color:#3fd6a0;opacity:.95}
  .zrow.gasrow .zlab{color:#86d3b8}
  .gasbar{flex:1;height:8px;background:#080d19;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
  .gasbar > i{display:block;height:100%;border-radius:6px;width:100%;background:linear-gradient(90deg,#1f8a6b,#3fd6a0);transition:width .4s ease}
  .gasbar.low > i{background:linear-gradient(90deg,#b8862a,#f0b84a)}
  .gasbar.crit > i{background:linear-gradient(90deg,#c0392b,#ff6b5b);animation:hpDanger .8s ease-in-out infinite}
  /* STANDING / GROUND position indicator */
  .fo-pos{text-align:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;
    padding:4px 0;margin:0 0 9px;border-radius:8px;background:rgba(120,150,210,.08);border:1px solid var(--line-soft);color:#9cc0ff}
  .fo-pos.ground{background:rgba(232,74,79,.1);border-color:#5a2a2c;color:#ffb38a}
  .fo-pos.ground.youtop{background:rgba(106,153,236,.12);border-color:#2c3a5c;color:#9cc0ff}
  .fo-pos b{color:#fff}
  /* momentum tier colour */
  .fo-momentum .molab.tier1{color:#cfe0ff}
  .fo-momentum .molab.tier2{color:var(--gold-bright)}
  .fo-momentum .molab.tier3{color:#ff8a6a;text-shadow:0 0 10px rgba(255,90,60,.6)}

  .round-banner{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.6);
    font-family:'Barlow Condensed';font-weight:700;font-size:64px;letter-spacing:4px;color:var(--gold-bright);
    text-shadow:0 0 40px rgba(212,175,55,.8);opacity:0;pointer-events:none;z-index:6;white-space:nowrap}
  .round-banner.show{animation:roundIn 1s ease both}
  @keyframes roundIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
    25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    75%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}

  .fo-feedwrap{background:rgba(5,8,15,.78);backdrop-filter:blur(2px);border:1px solid rgba(120,140,180,.22);border-radius:14px;padding:12px 16px;height:160px;overflow-y:auto;box-shadow:inset 0 4px 14px rgba(0,0,0,.55)}
  /* ===== 2D fight stage (Mission 1: static face-off) ===== */
  .fo-stage{position:relative;z-index:6;height:230px;margin-bottom:10px;border-radius:14px;overflow:hidden;
    border:1px solid rgba(212,175,55,.28);
    background:
      linear-gradient(180deg, rgba(8,10,18,.40), rgba(8,10,18,.58)),
      url(../images/matchup.jpg?v=231) center/cover no-repeat,
      linear-gradient(180deg, #0a0f1c 0%, #070b14 60%, #0c1120 100%);
    box-shadow:inset 0 6px 22px rgba(0,0,0,.6)}
  /* octagon mat painted on the floor of the stage */
  .fo-stage::before{content:"";position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
    width:118%;height:62%;clip-path:polygon(34% 0,66% 0,100% 50%,66% 100%,34% 100%,0 50%);
    background:radial-gradient(60% 80% at 50% 40%, rgba(40,54,82,.9), rgba(14,20,34,.95));
    border-top:1px solid rgba(212,175,55,.18)}
  .fo-stage .f2d{position:absolute;bottom:28px;width:120px;height:176px}
  .fo-stage .f2d.you{left:16%}
  .fo-stage .f2d.opp{right:16%;transform:scaleX(-1)}
  .fo-stage .f2d-bob{position:relative;width:100%;height:100%;transform-origin:50% 100%;animation:f2dIdle 2.6s ease-in-out infinite}
  .fo-stage .f2d.opp .f2d-bob{animation-delay:.7s}
  .fo-stage .f2d-svg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 7px rgba(0,0,0,.6))}
  .fo-stage .f2d-base{opacity:1}
  .fo-stage .f2d-action{opacity:0;pointer-events:none}
  .fo-stage .f2d-sh{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
    width:90px;height:15px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0));filter:blur(4px)}
  @keyframes f2dIdle{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-3px) rotate(-.7deg)}50%{transform:translateY(-4.5px) rotate(0deg)}75%{transform:translateY(-3px) rotate(.7deg)}}
  @media (max-width:560px){ .fo-stage{height:182px} .fo-stage .f2d{height:132px;width:76px;bottom:22px}
    .fo-stage .f2d.you{left:12%} .fo-stage .f2d.opp{right:12%} }
  /* ===== Mission 2: strike reactions — attacker lunges toward centre, defender snaps back.
     The opponent's base transform is scaleX(-1) (mirror), so its keyframes must KEEP that scale. ===== */
  .fo-stage .f2d.punch{animation:f2dPunchY .32s cubic-bezier(.3,.7,.2,1)}
  .fo-stage .f2d.punchBig{animation:f2dPunchYB .40s cubic-bezier(.34,.8,.18,1)}
  .fo-stage .f2d.recoil{animation:f2dRecoilY .36s cubic-bezier(.2,.85,.3,1)}
  .fo-stage .f2d.recoilBig{animation:f2dRecoilYB .46s cubic-bezier(.2,.85,.3,1)}
  .fo-stage .f2d.opp.punch{animation:f2dPunchO .32s cubic-bezier(.3,.7,.2,1)}
  .fo-stage .f2d.opp.punchBig{animation:f2dPunchOB .40s cubic-bezier(.34,.8,.18,1)}
  .fo-stage .f2d.opp.recoil{animation:f2dRecoilO .36s cubic-bezier(.2,.85,.3,1)}
  .fo-stage .f2d.opp.recoilBig{animation:f2dRecoilOB .46s cubic-bezier(.2,.85,.3,1)}
  /* IMPACT — the struck fighter flashes bright for a beat (reads as a clean shot landing) */
  .fo-stage .f2d.react .f2d-svg,.fo-stage .f2d.recoil .f2d-svg,.fo-stage .f2d.recoilBig .f2d-svg{animation:f2dHit .32s ease}
  @keyframes f2dHit{0%{filter:drop-shadow(0 5px 7px rgba(0,0,0,.6)) brightness(2.4) contrast(1.06)}45%{filter:drop-shadow(0 5px 7px rgba(0,0,0,.6)) brightness(1.4)}100%{filter:drop-shadow(0 5px 7px rgba(0,0,0,.6)) brightness(1)}}
  /* M290 — PARAMETRIC DEFENDER REACTION: knockback (--kx), vertical dip (--ky) + head rotation (--kr)
     are set per strike TYPE in JS (reactParams) and scaled by hit level. One pair of keyframes; the .opp
     variant keeps its scaleX(-1) mirror. Snaps to the hit, settles back with a small overshoot. */
  .fo-stage .f2d.react{animation:f2dReactY var(--rdur,.4s) cubic-bezier(.2,.85,.3,1)}
  .fo-stage .f2d.opp.react{animation:f2dReactO var(--rdur,.4s) cubic-bezier(.2,.85,.3,1)}
  @keyframes f2dReactY{0%{transform:translate(0,0) rotate(0)}
    22%{transform:translate(var(--kx,-11px),var(--ky,0px)) rotate(var(--kr,-5deg))}
    55%{transform:translate(calc(var(--kx,-11px)*-.16),calc(var(--ky,0px)*.35)) rotate(calc(var(--kr,-5deg)*-.16))}
    100%{transform:translate(0,0) rotate(0)}}
  @keyframes f2dReactO{0%{transform:scaleX(-1) translate(0,0) rotate(0)}
    22%{transform:scaleX(-1) translate(var(--kx,-11px),var(--ky,0px)) rotate(var(--kr,-5deg))}
    55%{transform:scaleX(-1) translate(calc(var(--kx,-11px)*-.16),calc(var(--ky,0px)*.35)) rotate(calc(var(--kr,-5deg)*-.16))}
    100%{transform:scaleX(-1) translate(0,0) rotate(0)}}
  /* HIT-STOP — freeze every animated thing in the stage for a few frames at the moment of impact */
  .fo-stage.hitstop, .fo-stage.hitstop *{animation-play-state:paused !important}
  /* ROCKED — a dropped fighter wobbles unsteadily (added on the knockdown beat) */
  .fo-stage .f2d.rocked .f2d-bob{animation:f2dWobble .72s ease}
  @keyframes f2dWobble{0%{transform:translateX(0) rotate(0)}12%{transform:translateX(-7px) rotate(-7deg)}30%{transform:translateX(6px) rotate(6deg)}48%{transform:translateX(-4px) rotate(-4deg)}66%{transform:translateX(3px) rotate(3deg)}82%{transform:translateX(-1.5px) rotate(-1.5deg)}100%{transform:translateX(0) rotate(0)}}
  /* Punch = quick WIND-UP (coil back) then an explosive committed lunge with a forward lean — reads as a
     thrown strike, not a slide. Big variants step in further + add a slight scale "pop". */
  @keyframes f2dPunchY{0%{transform:translateX(0) rotate(0)}15%{transform:translateX(-5px) rotate(-2deg)}42%{transform:translateX(17px) rotate(3.5deg)}100%{transform:translateX(0) rotate(0)}}
  @keyframes f2dPunchYB{0%{transform:translateX(0) rotate(0) scale(1)}12%{transform:translateX(-9px) rotate(-3.5deg)}40%{transform:translateX(30px) rotate(5.5deg) scale(1.045)}100%{transform:translateX(0) rotate(0) scale(1)}}
  @keyframes f2dRecoilY{0%{transform:translateX(0)}22%{transform:translateX(-11px) rotate(-5deg)}55%{transform:translateX(3px) rotate(1.5deg)}100%{transform:translateX(0)}}
  @keyframes f2dRecoilYB{0%{transform:translateX(0)}18%{transform:translateX(-23px) rotate(-11deg)}45%{transform:translateX(-6px) rotate(-3deg)}70%{transform:translateX(5px) rotate(2deg)}100%{transform:translateX(0)}}
  @keyframes f2dPunchO{0%{transform:scaleX(-1) translateX(0) rotate(0)}15%{transform:scaleX(-1) translateX(-5px) rotate(-2deg)}42%{transform:scaleX(-1) translateX(17px) rotate(3.5deg)}100%{transform:scaleX(-1) translateX(0) rotate(0)}}
  @keyframes f2dPunchOB{0%{transform:scaleX(-1) translateX(0) rotate(0) scale(1)}12%{transform:scaleX(-1) translateX(-9px) rotate(-3.5deg)}40%{transform:scaleX(-1) translateX(30px) rotate(5.5deg) scale(1.045)}100%{transform:scaleX(-1) translateX(0) rotate(0) scale(1)}}
  @keyframes f2dRecoilO{0%{transform:scaleX(-1) translateX(0)}22%{transform:scaleX(-1) translateX(-11px) rotate(-5deg)}55%{transform:scaleX(-1) translateX(3px) rotate(1.5deg)}100%{transform:scaleX(-1) translateX(0)}}
  @keyframes f2dRecoilOB{0%{transform:scaleX(-1) translateX(0)}18%{transform:scaleX(-1) translateX(-23px) rotate(-11deg)}45%{transform:scaleX(-1) translateX(-6px) rotate(-3deg)}70%{transform:scaleX(-1) translateX(5px) rotate(2deg)}100%{transform:scaleX(-1) translateX(0)}}
  /* ===== Mission 3: ground / stack — figures converge to centre, BOTTOM lies on the mat, TOP hunches over.
     Position (left/right/bottom) is on the OUTER .f2d so the strike-reaction transforms still ride on top;
     the lying/hunching POSE is on the inner .f2d-bob (idle bob paused). ===== */
  .fo-stage.ground .f2d{transition:left .42s ease,right .42s ease,bottom .42s ease,width .42s ease,height .42s ease}
  .fo-stage.ground .f2d-bob{animation:none;transform-origin:50% 76%;transition:transform .42s ease}
  /* BOTTOM fighter — flat on his back, low on the mat, head pointing to centre */
  .fo-stage.ground .f2d.bottom{bottom:5px;z-index:2}
  .fo-stage.ground .f2d.you.bottom{left:34%;right:auto}
  .fo-stage.ground .f2d.opp.bottom{right:34%;left:auto}
  .fo-stage.ground .f2d.bottom .f2d-bob{transform:rotate(88deg) scale(.82,.9)}
  .fo-stage.ground .f2d.opp.bottom .f2d-bob{transform:rotate(-88deg) scale(.82,.9)}
  .fo-stage.ground .f2d.bottom .f2d-sh{opacity:.25;width:122px;bottom:18px}
  /* TOP fighter — leaning down over him (ground-and-pound), smaller + raised + in front */
  .fo-stage.ground .f2d.top{bottom:22px;z-index:4}
  .fo-stage.ground .f2d.you.top{left:41%;right:auto}
  .fo-stage.ground .f2d.opp.top{right:41%;left:auto}
  .fo-stage.ground .f2d.top .f2d-bob{transform:translateY(10px) rotate(60deg) scale(.68,.76)}
  .fo-stage.ground .f2d.opp.top .f2d-bob{transform:translateY(10px) rotate(-60deg) scale(.68,.76)}
  .fo-stage.ground .f2d.top .f2d-sh{opacity:.14;width:88px;bottom:14px}
  .fo-stage.ground .f2d.top .f2d-svg{clip-path:inset(0 0 9% 0)}
  /* v300 real top-control sprite: it is already kneeling, so do not rotate it like the old standing cutout. */
  .fo-stage.ground .f2d.top[data-base-pose="ground"] .f2d-bob{transform:translateY(12px) scale(.82);transform-origin:50% 86%}
  .fo-stage.ground .f2d.top[data-base-pose="ground"] .f2d-svg{clip-path:none}
  .fo-stage.ground .f2d.top.pose-active .f2d-bob{transform:translateY(8px) scale(.88)}
  .fo-stage.ground .hit-spark{left:50%;top:58%}
  @media(max-width:560px){
    .fo-stage.ground .f2d.you.bottom{left:30%}.fo-stage.ground .f2d.opp.bottom{right:30%}
    .fo-stage.ground .f2d.you.top{left:39%}.fo-stage.ground .f2d.opp.top{right:39%}
  }
  /* ===== KO / FINISH POSE (Mission 4) — on the finish the loser collapses flat to the mat and the winner
     steps in and stands over him. Driven by setKO2D() on the finish beat (display-only; no engine touch).
     Declared AFTER the ground rules so it overrides whatever stance the fight ended in (standing KO or G&P). ===== */
  .fo-stage.ko .f2d{transition:left .5s ease, right .5s ease, bottom .5s ease}
  .fo-stage.ko .f2d-bob{animation:none;transition:transform .5s ease}
  /* loser — drops flat onto the mat toward centre, head pointing to centre (toward the winner) */
  .fo-stage.ko .f2d.koDown{bottom:32px;z-index:2}
  .fo-stage.ko .f2d.you.koDown{left:34%;right:auto}
  .fo-stage.ko .f2d.opp.koDown{right:34%;left:auto}
  .fo-stage.ko .f2d.koDown .f2d-bob{transform-origin:50% 100%;transform:rotate(90deg);opacity:.95}   /* pivot at the feet so the body lies along the foot plane; SAME sign both sides — opp's scaleX(-1) makes 90deg point its head to centre too */
  .fo-stage.ko .f2d.koDown .f2d-sh{opacity:.34;width:110px}
  /* winner — steps to centre and stands tall over the fallen man, with a short victory rise */
  .fo-stage.ko .f2d.koWin{z-index:4}
  .fo-stage.ko .f2d.you.koWin{left:42%;right:auto}
  .fo-stage.ko .f2d.opp.koWin{right:42%;left:auto}
  .fo-stage.ko .f2d.koWin .f2d-bob{animation:f2dKOwin 1.2s ease}
  @keyframes f2dKOwin{0%{transform:translateY(0)}24%{transform:translateY(-9px)}55%{transform:translateY(-2px)}100%{transform:translateY(0)}}
  /* M291 — the clean-KO finish has a small, staged story: the unconscious fighter drops after
     the impact freeze, then the victor raises both hands. Pseudo arms keep this compatible with
     the existing transparent fighter cutouts; no fight-state or outcome data is involved. */
  .fo-stage.ko-cinematic .f2d.koDown{animation:koCollapse .58s cubic-bezier(.12,.78,.18,1) both}
  @keyframes koCollapse{0%{opacity:1;transform:translateY(-20px) rotate(-3deg)}42%{transform:translateY(5px) rotate(2deg)}100%{opacity:.93;transform:translateY(0) rotate(0)}}
  .fo-stage.ko-cinematic .f2d.koWin.celebrate::before,
  .fo-stage.ko-cinematic .f2d.koWin.celebrate::after{content:"";position:absolute;z-index:6;top:4%;width:8px;height:42px;border-radius:8px;
    background:linear-gradient(90deg,#d9b08c,#f1c7a3);box-shadow:0 0 9px rgba(255,222,177,.35);transform-origin:50% 100%;animation:koArmsUp .5s cubic-bezier(.18,.9,.28,1) both}
  .fo-stage.ko-cinematic .f2d.koWin.celebrate::before{left:27%;transform:rotate(-56deg)}
  .fo-stage.ko-cinematic .f2d.koWin.celebrate::after{right:27%;transform:rotate(56deg)}
  @keyframes koArmsUp{0%{opacity:0;translate:0 20px}100%{opacity:1;translate:0 0}}
  .fo-arena.shake{animation:shake .32s}
  @keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}
  .feed{font-size:15px;line-height:1.65}
  .feed .ln{padding:7px 0;border-bottom:1px solid rgba(32,45,73,.5);opacity:0;transform:translateY(8px);animation:fadein .35s forwards}
  .feed .ln:last-child{border-bottom:none}
  .feed .ln.you b{color:#86aef5}
  .feed .ln.opp b{color:#f59297}
  .feed .ln.sys{color:var(--gold-bright);font-family:'Barlow Condensed';letter-spacing:1px;font-size:14px}
  .feed .ln .big-shot{color:var(--gold-bright);font-weight:700;font-family:'Barlow Condensed';letter-spacing:1px}
  /* the defender's reaction — slightly indented, reads as the back-and-forth response */
  .feed .ln.react{font-size:13.5px;opacity:.92;padding:5px 0 5px 20px;border-bottom-style:dashed}
  .feed .ln.react::before{content:"↳";opacity:.5;margin-left:-15px;margin-right:7px}
  /* live commentary voice + dramatic callouts */
  .feed .ln.cmtry{color:#ffcf6e;font-style:italic;font-family:'Inter';font-weight:500}
  .feed .ln.cmtry::before{content:"🎙";font-style:normal;opacity:.5;margin-right:6px;font-size:12px}
  .feed .ln.hype{color:var(--gold-bright);font-family:'Barlow Condensed';font-weight:700;letter-spacing:1.5px;font-size:17px;text-transform:uppercase;animation:hypePop .4s ease}
  @keyframes hypePop{0%{opacity:0;transform:scale(.8) translateY(8px)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1) translateY(0)}}
  /* momentum meter */
  .fo-momentum{position:relative;height:7px;border-radius:4px;margin:10px 16px 2px;
    background:linear-gradient(90deg,rgba(106,153,236,.55),rgba(40,52,80,.55) 50%,rgba(232,74,79,.55));  /* left=YOU(blue) right=OPP(red), matches name layout */
    box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
  .fo-momentum .knob{position:absolute;top:50%;left:50%;width:15px;height:15px;border-radius:50%;
    background:var(--gold-bright);box-shadow:0 0 12px var(--gold-bright);transform:translate(-50%,-50%);
    transition:left .45s cubic-bezier(.2,.8,.2,1)}
  .fo-momentum .molab{position:absolute;top:-15px;width:100%;text-align:center;font-family:'Barlow Condensed';
    font-size:9px;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
  .fo-momentum .moend{position:absolute;top:-15px;font-family:'Barlow Condensed';font-size:9px;letter-spacing:1px;color:var(--muted)}
  .fo-momentum .moend.l{left:0}.fo-momentum .moend.r{right:0}
  @keyframes fadein{to{opacity:1;transform:translateY(0)}}

  .hit-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:7;border-radius:18px}
  .hit-flash.on{animation:flash .4s ease}
  .hit-flash.on.big{animation:flashBig .55s ease}
  .hit-flash.on.mega{animation:flashMega .7s ease}
  @keyframes flash{0%{opacity:0}15%{opacity:.7}100%{opacity:0}}
  @keyframes flashBig{0%{opacity:0}12%{opacity:1}55%{opacity:.5}100%{opacity:0}}
  @keyframes flashMega{0%{opacity:0}8%{opacity:1}20%{opacity:.6}30%{opacity:1}100%{opacity:0}}
  /* harder camera shakes for bigger impacts */
  .fo-arena.shakeBig{animation:shakeBig .5s}
  .fo-arena.shakeMega{animation:shakeMega .62s}
  @keyframes shakeBig{0%,100%{transform:translate(0,0)}10%{transform:translate(-11px,6px) rotate(-1deg)}30%{transform:translate(11px,-6px) rotate(1deg)}50%{transform:translate(-9px,4px)}70%{transform:translate(8px,-3px)}90%{transform:translate(-4px,2px)}}
  @keyframes shakeMega{0%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-16px,9px) rotate(-1.6deg)}22%{transform:translate(16px,-10px) rotate(1.6deg)}40%{transform:translate(-13px,7px) rotate(-1deg)}58%{transform:translate(12px,-6px) rotate(1deg)}76%{transform:translate(-7px,4px)}90%{transform:translate(5px,-2px)}}
  /* red "you're taking damage" vignette — intensifies as YOUR fighter gets hurt */
  .dmg-vignette{position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:18px;opacity:0;transition:opacity .5s ease;
    box-shadow:inset 0 0 65px 18px rgba(214,26,26,.6);
    background:radial-gradient(circle at 50% 50%, transparent 48%, rgba(186,18,18,.55))}

  /* result takeover */
  .fo-result{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    border-radius:18px;z-index:8;padding:34px 22px;opacity:0;overflow:hidden;width:100%}
  .fo-result.show{animation:resIn .5s cubic-bezier(.2,.8,.2,1) both}
  @keyframes resIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  .fo-result.win{background:radial-gradient(circle at 50% 40%, rgba(55,196,111,.28), rgba(5,8,15,.97))}
  .fo-result.loss{background:radial-gradient(circle at 50% 40%, rgba(232,74,79,.24), rgba(5,8,15,.97))}
  .fo-result.champ{background:radial-gradient(circle at 50% 40%, rgba(212,175,55,.34), rgba(5,8,15,.97))}
  .rays{position:absolute;width:760px;height:760px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:.5;
    background:conic-gradient(from 0deg, transparent 0 8deg, rgba(255,255,255,.06) 8deg 16deg, transparent 16deg 24deg, rgba(255,255,255,.06) 24deg 32deg);
    animation:spin 22s linear infinite}
  @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  .result-badge{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:3px;padding:9px 22px;border-radius:30px;margin-bottom:14px;
    border:1px solid;text-transform:uppercase;animation:badgePop .5s .15s both}
  @keyframes badgePop{from{opacity:0;transform:scale(.4) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
  .result-badge.ko{color:#ffd0a0;border-color:#e8843a;background:rgba(232,132,58,.16);box-shadow:0 0 24px rgba(232,132,58,.4)}
  .result-badge.sub{color:#b6c8ff;border-color:#5a8be0;background:rgba(90,139,224,.16);box-shadow:0 0 24px rgba(90,139,224,.4)}
  .result-badge.dec{color:#cfd8ea;border-color:var(--muted);background:rgba(132,147,178,.12)}
  .fo-result .rbig{font-family:'Barlow Condensed';font-size:74px;font-weight:700;line-height:.95;letter-spacing:2px;animation:bigPop .55s .1s both}
  @keyframes bigPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
  .fo-result.win .rbig{color:#5fe89a;text-shadow:0 0 40px rgba(55,196,111,.7)}
  .fo-result.loss .rbig{color:#ff7479;text-shadow:0 0 40px rgba(232,74,79,.6)}
  .fo-result.champ .rbig{color:var(--gold-bright);text-shadow:0 0 50px rgba(212,175,55,.9)}
  .fo-result .crown{font-size:46px;margin-bottom:6px;animation:bigPop .55s both;filter:drop-shadow(0 0 20px rgba(212,175,55,.7))}
  .fo-result .rmethod{font-family:'Barlow Condensed';font-size:22px;color:var(--text);margin:10px 0 4px;letter-spacing:1px}
  .fo-result .rdetail{color:var(--muted);font-size:15px;margin-bottom:8px;max-width:420px;animation:fadein .5s .4s both}
  /* prize earned (money) on the result screen */
  .fo-result .rprize{display:inline-flex;align-items:center;gap:11px;margin:12px 0 2px;
    background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.06));border:1px solid var(--gold-dim);
    border-radius:30px;padding:10px 22px;animation:prizePop .55s .35s both}
  @keyframes prizePop{0%{opacity:0;transform:scale(.6) translateY(10px)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1) translateY(0)}}
  .fo-result .rprize .rp-ico{color:var(--gold-bright);font-size:22px;line-height:0}
  .fo-result .rprize .rp-amt{font-family:'Barlow Condensed';font-weight:700;font-size:30px;line-height:1;color:#7dffb4}
  .fo-result .rprize.loss .rp-amt{color:#f0c98a}
  .fo-result .rprize .rp-lab{font-family:'Barlow Condensed';font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  /* two prize pills side by side (purse + Fame) */
  .fo-result .rprize-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 2px}
  .fo-result .rprize-row .rprize{margin:0;gap:9px;padding:9px 18px}
  .fo-result .rprize-row .rprize .rp-amt{font-size:24px}
  .fo-result .rprize.fame{background:linear-gradient(180deg,rgba(212,175,55,.2),rgba(212,175,55,.07))}
  .fo-result .rprize.fame .rp-amt,.fo-result .rprize.fame .rp-ico{color:var(--gold-bright)}
  /* ARC 1 ENDING — the man in the suit */
  .street-ending{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:100vh;justify-content:center;
    padding:40px 22px;background:radial-gradient(circle at 50% 35%, rgba(140,30,34,.22), rgba(3,4,8,.99));opacity:0;transition:opacity .8s ease}
  .street-ending.show{opacity:1}
  .street-ending .se-kicker{font-family:'Barlow Condensed';font-size:12px;letter-spacing:4px;color:#9a7d3a;margin-bottom:10px}
  .street-ending .se-title{font-family:'Barlow Condensed';font-weight:700;font-size:46px;line-height:1;letter-spacing:2px;color:#fff;text-shadow:0 0 40px rgba(212,175,55,.45);margin-bottom:14px}
  .street-ending .se-chant{font-family:'Barlow Condensed';font-weight:700;font-size:20px;letter-spacing:3px;color:var(--gold-bright);margin-bottom:20px;animation:bossPulse 1.6s ease-in-out infinite}
  .street-ending .se-line{max-width:560px;font-size:15px;line-height:1.55;color:#cfc4b0;margin:7px auto}
  .street-ending .se-line.dim{color:var(--muted)}
  .street-ending .se-card{margin:22px auto;width:min(330px,86%);padding:20px 18px;border-radius:14px;
    background:linear-gradient(160deg,#15171d,#070809);border:1px solid var(--gold-dim);box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 30px rgba(212,175,55,.18);transform:rotate(-2deg)}
  .street-ending .sec-top{font-family:'Barlow Condensed';font-size:11px;letter-spacing:3px;color:#9a7d3a}
  .street-ending .sec-mid{font-family:'Barlow Condensed';font-weight:700;font-size:32px;letter-spacing:3px;color:var(--gold-bright);margin:6px 0 8px;text-shadow:0 0 24px rgba(212,175,55,.5)}
  .street-ending .sec-sub{font-size:12.5px;font-style:italic;color:#b9ae98;line-height:1.4}
  .street-ending .se-foot{margin-top:18px;font-size:12px;letter-spacing:1px;color:var(--muted)}
  .street-ending .se-foot b{color:var(--gold-bright)}
  .street-ending .btn.gold{margin-top:24px}
  .fo-result .btn{margin-top:22px;animation:fadein .5s .6s both}

  /* ---------- Winner announcement takeover (stops here until clicked) ---------- */
  .fo-announce{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    min-height:62vh;padding:30px 20px;width:100%}
  .fo-announce .ann-tag{font-family:'Barlow Condensed';font-weight:700;letter-spacing:5px;font-size:15px;text-transform:uppercase;
    color:var(--muted);margin-bottom:10px;animation:fadein .5s both}
  .fo-announce.win .ann-tag{color:#5fe89a}.fo-announce.loss .ann-tag{color:#ff7479}
  .fo-announce .ann-belt{font-size:54px;color:var(--gold-bright);margin-bottom:6px;animation:bigPop .6s both;filter:drop-shadow(0 0 22px rgba(212,175,55,.8))}
  /* YOUR fighter's face on the post-fight announcement (injury-aware: inj2 = busted) */
  .fo-announce .ann-face{width:120px;height:120px;margin:0 auto 16px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.16);box-shadow:0 8px 30px rgba(0,0,0,.6);animation:bigPop .5s both}
  .fo-announce .ann-face img,.fo-announce .ann-face .avatar-svg{width:100%;height:100%;object-fit:cover;display:block}
  .fo-announce.win .ann-face{border-color:var(--gold);box-shadow:0 0 26px rgba(212,175,55,.55)}
  .fo-announce.loss .ann-face{border-color:#7a2f2f}
  .fo-announce .ann-face.inj2{border-color:#b23030;box-shadow:0 0 24px rgba(178,48,48,.6)}
  .fo-announce .ann-name{font-family:'Barlow Condensed';font-weight:700;line-height:.95;letter-spacing:2px;
    font-size:clamp(40px,9vw,82px);color:#fff;text-shadow:0 0 50px rgba(255,255,255,.25);animation:annPop .6s cubic-bezier(.2,.9,.2,1) both}
  .fo-announce.win .ann-name{color:#7dffb4;text-shadow:0 0 55px rgba(55,196,111,.8)}
  .fo-announce.champ .ann-name{color:var(--gold-bright);text-shadow:0 0 60px rgba(212,175,55,.95)}
  @keyframes annPop{0%{opacity:0;transform:scale(.6) translateY(20px)}55%{transform:scale(1.06)}100%{opacity:1;transform:scale(1) translateY(0)}}
  .fo-announce .ann-by{font-family:'Barlow Condensed';font-weight:600;font-size:clamp(18px,3.4vw,27px);letter-spacing:1px;color:var(--gold-bright);
    margin-top:14px;animation:fadein .6s .35s both}
  .fo-announce .ann-by .lo{color:var(--text)}
  .fo-announce .ann-hint{color:var(--muted);font-size:13px;letter-spacing:1px;margin-top:6px;animation:fadein .6s .6s both}
  .fo-announce .btn{margin-top:26px;animation:annBtn .6s .8s both}
  @keyframes annBtn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  /* ---------- Fight Report (broadcast graphic) ---------- */
  .report{width:100%;max-width:560px;margin:22px auto 0;text-align:left;
    background:linear-gradient(180deg,#0c1426,#070b16);border:1px solid var(--line);border-radius:16px;
    padding:18px 18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.5);
    animation:fadein .5s .5s both}
  .report-title{font-family:'Barlow Condensed';font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold-bright);
    font-size:15px;text-align:center;position:relative;margin-bottom:14px}
  .report-title::before,.report-title::after{content:"";position:absolute;top:50%;width:22%;height:1px}
  .report-title::before{left:0;background:linear-gradient(90deg,transparent,var(--gold-dim))}
  .report-title::after{right:0;background:linear-gradient(270deg,transparent,var(--gold-dim))}
  .report-title.sub{color:var(--text);font-size:13px;margin-top:24px}
  .report-names{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
  .report-names .rn{font-family:'Barlow Condensed';font-weight:600;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .report-names .rn.you{color:#9cc0ff;text-align:left}
  .report-names .rn.opp{color:#f59297;text-align:right}
  .report-names .rn-vs{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center;flex:1.2}

  .cmp{display:flex;flex-direction:column;gap:10px}
  .cmp-row{display:grid;grid-template-columns:40px 1fr 40px;gap:12px;align-items:center}
  .cmp-val{font-family:'Barlow Condensed';font-weight:600;font-size:21px;line-height:1}
  .cmp-val.you{color:#9cc0ff;text-align:left}
  .cmp-val.opp{color:#f59297;text-align:right}
  .cmp-lab{text-align:center;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .cmp-bar{display:flex;height:7px;border-radius:5px;overflow:hidden;background:#080d19;border:1px solid var(--line)}
  .cmp-bar > i{display:block;height:100%;transition:width .6s ease}
  .cmp-bar > i.you{background:linear-gradient(90deg,#2f5aa8,#6a99ec)}
  .cmp-bar > i.opp{background:linear-gradient(90deg,#e2484d,#a83a3e)}

  .scorecard{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#080d19}
  .sc-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;align-items:center;padding:10px 12px;
    font-family:'Barlow Condensed';font-size:15px;text-align:center}
  .sc-row + .sc-row{border-top:1px solid var(--line-soft)}
  .sc-head{background:rgba(255,255,255,.03);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
  .sc-judge{text-align:left}
  .sc-row:not(.sc-head) .sc-judge{color:var(--text);font-size:13px;letter-spacing:.5px}
  .sc-total{font-weight:700;color:var(--text)}
  .sc-total.win{color:#5fe89a}
  .sc-total.loss{color:#ff7479}
  .sc-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:11px;font-size:12px;color:var(--muted)}
  .sc-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:3px}
  .sc-dot.you{background:#6a99ec}.sc-dot.opp{background:#e2484d}
  .sc-note{opacity:.7}
  .card-note{text-align:center;color:var(--muted);font-size:14px;line-height:1.5;padding:16px;border:1px dashed var(--line);border-radius:11px}
  .card-note b{color:var(--text)}

  /* ---------- Main Menu (brand-first) ---------- */
  #screen-menu{display:flex;justify-content:center;padding-top:30px}
  .menu-hero{width:100%;max-width:430px;text-align:center;padding:6px 0 8px;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}

  /* ========== 1+2. BRAND HERO — logo is the dominant element ========== */
  .menu-brand{margin-bottom:22px}
  .menu-emblem{position:relative;width:auto;height:118px;margin:0 auto 8px;display:block;
    filter:drop-shadow(0 0 8px rgba(212,175,55,.3));animation:emblemPulse 5.5s ease-in-out infinite}
  .menu-emblem svg{width:100%;height:100%;display:block}
  .menu-emblem img{height:100%;width:auto;display:block;margin:0 auto;
    -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
    mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%)}
  @keyframes emblemPulse{0%,100%{filter:drop-shadow(0 0 6px rgba(212,175,55,.22))}50%{filter:drop-shadow(0 0 13px rgba(212,175,55,.5))}}
  .menu-title{font-size:58px;font-weight:700;line-height:.92;letter-spacing:1.5px;text-shadow:0 3px 22px rgba(212,175,55,.18)}
  .menu-title span{color:var(--gold);font-weight:500}
  .menu-tag{font-size:13px;letter-spacing:6px;color:var(--muted);margin:11px 0 5px;text-transform:uppercase}
  .menu-tagline{font-size:12.5px;letter-spacing:.7px;color:#aab4c9;opacity:.92;font-style:italic;margin:0}

  /* ========== 3. FIGHTER SHOWCASE — compact, secondary, text only (no avatar) ========== */
  .fighter-showcase{position:relative;text-align:center;cursor:pointer;max-width:360px;margin:0 auto 22px;
    padding:11px 18px;border:1px solid var(--gold-dim);border-radius:13px;
    background:linear-gradient(180deg,rgba(212,175,55,.06),rgba(12,18,34,.45));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.4);transition:transform .15s,border-color .2s,box-shadow .2s}
  .fighter-showcase[role="button"]:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 18px rgba(212,175,55,.14)}
  .fighter-showcase[role="button"]:focus-visible{outline:2px solid var(--gold-dim);outline-offset:3px}
  .fighter-showcase .fs-kicker{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:2.5px;
    text-transform:uppercase;color:var(--gold-bright);opacity:.9;margin-bottom:4px}
  .fighter-showcase .fs-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;line-height:1.05;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fighter-showcase .fs-nick{color:var(--gold);font-style:italic;font-size:13.5px;line-height:1.1;margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fighter-showcase .fs-line{margin-top:7px;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);letter-spacing:.3px}
  .fighter-showcase .fs-line b{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--gold-bright)}
  .fighter-showcase.is-champ .fs-line .fs-league{color:#ffe9a3}
  .fighter-showcase .fs-line .dot{margin:0 7px;color:var(--gold-dim)}
  .fighter-showcase.empty{cursor:default;border-style:dashed}
  .fighter-showcase.empty .fs-line.empty-line{margin-top:5px;color:var(--muted);max-width:300px;margin-left:auto;margin-right:auto;line-height:1.45}

  /* ========== 4. PRIMARY CTA — Continue Career / Create Your Fighter ========== */
  .menu-cta{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;cursor:pointer;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;border:1px solid var(--gold);border-radius:14px;
    padding:14px 16px;margin-bottom:30px;font-family:'Barlow Condensed',sans-serif;
    box-shadow:0 12px 30px rgba(212,175,55,.30), inset 0 1px 0 rgba(255,255,255,.4);transition:transform .14s, box-shadow .18s, filter .18s}
  .menu-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(212,175,55,.42), inset 0 1px 0 rgba(255,255,255,.5);filter:brightness(1.04)}
  .menu-cta:active{transform:translateY(1px) scale(.995)}
  .menu-cta .cta-title{font-weight:700;font-size:20px;letter-spacing:2px;text-transform:uppercase}
  .menu-cta .cta-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:.5px;color:#3a2c08;opacity:.85}
  /* mode badge (Cloud Career / Guest Mode) near the Active Career card */
  .menu-mode-badge{display:block;width:max-content;max-width:100%;margin:8px auto 18px;padding:5px 14px;border-radius:20px;
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;
    border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
  .menu-mode-badge.hidden{display:none}
  .menu-mode-badge.cloud{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.08)}
  .menu-mode-badge.guest{color:var(--muted)}
  /* always-visible "Play as Guest" secondary entry, just under the primary CTA */
  .menu-guest-btn{display:block;width:100%;margin:-16px 0 14px;cursor:pointer;border-radius:12px;padding:12px;
    background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;transition:.15s}
  .menu-guest-btn:hover{border-color:var(--gold-dim);color:var(--gold-bright);background:rgba(212,175,55,.06)}
  .menu-guest-btn:active{transform:translateY(1px) scale(.995)}

  /* ---------- Main Menu account access (Sign Up / Log In / Sign Out) ---------- */
  .menu-auth{margin:2px 0 16px}
  .menu-auth-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;
    color:var(--gold-dim);text-align:center;margin-bottom:9px}
  .menu-auth-row{display:flex;gap:10px}
  .menu-auth-row.hidden{display:none}
  .menu-auth-btn{flex:1;cursor:pointer;border-radius:12px;padding:13px 10px;transition:transform .14s,border-color .18s,box-shadow .18s,filter .18s;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;
    background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);color:var(--text)}
  .menu-auth-btn:hover{transform:translateY(-2px);border-color:var(--gold-dim);color:var(--gold-bright);box-shadow:0 12px 26px rgba(0,0,0,.5)}
  .menu-auth-btn:active{transform:translateY(1px) scale(.995)}
  .menu-auth-btn.gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:#1a1303;text-shadow:0 1px 0 rgba(255,255,255,.25)}
  .menu-auth-btn.gold:hover{color:#1a1303;filter:brightness(1.05);box-shadow:0 14px 30px rgba(212,175,55,.38)}
  .menu-auth-signed{display:flex;flex-direction:column;align-items:center;gap:2px}
  .menu-auth-signed.hidden{display:none}
  .maui-who{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.3px;color:var(--muted)}

  /* ---------- Daily Login Streak card (My Fighter tab) ---------- */
  .ls-card{background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:14px}
  .ls-card.ready{border-color:var(--gold-dim);box-shadow:0 0 18px rgba(212,175,55,.12)}
  .ls-top{display:flex;align-items:center;gap:12px}
  .ls-flame{font-size:22px;line-height:1}
  .ls-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .ls-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px}
  .ls-tx span{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .ls-claim{margin-left:auto;cursor:pointer;border:none;border-radius:10px;padding:9px 14px;display:flex;flex-direction:column;align-items:center;gap:1px;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;transition:filter .15s,transform .12s}
  .ls-claim span{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.3px;color:#3a2c08;text-transform:none}
  .ls-claim:hover{filter:brightness(1.05)} .ls-claim:active{transform:translateY(1px)}
  .ls-done{margin-left:auto;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:#3fb96b;white-space:nowrap}
  .ls-pips{display:flex;gap:6px;margin-top:11px}
  .ls-pip{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
  .ls-pip.past{background:var(--gold-dim);border-color:var(--gold-dim)}
  .ls-pip.now{background:var(--gold-bright);border-color:var(--gold-bright);box-shadow:0 0 8px rgba(212,175,55,.55)}
  .ls-pip.big{flex:1.5}

  /* ---------- Free Daily Bonus (rewarded-ad) card + simulated ad overlay ---------- */
  .adh-card{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#141029,#0a0a18);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:14px}
  .adh-card.ready{border-color:#5b4bd0;box-shadow:0 0 18px rgba(99,80,220,.18)}
  .adh-ic{font-size:22px;line-height:1}
  .adh-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .adh-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px}
  .adh-tx span{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .adh-btn{margin-left:auto;cursor:pointer;border:none;border-radius:10px;padding:10px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#7b6cf0,#5b4bd0);transition:filter .15s,transform .12s}
  .adh-btn:hover{filter:brightness(1.08)} .adh-btn:active{transform:translateY(1px)}
  .adh-done{margin-left:auto;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:#3fb96b;white-space:nowrap}
  .ad-ov{position:fixed;inset:0;z-index:9999;background:rgba(2,4,10,.86);display:grid;place-items:center;padding:20px}
  .ad-card{width:100%;max-width:360px;background:linear-gradient(180deg,#0e1626,#0a0f1c);border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center}
  .ad-tag{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .ad-fake{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(120% 120% at 50% 0%,#1c2742,#0c1322);border:1px solid var(--line);border-radius:14px;padding:30px 16px;margin-bottom:14px}
  .ad-fake-logo{font-size:40px}
  .ad-fake-tx{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:1px;color:var(--gold-bright);display:flex;flex-direction:column;line-height:1.1;text-align:left}
  .ad-fake-tx small{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:none}
  .ad-note{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--text);margin-bottom:14px}
  .ad-note b{color:var(--gold-bright)}
  .ad-x{cursor:pointer;border:1px solid var(--line);background:var(--card,#0e1626);color:var(--text);border-radius:10px;padding:11px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.15s}
  .ad-x:disabled{opacity:.45;cursor:default}
  .ad-x:not(:disabled){border-color:var(--gold-dim);color:var(--gold-bright)}
  .ad-x:not(:disabled):hover{background:rgba(212,175,55,.08)}

  /* ---------- PvP Energy bar (daily challenge capacity) ---------- */
  .pe-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:14px}
  .pe-bar.empty{border-color:#5a2230}
  .pe-ic{font-size:20px;line-height:1}
  .pe-mid{flex:1;min-width:0}
  .pe-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .pe-top b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.5px}
  .pe-top span{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .pe-pips{display:flex;gap:5px;margin-top:6px}
  .pe-pip{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
  .pe-pip.on{background:linear-gradient(90deg,#34d3c4,#2bb0a4);border-color:#2bb0a4;box-shadow:0 0 6px rgba(52,211,196,.4)}
  .pe-reset{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--muted);white-space:nowrap}

  /* ---------- Welcome-back comeback gift card ---------- */
  .wb-card{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#1a1430,#0f0a1c);border:1px solid var(--gold-dim);border-radius:14px;padding:13px 15px;margin-bottom:14px;box-shadow:0 0 18px rgba(212,175,55,.14)}
  .wb-ic{font-size:22px;line-height:1}
  .wb-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .wb-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px}
  .wb-tx span{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .wb-btn{margin-left:auto;cursor:pointer;border:none;border-radius:10px;padding:9px 14px;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;transition:filter .15s,transform .12s}
  .wb-btn span{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.3px;color:#3a2c08;text-transform:none}
  .wb-btn:hover{filter:brightness(1.05)} .wb-btn:active{transform:translateY(1px)}

  /* ---------- Trophy Road (achievements meta-progression, on the Awards tab) ---------- */
  .tr-card{background:linear-gradient(180deg,#15110a,#0c0a06);border:1px solid var(--gold-dim);border-radius:14px;padding:15px 16px;margin-bottom:16px}
  .tr-card.ready{box-shadow:0 0 20px rgba(212,175,55,.2)}
  .tr-top{display:flex;align-items:center;gap:12px;margin-bottom:11px}
  .tr-ic{font-size:24px;line-height:1}
  .tr-tx{display:flex;flex-direction:column;line-height:1.2}
  .tr-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.5px;color:var(--gold-bright)}
  .tr-tx span{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .tr-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
  .tr-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .5s}
  .tr-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:8px}
  .tr-sub b{color:var(--gold-bright)}
  .tr-claim{display:block;width:100%;margin-top:12px;cursor:pointer;border:none;border-radius:10px;padding:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;transition:filter .15s,transform .12s}
  .tr-claim:hover{filter:brightness(1.05)} .tr-claim:active{transform:translateY(1px)}

  /* ---------- Monthly Loyalty card (Quests tab) ---------- */
  .ml-card{background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
  .ml-card.ready{border-color:var(--gold-dim);box-shadow:0 0 18px rgba(212,175,55,.12)}
  .ml-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .ml-ic{font-size:22px;line-height:1}
  .ml-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .ml-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px}
  .ml-tx span{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .ml-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
  .ml-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .5s}
  .ml-pips{display:flex;justify-content:space-between;gap:6px;margin-top:8px}
  .ml-pip{flex:1;text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;color:var(--muted);padding:3px 0;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
  .ml-pip.on{color:#1a1305;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  .ml-claim{display:block;width:100%;margin-top:11px;cursor:pointer;border:none;border-radius:10px;padding:11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;transition:filter .15s,transform .12s}
  .ml-claim span{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.3px;color:#3a2c08;text-transform:none}
  .ml-claim:hover{filter:brightness(1.05)} .ml-claim:active{transform:translateY(1px)}

  /* ---------- Career Hall of Fame (Awards tab) ---------- */
  .hof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(98px,1fr));gap:10px}
  .hof-tile{background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
  .hof-v{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;color:var(--gold-bright);letter-spacing:.5px;line-height:1.1}
  .hof-l{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-top:3px}

  /* ---------- World Feed (PvP tab) ---------- */
  .wf-list{display:flex;flex-direction:column;gap:1px}
  .wf-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
  .wf-row:last-child{border-bottom:none}
  .wf-row.me{background:rgba(212,175,55,.06);border-radius:8px;padding:8px;border-bottom:none;margin-bottom:2px}
  .wf-dot{font-size:13px;line-height:1}
  .wf-tx{flex:1;font-family:'Inter',sans-serif;font-weight:500;font-size:13.5px;color:var(--text);min-width:0}
  .wf-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px}
  .wf-nick{color:var(--gold-dim)}
  .wf-ago{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;color:var(--muted);white-space:nowrap}

  /* ---------- Road Ahead (Career tab — next goals) ---------- */
  .ra-row{margin-bottom:12px}
  .ra-row:last-child{margin-bottom:0}
  .ra-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
  .ra-lab{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--text)}
  .ra-n{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;color:var(--gold-bright);white-space:nowrap}
  .ra-bar{height:9px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
  .ra-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .5s}

  /* ---------- Training Focus (Training tab) ---------- */
  .tf-style{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--muted);margin-bottom:13px}
  .tf-style b{color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px}
  .tf-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .tf-lab{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;width:112px;flex-shrink:0}
  .tf-bar{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
  .tf-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));transition:width .5s}
  .tf-n{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--muted);width:28px;text-align:right}

  /* ---------- Season Pass (free track, Quests tab) ---------- */
  .sp-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
  .sp-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;color:var(--gold-bright)}
  .sp-reset{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--muted)}
  .sp-pts{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--text);margin-bottom:7px}
  .sp-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
  .sp-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .5s}
  .sp-pips{display:flex;justify-content:space-between;gap:6px;margin-top:9px}
  .sp-pip{flex:1;text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--muted);padding:5px 0;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
  .sp-pip.on{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.08)}
  .sp-pip.claimed{color:#1a1305;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  .sp-claim{display:block;width:100%;margin-top:11px;cursor:pointer;border:none;border-radius:10px;padding:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1305;transition:filter .15s,transform .12s}
  .sp-claim:hover{filter:brightness(1.05)} .sp-claim:active{transform:translateY(1px)}

  /* ---------- Share My Fighter button (My Fighter tab) ---------- */
  .share-btn{display:block;width:100%;margin:-6px 0 14px;cursor:pointer;border-radius:12px;padding:11px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.15s}
  .share-btn:hover{border-color:var(--gold-dim);color:var(--gold-bright);background:rgba(212,175,55,.06)}
  .share-btn:active{transform:translateY(1px) scale(.995)}

  /* ---------- Getting Started onboarding (My Fighter tab, new players) ---------- */
  .ob-card{background:linear-gradient(180deg,#13203a,#0a1020);border:1px solid var(--gold-dim);border-radius:14px;padding:14px 16px;margin-bottom:14px}
  .ob-head{display:flex;justify-content:space-between;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--gold-bright);margin-bottom:10px}
  .ob-prog{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;color:var(--muted)}
  .ob-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--text)}
  .ob-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);font-size:12px;color:var(--muted);flex-shrink:0}
  .ob-row.done{color:var(--muted)}
  .ob-row.done span:last-child{text-decoration:line-through;opacity:.7}
  .ob-row.done .ob-check{background:var(--gold);border-color:var(--gold);color:#1a1305}

  /* ---------- Fight-tab "Someone challenged you" card ---------- */
  .ch-card{background:linear-gradient(180deg,#2a1418,#140a10);border:1px solid #6b2a30;border-radius:14px;padding:15px 16px;margin-bottom:16px;box-shadow:0 0 20px rgba(200,60,70,.14)}
  .ch-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .ch-ic{font-size:18px;line-height:1}
  .ch-t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;color:#ff7a85}
  .ch-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:.5px}
  .ch-nick{color:var(--gold-bright);font-style:italic;font-size:15px;font-weight:600}
  .ch-meta{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);margin:4px 0 10px}
  .ch-ovr{color:var(--text)} .ch-ovr.tough{color:#ff7a85}
  .ch-warn{color:#ff7a85;font-weight:700} .ch-easy{color:#3fb96b;font-weight:600}
  .ch-story{font-family:'Inter',sans-serif;font-weight:500;font-size:14px;font-style:italic;color:var(--text);line-height:1.45;border-left:2px solid var(--gold-dim);padding-left:12px;margin-bottom:14px}
  .ch-actions{display:flex;gap:10px}
  .ch-accept{flex:1;cursor:pointer;border:none;border-radius:10px;padding:13px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(180deg,#e0555f,#c13540);color:#fff;transition:filter .15s,transform .12s}
  .ch-accept:hover{filter:brightness(1.08)} .ch-accept:active{transform:translateY(1px)}
  .ch-next{cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:13px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.03);color:var(--muted);transition:.15s;white-space:nowrap}
  .ch-next:hover{border-color:var(--gold-dim);color:var(--gold-bright)}

  /* ---------- Entry gate / landing (the FIRST screen: Log In · Sign Up · Guest) ---------- */
  #screen-landing{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 112px);gap:24px;background:none}
  /* Belt Room showcase banner — the AI title belt, black bg faded out at the sides so it floats */
  .belt-room-hero{text-align:center;margin:2px 0 16px}
  .belt-room-hero img{max-width:min(440px,88%);height:auto;display:block;margin:0 auto;
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.6));
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
  .landing-hero{animation:none}   /* drop the entrance transform on the centered hero — it triggered a Safari gradient-paint glitch on the gold button */
  .landing-gate{display:flex;flex-direction:column;gap:12px;margin-top:24px;width:100%}
  .landing-gate.hidden{display:none}
  .landing-cta{margin-bottom:2px;transform:translateZ(0)}   /* force its own paint layer so the gold gradient always renders (Safari fix) */
  /* ===== KEY-ART LANDING — owner's main-page art; LOG IN / SIGN UP / GUEST MODE baked into the image,
     transparent click-zones overlaid + positioned in % so they stay aligned at any size ===== */
  #landingOut{margin-top:0}
  .landing-art{position:static;width:100%;max-width:380px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:11px;background:none;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;overflow:visible}
  .landing-art-img{display:none}
  .la-btn{position:static !important;left:auto !important;top:auto !important;width:100% !important;max-width:380px;height:auto !important;display:flex;align-items:center;justify-content:center;padding:16px 14px;border-radius:13px;cursor:pointer;border:0;
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:2.5px;text-transform:uppercase;transition:transform .13s,filter .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
  .la-btn::after{content:attr(aria-label)}
  .la-btn:hover{transform:translateY(-2px)}
  .la-btn:active{transform:translateY(1px) scale(.99)}
  .la-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,214,120,.7)}
  #btnLandingLogin{background:linear-gradient(180deg,#f6cf6a,#c79f37);color:#161007;box-shadow:0 8px 22px rgba(212,160,54,.34),inset 0 1px 0 rgba(255,255,255,.45)}
  #btnLandingLogin:hover{filter:brightness(1.05);transform:translateY(-2px)}
  #btnLandingSignup,#btnArtGuest{color:#fff;background:linear-gradient(180deg,rgba(22,28,44,.92),rgba(11,15,26,.94));border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 18px rgba(0,0,0,.5)}
  .landing-in{display:flex;flex-direction:column;align-items:center;gap:16px;padding:50px 20px}
  .landing-in .menu-emblem img{width:92px;height:auto}
  .landing-stack-btn{display:block;width:100%;cursor:pointer;border-radius:12px;padding:14px;transition:transform .14s,border-color .18s,box-shadow .18s,color .18s;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;
    background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);color:var(--text)}
  .landing-stack-btn:hover{transform:translateY(-2px);border-color:var(--gold-dim);color:var(--gold-bright);box-shadow:0 12px 26px rgba(0,0,0,.5)}
  .landing-stack-btn:active{transform:translateY(1px) scale(.995)}
  .landing-stack-btn.guest{background:rgba(255,255,255,.03)}
  /* ONE-TAP entry (v222): big name field + gold "Enter the Cage", cloud account demoted to small links */
  .landing-name{width:100%;box-sizing:border-box;text-align:center;border-radius:12px;padding:15px 14px;margin-bottom:2px;
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:18px;letter-spacing:1px;color:var(--text);
    background:rgba(255,255,255,.04);border:1px solid var(--line);transition:border-color .18s,box-shadow .18s,background .18s}
  .landing-name::placeholder{color:var(--muted);font-weight:500;letter-spacing:.5px}
  .landing-name:focus{outline:none;border-color:var(--gold);background:rgba(212,175,55,.06);box-shadow:0 0 0 3px rgba(212,175,55,.14)}
  .landing-alt{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
  .landing-alt-txt{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.5px;color:var(--muted)}
  .landing-alt-sep{color:var(--gold-dim);opacity:.6}
  .landing-link{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:13.5px;
    letter-spacing:.5px;color:var(--gold-dim);text-decoration:underline;text-underline-offset:3px;padding:4px 6px;transition:.15s}
  .landing-link:hover{color:var(--gold-bright)}
  .menu-tolanding{display:block;margin:14px auto 0;background:none;border:none;cursor:pointer;
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    color:var(--gold-dim);text-decoration:underline;text-underline-offset:3px;padding:6px 10px;transition:.15s}
  .menu-tolanding:hover{color:var(--gold-bright)}
  .menu-tolanding.hidden{display:none}

  .menu-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dim);text-align:left;margin-bottom:9px;font-weight:600}
  .menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}

  /* (Mode Select + Multiplayer Hub styles removed — unified into the career hub PvP tab.) */
  .linklike{background:none;border:none;color:var(--gold-dim);cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.5px;text-decoration:underline;padding:2px 4px}
  .linklike:hover{color:var(--gold-bright)}
  #screen-menu{position:relative}
  /* chip row used by the Records/profile screen (kept independent of the menu) */
  .sc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

  /* narrow-screen safety: keep the brand + showcase clean at ~320px */
  @media(max-width:560px){
    #screen-menu{padding-top:22px}
    .menu-title{font-size:46px}
    .menu-tag{letter-spacing:5px}
    .fighter-showcase .fs-name{font-size:19px}
    .fighter-showcase .fs-line{font-size:12px}
    .fighter-showcase .fs-line .dot{margin:0 5px}
    .menu-cta .cta-title{font-size:18px;letter-spacing:1.5px}
  }

  /* ---------- Main Menu nav (battle-mode buttons) ---------- */
  .menu-nav{display:flex;flex-direction:column;gap:11px;margin-top:4px}
  .menu-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,#101a33,#0a1020);border:1px solid var(--line);border-radius:14px;
    padding:13px 15px;color:var(--text);transition:transform .14s, border-color .18s, box-shadow .18s;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .menu-btn:hover{transform:translateY(-2px);border-color:var(--gold-dim);box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
  .menu-btn:active{transform:translateY(1px) scale(.995)}
  .menu-btn .mb-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(145deg,#1c2742,#0c1322);border:1px solid var(--line);color:var(--gold-bright)}
  .menu-btn .mb-ico .mmi{width:23px;height:23px;display:block}
  .menu-btn .mb-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
  .menu-btn .mb-title{font-family:'Barlow Condensed';font-weight:700;font-size:19px;letter-spacing:1px}
  .menu-btn .mb-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-btn .mb-arrow{color:var(--muted);font-size:18px;transition:.18s}
  .menu-btn:hover .mb-arrow{color:var(--gold-bright);transform:translateX(3px)}
  .menu-btn.primary{background:linear-gradient(180deg,#2a210b,#15110a);border-color:var(--gold-dim);padding:15px 15px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(212,175,55,.12)}
  .menu-btn.primary .mb-ico{background:linear-gradient(145deg,var(--gold-bright),var(--gold));color:#1a1305;border-color:var(--gold)}
  .menu-btn.primary .mb-title{color:var(--gold-bright);font-size:20px}
  .menu-btn.primary:hover{border-color:var(--gold);box-shadow:0 16px 34px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.09)}

  /* ---------- Sub-screen shell (settings / records / about) ---------- */
  #screen-settings,#screen-records,#screen-about,#screen-account{display:flex;justify-content:center;padding-top:10px}
  .subscreen{width:100%;max-width:560px;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
  .subscreen-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .subscreen-head .sh-title{font-family:'Barlow Condensed';font-weight:700;font-size:30px;letter-spacing:1px;line-height:1}
  .subscreen-head .sh-title span{color:var(--gold)}
  .subscreen-head .sh-emblem{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
    background:linear-gradient(145deg,#222e4d,#0b1020);border:1px solid var(--gold-dim);color:var(--gold-bright)}
  .subscreen-head .sh-emblem .mmi{width:24px;height:24px;display:block}

  /* ===== PLAYER PROFILE DETAIL (online presence) — browse-list styles removed with the browse list ===== */
  /* public profile detail */
  .dir-back{margin-bottom:12px}
  .dir-profile{text-align:center}
  .dir-profile .dp-status{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 12px;margin-bottom:12px}
  .dir-profile .dp-status.on{color:#7be0a6;border-color:rgba(123,224,166,.4)}
  .dir-profile .dp-status.day{color:#f0c84a;border-color:rgba(240,200,74,.4)}
  .dir-profile .dp-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;color:#fff;line-height:1.05}
  .dir-profile .dp-nick{color:var(--gold);font-style:italic;font-size:15px;margin-top:2px}
  .dir-profile .dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;text-align:left}
  .dir-profile .dp-stat{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
  .dir-profile .dp-stat i{display:block;font-style:normal;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .dir-profile .dp-stat b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--gold-bright)}
  @media(max-width:560px){ .dir-profile .dp-grid{grid-template-columns:1fr} }
  /* M17 S2 — PvP challenge control inside a directory profile */
  .dir-profile .dp-challenge{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .dir-profile .dpc-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.6px}
  .dir-profile .dpc-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}
  .dir-profile .dpc-note{margin-top:10px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
  .dir-profile .dpc-note.warn{color:#ffb3b3}
  .dir-profile .dpc-note.ok{color:#7be0a6}
  .dir-profile .dpc-note b{color:var(--gold-bright);font-weight:700}

  /* (incoming-challenge count now uses the shared .gnav-dot.count on the PvP nav tab) */
  /* M17 S3 — inbox (now inside the career hub PvP tab) */
  .pvp-inbox-wrap{margin:4px 0 18px}
  .pvp-inbox-head{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1px;font-size:13px;text-transform:uppercase;
    color:var(--gold-bright);margin-bottom:10px}
  .pvp-inbox-count{color:var(--muted);font-weight:600}
  .pvp-inbox-msg{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--muted);
    background:rgba(255,255,255,.02);border:1px dashed var(--line);border-radius:12px;padding:14px;text-align:center}
  .pvp-card{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);
    border-left:3px solid var(--gold);border-radius:13px;padding:13px 15px;margin-bottom:10px}
  .pvp-card.resolving{border-left-color:#6fb0ff}
  .pvp-card.resolving .pvp-card-exp{color:#9cc6ff;opacity:1}
  .pvp-card-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;color:#fff;line-height:1.1}
  .pvp-card-nick{color:var(--gold);font-style:italic;font-weight:400;font-size:13px;margin-left:5px}
  .pvp-card-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:3px}
  .pvp-card-sub b{color:var(--gold-bright)}
  .pvp-card-exp{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);opacity:.8;margin-top:3px}
  .pvp-card-actions{display:flex;flex-direction:column;gap:7px}
  .pvp-card .btn.sm{padding:7px 16px;font-size:12.5px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5px;border-radius:9px}
  .pvp-card .btn.sm:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
  .pvp-card-msg{grid-column:1 / -1;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;line-height:1.35}
  .pvp-card-msg:empty{display:none}
  .pvp-card-msg.ok{color:#7be0a6}
  .pvp-card-msg.warn{color:#ffb3b3}
  /* Part B — inline "Challenge a Fighter" list in the PvP tab */
  .pvp-chal-list{margin-top:10px}
  .pvp-chal-row{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;
    background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px}
  .pvp-chal-main{min-width:0}
  .pvp-chal-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pvp-chal-nick{color:var(--gold);font-style:italic;font-weight:400;font-size:12px;margin-left:5px}
  .pvp-chal-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted);margin-top:2px}
  .pvp-chal-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.5px;padding:7px 14px;border-radius:9px;white-space:nowrap}
  .pvp-chal-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
  .pvp-chal-msg{grid-column:1 / -1;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;line-height:1.35}
  .pvp-chal-msg:empty{display:none}
  .pvp-chal-msg.ok{color:#7be0a6}
  .pvp-chal-msg.warn{color:#ffb3b3}
  /* Global online presence — "🟢 X Online" pill (header + menu) + the "Online Now" panel */
  .online-pill{display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;
    background:rgba(123,224,166,.1);border:1px solid rgba(123,224,166,.4);border-radius:20px;padding:5px 12px;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.6px;color:#9fe9bf;transition:.15s}
  .online-pill:hover{border-color:#7be0a6;background:rgba(123,224,166,.18)}
  .online-pill .op-dot{font-size:9px;line-height:1}
  .online-pill .op-num{color:#fff;font-size:13px}
  .online-pill .op-lab{text-transform:uppercase;opacity:.85}
  .menu-online{margin:14px auto 0}
  .online-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;
    background:rgba(4,7,13,.82);backdrop-filter:blur(3px);animation:fadein .2s ease both;padding:60px 18px 24px;overflow:auto}
  .online-card{width:100%;max-width:420px;border-radius:16px;background:linear-gradient(180deg,#161a24,#0d1017);
    border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);animation:rise .35s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
  .online-head{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
    letter-spacing:1px;color:#fff;padding:15px 16px;border-bottom:1px solid var(--line)}
  .online-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px}
  .online-x:hover{color:#fff}
  .online-list{padding:12px 14px 16px}
  .online-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;cursor:pointer;
    background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:8px;transition:.14s}
  .online-row:hover{border-color:var(--gold-dim);background:rgba(255,255,255,.045);transform:translateY(-1px)}
  .online-dot{font-size:11px;line-height:1}
  .online-main{min-width:0}
  .online-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .online-nick{color:var(--gold);font-style:italic;font-weight:400;font-size:12px;margin-left:5px}
  .online-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .online-arrow{color:var(--muted);font-size:16px}
  /* ---- Player Feedback — header button + capture panel ---- */
  .hdr-feedback{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--gold-bright);
    font-size:16px;line-height:1;cursor:pointer;border-radius:10px;padding:7px 9px;margin-right:8px;transition:.14s}
  .hdr-feedback:hover{border-color:var(--gold-dim);background:rgba(255,255,255,.08);transform:translateY(-1px)}
  .fb-ov{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-start;justify-content:center;
    background:rgba(4,7,13,.82);backdrop-filter:blur(3px);animation:fadein .2s ease both;padding:60px 18px 24px;overflow:auto}
  .fb-card{width:100%;max-width:440px;border-radius:16px;background:linear-gradient(180deg,#161a24,#0d1017);
    border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);animation:rise .35s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
  .fb-head{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
    letter-spacing:.6px;color:#fff;padding:15px 16px;border-bottom:1px solid var(--line)}
  .fb-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px}
  .fb-x:hover{color:#fff}
  .fb-body{padding:14px 16px 18px}
  .fb-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);margin-bottom:12px}
  .fb-lab{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.3px;
    text-transform:uppercase;color:var(--gold-bright);margin:0 0 6px}
  .fb-select,.fb-text{width:100%;box-sizing:border-box;background:rgba(255,255,255,.03);border:1px solid var(--line);
    border-radius:10px;color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;padding:10px 12px;margin-bottom:12px}
  .fb-select:focus,.fb-text:focus{outline:none;border-color:var(--gold-dim);background:rgba(255,255,255,.05)}
  .fb-text{resize:vertical;min-height:96px;line-height:1.4}
  .fb-msg{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;line-height:1.35;margin-bottom:10px}
  .fb-msg:empty{display:none}
  .fb-msg.warn{color:#ffb3b3}
  .fb-send{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.6px}
  .fb-thanks{padding:34px 22px;text-align:center}
  .fb-thanks-ic{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:26px;color:#0d1017;background:var(--gold-bright);font-weight:800}
  .fb-thanks-tx{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#fff;line-height:1.35}
  /* Social V1 — Friends list + requests */
  .social-list{margin-top:8px}
  .social-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--gold-bright);margin:14px 0 8px}
  .social-sub:first-child{margin-top:2px}
  .social-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
    background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px}
  .social-friend-profile{cursor:pointer;transition:.14s}
  .social-friend-profile:hover,.social-friend-profile:focus-visible{border-color:var(--gold-dim);background:rgba(255,255,255,.045);outline:none}
  .social-find-rankings{margin-top:9px}
  .social-dot{font-size:11px;line-height:1;text-align:center}
  .social-main{min-width:0}
  .social-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .social-sub2{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted);margin-top:2px}
  .social-actions{display:flex;gap:6px}
  .social-row .btn.sm{padding:7px 13px;font-size:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5px;border-radius:9px;white-space:nowrap}
  .social-row .btn.sm:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
  .social-msg{grid-column:1 / -1;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;line-height:1.35}
  .social-msg:empty{display:none}
  .social-msg.warn{color:#ffb3b3}
  /* "Add Friend" control inside a directory/rankings profile */
  .dir-profile .dp-friend{margin-top:12px}
  .dir-profile .dp-friend .btn.full{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.6px}
  .dir-profile .dp-friend .btn.full:disabled{opacity:.55;cursor:default}
  /* M17 S4 — PvP result overlay */
  .pvp-result-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
    background:rgba(4,7,13,.82);backdrop-filter:blur(3px);animation:fadein .2s ease both;padding:24px}
  .pvp-result-card{width:100%;max-width:380px;text-align:center;border-radius:18px;padding:30px 26px;
    background:linear-gradient(180deg,#161a24,#0d1017);border:1px solid var(--line);
    box-shadow:0 24px 60px rgba(0,0,0,.6);animation:rise .4s cubic-bezier(.2,.8,.2,1) both;
    max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain}
  .pvp-result-card.win{border-color:rgba(212,175,55,.55);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(212,175,55,.18)}
  .pvp-result-card.loss{border-color:rgba(232,74,79,.4)}
  .pvp-result-kicker{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
  .pvp-result-verdict{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:46px;letter-spacing:2px;line-height:1.05;margin:8px 0 14px}
  .pvp-result-verdict.win{color:var(--gold-bright);text-shadow:0 0 24px rgba(212,175,55,.45)}
  .pvp-result-verdict.loss{color:#ff8b8f}
  .pvp-result-line{font-family:'Inter',sans-serif;font-weight:600;font-size:16px;color:#e8ecf2;line-height:1.4}
  .pvp-result-line b{color:#fff;font-weight:700}
  .pvp-result-method{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.6px;color:var(--gold);margin-top:6px;text-transform:uppercase}
  .pvp-result-close{margin-top:22px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.8px}
  .pvp-result-rank{margin-top:12px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--muted)}
  .pvp-result-rank b{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5px}

  /* M18 S1 — Fight Results list rows */
  .pvp-results-list{margin-top:10px}
  .pvp-result-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;cursor:pointer;
    background:rgba(255,255,255,.022);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:8px;transition:.14s}
  .pvp-result-row:hover,.pvp-result-row:focus-visible{border-color:var(--gold-dim);background:rgba(255,255,255,.045);transform:translateY(-1px);outline:none}
  .pvp-result-row.win{border-left-color:#7be0a6}
  .pvp-result-row.loss{border-left-color:#ff8b8f}
  .pvp-result-row.unseen{background:rgba(212,175,55,.07)}
  .pvp-rivalry-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 10px;padding:11px 12px;border:1px solid rgba(232,74,79,.28);border-radius:12px;background:linear-gradient(135deg,rgba(232,74,79,.09),rgba(255,255,255,.018))}
  .pvp-rivalry-summary>div{min-width:0}.pvp-rivalry-summary span{display:block;color:#ff9a9e;font-family:'Inter',sans-serif;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .pvp-rivalry-summary b{display:block;margin-top:2px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:16px;line-height:1.05}
  .pvp-rivalry-summary small{display:block;margin-top:3px;overflow:hidden;color:var(--muted);font-family:'Inter',sans-serif;font-size:9.5px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
  .pvp-rivalry-summary .btn{flex:0 0 auto;margin:0}
  .prr-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:1px;padding:4px 9px;border-radius:7px;line-height:1}
  .prr-badge.win{color:#0c1a12;background:linear-gradient(180deg,#8ff0bd,#37c46f)}
  .prr-badge.loss{color:#1a0c0c;background:linear-gradient(180deg,#ffb3b6,#e8484f)}
  .prr-main{min-width:0}
  .prr-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prr-new{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;color:#15110a;background:var(--gold-bright);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle}
  .prr-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prr-arrow{color:var(--muted);font-size:16px}
  /* M18 S1 — fight report overlay (extends .pvp-result-card) */
  .fr-card{max-width:440px}
  .fr-date{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:.5px;color:var(--muted);margin-top:4px}
  .fr-snapshot-label{margin-top:18px;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .fr-matchup{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:9px;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.022);text-align:left}
  .fr-matchup>div{display:flex;min-width:0;flex-direction:column;gap:2px}.fr-matchup>div:last-child{text-align:right}
  .fr-matchup small{font-family:'Inter',sans-serif;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .fr-matchup b{overflow:hidden;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:17px;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}
  .fr-matchup span{color:var(--muted);font-family:'Inter',sans-serif;font-size:9px;line-height:1.35}
  .fr-matchup i{color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:12px;font-style:normal;font-weight:700}
  .fr-rivalry{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding:11px 12px;border:1px solid rgba(232,74,79,.25);border-radius:11px;background:rgba(232,74,79,.055);text-align:left}
  .fr-rivalry>span{color:#ff9a9e;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .fr-rivalry>b{color:#fff;font-family:'Inter',sans-serif;font-size:11px}.fr-rivalry>small{color:var(--muted);font-family:'Inter',sans-serif;font-size:8.5px;line-height:1.35}
  .fr-rivalry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .fr-rivalry-grid>div{min-width:0;padding:7px 4px;border:1px solid rgba(255,255,255,.065);border-radius:8px;background:rgba(255,255,255,.025);text-align:center}
  .fr-rivalry-grid b{display:block;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:15px;line-height:1}.fr-rivalry-grid small{display:block;margin-top:3px;color:var(--muted);font-family:'Inter',sans-serif;font-size:7.5px;line-height:1.25}
  .fr-turning{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:11px 12px;border:1px solid rgba(212,175,55,.24);border-radius:11px;background:rgba(212,175,55,.07);text-align:left}
  .fr-turning b{color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  .fr-turning span{color:#dce2eb;font-family:'Inter',sans-serif;font-size:11px;line-height:1.45}
  .fr-pbp{margin-top:16px;text-align:left;border-top:1px solid var(--line);padding-top:12px}
  .fr-round{margin-bottom:10px}
  .fr-round-h{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-bright);margin-bottom:3px}
  .fr-round-stats{display:flex;flex-direction:column;gap:2px;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .fr-round-stats b{color:#fff;font-weight:700}
  .fr-unavailable{color:var(--muted);font-family:'Inter',sans-serif;font-size:11px;line-height:1.45;text-align:center}
  .fr-current-profile{display:flex;flex-direction:column;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .fr-current-profile small{color:var(--muted);font-family:'Inter',sans-serif;font-size:9px;line-height:1.35}
  .fr-current-profile .btn{margin:0}
  @media(max-width:420px){
    .pvp-result-ov{padding:10px}.pvp-result-card{padding:22px 14px;max-height:calc(100dvh - 20px)}
    .pvp-rivalry-summary{align-items:flex-start;flex-direction:column}.pvp-rivalry-summary small{white-space:normal}.pvp-rivalry-summary .btn{width:100%}
    .fr-matchup{grid-template-columns:1fr;padding:10px;text-align:center}
    .fr-matchup>div:last-child{text-align:center}.fr-matchup i{padding:2px 0}
    .fr-rivalry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  /* M17 S5 — "Your Rank" card in the hub + tier colour chips */
  .pvp-rank-card{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;margin:4px 0 16px;
    padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
  .pvp-rank-card.ranked{border-color:rgba(212,175,55,.4);box-shadow:0 0 26px rgba(212,175,55,.1)}
  .pvp-security-notice{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin:0 0 16px;padding:15px 17px;
    border:1px solid rgba(212,175,55,.48);border-radius:14px;background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(8,14,28,.94));
    box-shadow:0 12px 32px rgba(0,0,0,.22)}
  .pvp-security-notice[hidden]{display:none}
  .pvp-security-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(212,175,55,.42);border-radius:12px;
    background:rgba(212,175,55,.11);font-size:20px}
  .pvp-security-notice strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:18px;letter-spacing:.45px;color:var(--gold-bright)}
  .pvp-security-notice p{margin:3px 0 0;color:var(--muted);font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.45}
  .pvp-rank-label{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .pvp-rank-tier{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;letter-spacing:1px;line-height:1.1;color:var(--muted)}
  .pvp-rank-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);opacity:.85}
  .pvp-ladder-context{width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .plc-state{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-family:'Inter',sans-serif;font-size:10px;line-height:1.4;text-align:center}
  .plc-state b{color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:15px}.plc-state span{color:#c9d0dc}.plc-state small{color:var(--muted);font-size:8.5px}
  .plc-position{display:flex;align-items:baseline;justify-content:center;gap:6px}.plc-position b{color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:27px;line-height:1}
  .plc-position span{color:#cbd2dd;font-family:'Inter',sans-serif;font-size:9.5px}
  .plc-neighbors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
  .plc-neighbor,.plc-leader{display:flex;min-width:0;min-height:58px;flex-direction:column;justify-content:center;padding:8px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);text-align:left}
  .plc-neighbor{color:inherit;cursor:pointer;transition:.14s}.plc-neighbor:hover,.plc-neighbor:focus-visible{border-color:var(--gold-dim);background:rgba(255,255,255,.05);outline:none}
  .plc-neighbor small,.plc-leader small{color:var(--muted);font-family:'Inter',sans-serif;font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
  .plc-neighbor b,.plc-leader b{display:block;margin-top:2px;overflow:hidden;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:13px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
  .plc-neighbor span{display:block;margin-top:3px;color:var(--muted);font-family:'Inter',sans-serif;font-size:7.5px}
  .plc-neighbor.above{border-color:rgba(212,175,55,.28)}.plc-neighbor.below{border-color:rgba(232,74,79,.2)}
  .plc-leader{grid-column:1/-1;border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.07);text-align:center}
  .plc-neighbors>:only-child,.plc-leader + .plc-neighbor{grid-column:1/-1}
  .plc-truth{display:block;margin-top:7px;color:var(--muted);font-family:'Inter',sans-serif;font-size:7.5px;text-align:center}
  /* tier colours (shared by the rank card, profile cell, and result card) */
  .tier-unranked{color:var(--muted)!important}
  .tier-bronze{color:#cd7f32!important;text-shadow:0 0 14px rgba(205,127,50,.3)}
  .tier-silver{color:#c4ccd8!important;text-shadow:0 0 14px rgba(196,204,216,.3)}
  .tier-gold{color:var(--gold-bright)!important;text-shadow:0 0 16px rgba(212,175,55,.4)}
  .tier-platinum{color:#cfeef2!important;text-shadow:0 0 16px rgba(160,224,232,.4)}
  .tier-diamond{color:#8fdcff!important;text-shadow:0 0 18px rgba(143,220,255,.5)}
  .tier-olympus{background:linear-gradient(100deg,#e7b94a,#fff8db,#e7b94a);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:#f7dd88!important;text-shadow:0 0 22px rgba(212,175,55,.5)}

  /* M19 — Rankings tab: division selector + ladder rows */
  .rank-divsel{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0 6px}
  .rank-div-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.6px;color:var(--muted);cursor:pointer;
    background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:9px 4px;transition:.15s}
  .rank-div-btn:hover{color:var(--text);border-color:var(--gold-dim)}
  .rank-div-btn.active{color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold);
    box-shadow:0 5px 14px rgba(212,175,55,.35)}
  .rank-div-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;
    color:var(--gold-bright);margin:14px 0 10px}
  .rank-row{display:grid;grid-template-columns:34px 20px 1fr auto;align-items:center;gap:11px;cursor:pointer;
    background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:8px;transition:.15s}
  .rank-row:hover,.rank-row:focus-visible{border-color:var(--gold-dim);background:rgba(255,255,255,.045);transform:translateY(-1px);outline:none}
  .rank-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;color:var(--muted);text-align:center}
  .rank-dot{font-size:11px;line-height:1;text-align:center}
  .rank-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#fff;line-height:1.15}
  .rank-nick{color:var(--gold);font-style:italic;font-weight:400;font-size:12.5px;margin-left:5px}
  .rank-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:2px}
  .rank-rec{text-align:right;font-family:'Barlow Condensed',sans-serif;line-height:1.1}
  .rank-rec b{font-weight:700;font-size:15px;color:var(--text)}
  .rank-rec i{display:block;font-style:normal;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .rank-belt{display:inline-block;margin-left:8px;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1px;
    color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-radius:5px;padding:2px 7px;vertical-align:middle}
  /* champion (#1) — gold-accented row */
  .rank-row.champ{border-color:rgba(212,175,55,.55);background:linear-gradient(180deg,rgba(212,175,55,.1),rgba(212,175,55,.03));
    box-shadow:0 0 20px rgba(212,175,55,.12)}
  .rank-row.champ .rank-num{color:var(--gold-bright);font-size:21px}
  .rank-ladder .pvp-inbox-msg{margin-top:8px}

  /* ===== "ENTER THE CAGE" auth wall (logged-out account screen) ===== */
  .auth-wall{max-width:360px;margin:0 auto;text-align:center;padding-top:18px;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
  .auth-wall .auth-emblem{margin:0 auto 12px}
  .auth-wall .auth-title{font-size:46px;font-weight:700;line-height:.95;letter-spacing:1.5px;text-shadow:0 3px 20px rgba(212,175,55,.18)}
  .auth-wall .auth-title span{color:var(--gold);font-weight:500}
  .auth-wall .auth-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:4px;text-transform:uppercase;
    color:var(--gold-bright);opacity:.92;margin:8px 0 20px}
  .auth-wall .acc-form{text-align:left}
  .auth-wall .acc-form .btn{margin-top:6px;letter-spacing:1.5px}
  .auth-wall .auth-switch{margin-top:16px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
  .auth-wall .auth-switch .linklike{font-size:13px}
  @media(max-width:560px){ .auth-wall .auth-title{font-size:40px} }

  /* ===== M13 ACCOUNT screen ===== */
  .acc-intro{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:16px}
  .acc-intro b{color:var(--text)}
  .acc-loading{font-family:'Inter',sans-serif;font-weight:600;color:var(--muted);text-align:center;padding:22px}
  .acc-tabs{display:flex;gap:8px;margin-bottom:16px}
  .acc-tab{flex:1;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    padding:10px;border-radius:10px;border:1px solid var(--line);background:#0b1322;color:var(--muted);cursor:pointer;transition:.15s}
  .acc-tab.on{border-color:var(--gold);color:var(--gold-bright);background:rgba(212,175,55,.08)}
  .acc-form{display:flex;flex-direction:column;gap:13px}
  .acc-fld{display:flex;flex-direction:column;gap:5px}
  .acc-fld span{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
  .acc-fld input{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--text);
    background:#0a1120;border:1px solid var(--line);border-radius:10px;padding:11px 13px;outline:none;transition:.15s}
  .acc-fld input:focus{border-color:var(--gold-dim);background:#0c1426}
  .acc-fld .acc-hint{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:1px}
  .acc-form .btn{margin-top:4px}
  .acc-ok{margin-top:11px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:#7be0a6;text-align:center;line-height:1.4}
  .acc-ok:empty{margin:0}
  .acc-err{min-height:18px;margin-top:8px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:#ff6a72;text-align:center}
  .acc-card-in{text-align:center;padding:8px 4px}
  .acc-badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.5px;
    color:#0a1018;background:linear-gradient(90deg,#7be0a6,#46c483);border-radius:8px;padding:5px 12px;margin-bottom:14px}
  .acc-who{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
  .acc-who .acc-uname{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px;color:var(--gold-bright)}
  .acc-who .acc-email{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
  /* M13 Piece 5 — email-verification banner (grace = amber, locked = red); never blocks the game */
  .acc-verify{border-radius:12px;padding:13px 14px;margin:0 auto 14px;max-width:440px;text-align:center}
  .acc-verify.grace{border:1px solid #c9a132;background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.14),transparent 64%),linear-gradient(180deg,#241f10,#130f07)}
  .acc-verify.locked{border:1px solid #c9482f;background:radial-gradient(ellipse at 50% 0,rgba(224,65,46,.14),transparent 64%),linear-gradient(180deg,#241410,#130a07)}
  .acc-verify-h{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.8px;margin-bottom:5px}
  .acc-verify.grace .acc-verify-h{color:#f0c84a}
  .acc-verify.locked .acc-verify-h{color:#ff8a6a}
  .acc-verify-s{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:380px;margin:0 auto 11px}
  .acc-verify-s b{color:var(--text)}
  .acc-verify .btn{width:100%;max-width:280px}
  /* M13 Piece 5 — home-screen "Online Beta" teaser (reads as an invitation; opens the Account screen) */
  /* minimal Sign Out on the brand home (replaced the old Account card + Online Beta teaser) */
  .menu-signout{display:block;margin:16px auto 0;background:none;border:none;cursor:pointer;
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:6px 10px;transition:.15s}
  .menu-signout:hover{color:#ff9da0}
  .menu-signout:disabled{opacity:.5;cursor:default}
  /* M13 Piece 4 — save-conflict prompt (shows both sides; never silently overwrites the newer save) */
  .acc-conflict{border:1px solid #c9772f;border-radius:14px;padding:16px;margin:0 auto;max-width:460px;text-align:center;
    background:radial-gradient(ellipse at 50% 0,rgba(224,120,40,.16),transparent 64%),linear-gradient(180deg,#241a10,#130d07)}
  .acc-cf-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.4px;color:#ffae6a;margin-bottom:8px}
  .acc-cf-amb{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:#f0c89a;line-height:1.4;margin-bottom:8px}
  .acc-cf-lead{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);line-height:1.5;max-width:400px;margin:0 auto 14px}
  .acc-cf-lead b{color:var(--text)}
  .acc-cf-sides{display:flex;gap:10px;justify-content:center;margin-bottom:15px}
  .acc-cf-side{flex:1;max-width:200px;background:#0b1322;border:1px solid var(--line);border-radius:11px;padding:10px 11px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--text);line-height:1.45}
  .acc-cf-side .cf-h{display:block;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;letter-spacing:1.5px;color:var(--muted);margin-bottom:5px}
  .acc-cf-side .cf-v b{color:var(--gold-bright)}
  .acc-cf-actions{display:flex;flex-direction:column;gap:9px}
  .acc-cf-actions .btn{width:100%}
  /* M13 Piece 3 — import-local-fighter offer (highlighted to draw the eye) */
  .acc-import{border:1px solid var(--gold);border-radius:14px;padding:16px;margin:0 auto 16px;max-width:440px;text-align:center;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.16),transparent 62%),linear-gradient(180deg,#1a2236,#0b1120);box-shadow:0 0 22px rgba(212,175,55,.18)}
  .acc-import-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1.8px;color:var(--gold-bright);margin-bottom:7px}
  .acc-import-who{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;letter-spacing:.4px;color:var(--text);margin-bottom:5px}
  .acc-import-who b{color:var(--gold-bright)}
  .acc-import-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:380px;margin:0 auto 13px}
  .acc-import-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .acc-import-actions .btn{flex:1;min-width:130px}
  .acc-import .acc-err{margin-top:9px}
  /* automatic cloud-save status indicator (replaces the old manual Save-to-Cloud control) */
  .acc-synced{display:inline-block;margin:2px auto 16px;padding:7px 14px;border-radius:20px;
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.6px;
    color:#7be0a6;background:rgba(123,224,166,.10);border:1px solid rgba(123,224,166,.4)}
  .acc-synced .acc-synced-when{color:var(--muted);font-weight:600;letter-spacing:.3px}
  .acc-synced.pending{color:var(--gold-bright);background:rgba(212,175,55,.08);border-color:var(--gold-dim)}
  .acc-synced.locked{color:#ff8a6a;background:rgba(224,65,46,.10);border-color:rgba(224,65,46,.4)}
  .acc-cloud{background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin:0 auto 14px;max-width:420px}
  .acc-cloud-status{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.4;margin-bottom:11px}
  .acc-cloud-status b{color:var(--text)}
  .acc-cloud-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .acc-cloud-actions .btn{flex:1;min-width:130px}
  .acc-cloud-actions .btn:disabled{opacity:.45;cursor:not-allowed}
  .acc-note{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:380px;margin:0 auto 16px}
  .acc-offline{text-align:center;padding:22px 8px}
  .acc-off-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:1px;color:var(--text);margin-bottom:6px}
  .acc-off-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);line-height:1.5;max-width:400px;margin:0 auto 16px}

  /* settings rows + toggle */
  .set-group{background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:16px;
    padding:2px 18px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .set-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
  .set-row:last-child{border-bottom:none}
  .set-row .set-info{flex:1;min-width:0}
  .set-row .set-name{font-family:'Barlow Condensed';font-weight:600;font-size:17px;letter-spacing:.5px}
  .set-row .set-desc{font-size:13px;color:var(--muted);margin-top:2px}
  .toggle{position:relative;width:52px;height:28px;border-radius:16px;background:#0a1020;border:1px solid var(--line);
    cursor:pointer;transition:.2s;flex-shrink:0}
  .toggle::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
    background:var(--muted);transition:.2s}
  .toggle.on{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  .toggle.on::after{left:26px;background:#1a1305}
  .set-group.set-danger{border-color:rgba(232,74,79,.3)}
  .btn.danger{background:linear-gradient(180deg,#3a1518,#250d10);color:#ff9da0;border:1px solid rgba(232,74,79,.4);box-shadow:none}
  .btn.danger::after{display:none}
  .btn.danger:hover:not(:disabled){background:linear-gradient(180deg,#511a1f,#30070b);color:#fff;border-color:#ff6b70;box-shadow:0 10px 26px rgba(232,74,79,.3)}

  /* ---------- Records / Stat profile ---------- */
  .rec-profile{display:flex;align-items:center;gap:16px;background:linear-gradient(180deg,#0e1830,#080d19);
    border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden}
  .rec-profile::before{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;
    background:radial-gradient(circle,rgba(212,175,55,.16),transparent 70%)}
  .rec-profile .rp-av{width:88px;flex-shrink:0;position:relative;z-index:1}
  .rec-profile .rp-mid{flex:1;z-index:1;min-width:0}
  .rec-profile .rp-name{font-family:'Barlow Condensed';font-weight:700;font-size:26px;line-height:1}
  .rec-profile .rp-nick{color:var(--gold);font-style:italic;font-size:14px;margin:2px 0 9px}
  .rec-bigrecord{text-align:center;flex-shrink:0;z-index:1;padding-left:6px}
  .rec-bigrecord .rb-num{font-family:'Barlow Condensed';font-weight:700;font-size:32px;line-height:1;color:var(--gold-bright)}
  .rec-bigrecord .rb-lab{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-top:3px}
  .rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
  .rec-tile{background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:14px;
    padding:15px 10px;text-align:center}
  .rec-tile .rt-num{font-family:'Barlow Condensed';font-weight:700;font-size:29px;line-height:1;color:var(--text)}
  .rec-tile .rt-num.gold{color:var(--gold-bright)}
  .rec-tile .rt-lab{font-size:10.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-top:6px}
  .rec-history{background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:16px;padding:4px 16px}
  .rec-hrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
  .rec-hrow:last-child{border-bottom:none}
  .rec-hrow .rh-badge{font-family:'Barlow Condensed';font-weight:700;font-size:12px;width:26px;height:26px;border-radius:7px;
    display:grid;place-items:center;flex-shrink:0}
  .rec-hrow .rh-badge.w{color:#7dffb4;background:rgba(55,196,111,.14);border:1px solid rgba(55,196,111,.4)}
  .rec-hrow .rh-badge.l{color:#ff9da0;background:rgba(232,74,79,.14);border:1px solid rgba(232,74,79,.4)}
  .rec-hrow .rh-opp{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rec-hrow .rh-method{color:var(--muted);font-size:12px;white-space:nowrap}
  .rec-empty{text-align:center;color:var(--muted);padding:46px 20px}
  .rec-empty .re-ico{margin:0 auto 14px;width:52px;height:52px;opacity:.4}
  .rec-empty .re-ico .mmi{width:52px;height:52px;display:block}

  /* ---------- About ---------- */
  .about-card{background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:16px;padding:24px;line-height:1.6}
  /* hype intro banner */
  .ab-hype{position:relative;overflow:hidden;text-align:center;margin:-4px 0 20px;padding:22px 18px;border-radius:14px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.15),transparent 70%),linear-gradient(180deg,#161d31,#0b1120);
    border:1px solid var(--gold-dim);box-shadow:0 0 30px rgba(212,175,55,.14),inset 0 1px 0 rgba(255,255,255,.05)}
  .ab-hype-head{font-family:'Barlow Condensed';font-weight:700;font-size:23px;line-height:1.12;letter-spacing:1px;
    color:var(--gold-bright);text-transform:uppercase;text-shadow:0 0 26px rgba(212,175,55,.5)}
  .ab-hype-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;color:var(--text);margin-top:10px;line-height:1.45}
  .ab-hype-sub b{color:var(--gold-bright);letter-spacing:.5px}
  .ab-hype-soon{margin-top:14px;display:inline-block;font-family:'Barlow Condensed';font-size:12px;letter-spacing:.6px;color:#9cc6ff;
    background:rgba(90,139,224,.1);border:1px solid rgba(90,139,224,.45);border-radius:20px;padding:6px 14px}
  .ab-hype-soon b{color:#cfe2ff}
  @media(max-width:560px){ .ab-hype-head{font-size:18px} }
  /* "A REAL FIGHT ENGINE" — bold celebratory callout */
  .ab-engine{position:relative;overflow:hidden;margin:24px 0 6px;padding:20px 20px 8px;border-radius:14px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.13),transparent 72%),linear-gradient(180deg,#171f33,#0b1120);
    border:1px solid var(--gold-dim);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 30px rgba(212,175,55,.13),inset 0 1px 0 rgba(255,255,255,.05)}
  .ab-engine::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim))}
  .ab-eng-head{font-family:'Barlow Condensed';font-weight:700;font-size:20px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--gold-bright);text-shadow:0 0 22px rgba(212,175,55,.45);margin-bottom:12px}
  .about-card .ab-engine p{color:var(--text);font-size:14.5px;line-height:1.55;margin-bottom:12px}
  .about-card .ab-engine p b{color:#fff}
  .ab-engine .ab-eng-gold{color:var(--gold-bright)}
  .ab-eng-kicker{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--gold-bright)!important;
    border-top:1px solid var(--line-soft);padding-top:12px}
  .ab-eng-kicker b{color:var(--gold-bright)!important}
  @media(max-width:560px){ .ab-eng-head{font-size:17px} }
  .about-card p{color:var(--muted);margin-bottom:14px}
  .about-card h3{font-family:'Barlow Condensed';color:var(--gold-bright);letter-spacing:1px;margin:20px 0 8px;font-size:14px;text-transform:uppercase}
  .about-card .ab-feat{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px;color:var(--text);font-size:14px}
  .about-card .ab-feat b{color:var(--gold-bright);font-family:'Barlow Condensed';font-weight:600;margin-right:4px}
  .about-card .ab-credits{font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:16px;margin-top:18px}
  .about-card .ab-credits b{color:var(--text)}

  /* reduced-motion setting */
  body.reduce-motion *{animation-duration:.001s!important;transition-duration:.04s!important}

  /* (old Story/Online Mode-Select cards removed — superseded by the unified hub PvP tab) */

  /* ---------- World Map ---------- */
  .worldmap{position:relative;width:100%;aspect-ratio:2/1;border-radius:14px;overflow:hidden;margin-top:6px;
    border:1px solid var(--line);
    background:
      radial-gradient(closest-side at 20% 42%, rgba(58,80,120,.55), rgba(58,80,120,0) 70%),
      radial-gradient(closest-side at 33% 78%, rgba(58,80,120,.5), rgba(58,80,120,0) 70%),
      radial-gradient(closest-side at 47% 30%, rgba(58,80,120,.5), rgba(58,80,120,0) 65%),
      radial-gradient(closest-side at 84% 48%, rgba(58,80,120,.55), rgba(58,80,120,0) 70%),
      linear-gradient(180deg,#0a1426,#070d1a);
    box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
  .worldmap::before{content:"";position:absolute;inset:0;opacity:.25;
    background-image:linear-gradient(rgba(120,150,200,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,200,.12) 1px,transparent 1px);
    background-size:38px 38px}
  .worldmap svg.route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .map-pin{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px}
  .map-pin .pin-dot{width:20px;height:20px;border-radius:50%;border:2px solid;display:grid;place-items:center;font-size:10px;font-weight:700;
    background:#0a0f1c;color:#fff}
  .map-pin .pin-lab{font-family:'Barlow Condensed';font-size:11px;letter-spacing:.5px;white-space:nowrap;
    background:rgba(6,9,15,.78);border:1px solid var(--line);border-radius:7px;padding:2px 7px;line-height:1.3}
  .map-pin .pin-lab .pc{color:var(--text)} .map-pin .pin-lab .pt{color:var(--muted);font-size:9px;display:block}
  .map-pin.done .pin-dot{border-color:var(--green);background:linear-gradient(145deg,#43d97e,#1f9e55);color:#06210f}
  .map-pin.lock{opacity:.45}
  .map-pin.lock .pin-dot{border-color:var(--line)}
  .map-pin.cur .pin-dot{border-color:var(--gold);background:linear-gradient(145deg,var(--gold-bright),var(--gold));color:#15110a;
    box-shadow:0 0 0 6px rgba(212,175,55,.18),0 0 18px rgba(212,175,55,.7);animation:pulseDot 2s ease-in-out infinite}
  .map-pin.cur .pin-lab{border-color:var(--gold-dim)}
  .map-pin.cur .pin-lab .pc{color:var(--gold-bright)}
  .map-legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
  .map-legend .lg-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:middle}
  .map-legend .lg-dot.done{background:#37c46f}
  .map-legend .lg-dot.cur{background:var(--gold)}
  .map-legend .lg-dot.lock{background:#2a3a5a}
  /* ---- staged map backdrops (grow local → national → world → olympus) ---- */
  .worldmap.stage-local{background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(120,140,180,.05) 17px 18px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(120,140,180,.05) 24px 25px),
    radial-gradient(circle at 28% 64%, rgba(150,110,70,.20), transparent 55%),
    radial-gradient(circle at 70% 34%, rgba(90,110,150,.20), transparent 55%),
    linear-gradient(180deg,#0b0f1a,#070a12)}
  .worldmap.stage-national{background:
    radial-gradient(58% 66% at 50% 56%, rgba(70,100,150,.40), rgba(40,60,100,0) 72%),
    radial-gradient(circle at 50% 50%, rgba(90,139,224,.14), transparent 60%),
    linear-gradient(180deg,#0a1020,#070a13)}
  .worldmap.stage-world{background:
    radial-gradient(closest-side at 20% 42%, rgba(58,80,120,.55), rgba(58,80,120,0) 70%),
    radial-gradient(closest-side at 33% 78%, rgba(58,80,120,.5), rgba(58,80,120,0) 70%),
    radial-gradient(closest-side at 47% 30%, rgba(58,80,120,.5), rgba(58,80,120,0) 65%),
    radial-gradient(closest-side at 84% 48%, rgba(58,80,120,.55), rgba(58,80,120,0) 70%),
    linear-gradient(180deg,#0a1426,#070d1a)}
  .worldmap.stage-olympus{background:
    radial-gradient(75% 95% at 50% 92%, rgba(212,175,55,.30), rgba(212,175,55,0) 70%),
    radial-gradient(circle at 50% 26%, rgba(247,221,136,.20), transparent 52%),
    linear-gradient(180deg,#191507,#0a0905)}
  .worldmap.stage-olympus::before{opacity:.08}
  .map-summit{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(212,175,55,.05), rgba(212,175,55,.17));
    clip-path:polygon(50% 16%, 88% 100%, 12% 100%);filter:drop-shadow(0 0 26px rgba(212,175,55,.45))}
  /* caption + stage breadcrumb */
  .map-caption{position:absolute;left:12px;top:10px;z-index:3;line-height:1.15}
  .map-caption .mc-stage{display:block;font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:1px;color:var(--gold-bright);text-shadow:0 2px 8px rgba(0,0,0,.75)}
  .map-caption .mc-scope{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .map-stages{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;align-items:center;gap:7px;z-index:3;flex-wrap:wrap;padding:0 8px}
  .map-stages .ms{font-family:'Barlow Condensed';font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);opacity:.55}
  .map-stages .ms.done{color:#7dffb4;opacity:.9}
  .map-stages .ms.cur{color:var(--gold-bright);opacity:1;text-shadow:0 0 10px rgba(212,175,55,.5)}
  .map-stages .ms-sep{color:var(--line);font-size:11px}
  /* the glowing gold Olympus summit node */
  .map-pin.oly .pin-dot{width:28px;height:28px;font-size:15px;border-color:var(--gold);
    background:radial-gradient(circle at 40% 30%,#fff7d6,var(--gold-bright) 55%,var(--gold));color:#15110a;
    box-shadow:0 0 0 7px rgba(212,175,55,.18),0 0 30px rgba(247,221,136,.9);animation:pulseDot 1.9s ease-in-out infinite}
  .map-pin.oly.lock .pin-dot{filter:grayscale(.55) brightness(.72);box-shadow:0 0 0 5px rgba(212,175,55,.1)}
  .map-pin.oly .pin-lab .pc{color:var(--gold-bright)}
  /* ---- Scout offer card ---- */
  .scout-card{border-color:var(--gold-dim)!important;background:linear-gradient(180deg,#161205,#0b0a06)!important;
    box-shadow:0 0 0 1px var(--gold-dim),0 18px 44px rgba(212,175,55,.14)!important;animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
  .scout-card .scout-badge{display:inline-block;font-family:'Barlow Condensed';font-size:11px;letter-spacing:3px;color:#15110a;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));padding:5px 13px;border-radius:20px;font-weight:700;margin-bottom:12px}
  .scout-card .scout-title{font-family:'Barlow Condensed';font-size:23px;margin:2px 0 8px;letter-spacing:.4px}
  .scout-card .scout-text{color:var(--muted);font-style:italic;line-height:1.6;margin-bottom:18px;max-width:580px}
  .scout-card .scout-actions{display:flex;gap:12px;flex-wrap:wrap}
  @media(max-width:520px){ .scout-card .scout-actions{flex-direction:column} .scout-card .scout-actions .btn{width:100%} }

  /* ---------- MMA custom icon set (replaces emojis) ---------- */
  .mmi{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:var(--gold-bright);vertical-align:-0.14em}
  .mmi svg{width:1em;height:1em;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
  .section-title .num .mmi{color:#15110a}
  .section-title .num .mmi svg{filter:none}
  .btn .mmi{color:inherit;margin-right:.2em}
  .badge-rank .mmi,.chip .mmi{margin-right:.28em}

  /* ---------- Cage scene (fight background) ---------- */
  .cage-scene{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:14px;
    background:radial-gradient(135% 105% at 50% -12%, #17273f 0%, #0b1324 40%, #05080f 100%)}
  .cage-scene .cs-crowd{position:absolute;left:0;right:0;top:0;height:34%;opacity:.9;
    background-image:
      radial-gradient(1.4px 1.4px at 8% 30%, rgba(245,221,136,.7), transparent 60%),
      radial-gradient(1.4px 1.4px at 18% 12%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1.4px 1.4px at 27% 38%, rgba(245,221,136,.55), transparent 60%),
      radial-gradient(1.4px 1.4px at 38% 18%, rgba(255,255,255,.45), transparent 60%),
      radial-gradient(1.4px 1.4px at 50% 8%, rgba(245,221,136,.6), transparent 60%),
      radial-gradient(1.4px 1.4px at 62% 22%, rgba(255,255,255,.45), transparent 60%),
      radial-gradient(1.4px 1.4px at 73% 34%, rgba(245,221,136,.55), transparent 60%),
      radial-gradient(1.4px 1.4px at 83% 14%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1.4px 1.4px at 92% 30%, rgba(245,221,136,.6), transparent 60%)}
  .cage-scene .cs-beam{position:absolute;top:-14%;width:50%;height:90%;pointer-events:none;mix-blend-mode:screen;
    background:linear-gradient(180deg, rgba(245,221,136,.20), rgba(245,221,136,0) 70%);filter:blur(9px)}
  .cage-scene .cs-beam.l{left:-4%;transform:skewX(15deg);transform-origin:top center}
  .cage-scene .cs-beam.r{right:-4%;transform:skewX(-15deg);transform-origin:top center}
  .cage-scene .cs-glow{position:absolute;top:-8%;left:50%;transform:translateX(-50%);width:72%;height:46%;pointer-events:none;
    background:radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.12), transparent 72%)}
  .cage-fence{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .cage-floor{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);width:152%;height:52%;
    clip-path:polygon(34% 0,66% 0,100% 50%,66% 100%,34% 100%,0 50%);
    background:linear-gradient(180deg,#caa23a,#6f561a)}
  .cage-floor .mat{position:absolute;inset:2.5px;clip-path:polygon(34% 0,66% 0,100% 50%,66% 100%,34% 100%,0 50%);
    background:radial-gradient(72% 92% at 50% 28%, #36456610, #36456600),
      radial-gradient(80% 100% at 50% 30%, #313e5b 0%, #1b2540 58%, #131a2e 100%)}
  .cage-floor .cage-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
    font-family:'Barlow Condensed';font-weight:700;font-size:clamp(30px,8vw,64px);color:rgba(212,175,55,.16);letter-spacing:2px}
  .cage-floor .cage-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;height:40%;
    border:2px solid rgba(212,175,55,.22);border-radius:50%}
  /* the live HUD ALWAYS sits clearly above any arena art — bars, labels & gas never covered */
  .fo-arena > .fo-status,.fo-arena > .fo-bars,.fo-arena > .fo-pos,.fo-arena > .fo-momentum,.fo-arena > .fo-feedwrap{position:relative;z-index:6}
  /* each fighter's bars/labels/gas get a subtle backing so the arena art can't bleed over the text */
  .fo-fighter .fmeta{background:rgba(7,11,20,.72);border:1px solid rgba(120,140,180,.14);border-radius:10px;padding:6px 9px}
  .fo-fighter.opp .fmeta{text-align:right}

  /* ===== THE STREETS — gritty underground look (dim, raw, concrete/warehouse; no gold cage) ===== */
  .cage-scene.streets{background:radial-gradient(130% 112% at 50% -10%, #191512 0%, #100c09 42%, #050403 100%)}
  .cage-scene.streets .st-wall{position:absolute;inset:0;opacity:.55;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 34px),    /* brick mortar lines */
      repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 2px, transparent 2px 86px),          /* warehouse pillars */
      linear-gradient(180deg, rgba(18,14,10,.75), transparent 42%)}
  .cage-scene.streets .st-fence{position:absolute;left:0;right:0;top:4%;height:50%;opacity:.16;z-index:2;
    background-image:linear-gradient(45deg,transparent 47%,#7d828c 47% 53%,transparent 53%),
                     linear-gradient(-45deg,transparent 47%,#7d828c 47% 53%,transparent 53%);
    background-size:13px 13px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 38%,#000 72%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 38%,#000 72%,transparent)}
  .cage-scene.streets .st-light{position:absolute;top:-12%;left:50%;transform:translateX(-50%);width:56%;height:64%;pointer-events:none;z-index:2;mix-blend-mode:screen;
    background:radial-gradient(50% 60% at 50% 0%, rgba(255,222,148,.28), rgba(255,222,148,.07) 46%, transparent 72%)}
  .cage-scene.streets .st-crowd{position:absolute;left:0;right:0;top:0;height:34%;opacity:1;z-index:1;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 52%, rgba(208,202,192,.5), transparent 60%),
      radial-gradient(1.5px 1.5px at 22% 30%, rgba(165,160,154,.45), transparent 60%),
      radial-gradient(1.5px 1.5px at 33% 58%, rgba(208,202,192,.4), transparent 60%),
      radial-gradient(1.5px 1.5px at 45% 26%, rgba(158,152,147,.45), transparent 60%),
      radial-gradient(1.5px 1.5px at 57% 52%, rgba(208,202,192,.45), transparent 60%),
      radial-gradient(1.5px 1.5px at 69% 30%, rgba(165,160,154,.4), transparent 60%),
      radial-gradient(1.5px 1.5px at 80% 56%, rgba(208,202,192,.4), transparent 60%),
      radial-gradient(1.5px 1.5px at 91% 32%, rgba(158,152,147,.45), transparent 60%)}
  .cage-scene.streets .st-floor{position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);width:152%;height:56%;z-index:2;
    background:radial-gradient(70% 96% at 50% 14%, #2a2520 0%, #16120d 60%, #0b0805 100%)}
  .cage-scene.streets .st-floor::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
    background-image:
      linear-gradient(58deg, transparent 49.6%, rgba(0,0,0,.6) 49.6% 50.2%, transparent 50.2%),
      linear-gradient(112deg, transparent 49.5%, rgba(0,0,0,.5) 49.5% 50.1%, transparent 50.1%),
      radial-gradient(38% 28% at 36% 58%, rgba(0,0,0,.45), transparent 70%),
      radial-gradient(30% 24% at 68% 66%, rgba(0,0,0,.4), transparent 70%)}

  /* ---------- Toast ---------- */
  #toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
    background:linear-gradient(180deg,#121b30,#0a0f1c);border:1px solid var(--gold-dim);color:var(--gold-bright);
    font-family:'Barlow Condensed';letter-spacing:1px;padding:13px 24px;border-radius:11px;opacity:0;transition:.3s;pointer-events:none;z-index:200;box-shadow:var(--shadow)}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  .hidden{display:none !important}
  .center{text-align:center}
  .mt{margin-top:18px}.mt2{margin-top:26px}
  .row-actions{display:flex;gap:12px;flex-wrap:wrap}
  .divider{height:1px;background:var(--line-soft);margin:22px 0}
  .help{font-size:13px;color:var(--muted)}
  .badge-rank{display:inline-flex;align-items:center;gap:7px;background:rgba(212,175,55,.08);border:1px solid var(--gold-dim);border-radius:20px;padding:7px 15px;font-family:'Barlow Condensed';font-weight:600;color:var(--gold-bright);letter-spacing:1px;font-size:14px}
  footer{text-align:center;color:var(--muted);font-size:12px;margin-top:40px;letter-spacing:1px}

  /* ---------- Responsive ---------- */
  @media (max-width:680px){
    .brand h1{font-size:22px}
    /* HEADER FIT (phones): the in-game #hdrRight (Online · Cash · Record · tier) is too wide to sit
       beside the brand on one row. nowrap let it spill past the viewport — that expanded the page,
       which shoved the fixed top-right audio control off-screen ("can't mute") and pushed in-game
       content/buttons off the right edge ("can't scroll to where to play"). Let the header wrap so the
       status drops to its own full-width row, and pad the top so the fixed audio control stays clear. */
    header.app{flex-wrap:wrap;row-gap:12px;padding-top:46px}
    .hdr-right{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px 10px}
    .hdr-right .online-pill{order:2}
    .grid2{grid-template-columns:1fr}
    .create-hero{grid-template-columns:168px 1fr;gap:14px;padding:14px}
    .fighter-hud{grid-template-columns:150px 1fr;grid-template-areas:"av info" "ovr ovr";row-gap:14px}
    .fighter-hud .avatar-frame{grid-area:av}.hud-info{grid-area:info}.ovr-badge{grid-area:ovr;text-align:left;display:flex;align-items:baseline;gap:10px}
    .ovr-badge .ov{font-size:40px}
    .vs-wrap{gap:8px}
    .corner .cav{width:74px}
    .corner .cn{font-size:16px}.corner .covr{font-size:30px}
    .vs-badge{font-size:22px}
    .fo-entrance .ent-av{width:96px}.fo-entrance .ent-name{font-size:17px}.fo-entrance .ent-vs{font-size:32px}.fo-entrance .ent-ovr{font-size:32px}
    .round-banner{font-size:42px}
    .fo-result .rbig{font-size:52px}
    .section-title h2{font-size:21px}
    .sc-row{padding:9px 8px;font-size:13px;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr}
    .sc-row:not(.sc-head) .sc-judge{font-size:12px}
    .cmp-val{font-size:18px}
    .map-pin .pin-lab{font-size:9px;padding:1px 5px}
    .map-pin .pin-lab .pt{display:none}
  }

  /* =====================================================================
     ATMOSPHERE PASS — per-screen mood, depth & texture (visual only)
     Backgrounds shift per active tab/screen; cards gain depth; no flat boxes.
     ===================================================================== */
  :root{
    /* filmic grain (grayscale fractal noise), tiled */
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
  }
  /* cinematic vignette + film grain framing every screen (behind content) */
  .wrap::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    box-shadow:inset 0 0 240px 50px rgba(0,0,0,.55), inset 0 0 80px rgba(0,0,0,.35)}
  .wrap::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:var(--grain);background-size:200px 200px;opacity:.42;mix-blend-mode:overlay}

  /* ---- per-screen atmospheric backgrounds (swap the fixed body layer) ---- */
  /* MY FIGHTER → owner's champion key-art, darkened so stats/text stay readable */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="fighter"].active)::before{
    background:
      linear-gradient(180deg, rgba(6,9,16,.74), rgba(7,10,20,.82)),
      url("../images/bg_fighter.jpg?v=260") center center / cover no-repeat;}
  /* TRAINING → gym heat, sweat & amber work-light from above */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="training"].active)::before{
    background:
      radial-gradient(960px 520px at 50% -180px, rgba(226,150,54,.14), transparent 60%),
      radial-gradient(720px 600px at 4% 106%, rgba(196,120,40,.10), transparent 55%),
      radial-gradient(620px 520px at 98% 8%, rgba(212,175,55,.07), transparent 55%),
      linear-gradient(180deg,#0c0a10,#0a0e1a);}
  /* FIGHT → owner's packed-arena octagon shot, darkened for the matchup card on top */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="fight"].active)::before{
    background:
      linear-gradient(180deg, rgba(8,5,8,.72), rgba(9,8,15,.82)),
      url("../images/bg_fight.jpg?v=260") center center / cover no-repeat;}
  /* FIGHT · STREETS TIER (rung 0) → the underground "no rules, no mercy" pit instead of the pro arena.
     body.tier-streets (set in renderHud) raises specificity over the base rule above. */
  body.tier-streets:has(#screen-game:not(.hidden) .tab-panel[data-panel="fight"].active)::before{
    background:
      linear-gradient(180deg, rgba(6,4,3,.66), rgba(8,6,5,.80)),
      url("../images/bg_streets.jpg?v=283") center center / cover no-repeat;}
  /* STORY MODE / CAREER → owner's "rise from the streets to champion" journey art, darkened */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="career"].active)::before{
    background:
      linear-gradient(180deg, rgba(6,9,16,.74), rgba(8,11,22,.82)),
      url("../images/bg_story.jpg?v=260") center center / cover no-repeat;}
  /* QUESTS → warm trophy-board glow */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="quests"].active)::before{
    background:
      radial-gradient(920px 520px at 50% -180px, rgba(212,175,55,.10), transparent 60%),
      radial-gradient(720px 600px at 102% 102%, rgba(90,110,160,.07), transparent 55%),
      linear-gradient(180deg,#080b15,#0a0f1d);}
  /* OUTER-SHELL SCREENS (everything BEFORE the player is "inside" the game) → the same main-page hero
     (bg_landing) so the whole entry / fighter-selection flow is one consistent look: Account, Settings,
     About, Records, Player Directory, and the Create-Fighter ("fighter selection") screen. Darkened
     (center top) so the centered cards/forms stay crisp. The in-game screens (My Fighter + tabs) keep
     their own built-in backgrounds and are deliberately NOT included here. */
  body:has(#screen-account:not(.hidden))::before,
  body:has(#screen-settings:not(.hidden))::before,
  body:has(#screen-about:not(.hidden))::before,
  body:has(#screen-records:not(.hidden))::before,
  body:has(#screen-directory:not(.hidden))::before,
  body:has(#screen-create:not(.hidden))::before{
    background:
      linear-gradient(180deg, rgba(4,6,12,.60), rgba(4,6,12,.82) 55%, rgba(4,6,12,.93)),
      url("../images/bg_landing.jpg?v=263") center top / cover no-repeat;}
  /* MAIN MENU → same main-page hero (bg_landing), framed on the champion (center bottom) so its baked
     title doesn't clash with the menu's own MMA LEGACY wordmark; darkened so menu text/buttons stay crisp. */
  body:has(#screen-menu:not(.hidden))::before{
    background:
      radial-gradient(120% 100% at 50% 40%, rgba(4,6,12,.38), rgba(4,6,12,.76) 78%),
      linear-gradient(180deg, rgba(4,6,12,.28), rgba(4,6,12,.50) 50%, rgba(4,6,12,.82)),
      url("../images/bg_fighter.jpg?v=315") center / cover no-repeat;}
  /* Build/version footer is for code reference only — never render it on the main menu */
  body:has(#screen-menu:not(.hidden)) footer,
  body:has(#screen-landing:not(.hidden)) footer{display:none}

  /* ---- card DEPTH: edge light + bottom vignette, no flat slabs ---- */
  .card{padding:22px;
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -46px 70px -34px rgba(0,0,0,.55)}
  .card + .card{margin-top:16px}
  .section-sub{margin-bottom:15px}
  .game-nav{margin-bottom:15px}
  .wrap{padding-bottom:66px}

  /* ---- per-tab card identity (top sheen + border tint) ---- */
  .tab-panel[data-panel="fighter"] .card{border-color:rgba(120,150,210,.20)}
  .tab-panel[data-panel="fighter"] .card::before{background:linear-gradient(180deg,rgba(150,180,230,.07),transparent 24%)}
  .tab-panel[data-panel="training"] .card{border-color:rgba(212,150,54,.20)}
  .tab-panel[data-panel="training"] .card::before{background:linear-gradient(180deg,rgba(230,160,60,.08),transparent 24%)}
  .tab-panel[data-panel="fight"] .card{border-color:rgba(232,74,79,.24)}
  .tab-panel[data-panel="fight"] .card::before{background:linear-gradient(180deg,rgba(255,120,90,.10),transparent 26%)}
  .tab-panel[data-panel="career"] .card{border-color:rgba(120,160,230,.20)}
  .tab-panel[data-panel="career"] .card::before{background:linear-gradient(180deg,rgba(130,165,235,.08),transparent 24%)}
  .tab-panel[data-panel="quests"] .card{border-color:rgba(212,175,55,.20)}
  .tab-panel[data-panel="quests"] .card::before{background:linear-gradient(180deg,rgba(212,175,55,.07),transparent 24%)}

  /* ---- signature cards get their own scene glow ---- */
  #cardFight{
    background:
      radial-gradient(640px 230px at 50% -34px, rgba(232,74,79,.17), transparent 70%),
      linear-gradient(180deg,#191016,#0c0a12);
    border-color:rgba(232,74,79,.32)!important;
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,150,120,.10), 0 0 40px rgba(180,30,34,.12)}
  #cardTraining{
    background:
      radial-gradient(640px 230px at 50% -34px, rgba(226,150,54,.13), transparent 70%),
      linear-gradient(180deg,#161108,#0c0a12);
    border-color:rgba(212,150,54,.28)!important}
  #cardMap{
    background:
      radial-gradient(700px 250px at 50% -40px, rgba(90,139,224,.12), transparent 72%),
      linear-gradient(180deg,#0b1124,#080b16)}

  /* ---- MONEY / SHOP → gritty street-hustle concrete ---- */
  .shop-card{background:linear-gradient(180deg,#15121b,#0b0a11);border-color:#2c2533}
  .shop-card::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px)}
  .shop-card{position:relative;overflow:hidden}
  .shop-card:hover{border-color:var(--gold-dim);box-shadow:0 12px 28px rgba(0,0,0,.55), inset 0 0 32px rgba(212,175,55,.05)}
  .shop-card.owned{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-dim), inset 0 0 40px rgba(212,175,55,.10)}

  /* ---- depth for the small inner boxes (kill flat black) ---- */
  input[type=text], select{background:linear-gradient(180deg,#0a0f1d,#070a14)}

  /* ---- live FIGHT overlay: warmer, more dramatic arena backdrop ---- */
  .fight-overlay{background:radial-gradient(circle at 50% 30%, rgba(34,20,26,.92), rgba(3,4,9,.985))}

  /* =====================================================================
     CODE-DRAWN ARTWORK — gloves icon, blood splatter, championship belt
     ===================================================================== */
  .ent-gloves{font-size:38px;color:var(--gold-bright);display:block;line-height:0;margin-bottom:7px;
    filter:drop-shadow(0 4px 10px rgba(212,175,55,.35));animation:gloveBob 2.4s ease-in-out infinite}
  .ent-gloves svg{width:1em;height:1em;margin:0 auto}
  @keyframes gloveBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

  /* blood splatter on the portrait of whoever just got tagged (clipped to the frame) */
  .blood-fx{position:absolute;inset:-14%;z-index:6;pointer-events:none;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));animation:bloodPop .76s cubic-bezier(.2,.7,.3,1) forwards}
  .blood-fx.big{inset:-30%}
  .blood-fx svg{width:100%;height:100%;display:block}
  @keyframes bloodPop{0%{opacity:0;transform:scale(.4) rotate(-7deg)}14%{opacity:1}55%{opacity:.95}100%{opacity:0;transform:scale(1.32) rotate(5deg)}}
  /* wide spray across the cage on a knockdown, on the hurt fighter's side */
  .blood-screen{position:absolute;top:5%;width:42%;height:48%;z-index:6;pointer-events:none;opacity:.7;
    animation:bloodPop .82s cubic-bezier(.2,.7,.3,1) forwards}
  .blood-screen.you{left:2%}
  .blood-screen.opp{right:2%}
  .blood-screen svg{width:100%;height:100%;display:block}

  /* championship belt banner on the Records screen */
  .rec-belt{display:flex;flex-direction:column;align-items:center;margin:2px 0 18px}
  .rec-belt-art{width:min(340px,78%);animation:beltIn .6s cubic-bezier(.2,.8,.2,1) both;
    filter:drop-shadow(0 10px 26px rgba(212,175,55,.22))}
  .rec-belt.champ .rec-belt-art{filter:drop-shadow(0 0 32px rgba(247,221,136,.55))}
  .rec-belt.dim .rec-belt-art{opacity:.45;filter:grayscale(.35)}
  .rec-belt-cap{font-family:'Barlow Condensed';font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:13px;
    color:var(--gold-bright);margin-top:11px;text-shadow:0 0 16px rgba(212,175,55,.4)}
  @keyframes beltIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}

  /* ===================================================================
     SKILL TREE
     =================================================================== */
  .skill-points{font-family:'Barlow Condensed'}
  .sp-cap{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .sp-cap .sp-num{font-size:22px;color:var(--muted);font-weight:700;margin-right:3px}
  .sp-cap .sp-num.has{color:var(--gold-bright);text-shadow:0 0 14px rgba(212,175,55,.5)}
  .skill-bonus-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;min-height:24px}
  .sk-bonus-lab{font-family:'Barlow Condensed';font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-right:2px}
  .sk-bonus{font-family:'Barlow Condensed';font-size:11.5px;font-weight:600;color:var(--gold-bright);background:rgba(212,175,55,.10);
    border:1px solid var(--gold-dim);border-radius:20px;padding:2px 9px}
  .sk-bonus.dim{color:var(--muted);background:transparent;border-color:var(--line);font-weight:400;letter-spacing:.3px}
  .skill-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px;font-family:'Barlow Condensed';font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .skill-legend .lg{display:flex;align-items:center;gap:6px}
  .skill-legend .lg::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid}
  .skill-legend .lg.owned::before{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}
  .skill-legend .lg.buyable::before{background:rgba(212,175,55,.12);border-color:var(--gold-bright);box-shadow:0 0 8px rgba(212,175,55,.6)}
  .skill-legend .lg.reachable::before{background:#0c1424;border-color:#3b4a6e}
  .skill-legend .lg.reachable::before{background:#0c1424;border-color:#3b4a6e}
  .skill-legend .lg.locked::before{background:#0a0e18;border-color:#1d2740}

  .skill-tree{margin:6px 0 2px}
  /* discipline tabs — one open at a time */
  .sk-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:7px;margin-bottom:14px}
  .sk-tab{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:8px 4px 7px;border-radius:11px;
    background:linear-gradient(180deg,#0d1326,#090d18);border:1px solid #232d49;color:#9fb0d0;transition:transform .12s,border-color .15s}
  .sk-tab .skt-ic{width:22px;height:22px;display:grid;place-items:center;color:var(--br)}
  .sk-tab .skt-ic svg{width:18px;height:18px}
  .sk-tab .skt-tn{font-family:'Barlow Condensed';font-weight:600;font-size:11.5px;letter-spacing:.4px;text-align:center;line-height:1.1}
  .sk-tab .skt-ct{font-family:'Barlow Condensed';font-size:10px;font-weight:600;color:var(--muted)}
  .sk-tab:hover{transform:translateY(-2px);border-color:var(--gold-dim)}
  .sk-tab.sel{border-color:var(--br);box-shadow:0 0 0 1px var(--br),0 6px 16px rgba(0,0,0,.4);background:linear-gradient(180deg,#13203c,#0a1120)}
  .sk-tab.sel .skt-tn{color:#fff}
  .sk-tab.maxed .skt-ct{color:var(--gold-bright)}
  /* open discipline */
  .sk-disc{background:linear-gradient(180deg,#0c1426,#080c15);border:1px solid var(--line);border-radius:14px;border-top:3px solid var(--br);padding:12px 13px 14px}
  .sk-disc-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
  .sk-disc-head .sd-ic{width:24px;height:24px;display:grid;place-items:center}.sk-disc-head .sd-ic svg{width:19px;height:19px}
  .sk-disc-name{flex:1;font-family:'Barlow Condensed';font-weight:700;font-size:17px;letter-spacing:.8px;text-transform:uppercase}
  .sk-disc-prog{font-family:'Barlow Condensed';font-size:11.5px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.05);border-radius:10px;padding:2px 9px}
  /* tier section */
  .sk-tier{margin-top:11px;border-radius:11px;border:1px solid var(--line-soft);border-left:3px solid var(--tc);background:rgba(255,255,255,.015);padding:8px 9px 10px}
  .sk-tier.tlock{opacity:.62}
  .skt-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .skt-name{font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.7px;text-transform:uppercase;color:var(--tc)}
  .skt-gate{flex:1;font-size:11px;color:var(--muted)}
  .sk-tier.tlock .skt-gate{color:#ff9da0}
  .skt-prog{font-family:'Barlow Condensed';font-size:11px;font-weight:600;color:var(--muted)}
  .skt-prog.done{color:var(--gold-bright)}
  .skt-nodes{display:flex;flex-wrap:wrap;align-items:stretch;gap:7px}
  .skn-arrow{align-self:center;color:#33406a;font-size:15px;font-weight:700;margin:0 -1px}
  .skn-arrow.on{color:var(--gold-dim)}
  /* technique node */
  .sk-node{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:185px;text-align:left;cursor:pointer;padding:6px 8px;border-radius:10px;
    background:radial-gradient(140% 180% at 0% 0%, #16203a, #0a1020);border:1px solid #28324e;color:#aab7d2;transition:transform .12s,border-color .15s,box-shadow .2s}
  .sk-node .skn-ico{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.04);color:var(--br)}
  .sk-node .skn-ico svg{width:16px;height:16px}
  .sk-node .skn-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.16}
  .sk-node .skn-name{font-family:'Barlow Condensed';font-weight:600;font-size:12.5px;letter-spacing:.2px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sk-node .skn-fx{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sk-node .skn-badge{flex:0 0 auto;min-width:19px;height:19px;padding:0 5px;border-radius:6px;display:grid;place-items:center;
    font-family:'Barlow Condensed';font-weight:700;font-size:11.5px;background:#0c1424;color:#9fb0d0;border:1px solid #33406a}
  .sk-node .skn-badge.owned{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#15110a;border-color:var(--gold)}
  .sk-node.locked{opacity:.42;filter:grayscale(.4)}
  .sk-node.reachable{border-color:#3b4a6e;color:#c3cde0}
  .sk-node.reachable:hover{border-color:var(--gold-dim)}
  .sk-node.buyable{border-color:var(--gold-bright);animation:skPulse 1.7s ease-in-out infinite}
  .sk-node.buyable .skn-name{color:var(--gold-bright)}
  .sk-node.owned{border-color:var(--gold);background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.04))}
  .sk-node.owned .skn-ico{color:var(--gold-bright)}
  .sk-node.owned .skn-name{color:#f3e6bd}
  .sk-node:hover{transform:translateY(-1px)}
  @keyframes skPulse{0%,100%{box-shadow:0 0 0 1px rgba(212,175,55,.25),0 0 9px rgba(212,175,55,.22)}50%{box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 18px rgba(212,175,55,.5)}}

  .skill-detail{margin-top:14px;background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);border-radius:13px;padding:14px 16px;min-height:64px}
  .skill-detail .sd-empty{color:var(--muted);font-size:13.5px;line-height:1.5}
  .skill-detail .sd-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .skill-detail .sd-ic{font-size:26px;line-height:0}.skill-detail .sd-ic svg{width:26px;height:26px}
  .skill-detail .sd-titles{flex:1;min-width:0}
  .skill-detail .sd-name{font-family:'Barlow Condensed';font-weight:600;font-size:18px;letter-spacing:.4px}
  .skill-detail .sd-branch{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
  .skill-detail .sd-cost{font-family:'Barlow Condensed';color:var(--gold-bright);font-size:13px;flex-shrink:0}
  .skill-detail .sd-cost b{font-size:18px}
  .skill-detail .sd-desc{color:var(--text);font-size:14px;line-height:1.5;margin-bottom:9px}
  .skill-detail .sd-tag{font-family:'Barlow Condensed';font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:20px;border:1px solid}
  .skill-detail .sd-tag.owned{color:#7dffb4;border-color:rgba(55,196,111,.5);background:rgba(55,196,111,.12)}
  .skill-detail .sd-tag.buy{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.12)}
  .skill-detail .sd-tag.need{color:#e6b86a;border-color:#5a4a28;background:rgba(212,175,55,.06)}
  .skill-detail .sd-tag.lock{color:var(--muted);border-color:var(--line)}
  .skill-detail .sd-unlock{margin-top:12px}
  @media(max-width:560px){
    .skill-tree{grid-template-columns:1fr}
  }

  /* ===================================================================
     EXPLOSIVE FIGHT FX — impact words, KO slow-mo, more blood, crowd
     =================================================================== */
  /* bigger, rotating screen shakes (override the originals) */
  @keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-8px,4px) rotate(-.5deg)}40%{transform:translate(8px,-4px) rotate(.5deg)}60%{transform:translate(-6px,-3px)}80%{transform:translate(5px,3px)}}
  @keyframes shakeBig{0%,100%{transform:translate(0,0) rotate(0)}10%{transform:translate(-15px,8px) rotate(-1.6deg)}30%{transform:translate(15px,-9px) rotate(1.6deg)}50%{transform:translate(-12px,6px) rotate(-1deg)}70%{transform:translate(10px,-5px) rotate(.8deg)}90%{transform:translate(-5px,3px)}}
  @keyframes shakeMega{0%,100%{transform:translate(0,0) rotate(0)}7%{transform:translate(-22px,12px) rotate(-2.6deg)}20%{transform:translate(23px,-14px) rotate(2.8deg)}36%{transform:translate(-19px,10px) rotate(-2deg)}54%{transform:translate(17px,-9px) rotate(1.8deg)}72%{transform:translate(-11px,6px) rotate(-1deg)}88%{transform:translate(7px,-3px)}}

  /* comic "BAM!/BOOM!" impact word + starburst */
  .impact-fx{position:absolute;top:45%;left:50%;z-index:10;pointer-events:none;width:140px;height:140px;
    display:grid;place-items:center;transform:translate(-50%,-50%);animation:impPop .78s cubic-bezier(.2,.85,.3,1) both}
  .impact-fx.you{left:66%}.impact-fx.opp{left:34%}
  .impact-fx.lvl4{width:185px;height:185px}
  .imp-star{position:absolute;inset:0;width:100%;height:100%;color:#ffc24d;opacity:.92;
    filter:drop-shadow(0 0 16px rgba(255,150,50,.75));animation:impSpin .78s ease-out both}
  .impact-fx.lvl3 .imp-star{color:#ff8a3c}
  .impact-fx.lvl4 .imp-star{color:#ff5a2c}
  .imp-word{position:relative;font-family:'Barlow Condensed';font-weight:700;font-size:34px;letter-spacing:1px;color:#fff;
    -webkit-text-stroke:2.5px #160a04;paint-order:stroke;transform:rotate(-8deg);white-space:nowrap;
    text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 20px rgba(255,170,60,.85)}
  .impact-fx.lvl3 .imp-word{font-size:42px}
  .impact-fx.lvl4 .imp-word{font-size:50px;color:#ffe7a8}
  @keyframes impPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-16deg)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(5deg)}
    42%{transform:translate(-50%,-50%) scale(.98) rotate(-2deg)}
    70%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
  @keyframes impSpin{from{transform:rotate(-40deg) scale(.6)}to{transform:rotate(8deg) scale(1)}}

  /* floating per-action words over the fighters (lighter layer beneath the big BAM! bursts) —
     attacker's move on the attacker's side, defender's result on the defender's side */
  .float-word{position:absolute;z-index:9;pointer-events:none;font-family:'Barlow Condensed';font-weight:700;
    letter-spacing:.4px;white-space:nowrap;font-size:20px;transform:translate(-50%,0);
    -webkit-text-stroke:2px #0a0d16;paint-order:stroke;
    text-shadow:0 2px 7px rgba(0,0,0,.65);animation:floatUp 1.7s cubic-bezier(.2,.8,.3,1) both}
  .float-word.l{left:26%}.float-word.r{left:74%}
  .float-word.atk{top:22%}
  .float-word.def{top:32%;font-weight:600;font-style:italic;font-size:18px}
  .float-word.l.atk{color:#e7f0ff}.float-word.r.atk{color:#ffe7df}
  .float-word.l.def{color:#9ec2ff}.float-word.r.def{color:#ff9ea1}
  .float-word.fl2{font-size:25px}.float-word.fl2.def{font-size:22px}
  .float-word.fl3{font-size:31px;-webkit-text-stroke-width:2.5px}.float-word.fl3.def{font-size:27px}
  @keyframes floatUp{
    0%{opacity:0;transform:translate(-50%,9px) scale(.55) rotate(-4deg)}
    9%{opacity:1;transform:translate(-50%,0) scale(1.13) rotate(2deg)}
    18%{transform:translate(-50%,-6px) scale(1) rotate(-1deg)}
    70%{opacity:1;transform:translate(-50%,-15px) scale(1)}
    100%{opacity:0;transform:translate(-50%,-50px) scale(.95)}}
  @media(max-width:560px){
    .float-word{font-size:17px}.float-word.def{font-size:15px}
    .float-word.fl3{font-size:25px}.float-word.fl3.def{font-size:21px}
  }

  /* KO slow-mo zoom (on .fo-inner so it composes with the arena shake) + white flash */
  .fo-inner.slowmo{animation:slowmoZoom 2s cubic-bezier(.1,.7,.15,1) both}
  @keyframes slowmoZoom{0%{transform:scale(1);filter:none}
    14%{transform:scale(1.09);filter:contrast(1.32) saturate(1.45) brightness(1.08)}
    100%{transform:scale(1.05);filter:contrast(1.16) saturate(1.25) brightness(1.02)}}
  .ko-flash{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:18px;
    background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.97), rgba(255,214,150,.45) 34%, transparent 70%);
    animation:koFlash .95s ease-out forwards}
  @keyframes koFlash{0%{opacity:0}7%{opacity:1}30%{opacity:.5}100%{opacity:0}}

  /* the crowd erupts on big moments */
  .fo-arena.roar .cs-crowd{animation:crowdRoar .7s ease}
  @keyframes crowdRoar{0%,100%{opacity:.6;filter:brightness(1)}28%{opacity:1;filter:brightness(2) saturate(1.4)}}

  /* finish blood burst — three sprays across the cage */
  .blood-burst{position:absolute;z-index:7;pointer-events:none;opacity:.85;animation:bloodPop .95s cubic-bezier(.2,.7,.3,1) forwards}
  .blood-burst svg{width:100%;height:100%;display:block}
  .blood-burst.b0{left:6%;top:14%;width:46%;height:54%}
  .blood-burst.b1{right:5%;top:20%;width:42%;height:50%;animation-delay:.06s}
  .blood-burst.b2{left:28%;top:30%;width:46%;height:56%;animation-delay:.12s}
  /* more visible blood overall */
  .blood-fx{inset:-20%}
  .blood-fx.big{inset:-42%}
  .blood-screen{opacity:.82;width:48%;height:56%}

  /* KO / TAP banner SLAMS in, with a colour-burst behind it */
  .round-banner.ko,.round-banner.sub{font-size:92px}
  .round-banner.knockout{font-size:78px;letter-spacing:2px;color:#fff2c8;text-shadow:0 0 10px #fff,0 0 35px rgba(255,76,47,.95),0 6px 20px #000}
  .round-banner.ko.show,.round-banner.sub.show,.round-banner.knockout.show{animation:koBannerSlam 1.35s cubic-bezier(.2,.9,.2,1) both}
  @keyframes koBannerSlam{0%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(-7deg)}
    11%{opacity:1;transform:translate(-50%,-50%) scale(.82) rotate(3deg)}
    19%{transform:translate(-50%,-50%) scale(1.1) rotate(-1.5deg)}
    27%{transform:translate(-50%,-50%) scale(.97)}
    33%{transform:translate(-50%,-50%) scale(1)}
    82%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
  .round-banner.ko::before,.round-banner.sub::before,.round-banner.knockout::before{content:"";position:absolute;left:50%;top:50%;width:330px;height:330px;
    transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,90,55,.45),transparent 62%);animation:koGlow 1.35s ease both}
  .round-banner.sub::before{background:radial-gradient(circle,rgba(106,153,236,.42),transparent 62%)}
  @keyframes koGlow{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
  @media(max-width:560px){
    .round-banner.ko,.round-banner.sub{font-size:56px}.round-banner.knockout{font-size:48px}
    .impact-fx{width:150px;height:150px}.impact-fx .imp-word{font-size:34px}.impact-fx.lvl4 .imp-word{font-size:46px}
    .round-banner.ko::before,.round-banner.sub::before,.round-banner.knockout::before{width:220px;height:220px}
  }

  /* impact-word colour + size by MOVE TYPE (every style gets its own callouts) */
  .impact-fx.lvl1{width:96px;height:96px}
  .impact-fx.lvl1 .imp-word{font-size:23px}
  .impact-fx.lvl1 .imp-star{opacity:.65}
  .impact-fx.t-takedown .imp-star{color:#6aa6ff}
  .impact-fx.t-takedown .imp-word{color:#dbe9ff}
  .impact-fx.t-clinch   .imp-star{color:#b98cff}
  .impact-fx.t-clinch   .imp-word{color:#efe6ff}
  .impact-fx.t-ground   .imp-star{color:#ff8a3c}
  .impact-fx.t-ground{left:50%;top:58%;width:112px;height:112px}
  .impact-fx.t-ground .imp-word{font-size:25px}
  .impact-fx.t-sub      .imp-star{color:#ff4d63}
  .impact-fx.t-sub      .imp-word{color:#ffd9dd}

  /* ===== AUDIO CONTROL (fixed top-right · speaker + volume slider) ===== */
  .audio-ctl{position:fixed;top:10px;right:12px;z-index:100000;display:flex;align-items:center;gap:9px;
    padding:6px 11px 6px 8px;border-radius:22px;
    background:linear-gradient(180deg,rgba(20,29,51,.92),rgba(10,16,30,.92));
    border:1px solid var(--gold-dim);box-shadow:0 6px 22px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
  .audio-btn{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
    border:1px solid var(--gold-dim);border-radius:50%;background:rgba(212,175,55,.10);color:var(--gold-bright);padding:0;transition:.15s}
  .audio-btn:hover{background:rgba(212,175,55,.22);color:#fff}
  .audio-btn svg{width:17px;height:17px}
  .audio-ctl.muted .audio-btn{color:var(--muted);border-color:var(--line)}
  .audio-slider{-webkit-appearance:none;appearance:none;width:88px;height:5px;border-radius:4px;cursor:pointer;
    background:linear-gradient(90deg,var(--gold) 0%,var(--gold-bright) 100%);outline:none}
  .audio-ctl.muted .audio-slider{background:#2a3656}
  .audio-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
    background:#fff;border:2px solid var(--gold);box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer}
  .audio-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--gold);cursor:pointer}
  @media(max-width:560px){ .audio-slider{width:62px} .audio-ctl{top:8px;right:8px;padding:5px 9px 5px 7px} }

  /* ============================================================
     ACHIEVEMENTS — trophy UI (PlayStation/Xbox feel), CSS-only rarity
     ============================================================ */
  /* --- My Fighter summary + showcase --- */
  .ach-summary{}
  .ach-sum-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .ach-sum-ic{width:20px;height:20px;color:var(--gold-bright)}
  .ach-sum-lab{font-family:'Barlow Condensed';font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--text)}
  .ach-sum-count{font-family:'Barlow Condensed';font-weight:700;font-size:20px;color:var(--gold-bright)}
  .ach-sum-count small{font-size:13px;color:var(--muted);font-weight:600}
  .ach-sum-link{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--gold-dim);font-family:'Inter',sans-serif;font-weight:600;font-size:13px}
  .ach-sum-link:hover{color:var(--gold-bright)}
  .showcase-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .sc-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
    min-height:72px;padding:8px 5px;border-radius:12px;background:rgba(255,255,255,.025);border:1px dashed var(--line);transition:.15s}
  .sc-slot.empty{color:var(--muted)}
  .sc-slot.empty:hover{border-color:var(--gold-dim);color:var(--gold-dim)}
  .sc-slot .sc-plus{font-size:22px;font-weight:300;line-height:1}
  .sc-slot.filled{border-style:solid;border-color:color-mix(in srgb,var(--rc) 60%,transparent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 16%,transparent),transparent);box-shadow:0 0 16px color-mix(in srgb,var(--rc) 22%,transparent)}
  .sc-slot.filled .sc-ic{width:24px;height:24px;color:var(--rc)}
  .sc-slot .sc-nm{font-family:'Barlow Condensed';font-weight:600;font-size:9.5px;letter-spacing:.3px;text-transform:uppercase;text-align:center;line-height:1.1;color:var(--text)}
  .ach-sum-hint{font-size:11px;color:var(--muted);margin-top:9px}

  /* --- Achievements page --- */
  .ach-page-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
  .aph-count{font-family:'Barlow Condensed';font-size:14px;letter-spacing:.5px;color:var(--text)}
  .aph-count b{color:var(--gold-bright);font-size:17px}
  .aph-legend{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
  .rl-chip{font-family:'Barlow Condensed';font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--rc);
    border:1px solid color-mix(in srgb,var(--rc) 50%,transparent);border-radius:20px;padding:2px 8px}
  .ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
  .ach-soon-head{font-family:'Barlow Condensed';font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line-soft)}

  .ach-card{position:relative;display:flex;gap:13px;padding:14px;border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg,#121a2e,#0c1322);border:1px solid var(--line)}
  .ach-card.unlocked{border-color:color-mix(in srgb,var(--rc) 70%,transparent);
    box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px color-mix(in srgb,var(--rc) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.05)}
  .ach-card.unlocked::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rc);box-shadow:0 0 12px var(--rc)}
  .ach-card.locked{opacity:.55;filter:saturate(.4)}
  .ach-card.pending{opacity:.5}
  .ach-medal{flex-shrink:0;width:50px;height:50px;display:grid;place-items:center;border-radius:12px;
    background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc) 30%,#0c1322),#0c1322);
    border:1px solid color-mix(in srgb,var(--rc) 45%,transparent)}
  .ach-card.locked .ach-medal,.ach-card.pending .ach-medal{background:#0c1322;border-color:var(--line)}
  .ach-medal-ic{width:26px;height:26px;color:var(--rc)}
  .ach-card.locked .ach-medal-ic,.ach-card.pending .ach-medal-ic{color:var(--muted)}
  /* v283 custom badge art — fills the medal slot (rarity border frames it); greyed + dim while locked */
  .ach-medal .ach-badge-img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
  .ach-badge-img.locked{filter:grayscale(1) brightness(.5);opacity:.6}
  .sc-slot.filled .sc-ic .ach-badge-img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
  .ach-body{flex:1;min-width:0}
  .ach-top{display:flex;align-items:baseline;gap:8px}
  .ach-name{font-family:'Barlow Condensed';font-weight:600;font-size:16px;letter-spacing:.4px}
  .ach-card.unlocked .ach-name{color:#fff}
  .ach-rarity{margin-left:auto;font-family:'Barlow Condensed';font-size:9px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:var(--rc)}
  .ach-desc{font-size:12.5px;color:var(--muted);margin:3px 0 7px;line-height:1.35}
  .ach-reward{font-family:'Inter',sans-serif;font-size:12.5px;color:#d9c79a}
  .ach-reward .ach-rw-lab{font-family:'Barlow Condensed';font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:5px}
  .ach-reward b{color:var(--gold-bright);font-weight:700}
  .ach-foot{margin-top:8px;font-family:'Barlow Condensed';font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .ach-foot.unlocked{color:#7dffb4}
  .ach-foot.pending{color:#9a86c8}
  .ach-pin{position:absolute;right:12px;bottom:12px;cursor:pointer;font-family:'Barlow Condensed';font-size:10px;letter-spacing:.6px;
    color:var(--gold-dim);background:rgba(212,175,55,.08);border:1px solid var(--gold-dim);border-radius:20px;padding:4px 10px;transition:.15s}
  .ach-pin:hover{color:var(--gold-bright);border-color:var(--gold)}
  .ach-pin.on{color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold)}

  /* Legendary = special: animated gold shimmer + stronger glow */
  .ach-card.legendary.unlocked{border-color:var(--gold);
    box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 34px rgba(247,201,72,.4),inset 0 1px 0 rgba(255,255,255,.08);
    background:linear-gradient(180deg,#241d33,#16101f)}
  .ach-card.legendary.unlocked .ach-medal{animation:achMedalPulse 2.4s ease-in-out infinite}
  .ach-legend-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,234,170,.22),transparent);transform:skewX(-18deg);
    animation:achShine 3.4s ease-in-out infinite}
  .ach-card.legendary.locked .ach-legend-shine{display:none}
  @keyframes achShine{0%{left:-60%}55%,100%{left:130%}}
  @keyframes achMedalPulse{0%,100%{box-shadow:0 0 0 rgba(247,201,72,0)}50%{box-shadow:0 0 18px rgba(247,201,72,.7)}}

  /* --- PlayStation/Xbox-style unlock toast --- */
  .ach-pop{position:fixed;top:16px;left:50%;z-index:100060;display:flex;align-items:center;gap:13px;
    max-width:min(420px,92vw);padding:12px 18px 12px 14px;border-radius:14px;pointer-events:none;
    background:linear-gradient(180deg,#1a2336,#0d1320);border:1px solid var(--rc);
    box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 28px color-mix(in srgb,var(--rc) 35%,transparent);
    transform:translate(-50%,-140%);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1.2),opacity .3s ease}
  .ach-pop.show{transform:translate(-50%,0);opacity:1}
  .ach-pop-ic{flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:#15110a;
    background:radial-gradient(circle,color-mix(in srgb,var(--rc) 90%,#fff),var(--rc));box-shadow:0 0 18px color-mix(in srgb,var(--rc) 70%,transparent)}
  .ach-pop-ic svg{width:22px;height:22px}
  .ach-pop-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ach-pop-lab{font-family:'Barlow Condensed';font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--rc)}
  .ach-pop-name{font-family:'Barlow Condensed';font-weight:700;font-size:17px;color:#fff;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:560px){ .ach-grid{grid-template-columns:1fr} }

  /* ===== AVATAR V0 — fight-result busts (winner / loser identifiable) ===== */
  .result-avatars{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 4px}
  .ra-side{display:flex;flex-direction:column;align-items:center;gap:7px;width:108px}
  .ra-frame{width:84px;height:84px}
  .ra-name{font-family:'Barlow Condensed';font-weight:600;font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:108px;color:var(--text)}
  .ra-tag{font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:1.5px;padding:2px 10px;border-radius:20px}
  .ra-vs{font-family:'Barlow Condensed';font-weight:700;font-size:15px;color:var(--muted);letter-spacing:1px;align-self:center;margin-top:-18px}
  .ra-win .ra-frame{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 24px rgba(247,201,72,.5),inset 0 0 44px rgba(0,0,0,.5)}
  .ra-win .ra-name{color:#fff}
  .ra-win .ra-tag{color:#15110a;background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
  .ra-loss{opacity:.7}
  .ra-loss .ra-frame{filter:grayscale(.7) brightness(.78);border-color:#5a2f31}
  .ra-loss .ra-tag{color:#ff9a9a;background:rgba(160,50,50,.18);border:1px solid rgba(200,70,70,.4)}
  @media(max-width:560px){ .ra-frame{width:70px;height:70px}.ra-side{width:92px} }

  /* ============================================================
     FIGHTER PROFILE — Career Statistics + Fight History (record card)
     ============================================================ */
  /* --- Career Statistics: premium stat cards (big number above label) --- */
  .cstat-empty{font-size:13px;color:var(--muted);text-align:center;padding:16px;line-height:1.5}
  .cstat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
  .cstat-card{position:relative;text-align:center;padding:15px 8px;border-radius:13px;overflow:hidden;
    background:linear-gradient(180deg,#121a2e,#0b1120);border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.35)}
  .cstat-num{font-family:'Barlow Condensed';font-weight:700;font-size:30px;line-height:1;color:#fff;letter-spacing:.5px}
  .cstat-lab{font-family:'Barlow Condensed';font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:6px}
  .cstat-card.win{border-color:rgba(55,196,111,.4)} .cstat-card.win .cstat-num{color:#5fe89a}
  .cstat-card.loss{border-color:rgba(232,74,79,.4)} .cstat-card.loss .cstat-num{color:#ff7479}
  .cstat-card.gold{border-color:var(--gold-dim);
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.14),transparent 70%),linear-gradient(180deg,#1a2236,#0c1322);
    box-shadow:0 0 22px rgba(212,175,55,.18),inset 0 1px 0 rgba(255,255,255,.05)}
  .cstat-card.gold .cstat-num{color:var(--gold-bright);text-shadow:0 0 18px rgba(212,175,55,.5)}

  /* --- Fight History: combat-sports record card --- */
  .fh-empty{font-size:13px;color:var(--muted);text-align:center;padding:16px;line-height:1.5}
  .fh-recordline{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
  .fh-rec{font-family:'Barlow Condensed';font-weight:700;font-size:26px;color:#fff;letter-spacing:1px}
  .fh-rec small{font-size:13px;color:var(--muted);font-weight:600;margin:0 1px;letter-spacing:0}
  .fh-rec-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
  .fh-list{display:flex;flex-direction:column;gap:7px;max-height:430px;overflow-y:auto;padding-right:2px}
  .fh-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
    background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);border:1px solid var(--line-soft);border-left-width:3px;transition:.15s}
  .fh-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
  .fh-row.win{border-left-color:#37c46f}
  .fh-row.loss{border-left-color:#e8484f}
  .fh-no{font-family:'Barlow Condensed';font-size:11px;color:var(--muted);min-width:24px;flex-shrink:0}
  .fh-badge{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;font-family:'Barlow Condensed';font-weight:700;font-size:14px}
  .fh-row.win .fh-badge{background:rgba(55,196,111,.16);border:1px solid rgba(55,196,111,.5);color:#7dffb4}
  .fh-row.loss .fh-badge{background:rgba(232,74,79,.16);border:1px solid rgba(232,74,79,.5);color:#ff9a9d}
  .fh-vs{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fh-opp{font-family:'Barlow Condensed';font-weight:600;font-size:15px;color:var(--text);letter-spacing:.3px}
  .fh-method{flex-shrink:0;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.6px;color:var(--muted);
    background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:3px 11px;white-space:nowrap}
  .fh-method.m-ko{color:#ff9a6b;border-color:rgba(255,138,60,.4);background:rgba(255,138,60,.08)}
  .fh-method.m-sub{color:#c39bff;border-color:rgba(185,140,255,.4);background:rgba(185,140,255,.08)}
  .fh-method.m-dec{color:#9bb4d8;border-color:rgba(155,180,216,.35)}
  @media(max-width:560px){ .fh-no{display:none} .fh-opp{font-size:14px} }

  /* --- Showcase polish: small rarity tag on pinned achievements --- */
  .sc-slot.filled{position:relative;padding-top:16px}
  .sc-rarity-tag{position:absolute;top:4px;left:0;right:0;text-align:center;font-family:'Barlow Condensed';font-weight:600;
    font-size:7.5px;letter-spacing:1px;text-transform:uppercase;color:var(--rc);opacity:.9}

  /* ===== Fighter selection (Create Fighter) — pick 1 from the full roster of real faces ===== */
  .lab-hint{font-weight:400;opacity:.55;letter-spacing:.3px}
  .avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 12px}
  @media(max-width:560px){ .avatar-grid{grid-template-columns:repeat(4,1fr)} }
  /* roster variant = scrollable framed tray so all 40 fit without dominating the page */
  .avatar-grid.roster{max-height:294px;overflow-y:auto;gap:9px;padding:10px;border-radius:14px;
    background:radial-gradient(120% 100% at 50% 0%,rgba(212,175,55,.06),rgba(8,12,22,.6));
    border:1px solid var(--line);box-shadow:inset 0 0 24px rgba(0,0,0,.45);scrollbar-width:thin;
    scrollbar-color:var(--gold-dim) transparent}
  .avatar-grid.roster::-webkit-scrollbar{width:8px}
  .avatar-grid.roster::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:8px}
  .avatar-grid.roster::-webkit-scrollbar-track{background:transparent}
  /* SAFARI FIX: the IMAGE drives the square shape (its own aspect-ratio + height:auto), NOT the button's
     aspect-ratio + a height:100% child. Safari mis-resolves that combo → collapsed tiles showing face strips
     (the "splitting" bug). Letting the square 256×256 img size itself is bulletproof across browsers. */
  .av-opt{position:relative;padding:0;cursor:pointer;border-radius:11px;overflow:hidden;
    background:#0a1020;border:2px solid var(--line);transition:transform .14s,border-color .14s,box-shadow .14s}
  .av-opt:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
  .av-opt svg,.av-opt img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .av-opt .av-check{position:absolute;top:4px;right:4px;width:18px;height:18px;display:none;place-items:center;
    border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#15110a;
    font-size:11px;font-weight:700;font-family:'Barlow Condensed';box-shadow:0 0 9px rgba(212,175,55,.8)}
  .av-opt.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(212,175,55,.5)}
  .av-opt.sel .av-check{display:grid}
  .btn.more-looks{width:auto;display:block;margin:0 auto 4px;padding:9px 20px;
    font-family:'Barlow Condensed';font-weight:600;font-size:14px;letter-spacing:.6px}

  /* ============================================================
     BETWEEN-ROUND CORNER STRATEGY overlay (inside the fight overlay)
     ============================================================ */
  .corner-overlay{position:fixed;inset:0;z-index:100050;display:grid;place-items:center;padding:14px;
    background:rgba(3,5,10,.96);backdrop-filter:blur(10px);opacity:0;transition:opacity .2s ease}
  .corner-overlay.show{opacity:1}
  .cs-card{width:min(440px,96vw);max-height:96%;overflow:hidden;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.10),transparent 70%),linear-gradient(180deg,#141d31,#0b1120);
    border:1px solid var(--gold);border-radius:18px;padding:16px 16px 14px;
    box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 32px rgba(212,175,55,.2);
    transform:scale(.92) translateY(10px);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
  .corner-overlay.show .cs-card{transform:scale(1) translateY(0)}
  .cs-head{font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;
    color:var(--gold-bright);text-align:center;margin-bottom:8px}
  .cs-names{display:flex;align-items:center;justify-content:space-between;font-family:'Barlow Condensed';font-weight:600;font-size:15px;color:var(--muted);margin-bottom:8px}
  .cs-names .lead{color:#fff}
  .cs-names .cs-mid{font-size:10px;letter-spacing:1.5px;color:var(--gold-dim)}
  .cs-stat{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:3px 0}
  .cs-stat .cs-v{font-family:'Barlow Condensed';font-weight:700;font-size:17px;color:var(--muted)}
  .cs-stat .cs-v.lead{color:#7dffb4}
  .cs-stat .cs-v.opp{text-align:right}
  .cs-stat .cs-v.opp.lead{color:#ff9a9d}
  .cs-stat .cs-l{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .cs-mom{display:flex;align-items:center;gap:9px;margin:6px 0 11px;padding-top:9px;border-top:1px solid var(--line-soft)}
  .cs-mom .cs-l{flex-shrink:0}
  .cs-mom-bar{flex:1;height:6px;border-radius:4px;position:relative;background:linear-gradient(90deg,#7dffb4,#33425f 45%,#33425f 55%,#ff7479)}  /* left=YOU(green) right=OPP(red), matches name layout */
  .cs-mom-bar > i{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(212,175,55,.7)}
  .cs-coach{display:flex;gap:9px;align-items:flex-start;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--text);line-height:1.35;
    background:rgba(212,175,55,.07);border:1px solid var(--gold-dim);border-radius:11px;padding:10px 12px;margin-bottom:12px}
  .cs-coach .cs-coach-ic{font-size:17px;line-height:1.1;flex-shrink:0}
  .cs-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .cs-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
    padding:13px 8px;border-radius:13px;color:var(--text);background:linear-gradient(180deg,#10182b,#0a1019);
    border:1.5px solid var(--line);transition:.14s}
  .cs-opt:hover,.cs-opt:active{border-color:var(--gold-dim);transform:translateY(-2px);background:linear-gradient(180deg,#16213a,#0c1322)}
  .cs-opt .cs-oico{font-size:24px;line-height:1}
  .cs-opt .cs-onm{font-family:'Barlow Condensed';font-weight:600;font-size:13px;letter-spacing:.4px}
  .cs-opt.rec{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(212,175,55,.4)}
  .cs-rec{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-family:'Barlow Condensed';font-weight:700;font-size:8.5px;letter-spacing:1px;color:#15110a;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-radius:20px;padding:2px 8px;box-shadow:0 0 9px rgba(212,175,55,.7)}
  .cs-timer{text-align:center;font-family:'Inter',sans-serif;font-weight:600;font-size:11px;color:var(--muted);margin-top:11px}
  .cs-timer b{color:var(--gold-bright)}
  @media(max-width:380px){ .cs-opt .cs-oico{font-size:21px} .cs-opt .cs-onm{font-size:12px} }

  /* ===== PRE-FIGHT GAME PLAN (#73) — reuses the corner card; adds the opponent snapshot ===== */
  .pf-opp{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid var(--line-soft)}
  .pf-opp-av{width:64px;height:64px;flex-shrink:0}
  .pf-opp-info{flex:1;min-width:0}
  .pf-opp-nm{font-family:'Barlow Condensed';font-weight:700;font-size:16px;color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-opp-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--muted);margin-bottom:6px}
  .pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pf-h{display:block;font-family:'Barlow Condensed';font-size:9px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:3px}
  .pf-h.str{color:#7dffb4}.pf-h.wk{color:#ff9a9d}
  .pf-stat{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;line-height:1.5}
  .pf-stat .pf-sn{font-family:'Inter',sans-serif;font-weight:600;color:var(--text);white-space:nowrap}
  .pf-stat .pf-stars{font-size:10px;letter-spacing:-1px;flex-shrink:0}
  .pf-stat.str .pf-stars{color:var(--gold-bright)}
  .pf-stat.wk  .pf-stars{color:#e8757a}
  .pf-opts .cs-opt{padding-top:14px;padding-bottom:11px}
  .pf-osub{font-family:'Inter',sans-serif;font-weight:600;font-size:9.5px;color:var(--gold-dim);margin-top:1px;text-align:center;line-height:1.1}
  .cs-opt.rec .pf-osub{color:var(--gold-bright)}
  .cs-tell{display:block;margin-top:5px;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:#9cc6ff;
    border-top:1px dashed rgba(120,150,200,.3);padding-top:5px}

  /* PRE-FIGHT screen wrapper — its OWN full-screen box (the corner-overlay relied on .fo-inner
     having height, which it doesn't before the fight). Self-sizing so the whole card shows. */
  .pf-screen{position:fixed;inset:0;z-index:100040;display:grid;place-items:center;padding:14px;
    background:rgba(4,7,13,.9);backdrop-filter:blur(4px)}
  .pf-screen .cs-card{transform:none}   /* fully shown + centered, no collapse */

  /* ===== FIGHT-SCREEN POLISH (v76): compact corner card, scout report, big timers, tutorial ===== */
  /* #2 — make the whole corner card fit the viewport so ALL FOUR strategy buttons are visible (no clipping). */
  .corner-overlay .cs-card.cs-corner{width:min(420px,94vw);max-height:calc(100vh - 28px);overflow-y:auto;padding:12px 11px 13px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.12),transparent 64%),linear-gradient(180deg,#111a2c,#070b13 72%);
    box-shadow:0 28px 90px rgba(0,0,0,.92),0 0 34px rgba(212,175,55,.16)}
  .cs-corner .cs-head{margin-bottom:1px}
  .cs-corner .cs-names{margin:4px 0 6px;font-size:14px}
  .cs-corner .cs-stat{padding:2px 0}
  .cs-corner .cs-stat .cs-v{font-size:16px}
  .cs-corner .cs-mom{margin:5px 0 8px;padding-top:7px}
  .cs-corner .cs-coach{font-size:13px;margin:2px 0 9px;line-height:1.3}
  .cs-corner .cs-opts{gap:7px}
  .cs-corner .cs-opt{padding:8px 6px 9px}
  .cs-corner .cs-opt .cs-oico{font-size:21px}
  .cs-corner .cs-opt .cs-onm{font-size:12px}

  /* #3 — "Corner Break" subtitle */
  .cs-sub{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:2.5px;
    text-transform:uppercase;color:var(--gold-dim);margin-bottom:7px}

  /* #5 — big, impossible-to-miss countdowns */
  .cs-timer.big{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;
    text-transform:uppercase;color:var(--text);margin-top:12px;padding:8px 10px;border-radius:9px;
    background:linear-gradient(180deg,rgba(212,175,55,.10),rgba(212,175,55,.03));
    border:1px solid var(--gold-dim)}
  .cs-timer.big b{font-size:21px;color:var(--gold-bright);text-shadow:0 0 12px rgba(212,175,55,.55)}

  /* #4 — OPPONENT SCOUT REPORT (pre-fight): unambiguous ownership */
  .pf-scout{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
  .pf-scout-h{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--gold-bright);margin-bottom:8px;text-align:center}
  .pf-h{font-size:9.5px;letter-spacing:.6px}

  /* #6 — first-time tutorial card */
  .tuto-card{text-align:center;width:min(420px,94vw)}
  .tuto-ico{font-size:40px;line-height:1;margin-bottom:6px}
  .tuto-list{list-style:none;margin:12px auto 0;padding:0;max-width:330px;text-align:left}
  .tuto-list li{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--text);
    padding:9px 12px;margin-bottom:8px;border-radius:9px;background:linear-gradient(180deg,#141d33,#0c1322);
    border:1px solid var(--line)}
  .tuto-list li b{color:var(--gold-bright)}
  .tuto-note{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);
    line-height:1.4;margin:6px auto 16px;max-width:340px}
  .tuto-note b{color:var(--text)}
  .tuto-go{flex-direction:row !important;justify-content:center;padding:13px !important;
    border-color:var(--gold) !important;box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(212,175,55,.4)}
  .tuto-go .cs-onm{font-size:16px !important;letter-spacing:1px;color:var(--gold-bright)}

  /* ===== v77 polish: tutorial auto-note, About "You Are the Coach", bigger Scout Report fonts ===== */
  /* #1 — tutorial auto-pick note */
  .tuto-auto{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;line-height:1.4;
    color:var(--gold-bright);margin:-4px auto 15px;max-width:350px;padding:9px 13px;border-radius:9px;
    background:rgba(212,175,55,.07);border:1px solid rgba(212,175,55,.28)}

  /* #2 — permanent re-readable coach explainer on the About page (matches .ab-engine) */
  .ab-coach{position:relative;overflow:hidden;margin:20px 0 6px;padding:20px 20px 14px;border-radius:14px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.10),transparent 72%),linear-gradient(180deg,#161e31,#0b1120);
    border:1px solid var(--gold-dim);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 26px rgba(212,175,55,.1),inset 0 1px 0 rgba(255,255,255,.05)}
  .ab-coach::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim))}
  .ab-coach-head{font-family:'Barlow Condensed';font-weight:700;font-size:20px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--gold-bright);text-shadow:0 0 22px rgba(212,175,55,.45);margin-bottom:14px}
  .about-card .ab-coach-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;color:var(--text);font-size:14.5px;line-height:1.5}
  .about-card .ab-coach-row > b{flex:0 0 96px;color:var(--gold-bright);font-family:'Barlow Condensed';font-weight:600;font-size:13px;letter-spacing:.3px}
  .about-card .ab-coach-row span b{color:#fff}
  .ab-coach .ab-eng-gold{color:var(--gold-bright)}
  .about-card .ab-coach-note{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--gold-bright);
    border-top:1px solid var(--line-soft);padding-top:13px;margin:4px 0 0;line-height:1.45}
  .about-card .ab-coach-note b{color:var(--gold-bright)}
  @media(max-width:560px){ .ab-coach-head{font-size:17px} .about-card .ab-coach-row > b{flex-basis:82px} }

  /* #3 — bigger, phone-readable pre-fight Scout Report + comfortable corner/coach text */
  .pf-scout-h{font-size:13.5px;letter-spacing:1px;margin-bottom:9px}
  .pf-h{font-size:12.5px !important;letter-spacing:.5px;margin-bottom:5px}
  .pf-stat{font-size:15px;line-height:1.65}
  .pf-stat .pf-sn{font-size:15px}
  .pf-stat .pf-stars{font-size:15px;letter-spacing:0}
  .pf-cols{gap:14px}
  .pf-screen .cs-card{max-height:94vh;overflow-y:auto}   /* safety: bigger fonts never clip the card */
  /* corner-break + coach lines: nudge up for comfort */
  .cs-coach{font-size:14.5px}
  .cs-corner .cs-coach{font-size:14px}
  .cs-stat .cs-l{font-size:12px}

  /* ===== v78 UI fixes: centered pre-fight header + framed About sections ===== */
  /* #1 — center the opponent name + record in the pre-fight header (avatar centered above) */
  .pf-opp{flex-direction:column;align-items:center;text-align:center;gap:9px}
  .pf-opp-info{flex:none;min-width:0;max-width:100%}
  .pf-opp-nm{white-space:normal;overflow:visible;text-overflow:clip}
  .pf-opp-sub{margin-bottom:0}

  /* #4 — frame the earlier About sections in the same gold-bordered card as the engine/coach panels */
  .ab-frame{position:relative;overflow:hidden;margin:0 0 16px;padding:18px 20px 8px;border-radius:14px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.07),transparent 72%),linear-gradient(180deg,#141c2f,#0a1019);
    border:1px solid var(--gold-dim);box-shadow:0 8px 26px rgba(0,0,0,.4),0 0 22px rgba(212,175,55,.08),inset 0 1px 0 rgba(255,255,255,.04)}
  .ab-frame::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim))}
  .about-card .ab-frame h3{margin-top:0}
  .about-card .ab-frame p{color:var(--text);font-size:14.5px;line-height:1.55}
  .about-card .ab-frame p b{color:#fff}

  /* ===== v79: align Corner Break stat numbers (fixed-width number columns) ===== */
  .cs-corner .cs-stat{grid-template-columns:3.2em 1fr 3.2em;gap:10px}
  .cs-corner .cs-stat .cs-v{text-align:right}        /* YOU number hugs the label, fixed column */
  .cs-corner .cs-stat .cs-v.opp{text-align:left}     /* OPP number hugs the label, fixed column */
  .cs-corner .cs-stat .cs-l{text-align:center}       /* keep label centered between the fixed number columns */

  /* ===== v81: LEVEL-UP POPUP (celebratory reward window on every level gain) ===== */
  .lvlup-ov{position:fixed;inset:0;z-index:100060;display:grid;place-items:center;padding:20px;
    background:rgba(4,7,13,.82);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}
  .lvlup-ov.show{opacity:1}
  .lvlup-card{position:relative;width:min(360px,92vw);text-align:center;overflow:hidden;
    padding:24px 22px 22px;border-radius:18px;
    background:radial-gradient(ellipse at 50% -10%,rgba(212,175,55,.22),transparent 70%),linear-gradient(180deg,#1a2236,#0b1120);
    border:1px solid var(--gold);
    box-shadow:0 0 0 1px rgba(212,175,55,.25),0 18px 50px rgba(0,0,0,.6),0 0 50px rgba(212,175,55,.3);
    transform:scale(.7);opacity:0;transition:transform .5s cubic-bezier(.18,.9,.3,1.3),opacity .35s ease}
  .lvlup-ov.show .lvlup-card{transform:scale(1);opacity:1}
  .lu-shine{position:absolute;top:0;left:-50%;width:40%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-20deg);
    animation:ppShine 1.4s ease .35s both}
  .lu-header{font-family:'Barlow Condensed';font-weight:700;font-size:30px;letter-spacing:2px;color:var(--gold-bright);
    text-shadow:0 0 26px rgba(212,175,55,.6);margin-bottom:14px}
  .lu-av{width:84px;height:84px;margin:0 auto 14px;border:2px solid var(--gold-dim);box-shadow:0 0 24px rgba(212,175,55,.3)}
  .lu-jump{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
  .lu-lv{font-family:'Barlow Condensed';font-weight:700;font-size:18px;letter-spacing:1px}
  .lu-lv.from{color:var(--muted)}
  .lu-lv.to{color:var(--gold-bright);font-size:22px;text-shadow:0 0 16px rgba(212,175,55,.5)}
  .lu-arrow{font-size:20px;color:var(--gold);font-weight:700}
  .lu-rewards{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
  .lu-reward{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:11px;text-align:left;
    background:linear-gradient(90deg,rgba(212,175,55,.10),rgba(212,175,55,.02));border:1px solid var(--gold-dim)}
  .lu-ric{width:22px;height:22px;color:var(--gold-bright);flex-shrink:0;display:inline-flex}
  .lu-ric svg{width:100%;height:100%}
  .lu-rval{font-family:'Barlow Condensed';font-weight:700;font-size:18px;color:var(--gold-bright);min-width:40px}
  .lu-rlab{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:.3px}
  .lu-claim{width:100%}

  /* ===== v83: EQUIP / CUSTOMIZE (cosmetic identity) ===== */
  /* GUARDRAIL A — frames are border-COLOR + box-shadow RING only. Border WIDTH stays 1px, so the
     avatar content box (and the avatarSVG inside, which is width/height:100%) is never resized,
     clipped, or distorted. The ring/glow draw OUTSIDE the element via box-shadow. */
  .avatar-frame.frame-bronze{border-color:#bb7b3e;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 2px #bb7b3e,0 0 14px rgba(187,123,62,.32)}
  .avatar-frame.frame-silver{border-color:#c8d2e0;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 2px #c8d2e0,0 0 16px rgba(200,210,224,.42)}
  .avatar-frame.frame-gold{border-color:#f7c948;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 2px #f7c948,0 0 20px rgba(247,201,72,.45)}
  .avatar-frame.frame-elite{border-color:#ffd86b;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px #ffd86b,0 0 26px rgba(255,216,107,.6)}
  /* M22 S2 — fame-gated frames */
  .avatar-frame.frame-star{border-color:#7fc4ff;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 2px #7fc4ff,0 0 18px rgba(127,196,255,.5)}
  .avatar-frame.frame-crimson{border-color:#e0556a;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px #e0556a,0 0 22px rgba(224,85,106,.55)}
  .avatar-frame.frame-icon{border-color:#f7dd88;box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px #f7dd88,0 0 30px rgba(247,221,136,.7)}

  /* equipped identity bits on My Fighter */
  .hud-title{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--gold-bright);
    text-transform:uppercase;display:inline-flex;align-items:center;gap:3px;margin-left:4px}
  .hud-title svg{width:12px;height:12px}
  .hud-badges{display:inline-flex;gap:5px;align-items:center;vertical-align:middle}
  .eq-badge{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:6px;
    color:var(--rc,#bb7b3e);border:1px solid var(--rc,#bb7b3e);background:rgba(255,255,255,.03)}
  .eq-badge svg{width:14px;height:14px}

  /* open button on My Fighter */
  .cz-open-btn{width:100%;display:flex;align-items:center;gap:13px;margin-bottom:16px;cursor:pointer;text-align:left;
    padding:14px 16px;border-radius:14px;border:1px solid var(--gold-dim);
    background:radial-gradient(ellipse at 0 50%,rgba(212,175,55,.10),transparent 60%),linear-gradient(180deg,#141d33,#0c1322);transition:.18s}
  .cz-open-btn:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(212,175,55,.22);transform:translateY(-1px)}
  .czb-ic{font-size:24px;line-height:1}
  .czb-tx{flex:1;display:flex;flex-direction:column}
  .czb-t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.5px;color:#fff;text-transform:uppercase}
  .czb-s{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted)}
  .czb-arrow{color:var(--gold);font-size:18px}

  /* customize: back button in section title */
  .section-title.with-back{display:flex;align-items:center;gap:10px}
  .section-title.with-back h2{flex:0 1 auto}
  .cz-back{margin-left:auto;font-size:12px}

  /* preview */
  .cz-preview{border:1px solid var(--gold-dim);border-radius:14px;padding:16px;margin-bottom:16px;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.10),transparent 70%),linear-gradient(180deg,#161e31,#0b1120)}
  .cz-pv-head{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dim);margin-bottom:12px}
  .cz-pv-body{display:flex;gap:16px;align-items:center}
  .cz-pv-av{width:92px;height:92px;flex-shrink:0}
  .cz-pv-id{flex:1;min-width:0}
  .cz-pv-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;color:#fff;line-height:1.15;margin-bottom:6px}
  .cz-pv-name .nkn{color:var(--gold-bright);font-style:normal}
  .cz-pv-title{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-bright);display:flex;align-items:center;gap:5px;margin-bottom:8px}
  .cz-pv-title svg{width:14px;height:14px}
  .cz-pv-title.none{color:var(--muted);text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif}
  .cz-pv-badges{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .cz-none{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}

  /* slots */
  .cz-slots{display:flex;flex-direction:column;gap:14px}
  .cz-slot{border:1px solid var(--line);border-radius:13px;padding:14px;background:linear-gradient(180deg,#0e1626,#0a0f1c)}
  .cz-slot-head{display:flex;align-items:center;gap:8px;margin-bottom:11px}
  .cz-slot-ic{display:inline-flex;color:var(--gold-bright);font-size:15px}
  .cz-slot-ic svg{width:16px;height:16px}
  .cz-slot-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:#fff}
  .cz-cur{margin-left:auto;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--gold-bright)}
  .cz-custom{display:flex;gap:8px;margin-bottom:11px}
  .cz-input{flex:1;min-width:0;background:#0a1020;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
    color:var(--text);font-family:'Inter',sans-serif;font-weight:600;font-size:14px}
  .cz-input:focus{outline:none;border-color:var(--gold-dim)}
  .btn-mini{background:#16213a;border:1px solid var(--line);border-radius:9px;padding:8px 14px;cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);transition:.15s}
  .btn-mini:hover{border-color:var(--gold-dim)}
  .btn-mini.gold{background:linear-gradient(180deg,#caa63a,#9a7d28);border-color:var(--gold);color:#1a1305}
  .cz-opts{display:flex;flex-wrap:wrap;gap:8px}
  .cz-opt{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border-radius:9px;
    border:1px solid var(--line);background:#11192c;color:var(--text);
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;transition:.15s}
  .cz-opt:hover{border-color:var(--gold-dim)}
  .cz-opt.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px rgba(212,175,55,.3);color:var(--gold-bright)}
  .cz-opt.locked{opacity:.45;cursor:not-allowed}
  .cz-opt.earned{border-color:var(--gold-dim)}
  .cz-earn-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 6px var(--gold-bright)}
  .cz-opt.frame .eq-frame-dot{width:14px;height:14px;border-radius:5px;background:var(--fc,#bb7b3e);border:1px solid rgba(255,255,255,.25);box-shadow:0 0 8px var(--fc,#bb7b3e)}
  .cz-lock{display:inline-flex;color:var(--muted)}.cz-lock svg{width:13px;height:13px}
  .cz-hint{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.4}
  /* badges grid */
  .cz-opts.badges{gap:9px}
  .cz-badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;width:92px;padding:11px 6px;
    border-radius:11px;border:1px solid var(--line);background:#11192c;transition:.15s}
  .cz-badge:hover{border-color:var(--rc)}
  .cz-badge.on{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc),0 0 16px color-mix(in srgb,var(--rc) 40%,transparent)}
  .cz-badge-ic{display:inline-flex;color:var(--rc)}.cz-badge-ic svg{width:24px;height:24px}
  .cz-badge-nm{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.3px;text-align:center;color:var(--text);line-height:1.15}
  .cz-badge-on{position:absolute;top:5px;right:6px;color:var(--rc);font-weight:700;font-size:12px}

  /* ===== v85: #74 Step B — equipped identity on fight intro + result (player side only) ===== */
  .fo-entrance .ent-title{display:inline-flex;align-items:center;gap:4px;margin:1px 0 2px;
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-bright)}
  .fo-entrance .ent-title svg{width:12px;height:12px}
  .ra-nick{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:600;font-size:11px;color:var(--gold);text-align:center;line-height:1.1}
  .ra-title{display:inline-flex;align-items:center;gap:3px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:9.5px;
    letter-spacing:.8px;text-transform:uppercase;color:var(--gold-bright);line-height:1.1}
  .ra-title svg{width:11px;height:11px}

  /* ===== v86: #75 Step 1 — Moment Hierarchy beats (T3 knockdown / T4 finish). Display-only. ===== */
  /* oversized centered "DOWN!" word on the knockdown beat */
  .beat-word{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:10;pointer-events:none;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:62px;letter-spacing:2px;color:#fff;text-align:center;
    text-shadow:0 0 34px rgba(255,80,80,.85),0 4px 18px rgba(0,0,0,.7);-webkit-text-stroke:2px rgba(255,70,70,.45);
    animation:beatWordPop 1s cubic-bezier(.15,.8,.2,1) forwards}
  @keyframes beatWordPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}32%{transform:translate(-50%,-50%) scale(1)}
    80%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1.02)}}
  /* the crowd ERUPTS harder/longer on T3+ than the regular .roar brighten */
  .fo-arena.roarBig .cs-crowd{animation:crowdRoarBig 1.3s ease}
  @keyframes crowdRoarBig{0%,100%{opacity:.6;filter:brightness(1)}
    20%{opacity:1;filter:brightness(2.7) saturate(1.8)}55%{opacity:.92;filter:brightness(1.6) saturate(1.3)}}
  /* brief freeze-zoom for the knockdown beat (lighter than the KO slow-mo) */
  .fo-inner.kdfreeze{animation:kdFreeze .5s cubic-bezier(.1,.7,.2,1) both}
  @keyframes kdFreeze{0%{transform:scale(1)}30%{transform:scale(1.055)}100%{transform:scale(1)}}
  /* crowd-reaction commentary line (only printed at T3+) */
  .feed .ln.crowd{color:#ffd86b;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:1px;
    font-size:14.5px;text-transform:uppercase;font-style:normal;opacity:.96}
  .feed .ln.crowd::before{content:"";}
  @media(max-width:560px){ .beat-word{font-size:42px} }

  /* ===== v87: #75 Step 2 (FINAL) — unmistakable beats + VISIBLE crowd banner + context labels ===== */
  /* VISIBLE crowd banner — pinned to the TOP of the screen, slides in ~1s then fades (this IS the crowd) */
  .fo-crowd-banner{position:fixed;top:14px;left:50%;z-index:100070;pointer-events:none;
    transform:translateX(-50%) translateY(-140%);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .28s ease;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:2px;text-transform:uppercase;color:#1a1305;
    padding:11px 26px;border-radius:40px;white-space:nowrap;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 34px rgba(247,201,72,.6),inset 0 1px 0 rgba(255,255,255,.5);
    border:1px solid var(--gold-bright)}
  .fo-crowd-banner.show{transform:translateX(-50%) translateY(0);opacity:1}
  @media(max-width:560px){ .fo-crowd-banner{font-size:15px;letter-spacing:1.4px;padding:9px 18px;max-width:92vw;white-space:normal;text-align:center} }

  /* hard white flash punch (knockdown + finish) */
  .beat-flash{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:18px;background:#fff;
    animation:beatFlash .42s ease-out forwards}
  @keyframes beatFlash{0%{opacity:0}9%{opacity:.92}100%{opacity:0}}

  /* ~2x the mega shake — for knockdown + finish */
  .fo-arena.shakeMax{animation:shakeMax .64s}
  @keyframes shakeMax{0%,100%{transform:translate(0,0) rotate(0)}6%{transform:translate(-42px,22px) rotate(-3deg)}
    18%{transform:translate(44px,-26px) rotate(3.2deg)}34%{transform:translate(-36px,19px) rotate(-2.4deg)}
    52%{transform:translate(32px,-16px) rotate(2deg)}70%{transform:translate(-20px,11px) rotate(-1.2deg)}86%{transform:translate(12px,-6px)}}

  /* beat words — bigger knockdown word; GIANT finish word */
  .beat-word{font-size:74px !important}
  .beat-word.finish{font-size:104px !important;color:#fff;letter-spacing:3px;
    text-shadow:0 0 46px rgba(247,201,72,.95),0 0 22px rgba(255,255,255,.7),0 6px 26px rgba(0,0,0,.8);
    -webkit-text-stroke:3px rgba(212,175,55,.65)}
  @media(max-width:560px){ .beat-word{font-size:48px !important} .beat-word.finish{font-size:66px !important} }

  /* pre-fight context label (above VS) */
  .ent-ctx{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:3px;text-transform:uppercase;
    margin-bottom:8px;padding:5px 14px;border-radius:30px;display:inline-block;
    animation:ctxPulse 1.6s ease-in-out infinite}
  .ent-ctx.ctx-title{color:#1a1305;background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 26px rgba(247,201,72,.6)}
  .ent-ctx.ctx-boss{color:#fff;background:linear-gradient(180deg,#e8484f,#a02530);box-shadow:0 0 26px rgba(232,74,79,.55)}
  .ent-ctx.ctx-main{color:var(--gold-bright);background:rgba(212,175,55,.12);border:1px solid var(--gold-dim)}
  @keyframes ctxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

  /* ===== v88: ARENA IDENTITY SYSTEM — persistent crowd silhouette, pulse, tier mood, arena card, betting flavor ===== */
  /* 1. PERSISTENT CROWD SILHOUETTE — one cheap pseudo-element per crowd layer: a row of dark "heads" + a fading
     mass below, so a crowd visibly EXISTS behind the cage the whole fight. No DOM people. The existing
     light-dots stay layered on top. */
  .cage-scene .cs-crowd::before,
  .cage-scene.streets .st-crowd::before{
    content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:90%;pointer-events:none;
    background:
      /* back row — smaller, dimmer heads, offset */
      radial-gradient(circle at 8px 12px, rgba(74,90,120,.9) 6px, transparent 7px) 7px 0/16px 16px repeat-x,
      /* front row — bigger, brighter heads (clearly lighter than the backdrop) */
      radial-gradient(circle at 12px 17px, rgba(104,122,158,.98) 8px, transparent 9px) 0 5px/24px 19px repeat-x,
      /* dark shoulder/body mass settling into the floor */
      linear-gradient(180deg, rgba(10,15,26,0), #0a1018 62%, #070b14);
    filter:blur(.6px);opacity:.96}
  .cage-scene.streets .st-crowd::before{
    background:
      radial-gradient(circle at 8px 12px, rgba(78,70,56,.92) 6px, transparent 7px) 7px 0/16px 16px repeat-x,
      radial-gradient(circle at 12px 17px, rgba(112,98,78,.98) 8px, transparent 9px) 0 5px/24px 19px repeat-x,
      linear-gradient(180deg, rgba(14,11,7,0), #100c08 62%, #070503);
    filter:blur(.8px) saturate(.85);opacity:.95}

  /* 2. CROWD PULSE — silhouette reacts on T3/T4: brighten + slight scale (~2.5%). No opacity jump. */
  .fo-arena.crowdpulse .cs-crowd, .fo-arena.crowdpulse .st-crowd{animation:crowdPulse .9s ease}
  @keyframes crowdPulse{0%,100%{transform:scale(1);filter:brightness(1)}
    26%{transform:scale(1.025);filter:brightness(2.5) saturate(1.5)}60%{transform:scale(1.01);filter:brightness(1.5)}}
  .fo-arena.crowdpulse .cs-mood{animation:moodPulse .9s ease}
  @keyframes moodPulse{0%,100%{filter:brightness(1)}26%{filter:brightness(1.5)}}

  /* 3. ARENA TINT / MOOD BY TIER — one overlay element (.cs-mood), CSS-only lighting. */
  .cs-mood{position:absolute;inset:0;pointer-events:none;z-index:3}
  .arena-tier-0 .cs-mood{                                                   /* The Streets — dark, dirty, rusty (warm haze must LIGHTEN against near-black, so screen not multiply) */
    background:radial-gradient(120% 85% at 50% 2%, rgba(168,98,42,.30), rgba(96,54,22,.10) 44%, transparent 70%),
              radial-gradient(90% 60% at 50% 116%, rgba(120,64,26,.16), transparent 60%);mix-blend-mode:screen}
  .arena-tier-1 .cs-mood{                                                   /* The Colosseum — gold/red, smoky, rich */
    background:radial-gradient(120% 90% at 50% 0, rgba(214,64,44,.20), transparent 55%),
              radial-gradient(110% 80% at 50% 112%, rgba(212,175,55,.22), transparent 60%);mix-blend-mode:screen}
  .arena-tier-2 .cs-mood{                                                   /* Amateur League — cleaner, cool */
    background:radial-gradient(120% 95% at 50% 4%, rgba(120,170,235,.14), transparent 60%);mix-blend-mode:screen}
  .arena-tier-3 .cs-mood{                                                   /* Country Leagues — warm broadcast */
    background:radial-gradient(120% 95% at 50% 2%, rgba(235,195,120,.16), transparent 60%);mix-blend-mode:screen}
  .arena-tier-4 .cs-mood{                                                   /* Olympus — bright, grand, white-gold */
    background:radial-gradient(130% 100% at 50% -6%, rgba(255,245,210,.26), transparent 56%),
              radial-gradient(100% 70% at 50% 108%, rgba(247,221,136,.22), transparent 62%);mix-blend-mode:screen}

  /* 4. ARENA CARD (pre-fight identity in the walkout) */
  .arena-card{margin-top:10px;padding:9px 14px;border-radius:12px;display:inline-block;text-align:center;
    background:linear-gradient(180deg,rgba(20,29,51,.92),rgba(8,13,22,.92));border:1px solid var(--gold-dim);
    box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
    animation:arenaCardIn .55s cubic-bezier(.2,.8,.2,1) .45s both}
  @keyframes arenaCardIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
  .arena-card .ac-loc{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;
    color:var(--gold-bright);display:flex;align-items:center;justify-content:center;gap:5px;line-height:1.1}
  .arena-card .ac-pin{display:inline-flex;width:13px;height:13px}.arena-card .ac-pin svg{width:13px;height:13px}
  .arena-card .ac-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--text);opacity:.85;margin-top:2px;font-style:italic}
  .arena-card .ac-cap{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .arena-card.arena-tier-0{border-color:#7a4a1c}.arena-card.arena-tier-0 .ac-loc{color:#d49a52}
  .arena-card.arena-tier-1{border-color:var(--gold)}
  .arena-card.arena-tier-4{border-color:var(--gold-bright);box-shadow:0 0 24px rgba(247,221,136,.35)}
  @media(max-width:560px){ .arena-card{padding:7px 11px} .arena-card .ac-loc{font-size:13px} }

  /* ===== v90: #76 Step B — Colosseum champion frame, story-intro card, "Colosseum Unlocked" chapter ===== */
  /* Emperor frame (Colosseum champion reward) — same border-color + ring approach as the other frames */
  .avatar-frame.frame-emperor{border-color:#e7c75a;
    box-shadow:inset 0 0 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),
      0 0 0 3px #e7c75a,0 0 30px rgba(231,199,90,.7),0 0 0 1px rgba(255,255,255,.25)}

  /* PRE-FIGHT STORY INTRO card (uses the .pf-screen full-screen wrapper) */
  .si-card{text-align:center;width:min(420px,94vw)}
  .si-kicker{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-dim);margin-bottom:12px}
  .si-av{width:96px;height:96px;margin:0 auto 12px}
  .si-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;color:#fff;letter-spacing:.4px;line-height:1.1}
  .si-nick{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:600;font-size:15px;color:var(--gold);margin-top:2px}
  .si-meta{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:1px}
  .si-blurb{font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px;color:var(--text);line-height:1.5;margin:14px auto 0;max-width:360px}
  .si-coach{display:flex;gap:9px;align-items:flex-start;justify-content:center;margin:14px auto 18px;max-width:360px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--gold-bright);
    padding:10px 14px;border-radius:10px;background:rgba(212,175,55,.08);border:1px solid var(--gold-dim);text-align:left}
  .si-coach-ic{font-size:16px;line-height:1.1;flex-shrink:0}
  .si-go{width:100%}
  /* boss (Cassius) — grander */
  .si-boss{border-color:var(--gold)!important;box-shadow:0 0 0 1px var(--gold),0 22px 60px rgba(0,0,0,.6),0 0 50px rgba(231,199,90,.3)!important}
  .si-boss .si-kicker{color:var(--gold-bright);text-shadow:0 0 18px rgba(231,199,90,.5)}
  .si-boss .si-name{font-size:27px;color:var(--gold-bright);text-shadow:0 0 22px rgba(231,199,90,.45)}
  .si-boss-line{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;
    color:#fff;margin:12px auto 0;max-width:340px;line-height:1.35}

  /* "THE COLOSSEUM UNLOCKED" chapter screen (reuses the celebration look) */
  .colo-unlock{position:relative;text-align:center;padding:30px 22px;max-width:560px;margin:0 auto;
    opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.2)}
  .colo-unlock.show{opacity:1;transform:none}
  .cu-rays{position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side, rgba(231,199,90,.18), transparent 70%);
    -webkit-mask-image:repeating-conic-gradient(from 0deg, #000 0 7deg, transparent 7deg 16deg);
            mask-image:repeating-conic-gradient(from 0deg, #000 0 7deg, transparent 7deg 16deg);animation:rays 22s linear infinite}
  @keyframes rays{to{transform:rotate(360deg)}}
  .cu-kicker{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-dim);margin-bottom:10px}
  .cu-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:46px;line-height:.98;letter-spacing:1px;color:#fff;text-transform:uppercase}
  .cu-title span{color:var(--gold-bright);text-shadow:0 0 34px rgba(231,199,90,.6)}
  .cu-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--muted);margin:14px auto 20px;max-width:420px;line-height:1.45}
  .cu-feats{display:flex;flex-direction:column;gap:10px;max-width:430px;margin:0 auto 24px;text-align:left}
  .cu-feat{display:flex;gap:11px;align-items:flex-start;font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--text);
    padding:11px 15px;border-radius:11px;background:linear-gradient(90deg,rgba(212,175,55,.10),rgba(212,175,55,.02));border:1px solid var(--gold-dim)}
  .cu-feat > b{color:var(--gold-bright);font-size:17px;line-height:1.1}
  .cu-feat b{color:var(--gold-bright)}
  @media(max-width:560px){ .cu-title{font-size:34px} .si-name{font-size:20px} .si-boss .si-name{font-size:22px} }

  /* ===== v96: #weight Step 2 — Champion Victory + Move-Up + Double Champion ===== */
  /* championship win: a big gold belt crown above the result (reuses .fo-result.champ gold styling) */
  .fo-result .champ-belt{font-size:62px;line-height:1;color:var(--gold-bright);text-shadow:0 0 30px rgba(247,221,136,.6);margin-bottom:6px}
  .fo-result .champ-belt svg{width:64px;height:64px}
  .fo-result.title-win .rbig{color:var(--gold-bright);text-shadow:0 0 28px rgba(247,221,136,.55);letter-spacing:1px}
  /* (M20 S5 — .dbl-champ-banner + .career-moveup removed: Double-Champion and move-up-a-weight retired) */

  /* PERSISTENT ADVANCE card — the vertical path to the next tier (red accent, distinct from gold Move-Up). */
  .career-advance{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:13px 16px;border-radius:14px;
    border:1px solid var(--red,#e0414a);background:radial-gradient(ellipse at 0 50%,rgba(224,65,74,.16),transparent 60%),linear-gradient(180deg,#241420,#120b14);
    box-shadow:0 0 22px rgba(224,65,74,.20)}
  .career-advance .cmu-ic{display:inline-flex;color:#ff6a72;flex-shrink:0}
  .career-advance .cmu-ic svg{width:30px;height:30px}
  .career-advance .cmu-tx{flex:1;min-width:0}
  .career-advance .cmu-t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:#ff8088}
  .career-advance .cmu-s{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
  .career-advance .cmu-s b{color:var(--text)}
  .career-advance .cmu-btn{flex-shrink:0}
  @media(max-width:560px){ .career-advance{flex-wrap:wrap} .career-advance .cmu-btn{width:100%} }

  /* ===== BELT ROOM (AWARDS tab) — M20 S5: one belt per tier (no per-tier grouping / Double-Champion) ===== */
  .belt-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}

  /* ===== M21 — DAILY CONTRACTS ===== */
  .dc-card{padding:14px 16px}
  .dc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
  .dc-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:1.6px;color:var(--gold-bright)}
  .dc-reset{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted)}
  .dc-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;
    border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.022)}
  .dc-row.done{border-color:var(--gold-dim);background:radial-gradient(ellipse at 0 50%,rgba(212,175,55,.10),transparent 60%),rgba(255,255,255,.03)}
  .dc-main{min-width:0}
  .dc-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:.3px}
  .dc-bar{margin-top:6px;height:6px;border-radius:4px;background:#1a2233;overflow:hidden}
  .dc-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .3s}
  .dc-row.done .dc-bar span{background:linear-gradient(90deg,#39d98a,#7ef0b0)}
  .dc-num{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
  .dc-rw{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--gold);white-space:nowrap}
  .dc-claimed{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:#39d98a;white-space:nowrap}
  .dc-claim{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.5px;color:#1a1305;cursor:pointer;
    border:none;border-radius:8px;padding:7px 12px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));white-space:nowrap;
    display:flex;flex-direction:column;align-items:center;line-height:1.15}
  .dc-claim span{font-size:10px;font-weight:600;opacity:.85}
  .dc-claim:hover{filter:brightness(1.08)}
  .dc-bonus{margin-top:4px;padding:8px 12px;border-radius:9px;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;
    text-align:center;color:var(--muted);border:1px dashed var(--line)}
  .dc-bonus.ready{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(212,175,55,.08)}
  .dc-bonus.claimed{color:#39d98a;border-style:solid;border-color:rgba(57,217,138,.3)}
  /* Home-tab summary card */
  .daily-home-card{width:100%;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;margin-bottom:12px;
    padding:12px 15px;border-radius:13px;border:1px solid var(--line);color:var(--text);
    background:radial-gradient(ellipse at 0 50%,rgba(212,175,55,.10),transparent 60%),linear-gradient(180deg,#161d2c,#0e1320);transition:.14s}
  .daily-home-card:hover{border-color:var(--gold);transform:translateY(-1px)}
  .daily-home-card.has-claim{border-color:var(--gold-dim);box-shadow:0 0 18px rgba(212,175,55,.18)}
  .daily-home-card .dh-ic{font-size:18px;color:var(--gold-bright)}
  .daily-home-card .dh-tx{flex:1;min-width:0;display:flex;flex-direction:column}
  .daily-home-card .dh-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.4px;color:#fff}
  .daily-home-card .dh-tx span{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted)}
  .daily-home-card .dh-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.5px;color:#1a1305;
    background:var(--gold-bright);border-radius:20px;padding:3px 10px}
  .daily-home-card .dh-arrow{color:var(--muted);font-size:16px}
  .belt-card{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;
    border:1px solid var(--gold);background:radial-gradient(ellipse at 0 50%,rgba(247,221,136,.12),transparent 62%),linear-gradient(180deg,#1a2236,#0c1322)}
  .belt-card.amateur{border-color:#5a8be0;background:radial-gradient(ellipse at 0 50%,rgba(90,139,224,.14),transparent 62%),linear-gradient(180deg,#0f1a2a,#0a1018)}
  .belt-card-art{width:84px;flex-shrink:0}
  .belt-card-body{flex:1;min-width:0}
  .belt-card-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.4px;color:var(--gold-bright);line-height:1.2}
  .belt-card.amateur .belt-card-title{color:#cfe0ff}
  .belt-card-title .bc-medal{font-size:15px}
  .belt-meta{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--muted);margin-top:3px}
  .belt-meta b{color:var(--text)}
  .belt-empty{text-align:center;padding:26px 16px}
  .belt-empty .be-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:1.5px;color:var(--text);margin-bottom:4px}
  .belt-empty .be-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);margin-bottom:18px}
  .belt-ghosts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .belt-ghost{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.32;width:88px}
  .belt-ghost .bg-ic{display:inline-flex;color:var(--muted)}.belt-ghost .bg-ic svg{width:34px;height:34px}
  .belt-ghost .bg-lab{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--muted);text-align:center}
  /* M20 S5 — Belt Room: tier-belt header + locked (not-yet-won) tier cards inside the grid */
  .belt-room-head{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--gold-bright);margin:2px 0 12px}
  .belt-ghost.locked{flex-direction:row;justify-content:flex-start;width:auto;opacity:.5;gap:13px;padding:12px 14px;border-radius:14px;
    border:1px dashed var(--line);background:linear-gradient(180deg,#10141c,#0c0f15)}
  .belt-ghost.locked .bg-ic svg{width:30px;height:30px}
  .belt-ghost.locked .bg-lab{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.4px;color:var(--muted);text-align:left;flex:1}
  .belt-ghost.locked .bg-lock{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.5px;color:var(--muted);white-space:nowrap}
  /* ===== FULL BELT COLLECTION (Belt Room — all 20 belts: 5 earnable now + 15 future titles) ===== */
  .belt-room-head .brh-sub{color:var(--muted);font-weight:600}
  .belt-coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
  .belt-coll-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(8,12,22,.5));border:1px solid var(--line);
    border-radius:13px;padding:13px 10px 11px;text-align:center;transition:transform .15s,border-color .15s,box-shadow .15s}
  .belt-coll-card:hover{transform:translateY(-2px)}
  .belt-coll-card .bcc-art{margin-bottom:9px}
  .belt-coll-card .bcc-belt-img{width:100%;height:auto;display:block}
  .belt-coll-card .bcc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.6px;color:#fff;font-size:14.5px}
  .belt-coll-card .bcc-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.4px;color:var(--muted);margin-top:3px}
  .belt-coll-card.won{border-color:var(--gold);box-shadow:0 0 16px rgba(212,175,55,.22)}
  .belt-coll-card.won .bcc-sub.won{color:var(--gold-bright)}
  .belt-coll-card.locked{opacity:.6;filter:grayscale(.55) brightness(.9)}
  .belt-coll-card.locked:hover{opacity:.85}
  @media(max-width:560px){ .belt-coll-grid{grid-template-columns:repeat(2,1fr)} }

  /* ===== CHAMPIONSHIP BELT GRAPHIC on the victory screen ===== */
  .fo-result .champ-belt-art{width:min(280px,80%);margin:0 auto 8px;filter:drop-shadow(0 6px 18px rgba(247,221,136,.45))}
  .fo-result .champ-belt-art.tier-amateur{filter:drop-shadow(0 6px 18px rgba(120,165,240,.5))}

  /* ===== MOVE-UP PERMANENT WARNING (reuses .colo-unlock / .cu-* / .mu-actions) ===== */
  .colo-unlock.mu-warn .cu-kicker.warn{color:#ff8a52;letter-spacing:2px}
  .colo-unlock.mu-warn .warn-em{color:#ff6a52}
  .mu-warn-flavor{font-family:'Inter',sans-serif;font-weight:600;font-style:italic;font-size:13px;color:var(--muted);margin:10px auto 4px;max-width:420px}
  @media(max-width:560px){ .belt-card-grid{grid-template-columns:1fr} }
  /* CHAMPION STATE panel — shown when a division is fully conquered (no fight card; you rule it). */
  .champ-panel{margin-top:12px;padding:22px 18px;border-radius:16px;text-align:center;
    border:1px solid var(--gold);background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.16),transparent 62%),linear-gradient(180deg,#1a2236,#0b1120);
    box-shadow:0 0 28px rgba(212,175,55,.20)}
  .champ-panel.national{border-color:#5a8be0;background:radial-gradient(ellipse at 50% 0,rgba(90,139,224,.18),transparent 62%),linear-gradient(180deg,#0f1a2a,#0a1018);box-shadow:0 0 28px rgba(90,139,224,.20)}
  .champ-panel-belt{display:inline-flex;color:var(--gold-bright)}.champ-panel-belt svg{width:48px;height:48px}
  .champ-panel.national .champ-panel-belt{color:#9fc0ef}
  .champ-panel-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;letter-spacing:1.5px;color:var(--gold-bright);margin:6px 0 4px}
  .champ-panel.national .champ-panel-title{color:#cfe0ff}
  .champ-panel-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--muted);line-height:1.4;max-width:440px;margin:0 auto 14px}
  .champ-panel-sub b{color:var(--text)}
  .champ-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px}
  .champ-defend-note{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.5}
  .champ-defend-note b{color:var(--text)}.champ-defend-note .cdn-tune{opacity:.8}
  @media(max-width:560px){ .champ-actions{flex-direction:column} .champ-actions .btn{width:100%} }


/* ===================== v190-v199 feature batch ===================== */

/* --- tot · Tale of the Tape --- */
/* ===== Tale of the Tape (.tot-*) — pre-fight head-to-head card ===== */
.tot-card{ }
.tot-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:14px; }
.tot-fighter{ flex:1; min-width:0; }
.tot-fighter.r{ text-align:right; }
.tot-fname{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.3px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tot-fovr{ font-family:'Inter',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:1px; color:var(--gold); margin-top:2px; }
.tot-vs{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:2px; color:var(--gold-dim); padding:0 6px 2px; flex:0 0 auto; }
.tot-grid{ display:flex; flex-direction:column; gap:7px; }
.tot-row{ display:grid; grid-template-columns:30px 1fr 30px 16px; align-items:center; gap:6px; }
.tot-v{ font-family:'Inter',sans-serif; font-weight:700; font-size:.95rem; color:#9aa4b2; text-align:center; }
.tot-v.tot-v-r{ }
.tot-v.win{ color:var(--gold-bright); }
.tot-bars{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; min-width:0; }
.tot-lab{ font-family:'Inter',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.8px; text-transform:uppercase; color:#aab3c0; white-space:nowrap; text-align:center; }
.tot-barwrap{ position:relative; height:8px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; }
.tot-barwrap.l{ direction:rtl; }
.tot-barwrap i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.32)); }
.tot-barwrap i.win{ background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); box-shadow:0 0 8px rgba(212,175,55,.35); }
.tot-edge{ font-size:.7rem; line-height:1; text-align:center; color:var(--gold-bright); }
.tot-edge-even{ color:#5c6675; }
.tot-keys{ margin-top:13px; padding-top:11px; border-top:1px solid rgba(212,175,55,.18); font-family:'Inter',sans-serif; font-size:.92rem; color:#cfd6df; }
.tot-keys b{ color:var(--gold); font-weight:700; letter-spacing:.3px; }


/* --- rpc · Post-Fight Report Card --- */
/* ===== Post-Fight Report Card (rpc-*) ===== */
.rpc-card{ position:relative; background:linear-gradient(160deg,rgba(20,24,38,.96),rgba(10,12,20,.96)); border:1px solid var(--gold-dim,#7a6321); border-radius:14px; padding:16px 16px 14px; margin:14px 0; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.45); }
.rpc-card.win{ border-color:var(--gold,#d9a93a); }
.rpc-card.loss{ border-color:#5a2b2b; }
.rpc-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold,#d9a93a); }
.rpc-card.loss::before{ background:#a13d3d; }
.rpc-ribbon{ position:absolute; top:10px; right:-40px; transform:rotate(38deg); background:linear-gradient(90deg,var(--gold,#d9a93a),var(--gold-bright,#f7c948)); color:#15110a; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:.5px; padding:4px 44px; box-shadow:0 3px 10px rgba(0,0,0,.45); white-space:nowrap; display:flex; align-items:center; gap:5px; }
.rpc-star{ display:inline-block; width:9px; height:9px; background:#15110a; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.rpc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.rpc-kicker{ font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold,#d9a93a); opacity:.85; }
.rpc-banner{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:1.5px; padding:3px 12px; border-radius:6px; }
.rpc-banner.win{ background:rgba(217,169,58,.16); color:var(--gold-bright,#f7c948); border:1px solid var(--gold-dim,#7a6321); }
.rpc-banner.loss{ background:rgba(161,61,61,.18); color:#e08a8a; border:1px solid #5a2b2b; }
.rpc-body{ display:flex; align-items:center; gap:16px; }
.rpc-grade{ flex:0 0 auto; width:74px; height:74px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,.35); border:2px solid var(--gold-dim,#7a6321); }
.rpc-grade.g-a{ border-color:var(--gold-bright,#f7c948); box-shadow:0 0 16px rgba(247,201,72,.35) inset; }
.rpc-grade.g-b{ border-color:var(--gold,#d9a93a); }
.rpc-grade.g-c{ border-color:#8a8a8a; }
.rpc-grade.g-d{ border-color:#a13d3d; }
.rpc-g{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:34px; line-height:1; color:#fff; }
.rpc-grade.g-a .rpc-g{ color:var(--gold-bright,#f7c948); }
.rpc-grade.g-b .rpc-g{ color:var(--gold,#d9a93a); }
.rpc-grade.g-c .rpc-g{ color:#cfcfcf; }
.rpc-grade.g-d .rpc-g{ color:#e08a8a; }
.rpc-gl{ font-family:'Barlow Condensed',sans-serif; font-size:9px; letter-spacing:1.5px; color:rgba(255,255,255,.45); margin-top:3px; }
.rpc-detail{ flex:1 1 auto; min-width:0; }
.rpc-vs{ font-family:'Inter',sans-serif; font-size:16px; color:#dfe3ee; }
.rpc-vs b{ color:#fff; }
.rpc-method{ font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.6px; color:var(--gold,#d9a93a); margin-top:3px; text-transform:uppercase; }
.rpc-tags{ margin-top:7px; display:flex; flex-wrap:wrap; gap:6px; }
.rpc-tag{ font-family:'Barlow Condensed',sans-serif; font-size:9.5px; letter-spacing:.8px; padding:2px 7px; border-radius:5px; background:rgba(247,201,72,.12); border:1px solid var(--gold-dim,#7a6321); color:var(--gold-bright,#f7c948); }
.rpc-tag.inj{ background:rgba(161,61,61,.16); border-color:#5a2b2b; color:#e08a8a; text-transform:none; letter-spacing:.3px; }
.rpc-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.rpc-chip{ font-family:'Inter',sans-serif; font-size:12.5px; color:#cfd4e0; padding:4px 10px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.rpc-chip b{ color:#fff; font-weight:700; }
.rpc-chip.money b{ color:#7bd88f; }
.rpc-chip.fame b{ color:var(--gold-bright,#f7c948); }
.rpc-chip.lvl{ background:rgba(247,201,72,.14); border-color:var(--gold-dim,#7a6321); }
.rpc-chip.lvl b{ color:var(--gold-bright,#f7c948); }

/* --- riv · Rivalries (local) --- */
/* ===== Rivalries (local) · .riv-* ===== */
.riv-row{display:flex;align-items:center;gap:14px;padding:13px 15px;margin-bottom:10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line);border-left:3px solid var(--gold-dim,#7a5e1e)}
.riv-row:last-child{margin-bottom:0}
.riv-row.riv-lead{border-left-color:var(--gold,#d4a017)}
.riv-row.riv-down{border-left-color:#b0413f}
.riv-row.riv-even{border-left-color:#5b6f9e}
.riv-main{flex:1;min-width:0}
.riv-name{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;letter-spacing:.4px;color:var(--text,#f3f0e7);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riv-verdict{font-family:'Inter',sans-serif;font-weight:500;font-size:13px;color:var(--muted,#9aa0ab);margin-top:1px}
.riv-score{display:flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif;font-size:21px;line-height:1;
  color:var(--gold-bright,#f0c040);flex:0 0 auto}
.riv-score span{font-size:14px;color:var(--muted,#9aa0ab)}
.riv-row.riv-down .riv-score{color:#d56b69}
.riv-row.riv-even .riv-score{color:#9fb0d8}
.riv-tag{flex:0 0 auto;font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted,#9aa0ab);padding:4px 9px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.riv-empty{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted,#9aa0ab);padding:6px 2px}


/* --- tml · Career Timeline --- */
/* ===== Career Timeline (tml-*) ===== */
.tml-empty{
  padding:18px 14px; text-align:center; color:var(--gold-dim,#9c8a52);
  font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.3px; font-style:italic;
}
.tml-wrap{ position:relative; padding:4px 0 4px 6px; }
/* vertical spine */
.tml-wrap::before{
  content:""; position:absolute; left:13px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg, transparent, var(--gold-dim,#7c6a32) 12%, var(--gold-dim,#7c6a32) 88%, transparent);
  opacity:.55;
}
.tml-row{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:9px 6px 9px 30px; }
.tml-dot{
  position:absolute; left:7px; top:13px; width:14px; height:14px; border-radius:50%;
  background:#0c1018; border:2px solid var(--gold-dim,#7c6a32); box-shadow:0 0 0 3px rgba(0,0,0,.45);
  z-index:1;
}
.tml-body{ flex:1; min-width:0; }
.tml-label{
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; letter-spacing:.4px;
  color:#eee; text-transform:uppercase; line-height:1.2;
}
.tml-sub{
  font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.3px;
  color:var(--gold-dim,#9c8a52); margin-top:1px;
}
/* accent the headline moments in gold */
.tml-debut .tml-dot{ border-color:var(--gold,#d4af37); }
.tml-belt .tml-dot,
.tml-now .tml-dot{
  border-color:var(--gold-bright,#ffd86b);
  background:var(--gold,#d4af37);
  box-shadow:0 0 8px rgba(212,175,55,.55), 0 0 0 3px rgba(0,0,0,.45);
}
.tml-belt .tml-label{ color:var(--gold-bright,#ffd86b); }
.tml-now .tml-label{ color:var(--gold,#d4af37); }
.tml-ko .tml-dot,
.tml-sub .tml-dot{ border-color:var(--gold,#d4af37); }

/* --- pex · Promoter's Expectations --- */
/* ===== Promoter's Expectations (pex-*) — Career tab, display-only ===== */
.pex-sub{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.3px;color:var(--gold-dim);
  text-transform:uppercase;margin:2px 0 12px;opacity:.9;}
.pex-list{display:flex;flex-direction:column;gap:12px;}
.pex-obj{position:relative;padding:11px 13px 12px;border:1px solid rgba(212,175,55,.18);border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.18));transition:border-color .2s;}
.pex-obj.pex-done{border-color:rgba(212,175,55,.5);background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(0,0,0,.15));}
.pex-line{display:flex;align-items:flex-start;gap:9px;}
.pex-dot{flex:0 0 16px;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid rgba(212,175,55,.4);
  display:flex;align-items:center;justify-content:center;line-height:1;color:#0a0e16;font-weight:700;}
.pex-obj.pex-done .pex-dot{background:var(--gold-bright,var(--gold));border-color:var(--gold-bright,var(--gold));}
.pex-dot svg{display:block;}
.pex-say{font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.32;color:#e8e6df;}
.pex-foot{display:flex;justify-content:space-between;align-items:baseline;margin:9px 0 6px;padding-left:25px;}
.pex-hint{font-family:'Barlow Condensed',sans-serif;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-dim);}
.pex-num{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--gold-bright,var(--gold));}
.pex-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-left:25px;}
.pex-bar > i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright,var(--gold)));transition:width .4s ease;}


/* --- prs · Press Row --- */
/* ===== Press Row (prs-*) — media headline card on My Fighter tab ===== */
.prs-card{
  position:relative;
  background:linear-gradient(160deg,rgba(20,18,12,.92),rgba(10,10,14,.96));
  border:1px solid var(--gold-dim);
  border-radius:14px;
  padding:14px 16px 13px;
  margin:0 0 14px;
  box-shadow:0 6px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.prs-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim));
}
.prs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.prs-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.14em;
  font-size:11px;color:var(--gold);text-transform:uppercase;
}
.prs-ico{flex:0 0 auto;color:var(--gold);opacity:.95}
.prs-tag{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;
  font-size:9.5px;color:var(--gold-bright);text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--gold-dim);border-radius:999px;
  background:rgba(212,175,55,.08);white-space:nowrap;
}
.prs-headline{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;line-height:1.2;
  font-size:19px;color:#f3efe6;margin:0 0 8px;
}
.prs-quote{
  font-family:'Inter',sans-serif;font-weight:500;font-style:italic;
  font-size:14.5px;line-height:1.35;color:#c9c4b8;
}
.prs-q{color:var(--gold);font-style:normal;font-weight:700;opacity:.85}
.prs-by{
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;
  color:var(--gold-dim);letter-spacing:.04em;margin-top:6px;text-align:right;
}

/* --- fwp · Fight Week Poster --- */
/* ===== Fight Week Poster (.fwp-*) ===== */
.fwp-poster{
  margin:0 0 16px;
  border-radius:14px;
  padding:2px;
  background:linear-gradient(135deg, var(--gold,#c9a24b) 0%, #6b521f 28%, #1a1a1f 55%, #6b521f 78%, var(--gold,#c9a24b) 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
}
.fwp-frame{
  position:relative;
  border-radius:12px;
  padding:22px 18px 20px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.18) 0%, rgba(201,162,75,0) 55%),
    radial-gradient(100% 120% at 50% 120%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 60%),
    linear-gradient(180deg, #0b0c12 0%, #07080c 55%, #0b0c12 100%);
}
.fwp-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px);
  opacity:.5;
}
.fwp-frame::after{
  content:"";position:absolute;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(180deg, transparent, rgba(201,162,75,.0));
  pointer-events:none;
}
.fwp-presents{
  position:relative;z-index:1;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.42em;font-size:13px;
  color:var(--gold-bright,#e7c66b);
  text-transform:uppercase;
}
.fwp-presents span{ color:rgba(231,231,231,.55); letter-spacing:.5em; font-weight:400; }
.fwp-headline{
  position:relative;z-index:1;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(30px,7vw,52px);
  line-height:1;
  margin:6px 0 16px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 28px rgba(201,162,75,.45), 0 2px 0 rgba(0,0,0,.6);
  background:linear-gradient(180deg, #fff 0%, #f3e6c0 45%, var(--gold,#c9a24b) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.fwp-bout{
  position:relative;z-index:1;
  display:flex;align-items:stretch;justify-content:center;gap:8px;
}
.fwp-fighter{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:6px 4px;
}
.fwp-av{ width:clamp(64px,13vw,92px); aspect-ratio:1; margin:0 auto 2px; border-radius:50%; overflow:hidden; background:#0c1322; }
.fwp-av img,.fwp-av .avatar-svg{ width:100%; height:100%; object-fit:cover; display:block; }
.fwp-you .fwp-av{ box-shadow:0 0 0 2px rgba(63,224,255,.65), 0 0 20px rgba(63,224,255,.4); }
.fwp-opp .fwp-av{ box-shadow:0 0 0 2px rgba(255,77,58,.65), 0 0 20px rgba(255,77,58,.4); }
.fwp-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(17px,3.4vw,26px);
  line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em;
  color:#f4f4f6;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
  word-break:break-word;
}
.fwp-opp .fwp-name{ color:#f4f4f6; }
.fwp-nick{
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.04em;
  color:var(--gold,#c9a24b);
  min-height:16px;
}
.fwp-nick-empty{ opacity:0; }
.fwp-meta-row{ display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap; }
.fwp-rec{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.08em;
  color:rgba(231,231,231,.7);
}
.fwp-ovr{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.1em;
  color:#0b0c12;
  background:linear-gradient(180deg, var(--gold-bright,#e7c66b), var(--gold,#c9a24b));
  padding:2px 7px;border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.fwp-vs{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}
.fwp-vs span{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(20px,4.4vw,34px);
  letter-spacing:.04em;
  color:var(--gold-bright,#e7c66b);
  text-shadow:0 0 18px rgba(201,162,75,.6);
  position:relative;
}
.fwp-vs span::before, .fwp-vs span::after{
  content:"";position:absolute;left:50%;width:1px;height:14px;
  background:linear-gradient(180deg, transparent, var(--gold-dim,#8a6f30), transparent);
  transform:translateX(-50%);
}
.fwp-vs span::before{ top:-18px; }
.fwp-vs span::after{ bottom:-18px; }
.fwp-divider{
  position:relative;z-index:1;
  height:1px;margin:16px auto 12px;max-width:80%;
  background:linear-gradient(90deg, transparent, var(--gold-dim,#8a6f30) 35%, var(--gold,#c9a24b) 50%, var(--gold-dim,#8a6f30) 65%, transparent);
}
.fwp-meta{
  position:relative;z-index:1;
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,231,231,.78);
}
.fwp-meta .fwp-dot{ color:var(--gold,#c9a24b);margin:0 8px; }
.fwp-tagline{
  position:relative;z-index:1;
  margin-top:12px;
  font-family:'Barlow Condensed',sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold,#c9a24b);
  opacity:.92;
}
.fwp-title .fwp-frame{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.30) 0%, rgba(201,162,75,0) 55%),
    radial-gradient(100% 120% at 50% 120%, rgba(201,162,75,.16) 0%, rgba(201,162,75,0) 60%),
    linear-gradient(180deg, #100d07 0%, #07080c 55%, #100d07 100%);
}
.fwp-title .fwp-headline{ text-shadow:0 0 34px rgba(201,162,75,.7), 0 2px 0 rgba(0,0,0,.6); }
@media (max-width:420px){
  .fwp-frame{ padding:18px 12px 16px; }
  .fwp-name{ font-size:16px; }
  .fwp-meta{ font-size:11px;letter-spacing:.1em; }
}


/* --- spr · Camp / Sparring Report --- */
/* ===== Camp / Sparring Report (spr) ===== */
.spr-card{ }
.spr-who{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.spr-avatar{ width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:18px;
  color:#0b0e16; background:linear-gradient(135deg, var(--gold-bright,#f4d35e), var(--gold,#caa64a));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset; letter-spacing:.5px; }
.spr-whotx{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.spr-whotx b{ font-family:"Barlow Condensed",sans-serif; font-size:15px; color:var(--gold-bright,#f4d35e);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.spr-whotx span{ font-size:12px; color:#9aa3b2; text-transform:uppercase; letter-spacing:.6px; }
.spr-ready{ margin-left:auto; flex:0 0 auto; font-family:"Barlow Condensed",sans-serif; font-size:12px;
  letter-spacing:.8px; padding:4px 9px; border-radius:6px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.08); }
.spr-ready.hi{ color:#7be0a4; background:rgba(40,120,70,.18); border-color:rgba(120,220,160,.3); }
.spr-ready.mid{ color:var(--gold-bright,#f4d35e); background:rgba(180,150,60,.15); border-color:rgba(220,190,90,.3); }
.spr-ready.lo{ color:#e88a8a; background:rgba(150,50,50,.18); border-color:rgba(220,120,120,.3); }
.spr-quote{ font-family:"Inter",sans-serif; font-size:15px; line-height:1.45; color:#dfe5ee;
  font-style:italic; border-left:3px solid var(--gold,#caa64a); padding:2px 0 2px 12px; margin-bottom:11px; }
.spr-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.spr-chip{ font-family:"Barlow Condensed",sans-serif; font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  color:#0b0e16; background:var(--gold,#caa64a); padding:3px 9px; border-radius:5px; white-space:nowrap; }
.spr-chip.dim{ color:#9aa3b2; background:rgba(255,255,255,.06); }
.spr-read-note{ font-family:"Inter",sans-serif; font-size:13px; color:#9aa3b2; line-height:1.35; }
.spr-nudge{ font-family:"Inter",sans-serif; font-size:13px; color:#c2c9d4; line-height:1.4;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:8px; padding:9px 11px; margin-bottom:10px; }
.spr-tip{ display:flex; flex-direction:column; gap:3px; border-top:1px solid rgba(255,255,255,.07); padding-top:10px; }
.spr-tip-lab{ font-family:"Barlow Condensed",sans-serif; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold-dim,#a8893f); }
.spr-tip-tx{ font-family:"Inter",sans-serif; font-size:14px; color:#eef2f8; line-height:1.4; }
.spr-tip-sub{ font-family:"Inter",sans-serif; font-size:12px; color:#9aa3b2; }
.spr-tip-sub b{ color:var(--gold-bright,#f4d35e); }

/* --- awr · While You Were Away --- */
/* ===== While You Were Away (awr-*) ===== */
.awr-card{
  background:linear-gradient(145deg,rgba(212,175,55,.08),rgba(20,16,8,.55));
  border:1px solid var(--gold-dim);border-radius:12px;
  padding:13px 16px;margin:0 0 12px;
  box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}
.awr-top{display:flex;align-items:center;gap:11px}
.awr-ic{
  flex:0 0 auto;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:rgba(212,175,55,.1);border:1px solid var(--gold-dim);
  color:var(--gold-bright);
}
.awr-svg{display:block}
.awr-tx{display:flex;flex-direction:column;line-height:1.2}
.awr-tx b{font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.4px;color:var(--gold-bright);text-transform:uppercase}
.awr-gap{font-family:'Inter';font-size:13px;font-weight:500;color:var(--gold);opacity:.92;margin-top:1px}
.awr-list{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.awr-list li{
  font-family:'Inter';font-size:13.5px;font-weight:500;color:#d8d2c4;
  display:flex;align-items:center;gap:9px;line-height:1.3;
}
.awr-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(212,175,55,.6)}

/* --- bkp · Save Backup (export / import) --- */
/* ===== Save Backup card (bkp-*) ===== */
.bkp-card{ }
.bkp-head{ display:flex; align-items:flex-start; gap:10px; padding:13px 14px 4px; }
.bkp-icon{ flex:0 0 auto; margin-top:1px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.bkp-note{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.35; color:#cfd6df; }
.bkp-sub{ font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold-dim); padding:2px 14px 10px; font-weight:600; }
.bkp-actions{ display:flex; gap:9px; padding:0 14px 6px; flex-wrap:wrap; }
.bkp-btn{ flex:1 1 0; min-width:150px; }
.bkp-btn-restore{ background:transparent; border:1px solid var(--gold-dim); color:var(--gold-bright); }
.bkp-btn-restore:hover{ border-color:var(--gold); }
.bkp-file{ display:none; }

/* ===================================================================== */
/*  GTA-6 "VICE CITY" NEON RETHEME  ·  v190                               */
/*  visual only — no game mechanics touched. Re-skins all 13 screens      */
/*  by remapping the theme tokens + adding ambient sunset + neon glows.   */
/* ===================================================================== */
:root{
  /* base — near-black asphalt with a cool purple cast */
  --bg:#0a0610;
  --bg2:#120a1c;
  --panel-top:#1c1330;
  --panel-bot:#120c1e;
  --line:#3a2a4f;
  --line-soft:#251a35;
  /* accent — GTA-6 SUNSET ORANGE (dialled the pink back, leads orange now) */
  --gold:#ff7a18;          /* vivid orange */
  --gold-bright:#ffb13d;   /* amber */
  --gold-dim:#b8530f;      /* deep orange */
  --text:#f6eeff;
  --muted:#a796bf;
  --green:#37f5a0;         /* neon mint */
  --red:#ff4d56;
  --blue:#23e5ff;          /* electric cyan */
  /* GTA-6 + Mortal-Kombat tokens */
  --cyan:#23e5ff;
  --ice:#3fe0ff;           /* YOUR corner — Sub-Zero */
  --fire:#ff4d3a;          /* OPPONENT corner — Scorpion */
  --magenta:#ff2e88;       /* rare accent pop */
  --coral:#ff6b3d;
  --amber:#ffb347;
  --champ:#ffd25a;         /* championship gold — kept for elite/belt bits */
  --sunset:linear-gradient(100deg,#ff5e2c 0%,#ff8a2b 50%,#ffb347 100%);
  --shadow:0 26px 80px rgba(0,0,0,.72);
}

/* ambient GTA-6 sunset wash behind everything */
body{
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(255,122,24,.16), transparent 58%),
    radial-gradient(90% 70% at 100% 4%,  rgba(255,179,71,.10), transparent 55%),
    radial-gradient(90% 80% at 0% 112%,  rgba(35,229,255,.10), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* FULL SCREEN — fill the ENTIRE window edge-to-edge, PC + phone (owner: "full screen always,
   no button"). max-width:none removes the centred-column cap so there are no empty side bands on
   wide monitors; the padding still scales with the viewport so content fills the screen without
   ever jamming against the edge. */
.wrap{ max-width:none; padding:22px clamp(14px,2.6vw,46px) 96px; }

/* FULL-SCREEN LANDING (v264) — owner's main-page hero art (bg_landing) has the MMA LEGACY title +
   champion + review badges baked in, so it's used purely as a full-bleed BACKGROUND. The separate
   wordmark is hidden (the title lives in the art); the real LOG IN / SIGN UP / GUEST buttons sit at the
   BOTTOM over a darkening gradient — readable, and clear of the champion. Same elements + handlers. */
#screen-landing::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,12,0) 48%, rgba(4,6,12,.42) 72%, rgba(4,6,12,.94) 100%),
    url("../images/bg_landing.jpg?v=263") center top / cover no-repeat;
}
.lp-brand{ display:none; }                       /* title is baked into the hero art → no separate wordmark */
#screen-landing{ justify-content:flex-end; }     /* buttons toward the bottom, off the champion */

@media (max-width:640px){
  #screen-landing:not(.hidden){
    position:fixed; inset:0; z-index:6; min-height:0; margin:0; padding:0; display:flex; flex-direction:column; justify-content:flex-end;
    background:
      linear-gradient(180deg, rgba(4,6,12,0) 42%, rgba(4,6,12,.45) 70%, #04060c 100%),
      url("../images/bg_landing.jpg?v=263") center top / cover no-repeat;
  }
  #screen-landing::before{ display:none; }
  .lp-brand{ display:none; }
  #landingOut, #landingIn{ width:100%; flex:1; display:flex; flex-direction:column; margin:0; }
  #landingOut{ justify-content:flex-end; padding:0 20px calc(6dvh + env(safe-area-inset-bottom)); }
  #landingIn{ justify-content:center; }
  .landing-art{ position:static; width:100%; max-width:440px; margin:0 auto; aspect-ratio:auto; border-radius:0; box-shadow:none;
    overflow:visible; background:none; display:flex; flex-direction:column; align-items:center; gap:11px; padding:0; }
  .landing-art-img{ display:none; }
  .la-btn{ position:static !important; left:auto !important; top:auto !important; width:100% !important; max-width:440px;
    height:auto !important; display:flex; align-items:center; justify-content:center; padding:17px 14px; border-radius:13px;
    font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px; letter-spacing:2.5px; text-transform:uppercase; transition:transform .12s; }
  .la-btn::after{ content:attr(aria-label); }
  .la-btn:active{ transform:scale(.98); }
  #btnLandingLogin{ background:linear-gradient(180deg,#f6cf6a,#c79f37); color:#161007; border:0;
    box-shadow:0 8px 22px rgba(212,160,54,.38), inset 0 1px 0 rgba(255,255,255,.45); }
  #btnLandingSignup, #btnArtGuest{ color:#fff; background:linear-gradient(180deg, rgba(22,28,44,.92), rgba(11,15,26,.94));
    border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(0,0,0,.5); }
}

/* brand wordmark + section titles glow sunset */
.brand h1{ text-shadow:0 0 20px rgba(255,122,24,.5); }
/* every section header → glowing cinematic headline (FIGHT NIGHT treatment) */
.section-title{ position:relative; }
.section-title h2{
  background:linear-gradient(180deg,#ffffff 0%,#ffe6c2 48%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 15px rgba(255,138,43,.30));
  letter-spacing:.03em;
}
/* keep any nested badges/counters inside a title visible (don't inherit the clip) */
.section-title h2 > span,.section-title h2 .pvp-inbox-count,.section-title h2 .star{
  -webkit-text-fill-color:initial;
}
/* short sunset accent bar under each header */
.section-title::after{
  content:"";position:absolute;left:0;bottom:-3px;height:3px;width:52px;border-radius:3px;
  background:var(--sunset);box-shadow:0 0 14px rgba(255,138,43,.55);
}
/* flagship headers → full cinematic banner plate (ice-left / fire-right glow, scanlines) */
.section-title.cine-head{
  overflow:hidden;gap:14px;
  margin:0 0 18px!important;padding:16px 20px;border-radius:14px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    radial-gradient(120% 180% at 0% 50%, rgba(35,229,255,.12), transparent 55%),
    radial-gradient(120% 180% at 100% 50%, rgba(255,77,58,.12), transparent 55%),
    linear-gradient(180deg,#150d20,#0b0713);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.35);
}
.section-title.cine-head h2{ font-size:28px; }
.section-title.cine-head::after{ display:none; }

/* nav: active tab rides the sunset gradient + glow, hover hints cyan */
.gnav-btn.active{
  color:#1a0a02;background:var(--sunset);border-color:transparent;
  box-shadow:0 8px 24px rgba(255,122,24,.5), inset 0 1px 0 rgba(255,255,255,.55);
}
.gnav-btn:hover{ color:var(--cyan); }

/* primary buttons — sunset gradient via tokens; orange glow + sheen */
.btn{ box-shadow:0 10px 28px rgba(255,122,24,.32), inset 0 1px 0 rgba(255,255,255,.5); color:#1a0a02; }
.btn:hover:not(:disabled){ box-shadow:0 16px 38px rgba(255,122,24,.46), inset 0 1px 0 rgba(255,255,255,.5); }
.menu-cta{ background:var(--sunset); border-color:transparent; color:#1a0a02;
  box-shadow:0 14px 36px rgba(255,122,24,.42), inset 0 1px 0 rgba(255,255,255,.45); }
.menu-cta:hover{ box-shadow:0 18px 44px rgba(255,122,24,.55), inset 0 1px 0 rgba(255,255,255,.55); }
.menu-cta .cta-sub{ color:#2a1402; }

/* big OVR / fight numbers — your corner ICE, opponent FIRE (tier classes stay gold) */
.ovr-badge .ov{ text-shadow:0 0 26px rgba(255,122,24,.5); }
.my-ovr{ color:var(--ice); text-shadow:0 0 20px rgba(63,224,255,.5); }
.ox-ovr{ color:var(--fire); text-shadow:0 0 20px rgba(255,77,58,.5); }

/* HUD readouts in JetBrains Mono for the game-console feel */
.ovr-badge .ov, .my-ovr, .ox-ovr, .create-hero .ch-ovr b,
.stat-row .sval, .rec-pill .rv, .pts-banner .pv, .pk-ovr, .cf-ovr{
  font-family:'JetBrains Mono','Barlow Condensed',monospace; letter-spacing:-1px;
}

/* focus rings shift to sunset orange */
input[type=text]:focus, select:focus{
  border-color:var(--gold);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4), 0 0 0 3px rgba(255,122,24,.22);
}

/* ----------------------------------------------------------------- */
/*  FIGHT NIGHT poster · GTA-6 sunset + Mortal-Kombat opponent split  */
/* ----------------------------------------------------------------- */
.fwp-frame{
  background:
    radial-gradient(78% 92% at 0% 50%,    rgba(35,229,255,.14), transparent 60%),
    radial-gradient(78% 92% at 100% 50%,  rgba(255,77,58,.16), transparent 60%),
    radial-gradient(120% 80% at 50% -10%, rgba(255,138,43,.16), transparent 55%),
    linear-gradient(180deg,#0b0712 0%,#070509 55%,#0b0712 100%);
}
.fwp-presents{ color:var(--amber); }
.fwp-headline{
  background:linear-gradient(180deg,#ffffff 0%,#ffdca0 45%,#ff8a2b 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 30px rgba(255,138,43,.6));
}
/* YOUR side — ICE (Sub-Zero) */
.fwp-you .fwp-name{ color:#e6fbff; text-shadow:0 0 20px rgba(63,224,255,.55),0 1px 0 rgba(0,0,0,.7); }
.fwp-you .fwp-nick{ color:var(--ice); }
.fwp-you .fwp-rec{ color:rgba(150,236,255,.85); }
.fwp-you .fwp-ovr{ background:linear-gradient(180deg,#8af0ff,#15b8da); color:#00161c;
  box-shadow:0 2px 12px rgba(63,224,255,.5); }
/* OPPONENT side — FIRE (Scorpion) */
.fwp-opp .fwp-name{ color:#fff0ea; text-shadow:0 0 20px rgba(255,77,58,.55),0 1px 0 rgba(0,0,0,.7); }
.fwp-opp .fwp-nick{ color:var(--fire); }
.fwp-opp .fwp-rec{ color:rgba(255,176,160,.85); }
.fwp-opp .fwp-ovr{ background:linear-gradient(180deg,#ff9168,#ff3a24); color:#1c0500;
  box-shadow:0 2px 12px rgba(255,77,58,.5); }
/* VS — white-hot, neutral */
.fwp-vs span{ color:#ffffff; text-shadow:0 0 24px rgba(255,255,255,.55); }
.fwp-vs span::before, .fwp-vs span::after{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent); }
/* divider mirrors the split: cyan → amber → fire */
.fwp-divider{ background:linear-gradient(90deg,transparent,rgba(63,224,255,.45) 28%,var(--amber) 50%,rgba(255,77,58,.45) 72%,transparent); }
.fwp-meta .fwp-dot{ color:var(--amber); }
.fwp-tagline{ color:var(--amber); }
.fwp-title .fwp-headline{ filter:drop-shadow(0 0 38px rgba(255,138,43,.85)); }
/* challenger poster extras (challenge.js reuses the .fwp-* poster as the headline fight) */
.fwp-chmeta{ position:relative;z-index:1; font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(231,231,231,.82); margin-top:4px; }
.fwp-chmeta .ch-warn{ color:var(--fire); font-weight:700; }
.fwp-chmeta .ch-easy{ color:var(--green); font-weight:700; }
.fwp-story{ position:relative;z-index:1; max-width:680px; margin:9px auto 0; font-family:'Inter',sans-serif;
  font-style:italic; font-size:14.5px; line-height:1.5; color:#d8cce8; }
.fwp-actions{ position:relative;z-index:1; display:flex; gap:10px; justify-content:center; align-items:center;
  max-width:560px; margin:18px auto 0; }

/* ----------------------------------------------------------------- */
/*  Rankings · Olympic medal podium for the top 3                     */
/* ----------------------------------------------------------------- */
.rank-podium{ display:flex; align-items:flex-end; justify-content:center; gap:16px; margin:10px auto 26px; max-width:780px; }
.pod{ flex:1 1 0; max-width:235px; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:stretch; transition:transform .15s; }
.pod:hover{ transform:translateY(-4px); }
.pod-fighter{ border-radius:16px 16px 0 0; padding:16px 12px 14px; border:1px solid var(--line); border-bottom:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(8,5,14,.5)); }
.pod-ava{ width:54px; height:54px; margin:0 auto 9px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; color:#fff;
  background:linear-gradient(145deg,#2a1d3e,#160e24); border:1px solid var(--line); }
.pod-name{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px; color:#f4ecff; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod-nick{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; color:var(--gold); min-height:15px; }
.pod-rec{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:#cfd8e8; margin-top:5px; }
.pod-rec span{ font-family:'Inter',sans-serif; font-size:10px; letter-spacing:1px; color:var(--muted); }
.pod-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:8px 0; border-radius:0 0 5px 5px; border:1px solid var(--line); border-top:none;
  background:linear-gradient(180deg,#241733,#140c20); }
.pod-medal{ font-size:23px; line-height:1; }
.pod-pos{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; color:var(--muted); }
.pod-1{ z-index:2; }
.pod-1 .pod-fighter{ border-color:var(--champ); background:linear-gradient(180deg, rgba(255,210,90,.16), rgba(20,12,4,.5)); box-shadow:0 0 32px rgba(255,210,90,.22); }
.pod-1 .pod-block{ height:84px; border-color:var(--champ); background:linear-gradient(180deg, rgba(255,210,90,.26), rgba(40,28,8,.6)); }
.pod-1 .pod-pos{ color:var(--champ); font-size:21px; }
.pod-1 .pod-ava{ border-color:var(--champ); box-shadow:0 0 18px rgba(255,210,90,.4); }
.pod-2 .pod-block{ height:58px; }
.pod-2 .pod-fighter,.pod-2 .pod-ava{ border-color:#b9c4d8; }
.pod-3 .pod-block{ height:44px; }
.pod-3 .pod-fighter,.pod-3 .pod-ava{ border-color:#d68b4c; }
@media(max-width:560px){ .rank-podium{ gap:8px; } .pod-name{ font-size:12.5px; } .pod-ava{ width:42px;height:42px;font-size:17px; } .pod-nick{ font-size:11px; } }

/* ── Image podium (v240): owner's PODIUM.png art is the stage; faces/names/records overlay the slots ── */
.rank-podium-img{ position:relative; width:100%; max-width:660px; margin:8px auto 18px; aspect-ratio:1535/1024;
  background:url(../images/podium_stage.png?v=240) center/100% 100% no-repeat; }
.rank-podium-img .podx-face{ position:absolute; transform:translate(-50%,-50%); aspect-ratio:1; border-radius:50%;
  overflow:hidden; pointer-events:none; box-shadow:0 0 0 2px rgba(0,0,0,.55), inset 0 0 14px rgba(0,0,0,.6); }
.rank-podium-img .podx-face img, .rank-podium-img .podx-face .avatar-svg{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.rank-podium-img .podx-ini{ display:flex; width:100%; height:100%; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(12px,2.4vw,22px); color:#e9eef7;
  background:radial-gradient(circle at 50% 35%,#2b3656,#0c1322); }
.rank-podium-img .podx-name{ position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:clamp(8px,1.7vw,15px); color:#fff;
  white-space:nowrap; letter-spacing:.4px; text-shadow:0 1px 3px #000, 0 0 7px #000, 0 0 7px #000; }
.rank-podium-img .podx-rec{ position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  font-family:'Inter',sans-serif; font-weight:700; font-size:clamp(8px,1.55vw,14px); color:var(--gold);
  white-space:nowrap; background:rgba(8,12,20,.55); padding:2px 12px; border-radius:9px; box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.rank-podium-img .podx-rec span{ font-family:'Inter',sans-serif; font-size:.78em; letter-spacing:1px; color:#aeb8c8; opacity:.8; }
.rank-podium-img .podx-zone{ position:absolute; top:17%; height:62%; width:27%; transform:translateX(-50%);
  cursor:pointer; border-radius:12px; z-index:1; transition:background .15s; }
.rank-podium-img .podx-zone:hover,.rank-podium-img .podx-zone:focus-visible{ background:rgba(255,255,255,.05);outline:2px solid var(--gold-bright);outline-offset:-2px; }
.rank-podium-img .podx-face, .rank-podium-img .podx-name, .rank-podium-img .podx-rec{ z-index:2; }

/* (Skill Tree reverted to the original tiered layout per owner — sun-map styles removed) */



/* ===================== Fight Promotions / Event Cards (.promo-*) — v206 ===================== */
.promo-head{ position:relative; border:1px solid color-mix(in srgb, var(--pac) 45%, transparent); border-radius:14px 14px 0 0; background:linear-gradient(135deg, color-mix(in srgb, var(--pac) 16%, #0b0d12), #0b0d12); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 0 26px color-mix(in srgb, var(--pac) 16%, transparent) inset; }
.promo-banner{ display:flex; align-items:center; gap:12px; min-width:0; }
.promo-abbr{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:1px; color:var(--pac); background:rgba(0,0,0,.35); border:1.5px solid color-mix(in srgb, var(--pac) 55%, transparent); border-radius:9px; padding:4px 11px; line-height:1; flex:0 0 auto; text-shadow:0 0 14px color-mix(in srgb, var(--pac) 60%, transparent); }
.promo-titles{ min-width:0; }
.promo-name{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1.02rem; color:#fff; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.promo-num{ color:var(--pac); font-weight:700; letter-spacing:1px; margin-left:4px; }
.promo-sub{ font-family:'Inter',sans-serif; font-weight:600; font-size:.8rem; color:#9aa4b2; letter-spacing:.4px; margin-top:2px; }
.promo-yours{ color:var(--pac); letter-spacing:1px; }
.promo-melabel{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:3px; color:#0b0d12; background:var(--pac); padding:5px 10px; border-radius:6px; flex:0 0 auto; box-shadow:0 0 18px color-mix(in srgb, var(--pac) 55%, transparent); }
.promo-undercard, .promo-results{ border-top:none !important; border-radius:0 0 14px 14px; margin-top:-1px; border:1px solid color-mix(in srgb, var(--pac) 30%, transparent); }
.promo-uc-head{ font-family:'Inter',sans-serif; font-weight:700; font-style:italic; letter-spacing:.4px; color:var(--pac); margin-bottom:8px; }
.promo-res-head{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.6px; color:var(--pac); font-size:1.05rem; margin-bottom:6px; }
.promo-section{ font-family:'Inter',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; font-size:.72rem; color:#aab3c0; margin:13px 0 6px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:4px; }
.promo-bout{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.03); margin-bottom:5px; font-family:'Inter',sans-serif; font-size:.9rem; flex-wrap:wrap; }
.promo-bout.me{ background:color-mix(in srgb, var(--pac) 15%, transparent); border:1px solid color-mix(in srgb, var(--pac) 42%, transparent); }
.promo-bout.prev{ justify-content:center; gap:10px; color:#cfd6df; }
.promo-b-av{ display:inline-block; width:22px; height:22px; border-radius:50%; overflow:hidden; vertical-align:middle; margin-right:6px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.promo-b-av img,.promo-b-av .avatar-svg{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-b-w{ font-weight:700; color:#fff; }
.promo-b-w b{ color:var(--pac); font-size:.66rem; letter-spacing:1px; }
.promo-b-def{ color:#7a828e; font-size:.76rem; }
.promo-b-l{ color:#aab3c0; }
.promo-b-vs{ color:var(--pac); font-weight:700; font-size:.74rem; letter-spacing:1px; }
.promo-b-m{ margin-left:auto; color:#9aa4b2; font-size:.8rem; font-weight:600; }
.promo-awards{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:4px; }
.promo-award{ border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:9px 11px; background:rgba(255,255,255,.025); }
.promo-award.me{ border-color:var(--pac); background:color-mix(in srgb, var(--pac) 13%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--pac) 22%, transparent); }
.promo-award.empty{ opacity:.45; }
.promo-aw-lab{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.7rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--pac); }
.promo-aw-win{ font-family:'Inter',sans-serif; font-weight:700; color:#fff; margin-top:2px; }
.promo-aw-win b{ color:var(--pac); }
.promo-aw-via{ font-size:.76rem; color:#9aa4b2; margin-top:1px; }
.promo-res-bonus{ margin-top:12px; text-align:center; font-family:'Inter',sans-serif; font-weight:700; color:var(--pac); background:color-mix(in srgb, var(--pac) 12%, transparent); border:1px solid color-mix(in srgb, var(--pac) 35%, transparent); border-radius:9px; padding:9px; }
.promo-uc-foot{ margin-top:10px; font-family:'Inter',sans-serif; font-size:.82rem; color:#aab3c0; }
.promo-uc-foot b{ color:var(--pac); }
.promo-countdown{ margin-top:12px; text-align:center; font-family:'Inter',sans-serif; font-size:.82rem; color:#9aa4b2; letter-spacing:.4px; }
.promo-countdown b{ color:var(--pac); }
@media(max-width:560px){ .promo-awards{ grid-template-columns:1fr; } .promo-melabel{ display:none; } }


/* ===================== Promotions v207 — status badges · roster · preview matchup ===================== */
.promo-status{ font-family:'Inter',sans-serif; font-weight:700; font-size:.58rem; letter-spacing:1px; text-transform:uppercase; color:var(--pac); border:1px solid color-mix(in srgb, var(--pac) 45%, transparent); border-radius:5px; padding:2px 6px; flex:0 0 auto; white-space:nowrap; line-height:1.3; }
.promo-bout.prev{ justify-content:flex-start; }
.promo-prev-matchup{ display:flex; align-items:center; gap:10px; flex:1; justify-content:center; min-width:0; }
.promo-bout.prev.mainslot{ background:color-mix(in srgb, var(--pac) 16%, transparent); border:1px solid color-mix(in srgb, var(--pac) 42%, transparent); }
.promo-bout.prev.mainslot .promo-prev-matchup b{ color:#fff; }
.promo-roster{ margin-top:14px; }
.promo-roster-head{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.4px; color:#e8edf3; font-size:1.0rem; margin-bottom:10px; }
.promo-rp{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.025); border:1px solid color-mix(in srgb, var(--pac) 26%, transparent); margin-bottom:7px; }
.promo-rp-abbr{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.0rem; letter-spacing:1px; color:var(--pac); background:rgba(0,0,0,.3); border:1.5px solid color-mix(in srgb, var(--pac) 50%, transparent); border-radius:8px; padding:5px 9px; min-width:56px; text-align:center; flex:0 0 auto; text-shadow:0 0 10px color-mix(in srgb, var(--pac) 55%, transparent); }
.promo-rp-info{ min-width:0; flex:1; }
.promo-rp-name{ font-family:'Barlow Condensed',sans-serif; font-weight:600; color:#fff; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.promo-rp-yours{ font-family:'Inter',sans-serif; font-weight:700; font-size:.58rem; letter-spacing:1px; color:#0b0d12; background:var(--pac); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.promo-rp-tag{ font-family:'Inter',sans-serif; font-size:.78rem; color:#9aa4b2; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.promo-rp-when{ font-family:'Inter',sans-serif; font-weight:600; font-size:.8rem; color:#aab3c0; flex:0 0 auto; text-align:right; }
.promo-rp-live{ color:#2ec27e; font-weight:700; }
@media(max-width:560px){ .promo-rp-tag{ display:none; } .promo-rp-name{ white-space:normal; } }


/* ===================== v210 — declutter pass 2: centered fighter, smaller bars, readiness, fanbase ===================== */

/* --- ALL BARS much smaller (owner: "takes all over the screen") --- */
.bar{ height:9px !important; }
.fbar-track{ height:7px !important; }
.cb-track{ height:6px !important; }
.cp-bar{ height:6px !important; }
.cp-bar.xp{ height:4px !important; }
.fame-bar{ height:6px !important; }
.ar-bar{ height:9px !important; }
.fighter-bars{ gap:8px !important; }
.fbar{ gap:3px; }
.fbar-hint{ font-size:.72rem; }
.q-bar,.dc-bar,.wk-bar,.sp-bar,.bar-track{ height:7px !important; }

/* --- Centered fighter card: pic in the MIDDLE, belts beside the fighter --- */
.fighter-hud.centered{ display:flex !important; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.fighter-hud.centered .avatar-frame{ width:250px; height:250px; margin:0 auto; grid-area:unset; }
.fighter-hud.centered .hud-info{ align-items:center; width:100%; }
.fighter-hud.centered .meta-line{ justify-content:center; flex-wrap:wrap; }
.fighter-hud.centered .ovr-badge{ margin:0 auto; }
.fighter-hud.centered .fname{ font-size:1.55rem; }

/* belts by the fighter (empty outline if none won yet) */
.hud-belts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:2px; }
.hud-belt{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; font-family:'Inter',sans-serif; font-weight:700; font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; }
.hud-belt svg{ width:32px; height:32px; }
.hud-belt.has{ color:var(--gold-bright); }
.hud-belt.has svg{ filter:drop-shadow(0 0 7px rgba(247,201,72,.55)); }
.hud-belt.empty{ color:#5c6675; opacity:.5; }
.hud-belt.empty svg{ opacity:.5; }
.hb-lab{ font-size:.56rem; }

/* --- Fanbase: Rising Star + Fans bigger --- */
.fame-title{ font-size:1.35rem !important; font-weight:700; letter-spacing:.4px; }
.fame-val{ font-size:1.18rem !important; font-weight:700; }
.fame-val span{ font-size:.68rem; }

/* --- Readiness: bigger, with per-bar advice (can train / can fight) --- */
.mini-readiness{ margin-top:8px; }
.mr-head{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.6px; font-size:.98rem; color:var(--gold-bright); margin-bottom:6px; }
.mr-row{ display:grid; grid-template-columns:84px 1fr 28px auto; align-items:center; gap:9px; padding:5px 0; }
.mr-rlab{ font-family:'Inter',sans-serif; font-weight:700; font-size:.82rem; color:#cfd6df; text-transform:uppercase; letter-spacing:.5px; text-align:left; }
.mr-rbar{ height:8px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; }
.mr-rbar > i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); }
.mr-rval{ font-family:'Inter',sans-serif; font-weight:700; text-align:right; color:#fff; font-size:.9rem; }
.mr-advice{ font-family:'Inter',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.4px; white-space:nowrap; text-align:right; }
.mr-advice.ok{ color:#2ec27e; }
.mr-advice.no{ color:#e2683c; }
.mr-link{ font-family:'Inter',sans-serif; font-size:.76rem; color:#8893a3; margin-top:5px; text-align:center; }

/* --- Fight History show-more / show-less --- */
.fh-more-row{ display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.fh-more{ font-family:'Inter',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.4px; color:var(--gold-bright); background:rgba(247,201,72,.08); border:1px solid var(--gold-dim); border-radius:8px; padding:6px 14px; cursor:pointer; }
.fh-more.ghost{ color:#9aa4b2; background:transparent; border-color:rgba(255,255,255,.14); }
.fh-more:hover{ filter:brightness(1.18); }
@media(max-width:560px){ .mr-row{ grid-template-columns:70px 1fr 26px; } .mr-advice{ grid-column:2 / 4; text-align:left; } }


/* "Remember me" checkbox on the sign-in form (v211) */
.acc-remember{ display:flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:600; font-size:.92rem; color:#c9d2dd; cursor:pointer; user-select:none; margin:-4px 2px 4px; }
.acc-remember input{ width:16px; height:16px; accent-color:var(--gold-bright); cursor:pointer; flex:0 0 auto; }

/* v313 — explicit, optional email permission. Unchecked by default; readable on mobile. */
.acc-email-optin{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(212,175,55,.25);border-radius:10px;background:rgba(212,175,55,.055);color:#e6ebf2;cursor:pointer;text-align:left}
.acc-email-optin input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold-bright);cursor:pointer;flex:0 0 auto}
.acc-email-optin span{display:flex;flex-direction:column;gap:3px;font-family:'Inter',sans-serif;line-height:1.25}
.acc-email-optin b{font-size:13px;color:#f3f5f8}
.acc-email-optin small{font-size:11px;color:var(--muted);font-weight:500}
.acc-email-pref{display:flex;flex-direction:column;gap:9px;margin:0 auto 16px;max-width:430px}
.acc-email-pref .btn{align-self:center;min-width:190px}

.acc-rec{ color:var(--gold-bright); font-weight:600; font-size:.78rem; opacity:.85; }

/* Remember-me recommendation pop-up (v213) */
.remrec-overlay{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(6,8,13,.9); padding:20px; animation:remrecIn .18s ease; }
@keyframes remrecIn{ from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }
.remrec-modal{ position:relative; z-index:1; isolation:isolate; max-width:380px; width:100%; background:#12141b; background:linear-gradient(180deg,#171922,#0c0e14); border:1px solid var(--gold-dim); border-radius:16px; padding:26px 24px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.7), 0 0 30px rgba(247,201,72,.12); }
.remrec-ic{ font-size:2rem; margin-bottom:8px; }
.remrec-title{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.4rem; color:#fff; letter-spacing:.5px; margin-bottom:8px; }
.remrec-msg{ font-family:'Inter',sans-serif; font-size:.98rem; line-height:1.45; color:#c2cad5; margin-bottom:18px; }
.remrec-msg b{ color:var(--gold-bright); }
.remrec-actions{ display:flex; flex-direction:column; gap:9px; }
.remrec-actions .btn{ width:100%; }

/* v215 — mobile layout fixes: the sticky header + sticky nav were OVERLAPPING (header bled under the nav).
   On phones, make both scroll normally (no sticky overlap), and stack the challenge buttons so text never cuts off. */
@media(max-width:680px){
  header.app{ position:static; }
  .game-nav{ position:static; top:auto; }
}
@media(max-width:560px){
  .fwp-actions{ flex-direction:column; }
  .fwp-actions .btn{ width:100%; }
}

/* v217 — distinct tier belts + GTA-6 World Champion (Rankings) */
.belt-card.belt-tier-0{ border-color:#c77b3a; box-shadow:0 0 18px rgba(199,123,58,.22), inset 0 1px 0 rgba(255,255,255,.05); }
.belt-card.belt-tier-1{ border-color:#e0b84a; box-shadow:0 0 20px rgba(247,201,72,.28), inset 0 1px 0 rgba(255,255,255,.06); }
.belt-card.belt-tier-2{ border-color:#9fc0ef; box-shadow:0 0 18px rgba(159,192,239,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.belt-card.belt-tier-3{ border-color:#3fb87a; box-shadow:0 0 18px rgba(63,184,122,.24), inset 0 1px 0 rgba(255,255,255,.05); }
.belt-card.belt-tier-4{ border-color:#9fd0ff; box-shadow:0 0 24px rgba(159,208,255,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.belt-card.belt-tier-0 .belt-card-title{ color:#f0b07a; }
.belt-card.belt-tier-1 .belt-card-title{ color:#ffd970; }
.belt-card.belt-tier-2 .belt-card-title{ color:#cfe0f5; }
.belt-card.belt-tier-3 .belt-card-title{ color:#7fe0a8; }
.belt-card.belt-tier-4 .belt-card-title{ color:#dbeeff; }
.pod.pod-champ{ border:1px solid #ff7a1a !important; box-shadow:0 0 26px rgba(255,122,26,.42), inset 0 1px 0 rgba(255,255,255,.08) !important; background:linear-gradient(180deg, rgba(255,122,26,.15), rgba(255,122,26,.03)) !important; }
.pod-crown{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:5px; }
.pod-crown span{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.6rem; letter-spacing:1.4px; color:#ff8a2a; text-shadow:0 0 10px rgba(255,122,26,.6); white-space:nowrap; }
.pod.pod-champ .pod-name{ color:#fff; }
.pod.pod-champ .pod-pos{ color:#ff8a2a; }
.rank-row.champ .rank-belt, .rank-belt{ background:#ff7a1a !important; color:#15110a !important; }

/* v219 — premium World/Interim podium belts, fixed champ flag, win-celebration pop-up */
.pod-flag{ font-size:32px; line-height:1; display:block; }
.pod-1 .pod-flag{ font-size:37px; }
@media(max-width:560px){ .pod-flag{ font-size:24px; } .pod-1 .pod-flag{ font-size:27px; } }
.pod-belt{ width:98px; margin:0 auto 1px; line-height:0; }
.pod-champ .pod-belt{ width:108px; }
.pod-interim .pod-belt{ width:80px; }
/* #1 World Champion — full GTA-6 orange (replaces the old gold tint) */
.pod.pod-champ .pod-fighter{ border-color:#ff7a1a; background:linear-gradient(180deg, rgba(255,138,42,.16), rgba(20,12,4,.5)); }
.pod.pod-champ .pod-block{ border-color:#ff7a1a; background:linear-gradient(180deg, rgba(255,138,42,.26), rgba(40,24,8,.6)); }
.pod.pod-champ .pod-ava{ border-color:#ff8a2a; box-shadow:0 0 18px rgba(255,138,42,.4); }
/* #2 Interim Champion — cold steel / sapphire */
.pod.pod-interim{ border:1px solid rgba(143,200,255,.45); border-radius:16px; background:linear-gradient(180deg, rgba(130,185,255,.10), rgba(10,16,26,.02)); box-shadow:0 0 20px rgba(130,185,255,.2), inset 0 1px 0 rgba(255,255,255,.06); }
.pod.pod-interim .pod-fighter{ border-color:#8fb8e0; background:linear-gradient(180deg, rgba(130,185,255,.12), rgba(10,16,26,.4)); }
.pod.pod-interim .pod-block{ border-color:#8fb8e0; background:linear-gradient(180deg, rgba(130,185,255,.18), rgba(16,24,40,.55)); }
.pod.pod-interim .pod-ava{ border-color:#9fc4ef; box-shadow:0 0 14px rgba(130,185,255,.32); }
.pod.pod-interim .pod-pos{ color:#bcd6f5; }
.pod-crown.interim span{ color:#bcd6f5; text-shadow:0 0 10px rgba(130,185,255,.55); }
/* ── CELEBRATION POP-UP (championship / quest win) ── */
.celebrate-ov{ position:fixed; inset:0; z-index:100070; display:grid; place-items:center; padding:20px; background:rgba(3,5,10,.82); opacity:0; transition:opacity .25s ease; }
.celebrate-ov.show{ opacity:1; }
.celebrate-card{ position:relative; width:min(400px,92vw); text-align:center; overflow:hidden; padding:30px 26px 26px; border-radius:20px;
  background:radial-gradient(ellipse at 50% -5%, var(--cel-glow), transparent 70%), linear-gradient(180deg,#161d2e,#0a0e18);
  border:1px solid var(--cel-accent);
  box-shadow:0 24px 70px rgba(0,0,0,.7), 0 0 60px var(--cel-glow);
  transform:scale(.7) translateY(12px); opacity:0; transition:transform .45s cubic-bezier(.2,.9,.25,1.2), opacity .3s ease; }
.celebrate-ov.show .celebrate-card{ transform:scale(1) translateY(0); opacity:1; }
.cel-rays{ position:absolute; left:50%; top:-30%; width:340px; height:340px; margin-left:-170px; pointer-events:none; opacity:.16;
  background:repeating-conic-gradient(from 0deg, var(--cel-accent) 0deg 6deg, transparent 6deg 18deg); animation:celSpin 16s linear infinite; }
@keyframes celSpin{ to{ transform:rotate(360deg); } }
.cel-shine{ position:absolute; top:-60%; left:-45%; width:55%; height:220%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transform:rotate(8deg); animation:ppShine 1.6s ease-out .3s both; }
.cel-belt{ position:relative; width:210px; max-width:80%; margin:0 auto 16px; animation:celPop .6s cubic-bezier(.2,.9,.3,1.4) both; }
.celebrate-ov.quest .cel-belt{ width:120px; }
@keyframes celPop{ 0%{ transform:scale(0) rotate(-12deg); } 100%{ transform:scale(1) rotate(0); } }
.cel-title{ position:relative; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:30px; letter-spacing:2px; color:var(--cel-accent); text-shadow:0 0 24px var(--cel-glow); }
.cel-sub{ position:relative; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--text); opacity:.92; margin:7px 0 18px; line-height:1.45; }
.cel-go{ position:relative; width:100%; }
@media(max-width:560px){ .cel-belt{ width:170px; } .cel-title{ font-size:25px; } }

/* =====================================================================
   v274 — MY FIGHTER tab: GOLD-VIBE template (brick #2 of the redesign).
   Scoped to [data-panel="fighter"] so every other tab is untouched until
   we roll the gold look out one tab at a time. Pairs with the v273
   hand-built gold SVG fighters. See [[gold-vibe-redesign]].
   ===================================================================== */
/* hero fighter card — premium gold frame, top sheen, soft inner glow */
.tab-panel[data-panel="fighter"] > .card:first-child{
  position:relative; overflow:hidden;
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(212,175,55,.13), transparent 58%),
    linear-gradient(180deg,#131c30 0%,#0a1120 100%);
  border:1px solid rgba(212,175,55,.34);
  box-shadow:0 20px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(247,221,136,.16);
}
.tab-panel[data-panel="fighter"] > .card:first-child::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent, #f7dd88 18%, #d4af37 50%, #f7dd88 82%, transparent);
  opacity:.9;
}
/* avatar — gold ambient halo behind the framed bust (echoes the SVG rim-light) */
.tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame{
  box-shadow:0 0 0 2px rgba(212,175,55,.55), 0 0 36px rgba(212,175,55,.30), inset 0 0 44px rgba(0,0,0,.55);
}
/* nameplate — gold metallic gradient text */
.tab-panel[data-panel="fighter"] .hud-info .fname{
  text-transform:uppercase; letter-spacing:1.5px;
  background:linear-gradient(180deg,#fff6d6 0%,#f7dd88 36%,#d4af37 68%,#9a7d28 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
/* Overall — gold medallion backdrop (number colour stays tier-coded) */
.tab-panel[data-panel="fighter"] .ovr-badge{
  background:radial-gradient(circle at 50% 36%, rgba(212,175,55,.20), rgba(8,13,25,0) 70%);
  border-radius:16px; padding:6px 16px 8px;
}
.tab-panel[data-panel="fighter"] .ovr-badge .ol{ color:var(--gold); letter-spacing:3px; }
/* attribute bars — GOLD fill (was sunset-orange) */
.tab-panel[data-panel="fighter"] .attr-row .ar-bar{ border-color:rgba(212,175,55,.22); }
.tab-panel[data-panel="fighter"] .attr-row .ar-bar > i{
  background:linear-gradient(90deg,#9a7d28 0%,#d4af37 44%,#f7dd88 80%,#fff3c4 100%);
  box-shadow:0 0 8px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.tab-panel[data-panel="fighter"] .ar-name .ar-ic{ color:var(--gold-bright); }
/* career stat cards — gold hairline to match */
.tab-panel[data-panel="fighter"] .cstat-card{ border-color:rgba(212,175,55,.18); }
/* section-title number badge already gold; nudge its glow warmer here */
.tab-panel[data-panel="fighter"] .section-title .num{ box-shadow:0 0 16px rgba(212,175,55,.35); }

/* =====================================================================
   v275 — STORY MODE tab (data-panel="career"): same GOLD-VIBE pass.
   Scoped so other tabs stay untouched. The ladder/arc already use gold
   (.rung.current etc.) — this lifts the CARDS + headers + scout offer.
   ===================================================================== */
.tab-panel[data-panel="career"] .card{
  position:relative; overflow:hidden;
  border:1px solid rgba(212,175,55,.22);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(212,175,55,.08), transparent 55%),
    linear-gradient(180deg,#121a2e 0%,#0a1120 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(247,221,136,.10);
}
.tab-panel[data-panel="career"] .card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent, #f7dd88 20%, #d4af37 50%, #f7dd88 80%, transparent);
  opacity:.7;
}
.tab-panel[data-panel="career"] .section-title .num{ box-shadow:0 0 16px rgba(212,175,55,.35); }
.tab-panel[data-panel="career"] .section-title h2{
  background:linear-gradient(180deg,#fff6d6 0%,#f7dd88 42%,#d4af37 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
/* the Scout Offer is a dramatic story beat — give it the premium gold frame */
.tab-panel[data-panel="career"] .scout-card{
  border:1px solid rgba(212,175,55,.45) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.6), 0 0 30px rgba(212,175,55,.18), inset 0 1px 0 rgba(247,221,136,.2) !important;
}

/* =====================================================================
   v276 — SKILLS tab (data-panel="skills"): GOLD-VIBE pass (brick #4).
   The skill nodes/legend/points are already gold — this adds the card
   frame and retints the cine-head banner from ice/fire to warm gold.
   ===================================================================== */
.tab-panel[data-panel="skills"] .card{
  position:relative; overflow:hidden;
  border:1px solid rgba(212,175,55,.22);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(212,175,55,.08), transparent 55%),
    linear-gradient(180deg,#121a2e 0%,#0a1120 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(247,221,136,.10);
}
.tab-panel[data-panel="skills"] .card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent, #f7dd88 20%, #d4af37 50%, #f7dd88 80%, transparent);
  opacity:.7; z-index:1;
}
/* retint the flagship banner: ice/fire glow → warm gold so it matches the vibe */
.tab-panel[data-panel="skills"] .section-title.cine-head{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    radial-gradient(120% 180% at 0% 50%, rgba(212,175,55,.16), transparent 55%),
    radial-gradient(120% 180% at 100% 50%, rgba(247,221,136,.10), transparent 55%),
    linear-gradient(180deg,#1a1407,#0b0905);
  border-color:rgba(212,175,55,.30);
}

/* =====================================================================
   v278 — FRAMELESS avatars everywhere (owner: "dont frame them"). Strips
   the border/ring/halo/overlay off every avatar host so the raw fighter
   image (gold SVG 0–4 or photo 5–9) shows with no frame. Permanent.
   ===================================================================== */
.avatar-frame, #createAvatar, #hudAvatar,
.av-opt, .create-hero,
.fo-fighter .fav, .fo-announce .ann-face, .fwp-av,
.rank-podium-img .podx-face, .promo-b-av{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}
.avatar-frame::after{ display:none !important; }
/* kill the coloured rank rings (frame-bronze/silver/gold/elite/…) and my v274 gold halo */
[class*="frame-"]{ box-shadow:none !important; border-color:transparent !important; }
.tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame{ box-shadow:none !important; }
.av-opt.sel{ box-shadow:none !important; outline:2px solid var(--gold) !important; }  /* keep a slim selected marker, no frame */

/* ============================================================
   v285 — FIRST-IMPRESSION OVERHAUL (cinematic landing hero)
   Appended last so it overrides the legacy v263 landing block.
   ============================================================ */
#screen-landing{ justify-content:flex-start; align-items:center; min-height:100vh; gap:0;
  padding:clamp(16px,4vh,40px) 16px calc(40px + env(safe-area-inset-bottom)); overflow-y:auto; }
#screen-landing::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,12,.62) 0%, rgba(4,6,12,.72) 50%, rgba(4,6,12,.96) 100%),
    url("../images/bg_fight.jpg?v=260") center center / cover no-repeat;
}
.landing-hero{ position:relative; width:100%; max-width:560px; margin:auto;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.landing-resolving,
#landingResolving{
  width:100%;min-height:100vh;place-items:center;text-align:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(212,175,55,.12),transparent 34%),
    linear-gradient(180deg,#070a12,#04060c);
}
#landingResolving img{filter:drop-shadow(0 0 24px rgba(247,221,136,.42));animation:lhLogoGlow 2.2s ease-in-out infinite}

/* ---- animated arena ambience ---- */
.lh-fx{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.lh-beam{ position:absolute; top:-30%; width:38%; height:150%; filter:blur(22px); opacity:.0;
  background:linear-gradient(180deg, rgba(247,221,136,.22), rgba(247,221,136,0) 70%);
  transform-origin:top center; animation:lhBeam 7s ease-in-out infinite; }
.lh-beam.l{ left:8%; transform:rotate(14deg); }
.lh-beam.r{ right:8%; transform:rotate(-14deg); animation-delay:3.5s; }
@keyframes lhBeam{ 0%,100%{ opacity:.05; } 50%{ opacity:.5; } }
.lh-smoke{ position:absolute; left:-20%; bottom:-10%; width:140%; height:55%;
  background:radial-gradient(60% 80% at 30% 100%, rgba(120,140,180,.10), transparent 70%),
            radial-gradient(50% 70% at 70% 100%, rgba(180,150,90,.08), transparent 70%);
  filter:blur(14px); animation:lhSmoke 16s ease-in-out infinite alternate; }
@keyframes lhSmoke{ 0%{ transform:translateX(-3%); opacity:.7; } 100%{ transform:translateX(4%); opacity:1; } }
.lh-spark{ position:absolute; width:3px; height:3px; border-radius:50%; background:#ffe6a6; opacity:0;
  box-shadow:0 0 8px 2px rgba(247,221,136,.7); animation:lhSpark 9s linear infinite; }
.lh-spark.s1{ left:22%; animation-delay:0s; } .lh-spark.s2{ left:54%; animation-delay:3s; } .lh-spark.s3{ left:78%; animation-delay:6s; }
@keyframes lhSpark{ 0%{ bottom:-2%; opacity:0; } 12%{ opacity:.9; } 60%{ opacity:.5; } 100%{ bottom:90%; opacity:0; } }

/* ---- live social proof ---- */
.lh-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; z-index:3; }
.lh-stat{ flex:0 0 auto; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1;
  background:linear-gradient(180deg, rgba(22,28,44,.62), rgba(9,12,22,.5)); border:1px solid rgba(212,175,55,.3); border-radius:13px; padding:9px 14px; backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.lh-stat b{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:24px; color:#f9e6a4; text-shadow:0 0 16px rgba(247,221,136,.4); }
.lh-stat span{ font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:#aeb8cd; white-space:nowrap; }

/* ---- brand ---- */
.lh-brand{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:8px; animation:lhTitleIn .9s ease both; }
.lh-logo img{ width:84px; height:auto; filter:drop-shadow(0 0 26px rgba(247,221,136,.4)); animation:lhLogoGlow 3.4s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 82%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 82%,transparent 100%); }
@keyframes lhLogoGlow{ 0%,100%{ filter:drop-shadow(0 0 18px rgba(247,221,136,.28)); } 50%{ filter:drop-shadow(0 0 34px rgba(247,221,136,.6)); } }
.lh-title{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(38px,9vw,60px); line-height:.92; letter-spacing:1px; margin:0;
  background:linear-gradient(180deg,#fff6d6 0%,#f3d27e 45%,#caa233 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 18px rgba(212,160,54,.35)); }
.lh-title span{ -webkit-text-fill-color:transparent; }
.lh-tag{ font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(14px,3.6vw,18px); letter-spacing:2.5px; text-transform:uppercase; color:#d8c9a0; margin:2px 0 0; }
@keyframes lhTitleIn{ 0%{ opacity:0; transform:translateY(10px) scale(.97); } 100%{ opacity:1; transform:none; } }

/* ---- REAL FIGHT TEASER ---- */
.lh-teaser{ position:relative; width:100%; max-width:520px; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:1px solid rgba(212,175,55,.28); box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(40,30,18,.5), transparent 60%),
    radial-gradient(80% 120% at 50% 120%, rgba(10,14,26,.9), #07090f 70%),
    repeating-linear-gradient(115deg, rgba(159,180,214,.05) 0 1px, transparent 1px 7px); }
.lh-teaser-tag{ position:absolute; top:9px; left:11px; z-index:5; font-family:'Barlow Condensed',sans-serif; font-size:10px; letter-spacing:1.6px;
  color:#ff5a5a; background:rgba(8,10,16,.6); border:1px solid rgba(255,80,80,.3); border-radius:20px; padding:3px 9px; animation:lhLivePulse 1.6s ease-in-out infinite; }
@keyframes lhLivePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.lh-cage{ position:absolute; inset:0; }
.lh-cage::before{ content:""; position:absolute; left:8%; right:8%; bottom:14%; height:46%; border-radius:50%;
  background:radial-gradient(50% 60% at 50% 50%, rgba(212,175,55,.10), transparent 70%); border:1px solid rgba(212,175,55,.14); }
.lh-fighters{ position:absolute; inset:0; }
.lh-f{ position:absolute; bottom:13%; width:34%; max-width:150px; transform-origin:bottom center; }
.lh-f img{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.lh-f .f2d-action{display:none!important}
.lh-f.you{ left:14%; animation:lhBob 2.6s ease-in-out infinite; }
.lh-f.opp{ right:14%; transform:scaleX(-1); animation:lhBob 2.6s ease-in-out infinite .5s; }
@keyframes lhBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.lh-f.opp{ animation-name:lhBobO; } @keyframes lhBobO{ 0%,100%{ transform:scaleX(-1) translateY(0); } 50%{ transform:scaleX(-1) translateY(-3px); } }
.lh-f.you.jab{ animation:lhJabY .34s ease; } @keyframes lhJabY{ 0%,100%{ transform:translateX(0); } 45%{ transform:translateX(40%) scale(1.04); } }
.lh-f.opp.jab{ animation:lhJabO .34s ease; } @keyframes lhJabO{ 0%,100%{ transform:scaleX(-1) translateX(0); } 45%{ transform:scaleX(-1) translateX(40%) scale(1.04); } }
.lh-f.you.hit{ animation:lhHitY .34s ease; } @keyframes lhHitY{ 0%,100%{ transform:translateX(0) rotate(0); } 40%{ transform:translateX(-16%) rotate(-7deg); } }
.lh-f.opp.hit{ animation:lhHitO .34s ease; } @keyframes lhHitO{ 0%,100%{ transform:scaleX(-1) translateX(0) rotate(0); } 40%{ transform:scaleX(-1) translateX(-16%) rotate(7deg); } }
/* Landing-only stoppage: buckle and drop away from centre instead of rotating a
   standing cutout sideways across the opponent. The final frame stays readable
   and inside the compact teaser while still selling a decisive knockdown. */
.lh-f.down{ animation:lhDown .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes lhDown{
  28%{transform:translateX(-8%) translateY(5%) rotate(-5deg) scale(.96)}
  100%{transform:translateX(-22%) translateY(30%) rotate(-16deg) scale(.78);opacity:.3}
}
.lh-f.opp.down{ animation:lhDownO .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes lhDownO{
  28%{transform:scaleX(-1) translateX(-8%) translateY(5%) rotate(-5deg) scale(.96)}
  100%{transform:scaleX(-1) translateX(-22%) translateY(30%) rotate(-16deg) scale(.78);opacity:.3}
}
.lh-burst{ position:absolute; z-index:4; font-family:'Barlow Condensed',sans-serif; font-weight:700; color:#fff; text-shadow:0 0 10px rgba(255,180,80,.8); pointer-events:none;
  font-size:20px; opacity:0; }
.lh-burst.go{ animation:lhBurst .5s ease forwards; } @keyframes lhBurst{ 0%{ opacity:0; transform:scale(.6); } 30%{ opacity:1; transform:scale(1.15); } 100%{ opacity:0; transform:scale(1.3) translateY(-12px); } }
.lh-teaser-flash{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 55%, rgba(255,235,180,.5), transparent 60%); }
.lh-teaser-flash.go{ animation:lhFlash .3s ease; } @keyframes lhFlash{ 0%{ opacity:.85; } 100%{ opacity:0; } }
.lh-teaser-feed{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:7px 12px; text-align:left;
  font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:#e6ecf6;
  background:linear-gradient(180deg, transparent, rgba(5,7,12,.85)); min-height:30px; }

/* ---- primary CTA ---- */
.lh-cta{ position:relative; width:100%; max-width:420px; border:0; cursor:pointer; border-radius:15px; padding:15px 18px;
  display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .12s, box-shadow .2s;
  background:linear-gradient(180deg,#ffe488,#f3c64f 55%,#c8902f); color:#1a1206;
  box-shadow:0 12px 30px rgba(212,160,54,.42), inset 0 1px 0 rgba(255,255,255,.55); animation:lhCtaPulse 2.8s ease-in-out infinite; }
@keyframes lhCtaPulse{ 0%,100%{ box-shadow:0 12px 30px rgba(212,160,54,.34), inset 0 1px 0 rgba(255,255,255,.5); } 50%{ box-shadow:0 14px 40px rgba(212,160,54,.6), inset 0 1px 0 rgba(255,255,255,.6); } }
.lh-cta:hover{ transform:translateY(-2px); } .lh-cta:active{ transform:translateY(1px) scale(.99); }
.lh-cta-main{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:21px; letter-spacing:2px; text-transform:uppercase; }
.lh-cta-sub{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; opacity:.78; letter-spacing:.4px; }
.lh-auth{ font-family:'Inter',sans-serif; font-size:13px; color:#9aa6bd; }
.lh-link{ background:none; border:0; cursor:pointer; color:var(--gold-bright,#f7dd88); font-family:'Inter',sans-serif; font-weight:700; font-size:13px; text-decoration:underline; padding:2px; }

/* ---- feature cards ---- */
.lh-cards{ display:flex; gap:10px; width:100%; max-width:520px; }
.lh-card{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:13px 8px;
  background:rgba(12,16,26,.55); border:1px solid rgba(212,175,55,.16); border-radius:13px; backdrop-filter:blur(5px);
  opacity:0; animation:lhCardUp .7s ease forwards; animation-delay:var(--d,0ms); transition:transform .16s, border-color .2s; }
.lh-card:hover{ transform:translateY(-3px); border-color:rgba(212,175,55,.4); }
.lh-card-ic{ width:24px; height:24px; color:var(--gold-bright,#f7dd88); display:grid; place-items:center; }
.lh-card-ic svg{ width:24px; height:24px; }
.lh-card b{ font-family:'Barlow Condensed',sans-serif; font-size:13.5px; letter-spacing:.6px; color:#fff; text-transform:uppercase; }
.lh-card span{ font-family:'Inter',sans-serif; font-size:11.5px; color:#9aa6bd; line-height:1.2; }
@keyframes lhCardUp{ 0%{ opacity:0; transform:translateY(14px); } 100%{ opacity:1; transform:none; } }

/* ---- quote strip ---- */
.lh-quote{ font-family:'Inter',sans-serif; font-size:13px; color:#c7cfdd; font-style:italic; }
.lh-stars{ color:var(--gold-bright,#f7dd88); letter-spacing:2px; font-style:normal; }

/* ---- mobile ---- */
@media (max-width:640px){
  #screen-landing:not(.hidden){ position:relative; inset:auto; z-index:auto; justify-content:flex-start; align-items:center;
    min-height:100vh; padding:18px 14px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; background:none; }
  #screen-landing::before{ display:block; }
  .landing-hero{ gap:14px; }
  .lh-stats{ position:static; margin-bottom:2px; }
  .lh-stat b{ font-size:16px; }
  .lh-logo img{ width:64px; }
  .lh-cards{ gap:7px; }
  .lh-card{ padding:10px 5px; }
  .lh-card span:not(.lh-card-ic){ display:none; }   /* hide the description on mobile, keep the icon */
}

/* ============================================================
   v286 — FIRST-WIN CELEBRATION (Mission 289)
   The dopamine beat the instant a new player wins their very first fight.
   Cinematic gold card: their own fighter, "VICTORY", record → 1–0, gold
   confetti + spinning rays. Reuses celSpin / ppShine / celPop keyframes.
   ============================================================ */
.fwin-ov{ position:fixed; inset:0; z-index:100075; display:grid; place-items:center; padding:20px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%, rgba(42,31,7,.62), rgba(3,4,8,.92)); opacity:0; transition:opacity .3s ease; }
.fwin-ov.show{ opacity:1; }
.fwin-card{ position:relative; width:min(420px,93vw); text-align:center; padding:30px 26px 24px; border-radius:22px;
  background:radial-gradient(ellipse at 50% -10%, rgba(255,200,80,.22), transparent 65%), linear-gradient(180deg,#181206,#0a0a12);
  border:1px solid rgba(255,206,90,.5);
  box-shadow:0 26px 80px rgba(0,0,0,.75), 0 0 70px rgba(255,190,70,.28), inset 0 1px 0 rgba(255,255,255,.06);
  transform:scale(.7) translateY(14px); opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.25,1.3), opacity .3s ease; }
.fwin-ov.show .fwin-card{ transform:scale(1) translateY(0); opacity:1; }
.fwin-rays{ position:absolute; left:50%; top:-25%; width:380px; height:380px; margin-left:-190px; pointer-events:none; opacity:.18;
  background:repeating-conic-gradient(from 0deg, #ffce5a 0deg 5deg, transparent 5deg 16deg); animation:celSpin 18s linear infinite; }
.fwin-shine{ position:absolute; top:-60%; left:-45%; width:55%; height:220%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent); transform:rotate(8deg); animation:ppShine 1.7s ease-out .35s both; }
.fwin-av{ position:relative; width:106px; height:106px; margin:0 auto 2px; border-radius:50%; overflow:hidden;
  border:3px solid #ffce5a; box-shadow:0 0 28px rgba(255,200,80,.55); background:#0a0a12;
  animation:celPop .6s cubic-bezier(.2,.9,.3,1.5) both; }
.fwin-av svg, .fwin-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.fwin-kicker{ position:relative; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:3px; font-size:13px; color:#ffce5a; opacity:.92; margin-top:10px; }
.fwin-title{ position:relative; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:40px; letter-spacing:1.5px; line-height:1.02; margin:1px 0 4px;
  background:linear-gradient(180deg,#fff5d2,#ffce5a 55%,#e0a32e); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(255,190,70,.4); }
.fwin-rec{ position:relative; display:inline-block; margin:4px 0 2px; font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.fwin-rec .fwr-num{ font-size:32px; color:#fff; }
.fwin-rec .fwr-dash{ color:#ffce5a; font-size:26px; opacity:.85; margin:0 4px; }
.fwin-rec .fwr-lab{ display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:2px; color:#9aa3b2; margin-top:1px; }
.fwin-name{ position:relative; font-family:'Inter',sans-serif; font-weight:600; font-size:15px; color:#dfe5ee; opacity:.94; margin:9px 0 18px; line-height:1.45; }
.fwin-name b{ color:#ffce5a; }
.fwin-actions{ position:relative; display:flex; flex-direction:column; gap:9px; }
.fwin-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.fwin-confetti i{ position:absolute; top:-14px; width:8px; height:14px; border-radius:1px; opacity:0; animation:fwConf linear forwards; }
@keyframes fwConf{ 0%{ transform:translateY(-20px) rotate(0); opacity:0; } 8%{ opacity:1; } 100%{ transform:translateY(106vh) rotate(720deg); opacity:.9; } }
@media(max-width:560px){ .fwin-title{ font-size:32px; } .fwin-av{ width:92px; height:92px; } }

/* ============================================================
   FIGHT POLISH — CONTACT SPARK at the point of impact (spawned by impactSpark() in art.js).
   A 0×0 anchor on the struck fighter's side; children burst out from that point. Display-only.
   ============================================================ */
.hit-spark{ position:absolute; top:24%; width:0; height:0; z-index:6; pointer-events:none; }   /* lives inside .fo-stage; top≈head height */

/* ===== v294: TECHNIQUE-SPECIFIC 2D ATTACK MOTION =====
   Presentation only. The same fighter cutout now sells distinct mechanics through footwork,
   hip/shoulder rotation, level changes and recovery instead of one universal forward slide. */
.fo-stage{transform-origin:50% 58%;transition:transform .22s ease,filter .22s ease}
.fo-stage.exchange-focus{transform:scale(1.012);filter:contrast(1.035) saturate(1.04)}
.fo-stage .f2d.atk-jab{animation:f2dJabY .30s cubic-bezier(.25,.8,.2,1)}
.fo-stage .f2d.opp.atk-jab{animation:f2dJabO .30s cubic-bezier(.25,.8,.2,1)}
.fo-stage .f2d.atk-cross,.fo-stage .f2d.atk-generic{animation:f2dCrossY .38s cubic-bezier(.2,.82,.2,1)}
.fo-stage .f2d.opp.atk-cross,.fo-stage .f2d.opp.atk-generic{animation:f2dCrossO .38s cubic-bezier(.2,.82,.2,1)}
.fo-stage .f2d.atk-hook{animation:f2dHookY .40s cubic-bezier(.18,.82,.22,1)}
.fo-stage .f2d.opp.atk-hook{animation:f2dHookO .40s cubic-bezier(.18,.82,.22,1)}
.fo-stage .f2d.atk-lowkick{animation:f2dLowKickY .44s cubic-bezier(.2,.75,.22,1)}
.fo-stage .f2d.opp.atk-lowkick{animation:f2dLowKickO .44s cubic-bezier(.2,.75,.22,1)}
.fo-stage .f2d.atk-bodykick{animation:f2dBodyKickY .46s cubic-bezier(.18,.76,.2,1)}
.fo-stage .f2d.opp.atk-bodykick{animation:f2dBodyKickO .46s cubic-bezier(.18,.76,.2,1)}
.fo-stage .f2d.atk-headkick{animation:f2dHeadKickY .52s cubic-bezier(.16,.72,.18,1)}
.fo-stage .f2d.opp.atk-headkick{animation:f2dHeadKickO .52s cubic-bezier(.16,.72,.18,1)}
.fo-stage .f2d.atk-takedown{animation:f2dTakedownY .56s cubic-bezier(.2,.78,.18,1)}
.fo-stage .f2d.opp.atk-takedown{animation:f2dTakedownO .56s cubic-bezier(.2,.78,.18,1)}
.fo-stage .f2d.td-taken{animation:f2dTakenY .56s cubic-bezier(.2,.78,.18,1)}
.fo-stage .f2d.opp.td-taken{animation:f2dTakenO .56s cubic-bezier(.2,.78,.18,1)}
.fo-stage .f2d.atk-ground{animation:f2dGroundHitY .38s cubic-bezier(.22,.8,.24,1)}
.fo-stage .f2d.opp.atk-ground{animation:f2dGroundHitO .38s cubic-bezier(.22,.8,.24,1)}
.fo-stage .f2d.ground-react{animation:f2dGroundReactY .34s ease-out}
.fo-stage .f2d.opp.ground-react{animation:f2dGroundReactO .34s ease-out}
.fo-stage .f2d.atk-sub{animation:f2dSubY .50s ease-in-out}
.fo-stage .f2d.opp.atk-sub{animation:f2dSubO .50s ease-in-out}
.fo-stage .f2d.sub-react{animation:f2dSubReactY .50s ease-in-out}
.fo-stage .f2d.opp.sub-react{animation:f2dSubReactO .50s ease-in-out}

@keyframes f2dJabY{0%,100%{transform:translate(0) rotate(0)}18%{transform:translate(-3px) rotate(-1deg)}48%{transform:translate(18px,-1px) rotate(2deg)}70%{transform:translate(7px) rotate(.5deg)}}
@keyframes f2dJabO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}18%{transform:scaleX(-1) translate(-3px) rotate(-1deg)}48%{transform:scaleX(-1) translate(18px,-1px) rotate(2deg)}70%{transform:scaleX(-1) translate(7px) rotate(.5deg)}}
@keyframes f2dCrossY{0%,100%{transform:translate(0) rotate(0)}16%{transform:translate(-7px) rotate(-4deg)}46%{transform:translate(29px,-1px) rotate(8deg) scale(1.035)}72%{transform:translate(8px) rotate(2deg)}}
@keyframes f2dCrossO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}16%{transform:scaleX(-1) translate(-7px) rotate(-4deg)}46%{transform:scaleX(-1) translate(29px,-1px) rotate(8deg) scale(1.035)}72%{transform:scaleX(-1) translate(8px) rotate(2deg)}}
@keyframes f2dHookY{0%,100%{transform:translate(0) rotate(0)}18%{transform:translate(-6px) rotate(-9deg)}48%{transform:translate(22px,-1px) rotate(14deg) scale(1.025)}72%{transform:translate(5px) rotate(3deg)}}
@keyframes f2dHookO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}18%{transform:scaleX(-1) translate(-6px) rotate(-9deg)}48%{transform:scaleX(-1) translate(22px,-1px) rotate(14deg) scale(1.025)}72%{transform:scaleX(-1) translate(5px) rotate(3deg)}}
@keyframes f2dLowKickY{0%,100%{transform:translate(0) rotate(0)}18%{transform:translate(-5px,-2px) rotate(-5deg)}48%{transform:translate(20px,5px) rotate(13deg) scaleY(.96)}72%{transform:translate(5px,2px) rotate(3deg)}}
@keyframes f2dLowKickO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}18%{transform:scaleX(-1) translate(-5px,-2px) rotate(-5deg)}48%{transform:scaleX(-1) translate(20px,5px) rotate(13deg) scaleY(.96)}72%{transform:scaleX(-1) translate(5px,2px) rotate(3deg)}}
@keyframes f2dBodyKickY{0%,100%{transform:translate(0) rotate(0)}18%{transform:translate(-8px,-1px) rotate(-8deg)}46%{transform:translate(25px,-5px) rotate(19deg) scale(1.025)}70%{transform:translate(7px,-1px) rotate(4deg)}}
@keyframes f2dBodyKickO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}18%{transform:scaleX(-1) translate(-8px,-1px) rotate(-8deg)}46%{transform:scaleX(-1) translate(25px,-5px) rotate(19deg) scale(1.025)}70%{transform:scaleX(-1) translate(7px,-1px) rotate(4deg)}}
@keyframes f2dHeadKickY{0%,100%{transform:translate(0) rotate(0)}16%{transform:translate(-10px,1px) rotate(-10deg)}46%{transform:translate(30px,-13px) rotate(27deg) scale(1.045)}68%{transform:translate(10px,-5px) rotate(8deg)}}
@keyframes f2dHeadKickO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}16%{transform:scaleX(-1) translate(-10px,1px) rotate(-10deg)}46%{transform:scaleX(-1) translate(30px,-13px) rotate(27deg) scale(1.045)}68%{transform:scaleX(-1) translate(10px,-5px) rotate(8deg)}}
@keyframes f2dTakedownY{0%,100%{transform:translate(0) rotate(0)}20%{transform:translate(-5px,8px) rotate(-4deg) scaleY(.91)}54%{transform:translate(39px,13px) rotate(17deg) scale(.96,.88)}78%{transform:translate(16px,6px) rotate(7deg)}}
@keyframes f2dTakedownO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}20%{transform:scaleX(-1) translate(-5px,8px) rotate(-4deg) scaleY(.91)}54%{transform:scaleX(-1) translate(39px,13px) rotate(17deg) scale(.96,.88)}78%{transform:scaleX(-1) translate(16px,6px) rotate(7deg)}}
@keyframes f2dTakenY{0%,100%{transform:translate(0) rotate(0)}48%{transform:translate(-18px,10px) rotate(-13deg) scaleY(.92)}72%{transform:translate(-7px,5px) rotate(-6deg)}}
@keyframes f2dTakenO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}48%{transform:scaleX(-1) translate(-18px,10px) rotate(-13deg) scaleY(.92)}72%{transform:scaleX(-1) translate(-7px,5px) rotate(-6deg)}}
@keyframes f2dGroundHitY{0%,100%{transform:translate(0) rotate(0)}28%{transform:translate(-2px,-5px) rotate(-3deg)}55%{transform:translate(8px,9px) rotate(8deg)}76%{transform:translate(3px,3px) rotate(2deg)}}
@keyframes f2dGroundHitO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}28%{transform:scaleX(-1) translate(-2px,-5px) rotate(-3deg)}55%{transform:scaleX(-1) translate(8px,9px) rotate(8deg)}76%{transform:scaleX(-1) translate(3px,3px) rotate(2deg)}}
@keyframes f2dGroundReactY{0%,100%{transform:translate(0)}34%{transform:translate(-5px,4px) rotate(-3deg)}64%{transform:translate(2px,-1px) rotate(1deg)}}
@keyframes f2dGroundReactO{0%,100%{transform:scaleX(-1) translate(0)}34%{transform:scaleX(-1) translate(-5px,4px) rotate(-3deg)}64%{transform:scaleX(-1) translate(2px,-1px) rotate(1deg)}}
@keyframes f2dSubY{0%,100%{transform:translate(0) rotate(0)}40%{transform:translate(7px,5px) rotate(6deg) scale(.98)}72%{transform:translate(5px,3px) rotate(4deg)}}
@keyframes f2dSubO{0%,100%{transform:scaleX(-1) translate(0) rotate(0)}40%{transform:scaleX(-1) translate(7px,5px) rotate(6deg) scale(.98)}72%{transform:scaleX(-1) translate(5px,3px) rotate(4deg)}}
@keyframes f2dSubReactY{0%,100%{transform:translate(0)}35%{transform:translate(-4px,3px) rotate(-4deg)}70%{transform:translate(-2px,1px) rotate(-2deg)}}
@keyframes f2dSubReactO{0%,100%{transform:scaleX(-1) translate(0)}35%{transform:scaleX(-1) translate(-4px,3px) rotate(-4deg)}70%{transform:scaleX(-1) translate(-2px,1px) rotate(-2deg)}}

/* ===== v300: REAL POSE SWAPS =====
   The action layer contains identity-matched strike/kick/wrestling art. These keyframes replace the
   old whole-body bending only while that layer is active; defender reactions and idle motion remain. */
.fo-stage .f2d.pose-active{animation:f2dPoseY var(--pose-dur,400ms) cubic-bezier(.18,.82,.2,1)!important}
.fo-stage .f2d.opp.pose-active{animation:f2dPoseO var(--pose-dur,400ms) cubic-bezier(.18,.82,.2,1)!important}
.fo-stage .f2d.pose-active .f2d-base{animation:f2dBaseHide var(--pose-dur,400ms) ease both}
.fo-stage .f2d.pose-active .f2d-action{animation:f2dPoseReveal var(--pose-dur,400ms) ease both}
@keyframes f2dBaseHide{0%,8%{opacity:1}16%,82%{opacity:0}100%{opacity:1}}
@keyframes f2dPoseReveal{0%,6%{opacity:0}16%,78%{opacity:1}100%{opacity:0}}
@keyframes f2dPoseY{
  0%,100%{transform:translate(0,0) scale(1)}
  12%{transform:translate(-4px,2px) scale(.98)}
  38%,58%{transform:translate(var(--pose-x,20px),var(--pose-y,0)) scale(var(--pose-scale,1.03))}
  78%{transform:translate(6px,1px) scale(1.01)}
}
@keyframes f2dPoseO{
  0%,100%{transform:scaleX(-1) translate(0,0) scale(1)}
  12%{transform:scaleX(-1) translate(-4px,2px) scale(.98)}
  38%,58%{transform:scaleX(-1) translate(var(--pose-x,20px),var(--pose-y,0)) scale(var(--pose-scale,1.03))}
  78%{transform:scaleX(-1) translate(6px,1px) scale(1.01)}
}

@media (prefers-reduced-motion:reduce){
  .fo-stage.exchange-focus{transform:none;filter:none}
  .fo-stage .f2d[class*="atk-"],.fo-stage .f2d.td-taken,.fo-stage .f2d.ground-react,.fo-stage .f2d.sub-react{animation-duration:.01ms!important}
}

/* ============================================================
   M16 C5 — deterministic recorded PvP replay.
   The viewer animates only authoritative timeline frames supplied by
   pvp-replay-viewer.mjs; these rules contain no outcome selection.
   ============================================================ */
.fr-replay{margin:11px 0 12px;border-radius:11px;text-align:center;font:600 12px/1.35 Inter,sans-serif}
.fr-replay.checking,.fr-replay.unavailable{padding:10px 12px;color:#929cad;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.fr-replay.available{padding:0}.fr-replay-watch{min-height:44px}

.pvr-overlay{position:fixed;inset:0;z-index:100250;display:grid;place-items:center;padding:16px;
  background:rgba(2,4,8,.92);backdrop-filter:blur(8px);overflow:auto}
.pvr-dialog{width:min(900px,96vw);max-height:calc(100vh - 24px);overflow:auto;border-radius:20px;
  color:#eef2f8;background:linear-gradient(180deg,#111827,#070a10);
  border:1px solid rgba(212,175,55,.32);box-shadow:0 28px 90px rgba(0,0,0,.82)}
.pvr-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px}
.pvr-head small{display:block;color:#caa94c;font:700 10px/1.2 Inter,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.pvr-head h2{margin:2px 0 0;font:700 24px/1.05 "Barlow Condensed",sans-serif;text-transform:uppercase}
.pvr-close{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer;color:#fff;
  font:300 28px/1 Inter,sans-serif;background:#1b2432;border:1px solid rgba(255,255,255,.14)}
.pvr-close:focus-visible,.pvr-controls button:focus-visible,.pvr-speed:focus-visible{outline:3px solid #f0c75e;outline-offset:2px}

.pvr-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:start;padding:0 18px 10px}
.pvr-round{align-self:center;min-width:76px;padding:6px 9px;border-radius:999px;text-align:center;color:#f5d577;
  background:#0b0f17;border:1px solid rgba(212,175,55,.25);font:700 12px/1 Inter,sans-serif;text-transform:uppercase}
.pvr-meters{min-width:0}.pvr-meters.red{text-align:right}.pvr-meters strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:5px;font:700 13px/1.2 Inter,sans-serif}.pvr-meters.blue strong{color:#8bc8ff}.pvr-meters.red strong{color:#ff9d94}
.pvr-meter-row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px;align-items:center;margin:3px 0}
.pvr-meters.red .pvr-meter-row{grid-template-columns:minmax(0,1fr) 34px}.pvr-meters.red .pvr-meter-row span{order:2}
.pvr-meter-row span{font:700 8px/1 Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#8791a2}
.pvr-meter{height:6px;border-radius:99px;overflow:hidden;background:#242a35;border:1px solid rgba(255,255,255,.05)}
.pvr-meter i{display:block;width:100%;height:100%;transition:width .36s ease;background:linear-gradient(90deg,#e0524d,#f0c75e,#53d08a)}
.pvr-meter-row.gas .pvr-meter i{background:#5ea9e8}

.pvr-arena{position:relative;isolation:isolate;aspect-ratio:16/9;min-height:330px;overflow:hidden;background:#07090e;
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.pvr-arena>.cage-scene{position:absolute;inset:0;z-index:0;border-radius:0}
.pvr-arena>.ref-figure{position:absolute;left:50%;bottom:17%;width:4.2%;min-width:24px;z-index:2;transform:translateX(-50%);opacity:.82;
  transition:transform .35s ease,opacity .25s ease}
.pvr-arena.is-terminal>.ref-figure{transform:translateX(-50%) translateY(-4px) scale(1.08);opacity:1}
.pvr-stage{position:absolute;inset:0;z-index:3}
.pvr-fighter{position:absolute;bottom:12%;width:24%;height:66%;transition:left .42s ease,right .42s ease,bottom .42s ease,transform .35s ease,opacity .25s ease;
  transform-origin:50% 100%}
.pvr-fighter.blue{left:16%}.pvr-fighter.red{right:16%}
.pvr-fighter-name{position:absolute;left:50%;top:-3px;transform:translateX(-50%);z-index:2;max-width:150%;
  padding:4px 8px;border-radius:99px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f3f6fb;background:rgba(4,7,12,.72);font:700 10px/1 Inter,sans-serif;letter-spacing:.3px}
.pvr-fighter-figure{position:absolute;inset:14px 0 0;transform-origin:50% 100%;transition:transform .38s ease,filter .22s ease,opacity .22s ease}
.pvr-fighter.red .pvr-fighter-figure{transform:scaleX(-1)}
.pvr-fighter img{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 9px 10px rgba(0,0,0,.68))}

.pvr-fighter.blue.act-strike,.pvr-fighter.blue.act-knockdown{animation:pvrAttackBlue .52s cubic-bezier(.18,.8,.2,1)}
.pvr-fighter.red.act-strike,.pvr-fighter.red.act-knockdown{animation:pvrAttackRed .52s cubic-bezier(.18,.8,.2,1)}
.pvr-fighter.blue.act-takedown{animation:pvrShotBlue .64s cubic-bezier(.18,.82,.2,1)}
.pvr-fighter.red.act-takedown{animation:pvrShotRed .64s cubic-bezier(.18,.82,.2,1)}
.pvr-fighter.act-ground_strike,.pvr-fighter.act-ground_control,.pvr-fighter.act-submission{animation:pvrGroundAttack .48s ease}
.pvr-fighter.blue.react-hit{animation:pvrHitBlue .48s ease}.pvr-fighter.red.react-hit{animation:pvrHitRed .48s ease}
.pvr-fighter.react-takedown,.pvr-fighter.react-ground,.pvr-fighter.react-submission{filter:brightness(.82) saturate(.9)}
.pvr-fighter.is-down .pvr-fighter-figure,.pvr-fighter.is-finished .pvr-fighter-figure{transform:rotate(84deg) scale(.86);opacity:.85}
.pvr-fighter.red.is-down .pvr-fighter-figure,.pvr-fighter.red.is-finished .pvr-fighter-figure{transform:scaleX(-1) rotate(84deg) scale(.86)}
.pvr-fighter.is-winner{animation:pvrWinner .8s ease}.pvr-fighter.is-rallying{animation:pvrRally .6s ease}
.pvr-fighter.is-gassed .pvr-fighter-figure{filter:brightness(.72) saturate(.65)}

.pvr-arena[data-position="ground"] .pvr-fighter{width:23%;height:55%;bottom:7%}
.pvr-arena[data-position="ground"] .pvr-fighter.blue{left:34%}.pvr-arena[data-position="ground"] .pvr-fighter.red{right:34%}
.pvr-arena[data-position="ground"][data-top="blue"] .pvr-fighter.blue,
.pvr-arena[data-position="ground"][data-top="red"] .pvr-fighter.red{bottom:15%;z-index:4}
.pvr-arena[data-position="ground"][data-top="blue"] .pvr-fighter.red .pvr-fighter-figure{transform:scaleX(-1) rotate(76deg) scale(.86)}
.pvr-arena[data-position="ground"][data-top="red"] .pvr-fighter.blue .pvr-fighter-figure{transform:rotate(76deg) scale(.86)}
.pvr-arena.is-terminal .pvr-fighter.is-winner{z-index:5}

.pvr-caption{position:absolute;left:50%;bottom:3.5%;z-index:7;width:min(620px,88%);transform:translateX(-50%);
  min-height:34px;padding:8px 14px;border-radius:10px;text-align:center;color:#fff;
  background:rgba(5,8,13,.88);border:1px solid rgba(255,255,255,.12);box-shadow:0 7px 20px rgba(0,0,0,.42);
  font:700 13px/1.35 Inter,sans-serif}
.pvr-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.pvr-controls label{display:flex;align-items:center;gap:7px;color:#aab3c1;font:700 11px/1 Inter,sans-serif;text-transform:uppercase}
.pvr-speed{min-height:40px;border-radius:9px;padding:0 9px;color:#fff;background:#151b25;border:1px solid rgba(255,255,255,.14)}
.pvr-controls .btn{width:auto;min-height:40px;margin:0;padding:9px 14px}

@keyframes pvrAttackBlue{0%,100%{transform:translateX(0)}45%{transform:translateX(22%) scale(1.04)}}
@keyframes pvrAttackRed{0%,100%{transform:translateX(0)}45%{transform:translateX(-22%) scale(1.04)}}
@keyframes pvrShotBlue{0%,100%{transform:translate(0)}48%{transform:translate(42%,9%) scale(.96)}}
@keyframes pvrShotRed{0%,100%{transform:translate(0)}48%{transform:translate(-42%,9%) scale(.96)}}
@keyframes pvrGroundAttack{0%,100%{transform:translateY(0)}45%{transform:translateY(8%) rotate(3deg)}}
@keyframes pvrHitBlue{0%,100%{transform:translateX(0)}42%{transform:translateX(-12%) rotate(-6deg)}}
@keyframes pvrHitRed{0%,100%{transform:translateX(0)}42%{transform:translateX(12%) rotate(6deg)}}
@keyframes pvrWinner{0%,100%{transform:translateY(0)}45%{transform:translateY(-7%) scale(1.05)}}
@keyframes pvrRally{0%,100%{filter:brightness(1)}45%{filter:brightness(1.45) saturate(1.2)}}

@media(max-width:620px){
  .pvr-overlay{padding:0;align-items:end}.pvr-dialog{width:100%;max-height:100vh;border-radius:16px 16px 0 0}
  .pvr-head{padding:10px 12px 7px}.pvr-head h2{font-size:21px}.pvr-close{width:40px;height:40px}
  .pvr-hud{gap:7px;padding:0 10px 7px}.pvr-round{min-width:58px;padding:5px;font-size:10px}
  .pvr-meters strong{font-size:11px}.pvr-meter-row{grid-template-columns:27px minmax(0,1fr);gap:3px}
  .pvr-meters.red .pvr-meter-row{grid-template-columns:minmax(0,1fr) 27px}.pvr-meter-row span{font-size:7px}
  .pvr-arena{min-height:0;aspect-ratio:4/3}.pvr-fighter{width:30%;height:62%}
  .pvr-fighter.blue{left:8%}.pvr-fighter.red{right:8%}
  .pvr-arena[data-position="ground"] .pvr-fighter{width:27%}
  .pvr-arena[data-position="ground"] .pvr-fighter.blue{left:32%}.pvr-arena[data-position="ground"] .pvr-fighter.red{right:32%}
  .pvr-caption{bottom:2.5%;font-size:11px;padding:7px 9px}.pvr-controls{flex-wrap:wrap;gap:7px;padding:9px 10px calc(9px + env(safe-area-inset-bottom))}
  .pvr-controls .btn{min-height:42px;padding:8px 11px}.pvr-fighter-name{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .pvr-fighter,.pvr-fighter-figure,.pvr-meter i,.pvr-arena>.ref-figure{transition:none!important}
  .pvr-fighter{animation:none!important}.pvr-overlay{backdrop-filter:none}
}
.hit-spark.you{ left:38%; }   /* YOU got hit -> spark on the left fighter's side, toward centre */
.hit-spark.opp{ left:62%; }   /* OPP got hit -> spark on the right fighter's side, toward centre */
.hit-spark.lvl1{ transform:scale(.62); opacity:.78; }   /* light jab — a small tick, not a blast */
.hit-spark.lvl2{ transform:scale(1); }
.hit-spark.lvl3{ transform:scale(1.42); }
.hit-spark.lvl4{ transform:scale(1.82); }
/* white-hot core flash */
.hit-spark .hs-core{ position:absolute; left:-21px; top:-21px; width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe9a8 32%,rgba(255,196,84,.55) 56%,transparent 74%);
  opacity:0; animation:hsCore .26s ease-out forwards; }
@keyframes hsCore{ 0%{ transform:scale(.2); opacity:0; } 22%{ opacity:1; } 100%{ transform:scale(1.2); opacity:0; } }
/* radiating gold spikes (8 spokes, masked to read as rays from the centre) */
.hit-spark .hs-rays{ position:absolute; left:-38px; top:-38px; width:76px; height:76px; opacity:0;
  background:repeating-conic-gradient(rgba(255,234,170,.95) 0deg 3deg, transparent 3deg 45deg);
  -webkit-mask:radial-gradient(circle, transparent 15%, #000 19%, #000 50%, transparent 56%);
  mask:radial-gradient(circle, transparent 15%, #000 19%, #000 50%, transparent 56%);
  animation:hsRays .3s ease-out forwards; }
@keyframes hsRays{ 0%{ transform:scale(.3) rotate(0); opacity:0; } 25%{ opacity:1; } 100%{ transform:scale(1.18) rotate(13deg); opacity:0; } }
/* expanding shock-ring */
.hit-spark .hs-ring{ position:absolute; left:-13px; top:-13px; width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,222,140,.85); opacity:0; animation:hsRing .42s ease-out forwards; }
@keyframes hsRing{ 0%{ transform:scale(.3); opacity:0; } 20%{ opacity:.9; } 100%{ transform:scale(2.7); opacity:0; border-width:.5px; } }
/* flung debris specks */
.hit-spark i{ position:absolute; left:-2px; top:-2px; width:4px; height:4px; border-radius:50%; background:#ffe6a6;
  opacity:0; animation:hsDeb .42s ease-out forwards; animation-delay:var(--dl,0ms); }
@keyframes hsDeb{ 0%{ transform:rotate(var(--a)) translateX(2px) scale(1); opacity:0; } 15%{ opacity:1; } 100%{ transform:rotate(var(--a)) translateX(48px) scale(.35); opacity:0; } }

/* =====================================================================
   v292 — PREMIUM UI SYSTEM
   Five primary destinations, calmer typography, compact fighter overview,
   and consistent screen hierarchy. Presentation-only: no save data changes.
   ===================================================================== */
:root{
  --bg:#06080d;
  --bg2:#0a0e16;
  --panel-top:#111722;
  --panel-bot:#0c111a;
  --line:#242c3a;
  --line-soft:#171e2a;
  --gold:#e1a83a;
  --gold-bright:#f4ca72;
  --gold-dim:#9e7428;
  --text:#f2f4f8;
  --muted:#929baa;
  --shadow:0 14px 36px rgba(0,0,0,.28);
  --mobile-game-nav-height:69px;
  --mobile-game-nav-content-gap:16px;
}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.55;letter-spacing:-.01em}
h1,h2,h3,h4,.font-head{font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em}
button,input,select,textarea{font-family:'Inter',system-ui,sans-serif}
.wrap{max-width:1240px;padding:16px 24px 96px}
body::after{animation:none;opacity:.55}

header.app{padding:10px 0 14px;margin-bottom:18px;background:rgba(6,8,13,.86);border-color:rgba(255,255,255,.07)}
.brand .logo{width:42px;height:42px;border-radius:10px;box-shadow:none}
.brand h1{font-size:25px}.brand .tag{font-family:'Inter',sans-serif;font-size:9px;letter-spacing:2.4px}
.rec-pill .rv{font-family:'JetBrains Mono',monospace;font-size:18px}.rec-pill .rl{font-family:'Inter',sans-serif;font-size:9px}
.badge-rank{font-family:'Inter',sans-serif}

.card{padding:22px;background:linear-gradient(180deg,rgba(18,24,35,.97),rgba(11,16,24,.97));border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:var(--shadow);animation:rise .32s ease both}
.card::before{display:none}.card + .card{margin-top:14px}
.section-title{gap:10px}.section-title .num{width:30px;height:30px;border-radius:8px;box-shadow:none}
.section-title h2{font-size:24px;line-height:1}.section-sub{font-family:'Inter',sans-serif;font-size:13px;line-height:1.55;margin-bottom:18px}
.game-home-btn{margin:0 0 12px;padding:7px 11px;border-color:transparent;background:transparent;text-transform:none;letter-spacing:0}

/* Five calm, legible primary destinations. */
.game-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;top:74px;padding:5px;margin-bottom:18px;border-radius:14px;background:rgba(9,13,21,.93);border-color:rgba(255,255,255,.09);box-shadow:0 8px 24px rgba(0,0,0,.24);backdrop-filter:blur(16px)}
.gnav-btn{min-width:0;min-height:54px;flex-direction:row;justify-content:center;gap:9px;padding:9px 12px;border-radius:10px}
.gnav-btn .gnav-ico,.gnav-btn .gnav-ico svg{width:20px;height:20px}
.gnav-btn .gnav-lab{font-family:'Inter',sans-serif;font-size:12px;font-weight:650;letter-spacing:.01em;text-transform:none}
.gnav-btn.active{color:#17110a;background:linear-gradient(180deg,#f3c86d,#d99d31);border-color:transparent;box-shadow:none}
.gnav-btn .gnav-dot{top:7px;right:9px}.gnav-btn .gnav-dot.count{top:6px;right:8px}
.gnav-btn .utility-dot{top:auto;bottom:5px;background:#7865d8;box-shadow:none}

/* Shared title/actions across every playable destination. */
.panel-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:2px 2px 16px;padding:10px 2px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.panel-intro h2{font-size:clamp(30px,4vw,42px);line-height:.95;text-transform:none;letter-spacing:-.015em}
.panel-intro p{margin-top:5px;color:var(--muted);font-size:13px;max-width:590px}
.panel-kicker{display:block;margin-bottom:5px;color:var(--gold-bright);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.panel-actions{display:flex;gap:8px;flex-shrink:0}.btn.compact{width:auto;min-width:112px;padding:10px 15px;font-size:12px}
.section-switcher{display:flex;gap:3px;padding:3px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#090d14;flex-shrink:0}
.section-switcher button{min-height:36px;padding:7px 13px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;font-weight:650;white-space:nowrap}
.section-switcher button.active{background:#202734;color:#fff}.section-switcher button:hover{color:#fff}
.section-switcher span.show,#skillsShortcutBadge.show{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:3px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:9px}

/* Truthful Online Clubhouse: fixed identity, preserved tier, real friends, one next action. */
.online-clubhouse-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);gap:14px;padding:18px}
.clubhouse-gym{display:flex;align-items:center;gap:16px;min-width:0;padding:18px;border:1px solid rgba(212,175,55,.24);border-radius:15px;background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(8,14,24,.86))}
.clubhouse-gym-mark{display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;border:1px solid rgba(244,202,114,.45);border-radius:18px;background:#0b111c;color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:700;letter-spacing:.05em;box-shadow:inset 0 0 24px rgba(212,175,55,.08)}
.clubhouse-gym-copy{min-width:0}.clubhouse-eyebrow{display:block;margin-bottom:5px;color:var(--gold-bright);font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.clubhouse-gym-copy h3,.online-rankings-card h3{margin:0;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:25px;line-height:1.05}
.clubhouse-gym-copy p,.online-rankings-card p{margin:5px 0 0;color:var(--muted);font-family:'Inter',sans-serif;font-size:12px;line-height:1.45}
.clubhouse-cosmetic{display:inline-flex;margin-top:11px;padding:5px 8px;border:1px solid rgba(123,224,166,.25);border-radius:999px;background:rgba(123,224,166,.08);color:#9ae8bb;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.online-clubhouse-card .pvp-rank-card{justify-content:center;min-height:100%;margin:0;padding:18px}
.online-friends-card{margin-top:0}
.online-rankings-card{display:flex;align-items:center;justify-content:space-between;gap:22px}
.online-rankings-card>div{min-width:0}.online-rankings-card .btn{flex:0 0 auto;min-width:170px}
.online-history-card{margin-top:12px}

/* Fighter command center: one compact hero instead of a tall poster. */
.fighter-overview-card{padding:24px}
.tab-panel[data-panel="fighter"] .fighter-hud.centered{position:relative;display:grid !important;grid-template-columns:180px 108px minmax(0,1fr);grid-template-areas:"avatar ovr info";gap:22px;align-items:center;text-align:left}
.tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame{grid-area:avatar;width:180px;height:180px;margin:0;overflow:hidden}
.tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame img,.tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame svg{width:100%;height:100%;object-fit:cover}
.tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge{grid-area:ovr;margin:0;text-align:center;display:block}
.tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge .ov{font-family:'JetBrains Mono',monospace;font-size:52px;line-height:1}
.tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge .ol{font-family:'Inter',sans-serif;font-size:9px;letter-spacing:.13em}
.tab-panel[data-panel="fighter"] .fighter-hud.centered .hud-info{grid-area:info;width:100%;align-items:flex-start;text-align:left}
.tab-panel[data-panel="fighter"] .hud-info .fname{font-size:clamp(30px,4vw,44px);line-height:.92;letter-spacing:.01em}
.tab-panel[data-panel="fighter"] .fnick{text-align:left;margin-top:8px}.tab-panel[data-panel="fighter"] .meta-line{justify-content:flex-start;margin-top:13px}
.tab-panel[data-panel="fighter"] .hud-belts{position:absolute;left:7px;bottom:7px;z-index:3;margin:0}.hud-belt{backdrop-filter:blur(8px)}
.mini-readiness{margin-top:18px;padding:14px 0 0;gap:16px}.mini-readiness .mr-lab{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.08em}
.injury-panel{margin-top:10px}.career-prog{margin-top:12px;padding:12px 14px;box-shadow:none}
.fighter-quicklinks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.fighter-quicklinks button{position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0a0f17;color:var(--text);cursor:pointer;transition:.16s}
.fighter-quicklinks button:hover{border-color:rgba(225,168,58,.5);transform:translateY(-1px)}
.fighter-quicklinks button>span:first-child{grid-row:1/3;width:24px;height:24px;color:var(--gold-bright);font-size:20px}.fighter-quicklinks svg{width:22px;height:22px}
.fighter-quicklinks b{font-size:12px}.fighter-quicklinks small{color:var(--muted);font-size:10px}
.quick-badge{display:none;position:absolute;right:8px;top:8px}.quick-badge.show{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);font-size:9px;color:#fff}

/* Dense information becomes intentional, accessible disclosure rows. */
.compact-section{padding:0;overflow:hidden;margin-top:12px}
.compact-section + .compact-section{margin-top:9px}
.compact-section summary{position:relative;display:flex;align-items:center;gap:12px;min-height:66px;padding:13px 17px;list-style:none;cursor:pointer;user-select:none}
.compact-section summary::-webkit-details-marker{display:none}
.compact-section summary .summary-icon{width:28px;height:28px;display:grid;place-items:center;color:var(--gold-bright)}
.compact-section summary .summary-icon svg{width:21px;height:21px}
.compact-section summary>span:nth-child(2){display:flex;flex-direction:column;flex:1}.compact-section summary b{font-size:13px}.compact-section summary small{margin-top:1px;color:var(--muted);font-size:10px;font-weight:500}
.summary-arrow{color:var(--muted);font-size:18px;transition:.18s}.compact-section[open] .summary-arrow{transform:rotate(180deg)}
.compact-section[open] summary{border-bottom:1px solid rgba(255,255,255,.08)}
.details-body{padding:18px}.details-body>.section-title,.details-body>.train-head .section-title{display:none}
.fighter-secondary-action{display:none !important}
.fighter-updates .details-body>div:empty{display:none}.fighter-flavor{margin-top:10px}

/* Career hierarchy: important work first, supporting systems quieter. */
.tab-panel[data-panel="career"]>.card,.tab-panel[data-panel="pvp"]>.card,.tab-panel[data-panel="quests"]>.card,.tab-panel[data-panel="awards"]>.card{box-shadow:0 10px 26px rgba(0,0,0,.22)}
#rivalriesCard.hidden{display:none !important}
.reportcard-host:empty{display:none}

/* Forms and secondary screens now use the same comfortable density. */
input[type=text],input[type=email],input[type=password],select{font-family:'Inter',sans-serif;font-size:14px}
.btn,.btn-ghost{font-family:'Inter',sans-serif}.subscreen{max-width:980px;margin:0 auto}.subscreen-head{margin-bottom:16px}
.sh-title{font-family:'Barlow Condensed',sans-serif}

@media(max-width:760px){
  .wrap{padding:10px 12px calc(var(--mobile-game-nav-height) + var(--mobile-game-nav-content-gap) + env(safe-area-inset-bottom))}
  header.app{position:sticky;top:0;padding:7px 0 9px;margin-bottom:10px}.brand .logo{width:35px;height:35px}.brand h1{font-size:20px}.brand .tag{display:none}
  .hdr-right{gap:7px}.hdr-right .online-pill,.hdr-right .badge-rank{display:none}.rec-pill.cash{display:none}.rec-pill .rv{font-size:15px}
  .game-home-btn{margin-bottom:6px;font-size:11px}
  .game-nav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1000;grid-template-columns:repeat(5,minmax(0,1fr));min-height:calc(var(--mobile-game-nav-height) + env(safe-area-inset-bottom));margin:0;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;border-width:1px 0 0;background:rgba(8,11,17,.96);box-shadow:0 -10px 30px rgba(0,0,0,.5)}
  .gnav-btn{min-height:54px;flex-direction:column;gap:3px;padding:6px 2px}.gnav-btn .gnav-lab{font-size:10px}.gnav-btn .gnav-ico,.gnav-btn .gnav-ico svg{width:19px;height:19px}
  .panel-intro{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:12px;padding:6px 2px 12px}.panel-intro h2{font-size:32px}.panel-intro p{font-size:12px}
  .panel-actions,.section-switcher{width:100%}.panel-actions .btn,.section-switcher button{flex:1}.progress-switcher button{padding:7px 6px}
  .card{padding:16px;border-radius:14px}.section-title h2{font-size:21px}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered{grid-template-columns:112px 74px 1fr;grid-template-areas:"avatar ovr info";gap:12px}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame{width:112px;height:112px}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge .ov{font-size:36px}
  .tab-panel[data-panel="fighter"] .hud-info .fname{font-size:27px}.tab-panel[data-panel="fighter"] .fnick{font-size:12px}.tab-panel[data-panel="fighter"] .meta-line .chip:nth-of-type(n+4){display:none}
  .fighter-overview-card{padding:15px}.mini-readiness{gap:9px;font-size:11px}.mini-readiness .mr-link{width:100%;margin:0}
  .fighter-quicklinks{grid-template-columns:1fr}.fighter-quicklinks button{padding:10px 12px}
  .compact-section summary{min-height:60px;padding:11px 14px}.details-body{padding:14px}
  .cstat-grid{grid-template-columns:repeat(3,1fr)}
  .create-hero{grid-template-columns:120px 1fr;gap:14px}
  .online-clubhouse-card{grid-template-columns:1fr;padding:14px}.online-clubhouse-card .pvp-rank-card{min-height:132px}
  .online-rankings-card{align-items:stretch;flex-direction:column;gap:14px}.online-rankings-card .btn{width:100%;min-width:0}
}

@media(max-width:430px){
  .hdr-right .rec-pill{display:none}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered{grid-template-columns:100px 1fr;grid-template-areas:"avatar info";align-items:start}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered .avatar-frame{width:100px;height:100px}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge{position:absolute;left:65px;top:68px;z-index:4;display:block;width:48px;margin:0;padding:5px 4px;border:1px solid rgba(244,202,114,.35);border-radius:9px;background:rgba(7,10,16,.92);text-align:center}
  .tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge .ol{display:none}.tab-panel[data-panel="fighter"] .fighter-hud.centered .ovr-badge .ov{font-size:22px}.tab-panel[data-panel="fighter"] .hud-info .fname{font-size:24px}
  .tab-panel[data-panel="fighter"] .meta-line{gap:5px}.tab-panel[data-panel="fighter"] .meta-line .chip:nth-of-type(n+3){display:none}
  .section-switcher button{font-size:10px}.cstat-grid{grid-template-columns:repeat(2,1fr)}
  .clubhouse-gym{align-items:flex-start;gap:12px;padding:14px}.clubhouse-gym-mark{flex-basis:54px;width:54px;height:54px;border-radius:14px;font-size:21px}
  .clubhouse-gym-copy h3{font-size:22px}.clubhouse-cosmetic{white-space:normal;line-height:1.35}
}

.create-options{margin-top:18px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#0a0f17;overflow:hidden}
.create-options summary{min-height:62px;padding:12px 15px}.create-options .details-body{padding:18px;border-top:1px solid rgba(255,255,255,.08)}
.create-options .divider:first-child{display:none}

/* v304 — mobile routes must scroll naturally; fight overlay manages its own lock. */
@media(max-width:760px){
  html,body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  body{touch-action:pan-y;overscroll-behavior-y:auto}
  .wrap{min-height:100dvh;overflow:visible}
  #screen-landing:not(.hidden){position:relative;inset:auto;width:100%;min-height:100dvh;height:auto;max-height:none;overflow:visible;touch-action:pan-y}
  .landing-hero{margin:0 auto;min-height:0}
  #screen-create:not(.hidden){display:block;min-height:calc(100dvh - 64px);overflow:visible;padding-bottom:calc(28px + env(safe-area-inset-bottom));touch-action:pan-y}
  .subscreen{min-width:0}
}

/* ============================================================
   v309 — LANDING ACTIVATION EXPERIMENT
   Put the promise and action before spectacle. New players reach
   a ready fighter instead of spending their first minutes in setup.
   ============================================================ */
#screen-landing:not(.hidden){
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-inline:16px;
}
.landing-hero{width:min(100%,520px);max-width:520px;min-width:0;gap:14px}
.lh-brand{margin-top:0;gap:2px}
.lh-logo img{width:60px}
.lh-title{font-size:clamp(34px,8vw,48px)}
.lh-tag{max-width:100%;font-size:12px;line-height:1.25;letter-spacing:2px}
.lh-story{width:100%;max-width:460px;text-align:center}
.lh-story-kicker{display:block;margin-bottom:3px;font-size:10px;font-weight:800;letter-spacing:2.2px;color:#ff6969}
.lh-story h2{font-size:clamp(30px,7.5vw,43px);line-height:.98;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.7)}
.lh-story h2 em{font-style:normal;color:var(--gold-bright)}
.lh-story p{max-width:430px;margin:7px auto 0;color:#cbd2df;font-size:14px;line-height:1.4}
.lh-cta,.lh-teaser,.lh-cards{width:100%;max-width:460px;min-width:0}
.lh-cta{padding:14px 16px}
.lh-teaser{aspect-ratio:16/8.6}
.lh-trust{font-size:11px;font-weight:650;letter-spacing:.6px;color:#aeb6c4}

@media(max-width:640px){
  #screen-landing:not(.hidden){padding:14px 14px calc(28px + env(safe-area-inset-bottom))}
  .landing-hero{gap:10px}
  .lh-logo img{width:46px}
  .lh-title{font-size:34px}
  .lh-tag{font-size:10px;letter-spacing:1.55px}
  .lh-story-kicker{font-size:9px}
  .lh-story h2{font-size:30px}
  .lh-story p{font-size:12.5px;line-height:1.32}
  .lh-cta{padding:13px 14px;border-radius:13px}
  .lh-cta-main{font-size:20px}
  .lh-cta-sub{font-size:11px}
  .lh-auth{font-size:12px}
  .lh-teaser{border-radius:13px}
  .lh-cards{gap:6px}
  .lh-card{min-width:0;padding:8px 3px}
  .lh-card b{font-size:11.5px;letter-spacing:.3px}
  .lh-trust{font-size:10px}
}

/* ============================================================
   v311 — ONE FIGHT, ONE CONSEQUENCE
   Three readable decisions and an explanation before reward noise.
   ============================================================ */
.pf-opts,.cs-corner .cs-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.report-causes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.report-cause{padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.035)}
.report-cause>span{display:block;margin-bottom:5px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-bright)}
.report-cause p{margin:0;color:#c8d0de;font-size:11.5px;line-height:1.4}
.report-cause p b{color:#fff}
.report-cause.help{border-color:rgba(95,232,154,.28)}
.report-cause.hurt{border-color:rgba(255,116,121,.3)}
.report-cause.decisive{border-color:rgba(243,198,78,.3)}
.fight-stats-details{margin-top:13px;border-top:1px solid rgba(255,255,255,.09)}
.fight-stats-details>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:11px 2px 0;cursor:pointer;color:#aeb8c8;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;list-style:none}
.fight-stats-details>summary::-webkit-details-marker{display:none}
.fight-stats-details>summary span{color:var(--gold-bright);transition:transform .18s}
.fight-stats-details[open]>summary span{transform:rotate(180deg)}
.fight-stats-body{padding-top:12px}

@media(max-width:640px){
  .report-causes{grid-template-columns:1fr}
  .report-cause{padding:9px 10px}
  .pf-opts,.cs-corner .cs-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-opts .cs-opt,.cs-corner .cs-opt{min-width:0;padding-inline:4px}
}

/* ============================================================
   v315 — NEXT CHAPTER RETENTION SLICE
   One authored rivalry chain, opponent-linked camp, and a visible
   consequence before the next fight. No hard timer or reward chore.
   ============================================================ */
.nxc-kicker{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold-bright)}
.nxc-brief{max-width:760px;margin:0 auto 12px;padding:14px 16px;border:1px solid rgba(243,198,78,.3);border-radius:14px;background:linear-gradient(135deg,rgba(243,198,78,.1),rgba(10,16,30,.92));box-shadow:0 12px 30px rgba(0,0,0,.3)}
.nxc-brief.fresh{border-color:rgba(95,232,154,.45);background:linear-gradient(135deg,rgba(95,232,154,.11),rgba(10,16,30,.92))}
.nxc-brief h3{margin:5px 0 3px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:22px;line-height:1.05}
.nxc-brief p{margin:0;color:#cbd3e0;font-size:12.5px;line-height:1.45}
.nxc-read{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);color:#aeb8c8;font-size:12px}.nxc-read b{color:#8ff0b6}
.nxc-train-brief{padding:13px 14px;border:1px solid rgba(243,198,78,.28);border-radius:13px;background:rgba(243,198,78,.065)}
.nxc-train-brief>span{display:block;color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:1.7px}
.nxc-train-brief>b{display:block;margin:4px 0;color:#fff;font-size:14px}.nxc-train-brief p{margin:0;color:#aeb8c8;font-size:12px}
.act-card.recommended{border-color:rgba(95,232,154,.55);box-shadow:inset 0 0 20px rgba(95,232,154,.06)}
.ac-rec{margin-left:auto;padding:2px 6px;border-radius:10px;background:rgba(95,232,154,.13);color:#82edab;font-family:'Barlow Condensed',sans-serif;font-size:8px;font-weight:800;letter-spacing:1px}
.nxc-career{text-align:center;padding:6px 2px 3px}.nxc-career h3{margin:7px 0 5px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:30px}.nxc-career>p{max-width:600px;margin:0 auto 14px;color:#aeb8c8;font-size:13px;line-height:1.5}
.nxc-dots{display:flex;justify-content:center;gap:8px;margin-bottom:13px}.nxc-dots span{display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--line);border-radius:50%;color:#758197;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800}.nxc-dots span.now{border-color:var(--gold);background:rgba(243,198,78,.12);color:var(--gold-bright);box-shadow:0 0 16px rgba(243,198,78,.2)}.nxc-dots span.done{border-color:#46cf7f;background:rgba(70,207,127,.12);color:#79e9a8}
.nxc-career-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:620px;margin:0 auto 16px;text-align:left}.nxc-career-grid>div{padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.025)}.nxc-career-grid span{display:block;margin-bottom:4px;color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.nxc-career-grid b{color:#dce2ec;font-size:12px;line-height:1.35}
.nxc-result{width:min(620px,100%);margin:14px auto 5px;padding:14px;border:1px solid rgba(243,198,78,.32);border-radius:14px;background:rgba(5,10,20,.7);text-align:left}.nxc-result>.nxc-kicker{text-align:center;margin-bottom:8px}
.nxc-result-line{display:grid;grid-template-columns:54px 1fr;gap:9px;padding:8px 0;border-top:1px solid rgba(255,255,255,.07)}.nxc-result-line span{color:#99a5b8;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.nxc-result-line p{margin:0;color:#d5dbe5;font-size:12px;line-height:1.42}.nxc-result-line.rival p{color:#f0c3b0}
.nxc-next{margin-top:8px;padding:11px 12px;border-radius:11px;background:linear-gradient(135deg,rgba(243,198,78,.14),rgba(243,198,78,.045))}.nxc-next>span{display:block;color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:800;letter-spacing:1.5px}.nxc-next>b{display:block;margin-top:3px;color:#fff;font-size:13px;line-height:1.4}.nxc-next>small{display:block;margin-top:5px;color:#8ff0b6;font-size:10px}
.nxc-rematch-camp{position:relative;z-index:1;max-width:680px;margin:16px auto 0;padding:14px;border:1px solid rgba(243,198,78,.34);border-radius:14px;background:rgba(5,10,20,.82);text-align:left}
.nxc-rematch-camp>p{margin:7px 0 12px;color:#d7dde7;font-size:12px;line-height:1.45}
.nxc-camp-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nxc-camp-option{position:relative;min-height:94px;padding:18px 9px 10px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:#0d1525;color:#fff;cursor:pointer;text-align:center;transition:.16s transform,.16s border-color,.16s background}
.nxc-camp-option:hover,.nxc-camp-option:active{transform:translateY(-2px);border-color:var(--gold);background:#151e31}
.nxc-camp-option.recommended{border-color:rgba(243,198,78,.72);box-shadow:0 0 0 1px rgba(243,198,78,.18)}
.nxc-camp-rec{position:absolute;top:5px;left:0;right:0;color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:8px;font-weight:800;letter-spacing:1px}
.nxc-camp-icon{display:block;font-size:21px}.nxc-camp-option b{display:block;margin:4px 0 2px;font-family:'Barlow Condensed',sans-serif;font-size:15px}.nxc-camp-option small{display:block;color:#9eabc0;font-size:9.5px;line-height:1.3}
.nxc-camp-rule{display:block;margin-top:9px;color:#7f8ba0;font-size:9.5px;text-align:center}
.nxc-rematch-camp.ready{border-color:rgba(95,232,154,.42);background:rgba(32,99,67,.12)}
.nxc-camp-ready{display:flex;align-items:center;gap:10px;margin-top:8px}.nxc-camp-ready>span{font-size:26px}.nxc-camp-ready b,.nxc-camp-ready small{display:block}.nxc-camp-ready b{color:#fff;font-size:14px}.nxc-camp-ready small{margin-top:2px;color:#8ff0b6;font-size:10px}
.nxc-menu-strip{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.nxc-menu-strip span{display:block;color:#79e9a8;font-family:'Barlow Condensed',sans-serif;font-size:8px;font-weight:800;letter-spacing:1.4px}.nxc-menu-strip b{display:block;margin-top:2px;color:#e9edf4;font-size:11px;line-height:1.35}
@media(max-width:640px){
  .nxc-brief{margin-inline:0;padding:12px}.nxc-brief h3{font-size:19px}
  .nxc-career-grid{grid-template-columns:1fr}.nxc-career h3{font-size:25px}
  .nxc-result{padding:11px}.nxc-result-line{grid-template-columns:46px 1fr}
  .nxc-camp-options{grid-template-columns:1fr}.nxc-camp-option{min-height:70px}
}