/*
 * MadWars game shell v2.
 * Loaded after the legacy bundles so every game hub has one predictable
 * header, hero, local navigation and overview rhythm.
 */
body[data-game] {
  --game-panel: #0b1012;
  --game-panel-raised: #111719;
  --game-line: rgba(155,174,180,.2);
  --game-text: #f1eee7;
  --game-muted: #9aa5a8;
}

/* A laptop still gets the useful global navigation. Search moves into the
   drawer until there is enough room for both navigation and the search box. */
@media (min-width:1201px) and (max-width:1800px) {
  body[data-game] .topbar .topnav { display:flex!important; }
  body[data-game] .topbar .player-search { display:none!important; }
  body[data-game] .topbar .nav-toggle { display:none!important; }
  body[data-game] .topbar { gap:10px!important; }
  body[data-game] .topbar .topnav>a,
  body[data-game] .topbar .topnav-dd-trigger {
    padding-inline:8px!important;
    font-size:12px!important;
  }
}

body[data-game] .game-hub-hero {
  min-height:350px;
  border-color:var(--game-line);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 20px 54px rgba(0,0,0,.26);
}
body[data-game] .game-hub-hero::after {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 36%,transparent 76%,color-mix(in srgb,var(--accent) 52%,transparent));
  content:"";
  opacity:.9;
}
body[data-game] .cs-hub-hero-inner { padding:38px 40px; }
body[data-game] .cs-hub-identity>p { color:#c4c2bc; }
body[data-game] .cs-hub-proof { gap:8px; }
body[data-game] .cs-hub-proof>span {
  min-height:30px;
  box-sizing:border-box;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(3,6,7,.62);
  backdrop-filter:blur(8px);
}
body[data-game] .cs-hub-primary {
  display:inline-flex;
  min-height:46px;
  align-items:center;
  gap:16px;
  padding:0 18px;
  border:1px solid var(--accent);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
body[data-game] .cs-hub-primary span { font-size:16px; }
body[data-game] .cs-hub-primary.is-idle {
  color:#f2eee7;
  background:rgba(8,11,12,.82);
  box-shadow:none;
}
body[data-game] .cs-hub-primary:hover,
body[data-game] .cs-hub-primary:focus-visible {
  outline:0;
  filter:brightness(1.1);
  transform:translateY(-2px);
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 25%,transparent);
}

/* Primary game tasks stay on one stable strip. Secondary archive tools live
   in the illustrated resource cards below the live/match summary. */
body[data-game] main.game-shell>.game-subnav-cs,
body[data-hub="1"] main.game-shell>.game-subnav-cs {
  position:sticky;
  z-index:35;
  top:0;
  display:flex!important;
  height:54px!important;
  min-height:54px!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  padding:7px 10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border-color:var(--game-line)!important;
  background:rgba(7,11,13,.96)!important;
  scrollbar-color:var(--accent) rgba(255,255,255,.05);
  scrollbar-width:thin;
  backdrop-filter:blur(12px);
}
body[data-game] main.game-shell>.game-subnav-cs .gsn-item,
body[data-hub="1"] main.game-shell>.game-subnav-cs .gsn-item {
  display:inline-flex;
  min-height:38px;
  flex:0 0 auto!important;
  align-items:center;
  padding:8px 15px!important;
  white-space:nowrap;
}
body[data-game] main.game-shell>.game-subnav-cs .gsn-item:hover {
  outline:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  outline-offset:-1px;
}

body[data-game] .hub-now-card,
body[data-game] .hub-resource-card,
body[data-game] .hub-feed-panel {
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
body[data-game] .hub-now-card:hover,
body[data-game] .hub-now-card:focus-visible,
body[data-game] .hub-resource-card:hover,
body[data-game] .hub-resource-card:focus-visible {
  z-index:2;
  border-color:color-mix(in srgb,var(--accent) 72%,#fff 4%)!important;
  outline:0;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 -2px var(--accent);
}
body[data-game] .hub-now-match {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(6,8,9,.97),rgba(6,8,9,.86)),
    var(--mw-game-hero) center/cover;
}
body[data-game] .hub-now-match::after {
  position:absolute;
  top:0;
  right:0;
  width:34%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent));
  content:"";
}
body[data-game] .hub-now-count-1 .hub-now-card { min-height:126px; }
body[data-game] .hub-resource-title {
  margin-top:26px;
  color:#b8c0c1;
  letter-spacing:.14em;
}

/* Overview feed: visual dashboard instead of four dense text tables. */
body[data-game] .hub-overview-feed {
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  margin-top:22px;
}
body[data-game] .hub-overview-main,
body[data-game] .hub-overview-side { gap:16px; }
body[data-game] .hub-overview-side { grid-template-columns:minmax(0,1fr); }
body[data-game] .hub-feed-panel {
  overflow:hidden;
  border-color:var(--game-line);
  background:linear-gradient(145deg,#111719,#090d0f);
}
body[data-game] .hub-feed-panel>header { padding:18px 20px 15px; }
body[data-game] .hub-file-showcase {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--game-line);
}
body[data-game] :is(.hub-file-tile,.hub-editorial-card,.hub-server-card,.hub-map-showcase>a) { text-decoration:none; }
body[data-game] .hub-file-tile {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  min-height:116px;
  background:#0b1012;
  color:var(--game-text);
}
body[data-game] .hub-file-art,
body[data-game] .hub-editorial-art,
body[data-game] .hub-server-art {
  position:relative;
  display:block;
  overflow:hidden;
  background-image:linear-gradient(0deg,rgba(3,5,6,.72),rgba(3,5,6,.06)),var(--feed-art);
  background-position:center;
  background-size:cover;
}
body[data-game] :is(.hub-file-art,.hub-editorial-art)::after {
  position:absolute; inset:0; border:1px solid transparent; content:""; transition:border-color .18s ease;
}
body[data-game] :is(.hub-file-tile,.hub-editorial-card):hover :is(.hub-file-art,.hub-editorial-art)::after { border-color:var(--accent); }
body[data-game] :is(.hub-file-art,.hub-editorial-art)>b {
  position:absolute; top:10px; left:10px; z-index:1; padding:5px 7px;
  border:1px solid color-mix(in srgb,var(--accent) 72%,transparent); background:rgba(5,7,8,.82);
  color:var(--accent); font:800 9px var(--mono);
}
body[data-game] .hub-file-copy {
  display:flex; min-width:0; flex-direction:column; justify-content:center; padding:14px;
}
body[data-game] :is(.hub-file-copy,.hub-editorial-copy)>small { color:var(--accent); font:800 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
body[data-game] .hub-file-copy>strong { margin:7px 0 10px; color:#eee8de; font:700 14px/1.25 var(--body); }
body[data-game] .hub-file-copy>em { color:#8f9a9c; font:10px var(--mono); font-style:normal; }
body[data-game] .hub-file-copy>em i { float:right; color:var(--accent); font-style:normal; }

body[data-game] .hub-editorial-showcase { display:grid; gap:1px; background:var(--game-line); }
body[data-game] .hub-editorial-card {
  display:grid; grid-template-columns:190px minmax(0,1fr); min-height:138px; background:#0b1012;
}
body[data-game] .hub-editorial-copy { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:18px 20px; }
body[data-game] .hub-editorial-copy>strong { margin:7px 0; color:#f1ece3; font:700 17px/1.22 var(--body); }
body[data-game] .hub-editorial-copy>em { display:-webkit-box; overflow:hidden; color:#9ba4a5; font:12px/1.45 var(--body); font-style:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
body[data-game] .hub-editorial-copy>i { margin-top:10px; color:var(--accent); font:700 10px var(--mono); font-style:normal; text-transform:uppercase; }

body[data-game] .hub-server-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  padding:0;
  background:var(--game-line);
}
body[data-game] .hub-server-card {
  display:grid; grid-template-columns:82px minmax(0,1fr) auto; align-items:center; min-height:74px;
  padding:7px 8px; background:#0b1012; color:inherit;
}
body[data-game] .hub-server-card:hover { background:#11181a; box-shadow:inset 0 -2px var(--accent); }
body[data-game] .hub-server-art { width:70px; height:52px; }
body[data-game] .hub-server-art .hub-status-label { position:absolute; top:5px; left:5px; min-width:0; padding:4px 5px; font-size:7px; }
body[data-game] .hub-server-copy { display:flex; min-width:0; flex-direction:column; gap:5px; }
body[data-game] .hub-server-copy strong { overflow:hidden; color:#eee8de; font:700 12px var(--body); text-overflow:ellipsis; white-space:nowrap; }
body[data-game] .hub-server-copy em { color:#899496; font:9px var(--mono); font-style:normal; }
body[data-game] .hub-server-count { display:flex; align-items:baseline; gap:3px; padding:0 6px 0 12px; color:var(--accent); }
body[data-game] .hub-server-count b { font:800 21px var(--display); }
body[data-game] .hub-server-count small { color:#879194; font:9px var(--mono); }

body[data-game] .hub-rank-list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  padding:0;
  background:var(--game-line);
}
body[data-game] .hub-rank-list li {
  position:relative;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:88px;
  gap:3px 8px;
  padding:15px;
  border:0;
  background:#0b1012;
}
body[data-game] .hub-rank-list li::before { display:none; content:none; }
body[data-game] .hub-rank-list li:hover { background:#11181a; box-shadow:inset 0 -2px var(--accent); }
body[data-game] .hub-rank-medal {
  display:grid; width:28px; height:28px; grid-row:1/3; place-items:center; border:1px solid var(--game-line); border-radius:50%;
  color:#b6c0c2; font:800 9px var(--mono);
}
body[data-game] .hub-rank-list li:first-child .hub-rank-medal { border-color:#d7a953; background:#d7a953; color:#17120a; box-shadow:0 0 18px rgba(215,169,83,.2); }
body[data-game] .hub-rank-list li>strong { align-self:end; color:#eee8de; }
body[data-game] .hub-rank-list li>span { align-self:start; color:#9d795f; text-align:left; }

body[data-game] .hub-map-showcase { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--game-line); }
body[data-game] .hub-map-showcase>a {
  position:relative; display:flex; min-height:150px; align-items:flex-end; padding:12px;
  background-image:linear-gradient(0deg,rgba(4,6,7,.96),rgba(4,6,7,.08) 76%),var(--feed-art); background-position:center; background-size:cover; color:#fff;
}
body[data-game] .hub-map-showcase>a:first-child { grid-column:auto; min-height:150px; }
body[data-game] .hub-map-showcase>a>b { position:absolute; top:9px; left:9px; color:var(--accent); font:800 9px var(--mono); }
body[data-game] .hub-map-showcase>a>span { display:flex; min-width:0; flex-direction:column; gap:3px; }
body[data-game] .hub-map-showcase strong { overflow:hidden; font:700 13px var(--body); text-overflow:ellipsis; white-space:nowrap; }
body[data-game] .hub-map-showcase small { color:#a5adae; font:8px var(--mono); text-transform:uppercase; }
body[data-game] .hub-map-showcase>a:hover { box-shadow:inset 0 -3px var(--accent); }

@media (max-width:1050px) {
  body[data-game] .hub-server-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-game] .hub-rank-list,
  body[data-game] .hub-map-showcase { grid-template-columns:repeat(6,minmax(0,1fr)); }
  body[data-game] .hub-rank-list li,
  body[data-game] .hub-map-showcase>a { grid-column:span 2; }
  body[data-game] .hub-rank-list li:nth-child(4),
  body[data-game] .hub-rank-list li:nth-child(5),
  body[data-game] .hub-map-showcase>a:nth-child(4),
  body[data-game] .hub-map-showcase>a:nth-child(5) { grid-column:span 3; }
}

@media (max-width:900px) {
  body[data-game] .cs-hub-hero { min-height:360px; }
  body[data-game] .cs-hub-hero-inner { padding:28px; }
}
@media (max-width:720px) {
  body[data-game] .game-hub-hero { min-height:420px; }
  body[data-game] .cs-hub-hero-inner { padding:24px 18px; }
  body[data-game] main.game-shell>.game-subnav-cs,
  body[data-hub="1"] main.game-shell>.game-subnav-cs {
    scroll-snap-type:x proximity;
  }
  body[data-game] main.game-shell>.game-subnav-cs .gsn-item,
  body[data-hub="1"] main.game-shell>.game-subnav-cs .gsn-item {
    scroll-snap-align:start;
  }
  body[data-game] .hub-file-showcase { grid-template-columns:1fr; }
  body[data-game] .hub-editorial-card { grid-template-columns:112px minmax(0,1fr); }
  body[data-game] .hub-server-cards { grid-template-columns:1fr; }
  body[data-game] .hub-rank-list,
  body[data-game] .hub-map-showcase { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-game] .hub-rank-list li,
  body[data-game] .hub-map-showcase>a,
  body[data-game] .hub-rank-list li:nth-child(4),
  body[data-game] .hub-rank-list li:nth-child(5),
  body[data-game] .hub-map-showcase>a:nth-child(4),
  body[data-game] .hub-map-showcase>a:nth-child(5) { grid-column:auto; }
  body[data-game] .hub-rank-list li:last-child:nth-child(odd),
  body[data-game] .hub-map-showcase>a:last-child:nth-child(odd) { grid-column:1/-1; }
  body[data-game] .hub-rank-list li { min-height:76px; padding:12px; }
  body[data-game] .hub-map-showcase>a { min-height:126px; }
}
@media (max-width:420px) {
  body[data-game] .hub-rank-list,
  body[data-game] .hub-map-showcase { grid-template-columns:1fr; }
  body[data-game] .hub-rank-list li:last-child:nth-child(odd),
  body[data-game] .hub-map-showcase>a:last-child:nth-child(odd) { grid-column:auto; }
  body[data-game] .hub-rank-list li { min-height:64px; }
  body[data-game] .hub-map-showcase>a { min-height:118px; }
}
@media (max-width:440px) {
  body[data-game] .cs-hub-actions {
    width:100%;
    align-items:stretch;
    gap:8px;
  }
  body[data-game] .cs-hub-primary { justify-content:space-between; }
  body[data-game] .cs-hub-secondary { align-self:flex-start; }
  body[data-game] .cs-hub-proof>span { width:max-content; max-width:100%; }
}