/* Magical RPG Games – Shared Styles */

/* Theme */
:root{
  --bg:#0b0c10;
  --bg-grad: radial-gradient(1200px 600px at 20% -10%, #1a2438 0%, transparent 60%),
             radial-gradient(1000px 500px at 120% 10%, #0f3a5a 0%, transparent 55%),
             linear-gradient(180deg, #0b0c10 0%, #0f0f0f 100%);
  --text:#f2f5f8;
  --muted:#c7d0da;
  --brand:#52a0ff;    /* MRG blue */
  --brand-2:#9db3c7;  /* MRG grey */
  --card:#111418;
  --border:#1f2730;
  --accent:#ffd166;   /* warm accent for CTAs */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg-grad);
  color: var(--text);
  line-height: 1.5;
}
a{color:inherit}
img{max-width:100%; display:block}

/* Skip link */
.skip-link{
  position: absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position: static; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; border-radius:8px; margin:8px;
}

/* Layout */
.container{ max-width:1200px; margin:0 auto; padding:20px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }
.section-inner{ padding:22px }

/* Header */
.site-header{
  display:flex; align-items:center; gap:16px; padding:14px 0;
}
.logo{ height: clamp(84px, 9vw, 160px); }
.brand-title{
  margin:0; font-size:22px; font-weight:700; letter-spacing:.2px;
}
nav.primary{
  margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;
}
.nav-link{
  text-decoration:none; padding:10px 14px; border:1px solid var(--border);
  border-radius:999px; transition:all .2s ease; color:var(--muted); font-weight:600;
  background:rgba(255,255,255,.02);
}
.nav-link:hover{ border-color:var(--brand); color:#fff; transform:translateY(-1px) }
.nav-link.active{ border-color:var(--brand); color:#fff; }

/* Hero */
.hero{
  margin-top:10px; border-radius:var(--radius); overflow:hidden;
  background: url('/hero-fantasy-banner.jpg') center/cover no-repeat;
  min-height:360px; position:relative; box-shadow:var(--shadow);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 100%);
}
.hero-content{
  position:relative; z-index:1; padding:36px; max-width:720px;
}
.hero h1{font-size:40px; margin:0 0 8px}
.hero p{color:var(--muted); margin:0 0 16px; font-size:18px}

/* Buttons */
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; font-weight:800; text-decoration:none;
  border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary{ background:var(--accent); color:#1b1f24 }
.btn-primary:hover{ transform:translateY(-1px) }
.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:var(--border) }
.btn-ghost:hover{ background:rgba(255,255,255,.1) }

/* Sections */
section{ margin:40px 0 }

/* About */
.about p{ color:var(--muted); font-size:17px; max-width:80ch }

/* Announcement / Playtest */
.cover-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.cover-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cover-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35); border-color:var(--brand) }
.cover-card img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
}
.cover-body{ padding:12px 14px }
.cover-title{ margin:0 0 6px; font-size:18px; font-weight:800 }
.cover-meta{ margin:0; color:var(--muted); font-size:14px }

/* Gallery / Thumbs */
.thumb-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.thumb{
  background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration:none;
}
.thumb:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35); border-color:var(--brand) }
.thumb img{ width:100%; height:120px; object-fit:cover; display:block }
.thumb .caption{ padding:8px 10px; font-size:14px; color:var(--muted) }

/* Bundle panel */
.bundle{
  display:grid; gap:18px; grid-template-columns: 1.1fr .9fr;
}
@media (max-width:900px){ .bundle{ grid-template-columns:1fr } }

.subtle{ color:var(--muted) }

/* Footer */
footer{ margin:60px 0 20px; color:var(--muted); font-size:14px }
.foot-nav{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.foot-nav a{ text-decoration:none; color:var(--muted) }
.foot-nav a:hover{ color:#fff }

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .nav-link:hover, .btn-primary:hover, .thumb:hover, .cover-card:hover{ transform:none }
}