:root {
      --green-bright: #00e676;
      --green-deep: #020604;
      --green-night: #04170d;
      --gold: #00e676;
      --ink: #ffffff;
      --font-display: "Bricolage Grotesque", system-ui, sans-serif;
      --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
      --font-game: "Roboto", "Helvetica Neue", Arial, sans-serif;

      --wood: #55322a;
      --wood-dark: #2a1510;
      --cream: #f4ead0;
      --up-text: #b5e84f;
      --down-text: #ffb23e;
      --button-top: #00e85f;
      --button-bottom: #00a63f;
      --button-edge: #007a2e;
      --button-glow: 0, 255, 100;
      --button-text: #fff;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html, body {
      height: 100%;
      margin: 0;
      background: #020604;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.45;
      overflow-x: hidden;
      padding-left: max(16px, env(safe-area-inset-left, 0px));
      padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    body.on-grid {
      background: var(--green-night);
    }

    body.on-game {
      background-color: var(--wood);
    }

    /* VIEW NAVIGATION & LAYOUT */
    .view {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding-block: 24px;
      z-index: 1;
    }

    .col {
      width: 100%;
      max-width: 420px;
      position: relative;
      z-index: 1;
    }

    /* FLOATING DOTS BACKGROUND */
    .dots {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .dots i {
      position: absolute;
      border-radius: 50%;
      background: #00e676;
      opacity: .35;
      animation: drift 9s ease-in-out infinite alternate;
    }

    @keyframes drift {
      from { transform: translateY(0); }
      to { transform: translateY(-22px); }
    }

    /* VIEW 1: LOGIN PAGE */
    #login::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(90% 55% at 50% 0%, rgba(0,230,118,.10) 0%, rgba(0,230,118,0) 72%),
        #020604;
    }

    .brand-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(25px, 7vw, 34px);
      line-height: 1.12;
      text-align: center;
      margin: 0 0 12px;
      letter-spacing: -.03em;
    }

    .brand-title span {
      color: #00e676;
    }

    #login .sub {
      text-align: center;
      color: #9aa79f;
      font-size: 13px;
      letter-spacing: .04em;
      margin: 0 0 40px;
    }

    .login-heading {
      text-align: center;
      font-size: 29px;
      margin: 0 0 28px;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .field-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    label {
      font-size: 15px;
      font-weight: 500;
      color: #e8eee9;
    }

    .count {
      font-size: 12px;
      color: #a8cbb7;
      font-variant-numeric: tabular-nums;
    }

    .input-wrap {
      position: relative;
    }

    input {
      width: 100%;
      height: 58px;
      padding: 0 16px;
      font: inherit;
      font-size: 17px;
      color: var(--ink);
      background: #171917;
      border: 1.5px solid #333833;
      border-radius: 10px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }

    input::placeholder {
      color: rgba(255,255,255,.45);
    }

    input:focus {
      border-color: #00e676;
      box-shadow: 0 0 0 2px rgba(0,230,118,.14);
    }

    input[aria-invalid="true"] {
      border-color: #ffb4a8;
    }

    #phone {
      font-variant-numeric: tabular-nums;
      letter-spacing: .04em;
    }

    #pw {
      padding-right: 76px;
    }

    .toggle {
      position: absolute;
      right: 6px;
      top: 6px;
      height: 46px;
      padding: 0 14px;
      background: transparent;
      border: 0;
      color: #d5e5da;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 8px;
    }

    .toggle:hover { color: #fff; }

    .err {
      min-height: 18px;
      margin: 0;
      font-size: 13px;
      color: #ffb4a8;
    }

    .btn-login {
      height: 60px;
      border: 0;
      border-radius: 10px;
      background: #00e676;
      color: #001b0d;
      font: inherit;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(0,230,118,.20);
      transition: transform .12s, filter .12s;
    }

    .btn-login:hover { filter: brightness(1.06); }
    .btn-login:active { transform: translateY(1px); }

    .note {
      margin: 16px 0 0;
      font-size: 13px;
      color: #a8b4ac;
      text-align: center;
    }

    /* VIEW 2: PLATFORM SELECTION HUB */
    #platforms {
      justify-content: flex-start;
      padding-block: 28px 40px;
    }

    #platforms::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(90% 45% at 50% 0%, rgba(0,166,81,.38), rgba(0,166,81,0) 70%);
    }

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

    .who {
      font-size: 14px;
      font-weight: 600;
      color: #9fd6b5;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .link {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      height: 36px;
      padding: 0 16px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .2s;
    }

    .link:hover {
      background: rgba(255,255,255,.12);
    }

    #platforms h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(26px, 7vw, 32px);
      text-align: center;
      margin: 0 0 6px;
    }

    #platforms .sub {
      text-align: center;
      color: #9fd6b5;
      margin-bottom: 24px;
      font-size: 14px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .tile {
      --c: #0d3c8a;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 165px;
      padding: 18px 12px;
      border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
      border-radius: 14px;
      color: #fff;
      text-decoration: none;
      font: inherit;
      cursor: pointer;
      background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 40%, #0b1f14) 0%, #0b1f14 72%);
      box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
      animation: rise .55s cubic-bezier(.2,.8,.2,1) backwards;
      animation-delay: calc(var(--i, 0) * 60ms);
      transition: transform .2s, border-color .2s, box-shadow .2s;
    }

    .tile:hover {
      border-color: var(--c);
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(0,0,0,.45), 0 0 30px color-mix(in srgb, var(--c) 45%, transparent);
    }

    .tile:active {
      transform: scale(.97);
    }

    .badge {
      width: 70px;
      height: 70px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 36px;
      color: #fff;
      background-image: linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
      box-shadow: 0 12px 24px color-mix(in srgb, var(--c) 60%, transparent), inset 0 -5px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
      transition: transform .25s;
    }

    .tile:hover .badge {
      transform: scale(1.08) rotate(-3deg);
    }

    .tile span.name {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .05em;
      color: color-mix(in srgb, var(--c) 45%, #fff);
      text-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent);
      text-transform: uppercase;
    }

    .tile .go-tag {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,.85);
      padding: 4px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.15);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .tile::after {
      content: "";
      position: absolute;
      top: 0; bottom: 0; left: -60%; width: 40%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
      transform: skewX(-18deg);
      transition: left .7s ease;
      pointer-events: none;
    }

    .tile:hover::after {
      left: 130%;
    }

    /* VIEW 3: SPIN DA BOTTLE GAME VIEW */
    #gameView {
      padding-top: 10px;
      padding-bottom: 20px;
      justify-content: flex-start;
    }

    .wood-bg {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: block;
      pointer-events: none;
    }

    .game-app {
      position: relative;
      z-index: 2;
      height: 100%;
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .game-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: background .2s, transform .1s;
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    .active-platform-tag {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 13px;
      color: #00e676;
      background: rgba(0, 230, 118, 0.12);
      border: 1px solid rgba(0, 230, 118, 0.3);
      padding: 4px 12px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .game-title {
      margin: 4px 0 0;
      font-size: 1.5rem;
      font-weight: 700;
      font-family: var(--font-game);
      text-shadow: 0 1px 3px rgba(0,0,0,.6);
      color: #fff;
      letter-spacing: .02em;
    }

    .spin-balance {
      margin-top: -4px;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 230, 118, .3);
      background: rgba(0, 0, 0, .28);
      color: #d9ffe8;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .03em;
    }

    .stage {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-block: 8px;
    }

    .wheel {
      position: relative;
      width: min(82vw, 44vh, 370px);
      aspect-ratio: 1;
      filter: drop-shadow(0 12px 16px rgba(0,0,0,.65));
    }

    .wheel > svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .bottle {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 52%;
      aspect-ratio: 300 / 70;
      margin-left: -26%;
      translate: 0 -50%;
      transform: rotate(0deg);
      transition: transform 4.6s cubic-bezier(.1, .62, .12, 1);
      filter: drop-shadow(0 0 4px rgba(0,0,0,.7));
    }

    .bottle svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .result {
      height: 3.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.2rem;
      font-weight: 900;
      font-family: var(--font-game);
      letter-spacing: .05em;
      text-shadow: 0 2px 0 rgba(0,0,0,.65), 0 0 16px rgba(0,0,0,.5);
    }

    .result.up { color: var(--up-text); }
    .result.down { color: var(--down-text); }
    .result.pop { animation: pop .35s ease-out; }

    @keyframes pop {
      from { transform: scale(.5); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .go-btn {
      width: 100%;
      padding: 18px 12px;
      border: 0;
      border-bottom: 5px solid var(--button-edge);
      border-radius: 8px;
      background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
      color: var(--button-text);
      font: 800 1.05rem/1.2 var(--font-game);
      letter-spacing: .06em;
      text-transform: uppercase;
      text-shadow: 0 1px 2px rgba(0,40,12,.6), 0 0 10px rgba(255,255,255,.35);
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 0 14px 2px rgba(var(--button-glow),.55),
        0 0 36px 8px rgba(var(--button-glow),.35),
        0 0 70px 16px rgba(var(--button-glow),.18);
      animation: bloom 2.4s ease-in-out infinite;
      -webkit-tap-highlight-color: transparent;
    }

    @keyframes bloom {
      0%, 100% {
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.45),
          0 0 12px 1px rgba(var(--button-glow),.45),
          0 0 28px 5px rgba(var(--button-glow),.28),
          0 0 56px 12px rgba(var(--button-glow),.12);
      }
      50% {
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.5),
          0 0 18px 3px rgba(var(--button-glow),.7),
          0 0 46px 12px rgba(var(--button-glow),.45),
          0 0 90px 22px rgba(var(--button-glow),.24);
      }
    }

    .go-btn:active:not(:disabled) {
      transform: translateY(2px);
      border-bottom-width: 3px;
    }

    .go-btn:disabled {
      filter: saturate(.7) brightness(.85);
      cursor: default;
      animation-play-state: paused;
    }

    /* INVISIBLE ADMIN TRIGGER AREA */
    .admin-gear {
      position: fixed;
      z-index: 100;
      top: max(0px, env(safe-area-inset-top, 0px));
      right: max(0px, env(safe-area-inset-right, 0px));
      width: 70px;
      height: 70px;
      padding: 0;
      border: 0;
      background: transparent;
      opacity: 0;
      cursor: default;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    /* ADMIN MODAL OVERLAY */
    .admin-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.78);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .admin-overlay.open {
      display: flex;
    }

    .admin-panel {
      width: min(100%, 390px);
      max-height: min(85vh, 650px);
      overflow-y: auto;
      padding: 22px;
      border-radius: 16px;
      color: #f2fff5;
      background: linear-gradient(155deg, #087b43, #034b2d 72%, #023b25);
      border: 1px solid rgba(153, 255, 190, .55);
      box-shadow: 0 18px 55px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16);
      font-family: var(--font-body);
    }

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

    .admin-panel h2 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 700;
      font-family: var(--font-display);
    }

    .admin-close {
      border: 0;
      background: rgba(0,0,0,.25);
      color: #fff;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
    }

    .admin-help {
      margin: 8px 0 16px;
      color: #d5ffe2;
      font-size: .86rem;
      line-height: 1.45;
    }

    .admin-label {
      display: block;
      margin: 12px 0 6px;
      font-size: .84rem;
      font-weight: 700;
      color: #e4ffeb;
    }

    .admin-input {
      display: block;
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border-radius: 9px;
      border: 1px solid #9cf4b7;
      background: #f5fff7;
      color: #073b25;
      font: 600 1rem var(--font-body);
      outline: none;
      resize: vertical;
    }

    .admin-input:focus {
      box-shadow: 0 0 0 3px rgba(166,255,192,.3);
    }

    .admin-submit, .admin-save {
      width: 100%;
      margin-top: 16px;
      min-height: 48px;
      border: 0;
      border-radius: 9px;
      background: linear-gradient(180deg, #62ff9a, #18d96b);
      color: #04351f;
      font: 700 1rem var(--font-body);
      cursor: pointer;
      box-shadow: 0 5px 14px rgba(0,0,0,.2);
      transition: filter .15s;
    }

    .admin-submit:hover, .admin-save:hover {
      filter: brightness(1.05);
    }

    .admin-status {
      min-height: 20px;
      margin: 10px 0 0;
      color: #e4ffeb;
      font-size: .82rem;
      line-height: 1.4;
    }

    .admin-hidden {
      display: none !important;
    }

    /* SPLASH / LOADING OVERLAY */
    .splash {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      background: radial-gradient(90% 55% at 50% 0%, rgba(0,230,118,.12), transparent 72%), #020604;
    }

    .splash p {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      color: #fff;
    }

    .ring {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      border: 5px solid rgba(255,255,255,.2);
      border-top-color: var(--gold);
      animation: spin .8s linear infinite;
      display: grid;
      place-items: center;
    }

    .ring svg {
      width: 46px;
      height: 46px;
      fill: none;
      stroke: var(--gold);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 50;
      stroke-dashoffset: 50;
      opacity: 0;
    }

    .splash.done .ring {
      animation: none;
      border-color: var(--gold);
      background: rgba(0,230,118,.14);
    }

    .splash.done .ring svg {
      opacity: 1;
      animation: draw .45s ease forwards;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: max(24px, env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      background: #fff;
      color: #0a3d1f;
      padding: 10px 20px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      z-index: 400;
    }

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

    @keyframes draw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(16px) scale(.97);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dots i, .tile, .btn-login, .go-btn { animation: none; transition: none; }
      .bottle { transition-duration: 1.2s; }
      .result.pop { animation: none; }
    }
  

/* Package page styles (scoped so the original game layout stays intact) */

    #packageView.package-shell {
      background-color: #080C09;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* Canvas background effect */
    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .glass-card {
      background: rgba(18, 24, 20, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid #1e2d23;
    }

    .emerald-glow-border {
      border: 1px solid rgba(0, 255, 102, 0.3);
      box-shadow: 0 0 15px rgba(0, 255, 102, 0.1);
    }

    .emerald-glow-border:hover {
      border: 1px solid rgba(0, 255, 102, 0.6);
      box-shadow: 0 0 20px rgba(0, 255, 102, 0.25);
    }

    /* Smooth transitions */
    .modal-backdrop {
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Custom scrollbar */
    #packageView ::-webkit-scrollbar {
      width: 6px;
    }
    #packageView ::-webkit-scrollbar-track {
      background: #080C09;
    }
    #packageView ::-webkit-scrollbar-thumb {
      background: #1e2d23;
      border-radius: 4px;
    }
    #packageView ::-webkit-scrollbar-thumb:hover {
      background: #00E676;
    }


/* Mobile game viewport fit: prevent the game screen from appearing oversized. */
@media (max-width: 600px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
  }

  #gameView {
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: clip;
  }

  #gameView .game-app {
    width: 100%;
    max-width: 440px;
    min-height: calc(100svh - 30px);
    min-height: calc(100dvh - 30px);
  }
}