:root{
      --bg:#39797A;        /* body background */
      --navfoot:#085A5B;   /* nav & footer fill */
      --text:#E2F0EF;
      --muted:#A9D4D6;
      --edge: rgba(255,255,255,.12);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);

      /* Twitch */
      --tw:#9146FF;
      --tw-dark:#21123D;

      /* TekTinkers coral */
      --coral:#C46960;

      /* Hero colors from index.html for Discord panel */
      --polar-ice:#E2F0EF;
      --polar-sea:#82C3C5;
      --polar-coral:#C46960;

      /* Hero-ish button base (dark teal pill) */
      --btn-dark:#0c4a4c;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth; height:100%;}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
      display:flex; flex-direction:column; min-height:100%;
    }
    a{color:inherit;text-decoration:none}
    a:visited{color:inherit}

    /* Header */
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
      background: var(--navfoot);
      border-bottom:1px solid rgba(145,70,255,.35);
    }
    .nav{ max-width:1200px; margin:0 auto; padding:14px 20px;
      display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px; color:var(--coral); }
    .brand .logo-img{ width:36px; height:36px; object-fit:contain; border-radius:0; background:none; box-shadow:none; padding:0 }
    .brand span{ color: var(--coral); }

    /* Buttons (global) */
    .btn{
      display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
      border:1px solid var(--edge); background:var(--bg); color:var(--text); font-weight:700; box-shadow:var(--shadow);
      transition: transform .12s ease, filter .15s ease;
    }
    .btn:hover{ transform:translateY(-2px); filter: brightness(1.05) saturate(1.03); }
    .top-btn{ background: var(--coral); color:#fff; border-color: rgba(196,105,96,.55); }

    /* Hero-style join button */
    .btn-join{
      background: var(--btn-dark);
      border-color: rgba(255,255,255,.10);
      border-radius:14px;
      padding:12px 16px;
    }
    .btn-join:hover{ filter: brightness(1.08) saturate(1.05); }
    .btn-join img{ height:22px; width:auto; display:inline-block; vertical-align:middle }

    main{ flex:1; max-width:900px; margin:0 auto; padding:24px 20px; }
    h1{ margin:12px 0 8px; font-size:clamp(26px,3.4vw,40px); line-height:1.1 }
    .lead{ color:var(--muted); margin:0 0 18px }

    /* Twitch card (purple fill with soft corner glow) */
    .panel{
      background:
        radial-gradient(circle at 80% 25%, rgba(145,70,255,0.35) 0%, transparent 70%),
        var(--tw-dark);
      border:1px solid var(--edge); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:28px;
    }

/* Discord card — angled gradient */
.panel-discord{
  background: linear-gradient(
    100deg,       /* angle: slightly diagonal */
    #116869 0%,   /* lighter teal top-left */
    #0d5d5e 35%,  /* mid tone */
    #0a4b4c 100%  /* darker teal bottom-right */
  );
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

    /* Links list (items brighten like hero buttons on hover) */
    .links{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px }
    .item{
      display:block;
      padding:12px 14px; border-radius:14px; border:1px solid var(--edge);
      background: rgba(12,74,76,.85);
      transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
    }
    .item:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); filter: brightness(1.05) saturate(1.03); }
    .name{ font-weight:800; letter-spacing:.2px }
    .desc{ color:var(--muted); font-size:.95rem }

    /* Footer pinned */
    footer{
      border-top:1px solid rgba(196,105,96,.5);
      background: var(--navfoot);
      color:var(--muted);
      text-align:center;
      padding:16px;
      margin-top:auto;
    }

    /* Sparkles */
    .sparkle-host{ position:relative }
    .sparkle{
      position:absolute; left:0; top:0;
      width:6px; height:6px; pointer-events:none; border-radius:50%;
      background: radial-gradient(circle, #fff 0 28%, rgba(255,255,255,.9) 29% 60%, transparent 61%);
      filter: drop-shadow(0 0 6px rgba(255,255,255,.85));
      transform: translate(-50%, -50%) scale(.9) rotate(0deg);
      opacity:.95;
      animation: sparkle-fade .8s ease-out forwards;
      z-index:7;
    }
    @keyframes sparkle-fade{
      to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.1) rotate(90deg); opacity:0; }
    }