@layer reset, base, components, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
}
@layer base {
  :root { color-scheme: dark; --bg:#101115; --surface:#191a20; --text:#f2f1f7; --muted:#a9a9b6; --accent:#b7a2ff; --line:#303139; --radius:16px; }
  html { scroll-behavior:smooth; scroll-padding-top:30px; }
  body { background:var(--bg); color:var(--text); font-family:Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-underline-offset:5px; }
  a:hover { color:var(--accent); }
  a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:6px; border-radius:3px; }
  h1, h2, h3 { line-height:1.12; letter-spacing:-.045em; font-weight:700; text-wrap:balance; }
  h1 { font-size:clamp(2.8rem, 5.7vw, 5rem); }
  h2 { font-size:clamp(2rem, 3.2vw, 2.8rem); }
  h3 { font-size:1.65rem; }
  p { color:var(--muted); }
  ::selection { background:var(--accent); color:var(--bg); }
}
@layer components {
  .container { width:min(1180px, calc(100% - 80px)); margin-inline:auto; }
  .skip { position:absolute; left:20px; top:-100px; z-index:10; padding:10px 20px; background:var(--accent); color:var(--bg); }
  .skip:focus { top:12px; }
  .site-header { border-bottom:1px solid var(--line); }
  .header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:100px; }
  .brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:1rem; font-weight:650; line-height:1.25; letter-spacing:-.025em; }
  .brand-second { display:block; font-weight:450; color:var(--muted); }
  .site-header nav { display:flex; align-items:center; gap:32px; }
  .site-header nav a { padding:12px 0; color:var(--muted); font-size:.9375rem; text-decoration:none; }
  .site-header nav a:hover, .site-header nav a[aria-current], .site-header nav a.in-section { color:var(--text); }
  .site-header nav a[aria-current] { box-shadow:0 2px var(--accent); }
  .home-hero { display:grid; grid-template-columns:1.45fr 1fr; align-items:center; gap:50px; padding-block:86px 90px; }
  .eyebrow { font-size:.75rem; font-weight:650; text-transform:uppercase; letter-spacing:.13em; line-height:1.6; margin-bottom:18px; }
  .accent { color:var(--accent); }
  .hero-copy h1 span { color:var(--accent); }
  .intro { font-size:1.15rem; line-height:1.7; max-width:560px; margin-top:26px; }
  .hero-copy .button { margin-top:32px; }
  .geometry { color:var(--accent); text-align:center; position:relative; padding:12px; }
  .geometry svg { width:100%; max-width:370px; stroke-width:1.2; }
  .geometry-label { display:block; color:var(--muted); font-size:.8125rem; letter-spacing:.03em; margin-top:10px; }
  .button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:50px; padding:13px 22px; border-radius:7px; text-decoration:none; font-size:.9375rem; font-weight:650; transition:background .18s, transform .18s; }
  .button:hover { transform:translateY(-2px); }
  .primary { background:var(--accent); color:#171121; }
  .primary:hover { background:#c8b8ff; color:#171121; }
  .secondary { background:var(--surface); border:1px solid #45444f; color:var(--text); }
  .dark { background:#172f30; color:#fff; }
  .dark:hover { background:#244647; color:#fff; }
  .section { padding-block:40px 70px; }
  .section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:32px; }
  .section-heading .eyebrow { margin-bottom:12px; }
  .text-link { font-size:.9375rem; text-decoration:none; display:inline-flex; gap:18px; align-items:center; }
  .game-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .game-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .card-image { display:flex; height:260px; overflow:hidden; align-items:center; justify-content:center; }
  .card-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
  .game-card:hover .card-image img { transform:scale(1.035); }
  .rogue .card-image { background:#80ddf6; }
  .rogue .card-image img { width:260px; height:260px; object-fit:contain; image-rendering:pixelated; }
  .card-body { padding:28px; }
  .card-body .eyebrow { color:var(--accent); margin-bottom:12px; }
  .card-body h3 a { text-decoration:none; display:flex; justify-content:space-between; gap:18px; align-items:center; }
  .card-body h3 span { font-size:1.4rem; font-weight:400; color:var(--muted); }
  .card-body > p:not(.eyebrow) { margin-top:16px; max-width:450px; }
  .card-meta { display:flex; flex-wrap:wrap; gap:8px 20px; border-top:1px solid var(--line); padding-top:20px; margin-top:24px; color:var(--muted); font-size:.8125rem; }
  .kids-feature { border-radius:var(--radius); overflow:hidden; display:grid; grid-template-columns:1fr 1.12fr; align-items:stretch; background:#c8e9d9; color:#183536; margin-bottom:50px; }
  .kids-copy { padding:44px; }
  .kids-copy p { color:#345b55; }
  .kids-copy h2 { margin-bottom:20px; }
  .kids-copy .button { margin-top:25px; }
  .kids-picture { display:block; overflow:hidden; }
  .kids-picture img { width:100%; height:100%; object-fit:cover; }
  .support-strip { padding-block:35px 70px; display:flex; gap:28px; justify-content:space-between; align-items:center; }
  .support-strip .eyebrow { margin-bottom:10px; }
  .support-strip h2 { font-size:2rem; margin-bottom:12px; }
  .support-strip .button { flex-shrink:0; }
  .site-footer { border-top:1px solid var(--line); padding-block:40px 24px; }
  .footer-top { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .footer-top > p { grid-row:2; font-size:.875rem; }
  .footer-top nav { display:flex; align-items:start; justify-content:end; flex-wrap:wrap; gap:12px 25px; font-size:.875rem; grid-area:1 / 2 / 3 / 3; }
  .footer-top nav a { text-decoration:none; }
  .footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:36px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.8125rem; }
  .footer-bottom a { overflow-wrap:anywhere; }
  .page-head { padding-block:64px 40px; max-width:850px; }
  .page-head .intro { max-width:720px; }
  .breadcrumb { display:flex; flex-wrap:wrap; gap:10px; font-size:.875rem; color:var(--muted); margin-bottom:30px; }
  .breadcrumb a { text-decoration:none; }
  .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
  .detail-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; padding-block:64px; }
  .detail-hero h1 { font-size:clamp(2.7rem,4.7vw,4.2rem); }
  .detail-art { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
  .detail-art img { width:100%; }
  .detail-art.rogue { max-width:420px; margin-inline:auto; }
  .detail-art.rogue img { image-rendering:pixelated; }
  .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-block:40px; border-block:1px solid var(--line); }
  .feature-grid h2, .feature-grid h3 { font-size:1.35rem; margin-bottom:15px; }
  .feature-number { display:block; font-size:.8125rem; color:var(--accent); margin-bottom:20px; }
  .reading { max-width:780px; padding-bottom:70px; }
  .reading h2 { font-size:1.65rem; margin-block:36px 16px; }
  .reading h3 { font-size:1.2rem; margin-block:26px 12px; }
  .reading p + p { margin-top:16px; }
  .reading li { color:var(--muted); margin-bottom:10px; }
  .reading a { color:var(--accent); }
  .reading strong { color:var(--text); }
  .reading ul, .reading ol { padding-left:24px; }
  .notice { padding:22px 26px; margin-block:24px; border:1px solid #605172; border-left:3px solid var(--accent); background:#201d29; border-radius:7px; }
  .notice p { color:#ccc5da; }
  .support-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:36px; margin-bottom:55px; }
  .panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:32px; }
  .panel h2 { font-size:1.8rem; margin-bottom:20px; }
  .panel p + p { margin-top:16px; }
  .panel a:not(.button) { color:var(--accent); overflow-wrap:anywhere; }
  .resource { display:block; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; }
  .resource:first-of-type { padding-top:0; }
  .resource strong { display:block; font-size:1.05rem; }
  .resource span { display:block; font-size:.875rem; color:var(--muted); margin-top:5px; }
  details { border-bottom:1px solid var(--line); padding-block:20px; }
  summary { cursor:pointer; font-size:1.05rem; font-weight:600; }
  details p { margin-top:15px; }
  .policy-list { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-block:20px 40px; }
  .policy-list a { text-decoration:none; display:block; }
  .policy-list h2 { font-size:1.4rem; }
  .policy-list p { font-size:.9375rem; }
  .wide-image { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-bottom:35px; }
  .wide-image img { width:100%; }
  .kid-page { --accent:#8cdbc2; }
  .small { font-size:.875rem; }
  .purchase-note { margin-top:18px; }
  .detail-links { padding-top:55px; }
}
@layer responsive {
  @media(max-width:900px) {
    .container { width:calc(100% - 48px); }
    .home-hero { gap:25px; padding-block:65px; grid-template-columns:1.5fr 1fr; }
    .card-image { height:210px; }
    .rogue .card-image img { width:210px; height:210px; }
    .card-body { padding:23px; }
    .card-body h3 { font-size:1.4rem; }
    .kids-feature { grid-template-columns:1fr; }
    .kids-picture img { height:auto; }
    .detail-hero { gap:32px; }
    .policy-list { grid-template-columns:1fr; }
  }
  @media(max-width:620px) {
    .container { width:calc(100% - 36px); }
    .header-inner { flex-direction:column; align-items:flex-start; gap:14px; padding-block:22px 12px; }
    .site-header nav { gap:26px; width:100%; flex-wrap:wrap; }
    .site-header nav a { font-size:.875rem; }
    .home-hero { grid-template-columns:1fr; padding-block:48px; }
    .geometry { display:none; }
    .eyebrow { font-size:.75rem; }
    .intro { font-size:1.0625rem; }
    .section { padding-block:20px 45px; }
    .section-heading { align-items:start; flex-direction:column; gap:18px; }
    .game-grid, .feature-grid, .support-grid, .detail-hero { grid-template-columns:1fr; }
    .card-image { height:230px; }
    .rogue .card-image img { width:230px; height:230px; }
    .card-body h3 { font-size:1.5rem; }
    .kids-copy { padding:30px 26px; }
    .kids-feature { margin-bottom:25px; }
    .support-strip { align-items:start; flex-direction:column; padding-block:25px 50px; }
    .footer-top { display:flex; flex-direction:column; }
    .footer-top nav { justify-content:start; margin-top:10px; }
    .page-head, .detail-hero { padding-block:40px; }
    .panel { padding:26px; }
    .feature-grid { gap:28px; }
    .feature-number { margin-bottom:10px; }
    .actions .button { flex-grow:1; }
    .detail-art.rogue { max-width:320px; }
  }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }
}