:root {
      --bg:        #080b12;
      --surface:   #0e1220;
      --surface2:  #141826;
      --border:    #1e2540;
      --accent:    #f0c040;
      --accent2:   #ff5f6d;
      --accent3:   #00e0a0;
      --text:      #e8eaf2;
      --muted:     #5a607a;
      --radius:    18px;
      --glow:      0 0 32px 4px rgba(240,192,64,.18);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
    }

    /* ── starfield bg ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240,192,64,.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(0,224,160,.05) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 10% 70%, rgba(255,95,109,.05) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── grid noise overlay ── */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    /* ── header ── */
    .site-header {
      position: relative;
      z-index: 10;
      padding: 14px 24px;
      border-bottom: 1px solid var(--border);
      background: rgba(8,11,18,.85);
      backdrop-filter: blur(12px);
    }
    .site-header__inner {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .site-brand { display: flex; align-items: center; gap: 8px; }
    .site-brand__emoji { font-size: 1.3rem; }
    #siteBrandName {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.5rem;
      letter-spacing: .12em;
      color: var(--accent);
    }
    .site-status {
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent3);
      border: 1px solid var(--accent3);
      padding: 3px 10px;
      border-radius: 100px;
      opacity: .85;
    }

    /* ── main ── */
    .main-content {
      position: relative;
      z-index: 5;
      max-width: 680px;
      margin: 0 auto;
      padding: 40px 20px 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
    }

    .header { text-align: center; }
    #quizKicker {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1rem, 3vw, 1.15rem);
      letter-spacing: .35em;
      color: var(--accent);
      margin-bottom: 6px;
    }
    #quizTitle {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.8rem, 6vw, 2.8rem);
      letter-spacing: .06em;
      line-height: 1.1;
      background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── gift grid ── */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      width: 100%;
    }

    .tile {
      position: relative;
      aspect-ratio: 1;
      background: radial-gradient(circle, #11ff86 0% 0%, #000000 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(240,192,64,.06) 0%, transparent 60%);
      opacity: 0;
      transition: opacity .2s;
    }
    .tile:hover:not(:disabled) {
      transform: translateY(-4px) scale(1.03);
      box-shadow: var(--glow), 0 8px 30px rgba(0,0,0,.5);
      border-color: var(--accent);
    }
    .tile:hover:not(:disabled)::before { opacity: 1; }
    .tile:active:not(:disabled) { transform: scale(.97); }
    .tile:disabled { cursor: default; }

    .gift-icon {
      font-size: clamp(2rem, 8vw, 3rem);
      display: block;
      filter: drop-shadow(0 0 10px rgba(240,192,64,.4));
      animation: float 3s ease-in-out infinite;
    }
    .tile:nth-child(2) .gift-icon { animation-delay: .4s; }
    .tile:nth-child(3) .gift-icon { animation-delay: .8s; }
    .tile:nth-child(4) .gift-icon { animation-delay: .2s; }
    .tile:nth-child(5) .gift-icon { animation-delay: .6s; }
    .tile:nth-child(6) .gift-icon { animation-delay: 1s; }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-6px); }
    }

    /* ── revealed tile ── */
    .tile.revealed {
      background: linear-gradient(135deg, #1a2a18, #0e2020);
      border-color: var(--accent3);
      box-shadow: 0 0 24px rgba(0,224,160,.25);
      animation: pop .35s cubic-bezier(.36,.07,.19,.97);
    }
    @keyframes pop {
      0%  { transform: scale(.8); }
      60% { transform: scale(1.08); }
      100%{ transform: scale(1); }
    }
    .tile-prize-emoji {
      font-size: clamp(1.6rem, 6vw, 2.2rem);
      display: block;
    }
    .tile-prize-label {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--accent3);
      text-align: center;
      padding: 0 6px;
      line-height: 1.3;
    }

    /* ── hint line ── */
    .hint {
      font-size: .8rem;
      color: #d3d3d5;
      letter-spacing: .08em;
      text-transform: uppercase;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: .5; }
      50%       { opacity: 1; }
    }

    /* ── footer ── */
    .desktop-footer {
      position: relative;
      z-index: 5;
      text-align: center;
      padding: 20px 24px 30px;
      border-top: 1px solid var(--border);
      font-size: .7rem;
      color: var(--muted);
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto;
    }
    .desktop-footer a { color: var(--accent); text-decoration: none; }
    .desktop-footer a:hover { text-decoration: underline; }
    .term-legal { margin-top: 8px; font-size: .65rem; }

    /* ── overlay ── */
    .overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(4,6,14,.88);
      backdrop-filter: blur(14px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
      padding: 20px;
    }
    .overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .result-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 40px 32px 36px;
      max-width: 420px;
      width: 100%;
      text-align: center;
      position: relative;
      box-shadow: 0 0 60px rgba(240,192,64,.12), 0 40px 80px rgba(0,0,0,.6);
      transform: translateY(30px);
      transition: transform .4s cubic-bezier(.22,.68,0,1.2);
    }
    .overlay.show .result-card { transform: translateY(0); }

    /* shimmer top bar */
    .result-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 24px 24px 0 0;
      background: linear-gradient(90deg, var(--accent2), var(--accent), var(--accent3));
      background-size: 200%;
      animation: shimmer 2.5s linear infinite;
    }
    @keyframes shimmer {
      0%   { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    .status-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.9rem;
      letter-spacing: .12em;
      color: var(--accent);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .status-prize {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(240,192,64,.15);
      border-radius: var(--radius);
      padding: 20px 16px;
      margin-bottom: 18px;
    }
    .status-prize-icon { font-size: 3rem; }
    .status-prize-text {
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--accent3);
      letter-spacing: .04em;
    }
    .status-note {
      font-size: .82rem;
      color: var(--muted);
      margin-bottom: 22px;
    }

    .btn-action {
      display: block;
      background: linear-gradient(135deg, #ffba00, #e0a800);
      cursor:pointer;
      color: #080b12;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.55rem;
      letter-spacing: .14em;
      padding: 15px 28px;
      border-radius: 12px;
      text-decoration: none;
      transition: transform .15s, box-shadow .15s;
      box-shadow: 0 6px 24px rgba(240,192,64,.35);
    }
    .btn-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(240,192,64,.5);
    }
    .btn-action:active { transform: scale(.97); }

    /* ── responsive ── */
    @media (max-width: 400px) {
      .grid { gap: 10px; }
      .result-card { padding: 30px 20px 28px; }
    }

    .ggfts{
      width:95px;
    }

      .tile-prize-label {
      font-size: 1.2rem; 
     }

    @media only screen and (max-width: 768px) {
       .grid { 
          grid-template-columns: repeat(2, 1fr) !important; 
        }

         .ggfts{
          width:70px;
        }

        #siteBrandName { 
            font-size: 1.0rem; 
        }

         .tile-prize-label {
            font-size: 0.8rem; 
           }

      }