/* Shared style for the static site pages (how-to-play, privacy, 404). The game page has its own
   inline styles; this file stays small so the guide loads fast on a phone. */
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/rajdhani-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
:root{ color-scheme:dark; --bg:#05060e; --bg2:#0a0d1c; --panel:rgba(255,255,255,.04); --hair:rgba(255,255,255,.12);
  --text:#e8ecff; --dim:#a3acd0; --cyan:#22d3ee; --violet:#7c6cff; --pink:#ff2d8b; --amber:#ffb020; --green:#3affa0;
  --display:'Rajdhani','Segoe UI',system-ui,-apple-system,sans-serif; --body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; }
*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{ margin:0; background:radial-gradient(1200px 600px at 50% -200px,rgba(124,108,255,.18),transparent 70%),var(--bg);
  color:var(--text); font:16px/1.65 var(--body); -webkit-text-size-adjust:100%; }
a{ color:var(--cyan); text-underline-offset:3px; }
a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
img{ max-width:100%; height:auto; }
.wrap{ width:100%; max-width:860px; margin:0 auto; padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right)); }
.site-head{ border-bottom:1px solid var(--hair); background:rgba(5,6,14,.85); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:12px; }
.brand{ font:700 22px/1 var(--display); letter-spacing:.08em; color:var(--text); text-decoration:none; }
.brand b{ background:linear-gradient(100deg,#22d3ee,#7c6cff 55%,#ff2d8b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.site-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.site-nav a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:10px; color:var(--dim); text-decoration:none; font-weight:600; }
.site-nav a[aria-current="page"],.site-nav a:hover{ color:var(--text); }
main{ padding-block:28px 48px; }
h1,h2,h3{ font-family:var(--display); line-height:1.15; letter-spacing:.02em; }
h1{ font-size:clamp(34px,7vw,52px); margin:.2em 0 .3em; }
h2{ font-size:clamp(25px,4.6vw,32px); margin:1.9em 0 .5em; color:#fff; }
h3{ font-size:21px; margin:1.3em 0 .3em; }
p,li{ color:var(--text); }
.lede{ font-size:18px; color:var(--dim); max-width:62ch; }
.hero{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media (min-width:720px){ .hero{ grid-template-columns:1.25fr .75fr; } }
.hero figure{ margin:0 auto; max-width:280px; }
@media (min-width:720px){ .hero figure{ max-width:none; } }
.hero img{ border-radius:18px; border:1px solid var(--hair); box-shadow:0 20px 60px rgba(34,211,238,.12); }
.cta{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; margin-top:8px; border-radius:40px;
  font:700 18px/1 var(--display); letter-spacing:.12em; color:#05060e; text-decoration:none; background:linear-gradient(100deg,#22d3ee,#7c6cff); }
.cta:hover{ filter:brightness(1.1); }
.panel{ background:var(--panel); border:1px solid var(--hair); border-radius:16px; padding:4px 20px; }
.table-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:15px; }
th,td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--hair); }
th{ font-family:var(--display); font-size:17px; letter-spacing:.04em; color:var(--dim); }
.dot{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:8px; box-shadow:0 0 10px currentColor; vertical-align:0; }
kbd{ font:600 13px/1 var(--body); padding:3px 7px; border:1px solid var(--hair); border-bottom-width:2px; border-radius:6px; background:var(--bg2); }
.hot{ color:var(--pink); font-weight:600; } .cool{ color:var(--cyan); font-weight:600; } .warn{ color:var(--amber); font-weight:600; }
details{ border-bottom:1px solid var(--hair); padding:12px 0; }
summary{ cursor:pointer; font-weight:600; min-height:32px; }
details p{ margin:.6em 0 .2em; color:var(--dim); }
.site-foot{ border-top:1px solid var(--hair); color:var(--dim); font-size:14px; }
.site-foot .wrap{ display:flex; gap:10px 18px; flex-wrap:wrap; justify-content:space-between; padding-block:18px max(18px,env(safe-area-inset-bottom)); }
.site-foot a{ color:var(--dim); }