:root {
      --bg: #030407;
      --panel: rgba(8, 10, 22, 0.78);
      --panel-strong: rgba(10, 11, 30, 0.94);
      --green: #52ff72;
      --cyan: #4fe8ff;
      --pink: #ff4ff8;
      --orange: #ff8a35;
      --yellow: #fff24c;
      --red: #ff3d5e;
      --blue: #457bff;
      --text: #eaffff;
      --muted: #9bb2c6;
      --radius: 26px;
      --shadow: 0 0 24px rgba(79, 232, 255, .25), 0 0 55px rgba(255, 79, 248, .14);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 16% 12%, rgba(82,255,114,.18), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(255,79,248,.15), transparent 28%),
        radial-gradient(circle at 50% 78%, rgba(79,232,255,.12), transparent 34%),
        linear-gradient(180deg, #010203 0%, #070816 55%, #030407 100%);
      font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: radial-gradient(circle at center, black 0 55%, transparent 86%);
      opacity: .52;
      z-index: -2;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.04) 0px,
        rgba(255,255,255,.04) 1px,
        transparent 3px,
        transparent 7px
      );
      mix-blend-mode: screen;
      opacity: .16;
      z-index: 50;
    }

    a { color: inherit; text-decoration: none; }

    .stars, .stars::before, .stars::after {
      position: fixed;
      inset: 0;
      content: "";
      pointer-events: none;
      z-index: -1;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.7px),
        radial-gradient(circle, rgba(79,232,255,.7) 1px, transparent 1.7px),
        radial-gradient(circle, rgba(255,79,248,.65) 1px, transparent 1.8px);
      background-size: 180px 180px, 260px 260px, 330px 330px;
      background-position: 20px 40px, 80px 120px, 160px 70px;
      animation: drift 26s linear infinite;
      opacity: .42;
    }
    .stars::before { animation-duration: 40s; transform: scale(1.4); opacity: .25; }
    .stars::after { animation-duration: 18s; transform: scale(.85); opacity: .25; }

    @keyframes drift {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(-180px,120px,0); }
    }

    .topbar {
      width: min(1180px, calc(100% - 36px));
      margin: 18px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 16px;
      border: 1px solid rgba(79,232,255,.35);
      border-radius: 999px;
      background: rgba(3, 4, 7, .68);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      position: sticky;
      top: 14px;
      z-index: 20;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--green);
      text-shadow: 0 0 8px var(--green), 0 0 18px rgba(82,255,114,.6);
    }

    .brand img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 0 18px rgba(82,255,114,.65);
    }

    nav {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    nav a {
      padding: 10px 13px;
      color: #ddfbff;
      border-radius: 999px;
      font-size: .92rem;
      transition: .2s ease;
    }
    nav a:hover {
      color: #05050b;
      background: var(--cyan);
      box-shadow: 0 0 16px var(--cyan);
    }

    .hero {
      width: min(1180px, calc(100% - 36px));
      margin: 54px auto 0;
      display: grid;
      grid-template-columns: 1.04fr .96fr;
      gap: 34px;
      align-items: center;
      min-height: 690px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--yellow);
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      text-shadow: 0 0 11px rgba(255,242,76,.9);
      margin-bottom: 18px;
    }

    .pulse-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 8px var(--red), 0 0 18px var(--red);
      animation: pulse 1.2s infinite alternate;
    }

    @keyframes pulse {
      to { transform: scale(1.5); filter: brightness(1.5); }
    }

    h1 {
      margin: 0;
      font-size: clamp(3.6rem, 9vw, 8.4rem);
      line-height: .88;
      letter-spacing: .02em;
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 2px var(--green);
      text-shadow:
        0 0 8px rgba(82,255,114,.95),
        0 0 24px rgba(82,255,114,.7),
        0 0 46px rgba(255,79,248,.34);
    }

    .tagline {
      margin: 24px 0 0;
      max-width: 650px;
      color: #d7fbff;
      font-size: clamp(1.06rem, 2vw, 1.28rem);
      line-height: 1.65;
      text-shadow: 0 0 14px rgba(79,232,255,.3);
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 34px;
    }

    .btn {
      border: 0;
      cursor: pointer;
      border-radius: 999px;
      padding: 15px 22px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: transparent;
      color: white;
      position: relative;
      isolation: isolate;
      transition: transform .2s ease, filter .2s ease;
      font-size: .95rem;
    }
    .btn:hover { transform: translateY(-3px); filter: brightness(1.14); }
    .btn.primary {
      background: linear-gradient(90deg, var(--green), var(--cyan));
      color: #02040a;
      box-shadow: 0 0 18px rgba(82,255,114,.8), 0 0 34px rgba(79,232,255,.55);
    }
    .btn.secondary {
      border: 1px solid rgba(255,79,248,.75);
      box-shadow: inset 0 0 16px rgba(255,79,248,.25), 0 0 18px rgba(255,79,248,.45);
    }

    .btn.shop-cta,
    nav a.shop-nav {
      background: linear-gradient(90deg, var(--yellow), var(--orange));
      color: #05050b;
      box-shadow: 0 0 18px rgba(255,242,76,.72), 0 0 30px rgba(255,138,53,.42);
    }

    .btn.donate-cta,
    nav a.donate-nav {
      background: linear-gradient(90deg, var(--green), var(--cyan));
      color: #02040a;
      box-shadow: 0 0 18px rgba(82,255,114,.72), 0 0 30px rgba(79,232,255,.42);
    }

    nav a.shop-nav:hover,
    nav a.donate-nav:hover {
      background: linear-gradient(90deg, var(--green), var(--yellow));
      color: #02040a;
      box-shadow: 0 0 18px rgba(82,255,114,.72), 0 0 30px rgba(255,242,76,.42);
    }


    .shirt-promo-banner {
      width: min(1180px, calc(100% - 36px));
      margin: 18px auto 0;
      display: block;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(79,232,255,.38);
      background: rgba(3,4,7,.76);
      box-shadow: 0 0 22px rgba(79,232,255,.28), 0 0 42px rgba(255,79,248,.22);
      position: relative;
      z-index: 9;
      transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }

    .shirt-promo-banner:hover {
      transform: translateY(-3px);
      filter: brightness(1.08);
      box-shadow: 0 0 28px rgba(79,232,255,.4), 0 0 56px rgba(255,79,248,.32);
    }

    .shirt-promo-banner img {
      width: 100%;
      height: auto;
      display: block;
    }

    .logo-stage {
      position: relative;
      min-height: 600px;
      display: grid;
      place-items: center;
    }

    .logo-stage::before {
      content: "";
      position: absolute;
      width: min(590px, 94vw);
      height: min(590px, 94vw);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(82,255,114,.25), transparent 28%),
        conic-gradient(from 130deg, rgba(255,79,248,.35), rgba(79,232,255,.34), rgba(255,138,53,.35), rgba(82,255,114,.32), rgba(255,79,248,.35));
      filter: blur(26px);
      opacity: .7;
      animation: slowspin 16s linear infinite;
    }

    @keyframes slowspin { to { transform: rotate(360deg); } }


    .hero-feature-art {
      position: relative;
      width: min(660px, 94vw);
      border-radius: 28px;
      border: 1px solid rgba(79,232,255,.34);
      box-shadow: 0 0 28px rgba(79,232,255,.25), 0 0 55px rgba(255,79,248,.18), inset 0 0 24px rgba(0,0,0,.55);
      object-fit: cover;
      aspect-ratio: 16 / 9;
      animation: floaty 4.2s ease-in-out infinite;
    }
    .hero-game-badge {
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:14px;
      padding:9px 12px;
      border:1px solid rgba(255,242,76,.42);
      border-radius:999px;
      color:var(--yellow);
      background:rgba(0,0,0,.38);
      box-shadow:0 0 18px rgba(255,242,76,.12);
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.82rem;
    }

    .hero-logo {
      position: relative;
      width: min(640px, 94vw);
      border-radius: 50%;
      filter: drop-shadow(0 0 20px rgba(79,232,255,.72)) drop-shadow(0 0 42px rgba(255,79,248,.42)) drop-shadow(0 0 72px rgba(82,255,114,.18));
      animation: floaty 4.2s ease-in-out infinite;
    }

    @keyframes floaty {
      0% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-16px) scale(1.02); }
      100% { transform: translateY(0) scale(1); }
    }

    .section {
      width: min(1180px, calc(100% - 36px));
      margin: 92px auto 0;
    }

    .section-title {
      font-size: clamp(2rem, 4.5vw, 4.2rem);
      margin: 0 0 16px;
      text-transform: uppercase;
      color: var(--cyan);
      text-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(79,232,255,.5);
    }

    .section-copy {
      color: var(--muted);
      max-width: 780px;
      line-height: 1.75;
      font-size: 1.08rem;
      margin-bottom: 30px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 20px;
    }

    .card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      padding: 24px;
      background: linear-gradient(180deg, var(--panel), rgba(4,5,12,.88));
      border: 1px solid rgba(79,232,255,.26);
      box-shadow: var(--shadow);
      min-height: 255px;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: -2px;
      background: linear-gradient(135deg, transparent 0 30%, rgba(255,79,248,.18), transparent 70%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .card:hover::before { opacity: 1; }
    .card:hover { transform: translateY(-5px); transition: .25s ease; }

    .icon {
      width: 66px;
      height: 66px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      font-size: 2.1rem;
      margin-bottom: 18px;
      background: rgba(255,255,255,.045);
      border: 1px solid currentColor;
      box-shadow: inset 0 0 18px currentColor, 0 0 18px currentColor;
    }

    .cyan { color: var(--cyan); }
    .pink { color: var(--pink); }
    .green { color: var(--green); }
    .orange { color: var(--orange); }
    .yellow { color: var(--yellow); }
    .red { color: var(--red); }

    .card h3 {
      margin: 0 0 10px;
      font-size: 1.5rem;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .card p {
      color: #bfd1df;
      line-height: 1.65;
      margin: 0;
    }



    .game-library {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .game-card {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }


    .game-art {
      width: 100%;
      aspect-ratio: 16 / 9;
      display: block;
      object-fit: contain;
      object-position: center;
      border-radius: 18px;
      margin-bottom: 16px;
      padding: 6px;
      background:
        radial-gradient(circle at center, rgba(79,232,255,.12), rgba(255,79,248,.06) 56%, rgba(1,3,10,.78) 100%);
      border: 1px solid rgba(79,232,255,.28);
      box-shadow: inset 0 0 18px rgba(79,232,255,.08), 0 0 18px rgba(255,79,248,.12);
    }

    .game-art-fallback {
      width: 100%;
      aspect-ratio: 16 / 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 18px;
      margin-bottom: 16px;
      padding: 6px;
      background:
        radial-gradient(circle at center, rgba(79,232,255,.12), rgba(255,79,248,.06) 56%, rgba(1,3,10,.78) 100%);
      border: 1px solid rgba(79,232,255,.28);
      box-shadow: inset 0 0 18px rgba(79,232,255,.08), 0 0 18px rgba(255,79,248,.12);
    }
    .game-art-fallback .fallback-icon { font-size: 2.4rem; line-height: 1; }
    .game-art-fallback .fallback-label {
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--cyan, #4fe8ff);
      opacity: .85;
    }
    body.game-room .game-art-fallback .fallback-icon { font-size: 1.6rem; }
    body.game-room .game-art-fallback .fallback-label { font-size: .6rem; }

    .game-card .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin-top: 20px;
    }
    .game-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px; }
    .game-actions .btn { margin-top:0; }
    .leaderboard-cta { margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
    .multiplayer-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px; }


    .game-meta {
      color: var(--yellow);
      font-size: .82rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-shadow: 0 0 10px rgba(255,242,76,.75);
      margin-bottom: 12px;
    }

    .game-meta.member-only {
      color: var(--pink);
      text-shadow: 0 0 10px rgba(255,79,248,.8);
    }

    .access-note {
      margin-top: 12px;
      color: var(--yellow);
      font-size: .88rem;
      line-height: 1.45;
      font-weight: 800;
      text-shadow: 0 0 10px rgba(255,242,76,.35);
    }


    .leaderboard-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 26px;
    }

    .leaderboard-card {
      min-height: 340px;
    }

    .leaderboard-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .leaderboard-head h3 {
      margin: 0;
      color: var(--green);
      text-shadow: 0 0 10px var(--green);
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .score-table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 18px;
      font-size: .94rem;
    }

    .score-table th,
    .score-table td {
      padding: 10px 8px;
      border-bottom: 1px solid rgba(255,255,255,.09);
      text-align: left;
      color: #eaffff;
    }

    .score-table th {
      color: var(--yellow);
      text-transform: uppercase;
      letter-spacing: .09em;
      font-size: .72rem;
    }

    .score-table td:nth-child(1),
    .score-table td:nth-child(3),
    .score-table th:nth-child(1),
    .score-table th:nth-child(3) { text-align: center; }

    .empty-board {
      color: var(--muted);
      line-height: 1.65;
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px dashed rgba(79,232,255,.35);
    }

    .tournament-room {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 24px;
      align-items: stretch;
    }

    .player-form {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .player-form input,
    .player-form select {
      width: 100%;
      border: 1px solid rgba(79,232,255,.55);
      border-radius: 16px;
      background: rgba(1,3,10,.75);
      color: var(--text);
      padding: 14px 16px;
      outline: none;
      box-shadow: inset 0 0 18px rgba(79,232,255,.08);
      font-weight: 800;
    }

    .player-form input:focus,
    .player-form select:focus {
      border-color: var(--green);
      box-shadow: 0 0 15px rgba(82,255,114,.35), inset 0 0 18px rgba(79,232,255,.08);
    }

    .tournament-note {
      color: #cfe7f0;
      line-height: 1.65;
      margin: 18px 0 0;
    }

    .refresh-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }


    .member-room {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      align-items: stretch;
    }

    .signin-tools,
    .saved-members {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .saved-member-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      border-radius: 16px;
      border: 1px solid rgba(79,232,255,.28);
      background: rgba(1,3,10,.62);
      color: #eaffff;
      line-height: 1.35;
    }

    .saved-member-card strong {
      color: var(--yellow);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .mini-btn {
      border: 1px solid rgba(82,255,114,.45);
      background: rgba(82,255,114,.12);
      color: var(--green);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 950;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: .08em;
      box-shadow: 0 0 12px rgba(82,255,114,.18);
    }

    .mini-btn:hover {
      border-color: var(--cyan);
      color: var(--cyan);
    }

    .member-status {
      margin-top: 18px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(82,255,114,.38);
      background: rgba(82,255,114,.07);
      color: #eaffff;
      line-height: 1.6;
      box-shadow: inset 0 0 16px rgba(82,255,114,.08);
    }

    .member-dashboard {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .member-badge {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,79,248,.45);
      background: linear-gradient(135deg, rgba(255,79,248,.12), rgba(79,232,255,.07));
      box-shadow: inset 0 0 18px rgba(255,79,248,.09);
    }

    .member-badge strong {
      color: var(--yellow);
      text-transform: uppercase;
      letter-spacing: .08em;
      text-shadow: 0 0 10px rgba(255,242,76,.75);
    }

    .member-perks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .member-perk {
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(79,232,255,.25);
      background: rgba(255,255,255,.04);
      color: #dffcff;
      line-height: 1.45;
    }

    .member-perk b {
      display: block;
      color: var(--green);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px;
    }



    .plan-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      align-items: stretch;
      margin-top: 28px;
    }

    .plan-card {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(79,232,255,.34);
      background: linear-gradient(180deg, rgba(13,16,36,.86), rgba(3,5,15,.92));
      box-shadow: 0 0 24px rgba(79,232,255,.12), inset 0 0 24px rgba(82,255,114,.06);
      padding: 24px;
      min-height: 100%;
    }

    .plan-card.featured {
      border-color: rgba(82,255,114,.64);
      box-shadow: 0 0 28px rgba(82,255,114,.22), 0 0 38px rgba(255,79,248,.16), inset 0 0 30px rgba(82,255,114,.08);
    }

    .plan-card h3 {
      margin: 0 0 8px;
      color: var(--green);
      font-size: clamp(1.5rem, 3vw, 2.35rem);
      text-transform: uppercase;
      letter-spacing: .06em;
      text-shadow: 0 0 12px rgba(82,255,114,.7);
    }

    .plan-price {
      color: var(--yellow);
      font-size: 1.5rem;
      font-weight: 950;
      margin-bottom: 14px;
      text-shadow: 0 0 10px rgba(255,242,76,.45);
    }

    .plan-list {
      margin: 16px 0 20px;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      color: #eaffff;
      line-height: 1.45;
    }

    .plan-list li::before {
      content: "✦";
      color: var(--cyan);
      margin-right: 8px;
      text-shadow: 0 0 9px var(--cyan);
    }

    .payment-panel {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    .payment-actions {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .payment-status {
      margin-top: 16px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,242,76,.35);
      background: rgba(255,242,76,.06);
      color: #fff9be;
      line-height: 1.55;
    }

    .plan-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 7px 11px;
      margin-top: 8px;
      background: rgba(79,232,255,.12);
      border: 1px solid rgba(79,232,255,.35);
      color: var(--cyan);
      text-transform: uppercase;
      font-weight: 950;
      letter-spacing: .08em;
      font-size: .72rem;
    }

    .profile-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .profile-stat {
      padding: 14px 10px;
      border-radius: 16px;
      text-align: center;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.12);
    }

    .profile-stat strong {
      display: block;
      color: var(--cyan);
      font-size: 1.45rem;
      text-shadow: 0 0 10px var(--cyan);
    }

    .profile-stat span {
      display: block;
      color: var(--muted);
      text-transform: uppercase;
      font-size: .72rem;
      letter-spacing: .08em;
    }

    .small-note {
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.55;
      margin-top: 12px;
    }

    .cabinet-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: stretch;
    }

    .feature-panel {
      background: var(--panel-strong);
      border: 1px solid rgba(255,79,248,.35);
      border-radius: 32px;
      padding: clamp(24px, 4vw, 44px);
      box-shadow: 0 0 28px rgba(255,79,248,.22), inset 0 0 30px rgba(79,232,255,.08);
      position: relative;
      overflow: hidden;
    }

    .feature-panel::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(82,255,114,.12);
      filter: blur(12px);
      right: -80px;
      bottom: -80px;
    }

    .neon-list {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: grid;
      gap: 14px;
    }
    .neon-list li {
      padding: 14px 16px;
      border-left: 4px solid var(--green);
      background: rgba(255,255,255,.04);
      border-radius: 15px;
      color: #e8ffff;
      box-shadow: inset 0 0 13px rgba(82,255,114,.12);
    }

    .arcade-preview {
      min-height: 430px;
      border-radius: 32px;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,242,76,.34), transparent 12%),
        radial-gradient(circle at 32% 42%, rgba(255,61,94,.34), transparent 10%),
        radial-gradient(circle at 70% 54%, rgba(79,232,255,.32), transparent 13%),
        linear-gradient(180deg, rgba(12,15,34,.98), rgba(2,3,8,.96));
      border: 1px solid rgba(79,232,255,.35);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      display: grid;
      place-items: center;
    }

    .ufo {
      width: 250px;
      height: 86px;
      border: 6px solid var(--pink);
      border-radius: 50%;
      box-shadow: 0 0 18px var(--pink), inset 0 0 20px rgba(255,79,248,.35);
      position: relative;
      animation: floaty 3s ease-in-out infinite;
    }
    .ufo::before {
      content: "";
      position: absolute;
      left: 62px;
      top: -62px;
      width: 118px;
      height: 86px;
      border: 6px solid var(--cyan);
      border-bottom: 0;
      border-radius: 90px 90px 0 0;
      box-shadow: 0 0 16px var(--cyan);
    }
    .ufo::after {
      content: "👽";
      position: absolute;
      inset: -54px 0 0;
      display: grid;
      place-items: center;
      font-size: 3.5rem;
      text-shadow: 0 0 16px var(--green);
    }

    .beam {
      position: absolute;
      top: 245px;
      width: 190px;
      height: 170px;
      background: linear-gradient(180deg, rgba(255,242,76,.35), rgba(255,138,53,.08), transparent);
      clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
      filter: blur(.4px);
      animation: beam 1.4s infinite alternate;
    }
    @keyframes beam { to { opacity: .42; transform: scaleX(1.15); } }

    .invader-line {
      position: absolute;
      bottom: 42px;
      display: flex;
      gap: 26px;
      font-size: 3.3rem;
      text-shadow: 0 0 18px currentColor;
    }

    .scores {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 26px;
    }

    .score {
      border-radius: 22px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.13);
      padding: 22px;
      text-align: center;
    }

    .score strong {
      display: block;
      font-size: clamp(2rem, 4vw, 3.2rem);
      color: var(--yellow);
      text-shadow: 0 0 14px var(--yellow);
    }
    .score span {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .86rem;
    }

    .contact {
      margin-bottom: 54px;
      border-radius: 36px;
      padding: clamp(26px, 6vw, 56px);
      border: 1px solid rgba(82,255,114,.38);
      background:
        linear-gradient(135deg, rgba(82,255,114,.11), transparent 32%),
        linear-gradient(315deg, rgba(255,79,248,.13), transparent 32%),
        rgba(4,6,14,.86);
      box-shadow: var(--shadow);
      text-align: center;
    }

    .contact h2 { margin-left: auto; margin-right: auto; }
    .contact p { margin-left: auto; margin-right: auto; }

    .cancel-membership-row {
      width: min(1180px, calc(100% - 36px));
      margin: 24px auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      min-height: 34px;
    }

    .cancel-membership-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,61,94,.85);
      background: rgba(255,61,94,.16);
      color: #ffd9df;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: .72rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255,61,94,.28);
    }

    .cancel-membership-btn:hover {
      background: var(--red);
      color: #05050b;
      box-shadow: 0 0 16px rgba(255,61,94,.72);
    }
















    footer {
      text-align: center;
      color: #91a7b9;
      padding: 34px 20px 50px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .glitch {
      animation: flicker 3.4s infinite;
    }

    @keyframes flicker {
      0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
      20%, 24%, 55% { opacity: .73; }
    }

    @media (max-width: 920px) {
      .topbar {
        border-radius: 26px;
        align-items: flex-start;
        flex-direction: column;
      }
      nav { justify-content: flex-start; }
      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-top: 38px;
      }
      .logo-stage { min-height: 430px; }
      .grid, .game-library, .cabinet-row, .scores, .leaderboard-grid, .tournament-room, .member-room, .member-perks, .profile-stats { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
      .topbar, .hero, .section { width: min(100% - 22px, 1180px); }
      nav a { padding: 8px 9px; font-size: .82rem; }
      .brand { font-size: .88rem; }
      .hero-logo { width: 96vw; }
      h1 { -webkit-text-stroke: 1.25px var(--green); }
      .invader-line { font-size: 2.1rem; gap: 12px; }
      .ufo { transform: scale(.82); }
    }


    /* Arcade 51 profile badges, UFO background, and ambient controls */
    .arcade51-fx-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
    .arcade51-ufo, .arcade51-debris { position: absolute; filter: drop-shadow(0 0 14px rgba(79,232,255,.9)); opacity: .78; will-change: transform; }
    .arcade51-ufo {
      width: 128px;
      height: 96px;
      background: center / contain no-repeat url("../images/background-ufo.png");
      filter: drop-shadow(0 0 14px rgba(79,232,255,.95)) drop-shadow(0 0 28px rgba(255,84,204,.38));
      transform-origin: center center;
      --arcade51-ufo-scale: 1;
      --arcade51-ufo-flip: 1;
    }
    .arcade51-ufo::after { content:""; position:absolute; left:26%; right:26%; bottom:-14px; height:26px; background: radial-gradient(ellipse at center, rgba(82,255,114,.45), transparent 70%); filter: blur(3px); }
    .arcade51-debris { width: 9px; height: 9px; border-radius: 35% 65% 45% 55%; background: linear-gradient(135deg, rgba(255,242,76,.9), rgba(79,232,255,.35)); box-shadow: 0 0 10px rgba(255,242,76,.7); }
    @keyframes arcade51-fly-right { from { transform: translate3d(-180px,0,0) scale(calc(var(--arcade51-ufo-scale) * var(--arcade51-ufo-flip)), var(--arcade51-ufo-scale)) rotate(-4deg); } to { transform: translate3d(calc(100vw + 220px), 42px,0) scale(calc(var(--arcade51-ufo-scale) * var(--arcade51-ufo-flip)), var(--arcade51-ufo-scale)) rotate(6deg); } }
    @keyframes arcade51-fly-left { from { transform: translate3d(calc(100vw + 220px),0,0) scale(calc(var(--arcade51-ufo-scale) * -1), var(--arcade51-ufo-scale)) rotate(4deg); } to { transform: translate3d(-200px, -38px,0) scale(calc(var(--arcade51-ufo-scale) * -1), var(--arcade51-ufo-scale)) rotate(-6deg); } }
    @keyframes arcade51-debris-drift { from { transform: translate3d(0,-40px,0) rotate(0deg); } to { transform: translate3d(-260px, calc(100vh + 90px),0) rotate(540deg); } }
    .ambient-audio-btn { position: fixed; right: 18px; bottom: 76px; z-index: 45; border: 1px solid rgba(79,232,255,.45); background: rgba(3,4,7,.78); color: var(--cyan); box-shadow: 0 0 18px rgba(79,232,255,.25); border-radius: 999px; padding: 10px 13px; font-weight: 950; cursor: pointer; }
    .ambient-audio-btn.is-on { color: var(--green); border-color: rgba(82,255,114,.62); }
    .badge-wall { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
    .profile-award { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); border-radius: 18px; padding: 14px; min-height: 112px; position: relative; overflow: hidden; }
    .profile-award::after { content:""; position:absolute; inset:auto -30px -45px auto; width:100px; height:100px; border-radius:50%; background:rgba(79,232,255,.12); filter:blur(8px); }
    .profile-award.locked { opacity: .42; filter: grayscale(.7); }
    .profile-award.golden { border-color: rgba(255,242,76,.78); background: linear-gradient(135deg, rgba(255,242,76,.17), rgba(255,138,53,.08), rgba(255,255,255,.035)); box-shadow: 0 0 22px rgba(255,242,76,.28), inset 0 0 22px rgba(255,242,76,.08); }
    .profile-award-icon { font-size: 2rem; display:block; margin-bottom: 7px; }
    .profile-award strong { color: var(--yellow); text-transform: uppercase; letter-spacing: .07em; }
    .profile-award p { margin: 7px 0 0; color: var(--muted); line-height: 1.35; font-size: .88rem; }







    .home-highlight-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-top: 22px;
    }

    .home-highlight-grid.top-five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .mini-game-card {
      min-height: 210px;
      padding: 16px;
    }

    .mini-game-card .game-art {
      margin-bottom: 10px;
      border-radius: 14px;
      padding: 4px;
    }

    .mini-game-card h3 {
      font-size: 1rem;
      margin-bottom: 8px;
    }

    .mini-game-card p {
      font-size: .86rem;
      line-height: 1.35;
    }

    .mini-game-card .btn {
      margin-top: 12px;
      padding: 9px 12px;
      font-size: .78rem;
    }

    body.game-room .game-library {
      grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
      gap: 12px;
    }

    body.game-room .game-card {
      min-height: 170px;
      padding: 13px;
      border-radius: 18px;
    }

    body.game-room .game-art {
      margin-bottom: 8px;
      padding: 4px;
      border-radius: 12px;
    }

    body.game-room .game-card h3 {
      font-size: .96rem;
      margin-bottom: 7px;
    }

    body.game-room .game-card p { display: none; }
    body.game-room .game-meta, body.game-room .access-note { font-size: .68rem; margin-bottom: 7px; }
    body.game-room .game-actions { gap: 6px; margin-top: 8px; }
    body.game-room .game-actions .btn { padding: 8px 9px; font-size: .68rem; }

    @media (max-width: 900px) {
      .home-highlight-grid, .home-highlight-grid.top-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 560px) {
      .home-highlight-grid, .home-highlight-grid.top-five, body.game-room .game-library { grid-template-columns: 1fr; }
    }

  

@media (max-width: 760px){
  html,body{max-width:100%;overflow-x:hidden;}
  .games-grid,.game-grid,#games{grid-template-columns:1fr !important;}
  .game-card,.card{max-width:100% !important;}
  img,canvas,video{max-width:100%;height:auto;}
  .hero h1,h1{font-size:clamp(34px,12vw,58px) !important;}
  .container,main,section{max-width:100vw !important;}
}

/* game page (Agent 51AZ 2026-10-30) */
.a51-crumbs{width:min(1180px,calc(100% - 36px));margin:26px auto 0;color:var(--muted);font-size:.9rem;display:flex!important;justify-content:flex-start!important;flex-wrap:wrap;gap:6px}
.a51-crumbs a{color:var(--cyan);text-decoration:none}
.a51-play-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3vw,34px);align-items:center}
.a51-play-media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(79,232,255,.35);box-shadow:var(--shadow);background:#000}
.a51-play-media video,.a51-play-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:radial-gradient(circle at center,rgba(79,232,255,.12),rgba(255,79,248,.06) 56%,rgba(1,3,10,.9) 100%)}
.a51-play-info h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;margin:6px 0 12px;color:var(--green);text-shadow:0 0 12px rgba(82,255,114,.6),0 0 30px rgba(255,79,248,.25);text-transform:uppercase}
.a51-play-info p.desc{color:#d7fbff;line-height:1.6;margin:0 0 18px}
.a51-play-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.a51-play-tags a{font-size:.8rem;padding:3px 11px;border-radius:999px;background:rgba(79,232,255,.12);color:var(--muted);text-decoration:none}
.a51-play-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.a51-play-actions .btn{font-size:1.05rem;padding:15px 30px}
#a51-play-btn.primary{box-shadow:0 0 22px rgba(82,255,114,.55),0 0 46px rgba(79,232,255,.25)}
.a51-lock{margin-top:18px;padding:18px 20px;border-radius:22px;border:2px solid var(--pink);background:rgba(255,79,248,.08);box-shadow:0 0 22px rgba(255,79,248,.3)}
.a51-lock h2{margin:0 0 6px;font-size:1.25rem;color:var(--pink);text-shadow:0 0 12px rgba(255,79,248,.6);text-transform:uppercase;letter-spacing:.06em}
.a51-lock p{margin:0 0 12px;color:#ffd8ff}
.a51-play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px;align-items:start}
.a51-play-grid .card{min-height:0}
.a51-ctl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 14px}
.a51-ctl dt{color:var(--cyan);font-weight:900;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.a51-ctl dd{margin:0;color:#d7fbff}
.a51-ctl-tip{color:var(--muted);margin:12px 0 0}
.a51-top-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.a51-top-tabs button{padding:7px 14px;border-radius:999px;border:2px solid rgba(79,232,255,.45);background:transparent;color:var(--text);font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.a51-top-tabs button[aria-selected="true"]{border-color:var(--pink);background:rgba(255,79,248,.18)}
.a51-season-note{margin:10px 0 0;color:var(--muted);font-size:.82rem}
.a51-season-note a{color:var(--yellow)}
.a51-medals{min-height:0}
.a51-medal-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.a51-medal-tier{padding:12px;border-radius:16px;background:rgba(79,232,255,.06);text-align:center}
.a51-medal-tier .i{font-size:1.8rem;line-height:1}.a51-medal-tier .n{display:block;font-weight:900;margin:6px 0 2px}
.a51-medal-tier .t{color:var(--yellow);font-weight:800;font-variant-numeric:tabular-nums}.a51-medal-tier .c{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
.a51-medal-tier.gold{box-shadow:inset 0 0 0 1px rgba(255,216,79,.5)}.a51-medal-tier.silver{box-shadow:inset 0 0 0 1px rgba(200,214,229,.4)}.a51-medal-tier.bronze{box-shadow:inset 0 0 0 1px rgba(205,127,50,.45)}
.a51-medal-holders{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.a51-medal-holders li{padding:5px 11px;border-radius:999px;background:rgba(79,232,255,.08);font-weight:700;font-size:.88rem}
.a51-medal-note{color:var(--muted);font-size:.82rem;margin:12px 0 0}
@media (max-width:560px){.a51-medal-tiers{grid-template-columns:1fr}}
.a51-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.a51-related .game-card{min-height:0!important;text-decoration:none;color:inherit}
.a51-related .game-card h3{font-size:.96rem;margin:0}
@media (max-width:860px){.a51-play-hero,.a51-play-grid{grid-template-columns:1fr}}
.a51-lock .a51-demo-note{margin:12px 0 0;font-size:.85rem;color:#ffd8ff}
#a51-demo-btn{cursor:pointer;font:inherit;font-size:1rem;padding:15px 24px;border-color:rgba(255,79,248,.75);color:#ffd8ff}
#a51-demo-btn[disabled]{opacity:.55;cursor:default}