Models 44

Gemini 4 Argon

by Googlereasoning defaultClean
Open in new window

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

How it went

Total time
4 min 21 s
Cost
$0.201
Output tokens
19,970
Spent thinking
0 tokens
Speed
78.5 tok/s
Console errors
0
First token after
6.7 s
First visible text after
6.7 s
Prompt tokens
406
Code size
53.8 KB
Finish reason
stop
Served by
Google
Model id
google/gemini-4-argon
Reasoning sent
model default
Max output
943,718 tokens
Generated
Nov 12, 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 · 1905 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 — Seoul Soul × Barrio Heat</title>
<style>
  :root {
    --gochujang: #FF2E4C;
    --mango: #FFB800;
    --cilantro: #00E575;
    --char: #0D0C12;
    --char-light: #181622;
    --char-card: #211E2F;
    --cream: #FFF8EE;
    --muted: #A69FB8;
    --neon-pink: #FF369B;
  }

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

  html {
    scroll-behavior: smooth;
    background-color: var(--char);
    color: var(--cream);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    background-image: 
      radial-gradient(circle at 15% 15%, rgba(255, 46, 76, 0.14) 0%, transparent 35%),
      radial-gradient(circle at 85% 30%, rgba(255, 184, 0, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 50% 80%, rgba(0, 229, 117, 0.08) 0%, transparent 45%);
  }

  /* Custom Typography */
  .display-font {
    font-family: "Impact", "Arial Black", "Trebuchet MS", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 0.94;
  }

  /* Top Marquee */
  .marquee-bar {
    background: linear-gradient(90deg, var(--gochujang), #FF6B00, var(--mango), var(--gochujang));
    background-size: 200% 100%;
    animation: gradientShift 8s linear infinite;
    color: var(--char);
    font-weight: 900;
    font-size: 0.82rem;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 2px solid var(--char);
    position: relative;
    z-index: 100;
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  .marquee-track {
    display: inline-block;
    animation: scrollText 24s linear infinite;
  }

  .marquee-track span {
    margin: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.06em;
  }

  @keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Navigation */
  nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(13, 12, 18, 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 248, 238, 0.1);
    padding: 14px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--cream);
  }

  .brand-logo {
    width: 42px;
    height: 42px;
    background: var(--gochujang);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.4rem;
    box-shadow: 3px 3px 0px var(--mango);
    transform: rotate(-4deg);
    transition: transform 0.2s;
  }

  .brand:hover .brand-logo {
    transform: rotate(6deg) scale(1.06);
  }

  .brand-name {
    font-size: 1.65rem;
    letter-spacing: 0.04em;
  }

  .brand-name span {
    color: var(--mango);
  }

  .brand-ko {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 7px;
    border-radius: 4px;
    color: var(--cilantro);
    font-weight: 700;
  }

  .nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
  }

  .nav-links a {
    color: var(--cream);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
  }

  .nav-links a:hover {
    color: var(--mango);
  }

  .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 229, 117, 0.14);
    border: 1px solid var(--cilantro);
    color: var(--cilantro);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--cilantro);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cilantro);
    animation: pulse 1.4s infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.4; }
  }

  .cart-btn {
    background: var(--mango);
    color: var(--char);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 4px 4px 0 var(--gochujang);
    transition: transform 0.15s, box-shadow 0.15s;
  }

  .cart-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--gochujang);
  }

  .cart-count {
    background: var(--char);
    color: var(--mango);
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 0.8rem;
  }

  /* Hero Section */
  .hero {
    padding: 40px 5% 65px;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 36px;
    align-items: center;
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
  }

  .hero-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
  }

  .street-tag {
    background: var(--char-card);
    border: 1.5px solid var(--mango);
    color: var(--mango);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .street-tag.hot {
    border-color: var(--gochujang);
    color: #FF758B;
    background: rgba(255, 46, 76, 0.14);
  }

  .hero h1 {
    font-size: clamp(3.1rem, 6vw, 5.4rem);
    margin-bottom: 18px;
    text-shadow: 5px 5px 0px rgba(255, 46, 76, 0.35);
  }

  .hero h1 .stroke-word {
    color: var(--mango);
    display: inline-block;
    transform: rotate(-1.5deg);
    background: var(--gochujang);
    color: var(--cream);
    padding: 2px 14px 6px;
    border-radius: 8px;
    box-shadow: 5px 5px 0 var(--mango);
    margin: 4px 0;
  }

  .hero h1 .green-word {
    color: var(--cilantro);
  }

  .hero-sub {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #DFD9EC;
    max-width: 560px;
    margin-bottom: 26px;
  }

  .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 28px;
  }

  .btn-primary {
    background: var(--gochujang);
    color: var(--cream);
    font-weight: 900;
    font-size: 1.08rem;
    padding: 16px 28px;
    border-radius: 12px;
    border: 2px solid var(--cream);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 6px 6px 0 var(--mango);
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .btn-primary:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--mango);
    background: #ff193b;
  }

  .btn-secondary {
    background: var(--char-card);
    color: var(--cream);
    font-weight: 800;
    font-size: 1rem;
    padding: 16px 22px;
    border-radius: 12px;
    border: 2px solid rgba(255, 248, 238, 0.25);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
  }

  .btn-secondary:hover {
    border-color: var(--cilantro);
    color: var(--cilantro);
    transform: translateY(-2px);
  }

  /* Live Truck Status Card inside Hero */
  .live-tracker-mini {
    background: linear-gradient(135deg, rgba(33, 30, 47, 0.95), rgba(24, 22, 34, 0.95));
    border: 2px solid rgba(255, 184, 0, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    max-width: 560px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }

  .truck-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 184, 0, 0.15);
    border: 1px solid var(--mango);
    display: grid;
    place-items: center;
    font-size: 1.7rem;
  }

  .tracker-info h4 {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cilantro);
    margin-bottom: 3px;
  }

  .tracker-info p {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--cream);
  }

  .tracker-info span {
    font-size: 0.82rem;
    color: var(--muted);
  }

  .wait-box {
    text-align: right;
    background: rgba(255, 46, 76, 0.15);
    border: 1px solid var(--gochujang);
    padding: 8px 12px;
    border-radius: 10px;
  }

  .wait-box strong {
    display: block;
    font-size: 1.15rem;
    color: var(--mango);
  }

  .wait-box small {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--cream);
  }

  /* Hero Visual Stage */
  .hero-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .neon-halo {
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: conic-gradient(from 90deg, var(--gochujang), var(--mango), var(--cilantro), var(--neon-pink), var(--gochujang));
    filter: blur(55px);
    opacity: 0.35;
    animation: spinSlow 14s linear infinite;
  }

  @keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .taco-showcase-card {
    position: relative;
    z-index: 2;
    background: radial-gradient(circle at 50% 35%, #2e2640, #161321);
    border: 3px solid var(--cream);
    border-radius: 28px;
    padding: 24px;
    width: 100%;
    max-width: 470px;
    box-shadow: 12px 12px 0px var(--gochujang);
    transform: rotate(1.5deg);
    transition: transform 0.3s ease;
  }

  .taco-showcase-card:hover {
    transform: rotate(0deg) scale(1.02);
  }

  .floating-sticker {
    position: absolute;
    background: var(--mango);
    color: var(--char);
    font-weight: 900;
    font-size: 0.82rem;
    padding: 10px 14px;
    border-radius: 999px;
    border: 2px solid var(--char);
    box-shadow: 4px 4px 0 var(--char);
    text-transform: uppercase;
    z-index: 5;
    animation: floatBob 3s ease-in-out infinite;
  }

  .sticker-top {
    top: -16px;
    right: -12px;
    background: var(--cilantro);
    transform: rotate(8deg);
  }

  .sticker-bottom {
    bottom: 72px;
    left: -18px;
    background: var(--mango);
    animation-delay: 1.2s;
    transform: rotate(-7deg);
  }

  @keyframes floatBob {
    0%, 100% { transform: translateY(0) rotate(6deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
  }

  .taco-svg-wrap {
    width: 100%;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .steam-line {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: steamRise 2.6s ease-in-out infinite;
  }
  .steam-line:nth-child(2) { animation-delay: 0.8s; }
  .steam-line:nth-child(3) { animation-delay: 1.6s; }

  @keyframes steamRise {
    0% { stroke-dashoffset: 40; opacity: 0; transform: translateY(6px); }
    50% { opacity: 0.85; }
    100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-14px); }
  }

  .showcase-caption {
    border-top: 2px dashed rgba(255, 248, 238, 0.2);
    padding-top: 14px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .showcase-caption h3 {
    font-size: 1.35rem;
    color: var(--mango);
  }

  .showcase-caption p {
    font-size: 0.85rem;
    color: #cfc8e0;
  }

  .quick-add-hero {
    background: var(--gochujang);
    color: var(--cream);
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 3px 3px 0 var(--mango);
  }

  .quick-add-hero:hover {
    background: #ff4762;
  }

  /* Section Headers */
  section {
    padding: 70px 5%;
    max-width: 1360px;
    margin: 0 auto;
  }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 36px;
  }

  .section-head h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  }

  .section-head h2 span {
    color: var(--mango);
  }

  .eyebrow {
    color: var(--gochujang);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.84rem;
    margin-bottom: 8px;
    display: block;
  }

  /* Filter Controls + Scoville Meter */
  .controls-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    background: var(--char-light);
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .filter-btn {
    background: var(--char-card);
    color: var(--cream);
    border: 1.5px solid transparent;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
  }

  .filter-btn:hover {
    border-color: var(--mango);
  }

  .filter-btn.active {
    background: var(--gochujang);
    color: var(--cream);
    border-color: var(--cream);
    box-shadow: 3px 3px 0 var(--mango);
  }

  .heat-dial {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 46, 76, 0.12);
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 46, 76, 0.4);
  }

  .heat-dial label {
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--mango);
  }

  .heat-levels {
    display: flex;
    gap: 6px;
  }

  .heat-chip {
    background: var(--char);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
  }

  .heat-chip.active {
    background: var(--mango);
    color: var(--char);
    border-color: var(--char);
  }

  /* Menu Grid */
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 26px;
  }

  .menu-card {
    background: var(--char-card);
    border: 2px solid rgba(255, 248, 238, 0.12);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
  }

  .menu-card:hover {
    transform: translateY(-6px);
    border-color: var(--mango);
    box-shadow: 8px 8px 0 var(--gochujang);
  }

  .card-top-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .pop-tag {
    background: var(--mango);
    color: var(--char);
    font-weight: 900;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .pop-tag.green {
    background: var(--cilantro);
  }

  .pop-tag.pink {
    background: var(--neon-pink);
    color: var(--cream);
  }

  .chili-meter {
    font-size: 0.88rem;
    letter-spacing: 1px;
  }

  .dish-art {
    height: 130px;
    background: radial-gradient(circle, rgba(255, 184, 0, 0.14) 0%, rgba(13, 12, 18, 0.5) 75%);
    border-radius: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px dashed rgba(255, 248, 238, 0.12);
  }

  .menu-card h3 {
    font-size: 1.45rem;
    margin-bottom: 6px;
    color: var(--cream);
  }

  .menu-card .korean-sub {
    font-size: 0.78rem;
    color: var(--mango);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
  }

  .menu-card p {
    color: #C8C2D6;
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 18px;
  }

  .Sauce-note {
    font-size: 0.76rem;
    background: rgba(255, 46, 76, 0.14);
    color: #FF94A4;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 700;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
  }

  .price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--cilantro);
  }

  .add-btn {
    background: var(--cream);
    color: var(--char);
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .add-btn:hover {
    background: var(--mango);
    transform: scale(1.05);
  }

  /* Interactive Taco Lab */
  .lab-section {
    background: linear-gradient(135deg, #1E192B 0%, #120F1D 100%);
    border: 3px solid var(--mango);
    border-radius: 28px;
    padding: 42px;
    box-shadow: 12px 12px 0 var(--gochujang);
    margin: 30px auto;
  }

  .lab-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: center;
  }

  .step-group {
    margin-bottom: 22px;
  }

  .step-group h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mango);
    margin-bottom: 10px;
  }

  .option-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .opt-pill {
    background: var(--char);
    border: 2px solid rgba(255, 248, 238, 0.18);
    color: var(--cream);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .opt-pill:hover {
    border-color: var(--mango);
  }

  .opt-pill.selected {
    background: var(--gochujang);
    border-color: var(--cream);
    box-shadow: 3px 3px 0 var(--mango);
  }

  .lab-preview {
    background: var(--char);
    border: 2px dashed rgba(255, 184, 0, 0.5);
    border-radius: 22px;
    padding: 28px;
    text-align: center;
    position: relative;
  }

  .flavor-score-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--cilantro);
    color: var(--char);
    font-weight: 900;
    font-size: 0.76rem;
    padding: 5px 10px;
    border-radius: 99px;
  }

  .custom-taco-title {
    font-size: 1.6rem;
    color: var(--mango);
    margin: 10px 0 6px;
  }

  .custom-taco-desc {
    font-size: 0.88rem;
    color: var(--muted);
    min-height: 40px;
    margin-bottom: 18px;
  }

  /* Truck Finder & Schedule */
  .finder-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
  }

  .radar-map {
    background: #12151F;
    border: 2px solid rgba(0, 229, 117, 0.4);
    border-radius: 22px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .map-grid-lines {
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(to right, rgba(0, 229, 117, 0.07) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 229, 117, 0.07) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
  }

  .map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s;
  }

  .map-pin:hover {
    transform: translate(-50%, -50%) scale(1.15);
  }

  .pin-bubble {
    background: var(--char);
    border: 2px solid var(--mango);
    color: var(--cream);
    padding: 6px 11px;
    border-radius: 99px;
    font-weight: 900;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .map-pin.active .pin-bubble {
    background: var(--gochujang);
    border-color: var(--cream);
    box-shadow: 0 0 20px rgba(255, 46, 76, 0.8);
  }

  .schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stop-card {
    background: var(--char-card);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s;
  }

  .stop-card:hover, .stop-card.active {
    border-color: var(--cilantro);
    background: rgba(0, 229, 117, 0.08);
    transform: translateX(4px);
  }

  .stop-day {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--mango);
    letter-spacing: 0.08em;
  }

  .stop-hood {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 2px 0;
  }

  .stop-addr {
    font-size: 0.84rem;
    color: var(--muted);
  }

  .stop-time {
    text-align: right;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--cilantro);
  }

  /* Slide-over Order Drawer */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .order-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: var(--char-light);
    border-left: 3px solid var(--mango);
    z-index: 210;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .order-drawer.open {
    transform: translateX(0);
  }

  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 16px;
  }

  .close-drawer {
    background: var(--char-card);
    color: var(--cream);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
  }

  .cart-items {
    flex: 1;
    overflow-y: auto;
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cart-row {
    background: var(--char-card);
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.07);
  }

  .cart-row-title {
    font-weight: 800;
    font-size: 0.95rem;
  }

  .cart-row-sub {
    font-size: 0.78rem;
    color: var(--mango);
  }

  .qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .qty-btn {
    background: var(--char);
    color: var(--cream);
    border: 1px solid rgba(255,255,255,0.2);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 900;
  }

  .drawer-footer {
    border-top: 2px solid rgba(255,255,255,0.1);
    padding-top: 16px;
  }

  .total-line {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 14px;
  }

  .checkout-btn {
    width: 100%;
    background: var(--cilantro);
    color: var(--char);
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1.05rem;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--mango);
  }

  /* Toast Notification */
  .toast {
    position: fixed;
    bottom: 26px;
    right: 26px;
    background: var(--cilantro);
    color: var(--char);
    font-weight: 900;
    padding: 14px 22px;
    border-radius: 12px;
    border: 2px solid var(--char);
    box-shadow: 6px 6px 0 var(--gochujang);
    z-index: 300;
    transform: translateY(120px);
    transition: transform 0.25s ease;
  }

  .toast.show {
    transform: translateY(0);
  }

  /* Footer */
  footer {
    border-top: 2px solid rgba(255, 248, 238, 0.1);
    padding: 45px 5% 60px;
    text-align: center;
    color: var(--muted);
    background: #09080D;
  }

  /* Responsive */
  @media (max-width: 960px) {
    .hero, .lab-grid, .finder-grid {
      grid-template-columns: 1fr;
    }
    .nav-links {
      display: none;
    }
    .lab-section {
      padding: 26px 20px;
    }
  }
</style>
</head>
<body>

  <!-- Sizzling Top Marquee -->
  <div class="marquee-bar">
    <div class="marquee-track">
      <span>🔥 GRAND OPENING WEEK IN DTLA & K-TOWN</span>
      <span>🌮 36-HR SOY-GARLIC SHORT RIB</span>
      <span>🥬 HOUSE-FERMENTED MOTHER KIMCHI</span>
      <span>⚡ CORN TORTILLAS PRESSED TO ORDER</span>
      <span>🌶️ FREE GOCHUJANG CHURRO WITH ANY 3-TACO COMBO</span>
      <span>🔥 GRAND OPENING WEEK IN DTLA & K-TOWN</span>
      <span>🌮 36-HR SOY-GARLIC SHORT RIB</span>
      <span>🥬 HOUSE-FERMENTED MOTHER KIMCHI</span>
      <span>⚡ CORN TORTILLAS PRESSED TO ORDER</span>
      <span>🌶️ FREE GOCHUJANG CHURRO WITH ANY 3-TACO COMBO</span>
    </div>
  </div>

  <!-- Sticky Navigation -->
  <nav>
    <a href="#" class="brand">
      <div class="brand-logo display-font">KL</div>
      <div>
        <div class="brand-name display-font">KIMCHI <span>LOCO</span></div>
      </div>
      <span class="brand-ko">김치 로코</span>
    </a>

    <div class="nav-links">
      <a href="#menu">The Menu</a>
      <a href="#lab">Taco Lab</a>
      <a href="#finder">Truck Radar</a>
      <div class="live-pill">
        <span class="pulse-dot"></span>
        GRILL HOT NOW • K-TOWN
      </div>
    </div>

    <button class="cart-btn" id="openCartBtn">
      <span>🥡 SKIP THE LINE</span>
      <span class="cart-count" id="cartCount">2</span>
    </button>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <div class="hero-copy">
      <div class="hero-badge-row">
        <span class="street-tag hot">🔥 L.A.'S WILDEST K-MEX TRUCK</span>
        <span class="street-tag">✨ HIERLOOM MASA × SEOUL BBQ</span>
      </div>

      <h1 class="display-font">
        SEOUL SOUL.<br>
        <span class="stroke-word">BARRIO HEAT.</span><br>
        ZERO <span class="green-word">APOLOGIES.</span>
      </h1>

      <p class="hero-sub">
        Charcoal-kissed Korean Galbi & crispy pork belly smashed onto hand-pressed blue corn tortillas, drowned in smoky gochujang crema and 60-day fermented kimchi slaw.
      </p>

      <div class="hero-cta-group">
        <a href="#menu" class="btn-primary">
          <span>🔥 SMASH THE MENU</span>
        </a>
        <a href="#finder" class="btn-secondary">
          <span>📍 TRACK THE TRUCK</span>
        </a>
      </div>

      <!-- Live Truck Tracker Mini Card -->
      <div class="live-tracker-mini">
        <div class="truck-icon-badge">🚚</div>
        <div class="tracker-info">
          <h4>● SERVING RIGHT NOW (UNTIL 2:00 AM)</h4>
          <p id="heroSpotName">6th & Normandie — Koreatown Lot</p>
          <span>Next Stop: Arts District Brewing @ 9PM</span>
        </div>
        <div class="wait-box">
          <strong>~6 MIN</strong>
          <small>Order Wait</small>
        </div>
      </div>
    </div>

    <!-- Hero Visual Stage -->
    <div class="hero-stage">
      <div class="neon-halo"></div>
      <div class="taco-showcase-card">
        <div class="floating-sticker sticker-top">⚡ VOTED #1 LATE NIGHT BITE</div>
        <div class="floating-sticker sticker-bottom">🌶️ 100% WOOD-FIRED GALBI</div>

        <div class="taco-svg-wrap">
          <!-- Custom Illustrated Loaded K-Taco SVG -->
          <svg viewBox="0 0 420 280" width="100%" height="100%">
            <defs>
              <linearGradient id="tortillaGrad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#F6B245"/>
                <stop offset="60%" stop-color="#D9821E"/>
                <stop offset="100%" stop-color="#8B480B"/>
              </linearGradient>
              <linearGradient id="kimchiGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#FF3B56"/>
                <stop offset="100%" stop-color="#B00E26"/>
              </linearGradient>
            </defs>

            <!-- Steam wisps -->
            <path class="steam-line" d="M140 55 Q130 35 145 18" stroke="#FFF8EE" stroke-width="3.5" fill="none" stroke-linecap="round"/>
            <path class="steam-line" d="M210 45 Q225 25 208 8" stroke="#FFB800" stroke-width="4" fill="none" stroke-linecap="round"/>
            <path class="steam-line" d="M280 58 Q292 36 276 18" stroke="#FF2E4C" stroke-width="3.5" fill="none" stroke-linecap="round"/>

            <!-- Shadow Plate -->
            <ellipse cx="210" cy="245" rx="165" ry="20" fill="rgba(0,0,0,0.55)"/>

            <!-- Back Tortilla Rim -->
            <path d="M55 195 C65 75, 355 75, 365 195 Z" fill="#9E5611" stroke="#FFF8EE" stroke-width="3"/>

            <!-- Cilantro & Slaw explosion -->
            <circle cx="115" cy="120" r="26" fill="#00E575"/>
            <circle cx="155" cy="100" r="28" fill="#00C462"/>
            <circle cx="265" cy="102" r="28" fill="#00E575"/>
            <circle cx="310" cy="128" r="24" fill="#00C462"/>

            <!-- Caramelized Short Rib Chunks -->
            <rect x="115" y="112" width="52" height="42" rx="14" fill="#4A1C17" stroke="#FF7733" stroke-width="2.5" transform="rotate(-12 135 130)"/>
            <rect x="172" y="98" width="64" height="48" rx="16" fill="#3B1410" stroke="#FF9900" stroke-width="2.5" transform="rotate(5 200 120)"/>
            <rect x="235" y="110" width="56" height="44" rx="14" fill="#4A1C17" stroke="#FF5522" stroke-width="2.5" transform="rotate(14 260 130)"/>

            <!-- Fiery Kimchi Ribbons -->
            <path d="M130 130 Q160 85 195 128 T265 122" fill="none" stroke="url(#kimchiGrad)" stroke-width="18" stroke-linecap="round"/>
            <path d="M100 148 Q150 112 215 142 T315 142" fill="none" stroke="#FF2E4C" stroke-width="14" stroke-linecap="round"/>

            <!-- Front Blistered Corn Tortilla Shell -->
            <path d="M48 205 C68 102, 352 102, 372 205 C330 238, 90 238, 48 205 Z" fill="url(#tortillaGrad)" stroke="#FFF8EE" stroke-width="4"/>

            <!-- Char Blister Spots on Tortilla -->
            <ellipse cx="125" cy="185" rx="14" ry="7" fill="#3B1D06" opacity="0.65" transform="rotate(-10 125 185)"/>
            <ellipse cx="215" cy="196" rx="18" ry="8" fill="#3B1D06" opacity="0.65"/>
            <ellipse cx="295" cy="180" rx="12" ry="6" fill="#3B1D06" opacity="0.65" transform="rotate(15 295 180)"/>

            <!-- Gochujang Mayo Drizzle -->
            <path d="M88 158 Q115 110 138 168 T188 162 T238 170 T288 160 T330 168" fill="none" stroke="#FFF8EE" stroke-width="6" stroke-linecap="round"/>
            <path d="M94 162 Q120 114 143 172 T193 166 T243 174 T293 164 T326 170" fill="none" stroke="#FFB800" stroke-width="4" stroke-linecap="round"/>

            <!-- Sesame Seeds & Lime Wedge -->
            <circle cx="170" cy="120" r="2.8" fill="#FFF8EE"/>
            <circle cx="205" cy="112" r="2.8" fill="#FFF8EE"/>
            <circle cx="222" cy="125" r="2.8" fill="#FFF8EE"/>
            <circle cx="250" cy="116" r="2.8" fill="#FFF8EE"/>

            <!-- Lime Wedge -->
            <g transform="translate(325, 190) rotate(-20)">
              <path d="M0 0 A34 34 0 0 0 68 0 Z" fill="#00E575" stroke="#FFF8EE" stroke-width="3"/>
              <path d="M6 0 A28 28 0 0 0 62 0 Z" fill="#B8FF66"/>
            </g>
          </svg>
        </div>

        <div class="showcase-caption">
          <div>
            <h3 class="display-font">THE OG SEOUL-CAL GALBI</h3>
            <p>Double-charred short rib, kimchi slaw, crispy garlic</p>
          </div>
          <button class="quick-add-hero" onclick="addToCart('The OG Seoul-Cal Galbi', 5.50)">+ ADD $5.50</button>
        </div>
      </div>
    </div>
  </header>

  <!-- Menu Section -->
  <section id="menu">
    <div class="section-head">
      <div>
        <span class="eyebrow">🔥 STRAIGHT OFF THE PLANCHA</span>
        <h2 class="display-font">THE STREET <span>LINEUP</span></h2>
      </div>
      <p style="color: var(--muted); max-width: 390px;">
        All tacos served on heirloom blue & yellow masa pressed fresh on the truck. Make any item a Kimchi Fried Rice Burrito for +$4.
      </p>
    </div>

    <!-- Interactive Category & Spice Dial -->
    <div class="controls-bar">
      <div class="filter-tabs" id="categoryTabs">
        <button class="filter-btn active" data-cat="all">ALL CRAVINGS</button>
        <button class="filter-btn" data-cat="tacos">LOCO TACOS</button>
        <button class="filter-btn" data-cat="loaded">LOADED BOMBS</button>
        <button class="filter-btn" data-cat="sides">DRINKS & SWEETS</button>
      </div>

      <div class="heat-dial">
        <label>🌶️ DIAL YOUR HEAT:</label>
        <div class="heat-levels" id="heatSelector">
          <button class="heat-chip" data-heat="1">1 • SEOUL BREEZE</button>
          <button class="heat-chip active" data-heat="2">2 • K-TOWN KICK</button>
          <button class="heat-chip" data-heat="3">3 • LOCO INFERNO</button>
        </div>
      </div>
    </div>

    <!-- Dynamic Menu Grid -->
    <div class="menu-grid" id="menuGrid"></div>
  </section>

  <!-- Interactive Taco Lab -->
  <section id="lab">
    <div class="lab-section">
      <div class="lab-grid">
        <div>
          <span class="eyebrow">🧪 CUSTOM K-MEX ARCHITECT</span>
          <h2 class="display-font" style="font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 10px;">
            BUILD YOUR DREAM <span style="color: var(--mango);">LOCO TACO</span>
          </h2>
          <p style="color: #D2CBE3; margin-bottom: 24px;">
            Mix & match our 36-hour marinades, house ferments, and drizzles. We'll torch it to order.
          </p>

          <div class="step-group">
            <h4>1. PICK YOUR SHELL ($4.75 BASE)</h4>
            <div class="option-pills" data-group="shell">
              <button class="opt-pill selected" data-name="Heirloom Blue Corn" data-price="0">🌽 Pressed Blue Masa</button>
              <button class="opt-pill" data-name="Griddled Queso Costra" data-price="1.25">🧀 Crispy Cheese Costra (+$1.25)</button>
              <button class="opt-pill" data-name="Puffy Scallion Pancake" data-price="1.50">🥞 Scallionajeon Shell (+$1.50)</button>
            </div>
          </div>

          <div class="step-group">
            <h4>2. KOREAN FIRE PROTEIN</h4>
            <div class="option-pills" data-group="protein">
              <button class="opt-pill selected" data-name="Charred Galbi Short Rib" data-price="1.50">🥩 Galbi Short Rib (+$1.50)</button>
              <button class="opt-pill" data-name="Spicy Gochujang Pork Belly" data-price="1.00">🥓 Daeji Bulgogi Pork (+$1.00)</button>
              <button class="opt-pill" data-name="Sweet Soy Fried Chicken" data-price="1.00">🍗 Gangjeong Crispy Chicken (+$1.00)</button>
              <button class="opt-pill" data-name="Crispy Gochujang Tofu" data-price="0.50">🌱 Crispy Dubu (+$0.50)</button>
            </div>
          </div>

          <div class="step-group">
            <h4>3. FERMENT & CRUNCH</h4>
            <div class="option-pills" data-group="crunch">
              <button class="opt-pill selected" data-name="60-Day Mother Kimchi" data-price="0">🥬 Caramelized Kimchi</button>
              <button class="opt-pill" data-name="Pickled Daikon & Serrano" data-price="0">⚡ Pickled Radish & Serrano</button>
              <button class="opt-pill" data-name="Sesame Perilla Slaw" data-price="0.50">🌿 Sesame Perilla Crunch (+$0.50)</button>
            </div>
          </div>

          <div class="step-group">
            <h4>4. SIGNATURE DRIZZLE</h4>
            <div class="option-pills" data-group="sauce">
              <button class="opt-pill selected" data-name="Smoky Gochujang Crema" data-price="0">🌶️ Gochujang Crema</button>
              <button class="opt-pill" data-name="Roasted Black Garlic Aioli" data-price="0">🧄 Black Garlic Aioli</button>
              <button class="opt-pill" data-name="Yuzu Habanero Venom" data-price="0.50">🔥 Yuzu Habanero (+$0.50)</button>
            </div>
          </div>
        </div>

        <!-- Live Customizer Preview -->
        <div class="lab-preview">
          <span class="flavor-score-badge" id="labScore">🔥 99% FLAVOR FREAK MATCH</span>
          <div style="font-size: 4.4rem; margin: 12px 0;" id="labEmoji">🌮🔥🥩</div>
          <h3 class="display-font custom-taco-title" id="labTitle">THE CUSTOM LOCO</h3>
          <p class="custom-taco-desc" id="labSummary">
            Heirloom Blue Corn loaded with Charred Galbi Short Rib, 60-Day Mother Kimchi & Smoky Gochujang Crema.
          </p>
          <div style="font-size: 2.2rem; font-weight: 900; color: var(--cilantro); margin-bottom: 18px;" id="labPrice">
            $6.25
          </div>
          <button class="btn-primary" style="width: 100%; justify-content: center;" id="addCustomBtn">
            🚀 THROW ON THE GRILL
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Live Truck Radar & Weekly Schedule -->
  <section id="finder">
    <div class="section-head">
      <div>
        <span class="eyebrow">📡 FOLLOW THE SMOKE</span>
        <h2 class="display-font">LIVE TRUCK <span>RADAR</span></h2>
      </div>
      <p style="color: var(--muted);">Click any stop to preview parking tips, secret late-night drops & live wait times.</p>
    </div>

    <div class="finder-grid">
      <!-- Interactive stylized L.A. Street Radar -->
      <div class="radar-map" id="radarMap">
        <div class="map-grid-lines"></div>

        <div style="position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center;">
          <span class="live-pill"><span class="pulse-dot"></span> GPS LOCKED: LOS ANGELES</span>
          <span style="font-size: 0.78rem; color: var(--muted); font-weight: 700;">TAP PINS TO INSPECT</span>
        </div>

        <!-- Interactive Map Pins -->
        <div class="map-pin active" style="top: 46%; left: 32%;" data-stop="0">
          <div class="pin-bubble">🚚 K-TOWN (NOW)</div>
        </div>
        <div class="map-pin" style="top: 62%; left: 68%;" data-stop="1">
          <div class="pin-bubble">🍺 ARTS DISTRICT</div>
        </div>
        <div class="map-pin" style="top: 28%; left: 54%;" data-stop="2">
          <div class="pin-bubble">🌙 SILVER LAKE</div>
        </div>
        <div class="map-pin" style="top: 74%; left: 24%;" data-stop="3">
          <div class="pin-bubble">🌊 VENICE FIRST FRI</div>
        </div>

        <!-- Selected Pin Inspector Box -->
        <div style="position: relative; z-index: 4; background: rgba(13, 12, 18, 0.92); border: 2px solid var(--mango); border-radius: 16px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
          <div>
            <div style="font-size: 0.75rem; font-weight: 900; color: var(--cilantro);" id="mapBoxStatus">● GRILL HOT RIGHT NOW</div>
            <div style="font-size: 1.25rem; font-weight: 900;" id="mapBoxTitle">Koreatown — 6th & Normandie Lot</div>
            <div style="font-size: 0.84rem; color: var(--muted);" id="mapBoxPerks">Secret Item Tonight: Birria-Kimchi Ramen Cup ($9)</div>
          </div>
          <button class="cart-btn" onclick="openDrawer()">ORDER FOR PICKUP →</button>
        </div>
      </div>

      <!-- Weekly Stop Cards -->
      <div class="schedule-list" id="scheduleList">
        <div class="stop-card active" data-stop="0">
          <div>
            <div class="stop-day">TONIGHT • THU (LIVE NOW)</div>
            <div class="stop-hood">Koreatown — 6th & Normandie</div>
            <div class="stop-addr">Behind the neon bowling alley • Free lot parking</div>
          </div>
          <div class="stop-time">6:00 PM – 2:00 AM<br><span style="color: var(--mango);">~6m wait</span></div>
        </div>

        <div class="stop-card" data-stop="1">
          <div>
            <div class="stop-day">FRIDAY NIGHT</div>
            <div class="stop-hood">Arts District Brewing Patio</div>
            <div class="stop-addr">828 Traction Ave • DJ set + Cold Yuzu Lager pairing</div>
          </div>
          <div class="stop-time">5:00 PM – 1:30 AM<br><span style="color: var(--muted);">Pre-order open</span></div>
        </div>

        <div class="stop-card" data-stop="2">
          <div>
            <div class="stop-day">SATURDAY</div>
            <div class="stop-hood">Silver Lake — Sunset Triangle</div>
            <div class="stop-addr">3700 Sunset Blvd • Dog treats & extra Birria-Kimchi</div>
          </div>
          <div class="stop-time">12:00 PM – 12:00 AM<br><span style="color: var(--muted);">Weekend Feast</span></div>
        </div>

        <div class="stop-card" data-stop="3">
          <div>
            <div class="stop-day">SUNDAY POP-UP</div>
            <div class="stop-hood">Smorgasburg ROW DTLA / Abbot Kinney</div>
            <div class="stop-addr">777 S Alameda St • Exclusive Lobster Kimchi Taco</div>
          </div>
          <div class="stop-time">10:00 AM – 4:00 PM<br><span style="color: var(--muted);">Sells out fast</span></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Slide-Over Pre-Order Bag -->
  <div class="drawer-backdrop" id="drawerBackdrop"></div>
  <aside class="order-drawer" id="orderDrawer">
    <div>
      <div class="drawer-header">
        <div>
          <span style="font-size: 0.75rem; color: var(--cilantro); font-weight: 900;">⚡ PICKUP AT K-TOWN WINDOW</span>
          <h3 class="display-font" style="font-size: 1.7rem;">YOUR LOCO BAG</h3>
        </div>
        <button class="close-drawer" id="closeDrawerBtn">✕</button>
      </div>

      <div class="cart-items" id="cartItemsContainer"></div>
    </div>

    <div class="drawer-footer">
      <div style="background: rgba(255, 184, 0, 0.12); border: 1px dashed var(--mango); padding: 10px 12px; border-radius: 10px; font-size: 0.8rem; color: var(--mango); margin-bottom: 14px; font-weight: 700;">
        🎁 Free Gochujang Churro unlocked at $18+!
      </div>
      <div class="total-line">
        <span>WINDOW TOTAL</span>
        <span id="cartTotal" style="color: var(--cilantro);">$14.00</span>
      </div>
      <button class="checkout-btn" id="fireOrderBtn">🔥 FIRE MY ORDER TO THE GRILL</button>
    </div>
  </aside>

  <!-- Toast Notification -->
  <div class="toast" id="toastMsg">🌮 Added to your Loco Bag!</div>

  <footer>
    <div class="display-font" style="font-size: 2.2rem; color: var(--cream); margin-bottom: 8px;">
      KIMCHI <span style="color: var(--mango);">LOCO</span> TRUCK
    </div>
    <p style="margin-bottom: 18px;">Born in Koreatown • Pressed in East L.A. • Catering & Late-Night Block Parties Available</p>
    <p style="font-size: 0.8rem;">© 2025 Kimchi Loco Street Kitchen. All Sauces House-Fermented.</p>
  </footer>

  <script>
    // Menu Data
    const menuItems = [
      {
        id: 1,
        name: "OG Seoul-Cal Galbi Taco",
        ko: "갈비 타코 • 36-Hr Marinated Short Rib",
        cat: "tacos",
        price: 5.50,
        badge: "BESTSELLER",
        badgeClass: "",
        chilis: "🌶️🌶️",
        desc: "Flame-charred prime beef short rib bathed in Asian pear & soy-garlic, topped with caramelized mother kimchi, cotija, and gochujang crema.",
        art: "🥩🔥🌮"
      },
      {
        id: 2,
        name: "K-Pop Crispy Pork Belly",
        ko: "삼겹살 타코 • Gochujang Glazed",
        cat: "tacos",
        price: 5.25,
        badge: "CRISPY AF",
        badgeClass: "pink",
        chilis: "🌶️🌶️🌶️",
        desc: "Double-seared pork belly glazed in honey-gochujang, pickled jalapeño daikon crunch, charred pineapple salsa, and cilantro lime.",
        art: "🥓🍍🌶️"
      },
      {
        id: 3,
        name: "Seoul Hot Honey Chicken",
        ko: "양념 치킨 • Twice-Fried Crunch",
        cat: "tacos",
        price: 5.00,
        badge: "CROWD FAV",
        badgeClass: "green",
        chilis: "🌶️🌶️",
        desc: "Shatter-crisp potato-starch fried chicken tossed in sweet garlic gangjeong glaze, sesame slaw, and roasted black garlic ranch.",
        art: "🍗🍯✨"
      },
      {
        id: 4,
        name: "Kimchi Quesabirria Vampiro",
        ko: "김치 비리아 • Crispy Cheese Dipper",
        cat: "loaded",
        price: 8.50,
        badge: "MUST TRY",
        badgeClass: "",
        chilis: "🌶️🌶️🌶️",
        desc: "Oaxaca & mozzarella cheese crusted blue corn tortilla stuffed with gochujang-braised beef birria & aged kimchi. Served with hot bone consommé.",
        art: "🧀🥩🍲"
      },
      {
        id: 5,
        name: "LA Dirty Kimchi Fries",
        ko: "김치 프라이 • Shareable Monster",
        cat: "loaded",
        price: 12.50,
        badge: "LATE NIGHT KING",
        badgeClass: "pink",
        chilis: "🌶️🌶️",
        desc: "Beer-battered crinkle fries buried under charred bulgogi ribeye, kimchi queso blanco, sriracha mayo, scallions, and a runny fried egg.",
        art: "🍟🍳🔥"
      },
      {
        id: 6,
        name: "Crispy Gochujang Tofu Taco",
        ko: "두부 타코 • 100% Plant Power",
        cat: "tacos",
        price: 4.75,
        badge: "VEGAN FIRE",
        badgeClass: "green",
        chilis: "🌶️🌶️",
        desc: "Puffed non-GMO tofu wok-blistered in sweet chili glaze, vegan white kimchi slaw, avocado mousse, and toasted sesame seeds.",
        art: "🌱🥑🌮"
      },
      {
        id: 7,
        name: "Gochujang Dulce Churros",
        ko: "고추장 추로스 • Sweet & Spicy Dust",
        cat: "sides",
        price: 6.00,
        badge: "SWEET HEAT",
        badgeClass: "",
        chilis: "🌶️",
        desc: "Fresh-fried crunchy churros dusted in cinnamon, Korean sun-dried chili sugar, and black sesame. Served with warm condensed milk dip.",
        art: "🥖🍫✨"
      },
      {
        id: 8,
        name: "Yuzu Calaman-See Horchata",
        ko: "유자 오르차타 • House Agua Fresca",
        cat: "sides",
        price: 4.50,
        badge: "ICE COLD",
        badgeClass: "green",
        chilis: "❄️",
        desc: "Creamy toasted rice & cinnamon horchata spiked with bright Korean yuzu citrus and a toasted sesame rim. Tames any inferno.",
        art: "🥤🍋🧊"
      }
    ];

    let currentCategory = "all";
    let currentHeatLevel = 2;
    const heatNames = {
      1: "Mild Yuzu-Soy Drizzle",
      2: "Signature K-Town Gochujang Kick",
      3: "Loco Ghost-Gochugaru Inferno"
    };

    // Initial Cart State
    let cart = [
      { name: "OG Seoul-Cal Galbi Taco", note: "Heat: K-Town Kick", price: 5.50, qty: 1 },
      { name: "Kimchi Quesabirria Vampiro", note: "With Hot Consommé", price: 8.50, qty: 1 }
    ];

    const menuGrid = document.getElementById("menuGrid");

    function renderMenu() {
      const filtered = currentCategory === "all"
        ? menuItems
        : menuItems.filter(item => item.cat === currentCategory);

      menuGrid.innerHTML = filtered.map(item => `
        <article class="menu-card">
          <div>
            <div class="card-top-badges">
              <span class="pop-tag ${item.badgeClass}">${item.badge}</span>
              <span class="chili-meter">${item.chilis}</span>
            </div>
            <div class="dish-art">
              <span style="font-size: 3.4rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));">${item.art}</span>
            </div>
            <h3 class="display-font">${item.name}</h3>
            <span class="korean-sub">${item.ko}</span>
            <p>${item.desc}</p>
          </div>
          <div>
            <div class="Sauce-note">🌶️ Prepared w/ ${heatNames[currentHeatLevel]}</div>
            <div class="card-footer">
              <span class="price">$${item.price.toFixed(2)}</span>
              <button class="add-btn" onclick="addToCart('${item.name}', ${item.price})">
                <span>+ ADD TO BAG</span>
              </button>
            </div>
          </div>
        </article>
      `).join("");
    }

    // Filter Tab Listeners
    document.querySelectorAll("#categoryTabs .filter-btn").forEach(btn => {
      btn.addEventListener("click", () => {
        document.querySelectorAll("#categoryTabs .filter-btn").forEach(b => b.classList.remove("active"));
        btn.classList.add("active");
        currentCategory = btn.dataset.cat;
        renderMenu();
      });
    });

    // Heat Level Listeners
    document.querySelectorAll("#heatSelector .heat-chip").forEach(chip => {
      chip.addEventListener("click", () => {
        document.querySelectorAll("#heatSelector .heat-chip").forEach(c => c.classList.remove("active"));
        chip.classList.add("active");
        currentHeatLevel = Number(chip.dataset.heat);
        renderMenu();
      });
    });

    // Interactive Taco Lab Logic
    const labState = {
      shell: { name: "Heirloom Blue Corn", price: 0 },
      protein: { name: "Charred Galbi Short Rib", price: 1.50 },
      crunch: { name: "60-Day Mother Kimchi", price: 0 },
      sauce: { name: "Smoky Gochujang Crema", price: 0 }
    };

    function updateLabPreview() {
      const total = 4.75 + labState.shell.price + labState.protein.price + labState.crunch.price + labState.sauce.price;
      document.getElementById("labPrice").textContent = `$${total.toFixed(2)}`;
      document.getElementById("labSummary").textContent =
        `${labState.shell.name} loaded with ${labState.protein.name}, ${labState.crunch.name} & ${labState.sauce.name}.`;
    }

    document.querySelectorAll(".option-pills .opt-pill").forEach(pill => {
      pill.addEventListener("click", () => {
        const group = pill.parentElement.dataset.group;
        pill.parentElement.querySelectorAll(".opt-pill").forEach(p => p.classList.remove("selected"));
        pill.classList.add("selected");
        labState[group] = {
          name: pill.dataset.name,
          price: parseFloat(pill.dataset.price)
        };
        updateLabPreview();
      });
    });

    document.getElementById("addCustomBtn").addEventListener("click", () => {
      const total = 4.75 + labState.shell.price + labState.protein.price + labState.crunch.price + labState.sauce.price;
      const customNote = `${labState.shell.name} + ${labState.crunch.name}`;
      addToCart(`Custom ${labState.protein.name} Taco`, total, customNote);
    });

    // Truck Radar Interactive Pins & Cards
    const stopsData = [
      {
        status: "● GRILL HOT RIGHT NOW (UNTIL 2:00 AM)",
        title: "Koreatown — 6th & Normandie Lot",
        perks: "Secret Item Tonight: Birria-Kimchi Ramen Cup ($9)"
      },
      {
        status: "● TOMORROW NIGHT • 5:00 PM – 1:30 AM",
        title: "Arts District Brewing Patio",
        perks: "Cold Yuzu Lager Pint + 3 Galbi Tacos Combo Available"
      },
      {
        status: "● SATURDAY • 12:00 PM – MIDNIGHT",
        title: "Silver Lake — Sunset Triangle Plaza",
        perks: "Free Kimchi Queso Cup for the first 50 orders!"
      },
      {
        status: "● SUNDAY DAYTIME • 10:00 AM – 4:00 PM",
        title: "Smorgasburg ROW DTLA Pop-Up",
        perks: "Exclusive Butter-Poached Lobster Kimchi Taco Drop"
      }
    ];

    function selectStop(index) {
      document.querySelectorAll(".map-pin").forEach(p => p.classList.toggle("active", Number(p.dataset.stop) === index));
      document.querySelectorAll(".stop-card").forEach(c => c.classList.toggle("active", Number(c.dataset.stop) === index));
      const data = stopsData[index];
      document.getElementById("mapBoxStatus").textContent = data.status;
      document.getElementById("mapBoxTitle").textContent = data.title;
      document.getElementById("mapBoxPerks").textContent = data.perks;
    }

    document.querySelectorAll(".map-pin, .stop-card").forEach(el => {
      el.addEventListener("click", () => selectStop(Number(el.dataset.stop)));
    });

    // Cart & Drawer Functions
    function renderCart() {
      const container = document.getElementById("cartItemsContainer");
      const countEl = document.getElementById("cartCount");
      const totalEl = document.getElementById("cartTotal");

      const totalCount = cart.reduce((sum, i) => sum + i.qty, 0);
      const totalPrice = cart.reduce((sum, i) => sum + i.price * i.qty, 0);

      countEl.textContent = totalCount;
      totalEl.textContent = `$${totalPrice.toFixed(2)}`;

      if (cart.length === 0) {
        container.innerHTML = `<p style="color: var(--muted); text-align:center; margin-top: 40px;">Your bag is empty — load up on Galbi tacos!</p>`;
        return;
      }

      container.innerHTML = cart.map((item, idx) => `
        <div class="cart-row">
          <div>
            <div class="cart-row-title">${item.name}</div>
            <div class="cart-row-sub">${item.note} • $${(item.price * item.qty).toFixed(2)}</div>
          </div>
          <div class="qty-controls">
            <button class="qty-btn" onclick="changeQty(${idx}, -1)">-</button>
            <span style="font-weight:900;">${item.qty}</span>
            <button class="qty-btn" onclick="changeQty(${idx}, 1)">+</button>
          </div>
        </div>
      `).join("");
    }

    function addToCart(name, price, customNote) {
      const note = customNote || `Heat Level ${currentHeatLevel}`;
      const existing = cart.find(i => i.name === name && i.note === note);
      if (existing) {
        existing.qty += 1;
      } else {
        cart.push({ name, price, note, qty: 1 });
      }
      renderCart();
      showToast(`🌮 Added ${name} to bag!`);
    }

    function changeQty(idx, delta) {
      cart[idx].qty += delta;
      if (cart[idx].qty <= 0) cart.splice(idx, 1);
      renderCart();
    }

    function showToast(msg) {
      const toast = document.getElementById("toastMsg");
      toast.textContent = msg;
      toast.classList.add("show");
      setTimeout(() => toast.classList.remove("show"), 2400);
    }

    function openDrawer() {
      document.getElementById("orderDrawer").classList.add("open");
      document.getElementById("drawerBackdrop").classList.add("open");
    }

    function closeDrawer() {
      document.getElementById("orderDrawer").classList.remove("open");
      document.getElementById("drawerBackdrop").classList.remove("open");
    }

    document.getElementById("openCartBtn").addEventListener("click", openDrawer);
    document.getElementById("closeDrawerBtn").addEventListener("click", closeDrawer);
    document.getElementById("drawerBackdrop").addEventListener("click", closeDrawer);

    document.getElementById("fireOrderBtn").addEventListener("click", () => {
      if (cart.length === 0) return;
      cart = [];
      renderCart();
      closeDrawer();
      showToast("🔥 Order #KL-808 Fired! Ready in ~6 mins at K-Town window!");
    });

    // Initialize Page
    renderMenu();
    renderCart();
  </script>
</body>
</html>