/* ============================================================
   PIRIPARA IZAKAYA — reservation web app
   Screens are built directly on the client's poster artwork
   (mock-wrap/mock-inner), with real form controls positioned
   transparently on top of the drawn fields.
   ============================================================ */

:root{
  --ink:#171310;
  --paper:#efe2c4;
  --card:#fbf3e1;
  --red:#c8102e;
  --red-dark:#8c0c22;
  --navy:#1c3a63;
  --gold:#d9a441;
  --whatsapp:#2fae60;
  --muted:#6b5f4e;

  --font-display:'Bungee', system-ui, sans-serif;
  --font-body:'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --hard-shadow: 4px 4px 0 var(--ink);
  --hard-shadow-sm: 3px 3px 0 var(--ink);
  --radius: 12px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  max-width:480px;
  margin-inline:auto;
  min-height:100vh;
  padding-bottom:84px;
  position:relative;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--navy); outline-offset:2px;
}

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink);
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:30;
  border-bottom:3px solid var(--red);
}
.topbar .logo{ height:32px; width:auto; }
.member-chip{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06);
  border:1.5px solid var(--red);
  color:var(--gold);
  border-radius:20px;
  padding:5px 12px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
  white-space:nowrap;
}
.member-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); }
.member-chip.is-member .dot{ background:var(--gold); box-shadow:0 0 6px var(--gold); }

/* ---------- screens ---------- */
main{ padding:16px; }
.screen{ display:none; }
.screen.active{ display:block; animation:fadeUp .35s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.eyebrow{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--red);
  text-align:center;
  margin:26px 0 14px;
}
.eyebrow .jp{ color:var(--ink); opacity:.55; font-family:var(--font-body); margin-left:6px; font-weight:700; }

/* ============================================================
   POSTER ARTWORK + LIVE OVERLAY SYSTEM
   Each mock-wrap holds the client's poster art at its native
   aspect ratio (padding-top trick keeps it responsive at any
   width), with real inputs/buttons positioned as percentages
   of that box so they track the artwork exactly.
   ============================================================ */
.mock-wrap{
  position:relative;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  border:3px solid var(--ink);
  box-shadow:var(--hard-shadow);
}
.mock-inner{
  position:absolute; inset:0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:top center;
}
.mock-crop .mock-inner{ background-size:100% auto; }

.hit{
  position:absolute;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  -webkit-tap-highlight-color:rgba(0,0,0,.08);
}
.wa-btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366;
  border:none; border-radius:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,.08);
  font-family:inherit; font-weight:800; letter-spacing:.3px;
  color:#0b3d1e;
  font-size:clamp(13px, 3.6cqw, 18px);
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.wa-btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.25); }
.wa-btn svg{ width:1.3em; height:1.3em; flex:0 0 auto; }
.ov-input{
  position:absolute;
  box-sizing:border-box;
  margin:0; padding:0 4px;
  background:transparent;
  border:none;
  outline-offset:2px;
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ov-input::placeholder{ color:rgba(23,19,16,.4); font-weight:500; }
select.ov-input{
  appearance:none; -webkit-appearance:none; padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8102e' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
}
.ov-input.invalid{ outline:2.5px solid var(--red); border-radius:4px; background:rgba(200,16,46,.06); }

/* phone field over the member card's dark input box — solid fill hides the printed sample number */
.ov-input.phone-dark{
  color:#f4e4c6; font-weight:700;
  background:#040302; border-radius:6px; padding:0 10px;
}
.ov-input.phone-dark::placeholder{ color:rgba(244,228,198,.35); }

/* solid patch over the artwork's printed sample text — matches box interior */
.ov-input.ov-fill{
  background:#f4dcbb;
  border-radius:4px;
  padding:0 8px;
  color:var(--ink);
}
textarea.ov-input.ov-fill{ padding:6px 8px; line-height:1.4; white-space:normal; }
.ov-input.ov-fill.invalid{ background:#f7d2cd; }

/* ============================================================
   HOME
   ============================================================ */
.hero-wrap{ margin-top:16px; }

.promo-banner{
  display:block; width:100%;
  padding:0; margin-top:14px;
  background:none; border:3px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--hard-shadow);
  overflow:hidden; cursor:pointer;
}
.promo-banner img{ width:100%; display:block; }
.promo-banner:active{ transform:translate(2px,2px); box-shadow:none; }

.patch-label{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-body); font-weight:900; text-transform:uppercase;
  font-size:6.5px; line-height:1.25; letter-spacing:.2px; text-align:center;
  border-radius:2px;
}

/* ---------- operation-hours block ---------- */
.hours-block{
  position:relative;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--hard-shadow);
  overflow:hidden;
  margin-bottom:16px;
  padding-bottom:2px;
}

.ribbon-torn{
  clip-path:polygon(
    0% 100%, 0% 22%, 5% 0%, 10% 22%, 15% 0%, 20% 22%, 25% 0%, 30% 22%, 35% 0%,
    40% 22%, 45% 0%, 50% 22%, 55% 0%, 60% 22%, 65% 0%, 70% 22%, 75% 0%,
    80% 22%, 85% 0%, 90% 22%, 95% 0%, 100% 22%, 100% 100%
  );
}

.hours-ribbon{
  background:var(--red); color:#fff;
  font-family:var(--font-display); font-size:13px; text-align:center;
  padding:14px 14px 8px; margin:0 -2px 0;
  transform:rotate(-1.5deg) scale(1.04);
  position:relative; z-index:2;
}

.hours-headline{
  position:relative; text-align:center; padding:8px 10px 18px;
  background:
    repeating-conic-gradient(from 0deg, rgba(200,16,46,.14) 0deg 6deg, transparent 6deg 16deg),
    var(--paper);
  overflow:hidden;
}
.hours-headline-text{
  font-family:var(--font-display); font-size:36px; color:var(--gold);
  letter-spacing:1px; display:inline-block; transform:rotate(-2deg);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--red);
}

.hours-closed-banner{
  background:var(--ink); color:var(--gold);
  font-family:var(--font-display); font-size:12px; text-align:center;
  padding:12px 14px 8px; margin:-10px -2px 0;
  transform:rotate(1deg) scale(1.03);
  position:relative; z-index:2;
}

.hours-slot{ padding:14px 16px 14px 90px; position:relative; border-top:2.5px solid var(--ink); }
.hours-slot.slot-light{ background:var(--card); color:var(--ink); }
.hours-slot.slot-dark{ background:var(--ink); color:#fff; }
.hours-slot.slot-gold{ background:var(--gold); color:var(--ink); }
.slot-label{ font-family:var(--font-display); font-size:13px; margin-bottom:3px; }
.slot-days{ font-size:11px; opacity:.75; margin-bottom:6px; }
.slot-time{ font-family:var(--font-mono); font-weight:700; font-size:19px; color:var(--red); }
.slot-dark .slot-time{ color:var(--gold); }
.slot-gold .slot-time{ color:var(--red-dark); }

.open-badge{
  position:absolute; top:10px; left:12px; width:64px; height:64px; z-index:1;
  background:var(--navy); color:#fff; border-radius:50%; border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); font-size:9px; line-height:1.3;
  transform:rotate(-10deg); box-shadow:2px 2px 0 var(--ink);
}

.hours-footer{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:2.5px solid var(--ink);
  background:var(--card);
}
.hours-footer-logo{ width:40px; height:auto; border-radius:5px; flex:0 0 auto; }
.hours-footer-text{ font-size:11.5px; color:var(--muted); }
.hours-footer-text a{ color:var(--red); font-weight:700; text-decoration:none; }

/* live phone number over the hours poster's reservation banner */
.phone-patch{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  color:#f4e4c6; text-decoration:none;
  font-family:'Bungee', var(--font-body); font-weight:400;
  font-size:clamp(17px, 6.2vw, 30px);
  letter-spacing:1px;
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
}

/* ---------- ticket-stub system (signature component) ---------- */
.ticket{
  position:relative;
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--hard-shadow);
  margin-bottom:16px;
}
.ticket-notch{
  position:absolute; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--paper);
  border:3px solid var(--ink);
  z-index:2;
}
.ticket-notch.l{ left:-11px; }
.ticket-notch.r{ right:-11px; }
.ticket-perf{ border-top:2px dashed #cabb96; margin:0 16px; }

/* ============================================================
   MENU
   ============================================================ */
.menu-chips{
  display:flex; gap:8px; overflow-x:auto;
  padding:2px 2px 12px;
  margin-bottom:6px;
  scrollbar-width:none;
}
.menu-chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  background:var(--card);
  border:2px solid var(--ink);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:10.5px;
  padding:8px 13px;
  border-radius:16px;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
}
.chip:active{ transform:translate(2px,2px); box-shadow:none; }
.chip.is-active{ background:var(--red); color:#fff; }

.menu-page{ margin-bottom:22px; scroll-margin-top:64px; }
.menu-page .label{
  display:inline-block;
  font-family:var(--font-display);
  font-size:11px;
  background:var(--ink);
  color:var(--gold);
  padding:6px 12px;
  border-radius:6px 6px 0 0;
}
.menu-page img{
  width:100%;
  border-radius:0 10px 10px 10px;
  border:3px solid var(--ink);
  box-shadow:var(--hard-shadow);
}
.menu-note{
  font-size:11.5px; color:var(--muted); line-height:1.6; text-align:center;
  margin:20px 0 4px;
}

/* ============================================================
   RESERVE
   ============================================================ */
.reserve-note{ font-size:11px; color:var(--muted); line-height:1.6; text-align:center; margin:14px 0 18px; }

/* replacement label painted over the artwork's old "OCCASION / AREA" */
.area-label{
  position:absolute;
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-body); font-weight:900; color:#171310;
  font-size:clamp(11px, 3.4vw, 16px); letter-spacing:.3px;
}
.area-label .star{ color:var(--red); font-size:.75em; }

/* T&C ticket under the form */
.tnc{
  background:var(--card); border:2.5px solid var(--ink); border-radius:10px;
  box-shadow:var(--hard-shadow-sm);
  padding:13px 15px; margin:16px 0 18px;
}
.tnc-head{
  font-family:var(--font-display); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--red); margin-bottom:8px;
}
.tnc-head .jp{ color:var(--muted); font-family:var(--font-body); font-weight:700; margin-left:6px; text-transform:none; letter-spacing:0; }
.tnc p{ display:flex; gap:8px; font-size:11.5px; color:#4a3f33; line-height:1.6; margin:0 0 7px; }
.tnc p:last-child{ margin-bottom:0; }
.tnc-star{ color:var(--red); flex:0 0 auto; font-size:10px; margin-top:2px; }

.confirm-wrap{ display:none; }
.confirm-wrap.show{ display:block; }

.confirm-ticket{
  background:var(--card); border:3px solid var(--ink); border-radius:0 0 var(--radius) var(--radius);
  border-top:none; margin-top:-3px; padding:18px;
}
.confirm-code-row{ display:flex; justify-content:center; margin-bottom:16px; }
.confirm-code{
  font-family:var(--font-mono); font-weight:700; font-size:19px; letter-spacing:3px;
  background:var(--ink); color:var(--gold);
  padding:8px 18px; border-radius:6px;
  border:2px dashed var(--gold);
}
.confirm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; font-size:13px; }
.confirm-grid div{ display:flex; align-items:flex-start; gap:8px; }
.confirm-grid svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--red); }
.confirm-grid b{ display:block; font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
.confirm-actions{ margin-top:18px; }

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; text-align:center;
  background:var(--red); color:#fff;
  border:2.5px solid var(--ink);
  padding:14px; border-radius:8px;
  font-family:var(--font-display); font-size:12.5px; letter-spacing:.4px;
  cursor:pointer;
  box-shadow:var(--hard-shadow-sm);
}
.btn:active{ transform:translate(3px,3px); box-shadow:none; }
.btn.ghost{ background:var(--card); color:var(--ink); }

.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:16px;
  background:#fff; color:#3c4043;
  border:2.5px solid var(--ink);
  padding:13px; border-radius:8px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px; font-weight:600;
  cursor:pointer;
  box-shadow:var(--hard-shadow-sm);
}
.google-btn:active{ transform:translate(3px,3px); box-shadow:none; }

.link-phone-success{ text-align:center; font-weight:700; color:#1a7a3c; font-size:13px; margin-bottom:6px; }
.link-phone-label{ display:block; font-size:12px; color:var(--muted); text-align:center; margin-bottom:8px; }
.ov-input-static{
  display:block; width:100%; box-sizing:border-box;
  padding:12px; border-radius:8px; border:2px solid var(--ink);
  font-size:15px; text-align:center; background:var(--card); color:var(--ink);
}
.btn-static{
  display:block; width:100%; text-align:center; margin-top:10px;
  background:var(--red); color:#fff; border:2.5px solid var(--ink);
  padding:12px; border-radius:8px;
  font-family:var(--font-display); font-size:12.5px; letter-spacing:.4px;
  cursor:pointer; box-shadow:var(--hard-shadow-sm);
}
.btn-static:active{ transform:translate(3px,3px); box-shadow:none; }
.error-static{ color:var(--red); font-size:12px; text-align:center; margin-top:8px; min-height:1.2em; }

/* ============================================================
   MEMBER
   ============================================================ */
.demo-badge{
  display:block; text-align:center; background:#fdeecb; color:#8a6414; font-size:10.5px; font-weight:700;
  padding:6px 10px; border-radius:6px; margin-top:14px; border:1.5px dashed #c9a35a;
}

.points-balance-patch{
  position:absolute; display:flex; align-items:baseline; justify-content:center; gap:4px;
}
.points-balance-patch .n{ font-family:var(--font-display); color:var(--red); font-size:clamp(18px,7vw,30px); line-height:1; }
.points-balance-patch .u{ font-family:var(--font-display); color:#f0d9c9; font-size:clamp(7px,2.4vw,10px); }

.member-phone-show{
  display:block; width:fit-content; margin:14px auto 16px;
  background:var(--ink); color:var(--gold);
  font-family:var(--font-mono); font-weight:700; font-size:17px; letter-spacing:2px;
  padding:9px 20px; border-radius:8px;
  border:2px dashed var(--gold);
  text-align:center;
}

.logout-link{
  display:block; width:fit-content; margin:16px auto 0;
  background:none; border:none; color:var(--muted);
  font-size:12px; text-decoration:underline; cursor:pointer;
}

.tier-row{
  display:flex; gap:12px; overflow-x:auto; padding:4px 2px 14px;
  scroll-snap-type:x proximity;
}
.tier-row::-webkit-scrollbar{ display:none; }
.tier-card{
  flex:0 0 128px; scroll-snap-align:start;
  background:var(--card); border:2.5px solid var(--ink); border-radius:12px;
  padding:26px 10px 12px; text-align:center; position:relative;
  box-shadow:3px 3px 0 var(--ink);
}
.tier-card .ribbon{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg);
  background:var(--navy); color:#fff; font-family:var(--font-display); font-size:8px;
  padding:3px 9px; border-radius:4px; border:1.5px solid var(--ink); letter-spacing:.5px;
}
.tier-card .badge{
  width:52px; height:52px; border-radius:50%; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--ink); background:#fff; color:var(--red);
}
.tier-card .badge svg{ width:24px; height:24px; }
.tier-card.c-navy .badge{ color:var(--navy); }
.tier-card.c-ink .badge{ color:var(--ink); }
.tier-card .name{ font-family:var(--font-display); font-size:10.5px; line-height:1.3; margin-bottom:6px; min-height:26px; display:flex; align-items:center; justify-content:center; }
.tier-card .pts{ font-family:var(--font-mono); font-size:10px; color:var(--muted); font-weight:700; margin-bottom:6px; }
.tier-card .reward{ font-size:9px; color:var(--muted); line-height:1.35; min-height:24px; margin-bottom:8px; }
.tier-card .status{
  font-family:var(--font-display); font-size:8.5px; letter-spacing:.3px;
  border-radius:5px; padding:5px 6px; border:1.5px solid var(--ink);
}
.tier-card .status.done{ background:var(--red); color:#fff; }
.tier-card .status.pending{ background:var(--paper); color:var(--ink); }

/* ---------- member: live points + reward tickets ---------- */
.pts-live{
  position:absolute;
  display:flex; align-items:flex-end; justify-content:center; gap:5px;
}
.pts-live .n{
  font-family:var(--font-display);
  color:#c8102e;
  font-size:clamp(30px, 12vw, 58px);
  line-height:.85;
  text-shadow:0 0 12px rgba(200,16,46,.35);
}
.pts-live .u{
  font-family:var(--font-display);
  color:#c8102e;
  font-size:clamp(11px, 3.6vw, 17px);
  line-height:1; margin-bottom:2px;
}

/* chip text sizes with the poster width (container query), not the browser window */
#memberLoggedIn .mock-wrap{ container-type:inline-size; }
.tier-chip{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background:#faf1e2;
  border:2px solid var(--ink); border-radius:6px;
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(7px, 2.3cqw, 12px);
  color:var(--ink);
  white-space:nowrap; overflow:hidden;
  padding:0 2px;
}
.tier-chip.done{
  color:#c8102e; border-color:#c8102e;
  font-family:var(--font-body); font-weight:900; letter-spacing:.2px;
  white-space:normal; text-align:center; line-height:1.2;
  font-size:clamp(7px, 2.2cqw, 11px);
  transform:rotate(-3deg);
}

.tier-pop{
  position:fixed; inset:0; z-index:50;
  background:rgba(20,15,10,.65);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.tier-pop[hidden]{ display:none; }
.tier-pop-card{
  position:relative;
  background:var(--card); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--hard-shadow);
  padding:24px 22px 20px; max-width:300px; width:100%; text-align:center;
}
.tier-pop-close{
  position:absolute; top:-12px; right:-12px; width:30px; height:30px; border-radius:50%;
  background:var(--red); color:#fff; border:2.5px solid var(--ink);
  font-size:16px; line-height:1; cursor:pointer;
}
.tier-pop-name{ font-family:var(--font-display); font-size:17px; margin-bottom:4px; }
.tier-pop-pts{ font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--muted); margin-bottom:12px; }
.tier-pop-reward{
  background:#fff7e3; border:2px dashed var(--red); border-radius:8px;
  padding:10px 12px; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:12px;
}
.tier-pop-progress{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--red); }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  background:var(--ink);
  border-top:3px solid var(--red);
  display:flex;
  z-index:30;
  padding:6px 6px 10px;
}
.tabbar button{
  flex:1; background:none; border:none; color:#a99d8f;
  font-size:10px; padding:6px 4px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; font-family:var(--font-body); font-weight:700; letter-spacing:.2px;
}
.tabbar button .ic{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid #3a2c24; color:var(--gold);
}
.tabbar button .ic svg{ width:15px; height:15px; }
.tabbar button .ic .emoji{ font-size:14px; line-height:1; filter:grayscale(1) sepia(1) saturate(3) hue-rotate(-15deg); }
.tabbar button.is-active{ color:#fff; }
.tabbar button.is-active .ic{ background:var(--red); border-color:var(--red); color:#fff; }
.tabbar button.is-active .ic .emoji{ filter:grayscale(1) brightness(3); }

/* ---------- generic helpers ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }