:root{
  --bg:#faf9f7; --fg:#1a1a1a; --muted:#5f5f5f; --card:#ffffff;
  --line:#e4e1dc; --accent:#D6362C;
}
:root[data-game="river"]{ --accent:#1F6FA8; }
@media (prefers-color-scheme:dark){
  :root{ --bg:#141413; --fg:#f2f0ed; --muted:#a3a09b; --card:#1f1e1c; --line:#33312e; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 20px;display:flex;flex-direction:column;min-height:100vh}
main{width:100%;max-width:34rem;margin:0 auto;padding-block:clamp(3rem,12vh,6rem);flex:1}
h1{font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 .6rem}
p{color:var(--muted);margin:0 0 1.5rem}
.eyebrow{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 .7rem}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.8rem 1.4rem;border-radius:10px;font-weight:600;font-size:.97rem}
.btn:hover{opacity:.9}
.card{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:.8rem}
.card:hover{border-color:var(--accent)}
.card strong{display:block;font-size:1.05rem;margin-bottom:.15rem}
.card span{color:var(--muted);font-size:.9rem}
footer{width:100%;max-width:34rem;margin:0 auto;padding-block:2rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
footer a{color:var(--muted)}