/* ============================================================
   Birthday Teppanyaki — stylesheet
   Change the values in :root below to restyle the whole page.
   ============================================================ */

:root{
  /* --- palette: edit these to change every colour on the page --- */
  --indigo:      #16253f;   /* dark navy panels */
  --indigo-soft: #1e3355;   /* alternating noren stripes */
  --cream:       #f6efdf;   /* page background */
  --cream-2:     #efe5cf;   /* inset panel background */
  --red:         #b4342a;   /* seals + accents */
  --gold:        #c9a227;   /* small highlight text */
  --ink:         #22303f;   /* body text */
  --muted:       #6f7787;   /* secondary text */

  /* --- type --- */
  --font: 'Hiragino Mincho ProN','Yu Mincho','Noto Serif CJK JP',
          'Noto Serif JP','Noto Serif',Georgia,serif;

  --maxw: 680px;            /* content width on desktop */
  --radius: 3px;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; }

body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}

/* faint washi speckle */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(22,37,63,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 68% 8%,  rgba(180,52,42,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 82% 61%, rgba(22,37,63,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 34% 78%, rgba(22,37,63,.04) 0 1px, transparent 1.4px);
  background-size:37px 41px, 53px 47px, 61px 59px, 43px 39px;
}

.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 16px 8px; }

/* ---------------- HEADER (noren + birthday) ---------------- */
header{
  background:var(--indigo); color:var(--cream);
  margin:0 -16px 24px;
  padding:calc(16px + env(safe-area-inset-top)) 10px 0;
  position:relative; overflow:hidden;
}
.hero-row{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(2px,2.5vw,16px);
}
.lantern{
  flex:none; width:clamp(24px,7vw,42px); height:auto;
  color:#e8c86a; opacity:.55;
}
.hero{ position:relative; flex:0 1 auto; min-width:0; padding:6px 4px 2px; text-align:center; }
.sun{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:clamp(100px,30vw,138px); aspect-ratio:1; border-radius:50%;
  background:var(--red); opacity:.92;
  box-shadow:0 0 0 3px rgba(246,239,223,.16);
}
.hero-txt{ position:relative; }
.hero-jp{
  font-size:clamp(22px,6.4vw,34px); font-weight:700; letter-spacing:.1em;
  line-height:1.28; text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.hero-ro{ font-size:clamp(10px,3vw,13px); font-style:italic; letter-spacing:.14em; color:#ffe9a8; margin-top:7px; }
.hero-en{ font-size:clamp(8px,2.4vw,10px); letter-spacing:.36em; text-transform:uppercase; color:rgba(246,239,223,.7); margin-top:7px; }

.skirt{ display:flex; gap:5px; height:15px; margin-top:14px; }
.skirt div{ flex:1; background:var(--indigo); border-radius:0 0 2px 2px; }
.skirt div:nth-child(even){ background:var(--indigo-soft); }

/* ---------------- MENU SECTIONS ---------------- */
section{ margin-bottom:28px; }

.sec-head{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  border-bottom:2px solid var(--indigo); padding-bottom:5px; margin-bottom:2px;
}
.sec-head .jp{ font-size:clamp(17px,4.6vw,20px); font-weight:700; color:var(--indigo); letter-spacing:.1em; }
.sec-head .en{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--red); font-weight:700; }
.sec-head .ro{ font-size:9.5px; letter-spacing:.1em; color:#8a8270; font-style:italic; margin-left:auto; }

.item{
  display:flex; align-items:center; gap:12px;
  padding:13px 2px;
  border-bottom:1px dotted rgba(22,37,63,.28);
}
.item:last-child{ border-bottom:none; }

/* the little red hanko seal */
.stamp{
  width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; font-weight:700; line-height:1;
  box-shadow:0 0 0 1.8px var(--cream), 0 0 0 3.2px rgba(180,52,42,.3);
}

.names{ flex:1; min-width:0; }
.names .jp{ font-size:clamp(19px,5.4vw,24px); font-weight:700; line-height:1.2; word-break:keep-all; }
.names .ro{ font-size:clamp(11px,3.2vw,13px); color:var(--red); font-style:italic; }
.item .en{ font-size:clamp(11.5px,3.3vw,14px); color:var(--muted); text-align:right; flex:none; max-width:38%; }

/* ---------------- ORDER GUIDE ---------------- */
.guide{ border:1.5px solid var(--indigo); background:var(--cream-2); border-radius:var(--radius); overflow:hidden; }
.guide-bar{
  background:var(--indigo); color:var(--cream);
  padding:10px 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.guide-bar .jp{ font-size:15px; font-weight:700; letter-spacing:.2em; }
.guide-bar .en{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.guide-body{ padding:14px; }
.g-title{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:9px; }

.counters{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.ctr{ background:#fff; border:1px solid rgba(22,37,63,.28); border-radius:var(--radius); padding:7px 2px 8px; text-align:center; }
.ctr .n{ font-size:10px; color:#9a927f; }
.ctr .jp{ font-size:clamp(12.5px,3.8vw,16px); font-weight:700; color:var(--indigo); line-height:1.25; }
.ctr .ro{ font-size:clamp(7.5px,2.3vw,10px); color:var(--red); font-style:italic; }

.formula{
  background:#fff; border:1px solid rgba(22,37,63,.28); border-radius:var(--radius);
  padding:13px 10px; text-align:center; margin-top:14px;
}
.formula .l1{ font-size:clamp(15px,4.4vw,19px); font-weight:700; color:var(--indigo); line-height:1.55; word-break:keep-all; }
.formula .l1 .slot{ color:var(--red); }
.formula .l2{ font-size:clamp(10px,2.9vw,12px); font-style:italic; color:#7d7462; margin-top:6px; }

.ex{ margin-top:13px; }
.ex .jp{ font-size:clamp(15px,4.2vw,18px); font-weight:700; color:var(--ink); line-height:1.45; word-break:keep-all; }
.ex .ro{ font-size:clamp(11px,3vw,12.5px); font-style:italic; color:var(--red); }
.ex .en{ font-size:clamp(11px,3vw,12.5px); color:var(--muted); }

/* ---------------- PHRASES ---------------- */
.phrases{ background:var(--indigo); color:var(--cream); border-radius:var(--radius); padding:14px; }
.ph-head{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  border-bottom:1px solid rgba(246,239,223,.28); padding-bottom:8px; margin-bottom:2px;
}
.ph-head .jp{ font-size:15px; font-weight:700; letter-spacing:.14em; }
.ph-head .en{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

.ph-list{ display:grid; grid-template-columns:1fr; }
.ph{ padding:10px 0; border-bottom:1px solid rgba(246,239,223,.13); }
.ph .jp{ font-size:clamp(16px,4.4vw,19px); font-weight:700; line-height:1.3; }
.ph .ro{ font-size:clamp(11px,3vw,12.5px); font-style:italic; color:var(--gold); margin-left:8px; }
.ph .en{ display:block; font-size:clamp(11px,3vw,12.5px); color:rgba(246,239,223,.76); margin-top:2px; }

.foot{ text-align:center; margin-top:26px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#a09884; }

/* ---------------- WIDER SCREENS ---------------- */
@media (min-width:600px){
  .ph-list{ grid-template-columns:1fr 1fr; column-gap:26px; }
  .ph:nth-last-child(-n+2){ border-bottom:none; }
}

/* ---------------- PRINT ---------------- */
@media print{
  body{ background:#fff; }
  body::before{ display:none; }
  header{ margin-bottom:16px; }
  section{ break-inside:avoid; }
}

/* ============================================================
   INTERACTIVE LAYER  (cart, checkout, playback)
   Only applies once JavaScript has run — the plain menu above
   is untouched if scripts are blocked.
   ============================================================ */

body.locked{ overflow:hidden; }
body.has-cartbar{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }

/* ---- speak button ---- */
.say{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(22,37,63,.22); background:#fff; color:var(--red);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .12s, background .12s;
}
.say svg{ width:19px; height:19px; fill:currentColor; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.say svg .w1,.say svg .w2{ fill:none; }
.say:active{ transform:scale(.9); }
.say.is-playing{ background:var(--red); color:#fff; border-color:var(--red); }
.phrases .say{ background:transparent; border-color:rgba(246,239,223,.3); color:var(--gold); }
.phrases .say.is-playing{ background:var(--gold); color:var(--indigo); }

.ph.has-say{ display:flex; align-items:center; gap:10px; }
.ph.has-say > .jp{ order:1; } .ph.has-say > .ro{ order:2; } .ph.has-say > .en{ order:3; }

/* ---- menu item controls ---- */
.item{ position:relative; }
.item-tools{ display:flex; align-items:center; gap:8px; flex:none; margin-left:4px; }
.add{
  width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer;
  border:1px solid var(--indigo); background:var(--indigo); color:var(--cream);
  font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:transform .12s;
}
.add:active{ transform:scale(.9); }
.add.bump{ animation:bump .26s ease; }
@keyframes bump{ 50%{ transform:scale(1.22); } }

.item-count{
  position:absolute; left:30px; top:6px;
  background:var(--indigo); color:var(--cream);
  font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:2px 6px; border-radius:10px; box-shadow:0 0 0 2px var(--cream);
}
.item.in-cart .stamp{ box-shadow:0 0 0 1.8px var(--cream), 0 0 0 3.6px var(--indigo); }
.js .item .en{ max-width:30%; }

.ctr.tappable{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ctr.tappable:active{ background:var(--cream-2); }

/* ---- buttons ---- */
.btn{
  font-family:var(--font); font-size:14px; font-weight:700;
  padding:12px 16px; min-height:46px; border-radius:3px; cursor:pointer;
  border:1.5px solid var(--indigo); background:#fff; color:var(--indigo);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:17px; height:17px; fill:currentColor; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.btn svg .w1,.btn svg .w2{ fill:none; }
.btn.primary{ background:var(--indigo); color:var(--cream); }
.btn.ghost{ border-color:rgba(22,37,63,.3); color:var(--muted); background:transparent; }
.btn.wide{ width:100%; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; }

/* ---- name modal ---- */
.modal-back{
  position:fixed; inset:0; z-index:60; background:rgba(10,17,30,.82);
  display:flex; align-items:center; justify-content:center; padding:22px;
  backdrop-filter:blur(3px);
}
.modal{
  background:var(--cream); border-radius:4px; padding:26px 20px 22px;
  width:100%; max-width:340px; text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.modal-seal{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:var(--red); color:#fff; font-size:26px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.modal-jp{ font-size:26px; font-weight:700; color:var(--indigo); letter-spacing:.08em; }
.modal-ro{ font-size:12px; font-style:italic; color:var(--red); margin-top:4px; }
.modal-en{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.modal input{
  width:100%; margin:16px 0 12px; padding:13px 12px; font-size:16px; /* 16px stops iOS zoom */
  font-family:var(--font); border:1.5px solid rgba(22,37,63,.35); border-radius:3px;
  background:#fff; color:var(--ink); text-align:center;
}
.modal input:focus{ outline:2px solid var(--red); outline-offset:1px; }

/* ---- floating cart bar ---- */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--indigo); color:var(--cream);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  transform:translateY(120%); transition:transform .26s ease;
  box-shadow:0 -6px 22px rgba(0,0,0,.22);
}
.cartbar.show{ transform:translateY(0); }
.cb-left{ flex:1; display:flex; align-items:center; gap:9px; min-width:0; }
.cb-count{
  background:var(--red); color:#fff; font-weight:700; font-size:14px;
  min-width:28px; height:28px; border-radius:14px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
}
.cb-label{ font-size:12.5px; color:rgba(246,239,223,.8); }
.cartbar .btn.primary{ background:var(--cream); color:var(--indigo); border-color:var(--cream); }

/* ---- checkout sheet ---- */
.sheet{ position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; }
/* [hidden] must beat display:flex, or the invisible sheet eats every tap */
.sheet[hidden]{ display:none !important; }
.sheet:not(.open){ pointer-events:none; }
.sheet.open{ pointer-events:auto; }
.sheet::before{
  content:''; position:absolute; inset:0; background:rgba(10,17,30,.6);
  opacity:0; transition:opacity .26s;
}
.sheet.open::before{ opacity:1; }
.sheet-inner{
  position:relative; width:100%; max-height:94vh; overflow-y:auto;
  background:var(--cream); border-radius:8px 8px 0 0;
  transform:translateY(100%); transition:transform .28s cubic-bezier(.3,.8,.3,1);
  -webkit-overflow-scrolling:touch;
}
.sheet.open .sheet-inner{ transform:translateY(0); }
@media (min-width:700px){
  .sheet{ align-items:center; justify-content:center; padding:24px; }
  .sheet-inner{ max-width:620px; border-radius:6px; }
}
.sheet-head{
  position:sticky; top:0; z-index:2; background:var(--indigo); color:var(--cream);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sh-jp{ font-size:19px; font-weight:700; letter-spacing:.14em; }
.sh-en{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:2px; }
.sheet-close{
  width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer;
  background:transparent; border:1px solid rgba(246,239,223,.35); color:var(--cream); font-size:16px;
}
.sheet-body{ padding:16px 16px calc(24px + env(safe-area-inset-bottom)); }

.ck-line{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px dotted rgba(22,37,63,.25);
}
.ck-l-txt{ flex:1; min-width:0; }
.ck-l-jp{ font-size:19px; font-weight:700; word-break:keep-all; }
.ck-l-en{ font-size:11.5px; color:var(--muted); }
.stepper{ display:flex; align-items:center; gap:2px; flex:none; }
.st{
  width:36px; height:36px; border-radius:3px; cursor:pointer; font-size:17px;
  border:1px solid rgba(22,37,63,.3); background:#fff; color:var(--indigo);
}
.st-n{ min-width:32px; text-align:center; font-weight:700; font-size:16px; }

.ck-say{
  margin-top:18px; background:var(--cream-2);
  border:1.5px solid var(--indigo); border-radius:var(--radius); padding:14px;
}
.ck-jp{ font-size:clamp(19px,5.2vw,24px); font-weight:700; color:var(--indigo); line-height:1.6; word-break:keep-all; }
.ck-ro{ font-size:clamp(12px,3.4vw,14px); font-style:italic; color:var(--red); margin-top:7px; }
.ck-en{ font-size:clamp(11.5px,3.2vw,13px); color:var(--muted); margin-top:5px; }
.ck-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ck-actions .btn{ flex:1 1 auto; }
.ck-tip{ font-size:11.5px; color:var(--muted); margin-top:11px; line-height:1.55; }
.ck-tip b{ color:var(--indigo); }
.btn.send{ margin-top:18px; }
.ck-note{ font-size:12px; color:var(--muted); margin-top:10px; text-align:center; }

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px); z-index:90;
  background:var(--indigo); color:var(--cream);
  padding:13px 18px; border-radius:4px; font-size:13.5px; line-height:1.5;
  max-width:min(440px,calc(100% - 32px)); text-align:center;
  opacity:0; transition:opacity .3s, transform .3s;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media print{ .say,.add,.cartbar,.sheet,.modal-back,.item-count,.toast{ display:none !important; } }