/* 宅飲み横丁 ─ 見た目
   色は 16bit 風のパレットと揃えてある。変えるときは js/tavern.js の C と合わせる。 */

:root{
  --paper:#efe5cd; --paper2:#e7dcc0; --rule:#d8cbaa;
  --ink:#2c2418;   --ink-soft:#6a5c46;
  --shu:#c1402c;   --shu-deep:#9a2f20;
  --amber:#e0a23e; --amber-soft:#f0cd83;
  --wood:#3a2820;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:#120c07;color:var(--ink);
  font-family:"Shippori Mincho",serif;
  overflow:hidden;
  overscroll-behavior:none;      /* 引っぱって再読み込みされるのを防ぐ */
}

/* ── 画面の分け方 ──
   ★横長（デスクトップ・タブレット横）は**左右2列**。店が左、帳面が右。
     一度これを上下積みに一本化して全体に最大幅（520px）をかけたが、
     **広い画面で左右が真っ黒に余る**ので戻した。
   ★縦長（スマホなど）は**上下積み**。左右2列のままだと店の欄が
     「幅226・高さ844ドット」になり、部屋を小さく切れば黒帯だらけ、
     切らなければ店が縦に伸びて大きな店舗になる。どちらも駄目だった。
   ★店の割合72%は、これ未満だと倍率が1段下がって
     キャラが32px→16pxに落ちるため（実測の崖）。 */
/* ★店の欄は「店が収まる幅」で止める。伸ばすと中の闇が増えるだけ
     （幅1270だと画面の62%が闇だった）。余りは帳面＝紙に渡す。
     760px は 店244ドット × 倍率3 ＝ 732px が収まる幅。 */
.app{height:100dvh;display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr)}

@media (orientation:portrait) and (max-width:1100px){
  /* ★店を72%にしたら、残り28%が自室（名前・品書き・来店ボタン）でほぼ埋まり、
     **帳面が見えなくなった**。62%に下げて帳面に場所を戻す。
     倍率は byRoom で決まっているので、ここを下げてもキャラの大きさは変わらない。 */
  /* ★58% は倍率が落ちない下限（実測）。これ未満だと byHeight が1段下がって
     キャラが32px→24pxになる。帳面に渡せるのはここまで。 */
  .app{grid-template-columns:1fr;grid-template-rows:62dvh minmax(0,1fr)}
  /* ★見出しをたたくと帳面を広げる（読むときだけ）。
     比率をどこに置いても、片方は必ず窮屈になる。決め打ちをやめて、
     そのときに見たい方へ振れるようにした。 */
  .app.read{grid-template-rows:26dvh minmax(0,1fr)}
  .book-hd{cursor:pointer}
  .book-hd .grip{display:inline}
  .room{padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
  .room .lead{margin-bottom:4px}
  .picks{margin-bottom:4px}
  .go-btn{padding:7px}
  .scene{border-right:none;border-bottom:2px solid #060403}
}

/* ══ 左：店 ══ */
.scene{position:relative;background:#0f0a06;overflow:hidden;border-right:2px solid #060403}
#tavern{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;
}
/* ★店の名札（.plaque）は撤去した（2026-08-01）。
   画面の中に店名を出すと、壁のいちばん上（神棚や時計を掛ける場所）を
   HTML が占領する。店名はタブとホーム画面のアイコンに出ていれば足りる。 */


/* ★字の大きさは 2026-08-01 に**全体を底上げ**した（9〜12px → 11〜15px）。
   40〜50代が疲れた夜に片手で見る画面なので、小さい字は「出しているつもりで
   出せていない」ことになる。下げるときは、その一箇所だけにすること。 */

/* ══ 右：帳面 ══ */
.book{
  display:flex;flex-direction:column;min-height:0;
  background:
    repeating-linear-gradient(180deg,transparent 0 29px,rgba(120,100,60,.09) 29px 30px),
    radial-gradient(120% 80% at 30% -10%,#f4ebd6 0%,var(--paper) 45%,var(--paper2) 100%);
}
/* ★見出しは一行に収める。「今夜の帳面」「日付」「N人 来店中」を横に並べる。
   縦に積むと、それだけで帳面の欄を2行ぶん食う（スマホでは記録1件ぶん）。 */
.book-hd{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:6px 11px 5px;border-bottom:2px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
}
.book-hd h1{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
/* ★取っ手は**上下に積んだときだけ**意味がある。
   左右2列のときは帳面がすでに画面の高さいっぱいで、広げる余地が無い。
   出しておくと「押しても変わらない」ものになる。 */
.book-hd .grip{display:none}
.book-hd .grip{
  margin-left:6px;font-family:"DotGothic16",monospace;font-size:11px;
  color:var(--ink-soft);white-space:nowrap;
}
.book-hd .sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.book-hd .date{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft)}
/* ── 店ぜんたいへの乾杯（千社札）──
   帳面の乾杯は「おつまみに」贈るもので相手が要る。こちらは相手を選ばない。
   ★見出しに置く。行の中に混ぜると、どの行に贈ったのか分からなくなる。 */
.kanpai{
  margin-left:auto;
  font-family:"DotGothic16",monospace;font-size:13px;letter-spacing:.14em;
  color:#f6ecd6;background:linear-gradient(180deg,#c1402c,#9a2f20);
  border:1px solid #6e2016;border-radius:2px;
  padding:4px 11px;cursor:pointer;
  box-shadow:0 2px 0 #6e2016;
}
.kanpai:active{transform:translateY(2px);box-shadow:0 0 0 #6e2016}
.kanpai:disabled{
  background:#cbbf9f;border-color:#a89a76;color:#f2ece0;
  box-shadow:0 2px 0 #a89a76;cursor:default;
}

.book-hd .live{
  display:flex;align-items:center;gap:5px;
  font-family:"DotGothic16",monospace;font-size:11px;color:var(--shu-deep);
}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--shu);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(193,64,44,.55)}
  70%{box-shadow:0 0 0 6px rgba(193,64,44,0)}
  100%{box-shadow:0 0 0 0 rgba(193,64,44,0)}
}

.scroll{flex:1;min-height:0;overflow-y:auto;padding:2px 9px 10px;-webkit-overflow-scrolling:touch}
/* 帳面が横に広がりすぎると、短い一言の右に乾杯だけが遠く離れる。
   中身の幅は止めて、余った紙はそのまま余白にする（闇より紙の方が落ち着く）。 */
.book-hd > *, .scroll > *, .room > *{max-width:680px}
.scroll::-webkit-scrollbar{width:6px}
.scroll::-webkit-scrollbar-thumb{background:rgba(120,100,60,.3);border-radius:3px}

/* ── 帳面の一行 ── */
.entry{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:4px 2px;border-bottom:1px dashed rgba(140,120,80,.32);
  animation:drop .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes drop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* ── 自分の行 ──
   ぱっと見て自分の行だと分かる必要があるので、地の色をはっきり変える。
   帳面の紙（生成り）に対して、朱を薄く敷いた「朱書き」の見立て。
   薄い金の線だけだと、明るい画面では紙との差がほとんど出なかった。 */
.entry.mine{
  background:linear-gradient(90deg,rgba(193,64,44,.16),rgba(224,162,62,.13) 60%,rgba(224,162,62,.05));
  margin:0 -9px;padding-left:10px;padding-right:11px;
  border-left:4px solid var(--shu);
  border-bottom-color:rgba(193,64,44,.3);
}
.entry.mine .say{color:#5a2018}
.entry.flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{background:rgba(193,64,44,.26)}100%{background:transparent}}

.head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.stamp{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;color:var(--shu-deep);
  border:1px solid var(--shu);border-radius:2px;padding:0 3px;line-height:1.35;
  background:rgba(193,64,44,.05);
}
.entry.mine .stamp{border-color:var(--amber);color:#8a6013;background:rgba(224,162,62,.12)}
/* 誰の行かは、時刻より先に目に入るべき情報。小さすぎた。 */
.who{font-family:"DotGothic16",monospace;font-size:13px;font-weight:700;color:#4a3d2a}
.entry.mine .who{color:#8a6013}
/* 帰った人の行。消さずに、少しだけ引く */
.entry.left{opacity:.62}

.pair{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:2px}
/* ★酒とつまみの札は、帳面でいちばん読まれるところ。
     以前は 9px・薄い茶（#6a4a2c）で、紙の色（#e7dcc0）との差が足りず読めなかった。
     大きくして、濃くして、太字にする。 */
.chip{
  font-family:"DotGothic16",monospace;font-size:13px;font-weight:700;
  padding:1px 5px;border-radius:2px;line-height:1.25;
}
.chip.d{background:#33231b;color:#f4e3bb}
.chip.s{background:#f0e6c8;color:#3d2a16;border:1px solid #b9a473}
.pair .x{color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;font-size:11px}
.say{font-size:14px;line-height:1.3;font-weight:700}

/* ── 勘定（何杯目か・何を飲んできたか・いつから居るか） ──
   一人一枚の勘定に積む形にしてある。行は増やさない。 */
.tab{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-bottom:2px}
.tab[hidden]{display:none}
.tab .cups{
  font-family:"DotGothic16",monospace;font-size:11px;
  color:#8a6013;border:1px solid #d3bd85;border-radius:2px;
  padding:0 4px;background:rgba(224,162,62,.12);white-space:nowrap;
}
.tab .hist{font-family:"DotGothic16",monospace;font-size:11px;color:#5a4c36;opacity:1}

.notice{
  font-family:"DotGothic16",monospace;font-size:10px;color:#8a6013;margin-top:3px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .7s,max-height .7s;
}
.notice.show{opacity:1;max-height:20px}

/* ── 乾杯 ── */
/* ★アイコンと数字を**横に**並べる。縦に積むと45pxになり、
     それが帳面の一行の高さを決めてしまっていた（見える行数が減る）。 */
.cheers{
  position:relative;display:flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;padding:2px 4px;
  color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;
}
/* ★小さすぎて見えないと言われた場所。ここは絞らない。
     帳面で唯一たたく所なので、指の当たる大きさが要る。 */
.cheers .ico{font-size:24px;line-height:1;filter:grayscale(.3);transition:transform .15s}
.cheers .cnt{font-size:13px;line-height:1.2}
.cheers.done .ico{filter:none;transform:scale(1.12)}
.cheers.done .cnt{color:var(--shu-deep)}
.cheers:disabled{cursor:default}
.float{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  font-size:19px;pointer-events:none;opacity:0;
}
.float.go{animation:up 1s ease-out forwards}
@keyframes up{
  0%{opacity:0;transform:translate(-50%,0) scale(.7)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-26px) scale(1.1)}
}

/* ══ 自室 ══ */
/* ── 来店したあとの自室 ──
   ★できるのはお代わりだけなので、1行に畳む。
     スマホでは自室が帳面の欄の4割を占めていて、記録が2件しか見えなかった。 */
.room.after{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom));
}
.room.after .lead{margin:0;gap:5px}
.room.after .lead .q{display:none}
.room.after .picks{margin:0;flex:0 1 auto;gap:3px}
.room.after .pick{padding:2px 6px;border-color:#cbb98e;background:#efe6cf;cursor:default}
.room.after .pick .pl{display:none}
.room.after #pick-say{display:none}
.room.after .go-btn{flex:1 1 130px;margin:0;padding:7px}
.room.after .disclose{flex-basis:100%;margin:0}

.room{
  border-top:2px solid var(--rule);
  background:linear-gradient(180deg,#efe6cf,#e3d7ba);
  padding:8px 11px calc(8px + env(safe-area-inset-bottom));
}
.room .lead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.room .q{font-size:13px}

/* ── 名乗り ──
   ★下線だけの文字では「入力できる」と気づかれなかった。
     枠と白地と鉛筆の印を付けて、入力欄そのものの見た目にする。 */
.myname{
  display:flex;align-items:center;gap:5px;min-width:0;
  background:#fbf6e6;border:1.5px solid #cbb98e;border-radius:3px;
  padding:3px 7px;cursor:pointer;
}
.myname .ml{font-family:"DotGothic16",monospace;font-size:10px;color:var(--ink-soft)}
.myname .mv{
  font-family:"DotGothic16",monospace;font-size:13px;color:var(--ink);
  max-width:8.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.myname .mp{font-size:11px;color:#8a6013;line-height:1}
.myname:hover{border-color:var(--amber);background:#fffdf3}

/* 名乗りを決める紙 */
.namebox{padding:10px 0 4px}
.namebox .nh{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.namebox .ni{
  width:100%;font-family:"DotGothic16",monospace;font-size:13px;
  padding:8px 9px;border:1.5px solid #cbb98e;border-radius:3px;
  background:#fbf6e6;color:var(--ink);
}
.namebox .ni:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(224,162,62,.3)}
/* 何文字目かを常に見せる（上限で黙って切れるのを防ぐ） */
.namebox .nfield{position:relative}
.namebox .ni{padding-right:52px}
.namebox .nc{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);
  pointer-events:none;
}
.namebox .nc.full{color:var(--shu-deep)}
.namebox .ne{
  margin:5px 0 0;min-height:1.2em;
  font-family:"DotGothic16",monospace;font-size:12px;color:var(--shu-deep);
}
.namebox .go-btn{margin-top:4px}
.namebox .nrand{
  display:block;margin:7px auto 0;background:none;border:none;
  font-family:"DotGothic16",monospace;font-size:12px;color:var(--ink-soft);
  text-decoration:underline;cursor:pointer;
}
/* ── いま何を選んでいるか（自室の1行） ──
   選ぶ操作は品書き（全画面）に逃がしてある。ここは表示だけなので、
   酒を7種から21種に増やしても、この高さは変わらない。 */
.picks{display:flex;gap:4px;margin-bottom:5px}
.pick{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px;
  background:#efe6cf;border:1.5px solid #cbb98e;border-radius:3px;
  padding:4px 6px;cursor:pointer;text-align:left;
}
.pick .pl{font-family:"DotGothic16",monospace;font-size:10px;color:var(--ink-soft)}
.pick .pv{
  font-family:"DotGothic16",monospace;font-size:13px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pick.set{border-color:var(--amber);background:#f6efdb}
.pick.set .pv{color:#8a6013}

/* ── 品書き ──
   系統は見出しであって扉ではない。全部を縦に並べ、区切りとして置くだけ。
   系統を選ばないと中身が見えない形にすると、探す手間が1段増える。 */
.sheet{
  position:fixed;inset:0;z-index:40;display:flex;
  align-items:center;justify-content:center;padding:12px;
  background:rgba(14,9,5,.74);
}
.sheet[hidden]{display:none}          /* display:flex は hidden 属性より強い */
.sheet-in{
  display:flex;flex-direction:column;width:100%;max-width:430px;max-height:82dvh;
  background:radial-gradient(120% 80% at 30% -10%,#f4ebd6 0%,var(--paper) 45%,var(--paper2) 100%);
  border:1px solid #b9a679;border-radius:5px;box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.sheet-hd{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;border-bottom:2px solid var(--rule);
}
.sheet-hd h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.12em}
.sheet-x{
  margin-left:auto;background:none;border:none;color:var(--ink-soft);
  font-size:14px;cursor:pointer;padding:2px 5px;
}
.sheet-body{flex:1;min-height:0;overflow-y:auto;padding:4px 11px 12px}
.sheet-body::-webkit-scrollbar{width:6px}
.sheet-body::-webkit-scrollbar-thumb{background:rgba(120,100,60,.3);border-radius:3px}

.grp{margin-top:12px}
/* 系統の見出し＝開閉の扉 */
.ghead{
  display:flex;align-items:center;gap:8px;width:100%;
  margin:0 0 5px;padding:6px 4px;cursor:pointer;text-align:left;
  background:none;border:none;border-bottom:1px dashed rgba(140,120,80,.45);
  font-family:"DotGothic16",monospace;font-size:14px;font-weight:700;
  letter-spacing:.1em;color:#4a3d2a;
}
.ghead::after{content:'▸';margin-left:auto;color:var(--ink-soft);font-size:12px}
.ghead.open::after{content:'▾'}
.ghead .gn{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:400;
  color:var(--ink-soft);
}
.grp .items[hidden]{display:none}
.grp .items{display:flex;flex-wrap:wrap;gap:5px}
/* ★品書きは選ぶための画面。ここが読めないと選べない。
     9px は小さすぎ、地と字の明度差も足りなかった。 */
.mi{
  font-family:"DotGothic16",monospace;font-size:13px;font-weight:700;
  padding:7px 12px;border-radius:3px;cursor:pointer;white-space:nowrap;
  border:1.5px solid transparent;
}
.mi.d{background:#33231b;color:#f4e3bb}
.mi.s,.mi.t{background:#f0e6c8;color:#3d2a16;border-color:#b9a473}
.mi.sel{border-color:var(--amber);box-shadow:0 0 0 2px rgba(224,162,62,.35)}

.go-btn{
  width:100%;font-family:"Shippori Mincho",serif;font-weight:700;font-size:15px;
  letter-spacing:.06em;padding:9px;border:none;border-radius:4px;cursor:pointer;
  color:#f6ecd6;background:linear-gradient(180deg,#c1402c,#9a2f20);
  box-shadow:0 2px 0 #6e2016;margin-top:2px;
}
.go-btn:active{transform:translateY(2px);box-shadow:0 0 0 #6e2016}
.go-btn:disabled{background:#b7ac92;box-shadow:0 2px 0 #948a72;color:#efe6cf;cursor:default}

/* アフィリエイト等の表示（空なら見えない） */
.disclose{
  margin:5px 0 0;font-family:"DotGothic16",monospace;font-size:11px;
  color:var(--ink-soft);opacity:.75;line-height:1.4;
}
.disclose:empty{display:none}

/* ホーム画面に追加の案内 */
/* display:flex は hidden 属性より強い。これがないと、出さない判断をしても
   （iOS 以外・一度閉じたあと・全画面のとき）帯が出たままになる。 */
.a2hs[hidden]{display:none}
.a2hs{
  position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:20;display:flex;align-items:center;gap:8px;
  background:#241a15;color:#f0dcae;border:1px solid #5a3a24;border-radius:5px;
  padding:9px 11px;font-family:"DotGothic16",monospace;font-size:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.a2hs button{
  margin-left:auto;background:none;border:none;color:#f0dcae;
  font-size:13px;cursor:pointer;padding:2px 4px;
}

/* ══ 狭い画面（スマホ）ではさらに詰める ══
   店を広く取るぶん帳面が細くなるので、字も余白も一段落とす。
   乾杯のアイコンと「〜に」だけは落とさない。
   何に乾杯しているかが読めなくなると、企画の芯（人ではなく
   おつまみに贈る）が伝わらなくなるため。 */

/* 動きを控える設定の人には静かに */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ══ 帳面と自室の作り ══
   ★もともと「狭い画面用の縮小」として書いていたものを、全機種の作りに昇格した。
     画面の形を一本化したので、機種で分ける理由が無くなった。
   ★節約するのは幅ではなく高さ。字は読める大きさのまま、行数を減らす。 */

/* ══ 上下に積んだので、帳面は「細い」のではなく「低い」 ══
   ★以前ここは全部の字を小さくしていた。細い列だった頃の対処で、
     いまは全幅あるので**読みにくくしているだけ**だった。
     節約するのは幅ではなく高さ。字は戻して、行数を減らす。 */
/* ★縦向きは1行に多くを詰めるので、横並びより**一段小さく**する。
   全体を底上げした（2026-08-01）ぶん、ここだけ戻している。
   小さすぎた頃（9〜11px）には戻さないこと。下限は10px。 */
.book-hd{padding:4px 9px 3px;gap:7px}
.book-hd h1{font-size:13px}
.book-hd .date,.book-hd .live{font-size:10px}
/* ★1件を低くして、**帳面が何件も見える**ようにする。
   字を読める大きさに保ったまま、余白と行間だけを削る。
   いちばん読ませたい「ひとこと」は下げない。 */
.stamp{font-size:11px;line-height:1.2;padding:0 3px}
.who{font-size:11px}
.chip{font-size:11px;padding:1px 4px;line-height:1.2}
.pair .x{font-size:10px}
.tab .cups{font-size:10px;padding:0 3px}
.tab .hist{font-size:10px}
.notice{font-size:9px}
.head,.pair,.tab{margin-bottom:1px}
/* 飲んできた並びは長くなる。**1行に抑えて、はみ出したら畳む** */
.tab .hist{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroll{padding:2px 9px 8px}

/* 時刻・名前・酒・つまみを**1行に並べる**（横に余裕があるので畳める）。
   一言と勘定だけ改行する。これで1件が4行から3行になる。 */
.entry{padding:2px 1px;gap:6px}
.entry > div:first-child{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;
}
.head,.pair{margin-bottom:0}
.tab,.say,.notice{flex-basis:100%}

.say{font-size:12px;line-height:1.25;font-weight:700}
.tab{margin-bottom:0}
/* 全幅あるので、飲んだ物の並びも出せる（細い列では省いていた） */
.tab .hist{display:inline}

/* ★乾杯だけは縮めない。ここが読めない・押せないと帳面の意味が無い */
.cheers{padding:2px 4px}
.cheers .ico{font-size:20px}
.cheers .cnt{font-size:12px}
.room{padding:5px 8px calc(4px + env(safe-area-inset-bottom))}
.room .lead{gap:5px;margin-bottom:3px}
.room .q{font-size:11px}
.myname{padding:2px 6px}
.myname .mv{font-size:11px;max-width:8em}
.pick{padding:4px 7px}
.pick .pv{font-size:11px;font-weight:700}
.go-btn{font-size:12px;padding:7px}
  /* 下の帯は行数がそのまま帳面を押す。出典は小さく、余白も詰める */
  .disclose{font-size:10px;margin-top:2px}
  .about{font-size:10px;margin-left:8px}
  .room.after{gap:5px}
.kanpai{font-size:11px;padding:4px 8px;right:6px;bottom:12px}


/* ══ 初めての一枚（暖簾） ══
   ★店の絵の上にかぶせる。裏に店が透けて見えることで、
     「これから入る場所」だと形で伝わる。 */
.intro{
  position:fixed;inset:0;z-index:60;display:flex;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(10,6,4,.82);
}
.intro[hidden]{display:none}
.intro-in{
  max-width:420px;width:100%;text-align:center;
  padding:22px 20px 20px;
  background:radial-gradient(120% 80% at 30% -10%,#f4ebd6 0%,var(--paper) 45%,var(--paper2) 100%);
  border:1px solid rgba(120,100,60,.45);
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  color:var(--ink);line-height:1.85;font-size:14px;
}
.intro-in h2{
  margin:0 0 12px;font-size:22px;letter-spacing:.18em;font-weight:700;
  padding-bottom:10px;border-bottom:2px solid var(--rule);
}
.intro-in p{margin:0 0 10px;text-align:left}
.intro-lead{text-align:center}
.intro-lead{font-weight:700}
.intro-quiet{color:var(--ink-soft);font-size:13px}
.intro-go{
  margin-top:8px;width:100%;padding:12px;cursor:pointer;
  background:var(--shu);color:#fff;border:none;
  font-size:15px;font-weight:700;letter-spacing:.14em;
}
.intro-go:hover{filter:brightness(1.08)}

/* 下の帯から、あとでも読み直せる */
/* 出典の右に置く。行を増やさない。 */
.about{
  background:none;border:none;padding:0;margin-left:10px;cursor:pointer;
  color:var(--ink-soft);font-size:11px;text-decoration:underline;
}


/* 品書きの下の「決める」帯。
   ★選ぶ（札を押す）と決める（この帯を押す）を分けるためのもの。
     押した瞬間に注文が通ると、眺めているだけのつもりが頼んだことになる。 */
.sheet-ft{padding:8px 11px calc(8px + env(safe-area-inset-bottom));border-top:2px solid var(--rule)}
.sheet-ft[hidden]{display:none}
.ft-go{
  width:100%;padding:12px;cursor:pointer;border:none;
  background:var(--shu);color:#fff;font-family:"Shippori Mincho",serif;
  font-size:15px;font-weight:700;letter-spacing:.1em;
}
.ft-go:disabled{background:#bdb39c;cursor:default}

/* 来店したあとは名乗りを触らせない（帳面に自分の行が出たあとなので） */
.room.after .myname{cursor:default;opacity:.8}
.room.after .myname .mp{display:none}

/* まだ頼んでいない行。札は1つだけ、色は控えめに。 */
.chip.seated{background:#e0d6bb;color:#6a5a3c;border:1px dashed #b9a473;font-weight:400}

/* ══ まだ暖簾をくぐっていないとき ══
   ★選ぶものを出さない。**店に入る前に酒を選ばせない。**
     出しておくと「選んでから入る」に見えるが、実際は入ってから選ぶ。 */
.room.pre .picks{display:none}
.room.pre .lead .q{display:none}

.say[hidden]{display:none}

/* 「いま N人」の右に「今夜 N人」。控えめに添える */
.book-hd .live .tally{margin-left:7px;color:var(--ink-soft);font-weight:400}

/* 来店ボタンと帰るボタンを横に並べる。
   ★帰るは**小さく、控えめに**。押しやすくすると、うっかり帰ることになる。
     かといって隠すと、帰り方が分からない。 */
.acts{display:flex;gap:6px;align-items:stretch}
.acts .go-btn{flex:1 1 auto;margin:0}
.leave-btn{
  flex:0 0 auto;padding:0 12px;cursor:pointer;
  background:none;border:1px solid var(--rule);color:var(--ink-soft);
  font-family:"Shippori Mincho",serif;font-size:13px;letter-spacing:.08em;
}
.leave-btn:hover{background:rgba(120,100,60,.08)}
.leave-btn[hidden]{display:none}
.room.after .acts{flex:1 1 130px}