/* =============================================
     Nort-Sun reskin of the "Flex Hover Slider" template.
     Structure/behavior are unchanged from the original —
     only tokens, copy, and panel imagery are swapped.
     ============================================= */
  :root {
    /* Motion — unchanged from the original template */
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-expand: 0.55s;
    --duration-content: 0.4s;
    --delay-desc: 0.2s;
    --delay-action: 0.3s;
    --duration-overlay: 0.45s;
    --duration-bg: 0.55s;

    --flex-rest: 1;
    --flex-active: 5;
    --title-top: clamp(2rem, 8vh, 5.5rem);

    /* Colour — swapped to the Nort-Sun palette */
    --bg-stage: #080c14;
    --text: #e2e8f0;
    --text-muted: rgba(212, 216, 226, 0.78);
    --text-dim: rgba(212, 216, 226, 0.5);
    --border-soft: rgba(var(--sun-rgb), 0.16);
    --border-focus: var(--sun);
    --sun: #f97316;
    --sunbright: #fbbf24;
    --sundeep: #c2410c;
    --peak: #e2e8f0;
    --sun-rgb: 249, 115, 22;
    --sunbright-rgb: 251, 191, 36;
    --sundeep-rgb: 194, 65, 12;
    /* Ambient-layer colours (see Atmosphere.jsx). */
    --aurora-1-rgb: 251, 191, 36;
    --aurora-2-rgb: 249, 115, 22;
    --aurora-3-rgb: 236, 72, 153;

    /* Panel identity colours (fallback if an image fails to load) */
    --home-warm: #090c14;
    --about-stone: #14321f;
    --work-forest: #1a1f3a;
    --contact-navy: #5461e7;
    --story-teal: #0f2a2a;
    --login-blue: #10192f;

    --content-max: 26rem;
    --panel-pad-x: clamp(1.25rem, 3vw, 2.75rem);
    --panel-pad-y: clamp(1.5rem, 4vh, 3rem);
    --title-size-active: clamp(1.75rem, 3.2vw, 3.25rem);
    --desc-size: clamp(0.9rem, 1.05vw, 1.05rem);
    --action-size: clamp(0.78rem, 0.9vw, 0.88rem);

    --mobile-collapsed: 4.25rem;
    --footer-h: calc(26px + env(safe-area-inset-bottom, 0px));
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body { height: 100%; overflow: hidden; }

  body {
    font-family: 'Exo 2', sans-serif;
    background: var(--bg-stage);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ---- Container ---- */
  .flex-container {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--footer-h));
    height: calc(100dvh - var(--footer-h));
    overflow: hidden;
    background: var(--bg-stage);
    isolation: isolate;
  }

  /* ---- Panels ---- */
  .flex-panel {
    position: relative;
    flex: var(--flex-rest) 1 0%;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--border-soft);
    container-type: size;
    contain: paint;
  }

  .flex-panel:last-child { border-right: none; }

  .flex-panel:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    z-index: 2;
  }

  .flex-panel:hover,
  .flex-panel:focus-visible,
  .flex-panel.is-active,
  .flex-panel.is-expanded {
    border-color: transparent;
  }

  @media (min-width: 769px) {
    .flex-panel { transition: flex-grow var(--duration-expand) var(--ease-premium); }

    .flex-container:not(.has-pointer-drive) .flex-panel:hover,
    .flex-container:not(.has-pointer-drive) .flex-panel:focus-visible {
      flex-grow: var(--flex-active);
    }

    .flex-container.has-pointer-drive .flex-panel.is-active {
      flex-grow: var(--flex-active);
    }

    .flex-container:not(.has-pointer-drive):hover .flex-panel:not(:hover) .flex-title,
    .flex-container:not(.has-pointer-drive):focus-within .flex-panel:not(:focus-visible) .flex-title {
      opacity: 0.42;
    }

    .flex-container.has-pointer-drive:has(.is-active) .flex-panel:not(.is-active) .flex-title {
      opacity: 0.42;
    }

    .flex-panel:hover .flex-title,
    .flex-panel:focus-visible .flex-title,
    .flex-panel.is-active .flex-title {
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
      opacity: 1;
    }

    .flex-panel:hover .panel-desc,
    .flex-panel:focus-visible .panel-desc,
    .flex-panel.is-active .panel-desc {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition-delay: var(--delay-desc);
    }

    .flex-panel:hover .panel-action,
    .flex-panel:focus-visible .panel-action,
    .flex-panel.is-active .panel-action {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition-delay: var(--delay-action);
    }

    .flex-panel:hover .panel-bg,
    .flex-panel:focus-visible .panel-bg,
    .flex-panel.is-active .panel-bg {
      transform: translate3d(0, 0, 0) scale(1.03);
    }

    .flex-panel:hover .panel-overlay,
    .flex-panel:focus-visible .panel-overlay,
    .flex-panel.is-active .panel-overlay {
      opacity: 0.72;
    }

    .flex-panel.is-expanded:not(:hover):not(:focus-visible):not(.is-active) {
      flex-grow: var(--flex-rest);
    }

    .flex-panel.is-expanded:not(:hover):not(:focus-visible):not(.is-active) .flex-title {
      transform:
        translate3d(
          calc(50cqw - var(--panel-pad-x) - 50%),
          calc(50cqh - var(--title-top) - 50%),
          0
        )
        rotate(90deg)
        scale(1.35);
    }

    .flex-panel.is-expanded:not(:hover):not(:focus-visible):not(.is-active) .panel-desc,
    .flex-panel.is-expanded:not(:hover):not(:focus-visible):not(.is-active) .panel-action {
      opacity: 0;
      transform: translate3d(0, 0.7rem, 0);
      transition-delay: 0s;
    }

    .flex-panel.is-expanded:not(:hover):not(:focus-visible):not(.is-active) .panel-bg {
      transform: translate3d(0, 0, 0) scale(1);
    }

    .flex-panel.is-expanded:not(:hover):not(:focus-visible):not(.is-active) .panel-overlay {
      opacity: 1;
    }
  }

  /* ---- Background layer ---- */
  .panel-bg {
    position: absolute;
    inset: -3%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform var(--duration-bg) var(--ease-premium);
    backface-visibility: hidden;
    pointer-events: none;
  }

  .flex-panel.is-expanded .panel-bg { transform: translate3d(0, 0, 0) scale(1.03); }

  /* Panel identity — Home / Servers / Communities / Join */
  .panel-home .panel-bg {
    background-color: var(--home-warm);
    background-image:
      radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--sun-rgb),0.35) 0%, transparent 70%),
      url("assets/bg-home.webp");
    background-position: center, center 38%;

  }

  .panel-servers .panel-bg {
    background-color: var(--about-stone);
    background-image: url("assets/bg-servers.webp");
    background-position: center 40%;
  }

  .panel-communities .panel-bg {
    background-color: var(--work-forest);
    background-image: url("assets/bg-communities.webp");
    background-position: center, center 38%;
  }

  .panel-contact .panel-bg {
    background-color: var(--contact-navy);
    background-image:
      radial-gradient(ellipse 80% 70% at 50% 40%, rgba(var(--sunbright-rgb), 0.4) 0%, transparent 70%),
      url("assets/bg-join.webp");
   background-position: center, center 40%;
  }

  .panel-about .panel-bg {
    background-color: var(--story-teal);
    background-image:
      radial-gradient(ellipse 75% 65% at 50% 35%, rgba(45,212,191,0.28) 0%, transparent 70%),
      url("assets/bg-about.webp");
    background-position: center, center 40%;

  }

  .panel-login .panel-bg {
    background-color: var(--login-blue);
    background-image:
      radial-gradient(ellipse 75% 65% at 50% 35%, rgb(9, 12, 20) 0%, transparent 50%),
  }

  /* ---- Overlay + vignette ---- */
  .panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4,6,12,0.6) 0%, rgba(4,6,12,0.22) 42%, rgba(4,6,12,0.65) 100%);
    opacity: 1;
    transition: opacity var(--duration-overlay) var(--ease-premium);
  }

  .panel-home .panel-overlay {
    background: linear-gradient(180deg, rgba(40,14,4,0.62) 0%, rgba(20,8,3,0.22) 45%, rgba(10,4,2,0.62) 100%);
  }

  .panel-servers .panel-overlay {
    background: linear-gradient(180deg, rgba(4,16,10,0.6) 0%, rgba(3,10,7,0.2) 45%, rgba(2,6,4,0.62) 100%);
  }

  .panel-communities .panel-overlay {
    background: linear-gradient(180deg, rgba(6,8,20,0.62) 0%, rgba(4,6,14,0.22) 45%, rgba(3,4,10,0.65) 100%);
  }

  .panel-contact .panel-overlay {
    background: linear-gradient(180deg, rgba(40,20,2,0.55) 0%, rgba(24,12,2,0.2) 45%, rgba(14,7,1,0.6) 100%);
  }

  .panel-about .panel-overlay {
    background: linear-gradient(180deg, rgba(4,18,16,0.6) 0%, rgba(3,12,11,0.22) 45%, rgba(2,8,7,0.65) 100%);
  }

  .panel-login .panel-overlay {
    background: linear-gradient(180deg, rgba(6,10,24,0.62) 0%, rgba(4,7,16,0.22) 45%, rgba(3,5,12,0.68) 100%);
  }

  .flex-panel.is-expanded .panel-overlay { opacity: 0.7; }

  /* ---- Inner content layout ---- */
  .panel-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--panel-pad-y) var(--panel-pad-x);
  }

  /* ---- Titles ---- */
  .flex-title {
    position: absolute;
    left: var(--panel-pad-x);
    top: var(--title-top);
    font-family: 'Orbitron', sans-serif;
    font-size: var(--title-size-active);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 2px 20px rgba(0,0,0,0.55);
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    transform-origin: center center;
    transform:
      translate3d(calc(50cqw - var(--panel-pad-x) - 50%), calc(50cqh - var(--title-top) - 50%), 0)
      rotate(90deg)
      scale(1.35);
    transition: transform var(--duration-expand) var(--ease-premium), opacity var(--duration-expand) var(--ease-premium);
    backface-visibility: hidden;
  }

  /* Dash accent, matching the footer wordmark (`.nav-logo-text span`). */
  .flex-title .flex-title-dash { color: var(--sun); }

  .flex-panel.is-expanded .flex-title {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  /* ---- Preview content ---- */
  .content-container {
    position: absolute;
    left: var(--panel-pad-x);
    top: calc(var(--title-top) + var(--title-size-active) + 1.25rem);
    max-width: var(--content-max);
    width: calc(100% - (var(--panel-pad-x) * 2));
    pointer-events: none;
  }

  .panel-desc, .panel-action {
    opacity: 0;
    transform: translate3d(0, 0.7rem, 0);
    transition: opacity var(--duration-content) var(--ease-premium), transform var(--duration-content) var(--ease-premium);
    transition-delay: 0s;
    pointer-events: none;
    backface-visibility: hidden;
  }

  .panel-desc {
    font-size: var(--desc-size);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    max-width: 26rem;
  }

  .panel-action {
    display: inline-block;
    margin-top: 1.35rem;
    font-size: var(--action-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sun);
  }

  .flex-panel.is-expanded .panel-desc { opacity: 1; transform: translate3d(0,0,0); transition-delay: var(--delay-desc); }
  .flex-panel.is-expanded .panel-action { opacity: 1; transform: translate3d(0,0,0); transition-delay: var(--delay-action); }

  /* ---- Mobile / tablet — vertical accordion ---- */
  @media (max-width: 768px) {
    .flex-container {
      flex-direction: column;
      width: 100%;
      height: calc(100vh - var(--footer-h));
      height: calc(100dvh - var(--footer-h));
      padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
    }

    .flex-panel {
      flex: 1 1 0;
      min-height: 0;
      border-right: none;
      border-bottom: 1px solid var(--border-soft);
      container-type: normal;
      contain: paint;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: flex-grow var(--duration-expand) var(--ease-premium), flex-basis var(--duration-expand) var(--ease-premium);
    }

    .flex-panel:last-child { border-bottom: none; }

    .flex-container:not(:has(.flex-panel.is-expanded)) .flex-panel { flex: 1 1 0; }
    .flex-container:has(.flex-panel.is-expanded) .flex-panel { flex: 0 0 var(--mobile-collapsed); }
    .flex-container:has(.flex-panel.is-expanded) .flex-panel.is-expanded { flex: 1 1 auto; min-height: 0; border-color: transparent; }

    .panel-inner { padding: 0 1.25rem; display: flex; flex-direction: column; justify-content: center; height: 100%; }
    .flex-panel.is-expanded .panel-inner { justify-content: flex-start; padding: 1.5rem 1.35rem 1.75rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    .flex-title {
      position: relative;
      left: auto; top: auto;
      font-size: clamp(1.75rem, 7vw, 2.35rem);
      letter-spacing: 0.1em;
      transform: scale(calc(clamp(1.2rem, 5.5vw, 1.65rem) / clamp(1.75rem, 7vw, 2.35rem)));
      transform-origin: center center;
      transition: transform var(--duration-expand) var(--ease-premium), opacity var(--duration-expand) var(--ease-premium);
    }

    .flex-panel:hover .flex-title,
    .flex-panel:focus-visible .flex-title,
    .flex-panel.is-active .flex-title {
      left: auto; top: auto;
      font-size: clamp(1.75rem, 7vw, 2.35rem);
      transform: scale(calc(clamp(1.2rem, 5.5vw, 1.65rem) / clamp(1.75rem, 7vw, 2.35rem)));
    }

    .flex-panel.is-expanded .flex-title,
    .flex-panel.is-expanded:hover .flex-title,
    .flex-panel.is-expanded:focus-visible .flex-title {
      position: relative; left: auto; top: auto;
      font-size: clamp(1.75rem, 7vw, 2.35rem);
      transform: scale(1);
      opacity: 1;
    }

    .content-container {
      position: relative; left: auto; right: auto; top: auto;
      width: 100%; max-width: 22rem; margin-top: 0; height: 0; overflow: hidden;
    }

    .flex-panel:hover .panel-desc, .flex-panel:focus-visible .panel-desc, .flex-panel.is-active .panel-desc,
    .flex-panel:hover .panel-action, .flex-panel:focus-visible .panel-action, .flex-panel.is-active .panel-action {
      opacity: 0; transform: translate3d(0, 0.7rem, 0); transition-delay: 0s;
    }

    .flex-panel.is-expanded .content-container,
    .flex-panel.is-expanded:hover .content-container,
    .flex-panel.is-expanded:focus-visible .content-container {
      height: auto; overflow: visible; margin-top: 1rem;
    }

    .flex-panel.is-expanded .panel-desc,
    .flex-panel.is-expanded:hover .panel-desc,
    .flex-panel.is-expanded:focus-visible .panel-desc {
      opacity: 1; transform: translate3d(0,0,0); transition-delay: var(--delay-desc);
    }

    .flex-panel.is-expanded .panel-action,
    .flex-panel.is-expanded:hover .panel-action,
    .flex-panel.is-expanded:focus-visible .panel-action {
      opacity: 1; transform: translate3d(0,0,0); transition-delay: var(--delay-action);
    }

    .flex-panel:hover .panel-bg, .flex-panel:focus-visible .panel-bg, .flex-panel.is-active .panel-bg { transform: translate3d(0,0,0) scale(1); }
    .flex-panel.is-expanded .panel-bg { transform: translate3d(0,0,0) scale(1.03); }
    .flex-panel:hover .panel-overlay, .flex-panel:focus-visible .panel-overlay, .flex-panel.is-active .panel-overlay { opacity: 1; }
    .flex-panel.is-expanded .panel-overlay { opacity: 0.72; }

    .flex-panel:hover, .flex-panel:focus-visible, .flex-panel.is-active { flex-grow: 1; }

    .flex-container:has(.flex-panel.is-expanded) .flex-panel:hover,
    .flex-container:has(.flex-panel.is-expanded) .flex-panel:focus-visible,
    .flex-container:has(.flex-panel.is-expanded) .flex-panel.is-active {
      flex: 0 0 var(--mobile-collapsed);
    }

    .flex-container:has(.flex-panel.is-expanded) .flex-panel.is-expanded,
    .flex-container:has(.flex-panel.is-expanded) .flex-panel.is-expanded:hover,
    .flex-container:has(.flex-panel.is-expanded) .flex-panel.is-expanded:focus-visible {
      flex: 1 1 auto;
    }

    .flex-container:hover .flex-panel:not(:hover) .flex-title,
    .flex-container:focus-within .flex-panel:not(:focus-visible) .flex-title { opacity: 1; }

    .flex-panel:not(.is-expanded) .flex-title { opacity: 0.75; }
    .flex-panel.is-expanded .flex-title { opacity: 1; }

    .panel-desc { font-size: clamp(0.92rem, 3.6vw, 1.05rem); }
    .panel-action { margin-top: 1.15rem; font-size: clamp(0.8rem, 3.2vw, 0.9rem); }
  }

  /* ---- Reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-expand: 0.01ms; --duration-content: 0.01ms;
      --delay-desc: 0ms; --delay-action: 0ms;
      --duration-overlay: 0.01ms; --duration-bg: 0.01ms;
    }
    .flex-container, .flex-panel, .panel-bg, .panel-overlay, .flex-title, .panel-desc, .panel-action {
      transition: none !important; animation: none !important;
    }
    .panel-bg, .flex-panel:hover .panel-bg, .flex-panel:focus-visible .panel-bg,
    .flex-panel.is-active .panel-bg, .flex-panel.is-expanded .panel-bg { transform: none; }
  }

  /* =============================================
     Ported content styles (from index.html) —
     used inside expanded panels for the Home,
     Servers, Communities, and Join content.
     ============================================= */
  .panel-embed { padding: 0.5rem 0 1rem; cursor: auto; }
  .panel-embed a, .panel-embed button, .panel-embed iframe { pointer-events: auto; }

  .panel-embed .hero {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 0.5rem 2rem;
    overflow: visible;
  }

  .hero-sun-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(var(--sun-rgb),0.14) 0%, rgba(var(--sunbright-rgb),0.05) 40%, transparent 70%);
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: sunPulse 5s ease-in-out infinite;
    z-index: 0;
  }

  @keyframes sunPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  }

  .panel-embed .hero-badge {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: rgba(var(--sun-rgb),0.14);
    border: 1px solid rgba(var(--sun-rgb),0.35);
    color: var(--sunbright);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    margin-bottom: 1.4rem;
  }

  .panel-embed .hero h1 {
    position: relative;
    z-index: 1;
    font-family: 'Orbitron', monospace;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin-top: 0;
    margin-bottom: 0.4rem;
  }

  /* The host page ships its own `h1 { margin: .67em 0 }`, which outranks the
     `*` reset, so the hero logo needs an explicit size here (was inline). */
  .panel-embed .hero h1 img {
    width: auto;
    height: min(286px, 24vh);
    max-width: 100%;
    object-fit: contain;
  }

  .panel-embed .hero h1 .home-line1 { display: block; color: var(--peak); }

  .panel-embed .hero h1 .home-line2 {
    display: block;
    background: linear-gradient(90deg, var(--sundeep), var(--sun), var(--sunbright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .panel-embed .hero-sub {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 1.2rem auto 1.8rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.7;
  }

  .panel-embed .hero-btns {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .home-btn-primary {
    background: linear-gradient(135deg, var(--sundeep), var(--sun));
    color: white;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.7rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    transition: box-shadow 0.2s, transform 0.2s;
    display: inline-block;
  }

  .home-btn-primary:hover { box-shadow: 0 0 28px rgba(var(--sun-rgb),0.55); transform: translateY(-2px); }

  .home-btn-secondary {
    background: transparent;
    color: var(--text);
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.7rem;
    border: 1px solid rgba(226,232,240,0.25);
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
    display: inline-block;
  }

  .home-btn-secondary:hover { border-color: var(--sun); color: var(--sunbright); transform: translateY(-2px); }

  /* ---- STATS (Home panel) ---- */
  .panel-embed .stats-bar {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    background: rgba(var(--sun-rgb),0.03);
  }

  .panel-embed .stat {
    flex: 1;
    min-width: 100px;
    max-width: 160px;
    padding: 1.2rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--border-soft);
  }

  .panel-embed .stat:last-child { border-right: none; }

  .panel-embed .stat-num {
    font-family: 'Exo 2', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sun);
    display: block;
  }

  .panel-embed .stat-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.25rem;
    display: block;
  }

  /* ---- Section headers (Servers / Communities) ---- */
  .panel-embed .section-title {
    position: relative;
    z-index: 1;
    font-family: 'Exo 2', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.2;
    color: var(--peak);
    text-align: left;
  }

  .panel-embed .section-desc {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    max-width: 540px;
    margin-bottom: 1.6rem;
    text-align: left;
  }

  /* ---- GAMES GRID (ported) ---- */
  .panel-embed .games-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
  }

  .panel-embed .game-card {
    background: rgba(8,12,20,0.55);
    border: 1px solid rgba(var(--sun-rgb),0.18);
    border-radius: 14px;
    padding: 1.4rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  }

  .panel-embed .game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--card-color, rgba(var(--sun-rgb),0.06)) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 14px;
  }

  .panel-embed .game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.5);
    border-color: var(--sun);
  }

  .panel-embed .game-card:hover::before { opacity: 1; }

  .panel-embed .game-card.valheim { --card-color: rgba(99,179,237,0.1); }
  .panel-embed .game-card.minecraft { --card-color: rgba(134,239,172,0.1); }
  .panel-embed .game-card.mlbb { --card-color: rgba(var(--sun-rgb),0.12); }
  .panel-embed .game-card.wow { --card-color: rgba(196,160,98,0.12); }
  .panel-embed .game-card.overwatch { --card-color: rgba(243,156,18,0.1); }

  .panel-embed .game-icon { font-size: 2rem; margin-bottom: 0.7rem; display: block; }

  .panel-embed .game-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--peak);
  }

  .panel-embed .game-type {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sun);
    margin-bottom: 0.4rem;
    display: block;
  }

  .panel-embed .game-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.9rem;
  }

  .panel-embed .game-card.minecraft .game-desc { color: var(--text); }

  .panel-embed .game-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    background: rgba(var(--sun-rgb),0.1);
    color: var(--sunbright);
    border: 1px solid rgba(var(--sun-rgb),0.2);
    margin-right: 0.35rem;
    margin-top: 0.3rem;
  }

  .panel-embed .game-tag.alt { background: rgba(226,232,240,0.07); color: var(--peak); border-color: rgba(226,232,240,0.15); }
  .panel-embed .game-tag.blue { background: rgba(99,179,237,0.1); color: #93c5fd; border-color: rgba(99,179,237,0.2); }
  .panel-embed .game-tag.gold { background: rgba(196,160,98,0.12); color: #d4a855; border-color: rgba(196,160,98,0.25); }

  /* Campfire scene (Valheim card) — same treatment as the live site */
  .panel-embed .game-card.valheim { position: relative; }
  .campfire-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 14px; }
  .campfire-stage { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .campfire-overlay { position: absolute; inset: 0; pointer-events: none; }
  .campfire-vignette {
    background:
      radial-gradient(118% 88% at 50% 70%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.34) 62%, rgba(0,0,0,0.72) 88%, rgba(0,0,0,0.9) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,0.46) 100%);
  }
  .campfire-grain { inset: -14%; opacity: 0.055; background-repeat: repeat; will-change: transform; animation: campfire-grain-drift 1.4s steps(1, end) infinite; }
  @keyframes campfire-grain-drift {
    0% { transform: translate3d(0,0,0); } 16% { transform: translate3d(-3%,2%,0); }
    33% { transform: translate3d(2%,-3%,0); } 50% { transform: translate3d(-2%,-2%,0); }
    66% { transform: translate3d(3%,1%,0); } 83% { transform: translate3d(-1%,3%,0); }
    100% { transform: translate3d(0,0,0); }
  }
  .campfire-hint { display: none; }

  .card-scrim {
    position: absolute; inset: 0; z-index: 2; border-radius: 14px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(4,6,12,0.18) 0%, rgba(4,6,12,0.55) 55%, rgba(4,6,12,0.88) 100%);
  }
  .panel-embed .game-card.minecraft .card-scrim,
  .panel-embed .game-card.mlbb .card-scrim,
  .panel-embed .game-card.wow .card-scrim,
  .panel-embed .game-card.overwatch .card-scrim { background: rgba(0,0,0,0.75); }

  .game-card-content { position: relative; z-index: 3; }

  @media (prefers-reduced-motion: reduce) { .campfire-grain { animation: none; } }

  /* Valheim logo — Deep North / frost-fire effect */
  .deep-north-logo { position: relative; display: inline-block; width: min(100%, 900px); isolation: isolate; }
  .deep-north-logo > img {
    position: relative; z-index: 3; display: block; width: 100%; height: auto;
    filter: grayscale(.42) sepia(.03) hue-rotate(155deg) saturate(1.85) brightness(1.12) contrast(1.15)
      drop-shadow(0 0 4px rgba(190,240,255,.95)) drop-shadow(0 0 12px rgba(80,190,255,.70)) drop-shadow(0 0 26px rgba(35,125,225,.45));
  }
  .deep-north-logo::before {
    content: ""; position: absolute; inset: 4% 2%; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(190,240,255,.40) 0%, rgba(80,170,230,.20) 35%, transparent 70%);
    filter: blur(22px); opacity: .9;
  }
  .deep-north-logo::after {
    content: ""; position: absolute; inset: -4%; z-index: 4; pointer-events: none;
    background:
      radial-gradient(ellipse at 20% 40%, rgba(255,255,255,.30), transparent 15%),
      radial-gradient(ellipse at 45% 55%, rgba(220,250,255,.22), transparent 18%),
      radial-gradient(ellipse at 72% 35%, rgba(255,255,255,.25), transparent 15%);
    filter: blur(7px); mix-blend-mode: screen; animation: frostPulse 5s ease-in-out infinite;
  }
  .deep-north-logo .frost-fire {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, transparent 28%, rgba(100,210,255,.18) 37%, rgba(235,255,255,.90) 44%,
      rgba(120,220,255,.55) 49%, rgba(255,255,255,.95) 54%, rgba(70,180,255,.18) 62%, transparent 72%);
    background-size: 260% 100%; mix-blend-mode: screen; opacity: .90;
    -webkit-mask-image: url("assets/valheim.webp");
    mask-image: url("assets/valheim.webp");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    animation: frostFireTextSweep 3.2s linear infinite;
  }
  .deep-north-logo .frost-fire::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(210,250,255,0) 38%, rgba(255,255,255,.65) 50%, rgba(100,210,255,0) 62%, transparent 100%);
    background-size: 220% 100%; filter: blur(5px); animation: frostFireShimmer 2.4s ease-in-out infinite;
  }
  .deep-north-steam { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: visible; }
  .deep-north-steam span {
    position: absolute; width: 55px; height: 90px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.75) 0%, rgba(220,245,255,.40) 35%, rgba(180,225,255,.12) 60%, transparent 75%);
    filter: blur(12px); opacity: 0; animation: steamRise 4.5s ease-out infinite;
  }
  .deep-north-steam span:nth-child(1) { left: 14%; top: 38%; animation-delay: 0s; }
  .deep-north-steam span:nth-child(2) { left: 28%; top: 32%; animation-delay: 1.2s; }
  .deep-north-steam span:nth-child(3) { left: 43%; top: 35%; animation-delay: 2.1s; }
  .deep-north-steam span:nth-child(4) { left: 58%; top: 30%; animation-delay: .7s; }
  .deep-north-steam span:nth-child(5) { left: 72%; top: 35%; animation-delay: 2.8s; }
  .deep-north-steam span:nth-child(6) { left: 87%; top: 32%; animation-delay: 1.7s; }
  @keyframes steamRise {
    0% { opacity: 0; transform: translate3d(0,15px,0) scale(.55) rotate(-5deg); }
    15% { opacity: .65; }
    45% { opacity: .45; transform: translate3d(-12px,-35px,0) scale(1) rotate(8deg); }
    75% { opacity: .20; transform: translate3d(15px,-75px,0) scale(1.35) rotate(-7deg); }
    100% { opacity: 0; transform: translate3d(-8px,-120px,0) scale(1.7) rotate(5deg); }
  }
  @keyframes frostPulse { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
  @keyframes frostFireTextSweep {
    0% { background-position: 145% 0; opacity: .45; } 35% { opacity: .85; }
    50% { background-position: 50% 0; opacity: 1; } 65% { opacity: .75; }
    100% { background-position: -145% 0; opacity: .45; }
  }
  @keyframes frostFireShimmer { 0%,100% { background-position: 140% 0; opacity: .15; } 50% { background-position: 0% 0; opacity: .65; } }
  @media (prefers-reduced-motion: reduce) {
    .deep-north-logo::after, .deep-north-logo .frost-fire, .deep-north-logo .frost-fire::after, .deep-north-steam span { animation: none; }
  }

  .panel-embed .game-card.minecraft { position: relative; }
  .card-bg-video, .card-bg-image {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
  }

  /* ---- CTA (Join panel) — no inner card: the content sits straight in the
     panel's content container, same as the Home hero. ---- */
  .panel-embed .cta {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: 1.6rem 0.5rem 0.6rem;
    text-align: center;
  }

  .panel-embed .cta h2 {
    font-family: 'Exo 2', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.25;
    color: var(--peak);
  }

  .panel-embed .cta p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1.6rem;
  }

  /* Discord widget wrapper — was an inline style; kept in CSS so the mobile
     pass can widen the widget (it is the one element that wants the full
     content width). */
  .panel-embed .cta .discord-embed {
    width: auto;
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .panel-embed .cta .discord-embed iframe { max-width: 100%; }

  /* ---- ABOUT PANEL CONTENT (ported from about.html) ---- */
  .panel-embed .story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-items: center;
    margin-bottom: 2.4rem;
  }

  .panel-embed .story-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .panel-embed .story-logo img {
    width: 100%;
    max-width: 180px;
    filter: drop-shadow(0 0 40px rgba(var(--sun-rgb),0.3));
  }

  .panel-embed .story-text p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
  }

  .panel-embed .story-text p:last-child { margin-bottom: 0; }

  .panel-embed .story-text strong {
    color: var(--sunbright);
    font-weight: 700;
  }

  .panel-embed .about-subhead {
    margin-bottom: 1rem;
  }

  /* ---- VALUES GRID ---- */
  .panel-embed .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2.6rem;
  }

  .panel-embed .value-card {
    padding: 1.4rem;
    background: rgba(8,12,20,0.55);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    transition: border-color 0.3s, transform 0.3s;
  }

  .panel-embed .value-card:hover {
    border-color: rgba(var(--sun-rgb),0.45);
    transform: translateY(-3px);
  }

  .panel-embed .value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.85rem;
    border-radius: var(--r-sm);
    background: var(--surface-inset);
    border: 1px solid var(--border-soft);
    color: var(--sun);
    transition: border-color 0.3s, color 0.3s;
  }

  .panel-embed .value-icon-svg { display: block; }

  .panel-embed .value-card:hover .value-icon {
    border-color: var(--border-accent);
    color: var(--peak);
  }

  .panel-embed .value-card h3 {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--peak);
  }

  .panel-embed .value-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ---- TIMELINE ---- */
  .panel-embed .timeline {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 2.6rem;
  }

  .panel-embed .timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--sun), var(--sundeep), transparent);
    border-radius: 2px;
  }

  .panel-embed .timeline-item {
    position: relative;
    padding: 0 0 1.8rem 1.6rem;
  }

  .panel-embed .timeline-item::before {
    content: '';
    position: absolute;
    left: -1.85rem;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sun);
    box-shadow: 0 0 12px rgba(var(--sun-rgb),0.6);
    border: 2px solid var(--bg-stage);
  }

  .panel-embed .timeline-year {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sun);
    margin-bottom: 0.3rem;
  }

  .panel-embed .timeline-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--peak);
    margin-bottom: 0.4rem;
  }

  .panel-embed .timeline-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ---- FOUNDER CARD ---- */
  .panel-embed .founder-card {
    position: relative;
    overflow: hidden;
    background: rgba(8,12,20,0.55);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 1.8rem;
  }

  .panel-embed .founder-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(3px);
    border-radius: 18px;
  }

  .panel-embed .founder-card .card-scrim {
    border-radius: 18px;
    background: rgba(0,0,0,0.75);
  }

  .panel-embed .founder-card-content {
    position: relative;
    z-index: 3;
  }

  .panel-embed .founder-info h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--peak);
    margin-bottom: 0.3rem;
  }

  .panel-embed .founder-role {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sun);
    margin-bottom: 0.9rem;
  }

  .panel-embed .founder-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
  }

  /* ---- LOGIN PANEL ---- */
  .panel-embed .login-card {
    position: relative;
    max-width: 480px;
    margin: 0.5rem auto 0;
    background: linear-gradient(135deg, rgba(96,165,250,0.09), rgba(30,58,138,0.06));
    border: 1px solid rgba(96,165,250,0.28);
    border-radius: 20px;
    padding: 2.4rem 1.8rem;
    text-align: center;
  }

  .panel-embed .login-card h2 {
    font-family: 'Exo 2', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.25;
    color: var(--peak);
  }

  .panel-embed .login-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1.6rem;
  }

  .panel-embed .login-btn {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: white;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.85rem 2.2rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .panel-embed .login-btn:hover {
    box-shadow: 0 0 28px rgba(96,165,250,0.5);
    transform: translateY(-2px);
  }

  .panel-embed .login-note {
    margin-top: 1.4rem;
    font-size: 0.8rem;
    color: var(--text-dim);
  }

  .panel-embed .login-note a {
    color: var(--sunbright);
    text-decoration: underline;
  }

  /* ---- Expanded content now holds full rich sections, not a short
     teaser, so it needs to scroll and accept real pointer interaction. ---- */
  .content-container {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--title-top) + var(--title-size-active) + 1rem);
    bottom: 0;
    max-width: none;
    width: 100%;
    padding: 0 var(--panel-pad-x) var(--panel-pad-y);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    background: rgba(4,6,12,0.42);
    /* 15% less blur than the original 10px, matching the surface's dialled-back alpha */
    backdrop-filter: blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
  }

  .flex-panel:hover .content-container,
  .flex-panel:focus-visible .content-container,
  .flex-panel.is-active .content-container,
  .flex-panel.is-expanded .content-container {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.15s;
  }

  /* ---- Home + Join panels: no inner card ------------------------------
     The Home hero and the Join CTA live directly in the content container.
     On mobile the content container drops its backdrop (so panel art shows
     through), which would leave their text floating on the photo — give
     those panels a flat wash of their own there. No radius/border on
     purpose: this is the container, not a card. ---- */
  @media (max-width: 768px) {
    .panel-home .content-container,
    .panel-contact .content-container {
      background: rgba(4, 6, 12, 0.55);
    }
  }

  @media (max-width: 768px) {
    .content-container {
      position: relative;
      top: auto; left: auto; right: auto; bottom: auto;
      width: 100%;
      max-width: none;
      height: 0;
      overflow: hidden;
      margin-top: 0;
      background: none;
      backdrop-filter: none;
    }

    .flex-panel.is-expanded .content-container {
      height: auto;
      max-height: calc(100dvh - var(--mobile-collapsed) * 3 - 6rem);
      overflow-y: auto;
      margin-top: 1rem;
    }
  }

  /* ---- LOGIN PANEL: matches the resting width of the other panels so the
     vertical nav labels keep one rhythm (it expands like the others on
     hover/tap). Historically this panel was pinned to a narrower fixed
     width, which made its LETTER-SPACING/weight read differently. ---- */
  .panel-login {
    flex: var(--flex-rest) 1 0%;
  }

  /* Login is members/moderators only, so at rest it shouldn't compete with the
     five public panels for attention: no flex-grow, and a basis just wide
     enough for the rotated "LOGIN" plus ~5% either side (the rotated line box
     is exactly --title-size-active * 1.35, so 1.5 leaves that margin). The
     generic :hover / .is-active rules still set flex-grow, so it expands like
     any other panel once you go near it. Mobile keeps the shared
     --mobile-collapsed strip (see the max-width: 768px rule below). */
  @media (min-width: 769px) {
    .panel-login { flex: 0 0 calc(var(--title-size-active) * 1.5); }
  }

  @media (max-width: 768px) {
    .panel-login { flex: 0 0 var(--mobile-collapsed); }
  }

  /* ---- FOOTER ---- */
  footer {
    height: var(--footer-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.85rem;
    background: var(--bg-stage);
    border-top: 1px solid var(--border-soft);
    font-size: 0.62rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  .nav-logo img { width: 14px; height: 14px; }

  .nav-logo-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--peak);
  }

  .nav-logo-text span { color: var(--sun); }

  /* Was `footer > div:nth-child(2)` — a class now, because the controls were
     moved ahead of the site link and child order is no longer meaningful. */
  .footer-copy {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  footer a { font-size: 0.62rem !important; }

  @media (max-width: 700px) {
    footer { font-size: 0.56rem; gap: 0.5rem; padding: 0 0.6rem; }
    .footer-copy { display: none; }
  }

  /* ---- GDPR / PRIVACY NOTICE ---- */
  .ns-notice {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5,7,12,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .ns-notice.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }

  .ns-notice-panel {
    position: relative;
    width: min(480px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    padding: 2.2rem 2rem;
    background: rgba(13,18,32,0.98);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(var(--sun-rgb),0.08);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  .ns-notice.show .ns-notice-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .ns-notice-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--peak);
  }

  .ns-notice-text {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.7;
  }

  .ns-notice-text a { color: var(--sunbright); text-decoration: underline; }

  .ns-notice-btn {
    white-space: nowrap;
    background: var(--sun);
    color: var(--bg-stage);
    border: none;
    padding: 0.75rem 2.2rem;
    border-radius: 5px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .ns-notice-btn:hover {
    box-shadow: 0 0 20px rgba(var(--sun-rgb),0.5);
    transform: translateY(-1px);
  }


  /* ---- Host-page reset ------------------------------------------------
     The generator host centres body text by default; the original site
     relied on the browser default, so restore it here. ---- */
  body { text-align: start; }

  /* ---- Scrollbars inside the expanded panels ---- */
  .content-container { scrollbar-width: thin; scrollbar-color: rgba(var(--sun-rgb),0.45) transparent; }
  .content-container::-webkit-scrollbar { width: 8px; }
  .content-container::-webkit-scrollbar-track { background: transparent; }
  .content-container::-webkit-scrollbar-thumb {
    background: rgba(var(--sun-rgb),0.35);
    border-radius: 8px;
  }
  .content-container::-webkit-scrollbar-thumb:hover { background: rgba(var(--sun-rgb),0.6); }

  /* ---- Short viewports (desktop only): compact the landing hero so the
     stats row stays above the fold instead of scrolling. ---- */
  @media (min-width: 769px) and (max-height: 1040px) {
    .panel-embed .hero { padding: 0.2rem 0.5rem 0.75rem; }
    .panel-embed .hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); margin-bottom: 0.25rem; }
    .panel-embed .hero h1 img { height: min(184px, 16vh); }
    .panel-embed .hero-sub { font-size: 0.92rem; margin: 0.6rem auto 0.75rem; }
    .panel-embed .hero-badge { margin-bottom: 0.7rem; }
    .panel-embed .stats-bar { margin-top: 0.65rem; }
    .panel-embed .stat { padding: 0.85rem 0.5rem; }
  }

  /* Very short desktop viewports (1366x768 & friends) — the hero scrolls a
     little less than before, but everything lands above the fold. */
  @media (min-width: 769px) and (max-height: 820px) {
    .panel-embed .hero h1 { font-size: clamp(1.35rem, 3vw, 2.2rem); }
    .panel-embed .hero h1 img { height: min(150px, 14vh); }
    .panel-embed .hero-sub { font-size: 0.88rem; margin: 0.5rem auto 0.6rem; }
    .panel-embed .stats-bar { margin-top: 0.5rem; }
    .panel-embed .stat { padding: 0.7rem 0.4rem; }
    .panel-embed .stat-num { font-size: 1.2rem; }
  }

  /* ---- Touch / mobile hardening (added for the React build) ---- */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }

  footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

  .flex-panel, .panel-embed a, .panel-embed button, .ns-notice-btn {
    touch-action: manipulation;
  }

  .content-container { overscroll-behavior: contain; }

  /* =============================================
     WEB V3 — accent themes, ambient atmosphere,
     command palette and shared chrome.
     ============================================= */

  /* ---- Accent themes -------------------------------------------------
     Every accent in this sheet now flows through --sun / --sunbright /
     --sundeep (+ their -rgb triplets for rgba() use), so a theme is just
     a token swap. ---- */
  [data-theme="aurora"] {
    --sun: #38bdf8;
    --sunbright: #a5f3fc;
    --sundeep: #0e7490;
    --sun-rgb: 56, 189, 248;
    --sunbright-rgb: 165, 243, 252;
    --sundeep-rgb: 14, 116, 144;
    --border-soft: rgba(56, 189, 248, 0.16);
    --bg-stage: #04121b;
    --home-warm: #05101c;
    --login-blue: #061726;
    --aurora-1-rgb: 52, 211, 153;
    --aurora-2-rgb: 34, 211, 238;
    --aurora-3-rgb: 167, 139, 250;
  }

  [data-theme="aurora"] .panel-overlay {
    background: linear-gradient(180deg, rgba(3,14,26,0.68) 0%, rgba(4,10,22,0.3) 45%, rgba(2,7,16,0.72) 100%);
  }

  [data-theme="aurora"] .panel-home .panel-bg {
    background-image:
      radial-gradient(ellipse 72% 62% at 50% 24%, rgba(var(--aurora-3-rgb), 0.34) 0%, transparent 70%),
      linear-gradient(180deg, rgba(5,20,38,0.72) 0%, rgba(3,10,20,0.88) 100%),
      url("assets/bg-home.webp");
    background-position: center, center, center 38%;
  }

  [data-theme="aurora"] .panel-contact .panel-bg {
    background-image:
      radial-gradient(ellipse 80% 70% at 50% 40%, rgba(var(--aurora-2-rgb), 0.28) 0%, transparent 70%),
      url("assets/bg-join.webp");
  }

  [data-theme="aurora"] .ns-notice-btn { color: #04121b; }

  /* ---- Shared keyboard-chip styling ---- */
  kbd {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.66rem;
    line-height: 1;
    padding: 0.18rem 0.34rem;
    border-radius: 4px;
    background: rgba(226, 232, 240, 0.1);
    border: 1px solid rgba(226, 232, 240, 0.22);
    color: var(--peak);
  }

  .ns-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Footer controls ---- */
  .footer-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
  }

  .footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(226, 232, 240, 0.05);
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    padding: 0.18rem 0.55rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .footer-btn:hover {
    color: var(--sunbright);
    border-color: rgba(var(--sun-rgb), 0.5);
    background: rgba(var(--sun-rgb), 0.12);
  }

  @media (max-width: 700px) {
    .footer-btn-text { display: none; }
    .footer-btn { padding: 0.18rem 0.42rem; }
  }

  /* =====================================================================
     DESIGN PASS — "engineered dark"
     Subtle borders · compact controls · small radii · strong typography ·
     orange/Nordic accents · layered dark surfaces · static grain texture ·
     clear spacing/alignment · strong hover + active states.
     Appended last on purpose: it overrides the ported rules above.
     ===================================================================== */
  :root {
    /* Radii — small, consistent, "machined" */
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 7px;
    --r-lg: 10px;

    /* Nordic neutrals — cool steel/slate greys for surfaces and hairlines */
    --steel-900: #090d15;
    --steel-800: #0d121c;
    --steel-700: #121926;
    --steel-600: #1a2231;

    /* Layered surfaces (dark, clearly separated by a hairline) */
    --surface-1: rgba(11, 15, 24, 0.94);   /* cards sitting on the frosted panel */
    --surface-2: rgba(16, 21, 32, 0.97);   /* raised: palette, notice */
    --surface-inset: rgba(5, 8, 14, 0.72); /* wells: stat bar, inputs, footer */
    --bg-stage: var(--steel-900);          /* page + panel base */

    /* Borders — subtle + neutral by default; accent is reserved for interaction */
    --border-soft: rgba(226, 232, 240, 0.12);
    --border-strong: rgba(226, 232, 240, 0.17);
    --border-subtle: rgba(226, 232, 240, 0.12);
    --border-accent: rgba(var(--sun-rgb), 0.5);

    /* Spacing scale (4px base) — use these instead of ad-hoc values */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Compact controls */
    --control-font: 0.72rem;
    --control-pad-x: 1.15rem;
    --control-pad-y: 0.58rem;

    /* Static film grain (no motion — the animated atmosphere layers were
       removed on request; this is a still texture, safe for reduced motion). */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.075'/%3E%3C/svg%3E");

    /* Stronger body contrast than the ported values */
    --text-muted: rgba(223, 229, 239, 0.88);
    --text-dim: rgba(206, 214, 228, 0.52);
  }

  /* ---- Texture: one shared, still grain wash on the dark surfaces ---- */
  .content-container,
  .ns-notice-panel,
  footer {
    background-image: var(--grain);
  }

  /* ---- Panel shell: hairline separation, accent only on interaction ---- */
  .flex-panel { border-right-color: var(--border-soft); }

  .flex-panel:hover,
  .flex-panel:focus-visible,
  .flex-panel.is-active,
  .flex-panel.is-expanded {
    box-shadow: inset 0 0 0 1px rgba(var(--sun-rgb), 0.22);
  }

  .flex-panel:focus-visible { outline-color: var(--sun); }

  /* Expanded reading surface: darker, edged, grained (alpha tuned 15% down
     from 0.72 → 0.61 so more of the panel art reads through) */
  .content-container {
    background-color: rgba(6, 9, 16, 0.61);
    border-top: 1px solid var(--border-soft);
  }

  /* Footer: legible, with a hairline + inset well */
  footer {
    font-size: 0.7rem;
    color: rgba(219, 225, 236, 0.8);
    background-color: var(--surface-inset);
  }

  footer a { font-size: 0.7rem !important; }

  /* Idle panels sit back so the active one (and the nav labels) read first */
  .panel-bg { transition: transform var(--duration-bg) var(--ease-premium), filter var(--duration-bg) var(--ease-premium); }

  .flex-panel:not(:hover):not(:focus-visible):not(.is-active):not(.is-expanded) .panel-bg {
    filter: brightness(0.84) saturate(0.96);
  }

  /* Nav affordance: a resting panel's label stays readable (was 0.42) and
     brightens on hover, so the vertical titles read as navigation. */
  .flex-container:not(.has-pointer-drive):hover .flex-panel:not(:hover) .flex-title,
  .flex-container:not(.has-pointer-drive):focus-within .flex-panel:not(:focus-visible) .flex-title,
  .flex-container.has-pointer-drive:has(.is-active) .flex-panel:not(.is-active) .flex-title {
    opacity: 0.55;
  }

  .flex-panel:not(.is-expanded) .flex-title { color: var(--text); }

  .flex-panel:not(.is-expanded):hover .flex-title,
  .flex-panel:not(.is-expanded):focus-visible .flex-title {
    color: var(--peak);
  }

  /* ---- Cards: layered dark surfaces, small radii, real hover/active ---- */
  .panel-embed .game-card,
  .panel-embed .value-card,
  .panel-embed .founder-card,
  .panel-embed .login-card {
    background-color: var(--surface-1);
    background-image: var(--grain);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: var(--space-4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  .panel-embed .game-card::before,
  .panel-embed .card-scrim,
  .panel-embed .card-bg-video,
  .panel-embed .card-bg-image,
  .panel-embed .campfire-scene,
  .panel-embed .founder-card-bg,
  .panel-embed .founder-card .card-scrim {
    border-radius: var(--r-md);
  }

  .panel-embed .game-card:hover,
  .panel-embed .value-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-accent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .panel-embed .game-card:active,
  .panel-embed .value-card:active {
    transform: translateY(0) scale(0.995);
    border-color: var(--sun);
  }

  /* Login card: same neutral surface as every other panel (was a blue gradient) */
  .panel-embed .login-card { max-width: 440px; }

  /* ---- Stat bar: an inset well instead of a floating strip ---- */
  .panel-embed .stats-bar {
    background: var(--surface-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .panel-embed .stat {
    padding: 0.95rem var(--space-2);
    border-right-color: var(--border-soft);
  }

  .panel-embed .stat-num {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--peak);
  }

  .panel-embed .stat-label { letter-spacing: 0.09em; color: var(--text-dim); }

  /* ---- Compact controls + strong hover/active ---- */
  .home-btn-primary,
  .home-btn-secondary,
  .panel-embed .login-btn,
  .ns-notice-btn,
  .footer-btn {
    border-radius: var(--r-sm);
    font-size: var(--control-font);
    letter-spacing: 0.08em;
    padding: var(--control-pad-y) var(--control-pad-x);
    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.12s ease;
  }

  .home-btn-primary,
  .panel-embed .login-btn {
    background: var(--sun);
    color: #14100b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .home-btn-primary:hover,
  .panel-embed .login-btn:hover {
    background: var(--sunbright);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--sun-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .home-btn-primary:active,
  .panel-embed .login-btn:active,
  .home-btn-secondary:active,
  .ns-notice-btn:active {
    transform: translateY(0) scale(0.98);
  }

  .home-btn-secondary {
    border: 1px solid var(--border-strong);
    color: var(--text);
  }

  .home-btn-secondary:hover {
    border-color: var(--border-accent);
    background: rgba(var(--sun-rgb), 0.08);
    color: var(--sunbright);
    transform: translateY(-1px);
  }

  .home-btn-secondary:active { background: rgba(var(--sun-rgb), 0.14); }

  .ns-notice-btn { padding: 0.6rem 1.6rem; }

  .ns-notice-btn:hover {
    background: var(--sunbright);
    box-shadow: 0 8px 20px rgba(var(--sun-rgb), 0.38);
    transform: translateY(-1px);
  }

  /* Host trap: the page ships a normalize sheet with
     `button:not([disabled]) { color: inherit }`, which is more specific
     (0,1,1) than a bare class (0,1,0), so a real <button>'s own colour is
     ignored. Bump specificity for buttons whose text sits on the accent. */
  button.ns-notice-btn,
  button.ns-notice-btn:hover { color: #14100b; }

  .ns-notice-panel:focus-visible { outline: none; }

  .footer-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    border-radius: var(--r-xs);
    /* No chrome at rest — the button is just an icon + label until you point
       at it, at which point the edge and wash fade in. */
    background: transparent;
    border-color: transparent;
  }

  .footer-btn:hover {
    background: rgba(var(--sun-rgb), 0.12);
    border-color: var(--border-accent);
  }

  .footer-btn:active { transform: translateY(1px); background: rgba(var(--sun-rgb), 0.18); }

  .footer-btn-icon { display: inline-flex; align-items: center; }
  .footer-btn .theme-icon { display: block; }

  /* ---- Chips / tags / badges: compact, small radii ---- */
  .panel-embed .hero-badge {
    border-radius: var(--r-xs);
    padding: 0.3rem 0.7rem;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    background: rgba(var(--sun-rgb), 0.1);
    border-color: rgba(var(--sun-rgb), 0.32);
    white-space: nowrap;
  }

  /* Panel titles sit on photos — keep them legible over busy imagery */
  .flex-title {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 6px 26px rgba(0, 0, 0, 0.7);
  }

  .panel-embed .game-tag {
    border-radius: var(--r-xs);
    padding: 0.16rem 0.42rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  kbd {
    border-radius: var(--r-xs);
    background: rgba(226, 232, 240, 0.07);
    border-color: var(--border-strong);
  }

  /* ---- Typography: one hierarchy, tighter tracking, no fake bolding ---- */
  .panel-embed .section-title,
  .panel-embed .cta h2,
  .panel-embed .login-card h2 {
    letter-spacing: -0.005em;
    line-height: 1.22;
  }

  .panel-embed .section-title { margin-bottom: var(--space-2); }
  .panel-embed .section-desc { margin-bottom: var(--space-5); }

  .panel-embed .game-type,
  .panel-embed .timeline-year,
  .panel-embed .founder-role {
    letter-spacing: 0.16em;
  }

  /* The Valheim wordmark is an inline block (the other icons are wrapped in a
     flex centring div), so it used to sit flush left while its siblings were
     centred — centre the icon row for all of them. */
  .panel-embed .game-icon { text-align: center; }

  /* ---- Spacing / alignment: shared rhythm across every panel ---- */
  .panel-embed .games-grid,
  .panel-embed .values-grid { gap: var(--space-3); }

  .panel-embed .story-grid { gap: var(--space-5); margin-bottom: var(--space-6); }
  .panel-embed .values-grid { margin-bottom: var(--space-6); }
  .panel-embed .timeline { margin-bottom: var(--space-6); }
  .panel-embed .cta p { margin-bottom: var(--space-5); }

  /* ---- Raised surfaces: notice, small radii + hairlines ---- */
  .ns-notice-panel {
    background-color: var(--surface-2);
    border-color: var(--border-soft);
    border-radius: var(--r-lg);
  }

  /* ---- Functional navigation: keyboard focus is always visible ---- */
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid rgba(var(--sun-rgb), 0.8);
    outline-offset: 2px;
  }

  /* ---- Mobile pass (≤768px) --------------------------------------------
     Touch targets ≥44px, no text below ~11px, and a little more room for the
     expanded panel. Everything else stays as the desktop design. ---- */
  @media (max-width: 768px) {
    /* Text floors — chips, labels and meta text were 9.3–10.4px */
    .panel-embed .hero-badge,
    .panel-embed .game-type,
    .panel-embed .stat-label,
    .panel-embed .about-subhead,
    .panel-embed .timeline-year,
    .panel-embed .founder-role {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
    }

    .panel-embed .game-tag {
      font-size: 0.68rem;
      padding: 0.2rem 0.5rem;
    }

    .panel-embed .game-desc,
    .panel-embed .section-desc,
    .panel-embed .story-text p,
    .panel-embed .value-card p,
    .panel-embed .timeline-desc { font-size: 0.86rem; }

    /* Touch targets: the clickable game logo (icon anchor) and the login CTA */
    .panel-embed .game-icon a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0.4rem 0;
    }

    .panel-embed .login-btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.7rem 1.5rem;
    }

    .nav-logo-text { font-size: 0.68rem; }

    /* Join panel: give the Discord widget the full content width and stop it
       from swallowing the whole visible area on a phone. */
    .panel-embed .cta { padding-left: 0; padding-right: 0; }

    .panel-embed .cta .discord-embed { padding: 0; }

    .panel-embed .cta .discord-embed iframe { height: min(320px, 38vh); }

    /* Collapsed strips: the (zero-height) content container still adds its
       bottom padding to the centred stack, which pushed the one-line label
       ~18px above the strip's centre. */
    .flex-panel:not(.is-expanded) .content-container { padding-bottom: 0; }

    /* Slightly slimmer collapsed strips → more room for the open panel */
    :root { --mobile-collapsed: 3.75rem; }

    /* Expanded reading surface: full-bleed, so it continues the panel band the
       way it does on desktop. It used to be an inset, bordered dark box inside
       the flush accordion strips, which read as a floating "card". */
    :root { --mobile-panel-pad-x: 1.35rem; }

    .flex-panel.is-expanded .panel-inner {
      padding-left: var(--mobile-panel-pad-x);
      padding-right: var(--mobile-panel-pad-x);
    }

    .flex-panel.is-expanded .content-container {
      width: auto;
      max-width: none;
      margin-left: calc(-1 * var(--mobile-panel-pad-x));
      margin-right: calc(-1 * var(--mobile-panel-pad-x));
      margin-top: 1rem;
      padding-left: var(--mobile-panel-pad-x);
      padding-right: var(--mobile-panel-pad-x);
    }
  }