/* Hall of Fame refresh: the site shell stays shared; only ranking controls and
   game-specific arena accents live here. */
.hof-page{
  --hof-accent:#f05a3b;
  --hof-accent-soft:rgba(240,90,59,.14);
  --hof-accent-ink:#ffd9c8;
}

.hof-commandbar{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  grid-template-areas:"title caption";
  grid-template-columns:minmax(0,1fr) minmax(220px,auto);
  gap:28px;
  min-height:210px;
  padding:34px 38px;
  border:1px solid rgba(240,90,59,.28);
  background:
    linear-gradient(90deg,rgba(4,5,6,.97) 0%,rgba(4,5,6,.78) 47%,rgba(4,5,6,.22) 100%),
    linear-gradient(0deg,rgba(4,5,6,.88),transparent 72%),
    var(--hof-head-art) center 43%/cover;
  box-shadow:inset 3px 0 #f05a3b,inset 0 1px rgba(255,255,255,.025);
}
.hof-commandbar::after{
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px);
  content:"";
}
.hof-title{grid-area:title;align-self:center}
.hof-commandbar>p{grid-area:caption;align-self:center;text-align:right}
.hof-title h1{
  margin-top:10px;
  font-size:clamp(42px,5.2vw,72px);
  line-height:.92;
  letter-spacing:-.015em;
  text-shadow:0 6px 30px #000;
}
.hof-commandbar>p{position:relative;z-index:1;max-width:360px;color:#b09d8d;font-size:11px}
.hof-title{position:relative;z-index:1}
.hof-mode-switch{
  counter-reset:hof-mode;
  position:absolute;
  z-index:4;
  top:22px;
  right:22px;
  display:grid;
  width:250px;
  justify-content:stretch;
  gap:6px;
}
.hof-mode-switch a{
  counter-increment:hof-mode;
  position:relative;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 18px;
  align-items:center;
  min-width:0;
  padding:10px 12px;
  overflow:hidden;
  border:1px solid rgba(154,130,113,.3);
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  color:#aa9b8e;
  text-align:left;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.hof-mode-switch a::before{
  content:"0" counter(hof-mode);
  color:var(--hof-accent);
  font:800 9px/1 var(--mono);
  letter-spacing:.1em;
}
.hof-mode-switch a::after{
  content:"→";
  color:#71665e;
  font:700 13px/1 var(--mono);
  text-align:right;
}
.hof-mode-switch a:hover,
.hof-mode-switch a:focus-visible{
  border-color:color-mix(in srgb,var(--hof-accent) 68%,transparent);
  background:var(--hof-accent-soft);
  color:#f6e9db;
  transform:translateX(-3px);
}
.hof-mode-switch a.is-active{
  border-color:var(--hof-accent);
  background:linear-gradient(90deg,var(--hof-accent-soft),rgba(8,7,7,.92));
  box-shadow:inset 3px 0 var(--hof-accent);
  color:var(--hof-accent-ink);
}
.hof-mode-switch a.is-active::after{color:var(--hof-accent)}

.hof-game-switch{
  margin-top:12px;
  scrollbar-color:rgba(240,90,59,.55) rgba(255,255,255,.035);
  scrollbar-width:thin;
}
.hof-game-switch::-webkit-scrollbar{height:7px}
.hof-game-switch::-webkit-scrollbar-track{background:rgba(255,255,255,.035)}
.hof-game-switch::-webkit-scrollbar-thumb{background:rgba(240,90,59,.48);border-radius:20px}
.hof-game-btn{
  background-color:#0b0d0e;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  transition:border-color .18s ease,filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.hof-game-btn:hover,.hof-game-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 0 0 1px rgba(240,90,59,.18);
}
.hof-arena{
  background-color:#07090a;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 16px 44px rgba(0,0,0,.2);
}
.hof-arena[data-game="q3"][data-mode="duel"]{background-position:center 18%}
.hof-arena[data-game="q3"][data-mode="ffa"]{background-position:center 18%}
.hof-arena[data-game="tw"]{
  background-image:url('brand/v2/hof-tw-podium-v1.jpg');
  background-position:center 44%;
}
.hof-arena[data-game="q3"][data-mode="duel"] .hof-mode-switch{
  right:auto;
  left:50%;
  width:min(520px,52%);
  grid-template-columns:repeat(3,minmax(0,1fr));
  transform:translateX(-50%);
}
.hof-arena::after{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);
  content:"";
}
.hof-podium-player{
  --hof-podium-accent:#c58a58;
  --hof-player-transform:none;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:clamp(180px,18vw,260px);
  max-width:30%;
  min-height:72px;
  padding:9px 22px 12px;
  border:0;
  background:
    radial-gradient(ellipse at 50% 58%,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 48%,transparent 76%);
  box-shadow:none;
  backdrop-filter:blur(2px);
  color:#f3e5d2;
  text-align:center;
  text-shadow:0 3px 12px #000,0 1px 2px #000;
  transform:var(--hof-player-transform);
  transition:filter .18s ease,transform .18s ease;
}
.hof-podium-player::after{
  width:58px;
  height:2px;
  margin-top:8px;
  background:linear-gradient(90deg,transparent,var(--hof-podium-accent),transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--hof-podium-accent) 36%,transparent);
  content:"";
}
.hof-podium-player:hover,.hof-podium-player:focus-visible{
  filter:brightness(1.14);
  outline:none;
  transform:var(--hof-player-transform) translateY(-4px);
}
.hof-podium-player small{
  display:block;
  width:auto;
  height:auto;
  margin-bottom:1px;
  border:0;
  background:none;
  color:var(--hof-podium-accent);
  font:800 11px/1 var(--mono);
  letter-spacing:.08em;
}
.hof-podium-player strong{
  display:block;
  max-width:100%;
  color:#f5e6d1;
  font:400 clamp(23px,2.2vw,34px)/1 var(--display);
  letter-spacing:.01em;
}
.hof-podium-player span{
  display:block;
  margin-top:4px;
  color:#d0bdab;
  font:700 11px/1.2 var(--mono);
  letter-spacing:.035em;
  white-space:nowrap;
}
.hof-podium-rank-1{
  --hof-podium-accent:#e8ba52;
  --hof-player-transform:translateX(-50%);
  width:clamp(200px,20vw,285px);
  min-height:80px;
}
.hof-podium-rank-1 strong{font-size:clamp(24px,2.35vw,36px)}
.hof-podium-rank-2{--hof-podium-accent:#c8cbd0}
.hof-podium-rank-3{--hof-podium-accent:#c6814c}
.hof-records-head{padding-top:4px;border-top:1px solid rgba(240,90,59,.16)}
.hof-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(25,28,29,.96),rgba(7,8,9,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.hof-card::before{position:absolute;top:0;bottom:0;left:0;width:2px;background:#f05a3b;content:"";opacity:.62}
.hof-card:hover{border-color:rgba(240,90,59,.5);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.24)}

.hof-game-btn[data-game="cs16"],
.hof-game-btn[data-game="cs2"]{
  --hof-card-cold:#57a8d8;
  --hof-card-warm:#e9793e;
}
.hof-game-btn[data-game="cs16"]{background-position:center,left center}
.hof-game-btn[data-game="cs2"]{background-position:center,right center}
.hof-game-btn[data-game="cs16"] .hof-game-mark,
.hof-game-btn[data-game="cs2"] .hof-game-mark{
  border-color:var(--hof-card-cold);
  background:linear-gradient(135deg,rgba(49,128,178,.3),rgba(113,40,20,.22)),#080706;
  color:#b8e5ff;
}
.hof-game-btn[data-game="cs16"].is-active::after,
.hof-game-btn[data-game="cs2"].is-active::after{
  height:4px;
  background:linear-gradient(90deg,var(--hof-card-cold) 0 49%,var(--hof-card-warm) 51% 100%);
}
.hof-page[data-game="cs16"],.hof-page[data-game="cs2"]{
  --hof-accent:#62aeda;
  --hof-accent-soft:rgba(70,143,188,.16);
  --hof-accent-ink:#d8f1ff;
}
.hof-page[data-game="cs16"] .hof-arena-shade,
.hof-page[data-game="cs2"] .hof-arena-shade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.2),transparent 38%,rgba(0,0,0,.12) 56%,rgba(0,0,0,.88)),
    linear-gradient(90deg,rgba(27,76,108,.28),transparent 39%,transparent 61%,rgba(126,46,22,.28));
}

@media(max-width:1000px){
  .hof-commandbar{
    grid-template-areas:"title" "caption";
    grid-template-columns:1fr;
    gap:9px;
  }
  .hof-commandbar>p{text-align:left}
  .hof-mode-switch{top:14px;right:14px;left:14px;width:auto;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto}
  .hof-mode-switch a:hover,.hof-mode-switch a:focus-visible{transform:translateY(-2px)}
  .hof-podium-player{width:clamp(165px,24vw,215px);padding-inline:12px}
  .hof-podium-rank-1{width:clamp(190px,28vw,245px)}
}
@media(max-width:650px){
  .hof-commandbar{min-height:230px;padding:24px 20px}
  .hof-title h1{font-size:clamp(38px,12vw,52px)}
  .hof-mode-switch{top:10px;right:10px;left:10px;grid-auto-columns:minmax(132px,1fr)}
  .hof-arena[data-game="q3"][data-mode="duel"] .hof-mode-switch{right:10px;left:10px;width:auto;transform:none}
  .hof-mode-switch a{padding:10px;grid-template-columns:27px minmax(0,1fr) 14px}
  .hof-arena{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:minmax(300px,1fr) auto auto;
    gap:8px;
    height:560px;
    padding:0 10px 10px;
  }
  .hof-podium-player{
    position:relative;
    right:auto;
    bottom:auto;
    left:auto;
    width:100%;
    max-width:none;
    min-height:68px;
    padding:8px 8px 10px;
    transform:none;
  }
  .hof-podium-player:hover,.hof-podium-player:focus-visible{transform:translateY(-3px)}
  .hof-podium-rank-1{grid-row:2;grid-column:1/-1;justify-self:center;width:min(100%,280px);min-height:74px}
  .hof-podium-rank-2{grid-row:3;grid-column:1}
  .hof-podium-rank-3{grid-row:3;grid-column:2}
  .hof-podium-player strong{font-size:18px}
  .hof-podium-rank-1 strong{font-size:23px}
  .hof-podium-player span{font-size:9px}
  .hof-arena[data-game="cs16"]{background-position:18% center}
  .hof-arena[data-game="cs2"]{background-position:82% center}
}