:root{
    --ink: #3c2c28;
    --ink-soft: #8f7d78;
    --paper: #fffdf8;
    --coral: #ff5c7a;
    --coral-deep: #e23a5c;
    --mint: #33b98b;
    --yellow: #ffc93c;
    --edge: #f1e3da;
    --shadow: rgba(80, 46, 40, 0.18);
  }

  *{ box-sizing:border-box; }

  html,body{ margin:0; padding:0; min-height:100vh; font-family:'Inter',sans-serif; color:var(--ink); }

  body{
    background: linear-gradient(155deg, #ffe7cf 0%, #f8dcf1 45%, #dcf4e6 100%);
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding: 48px 18px;
    position:relative;
    overflow-x:hidden;
  }

  .stage{ position:relative; width:100%; max-width:440px; }

  .card{
    position:relative;
    background: var(--paper);
    border-radius:26px;
    padding: 46px 32px 34px;
    box-shadow: 0 26px 54px -18px var(--shadow), 0 1px 0 rgba(255,255,255,.6) inset;
    transform: rotate(-0.5deg);
    opacity:0;
    animation: riseIn .65s cubic-bezier(.19,1,.22,1) forwards;
  }
  @keyframes riseIn{ to{ opacity:1; transform:rotate(-0.5deg) translateY(0); } }

  .tape{
    position:absolute;
    top:-14px; left:50%;
    width:84px; height:28px;
    margin-left:-42px;
    background: repeating-linear-gradient(45deg, rgba(255,92,122,0.55) 0 8px, rgba(255,255,255,0.55) 8px 16px);
    border-radius:3px;
    box-shadow: 0 3px 6px rgba(60,30,30,0.15);
    transform: rotate(-5deg);
  }

  .kicker{
    display:flex; align-items:center; gap:6px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px;
    color: var(--coral);
    margin:0 0 10px;
  }

  h1{
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size: clamp(27px, 6vw, 32px);
    line-height:1.18;
    margin:0 0 10px;
    color: var(--ink);
  }

  .sub{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 22px; }

  /* ---------- sticker (chroma-keyed video) ---------- */
  .sticker-wrap{ display:flex; justify-content:center; margin: 6px 0 22px; }
  .sticker{
    position:relative;
    filter:
      drop-shadow(0 0 0 #fff)
      drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
      drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
      drop-shadow(0 8px 12px rgba(60,30,30,0.28));
  }
  .sticker canvas, .sticker img{ display:block; width:100%; height:auto; border-radius:8px; }
  .sticker.a{ transform: rotate(-4deg); }
  .sticker.b{ transform: rotate(3deg); }
  .sticker.c{ transform: rotate(-5deg); }

  .self-photo{ margin: 2px 0 4px; }
  .self-tag{ margin-bottom: 18px; }

  .tag{
    display:inline-block;
    margin: -8px auto 0;
    background: #fff;
    border: 1.5px dashed var(--edge);
    color: var(--ink-soft);
    font-size:12px;
    font-weight:600;
    padding:6px 12px;
    border-radius:999px;
  }
  .tag-wrap{ text-align:center; margin-bottom:22px; }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; border:none; border-radius:999px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
    padding:15px 22px; cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .btn:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }

  .btn-primary{
    background: linear-gradient(135deg, var(--coral), var(--coral-deep));
    color:#fff;
    box-shadow: 0 14px 26px -12px rgba(226,58,92,0.55);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -12px rgba(226,58,92,0.6); }
  .btn-primary:active{ transform:translateY(0); }
  .btn:disabled{ cursor:wait; opacity:.72; transform:none; box-shadow:none; }

  .btn-ghost{
    background:transparent; color:var(--ink-soft);
    border:1.5px solid var(--edge);
  }
  .btn-ghost:hover{ background:rgba(0,0,0,0.03); }

  .btn-row{ display:flex; gap:10px; }
  .btn-row .btn-ghost{ flex:0 0 auto; width:auto; padding-left:20px; padding-right:20px; }
  .btn-row .btn-primary{ flex:1; }

  /* decline / runaway "no" */
  .decline-zone{ position:relative; min-height:96px; }
  .decline{
    position:absolute; left:50%; top:6px; transform:translateX(-50%);
    background:none; border:none;
    font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink-soft);
    text-decoration:underline; text-underline-offset:3px;
    cursor:pointer; padding:6px 10px;
    transition:left .18s ease, top .18s ease;
    z-index:2;
  }
  .peek{
    position:absolute; right:4px; top:30px;
    display:flex; flex-direction:column; align-items:center;
    opacity:0; transform:scale(.75) translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events:none;
  }
  .peek.show{ opacity:1; transform:scale(1) translateY(0); }
  .peek .sticker{ width:76px; }
  .peek .bubble{
    margin-top:2px; background:#fff; border:1.5px dashed var(--edge);
    color:var(--ink-soft); font-size:10.5px; font-weight:600;
    padding:4px 8px; border-radius:999px; white-space:nowrap;
  }

  /* ---------- steps ---------- */
  .steps{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
  .steps .label{ font-size:12.5px; color:var(--mint); font-weight:700; }
  .steps .track{ flex:1; height:4px; background:var(--edge); border-radius:4px; margin-left:14px; overflow:hidden; }
  .steps .fill{ height:100%; background:linear-gradient(90deg,var(--coral),var(--mint)); border-radius:4px; transition:width .4s ease; }

  .icon-badge{
    width:40px; height:40px; border-radius:12px;
    background: linear-gradient(140deg,#fff0e0,#ffe1ea);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; margin-bottom:14px;
  }

  /* corner mascot */
  .mascot{
    position:absolute; right:-10px; bottom:-14px;
    width:70px; z-index:3;
    pointer-events:none;
  }
  .mascot .sticker{ transform: rotate(6deg); }

  /* ---------- form ---------- */
  .field{ margin-bottom:16px; }
  .field label{
    display:block; font-size:12px; font-weight:700; letter-spacing:.02em;
    color:var(--ink-soft); margin-bottom:7px;
  }
  .field input[type="date"], .field input[type="time"], .field input[type="text"]{
    width:100%; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
    background:#fff; border:1.5px solid var(--edge); border-radius:12px; padding:12px 14px;
  }
  .field input:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px; }

  .field-error{
    font-size:11.5px; line-height:1.45; margin:7px 2px 0;
  }
  .field-error{ color:var(--coral-deep); font-weight:600; }
  .pickup-field.has-error input{ border-color:var(--coral-deep); }
  .submission-status{
    margin:10px 4px 0; color:var(--mint); font-size:11.5px;
    font-weight:700; line-height:1.45; text-align:center;
  }
  .submission-status.error{ color:var(--coral-deep); }

  /* ---------- food grid ---------- */
  .food-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:4px 0 24px; }
  .food{
    background:#fff; border:1.5px solid var(--edge); border-radius:14px;
    padding:14px 6px 11px; text-align:center; cursor:pointer; transition:all .15s ease;
    font:inherit; color:inherit; appearance:none; min-height:74px;
  }
  .food .e{ font-size:21px; display:block; margin-bottom:6px; }
  .food .l{ font-size:12px; color:var(--ink-soft); font-weight:600; }
  .food:hover{ border-color:var(--coral); }
  .food.sel{ background:linear-gradient(135deg,var(--coral),var(--coral-deep)); border-color:transparent; }
  .food.sel .l{ color:#fff; }
  .food:focus-visible, .subfood:focus-visible, .custom-food input:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }

  .food-suboptions{
    background:#fff7f4; border:1.5px solid var(--edge); border-radius:14px;
    padding:10px; margin:-12px 0 24px;
  }
  .subfood-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .subfood-grid[hidden], .custom-food[hidden], .food-suboptions[hidden]{ display:none; }
  .subfood{
    border:1.5px solid var(--edge); background:#fff; color:var(--ink-soft);
    border-radius:10px; padding:9px 6px; font-family:'Inter',sans-serif;
    font-size:12px; font-weight:700; cursor:pointer; transition:all .15s ease;
  }
  .subfood:hover{ border-color:var(--coral); color:var(--coral); }
  .subfood.sel{ background:var(--coral); border-color:var(--coral); color:#fff; }
  .custom-food label{
    display:block; margin:0 0 7px 2px; color:var(--ink-soft);
    font-size:12px; font-weight:700;
  }
  .custom-food input{
    width:100%; border:1.5px solid var(--edge); border-radius:10px;
    background:#fff; color:var(--ink); padding:10px 12px;
    font-family:'Inter',sans-serif; font-size:14px;
  }

  /* ---------- cafe ---------- */
  .cafe-spot{
    overflow:hidden; margin:4px 0 16px; background:#fff;
    border:1.5px solid var(--edge); border-radius:14px;
  }
  .cafe-photo{ height:158px; overflow:hidden; }
  .cafe-photo img{
    display:block; width:100%; height:100%; object-fit:cover;
    object-position:center 75%;
  }
  .cafe-info{ padding:11px 14px 13px; }
  .cafe-info strong{
    display:block; margin-bottom:3px; color:var(--ink);
    font-family:'Fredoka',sans-serif; font-size:16px;
  }
  .cafe-info span{ display:block; color:var(--ink-soft); font-size:12px; line-height:1.45; }

  /* ---------- confirmation ---------- */
  .summary{ background:#fff; border:1.5px solid var(--edge); border-radius:16px; padding:16px 18px; margin:0 0 22px; }
  .summary .row{ display:flex; align-items:flex-start; gap:10px; font-size:14px; padding:7px 0; }
  .summary .row + .row{ border-top:1px solid #f5ece5; }
  .summary .row .ico{ font-size:15px; margin-top:1px; }
  .summary .row .txt strong{ display:block; font-weight:700; color:var(--ink); }
  .summary .row .txt span{ color:var(--ink-soft); font-size:12.5px; }

  .signoff{ text-align:center; font-family:'Inter',sans-serif; font-weight:600; color:var(--ink-soft); font-size:13.5px; line-height:1.6; margin-bottom:4px; }

  .change-link{
    display:block; text-align:center; margin-top:14px; font-size:13px; color:var(--ink-soft);
    text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:none;
    font-family:'Inter',sans-serif;
  }

  .screen{ display:none; }
  .screen.active{ display:block; }
  .screen .card{ position:relative; }

  .confetti{
    position:fixed; top:-24px; pointer-events:none; z-index:40;
    animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards;
  }
  @keyframes fall{ to{ transform: translateY(105vh) rotate(420deg); opacity:.9; } }

  @media (prefers-reduced-motion: reduce){
    .card{ animation:none; opacity:1; }
    .confetti{ display:none; }
  }