.gp {
        display: none;
        animation: pgIn .35s ease both
      }

      .gp.ac {
        display: block
      }

      @keyframes pgIn {
        from {
          opacity: 0;
          transform: translateY(12px)
        }

        to {
          opacity: 1;
          transform: translateY(0)
        }
      }

      .gh {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px
      }

      .bb {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--t2);
        font-size: 16px;
        transition: .3s
      }

      .bb:hover {
        background: rgba(0, 255, 204, .06);
        color: var(--cyan)
      }

      .gh h2 {
        font-size: 22px
      }

      .ltag {
        font-size: 8px;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 12px;
        letter-spacing: 1px;
        text-transform: uppercase
      }

      .ltag.live {
        background: linear-gradient(135deg, var(--grn), #22cc55);
        color: #000
      }

      .ltag.new {
        background: linear-gradient(135deg, var(--mag), #cc00cc);
        color: #fff
      }

      .gl {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 14px
      }

      .gca {
        background: linear-gradient(180deg, rgba(10, 0, 31, .7), rgba(0, 0, 21, .8));
        border: 1px solid rgba(0, 255, 204, .04);
        border-radius: 18px;
        overflow: hidden;
        min-height: 380px;
        position: relative;
        order: 2
      }

      .gcp {
        background: linear-gradient(180deg, rgba(10, 0, 31, .95), rgba(5, 0, 15, .95));
        border: 1px solid rgba(0, 255, 204, .06);
        border-radius: 18px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        backdrop-filter: blur(16px);
        order: 1;
        position: relative;
        overflow: hidden
      }

      .gcp::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 255, 204, .15), transparent)
      }

      .cg {
        display: flex;
        flex-direction: column;
        gap: 4px
      }

      .cg label {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--t3);
        font-weight: 700
      }

      .cg input[type="number"],
      .cg input[type="text"],
      .cg select {
        background: rgba(0, 0, 21, .6);
        border: 1px solid rgba(0, 255, 204, .08);
        color: var(--t1);
        padding: 10px 12px;
        border-radius: var(--rs);
        font-size: 14px;
        font-weight: 600;
        transition: .3s;
        width: 100%
      }

      .cg input:focus,
      .cg select:focus {
        border-color: rgba(0, 255, 204, .35);
        box-shadow: 0 0 12px rgba(0, 255, 204, .08)
      }

      .cg input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--cyan), var(--mag));
        cursor: pointer;
        border: none
      }

      .cg input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #fff, #ccc);
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0, 255, 204, .5)
      }

      .bp {
        display: flex;
        gap: 3px;
        margin-top: 2px;
        flex-wrap: wrap
      }

      .bp button {
        flex: 1;
        min-width: 40px;
        padding: 6px 3px;
        background: rgba(0, 255, 204, .03);
        border: 1px solid rgba(0, 255, 204, .08);
        border-radius: 6px;
        color: var(--cyan);
        font-size: 10px;
        font-weight: 600;
        transition: .25s
      }

      .bp button:hover {
        border-color: rgba(0, 255, 204, .25);
        transform: translateY(-1px)
      }

      .bp2 {
        display: flex;
        gap: 3px;
        margin-top: 3px
      }

      .bp2 button {
        flex: 1;
        padding: 5px 2px;
        background: rgba(195, 0, 255, .03);
        border: 1px solid rgba(195, 0, 255, .08);
        border-radius: 6px;
        color: var(--mag);
        font-size: 8px;
        font-weight: 700;
        transition: .25s;
        text-transform: uppercase;
        letter-spacing: .3px
      }

      .bp2 button:hover {
        background: rgba(195, 0, 255, .1);
        border-color: rgba(195, 0, 255, .2);
        transform: translateY(-1px)
      }

      .gbtn {
        padding: 14px;
        border-radius: var(--r);
        font-weight: 800;
        font-size: 14px;
        transition: .3s;
        width: 100%;
        letter-spacing: .5px;
        text-transform: uppercase;
        position: relative;
        overflow: hidden
      }

      .gbtn.bet {
        background: linear-gradient(135deg, var(--cyan), #00cc99);
        color: #000;
        box-shadow: 0 4px 20px rgba(0, 255, 204, .25)
      }

      .gbtn.bet:hover {
        box-shadow: 0 6px 30px rgba(0, 255, 204, .45);
        transform: translateY(-2px)
      }

      .gbtn.co {
        background: linear-gradient(135deg, var(--gold), #ffaa00);
        color: #000;
        box-shadow: 0 4px 20px rgba(255, 215, 0, .25)
      }

      .gbtn.co:hover {
        box-shadow: 0 6px 30px rgba(255, 215, 0, .45);
        transform: translateY(-2px)
      }

      .gbtn:disabled {
        opacity: .25;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important
      }

      .gs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px
      }

      .sb {
        background: rgba(0, 255, 204, .015);
        border: 1px solid rgba(0, 255, 204, .05);
        border-radius: var(--rs);
        padding: 10px;
        text-align: center
      }

      .sb .sl {
        font-size: 8px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 3px
      }

      .sb .sv {
        font-size: 16px;
        font-weight: 800
      }

      .gr {
        text-align: center;
        padding: 12px;
        border-radius: var(--r);
        margin-top: 5px;
        font-size: 13px;
        font-weight: 700;
        animation: grIn .4s
      }

      .gr.w {
        background: rgba(57, 255, 20, .06);
        color: var(--grn);
        border: 1px solid rgba(57, 255, 20, .12)
      }

      .gr.l {
        background: rgba(255, 77, 77, .06);
        color: var(--red);
        border: 1px solid rgba(255, 77, 77, .12)
      }

      @keyframes grIn {
        from {
          transform: scale(.9);
          opacity: 0
        }

        to {
          transform: scale(1);
          opacity: 1
        }
      }

      .lbt {
        background: rgba(10, 0, 31, .6);
        border: 1px solid rgba(0, 255, 204, .04);
        border-radius: var(--r);
        overflow: hidden;
        margin-top: 16px;
        width: 100%
      }

      .lbh {
        display: grid;
        grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
        padding: 8px 14px;
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--t3);
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, .03);
        background: rgba(0, 255, 204, .015)
      }

      .lbr {
        display: grid;
        grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
        padding: 7px 14px;
        font-size: 11px;
        border-bottom: 1px solid rgba(255, 255, 255, .015);
        animation: lbrIn .3s ease;
      }
      @keyframes lbrIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      .lu {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500
      }

      .la {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
        flex-shrink: 0;
        color: #fff
      }

      .lm {
        font-weight: 700
      }

      .lm.w {
        color: var(--grn)
      }

      .lm.lo {
        color: var(--red)
      }

      .lp.w {
        color: var(--grn)
      }

      .lp.lo {
        color: var(--red)
      }

      .lb-slot {
        margin-top: 16px
      }

      .hero {
        background: linear-gradient(135deg, rgba(0, 255, 204, .04), rgba(195, 0, 255, .04));
        border: 1px solid rgba(0, 255, 204, .06);
        border-radius: 20px;
        padding: 44px 40px;
        margin-bottom: 24px;
        position: relative;
        overflow: hidden
      }

      .hero::before {
        content: '';
        position: absolute;
        top: -80%;
        right: -20%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(0, 255, 204, .07), transparent 65%);
        pointer-events: none
      }

      .hero-c {
        position: relative;
        z-index: 1
      }

      .hero h1 {
        font-size: 36px;
        font-weight: 900;
        margin-bottom: 10px;
        line-height: 1.1
      }

      .hero h1 .grd {
        background: linear-gradient(135deg, var(--cyan), var(--mag), var(--gold));
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: logoShimmer 4s ease infinite
      }

      .hero p {
        color: var(--t2);
        font-size: 14px;
        margin-bottom: 20px;
        max-width: 460px;
        line-height: 1.7
      }

      .hbb {
        display: flex;
        gap: 10px
      }

      .hb1 {
        background: linear-gradient(135deg, var(--cyan), #00cc99);
        color: #000;
        font-weight: 800;
        padding: 12px 28px;
        border-radius: var(--r);
        font-size: 14px;
        transition: .3s
      }

      .hb1:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(0, 255, 204, .4)
      }

      .hb2 {
        background: rgba(255, 255, 255, .03);
        color: var(--t1);
        font-weight: 700;
        padding: 12px 28px;
        border-radius: var(--r);
        border: 1px solid rgba(255, 255, 255, .06);
        font-size: 14px;
        transition: .3s
      }

      .og {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        margin-bottom: 24px
      }

      .oc {
        background: linear-gradient(180deg, rgba(10, 0, 31, .7), rgba(0, 0, 21, .8));
        border: 1px solid rgba(255, 255, 255, .04);
        border-radius: 14px;
        padding: 20px 14px;
        cursor: pointer;
        transition: .4s;
        text-align: center;
        position: relative;
        overflow: hidden
      }

      .oc:hover {
        transform: translateY(-6px);
        border-color: rgba(0, 255, 204, .12);
        box-shadow: 0 10px 35px rgba(0, 0, 0, .5)
      }

      .oc .oi {
        font-size: 36px;
        margin-bottom: 10px;
        display: inline-block;
        transition: .4s
      }

      .oc:hover .oi {
        transform: scale(1.15) rotate(-5deg)
      }

      .oc h4 {
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 2px
      }

      .oc p {
        font-size: 10px;
        color: var(--t3)
      }

      .sh {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px
      }

      .sh h2 {
        font-size: 18px;
        font-weight: 800
      }

      .sh .acc {
        color: var(--cyan)
      }

      /* 3D CARD — no automatic animation, JS drives it */