:root {
    --bg: #070B15;
    --neon-purple: #7c3aed;
    --neon-blue: #00f5ff;
    --font-ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }
  html { background: var(--bg); }
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    min-height: 100vh; min-height: 100dvh;
    font-family: var(--font-ui);
    color: #fff;
    background: var(--bg);
    overflow-x: hidden;
    padding-bottom: 96px;
    -webkit-font-smoothing: antialiased;
  }
  #stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .star {
    position: absolute; border-radius: 50%; background: #fff;
    animation: twinkle var(--d,4s) ease-in-out infinite var(--delay,0s);
  }
  @keyframes twinkle {
    0%,100% { opacity: var(--lo,.06); transform: scale(1); }
    50%      { opacity: var(--hi,.35); transform: scale(1.3); }
  }

  .app { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; padding: 18px 16px 28px; }

  /* TOP BAR */
  .top-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .back-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #fff; text-decoration: none;
    flex-shrink: 0;
  }
  .top-block { flex: 1; }
  .top-title { font-size: 1.25rem; font-weight: 900; }
  .top-sub { font-size: .76rem; color: rgba(255,255,255,.5); margin-top: 2px; }
  .shop-orb {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #b45309, #f59e0b);
    text-decoration: none; font-size: 1.2rem;
    box-shadow: 0 0 14px rgba(245,158,11,.45);
    flex-shrink: 0;
  }

  /* SECTION LABEL */
  .section-hint {
    font-size: .68rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(0,245,255,.7);
    margin: 0 2px 10px;
  }
  .section-gap { margin-top: 20px; }

  /* CARD STACK */
  .card-stack { display: flex; flex-direction: column; gap: 10px; }

  /* BASE CARD */
  .gcard {
    display: flex; align-items: center; gap: 0;
    text-decoration: none; color: #fff;
    border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,.14);
    overflow: hidden; position: relative;
    box-shadow: 0 6px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
    transition: transform .12s ease;
    min-height: 90px;
  }
  .gcard:active { transform: scale(.984) translateY(2px); }
  .gcard::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.22), transparent);
    z-index: 4;
  }

  /* ICON */
  .gc-icon {
    flex-shrink: 0;
    width: 88px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    padding: 10px 8px 10px 14px;
    position: relative; z-index: 3;
  }
  .gc-icon img {
    width: 72px; height: 72px;
    object-fit: contain; display: block;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
  }

  /* BODY */
  .gc-body {
    flex: 1; min-width: 0;
    padding: 13px 6px 13px 2px;
    position: relative; z-index: 3;
  }
  .gc-title { font-size: 1.05rem; font-weight: 900; line-height: 1.2; margin-bottom: 5px; }
  .gc-desc { font-size: .72rem; color: rgba(255,255,255,.72); line-height: 1.4; }

  /* ARROW */
  .gc-arrow {
    flex-shrink: 0;
    width: 30px; height: 30px; margin-right: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.65);
    position: relative; z-index: 3;
  }

  /* DECO LAYER — right-side decorative background */
  .gc-deco {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 55%; pointer-events: none; z-index: 1;
    overflow: hidden;
  }

  /* ── CARD THEMES ── */

  /* World Pin */
  .gcard.pin {
    background: linear-gradient(130deg, #052e4f 0%, #0a5070 40%, #0d7a90 80%, rgba(0,245,255,.12) 100%);
    border-color: rgba(6,182,212,.35);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 22px rgba(6,182,212,.15), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.pin .gc-deco {
    background:
      radial-gradient(ellipse 80% 60% at 80% 50%, rgba(0,245,255,.18) 0%, transparent 70%);
  }
  .gcard.pin .gc-deco::after {
    content: '';
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    width: 60px; height: 60px;
    border: 2px dashed rgba(0,245,255,.35);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0,245,255,.2);
  }

  /* Solo maraton */
  .gcard.marathon {
    background: linear-gradient(130deg, #3a1f02 0%, #6b3a05 40%, #a16207 80%, rgba(250,204,21,.14) 100%);
    border-color: rgba(245,158,11,.4);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 22px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.marathon .gc-deco {
    background: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(245,158,11,.2) 0%, transparent 70%);
  }
  .gcard.marathon .gc-deco::before {
    content: '👣 👣 👣';
    position: absolute; bottom: 8px; right: 10px;
    font-size: 14px; opacity: .35; letter-spacing: 4px;
    transform: rotate(-10deg);
  }

  /* Solo kviz */
  .gcard.solo {
    background: linear-gradient(130deg, #0c1a5e 0%, #1a2ea0 45%, #2a44c8 80%, rgba(99,102,241,.2) 100%);
    border-color: rgba(99,102,241,.4);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 20px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.solo .gc-deco {
    background: radial-gradient(ellipse 70% 80% at 90% 50%, rgba(99,102,241,.25) 0%, transparent 65%);
  }

  /* Orbitne zastave */
  .gcard.flag {
    background: linear-gradient(130deg, #3d0a5e 0%, #6b1090 45%, #9b20c0 80%, rgba(232,121,249,.15) 100%);
    border-color: rgba(192,38,211,.4);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 22px rgba(192,38,211,.18), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.flag .gc-deco {
    background: radial-gradient(ellipse 70% 70% at 82% 50%, rgba(232,121,249,.28) 0%, transparent 65%);
  }
  .gcard.flag .gc-deco::after {
    content: '';
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 52px; height: 30px;
    border-radius: 50%;
    background: rgba(200,50,230,.25);
    box-shadow: 0 0 20px rgba(200,50,230,.4), 0 0 40px rgba(200,50,230,.2);
    border: 1px solid rgba(232,121,249,.3);
  }

  /* Orbitalni oblik */
  .gcard.shape {
    background: linear-gradient(130deg, #042030 0%, #084868 45%, #0a7090 80%, rgba(34,211,238,.15) 100%);
    border-color: rgba(8,145,178,.4);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 20px rgba(8,145,178,.15), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.shape .gc-deco {
    background: radial-gradient(ellipse 70% 70% at 85% 50%, rgba(34,211,238,.2) 0%, transparent 65%);
  }

  /* Poveži sazvežđa */
  .gcard.connection {
    background: linear-gradient(130deg, #0e0828 0%, #1c1060 45%, #2c1888 80%, rgba(0,245,255,.12) 100%);
    border-color: rgba(99,102,241,.35);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 20px rgba(99,102,241,.12), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.connection .gc-deco {
    background: radial-gradient(ellipse 70% 70% at 85% 50%, rgba(0,245,255,.12) 0%, transparent 65%);
  }
  .gcard.connection .gc-deco::before {
    content: '✦';
    position: absolute; right: 22px; top: 14px;
    font-size: 10px; color: rgba(0,245,255,.5);
  }
  .gcard.connection .gc-deco::after {
    content: '✦';
    position: absolute; right: 36px; bottom: 14px;
    font-size: 7px; color: rgba(0,245,255,.4);
  }

  /* Slovons Solo */
  .gcard.slovons {
    background: linear-gradient(130deg, #12084a 0%, #241888 45%, #3820b0 80%, rgba(139,92,246,.2) 100%);
    border-color: rgba(139,92,246,.4);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 20px rgba(139,92,246,.15), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.slovons .gc-deco {
    background: radial-gradient(ellipse 70% 70% at 85% 50%, rgba(167,139,250,.22) 0%, transparent 65%);
  }
  .gcard.slovons .gc-deco::before {
    content: 'A  S  B';
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 900; letter-spacing: 6px;
    color: rgba(167,139,250,.18);
  }

  /* ZG Flash */
  .gcard.fast {
    background: linear-gradient(130deg, #0a2800 0%, #1a5200 45%, #2a8000 80%, rgba(134,239,172,.15) 100%);
    border-color: rgba(74,222,128,.35);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 20px rgba(74,222,128,.12), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .gcard.fast .gc-deco {
    background: radial-gradient(ellipse 70% 70% at 85% 50%, rgba(74,222,128,.2) 0%, transparent 65%);
  }
  .gcard.fast .gc-deco::before {
    content: '🐾 🐾';
    position: absolute; right: 14px; bottom: 10px;
    font-size: 13px; opacity: .3;
    transform: rotate(-8deg);
  }

  /* NAV */
  nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(7,11,21,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:flex-end;justify-content:space-around;padding:10px 4px 24px;z-index:200;}
  .nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:#6B7280;font-family:inherit;font-size:10px;font-weight:500;cursor:pointer;padding:0 6px;min-width:52px;transition:color .15s;text-decoration:none;}
  .nav-btn .nav-ico{width:22px;height:22px;display:block;margin-bottom:1px;}
  .nav-btn .nav-ico img{width:100%;height:100%;object-fit:contain;display:block;opacity:.45;transition:opacity .15s;}
  .nav-btn.active{color:#8B5CF6;}
  .nav-btn.active .nav-ico img{opacity:1;filter:brightness(0) saturate(100%) invert(49%) sepia(97%) saturate(1283%) hue-rotate(235deg) brightness(101%) contrast(94%);}
  .nav-center{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-26px;cursor:pointer;}
  .nav-disc{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#6d28d9 0%,#8b5cf6 60%,#a78bfa 100%);box-shadow:0 4px 28px rgba(109,40,217,.7),0 0 0 3px #070B15;display:flex;align-items:center;justify-content:center;font-size:27px;}
  .nav-center-lbl{font-size:10px;font-weight:700;color:#6B7280;}