:root{
  --bg:#0b0f14;
  --fg:#eef3f8;
  --muted:#adb8c7;
  --gold:#f5d37d;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  color:var(--fg);
  line-height:1.55;
  background:url("../img/bg.webp") center/cover fixed no-repeat, var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.screen{
  min-height:100vh;
  width:min(1100px,92%);
  margin-inline:auto;
  display:grid;
  grid-template-rows:auto auto 1fr;
  align-content:center;
  justify-items:center;
  gap:clamp(.5rem,1.5vw,1rem);
  padding:clamp(.75rem,2vw,1.5rem) 0;
  text-align:center;
}

.logo-wrap{ display:grid; place-items:center; }
.logo{ width:440px; height:auto; }

.title-banner{
  display:block;
  margin:.25rem auto .5rem;
  width:min(800px,92vw);
  aspect-ratio:1200/280;
  background-image:url("../img/wood-banner.webp");
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.chars{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.75rem,2vw,1.25rem);
  width:100%;
  justify-items:center;
  margin:0;
}

.char-block{
  gap:0;
  justify-items:center;
}

.char-img{
  display:block;
  margin:0;
  line-height:0;
  max-width:min(100%, 360px);
}

.char-img:hover{ transform:none; }

.metal-btn{
  display:block;
  width:clamp(320px,80vw,560px);
  aspect-ratio:5 / 1.4;
  min-height:64px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  border:none !important;
  box-shadow:none !important;
  transition:transform .12s ease, filter .25s ease;
}

.metal-btn:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.1);
}

.metal-btn--archer{
  background-image:url("../img/btn-archer.webp");
}
.metal-btn--warrior{
  background-image:url("../img/btn-warrior.webp");
}

.game-desc {
  max-width: 800px;
  margin: 1rem auto 0;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: #e9d8a6;
  font-weight: 500;
  font-family: 'Cinzel', serif;
  text-shadow: 0 2px 4px rgba(0,0,0,.65);
  background: rgba(20, 14, 6, 0.55);
  border: 2px solid rgba(245, 211, 125, 0.4);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.55) inset;
}

@media (max-width:640px){
  .chars{ grid-template-columns:1fr; }
}