Models 44

Qwen3.8 Flash

by QwenReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
3 min 15 s
Cost
$0.0083
Output tokens
17,675
Spent thinking
0 tokens
Speed
93.4 tok/s
Console errors
0
First token after
5.2 s
First visible text after
5.2 s
Prompt tokens
381
Code size
50.7 KB
Finish reason
stop
Served by
Alibaba
Model id
qwen/qwen3.8-flash
Reasoning sent
{"effort":"none"}
Max output
64,000 tokens
Generated
Nov 11, 2026

What it was asked

The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 868 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco — Korean Tacos on Wheels</title>
<style>
  :root{
    --paper:#f4ead6;
    --paper2:#efe3c9;
    --ink:#2a1710;
    --ink-soft:#5a3b2b;
    --red:#e23a2e;
    --red-deep:#b81d14;
    --gold:#f4a72c;
    --lime:#a7cf3a;
    --teal:#0f6b62;
    --cream:#fff7ea;
    --shadow:rgba(42,23,16,.22);
    --font-display:"Futura","Century Gothic","Trebuchet MS",system-ui,sans-serif;
    --font-body:ui-rounded,"Segoe UI Rounded","Hiragino Maru Gothic ProN","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
    --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- paper grain overlay ---------- */
  .grain{
    position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

  h1,h2,h3,h4{font-family:var(--font-display);line-height:.95;letter-spacing:-.01em;font-weight:800}

  /* ---------- reveal / motion ---------- */
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
    .reveal.in{opacity:1;transform:none}
    [data-delay]{transition-delay:var(--d,0ms)}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1!important;transform:none!important}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    html{scroll-behavior:auto}
  }

  /* ---------- ticker ---------- */
  .ticker{
    background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;
    border-bottom:3px solid var(--red);position:relative;z-index:60;
  }
  .ticker__track{display:inline-flex;gap:2rem;padding:.55rem 0;will-change:transform}
  @media (prefers-reduced-motion:no-preference){.ticker__track{animation:marq 26s linear infinite}}
  .ticker span{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.7rem}
  .ticker b{color:var(--gold)}
  .ticker .dot{color:var(--red)}
  @keyframes marq{to{transform:translateX(-50%)}}

  /* ---------- nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;background:rgba(244,234,214,.86);backdrop-filter:blur(8px);
    border-bottom:2px solid transparent;transition:border-color .3s, box-shadow .3s, background .3s;
  }
  header.nav.scrolled{border-color:var(--ink);box-shadow:0 6px 24px -18px var(--shadow)}
  .nav__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
  .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
  .brand .mark{width:38px;height:38px;flex:none}
  .brand small{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;color:var(--red);text-transform:uppercase;font-weight:700;margin-top:-2px}
  .nav__links{display:flex;align-items:center;gap:1.6rem;font-family:var(--font-display);font-weight:700;font-size:.95rem}
  .nav__links a{position:relative;padding:.2rem 0}
  .nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .3s}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
  .btn{
    font-family:var(--font-display);font-weight:800;cursor:pointer;border:2px solid var(--ink);
    background:var(--gold);color:var(--ink);padding:.6rem 1.1rem;border-radius:999px;
    box-shadow:3px 3px 0 var(--ink);transition:transform .12s, box-shadow .12s, background .2s;
    display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;line-height:1;
  }
  .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  .btn.red{background:var(--red);color:var(--cream)}
  .btn.ghost{background:transparent;box-shadow:none}
  .btn.ghost:hover{background:var(--ink);color:var(--cream);transform:none}
  .nav__cta{display:flex;align-items:center;gap:.7rem}
  .burger{display:none;background:none;border:2px solid var(--ink);border-radius:10px;width:44px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
  .burger span{width:20px;height:2.5px;background:var(--ink);transition:.25s}
  .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:clamp(2rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);overflow:hidden}
  .blob{position:absolute;border-radius:50%;filter:blur(6px);z-index:0;opacity:.5}
  .blob.b1{width:420px;height:420px;background:radial-gradient(circle at 40% 40%,#ffd27a,transparent 70%);top:-120px;right:-80px}
  .blob.b2{width:340px;height:340px;background:radial-gradient(circle at 50% 50%,#ff8a7a,transparent 70%);bottom:-140px;left:-60px;opacity:.35}
  .confetti{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  .confetti i{position:absolute;width:12px;height:12px;border-radius:2px;opacity:.9}
  @media (prefers-reduced-motion:no-preference){.confetti i{animation:drift linear infinite}}
  @keyframes drift{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(110vh) rotate(360deg)}}

  .hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
  .eyebrow{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-deep);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--red)}
  .hero h1{font-size:clamp(3.2rem,11vw,7.2rem);text-transform:uppercase;letter-spacing:-.03em}
  .hero h1 .k{color:var(--red);display:inline-block}
  .hero h1 .l{color:var(--teal);display:inline-block}
  .stroke{-webkit-text-stroke:2px var(--ink);color:transparent}
  .hero p.lede{font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:34ch;margin:1.4rem 0 1.8rem;color:var(--ink-soft);font-weight:500}
  .hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
  .hero__meta{display:flex;gap:1.4rem;margin-top:1.8rem;flex-wrap:wrap}
  .hero__meta div{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft)}
  .hero__meta strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--ink)}

  .truck-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
  .truck-svg{width:min(100%,460px);height:auto;position:relative;z-index:2}
  .road{position:absolute;bottom:6%;left:-10%;right:-10%;height:10px;background:repeating-linear-gradient(90deg,var(--gold) 0 26px,transparent 26px 52px);border-radius:6px;z-index:1;opacity:.8}
  @media (prefers-reduced-motion:no-preference){.road{animation:roadmove 1.1s linear infinite}}
  @keyframes roadmove{to{background-position:-52px 0}}
  .wheel{transform-box:view-box;transform-origin:center}
  @media (prefers-reduced-motion:no-preference){.spin{animation:spin 1.4s linear infinite}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:no-preference){.bob{animation:bob 3.4s ease-in-out infinite}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .smoke{fill:#fff;opacity:.5}
  @media (prefers-reduced-motion:no-preference){.puff{animation:puff 2.6s ease-in infinite}}
  @keyframes puff{0%{opacity:.55;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-26px,-40px) scale(1.5)}}

  /* ---------- section heads ---------- */
  section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
  .sec-head{margin-bottom:clamp(2rem,5vw,3.2rem)}
  .kicker{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red-deep);display:inline-flex;gap:.6rem;align-items:center}
  .kicker::before{content:"◆";color:var(--gold)}
  .sec-title{font-size:clamp(2.4rem,7vw,4.4rem);text-transform:uppercase;letter-spacing:-.02em;margin-top:.6rem}
  .sec-sub{max-width:52ch;color:var(--ink-soft);font-size:1.08rem;margin-top:1rem;font-weight:500}

  /* ---------- menu ---------- */
  #menu{background:linear-gradient(180deg,var(--paper),var(--paper2))}
  .menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
  .card{
    background:var(--cream);border:2px solid var(--ink);border-radius:16px;overflow:hidden;
    box-shadow:6px 6px 0 var(--shadow);transition:transform .18s, box-shadow .18s;
    display:flex;flex-direction:column;
  }
  .card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
  .card__media{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--paper2)}
  .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .card:hover .card__media img{transform:scale(1.07)}
  .flag{position:absolute;top:12px;left:12px;background:var(--red);color:var(--cream);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px;box-shadow:2px 2px 0 var(--ink)}
  .heat{position:absolute;top:12px;right:12px;display:flex;gap:2px;background:rgba(42,23,16,.7);padding:.3rem .5rem;border-radius:8px}
  .heat svg{width:14px;height:14px}
  .card__body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
  .card__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .card__name{font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1}
  .card__hangul{font-family:var(--font-body);color:var(--red-deep);font-weight:700;font-size:.95rem}
  .price{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--teal);white-space:nowrap}
  .card__desc{color:var(--ink-soft);font-size:.98rem;flex:1}
  .card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem;border-top:2px dashed rgba(42,23,16,.25);padding-top:.8rem}
  .tags{display:flex;gap:.4rem;flex-wrap:wrap}
  .tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;background:var(--paper2);border:1.5px solid var(--ink);padding:.2rem .45rem;border-radius:5px}
  .add{cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:.85rem;background:var(--gold);border:2px solid var(--ink);border-radius:999px;padding:.4rem .8rem;box-shadow:2px 2px 0 var(--ink);transition:.12s;display:inline-flex;gap:.35rem;align-items:center}
  .add:hover{background:var(--red);color:var(--cream)}
  .add:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
  .add.added{background:var(--teal);color:var(--cream)}

  .combos{margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
  .combo{background:var(--ink);color:var(--cream);border-radius:16px;padding:1.4rem;border:2px solid var(--ink);position:relative;overflow:hidden}
  .combo::after{content:"★";position:absolute;right:-10px;bottom:-20px;font-size:6rem;color:rgba(244,167,44,.18)}
  .combo h4{font-size:1.4rem;color:var(--gold);text-transform:uppercase}
  .combo p{margin:.5rem 0 1rem;color:#e9dcc4;font-size:.98rem}
  .combo .big{font-family:var(--font-display);font-size:2.4rem;font-weight:800}
  .combo .was{text-decoration:line-through;opacity:.6;font-size:1.1rem;margin-right:.5rem}

  /* ---------- story ---------- */
  #story{background:var(--teal);color:var(--cream)}
  #story .kicker,#story .kicker::before{color:var(--gold)}
  #story .sec-title{color:var(--cream)}
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
  .story-copy p{font-size:1.15rem;line-height:1.7;color:#dff0ec;margin-bottom:1.1rem}
  .story-copy p:first-of-type::first-letter{font-family:var(--font-display);font-size:3.4rem;float:left;line-height:.8;padding:.1rem .6rem .1rem 0;color:var(--gold)}
  .pull{border-left:4px solid var(--gold);padding-left:1.2rem;font-family:var(--font-display);font-size:1.6rem;line-height:1.25;margin:1.6rem 0;color:var(--cream)}
  .stat-row{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.5rem}
  .stat-row div{font-family:var(--font-display)}
  .stat-row b{display:block;font-size:2.2rem;color:var(--gold)}
  .stat-row span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#bff0e6}
  .photo-stack{position:relative;height:460px}
  .photo-stack figure{position:absolute;border:6px solid var(--cream);box-shadow:8px 10px 0 rgba(0,0,0,.25);border-radius:6px;overflow:hidden;background:var(--cream)}
  .photo-stack figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:.4rem .5rem;background:var(--cream);text-align:center}
  .photo-stack img{width:100%;height:100%;object-fit:cover}
  .ps1{width:230px;top:0;left:0;transform:rotate(-6deg);z-index:2}
  .ps2{width:210px;top:150px;right:0;transform:rotate(5deg);z-index:3}
  .ps3{width:200px;bottom:0;left:60px;transform:rotate(-3deg);z-index:1}
  .stamp{position:absolute;top:-14px;right:20px;z-index:5;width:96px;height:96px;border-radius:50%;background:var(--red);color:var(--cream);display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-weight:800;font-size:.72rem;line-height:1.1;border:3px dashed var(--cream);box-shadow:4px 4px 0 rgba(0,0,0,.3);transform:rotate(8deg)}
  @media (prefers-reduced-motion:no-preference){.stamp{animation:wobble 5s ease-in-out infinite}}
  @keyframes wobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-4deg)}}

  /* ---------- find us ---------- */
  #find{background:var(--paper)}
  .find-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,2.6rem);align-items:start}
  .sched{display:flex;flex-direction:column;gap:.9rem}
  .day{display:grid;grid-template-columns:70px 1fr auto;gap:1rem;align-items:center;background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:1rem 1.1rem;box-shadow:4px 4px 0 var(--shadow);transition:transform .15s, box-shadow .15s}
  .day:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
  .day.today{border-color:var(--red);background:#fff4ef;box-shadow:5px 5px 0 var(--red)}
  .day .dow{font-family:var(--font-display);font-weight:800;font-size:1.15rem;text-transform:uppercase}
  .day.today .dow{color:var(--red)}
  .day .loc{font-weight:600;color:var(--ink)}
  .day .loc small{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.05em}
  .day .hrs{font-family:var(--font-mono);font-size:.85rem;text-align:right;color:var(--teal);font-weight:700}
  .day.off{opacity:.6}
  .badge-today{font-family:var(--font-mono);font-size:.6rem;background:var(--red);color:var(--cream);padding:.15rem .4rem;border-radius:4px;letter-spacing:.1em;margin-left:.4rem;vertical-align:middle}

  .live{background:var(--ink);color:var(--cream);border-radius:16px;padding:1.5rem;box-shadow:6px 6px 0 var(--shadow);margin-top:1.4rem}
  .live .row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .live .status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:800;font-size:1.1rem}
  .pulse{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(167,207,58,.6)}
  @media (prefers-reduced-motion:no-preference){.pulse{animation:pulse 1.6s infinite}}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(167,207,58,.6)}70%{box-shadow:0 0 0 12px rgba(167,207,58,0)}100%{box-shadow:0 0 0 0 rgba(167,207,58,0)}}
  .pulse.closed{background:var(--red);box-shadow:0 0 0 0 rgba(226,58,46,.6)}
  .clock{font-family:var(--font-mono);font-size:1.6rem;color:var(--gold)}
  .live .msg{margin-top:.7rem;color:#e9dcc4;font-size:.95rem}
  .map{border-radius:16px;overflow:hidden;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);position:relative;background:var(--paper2)}
  .map svg{display:block;width:100%;height:auto}
  .pin{transform-box:view-box;transform-origin:center bottom}
  @media (prefers-reduced-motion:no-preference){.pin{animation:hop 1.6s ease-in-out infinite}}
  @keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .map .note{position:absolute;left:14px;bottom:14px;background:var(--cream);border:2px solid var(--ink);border-radius:10px;padding:.5rem .8rem;font-family:var(--font-mono);font-size:.72rem;box-shadow:3px 3px 0 var(--shadow)}

  /* ---------- reviews ---------- */
  #reviews{background:var(--gold)}
  #reviews .kicker,#reviews .kicker::before{color:var(--red-deep)}
  .rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
  .quote{background:var(--cream);border:2px solid var(--ink);border-radius:16px;padding:1.4rem;box-shadow:5px 5px 0 var(--ink);position:relative}
  .quote::before{content:"“";position:absolute;top:-10px;left:14px;font-family:var(--font-display);font-size:4rem;color:var(--red);line-height:1}
  .stars{color:var(--red);letter-spacing:2px;font-size:1.1rem;margin-bottom:.6rem}
  .quote p{font-size:1.05rem;line-height:1.5;margin-bottom:1rem}
  .who{display:flex;align-items:center;gap:.7rem}
  .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:var(--cream);background:var(--teal);border:2px solid var(--ink)}
  .who b{display:block;font-family:var(--font-display)}
  .who span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}

  /* ---------- newsletter ---------- */
  #join{background:var(--ink);color:var(--cream);text-align:center}
  #join .sec-title{color:var(--cream)}
  #join .kicker,#join .kicker::before{color:var(--gold)}
  #join p.sub{max-width:46ch;margin:1rem auto 2rem;color:#e9dcc4;font-size:1.1rem}
  .nl{display:flex;gap:.7rem;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .nl input{flex:1;min-width:220px;background:var(--cream);border:2px solid var(--cream);border-radius:999px;padding:.9rem 1.2rem;font-family:var(--font-body);font-size:1rem;color:var(--ink)}
  .nl input:focus{outline:none;border-color:var(--gold)}
  .nl-msg{margin-top:1rem;font-family:var(--font-mono);font-size:.9rem;color:var(--lime);min-height:1.2rem}
  .socials{display:flex;gap:1.2rem;justify-content:center;margin-top:2rem;font-family:var(--font-display);font-weight:800}
  .socials a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border:2px solid rgba(255,255,255,.3);border-radius:999px;transition:.2s}
  .socials a:hover{background:var(--red);border-color:var(--red)}

  /* ---------- footer ---------- */
  footer{background:var(--paper2);border-top:3px solid var(--ink);padding:2.5rem 0 1.5rem}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
  footer h5{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem;font-size:1.05rem}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;color:var(--ink-soft)}
  footer li a:hover{color:var(--red)}
  .foot-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:.8rem}
  .foot-note{margin-top:2rem;padding-top:1.2rem;border-top:2px dashed rgba(42,23,16,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);letter-spacing:.05em}

  /* ---------- cart button + drawer ---------- */
  .cart-fab{position:fixed;right:20px;bottom:20px;z-index:70;background:var(--red);color:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:.8rem 1.1rem;font-family:var(--font-display);font-weight:800;cursor:pointer;box-shadow:4px 4px 0 var(--ink);display:flex;align-items:center;gap:.5rem;transition:transform .12s}
  .cart-fab:hover{transform:translate(-1px,-1px)}
  .cart-fab .count{background:var(--cream);color:var(--red);border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;font-size:.85rem;padding:0 .3rem}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,90vw);background:var(--cream);z-index:90;border-left:3px solid var(--ink);box-shadow:-10px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
  .drawer.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(42,23,16,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.show{opacity:1;pointer-events:auto}
  .drawer__head{padding:1.2rem;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
  .drawer__head h3{font-size:1.4rem;text-transform:uppercase}
  .close-x{background:none;border:2px solid var(--ink);border-radius:8px;width:36px;height:36px;font-size:1.2rem;cursor:pointer;font-family:var(--font-display);font-weight:800}
  .drawer__body{flex:1;overflow-y:auto;padding:1rem 1.2rem}
  .empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem;font-family:var(--font-mono)}
  .ci{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.7rem 0;border-bottom:1.5px dashed rgba(42,23,16,.25)}
  .ci b{font-family:var(--font-display)}
  .ci .qty{display:flex;align-items:center;gap:.4rem}
  .ci .qty button{width:26px;height:26px;border:2px solid var(--ink);background:var(--paper2);border-radius:6px;cursor:pointer;font-weight:800;font-family:var(--font-display)}
  .ci .rm{background:none;border:none;color:var(--red);cursor:pointer;font-size:.75rem;font-family:var(--font-mono);text-decoration:underline}
  .drawer__foot{padding:1.2rem;border-top:2px solid var(--ink);background:var(--paper2)}
  .total-row{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:1.3rem;margin-bottom:.8rem}
  .total-row span:last-child{color:var(--teal)}
  .drawer__foot .btn{width:100%;justify-content:center;font-size:1.05rem}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .hero__grid{grid-template-columns:1fr}
    .truck-stage{order:-1;min-height:260px}
    .story-grid,.find-grid{grid-template-columns:1fr}
    .photo-stack{height:400px;margin-top:1rem}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .nav__links{position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;align-items:flex-start;padding:1rem 1.4rem;gap:1rem;border-bottom:2px solid var(--ink);transform:translateY(-140%);transition:transform .3s;box-shadow:0 10px 20px -12px var(--shadow)}
    .nav__links.open{transform:none}
    .burger{display:flex}
    .nav__cta .btn.hide-sm{display:none}
    .foot-grid{grid-template-columns:1fr}
    .day{grid-template-columns:56px 1fr}
    .day .hrs{grid-column:1/-1;text-align:left}
  }
</style>
</head>
<body>
<div class="grain"></div>

<!-- ticker -->
<div class="ticker" aria-hidden="true">
  <div class="ticker__track" id="tickTrack">
    <span><b>KIMCHI LOCO</b> <i class="dot">●</i> KOREAN × MEXICAN STREET FOOD <i class="dot">●</i></span>
    <span>FRESH MADE TO ORDER <i class="dot">●</i> <b>$5 STARTER WEEK</b> <i class="dot">●</i></span>
    <span>WHEELS ROLLING DAILY <i class="dot">●</i> FIND US ON THE MAP <i class="dot">●</i></span>
    <span><b>KIMCHI LOCO</b> <i class="dot">●</i> KOREAN × MEXICAN STREET FOOD <i class="dot">●</i></span>
    <span>FRESH MADE TO ORDER <i class="dot">●</i> <b>$5 STARTER WEEK</b> <i class="dot">●</i></span>
    <span>WHEELS ROLLING DAILY <i class="dot">●</i> FIND US ON THE MAP <i class="dot">●</i></span>
  </div>
</div>

<!-- nav -->
<header class="nav" id="nav">
  <div class="wrap nav__row">
    <a href="#home" class="brand" aria-label="Kimchi Loco home">
      <svg class="mark" viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="19" fill="#e23a2e" stroke="#2a1710" stroke-width="2"/>
        <path d="M8 26c4-12 20-12 24 0-6 3-18 3-24 0Z" fill="#f4a72c" stroke="#2a1710" stroke-width="2" stroke-linejoin="round"/>
        <path d="M12 24c2-4 14-4 16 0" stroke="#a7cf3a" stroke-width="2" fill="none"/>
        <circle cx="16" cy="21" r="1.6" fill="#2a1710"/><circle cx="24" cy="21" r="1.6" fill="#2a1710"/>
      </svg>
      <span>Kimchi&nbsp;Loco<small>Seoul meets Mexico City</small></span>
    </a>
    <nav class="nav__links" id="navLinks">
      <a href="#menu">Menu</a>
      <a href="#story">Our Story</a>
      <a href="#find">Find the Truck</a>
      <a href="#reviews">Reviews</a>
    </nav>
    <div class="nav__cta">
      <button class="btn red hide-sm" data-scroll="#join">Get $5 tacos</button>
      <button class="burger" id="burger" aria-label="Toggle menu"><span></span><span></span><span></span></button>
    </div>
  </div>
</header>

<main>
<!-- hero -->
<section class="hero" id="home">
  <div class="blob b1"></div><div class="blob b2"></div>
  <div class="confetti" id="confetti"></div>
  <div class="wrap hero__grid">
    <div>
      <span class="eyebrow">Now rolling · Downtown LA</span>
      <h1>
        <span class="k scramble" data-text="KIMCHI">KIMCHI</span><br>
        <span class="l scramble" data-text="LOCO">LOCO</span>
      </h1>
      <p class="lede">Hand-folded corn tortillas stuffed with bulgogi, gochujang slaw &amp; pickled radish. It's two streets of food colliding in your hand.</p>
      <div class="hero__actions">
        <button class="btn red" data-scroll="#menu">See the menu →</button>
        <button class="btn ghost" data-scroll="#find">Where's the truck?</button>
      </div>
      <div class="hero__meta">
        <div><strong>12</strong>house-made tacos</div>
        <div><strong>4.9★</strong>1,200+ reviews</div>
        <div><strong>~8 min</strong>made to order</div>
      </div>
    </div>

    <div class="truck-stage">
      <div class="road"></div>
      <svg class="truck-svg bob" viewBox="0 0 480 300" role="img" aria-label="The Kimchi Loco taco truck">
        <!-- smoke -->
        <g>
          <circle class="smoke puff" cx="150" cy="70" r="10" style="animation-delay:0s"/>
          <circle class="smoke puff" cx="150" cy="70" r="8" style="animation-delay:.9s"/>
          <circle class="smoke puff" cx="150" cy="70" r="12" style="animation-delay:1.7s"/>
        </g>
        <!-- awning -->
        <path d="M96 96 L300 96 L312 78 L84 78 Z" fill="#e23a2e" stroke="#2a1710" stroke-width="4" stroke-linejoin="round"/>
        <g fill="#fff7ea">
          <rect x="96" y="96" width="24" height="14" transform="skewX(-8)"/>
          <rect x="144" y="96" width="24" height="14" transform="skewX(-8)"/>
          <rect x="192" y="96" width="24" height="14" transform="skewX(-8)"/>
          <rect x="240" y="96" width="24" height="14" transform="skewX(-8)"/>
        </g>
        <!-- service window -->
        <rect x="110" y="112" width="180" height="60" rx="6" fill="#ffe9c7" stroke="#2a1710" stroke-width="4"/>
        <text x="200" y="150" text-anchor="middle" font-family="Futura, sans-serif" font-weight="800" font-size="26" fill="#e23a2e">ORDER HERE</text>
        <!-- cab -->
        <path d="M300 120 L360 120 L392 168 L392 210 L300 210 Z" fill="#f4a72c" stroke="#2a1710" stroke-width="4" stroke-linejoin="round"/>
        <path d="M312 132 L356 132 L380 168 L312 168 Z" fill="#bfe6e2" stroke="#2a1710" stroke-width="4" stroke-linejoin="round"/>
        <!-- body -->
        <rect x="70" y="112" width="230" height="98" rx="8" fill="#0f6b62" stroke="#2a1710" stroke-width="4"/>
        <text x="185" y="200" text-anchor="middle" font-family="Futura, sans-serif" font-weight="800" font-size="20" fill="#fff7ea" letter-spacing="1">KIMCHI LOCO</text>
        <!-- bumper -->
        <rect x="60" y="206" width="340" height="14" rx="6" fill="#2a1710"/>
        <!-- wheels -->
        <g class="spin wheel" style="transform-origin:130px 226px">
          <circle cx="130" cy="226" r="30" fill="#2a1710"/><circle cx="130" cy="226" r="14" fill="#f4a72c"/>
          <rect x="128" y="200" width="4" height="14" fill="#fff7ea"/><rect x="128" y="238" width="4" height="14" fill="#fff7ea"/>
          <rect x="104" y="224" width="14" height="4" fill="#fff7ea"/><rect x="142" y="224" width="14" height="4" fill="#fff7ea"/>
        </g>
        <g class="spin wheel" style="transform-origin:340px 226px">
          <circle cx="340" cy="226" r="30" fill="#2a1710"/><circle cx="340" cy="226" r="14" fill="#f4a72c"/>
          <rect x="338" y="200" width="4" height="14" fill="#fff7ea"/><rect x="338" y="238" width="4" height="14" fill="#fff7ea"/>
          <rect x="314" y="224" width="14" height="4" fill="#fff7ea"/><rect x="352" y="224" width="14" height="4" fill="#fff7ea"/>
        </g>
      </svg>
    </div>
  </div>
</section>

<!-- menu -->
<section id="menu">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="kicker">The Lineup</span>
      <h2 class="sec-title">Stack Your Tray</h2>
      <p class="sec-sub">Every taco is folded and filled fresh while you wait. Tap “Add” to build an order — we'll have it ready when the truck rolls up.</p>
    </div>
    <div class="menu-grid" id="menuGrid"></div>

    <div class="combos">
      <div class="combo reveal">
        <h4>The Starter Week</h4>
        <p>Any one taco for a fiver. Yes, really. Come taste the collision.</p>
        <div><span class="was">$6.50</span><span class="big">$5</span></div>
      </div>
      <div class="combo reveal" data-delay="120">
        <h4>Loco Trio</h4>
        <p>Pick any three tacos + a side of kimchi fries. Feeds two hungry humans.</p>
        <div><span class="was">$22</span><span class="big">$18</span></div>
      </div>
      <div class="combo reveal" data-delay="240">
        <h4>Party Platter</h4>
        <p>12 assorted tacos, 2 sides &amp; horchata or makgeolli for the crew.</p>
        <div><span class="big">$65</span></div>
      </div>
    </div>
  </div>
</section>

<!-- story -->
<section id="story">
  <div class="wrap story-grid">
    <div class="story-copy reveal">
      <span class="kicker">Why We Exist</span>
      <h2 class="sec-title">Two Grandmas,<br>One Taco</h2>
      <p>Our founder grew up between a Seoul apartment kitchen and a Mexico City taquería. Abuela Ji-sook fermented kimchi for weeks. Abuelo Ramón charred al pastor over open flame. One night they met over a shared plate and never looked back.</p>
      <div class="pull">“If it makes your eyes water and your neighbors jealous — that's the good stuff.”</div>
      <p>Today every tortilla is pressed by hand, every batch of gochujang slaw mixed the morning of service, and yes — our kimchi still takes its sweet time. Fast food shouldn't mean rushed flavor.</p>
      <div class="stat-row">
        <div><b>2019</b><span>First street corner</span></div>
        <div><b>3</b><span>Neighborhood stops</span></div>
        <div><b>0</b><span>Preservatives</span></div>
      </div>
    </div>
    <div class="photo-stack reveal" data-delay="150">
      <div class="stamp">MADE<br>WITH<br>CHILI</div>
      <figure class="ps1"><img src="https://picsum.photos/seed/korean-bulgogi-grill/460/340" alt="Bulgogi grilling"><figcaption>bulgogi · live fire</figcaption></figure>
      <figure class="ps2"><img src="https://picsum.photos/seed/handmade-corn-tortilla/420/300" alt="Pressing corn tortillas"><figcaption>tortillas · pressed daily</figcaption></figure>
      <figure class="ps3"><img src="https://picsum.photos/seed/street-food-night-lanterns/400/300" alt="Street food at night"><figcaption>the night shift</figcaption></figure>
    </div>
  </div>
</section>

<!-- find us -->
<section id="find">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="kicker">Catch Us Rolling</span>
      <h2 class="sec-title">Where's the Truck Today?</h2>
      <p class="sec-sub">We move around so you don't have to guess. Here's the week — the highlighted day is where we're parked right now.</p>
    </div>
    <div class="find-grid">
      <div>
        <div class="sched reveal" id="sched"></div>
        <div class="live reveal" data-delay="120">
          <div class="row">
            <span class="status"><span class="pulse" id="livePulse"></span><span id="liveStatus">Checking…</span></span>
            <span class="clock" id="clock">--:--</span>
          </div>
          <p class="msg" id="liveMsg">Loading today's spot…</p>
        </div>
      </div>
      <div class="map reveal" data-delay="150">
        <svg viewBox="0 0 400 300" role="img" aria-label="Map showing the truck location">
          <rect width="400" height="300" fill="#efe3c9"/>
          <g stroke="#d9c9a3" stroke-width="10" fill="none">
            <path d="M0 70 H400"/><path d="M0 150 H400"/><path d="M0 230 H400"/>
            <path d="M80 0 V300"/><path d="M200 0 V300"/><path d="M320 0 V300"/>
          </g>
          <g fill="#cfe6b8"><rect x="14" y="14" width="52" height="44" rx="4"/><rect x="330" y="180" width="56" height="44" rx="4"/></g>
          <g fill="#bcd9d4"><rect x="214" y="84" width="90" height="50" rx="4"/></g>
          <text x="259" y="112" text-anchor="middle" font-family="monospace" font-size="10" fill="#0f6b62">THE PARK</text>
          <g class="pin" transform="translate(200,150)">
            <path d="M0 0 C-14 -22 -14 -40 0 -40 C14 -40 14 -22 0 0 Z" fill="#e23a2e" stroke="#2a1710" stroke-width="3"/>
            <circle cx="0" cy="-26" r="8" fill="#fff7ea" stroke="#2a1710" stroke-width="2"/>
          </g>
        </svg>
        <div class="note" id="mapNote">📍 Parked: —</div>
      </div>
    </div>
  </div>
</section>

<!-- reviews -->
<section id="reviews">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="kicker">Word On The Street</span>
      <h2 class="sec-title">People Are Obsessed</h2>
    </div>
    <div class="rev-grid" id="revGrid"></div>
  </div>
</section>

<!-- join -->
<section id="join">
  <div class="wrap">
    <div class="sec-head reveal" style="text-align:center">
      <span class="kicker" style="justify-content:center">Never Miss A Stop</span>
      <h2 class="sec-title">Join The Locals List</h2>
      <p class="sub" style="margin-left:auto;margin-right:auto">Get the weekly route drop, secret specials, and a code for your first $5 taco. No spam — just spicy.</p>
    </div>
    <form class="nl reveal" id="nlForm" novalidate>
      <input type="email" id="nlEmail" placeholder="you@email.com" aria-label="Your email" required>
      <button class="btn red" type="submit">Send me tacos 🌮</button>
    </form>
    <p class="nl-msg" id="nlMsg" role="status"></p>
    <div class="socials reveal">
      <a href="#" onclick="return false">@kimchiloco</a>
      <a href="#" onclick="return false">Instagram</a>
      <a href="#" onclick="return false">TikTok</a>
    </div>
  </div>
</section>
</main>

<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div>
        <div class="foot-brand">
          <svg class="mark" viewBox="0 0 40 40" width="34" height="34" fill="none">
            <circle cx="20" cy="20" r="19" fill="#e23a2e" stroke="#2a1710" stroke-width="2"/>
            <path d="M8 26c4-12 20-12 24 0-6 3-18 3-24 0Z" fill="#f4a72c" stroke="#2a1710" stroke-width="2" stroke-linejoin="round"/>
          </svg>
          Kimchi Loco
        </div>
        <p style="color:var(--ink-soft);max-width:34ch">Korean-Mexican street tacos, rolled out of a little teal truck since 2019. Find us, follow us, feed us your cravings.</p>
      </div>
      <div>
        <h5>Explore</h5>
        <ul>
          <li><a href="#menu">Full Menu</a></li>
          <li><a href="#find">Weekly Schedule</a></li>
          <li><a href="#story">Our Story</a></li>
          <li><a href="#join">Newsletter</a></li>
        </ul>
      </div>
      <div>
        <h5>Book The Truck</h5>
        <ul>
          <li><a href="#" onclick="return false">Weddings &amp; events</a></li>
          <li><a href="#" onclick="return false">Corporate catering</a></li>
          <li><a href="#" onclick="return false">hello@kimchiloco.co</a></li>
          <li><a href="#" onclick="return false">(323) 555-0142</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-note">
      <span>© 2024 Kimchi Loco Food Truck · Los Angeles, CA</span>
      <span>Made with chili, cilantro &amp; love 🔥</span>
    </div>
  </div>
</footer>

<!-- cart -->
<button class="cart-fab" id="cartFab" aria-label="Open your order">
  🛒 Order <span class="count" id="cartCount">0</span>
</button>
<div class="scrim" id="scrim"></div>
<aside class="drawer" id="drawer" aria-label="Your order">
  <div class="drawer__head">
    <h3>Your Tray</h3>
    <button class="close-x" id="drawerClose" aria-label="Close">✕</button>
  </div>
  <div class="drawer__body" id="drawerBody"></div>
  <div class="drawer__foot">
    <div class="total-row"><span>Total</span><span id="cartTotal">$0.00</span></div>
    <button class="btn red" id="checkout">Reserve pickup →</button>
  </div>
</aside>

<script>
(function(){
  "use strict";
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  /* ---------- data ---------- */
  var MENU = [
    {id:"bulgogi", name:"Bulgogi Crunch", ko:"불고기", price:6.5, heat:2, flag:"Best Seller", seed:"bulgogi-beef-taco", desc:"Thinly sliced marinated beef, crispy fried shallots, sesame mayo.", tags:["Beef","Nutty"]},
    {id:"gochujang", name:"Gochujang Chicken", ko:"고추장 치킨", price:6.0, heat:3, flag:"", seed:"gochujang-chicken-wing", desc:"Charred chicken thighs glazed in house gochujang, scallion, lime crema.", tags:["Chicken","Spicy"]},
    {id:"kalbi", name:"Kalbi Short Rib", ko:"갈비", price:7.5, heat:1, flag:"Chef's Pick", seed:"kalbi-short-rib", desc:"Slow-braised short rib, pickled daengmyeon-style radish, toasted garlic.", tags:["Premium"]},
    {id:"kimchi-pork", name:"Kimchi Pork Belly", ko:"김치 삼겹살", price:6.5, heat:3, flag:"", seed:"kimchi-pork-belly", desc:"Crispy pork belly, aged napa kimchi, a hit of brown sugar glaze.", tags:["Pork","Fermented"]},
    {id:"japchae", name:"Japchae Veggie", ko:"잡채", price:5.5, heat:0, flag:"Vegan", seed:"japchae-noodle-veggie", desc:"Sweet potato glass noodles, shiitake, carrot, soy-ginger dressing.", tags:["Vegan","Noodles"]},
    {id:"tuna", name:"Spicy Tuna Poke", ko:"참치", price:7.0, heat:2, flag:"Fresh Catch", seed:"spicy-tuna-poke", desc:"Line-caught tuna, sriracha aioli, cucumber, furikake crunch.", tags:["Seafood"]},
    {id:"shrimp", name:"Garlic Shrimp", ko:"새우", price:7.0, heat:1, flag:"", seed:"garlic-shrimp-taco", desc:"Butter-poached shrimp, roasted corn salsa, chipotle crema.", tags:["Seafood"]},
    {id:"tofu", name:"Crispy Gochu Tofu", ko:"두부", price:5.5, heat:2, flag:"Vegan", seed:"crispy-tofu-goju", desc:"Double-fried tofu, gochugaru oil, quick-pickled onion, cilantro.", tags:["Vegan"]}
  ];
  var REVIEWS = [
    {n:"Marisol T.", h:"@mari.eats", t:"I cried a little. That kalbi taco is illegal levels of good.", s:5, c:"#0f6b62"},
    {n:"Devon K.", h:"Local since '21", t:"The kimchi pork belly changed how I think about tacos forever.", s:5, c:"#e23a2e"},
    {n:"Priya S.", h:"Food blogger", t:"Gochujang chicken + lime crema = my new personality trait.", s:5, c:"#f4a72c"},
    {n:"Andre W.", h:"Downtown worker", t:"$5 starter week got me hooked. Now I plan lunch around the schedule.", s:5, c:"#0f6b62"}
  ];
  var DAYS = [
    {d:"Monday", loc:"Arts District", addr:"4th St & Mateo Alley", hrs:"11a – 3p"},
    {d:"Tuesday", loc:"Grand Central Market", addr:"317 S Broadway", hrs:"11a – 4p"},
    {d:"Wednesday", loc:"Silver Lake", addr:"Sunset Blvd @ Echo Park", hrs:"12p – 8p"},
    {d:"Thursday", loc:"Downtown Core", addr:"Fig Garden Plaza", hrs:"11a – 9p"},
    {d:"Friday", loc:"Koreatown Night Market", addr:"Olympic Blvd Lot", hrs:"5p – 11p"},
    {d:"Saturday", loc:"Smorgasburg LA", addr:"Rio de Los Angeles", hrs:"10a – 6p"},
    {d:"Sunday", loc:"Private Events", addr:"Book the truck!", hrs:"—", off:true}
  ];

  /* ---------- helpers ---------- */
  function el(tag, cls, html){ var e=document.createElement(tag); if(cls)e.className=cls; if(html!=null)e.innerHTML=html; return e; }
  function money(n){ return "$"+n.toFixed(2); }
  function heatSVG(level){
    var out="";
    for(var i=0;i<3;i++){
      var on=i<level;
      out+='<svg viewBox="0 0 24 24" fill="'+(on?"#e23a2e":"rgba(255,255,255,.35)")+'"><path d="M12 2c1 3 4 4 4 8a4 4 0 1 1-8 0c0-2 1-3 2-4-.5 2 0 3 1 3 .5-3-1-5 1-7Z"/></svg>';
    }
    return out;
  }

  /* ---------- build menu ---------- */
  var grid = document.getElementById("menuGrid");
  MENU.forEach(function(m,idx){
    var card = el("article","card reveal");
    card.style.setProperty("--d",(idx%3)*90+"ms");
    card.innerHTML =
      '<div class="card__media">'+
        '<img loading="lazy" src="https://picsum.photos/seed/'+m.seed+'/560/360" alt="'+m.name+'">'+
        (m.flag?'<span class="flag">'+m.flag+'</span>':'')+
        '<span class="heat" title="Heat level '+m.heat+'">'+heatSVG(m.heat)+'</span>'+
      '</div>'+
      '<div class="card__body">'+
        '<div class="card__top"><span class="card__name">'+m.name+'</span><span class="price">'+money(m.price)+'</span></div>'+
        '<span class="card__hangul">'+m.ko+'</span>'+
        '<p class="card__desc">'+m.desc+'</p>'+
        '<div class="card__foot">'+
          '<div class="tags">'+m.tags.map(function(t){return '<span class="tag">'+t+'</span>';}).join('')+'</div>'+
          '<button class="add" data-add="'+m.id+'">+ Add</button>'+
        '</div>'+
      '</div>';
    grid.appendChild(card);
  });

  /* ---------- build reviews ---------- */
  var revGrid = document.getElementById("revGrid");
  REVIEWS.forEach(function(r,i){
    var q = el("div","quote reveal");
    q.style.setProperty("--d",(i%2)*100+"ms");
    q.innerHTML =
      '<div class="stars">'+"★★★★★".slice(0,r.s)+"☆☆☆☆☆".slice(0,5-r.s)+'</div>'+
      '<p>'+r.t+'</p>'+
      '<div class="who"><span class="avatar" style="background:'+r.c+'">'+r.n[0]+'</span>'+
      '<span><b>'+r.n+'</b><span>'+r.h+'</span></span></div>';
    revGrid.appendChild(q);
  });

  /* ---------- schedule + live status ---------- */
  var schedEl = document.getElementById("sched");
  var dow = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var todayName = dow[new Date().getDay()];
  DAYS.forEach(function(d){
    var row = el("div","day"+(d.d===todayName?" today":"")+(d.off?" off":""));
    row.innerHTML =
      '<span class="dow">'+d.d.slice(0,3)+(d.d===todayName?'<span class="badge-today">TODAY</span>':'')+'</span>'+
      '<span class="loc">'+d.loc+'<small>'+d.addr+'</small></span>'+
      '<span class="hrs">'+d.hrs+'</span>';
    schedEl.appendChild(row);
  });

  function updateLive(){
    var now = new Date();
    var name = dow[now.getDay()];
    var mins = now.getHours()*60 + now.getMinutes();
    var entry = DAYS.filter(function(x){return x.d===name;})[0];
    var pulse = document.getElementById("livePulse");
    var status = document.getElementById("liveStatus");
    var msg = document.getElementById("liveMsg");
    var note = document.getElementById("mapNote");
    document.getElementById("clock").textContent =
      String(now.getHours()).padStart(2,"0")+":"+String(now.getMinutes()).padStart(2,"0");

    if(!entry || entry.off){
      status.textContent = "Closed today";
      pulse.classList.add("closed");
      msg.textContent = "We're off — book the truck for private events or check tomorrow.";
      note.textContent = "📍 Off duty today";
      return;
    }
    // parse hours like "11a – 3p" / "5p – 11p"
    var m = entry.hrs.match(/(\d+)\s*([ap])\s*[–-]\s*(\d+)\s*([ap])/i);
    var open=true, closeMin=0, openMin=0;
    if(m){
      openMin = toMin(+m[1], m[2]);
      closeMin = toMin(+m[3], m[4]);
      open = mins>=openMin && mins<=closeMin;
    }
    pulse.classList.toggle("closed", !open);
    if(open){
      status.textContent = "Open now";
      msg.textContent = "Rolling hot at "+entry.loc+" — "+entry.addr+". Pull up!";
      note.textContent = "📍 Parked: "+entry.loc;
    } else {
      var dir = mins<openMin ? "Opens "+fmt(openMin) : "Closed until tomorrow";
      status.textContent = "Closed";
      msg.textContent = entry.loc+", "+entry.addr+" · "+dir;
      note.textContent = "📍 Next stop: "+entry.loc;
    }
  }
  function toMin(h,ap){ h=h%12; if(ap.toLowerCase()==="p")h+=12; return h*60; }
  function fmt(min){ var h=Math.floor(min/60)%12||12; var ap=min/60>=12?"p":"a"; return h+ap; }
  updateLive(); setInterval(updateLive, 30000);

  /* ---------- cart ---------- */
  var cart = {};
  var fab=document.getElementById("cartFab"), drawer=document.getElementById("drawer"), scrim=document.getElementById("scrim");
  var countEl=document.getElementById("cartCount"), totalEl=document.getElementById("cartTotal"), bodyEl=document.getElementById("drawerBody");

  function findItem(id){ return MENU.filter(function(m){return m.id===id;})[0]; }
  function renderCart(){
    var ids=Object.keys(cart), qty=0, total=0;
    ids.forEach(function(id){ qty+=cart[id]; total+=findItem(id).price*cart[id]; });
    countEl.textContent=qty; totalEl.textContent=money(total);
    if(!ids.length){ bodyEl.innerHTML='<p class="empty">Your tray is empty.<br>Add some tacos above 🌮</p>'; return; }
    bodyEl.innerHTML="";
    ids.forEach(function(id){
      var it=findItem(id), row=el("div","ci");
      row.innerHTML='<div><b>'+it.name+'</b><br><span style="font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft)">'+money(it.price)+' each</span></div>'+
        '<div class="qty"><button data-dec="'+id+'">−</button><span>'+cart[id]+'</span><button data-inc="'+id+'">+</button></div>';
      var rm=el("button","rm","remove"); rm.dataset.rm=id; row.appendChild(rm);
      bodyEl.appendChild(row);
    });
  }
  function bump(btn){ btn.classList.add("added"); var o=btn.textContent; btn.textContent="✓ Added"; setTimeout(function(){btn.classList.remove("added");btn.textContent=o;},900); }

  document.addEventListener("click",function(e){
    var add=e.target.closest("[data-add]");
    if(add){ var id=add.dataset.add; cart[id]=(cart[id]||0)+1; renderCart(); bump(add); return; }
    if(e.target.closest("[data-inc]")){ var i=e.target.closest("[data-inc]").dataset.inc; cart[i]=(cart[i]||0)+1; renderCart(); return; }
    if(e.target.closest("[data-dec]")){ var d=e.target.closest("[data-dec]").dataset.dec; cart[d]=Math.max(0,(cart[d]||0)-1); if(!cart[d])delete cart[d]; renderCart(); return; }
    if(e.target.closest("[data-rm]")){ delete cart[e.target.closest("[data-rm]").dataset.rm]; renderCart(); return; }
    var co=e.target.closest("#checkout");
    if(co){
      if(Object.keys(cart).length){
        co.textContent="Reserved! See you there ✓";
        cart={}; renderCart();
        setTimeout(function(){co.textContent="Reserve pickup →"; closeDrawer();},1600);
      } else {
        co.textContent="Add a taco first!";
        setTimeout(function(){co.textContent="Reserve pickup →";},1200);
      }
    }
  });

  function openDrawer(){ drawer.classList.add("open"); scrim.classList.add("show"); }
  function closeDrawer(){ drawer.classList.remove("open"); scrim.classList.remove("show"); }
  fab.addEventListener("click",openDrawer);
  scrim.addEventListener("click",closeDrawer);
  document.getElementById("drawerClose").addEventListener("click",closeDrawer);
  renderCart();

  /* ---------- smooth scroll buttons ---------- */
  document.querySelectorAll("[data-scroll]").forEach(function(b){
    b.addEventListener("click",function(){
      var t=document.querySelector(b.getAttribute("data-scroll"));
      if(t)t.scrollIntoView({behavior:reduce?"auto":"smooth"});
    });
  });

  /* ---------- nav state + burger ---------- */
  var nav=document.getElementById("nav"), links=document.getElementById("navLinks"), burger=document.getElementById("burger");
  window.addEventListener("scroll",function(){ nav.classList.toggle("scrolled", window.scrollY>10); }, {passive:true});
  burger.addEventListener("click",function(){ links.classList.toggle("open"); burger.classList.toggle("open"); });
  links.querySelectorAll("a").forEach(function(a){ a.addEventListener("click",function(){ links.classList.remove("open"); burger.classList.remove("open"); }); });

  /* ---------- newsletter ---------- */
  var form=document.getElementById("nlForm"), nlMsg=document.getElementById("nlMsg");
  form.addEventListener("submit",function(e){
    e.preventDefault();
    var v=document.getElementById("nlEmail").value.trim();
    if(/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)){
      nlMsg.style.color="var(--lime)";
      nlMsg.textContent="You're in! Check your inbox for the $5 taco code. 🌶️";
      form.reset();
    } else {
      nlMsg.style.color="#ff9a8f";
      nlMsg.textContent="Hmm, that email looks off — try again?";
    }
  });

  /* ---------- reveal observer ---------- */
  var reveals=document.querySelectorAll(".reveal");
  if(reduce || !("IntersectionObserver" in window)){
    reveals.forEach(function(r){r.classList.add("in");});
  } else {
    var io=new IntersectionObserver(function(entries){
      entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add("in"); io.unobserve(en.target); } });
    },{threshold:.12, rootMargin:"0px 0px -40px 0px"});
    reveals.forEach(function(r){io.observe(r);});
  }

  /* ---------- scramble decode titles ---------- */
  function scramble(node){
    var final=node.getAttribute("data-text")||node.textContent;
    if(reduce){ node.textContent=final; return; }
    var chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ가나다라마바사#%&*", frame=0, total=final.length*3;
    var iv=setInterval(function(){
      var out="";
      for(var i=0;i<final.length;i++){
        if(i*3 < frame){ out+=final[i]; }
        else if(final[i]===" "){ out+=" "; }
        else { out+=chars[Math.floor(Math.random()*chars.length)]; }
      }
      node.textContent=out; frame++;
      if(frame>total){ clearInterval(iv); node.textContent=final; }
    },40);
  }
  document.querySelectorAll(".scramble").forEach(function(n,i){ setTimeout(function(){scramble(n);}, 200+i*250); });

  /* ---------- confetti ---------- */
  if(!reduce){
    var wrap=document.getElementById("confetti");
    var cols=["#e23a2e","#f4a72c","#a7cf3a","#0f6b62","#2a1710"];
    for(var i=0;i<14;i++){
      var c=document.createElement("i");
      c.style.left=(Math.random()*100)+"%";
      c.style.background=cols[i%cols.length];
      c.style.animationDuration=(6+Math.random()*6)+"s";
      c.style.animationDelay=(-Math.random()*8)+"s";
      c.style.transform="rotate("+(Math.random()*360)+"deg)";
      wrap.appendChild(c);
    }
  }
})();
</script>
</body>
</html>