/* Shared styles for the hub (index.html) and privacy.html.
   Individual games are self-contained single files and do not use this. */
:root{
  --bg:#fff3d6; --ink:#2b1a12; --muted:#6f5a45; --card:#fffaf0; --line:#e9d3a0;
  --red:#d7263d; --gold:#ffc53d; --gold-d:#c98414; --wood:#8a5a2b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit}
:focus-visible{outline:3px solid #1b6dd6; outline-offset:3px; border-radius:6px}

/* Festoon lights: a string with alternating red/gold bulbs. Decorative only. */
.lights{
  height:28px;
  background:
    radial-gradient(circle at 12px 14px, var(--red) 0 5px, transparent 6px) 0 0/48px 28px repeat-x,
    radial-gradient(circle at 36px 14px, var(--gold) 0 5px, transparent 6px) 0 0/48px 28px repeat-x,
    linear-gradient(var(--wood),var(--wood)) 0 8px/100% 2px no-repeat;
}

.wrap{max-width:1040px; margin:0 auto; padding:0 16px}
.hero{text-align:center; padding:28px 0 8px}
.eyebrow{margin:0; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:var(--red)}
h1{margin:4px 0 8px; font-size:clamp(2rem,6vw,3.2rem); line-height:1.1}
.lead{margin:0 auto; max-width:34em; color:var(--muted); font-size:clamp(1rem,2.4vw,1.15rem)}

h2{font-size:1.4rem; margin:0 0 12px}
.games{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.card{
  display:flex; flex-direction:column; height:100%; text-decoration:none; overflow:hidden;
  background:var(--card); border:2px solid var(--ink); border-radius:18px;
  box-shadow:0 6px 0 rgba(43,26,18,.18); transition:transform .12s, box-shadow .12s;
}
.card:hover{transform:translateY(-3px); box-shadow:0 9px 0 rgba(43,26,18,.18)}
.card:active{transform:translateY(2px); box-shadow:0 2px 0 rgba(43,26,18,.18)}
.thumb{
  height:128px; display:grid; place-items:center; font-size:64px; line-height:1;
  background:linear-gradient(135deg,var(--a),var(--b)); border-bottom:2px solid var(--ink);
}
.card-body{display:flex; flex-direction:column; flex:1; padding:14px 16px 16px}
.card h2{margin:0 0 6px; font-size:1.2rem; line-height:1.2}
.card p{margin:0 0 12px; color:var(--muted); font-size:.95rem}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 12px; padding:0; list-style:none}
.tags li{font-size:.75rem; font-weight:700; padding:2px 10px; border-radius:99px; background:#f6e5b8; color:#5a3d12}
.play{
  align-self:flex-start; font-weight:800; padding:8px 22px; border-radius:99px;
  background:var(--gold); color:#4a2f00; box-shadow:0 4px 0 var(--gold-d);
}

/* Ads: the slot is hidden until the ad script has actually loaded, so ad
   blockers or a missing config never leave an empty hole in the page. A
   min-height reserves space to avoid layout shift; if the ad comes back
   unfilled the whole slot is hidden again. Generous margins keep ads well
   away from the game cards (accidental-click policy). */
.ad-slot{margin:48px auto 0; max-width:970px; min-height:120px; text-align:center}
.ad-slot small{display:block; margin-bottom:4px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ad-slot:has(ins[data-ad-status="unfilled"]){display:none}

.about{margin:48px auto 0; max-width:44em}
.about p{color:var(--muted)}

.prose{max-width:44em; margin:0 auto; padding:24px 0 8px}
.prose h2{margin-top:28px}
.prose p, .prose li{color:var(--muted)}

footer{margin-top:56px; padding:20px 0 32px; border-top:2px solid var(--line); text-align:center; font-size:.9rem; color:var(--muted)}
footer a{margin:0 8px}

@media (prefers-reduced-motion:reduce){
  .card{transition:none}
}

/* Guide pages (generated by tools/sync-seo.py) */
.crumbs{font-size:.9rem; margin:0 0 4px}
.prose .cta{display:inline-block; text-decoration:none; margin:4px 0 8px}
.prose .more{padding-left:1.2em}
.guides ul{padding-left:1.2em; color:var(--muted)}

/* Hub cards: the whole card clicks through the game link's stretched ::after, so the
   "How to play" link can be a separate, real link. */
.card{position:relative}
.card-link{color:inherit; text-decoration:none}
.card-link::after{content:""; position:absolute; inset:0}
.card-link:focus-visible{outline:none}
.card:has(.card-link:focus-visible){outline:3px solid #1b6dd6; outline-offset:3px}
.card-actions{display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px}
.guide-link{position:relative; z-index:1; font-size:.85rem; font-weight:700; color:var(--muted)}
.guide-list{list-style:none; padding:0}
.guide-list li{margin:0 0 14px}