:root{
  --bg:#0d0f11;
  --panel:#171a1d;
  --panel2:#121518;
  --text:#f3efe5;
  --muted:#aaa79f;
  --line:#2b3034;
  --warm:#f1a33b;
  --warm2:#ffd28b;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% 3%,rgba(241,163,59,.11),transparent 30rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
.site-header{
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line);
}
.brand img{display:block;width:210px;height:auto}
nav{display:flex;gap:28px;color:var(--muted);font-size:.9rem}
nav a:hover,footer a:hover{color:var(--warm2)}
.hero{
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
  min-height:650px;
  padding:78px 0 95px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.hero-logo-wrap{width:min(900px,100%);margin-bottom:20px}
.hero-logo{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 40px rgba(0,0,0,.3))}
.lede{max-width:700px;color:#d3d0c8;font-size:clamp(1.08rem,2vw,1.35rem);margin:18px 0 30px}
.button{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid rgba(241,163,59,.55);background:rgba(241,163,59,.08);color:var(--warm2);border-radius:6px;font-weight:700}
.button:hover{background:rgba(241,163,59,.14)}
.section{width:min(calc(100% - 40px),var(--max));margin:auto;padding:110px 0;border-top:1px solid var(--line)}
.eyebrow,.status,.subtitle{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.eyebrow,.status{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm);margin:0 0 18px}
h2,h3,p{margin-top:0}
h2{font-size:clamp(2.6rem,5vw,4.5rem);line-height:1;letter-spacing:-.045em;margin-bottom:42px}
.game-card{display:grid;grid-template-columns:1.08fr .92fr;min-height:420px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.art{position:relative;min-height:420px;background:linear-gradient(to bottom,#22272b 0 56%,#6f6653 56% 70%,#4a453b 70%);overflow:hidden}
.road{position:absolute;left:0;right:0;bottom:18%;height:4px;background:#242627}
.walker{position:absolute;left:48%;bottom:calc(18% + 4px);width:14px;height:28px;border-radius:8px 8px 4px 4px;background:var(--warm);box-shadow:0 0 26px rgba(241,163,59,.28)}
.walker:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;left:2px;top:-9px;background:var(--warm2)}
.game-copy{padding:48px;align-self:center}
.game-copy h3{font-size:clamp(2.2rem,4vw,3.7rem);line-height:1;letter-spacing:-.04em;margin-bottom:8px}
.subtitle{color:var(--warm2);margin-bottom:24px}
.game-copy>p:not(.status):not(.subtitle){color:#c9c5bc}
.muted{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}
.about{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:start}
.about-intro>p:not(.eyebrow){color:#c9c5bc;max-width:520px;font-size:1.05rem}
.why-card{background:linear-gradient(180deg,rgba(241,163,59,.055),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:14px;padding:38px 40px 34px;color:#cbc7be}
.why-card strong{color:var(--text)}
.pronunciation{display:block;margin-top:2px;color:var(--warm2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem}
.why-card .last-line{margin-bottom:0;color:var(--warm2)}
footer{width:min(calc(100% - 40px),var(--max));margin:auto;padding:44px 0 52px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:20px;color:var(--muted);font-size:.9rem}
footer strong{color:var(--text);letter-spacing:.08em}
footer p{margin-bottom:0}
.copyright{grid-column:1/-1;margin-top:22px;font-size:.78rem}
@media(max-width:800px){
  .site-header{padding:20px 0;align-items:flex-start}
  .brand img{width:165px}
  nav{gap:16px;flex-wrap:wrap;justify-content:flex-end}
  .hero{min-height:520px;padding:60px 0 70px}
  .game-card{grid-template-columns:1fr}
  .art{min-height:280px}
  .game-copy{padding:34px 28px 40px}
  .about{grid-template-columns:1fr;gap:30px}
  footer{grid-template-columns:1fr}
  .copyright{grid-column:1}
}
@media(max-width:520px){
  .site-header{display:block}
  nav{margin-top:14px;justify-content:flex-start}
  .brand img{width:180px}
  .hero{padding-top:52px}
  .section{padding:78px 0}
  .why-card{padding:28px 24px}
}