*{box-sizing:border-box}
:root{
  --gold:#d69b19;
  --gold2:#f0c55a;
  --bg:#030405;
  --panel:rgba(5,6,7,.94);
  --line:rgba(218,158,29,.65);
  --text:#f5f5f5;
  --muted:#9b9b9b;
}
html,body{
  margin:0;
  min-height:100%;
  background:#000;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
body{
  overflow-x:hidden;
}
.page-shell{
  min-height:100vh;
  background:#000;
}
.topbar{
  height:92px;
  display:grid;
  grid-template-columns:300px 1fr 170px;
  align-items:center;
  background:linear-gradient(180deg,#050607 0%,#020303 100%);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.brand{
  height:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 42px;
  color:var(--gold2);
  text-decoration:none;
}
.brand-crown{
  font-size:48px;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(235,177,43,.28));
}
.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand-copy strong{
  font-size:29px;
  letter-spacing:.5px;
}
.brand-copy span{
  margin-top:6px;
  font-size:11px;
  letter-spacing:4px;
}
.main-nav{
  align-self:stretch;
  display:flex;
  justify-content:center;
}
.main-nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 26px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  transition:.2s ease;
}
.main-nav a span{
  font-size:19px;
  opacity:.95;
}
.main-nav a:hover,
.main-nav a.active{
  background:linear-gradient(180deg,rgba(184,129,17,.06),rgba(195,139,16,.18));
  color:#fff;
}
.main-nav a.active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
  box-shadow:0 0 14px var(--gold);
}
.logout{
  justify-self:end;
  margin-right:36px;
  border:1px solid var(--gold);
  border-radius:5px;
  height:52px;
  min-width:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:white;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.logout:hover{
  background:rgba(214,155,25,.1);
  box-shadow:0 0 18px rgba(214,155,25,.14);
}
.hero{
  position:relative;
  height:calc(100vh - 180px);
  min-height:620px;
  background-image:url('/assets/kings-home-bg.png');
  background-size:cover;
  background-position:center center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 54%,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 34%,rgba(0,0,0,.30) 100%),
    linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.10));
  pointer-events:none;
}
.center-action{
  position:absolute;
  left:50%;
  bottom:9.6%;
  transform:translateX(-50%);
  z-index:4;
}
.steam-btn{
  width:430px;
  height:82px;
  display:grid;
  grid-template-columns:60px 1fr 36px;
  align-items:center;
  padding:0 28px;
  color:white;
  text-decoration:none;
  border:2px solid #efc85f;
  border-radius:9px;
  background:
    linear-gradient(180deg,rgba(187,133,15,.83),rgba(119,77,5,.93));
  box-shadow:
    inset 0 0 35px rgba(255,205,74,.12),
    0 0 24px rgba(222,162,26,.35);
  font-size:20px;
  font-weight:900;
  letter-spacing:.3px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.steam-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 35px rgba(255,219,115,.18),
    0 0 34px rgba(230,172,36,.5);
}
.steam-mark{
  font-size:38px;
}
.arrow{
  color:#ffd45f;
  font-size:30px;
  font-weight:400;
}
.footer{
  min-height:88px;
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  align-items:center;
  padding:0 44px;
  background:#030405;
  color:#a4a4a4;
  font-size:12px;
  letter-spacing:3px;
}
.footer-center{
  text-align:center;
  position:relative;
  padding-top:18px;
}
.footer-center b{
  color:var(--gold);
  padding:0 6px;
}
.mini-crown{
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold2);
  font-size:34px;
  text-shadow:0 0 12px rgba(218,158,29,.35);
}
.footer-right{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.socials{
  display:flex;
  justify-content:flex-end;
  gap:22px;
}
.socials a{
  color:#aaa;
  text-decoration:none;
  font-size:21px;
}
.socials a:hover{color:var(--gold2)}
@media(max-width:1100px){
  .topbar{grid-template-columns:220px 1fr 105px}
  .brand{padding:0 24px}
  .brand-copy strong{font-size:24px}
  .main-nav a{padding:0 14px;font-size:12px}
  .logout{margin-right:16px;min-width:86px}
}
@media(max-width:820px){
  .topbar{
    height:auto;
    min-height:82px;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand logout"
      "nav nav";
  }
  .brand{grid-area:brand;height:74px}
  .logout{grid-area:logout;height:44px}
  .main-nav{
    grid-area:nav;
    overflow-x:auto;
    justify-content:flex-start;
    border-top:1px solid rgba(255,255,255,.05);
    height:54px;
  }
  .main-nav a{flex:0 0 auto}
  .hero{
    height:calc(100vh - 210px);
    min-height:560px;
    background-position:center center;
  }
  .steam-btn{
    width:min(86vw,430px);
    height:68px;
    font-size:16px;
    grid-template-columns:45px 1fr 28px;
  }
  .footer{
    min-height:120px;
    grid-template-columns:1fr;
    gap:10px;
    text-align:center;
    padding:24px 18px;
  }
  .footer-left,.footer-right{text-align:center}
  .socials{justify-content:center}
}
@media(max-width:520px){
  .brand-crown{font-size:36px}
  .brand-copy strong{font-size:21px}
  .brand-copy span{font-size:9px;letter-spacing:2.5px}
  .main-nav a{padding:0 13px;font-size:11px}
  .hero{
    min-height:500px;
    background-size:auto 100%;
  }
  .center-action{bottom:8%}
  .steam-btn{
    width:86vw;
    padding:0 18px;
  }
}