/* ============================================================
   らーめん 通訳（見本）― 墨色（お客さん側）× 生成りの和紙（スタッフ側）× 朱赤の帯
   劇場版の CSS をもとに、色の名前（--pink-* など）はそのまま中身だけ和の色に差し替えている。
   ラーメン店らしい部分の上書きは、このファイルのいちばん下にまとめてある。
   ============================================================ */
:root {
  --white: #fffaf1;        /* 和紙の白（ボタン・ふきだし） */
  --pink-50: #f6efe3;      /* パネル */
  --pink-100: #ece2d0;     /* スタッフ側の地色（生成り） */
  --pink-200: #d6c6a8;     /* 枠線 */
  --pink-300: #c29a55;     /* かざり（くすんだ金） */
  --ribbon: #b3161c;       /* まんなかの帯・主役のボタン（朱赤） */
  --ribbon-deep: #7d0f13;
  --ink: #241f1c;          /* 文字（墨） */
  --ink-soft: #6b5d52;
  --ok: #2d7a3e;
  --ng: #b3161c;
  --sumi: #1d1b1a;         /* お客さん側の地色（墨） */
  --sumi-2: #2b2826;       /* 墨の上のふきだし */
  --sumi-line: #4a443f;
  --gold: #d4ae62;
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-head: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-brush: "Yuji Syuku", "Shippori Mincho B1", "Yu Mincho", serif;
  --bar-h: 128px;
  --frill: 8px;            /* 帯の上下のかざり（雷紋ふうの帯）の高さ */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--pink-100);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ribbon-deep); outline-offset: 2px; }

/* ---------- 画面全体：上＝お客さん / まんなか＝操作 / 下＝メイド ---------- */
.stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--bar-h) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.half { position: relative; min-height: 0; overflow: hidden; }
.half-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(12px + var(--frill)) 18px 16px;
}
.half.guest { background: var(--white); }
.half.cast {
  background: var(--pink-100);
  /* うすい水玉。メイド服のドット柄から */
  background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 2.5px, transparent 3px);
  background-size: 26px 26px;
}
.half.guest .half-inner {
  transform: rotate(180deg);
  padding-bottom: calc(16px + env(safe-area-inset-top));
}
.stage.same-way .half.guest .half-inner {
  transform: none;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(12px + var(--frill));
}
.half.cast .half-inner { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- 何も話していないときのイラスト ---------- */
.art {
  position: absolute; right: 12px; bottom: 10px;
  height: min(66%, 270px); width: auto; max-width: 46%;
  object-fit: contain; object-position: right bottom;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none; user-select: none;
}
.half.is-empty .art { opacity: 1; }
.half.cast .art { bottom: calc(10px + env(safe-area-inset-bottom)); }
.stage.same-way .half.guest .art { bottom: calc(10px + var(--frill)); }
.sticker { height: 46px; width: auto; margin-left: auto; flex: none; pointer-events: none; user-select: none; }
/* お店のロゴは大きさを保つ。場所が足りないときは、言語ボタンの名前のほうを「…」で縮める */
.sticker.logo { height: 48px; width: auto; flex: none; }
.half-head .lang-chip { flex: 0 1 auto; min-width: 0; }
/* チェキは言語ボタンとロゴのまんなか。場所が足りないときは、チェキから先に小さくなる */
.sticker.cheki { flex: 0 40 auto; min-width: 34px; height: auto; max-height: 64px; width: 68px; margin: 0 auto; object-fit: contain; transform: rotate(-6deg); }
.sticker.cheki + .logo { margin-left: 0; }
@media (min-width: 351px) { .half.guest .half-head .lang-chip { flex-shrink: 0; } }
.half.guest .half-head { gap: 4px; }

/* キャスト側：画面の向きの切り替え（前はここにチェキがあった） */
.flip-chip {
  flex: none; margin-left: auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 52px; min-height: 46px; padding: 3px 6px;
  border: 2px solid var(--ribbon); border-radius: 16px;
  background: var(--white); color: var(--ribbon-deep);
  font-size: 11px; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.flip-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip-chip[aria-pressed="true"] { background: var(--pink-100); }
#langChipLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-chip .flag, .lang-chip .cur { flex: none; }

/* 制作者の名前 */
.credit { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); }
.half.cast .credit { position: absolute; left: 18px; bottom: calc(8px + env(safe-area-inset-bottom)); opacity: 0; transition: opacity .25s ease; }
.half.cast.is-empty .credit { opacity: 1; }
.sheet .credit { text-align: center; font-size: 12px; padding-top: 4px; }

/* ---------- 会話の表示 ---------- */
.log {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
  /* 過ぎた会話はスクロールでさかのぼれる。新しい言葉は下に積む（いちばん上の行に margin-top: auto で下寄せ） */
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;   /* ふきだしの影が切れないように */
}
.log::-webkit-scrollbar { display: none; }
.log > :first-child { margin-top: auto; }
.line { flex: none; }
.line { margin: 0; max-width: 100%; overflow-wrap: anywhere; }

/* 相手の言葉（通訳されたもの）＝読むべき主役。ふきだしで出す */
.line.them {
  padding: 8px 14px;
  border-radius: 18px 18px 18px 6px;
  font-size: 16px; line-height: 1.45; font-weight: 700;
  opacity: .62;
}
.half.guest .line.them { background: var(--pink-50); border: 1.5px solid var(--pink-200); }
.half.cast .line.them { background: var(--white); border: 1.5px solid var(--white); }
.line.them.now {
  padding: 12px 18px;
  border-radius: 24px 24px 24px 8px;
  font-size: clamp(23px, 6.4vw, 36px);
  line-height: 1.32; font-weight: 700; opacity: 1; letter-spacing: .01em;
  box-shadow: 0 4px 0 var(--pink-200);
}
.line.them.now.long { font-size: clamp(17px, 4.7vw, 24px); line-height: 1.45; }
/* 自分の言葉（聞き取り結果）＝確認用に小さく */
.line.me { font-size: 14px; line-height: 1.4; color: var(--ink-soft); padding-left: 12px; border-left: 3px solid var(--pink-300); }
.line.me.check { font-size: 16px; line-height: 1.6; color: var(--ink); }
.line.live::after {
  content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .35em;
  border-radius: 50%; background: var(--ribbon); vertical-align: middle;
  animation: blink 1s ease-in-out infinite;
}

.empty { margin: auto 0; max-width: 54%; font-size: 15px; font-weight: 700; color: var(--ribbon-deep); }
.half.guest .empty { font-size: 18px; }

/* ---------- お客さん側：言語と通貨のボタン ---------- */
.half-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; flex: none; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 2px solid var(--ribbon); border-radius: 22px;
  background: var(--white); color: var(--ribbon-deep);
  font-size: 16px; font-weight: 700;
}
.lang-chip .cur { padding: 2px 9px; border-radius: 11px; background: var(--pink-100); font-size: 13px; letter-spacing: .02em; }

/* 国旗。画像が出ないときは国コードの文字が見える */
.flag {
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  width: 30px; height: 21px; border-radius: 5px; overflow: hidden;
  background: var(--pink-200); box-shadow: 0 0 0 1px rgba(74, 43, 54, .18);
}
.flag i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.flag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flag.globe { background: var(--pink-100); box-shadow: none; }
.flag.globe::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ribbon); box-shadow: inset 5px 0 0 -3px var(--ribbon), inset -5px 0 0 -3px var(--ribbon); }

/* 言語＋通貨をセットで選ぶボタン：国旗｜言語名／通貨 */
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; text-align: left; }
.pick .flag { grid-row: 1 / 3; }
.pick-name { display: block; }
.pick-cur { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; }
.pick[aria-pressed="true"] .pick-cur { color: #fff; }
.lang-panel {
  position: absolute; inset: 0; z-index: 2;
  background: var(--white);
  padding: calc(12px + var(--frill)) 14px calc(14px + env(safe-area-inset-top));
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: max-content;   /* 2行になる名前でも、枠が文字に合わせて伸びる */
  gap: 8px; align-content: start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.stage.same-way .lang-panel { padding: calc(14px + env(safe-area-inset-top)) 14px calc(12px + var(--frill)); }
.lang-panel button {
  min-height: 48px; padding: 8px 10px; line-height: 1.25; overflow-wrap: anywhere;
  border: 1.5px solid var(--pink-200); border-radius: 16px;
  background: var(--pink-50); color: var(--ink);
  font-size: 17px; font-weight: 700;
}
.lang-panel button[aria-pressed="true"] { background: var(--ribbon); border-color: var(--ribbon); color: #fff; }

/* ---------- メイド側：最初の説明 ---------- */
.intro-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px 0 14px;
  border: 0; border-radius: 23px;
  background: var(--ribbon); color: #fff;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 0 var(--ribbon-deep);
}
.intro-chip:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ribbon-deep); }
.intro-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 日本語の下に、お客さんの言語を小さく添える（2段の文字） */
.bi { min-width: 0; }
.bi-main, .bi-sub { display: block; }
.bi-sub[hidden], .bi-inline[hidden] { display: none; }
/* お客さんの言語のほうを、日本語より少し大きく見せる */
.bi-sub { margin-top: 1px; font-size: 1.04em; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-main { font-size: .9em; line-height: 1.2; }
.bi-inline { display: inline-block; margin-left: 8px; font-size: 1.14em; }
/*
  向かい合わせのとき：お客さんの言語の文字だけ逆さまにして、向かいの席から読めるようにする（日本語はそのまま）。
  ただし「文字で入力」でお客さんが打つ番のときは、スマホを手に持って打つので逆さまにしない。
*/
.stage:not(.same-way) .bi-sub,
.stage:not(.same-way) .bi-inline { transform: rotate(180deg); }
.stage:not(.same-way) .intro-chip .bi-sub,
.stage:not(.same-way) .type-panel h2 .bi-sub { text-align: right; }   /* 逆さまにしたあと、日本語の左はしにそろう */
.stage:not(.same-way) .type-panel.guest-typing .bi-sub,
.stage:not(.same-way) .type-panel.guest-typing .bi-inline { transform: none; text-align: inherit; }
.intro-chip { min-width: 0; text-align: left; }
.half.cast .half-head .intro-chip { flex: 0 1 auto; }
.half.cast .half-head #introBtn { flex-shrink: 0; }
.intro-chip svg { flex: none; }
.intro-chip .bi-sub { white-space: normal; overflow-wrap: anywhere; }   /* 長い言語は、切らずに2行にする */
.intro-chip { padding-top: 5px; padding-bottom: 5px; }
.type-panel .seg button { padding: 6px 8px; }
/* お客さんが打つ番の送るボタンは、上がお客さんの言語・下が日本語なので、大小を入れかえる */
.type-panel.guest-typing .intro-go .bi-main { font-size: 1.04em; }
.type-panel.guest-typing .intro-go .bi-sub { font-size: .9em; }
/* 文字で入力するボタン（最初の説明のとなり）。白いふちどりで、主役の「最初の説明」と見分ける */
.type-chip { padding: 0 14px 0 12px; background: var(--white); color: var(--ribbon-deep); box-shadow: 0 4px 0 var(--pink-200); border: 2px solid var(--ribbon); min-height: 46px; }
.type-chip:active { box-shadow: 0 2px 0 var(--pink-200); }
.type-panel .intro-top .mini { margin-left: auto; }
.type-text {
  display: block; width: 100%; min-height: 132px; margin-top: 12px; padding: 12px 14px;
  border: 1.5px solid var(--pink-200); border-radius: 16px;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 19px; font-weight: 700; line-height: 1.5; resize: none;
}
.type-text::placeholder { color: #b999a5; font-weight: 500; }
.type-panel .intro-go { position: static; box-shadow: 0 4px 0 var(--ribbon-deep); }
.intro-panel {
  position: fixed; inset: 0; z-index: 10;   /* メイドさんが操作する間だけ、画面いっぱいに出す */
  background: var(--pink-50);
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.intro-top { display: flex; align-items: center; gap: 10px; }
.intro-top h2 { margin: 0; font-size: 20px; font-weight: 900; color: var(--ribbon-deep); }
.intro-top img { height: 64px; width: auto; margin-left: auto; }
.intro-top .mini { min-height: 40px; }
.intro-label { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.intro-find {
  display: block; width: 100%; min-height: 46px; margin-bottom: 8px; padding: 8px 14px;
  border: 1.5px solid var(--pink-200); border-radius: 14px;
  background: var(--white); color: var(--ink); font-size: 16px;
}
.intro-find::placeholder { color: #b999a5; }
.intro-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 6px; }
.intro-langs .wide-row { grid-column: 1 / -1; margin: 8px 0 0; }
.intro-langs button {
  min-height: 48px; padding: 6px 10px; line-height: 1.25; overflow-wrap: anywhere;
  border: 1.5px solid var(--pink-200); border-radius: 14px;
  background: var(--white); color: var(--ink);
  font-size: 14px; font-weight: 700;
}
.intro-langs button[aria-pressed="true"] { background: var(--ribbon); border-color: var(--ribbon); color: #fff; }
.intro-go {
  position: sticky; bottom: 0;
  display: block; width: 100%; min-height: 54px; margin-top: 14px;
  border: 0; border-radius: 27px;
  background: var(--ribbon); color: #fff;
  font-size: 17px; font-weight: 900;
  box-shadow: 0 4px 0 var(--ribbon-deep), 0 -12px 14px var(--pink-50);
}
.intro-go:disabled { background: var(--pink-200); color: var(--ink-soft); box-shadow: 0 -12px 14px var(--pink-50); }

/* ---------- まんなかのリボン帯（上下にフリル） ---------- */
.bar {
  position: relative; z-index: 3;
  /* 左はメイドさんが入りきる幅を確保。余裕があるときはオムライスがまんなか */
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 6px;
  padding: 0 8px;
  background: var(--ribbon);
}
.bar::before, .bar::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--frill);
  background-size: calc(var(--frill) * 2) var(--frill);
  background-repeat: repeat-x;
  pointer-events: none;
}
.bar::before { top: calc(var(--frill) * -1 + .5px); background-image: radial-gradient(circle at 50% 100%, var(--ribbon) var(--frill), transparent calc(var(--frill) + .6px)); }
.bar::after { bottom: calc(var(--frill) * -1 + .5px); background-image: radial-gradient(circle at 50% 0, var(--ribbon) var(--frill), transparent calc(var(--frill) + .6px)); }
.mic-note { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mic-side { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.mic-side[hidden] { display: none; }
.mic-label { margin: 0; display: flex; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 900; line-height: 1.3; color: #fff; white-space: nowrap; }
.arw::before { content: "←"; }
.status { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #fff; opacity: .92; overflow-wrap: anywhere; }
/* お客さん向けの段。日本語より少し大きく（お客さんが主役） */
.mic-guest .mic-label { font-size: 16px; }
.mic-guest .status { font-size: 14px; opacity: 1; }
.mic-guest { padding-bottom: 5px; border-bottom: 1.5px dotted rgba(255, 255, 255, .6); }
/* 向かい合わせのとき：お客さんから読めるよう逆さまにして、矢印もマイクのほうへ向ける */
.stage:not(.same-way) .mic-guest {
  transform: rotate(180deg);
  align-items: flex-end; text-align: right;
  padding-bottom: 0; border-bottom: 0;
  padding-top: 5px; border-top: 1.5px dotted rgba(255, 255, 255, .6);
}
.stage:not(.same-way) .mic-guest .mic-label { flex-direction: row-reverse; }
.stage:not(.same-way) .mic-guest .arw::before { content: "→"; }
body[data-phase="error"] .status { text-decoration: underline wavy; text-underline-offset: 4px; }

/* マイクのボタン＝オムライス。動いている間は、右下に「止める」の四角が付く */
.talk {
  position: relative; width: 110px; height: 110px; padding: 0;
  border: 5px solid #fff; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 5px 0 var(--ribbon-deep);
}
.talk:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ribbon-deep); }
.talk-omu { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; pointer-events: none; user-select: none; }
/* 向かい合わせのときは、オムライスもお客さんのほうへ向ける */
.stage:not(.same-way) .talk-omu { transform: rotate(180deg); }
.stop-badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ribbon);
  display: none; place-items: center;
}
.stop-badge::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--ribbon); }
.talk .ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid #fff; opacity: 0;
  transform: scale(var(--level, 1)); transition: transform .08s linear;
}
body:not([data-phase="idle"]):not([data-phase="error"]) .stop-badge { display: grid; }
body[data-phase="listening"] .talk .ring { opacity: .95; }
body[data-phase="speaking"] .talk .ring { opacity: .95; border-style: dashed; animation: spin 6s linear infinite; }
body[data-phase="connecting"] .talk .ring { opacity: .6; animation: pulse 1.1s ease-in-out infinite; }

/* 帯の左右。左＝設定とリセット（縦）＋お客さん側のメイドさん、右＝マイクの案内＋キャスト側のメイドさん */
.bar-side { min-width: 0; display: flex; align-items: center; gap: 6px; }
.bar-right { justify-content: space-between; }
.bar-right .mic-note { flex: 1 1 auto; }
/* 会話が始まって上下の大きいイラストが消えたら、帯に小さく出す */
/* 帯の高さいっぱいまで大きく。右はマイクの案内の文字があるので、スマホ幅では少しだけ小さめ */
.bar-art { display: none; flex: none; height: calc(var(--bar-h) - 6px); width: auto; pointer-events: none; user-select: none; }
.stage:has(.half:not(.is-empty)) .bar-art { display: block; }
@media (max-width: 430px) {
  /* スマホ幅：左は必要な幅だけにして、残りをマイクの案内に回す。右のメイドさんは画面のはしまで寄せる */
  /* オムライス＋マイクの案内を、左右のメイドさんのまんなかに置く（余った幅を左右に半分ずつ） */
  .bar { display: flex; }
  .bar-left { flex: none; }
  .bar-right { display: contents; }
  .talk { flex: none; margin-left: auto; }
  .bar-right .mic-note { flex: 0 1 auto; margin-right: auto; }
  /* 右のメイドさんを大きくするぶん、オムライスと歯車を少しだけ小さくして場所を作る */
  .bar-right .bar-art { height: 106px; margin-right: -8px; }
  .talk { width: 100px; height: 100px; }
  .tools .tool { width: 40px; height: 40px; }
}
/* iPhone SE くらいの幅では、マイクの案内の文字を優先して、右のメイドさんは出さない */
@media (max-width: 350px) { .stage:has(.half:not(.is-empty)) .bar-right .bar-art { display: none; } }
/* 丸がつぶれないように縮ませない */
.tools { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: none; }
.tool {
  flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%;
  background: transparent; color: #fff;
  display: grid; place-items: center;
}
.tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool[aria-pressed="true"] { background: #fff; color: var(--ribbon); border-color: #fff; }

/* ---------- お知らせ ---------- */
.toast {
  position: fixed; z-index: 20; left: 14px; right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 13px 18px; border-radius: 18px;
  background: var(--ng); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(120, 30, 70, .3);
}
.toast.info { background: var(--ink); }

/* ---------- 設定 ---------- */
.sheet {
  width: 100%; max-width: 560px; height: 100%; max-height: none;
  margin: 0 auto; padding: 0; border: 0;
  background: var(--white); color: var(--ink);
}
.sheet::backdrop { background: rgba(168, 42, 91, .45); }
.sheet-inner {
  display: flex; flex-direction: column; gap: 20px;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
}
.sheet-head {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 1;
  margin: calc(-14px - env(safe-area-inset-top)) -18px 0;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  background: var(--pink-100); border-bottom: 2px solid var(--pink-200);
}
.sheet-head h1 { margin: 0; font-size: 20px; font-weight: 900; color: var(--ribbon-deep); }
.sheet-head img { height: 44px; width: auto; }
.close {
  min-height: 44px; padding: 0 20px; margin-left: auto;
  border: 0; border-radius: 22px;
  background: var(--ribbon); color: #fff; font-weight: 700;
  box-shadow: 0 3px 0 var(--ribbon-deep);
}

.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field legend, .two label {
  display: block; padding: 0; margin: 0 0 6px;
  font-size: 14px; font-weight: 700; color: var(--ribbon-deep);
}
.field input[type="text"], .field input[type="password"], .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--pink-200); border-radius: 14px;
  background: var(--pink-50); color: var(--ink);
  font-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ribbon); background: var(--white); }
.field textarea { min-height: 200px; line-height: 1.55; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #b999a5; }
.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mini {
  min-width: 64px; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--pink-300); border-radius: 14px;
  background: var(--white); color: var(--ribbon-deep); font-size: 14px; font-weight: 700;
}
.mini.reset { margin-top: 10px; width: 100%; }
.note { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.note a { color: var(--ribbon-deep); font-weight: 700; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: var(--pink-100); }
.seg button {
  min-height: 44px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ink-soft); font-weight: 700;
}
.seg button[aria-checked="true"] { background: var(--white); color: var(--ribbon-deep); box-shadow: 0 2px 0 var(--pink-200); }

.wide {
  width: 100%; min-height: 50px;
  border: 2px solid var(--ribbon); border-radius: 25px;
  background: var(--white); color: var(--ribbon-deep); font-weight: 700;
}
.wide:disabled { opacity: .5; }
.result { margin: 8px 0 0; min-height: 1.4em; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.result.ok { color: var(--ok); }
.result.ng { color: var(--ng); }

.check { display: grid !important; grid-template-columns: auto 1fr; gap: 12px; align-items: center; color: var(--ink) !important; font-size: 15px !important; margin: 0 !important; }
.check input { width: 24px; height: 24px; accent-color: var(--ribbon); }

.logs summary { font-size: 14px; font-weight: 700; color: var(--ribbon-deep); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.logs pre {
  margin: 0; padding: 12px; border-radius: 14px;
  background: var(--pink-50); color: var(--ink);
  font-family: var(--font); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto;
}

@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 350px) {
  :root { --bar-h: 112px; }
  .talk { width: 94px; height: 94px; }
  .mic-label { font-size: 13px; }
  .mic-guest .mic-label { font-size: 14px; }
  .mic-guest .status { font-size: 12.5px; line-height: 1.2; }
  .mic-note { gap: 3px; }
  .mic-guest, .stage:not(.same-way) .mic-guest { padding-top: 0; padding-bottom: 0; }
  .mic-guest { padding-bottom: 3px; }
  .stage:not(.same-way) .mic-guest { padding-top: 3px; }
  .intro-chip { padding: 0 12px 0 10px; gap: 6px; font-size: 14px; }
  .type-chip .opt { display: none; }
  .flip-chip { min-width: 44px; padding: 3px 4px; font-size: 10px; }
  .stop-badge { width: 32px; height: 32px; }
  .half-inner { padding-left: 14px; padding-right: 14px; }
  .status { font-size: 12px; }
  .tool { width: 40px; height: 40px; }
  .sticker { height: 38px; }
  .sticker.logo { height: 36px; }
  .lang-panel, .intro-langs { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .lang-panel button { font-size: 15px; }
  .intro-langs button { font-size: 13px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .talk .ring, .line.live::after { animation: none !important; }
  .talk .ring, .art { transition: none; }
}

/* ============================================================
   ここから下：ラーメン店の見本用の上書き
   ============================================================ */

/* お客さん側＝墨色の和紙。チラシ（お品書き）の黒い地と同じ雰囲気 */
.half.guest {
  background-color: var(--sumi);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .06), transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(255, 255, 255, .05), transparent 50%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px);
  color: #fff;
}
/* スタッフ側＝生成りの和紙（細い繊維の筋） */
.half.cast {
  background-color: var(--pink-100);
  background-image:
    repeating-linear-gradient(62deg, rgba(120, 90, 50, .045) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-28deg, rgba(120, 90, 50, .035) 0 1px, transparent 1px 13px);
  background-size: auto;
}

/* 見出しは明朝 */
.intro-top h2, .sheet-head h1, .intro-go, .close { font-family: var(--font-head); letter-spacing: .04em; }

/* ---------- お店のロゴ（朱の判子「らーめん」＋筆文字の店名） ---------- */
.sticker.logo {
  display: inline-flex; align-items: center; gap: 7px;
  height: 48px; width: auto; color: var(--ink);
}
.half.guest .sticker.logo { color: #fff; }
.logo-seal {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 4px;
  background: var(--ribbon); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 11.5px; line-height: 1.05; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.logo-name { font-family: var(--font-brush); font-size: 27px; line-height: 1; white-space: nowrap; letter-spacing: .04em; }
.sheet-head .sticker.logo { margin-left: 0; height: 44px; }

/* 「人気 定番」の朱い札（チラシの丼の左上の札と同じ） */
.sticker.badge {
  display: inline-flex; flex-direction: row-reverse; gap: 1px;
  width: auto; height: auto; min-width: 0; max-height: none; padding: 5px 6px;
  border-radius: 3px; background: var(--ribbon); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 15px; line-height: 1.05;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.sticker.badge span { writing-mode: vertical-rl; letter-spacing: .05em; }

/* ---------- 待ち受けのイラスト ---------- */
.art-bowl {
  height: min(62%, 230px); max-width: 52%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}
.art-lantern { height: min(70%, 250px); filter: drop-shadow(0 6px 10px rgba(80, 20, 10, .25)); }
.empty { color: var(--ribbon-deep); font-family: var(--font-head); font-weight: 800; }
.half.guest .empty { color: var(--gold); }

/* ---------- 会話のふきだし ---------- */
.half.guest .line.them { background: var(--sumi-2); border: 1.5px solid var(--sumi-line); color: #fff; }
.half.guest .line.them.now { box-shadow: 0 4px 0 rgba(0, 0, 0, .45); border-color: #5c544d; }
.half.guest .line.me { color: #cbbfb2; border-left-color: var(--gold); }
.half.guest .line.me.check { color: #fff; }
.half.cast .line.them { background: var(--white); border: 1.5px solid var(--pink-200); }
.half.cast .line.them.now { box-shadow: 0 4px 0 var(--pink-200); }
.line.them { border-radius: 14px 14px 14px 4px; }
.line.them.now { border-radius: 18px 18px 18px 5px; }

/* ---------- お客さん側：言語ボタンと一覧（墨の地） ---------- */
.half.guest .lang-chip { background: var(--sumi-2); color: #fff; border-color: var(--gold); }
.half.guest .lang-chip .cur { background: var(--ribbon); color: #fff; }
.lang-panel { background: var(--sumi); }
.lang-panel button { background: var(--sumi-2); border-color: var(--sumi-line); color: #fff; }
.lang-panel .pick-cur { color: #b9ab9c; }
.lang-panel button[aria-pressed="true"] { background: var(--ribbon); border-color: var(--ribbon); }

/* ---------- まんなかの帯：朱赤に、上下は雷紋ふうの金と墨の帯 ---------- */
.bar { background: var(--ribbon); }
.bar::before, .bar::after {
  height: var(--frill);
  background-color: var(--sumi);
  background-image:
    linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 8px, var(--gold) 8px 10px, transparent 10px),
    linear-gradient(var(--gold) 0 2px, transparent 2px calc(100% - 2px), var(--gold) calc(100% - 2px));
  background-size: 16px 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
}
.bar::before { top: calc(var(--frill) * -1 + .5px); }
.bar::after { bottom: calc(var(--frill) * -1 + .5px); }
.mic-label { font-family: var(--font-head); letter-spacing: .03em; }

/* マイクのボタン＝らーめんの丼 */
.talk { border-color: #fffaf1; background: #fffaf1; box-shadow: 0 5px 0 var(--ribbon-deep), 0 8px 18px rgba(0, 0, 0, .35); }
.stop-badge { border-color: var(--ribbon); }
.talk .ring { border-color: var(--gold); }

/* 帯のかざり：左は赤ちょうちん、右は丼 */
.bar-art { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.bar-left .bar-art { height: calc(var(--bar-h) - 10px); }
.bar-right .bar-bowl { height: 84px; }
@media (max-width: 430px) { .bar-right .bar-bowl { height: 76px; margin-right: 0; } }

/* ---------- スタッフ側のボタン ---------- */
.intro-chip { border-radius: 10px; }
.type-chip, .flip-chip { border-radius: 10px; }
.intro-go { border-radius: 12px; box-shadow: 0 4px 0 var(--ribbon-deep), 0 -12px 14px var(--pink-50); }
.close, .lang-chip { border-radius: 10px; }
.mini, .wide, .seg, .seg button, .intro-find, .intro-langs button, .lang-panel button, .type-text,
.field input[type="text"], .field input[type="password"], .field select, .field textarea { border-radius: 10px; }

/* 設定・お知らせ */
.sheet-head { background: var(--pink-100); border-bottom-color: var(--ribbon); }
.sheet::backdrop { background: rgba(29, 27, 26, .6); }
.toast { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.toast.info { background: var(--sumi); }

@media (max-width: 350px) {
  .logo-name { font-size: 22px; }
  .logo-seal { width: 32px; height: 32px; font-size: 10px; }
  .sticker.logo { height: 38px; }
  .sticker.badge { font-size: 13px; padding: 4px 5px; }
}

/* 写真に差し替え（2026年10月17日）：お客さん側の地は、チラシと同じ黒い和紙の写真 */
.half.guest {
  background-color: #3a3a3a;
  background-image: linear-gradient(rgba(20, 18, 17, .35), rgba(20, 18, 17, .35)), url("../img/washi-dark.jpg");
  background-size: cover; background-position: center;
}
.art-bowl { height: min(64%, 250px); max-width: 58%; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .6)); }
.talk-omu { transform: none; }
.stage:not(.same-way) .talk-omu { transform: rotate(180deg); }

/* 散らした葉っぱ（2026年10月17日）。お客さん側は和紙の上にくっきり、スタッフ側はうすく */
.half.guest {
  background-image: url("../img/leaves.svg"), linear-gradient(rgba(20, 18, 17, .35), rgba(20, 18, 17, .35)), url("../img/washi-dark.jpg");
  background-size: cover, cover, cover; background-position: center;
}
.half.cast {
  background-image: url("../img/leaves-light.svg"),
    repeating-linear-gradient(62deg, rgba(120, 90, 50, .045) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-28deg, rgba(120, 90, 50, .035) 0 1px, transparent 1px 13px);
  background-size: cover, auto, auto; background-position: center;
}
/* 帯の右の辛みそ：「辛」の札があるぶん、少し大きめ */
.bar-right .bar-bowl { height: 90px; }
@media (max-width: 430px) { .bar-right .bar-bowl { height: 80px; } }

/* イラスト素材に差し替え（2026年10月17日）。スタッフ側の右下に、営業中の提灯・湯気の丼・替え玉無料の吹き出しを並べる */
.half.cast .art { filter: drop-shadow(0 4px 6px rgba(80, 40, 20, .18)); }
.half.cast .art-lantern { right: 14px; height: min(60%, 200px); max-width: none; }
.half.cast .art-illbowl { right: calc(14px + min(60%, 200px) * .36); height: min(42%, 140px); max-width: none; }
.half.cast .art-kaedama {
  right: calc(20px + min(60%, 200px) * .36 + min(42%, 140px) * .62);
  bottom: calc(10px + min(42%, 140px) * .62 + env(safe-area-inset-bottom));
  height: min(28%, 92px); max-width: none; transform: rotate(-6deg);
}
/* イラストのぶん、「押してスタート」は左上寄りに */
.half.cast .empty { margin: 14px 0 auto; }
/* お客さん側：写真の丼に「本日のおすすめ」の札 */
.half.guest .art-osusume {
  right: 18px; bottom: calc(10px + min(64%, 250px) * .9);
  height: min(12%, 40px); max-width: none; transform: rotate(-4deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
}
.stage.same-way .half.guest .art-osusume { bottom: calc(10px + var(--frill) + min(64%, 250px) * .9); }
/* 帯の左の提灯 */
.bar-left .bar-lantern { height: calc(var(--bar-h) - 14px); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
/* 最初の説明の画面：いちばん上にのれん */
.intro-noren { display: block; width: min(100%, 420px); height: auto; margin: 2px auto 6px; }
.intro-top img { height: 56px; }

/* ---------- LINEのような並び（2026年10月17日）：相手の言葉は左、自分の言葉は右。どちらも同じ大きさのふきだし ---------- */
.log { align-items: stretch; }
.msg { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 88%; align-self: flex-start; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg .who { padding: 0 10px; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; color: var(--ink-soft); }
.line.me, .line.me.check {
  padding: 8px 14px; border-left: 0; border-radius: 18px 18px 6px 18px;
  font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--ink); opacity: .62;
}
.line.me.latest { opacity: 1; }
/* ラーメン版の色：お客さん側（墨）の自分は金茶、スタッフ側（和紙）の自分は薄い朱 */
.half.guest .line.me, .half.guest .line.me.check { background: #4a3b24; border: 1.5px solid #6e5732; color: #fff; }
.half.cast .line.me { background: #f6d9cf; border: 1.5px solid #e8b3a3; }
.half.guest .msg .who { color: #cbbfb2; }

/* ---------- カンペ（ボタンで読む説明）。2026年10月18日 ---------- */
/* スタッフ側の上のボタンが1段に入りきらないときは、カンペのボタンを2段目に回す（つぶして縦書きにならないように） */
.half.cast .half-head { flex-wrap: wrap; row-gap: 8px; }
.half.cast .half-head .card-chip { flex: none; padding: 0 14px 0 12px; gap: 6px; white-space: nowrap; }
.card-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 64px; padding: 9px 12px; text-align: left;
  border: 1.5px solid var(--pink-200); border-radius: 14px;
  background: var(--white); color: var(--ink);
}
.card-btn:active { background: var(--pink-100); }
.card-btn:disabled { opacity: .5; }
.card-title { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.card-body {
  font-size: 12px; line-height: 1.4; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-edit { margin-top: 14px; }
.field-title { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ribbon-deep); }
.card-count { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.card-list { display: grid; gap: 6px; margin-top: 10px; }
.card-item { border: 1.5px solid var(--pink-200); border-radius: 14px; background: var(--white); }
.card-item summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
  font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none;
}
.card-item summary::-webkit-details-marker { display: none; }
.card-item summary::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg) translateY(-2px); }
.card-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.card-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-item[open] { padding: 0 12px 12px; }
.card-item[open] summary { padding: 0 2px; }
.card-item label { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field .card-item textarea { min-height: 110px; }
.card-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.card-row .mini:disabled { opacity: .4; }
.card-del { color: var(--ng); }
.card-add { margin-top: 10px; }
@media (max-width: 350px) {
  .card-buttons { grid-template-columns: 1fr; }
}

/* ---------- 画面を左右に固定する（2026年10月18日。ナギサ「スマホで左右に揺れてうざい」） ----------
   ページ全体を動かさず、スクロールする場所（会話・パネル・設定）も縦だけにする。
   ピンチや入力欄の自動ズームで横にずれないよう、index.html の viewport でも拡大を止めている */
html { overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; overflow: hidden; }
.log, .lang-panel, .intro-panel, .sheet, .sheet-inner { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }