:root{
  --sky-top:#2c3a6b; --sky-mid:#7a5a7a; --sky-warm:#e8945a; --horizon:#f2b06a;
  --ground:#3a5a2a; --runway:#2a1f1a; --brown:#6b4a2a;
  --gold:#ffcc44; --plane:#c85a2a; --cream:#f5ecd8; --ink:#1a1826;
  --fable:#ffcc44; --sonnet:#6fb7ff;
  --card:#241f33cc; --line:#00000033;
  --mono:"DejaVu Sans Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--mono); color:var(--cream); background:var(--sky-top);
  line-height:1.55; -webkit-font-smoothing:none; overflow-x:hidden;
}
#sky{position:fixed; inset:0; width:100%; height:100%; z-index:-1; image-rendering:pixelated; display:block}
.wrap{max-width:960px; margin:0 auto; padding:0 20px}
a{color:var(--gold); text-decoration:none}
h1,h2,h3{line-height:1.1; letter-spacing:.02em}
b{color:#fff}

/* hero */
.hero{min-height:82vh; display:flex; align-items:center; text-align:center;
  padding:60px 0 40px; text-shadow:0 2px 0 #0007}
.kicker{text-transform:uppercase; letter-spacing:.5em; font-size:12px; color:var(--gold); margin:0 0 14px}
h1{font-size:clamp(48px,13vw,132px); margin:0; color:#fff;
  text-shadow:0 4px 0 var(--plane),0 8px 0 #0006; letter-spacing:.04em}
.tagline{font-size:clamp(15px,2.4vw,20px); max-width:640px; margin:22px auto 30px}
.tagline .fable{color:var(--fable); font-weight:bold}
.tagline .sonnet{color:var(--sonnet); font-weight:bold}
.cta{display:inline-block; background:var(--gold); color:#3a2410; font-weight:bold;
  padding:12px 26px; border:0; border-bottom:4px solid #a6801f; text-transform:uppercase;
  letter-spacing:.1em; font-size:14px}
.cta:hover{filter:brightness(1.08); transform:translateY(-1px)}

/* content cards */
section{padding:34px 0}
.card-lite{background:var(--card); backdrop-filter:blur(3px); border:1px solid #ffffff1a;
  border-radius:10px; padding:26px 28px; box-shadow:0 10px 40px #0005}
h2{font-size:clamp(22px,4vw,32px); margin:0 0 14px; color:var(--gold)}
.explain ul{margin:10px 0 0; padding-left:20px}
.explain li{margin:8px 0}

/* matchups */
.matchups{padding-top:8px}
.track{margin-bottom:30px}
.track-title{text-align:center; margin-bottom:18px; color:#fff;
  text-shadow:0 2px 0 #0007; font-size:clamp(18px,3.4vw,26px)}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.game{position:relative; background:#1c1830e0; border-radius:12px; overflow:hidden;
  border:2px solid #ffffff14; box-shadow:0 8px 30px #0006; transition:transform .12s,box-shadow .12s}
.game:hover{transform:translateY(-4px); box-shadow:0 14px 40px #0008}
.game.fable-card{border-color:#ffcc4455}
.game.sonnet-card{border-color:#6fb7ff55}
.game img{width:100%; height:auto; display:block; image-rendering:auto; aspect-ratio:16/9; object-fit:cover;
  border-bottom:2px solid #0004}
.badge{position:absolute; top:10px; left:10px; z-index:2; font-size:11px; font-weight:bold;
  text-transform:uppercase; letter-spacing:.14em; padding:5px 12px; border-radius:4px; color:#1a1310}
.badge.fable{background:var(--fable)}
.badge.sonnet{background:var(--sonnet)}
.game-foot{display:flex; align-items:center; justify-content:space-between; padding:14px 16px}
.game-foot h3{margin:0; font-size:16px; color:var(--cream)}
.play-btn{font-weight:bold; padding:9px 18px; border-radius:6px; font-size:14px;
  border-bottom:3px solid #0005; color:#1a1310}
.play-btn.fable{background:var(--fable)}
.play-btn.sonnet{background:var(--sonnet)}
.play-btn:hover{filter:brightness(1.1)}
.hint{text-align:center; font-size:13px; color:#e8dcc4bb; margin-top:8px}

/* method */
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0}
.chk{background:#1c3a1cbb; color:#a9e88a; border:1px solid #6fb04a55; padding:6px 12px;
  border-radius:5px; font-size:13px}
.fine{font-size:12.5px; color:#e8dcc499}

footer{padding:36px 0 60px; border-top:1px solid #ffffff14; margin-top:20px; text-align:center;
  background:#171326cc}
footer p{margin:6px 0}

@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  h1{text-shadow:0 3px 0 var(--plane),0 6px 0 #0006}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }