:root{
      --brand:#1FB6D5;
      --brand-dark:#1593AC;

      --bg:#F3F8FC;
      --surface:#ffffff;

      --text:#0B1F2A;
      --muted:#5B6B76;

      --border:rgba(11,31,42,.10);
      --shadow-md:0 18px 50px rgba(11,31,42,.10);

      --nav-h:76px;

      --cta-dark-bg:#0B1F2A;
      --cta-dark-tx:#ffffff;

      --cta-brand-bg:var(--brand);
      --cta-brand-tx:#ffffff;
    }

    html[data-theme="dark"]{
      --bg:#071821;
      --surface:#0B2230;

      --text:#EAF4FA;
      --muted:#B9D0DD;
      --border:rgba(234,244,250,.12);

      --cta-dark-bg:rgba(234,244,250,.92);
      --cta-dark-tx:#06131B;

      --cta-brand-bg:#169FBC;
      --cta-brand-tx:#ffffff;
    }

    /* HERO (NO BLUE BACKGROUND) */
    .choose-hero{
      padding-top:calc(var(--nav-h) + 40px);
      padding-bottom:40px;
      background:
        radial-gradient(900px 520px at 72% 14%, rgba(31,182,213,.08) 0%, transparent 62%),
        radial-gradient(700px 420px at 18% 18%, rgba(255,255,255,.65) 0%, transparent 58%),
        var(--bg);
      text-align:center;
    }
    html[data-theme="dark"] .choose-hero{
      background:
        radial-gradient(900px 520px at 72% 14%, rgba(31,182,213,.12) 0%, transparent 62%),
        radial-gradient(700px 420px at 18% 18%, rgba(255,255,255,.06) 0%, transparent 60%),
        var(--bg);
    }
    .h-title{
      font-weight:950;
      letter-spacing:-.05em;
      font-size:clamp(2rem,5vw,3.5rem);
      margin:0 0 10px;
      line-height:1.05;
    }
    .h-sub{
      color:var(--muted);
      font-weight:650;
      max-width:780px;
      margin:0 auto;
      line-height:1.55;
    }

    /* WRAP */
    .choose-wrap{
      margin-top:-20px;
      position:relative;
      z-index:10;
      padding-bottom:60px;
    }

    .panel{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:34px;
      box-shadow:var(--shadow-md);
      padding:30px;
    }

    .role-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      align-items:stretch;
    }

    .role-card{
      border-radius:26px;
      border:1px solid var(--border);
      background:var(--surface);
      overflow:hidden;
      transition:.25s ease;
      display:flex;
      flex-direction:column;
      height:100%;
      text-decoration:none;
      color:inherit;
      opacity:1 !important;
    }
    .role-card:hover{
      transform:translateY(-8px);
      border-color:var(--brand);
      box-shadow:0 20px 40px rgba(31,182,213,0.15);
    }

    /* VISUAL */
    .role-media{
      margin:15px 15px 0;
      height:350px;
      border-radius:20px;
      position:relative;
      overflow:hidden;
      background:#000;
    }
    .role-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:.8s;
      opacity:1;
      display:block;
    }
    .role-card:hover .role-media img{ transform:scale(1.05); }

    .top-pill{
      position:absolute;
      top:15px; left:15px;
      background:rgba(255,255,255,0.95);
      padding:10px 14px;
      border-radius:12px;
      font-weight:950;
      font-size:0.75rem;
      color:#0B1F2A;
      display:inline-flex;
      align-items:center;
      gap:8px;
      z-index:20;
      box-shadow:0 10px 25px rgba(0,0,0,.12);
    }
    html[data-theme="dark"] .top-pill{
      background:rgba(7,24,33,.78);
      color:var(--text);
      border:1px solid rgba(234,244,250,.14);
      box-shadow:0 12px 28px rgba(0,0,0,.38);
    }

    /* CALLER MARQUEE */
    .marquee-overlay{
      position:absolute;
      left:0; right:0; bottom:0;
      padding:14px 0 12px;
      overflow:hidden;
      pointer-events:none;
      background:linear-gradient(to top,
        rgba(11,31,42,0.92) 0%,
        rgba(11,31,42,0.55) 55%,
        rgba(11,31,42,0.00) 100%
      );
      backdrop-filter:blur(8px);
      z-index:15;
    }
    .marquee-viewport{
      width:100%;
      overflow:hidden;
      mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
    .marquee-track{
      display:inline-flex;
      align-items:center;
      white-space:nowrap;
      animation:scrollText 25s linear infinite;
      will-change:transform;
    }
    .m-item{
      display:inline-flex;
      align-items:center;
      padding:0 22px;
      color:#fff;
      font-weight:900;
      font-size:.85rem;
      text-transform:uppercase;
      letter-spacing:.04em;
      text-shadow:0 10px 22px rgba(0,0,0,.35);
      white-space:nowrap;
    }
    .m-item i{ color:var(--brand); margin-right:8px; }
    @keyframes scrollText{
      from{ transform:translateX(0); }
      to{ transform:translateX(-50%); }
    }

    /* CYBER FRIEND SPAWNER */
    .spawner-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:16;
    }
    .bubble-earn{
      position:absolute;
      background:#10B981;
      color:#fff;
      padding:10px 16px;
      border-radius:16px;
      font-weight:950;
      font-size:1rem;
      box-shadow:0 12px 26px rgba(16,185,129,.40);
      white-space:nowrap;
    }
    .bubble-nomad{
      position:absolute;
      background:rgba(255,255,255,0.95);
      color:#0B1F2A;
      padding:10px 14px;
      border-radius:16px;
      font-weight:950;
      font-size:.76rem;
      display:inline-flex;
      align-items:center;
      gap:8px;
      box-shadow:0 12px 26px rgba(0,0,0,.14);
      text-transform:uppercase;
      backdrop-filter:blur(10px);
      white-space:nowrap;
    }
    html[data-theme="dark"] .bubble-nomad{
      background:rgba(7,24,33,.78);
      color:var(--text);
      border:1px solid rgba(234,244,250,.14);
    }

    /* BODY */
    .role-body{
      padding:20px;
      flex-grow:1;
      display:flex;
      flex-direction:column;
    }
    .role-title{
      font-weight:950;
      font-size:1.5rem;
      margin:0 0 8px;
    }
    .role-desc{
      color:var(--muted);
      font-weight:650;
      font-size:1.05rem;
      line-height:1.5;
      margin:0 0 20px;
      flex-grow:1;
    }

    .btn-cta{
      width:100%;
      padding:18px;
      border-radius:16px;
      font-weight:900;
      text-align:center;
      font-size:1.1rem;
      border:none;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      user-select:none;
    }
    .btn-dark{ background:var(--cta-dark-bg); color:var(--cta-dark-tx); }
    .btn-brand{
      background:var(--cta-brand-bg);
      color:var(--cta-brand-tx);
      box-shadow:0 10px 25px rgba(31,182,213,0.30);
    }

    /* HINT */
    .hint{
      margin-top:20px;
      padding:20px;
      border-top:1px solid var(--border);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
    }
    .hint-text h4{ font-weight:900; margin:0; font-size:1.1rem; }
    .hint-text p{ margin:0; color:var(--muted); font-weight:650; }

    .hint-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .hint-pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(11,31,42,.10);
      background:rgba(255,255,255,.85);
      font-weight:900;
      color:var(--text);
      box-shadow:0 10px 25px rgba(0,0,0,.06);
      white-space:nowrap;
    }
    html[data-theme="dark"] .hint-pill{
      background:rgba(7,24,33,.70);
      border-color:rgba(234,244,250,.14);
      box-shadow:0 12px 28px rgba(0,0,0,.35);
    }
    .hint-pill i{color:var(--brand)}

    /* FOOT */
    .mini-foot{
      text-align:center;
      margin-top:30px;
      color:var(--muted);
      font-weight:800;
    }
    .mini-foot a{
      color:var(--brand-dark);
      text-decoration:none;
      font-weight:950;
    }
    html[data-theme="dark"] .mini-foot a{ color:var(--brand); }
    .legal-line{
      margin-top:10px;
      font-size:.95rem;
      font-weight:850;
      color:var(--muted);
    }

    /* Responsive */
    @media (max-width: 768px){
      .container-fixed{padding:0 16px}
      .choose-wrap{margin-top:0;}
      .panel{padding:18px;border-radius:28px}
      .role-grid{grid-template-columns:1fr}
      .role-media{height:280px}
      .hint{flex-direction:column;align-items:flex-start}
      .hint-badges{justify-content:flex-start}
    }