:root { color-scheme:dark; }
html { scroll-behavior:smooth; }
body:has(.game-page:not(.has-site-info)) .site-guide { display:none; }

.site-guide { padding:clamp(36px,6vw,88px) 20px; color:#fff7d6; background:linear-gradient(160deg,#09061d,#1b1035 55%,#0a071d); font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
.site-guide-inner { width:min(1120px,100%); margin:auto; }
.site-guide-kicker { margin:0 0 14px; color:#56e8ed; font-size:12px; font-weight:900; letter-spacing:.22em; }
.site-guide h1 { margin:0 0 18px; color:#ffe46d; font-size:clamp(32px,5.5vw,64px); line-height:1.05; letter-spacing:-.06em; text-shadow:4px 4px #4d215f; }
.site-guide-lede { max-width:820px; margin:0 0 32px; font-size:clamp(16px,2vw,21px); line-height:1.55; }
.site-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.site-guide-grid > div { padding:22px; border:2px solid #63339b; background:#100b28; }
.site-guide h2 { margin:0 0 12px; color:#56e8ed; font-size:18px; }
.site-guide-grid p { margin:0; color:#d3d8ef; font-size:14px; line-height:1.65; }
.site-guide-nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.site-guide-nav a { display:inline-block; padding:12px 15px; border:2px solid #a46ae0; color:#fff7d6; background:#562b8d; font-size:13px; font-weight:900; text-decoration:none; }
.site-guide-nav a:hover,.site-guide-nav a:focus-visible { border-color:#fff5cb; color:#241031; background:#ffe46d; outline:0; }

body.info-page { margin:0; min-height:100vh; color:#fff7d6; background:radial-gradient(circle at 20% 0,#31216a,#0a071d 55%); font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
.info-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:18px max(20px,calc((100vw - 1120px)/2)); border-bottom:3px solid #63339b; background:#130b2b; }
.info-brand { color:#ffe46d; font-size:17px; font-weight:900; text-decoration:none; }
.info-header nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.info-header nav a,.info-footer a,.info-main a { color:#8ff4fa; text-underline-offset:3px; }
.info-header nav a[aria-current="page"] { color:#ffe46d; font-weight:900; }
.info-header a:focus-visible,.info-main a:focus-visible,.info-footer a:focus-visible { outline:3px solid #ffe46d; outline-offset:4px; }
.info-main { width:min(900px,calc(100% - 40px)); margin:clamp(32px,5vw,70px) auto 70px; }
.info-kicker { margin:0 0 13px; color:#56e8ed; font-size:12px; font-weight:900; letter-spacing:.2em; }
.info-main h1 { margin:0 0 18px; color:#ffe46d; font-size:clamp(34px,6vw,62px); line-height:1.1; letter-spacing:-.06em; text-shadow:4px 4px #4d215f; }
.info-lede { font-size:clamp(17px,2.2vw,22px); line-height:1.55; }
.info-main section { margin-top:36px; padding-top:22px; border-top:2px solid #4e2c72; }
.info-main h2 { margin:0 0 12px; color:#56e8ed; font-size:clamp(20px,2.5vw,28px); }
.info-main h3 { color:#ffe46d; font-size:17px; }
.info-main p,.info-main li { color:#d3d8ef; font-size:15px; line-height:1.75; }
.info-main p { margin:0 0 16px; }
.info-main ul,.info-main ol { margin:0 0 18px; padding-left:25px; }
.info-main li + li { margin-top:7px; }
.info-main strong { color:#fff7d6; }
.info-main .callout { margin-top:30px; padding:20px 22px; border:2px solid #63339b; background:#160d32; }
.info-main .callout p:last-child { margin-bottom:0; }
.info-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding:22px max(20px,calc((100vw - 1120px)/2)); border-top:2px solid #63339b; color:#aeb8d6; font-size:13px; }
@media (max-width:760px) { .site-guide-grid { grid-template-columns:1fr; } .info-header { padding:18px 20px; } .info-footer { padding:22px 20px; } }