/* ===== Blue + White theme ===== */
:root{
  --blue: #194C7D;          /* primary */
  --blue-700: #123A60;      /* hover/depth */
  --blue-soft: #EAF2FF;     /* light backgrounds */
  --ink: #0E1A2B;           /* body text */
  --muted: #516B8C;         /* secondary text */
  --white: #FFFFFF;
  --border: 1px solid rgba(25,76,125,0.18);
  --shadow: 0 12px 34px rgba(18,58,96,0.18);
  --radius: 14px;
}

.feature-img {
  display: block;
  max-width: 700px;   /* big on desktop */
  width: 100%;        /* shrink to fit on smaller screens */
  height: auto;       /* keep natural ratio */
  margin: 20px auto;
  border-radius: 16px;
  border: var(--border);
  box-shadow: var(--shadow);
}





*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font:16px/1.55 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
.wrap{ width:min(1100px, 92%); margin-inline:auto; }

/* ===== Banner ===== */
.banner{
  position:sticky; top:0; z-index:50;
  background:var(--white); border-bottom:var(--border);
  backdrop-filter:saturate(1.1) blur(6px);
}
.banner .wrap{ display:flex; align-items:center; gap:16px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.logo{ width:40px; height:40px; border-radius:9px; border:var(--border); }
.brand-text{ display:flex; flex-direction:column; line-height:1.12; }
.owner{ font-size:.8rem; color:var(--muted); }
.game-name{ letter-spacing:.2px; }

.alpha-badge{
  margin-left:4px;
  padding:6px 10px; border-radius:999px;
  background:var(--blue-soft); color:var(--blue);
  border:1px solid rgba(25,76,125,0.35);
  font-weight:700; font-size:.78rem;
}

.nav{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.nav-link{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px;
  transition: background-color .2s, color .2s, transform .08s;
}
.nav-link:hover{ background:var(--blue-soft); color:var(--blue); transform: translateY(-1px); }
.nav-link.active{ color:var(--white); background:var(--blue); }

/* ===== Views ===== */
.view{ display:none; opacity:0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.view.active{ display:block; opacity:1; transform: translateY(0); }

/* ===== Hero ===== */
.hero{
  padding:58px 0 40px;
  background:
    radial-gradient(700px 240px at -10% -10%, rgba(25,76,125,0.12), transparent 55%),
    radial-gradient(500px 220px at 110% -10%, rgba(25,76,125,0.12), transparent 55%),
    linear-gradient(180deg, var(--blue-soft), var(--white) 60%);
}
.hero-grid{ display:grid; gap:18px; grid-template-columns: 1.1fr .9fr; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size: clamp(2rem, 2.6vw + 1rem, 3rem); margin:0 0 .25rem; }
.hero .sub{ color:var(--muted); margin:.35rem 0 0; }
.hero-img{
  width:100%; height:auto; border-radius:16px; border:var(--border); box-shadow:var(--shadow);
}

/* ===== Cards ===== */
.cards{ padding:24px 0 8px; }
.grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }
.card{
  border:var(--border); border-radius:var(--radius); padding:16px; background:var(--white);
  box-shadow:var(--shadow);
}
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-title{ margin:0; font-size:1.25rem; }
.card-text{ color:var(--muted); margin:.4rem 0 1rem; }
.card .cta{ color:var(--blue); font-weight:700; }
.card.link{ text-decoration:none; color:inherit; display:block; transition: transform .08s, box-shadow .2s, border-color .2s; }
.card.link:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(18,58,96,0.22); border-color:rgba(25,76,125,.35); }
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:var(--blue-soft); color:var(--blue); border:1px solid rgba(25,76,125,.35);
  font-size:.8rem; font-weight:700;
}

/* ===== Page header (Weather/Contact) ===== */
.page-header{
  padding:48px 0 22px; border-bottom:var(--border);
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(25,76,125,0.12), transparent 60%),
    var(--white);
}
.page-header h1{ margin:0 0 .3rem; font-size: clamp(1.8rem, 2.1vw + 1rem, 2.6rem); }
.page-header .sub{ color:var(--muted); margin:.2rem 0 1rem; }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:6px 10px; border-radius:999px; background:var(--blue-soft);
  color:var(--blue); border:1px solid rgba(25,76,125,.3); font-weight:700; font-size:.82rem;
}

/* ===== Sections / Prose ===== */
.section{ padding:24px 0 36px; }
.prose h2{ margin:1.2rem 0 .5rem; }
.prose h3{ margin:1rem 0 .35rem; }
.prose p{ margin:.35rem 0 .85rem; color:var(--ink); }
.prose ul{ margin:.2rem 0 .9rem; padding-left:1.1rem; }
.prose li{ margin:.25rem 0; }
.cols{ columns:2; column-gap:26px; }
@media (max-width:900px){ .cols{ columns:1; } }

.callout{
  border-left:4px solid var(--blue);
  background:var(--blue-soft);
  padding:12px 14px; border-radius:10px; margin:12px 0 14px;
}

/* ===== Contact box ===== */
.contact-box{
  border:var(--border); border-radius:var(--radius); padding:22px; background:var(--white);
  box-shadow:var(--shadow); text-align:center; max-width:720px; margin:0 auto 14px;
}
.contact-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
}
.link-stack{ display:grid; gap:10px; margin-top:12px; }
.contact-link{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  color:var(--blue); text-decoration:none; border:1px solid rgba(25,76,125,.25);
  border-radius:999px; padding:10px 14px; transition: background-color .2s, transform .08s, border-color .2s;
}
.contact-link:hover{ background:var(--blue-soft); border-color:rgba(25,76,125,.45); transform: translateY(-1px); }
.contact-link .icon{ display:inline-grid; place-items:center; color:var(--blue); }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;           /* less rounded, more modern */
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 0.95rem;
}
/* Solid button */
.btn.solid {
  background: var(--blue);
  color: var(--white);
  border: none;
  box-shadow: var(--shadow);
}
.btn.solid:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
}

/* Outline button */
.btn.outline {
  background: transparent;
  border: 2px solid var(--blue);
  color: var(--blue);
}
.btn.outline:hover {
  background: var(--blue-soft);
  transform: translateY(-2px);
}

/* Ghost button */
.btn.ghost {
  background: transparent;
  border: none;
  color: var(--muted);
}
.btn.ghost:hover {
  color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-2px);
}

/* ===== Footer ===== */
.footer{ border-top:var(--border); color:var(--muted); }
.footer .wrap{ padding:18px 0; }

/* Accessibility focus */
a:focus, button:focus{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }

/* ===== Mobile polish ===== */
html, body { width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* make sticky header play nice with notches */
.banner { padding-top: max(0px, env(safe-area-inset-top)); }

/* Header + nav wrap on narrow screens */
@media (max-width: 720px){
  .banner .wrap{ flex-wrap: wrap; gap: 10px; padding: 10px 0; }
  .brand{ min-width: 0; flex: 1 1 auto; }
  .owner{ display:none; }               /* hide tiny owner text */
  .alpha-badge{ order:3; margin: 6px 0 0 0; }  /* push badge below brand */

  .nav{
    order: 4;
    margin-left: 0;
    width: 100%;
    overflow-x: auto;                   /* scroll if needed */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;
    border-top: var(--border);
  }
  .nav-link{
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  /* Hero spacing + single column (you already switch at 900px, this tightens spacing) */
  .hero{ padding: 34px 0 22px; }
  .hero .sub{ font-size: 0.96rem; }

  /* Cards feel lighter on mobile */
  .cards{ padding-top: 16px; }
  .card{ padding: 14px; border-radius: 12px; }
  .card-title{ font-size: 1.1rem; }
  .card-text{ font-size: 0.96rem; }

  /* Headers/sections tighter */
  .page-header{ padding: 32px 0 16px; }
  .page-header h1{ font-size: clamp(1.5rem, 5.6vw, 2.1rem); }
  .section{ padding: 20px 0 28px; }

  /* Multi-column lists -> single (safety even below your 900px rule) */
  .cols{ columns: 1; }

  /* Pills wrap nicer */
  .pill{ font-size: 0.8rem; padding: 6px 10px; }

  /* Contact buttons don’t overflow */
  .link-stack{ grid-template-columns: 1fr; }
  .contact-link{ padding: 10px 12px; }
}

/* Ultra-small phones */
@media (max-width: 380px){
  .logo{ width: 34px; height: 34px; border-radius: 8px; }
  .game-name{ font-size: 0.98rem; }
  .alpha-badge{ font-size: .72rem; padding: 5px 8px; }
  .btn{ padding: 9px 16px; font-size: 0.9rem; }
  .wrap{ width: min(100%, 94%); }
}