:root{
      /* Polar Pop palette */
      --polar-deep:#065758;
      --polar-ice:#E2F0EF;
      --polar-mist:#A9D4D6;
      --polar-sea:#82C3C5;
      --polar-coral:#C46960;

      /* Theme (high contrast) */
      --bg:#065758;
      --bg-elev:#0c4a4c;
      --text:#E2F0EF;
      --muted:#A9D4D6;
      --card:#082f30;
      --accent:#C46960;
      --accent-2:#82C3C5;
      --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --container: 1200px;

      /* Sparkles */
      --sparkle:#fff;

      /* Astrozaar */
      --az-bg:#0e0f1d;
      --az-cyan: color-mix(in oklab, var(--accent-2) 70%, white 10%);
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    }
    a{ color:var(--accent); text-decoration:none }
    a:hover{ filter:brightness(1.1) saturate(1.05) }

    /* Header */
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
      background: color-mix(in oklab, var(--bg) 90%, transparent);
      border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
    .nav{ max-width:var(--container); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px }
    .brand .logo-img{ width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow); background:var(--bg-elev); object-fit:contain; padding:2px }
    .brand span{ color: var(--accent); }
    .nav a{ color:var(--text); opacity:.95 }
    .nav a.btn{ padding:10px 14px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700 }
    .nav a.top-btn{ background: var(--accent); color:#fff; border:1px solid color-mix(in oklab, var(--accent) 60%, transparent); }

    /* Hero */
    .hero-wrap{ background: radial-gradient(900px 600px at 12% -10%, color-mix(in oklab, var(--polar-coral) 22%, transparent), transparent 70%),
                               radial-gradient(900px 600px at 100% 0%, color-mix(in oklab, var(--polar-sea) 22%, transparent), transparent 70%),
                               color-mix(in oklab, var(--polar-ice) 14%, var(--bg)); }
    .hero{ max-width:var(--container); margin:auto; padding:56px 20px 28px; display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center }
    .hero h1{ font-size:clamp(32px,4.2vw,54px); line-height:1.05; margin:0 0 10px }
    .hero p{ color:var(--muted); margin:0 0 18px }
    .cta{ display:flex; gap:12px; flex-wrap:wrap }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow); transition: transform .12s ease; position:relative; overflow:visible; font-weight:600 }
    .btn:hover{ transform:translateY(-2px) }
    .illustration{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--text) 10%, transparent) }

    /* Sections */
    section{ padding: 42px 0 }
    section .wrap{ max-width:var(--container); margin:auto; padding:0 20px }

    /* Alternating section background (only alt-b used on this page) */
    section.alt-b{ background: radial-gradient(circle at bottom right, color-mix(in oklab, var(--polar-sea) 25%, transparent), transparent 70%), color-mix(in oklab, var(--polar-mist) 20%, var(--bg)) }

    /* Cards */
    .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
    @media (max-width:1000px){ .hero{ grid-template-columns:1fr } .grid{ grid-template-columns:1fr 1fr } }
/* Home hero: image first on mobile (use grid row swap) */
@media (max-width: 800px){
  /* Use flex on Edge/Safari for reliable reordering */
  .home-hero{ display:flex; flex-direction:column }
  .home-hero .hero-art{ order:-1; display:flex; justify-content:center }
  .home-hero .illustration{ max-width:min(540px, 90vw) }
}
    @media (max-width:640px){ .grid{ grid-template-columns:1fr } }
    .card{ background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: var(--radius); padding:16px; position:relative; overflow:hidden }
    /* About card layout: text left, image right (stacks on mobile) */
    .about-card{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
      align-items:center;
    }
    .about-card .thumb{
      width:100%;
      height:auto;
      max-height:260px;
      object-fit:cover;
    }
    @media (max-width:900px){
      .about-card{ grid-template-columns:1fr; }
    }

    .card:hover{ box-shadow:var(--shadow) }
    .card .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
    .badge{ font-size:12px; background:var(--accent-2); color:#fff; padding:4px 8px; border-radius:999px; border:none }
    .card p{ color:var(--muted); margin:8px 0 12px }
    .actions{ display:flex; gap:10px; flex-wrap:wrap }
    .thumb{ width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); margin-bottom:10px; background:var(--bg-elev) }

    /* TinkersCraft: fit by height, no crop, themed BG */
    .thumb.tc-fit{
      object-fit: contain !important;
      object-position: center;
      background: var(--az-bg);
    }

    /* --- Astrozaar custom thumbnail (starfield + meteors + black hole + glowing PNG) --- */
    .astro-card{ overflow:visible }
    .astro-thumb{
      width:100%; height:160px; margin-bottom:10px;
      background: var(--az-bg);
      border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
      position:relative; overflow:hidden;
    }
    .astro-thumb::after{
      content:""; position:absolute; inset:0;
      background: radial-gradient(60% 80% at 50% 45%, transparent 0 60%, rgba(0,0,0,.35) 100%);
      pointer-events:none;
    }
    .astro-thumb canvas.stars{
      position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0;
    }
    .astro-thumb .blackhole-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }
    .astro-thumb .meteor-layer   { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible; }
    .astro-thumb .blackhole{
      position:absolute; left:0; top:0; width:45px; height:45px; pointer-events:none;
      will-change: transform, opacity; z-index:1;
    }
    .astro-thumb .meteor{
      position:absolute; left:0; top:0; width:auto; height:auto;
      will-change: transform, opacity; image-rendering:auto; opacity:1; filter:none;
    }
    .astro-logo{
      position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
      max-width:70%; max-height:70%; width:auto; height:auto; image-rendering:auto;
      filter:
        drop-shadow(0 0 1.2px #fff)
        drop-shadow(0 0 5px var(--az-cyan))
        drop-shadow(0 0 12px color-mix(in oklab, var(--az-cyan) 80%, transparent));
      animation: azGlow 3.6s ease-in-out infinite alternate; z-index:3;
    }
    @keyframes azGlow{
      0%  { filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 4px var(--az-cyan))  drop-shadow(0 0 10px color-mix(in oklab, var(--az-cyan) 70%, transparent)); }
      100%{ filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 8px var(--az-cyan))  drop-shadow(0 0 18px color-mix(in oklab, var(--az-cyan) 80%, transparent)); }
    }

    /* --- Astrozaar neon sign (top-left) --- */
    .astro-card .neon-wrap{
      position:absolute; top:-10px; left:-56px; width: clamp(190px, 44%, 340px);
      aspect-ratio: 2.4 / 1; transform: rotate(-20deg); transform-origin: 18% 40%;
      pointer-events:none; z-index:5; mix-blend-mode: screen; isolation:isolate;
    }
    .astro-card .neon-sign{ width:100%; height:100%; display:block }
    .astro-card .neon-back{
      fill:none; stroke: color-mix(in oklab, var(--text) 18%, transparent);
      stroke-width:10; stroke-linecap:round; opacity:.35; filter: blur(.6px);
    }
    .astro-card .neon-tube{
      font: 900 26px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
      letter-spacing:.18em; text-transform:uppercase;
      --tube-alpha: .62; --stroke-alpha: .65;
      --glow-a: color-mix(in oklab, var(--accent) 45%, transparent);
      --glow-b: color-mix(in oklab, var(--accent) 25%, transparent);
      fill: url(#neon-fill); fill-opacity: var(--tube-alpha);
      stroke:#fff; stroke-opacity: var(--stroke-alpha);
      stroke-width:1.4; stroke-linejoin:round; paint-order: stroke fill;
      filter:
        drop-shadow(0 0 1.4px #fff)
        drop-shadow(0 0 4px var(--glow-a))
        drop-shadow(0 0 9px var(--glow-b));
      animation: neon-broken 4.8s infinite steps(1);
    }
    .astro-card .neon-wrap.neon-flash .neon-tube{
      --tube-alpha: .55;
      fill: url(#neon-fill-cyan);
      filter:
        drop-shadow(0 0 1px #fff)
        drop-shadow(0 0 3px color-mix(in oklab, var(--accent-2) 45%, transparent))
        drop-shadow(0 0 7px color-mix(in oklab, var(--accent-2) 30%, transparent))
        saturate(.8) brightness(.9);
    }
    @keyframes neon-broken{
      0%,6%,7%,9%,37%,38%,39%,60%,100% { opacity:1; }
      6.5%, 38.5%, 59% { opacity:.28; }
      10%, 11% { opacity:.7; }
    }
    @media (prefers-reduced-motion: reduce){
      .astro-card .neon-tube{ animation:none }
      .astro-logo{ animation:none }
    }

    /* Footer */
    footer{ border-top:1px solid color-mix(in oklab, var(--accent) 40%, transparent); background: radial-gradient(circle at 50% -30%, color-mix(in oklab, var(--polar-ice) 15%, transparent), transparent 80%), color-mix(in oklab, var(--polar-ice) 10%, var(--bg)) }
    .foot{ max-width:var(--container); margin:auto; padding:28px 20px; color:var(--muted); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between }
    footer a[href="#top"]{ color: var(--accent); }

    /* Utilities */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
    .icon{ width:22px; height:22px; display:inline-block }
    .icon svg{ width:100%; height:100% }
    #toTop{ position:fixed; right:18px; bottom:18px; opacity:0; transform:translateY(10px); transition: all .15s ease; background: var(--accent); color:#fff; }
    #toTop.show{ opacity:1; transform:none }

    /* Sparkle host for non-.btn links */
    .sparkle-host{ position:relative }

    /* Sparkles (default white) */
    .sparkle{
      position:absolute; left:0; top:0;
      width:6px; height:6px; pointer-events:none; border-radius:50%;
      background:
        radial-gradient(circle,
          #fff 0 28%,
          color-mix(in oklab, var(--sparkle) 92%, #fff) 29% 60%,
          transparent 61%);
      filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sparkle) 85%, transparent));
      transform: translate(-50%, -50%) scale(.9) rotate(0deg);
      opacity:.95;
      animation: tt-sparkle .8s ease-out forwards;
      z-index:7;
    }
    @keyframes tt-sparkle{
      to{
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(.1)
          rotate(90deg);
        opacity:0;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .sparkle{ animation:none; opacity:0 }
      .btn:hover{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--sparkle) 25%, transparent) inset; }
    }

    /* =============== ADHD: modal & button tweaks =============== */

    /* ADHD button: match hero buttons, square icon size */
    #adhdOpen.btn{ padding:12px 16px; min-height:44px }

    /* match other hero icons */
	.btn .adhd-box{
	width:22px; height:22px; border-radius:4px;
	border:2px solid currentColor;
	background: transparent;
	box-shadow: none;
	display:inline-block; flex:0 0 22px;
	}

    .adhd-backdrop{
      position:fixed; inset:0; z-index:1000;
      background: color-mix(in oklab, black 35%, transparent);
      display:none;
    }
    .adhd-backdrop.open{ display:block; }

    /* Use a var for consistent sizing between msg and box */
    .adhd-dialog{
      --adhd-box: min(80vw, 560px);

      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:min(720px, 92vw); padding:18px; padding-bottom:70px;
      border-radius:16px;
      background: color-mix(in oklab, var(--bg-elev) 90%, black 10%);
      border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
      box-shadow: var(--shadow);
    }

    .adhd-close{ position:absolute; top:10px; right:10px; }

    .adhd-msg{
      margin:6px auto 8px; color:var(--muted);
      font-size:.98rem; text-align:center;
      max-width: calc(var(--adhd-box) - 40px);
    }

    .adhd-play{
      position:relative; margin-top:8px;
      width: var(--adhd-box); aspect-ratio:1 / 1;
      border-radius:14px;
      border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
      background: var(--bg);
      overflow:hidden;
      touch-action:none;
      margin-inline:auto;
    }

    .adhd-play img.uploaded{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit: contain;
      pointer-events:none;
      user-select:none;
    }

    .btn.small{ padding:8px 12px; font-size:.95rem; border-radius:10px }
    .btn.toggle[aria-pressed="true"]{ background:linear-gradient(135deg, var(--accent-2), #8ee); color:#001b1b }
    .btn[disabled]{ opacity:.55; cursor:not-allowed }

    .adhd-controls{
      position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
      display:flex; gap:10px; align-items:center; justify-content:center;
      width: max-content;
    }

    .adhd-actions{
      display:flex; gap:10px; align-items:center; justify-content:center;
      margin:10px auto 0;
      width: max-content;
    }

/* ===== LAN Party — soft-start fade, slightly dimmer RGB, slightly brighter blue bottom ===== */

/* Keep header above the dimmer; don't change its look */
body.lan-party header{ z-index:10000; }

/* No bar sitting on the nav itself */
body.lan-party header::after{ content:none !important; }

/* RGB SPILL under the nav — keep fade & reach, but ease brightness down a touch */
body.lan-party header::before{
  content:"";
  position:absolute;
  top:100%;
  left:-6%; right:-6%;
  height:120px;
  background: var(--lan-rgb, linear-gradient(90deg,#ff0080,#00e5ff,#a6ff00,#ff0080));
  filter: blur(28px) saturate(1.45) brightness(0.7); /* ↓ brightness from 1.18 */
  opacity:.95;
  pointer-events:none;
  mix-blend-mode: screen;

  /* Smooth feather from top (kills bar) to 0 at end */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.90) 6%,
    rgba(0,0,0,0.72) 22%,
    rgba(0,0,0,0.45) 48%,
    rgba(0,0,0,0.18) 76%,
    rgba(0,0,0,0.00) 100%
  );
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.90) 6%,
    rgba(0,0,0,0.72) 22%,
    rgba(0,0,0,0.45) 48%,
    rgba(0,0,0,0.18) 76%,
    rgba(0,0,0,0.00) 100%
  );
}

/* Dimmer under everything EXCEPT the header — blue bottom glow slightly stronger */
.lan-overlay{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    radial-gradient(80vw 55vh at -10% -10%, rgba(255,0,120,.35), transparent 60%),
    radial-gradient(80vw 55vh at 110% -10%, rgba(0,200,255,.35), transparent 60%),
    radial-gradient(90vw 60vh at 50% 110%, rgba(0,150,255,.38), transparent 60%), /* ↑ blue from .30 to .38 */
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60));
}

/* Keep the rest of the page normal (no global filter) */
body.lan-party{ filter:none; }

/* Small screens: same tweaks, proportionally shorter */
@media (max-width: 640px){
  body.lan-party header::before{
    height:88px;
    filter: blur(22px) saturate(1.45) brightness(1.10);
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.70) 24%,
      rgba(0,0,0,0.00) 56%);
            mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.70) 24%,
      rgba(0,0,0,0.00) 56%);
  }
}