/* The Wrestletorium -- dark theme + modern layout. */
:root{
  /* Surfaces */
  --bg:#0d1117;
  --bg-elev:#161b22;
  --bg-elev2:#1f262e;
  --bg-input:#0d1117;
  --line:#30363d;
  --line-soft:#21262d;

  /* Text */
  --ink:#e6edf3;
  --ink-soft:#c9d1d9;
  --muted:#8b949e;
  --muted-soft:#6e7681;

  /* Brand + accents */
  --navy:#1f3a5f;
  --navy-dark:#162a45;
  --gold:#d4af37;
  --red:#f85149;
  --red-dark:#da3633;
  --green:#56d364;
  --blue:#58a6ff;

  /* Legacy aliases used across the codebase */
  --card:var(--bg-elev);
  --accent:var(--gold);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(212,175,55,0.06), transparent 40%),
    radial-gradient(circle at 100% 80%, rgba(88,166,255,0.05), transparent 50%);
  color:var(--ink);
  line-height:1.55;font-size:15px;min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:#ffd75e;text-decoration:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ------ Header ----------------------------------------------------------- */

.site-header{
  background:linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  min-height:64px;gap:18px;position:relative}
.brand{color:#fff;font-weight:900;font-size:21px;letter-spacing:1.5px;
  text-decoration:none;display:flex;align-items:center;gap:2px;flex-shrink:0}
.brand span{color:var(--gold)}
.brand:hover{color:#fff}

/* Primary nav (desktop) */
.primary-nav{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.nav-link{color:var(--muted);font-weight:600;font-size:14px;letter-spacing:.3px;
  padding:9px 12px;border-radius:6px;background:transparent;border:none;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;
  gap:5px;text-decoration:none;transition:all 0.15s;white-space:nowrap}
.nav-link:hover{color:var(--ink);background:var(--bg-elev);text-decoration:none}
.nav-link .caret{font-size:9px;opacity:0.7;transform:translateY(1px)}

/* Dropdown shells */
.nav-dropdown{position:relative}
.nav-dropdown .dropdown-menu{
  position:absolute;top:100%;left:0;min-width:240px;background:var(--bg-elev);
  border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:0;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  display:none;flex-direction:column;gap:2px;z-index:100;max-height:480px;
  overflow-y:auto
}
/* Invisible "bridge" above the menu so the cursor never crosses a dead zone
   between the toggle and the menu. Keeps hover state alive while you reach
   for an item. */
.nav-dropdown .dropdown-menu::before{
  content:"";position:absolute;top:-12px;left:0;right:0;height:12px;
  background:transparent;pointer-events:auto
}
/* JS controls open/close via .is-open so hover-intent (with close delay)
   wins. We keep :hover only for the styled-button highlight, not for opening. */
.nav-dropdown.is-open .dropdown-menu{display:flex}
.nav-dropdown.is-open > .nav-toggle,
.nav-dropdown:hover > .nav-toggle{color:var(--ink);background:var(--bg-elev)}
.dropdown-menu a, .dropdown-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  color:var(--ink-soft);font-size:14px;font-weight:500;padding:8px 12px;
  border-radius:5px;text-decoration:none;background:transparent;border:none;
  cursor:pointer;font-family:inherit;width:100%;text-align:left
}
.dropdown-menu a:hover, .dropdown-menu button:hover{
  background:var(--bg-elev2);color:var(--gold);text-decoration:none
}
.dropdown-menu-right{right:0;left:auto}
.dropdown-menu-wide{min-width:340px}
.dropdown-section{padding:4px 0;border-bottom:1px solid var(--line-soft)}
.dropdown-section:last-of-type{border-bottom:none}
.dropdown-section-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);font-weight:800;padding:8px 12px 4px}
.dropdown-meta{font-size:11px;color:var(--muted);font-weight:600}
.dropdown-empty{color:var(--muted);font-style:italic;padding:8px 12px;display:block}
.dropdown-divider{height:1px;background:var(--line-soft);margin:6px 0}
.dropdown-footer{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft)}
.dropdown-footer-link{color:var(--gold) !important;font-weight:700 !important;
  justify-content:center !important}
.dropdown-logout-form{display:block;width:100%}
.dropdown-logout-form button{color:var(--red);width:100%}
.dropdown-logout-form button:hover{color:#ff8b86;background:rgba(248,81,73,0.1)}

/* Account button styling */
.nav-account{margin-left:6px}
.account-btn{background:var(--bg-elev);border:1px solid var(--line);padding:8px 14px}
.account-btn:hover{border-color:var(--gold);background:var(--bg-elev2)}
.account-name{color:var(--gold);font-weight:700;max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Sign-up / log-in pills (logged-out) */
.btn-nav{background:transparent;color:var(--ink) !important;padding:8px 14px;
  border-radius:6px;font-weight:700;font-size:14px;border:1px solid var(--line);
  text-decoration:none;transition:all 0.15s;white-space:nowrap}
.btn-nav:hover{border-color:var(--gold);color:var(--gold) !important;text-decoration:none}
.btn-nav-primary{background:var(--gold);color:#0a0e14 !important;border-color:var(--gold)}
.btn-nav-primary:hover{background:#ffd75e;color:#0a0e14 !important;border-color:#ffd75e}

/* Hamburger (hidden on desktop) */
.hamburger{display:none;background:transparent;border:none;cursor:pointer;
  padding:10px;width:44px;height:44px;flex-direction:column;justify-content:center;
  align-items:center;gap:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);
  border-radius:1px;transition:all 0.2s}
.hamburger.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity:0}
.hamburger.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width: 880px){
  .hamburger{display:flex}
  .primary-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg-elev);border:1px solid var(--line);
    border-top:none;border-radius:0 0 10px 10px;padding:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);max-height:80vh;overflow-y:auto
  }
  .primary-nav.is-open{display:flex}
  .nav-link{padding:11px 14px;justify-content:space-between;width:100%}
  .nav-dropdown{width:100%}
  .nav-dropdown .dropdown-menu{
    position:static;display:none;box-shadow:none;border:none;background:transparent;
    padding:0 0 4px 16px;margin:0;max-height:none
  }
  .nav-dropdown.is-open .dropdown-menu{display:flex}
  .nav-dropdown:hover .dropdown-menu{display:none}
  .nav-dropdown.is-open .dropdown-menu{display:flex}
  .dropdown-menu-right{right:auto;left:auto}
  .dropdown-menu-wide{min-width:0}
  .btn-nav{width:100%;text-align:center;margin-top:6px}
  .nav-account{margin:6px 0 0;width:100%}
  .account-btn{width:100%;justify-content:space-between}
  .account-name{max-width:none}
}

/* ------ Layout ----------------------------------------------------------- */

main.wrap{padding-top:30px;padding-bottom:60px}
.site-footer{background:#070a0f;color:var(--muted-soft);font-size:13px;
  padding:24px 0;text-align:center;border-top:1px solid var(--line-soft);
  margin-top:50px}

h1{font-size:32px;font-weight:800;letter-spacing:-0.2px;margin-bottom:8px;
  color:var(--ink)}
h2{font-size:22px;font-weight:700;color:var(--ink);margin:32px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
h3{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--ink)}
p{margin-bottom:10px}
.lead{color:var(--muted);font-size:16px;margin-bottom:20px;line-height:1.6}
.muted{color:var(--muted)}

/* ------ Cards ------------------------------------------------------------ */

.card{background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  padding:20px 22px;margin-bottom:18px;
  box-shadow:0 1px 0 rgba(255,255,255,0.02) inset, 0 2px 6px rgba(0,0,0,.3)}
.card-row{display:flex;gap:18px;flex-wrap:wrap}
/* Cards inside .card-row keep a sensible size when the row is underfilled.
   flex-grow:0 stops single cards from stretching to fill the row; flex-basis
   gives them a natural width that wraps into multi-up rows when there's room. */
.card-row .card{flex:0 1 320px;min-width:230px;max-width:100%}

/* ------ Hero ------------------------------------------------------------- */

.hero{background:linear-gradient(135deg, #1c2839 0%, #0d1117 100%);
  color:#fff;border-radius:12px;padding:50px 40px;margin-bottom:26px;
  border:1px solid var(--line);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;
  background:radial-gradient(circle, rgba(212,175,55,0.15), transparent 60%);
  pointer-events:none;
}
.hero h1{font-size:42px;color:#fff;letter-spacing:-0.5px}
.hero .lead{color:#c5d0df;font-size:18px;max-width:680px;position:relative}

/* ------ Buttons ---------------------------------------------------------- */

.btn{display:inline-block;background:var(--gold);color:#0a0e14 !important;
  font-weight:700;padding:11px 22px;border-radius:6px;border:none;
  font-size:14px;cursor:pointer;text-decoration:none;transition:all 0.15s;
  letter-spacing:.2px}
.btn:hover{background:#ffd75e;text-decoration:none;color:#0a0e14 !important;
  transform:translateY(-1px)}
.btn-secondary{background:var(--bg-elev2);color:var(--ink) !important;
  border:1px solid var(--line)}
.btn-secondary:hover{background:#283038;color:var(--ink) !important}
.btn-lg{padding:14px 30px;font-size:16px}
.btn[disabled]{background:#383f47;color:var(--muted) !important;cursor:not-allowed;
  transform:none}

/* ------ Forms ------------------------------------------------------------ */

.form-card{max-width:460px}
form p{margin-bottom:14px}
form label{display:block;font-weight:700;font-size:13px;margin-bottom:5px;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:6px;font:inherit;font-size:14px;background:var(--bg-input);
  color:var(--ink);transition:border-color 0.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,0.15)}
.helptext,.helptext li{color:var(--muted);font-size:12px;list-style:none;
  text-transform:none;letter-spacing:0;font-weight:400}
ul.errorlist{list-style:none;color:var(--red);font-size:13px;margin-bottom:6px}

/* ------ Messages --------------------------------------------------------- */

.msg{padding:12px 16px;border-radius:8px;margin-bottom:14px;font-weight:500;
  font-size:14px;border:1px solid transparent}
.msg-success{background:rgba(86,211,100,0.1);color:#7ee787;
  border-color:rgba(86,211,100,0.3)}
.msg-error{background:rgba(248,81,73,0.1);color:#ff8b86;
  border-color:rgba(248,81,73,0.3)}
.msg-info{background:rgba(88,166,255,0.1);color:#79c0ff;
  border-color:rgba(88,166,255,0.3)}

/* ------ Tables / stat grids --------------------------------------------- */

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.stat{background:var(--bg-elev2);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;text-align:center}
.stat .label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:700}
.stat .value{font-size:24px;font-weight:800;color:var(--ink);margin-top:4px}
.pill{display:inline-block;background:var(--bg-elev2);color:var(--ink);
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;
  border:1px solid var(--line)}
.pill-gold{background:var(--gold);color:#0a0e14;border-color:var(--gold)}
.pill-red{background:var(--red);color:#fff;border-color:var(--red)}
.pill-npc{background:var(--green);color:#0a0e14;border-color:var(--green);font-weight:800;letter-spacing:.5px}

table.data{width:100%;border-collapse:collapse;margin:10px 0;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
table.data th{background:var(--bg-elev2);color:var(--ink);text-align:left;
  padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  border-bottom:1px solid var(--line);font-weight:700}
table.data td{border-top:1px solid var(--line-soft);padding:10px 12px;
  font-size:14px;color:var(--ink-soft)}
table.data tr:first-child td{border-top:none}
table.data tr:hover td{background:var(--bg-elev2)}

/* Match log */
.match-log{background:#070a0f;color:#c9d1d9;border:1px solid var(--line);
  border-radius:8px;padding:20px 24px;font-size:14px;line-height:1.7;
  max-height:560px;overflow:auto;font-family:'JetBrains Mono','Consolas',monospace}
.match-log .round{color:var(--gold);font-weight:800;margin-top:14px;
  text-transform:uppercase;letter-spacing:1px}
.match-log .bell{color:#fff;font-weight:700;font-size:15px}
.match-log .finish{color:#fff;font-weight:800;font-size:16px;margin-top:16px;
  border-top:1px solid var(--line);padding-top:10px}
.bigwin{background:linear-gradient(135deg,var(--gold),#b8941f);
  color:#0a0e14;font-weight:800;padding:16px 20px;border-radius:10px;
  font-size:18px;margin-bottom:16px}

/* ------ Strategy form / point allocator --------------------------------- */

.strat-field{margin-bottom:16px}
.strat-field label{margin-bottom:5px}
.strat-field select{max-width:340px}
.rule-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.rule-row select{width:auto;flex:1;min-width:180px}
.rule-if,.rule-then{font-weight:700;color:var(--gold);font-size:14px}
.inline-form{display:inline}

.alloc-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.alloc-row .aname{width:110px;font-weight:700;color:var(--ink)}
.alloc-row .aval{width:46px;text-align:center;font-weight:800;font-size:18px;
  color:var(--gold)}
.alloc-row button{width:34px;height:34px;border:1px solid var(--line);
  background:var(--bg-elev2);color:var(--ink);border-radius:5px;
  font-size:18px;font-weight:800;cursor:pointer;transition:all 0.15s}
.alloc-row button:hover:not(:disabled){background:var(--gold);color:#0a0e14;
  border-color:var(--gold)}
.alloc-row button:disabled{opacity:0.4;cursor:not-allowed}
.points-left{font-size:20px;font-weight:800;color:var(--gold)}

/* ------ Attribute color pills ------------------------------------------- */

.attr-pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;
  font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#fff;
  line-height:1.6}
.attr-strength{background:#e35d4c}
.attr-agility{background:#3ba888}
.attr-technique{background:#9b6dd1}
.attr-stamina{background:#4caf50}
.attr-toughness{background:#a67c52}
.attr-charisma{background:#e0a93f}

.move-card{padding:12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-elev);display:flex;flex-direction:column;gap:4px;
  transition:all 0.15s;cursor:pointer}
.move-card:hover{border-color:var(--gold)}
.move-card.selected{border-color:var(--gold);background:rgba(212,175,55,0.05);
  box-shadow:0 0 0 2px rgba(212,175,55,0.25)}
.move-card .move-stats{font-size:12px;color:var(--muted);margin-top:2px}
.move-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}

.risk-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
  font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:#fff;
  background:var(--red);line-height:1.6;margin-left:6px}
.sub-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
  font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:#fff;
  background:var(--blue);line-height:1.6;margin-left:4px}
.illegal-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
  font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:#fff;
  background:#000;line-height:1.6;margin-left:4px;border:1px solid #444}

/* Wear tier badges */
.wear-pill{display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;
  font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:#fff;
  line-height:1.6}
.tier-fresh    { background:#3ba888 }
.tier-worn     { background:#d4a64f }
.tier-veteran  { background:#d18934 }
.tier-wornout  { background:#c25b2a }
.tier-atrisk   { background:#a52525 }

/* ------ HOME PAGE: news feed + widgets + promotions --------------------- */

.home-hero{
  background:linear-gradient(135deg, #1c1f2e 0%, #0a0e14 60%, #0d1117 100%);
  border:1px solid var(--line);border-radius:14px;padding:42px 38px;
  margin-bottom:28px;position:relative;overflow:hidden;
}
.home-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 10%, rgba(212,175,55,0.18), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(248,81,73,0.10), transparent 50%);
  pointer-events:none;
}
.home-hero h1{font-size:36px;color:#fff;letter-spacing:-0.4px;
  position:relative;margin-bottom:6px}
.home-hero .lead{color:var(--ink-soft);font-size:17px;position:relative;
  max-width:640px}
.home-hero .hero-stats{font-size:13px;color:var(--muted);position:relative;
  margin-top:10px;letter-spacing:0.2px}
.home-hero .hero-stats strong{color:var(--gold);font-weight:700}

/* Champion rotator (a styled belt-by-belt scroller) */
.champ-rotator{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 12px;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.champ-rotator::-webkit-scrollbar{height:6px}
.champ-rotator::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.champ-card{flex:0 0 320px;background:var(--bg-elev);border:1px solid var(--line);
  border-radius:10px;padding:18px;scroll-snap-align:start;
  position:relative;overflow:hidden}
.champ-card::before{content:"";position:absolute;top:0;left:0;width:4px;
  height:100%;background:linear-gradient(180deg,var(--gold),#b8941f)}
.champ-card .belt{font-size:12px;color:var(--gold);text-transform:uppercase;
  letter-spacing:.6px;font-weight:700;margin-bottom:6px}
.champ-card .holder{font-size:18px;font-weight:800;color:var(--ink);
  margin-bottom:4px}
.champ-card .meta{font-size:12px;color:var(--muted)}
.champ-card .vacant{font-style:italic;color:var(--muted)}

/* Home grid: feed + sidebar */
.home-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;
  align-items:start;margin-bottom:28px}
@media (max-width: 880px){
  .home-grid{grid-template-columns:1fr}
}

.section-title{font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);font-weight:700;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.section-title::before{content:"";width:4px;height:14px;background:var(--gold);
  border-radius:2px;display:inline-block}

/* News feed -- ESPN/CNN style */
.feed{display:flex;flex-direction:column;gap:14px}
.story{background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;transition:all 0.15s;display:block;color:inherit}
.story:hover{border-color:var(--gold);transform:translateY(-1px);
  text-decoration:none}
.story.story-major{border-left:4px solid var(--gold);padding:24px 22px}
.story.story-major .story-headline{font-size:22px;line-height:1.3}
.story-kind{display:inline-block;font-size:10px;text-transform:uppercase;
  letter-spacing:1px;color:var(--gold);font-weight:800;margin-bottom:8px}
.story-headline{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;
  line-height:1.35}
.story-body{font-size:14px;color:var(--ink-soft);margin-bottom:8px}
.story-meta{font-size:12px;color:var(--muted)}

/* Sidebar widgets */
.widget{background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin-bottom:18px}
.widget h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);font-weight:700;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.widget-list{list-style:none;display:flex;flex-direction:column;gap:8px;
  padding:0;margin:0}
.widget-list li{display:flex;align-items:center;gap:12px;font-size:14px;
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.widget-list li:last-child{border-bottom:none}
.widget-list .rank{width:24px;height:24px;background:var(--bg-elev2);
  border:1px solid var(--line);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;
  color:var(--muted);flex-shrink:0}
.widget-list .rank-1{background:var(--gold);color:#0a0e14;border-color:var(--gold)}
.widget-list .rank-2,.widget-list .rank-3{background:var(--bg-elev2);
  color:var(--ink);border-color:var(--muted)}
.widget-list .who{flex:1;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.widget-list .who a{color:var(--ink)}
.widget-list .who a:hover{color:var(--gold)}
.widget-list .what{font-size:12px;color:var(--muted)}
.widget-footnote{font-size:11px;color:var(--muted);margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line-soft);line-height:1.4;
  font-style:italic}

/* Promotion grid (bottom) */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px}
.promo-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;transition:all 0.15s}
.promo-card:hover{border-color:var(--gold)}
.promo-card h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}
.promo-card h4 a{color:var(--ink)}
.promo-card h4 a:hover{color:var(--gold)}
.promo-card .promo-meta{font-size:12px;color:var(--muted);margin-bottom:12px}
.promo-card .promo-champs{font-size:13px;color:var(--ink-soft);line-height:1.6}
.promo-card .promo-champs strong{color:var(--gold)}
.promo-card .promo-show{margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-soft)}
/* Top-3 promotions: always 3 fixed columns so a single card stays 1/3 wide
   instead of stretching to fill the row. Mobile stacks to 1 column. */
.promo-grid-top{grid-template-columns:repeat(3, minmax(0, 1fr));margin-bottom:8px}
.promo-grid-top .promo-card{border-left:3px solid var(--gold)}
@media (max-width: 880px){
  .promo-grid-top{grid-template-columns:1fr}
}

/* ------ Promotion pages ------------------------------------------------- */

/* Promotion header (used on home + submenu pages) */
.promo-header{display:flex;align-items:center;gap:22px;
  background:linear-gradient(135deg,#1a2030 0%,#0d1117 100%);
  border:1px solid var(--line);border-radius:12px;padding:24px 26px;
  margin-bottom:18px}
.promo-header-compact{padding:18px 22px;gap:18px}
.promo-header-logo{flex-shrink:0}
.promo-header-logo img{width:280px;height:280px;object-fit:contain;
  border-radius:14px;background:var(--bg-elev2);padding:10px;
  border:1px solid var(--line)}
.promo-header-compact .promo-header-logo img{width:160px;height:160px}
.promo-logo-placeholder{width:280px;height:280px;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:96px;
  background:linear-gradient(135deg,var(--bg-elev2),var(--bg-elev));
  border:1px solid var(--line);border-radius:14px;color:var(--gold)}
.promo-header-compact .promo-logo-placeholder{width:160px;height:160px;font-size:60px}
.promo-header-meta{flex:1;min-width:0}
.promo-header-tier{font-size:11px;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);font-weight:800;margin-bottom:6px}
.promo-header h1{margin-bottom:8px;font-size:32px}
.promo-header-compact h1{font-size:24px;margin-bottom:0}
.promo-header-sub{font-size:13px;color:var(--muted-soft);margin-bottom:10px}
.promo-header-sub strong{color:var(--ink-soft);font-weight:600}
.promo-header-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Promotion submenu */
.promo-submenu{display:flex;gap:2px;border-bottom:1px solid var(--line);
  margin-bottom:24px;flex-wrap:wrap}
.promo-submenu a{color:var(--muted);font-size:13px;font-weight:600;
  letter-spacing:.3px;padding:10px 14px;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:all 0.15s;text-decoration:none;white-space:nowrap}
.promo-submenu a:hover{color:var(--ink);text-decoration:none}
.promo-submenu a.active{color:var(--gold);border-bottom-color:var(--gold)}

/* Promotion home grid (two-up cards) */
.promo-home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  margin-bottom:24px}
.promo-block{min-width:0}
.promo-block-wide{grid-column:1 / -1}
@media (max-width: 880px){
  .promo-home-grid{grid-template-columns:1fr}
  .promo-header{flex-direction:column;text-align:center;align-items:center}
  .promo-header-actions{justify-content:center}
}

/* Logo on promo cards (home + all_promotions grids) */
.promo-card-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.promo-card-logo{width:88px;height:88px;object-fit:contain;border-radius:10px;
  background:var(--bg-elev2);padding:6px;border:1px solid var(--line);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:36px;color:var(--gold)}
@media (max-width: 480px){
  .promo-card-logo{width:72px;height:72px;font-size:28px}
}
.promo-card-head h4{margin:0}
.promo-card-head .promo-meta{margin:2px 0 0;font-size:11px}

/* ------ Notification bell ----------------------------------------------- */

.nav-bell{margin-left:2px}
.bell-btn{position:relative;padding:9px 12px;background:transparent;
  border:1px solid transparent}
.bell-btn:hover{background:var(--bg-elev);border-color:var(--line)}
.bell-icon{font-size:17px;line-height:1;filter:grayscale(0.2);
  transform:translateY(1px)}
.bell-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;
  padding:0 5px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  line-height:1;letter-spacing:0;border:2px solid var(--bg);box-sizing:content-box}
.nav-bell .dropdown-menu{min-width:300px}
.alert-row{display:flex !important;align-items:center;gap:10px;
  padding:10px 12px !important;justify-content:flex-start !important}
.alert-icon{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;font-size:14px;color:var(--gold);flex-shrink:0}
.alert-label{color:var(--ink-soft);font-size:14px;line-height:1.35;
  white-space:normal !important}


/* Top Active Promotions feature cards (home page) -- bigger logos + champions */
.promo-card-feature{
  display:flex;flex-direction:column;gap:14px;padding:20px;
  text-decoration:none;color:inherit;background:var(--bg-elev);
  border:1px solid var(--line);border-radius:12px;transition:all 0.15s;
  border-left:4px solid var(--gold);
}
.promo-card-feature:hover{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);text-decoration:none;color:inherit}
.promo-card-feature-head{display:flex;align-items:center;gap:16px}
.promo-card-feature-logo{width:168px;height:168px;flex-shrink:0;object-fit:contain;
  border-radius:12px;background:var(--bg-elev2);padding:8px;
  border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:64px;color:var(--gold)}
.promo-card-feature-meta{flex:1;min-width:0}
.promo-card-feature-meta h4{font-size:18px;font-weight:800;color:var(--ink);
  margin-bottom:4px;line-height:1.25}
.promo-card-feature-meta h4 a{color:inherit;text-decoration:none}
.promo-card-feature-meta h4 a:hover{color:var(--gold);text-decoration:none}
.promo-card-feature-logo-link{display:inline-block;text-decoration:none;flex-shrink:0}
.promo-card-feature-logo-link:hover{text-decoration:none}
.promo-card-feature .promo-meta{font-size:12px;margin:2px 0}
.promo-card-champs{border-top:1px solid var(--line-soft);padding-top:12px;
  display:flex;flex-direction:column;gap:6px}
.promo-card-champs-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);font-weight:800;margin-bottom:4px}
.promo-card-champ-row{display:flex;justify-content:space-between;gap:10px;
  font-size:13px;line-height:1.35}
.promo-card-belt{color:var(--ink-soft);font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-card-holder{color:var(--gold);font-weight:700;flex-shrink:0;
  max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-card-holder em{color:var(--muted);font-style:italic;font-weight:500}


/* On narrow viewports, stack the Top Active Promotions card head so the
   larger logo doesn't squeeze the meta column. */
@media (max-width: 640px){
  .promo-card-feature-head{flex-direction:column;align-items:flex-start;gap:12px}
  .promo-card-feature-logo{width:120px;height:120px;font-size:48px}
  .promo-header-logo img,
  .promo-logo-placeholder{width:200px;height:200px}
  .promo-logo-placeholder{font-size:72px}
}


/* Champion stack -- used on the promotion home page so cards flow vertically
   in their column without any horizontal scroll. */
.champ-stack{display:flex;flex-direction:column;gap:10px;padding:0}
.champ-stack .champ-card{flex:1 1 auto;width:100%;min-width:0}


/* ------ Mobile no-horizontal-scroll guard -------------------------------- */
html, body{overflow-x:hidden;max-width:100vw}

@media (max-width: 880px){
  /* Top Active Promotions feature cards: smaller logo so a single card fits */
  .promo-card-feature-logo{width:96px;height:96px;font-size:40px}
  .promo-card-feature-head{gap:12px}
  .promo-card-feature{padding:14px}
  /* Promotion home page header: keep the logo proportional to the viewport */
  .promo-header{flex-direction:column;text-align:center;padding:20px}
  .promo-header-logo img,
  .promo-logo-placeholder{width:180px;height:180px}
  .promo-logo-placeholder{font-size:72px}
  .promo-header-compact .promo-header-logo img,
  .promo-header-compact .promo-logo-placeholder{width:120px;height:120px}
  .promo-header-compact .promo-logo-placeholder{font-size:52px}
  /* Champion cards: fit the screen */
  .champ-card{flex:0 0 100% !important;max-width:100%}
  /* Cards in card-row should fit available width without stretching out */
  .card-row .card{flex:1 1 100%;max-width:100%}
  /* Tables overflow allowed inside their own container, not the page */
  table.data{display:block;overflow-x:auto;max-width:100%}
}

@media (max-width: 480px){
  .promo-card-feature-logo{width:72px;height:72px;font-size:30px}
  .promo-header-logo img,
  .promo-logo-placeholder{width:140px;height:140px}
  .promo-logo-placeholder{font-size:54px}
  /* Keep main container padding compact on very narrow screens */
  .wrap{padding:0 14px}
  h1{font-size:24px}
  .promo-header h1{font-size:22px}
}

/* ------ Like button (Milestone I) -------------------------------------- */
.like-form{margin:0}
.like-btn{display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:1px solid var(--line);border-radius:18px;
  padding:4px 10px;color:var(--muted);font-size:12px;font-weight:700;
  cursor:pointer;transition:all 0.15s;font-family:inherit;line-height:1}
.like-btn:hover{border-color:var(--red);color:var(--red);background:rgba(248,81,73,0.05)}
.like-btn.liked{background:rgba(248,81,73,0.12);border-color:var(--red);color:var(--red)}
.like-heart{font-size:13px;line-height:1}
.like-count{font-variant-numeric:tabular-nums}


/* Endless-scroll news order toggle (Milestone post-J: user news + scroll) */
.news-order-btn{padding:6px 12px;font-size:12px}
.news-order-btn.is-active{background:var(--gold) !important;color:#0a0e14 !important;border-color:var(--gold)}
.news-more-marker{display:none}


/* ------ News kind color coding (Milestone post-J: edit + colors) ------
   Auto-generated  -> green (kind-auto)
   Staff-posted    -> gold  (kind-staff)
   User-posted     -> blue  (kind-user)
   Important pin   -> red   (kind-important) -- takes precedence
*/
/* Color the kind label (the "USER-POSTED NEWS · username" line), not the
   headline. The headline stays default white for readability. */
.story.kind-auto .story-kind      { color:#3fb950; }
.story.kind-user .story-kind      { color:#58a6ff; }
.story.kind-staff .story-kind     { color:var(--gold); }
.story.kind-important .story-kind { color:var(--red); }

/* Subtle left-edge accent strip matching the kind color */
.story.kind-auto      { border-left:3px solid #3fb95044; }
.story.kind-user      { border-left:3px solid #58a6ff44; }
.story.kind-staff     { border-left:3px solid #d4a44844; }
.story.kind-important { border-left:3px solid var(--red);
  background:linear-gradient(90deg, rgba(248,81,73,0.06) 0%, transparent 30%); }

/* Major (top of feed) gets a thicker accent */
.story.story-major.kind-auto      { border-left-width:5px; }
.story.story-major.kind-user      { border-left-width:5px; }
.story.story-major.kind-staff     { border-left-width:5px; }
.story.story-major.kind-important { border-left-width:5px;
  box-shadow:0 0 0 1px rgba(248,81,73,0.18); }

/* Pinned-important banner row gets a label */
.story.story-important .story-kind::before {
  content:"PINNED \00b7 ";
  color:var(--red);
  font-weight:800;
}

/* Edit/history controls strip in story-meta */
.story-controls{display:inline-flex;flex-wrap:wrap;gap:8px;
  align-items:center;margin-left:8px;font-size:11px}
.story-controls .edit-link,
.story-controls .history-link{color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:12px;padding:2px 8px;
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  font-size:10px;line-height:1.4}
.story-controls .edit-link:hover{color:var(--gold);border-color:var(--gold)}
.story-controls .history-link:hover{color:var(--blue,#58a6ff);border-color:var(--blue,#58a6ff)}
.story-controls .inline-form{display:inline;margin:0}
.story-controls .link-btn{background:transparent;border:1px solid var(--line);
  color:var(--muted);border-radius:12px;padding:2px 8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;font-size:10px;cursor:pointer;
  font-family:inherit;line-height:1.4}
.story-controls .link-btn:hover{color:var(--red);border-color:var(--red)}

/* Edited / Important pills */
.edited-pill{display:inline-block;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  background:rgba(125,133,144,0.15);color:var(--muted);
  padding:2px 6px;border-radius:10px;border:1px solid var(--line)}
.important-pill{display:inline-block;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px;
  background:rgba(248,81,73,0.18);color:var(--red);
  padding:2px 8px;border-radius:10px;border:1px solid var(--red)}

/* Helptext used in post / edit forms */
.helptext{color:var(--muted);font-size:11px;margin-top:4px}


/* ------ All-Time Records row (Milestone post-J: home rebuild) --------- */
.records-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin:0 0 28px 0;
}
.record-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:8px;
  padding:14px;
  text-align:center;
  display:flex; flex-direction:column;
  gap:6px;
}
.record-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
}
.record-value{
  font-size:32px;
  font-weight:800;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.record-holder a{
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  font-size:14px;
}
.record-holder a:hover{ color:var(--gold); }
.record-holder.vacant{ color:var(--muted); font-style:italic }
.record-note{
  font-size:11px;
  color:var(--muted);
}
@media (max-width: 900px){
  .records-row{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
  .records-row{ grid-template-columns:1fr; }
}


/* ------ Mobile text wrapping + padding (Milestone post-J home rebuild) ----
   Stops headlines and body text from running off the right edge of small
   screens. Applies broad overflow-wrap on text-heavy elements and tightens
   padding so cards have a comfortable margin without losing usable width. */

/* Universal text-wrap defaults so a long URL or word can't widen the page */
.story-headline,
.story-body,
.story-kind,
.story-meta,
.story p,
.story h1, .story h2, .story h3, .story h4,
.promo-body,
.record-holder,
.record-note,
.record-label,
.widget-list li,
.widget h3,
.story-controls {
  overflow-wrap:anywhere;
  word-wrap:break-word;
  word-break:break-word;
}

/* Make sure flex/grid containers let their text children shrink so wrapping
   actually engages instead of forcing horizontal scroll */
.feed > .story,
.promo-card,
.promo-card-feature,
.record-card,
.champ-card,
.widget,
.card {
  min-width:0;
  max-width:100%;
}
.story,
.promo-body,
.widget,
.card,
.feed {
  min-width:0;
}

@media (max-width: 880px){
  /* Stories: tighter padding so the inner text gets more breathing room */
  .story{ padding:14px 14px }
  .story.story-major{ padding:18px 16px }
  .story.story-major .story-headline{ font-size:19px }
  .story-headline{ font-size:16px }
  .story-body{ font-size:13px }
  /* Records row: ensure each card has real margin and wraps cleanly */
  .record-card{ padding:12px 10px }
  .record-value{ font-size:26px }
  /* Featured Promos / Top Events row containers full-width */
  .feed{ gap:12px }
}

@media (max-width: 480px){
  /* Smallest screens: keep the outer page padding consistent and trim cards
     a bit more so there's never a flush-to-edge feel. */
  main.wrap{ padding-left:14px; padding-right:14px }
  .story{ padding:13px 12px }
  .story.story-major{ padding:16px 14px }
  .story.story-major .story-headline{ font-size:18px; line-height:1.3 }
  .story-headline{ font-size:15.5px }
  .story-body{ font-size:13px }
  .story-meta{ font-size:11px }
  .story-kind{ font-size:9.5px; letter-spacing:.8px }
  /* Records collapse to single column already, but tighten margins */
  .record-card{ padding:14px 12px }
  .record-value{ font-size:28px }
  /* Section titles never bleed off-screen */
  .section-title{ font-size:14px; padding-left:2px; padding-right:2px }
  /* Promo cards on the marketplace / detail pages */
  .promo-card{ padding:14px }
  .promo-card h4{ font-size:16px }
  /* Story controls strip: let buttons wrap onto their own line */
  .story-controls{ margin-left:0; margin-top:6px; width:100%;
    justify-content:flex-start }
}


/* ------ Top Forum Posts row (home page) ------------------------------- */
.forum-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin:0 0 28px 0;
}
.forum-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-left:3px solid var(--blue, #58a6ff);
  border-radius:8px;
  padding:14px;
  display:flex; flex-direction:column;
  gap:6px;
  color:inherit;
  text-decoration:none;
  transition:all 0.15s;
  min-width:0; max-width:100%;
}
.forum-card:hover{
  border-color:var(--gold);
  transform:translateY(-1px);
  text-decoration:none;
}
.forum-card-meta{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--blue, #58a6ff);
  overflow-wrap:anywhere;
}
.forum-card-title{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  overflow-wrap:anywhere;
}
.forum-card-body{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.4;
  overflow-wrap:anywhere;
}
.forum-card-footer{
  display:flex; flex-wrap:wrap; gap:10px;
  font-size:11px; color:var(--muted);
  margin-top:auto;
  font-variant-numeric:tabular-nums;
}
@media (max-width: 480px){
  .forum-row{ grid-template-columns:1fr; }
  .forum-card{ padding:12px; }
}


/* ------ Aggressive mobile-wrap fix (round 2) ----------------------------
   Some headlines and inline content were still clipping. Apply broad
   word-wrap/min-width:0 to every text-bearing element, shrink the hero
   on mobile, and constrain inline media (images, iframes) so a single
   wide element can't blow out the whole row. */

/* DO NOT apply break-word globally -- it shreds tables and tight columns
   into vertical letter towers. Wrapping is now scoped to specific text
   containers (headlines, bodies, controls) below. */

/* Inline media inside cards must never exceed its container */
.story img, .story video, .story iframe,
.forum-card img, .record-card img, .feed img,
.promo-card img, .promo-card-feature img,
.home-hero img, .widget img, .card img {
  max-width:100%; height:auto; display:inline-block;
}

/* Long URLs inside the rendered news body need to break */
.story-body a, .promo-body a {
  overflow-wrap:anywhere; word-break:break-all;
}

/* Pre/code blocks inside body content can't carry their own width */
.story-body pre, .story-body code,
.promo-body pre, .promo-body code {
  white-space:pre-wrap; word-break:break-all;
  max-width:100%; overflow-x:auto;
}

/* All containers in the home content area constrained */
main.wrap > * { max-width:100%; }

/* Mobile hero: tighter padding + headline that wraps to two lines if it must */
@media (max-width: 880px){
  .home-hero{ padding:28px 22px; border-radius:12px }
  .home-hero h1{ font-size:28px; letter-spacing:-0.2px;
                  overflow-wrap:break-word }
  .home-hero .lead{ font-size:15.5px }
  .home-hero .hero-stats{ font-size:12px; line-height:1.7 }
  .section-title{ font-size:12.5px; letter-spacing:.8px }
}

@media (max-width: 480px){
  .home-hero{ padding:22px 16px; border-radius:10px;
              margin-bottom:18px }
  .home-hero h1{ font-size:24px }
  .home-hero .lead{ font-size:14.5px }
  .home-hero .hero-stats{ font-size:11.5px }
  /* Champion cards in the rotator: don't force 320px wide, take screen */
  .champ-card{ flex:0 0 calc(100vw - 56px) !important;
                max-width:calc(100vw - 56px) }
  /* The hero stats use middots; if the line is long, let it wrap */
  .hero-stats{ white-space:normal }
  /* Top Active Promotions feature cards on tiny screens */
  .promo-card-feature{ padding:12px }
  .promo-card-feature-head{ gap:10px }
  .promo-card-feature-meta h4{ font-size:15px }
}

/* News meta line uses inline middots; force it to wrap if it gets long */
.story-meta{ white-space:normal; overflow-wrap:anywhere }
.story-meta > * { vertical-align:middle }

/* Forum card footer: same treatment */
.forum-card-footer{ white-space:normal; overflow-wrap:anywhere }


/* Final wrap belt-and-suspenders for user-authored content. NewsItem.body
   and Promo.body render with |safe, so users can paste in tables, wide
   blockquotes, headings with long unbreakable strings. Constrain everything
   inside those containers to its parent's width. */
.story-body *, .promo-body * {
  max-width:100% !important;
  overflow-wrap:break-word;
}
.story-body table, .promo-body table {
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.story-body blockquote, .promo-body blockquote {
  margin:8px 0; padding:6px 12px;
  border-left:3px solid var(--line); color:var(--ink-soft);
}


/* ------ Mobile wrap round 3 -- kill nowrap+ellipsis on mobile ----------
   Widget rows, Top Promotions champion rows, and any other place where
   we used "nowrap + ellipsis" for long content gets a full wrap on
   small screens. Truncating with ellipsis on mobile hides important
   info -- better to wrap to two lines than to lose the holder's name. */

@media (max-width: 880px){
  /* Top Wrestlers + Most Liked widget rows: wrap names, drop ellipsis */
  .widget-list .who{
    white-space:normal !important;
    text-overflow:clip !important;
    overflow:visible !important;
    overflow-wrap:break-word;
  }
  .widget-list li{ align-items:flex-start; flex-wrap:wrap }
  .widget-list .what{ width:100%; padding-left:0 }

  /* Top Active Promotions champion belts/holders: wrap to two lines */
  .promo-card-belt,
  .promo-card-holder{
    white-space:normal !important;
    text-overflow:clip !important;
    overflow:visible !important;
    max-width:none !important;
    overflow-wrap:break-word;
  }
  .promo-card-champ-row{
    flex-wrap:wrap; gap:4px 10px;
  }

  /* Champion rotator cards: allow content inside to wrap */
  .champ-card .belt,
  .champ-card .holder,
  .champ-card .meta{
    white-space:normal; overflow-wrap:break-word;
  }

  /* Nav account name no longer gets truncated mid-username */
  .account-name{
    max-width:none; white-space:normal;
    overflow:visible; text-overflow:clip;
  }

  /* Any anchor in the news widget area shouldn't carry display:inline-block
     widths that force overflow */
  .widget-list li > * { min-width:0 }
}

/* Even on desktop, never let a single unbreakable token push the page */
.feed, .home-grid, .promo-grid, .records-row, .forum-row, .champ-rotator,
.card-row, main.wrap {
  min-width:0;
}

/* Final safety net: when overflow-x:hidden is on body, any positioned child
   off to the right could still cause "ghost" cutoff because the scrollbar
   gets removed. Make sure the inner container takes the screen width. */
html, body{ width:100%; max-width:100% }
main.wrap{ width:100% }


/* ------ Mobile wrap round 4 -- fix tables and tight columns -----------
   The previous global word-break:break-word destroyed table cells by
   forcing every word onto its own column-width line. Removed the global
   rule; this section restores table layout and adds proper horizontal
   scroll for wide data tables on mobile. */

/* All data tables become horizontally scrollable on mobile rather than
   trying to cram into the viewport. */
@media (max-width: 880px){
  table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table.data, table.matches-table, .card-row table {
    display:block;
    width:max-content;
    min-width:100%;
  }
  /* Cells should keep their natural width and not break their text */
  th, td{
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    min-width:80px;
  }
  /* Show card pages especially had vertical letter columns -- restore them */
  .show-card-table th, .show-card-table td,
  .card-table th, .card-table td,
  table.card-table th, table.card-table td{
    min-width:90px;
    padding:8px 10px;
  }
}

/* Wrestler names and similar identifiers should NEVER break mid-word */
.story-headline,
.forum-card-title,
.record-holder,
.promo-card h4,
.promo-card-feature-meta h4,
.champ-card .holder,
.holder, .belt,
th, td{
  word-break:normal !important;
}

/* But still allow the headline to wrap on spaces */
.story-headline{ overflow-wrap:break-word; }
.forum-card-title{ overflow-wrap:break-word; }
.promo-card h4{ overflow-wrap:break-word; }


/* ------ Promotion staff page ----------------------------------------- */
.staff-section{ margin:18px 0 24px }
.staff-section-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold);
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  margin-bottom:12px;
}
.staff-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.staff-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:8px;
  padding:14px;
  display:flex; flex-direction:column;
  gap:4px;
  min-width:0;
}
.staff-card-promoter{
  border-left-color:var(--gold);
  background:linear-gradient(90deg, rgba(212,175,55,0.06) 0%, transparent 40%);
}
.staff-role{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
}
.staff-card-promoter .staff-role{ color:var(--gold) }
.staff-name{ font-size:16px; font-weight:700 }
.staff-name a{ color:var(--ink) }
.staff-name a:hover{ color:var(--gold) }
.staff-handle{ font-size:11px; color:var(--muted) }
.staff-bio{ font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.45 }

/* User profile page */
.user-profile-header{ margin-bottom:18px }
.user-profile-header h1{ margin-bottom:4px }
.user-handle{
  font-size:14px;
  color:var(--muted);
  font-weight:600;
  margin-left:8px;
}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
  margin-bottom:24px;
}
.profile-block{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
}
.profile-list{ list-style:none; padding:0; margin:0 }
.profile-list li{
  padding:6px 0;
  border-bottom:1px solid var(--line-soft);
}
.profile-list li:last-child{ border-bottom:none }

/* Small btn variant for the manage-staff title field */
.btn-sm{ padding:4px 10px; font-size:12px }


/* ------ Signing tables (multi-select contract + booking) -------------- */
.signing-table{ width:100%; border-collapse:collapse }
.signing-table th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding:8px 10px;
}
.signing-table th a{ color:var(--muted) }
.signing-table th a:hover{ color:var(--gold) }
.signing-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
  vertical-align:middle;
}
.signing-table tbody tr:hover{ background:var(--bg-elev2) }
.signing-table input[type=checkbox]{ transform:scale(1.2); cursor:pointer }


/* Site logo in the header brand */
.brand-logo{
  height:34px;
  width:auto;
  vertical-align:middle;
  margin-right:6px;
  object-fit:contain;
}

/* Hero background image */
.home-hero.has-bg{
  background-size:cover;
  background-position:center;
}
.home-hero.has-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13,17,23,0.5) 0%, rgba(13,17,23,0.85) 100%);
  z-index:0;
  pointer-events:none;
}
.home-hero.has-bg > *{ position:relative; z-index:1 }

/* News story publisher logo on the left.
   Standardized at 88px regardless of card size (major vs. minor) so
   every logo on the home page reads at the same scale. The kind line
   ("PINNED · LEAGUE · KIND · USER") spans full width above the logo;
   only the headline, body, and meta indent to clear the logo. The
   logo's top edge lines up with the headline. */
.story{ position:relative }
.story-pub-logo{
  position:absolute;
  left:18px;
  top:44px;
  width:88px;
  height:88px;
  border-radius:10px;
  object-fit:contain;
  background:var(--bg-elev2);
  border:1px solid var(--line);
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-weight:900;
  font-size:32px;
}
/* Only the headline/body/meta get the left-indent so the kind label
   above stays full-width. The whole card no longer needs padding-left. */
.story-with-logo .story-kind,
.story-with-logo .story-headline,
.story-with-logo .story-body,
.story-with-logo .story-meta{
  padding-left:120px;
}
.story-with-logo{ min-height:140px }
/* Major cards have heavier padding -- nudge the logo down to keep its
   top edge aligned with the headline rather than the kind chip. */
.story.story-major .story-pub-logo{ top:50px }
.story.story-major.story-with-logo{ min-height:160px }
@media (max-width: 480px){
  .story-pub-logo{
    width:64px; height:64px;
    left:12px; top:38px;
    font-size:24px;
    border-radius:8px;
  }
  .story-with-logo .story-kind,
  .story-with-logo .story-headline,
  .story-with-logo .story-body,
  .story-with-logo .story-meta{
    padding-left:88px;
  }
  .story.story-major .story-pub-logo{ top:42px }
  .story-with-logo{ min-height:110px }
}


/* ------ Dashboard tabs (Admin / Promoter / Wrestlers) ------------------ */
.dash-tabs{
  display:flex; gap:4px;
  border-bottom:1px solid var(--line);
  margin:24px 0 18px;
  flex-wrap:wrap;
}
.dash-tab{
  background:transparent;
  border:1px solid transparent;
  border-bottom:none;
  color:var(--muted);
  padding:10px 18px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.3px;
  text-transform:uppercase;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  font-family:inherit;
  margin-bottom:-1px;
}
.dash-tab:hover{ color:var(--ink); background:var(--bg-elev) }
.dash-tab.is-active{
  color:var(--gold);
  background:var(--bg-elev);
  border-color:var(--line);
  border-bottom:1px solid var(--bg-elev);
}
.dash-pane{ display:none }
.dash-pane.is-active{ display:block }


/* Header brand: when a site logo is set, hide the "THE WRESTLETORIUM"
   text on mobile only (it crowds the hamburger). Desktop keeps both. */
@media (max-width: 480px){
  .brand-has-logo .brand-text{ display:none }
  .brand-has-logo .brand-logo{ height:38px; margin-right:0 }
}


/* Brand text: keep "THE WRESTLE" white and "TORIUM" gold. The outer
   .brand-text wrapper inherits white from .brand; only the inner span
   inside .brand-text gets the gold accent. */
.brand .brand-text{ color:#fff }
.brand .brand-text span{ color:var(--gold) }


/* Story headline links: inherit the headline color, only highlight on hover */
.story-headline a{
  color:inherit;
  text-decoration:none;
}
.story-headline a:hover{ color:var(--gold) }

/* The whole card is now a <div>, not an <a>. Drop default cursor-link
   styling so the meta line stays distinct from the headline anchor. */
.story[ href ], .story{ cursor:default }
.story .story-headline a{ cursor:pointer }


/* ------ Wrestler status pills (color-coded) -------------------------- */
.pill.pill-status{
  font-weight:800;
  border:1px solid transparent;
}
.pill.pill-status-active{
  background:rgba(86,211,100,0.18);
  color:var(--green);
  border-color:var(--green);
}
.pill.pill-status-injured{
  background:rgba(212,175,55,0.18);
  color:var(--gold);
  border-color:var(--gold);
}
.pill.pill-status-retired{
  background:rgba(88,166,255,0.18);
  color:var(--blue);
  border-color:var(--blue);
}
/* Reserved colors for future statuses so they're each visually distinct */
.pill.pill-status-suspended{
  background:rgba(248,81,73,0.18);
  color:var(--red);
  border-color:var(--red);
}
.pill.pill-status-unsigned{
  background:rgba(139,148,158,0.15);
  color:var(--muted);
  border-color:var(--muted);
}


/* ------ Champion cards with league logo ----------------------------- */
.champ-card-with-logo{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.champ-card-with-logo .champ-card-body{
  flex:1;
  min-width:0;
}
.champ-card-logo{
  width:64px;
  height:64px;
  flex-shrink:0;
  object-fit:contain;
  border-radius:8px;
  background:var(--bg-elev2);
  border:1px solid var(--line);
  padding:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-weight:900;
  font-size:24px;
}
@media (max-width: 480px){
  .champ-card-logo{ width:52px; height:52px; font-size:20px }
  .champ-card-with-logo{ gap:10px }
}


/* Title-name links on champion cards: inherit the gold belt label
   color so they read as part of the chip, with a brighter hover. */
.champ-card .belt a{ color:inherit; text-decoration:none }
.champ-card .belt a:hover{ color:#ffd75e }

/* --- M6: Feuds ----------------------------------------------------------- */
.feud-list, .feud-invites { list-style: none; padding: 0; margin: 0; }
.feud-list li, .feud-invites li { padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.feud-list li:last-child, .feud-invites li:last-child { border-bottom: 0; }
.feud-title { font-weight: 600; margin-right: .5rem; }
.feud-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  margin-right: .5rem;
}
.feud-status-active   { background: #e11d4830; color: #ff6680; border:1px solid #ff668066; }
.feud-status-concluded{ background: #6b728030; color: #aab2c2; border:1px solid #aab2c266; }
.feud-status-proposed { background: #d9770630; color: #fbbf24; border:1px solid #fbbf2466; }

.feud-header { margin-bottom: 1.2rem; }
.feud-summary { font-style: italic; color: #aab2c2; max-width: 65ch; }
.feud-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
@media (max-width: 720px) { .feud-grid { grid-template-columns: 1fr; } }
.feud-sides { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.feud-side { flex: 1; min-width: 140px; }
.feud-side h3 { margin: 0 0 .35rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: #aab2c2; }
.feud-side ul { list-style: none; padding: 0; margin: 0; }
.feud-side li { padding: .2rem 0; }
.feud-vs { font-size: 1.5rem; font-weight: 800; color: #ff6680; }

.feud-list-inline { list-style: none; padding: 0; margin: .25rem 0 1rem; }
.feud-list-inline li { padding: .25rem 0; }

.feud-match-list { padding-left: 1.2rem; }
.feud-match-list li { padding: .35rem 0; }
.stat-list { list-style: none; padding: 0; }
.stat-list li { padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.stat-list li:last-child { border-bottom: 0; }

/* --- M6 Phase B: PPV pill --------------------------------------------- */
.pill-ppv {
  background: linear-gradient(135deg, #d97706, #ef4444);
  color: #0a0e14;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, .35);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  vertical-align: middle;
}
.ppv-row { border-left: 3px solid #ef4444 !important; }