:root{ --gold:#e8b04b; --gold2:#f3c96e; --ink:#120c08; --line:rgba(232,176,75,.25); --text:#f4ead9; --muted:#b8a88e; }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body,button,a{touch-action:manipulation}
  body{background:radial-gradient(80% 60% at 50% 0%, #241812, var(--ink) 70%);color:var(--text);font-family:"Inter",sans-serif;min-height:100vh}
  .nav{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
  .nav img{width:40px;height:40px;border-radius:50%}
  .nav b{font-family:"Oswald",sans-serif;letter-spacing:2px;font-size:15px;text-transform:uppercase}
  .nav a{margin-left:auto;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
  .nav a:hover{color:var(--text)}
  .wrap{max-width:820px;margin:0 auto;padding:24px 16px 60px;text-align:center}
  .neon-hero{display:block;width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 60px rgba(233,57,70,.18);margin:0 auto 26px}
  h1{font-family:"Anton",sans-serif;font-size:clamp(34px,7vw,58px);letter-spacing:2px;line-height:1.05}
  h1 span{color:var(--gold)}
  .sub{color:var(--muted);font-size:15px;margin:10px auto 20px;max-width:540px}
  .picks{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:16px}
  .pchip{background:rgba(255,255,255,.05);border:1.5px solid var(--line);color:var(--text);border-radius:999px;padding:10px 17px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:"Inter",sans-serif;transition:all .15s}
  .pchip:hover{border-color:var(--gold);transform:translateY(-1px)}
  .pchip.sel{background:var(--gold);color:#241505;border-color:var(--gold)}
  .go{display:inline-block;background:linear-gradient(180deg,#ef5350,#c9302f 55%,#a82523);color:#fff;border:1px solid rgba(255,120,110,.55);border-radius:18px;padding:20px 42px;font-family:"Anton",sans-serif;font-size:25px;letter-spacing:2.5px;cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,.35);box-shadow:0 14px 40px rgba(201,48,47,.45), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s}
  .go{animation:shotpulse 1.6s ease-in-out infinite}
  .go:hover{filter:brightness(1.12)}
  .go:disabled{opacity:.55;cursor:wait;transform:none;animation:none}
  @keyframes shotpulse{
    0%,100%{transform:scale(1);box-shadow:0 14px 40px rgba(201,48,47,.45), 0 0 0 0 rgba(239,83,80,.6), inset 0 1px 0 rgba(255,255,255,.25)}
    50%{transform:scale(1.035);box-shadow:0 16px 46px rgba(201,48,47,.7), 0 0 34px 10px rgba(239,83,80,.5), inset 0 1px 0 rgba(255,255,255,.25)}
  }
  @media(prefers-reduced-motion:reduce){.go{animation:none}}
  .hintline{font-size:12px;color:var(--muted);margin-top:9px}

  .wheelbox{position:relative;width:min(560px,92vw);margin:26px auto 0}
  .flap{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:6;transform-origin:top center;transition:transform .07s}
  .flap::before{content:"";display:block;width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:34px solid #c9302f;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
  .flap.kick{transform:translateX(-50%) rotate(14deg)}
  canvas{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 50px rgba(0,0,0,.55))}
  .capline{margin-top:16px;font-family:"Oswald",sans-serif;letter-spacing:2.5px;font-size:14px;color:var(--gold);text-transform:uppercase;min-height:20px}
  .conf{position:absolute;width:9px;height:9px;border-radius:2px;top:-10px;z-index:7;animation:fall 1.7s ease-in forwards;pointer-events:none}
  @keyframes fall{to{transform:translateY(620px) rotate(560deg)}}

  .result{position:fixed;inset:0;background:rgba(10,6,3,.9);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
  .result.on{display:flex}
  .rcard{background:linear-gradient(180deg,#241810,#180f08);border:1.5px solid var(--gold);border-radius:22px;max-width:380px;width:100%;padding:26px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.7);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
  @keyframes pop{from{transform:scale(.7);opacity:0}}
  .rcard .tag{font-family:"Oswald",sans-serif;letter-spacing:3px;font-size:12px;color:var(--gold);text-transform:uppercase}
  .rcard img{width:190px;height:190px;border-radius:16px;margin:14px auto;display:block;border:1px solid var(--line)}
  .rcard h2{font-family:"Anton",sans-serif;font-size:30px;letter-spacing:1px}
  .rcard .meta{color:var(--muted);font-size:13px;margin:7px 0 2px}
  .rcard .price{display:inline-block;background:var(--gold);color:#241505;font-weight:800;border-radius:999px;padding:5px 15px;margin-top:9px;font-size:15px}
  .rbtns{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
  .rbtns .go{font-size:16px;padding:13px 22px}
  .rbtns a{color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;align-self:center}
  footer{text-align:center;color:var(--muted);font-size:11.5px;padding:20px}

[hidden] {display:none!important}
button, input {font:inherit}
#tv-tools {display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 24px;color:var(--gold)}
#tv-tools button, #close-pair {background:#241810;color:var(--gold);border:1px solid var(--gold);border-radius:12px;padding:10px 18px;cursor:pointer}
#connection {font-size:14px}
.flavors h2 {font-family:Oswald,sans-serif;font-size:19px;margin:12px 0}
.recipe {margin-top:18px;text-align:left;line-height:1.7;color:var(--text)}
.recipe h3 {color:var(--gold);font-family:Oswald,sans-serif;margin-bottom:8px}
#garnish {color:var(--muted);margin-top:10px}
#pairing {padding:40px;max-width:700px;margin:30px auto;text-align:center;background:#241810;border:1px solid var(--gold);border-radius:22px;position:relative;z-index:60}
#pairing p {margin:18px 0;line-height:1.6}
#pair-code {display:block;font:64px Oswald,sans-serif;letter-spacing:12px;color:var(--gold);margin:20px}
#pair-link {display:block;color:var(--gold);margin:20px}
#controller-connect {width:min(600px, calc(100% - 32px));margin:clamp(24px, 6vh, 64px) auto;padding:clamp(20px, 5vw, 48px);text-align:center;background:#19130f;border:1px solid var(--line);border-radius:22px}
#controller-hint {margin:16px 0 24px;color:var(--muted);line-height:1.5}
#controller-hint strong {color:var(--text)}
#controller-pair-form {max-width:340px;margin:0 auto;text-align:left}
#controller-pair-form label {display:block;margin-bottom:8px;font-size:15px;font-weight:700}
#code {display:block;padding:14px;border-radius:12px;border:1px solid var(--gold);width:100%;text-align:center;text-transform:uppercase;font-size:clamp(24px, 4vw, 32px);letter-spacing:.16em;background:var(--ink);color:var(--text)}
#code[aria-invalid="true"] {border-color:#ff9c8f}
#controller-pair-form #connect {width:100%;padding:13px 16px;animation:none}
#controller-status {min-height:1.4em;margin-top:12px;color:var(--gold2);font-size:15px;line-height:1.4}
#close-result {padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--ink);color:var(--text);font:inherit;cursor:pointer}
.tv :focus-visible {outline:3px solid #ffd572;outline-offset:4px}
.controller #pair-button, .controller #full-button, .controller .wheelbox, .controller .capline, .controller .hintline, .controller footer, .controller .nav a {display:none}
.controller .capline.empty {display:block}
.controller #tv-tools {justify-content:center}
.controller .wrap {max-width:800px;padding-top:8px}
.controller .neon-hero {max-height:190px;object-fit:cover}
.controller .pchip {font-size:18px;padding:14px 22px;min-height:52px}
.controller .go {margin-top:16px;width:95%;max-width:600px}
.controller .unpaired, .unpaired .wrap {display:none}
.controller.unpaired .wrap {display:none}
@media (min-width:1000px), (min-width:720px) and (min-aspect-ratio:4/3) {
 .tv {
   --tv-header: clamp(44px, 8dvh, 62px);
   --tv-gutter: clamp(18px, 3.8vw, 76px);
   --tv-padding: clamp(10px, 2.2dvh, 24px);
   --tv-gap: clamp(6px, 1.4dvh, 18px);
   background:
     radial-gradient(ellipse at 23% 40%, #24171a 0%, transparent 52%),
     radial-gradient(ellipse at 77% 57%, #122538 0%, transparent 55%),
     #090d14;
 }
 .tv .nav {
   height:var(--tv-header);
   padding:0 var(--tv-gutter);
   border-color:#ffffff1e;
   background:#0f141d;
 }
 .tv .nav img {width:34px;height:34px}
 .tv .nav b {
   max-width:calc(42vw - 54px);
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
   font-size:clamp(13px,1.2vw,21px);
   letter-spacing:1.4px;
 }
 .tv #tv-tools {
   position:absolute;right:0;top:0;
   height:var(--tv-header);
   max-width:62%;
   padding:0 var(--tv-gutter) 0 16px;
   z-index:2;
 }
 .tv #tv-tools button {
   flex:none;
   background:#1c2431;
   border-color:#ffffff40;
   color:var(--text);
   padding:clamp(5px, 1.2dvh, 10px) clamp(9px, 1.5vw, 18px);
   font-size:clamp(13px, 1.3vw, 16px);
 }
 .tv #connection {color:var(--gold2);text-align:right;font-size:clamp(12px, 1.15vw, 14px)}
 .tv .nav a {display:none}
 .tv .wrap {
   max-width:235dvh;
   min-height:calc(100dvh - var(--tv-header));
   display:grid;
   grid-template-columns:minmax(0, 44fr) minmax(0, 56fr);
   grid-template-rows:repeat(5, auto);
   align-content:center;
   align-items:center;
   column-gap:clamp(18px, 4vw, 80px);
   row-gap:var(--tv-gap);
   padding:var(--tv-padding) var(--tv-gutter);
 }
 .tv h1 {grid-area:1/1;font-size:clamp(27px, min(4vw, 7dvh), 76px)}
 .tv .neon-hero {
   grid-area:2/1;
   width:auto;
   max-width:100%;
   max-height:clamp(80px, 29dvh, 360px);
   margin:0 auto;
   border-color:#fa707f3d;
   box-shadow:0 10px 44px #0009, 0 0 24px #eb506124;
 }
 .tv #picks {grid-area:3/1}
 .tv .flavors {grid-area:4/1}
 .tv .flavors h2 {
   margin:0 0 var(--tv-gap);
   color:#dbdfe7;
   font:600 clamp(13px, min(1.5vw, 2.6dvh), 23px) Inter,sans-serif;
 }
 .tv #picks, .tv #flavors {margin:0;gap:clamp(4px, 1dvh, 9px)}
 .tv .pchip {
   padding:clamp(4px, 1.1dvh, 9px) clamp(8px,1vw,19px);
   min-height:clamp(26px, 5.2dvh, 44px);
   font-size:clamp(12px, min(1.2vw, 2.25dvh), 21px);
   background:#141b25;
   border-color:#d6e3f345;
 }
 .tv .pchip.sel {
   background:var(--gold2);
   color:#201403;
   border-color:var(--gold2);
 }
 .tv #goBtn {
   grid-area:5/1;
   width:min(100%, 460px);
   margin:0 auto;
   padding:clamp(8px, 1.35dvh, 12px) 16px;
   font-size:clamp(19px, min(2.2vw, 4dvh), 38px);
 }
 .tv .wheel-stage {
   grid-area:1/2/-1/3;
   display:grid;
   justify-items:center;
   align-content:center;
   gap:var(--tv-gap);
   min-width:0;
 }
 .tv .wheelbox {
   width:min(100%, calc(100dvh - var(--tv-header) - var(--tv-padding) - var(--tv-padding) - var(--tv-gap) - 32px));
   margin:0;
   border-radius:50%;
   box-shadow:0 18px 60px #0009, 0 0 56px #6ecaf522;
 }
 .tv canvas {filter:none}
 .tv .capline {
   margin:0;
   color:var(--gold2);
   font-size:clamp(12px, min(1.35vw, 2.2dvh), 23px);
 }
 .tv .sub, .tv .hintline, .tv footer {display:none}
 .tv #pairing {
   position:fixed;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
   width:min(90vw, 700px);
   margin:0;
   box-shadow:0 0 0 100vmax #090d14e6;
 }
 .tv .result.on {
   inset:0;
   padding:var(--tv-padding) var(--tv-gutter);
   background:#090d14ed;
 }
 .tv .rcard {
   display:grid;
   grid-template-columns:minmax(0, 46fr) minmax(0, 54fr);
   grid-template-rows:repeat(5, auto) 1fr;
   gap:clamp(8px, 1.4vh, 18px) clamp(24px, 3vw, 58px);
   max-width:min(1720px, 178dvh);
   max-height:calc(100dvh - var(--tv-padding) - var(--tv-padding));
   width:100%;
   padding:clamp(16px, min(2.7vw, 4dvh), 50px);
   background:linear-gradient(125deg, #19212a, #101621);
   border-color:#f5c66f70;
   text-align:left;
 }
 .tv .rcard img {
   grid-area:1/1/-1/2;
   align-self:center;
   width:100%;
   height:clamp(170px, 55dvh, 590px);
   object-fit:contain;
   margin:0;
   background:#090d14;
 }
 .tv .rcard .tag {
   grid-area:1/2;
   font-size:clamp(11px, 1.05vw, 19px);
 }
 .tv .rcard h2 {
   grid-area:2/2;
   font-size:clamp(24px, min(3.7vw, 7dvh), 68px);
   line-height:1.05;
 }
 .tv .rcard .meta {
   grid-area:3/2;
   font-size:clamp(13px, 1.35vw, 23px);
 }
 .tv .rcard .price {
   grid-area:4/2;
   justify-self:start;
   margin-top:0;
   font-size:clamp(13px, 1.2vw, 22px);
 }
 .tv .rcard .recipe {
   grid-area:5/2;
   margin:0;
   font-size:clamp(15px, min(1.55vw, 3.2dvh), 29px);
   line-height:1.45;
   overflow-wrap:anywhere;
 }
 .tv .rbtns {
   grid-area:6/2;
   align-self:end;
   justify-content:start;
   margin:0;
 }
 .tv .rbtns .go {font-size:clamp(17px, 1.35vw, 24px)}
 .tv .rbtns a {display:none}
}
@media (min-width:720px) and (min-aspect-ratio:4/3) and (max-height:700px) {
 .tv {
   --tv-padding:10px;
   --tv-gap:6px;
 }
 .tv h1 {font-size:clamp(23px, min(2.9vw, 5.5dvh), 36px)}
 .tv .neon-hero {max-height:24dvh}
 .tv .pchip {
   padding:4px clamp(6px, .75vw, 12px);
   font-size:clamp(10px, 1.25vw, 14px);
 }
 .tv .capline {letter-spacing:1.5px}
}

.recipe details {margin-top:16px;font-size:14px;color:var(--muted)}
.recipe summary {cursor:pointer;color:var(--gold)}
.recipe ol {padding-left:20px;margin:12px 0}
.rcard {max-height:90vh;overflow:auto}