: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:'Rajdhani',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:'Oswald',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;
    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:'Oswald';font-weight:700;font-size:24px;color:var(--gold-bright);
  }
  .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:'Oswald'}
  .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:'Rajdhani';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(7,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:'Oswald';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:'Oswald';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:20px;height:20px}
    .gnav-btn .gnav-lab{font-size:8px;letter-spacing:.2px}
  }
  /* 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:'Oswald';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:'Rajdhani';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:140px 1fr;gap:20px;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:'Oswald';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:'Oswald';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}

  /* ---------- 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:'Oswald';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:'Oswald';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:'Oswald';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:'Rajdhani'}
  .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:#080d19;border:1px solid var(--line);border-radius:7px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
  .bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-bright));border-radius:7px;transition:width .55s cubic-bezier(.2,.8,.2,1);width:0;box-shadow:0 0 10px rgba(212,175,55,.5)}
  .stat-row .sval{width:40px;text-align:right;font-family:'Oswald';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:var(--text)}
  .stat-row .lean{width:36px;text-align:right;font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:118px 1fr auto;gap:20px;align-items:center}
  .hud-info .fname{font-family:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-bright);
    margin:18px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
  .stat-cat-head:first-child{margin-top:0}
  .stat-cat-head.sm{margin:14px 0 8px;font-size:10.5px;letter-spacing:2px;color:var(--muted);border:none;padding:0}
  .stat-row .sname .smi{width:16px;height:16px;display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--gold-bright);opacity:.85}
  /* 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:'Oswald';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:'Oswald';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:'Rajdhani','Oswald',sans-serif;font-weight:600;font-size:11px;
    fill:#dac892;letter-spacing:.3px}
  .rdr-val{font-family:'Oswald',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:'Rajdhani','Oswald',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 92px;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attr-row .ar-bar{flex:1;height:6px;min-width:34px;background:#080d19;border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .attr-row .ar-bar > i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));transition:width .45s cubic-bezier(.2,.8,.2,1)}
  .attr-row .ar-val{flex:0 0 24px;text-align:right;font-family:'Oswald';font-weight:700;font-size:15px;color:var(--gold-bright);line-height:1}
  .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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:15px;color:var(--text);text-align:right;line-height:1.05}
  .inj-time small{display:block;font-family:'Rajdhani',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:'Oswald';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:'Oswald';font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-bright)}
  .fame-val{margin-left:auto;font-family:'Oswald';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)}
  .career-prog .cp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .career-prog .cp-tier{font-family:'Oswald';font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--gold-bright)}
  .career-prog .cp-lvl{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald'}
  .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:'Oswald';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:'Rajdhani','Oswald',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:'Oswald';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:'Oswald';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:'Oswald';font-size:11px;color:var(--muted);flex-shrink:0}
  #questList .q-donehead{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';font-weight:700;font-size:22px;min-width:74px;text-align:left}
  .pp-reward .ppr-lab{font-family:'Rajdhani',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:'Oswald';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:'Oswald';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:'Oswald';font-weight:600;font-size:17px;letter-spacing:.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .mj-badge{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:16.5px;letter-spacing:.4px;line-height:1.12}
  .shop-cost{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase}
  .fbar-val{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:15px;letter-spacing:.5px}
  .int-btn .int-cost{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';font-weight:700;font-size:18px;letter-spacing:.4px;color:#fff}
  .sess-head .sess-int{margin-left:auto;font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Rajdhani',sans-serif;font-weight:600;font-size:13.5px;color:var(--text)}
  .sg-row .sg-stat em{font-style:normal;font-family:'Oswald';font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-left:5px}
  .sg-amt{font-family:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:16px;flex:1}
  .rec-head .rec-cost{font-family:'Oswald';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:'Oswald';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:'Oswald';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}
  .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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9cc0ff}
  .pick-card .pk-ovr{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald'}
  .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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:1px}
  .my-fat{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-size:15px}
  .odds-labels .you-pct{color:#9cc0ff}.odds-labels .opp-pct{color:#f08185}

  /* ---------- Fight Overlay ---------- */
  .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% 35%, rgba(20,28,52,.9), rgba(3,5,11,.97));
    backdrop-filter:blur(8px);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:720px;position:relative}
  /* subtle skip — tucked into the screen corner so it never covers the HP bars */
  .fo-skip{position:fixed;bottom:15px;right:16px;z-index:40;cursor:pointer;
    background:rgba(10,15,26,.66);color:var(--muted);border:1px solid rgba(120,140,180,.22);
    border-radius:20px;font-family:'Oswald';font-size:11px;letter-spacing:2px;text-transform:uppercase;
    padding:7px 14px;opacity:.4;transition:.2s;backdrop-filter:blur(4px)}
  .fo-skip:hover{opacity:1;color:var(--text);border-color:var(--gold-dim)}

  /* live status bar (always shows the round + a broadcast "LIVE" bug) */
  .fo-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
    font-family:'Oswald';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:'Oswald';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;margin:0 auto 10px}
  .fo-entrance .ent-name{font-family:'Oswald';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:'Oswald';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:'Oswald';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:16px;margin-bottom:14px}
  .fo-fighter{display:flex;align-items:center;gap:12px}
  .fo-fighter.opp{flex-direction:row-reverse;text-align:right}
  .fo-fighter .fav{width:62px;flex-shrink:0;border-radius:12px;transition:.15s}
  .fo-fighter.hurt .fav{animation:hurt .4s}
  @keyframes hurt{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  .fo-fighter .fmeta{flex:1;min-width:0}
  .fo-fighter .fnm{font-family:'Oswald';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:'Oswald';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:4px;margin-top:6px}
  .zrow{display:flex;align-items:center;gap:7px}
  .fo-fighter.opp .zrow{flex-direction:row-reverse}
  .zlab{flex:0 0 32px;font-family:'Oswald';font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--muted)}
  .fo-fighter.opp .zlab{text-align:right}
  .zbar{flex:1;height:9px;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:5px;padding-top:6px;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:'Oswald';font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;
    padding:5px 0;margin:-2px 0 12px;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:'Oswald';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,.72);backdrop-filter:blur(2px);border:1px solid rgba(120,140,180,.22);border-radius:14px;padding:16px 18px;height:210px;overflow-y:auto;box-shadow:inset 0 4px 14px rgba(0,0,0,.55)}
  .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:'Oswald';letter-spacing:1px;font-size:14px}
  .feed .ln .big-shot{color:var(--gold-bright);font-weight:700;font-family:'Oswald';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:'Rajdhani';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:'Oswald';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:'Oswald';
    font-size:9px;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
  .fo-momentum .moend{position:absolute;top:-15px;font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-size:12px;letter-spacing:4px;color:#9a7d3a;margin-bottom:10px}
  .street-ending .se-title{font-family:'Oswald';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:'Oswald';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:'Oswald';font-size:11px;letter-spacing:3px;color:#9a7d3a}
  .street-ending .sec-mid{font-family:'Oswald';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:'Oswald';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))}
  .fo-announce .ann-name{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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 ---------- */
  #screen-menu{display:flex;justify-content:center;padding-top:18px}
  .menu-hero{width:100%;max-width:460px;text-align:center;padding:26px 0 10px;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
  .menu-emblem{width:98px;height:98px;margin:0 auto 22px;border-radius:24px;display:grid;place-items:center;font-size:46px;
    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 30px rgba(212,175,55,.22), 0 18px 44px rgba(0,0,0,.55)}
  .menu-title{font-size:56px;font-weight:700;line-height:.95;letter-spacing:1px}
  .menu-title span{color:var(--gold);font-weight:500}
  .menu-tag{font-size:13px;letter-spacing:6px;color:var(--muted);margin:10px 0 28px;text-transform:uppercase}
  .menu-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-align:left;margin-bottom:9px;font-weight:600}
  .menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}
  .save-card{display:flex;align-items:center;gap:15px;text-align:left;
    background:linear-gradient(180deg,#0c1426,#080d19);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.4)}
  .save-card .save-av{width:74px;flex-shrink:0}
  .save-card .sc-name{font-family:'Oswald';font-weight:700;font-size:23px;line-height:1}
  .save-card .sc-nick{color:var(--gold);font-style:italic;font-size:14px;margin:2px 0 9px}
  .save-card .sc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

  /* ---------- 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:'Oswald';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,#241d0a,#14110a);border-color:var(--gold-dim)}
  .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)}
  .menu-btn.primary:hover{border-color:var(--gold);box-shadow:0 14px 30px rgba(212,175,55,.22)}
  .menu-newfighter{display:block;width:100%;margin-top:16px;background:transparent;border:1px dashed var(--line);
    color:var(--muted);border-radius:12px;padding:11px;cursor:pointer;font-family:'Oswald';font-weight:600;
    letter-spacing:1px;text-transform:uppercase;font-size:13px;transition:.18s}
  .menu-newfighter:hover{border-color:var(--gold-dim);color:var(--gold-bright);background:rgba(212,175,55,.05)}

  /* ---------- Sub-screen shell (settings / records / about) ---------- */
  #screen-settings,#screen-records,#screen-about{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:'Oswald';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}

  /* ===== M13 ACCOUNT screen ===== */
  .acc-intro{font-family:'Rajdhani',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:'Rajdhani',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:'Oswald',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:'Oswald',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
  .acc-fld input{font-family:'Rajdhani',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:'Rajdhani',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:'Rajdhani',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:'Rajdhani',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:'Oswald',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:'Oswald',sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px;color:var(--gold-bright)}
  .acc-who .acc-email{font-family:'Rajdhani',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:'Oswald',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:'Rajdhani',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) */
  .online-teaser{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin-top:14px;cursor:pointer;
    padding:12px 16px;border-radius:14px;border:1px solid var(--gold-dim);text-align:center;
    background:radial-gradient(ellipse at 50% 0,rgba(212,175,55,.12),transparent 65%),linear-gradient(180deg,#141d30,#0b1120);transition:.15s}
  .online-teaser:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(212,175,55,.18)}
  .online-teaser .ot-badge{font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px;color:var(--gold-bright)}
  .online-teaser .ot-txt{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13px;color:var(--text)}
  .online-teaser .ot-soon{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--muted)}
  /* 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:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.4px;color:#ffae6a;margin-bottom:8px}
  .acc-cf-amb{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px;color:#f0c89a;line-height:1.4;margin-bottom:8px}
  .acc-cf-lead{font-family:'Rajdhani',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:'Rajdhani',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:'Oswald',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:'Oswald',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:'Oswald',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:'Rajdhani',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}
  .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:'Rajdhani',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:'Rajdhani',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:'Oswald',sans-serif;font-weight:700;font-size:17px;letter-spacing:1px;color:var(--text);margin-bottom:6px}
  .acc-off-sub{font-family:'Rajdhani',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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';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:'Oswald';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}

  /* ---------- Mode Select ---------- */
  .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
  .mode-card{position:relative;overflow:hidden;text-align:center;cursor:pointer;border-radius:16px;padding:26px 18px 22px;
    background:linear-gradient(180deg,#0d1730,#080d19);border:1px solid var(--line);transition:.2s}
  .mode-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
  .mode-card.story:hover{border-color:var(--gold)}
  .mode-card .mode-ico{font-size:46px;margin-bottom:10px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.5))}
  .mode-card .mode-name{font-family:'Oswald';font-weight:700;font-size:24px;letter-spacing:1px}
  .mode-card .mode-desc{font-size:14px;color:var(--muted);margin:8px auto 0;max-width:240px;line-height:1.4}
  .mode-card .mode-tag{display:inline-block;margin-top:14px;font-family:'Oswald';font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:5px 14px}
  .mode-card .mode-tag.ok{color:var(--green);border-color:rgba(55,196,111,.5);background:rgba(55,196,111,.08)}
  .mode-card.online .mode-ico,.mode-card.online .mode-name{transition:.2s}
  .mode-card.online.locked{cursor:not-allowed}
  .mode-card.online.locked .mode-ico,.mode-card.online.locked .mode-name,.mode-card.online.locked .mode-desc{opacity:.4;filter:grayscale(.6)}
  .mode-card.online.locked:hover{transform:none;border-color:var(--line);box-shadow:none}
  .mode-card.online.unlocked:hover{border-color:var(--blue)}
  .mode-lockbadge{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-family:'Oswald';font-size:11px;letter-spacing:1px;color:var(--gold-bright);
    background:rgba(212,175,55,.12);border:1px solid var(--gold-dim);border-radius:20px;padding:4px 12px}
  .mode-card.online.unlocked .mode-lockbadge{color:#9cc0ff;background:rgba(90,139,224,.14);border-color:#3a5a98}

  /* ---------- 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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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}
  .mode-ico .mmi{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}

  /* ---------- 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:'Oswald';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,.62);border:1px solid rgba(120,140,180,.14);border-radius:11px;padding:8px 11px}
  .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:'Oswald';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:'Oswald';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}
    .grid2{grid-template-columns:1fr}
    .create-hero{grid-template-columns:108px 1fr;gap:14px;padding:14px}
    .fighter-hud{grid-template-columns:90px 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}
    .mode-grid{grid-template-columns:1fr}
    .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 → cold locker-room steel + a warm overhead locker light */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="fighter"].active)::before{
    background:
      radial-gradient(900px 560px at 50% -200px, rgba(120,150,210,.13), transparent 60%),
      radial-gradient(680px 720px at 113% 22%, rgba(212,175,55,.08), transparent 55%),
      radial-gradient(740px 600px at -12% 92%, rgba(60,82,124,.12), transparent 55%),
      linear-gradient(180deg,#080b15,#0a0f1d);}
  /* 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 → arena: crimson spotlight, hot blood-red floor, dark crowd */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="fight"].active)::before{
    background:
      radial-gradient(1150px 560px at 50% -240px, rgba(255,92,74,.22), transparent 62%),
      radial-gradient(800px 540px at 50% 124%, rgba(150,26,30,.22), transparent 60%),
      radial-gradient(900px 520px at 50% 44%, rgba(212,175,55,.05), transparent 55%),
      linear-gradient(180deg,#0a0608,#09080f);}
  /* CAREER / MAP → grand exotic vista: sky above, golden horizon below */
  body:has(#screen-game:not(.hidden) .tab-panel[data-panel="career"].active)::before{
    background:
      radial-gradient(1150px 600px at 50% -220px, rgba(90,139,224,.14), transparent 60%),
      radial-gradient(940px 440px at 50% 126%, rgba(212,175,55,.12), transparent 60%),
      radial-gradient(720px 600px at 102% 26%, rgba(126,92,206,.08), transparent 55%),
      linear-gradient(180deg,#070a14,#0a0f1f);}
  /* 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);}
  /* RECORDS → champion gold & glory */
  body:has(#screen-records:not(.hidden))::before{
    background:
      radial-gradient(1050px 640px at 50% -180px, rgba(212,175,55,.24), transparent 60%),
      radial-gradient(820px 520px at 50% 122%, rgba(212,175,55,.13), transparent 60%),
      radial-gradient(760px 600px at 102% 18%, rgba(247,221,136,.09), transparent 55%),
      linear-gradient(180deg,#0c0a06,#0a0c16);}
  /* MAIN MENU → cinematic title: gold core, red & steel corners */
  body:has(#screen-menu:not(.hidden))::before{
    background:
      radial-gradient(1150px 660px at 50% -200px, rgba(212,175,55,.17), transparent 60%),
      radial-gradient(820px 560px at 12% 112%, rgba(150,30,34,.15), transparent 58%),
      radial-gradient(820px 560px at 92% 104%, rgba(60,82,142,.13), transparent 58%),
      linear-gradient(180deg,#06070e,#090a14);}

  /* ---- 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:'Oswald';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:'Oswald'}
  .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:'Oswald';font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-right:2px}
  .sk-bonus{font-family:'Oswald';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:'Oswald';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:'Oswald';font-weight:600;font-size:11.5px;letter-spacing:.4px;text-align:center;line-height:1.1}
  .sk-tab .skt-ct{font-family:'Oswald';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:'Oswald';font-weight:700;font-size:17px;letter-spacing:.8px;text-transform:uppercase}
  .sk-disc-prog{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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:33%;left:50%;z-index:10;pointer-events:none;width:185px;height:185px;
    display:grid;place-items:center;transform:translate(-50%,-50%);animation:impPop .78s cubic-bezier(.2,.85,.3,1) both}
  .impact-fx.you{left:63%}.impact-fx.opp{left:37%}
  .impact-fx.lvl4{width:235px;height:235px}
  .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:'Oswald';font-weight:700;font-size:42px;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:50px}
  .impact-fx.lvl4 .imp-word{font-size:60px;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:'Oswald';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.ko.show,.round-banner.sub.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{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}
    .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{width:220px;height:220px}
  }

  /* impact-word colour + size by MOVE TYPE (every style gets its own callouts) */
  .impact-fx.lvl1{width:122px;height:122px}
  .impact-fx.lvl1 .imp-word{font-size:27px}
  .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-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:'Oswald';font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--text)}
  .ach-sum-count{font-family:'Oswald';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:'Rajdhani',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:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';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)}
  .ach-body{flex:1;min-width:0}
  .ach-top{display:flex;align-items:baseline;gap:8px}
  .ach-name{font-family:'Oswald';font-weight:600;font-size:16px;letter-spacing:.4px}
  .ach-card.unlocked .ach-name{color:#fff}
  .ach-rarity{margin-left:auto;font-family:'Oswald';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:'Rajdhani',sans-serif;font-size:12.5px;color:#d9c79a}
  .ach-reward .ach-rw-lab{font-family:'Oswald';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:'Oswald';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:'Oswald';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:'Oswald';font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--rc)}
  .ach-pop-name{font-family:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:10px;letter-spacing:1.5px;padding:2px 10px;border-radius:20px}
  .ra-vs{font-family:'Oswald';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:'Oswald';font-weight:700;font-size:30px;line-height:1;color:#fff;letter-spacing:.5px}
  .cstat-lab{font-family:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';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:'Oswald';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:'Rajdhani',sans-serif;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fh-opp{font-family:'Oswald';font-weight:600;font-size:15px;color:var(--text);letter-spacing:.3px}
  .fh-method{flex-shrink:0;font-family:'Oswald';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:'Oswald';font-weight:600;
    font-size:7.5px;letter-spacing:1px;text-transform:uppercase;color:var(--rc);opacity:.9}

  /* ===== Avatar selection (Create Fighter) — pick from 12 generated looks ===== */
  .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)} }
  .av-opt{position:relative;aspect-ratio:1/1;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{display:block;width:100%;height:100%}
  .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:'Oswald';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:'Oswald';font-weight:600;font-size:14px;letter-spacing:.6px}

  /* ============================================================
     BETWEEN-ROUND CORNER STRATEGY overlay (inside the fight overlay)
     ============================================================ */
  .corner-overlay{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:14px;
    background:rgba(4,7,13,.86);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s 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:'Oswald';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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Rajdhani',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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';font-weight:700;font-size:16px;color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-opp-sub{font-family:'Rajdhani',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:'Oswald';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:'Rajdhani',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:'Rajdhani',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:'Rajdhani',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{max-height:94vh;overflow-y:auto;padding:12px 11px 13px}
  .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:'Oswald',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:'Oswald',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:'Oswald',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:'Rajdhani',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:'Rajdhani',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:'Rajdhani',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:'Oswald';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:'Oswald';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:'Rajdhani',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:'Oswald';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:'Oswald';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:'Oswald';font-weight:700;font-size:18px;color:var(--gold-bright);min-width:40px}
  .lu-rlab{font-family:'Rajdhani',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)}

  /* equipped identity bits on My Fighter */
  .hud-title{font-family:'Oswald',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:'Oswald',sans-serif;font-weight:700;font-size:16px;letter-spacing:.5px;color:#fff;text-transform:uppercase}
  .czb-s{font-family:'Rajdhani',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:'Oswald',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:'Oswald',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:'Oswald',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:'Rajdhani',sans-serif}
  .cz-pv-badges{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .cz-none{font-family:'Rajdhani',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:'Oswald',sans-serif;font-weight:700;font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:#fff}
  .cz-cur{margin-left:auto;font-family:'Rajdhani',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:'Rajdhani',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:'Oswald',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:'Rajdhani',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:'Rajdhani',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:'Oswald',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:'Oswald',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:'Oswald',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:'Oswald',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:'Oswald',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:'Oswald',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:'Oswald',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:'Oswald',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:'Oswald',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:'Rajdhani',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:'Oswald',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:'Oswald',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:'Oswald',sans-serif;font-weight:700;font-size:23px;color:#fff;letter-spacing:.4px;line-height:1.1}
  .si-nick{font-family:'Oswald',sans-serif;font-style:italic;font-weight:600;font-size:15px;color:var(--gold);margin-top:2px}
  .si-meta{font-family:'Rajdhani',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:'Rajdhani',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:'Rajdhani',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:'Oswald',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:'Oswald',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:'Oswald',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:'Rajdhani',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:'Rajdhani',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}
  .dbl-champ-banner{display:inline-block;margin:0 auto 8px;padding:6px 18px;border-radius:30px;
    font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:#1a1305;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 26px rgba(247,221,136,.6);
    animation:ctxPulse 1.6s ease-in-out infinite}

  /* move-up offer screen — two clear actions (reuses .colo-unlock celebration look) */
  .mu-actions{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto}
  .mu-actions .btn{width:100%}

  /* career-tab move-up card (persistent once you hold the belt) */
  .career-moveup{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:13px 16px;border-radius:14px;
    border:1px solid var(--gold);background:radial-gradient(ellipse at 0 50%,rgba(212,175,55,.14),transparent 60%),linear-gradient(180deg,#1a2236,#0c1322);
    box-shadow:0 0 22px rgba(212,175,55,.22)}
  .career-moveup .cmu-ic{display:inline-flex;color:var(--gold-bright);flex-shrink:0}
  .career-moveup .cmu-ic svg{width:30px;height:30px}
  .career-moveup .cmu-tx{flex:1;min-width:0}
  .career-moveup .cmu-t{font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-bright)}
  .career-moveup .cmu-s{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
  .career-moveup .cmu-s b{color:var(--text)}
  .career-moveup .cmu-btn{flex-shrink:0}
  @media(max-width:560px){ .career-moveup{flex-wrap:wrap} .career-moveup .cmu-btn{width:100%} }
  /* 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:'Oswald',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:#ff8088}
  .career-advance .cmu-s{font-family:'Rajdhani',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) ===== */
  .belt-tier-group{margin-bottom:20px}
  .belt-tier-group:last-child{margin-bottom:0}
  .belt-tier-head{font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;letter-spacing:2.5px;color:var(--gold-bright);
    border-bottom:1px solid rgba(247,221,136,.25);padding-bottom:5px;margin-bottom:12px}
  .belt-tier-head.amateur{color:#9fc0ef;border-bottom-color:rgba(90,139,224,.30)}
  .belt-double{display:inline-block;font-family:'Oswald',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:1.2px;
    color:#1a1206;background:linear-gradient(90deg,#f7dd88,#d4af37);border-radius:8px;padding:5px 11px;margin-bottom:12px;box-shadow:0 0 16px rgba(247,221,136,.4)}
  .belt-double.amateur{color:#0a1018;background:linear-gradient(90deg,#dfe8f4,#9fc0ef);box-shadow:0 0 16px rgba(159,192,239,.4)}
  .belt-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
  .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:'Oswald',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:'Rajdhani',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:'Oswald',sans-serif;font-weight:700;font-size:17px;letter-spacing:1.5px;color:var(--text);margin-bottom:4px}
  .belt-empty .be-sub{font-family:'Rajdhani',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:'Rajdhani',sans-serif;font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--muted);text-align:center}

  /* ===== 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:'Rajdhani',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:'Oswald',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:'Rajdhani',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:'Rajdhani',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%} }