/* ══════════════════════════════════════
       TOKENS
    ══════════════════════════════════════ */
    :root {
      --g-bg:      rgba(255,255,255,0.07);
      --g-border:  rgba(255,255,255,0.10);
      --g-top:     rgba(255,255,255,0.22);
      --g-blur:    blur(32px) saturate(180%);
      --g-blur-sm: blur(20px) saturate(160%);
      --sh:        0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.16);
      --sh-lg:     0 20px 72px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.2);
      --text:  #fff;
      --muted: rgba(255,255,255,0.52);
      --faint: rgba(255,255,255,0.26);
      --t:     180ms cubic-bezier(0.16,1,0.3,1);
      --t-pop: 320ms cubic-bezier(0.34,1.56,0.64,1);
      --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
      --r-xl: 30px; --r-2xl: 40px; --r-pill: 9999px;
      --font-d:    'Syne', system-ui, sans-serif;
      --font-b:    'Inter', system-ui, sans-serif;
      --font-mono: 'DM Mono', monospace;
      --font-logo: 'Playfair Display', Georgia, serif;
    }

    /* ══════════════════════════════════════
       RESET
    ══════════════════════════════════════ */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:var(--font-b);background:#000;color:var(--text);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
    button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;}
    input{border:none;outline:none;background:none;font:inherit;color:inherit;}

    /* ══════════════════════════════════════
       STARS
    ══════════════════════════════════════ */
    #stars{position:fixed;inset:0;z-index:0;pointer-events:none;}

    /* ══════════════════════════════════════
       LAYOUT
    ══════════════════════════════════════ */
    .app{position:relative;z-index:1;max-width:600px;margin:0 auto;padding:0 1.25rem 6rem;}

    /* ══════════════════════════════════════
       GLASS UTILITIES
    ══════════════════════════════════════ */
    .glass{
      background:var(--g-bg);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
      border:1px solid var(--g-border);border-top-color:var(--g-top);box-shadow:var(--sh);
    }
    .glass-grad{position:relative;}
    .glass-grad::before{
      content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
      background:linear-gradient(135deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0.04) 45%,rgba(255,255,255,0.10) 75%,rgba(255,255,255,0.22) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1;
    }

    /* ══════════════════════════════════════
       HEADER — text only, no icon
    ══════════════════════════════════════ */
    .header{
      display:flex;align-items:center;justify-content:space-between;
      padding:0.875rem 1.375rem;border-radius:var(--r-pill);
      margin:1.5rem 0 2.5rem;position:relative;
    }
    .logo-text{
      font-family:var(--font-logo);font-style:italic;font-weight:700;
      font-size:1.4rem;color:white;letter-spacing:0.02em;
    }
    .header-icons{display:flex;gap:0.3rem;}
    .icon-btn{
      width:32px;height:32px;border-radius:var(--r-pill);
      display:flex;align-items:center;justify-content:center;
      color:var(--muted);background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.08);transition:all var(--t);
    }
    .icon-btn:hover{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.18);}

    /* ══════════════════════════════════════
       TITLE
    ══════════════════════════════════════ */
    .game-intro{text-align:center;margin-bottom:1.5rem;}
    .game-title{
      font-family:var(--font-d);
      font-size:clamp(1.875rem,5vw,2.75rem);font-weight:800;letter-spacing:-0.03em;
      background:linear-gradient(160deg,#fff 30%,rgba(255,255,255,0.55) 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }

    /* ══════════════════════════════════════
       DIFFICULTY TOGGLE
    ══════════════════════════════════════ */
    .difficulty-wrap{
      display:flex;flex-direction:column;align-items:center;
      margin-bottom:2.25rem;gap:0.5rem;
    }
    .diff-track{
      display:flex;flex-wrap:wrap;justify-content:center;
      gap:3px;padding:4px;border-radius:var(--r-xl);
      background:rgba(255,255,255,0.04);
      backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,0.09);
      border-top-color:rgba(255,255,255,0.16);
      box-shadow:0 4px 16px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .diff-pill{
      padding:0.375rem 0.875rem;border-radius:var(--r-md);
      font-size:0.8125rem;font-weight:500;font-family:var(--font-b);
      color:var(--muted);transition:all var(--t);white-space:nowrap;
    }
    .diff-pill:hover:not(.active):not(.loading){
      color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.06);
    }
    .diff-pill.active{
      background:rgba(255,255,255,0.12);
      border:1px solid rgba(255,255,255,0.18);border-top-color:rgba(255,255,255,0.28);
      color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .diff-pill.loading{
      opacity:0.35;cursor:wait;
      animation:pill-pulse 1.8s ease-in-out infinite;
    }
    @keyframes pill-pulse{0%,100%{opacity:0.35;}50%{opacity:0.52;}}
    .diff-pill.unavailable{opacity:0.2;cursor:not-allowed;}
    .diff-desc{
      font-size:0.75rem;color:var(--faint);
      font-family:var(--font-b);font-style:italic;text-align:center;
      transition:opacity 0.2s;
    }

    /* ══════════════════════════════════════
       MYSTERY SWATCH
    ══════════════════════════════════════ */
    .swatch-wrap{display:flex;justify-content:center;margin-bottom:2.5rem;}
    .mystery-swatch{
      width:192px;height:192px;border-radius:var(--r-xl);
      position:relative;overflow:hidden;
    }
    .mystery-swatch.hidden{animation:swatch-float 5s ease-in-out infinite;}
    @keyframes swatch-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

    .swatch-face{
      position:absolute;inset:0;border-radius:var(--r-xl);
      display:flex;align-items:center;justify-content:center;
      overflow:hidden;z-index:1;transition:background .5s ease,box-shadow .5s ease,border .3s;
    }
    .mystery-swatch.hidden .swatch-face{
      background:rgba(255,255,255,0.065);backdrop-filter:blur(36px) saturate(180%);
      -webkit-backdrop-filter:blur(36px) saturate(180%);
      border:1px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.22);
      box-shadow:0 16px 64px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.18);
      animation:face-glow 3.5s ease-in-out infinite;
    }
    @keyframes face-glow{
      0%,100%{box-shadow:0 16px 64px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.15);}
      50%{box-shadow:0 16px 64px rgba(0,0,0,0.6),0 0 40px rgba(255,255,255,0.06),inset 0 1px 0 rgba(255,255,255,0.25);}
    }
    .swatch-shimmer{
      position:absolute;inset:0;z-index:2;
      background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,0.045) 50%,transparent 75%);
      background-size:300% 300%;animation:sweep 3.2s ease-in-out infinite;pointer-events:none;
    }
    @keyframes sweep{0%{background-position:200% 50%;}100%{background-position:-200% 50%;}}
    .mystery-q{
      font-family:var(--font-d);font-size:5.5rem;font-weight:800;
      user-select:none;position:relative;z-index:3;
      animation:q-breathe 3.5s ease-in-out infinite;
    }
    @keyframes q-breathe{
      0%,100%{color:rgba(255,255,255,0.2);text-shadow:0 0 30px rgba(255,255,255,0.1);}
      50%{color:rgba(255,255,255,0.45);text-shadow:0 0 60px rgba(255,255,255,0.35);}
    }
    /* Rotating shimmer inside face — oversized circle prevents corner leakage */
    .mystery-swatch.hidden .swatch-face::after{
      content:'';position:absolute;
      inset:-100%;border-radius:50%;z-index:2;
      background:conic-gradient(from 0deg,transparent 0%,rgba(255,255,255,0.11) 18%,transparent 36%,rgba(255,255,255,0.04) 54%,transparent 72%,rgba(255,255,255,0.09) 88%,transparent 100%);
      animation:ring-spin 5s linear infinite;pointer-events:none;
    }
    @keyframes ring-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
    .mystery-swatch.revealed .swatch-face{
      animation:reveal-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;border:none;
    }
    @keyframes reveal-pop{
      0%{transform:scale(0.72) rotateY(25deg);opacity:0;}
      60%{transform:scale(1.06) rotateY(-2deg);}
      100%{transform:scale(1) rotateY(0);opacity:1;}
    }

    /* ══════════════════════════════════════
       INPUT FORM
    ══════════════════════════════════════ */
    .guess-form{display:flex;gap:0.625rem;margin-bottom:0.75rem;}
    .color-input{
      flex:1;padding:0.9375rem 1.25rem;border-radius:var(--r-pill);
      font-size:0.9375rem;color:#fff;
      background:rgba(255,255,255,0.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 4px 16px rgba(0,0,0,0.35);
      transition:all var(--t);
    }
    .color-input::placeholder{color:rgba(255,255,255,0.26);}
    .color-input:focus{
      background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);border-top-color:rgba(255,255,255,0.38);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 0 0 3px rgba(255,255,255,0.05),0 4px 20px rgba(0,0,0,0.4);
    }
    .color-input:disabled{opacity:0.3;cursor:not-allowed;}
    .submit-btn{
      padding:0.9375rem 1.5rem;border-radius:var(--r-pill);
      font-family:var(--font-d);font-size:0.9375rem;font-weight:600;letter-spacing:0.02em;
      white-space:nowrap;background:rgba(255,255,255,0.10);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,0.14);border-top-color:rgba(255,255,255,0.30);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 4px 16px rgba(0,0,0,0.4);
      position:relative;overflow:hidden;transition:all var(--t);
    }
    .submit-btn::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,transparent 55%);pointer-events:none;
    }
    .submit-btn:hover:not(:disabled){
      background:rgba(255,255,255,0.16);border-top-color:rgba(255,255,255,0.48);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 0 22px rgba(255,255,255,0.08),0 4px 20px rgba(0,0,0,0.5);
      transform:translateY(-1px);
    }
    .submit-btn:active:not(:disabled){transform:translateY(0);}
    .submit-btn:disabled{opacity:0.28;cursor:not-allowed;}

    /* ══════════════════════════════════════
       ERROR + STATS
    ══════════════════════════════════════ */
    .error-msg{
      min-height:1.4em;font-size:0.8125rem;color:rgba(248,113,113,0.9);
      text-align:center;margin-bottom:1rem;text-shadow:0 0 20px rgba(248,113,113,0.4);
    }
    .stats-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
    .guess-counter{font-size:0.875rem;color:var(--muted);}
    .guess-counter strong{color:#fff;font-weight:600;}
    .diff-badge{
      font-size:0.6875rem;font-family:var(--font-b);font-weight:500;
      padding:0.25rem 0.625rem;border-radius:var(--r-pill);
      background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
      color:var(--muted);letter-spacing:0.05em;text-transform:uppercase;
    }
    .new-game-btn{
      font-size:0.8125rem;padding:0.4375rem 0.9375rem;border-radius:var(--r-pill);
      background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.1);color:var(--muted);transition:all var(--t);
    }
    .new-game-btn:hover{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.2);}

    /* ══════════════════════════════════════
       DIVIDER + GUESSES
    ══════════════════════════════════════ */
    .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 80%,transparent);margin-bottom:1.25rem;}
    .guesses-label{font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);margin-bottom:0.75rem;display:none;}
    .guesses-list{display:flex;flex-direction:column;gap:0.5rem;}

    /* ══════════════════════════════════════
       GUESS CARD
    ══════════════════════════════════════ */
    .guess-card{
      border-radius:var(--r-lg);padding:0.9375rem 1.125rem;
      display:flex;align-items:center;gap:1rem;
      position:relative;overflow:hidden;
      background:rgba(255,255,255,0.065);backdrop-filter:var(--g-blur-sm);-webkit-backdrop-filter:var(--g-blur-sm);
      border:1px solid rgba(255,255,255,0.09);border-top-color:rgba(255,255,255,0.18);
      box-shadow:0 4px 20px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.1);
      transition:all var(--t);
    }
    .guess-card::before{
      content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
      background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.03) 50%,rgba(255,255,255,0.12) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0;
    }
    .guess-card.new-card{animation:card-in 0.32s cubic-bezier(0.16,1,0.3,1) both;}
    @keyframes card-in{from{opacity:0;transform:translateY(-8px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
    .guess-card:hover{background:rgba(255,255,255,0.09);transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.14);}
    .guess-card.top-card{background:rgba(255,255,255,0.09);border-top-color:rgba(255,255,255,0.24);}

    .card-swatch{width:50px;height:50px;min-width:50px;border-radius:14px;position:relative;z-index:1;}
    .card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.35rem;position:relative;z-index:1;}
    .card-top{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;}
    .card-name{font-family:var(--font-d);font-size:0.9375rem;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    /* Score — DM Mono */
    .card-score{display:flex;align-items:baseline;gap:0.25rem;flex-shrink:0;}
    .card-score-num{
      font-family:var(--font-mono);font-size:1.3rem;font-weight:500;line-height:1;
      letter-spacing:-0.02em;
    }
    .card-score-den{font-family:var(--font-mono);font-size:0.625rem;font-weight:400;color:var(--faint);letter-spacing:0.04em;}

    .card-bar-track{height:2px;border-radius:var(--r-pill);background:rgba(255,255,255,0.07);overflow:visible;}
    .card-bar-fill{height:2px;border-radius:var(--r-pill);transition:width 0.6s cubic-bezier(0.16,1,0.3,1);}

    /* ══════════════════════════════════════
       WIN OVERLAY
    ══════════════════════════════════════ */
    .win-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
      display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:1000;
      animation:fade-in 0.25s ease;
    }
    .win-overlay[hidden]{display:none;}
    @keyframes fade-in{from{opacity:0;}to{opacity:1;}}
    .win-card{
      border-radius:var(--r-2xl);padding:2.5rem 2rem 2rem;max-width:360px;width:100%;
      text-align:center;position:relative;overflow:hidden;
      background:rgba(255,255,255,0.08);backdrop-filter:blur(52px) saturate(200%);-webkit-backdrop-filter:blur(52px) saturate(200%);
      border:1px solid rgba(255,255,255,0.13);border-top-color:rgba(255,255,255,0.28);
      box-shadow:var(--sh-lg);animation:card-pop 0.5s var(--t-pop) forwards;
    }
    .win-card::before{
      content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
      background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.04) 45%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.24) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
    }
    .win-card::after{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,0.035) 50%,transparent 75%);
      background-size:300% 300%;animation:sweep 5s ease-in-out infinite;
    }
    @keyframes card-pop{from{transform:scale(0.8) translateY(24px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
    .win-swatch{width:120px;height:120px;border-radius:26px;margin:0 auto 1.5rem;border:1px solid rgba(255,255,255,0.14);position:relative;z-index:1;animation:swatch-pop 0.6s 0.15s cubic-bezier(0.34,1.56,0.64,1) both;}
    @keyframes swatch-pop{from{transform:scale(0.4) rotate(-12deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
    .win-emoji{font-size:2rem;margin-bottom:0.5rem;position:relative;z-index:1;}
    .win-title{font-family:var(--font-d);font-size:1.625rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:0.25rem;position:relative;z-index:1;}
    .win-color-name{font-family:var(--font-d);font-size:1.125rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.2rem;position:relative;z-index:1;}
    .win-hex{font-size:0.8125rem;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.05em;margin-bottom:0.5rem;position:relative;z-index:1;}
    .win-stats{font-size:0.875rem;color:var(--muted);margin-bottom:1.75rem;position:relative;z-index:1;}
    .win-stats strong{color:#fff;}
    .win-btns{display:flex;gap:0.625rem;position:relative;z-index:1;}
    .win-btn{flex:1;padding:0.8125rem;border-radius:var(--r-pill);font-family:var(--font-d);font-size:0.875rem;font-weight:600;letter-spacing:0.015em;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.14);transition:all var(--t);}
    .win-btn-share{background:rgba(255,255,255,0.07);border-top-color:rgba(255,255,255,0.2);}
    .win-btn-share:hover{background:rgba(255,255,255,0.13);}
    .win-btn-again{background:rgba(255,255,255,0.13);border-top-color:rgba(255,255,255,0.32);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
    .win-btn-again:hover{background:rgba(255,255,255,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 0 20px rgba(255,255,255,0.07);}

    /* ══════════════════════════════════════
       HELP OVERLAY
    ══════════════════════════════════════ */
    .help-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,0.68);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:900;
      animation:fade-in 0.2s ease;
    }
    .help-overlay[hidden]{display:none;}
    .help-card{
      border-radius:var(--r-xl);padding:2rem;max-width:340px;width:100%;
      background:rgba(255,255,255,0.08);backdrop-filter:blur(52px) saturate(180%);-webkit-backdrop-filter:blur(52px) saturate(180%);
      border:1px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.26);
      box-shadow:0 20px 60px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.18);
      animation:card-pop 0.35s var(--t-pop) forwards;
    }
    .help-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
    .help-title{font-family:var(--font-d);font-size:1.0625rem;font-weight:700;letter-spacing:-0.015em;}
    .help-close{color:var(--muted);font-size:1.125rem;line-height:1;transition:color var(--t);}
    .help-close:hover{color:#fff;}
    .help-steps{list-style:none;display:flex;flex-direction:column;gap:1rem;}
    .help-step{display:flex;gap:0.75rem;align-items:flex-start;}
    .help-num{width:22px;height:22px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);font-family:var(--font-d);font-size:0.6875rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
    .help-text{font-size:0.875rem;color:var(--muted);line-height:1.55;padding-top:0.1rem;}
    .help-text strong{color:#fff;}


    /* ══════════════════════════════════════
       SCROLLBAR + RESPONSIVE
    ══════════════════════════════════════ */
    ::-webkit-scrollbar{width:4px;}
    ::-webkit-scrollbar-track{background:transparent;}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:9999px;}

    @media(max-width:520px){
      .mystery-swatch{width:152px;height:152px;}
      .mystery-q{font-size:4.5rem;}
      .submit-btn{padding:0.9375rem 1rem;font-size:0.875rem;}
      .guess-form{gap:0.5rem;}
      .card-swatch{width:44px;height:44px;min-width:44px;}
      /* Difficulty pills: 3×2 grid on mobile */
      .diff-track{border-radius:var(--r-xl);}
      .diff-pill{flex:1 1 calc(33.333% - 4px);text-align:center;border-radius:var(--r-sm);font-size:0.75rem;padding:0.375rem 0.5rem;}
    }