/* Fun Text Adventures — site chrome. Same palette as the games so the
   supporting pages and the play pages read as one product.               */
:root{
  --ink:#0e0c0a; --panel:#1c1813; --panel-2:#231e18;
  --edge:#3a3128; --edge-hi:#544636;
  --parchment:#e9dfcb; --parchment-dim:#b3a68e; --muted:#7d7263;
  --brass:#d9a441; --brass-dim:#8a6a2c; --jade:#6fbf9a; --rust:#cc5b3a;
  --mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;background:radial-gradient(120% 70% at 50% -10%,#241d15 0%,transparent 60%),var(--ink);
  color:var(--parchment);font-family:var(--mono);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
a{color:var(--brass)}
a:hover{color:#f0c268}

header.site{border-bottom:1px solid var(--edge);background:linear-gradient(180deg,#1a1610,#141009)}
header.site .wrap{display:flex;align-items:center;gap:20px;padding:14px 20px;flex-wrap:wrap}
.logo{font-family:var(--serif);font-size:20px;letter-spacing:.04em;text-decoration:none;color:var(--parchment);white-space:nowrap}
.logo span{color:var(--brass)}
nav.site{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
nav.site a{font-size:13px;text-decoration:none;color:var(--parchment-dim);letter-spacing:.04em}
nav.site a:hover,nav.site a[aria-current]{color:var(--brass)}

main{padding:40px 0 60px}
h1{font-family:var(--serif);font-size:34px;line-height:1.2;margin:0 0 8px;letter-spacing:.01em}
h2{font-family:var(--serif);font-size:24px;margin:38px 0 12px;color:var(--parchment)}
h3{font-size:15px;margin:26px 0 8px;color:var(--brass);letter-spacing:.06em;text-transform:uppercase}
.lede{font-size:17px;color:var(--parchment-dim);margin:0 0 28px;max-width:62ch}
p,li{max-width:68ch}
hr{border:0;border-top:1px solid var(--edge);margin:36px 0}
code{background:#0d0b08;border:1px solid var(--edge);border-radius:4px;padding:1px 6px;font-size:14px;color:var(--brass)}
pre{background:#0d0b08;border:1px solid var(--edge-hi);border-radius:8px;padding:14px 16px;overflow-x:auto;font-size:14px}
blockquote{border-left:2px solid var(--brass-dim);margin:20px 0;padding:2px 0 2px 16px;color:var(--parchment-dim);font-style:italic}

.btn{
  display:inline-block;background:#2a2218;border:1px solid var(--brass-dim);color:var(--brass);
  padding:11px 22px;border-radius:8px;text-decoration:none;font-size:14px;letter-spacing:.05em;
  transition:all .15s;
}
.btn:hover{background:#3a2f1e;color:#f5d896}
.btn.big{font-size:16px;padding:14px 30px}

/* game cards */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin:30px 0}
.card{
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:22px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--brass-dim);transform:translateY(-2px)}
.card h2{margin:0;font-size:21px}
.card .yr{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.card p{margin:0;color:var(--parchment-dim);font-size:14.5px;flex:1}
.card .mech{font-size:12.5px;color:var(--muted);border-top:1px dashed var(--edge);padding-top:10px;margin-top:4px}
.card .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.progress{font-size:12px;color:var(--jade)}
.card.soon{opacity:.55}
.card.soon .yr{color:var(--muted)}

/* hints */
details{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:12px 16px;margin:10px 0}
details[open]{border-color:var(--brass-dim)}
summary{cursor:pointer;color:var(--brass);font-size:14.5px}
summary::marker{color:var(--brass-dim)}
details p{margin:10px 0 2px;color:var(--parchment-dim);font-size:14.5px}
.spoiler-warn{border:1px solid var(--rust);background:#2a1410;border-radius:8px;padding:14px 18px;color:#e8b8a8;font-size:14px}

table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14px;display:block;overflow-x:auto}
th,td{border:1px solid var(--edge);padding:8px 12px;text-align:left;vertical-align:top}
th{color:var(--brass);font-weight:600;white-space:nowrap}

/* ad slots — never inside a play page */
.ad-slot{
  margin:36px 0;padding:0;min-height:90px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--edge);border-radius:8px;color:var(--muted);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;
}
footer.site{border-top:1px solid var(--edge);padding:26px 0 40px;color:var(--muted);font-size:13px}
footer.site .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--parchment-dim);text-decoration:none}
footer.site a:hover{color:var(--brass)}
footer.site .sp{margin-left:auto}
@media (max-width:620px){
  h1{font-size:27px} main{padding:28px 0 40px}
  nav.site{gap:12px;width:100%;margin-left:0}
}

/* the "what makes each one different" list on the index — one line per game,
   read as a scannable table rather than as prose, because a visitor deciding
   what to play wants to compare, not to read a paragraph */
ul.plain{list-style:none;padding:0;margin:22px 0;display:grid;gap:9px}
ul.plain li{
  padding:11px 16px;background:var(--panel);border:1px solid var(--edge);
  border-radius:8px;color:var(--parchment-dim);font-size:14.5px;line-height:1.5;
}
ul.plain li strong{color:var(--brass);font-weight:600}

/* the way out for a player who is stuck enough to be reading hints */
.contact-note{
  border-left:3px solid var(--brass-dim);padding:12px 0 12px 16px;margin:26px 0;
  color:var(--parchment-dim);font-size:14.5px;
}

/* contact: the address has to be readable and copyable on a machine where
   mailto: does nothing at all, which is most of the awkward ones */
.addr-block{
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;
  padding:24px;margin:26px 0;
}
.addr{
  font-size:clamp(17px,4.2vw,24px);color:var(--brass);letter-spacing:.02em;
  word-break:break-all;user-select:all;margin-bottom:16px;
}
.addr-block .btn{margin:0 10px 10px 0}
.addr-note{font-size:13.5px;color:var(--muted);margin:8px 0 0}