@font-face{font-family:'Monoton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/monoton.woff2) format('woff2');}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-black.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-400.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-700.woff2) format('woff2');}

:root{
    --ink:#0a0812;
    --ink-2:#120e1c;
    --card:#17122447;
    --pink:#ff2d95;
    --cyan:#25e3ff;
    --amber:#ffb340;
    --lime:#b8ff3d;
    --cream:#f6efe2;
    --muted:#a99fc0;
    --line:rgba(255,255,255,.10);
    --maxw:860px;
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

  html,body{margin:0;padding:0;}

  body{
    background:
      radial-gradient(1100px 620px at 50% -8%, #3a1350 0%, transparent 62%),
      radial-gradient(760px 460px at 105% 22%, #0d3550 0%, transparent 58%),
      radial-gradient(680px 420px at -10% 78%, #4a0f38 0%, transparent 60%),
      var(--ink);
    background-attachment:fixed;
    color:var(--cream);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    padding:0 0 4rem;
    overflow-x:hidden;
  }

  /* ---------- tile floor + grain ---------- */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;
    background-image:
      linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom, transparent 0%, black 55%, black 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 55%, black 100%);
  }

  .wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 1.1rem;}

  /* ---------- marquee bar ---------- */
  .marquee{
    position:relative;z-index:2;
    background:linear-gradient(180deg,#22203a,#0f0c1c);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
    overflow:hidden;white-space:nowrap;
  }
  .marquee span{
    display:inline-block;padding:.5rem 0;
    font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.34em;
    color:var(--cyan);text-transform:uppercase;
    animation:slide 34s linear infinite;
  }
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- header ---------- */
  header{position:relative;text-align:center;padding:2.9rem 0 1.4rem;}

  .drum{
    position:absolute;top:-38px;left:50%;width:340px;height:340px;
    margin-left:-170px;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(circle at 50% 50%, transparent 34%, rgba(255,45,149,.12) 35%, transparent 36%),
      conic-gradient(from 0deg,
        rgba(255,255,255,.055) 0deg 12deg, transparent 12deg 30deg,
        rgba(255,255,255,.055) 30deg 42deg, transparent 42deg 60deg,
        rgba(255,255,255,.055) 60deg 72deg, transparent 72deg 90deg,
        rgba(255,255,255,.055) 90deg 102deg, transparent 102deg 120deg,
        rgba(255,255,255,.055) 120deg 132deg, transparent 132deg 150deg,
        rgba(255,255,255,.055) 150deg 162deg, transparent 162deg 180deg,
        rgba(255,255,255,.055) 180deg 192deg, transparent 192deg 210deg,
        rgba(255,255,255,.055) 210deg 222deg, transparent 222deg 240deg,
        rgba(255,255,255,.055) 240deg 252deg, transparent 252deg 270deg,
        rgba(255,255,255,.055) 270deg 282deg, transparent 282deg 300deg,
        rgba(255,255,255,.055) 300deg 312deg, transparent 312deg 330deg,
        rgba(255,255,255,.055) 330deg 342deg, transparent 342deg 360deg);
    border:2px solid rgba(255,255,255,.07);
    animation:spin 26s linear infinite;
    opacity:.9;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  h1{
    position:relative;margin:0;
    font-family:'Monoton',cursive;font-weight:400;
    font-size:clamp(2.5rem,10.5vw,4.6rem);
    line-height:1.02;letter-spacing:.012em;
    color:#ffd9ec;
    text-shadow:
      0 0 4px #fff,
      0 0 12px var(--pink),
      0 0 26px var(--pink),
      0 0 56px rgba(255,45,149,.62),
      0 0 96px rgba(255,45,149,.34);
    animation:flicker 7s infinite;
  }
  @keyframes flicker{
    0%,17%,19%,22%,60%,100%{opacity:1}
    18%{opacity:.68}
    20.5%{opacity:.82}
    21%{opacity:.6}
  }

  .kicker{
    margin:.85rem 0 0;font-family:'Space Mono',monospace;font-weight:700;
    font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--cyan);
  }

  .chartline{
    display:inline-block;margin-top:1.15rem;padding:.5rem 1rem;
    border:1px solid rgba(255,179,64,.42);border-radius:2px;
    background:rgba(255,179,64,.07);
    font-family:'Space Mono',monospace;font-size:.68rem;
    letter-spacing:.17em;text-transform:uppercase;color:var(--amber);
  }
  .chartline b{color:var(--cream);font-weight:700;}

  .blurb{
    max-width:44ch;margin:1.5rem auto 0;
    font-size:.94rem;color:var(--muted);
  }

  /* ---------- chart column header ---------- */
  .colhead{
    display:flex;align-items:center;gap:.75rem;
    margin:2.6rem 0 .5rem;padding:0 .2rem .55rem;
    border-bottom:2px solid var(--line);
    font-family:'Space Mono',monospace;font-size:.6rem;
    letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  }
  .colhead .c1{width:3.6rem;flex:none;}
  .colhead .c2{flex:1;}

  /* ---------- drink cards ---------- */
  .drink{
    display:flex;gap:.95rem;align-items:flex-start;
    padding:1.5rem .95rem 1.55rem;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .drink::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--accent,var(--pink));opacity:.55;
    box-shadow:0 0 10px var(--accent,var(--pink));
  }

  .rank{
    width:3.6rem;flex:none;text-align:center;padding-top:.15rem;
  }
  .rank .n{
    display:block;font-family:'Archivo Black',sans-serif;
    font-size:2.05rem;line-height:.92;color:var(--accent,var(--pink));
    text-shadow:0 0 16px color-mix(in srgb, var(--accent,var(--pink)) 55%, transparent);
  }
  .rank .lab{
    display:block;margin-top:.3rem;font-family:'Space Mono',monospace;
    font-size:.5rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  }

  .body{flex:1;min-width:0;}

  .name{
    margin:0;font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.32rem,5.4vw,1.72rem);
    line-height:1.13;letter-spacing:-.012em;color:var(--cream);
  }

  .credit{
    margin:.42rem 0 0;font-family:'Space Mono',monospace;
    font-size:.68rem;letter-spacing:.1em;color:var(--muted);
  }
  .credit em{color:var(--accent,var(--pink));font-style:normal;}

  .desc{margin:.72rem 0 0;font-size:.965rem;color:#ded5ea;}
  .desc strong{color:var(--cream);font-weight:600;}

  .tags{display:flex;flex-wrap:wrap;gap:.38rem;margin-top:.85rem;}
  .tag{
    font-family:'Space Mono',monospace;font-size:.575rem;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;
    padding:.3rem .52rem;border-radius:2px;
    border:1px solid rgba(255,255,255,.16);color:var(--muted);
  }
  .tag.base{border-color:rgba(255,255,255,.3);color:#cfc5e2;}
  .tag.na{
    border-color:var(--lime);color:var(--lime);
    background:rgba(184,255,61,.09);
    box-shadow:0 0 12px rgba(184,255,61,.16);
  }
  .tag.hot{border-color:var(--amber);color:var(--amber);background:rgba(255,179,64,.09);}

  /* two-way choice block */
  .split{
    display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.9rem;
  }
  .split div{
    border:1px solid var(--line);border-radius:3px;padding:.6rem .7rem;
    background:rgba(255,255,255,.028);
  }
  .split b{
    display:block;font-family:'Space Mono',monospace;font-size:.6rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--accent,var(--pink));
    margin-bottom:.25rem;
  }
  .split span{font-size:.83rem;color:#cec4e0;line-height:1.42;}

  /* tally counter */
  .tally{
    display:flex;align-items:center;gap:.75rem;margin-top:1rem;
    border:1px dashed rgba(255,179,64,.45);border-radius:3px;
    padding:.65rem .8rem;background:rgba(255,179,64,.05);
  }
  .tally button{
    font-family:'Space Mono',monospace;font-size:.65rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
    background:var(--amber);color:#1a1005;border:0;border-radius:3px;
    padding:.62rem .95rem;cursor:pointer;min-height:44px;
    transition:transform .08s ease, filter .15s ease;
  }
  .tally button:active{transform:scale(.95);}
  .tally button:hover{filter:brightness(1.1);}
  .tally .out{
    font-family:'Space Mono',monospace;font-size:.7rem;
    letter-spacing:.1em;color:var(--amber);flex:1;
  }
  .tally .marks{
    display:block;font-size:1.15rem;letter-spacing:.08em;color:var(--cream);
    word-break:break-all;line-height:1.3;
  }

  /* ---------- footer ---------- */
  footer{
    margin-top:3rem;padding-top:2rem;border-top:2px solid var(--line);
    text-align:center;
  }
  .qrbtn{
    font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;
    background:transparent;color:var(--cyan);
    border:1px solid var(--cyan);border-radius:3px;
    padding:.85rem 1.35rem;cursor:pointer;min-height:44px;
    box-shadow:0 0 14px rgba(37,227,255,.2);
    transition:background .15s ease;
  }
  .qrbtn:hover{background:rgba(37,227,255,.1);}
  .fine{
    margin-top:1.6rem;font-family:'Space Mono',monospace;
    font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
    color:var(--muted);line-height:2;
  }

  /* ---------- QR modal ---------- */
  .modal{
    position:fixed;inset:0;z-index:50;display:none;
    align-items:center;justify-content:center;padding:1.5rem;
    background:rgba(6,4,12,.93);backdrop-filter:blur(6px);
  }
  .modal.on{display:flex;}
  .modal .box{
    background:var(--cream);color:#14101c;border-radius:6px;
    padding:1.6rem;text-align:center;max-width:340px;width:100%;
  }
  .modal .box h3{
    margin:0 0 .3rem;font-family:'Archivo Black',sans-serif;font-size:1.05rem;
  }
  .modal .box p{
    margin:0 0 1.1rem;font-family:'Space Mono',monospace;
    font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6b6280;
  }
  .modal .box #qrTarget{display:flex;justify-content:center;}
  .modal .box #qrTarget img,.modal .box #qrTarget canvas{display:block;}
  .modal .box .url{
    margin-top:1rem;font-family:'Space Mono',monospace;font-size:.6rem;
    color:#6b6280;word-break:break-all;line-height:1.5;
  }
  .modal .box button{
    margin-top:1.15rem;width:100%;min-height:44px;
    font-family:'Space Mono',monospace;font-size:.65rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    background:#14101c;color:var(--cream);border:0;border-radius:3px;cursor:pointer;
  }

  /* ---------- green cycle (THC) flair ---------- */
  .tag.thc{
    display:inline-flex;align-items:center;gap:.36rem;
    border:0;border-radius:999px;
    padding:.34rem .68rem .34rem .52rem;
    background:linear-gradient(135deg,#6df3ae 0%,#2ed88a 100%);
    color:#04240f;font-weight:700;
    box-shadow:0 0 16px rgba(80,235,160,.42), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .tag.thc .leaf{
    width:.98rem;height:.98rem;flex:none;
    transform-origin:50% 88%;
    animation:sway 4.2s ease-in-out infinite;
  }
  @keyframes sway{
    0%,100%{transform:rotate(-8deg)}
    50%{transform:rotate(8deg)}
  }
  .legend-leaf{
    display:inline-block;width:.75rem;height:.75rem;
    vertical-align:-.1rem;color:#4fe89c;
  }

  /* ---------- tap-to-open recipes ---------- */
  .drink{cursor:pointer;}
  .reveal{
    display:inline-flex;align-items:center;gap:.5rem;
    margin-top:1rem;min-height:44px;padding:.5rem .9rem;
    background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:3px;
    font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
    cursor:pointer;transition:color .15s ease,border-color .15s ease;
  }
  .drink:hover .reveal{color:var(--accent,var(--pink));border-color:var(--accent,var(--pink));}
  .reveal .chev{width:.72rem;height:.72rem;transition:transform .3s ease;}
  .reveal[aria-expanded="true"]{color:var(--accent,var(--pink));border-color:var(--accent,var(--pink));}
  .reveal[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .reveal:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

  .recipe{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1);}
  .rec-inner{
    margin-top:.85rem;padding:1rem 1.05rem 1.05rem;
    border:1px solid var(--line);border-left:2px solid var(--accent,var(--pink));
    border-radius:3px;background:rgba(255,255,255,.035);
  }
  .spec{list-style:none;margin:0;padding:0;}
  .spec li{
    display:flex;align-items:baseline;gap:.75rem;padding:.36rem 0;
    border-bottom:1px dotted rgba(255,255,255,.13);font-size:.885rem;
  }
  .spec li:last-child{border-bottom:0;}
  .spec li span{flex:1;color:#ded5ea;}
  .spec li i{color:var(--muted);font-style:normal;font-size:.8em;}
  .spec li>b{
    font-family:'Space Mono',monospace;font-size:.73rem;font-weight:700;
    color:var(--accent,var(--pink));white-space:nowrap;
  }
  .build{margin:.95rem 0 0;font-size:.9rem;color:#cec4e0;line-height:1.62;}
  .build>b{
    display:block;margin-bottom:.3rem;
    font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--accent,var(--pink));
  }
  .rec-meta{
    margin:.95rem 0 0;padding-top:.75rem;border-top:1px solid var(--line);
    font-family:'Space Mono',monospace;font-size:.585rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--muted);line-height:1.95;
  }
  .colhead .c3{flex:none;color:var(--cyan);}

  @media (max-width:420px){
    .split{grid-template-columns:1fr;}
    .drink{gap:.7rem;padding-left:.75rem;}
    .rank{width:2.9rem;}
    .rank .n{font-size:1.7rem;}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;}
  }

  /* ================= shared nav ================= */
  .nav{
    display:flex;justify-content:center;gap:.35rem;flex-wrap:wrap;
    padding:.9rem 1rem 0;position:relative;z-index:2;
  }
  .nav a{
    display:inline-flex;align-items:center;min-height:40px;padding:.45rem .9rem;
    font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
    color:var(--muted);border:1px solid rgba(255,255,255,.14);border-radius:3px;
    transition:color .15s ease,border-color .15s ease,background .15s ease;
  }
  .nav a:hover{color:var(--cream);border-color:rgba(255,255,255,.34);}
  .nav a.on{
    color:var(--cyan);border-color:var(--cyan);background:rgba(37,227,255,.08);
    box-shadow:0 0 12px rgba(37,227,255,.18);
  }
  .nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

  /* ================= home ================= */
  .doors{display:grid;gap:1rem;margin:2.6rem 0 0;}
  @media (min-width:640px){.doors{grid-template-columns:1fr 1fr;}}
  .door{
    position:relative;display:block;text-decoration:none;overflow:hidden;
    padding:1.7rem 1.5rem 1.6rem;border-radius:4px;
    border:1px solid var(--line);border-left:2px solid var(--accent);
    background:rgba(255,255,255,.035);
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
  }
  .door:hover{transform:translateY(-3px);background:rgba(255,255,255,.07);}
  .door:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
  .door .dnum{
    font-family:'Archivo Black',sans-serif;font-size:1.5rem;line-height:1;
    color:var(--accent);text-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent);
  }
  .door h2{
    margin:.65rem 0 0;font-family:'Archivo Black',sans-serif;
    font-size:1.55rem;line-height:1.12;color:var(--cream);letter-spacing:-.012em;
  }
  .door p{margin:.6rem 0 0;font-size:.93rem;color:#ded5ea;line-height:1.55;}
  .door .go{
    display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
    font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  }
  .door .go svg{width:.72rem;height:.72rem;transition:transform .18s ease;}
  .door:hover .go svg{transform:translateX(4px);}

  /* ================= leaderboard ================= */
  .lb{margin-top:.5rem;}
  .lbrow{
    display:flex;align-items:center;gap:.9rem;
    padding:1rem .95rem;border-bottom:1px solid var(--line);position:relative;
  }
  .lbrow::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--accent);opacity:.5;box-shadow:0 0 10px var(--accent);
  }
  .lbrow .pos{width:3.1rem;flex:none;text-align:center;}
  .lbrow .pos .n{
    display:block;font-family:'Archivo Black',sans-serif;font-size:1.95rem;
    line-height:.92;color:var(--accent);
    text-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent);
  }
  .lbrow .pos .mv{
    display:block;margin-top:.25rem;font-family:'Space Mono',monospace;
    font-size:.55rem;letter-spacing:.1em;color:var(--muted);
  }
  .lbrow .pos .mv.up{color:#4fe89c;}
  .lbrow .pos .mv.down{color:#ff6b8a;}
  .lbrow .who{flex:1;min-width:0;}
  .lbrow .who h3{
    margin:0;font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.2rem,5vw,1.5rem);line-height:1.12;color:var(--cream);
  }
  .lbrow .who .sub{
    margin:.3rem 0 0;font-family:'Space Mono',monospace;font-size:.6rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  }
  .score{
    display:flex;align-items:center;gap:.45rem;flex:none;
  }
  .score .val{
    min-width:2.6rem;text-align:center;
    font-family:'Archivo Black',sans-serif;font-size:1.5rem;color:var(--cream);
  }
  .score button{
    width:44px;height:44px;flex:none;border-radius:3px;cursor:pointer;
    font-family:'Space Mono',monospace;font-size:1.05rem;font-weight:700;line-height:1;
    background:transparent;color:var(--muted);
    border:1px solid rgba(255,255,255,.2);
    transition:color .15s ease,border-color .15s ease,background .15s ease,transform .08s ease;
  }
  .score button:hover{color:var(--accent);border-color:var(--accent);background:rgba(255,255,255,.05);}
  .score button:active{transform:scale(.9);}
  .score button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
  .lbtools{
    display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:2rem;
  }
  .lbtools button{
    min-height:44px;padding:.75rem 1.2rem;cursor:pointer;border-radius:3px;
    font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;
    background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.2);
    transition:color .15s ease,border-color .15s ease;
  }
  .lbtools button:hover{color:var(--pink);border-color:var(--pink);}
  .lbtools button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
  .lbnote{
    margin-top:1.4rem;text-align:center;
    font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);line-height:2;
  }
  @media (max-width:430px){
    .lbrow{gap:.6rem;padding-left:.75rem;}
    .lbrow .pos{width:2.5rem;}
    .lbrow .pos .n{font-size:1.6rem;}
    .score .val{min-width:2.1rem;font-size:1.25rem;}
  }