/* Shared full-width page hero banner — used by vote, play, wiki, updates, guides */

/* Banner pages: the hero sits flush under the header, so cancel the page's
   .main top padding AND top margin (the header is position:sticky — it occupies
   its own space in flow, so no clearance margin is needed; this sheet loads
   after the page stylesheet and wins) */
.main { margin-top: 0; padding-top: 0; }

.page-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem clamp(2.5rem, 7vw, 4.25rem);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 197, 61, 0.18);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(12, 8, 8, 0.55) 0%,
      rgba(12, 8, 8, 0.35) 45%,
      rgba(12, 8, 8, 0.94) 100%);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.page-hero h1 {
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}

.page-hero p {
  color: var(--silver);
  font-size: 1.02rem;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* Per-page backgrounds — shared golden-hour skyline drawn in SVG (no image files).
   Swap for rendered art later by putting the url() back per page. */
.page-hero-vote,
.page-hero-play,
.page-hero-wiki,
.page-hero-updates,
.page-hero-guides,
.page-hero-store,
.page-hero-feedback {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231c0f38'/%3E%3Cstop offset='.45' stop-color='%235b2a6b'/%3E%3Cstop offset='.75' stop-color='%23c0523f'/%3E%3Cstop offset='1' stop-color='%23f0a838'/%3E%3C/linearGradient%3E%3CradialGradient id='u' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%23ffe9b0'/%3E%3Cstop offset='.5' stop-color='%23ffcf6b'/%3E%3Cstop offset='1' stop-color='%23f0a838' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1200' height='420' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='280' r='170' fill='url(%23u)'/%3E%3Ccircle cx='600' cy='280' r='62' fill='%23ffdf8f' opacity='.9'/%3E%3Cg fill='%233a2350' opacity='.85'%3E%3Crect x='60' y='170' width='70' height='250'/%3E%3Crect x='140' y='140' width='52' height='280'/%3E%3Crect x='205' y='195' width='60' height='225'/%3E%3Crect x='900' y='155' width='66' height='265'/%3E%3Crect x='975' y='185' width='48' height='235'/%3E%3Crect x='1035' y='135' width='74' height='285'/%3E%3Crect x='1120' y='175' width='56' height='245'/%3E%3C/g%3E%3Cg fill='%23150e22'%3E%3Cpath d='M0 420 V300 H150 V275 H300 V315 H470 V290 H520 V420 Z'/%3E%3Cpath d='M1200 420 V290 H1040 V310 H900 V282 H760 V315 H700 V420 Z'/%3E%3C/g%3E%3Cg fill='%23ffcf6b' opacity='.85'%3E%3Crect x='40' y='318' width='10' height='14'/%3E%3Crect x='70' y='318' width='10' height='14'/%3E%3Crect x='330' y='330' width='10' height='14'/%3E%3Crect x='1120' y='318' width='10' height='14'/%3E%3Crect x='820' y='330' width='10' height='14'/%3E%3C/g%3E%3Cpath d='M210 215 Q600 260 1000 215' stroke='%230d0916' stroke-width='2.4' fill='none' opacity='.8'/%3E%3C/svg%3E");
}

/* Banner sits flush under the fixed header; give the content below room */
.page-hero + .container,
.page-hero ~ .container {
  padding-top: 2rem;
}