:root{
    --batik:url("assets/batik.svg");
    --paper:#E7E3D6;
    --paper-2:#DAD5C4;
    --ink:#090909;
    --crimson:#D91F2A;
    --gold:#D9A62D;
    --slate:#3C3C3E;
    --dark:#000000;
    --line:rgba(9,9,9,0.16);
    --paper-fixed:#F4F4F2;
    --batik-ambient-opacity:0.05;
  }
  [data-theme="dark"]{
    --paper:#121110;
    --paper-2:#1D1B18;
    --ink:#F0EFEA;
    --slate:#A39D8E;
    --line:rgba(240,239,234,0.14);
    --batik-ambient-opacity:0.08;
  }
  [data-theme="dark"] body{ background-color:var(--paper); }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background-color:var(--paper);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    background-repeat:repeat;
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
    transition:background-color .35s ease, color .35s ease;
  }
  .display{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em;}
  .mono{font-family:'IBM Plex Mono',monospace;}

  /* ===== HEADER ===== */
  header{
    background:linear-gradient(135deg,#000000 0%,#130204 48%,#3A080D 100%);
    color:var(--paper-fixed);
    padding:28px 20px 22px;
    border-bottom:4px solid var(--crimson);
    position:relative;
  }
  header::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-4px; height:1px;
    background:repeating-linear-gradient(90deg,var(--crimson) 0 12px, transparent 12px 24px);
  }
  .masthead{
    max-width:1100px; margin:0 auto;
    display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }
  .brand-title{display:flex; align-items:center; gap:10px;}
  .header-logo{display:block; width:48px; height:48px; object-fit:contain;}
  .masthead h1{
    font-size:clamp(28px,5vw,42px);
    margin:0; font-weight:700; letter-spacing:0.03em;
  }
  [data-theme="light"] .masthead h1{color:#000000;}
  [data-theme="dark"] .masthead h1{color:var(--paper-fixed);}
  .masthead h1 span{color:var(--crimson);}
  .masthead .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:#C9C9C9; border:1px solid #353535; padding:6px 10px;
  }
  [data-theme="light"] .masthead .tag{color:#000000; border-color:rgba(0,0,0,.42);}
  [data-theme="dark"] .masthead .tag{color:#FFFFFF; border-color:rgba(255,255,255,.42);}
  .lang-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--crimson); background:transparent; border:1px solid var(--crimson);
    padding:6px 10px; cursor:pointer;
  }
  .lang-btn:hover{background:var(--crimson); color:#FFFFFF;}
  .lang-btn.active{background:var(--crimson); color:#FFFFFF;}
  .header-controls{position:absolute; top:14px; right:20px; z-index:1; display:flex; gap:8px;}

  /* ===== SEARCH BAR ===== */
  .searchbar{
    max-width:1100px; margin:18px auto 0;
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .searchbar input{
    flex:1; min-width:220px;
    background:var(--paper);
    border:2px solid var(--ink);
    padding:12px 14px;
    font-family:'Work Sans',sans-serif;
    font-size:15px;
    color:var(--ink);
  }
  .searchbar input::placeholder{color:#8b8778;}
  .searchbar input:focus{outline:none; border-color:var(--crimson);}
  .searchbar .count{
    align-self:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; color:#9A968A;
    min-width:90px;
  }
  .searchbar.home-hidden{display:none;}
  header.home-hidden{display:none;}

  /* ===== HOME ===== */
  .home-view{max-width:none; padding:0; background:var(--dark);}
  .home-stage{min-height:100svh; display:grid; place-items:center; box-sizing:border-box; padding:clamp(34px,7vw,84px) 20px; overflow:hidden; background:var(--dark); color:var(--paper-fixed);}
  .home-logo-stage,.home-question-stage,.home-cards-stage{position:sticky; top:0;}
  .home-logo-stage{z-index:1;}
  .home-question-stage{z-index:2;}
  .home-cards-stage{z-index:3;}
  .home-question-stage,.home-cards-stage{border-top:1px solid #242424;}
  .home-search-stage{position:relative; z-index:4; background:var(--dark); color:var(--paper-fixed);}
  .home-reveal{width:100%; opacity:0; transform:translateY(38px) scale(.98); filter:blur(7px); transition:opacity .72s ease,transform .72s cubic-bezier(.2,.75,.2,1),filter .72s ease;}
  .home-stage.is-visible .home-reveal{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}
  .home-logo-reveal{display:grid; place-items:center; opacity:1; transform:scale(1); filter:none; transition-duration:.9s; animation:home-logo-intro 1s cubic-bezier(.2,.75,.2,1) both;}
  @keyframes home-logo-intro{0%{opacity:0; transform:translateY(18px) scale(.92); filter:blur(8px);}65%{opacity:1;}100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}}
  .home-logo-stage.is-visible .home-logo-reveal{transform:scale(1);}
  .home-question-reveal{max-width:780px;}
  .home-cards-reveal{max-width:1000px;}
  .home-kicker{font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
  .home-question{max-width:720px; margin:12px 0 10px; font-family:'Oswald',sans-serif; font-size:clamp(42px,7vw,78px); line-height:.95; letter-spacing:.01em; text-transform:uppercase;}
  .home-intro{max-width:590px; margin:0; color:#C9C4B4; font-size:16px; line-height:1.5;}
  .home-choices{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%;}
  .home-card{min-height:146px; padding:19px; text-align:left; opacity:0; transform:translateY(22px); background:var(--paper); color:var(--ink); border:1px solid #C9C4B4; border-top:4px solid var(--gold); cursor:pointer; transition:opacity .48s ease,transform .48s ease,background .16s ease,border-color .16s ease;}
  .home-cards-stage.is-visible .home-card{opacity:1; transform:translateY(0);}
  .home-cards-stage.is-visible .home-card:nth-child(2){transition-delay:.07s;}
  .home-cards-stage.is-visible .home-card:nth-child(3){transition-delay:.14s;}
  .home-cards-stage.is-visible .home-card:nth-child(4){transition-delay:.21s;}
  .home-cards-stage.is-visible .home-card:nth-child(5){transition-delay:.28s;}
  .home-cards-stage.is-visible .home-card:nth-child(6){transition-delay:.35s;}
  .home-card:hover,.home-cards-stage.is-visible .home-card:hover{transform:translateY(-3px); background:var(--paper-2); border-color:var(--crimson);}
  .home-brand-logo{display:block; width:min(420px,86vw,52svh); height:auto; margin:0;}
  .home-card-index{display:block; font-family:'IBM Plex Mono',monospace; color:var(--crimson); font-size:10px; letter-spacing:.09em;}
  .home-card-title{display:block; margin-top:17px; font-family:'Oswald',sans-serif; font-size:22px; line-height:1; text-transform:uppercase; letter-spacing:.04em;}
  .home-card-copy{display:block; margin-top:8px; color:var(--slate); font-size:12.5px; line-height:1.35;}
  .home-scroll-cue{position:absolute; left:50%; bottom:clamp(22px,4vw,42px); z-index:5; display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 12px; border:0; background:transparent; color:var(--paper-fixed); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; animation:home-scroll-pulse 1.7s ease-in-out infinite;}
  .home-scroll-cue strong{font-size:21px; line-height:1; color:var(--gold);}
  @keyframes home-scroll-pulse{0%,100%{transform:translate(-50%,0); opacity:.62;}50%{transform:translate(-50%,9px); opacity:1;}}
  .home-view.is-leaving .home-card{opacity:0; transform:scale(.94); filter:blur(3px); pointer-events:none; transition:opacity .32s ease,transform .32s ease,filter .32s ease,border-color .32s ease,box-shadow .32s ease;}
  .home-view.is-leaving .home-card.is-selected{opacity:1; transform:scale(1.08); filter:blur(0); z-index:2; background:var(--paper-2); border-color:var(--crimson); box-shadow:0 18px 50px rgba(0,0,0,.38);}
  .home-search-section{max-width:760px; margin:0 auto; text-align:center;}
  .home-search-section h2{margin:0; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:30px;}
  .home-search-section p{margin:7px 0 17px; color:#C9C4B4; font-size:14px;}
  .home-search{display:flex; border:2px solid #706B61; background:rgba(255,255,255,.06);}
  .home-search input{width:100%; border:0; background:transparent; padding:15px 16px; font:15px 'Work Sans',sans-serif; color:var(--paper-fixed);}
  .home-search input::placeholder{color:#9A968A; opacity:1;}
  .home-search input:focus{outline:2px solid var(--crimson); outline-offset:-2px;}
  .home-search-stage .ledger-head{border-color:rgba(244,244,242,.72);}
  .home-search-stage .ledger-head .sub,.home-search-stage .rc{color:#C9C4B4;}
  .home-search-stage .row{color:var(--paper-fixed); border-color:rgba(244,244,242,.16);}
  .home-search-stage .row:hover{background:rgba(255,255,255,.07);}
  .home-return{margin-bottom:18px; padding:7px 10px; border:1px solid var(--ink); background:transparent; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer;}
  .home-return:hover{background:var(--ink); color:var(--paper);}
  @media (prefers-reduced-motion:reduce){.home-reveal,.home-card{opacity:1; transform:none; filter:none; transition:none;}.home-logo-reveal{animation:none;}.home-scroll-cue{animation:none; transform:translateX(-50%);}}

  /* ===== DIVISION TABS ===== */
  .division-nav{
    max-width:1100px; margin:16px auto 0; padding:0 20px;
    display:flex; align-items:center; gap:8px;
  }
  .division-nav.hidden{display:none;}
  nav.divisions{
    flex:1; display:flex; gap:6px; overflow-x:auto; padding-bottom:4px;
    scroll-behavior:smooth; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
    position:relative;
  }
  .nav-indicator{
    position:absolute; bottom:0; height:3px; left:0; width:0; opacity:0;
    background:var(--crimson); pointer-events:none;
  }
  nav.divisions::-webkit-scrollbar{height:4px;}
  nav.divisions button{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase; letter-spacing:0.03em;
    font-size:12.5px; font-weight:500;
    white-space:nowrap; flex:0 0 auto;
    background:transparent; border:1px solid var(--line);
    color:var(--ink); padding:9px 14px; cursor:pointer;
  }
  nav.divisions button.active{
    background:var(--ink); color:var(--paper); border-color:var(--ink);
  }
  nav.divisions button:hover:not(.active){border-color:var(--crimson); color:var(--crimson);}
  .division-scroll{
    flex:0 0 auto; width:32px; height:32px; padding:0;
    background:var(--ink); color:var(--paper); border:1px solid var(--ink);
    font-size:22px; line-height:1; cursor:pointer;
  }
  .division-scroll:hover:not(:disabled){background:var(--crimson); border-color:var(--crimson);}
  .division-scroll:disabled{opacity:.28; cursor:default;}

  main{max-width:1100px; margin:0 auto; padding:26px 20px 60px;}

  /* ===== CHAMPION CARD ===== */
  .champ-card{
    background:var(--dark); color:var(--paper-fixed);
    border:1px solid #45423A;
    padding:22px 24px;
    margin-bottom:22px;
    display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
    position:relative;
    cursor:pointer;
  }
  .champ-card::before{
    content:"CHAMPION"; position:absolute; top:-11px; left:20px;
    background:var(--gold); color:var(--dark);
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
    letter-spacing:0.14em; padding:3px 10px;
  }
  .champ-name{font-family:'Oswald',sans-serif; font-size:clamp(24px,4vw,34px); font-weight:600; letter-spacing:0.02em;}
  .champ-meta{font-family:'IBM Plex Mono',monospace; color:#C9C4B4; font-size:13px; margin-top:4px;}
  .div-limit{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#9A968A;}

  /* ===== RANKING LEDGER ===== */
  .ledger-head{
    display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:2px solid var(--ink); padding-bottom:6px; margin-bottom:2px;
  }
  .ledger-head h2{
    font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:0.1em;
    text-transform:uppercase; margin:0;
  }
  .ledger-head .sub{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#6b6a63;}

  .row{
    display:grid; grid-template-columns:48px 1fr 110px 60px;
    align-items:center; gap:10px;
    padding:11px 4px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
  }
  .row:hover{background:var(--paper-2);}
  .rk{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--crimson); font-size:14px;}
  @keyframes rk-elite-glow{0%{text-shadow:0 0 0 rgba(217,31,42,0);}30%{text-shadow:0 0 10px rgba(217,31,42,0.85);}100%{text-shadow:0 0 0 rgba(217,31,42,0);}}
  .rk-elite{animation:rk-elite-glow 1.6s ease-out .3s both;}
  .nm{font-family:'Work Sans',sans-serif; font-weight:600; font-size:15px;}
  .rc{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--slate); text-align:right;}
  .mv{font-family:'IBM Plex Mono',monospace; font-size:11px; text-align:right;}
  .mv.up{color:#3E7B4F;} .mv.down{color:var(--crimson);}

  /* ===== RECENT FIGHTS ===== */
  .recent{margin-top:30px;}
  .recent h2{
    font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:0.1em;
    text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:6px; margin-bottom:2px;
  }
  .fight-row{
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding:10px 4px; border-bottom:1px solid var(--line); font-size:14px;
  }
  .fight-row .who{font-weight:600;}
  .fight-row .how{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--crimson);}
  .fight-row .ev{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8b8778;}

  /* ===== ROSTER (unranked) ===== */
  .roster{margin-top:30px;}
  .roster h2{
    font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:0.1em;
    text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:6px; margin-bottom:10px;
  }
  .roster-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:8px 16px;
  }
  .roster-item{
    display:flex; justify-content:space-between; gap:8px;
    padding:7px 0; border-bottom:1px dashed var(--line);
    font-size:13.5px; cursor:pointer;
  }
  .roster-item .rc{font-size:12px;}
  .roster-note{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8b8778; margin-top:10px;}

  /* ===== CAREER ARCHIVE ===== */
  .archive-intro{font-size:14px; color:var(--slate); margin:0 0 18px; max-width:720px;}
  .archive-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;}
  .archive-card{
    background:var(--paper-2); border:1px solid var(--line); border-top:4px solid var(--gold);
    padding:18px; cursor:pointer;
  }
  .archive-card:hover{border-color:var(--crimson);}
  .archive-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--crimson);}
  .archive-name{font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; margin-top:4px; text-transform:uppercase;}
  .archive-record{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--slate); margin-top:2px;}
  .archive-summary{font-size:13.5px; line-height:1.45; margin:13px 0 0;}

  /* ===== NOTABLE UNRANKED ===== */
  .notable{margin-top:18px; padding:14px 16px; background:var(--paper-2); border-left:4px solid var(--gold);}
  .notable-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:10px;}
  .notable-head h3{margin:0; font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase;}
  .notable-head span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--slate);}
  .notable-list{display:flex; flex-wrap:wrap; gap:8px;}
  .notable-fighter{background:var(--paper); border:1px solid var(--line); padding:8px 10px; cursor:pointer; font-family:'Work Sans',sans-serif; text-align:left; font-size:13px; font-weight:600;}
  [data-theme="dark"] .notable-fighter{color:var(--paper-fixed);}
  .notable-fighter:hover{border-color:var(--crimson); color:var(--crimson);}
  .notable-fighter .mono{display:block; margin-top:2px; font-size:10.5px; color:var(--slate); font-weight:400;}

  /* ===== EVENT HUB ===== */
  .event-intro{font-size:14px; color:var(--slate); margin:0 0 18px; max-width:760px;}
  .event-list{display:grid; gap:14px;}
  .event-card{display:grid; grid-template-columns:100px 1fr; border:1px solid var(--line); border-top:3px solid var(--slate); background:var(--paper-2);}
  .event-date{background:var(--dark); color:var(--paper-fixed); padding:16px 12px; text-align:center; display:flex; flex-direction:column; justify-content:center;}
  .event-date .month{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase;}
  .event-date .day{font-family:'Oswald',sans-serif; font-size:36px; line-height:1; margin:3px 0;}
  .event-date .year{font-family:'IBM Plex Mono',monospace; font-size:10px; color:#C9C4B4;}
  .event-content{padding:16px 18px;}
  .event-type{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--crimson);}
  .event-title{font-family:'Oswald',sans-serif; font-size:25px; line-height:1.1; text-transform:uppercase; margin:4px 0 5px;}
  .event-meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--slate);}
  .event-bouts{margin-top:14px; border-top:1px solid var(--line);}
  .event-bout{display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center; padding:11px 0 2px;}
  .event-fighter{background:transparent; border:0; padding:0; cursor:pointer; font:600 14px 'Work Sans',sans-serif; color:var(--ink); text-align:left;}
  .event-fighter:last-child{text-align:right;}
  .event-fighter:hover{color:var(--crimson); text-decoration:underline;}
  .event-vs{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--crimson);}
  .event-bout-label{font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8b8778; margin-top:7px;}
  .event-source{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8b8778; margin:16px 0 0;}

  /* ===== FIGHTER COMPARISON ===== */
  .compare-intro{font-size:14px; color:var(--slate); margin:0 0 16px; max-width:760px;}
  .compare-selectors{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 20px;}
  .compare-selectors label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--slate); text-transform:uppercase; letter-spacing:.08em;}
  .compare-selectors select{width:100%; margin-top:6px; padding:10px; background:var(--paper); border:2px solid var(--ink); color:var(--ink); font:14px 'Work Sans',sans-serif;}
  .compare-table{border:1px solid var(--line); display:grid; grid-template-columns:116px 1fr 1fr;}
  .compare-cell{min-height:48px; padding:10px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; font-size:13.5px;}
  @keyframes compare-flash{0%{background-color:rgba(217,31,42,0.22);}100%{background-color:transparent;}}
  .compare-flash{animation:compare-flash .7s ease-out;}
  .compare-cell:nth-last-child(-n+3){border-bottom:0;}
  .compare-label{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); background:var(--paper-2);}
  .compare-head{background:var(--dark); color:var(--paper-fixed); padding:14px 12px; align-items:stretch;}
  .compare-head .compare-label{background:var(--dark); color:var(--gold);}
  .compare-fighter-name{background:var(--dark); color:var(--paper-fixed); border:0; padding:0; font:600 21px 'Oswald',sans-serif; letter-spacing:.03em; text-transform:uppercase; text-align:left; cursor:pointer;}
  .compare-fighter-name:hover{color:var(--gold);}
  .compare-fighter-name.right{text-align:right;}
  .compare-value.right{justify-content:flex-end; text-align:right;}
  .compare-section{margin-top:26px;}
  .compare-section h3{font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:6px; margin:0;}
  .compare-skill-row{display:grid; grid-template-columns:1fr 100px 1fr; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line);}
  .compare-score{font-family:'IBM Plex Mono',monospace; color:var(--crimson); font-weight:600;}
  .compare-score.right{text-align:right;}
  .compare-skill-label{text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--slate);}
  .compare-highlights{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .compare-highlight{background:var(--paper-2); border-left:3px solid var(--gold); padding:12px 14px; font-size:13px; line-height:1.45;}
  .compare-highlight ul{margin:0; padding-left:17px;}
  .compare-empty{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8b8778;}

  /* ===== UFC RULES GUIDE ===== */
  .rules-intro{font-size:14px; line-height:1.55; color:var(--slate); margin:0 0 18px; max-width:800px;}
  .rules-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
  .rules-card{background:var(--paper-2); border:1px solid var(--line); border-top:4px solid var(--crimson); padding:16px 18px;}
  .rules-card.wide{grid-column:1 / -1;}
  .rules-card h3{font-family:'Oswald',sans-serif; font-size:17px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px;}
  .rules-card ul{margin:0; padding-left:18px;}
  .rules-card li{font-size:13.5px; line-height:1.5; margin:6px 0;}
  .rules-callout{margin-top:18px; padding:13px 15px; border-left:4px solid var(--crimson); background:#F3E8E2; font-size:13px; line-height:1.5;}
  .rules-sources{margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#6b6a63;}
  .rules-sources a{color:var(--crimson);}

  /* ===== UFC HISTORY ===== */
  .history-intro{font-size:14px; line-height:1.55; color:var(--slate); margin:0 0 20px; max-width:800px;}
  .history-timeline{position:relative; margin-left:8px; padding-left:30px; border-left:2px solid var(--gold); display:grid; gap:16px;}
  .history-entry{position:relative;}
  .history-entry::before{content:""; position:absolute; left:-38px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--crimson); border:3px solid var(--paper);}
  .history-date{font-family:'IBM Plex Mono',monospace; color:var(--crimson); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px;}
  .history-card{background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--slate); padding:15px 17px;}
  .history-event{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:24px; line-height:1.05; margin:0;}
  .history-location{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#6b6a63; margin-top:5px;}
  .history-fight{margin:12px 0 7px; padding:8px 10px; border-left:3px solid var(--gold); background:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:12px;}
  .history-summary{font-size:13.5px; line-height:1.5; margin:10px 0 0;}
  .history-source{display:inline-block; margin-top:11px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--crimson);}

  /* ===== SKILL RANKINGS ===== */
  .skill-intro{font-size:14px; color:var(--slate); margin:0 0 14px;}
  .skill-controls{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px;}
  .skill-controls button{
    background:transparent; border:1px solid var(--ink); color:var(--ink); padding:7px 10px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; cursor:pointer;
  }
  .skill-controls button.active{background:var(--ink); color:var(--paper);}
  .skill-controls .skill-sort{margin-left:auto; border-color:var(--crimson); color:var(--crimson);}
  .skill-controls .skill-sort.active{background:var(--crimson); color:var(--paper-fixed);}
  .skill-results .row{grid-template-columns:48px 1fr 110px;}
  .skill-results .rank-name{display:block; font-family:'Work Sans',sans-serif; font-weight:600; font-size:15px;}
  .skill-results .rank-division{display:block; margin-top:2px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--slate);}
  .skill-score{font-family:'IBM Plex Mono',monospace; text-align:right; color:var(--crimson); font-weight:600; font-size:14px;}

  /* ===== SEARCH RESULTS VIEW ===== */
  .search-results .row{grid-template-columns:110px 1fr 110px;}

  /* ===== MODAL ===== */
  .modal-bg{
    display:none; position:fixed; inset:0; background:rgba(23,24,26,0.72);
    z-index:50; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto;
  }
  .modal-bg.open{display:flex;}
  .modal{
    background:var(--paper); max-width:560px; width:100%;
    border:2px solid var(--ink); position:relative;
  }
  .modal-top{
    background:var(--dark); color:var(--paper-fixed); padding:20px 24px;
    border-bottom:4px solid var(--gold);
  }
  .modal-top .div-label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold); letter-spacing:0.1em;}
  .modal-top h2{font-family:'Oswald',sans-serif; font-size:28px; margin:4px 0 2px; font-weight:600;}
  .modal-top .rec{font-family:'IBM Plex Mono',monospace; color:#C9C4B4; font-size:14px;}
  .modal-close{
    position:absolute; top:14px; right:16px; background:none; border:none;
    color:var(--paper-fixed); font-size:22px; cursor:pointer; line-height:1;
  }
  .modal-body{padding:20px 24px 26px;}
  .photo-lightbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.92);align-items:center;justify-content:center;flex-direction:column;padding:42px 22px 26px;cursor:zoom-out;}
  .photo-lightbox.open{display:flex;}
  .photo-lightbox img{max-width:min(92vw,720px);max-height:82vh;width:auto;height:auto;object-fit:contain;border:2px solid rgba(244,244,242,.7);box-shadow:0 18px 60px rgba(0,0,0,.55);cursor:default;}
  .photo-lightbox #photoLightboxName{margin-top:14px;color:#f4f4f2;font:600 22px 'Oswald',sans-serif;letter-spacing:.03em;}
  .photo-lightbox-close{position:absolute;right:20px;top:14px;border:0;background:none;color:#f4f4f2;font-size:38px;line-height:1;cursor:pointer;}
  .photo-lightbox-close:hover{color:var(--gold);}
  .tape{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;
    margin-bottom:18px; font-family:'IBM Plex Mono',monospace; font-size:13px;
  }
  .tape div span{display:block; color:#8b8778; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:2px;}
  .modal-body h3{
    font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
    border-bottom:1px solid var(--ink); padding-bottom:5px;
  }
  .modal-fight{
    display:flex; justify-content:space-between; gap:10px; padding:8px 0;
    border-bottom:1px dashed var(--line); font-size:13.5px;
  }
  .modal-empty{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#8b8778; padding:10px 0;}
  .fight-history-source{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8b8778; margin:-3px 0 5px;}
  .modal-fight.full-history{align-items:flex-start;}
  .fight-history-main{display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; min-width:0;}
  .fight-history-main strong{font-weight:600;}
  .fight-history-weight{display:block; width:100%; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8b8778; margin-top:3px;}
  .fight-history-meta{flex:0 0 auto; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:10.5px; line-height:1.45; color:var(--slate);}
  .fight-result{display:inline-block; min-width:29px; padding:2px 4px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; line-height:1; font-weight:600; text-align:center; color:var(--paper); background:var(--slate);}
  .fight-result.win{background:#2D6B4F;}
  .fight-result.loss{background:var(--crimson);}
  .fight-result.drawnc{background:#756b4d;}
  .career-history-action{margin:5px 0 12px; padding:10px 12px; border-left:3px solid var(--crimson); background:var(--paper-2);}
  .career-history-link{display:inline-block; color:var(--crimson); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; text-decoration:none;}
  .career-history-link:hover{text-decoration:underline;}
  .career-history-note{margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--slate);}

  .stat-row{display:flex; align-items:center; gap:10px; padding:6px 0;}
  .stat-label{width:92px; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate);}
  .stat-track{flex:1; height:9px; background:var(--paper-2); border:1px solid var(--line); position:relative;}
  .stat-fill{height:100%; background:var(--crimson);}
  .stat-num{width:22px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;}
  .stat-source{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8b8778; margin-top:8px;}
  .official-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px;}
  .official-stat{background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--slate); padding:8px; transition:background-color .3s ease, border-color .3s ease, color .3s ease;}
  .official-stat span{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);}
  .official-stat strong{display:block; font-family:'IBM Plex Mono',monospace; font-size:14px; margin-top:3px;}
  .fighter-file{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 18px;}
  .fighter-file div{background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--slate); padding:8px; transition:background-color .3s ease, border-color .3s ease, color .3s ease;}
  .fighter-file span{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);}
  .fighter-file strong{display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; margin-top:3px; font-weight:500;}
  footer{
    text-align:center; padding:22px; font-family:'IBM Plex Mono',monospace;
    font-size:11px; color:#8b8778; border-top:1px solid var(--line);
  }

  @media (max-width:600px){
    header{padding-top:62px;}
    .header-controls{top:14px; right:20px;}
    .row{grid-template-columns:34px 1fr 90px 44px; font-size:13px;}
    .add-form{grid-template-columns:1fr 1fr;}
    .division-nav{padding:0 20px;}
    .division-scroll{display:none;}
    nav.divisions button{font-size:13.5px; padding:10px 16px;}
    .skill-controls .skill-sort{margin-left:0;}
    .event-card{grid-template-columns:76px 1fr;}
    .event-date{padding:12px 8px;}
    .event-date .day{font-size:30px;}
    .event-content{padding:14px;}
    .event-title{font-size:22px;}
    .compare-selectors,.compare-highlights{grid-template-columns:1fr;}
    .compare-table{grid-template-columns:82px 1fr 1fr;}
    .compare-cell{padding:9px 8px; font-size:12px;}
    .compare-fighter-name{font-size:17px;}
    .compare-skill-row{grid-template-columns:1fr 82px 1fr; gap:6px;}
    .rules-grid{grid-template-columns:1fr;}
    .rules-card.wide{grid-column:auto;}
    .history-timeline{padding-left:23px; margin-left:6px;}
    .history-entry::before{left:-31px;}
    .history-event{font-size:21px;}
    .home-stage{padding:44px 20px;}
    .home-brand-logo{width:min(340px,90vw,52svh);}
    .home-choices{grid-template-columns:1fr 1fr; gap:8px;}
    .home-card{min-height:130px; padding:14px;}
    .home-card-title{font-size:19px; margin-top:13px;}
    .home-card-copy{font-size:11.5px;}
  }

  /* ===== BATIK AMBIENT LAYER ===== */
  @keyframes batik-drift-480{ from{background-position:0 0;} to{background-position:-480px -480px;} }
  @keyframes batik-drift-260{ from{background-position:0 0;} to{background-position:-260px -260px;} }
  @keyframes batik-drift-560{ from{background-position:0 0;} to{background-position:-560px -560px;} }
  body::before{
    content:"";
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:var(--batik);
    background-repeat:repeat;
    background-size:480px auto;
    opacity:var(--batik-ambient-opacity);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 85%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 85%);
    animation:batik-drift-480 95s linear infinite;
  }

  /* ===== TEXTURE (dark surfaces) ===== */
  header, .champ-card, .modal-top, .event-date, .home-stage{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat:repeat;
  }
  header, .champ-card, .modal-top, .home-stage, .home-view{ position:relative; z-index:0; }
  header::after, .champ-card::after, .modal-top::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:var(--batik); background-repeat:repeat; background-size:260px auto;
    opacity:0.16;
    animation:batik-drift-260 70s linear infinite;
  }
  .home-stage::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:var(--batik); background-repeat:repeat; background-size:900px auto;
    opacity:0.045;
    -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 88%);
    mask-image:radial-gradient(ellipse 65% 55% at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 88%);
    animation:batik-drift-560 110s linear infinite;
  }
  .champ-card, .modal-top{
    box-shadow:inset 0 0 70px rgba(0,0,0,0.4);
  }

  /* ===== THEME CROSSFADE (typography) ===== */
  p, li, h1, h2, h3, span, strong, .rec, .div-label, .rk, .nm, .rc, .stat-num, .stat-label{
    transition:color .3s ease;
  }

  /* ===== MONOGRAM AVATAR ===== */
  .mono-avatar{
    width:44px; height:44px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; letter-spacing:0.02em;
    border:2px solid rgba(244,244,242,0.22);
    overflow:hidden; position:relative;
  }
  .mono-avatar .avatar-flag{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;font-size:42px;line-height:1;filter:saturate(1.18);opacity:1;transform:translateY(-7px);pointer-events:none;}
  .mono-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;position:absolute;inset:0;z-index:1;background:transparent;}
  .mono-avatar .avatar-fallback{display:none;}
  .champ-id{display:flex; align-items:center; gap:16px;}
  .champ-id .mono-avatar{width:54px; height:54px; font-size:20px;}
  .modal-id{display:flex; align-items:center; gap:16px;}
  .modal-id .mono-avatar{width:58px; height:58px; font-size:22px; border-color:rgba(244,244,242,0.28); cursor:zoom-in;}
  .modal-id .mono-avatar:hover{transform:scale(1.06);}
  .modal-id-text{flex:1; min-width:0;}

  /* ===== NATIONALITY CHIP ===== */
  .flag-chip{
    display:inline-flex; align-items:center; gap:4px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
    letter-spacing:.03em; color:var(--slate);
    background:var(--paper-2); border:1px solid var(--line);
    padding:1.5px 6px; margin-left:7px; white-space:nowrap; vertical-align:middle;
    transition:background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .flag-chip .flag-glyph{font-size:11px; line-height:1;}
  .champ-card .flag-chip, .modal-top .flag-chip, .compare-head .flag-chip{
    background:rgba(244,244,242,0.08); border-color:rgba(244,244,242,0.32); color:#C9C4B4;
  }
  .notable-fighter .flag-chip{background:transparent; border-color:rgba(9,9,9,0.22);}
  .notable-fighter:hover .flag-chip{border-color:var(--dark); color:var(--dark); background:rgba(9,9,9,0.14);}
  .champ-name .flag-chip{font-size:11px; transform:translateY(-2px);}
  #modalName .flag-chip{font-size:11px; transform:translateY(-4px);}

  /* ===== MOTION LAYER (global reveal / hover / transition system) ===== */
  main{animation:view-fade-in .38s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes view-fade-in{0%{opacity:0; transform:translateY(10px);}100%{opacity:1; transform:translateY(0);}}

  /* generic stagger-reveal applied via JS to cards/rows as they render */
  .rv{opacity:0; transform:translateY(16px); filter:blur(2px);
    transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease;}
  .rv.rv-in{opacity:1; transform:translateY(0); filter:blur(0);}

  /* header + search entrance */
  header{animation:header-drop .55s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes header-drop{0%{opacity:0; transform:translateY(-14px);}100%{opacity:1; transform:translateY(0);}}
  .searchbar input{transition:border-color .22s ease, box-shadow .22s ease, transform .15s ease;}
  .searchbar input:focus{box-shadow:0 0 0 3px rgba(217,31,42,0.14); transform:translateY(-1px);}
  .count{transition:opacity .2s ease;}

  /* nav buttons + toggles: crisp micro-interactions */
  .lang-btn, nav.divisions button, .division-scroll{
    transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  }
  .lang-btn:hover, nav.divisions button:hover:not(.active){transform:translateY(-1px);}
  .lang-btn:active, nav.divisions button:active, .division-scroll:active{transform:translateY(0) scale(.96);}
  nav.divisions button{position:relative; overflow:hidden;}
  nav.divisions button.active{animation:tab-pop .28s cubic-bezier(.2,.8,.2,1);}
  @keyframes tab-pop{0%{transform:scale(.93);}60%{transform:scale(1.03);}100%{transform:scale(1);}}

  /* champion card: subtle self-clipping sheen sweep + lift on hover */
  .champ-card{
    transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
    background-image:linear-gradient(100deg, transparent 30%, rgba(255,48,52,0.22) 45%, transparent 60%);
    background-size:260% 100%; background-repeat:no-repeat; background-position:-60% 0;
    animation:champ-sheen 3.4s ease-in-out .6s infinite;
  }
  .champ-card:hover{transform:translateY(-3px); box-shadow:inset 0 0 70px rgba(0,0,0,0.4), 0 14px 30px -14px rgba(0,0,0,0.55); border-color:var(--gold);}
  @keyframes champ-sheen{0%,55%{background-position:-60% 0;}100%{background-position:160% 0;}}

  /* row / roster-item / archive-card / event-card / history-card / rules-card / notable-fighter hover lift */
  .row, .roster-item, .archive-card, .event-card, .history-card, .rules-card, .notable-fighter, .home-card{
    transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .18s ease, background .18s ease, color .3s ease;
  }
  .row:hover{transform:translateX(3px);}
  .roster-item:hover{transform:translateX(3px); border-color:var(--crimson);}
  .archive-card:hover, .event-card:hover, .history-card:hover, .rules-card:hover{
    transform:translateY(-4px); box-shadow:0 12px 24px -16px rgba(9,9,9,0.35);
  }
  .notable-fighter:hover{transform:translateY(-2px); background:var(--gold); border-color:var(--gold); color:var(--dark);}
  .home-card:hover{transform:translateY(-4px) !important; box-shadow:0 14px 26px -16px rgba(9,9,9,0.3); border-color:var(--crimson);}

  /* stat bars: animate width from 0 to target once rendered */
  .stat-fill{width:0 !important; transition:width 1s cubic-bezier(.2,.8,.2,1);}
  .stat-fill.filled{width:var(--target-w) !important;}

  /* modal: scale + fade + backdrop blur */
  .modal-bg{transition:opacity .26s ease, backdrop-filter .26s ease; opacity:0; backdrop-filter:blur(0px);}
  .modal-bg.open{opacity:1; backdrop-filter:blur(3px);}
  .modal-bg.closing{opacity:0 !important; backdrop-filter:blur(0px) !important;}
  .modal{transform:translateY(24px) scale(.97); opacity:0; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .26s ease, background-color .3s ease, color .3s ease;}
  .modal-bg.open .modal{transform:translateY(0) scale(1); opacity:1;}
  .modal-bg.closing .modal{transform:translateY(16px) scale(.97) !important; opacity:0 !important;}
  .modal-close{transition:transform .18s ease, background .18s ease, color .18s ease;}
  .modal-close:hover{transform:rotate(90deg) scale(1.1);}
  .modal-body .stat-row, .modal-body .fight-row, .modal-body .official-stat{
    opacity:0; transform:translateX(-8px); animation:modal-row-in .4s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes modal-row-in{to{opacity:1; transform:translateX(0);}}

  /* rank movement arrows: gentle pulse */
  .skill-sort{transition:background .18s ease, color .18s ease, transform .12s ease;}
  .skill-sort:hover{transform:translateY(-1px);}
  .mv.up{animation:mv-up-pulse 1.6s ease-in-out infinite;}
  .mv.down{animation:mv-down-pulse 1.6s ease-in-out infinite;}
  @keyframes mv-up-pulse{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
  @keyframes mv-down-pulse{0%,100%{transform:translateY(0);}50%{transform:translateY(2px);}}

  /* scrollbar polish */
  ::-webkit-scrollbar{width:9px; height:6px;}
  ::-webkit-scrollbar-thumb{background:#C9C4B4; border-radius:0;}
  ::-webkit-scrollbar-thumb:hover{background:var(--crimson);}

  @media (prefers-reduced-motion:reduce){
    main, header, .champ-card::after, .mv.up, .mv.down, .rv, body::before, header::after, .modal-top::after, .home-stage::after, .home-view::after{animation:none !important;}
    .rv{opacity:1 !important; transform:none !important; filter:none !important;}
    .stat-fill{transition:none !important;}
    .modal-bg, .modal, .lang-btn, nav.divisions button, .row, .roster-item, .archive-card, .event-card, .history-card, .rules-card, .notable-fighter, .home-card, .champ-card{transition:none !important;}
  }