/* The shared look of the whole site: palette, type, buttons, header and menu, parchment, footer.
   The home page adds its own sections inline; the game pages (privacy, delete, keep) add theirs below. */
:root{
  /* The design board's palette (owner's mock-up, 2026-10-22). */
  --midnight:#1a1630;
  --midnight-2:#221b3d;
  --plum:#4b2e5b;
  --forest:#2e5b45;
  --sage:#8ca68b;
  --cream:#f9eedd;
  --parchment:#f4e6cc;
  --ember:#f4a261;
  --sunlight:#f6c453;
  --rust:#c15a3a;
  --clay:#8d6e56;
  --charcoal:#3b2f2a;
  --ink:#2b2236;
  --ink-soft:#5b4c4a;
  --on-dark:#f9eedd;
  --on-dark-soft:#d9cdbf;
  --line-gold:rgba(246,196,83,.32);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px;
  --pad:clamp(1rem,5vw,2.5rem);
  --radius:16px;
  /* A torn paper edge, drawn once and repeated along a section's top or bottom. */
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 6.9 L9 7.7 L16 3.9 L32 4.1 L48 3.7 L64 5.6 L71 8.2 L78 5.9 L94 8.1 L110 4.5 L119 10.6 L135 14.4 L151 10 L158 14.7 L165 9.7 L174 6.5 L183 9.5 L199 6.7 L208 4.2 L224 10.7 L235 4.2 L242 9.8 L258 5.5 L274 8.1 L285 8.6 L298 7.3 L307 12.5 L316 4 L327 9.3 L338 11.8 L349 10.3 L356 4.4 L369 5 L380 4.8 L393 8.1 L400 12.2 L416 12.5 L427 7.1 L438 10.1 L454 12.6 L461 13.1 L472 8.7 L479 3.7 L480 6.9 L480 24Z'/%3E%3C/svg%3E");
  /* Paper grain for the parchment sections. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--midnight);
  color:var(--on-dark);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font:800 .78rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ember);
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--sunlight);outline-offset:3px;border-radius:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:.7rem 1.5rem;border-radius:14px;
  font:800 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{
  background:linear-gradient(180deg,#f8cd6a,var(--sunlight) 45%,#efb046);color:var(--charcoal);
  box-shadow:0 2px 0 #c98a2c, 0 8px 22px -8px rgba(246,196,83,.65);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 0 #c98a2c, 0 14px 28px -10px rgba(246,196,83,.75)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 0 #c98a2c}
.btn-ghost{border-color:rgba(249,238,221,.75);color:var(--on-dark);background:rgba(26,22,48,.25)}
.btn-ghost:hover{background:rgba(249,238,221,.12);transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{position:absolute;inset:0 0 auto;z-index:30}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:.9rem;max-width:1280px}
.brand{flex:none;display:block}
.brand img{width:clamp(150px,34vw,210px);height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.nav{display:flex;gap:2rem;margin-inline:auto}
.nav a{
  text-decoration:none;font-weight:700;font-size:.98rem;color:var(--on-dark);padding:.4rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--sunlight);
  transform:scaleX(0);transition:transform .2s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--sunlight)}
.header-cta{min-height:44px;padding:.5rem 1.15rem;font-size:.92rem}
.menu-toggle{
  display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:0;cursor:pointer;
  background:rgba(26,22,48,.55);color:var(--on-dark);align-items:center;justify-content:center;
}
.menu-toggle svg{width:26px;height:26px}
@media (max-width:899px){
  .nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex}
  .site-header.open .nav{
    display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% - .4rem);left:var(--pad);right:var(--pad);
    background:rgba(26,22,48,.97);border:1px solid var(--line-gold);border-radius:var(--radius);padding:.5rem 1.25rem;
    box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  }
  .site-header.open .nav a{padding:.85rem 0;border-bottom:1px solid rgba(249,238,221,.08)}
  .site-header.open .nav a:last-child{border-bottom:0}
  .site-header.open .nav a::after{display:none}
}


/* ---------- parchment and torn edges ---------- */
.paper{
  position:relative;color:var(--ink);
  background:var(--grain),radial-gradient(120% 90% at 50% 40%,var(--cream) 0%,var(--parchment) 70%,#ead6b4 100%);
}
.torn-top::before,.torn-bottom::after{
  content:"";position:absolute;left:0;right:0;height:22px;z-index:2;pointer-events:none;
  -webkit-mask:var(--torn) 0 0/480px 22px repeat-x;mask:var(--torn) 0 0/480px 22px repeat-x;
}
.torn-top::before{top:-21px}
.torn-bottom::after{bottom:-21px;transform:scaleY(-1)}
.paper.torn-top::before,.paper.torn-bottom::after{background:var(--parchment)}
.band.torn-top::before,.band.torn-bottom::after{background:var(--midnight-2)}

/* ---------- footer ---------- */
footer{background:#141127;padding:2.6rem 0 2rem;color:var(--on-dark-soft);font-size:.92rem}
.foot{display:grid;gap:1.6rem;justify-items:center;text-align:center}
.foot .brand img{width:170px;height:auto}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.8rem}
.foot nav a{text-decoration:none;color:var(--on-dark);font-weight:700}
.foot nav a:hover{color:var(--sunlight)}
.contact a{color:var(--sunlight);font-weight:800}
.legal{font-size:.82rem;line-height:1.7;color:rgba(217,205,191,.75)}
.legal a{color:inherit}
@media (min-width:900px){
  .foot{grid-template-columns:auto 1fr auto;justify-items:stretch;text-align:left;align-items:center}
  .foot nav{justify-content:center}
  .contact{text-align:right}
  .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:2rem;border-top:1px solid rgba(249,238,221,.08);padding-top:1.4rem}
  .legal span:last-child{text-align:right}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- game pages (privacy, delete, keep) ---------- */
/* The header sits on its own midnight bar here instead of over a hero painting. */
.site-header.solid{
  position:relative;
  background:radial-gradient(70% 140% at 75% 0%,rgba(75,46,91,.6),transparent 70%),var(--midnight);
}
.site-header.solid .brand img{width:clamp(120px,30vw,160px)}
.page-band{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight);padding:2.2rem 0 4.2rem}
.page-band-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.page-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,22,48,.9),rgba(26,22,48,.6))}
.page-title{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:48rem}
.page-title .badge{width:min(230px,66%);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.page-title .badge.icon{width:96px;border-radius:22px}
.page-title h1{font-size:clamp(2.1rem,7vw,3.1rem);color:var(--cream);margin-top:.3rem}
.page-title .sub{color:var(--on-dark-soft);margin-top:.35rem;font-size:1.05rem}
@media (min-width:700px){.page-title{flex-direction:row;align-items:center;gap:1.75rem}}
.page-body{padding:3rem 0 4rem}
.page-body .wrap{max-width:52rem}
.sheet{
  background:rgba(255,251,243,.72);border:1px solid rgba(141,110,86,.3);border-radius:18px;
  padding:clamp(1.4rem,5vw,2.75rem);box-shadow:0 18px 40px -26px rgba(43,26,20,.55);
  color:#3a3040;font-size:1.02rem;line-height:1.7;
}
.sheet a{color:var(--rust);font-weight:700;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.sheet a.btn{font-weight:800;text-decoration:none}
/* Buttons keep their own text colours over the sheet's link colour. */
.sheet a.btn-primary{color:var(--charcoal)}
.sheet a.btn-danger{color:var(--cream)}
.sheet a.btn-ghost{color:var(--ink)}
.sheet strong{color:var(--ink)}
.sheet .updated{color:var(--clay);font-size:.92rem;font-weight:700;margin-bottom:1.2rem}
.sheet h2{font-size:1.4rem;color:var(--ink);margin:2.1rem 0 .65rem}
.sheet p{margin:0 0 .95rem}
.sheet ul{margin:0 0 .95rem;padding-left:1.25rem}
.sheet li{margin-bottom:.4rem}
.sheet li::marker{color:var(--ember)}
.sheet .lede{font-size:1.08rem;margin-bottom:1.4rem}
.sheet .note{color:var(--ink-soft);font-size:.95rem;margin-top:1.4rem}
.sheet .actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}
.sheet .btn-ghost{color:var(--ink);border-color:rgba(43,34,54,.45);background:transparent}
.sheet .btn-ghost:hover{background:rgba(43,34,54,.06)}
.btn-danger{background:var(--rust);color:var(--cream);box-shadow:0 2px 0 #8f3f27, 0 8px 22px -10px rgba(193,90,58,.7)}
.btn-danger:hover{transform:translateY(-2px);background:#cf6644}
.btn-block{width:100%}
@media (min-width:600px){.btn-block{width:auto}}
.steps{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}
.steps li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;margin:0;
  padding:1rem 1.1rem;border-radius:14px;background:rgba(244,230,204,.7);border:1px solid rgba(141,110,86,.25);
}
.steps .n{
  width:1.9rem;height:1.9rem;border-radius:999px;display:grid;place-items:center;
  background:var(--sunlight);color:var(--charcoal);font-weight:800;font-size:.9rem;
}
.steps strong{display:block;font-family:var(--serif);font-size:1.08rem}
.steps span{color:var(--ink-soft);font-size:.95rem}