/* Wizard Banished — shared styles (site.css)
   Place this file at /assets/css/site.css
   Used by: /index.html, /wizard-banished/index.html, /banished-to-forest/index.html, /privacy/index.html, /about/index.html
*/

:root{
  --bg:#0a0f0f;            /* near-black forest */
  --panel:#0f1a19;         /* card base */
  --elev:#132322;          /* elevated panel */
  --txt:#e6f1ef;           /* primary text */
  --muted:#a9c3bf;         /* secondary text */
  --accent:#6d5bd1;        /* ink/violet accent */
  --accent-2:#18a48c;      /* forest green */
  --accent-2-press:#128471;
  --ring:#74ffe6;          /* focus outline */
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:18px;
  --radius-lg:22px;
  --gap:clamp(14px,2.2vw,26px);
  --pad:clamp(14px,2.2vw,28px);
  --maxw:1120px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:400 16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(24,164,140,.18), transparent 60%),
              radial-gradient(900px 700px at 110% 20%, rgba(109,91,209,.16), transparent 60%),
              var(--bg);
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

/* Layout */
.wrap{max-width:var(--maxw); margin:0 auto; padding:calc(var(--pad)*1.3) var(--pad) var(--pad)}
header{position:relative; margin:0 0 5vh}

.brand{display:flex; align-items:center; gap:14px}
.logo{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:linear-gradient(145deg,#1a2a29,#2a3f3e); box-shadow:var(--shadow)}
.logo svg{width:26px; height:26px}
h1{margin:0; font-size:clamp(28px,4.5vw,56px); letter-spacing:.3px; text-wrap:balance}
.sub{margin-top:2px; color:var(--muted)}

/* Reusable card */
.card{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.card.pad{padding:var(--pad)}

/* Game tiles */
.tiles{display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); margin:18px 0 28px}
@media (max-width:840px){.tiles{grid-template-columns:1fr}}
.tile-card{overflow:hidden; display:flex; flex-direction:column}
.tile-card img{width:100%; height:160px; object-fit:cover}
.card-content{padding:var(--pad); flex:1; display:flex; flex-direction:column}
.card h3{margin:0 0 6px; font-size:clamp(20px,2.4vw,28px); text-wrap:balance}
.card p{margin:0 0 18px; color:var(--muted)}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto}
.badge{font-size:12px; letter-spacing:.3px; color:#b7d8d3; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:4px 9px; margin-bottom:10px; display:inline-block}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; text-decoration:none}
.btn.play,.btn-play{background:var(--accent-2); color:#05221d; font-weight:700; border:0}
.btn.play:hover,.btn-play:hover{background:var(--accent-2-press)}
.btn.ghost,.btn-info{border:1px solid rgba(255,255,255,.16); background:transparent}

/* Featured links */
.featured{margin:32px 0 18px}
.feature-grid{display:grid; gap:var(--gap); grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.feature-grid{grid-template-columns:1fr}}
.feature{display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--radius); background:var(--elev); border:1px solid rgba(255,255,255,.06); text-decoration:none}
.feature svg{width:22px; height:22px}

/* Explore lists */
.explore{display:grid; gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:8px}
@media (max-width:980px){.explore{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.explore{grid-template-columns:1fr}}
.list{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:10px 12px}
.list h4{margin:2px 0 6px; font-size:13px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase}
.list ul{list-style:none; padding:0; margin:0}
.list li{margin:2px 0}
.list a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; border-bottom:1px dotted transparent}
.list a:hover{border-bottom-color:rgba(255,255,255,.25)}

/* About / Subpages shared */
.grid{display:grid; gap:var(--gap); grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.media{display:grid; gap:12px}
.shot{width:100%; height:260px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.06)}
.muted{color:var(--muted)}
.subtitle{margin-top:4px; font-weight:600; opacity:.9; font-size:.9em; padding:.25em .6em; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.05); display:inline-block}

/* Footer */
footer{margin:36px 0 26px; color:var(--muted); font-size:14px}
.footline{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}

/* Back link */
.back{display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; padding:8px 10px; text-decoration:none; border:1px solid rgba(255,255,255,.12); border-radius:999px}
.back:hover{border-color:rgba(255,255,255,.22)}

/* Gamer vibe & micro-interactions */
.card, .feature{transition:transform .2s ease, box-shadow .3s ease, border-color .2s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(116,255,230,.06) inset}
.btn.play,.btn-play{position:relative; transition:transform .15s ease, box-shadow .3s ease}
.btn.play:hover,.btn-play:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(24,164,140,.35)}
.feature:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.16)}

/* Utilities */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Optional hero image (if used) */
.hero-bg{width:100%; height:220px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); margin-bottom:20px; position:relative}
.hero-bg img{width:100%; height:100%; object-fit:cover; display:block}
/* Animated glow (optional); include only if you render .hero-bg */
.hero-bg::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(600px 220px at 10% -20%, rgba(116,255,230,.07), transparent 60%),
  radial-gradient(600px 220px at 90% 120%, rgba(109,91,209,.07), transparent 60%);
  animation:floatGlow 12s ease-in-out infinite alternate}
@keyframes floatGlow{0%{transform:translateY(-6px)}100%{transform:translateY(6px)}}