/* =========================================================
   SHOP CHROME — entry gate / top (shelf+lobby) / detail pages
   Gameplay screens (room-screen) intentionally keep the plain
   dark UI above; only the surrounding "shop" pages use this.
   ========================================================= */

.rule-double {
  height: 5px;
  background-image: linear-gradient(to bottom, var(--shop-brass) 1px, transparent 1px, transparent 4px, var(--shop-brass) 4px, var(--shop-brass) 5px);
  opacity: 0.85;
}
.rule-double.on-dark {
  background-image: linear-gradient(to bottom, var(--shop-brass-light) 1px, transparent 1px, transparent 4px, var(--shop-brass-light) 4px, var(--shop-brass-light) 5px);
  opacity: 0.7;
}

.emblem {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--shop-brass-light);
  transform: rotate(45deg);
  display: grid;
  place-items: center;
}
.emblem span {
  transform: rotate(-45deg);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--shop-brass-light);
}

/* 箱の地の色(.tone-*)は styles/tokens.css にある ―― 棚と品書きだけでなく、
   解説ページ(server/pages.js)の題も同じ地を敷くため。 */

/* --- entry gate --- */
/* 暖簾(固定の丈)・名入れ(残りの高さの中央)・台(固定の丈)の三段を縦に
   積み、画面の高さちょうどに収める(issue #37)。ページ全体は縦にも横にも
   スクロールさせない - 名入れが収まりきらない極端に低い画面でだけ、真ん中
   の段が内側でスクロールする。
   地はほぼ黒の暖色。灯りは名入れの背後の一つだけで(.entry-card::before)、
   「静かな路地の奥、灯りの点る」の通りに暗がりから一か所だけが浮かぶ。
   入った先の店内(卓を見る等)は明るい紙色のままで、暗い路地→明るい店内に
   なる。
   暖簾の丈は幅で決まる(viewBox 620:190)。幅は画面の高さにも従わせて、
   低い画面で布が名入れの場所を食わないようにする。 */
#entry-screen.shop-entry {
  --noren-w: min(620px, 92vw, 58vh);
  --noren-h: calc(var(--noren-w) * 0.3065);
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding: 0 24px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(74, 53, 36, 0.32) 0%, rgba(74, 53, 36, 0) 70%),
    #0e0905;
}
#entry-screen.shop-entry.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry-layout {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  /* 光暈が段の縁で切れて見えないよう、内側スクロールの箱は見せない。 */
  scrollbar-width: none;
}
.entry-layout::-webkit-scrollbar { display: none; }

/* 上下の auto の余白で、収まるときは縦の中央、収まらないときは上から
   並べてスクロールさせる(justify-content:center だと上が切れて届かない)。 */
.entry-card {
  margin: auto 0;
  padding: 12px 0 14px;
  position: relative;
  isolation: isolate;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 名入れの背後の灯り。この画面で明るいのはここだけ。 */
.entry-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(820px, 150vw);
  height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(221, 192, 127, 0.13) 0%, rgba(221, 192, 127, 0.05) 38%, rgba(221, 192, 127, 0) 68%);
  z-index: -1;
  pointer-events: none;
}
.entry-card .emblem.gate {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-color: var(--shop-brass-light);
  box-shadow: 0 0 22px rgba(221, 192, 127, 0.35);
}
.entry-card .emblem.gate span { font-size: 1.35rem; color: var(--shop-brass-light); }

.shop-name {
  font-family: var(--shop-font-stamp);
  font-size: 2.5rem;
  letter-spacing: 0.16em;
  /* 字間は最後の字の右にも入る。その分だけ押し戻さないと、上の菱形の紋と
     中心がずれる。 */
  text-indent: 0.16em;
  color: var(--shop-brass-light);
  text-shadow: 0 0 30px rgba(221, 192, 127, 0.3);
  margin: 24px 0 0;
}
.gate-rule { width: 76px; margin-top: 20px; }

/* 何の店で、何をすれば入れるのか。この二行と下の但し書きが、これまで
   「棋楽軒とは？」の中にしかなかった - つまり入ってからしか読めなかった。 */
.gate-lede {
  font-family: var(--shop-font-display);
  font-size: 1.02rem;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: rgba(236, 225, 200, 0.78);
  margin: 22px 0 0;
  text-wrap: pretty;
  /* 狭い幅で「十三の遊び/を置いています」のように語の途中で折れないよう、
     文節で折る(対応していないブラウザは今までどおり)。 */
  word-break: auto-phrase;
}
.gate-lede.hidden { display: none; }

.gate-form { display: flex; gap: 10px; margin-top: 32px; }
.gate-form.hidden { display: none; }

#player-name-input {
  width: 296px;
  height: 52px;
  background: var(--shop-paper);
  border: 1px solid var(--shop-paper-line);
  border-radius: var(--radius);
  padding: 0 16px;
  font-family: var(--shop-font-body);
  font-size: 0.95rem;
  text-align: center;
  color: var(--shop-ink);
  box-shadow: 0 1px 2px rgba(36, 24, 16, 0.18), 0 6px 14px rgba(36, 24, 16, 0.1);
}
#player-name-input::placeholder { color: var(--shop-ink-soft); opacity: 0.6; }

/* 一度に出る道は一本だけになったので、塗りで押し出す必要がなくなった。
   輪郭に薄い伏せで、隣の紙の名前欄と釣り合う。 */
.gate-cta {
  height: 52px;
  background: rgba(221, 192, 127, 0.16);
  border: 1px solid var(--shop-brass-light);
  color: var(--shop-brass-light);
  padding: 0 32px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  font-family: var(--shop-font-body);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.gate-cta:hover { background: var(--shop-brass-light); color: var(--shop-walnut-deep); box-shadow: 0 0 24px rgba(221, 192, 127, 0.4); }

/* 名前をおまかせで入れるだけの脇役。入場より一段控えて、伏せなしの輪郭。 */
.gate-auto {
  height: 52px;
  background: transparent;
  border: 1px solid rgba(221, 192, 127, 0.45);
  color: rgba(236, 225, 200, 0.72);
  padding: 0 18px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  font-family: var(--shop-font-body);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.gate-auto:hover { border-color: var(--shop-brass-light); color: var(--shop-brass-light); }

/* 名前を先に入れておく戸口(#178)。上の段に名前欄と「別の名前にする」、下の段に
   幅いっぱいの「この名前で入る」。押すのは下の一つで済むので、それを真鍮の
   塗りで押し出す。 */
.gate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name other" "enter enter";
  width: 520px;
  max-width: 100%;
}
.gate-form.hidden { display: none; }
#player-name-input { grid-area: name; width: 100%; box-sizing: border-box; font-size: 1.05rem; }
.gate-form .gate-auto { grid-area: other; }
.gate-form .gate-cta {
  grid-area: enter;
  height: 56px;
  background: var(--shop-brass-light);
  color: var(--shop-walnut-deep);
  font-size: 1.05rem;
  font-weight: 700;
}
.gate-form .gate-cta:hover { background: #f0dcab; }

.gate-note {
  margin: 15px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(236, 225, 200, 0.45);
}
.gate-note.hidden { display: none; }

.noren {
  flex: 0 0 auto;
  width: var(--noren-w);
  position: relative;
  z-index: 1;
  pointer-events: none;
}
/* height を auto にして viewBox の比を保つ。--noren-h の式が成り立つのは
   この一行のおかげで、縦に潰すと裾の位置がずれる。 */
.noren svg { display: block; width: 100%; height: auto; }

/* 見本の箱(#66, sampler.js)。左下の台に箱を八つ積み、いちばん上の蓋の絵
   だけを見せる。台の段(.entry-sampler)は画面の下の帯で、名入れはその上に
   縦の中央で立つ。
   - スマホ・タブレット: 積んだ山ごと帯に収める(帯の丈 = 蓋 + 縞 + 板)。
   - 広い画面: 帯は題と点の段の丈だけ取り、蓋は帯から上へはみ出して名入れの
     左の空きに立つ(900px から)。
   蓋の大きさ(--lid)と箱の厚み(--box-t)で全体の寸法が決まる。 */
.entry-sampler {
  --lid: clamp(80px, 13vh, 112px);
  --box-t: 6px;
  --sampler-left: 12px;
  --sampler-bottom: 18px;
  --sampler-band: calc(var(--lid) + var(--box-t) * 8 + 8px + var(--sampler-bottom) + 10px);
  flex: 0 0 auto;
  position: relative;
  /* 地の左右の余白(24px)を越えて、画面の端から測る。 */
  align-self: stretch;
  margin: 0 -24px;
  height: var(--sampler-band);
  /* 名入れの段(.entry-layout, z-index 2)より手前 ―― はみ出した蓋を押せるように。 */
  z-index: 3;
  pointer-events: none;
}
.sampler {
  position: absolute;
  left: var(--sampler-left);
  bottom: var(--sampler-bottom);
  display: flex;
  align-items: flex-end;
  transition: opacity 0.6s ease;
}
/* 山の四角ぜんたいで名入れの段の押し場所を塞がないよう、押せるのは蓋と
   ‹ 点 › だけにする(題の脇の空きの上に「ルールを読む」が来ることがある)。 */
.sampler-lid,
.sampler-pager { pointer-events: auto; }
/* 品物の一覧が届くまでは場所だけ取る。 */
.entry-sampler.is-empty .sampler { opacity: 0; visibility: hidden; }
/* 山の上に落ちる灯り */
.sampler::before {
  content: "";
  position: absolute;
  left: -80px;
  right: -60px;
  top: -80px;
  bottom: -10px;
  background: radial-gradient(ellipse 50% 55% at 35% 45%, rgba(221, 192, 127, 0.1), rgba(221, 192, 127, 0) 70%);
  pointer-events: none;
}
.sampler-stack { position: relative; width: calc(var(--lid) + 8px); }

/* 蓋。いちばん上の箱だけが見えていて、少し傾けて置いてある。 */
.sampler-lid {
  display: block;
  position: relative;
  width: var(--lid);
  height: var(--lid);
  margin: 0 4px;
  transform: rotate(-3deg);
  transform-origin: 50% 100%;
  filter: brightness(0.9);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sampler-lid.dragging { cursor: grabbing; }
.sampler-lid:focus-visible { outline: 2px solid var(--shop-brass-light); outline-offset: 5px; }
.sampler-cover {
  position: absolute;
  inset: 0;
  display: none;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1), filter 320ms ease;
}
.sampler-cover.on { display: block; z-index: 2; }
/* 上の箱が滑り出す間、すぐ下で待っている箱。滑り終わると持ち上がる。 */
.sampler-cover.under { display: block; z-index: 1; transform: translateY(12px) scale(0.965); filter: brightness(0.55); }
/* 360ms は sampler.js の OUT_MS と揃える */
.sampler-cover.out-next { animation: sampler-out-next 360ms cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
.sampler-cover.out-prev { animation: sampler-out-prev 360ms cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
@keyframes sampler-out-next { to { transform: translate(-78%, 26px) rotate(-16deg); opacity: 0; } }
@keyframes sampler-out-prev { to { transform: translate(78%, 26px) rotate(16deg); opacity: 0; } }
.sampler-lid.dragging .sampler-cover.on { transform: translateX(var(--drag-x, 0)) rotate(var(--drag-r, 0deg)); transition: none; }
.sampler-cover .cover {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: calc(var(--lid) / 5);
  outline-offset: calc(var(--lid) / -18);
}
.sampler-cover .cover::after { inset: calc(var(--lid) / 19); }

/* 山の縞。一本目が見せている箱の側面、その下に続く七箱。手で積んだように
   少しずつずらす。 */
.sampler-sides { display: flex; flex-direction: column; }
.sampler-side {
  display: block;
  height: var(--box-t);
  margin: 0 4px;
  border-top: 1px solid rgba(221, 192, 127, 0.25);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.sampler-side:not(:first-child) { filter: brightness(0.6) saturate(0.85); }
.sampler-side:nth-child(3n + 2) { margin: 0 2px 0 4px; }
.sampler-side:nth-child(3n) { margin: 0 0 0 2px; }
.sampler-side:nth-child(3n + 4) { margin: 0 4px 0 0; }
.sampler-board {
  height: 8px;
  margin: 0 -6px 0 -20px;
  background: linear-gradient(180deg, var(--shop-walnut-warm), var(--shop-walnut-deep));
  border-top: 1px solid rgba(180, 144, 63, 0.6);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}

/* 山の脇: 題・口上・点 */
.sampler-caption {
  position: relative;
  margin-left: 10px;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sampler-name {
  margin: 0;
  font-family: var(--shop-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(236, 225, 200, 0.88);
}
.sampler-subtitle { margin-left: 0.3em; font-size: 0.7em; font-weight: 400; }
.sampler-tagline {
  display: none;
  margin: 4px 0 0;
  font-family: var(--shop-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(236, 225, 200, 0.55);
}
.sampler-pager { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 -3px; }
.sampler-dots { display: flex; }
/* 点は押せる。見た目の粒は小さいまま、押せる範囲だけ広げてある。 */
.sampler-dot {
  --dot: 4px;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sampler-dot i {
  display: block;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: rgba(221, 192, 127, 0.22);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sampler-dot:hover i { background: rgba(221, 192, 127, 0.6); }
.sampler-dot.current i { background: var(--shop-brass-light); box-shadow: 0 0 6px rgba(221, 192, 127, 0.8); }
.sampler-dot:focus-visible { outline: 1px solid var(--shop-brass-light); outline-offset: -2px; border-radius: 50%; }
/* ‹ › はスマホより広い画面だけ。スマホは蓋のフリックで送る。 */
.sampler-arrow {
  display: none;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  place-items: center;
  border: 1px solid rgba(221, 192, 127, 0.4);
  border-radius: 50%;
  background: rgba(14, 9, 5, 0.4);
  color: var(--shop-brass-light);
  font-family: var(--shop-font-display);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.sampler-arrow:hover { background: rgba(221, 192, 127, 0.16); border-color: var(--shop-brass-light); }

@media (prefers-reduced-motion: reduce) {
  .sampler-cover { transition: none; }
}

/* タブレット・狭い PC: 山ごと帯に収めたまま、少し大きく。 */
@media (min-width: 641px) {
  .entry-sampler {
    --lid: clamp(96px, 13vh, 140px);
    --box-t: 7px;
    --sampler-left: clamp(16px, 4vw, 60px);
    --sampler-bottom: 26px;
  }
  .sampler-caption { margin-left: 18px; }
  .sampler-name { font-size: 1.05rem; }
  .sampler-tagline { display: block; }
  .sampler-arrow { display: grid; }
  .sampler-dot { --dot: 6px; width: 16px; height: 16px; }
  /* 右へは題に掛からないところ(題の左の間より手前)まで */
  .sampler-board { height: 10px; margin: 0 -10px 0 -30px; }
}

/* 広い画面: 蓋を名入れの左の空きへ立ち上げ、帯は題と点の段だけにする。
   蓋の幅は、名入れの段(名前欄と「この名前で入る」、幅 520px、中央寄せ)の
   左端から 24px 手前で頭打ちにする。左端は 50vw - 260px、箱の左は
   --sampler-left(6vw)、箱の縁と影で 10px ―― 44vw - 294px がその目安
   (以前は口上の幅 490px で見積もった 50vw - 300px で、1024px では箱が欄に
   2px まで寄っていた、#198)。縦は 24vh まで。 */
@media (min-width: 900px) {
  .entry-sampler {
    --lid: clamp(100px, min(24vh, 44vw - 294px), 190px);
    --box-t: 8px;
    --sampler-left: clamp(40px, 6vw, 90px);
    /* 台の下に ‹ 点 › の段(30px + 間)を空ける */
    --sampler-bottom: calc(clamp(14px, 2.5vh, 26px) + 42px);
    --sampler-band: calc(var(--sampler-bottom) + 64px);
  }
  .sampler-caption { position: static; margin-left: 22px; padding-bottom: 6px; }
  .sampler-name { font-size: 1.2rem; }
  .sampler-dot { width: 24px; height: 24px; }
  .sampler-board { height: 12px; margin: 0 -12px 0 -40px; }
  /* ‹ 点 › は台の下に、山の真ん中に揃えて置く(はみ出すなら画面の左端から
     16px で止める)。幅は ‹ › 30px ×2 + 点 24px ×12 + 間 6px ×2 = 360px。 */
  .sampler-pager {
    position: absolute;
    top: calc(100% + 12px);
    left: max(calc(16px - var(--sampler-left)), calc((var(--lid) + 8px) / 2 - 180px));
    margin: 0;
  }
}
/* 広いが低い画面(ノート PC の実効 650〜800px)では口上を畳み、帯を題の
   一行ぶんに詰める。 */
@media (min-width: 900px) and (max-height: 799px) {
  .entry-sampler {
    /* 台の下の間と下の余白を詰め、名入れの段に丈を返す */
    --sampler-bottom: 46px;
    --sampler-band: calc(var(--sampler-bottom) + 26px);
  }
  .sampler-pager { top: calc(100% + 8px); }
  .sampler-tagline { display: none; }
}

/* 縦の短いタブレット・スマホでは、名入れに場所を譲って山を小さく低くする。 */
@media (max-width: 899px) and (max-height: 739px) {
  .entry-sampler { --lid: clamp(64px, 11vh, 96px); --box-t: 5px; }
  .sampler-tagline { display: none; }
}
@media (max-width: 640px) and (max-height: 780px) {
  .entry-sampler {
    --lid: clamp(56px, 10vh, 80px);
    --box-t: 4px;
    --sampler-bottom: 6px;
    /* 縞は三箱ぶんだけ積む(下の nth-child と揃える) */
    --sampler-band: calc(var(--lid) + var(--box-t) * 3 + 8px + var(--sampler-bottom));
  }
  .sampler-side:nth-child(n + 4) { display: none; }
  /* 口上が一行長くなったぶん、行の間を詰める(後ろの max-width: 640px の
     line-height: 2 より強く)。 */
  #entry-screen .gate-lede { line-height: 1.8; }
  /* 蓋を押せばその遊びの解説の紙が開くので、低いスマホでは「ルールを読む」
     の一行を畳んで名入れに丈を譲る。 */
  .gate-rules-link { display: none; }
}

/* スマホ: 山は帯に収めるぶん丈を取るので、卓の数の一行は出さない
   (キャンバスの採用 C改 のスマホ幅と同じ)。 */
@media (max-width: 640px) {
  #entry-occupancy { display: none; }
}

/* 二度目の人の道。名前欄と横に並べず、同じ場所に入れ替わりで立つ。
   塗りの札と輪郭のボタンを並べると主動線が二本になり、どちらが自分の道か
   を来た人に選ばせることになる。 */
.returning-panel {
  margin-top: 36px;
  background-color: var(--shop-paper);
  background-image: var(--shop-paper-grain);
  color: var(--shop-ink);
  border: 1px solid var(--shop-paper-line);
  border-radius: var(--radius);
  padding: 28px 30px 26px;
  width: 300px;
  box-sizing: border-box;
  text-align: center;
  transform: rotate(-1.6deg);
  box-shadow: 0 3px 6px rgba(36, 24, 16, 0.22), 0 22px 40px rgba(10, 6, 4, 0.5);
  position: relative;
}
.returning-panel .pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--shop-brass-light), var(--shop-brass) 60%, #7a5f28 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}
.returning-line { font-size: 0.8rem; color: var(--shop-ink-soft); margin: 0; letter-spacing: 0.06em; }
.returning-name { font-family: var(--shop-font-display); font-size: 1.5rem; font-weight: 700; margin: 10px 0 0; overflow-wrap: anywhere; }
.returning-name .honorific { white-space: nowrap; font-size: 1.1rem; }
.returning-cta {
  width: 100%;
  margin-top: 20px;
  height: 48px;
  background: var(--shop-burgundy);
  color: var(--shop-paper);
  border: 1px solid var(--shop-burgundy-deep);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--shop-font-body);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.returning-cta:hover { transform: translateY(-2px); background: var(--shop-burgundy-deep); }

/* 一度きりの来訪者を締め出さないための戻り口。道ではないので、線一本の
   小さな字で札の下に置く。 */
.gate-alt-btn {
  margin-top: 20px;
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: var(--shop-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(236, 225, 200, 0.55);
  border-bottom: 1px solid rgba(236, 225, 200, 0.28);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.gate-alt-btn:hover { color: var(--shop-brass-light); border-bottom-color: var(--shop-brass-light); }
.gate-alt-btn.hidden { display: none; }

/* 戸口から解説の紙へ。名入れの主動線と競わないよう、戻り口と同じ控えめな
   下線の一行にしてある。 */
.gate-rules-link {
  margin-top: 26px;
  padding: 4px 2px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(236, 225, 200, 0.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(236, 225, 200, 0.24);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.gate-rules-link:hover,
.gate-rules-link:focus-visible { color: var(--shop-brass-light); border-bottom-color: var(--shop-brass-light); }

/* 入口に押し戻されたときが、この画面でいちばん説明の要る場面 - 名前を
   取られた、混んでいる。裸の赤い一行ではなく、紙に書いた断りとして出す。 */
.shop-entry .error-text { min-height: 0; margin: 0; }
.shop-entry .error-text:not(:empty) {
  margin-top: 22px;
  max-width: 360px;
  padding: 12px 16px;
  background: rgba(124, 46, 46, 0.16);
  border: 1px solid rgba(124, 46, 46, 0.6);
  border-radius: var(--radius);
  color: #e8a9a3;
  font-size: 0.83rem;
  line-height: 1.75;
}

/* 中の様子。roomList は入場前のソケットにも届くので、戸口に立ったまま
   卓の数が分かる - 暗い店に一人で入る感じが消える。届くまでは罫ごと
   出さない。 */
.gate-occupancy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gate-occupancy.hidden { display: none; }
.gate-hairline {
  width: 260px;
  height: 1px;
  margin-top: 38px;
  background: linear-gradient(to right, transparent, rgba(221, 192, 127, 0.24) 28%, rgba(221, 192, 127, 0.24) 72%, transparent);
}
.gate-occupancy-line {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0 0;
  font-family: var(--shop-font-display);
  font-size: 0.93rem;
  letter-spacing: 0.08em;
  color: rgba(236, 225, 200, 0.62);
}
.gate-occupancy-line .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--shop-brass-light);
  box-shadow: 0 0 10px rgba(221, 192, 127, 0.8);
}

/* 但し書きは、それが指している音量つまみの真横に置く。画面いっぱいの段に
   していたころは .entry-layout の二行目になってしまい、そこから外すために
   絶対配置で右下へ飛ばしていた - つまみの隣に座らせれば、その細工ごと
   要らなくなる。 */
.se-notice {
  position: fixed;
  right: 76px;
  bottom: calc(var(--tool-stack-base) + 15px);
  margin: 0;
  z-index: 5;
  font-size: 0.78rem;
  color: rgba(236, 225, 200, 0.5);
  pointer-events: none;
}

/* 縦の短い画面 - ノートPCの実効高さは、ブラウザの上枠を引くと800〜900px
   に落ちる。暖簾の丈は高さに従って自然に縮むので、ここでは名入れの段の間
   を一枚ずつ削って、暖簾と台の間に一式が収まるようにする。閾はいちばん丈
   の出る再訪の札を出した形で決めてある。
   見本の箱(#66)を帯に積む幅(899px まで)でも、箱のぶん丈が要るので同じく
   詰める。 */
@media (max-height: 840px), (max-width: 899px) {
  .shop-name { font-size: 2.15rem; margin-top: 18px; }
  .gate-rule { margin-top: 16px; }
  .gate-lede { margin-top: 16px; line-height: 1.95; }
  .gate-form { margin-top: 24px; }
  .returning-panel { margin-top: 20px; }
  .gate-alt-btn { margin-top: 14px; }
  .gate-hairline { margin-top: 20px; }
  .gate-occupancy-line { margin-top: 10px; }
  .gate-rules-link { margin-top: 14px; }
  .entry-card::before { height: 520px; }
}

/* さらに低い画面 - 1366×768 の画面でもブラウザの枠を引くと実効は650px
   前後になる。紋・屋号・段の間をもう一段詰め、再訪の札も薄くする。 */
@media (max-height: 700px) {
  #entry-screen.shop-entry { --noren-w: min(620px, 92vw, 48vh); }
  .entry-card .emblem.gate { width: 38px; height: 38px; flex-basis: 38px; }
  .entry-card .emblem.gate span { font-size: 1.1rem; }
  .shop-name { font-size: 1.9rem; margin-top: 14px; }
  .gate-rule { margin-top: 12px; }
  .gate-lede { margin-top: 12px; line-height: 1.8; }
  .gate-form { margin-top: 18px; }
  .gate-note { margin-top: 10px; }
  .returning-panel { margin-top: 16px; padding: 18px 24px 18px; }
  .returning-name { margin-top: 6px; }
  .returning-cta { margin-top: 14px; }
  .gate-alt-btn { margin-top: 10px; }
  .gate-hairline { margin-top: 14px; }
  .gate-rules-link { margin-top: 10px; }
}

@media (max-width: 640px) {
  /* 暖簾も台も仕舞っていたころは、スマホでは茶のグラデに名前欄が一つ
     残るだけで、この店の作りが全部落ちていた。丈と並びを削って、両方とも
     残す。 */
  #entry-screen.shop-entry { --noren-w: min(380px, 88vw, 58vh); }
  .shop-name { font-size: 2.05rem; }
  .gate-lede { font-size: 0.95rem; line-height: 2; }
  .gate-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "enter" "other";
    width: min(300px, 80vw);
  }
  #player-name-input { width: 100%; box-sizing: border-box; }
  .gate-auto { height: 40px; }
  .returning-panel { width: min(300px, 80vw); }
  /* 真上は言葉を選ぶ(地球儀の)つまみの席なので、そこに積むと裏に潜る
     (#115)。つまみの列の左、地球儀と音量のあいだの高さに置く ―― 見本の
     箱の名(台の下)より上なので、そちらとも重ならない。 */
  .se-notice { right: 76px; bottom: calc(var(--tool-stack-base) + 50px); }
}

/* --- shop page chrome shared by top-screen & detail-screen --- */
.shop-page {
  background: var(--shop-paper);
  color: var(--shop-ink);
  font-family: var(--shop-font-body);
}
.shop-page h1, .shop-page h2 {
  font-family: var(--shop-font-display);
  margin: 0;
  text-wrap: balance;
  color: var(--shop-ink);
}
.shop-page .eyebrow {
  display: block;
  font-family: var(--shop-font-stamp);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  color: var(--shop-burgundy);
}

/* 店の中(#top-screen)は、広い画面ではページごとスクロールさせない。帯は
   丈を固定し、帳面(.paper-sheet)が残りの高さを取る。中身の割り付けは下の
   「店の中」の節。他の shop-page 画面(解説等)は紙面なりに縦スクロールする。 */
#top-screen.screen.active {
  display: flex;
  flex-direction: column;
  /* dvh 未対応のブラウザ向けの控え。対応環境では次の行が上書きする。 */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
#top-screen.screen.active .site-header {
  flex: 0 0 auto;
}

/* 店先の帯。板をやめて本文と同じ紙にし、下端を双罫で切る。五画面とも下が
   紙なので、上端だけが木だと画面を替えるたびにそこで一度切れていた。木は
   屋号の木札一枚に残し、その札だけが罫をまたいで垂れる - 打ちつけた板では
   なく、掛けた看板に見せるため。 */
.site-header {
  position: relative;
  background-color: var(--shop-paper);
  background-image: var(--shop-paper-grain);
  padding: 0 24px 5px;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: linear-gradient(to bottom, var(--shop-brass) 1px, transparent 1px, transparent 4px, var(--shop-brass) 4px, var(--shop-brass) 5px);
  opacity: 0.85;
}
/* 帯の丈は品書きの一行ぶん。木札はこれより高く、上で留めてあるので裾が
   はみ出す。高さを auto にすると札の丈に合わせて帯が伸び、裾が出ない。 */
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 54px;
  flex-wrap: wrap;
}
/* 札は帯の上端から生やす。四隅を丸めて宙に置き、やわらかい影を落とすと、
   どこにも接していない板が浮いているようにしか見えない。上辺の罫と丸みを
   落として天に付け、影は接地の一筋だけにする。 */
.logotype {
  align-self: flex-start;
  margin-top: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 20px 17px 15px;
  background-color: var(--shop-walnut-warm);
  background-image: var(--wood-grain);
  border: 1px solid var(--shop-brass-deep);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow:
    0 3px 6px rgba(36, 24, 16, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.logotype:hover { border-color: var(--shop-brass-light); }
.logotype:focus-visible { outline: 2px solid var(--shop-brass); outline-offset: 3px; }
.logotype .emblem { width: 28px; height: 28px; flex: 0 0 28px; }
.logotype .emblem span { font-size: 0.82rem; }
.logotype .name {
  font-family: var(--shop-font-stamp);
  font-size: 1.3rem;
  color: var(--shop-paper);
  letter-spacing: 0.1em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--shop-ink-soft);
}
.site-nav a, .nav-link-btn {
  /* 帯には <button> と <a> が混じって並ぶ(棚だけは本物のリンク)。既定の
     display が違うと罫の高さがそこだけずれるので、揃えておく。 */
  display: inline-block;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 6px;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.site-nav a:hover, .nav-link-btn:hover { color: var(--shop-ink); border-bottom-color: var(--shop-paper-line); }
.nav-link-btn:focus-visible { outline: 2px solid var(--shop-brass); outline-offset: 3px; }
/* 店主より(#276)の未読の点。紙色の縁で帯から浮かせる(釦 A)。 */
.shopkeeper-nav-btn { position: relative; }
.shopkeeper-dot {
  position: absolute;
  top: -4px;
  right: -11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shop-seal);
  box-shadow: 0 0 0 1.5px var(--shop-paper);
}
.shopkeeper-dot[hidden] { display: none; }
/* 今いる画面。字を『』で囲むと二字ぶん伸びて、行き来のたびに品書きの並びが
   動いていた。下に罫を一本引くだけなら幅は変わらない。 */
.nav-link-btn.is-here {
  color: var(--shop-ink);
  font-weight: 700;
  border-bottom-color: var(--shop-brass);
}
/* 名札。帯に紙をもう一枚重ねない - 塗りと枠と角丸のある矩形を右上の角に
   置けば、それが何であれボタンに見える。押せないものを押せる形にするのが
   元の帯の難だったのに、作り直して同じことをしていた。
   ここは帯の紙そのものに、名前を墨で書くだけ。 */
.player-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--shop-ink-soft);
}
/* 名が無いうちは消す。 */
.player-badge:empty { display: none; }
.badge-name {
  font-family: var(--shop-font-stamp);
  font-size: 0.85rem;
  color: var(--shop-ink);
}
.badge-honorific { margin-left: 4px; }
/* 名札は押すと小札が開く(#132)。形は墨書きのまま、▾ だけで押せると知らせる。 */
.player-badge { position: relative; }
.badge-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.badge-btn:hover .badge-name { text-decoration: underline; text-underline-offset: 3px; }
.badge-btn:focus-visible { outline: 2px solid var(--shop-brass); outline-offset: 2px; }
.badge-caret { margin-left: 5px; font-size: 0.7em; color: var(--shop-ink-soft); }
.badge-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 13em;
  padding: 6px;
  background: var(--shop-paper-light);
  border: 1px solid var(--shop-brass);
  border-radius: 4px;
  box-shadow: 0 12px 24px rgba(36, 24, 16, 0.25);
}
.badge-menu.hidden { display: none; }
.badge-menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 3px;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  white-space: nowrap;
  color: var(--shop-seal);
  cursor: pointer;
}
.badge-menu-item:hover:not(:disabled) { background: rgba(168, 53, 43, 0.08); }
.badge-menu-item:disabled { color: var(--shop-ink-soft); cursor: default; }
.badge-menu-item.logout { color: var(--shop-ink); border-top: 1px solid var(--shop-paper-line); border-radius: 0 0 3px 3px; }
.badge-menu-item.logout:hover { background: rgba(42, 36, 28, 0.06); }
/* 効果音と言葉(右下の木札の短冊と同じ札を、小札の中に横に並べる)。 */
.badge-menu-label {
  margin: 4px 12px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--shop-ink-soft);
}
.badge-menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 6px 8px;
}
.badge-menu-row .se-volume-btn { flex: 1 1 0; min-width: 0; padding: 6px 0; }
/* 字の大きさ(#186)。効果音の札と同じ見た目で、選んでいるものに朱の地。 */
.badge-menu-row .font-scale-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 6px 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.badge-menu-row .font-scale-btn:hover { background: rgba(180, 144, 63, 0.18); }
.badge-menu-row .font-scale-btn[aria-pressed="true"] { background: var(--shop-seal); color: var(--shop-paper); }
.badge-menu-row .lang-option { min-width: 0; flex: 1 1 40%; padding: 6px 8px; }
.badge-menu-row.langs { border-bottom: 1px solid var(--shop-paper-line); margin-bottom: 4px; }

/* 帯が畳まれる寸。品書きが二行目に落ちると、垂れた木札がその行にかぶるので、
   ここから先は札を帯の中に収める。ページの他の部分より早く畳むのは、
   木札・品書き四つ・名札の三つが横に並ぶと 800px あたりで詰まるため。 */
@media (max-width: 880px) {
  .header-inner {
    height: auto;
    padding: 12px 0 0;
    gap: 0 16px;
  }
  /* 天に付ける作りは畳んでも同じ。帯の上の空き(12px)を負の余白で食う。 */
  .logotype {
    margin-top: -12px;
    gap: 9px;
    padding: 18px 15px 10px 11px;
    box-shadow:
      0 2px 4px rgba(36, 24, 16, 0.3),
      inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  }
  .logotype .emblem { width: 22px; height: 22px; flex: 0 0 22px; }
  .logotype .emblem span { font-size: 0.68rem; }
  .logotype .name { font-size: 1.05rem; }
  /* 品書きは隠さずに二行目へ落とす。四つとも短いので入るし、隠すと
     ページから出る道が紋だけになる。 */
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 28px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--shop-paper-line);
    font-size: 0.8rem;
    letter-spacing: 0;
  }
  .site-nav a, .nav-link-btn { padding-bottom: 10px; }
  .player-badge { order: 2; font-size: 0.72rem; }
  .badge-name { font-size: 0.78rem; }
}

.hero {
  background: var(--shop-paper);
  background-image: repeating-linear-gradient(115deg, rgba(42, 36, 28, 0.025) 0px, rgba(42, 36, 28, 0.025) 1px, transparent 1px, transparent 5px);
  padding: 60px 24px 56px;
}
.hero-inner { max-width: 1120px; margin: 0 auto; }
.hero-text { max-width: 640px; }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 900;
  margin-bottom: 20px;
}
.hero .lead { font-size: 1rem; color: var(--shop-ink-soft); max-width: 46ch; margin: 0; }
.hero .rule-double { width: 64px; margin-bottom: 24px; }

.about-hero { padding: 72px 24px 140px; min-height: 60vh; }
.about-hero .lead { margin-bottom: 30px; }

.cta-secondary {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--shop-font-body);
  font-size: 0.85rem;
  color: var(--shop-ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--shop-ink-soft);
  padding-bottom: 2px;
  cursor: pointer;
}
.cta-secondary:hover { color: var(--shop-ink); border-color: var(--shop-ink); }

/* 棚の区画。胡桃の板一枚に真鍮の竿を渡し、遊び一つにつき一枚の木札を
   吊るす(キャンバス「棋楽軒 店の中の刷新」の F1改 / スマホ S1)。竿の
   組み方は shop.js の renderShelf、区画に収まらないときに札ごと縮める
   --fuda-scale は fitShelf が決める。それでも収まらない低い窓では、ページ
   ではなくこの区画だけがスクロールする。寸法は札一枚の素の大きさを変数に
   持ち、使う所で --fuda-scale を掛ける。 */
.shelf {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  background: var(--shop-paper-deep);
  padding: 30px 24px 28px;
  --fuda-scale: 1;
  --fuda-w: 84px;
  --fuda-h: 262px;
  --fuda-art: 54px;
  --fuda-title: 23px;
  --fuda-title-long: 17px;
  --fuda-gap: 10px;
}
.shelf-inner {
  --s: var(--fuda-scale);
  position: relative;
  width: max-content;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(12px * var(--s)) calc(22px * var(--s)) calc(18px * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(22px * var(--s));
  border-radius: 4px;
  background-image:
    repeating-linear-gradient(0.6deg, rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px, rgba(0, 0, 0, 0.08) 3px, transparent 4px, transparent 7px),
    radial-gradient(ellipse 60% 50% at 50% 0, rgba(255, 236, 190, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 52%, rgba(255, 236, 190, 0.1), transparent 70%),
    linear-gradient(#33241a, #21170f);
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.5), 0 10px 22px rgba(36, 24, 16, 0.3);
}
/* 竿一本ぶん。竿は札の列より少し長く、両端が板の縁まで届く。 */
.shelf-rail { position: relative; }
.shelf-rail::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: calc(5px * var(--s));
  border-radius: 3px;
  background: linear-gradient(var(--shop-brass-light), var(--shop-brass-deep));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
.shelf-rail-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--fuda-gap) * var(--s));
}
.shelf-rail-gap { flex: 0 0 calc(14px * var(--s)); }

/* --- 一枚: 竿に紐で吊るした檜の木札 ---
   実装済みの札は <button> で、base.css がどの button にも付ける余白と地の
   色をここで消しておく。指を乗せると少し持ち上がって縁が灯る。 */
.fuda {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.12s ease-out;
}
.fuda:not(.coming-soon):hover,
.fuda:focus-visible {
  transform: translateY(calc(-4px * var(--s)));
  filter: drop-shadow(0 0 1px rgba(221, 192, 127, 0.5)) drop-shadow(0 0 4px rgba(221, 192, 127, 0.22)) drop-shadow(0 9px 11px rgba(0, 0, 0, 0.55));
}
.fuda:focus-visible { outline: 2px solid var(--shop-brass-light); outline-offset: 2px; }
.fuda.coming-soon { cursor: default; opacity: 0.6; }
/* 紐: 竿の釘から札の両肩へ、逆さの V。 */
.fuda-cord {
  position: relative;
  flex: 0 0 auto;
  width: calc(40px * var(--s));
  height: calc(22px * var(--s));
  background: radial-gradient(circle at 50% calc(4px * var(--s)), var(--shop-brass-light) calc(3px * var(--s)), transparent calc(3.5px * var(--s)));
}
.fuda-cord::before,
.fuda-cord::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(4px * var(--s));
  width: 1.2px;
  height: calc(22px * var(--s));
  background: #c9b48a;
  transform-origin: 50% 0;
  transform: rotate(33deg);
}
.fuda-cord::after { transform: rotate(-33deg); }
.fuda-plate {
  width: calc(var(--fuda-w) * var(--s));
  height: calc(var(--fuda-h) * var(--s));
  box-sizing: border-box;
  padding: calc(10px * var(--s)) 0 calc(12px * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(16% 0, 84% 0, 100% 6%, 100% 100%, 0 100%, 0 6%);
  background-image:
    repeating-linear-gradient(90.5deg, rgba(120, 80, 30, 0.12) 0px, rgba(120, 80, 30, 0.12) 1px, transparent 1px, transparent 5px, rgba(120, 80, 30, 0.06) 5px, transparent 7px, transparent 11px),
    linear-gradient(90deg, #ead6aa, #dcc08a 60%, #cdae74);
}
.fuda-hole {
  flex: 0 0 auto;
  width: calc(6px * var(--s));
  height: calc(6px * var(--s));
  border-radius: 50%;
  background: #3a2616;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
/* 蓋の絵は .cover(箱の蓋と同じ刷り)を小さく。罫は札の大きさに合わせて詰める。 */
.fuda-art.cover {
  flex: 0 0 auto;
  width: calc(var(--fuda-art) * var(--s));
  height: calc(var(--fuda-art) * var(--s));
  margin-top: calc(8px * var(--s));
  box-sizing: border-box;
  font-size: calc(var(--fuda-art) * 0.3 * var(--s));
  outline-offset: calc(-4px * var(--s));
  box-shadow: 0 0 0 1px rgba(40, 24, 10, 0.5);
}
.fuda-art.cover::after { inset: calc(4px * var(--s)); }
.fuda-title {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(16px * var(--s));
  writing-mode: vertical-rl;
  /* button は字を中央に揃えるので、縦書きでは札の上から書き始めるよう戻す */
  text-align: start;
  font-family: var(--shop-font-display);
  font-size: calc(var(--fuda-title) * var(--s));
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  color: #1e140c;
}
.fuda-title.long { font-size: calc(var(--fuda-title-long) * var(--s)); }
/* 丈に入りきらない題は二列に折る(fitTitles)。 */
.fuda-title.two-col { white-space: normal; text-wrap: balance; line-height: 1.1; }
/* 英独仏の題は縦書きにすると横倒しの長い一列になるので、札の幅で折り返す。 */
:root:not(:lang(ja)) .fuda-title { white-space: normal; overflow-wrap: anywhere; }
/* 長い題の折り目。広い札では折らない(スマホ縦だけ下で効かせる)。 */
.fuda-break { display: none; }
/* 「花札(こいこい)」の括弧の中 */
.fuda-subtitle {
  margin-top: calc(8px * var(--s));
  font-size: calc(11px * var(--s));
  font-weight: 400;
  opacity: 0.75;
}
/* 足元の人数(#179)。札の木に焼きごてで押した字(キャンバス「木札の人数」の
   A 焼印、2026-10-10)。紙の貼り紙は画面の入力欄のようで、明朝の縦書きの題とも
   字の声が違ったので、題と同じ明朝の太字にして、上に焼いた罫を一本引く。
   字の大きさは札の縮尺を掛けない 15px(掛けると低い窓でまた読めなくなる)。
   札が縮んで札の幅に入らなくなったら、fitShelf が外す(.no-players)。
   スマホ縦は下で外す。 */
.fuda-players {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  min-width: calc(58px * var(--s));
  box-sizing: border-box;
  margin-top: calc(8px * var(--s));
  padding: 6px 2px 0;
  border-top: 1.5px solid rgba(74, 40, 14, 0.5);
  font-family: var(--shop-font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  color: #4a280e;
  text-shadow: 0 1px 0 rgba(255, 243, 212, 0.55), 0 0 1px rgba(74, 40, 14, 0.6);
}
.shelf.no-players .fuda-players { display: none; }
.fuda-soon {
  margin-bottom: calc(6px * var(--s));
  padding: 2px 4px;
  border-radius: 2px;
  background: var(--shop-seal);
  color: var(--shop-paper);
  font-size: calc(10px * var(--s));
  font-weight: 700;
  white-space: nowrap;
}
/* SP: 種類で分けず七枚ずつの二本。札は細く低く。 */
@media (max-width: 640px) {
  .shelf {
    padding: 22px 0 20px;
    --fuda-w: 44px;
    --fuda-h: 200px;
    --fuda-art: 34px;
    --fuda-title: 17px;
    --fuda-title-long: 12px;
    --fuda-gap: 5px;
  }
  .shelf-inner { padding: calc(10px * var(--s)) calc(8px * var(--s)) calc(14px * var(--s)); gap: calc(16px * var(--s)); }
  /* 札は幅 40px ほどで、読める大きさの人数は入らない。札から外し、人数は札を
     押した窓で見る(#179)。 */
  .fuda-players { display: none; }
  /* 副題(花札の「こいこい」)も 9px 台で読めないので外す。札を押した窓と
     詳しい画面で読む。長い題は二列に折って 13px(#170)。 */
  .fuda-subtitle { display: none; }
  .fuda-break { display: inline; }
  .fuda-title.long { font-size: 13px; line-height: 1.15; }
}

/* --- 札を押すと開く簡易版の品書き(#game-popup) ---
   枠は modal.css の .modal-overlay(画面に貼り付く暗い幕)を使い、中の札は
   紙の一枚。見出しの一言は箱の地の色で刷る(長い品書きの .detail-hero と
   同じ流儀)。地の色そのもの(.tone-* の background)は札には要らないので、
   色は --popup-accent にだけ受け取る。 */
.game-popup {
  --popup-accent: var(--shop-pine);
  position: relative;
  width: min(640px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 36px 40px 30px;
  color: var(--shop-ink);
  border: 1px solid var(--shop-brass);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(20, 14, 8, 0.4);
  font-family: var(--shop-font-body);
}
.game-popup,
.game-popup[class*="tone-"] { background: var(--shop-paper-light); }
.game-popup.tone-burgundy { --popup-accent: var(--shop-burgundy); }
.game-popup.tone-walnut { --popup-accent: var(--shop-walnut); }
.game-popup.tone-slate { --popup-accent: var(--shop-slate); }
.game-popup.tone-crimson { --popup-accent: var(--shop-crimson); }
.game-popup.tone-teal { --popup-accent: var(--shop-teal); }
.game-popup.tone-violet { --popup-accent: var(--shop-violet); }
.game-popup.tone-gold { --popup-accent: var(--shop-gold); }
.game-popup.tone-brass { --popup-accent: var(--shop-brass-deep); }
.game-popup.tone-rust { --popup-accent: var(--shop-rust); }
.game-popup.tone-sumi { --popup-accent: var(--shop-sumi); }
.game-popup.tone-urushi { --popup-accent: var(--shop-urushi); }
.game-popup.tone-night { --popup-accent: var(--shop-night); }

.game-popup-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--shop-paper-deep);
  border-radius: 50%;
  background: var(--shop-paper);
  color: var(--shop-ink-soft);
  font-size: 0.9rem;
  line-height: 1;
}
.game-popup-x:hover { background: var(--shop-paper-deep); color: var(--shop-ink); }

/* 蓋の絵は右、文は左。狭い幅では絵を小さくして文の上に置く。 */
.game-popup-head { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 28px; }
.game-popup-text { flex: 1 1 auto; min-width: 0; }
.game-popup-cover { flex: 0 0 140px; width: 140px; margin-top: 28px; }
.game-popup-cover .cover { font-size: 2rem; border-radius: 4px; outline-offset: -8px; }
.game-popup-cover .cover::after { inset: 8px; }
.game-popup h2 {
  margin: 0;
  font-family: var(--shop-font-display);
  font-size: 1.9rem;
  color: var(--shop-ink);
}
.game-popup-tagline {
  margin: 12px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--popup-accent);
}
.game-popup-desc { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.85; color: var(--shop-ink-soft); }

.game-popup-stats {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--shop-paper-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--shop-paper);
}
.game-popup-stats .stat { padding: 12px 14px; border-right: 1px solid var(--shop-paper-line); }
.game-popup-stats .stat:last-child { border-right: none; }
.game-popup-stats .label { display: block; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--shop-ink-soft); }
.game-popup-stats .value { display: block; margin-top: 4px; font-size: 0.9rem; font-weight: 700; }

.game-popup-actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.game-popup-main-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.game-popup-sub-actions { display: flex; gap: 6px; }
.game-popup-detail {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 3px;
  background: transparent;
  color: var(--shop-ink-soft);
  font-family: var(--shop-font-body);
  font-size: 0.82rem;
  border: 1px solid var(--shop-paper-line);
}
.game-popup-detail:hover { background: var(--shop-paper); color: var(--shop-ink); }
.game-popup .detail-cpu-error { margin: 12px 0 0; color: var(--shop-burgundy); font-size: 0.85rem; }

@media (max-width: 640px) {
  .game-popup { padding: 24px 20px 20px; }
  .game-popup-head { flex-direction: column; gap: 12px; }
  .game-popup-cover { flex-basis: auto; width: 72px; margin-top: 0; }
  .game-popup-cover .cover { font-size: 1.1rem; outline-offset: -4px; }
  .game-popup-cover .cover::after { inset: 4px; }
  .game-popup h2 { font-size: 1.35rem; }
  .game-popup-tagline { margin-top: 10px; font-size: 0.88rem; }
  .game-popup-desc { margin-top: 8px; font-size: 0.8rem; line-height: 1.8; }
  .game-popup-stats { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-popup-stats .stat { padding: 10px 12px; border-bottom: 1px solid var(--shop-paper-line); }
  .game-popup-stats .stat:nth-child(2n) { border-right: none; }
  .game-popup-stats .stat:nth-last-child(-n + 2) { border-bottom: none; }
  .game-popup-actions { margin-top: 18px; flex-direction: column; align-items: stretch; gap: 8px; }
  .game-popup-main-actions { flex-direction: column; gap: 10px; }
  .game-popup-sub-actions { justify-content: center; gap: 18px; }
}

/* 横にしたスマホ(高さ 500px 以下)では、札の中を送らないと「このゲームで遊ぶ /
   CPUと一局」が下に切れていた(#167)。間と蓋の絵を詰めて一枚に収める。 */
@media (max-height: 500px) and (min-width: 641px) {
  .game-popup { padding: 14px 28px 14px; }
  .game-popup-head { gap: 22px; }
  /* 右上の×(下端 46px)に掛からない高さから */
  .game-popup-cover { flex-basis: 108px; width: 108px; margin-top: 36px; }
  .game-popup h2 { font-size: 1.5rem; }
  .game-popup-tagline { margin-top: 6px; font-size: 0.94rem; line-height: 1.5; }
  .game-popup-desc { margin-top: 6px; font-size: 0.8rem; line-height: 1.65; }
  .game-popup-stats { margin-top: 12px; }
  .game-popup-stats .stat { padding: 8px 12px; }
  .game-popup-actions { margin-top: 12px; }
}

/* The lid. It is printed on the long 品書き page (#detail-screen) and, smaller,
   on the shelf's popup - so it carries its own class rather than living under
   either of them. */
.cover {
  /* square, tied to the card width rather than a fixed height, so the lid stays
     square whatever its holder's width becomes */
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: var(--shop-paper);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* lit along the top edge, shaded at the foot: a lid catching the shop light
     rather than a flat swatch of colour */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 46px rgba(0, 0, 0, 0.16),
    inset 0 -16px 26px rgba(0, 0, 0, 0.26);
  outline: 1px solid rgba(236, 225, 200, 0.35);
  outline-offset: -12px;
}
/* The picture on the lid. It sits below the grain and the rule on purpose: the
   drawing is part of what was printed onto the stock, not a sticker laid over
   it. That ordering is what the z-indexes below buy - a pseudo-element would
   otherwise paint under the SVG whatever the tree order. */
.cover .cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the tone printed onto laid stock, not onto glass */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--shop-paper-grain);
  opacity: 0.55;
}
/* 罫: the hairline frame every box in the shop is printed with */
.cover::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(221, 192, 127, 0.42);
  transition: border-color 0.2s ease;
}

/* --- 店の中(#65): 棚と帳場を一枚に ---
   以前の「卓を見る」「棚を見る」「対戦記録」の三画面を畳んだもの。広い画面
   では左に棚、右に帳場の三段(いま・この七日・近ごろの人気)。棚は区画の丈
   に収める(shop.js の fitShelf が本の丈を縮める)。1000px 未満は
   いま → 棚 → この七日 → 近ごろ の縦一列で、ページが縦にスクロールする。
   境目は 1100px だったのを、横にしたタブレット(1024px・1080px)も二列で
   一画面に収まるよう 1000px に下げた(#194)。 */
.store {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 30px 28px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "shelf again"
    "shelf now"
    "shelf week"
    "shelf recent";
}
.store-shelf {
  grid-area: shelf;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-right: 26px;
  border-right: 1px solid var(--shop-sheet-rule-outer);
}
.store .shelf { background: none; padding: 28px 0 18px; display: flex; flex-direction: column; justify-content: center; }
/* 丈が余るときは段を区画の縦の中ほどに置く(溢れるときは上から並べてスクロール)。 */
.store .shelf-inner { margin: auto; }
/* 店主の便り(#162)。棚の下の余白に一枚。日付は墨の二重の細罫で囲んだ判で、
   紙に刷ったものとして置く ―― 艶や縁を持った札にすると、紙の上で一枚だけ
   立体の物になって浮く。棚と張り合わないよう、地は敷かず枠線一本で止める。 */
.shop-note {
  margin-top: auto;
  padding: 14px 16px;
  border: 1px solid var(--shop-sheet-rule-outer);
  border-radius: 3px;
}
/* 文が何行になっても、札は一行目の高さに置く(狭い幅では三行になる)。 */
.shop-note-row { display: flex; align-items: flex-start; gap: 14px; }
/* display: flex は hidden より強いので、伏せる側を明に消す。 */
.shop-note-row[hidden], .shop-note-shop[hidden] { display: none; }
/* 内の罫は outline を内側へ引いて描く(紙の色を持ち出さずに済む)。 */
.shop-note-date {
  flex: none;
  /* 一行目の字の高さに判の背を揃える。 */
  margin-top: 1px;
  padding: 3px 9px 4px;
  border: 1.2px solid var(--shop-sumi);
  border-radius: 2px;
  outline: 0.6px solid var(--shop-sumi);
  outline-offset: -3.8px;
  font-family: var(--shop-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--shop-sumi);
  white-space: nowrap;
}
.shop-note-text {
  margin: 0;
  min-width: 0;
  font-family: var(--shop-font-display);
  font-size: 0.92rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--shop-ink-soft);
}
.shop-note-body { min-width: 0; flex: 1; }

/* 見出しの右の便り(#181)。入れ替えだと、一局終えて店に戻るたびに便りが消え、
   よく遊ぶ人ほど便りを見られなかった。棚の区画に一行が入る幅(最長 36 字と判)
   では、便りは「品書き」の見出しの右に枠なしの一行でいつも出し、棚の下は卓から
   戻った直後の品の枠だけにする。枠が出ていないときも棚の下の場所は空けておき、
   枠が出たときに棚(札の位置)が動かないようにする。区画が狭いと一行に入らない
   ので、今までどおり棚の下で便りと品の枠を入れ替える。 */
.store-shelf { container: store-shelf / inline-size; }
.store-heading { display: flex; align-items: center; gap: 24px; min-width: 0; }
.store-heading .eyebrow { flex: 0 0 auto; white-space: nowrap; }
.shop-note-aside { display: none; }
@container store-shelf (min-width: 760px) {
  .shop-note-aside:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0 0 10px auto;
  }
  .shop-note-aside .shop-note-date { margin-top: 0; }
  .shop-note-aside .shop-note-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
  }
  .shop-note .shop-note-row { display: none; }
  .shop-note:has(> .shop-note-shop[hidden]) { display: none; }
}
/* 二列(画面を送らない形)では、枠が出ていないときも棚の下の場所を空けておく。
   一列ではページを送るので、空けずに詰める。 */
@media (min-width: 1000px) {
  @container store-shelf (min-width: 760px) {
    .shop-note { min-height: 136px; box-sizing: border-box; }
    .shop-note:has(> .shop-note-shop[hidden]) { display: block; visibility: hidden; }
  }
}

/* 卓から戻ってきた直後に、便りと入れ替わりで出る品の枠。中身も見た目も
   解説ページの末尾(article.css の .doc-shop)に揃える ―― 同じものが二つの
   顔を持たないように。重ねずに入れ替えるのは、二段にすると枠が広告の枕に
   見えるため。 */
.shop-note-shop { display: flex; align-items: flex-start; gap: 13px; }
.shop-note-plaque {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 4px;
  border: 1px solid var(--shop-brass);
  border-radius: 4px;
  background: linear-gradient(160deg, var(--shop-walnut-warm), var(--shop-walnut));
  box-shadow: inset 0 0 0 1px rgba(221, 192, 127, 0.35);
  display: grid;
  place-items: center;
}
.shop-note-plaque svg { display: block; width: 52px; height: 52px; }
.shop-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--shop-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--shop-ink-soft);
}
.shop-note-pr-tag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--shop-brass);
  border-radius: 3px;
  font-family: var(--shop-font-stamp);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--shop-brass-deep);
}
.shop-note-link { margin: 0; font-size: 0.95rem; }
.shop-note-link a {
  color: var(--shop-walnut-warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-note-line {
  margin: 4px 0 0;
  font-family: var(--shop-font-display);
  font-size: 0.86rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--shop-ink-soft);
}
.shop-note-fine {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--shop-ink-soft);
}
.shop-note-fine a { color: inherit; text-decoration: underline; }

/* もう一局(#180)。右の柱の頭、「いま」の上。CPU と遊んだことのない人には
   出さない(hidden)ので、そのときは段ごと消えて「いま」が頭に上がる。 */
.store-again { grid-area: again; padding-left: 26px; margin-bottom: 24px; }
.store-again[hidden] { display: none; }
.again-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: rgba(247, 241, 225, 0.8);
  border: 1px solid var(--shop-paper-line);
  border-top: 2px solid var(--shop-brass);
  border-radius: 3px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(36, 24, 16, 0.07);
}
.again-cover .cover { width: 56px; height: 56px; font-size: 0.9rem; border-radius: 3px; outline-offset: -3px; }
.again-cover .cover::after { inset: 3px; }
.again-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.again-name { margin: 0; font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.again-meta { margin: 0; font-size: 0.78rem; color: var(--shop-ink-soft); display: flex; flex-direction: column; gap: 4px; }
.again-record { color: var(--shop-ink); }
.again-record[hidden] { display: none; }
.again-btn { grid-column: 1 / -1; }
.store-again .error-text:empty { display: none; }

.store-now { grid-area: now; }
.store-week { grid-area: week; margin-top: 24px; }
.store-recent { grid-area: recent; margin-top: 24px; min-height: 0; overflow: hidden; }
/* 背の低い PC(〜940px)で「もう一局」が出ていると、近ごろの人気が一行しか入らなかった。
   帳場の段の間を詰め、三行を入れる。 */
@media (min-width: 1000px) and (max-height: 940px) {
  .store-again { margin-bottom: 14px; }
  .store-week, .store-recent { margin-top: 14px; }
  .store-recent .recent-row { padding: 4px 0; }
  /* 空の知らせの行(#lobby-error)が丈を取っていた。 */
  .store-now .error-text:empty { display: none; }
}
.store-now, .store-week, .store-recent { padding-left: 26px; }
.store .eyebrow { margin-bottom: 10px; }

/* 「いま」の店の者の札。上端にだけ真鍮の線を引いた薄い紙。 */
.house-card {
  background: rgba(247, 241, 225, 0.8);
  border: 1px solid var(--shop-paper-line);
  border-top: 2px solid var(--shop-brass);
  border-radius: 3px;
  padding: 14px 16px 16px;
  box-shadow: 0 4px 12px rgba(36, 24, 16, 0.07);
}
.house-card-title { margin: 0; font-weight: 700; font-size: 0.92rem; }
.house-card-text { margin: 4px 0 12px; font-size: 0.8rem; line-height: 1.8; color: var(--shop-ink-soft); }
.house-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* 卓の一覧の窓。画面いっぱいに広げ(周りに 16px)、卓の札の並びだけを中で送る。
   高さも決めてあるので、絞って卓が減っても窓は縮まず、絵札も「とじる」も動かない。 */
.modal.room-list-modal {
  display: flex; flex-direction: column; box-sizing: border-box;
  width: calc(100vw - 32px); max-width: none;
  height: calc(100dvh - 32px);
  margin: 0 auto;
}
.room-list-modal > * { flex: 0 0 auto; }
/* 広い画面では卓の札を段組みに並べる。 */
.room-list-modal .room-ledger {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  align-content: start; column-gap: 24px;
}
.room-list-modal .modal-actions { margin-top: 12px; }
/* 卓が無いときは、空の並びの代わりに「ありません」の一文が残りを埋める。 */
.room-list-modal .room-ledger:empty { flex: 0 0 auto; }
.room-list-modal .room-ledger:empty + .empty-text { flex: 1 1 auto; }
/* 窓の上の絵札。押すとそのゲームの卓だけに絞る。 */
.room-list-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.room-filter-pick {
  flex-basis: 40px; width: 40px; height: 40px; padding: 0; border: none; cursor: pointer;
  font-size: 0.8rem; opacity: 0.55; outline-offset: 2px;
}
.room-filter-pick .cover-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room-filter-pick:hover { opacity: 0.85; }
.room-filter-pick.selected { opacity: 1; outline: 2px solid var(--shop-ink); }
/* スマホ幅: 絵札は一行にして横に送る(四段だと卓の札の場所がなくなる)。 */
@media (max-width: 600px) {
  .modal.room-list-modal { padding: 20px 16px; }
  .room-list-filter {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 3px; margin: 0 -3px 8px; scrollbar-width: thin;
  }
  .room-filter-pick { flex: 0 0 44px; width: 44px; height: 44px; }
}
.room-list-modal .empty-text { padding: 20px 0 4px; text-align: left; font-size: 0.88rem; }
/* この七日: 局数と、曜日×時間帯の濃淡(数字は出さない)。 */
.week-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.week-count { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.week-count .week-games { margin-bottom: 2px; }
.week-games { font-family: var(--shop-font-display); font-size: 1.15rem; font-weight: 700; }
.week-note { font-size: 0.72rem; line-height: 1.6; color: var(--shop-ink-soft); }
.week-note:empty { display: none; }
.week-heat { display: flex; align-items: flex-start; gap: 3px; flex: 0 0 auto; }
.week-heat-bands { display: flex; flex-direction: column; gap: 3px; margin-right: 3px; }
.week-heat-band { height: 14px; line-height: 14px; font-size: 0.69rem; color: var(--shop-ink-soft); text-align: right; white-space: nowrap; }
.week-heat-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.week-heat-cell { display: block; width: 22px; height: 14px; border-radius: 2px; background: rgba(42, 36, 28, 0.06); }
.week-heat-cell.level-1 { background: rgba(180, 144, 63, 0.3); }
.week-heat-cell.level-2 { background: rgba(180, 144, 63, 0.5); }
.week-heat-cell.level-3 { background: rgba(180, 144, 63, 0.75); }
.week-heat-cell.level-4 { background: var(--shop-brass); }
.week-heat-day { font-size: 0.69rem; line-height: 1.3; color: var(--shop-ink-soft); }

/* 近ごろの人気: 順位・紋・遊び・この七日の局数。 */
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--shop-paper-line);
  font-size: 0.78rem;
}
.recent-crest {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--shop-brass-light);
}
.recent-what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-who { color: var(--shop-ink-soft); }
.recent-when { flex: 0 0 auto; font-size: 0.7rem; color: var(--shop-ink-soft); }
.top-rank {
  flex: 0 0 1.4em;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  color: var(--shop-ink-soft);
}
.top-rank.first { color: var(--shop-seal); }
.top-game {
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.top-game:hover, .top-game:focus-visible { color: var(--shop-pine-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 999px) {
  #top-screen.screen.active { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  #top-screen.screen.active .paper-sheet { flex: 1 0 auto; }
  .store { display: flex; flex-direction: column; padding: 22px 18px 64px; }
  /* 狭い幅は「いま」の上に細い札で一段(#180): 箱の絵・名前と強さ・釦を横一列に。
     成績は強さの隣に置き、入らなければ次の行へ回す。 */
  .store-again { order: 0; padding-left: 0; margin-bottom: 22px; }
  .again-card { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 10px 12px; }
  .again-cover .cover { width: 48px; height: 48px; }
  .again-card { gap: 10px; }
  .again-meta { flex-direction: row; flex-wrap: wrap; gap: 2px 0.6em; letter-spacing: 0; }
  .again-btn { padding: 10px 14px; letter-spacing: 0; }
  .again-btn { grid-column: auto; }
  .store-now { order: 1; }
  .store-shelf { order: 2; margin-top: 26px; padding-right: 0; border-right: none; }
  .store-week { order: 3; }
  .store-recent { order: 4; overflow: visible; }
  .store-now, .store-week, .store-recent { padding-left: 0; }
  /* 横だけは切る。札が一瞬でもはみ出すとページごと広がり、区画の幅が
     変わらないまま fitShelf が縮め直す機会を逃す(#122 と同じ型)。 */
  .store .shelf { overflow: visible; overflow-x: clip; padding: 36px 0 8px; }
}

.cta-primary {
  background: var(--shop-pine);
  color: var(--shop-paper);
  border: 1px solid var(--shop-brass);
  padding: 14px 28px;
  border-radius: 3px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  font-family: var(--shop-font-body);
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cta-primary:hover { transform: translateY(-2px); background: var(--shop-pine-deep); }
.cta-primary.small { padding: 10px 22px; font-size: 0.85rem; }

.cta-outline {
  background: transparent;
  color: var(--shop-pine-deep);
  border: 1px solid var(--shop-pine);
  padding: 14px 28px;
  border-radius: 3px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  font-family: var(--shop-font-body);
  font-weight: 700;
  transition: background 0.18s ease;
}
.cta-outline:hover { background: rgba(74, 124, 89, 0.1); }
.cta-outline.small { padding: 10px 22px; font-size: 0.85rem; }

.room-ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--shop-paper-line); }
.room-ledger li.room-card {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--shop-paper-line);
  cursor: pointer;
  transition: background 0.15s ease;
}
.room-ledger li.room-card:hover { background: rgba(180, 144, 63, 0.08); }

.game-chip {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: var(--shop-paper);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.room-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.room-name {
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-meta { font-size: 0.78rem; color: var(--shop-ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.icon-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--shop-ink-soft); }
.icon-lock .glyph { position: relative; width: 9px; height: 7px; border: 1.4px solid var(--shop-ink-soft); border-top: none; border-radius: 0 0 2px 2px; display: inline-block; margin-top: 6px; }
.icon-lock .glyph::before { content: ""; position: absolute; top: -6px; left: 0.5px; width: 5px; height: 5px; border: 1.4px solid var(--shop-ink-soft); border-bottom: none; border-radius: 4px 4px 0 0; }

/* A word, not a second button. Boxed and rounded beside the real 入室する it
   read as something to press; the colour carries the state on its own. */
.room-status-pill { font-size: 0.74rem; letter-spacing: 0.08em; white-space: nowrap; flex: 0 0 auto; }
.room-status-pill.waiting { color: var(--shop-pine-deep); }
.room-status-pill.playing { color: var(--shop-burgundy-deep); }
.room-status-pill.cpu { color: var(--shop-walnut-deep); }

.room-ledger .row-cta {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--shop-pine);
  color: var(--shop-pine-deep);
  padding: 7px 16px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-family: var(--shop-font-body);
  transition: background 0.18s ease, color 0.18s ease;
}
.room-ledger .row-cta:hover { background: var(--shop-pine); color: var(--shop-paper); }
/* A CPU game already under way (or with every seat taken): listed, but not
   a door. The row stops answering to the pointer and its button greys. */
.room-ledger li.room-card.closed-to-watchers { cursor: default; }
.room-ledger li.room-card.closed-to-watchers:hover { background: transparent; }
.room-ledger li.room-card.closed-to-watchers .row-cta,
.room-ledger li.room-card.closed-to-watchers .row-cta:hover {
  border-color: var(--shop-paper-line);
  color: var(--shop-ink-soft);
  background: transparent;
  cursor: default;
}

@media (max-width: 640px) {
  .room-ledger li.room-card { flex-wrap: wrap; row-gap: 8px; }
  .room-info { flex: 1 1 60%; }
}

/* --- detail page --- */
.breadcrumb {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px 0;
  font-size: 0.8rem;
  color: var(--shop-ink-soft);
}
.breadcrumb .link-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--shop-ink-soft); }
.breadcrumb .sep { color: var(--shop-brass); margin: 0 8px; }

/* The hero and the body are the same paper with no rule between them, so the
   46+44 between the stat strip and the first heading read as a hole rather
   than as two bands. */
.detail-hero { background: var(--shop-paper); padding: 28px 24px 34px; }
.detail-hero-inner { max-width: 1120px; margin: 0 auto; }
/* The box's own lid, mounted the way the shelf mounts it - a hairline of paper
   proud of the print - but closed all the way round, since there is no 題箋
   pasted across the foot here: the h1 beside it is the title. */
.detail-cover {
  width: 240px;
  padding: 3px;
  background: var(--shop-paper);
  border: 1px solid var(--shop-paper-line);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(36, 24, 16, 0.18), 0 6px 14px rgba(36, 24, 16, 0.1);
  overflow: hidden;
  margin-bottom: 26px;
}
@media (min-width: 900px) {
  #detail-screen .detail-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0 48px;
    align-items: start;
  }
  #detail-screen .detail-hero-text { grid-column: 1; grid-row: 1; }
  #detail-screen .detail-cover { grid-column: 2; grid-row: 1; margin-bottom: 0; }
}
.detail-hero .eyebrow { margin-bottom: 6px; }
.detail-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 900; margin-bottom: 8px; }
.detail-hero .tagline { font-family: var(--shop-font-stamp); color: var(--shop-burgundy); font-size: 1rem; margin: 0 0 10px; }
.detail-hero-lead { color: var(--shop-ink-soft); font-size: 0.85rem; margin: 0; }
.detail-hero .detail-desc { color: var(--shop-ink-soft); font-size: 0.92rem; line-height: 1.7; max-width: 640px; margin: 0 0 26px; }
.detail-hero.tone-pine .emblem { border-color: var(--shop-pine); }
.detail-hero.tone-pine .emblem span,
.detail-hero.tone-pine .tagline { color: var(--shop-pine); }
.detail-hero.tone-walnut .emblem { border-color: var(--shop-walnut); }
.detail-hero.tone-walnut .emblem span,
.detail-hero.tone-walnut .tagline { color: var(--shop-walnut); }
.detail-hero.tone-slate .emblem { border-color: var(--shop-slate); }
.detail-hero.tone-slate .emblem span,
.detail-hero.tone-slate .tagline { color: var(--shop-slate); }
.detail-hero.tone-crimson .emblem { border-color: var(--shop-crimson); }
.detail-hero.tone-crimson .emblem span,
.detail-hero.tone-crimson .tagline { color: var(--shop-crimson); }
.detail-hero.tone-teal .emblem { border-color: var(--shop-teal); }
.detail-hero.tone-teal .emblem span,
.detail-hero.tone-teal .tagline { color: var(--shop-teal); }
.detail-hero.tone-violet .emblem { border-color: var(--shop-violet); }
.detail-hero.tone-violet .emblem span,
.detail-hero.tone-violet .tagline { color: var(--shop-violet); }
.detail-hero.tone-gold .emblem { border-color: var(--shop-gold); }
.detail-hero.tone-gold .emblem span,
.detail-hero.tone-gold .tagline { color: var(--shop-gold); }
.detail-hero.tone-brass .emblem { border-color: var(--shop-brass); }
.detail-hero.tone-brass .emblem span,
.detail-hero.tone-brass .tagline { color: var(--shop-brass); }
.detail-hero.tone-rust .emblem { border-color: var(--shop-rust); }
.detail-hero.tone-rust .emblem span,
.detail-hero.tone-rust .tagline { color: var(--shop-rust); }
.detail-hero.tone-sumi .emblem { border-color: var(--shop-sumi); }
.detail-hero.tone-sumi .emblem span,
.detail-hero.tone-sumi .tagline { color: var(--shop-sumi); }
.detail-hero.tone-urushi .emblem { border-color: var(--shop-urushi); }
.detail-hero.tone-urushi .emblem span,
.detail-hero.tone-urushi .tagline { color: var(--shop-urushi); }
.detail-hero.tone-night .emblem { border-color: var(--shop-night); }
.detail-hero.tone-night .emblem span,
.detail-hero.tone-night .tagline { color: var(--shop-night); }

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--shop-paper-line);
  border-radius: 3px;
  background: var(--shop-paper-deep);
  max-width: 720px;
}
.meta-strip .stat { flex: 1 1 140px; padding: 14px 18px; border-right: 1px solid var(--shop-paper-line); }
.meta-strip .stat:last-child { border-right: none; }
.meta-strip .stat .label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--shop-ink-soft); margin-bottom: 5px; }
.meta-strip .stat .value { font-family: var(--shop-font-display); font-size: 1.05rem; font-weight: 700; }

.detail-body { background: var(--shop-paper); padding: 36px 24px 20px; }
.detail-body-inner { max-width: 640px; margin: 0 auto; }
/* The hero lays its title out on the 1120 axis while the body sat in a 640
   column centred in the window, so the two started 240px apart and the right
   third of the page was never used. Same axis, and the two blocks stand side
   by side where there is width for them. */
#detail-screen .detail-body-inner { max-width: 1120px; }
@media (min-width: 900px) {
  #detail-screen .detail-body-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 56px;
    align-items: start;
  }
  #detail-screen .detail-body .block { margin-bottom: 0; }
}
.detail-body h2 { font-size: 1.1rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--shop-paper-line); }
.detail-body .block { margin-bottom: 34px; }
.detail-body .block p { color: var(--shop-ink-soft); font-size: 0.92rem; margin: 0; }
/* 無料・仮想のチップ・換金なし(issue #142、ポーカーだけ)。品書きと卓のあそびかたの両方。 */
.detail-note {
  margin: 12px 0 0 !important;
  padding: 7px 12px;
  border: 1px dashed var(--shop-paper-line);
  border-radius: var(--radius);
  font-size: 0.84rem !important;
  line-height: 1.7;
  color: var(--shop-ink-soft);
}
.detail-note.hidden { display: none; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 0.9rem; color: var(--shop-ink-soft); }
.feature-list li::before { content: "◆"; position: absolute; left: 0; top: 0.05em; color: var(--shop-brass); font-size: 0.68rem; }

/* Was .detail-screen, which matches nothing - the section carries the id, not
   the class - so the row had no gutter at all and the button sat against the
   window edge. The width is the 1120 axis plus the 24px gutter either side. */
/* 定番 and ローカル stand side by side on the deeper paper, the way the 作法
   does on 棋楽軒とは？ - a band of house rules rather than more of the blurb. */
.detail-rules {
  background: var(--shop-paper-deep);
  border-top: 1px solid var(--shop-paper-line);
  border-bottom: 1px solid var(--shop-paper-line);
  padding: 40px 24px 44px;
  margin-bottom: 36px;
}
.detail-rules-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  align-items: start;
}
/* 卓ごとに選べるものが無い遊びでは右の段が畳まれる(core.js の openGameDetail)。
   二段の組のまま片方を消すと、定番ルールだけが左半分に寄って右が空く。
   一段になったときは紙いっぱいに広げる。 */
.detail-rules-inner.one-block { grid-template-columns: minmax(0, 1fr); }
.detail-rules-link {
  max-width: 1120px;
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 0.85rem;
}
.detail-rules-link a {
  color: var(--shop-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--shop-brass);
}
.detail-rules-link a:hover { color: var(--shop-pine-deep); border-bottom-color: var(--shop-pine); }
.detail-rules-link .note { font-size: 0.8rem; color: var(--shop-ink-soft); }
.detail-rules h2 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--shop-paper-line);
}
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--shop-paper-line);
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--shop-ink-soft);
}
.rule-list li:last-child { border-bottom: none; }
.rule-list strong {
  display: block;
  font-family: var(--shop-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--shop-ink);
  margin-bottom: 2px;
}
@media (max-width: 760px) {
  .detail-rules-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

.detail-hero-cta { margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Why a CPU game could not be set up (the room cap, usually). Its own line
   under the buttons, in both CTA rows. */
.detail-cpu-error {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.82rem;
  color: var(--shop-burgundy);
}

.detail-tables { padding: 0 24px 26px; }
.detail-tables-inner { max-width: 1120px; margin: 0 auto; }
.detail-tables h2 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--shop-paper-line);
}
/* The ledger's own top rule would double the heading's, and one line of "no
   tables" does not want 40px of padding around it here. */
.detail-tables .room-ledger { border-top: none; }
.detail-tables .empty-text { padding: 18px 0 8px; text-align: left; font-size: 0.88rem; }

#detail-screen .cta-row { max-width: calc(1120px + 48px); margin: 0 auto; padding: 0 24px 64px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .hero, .shelf, .detail-media, .detail-body { background-image: none; }
  /* 帯そのものは 880px で畳んである(上)。ここでは左右を詰め、品書きは
     並べるのをやめて幅いっぱいに割る - スマホでは四つ分の間隔が取れない。 */
  .site-header { padding-left: 16px; padding-right: 16px; }
  .site-nav { justify-content: space-between; gap: 10px; }
  .meta-strip .stat { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--shop-paper-line); }
}


/* --- はじめての方へ: the house rules, on its own band below the greeting --- */
.manners {
  background: var(--shop-paper-deep);
  border-top: 1px solid var(--shop-paper-line);
  border-bottom: 1px solid var(--shop-paper-line);
  padding: 48px 24px 56px;
}
.manners-inner { max-width: 1120px; margin: 0 auto; }
.manners-heading { margin-bottom: 34px; }
.manners-heading h2 { font-size: 1.4rem; margin-top: 4px; }

.manners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}
.manners-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--shop-paper-line);
}
/* the two columns are one list read down, so only the very first rule shows */
.manners-list li:nth-child(-n + 2) { border-top: none; padding-top: 0; }
/* 一二三: the same kanji numerals the cards are printed with */
.manners-number {
  grid-row: span 2;
  font-family: var(--shop-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--shop-brass-deep);
  line-height: 1.5;
}
.manners-list h3 {
  margin: 0 0 6px;
  font-family: var(--shop-font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--shop-ink);
}
.manners-list p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--shop-ink-soft);
}
.manners-list strong { color: var(--shop-ink); font-weight: 700; }

.manners-note {
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--shop-paper-line);
  font-size: 0.84rem;
  line-height: 1.9;
  color: var(--shop-ink-soft);
}

/* 出どころ: on the lighter paper below the 作法, so it reads as the notice
   pinned by the door on the way out rather than another rule of the house. */
.credits { background: var(--shop-paper); padding: 44px 24px 56px; }
.credits-inner { max-width: 1120px; margin: 0 auto; }
.credits-heading { margin-bottom: 26px; }
.credits-heading h2 { font-size: 1.4rem; margin-top: 4px; }
.credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}
.credits-list li { padding: 18px 0; border-top: 1px solid var(--shop-paper-line); }
.credits-list li:nth-child(-n + 2) { border-top: none; padding-top: 0; }
.credits-list a {
  font-family: var(--shop-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--shop-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--shop-brass);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.credits-list a:hover { color: var(--shop-pine-deep); border-bottom-color: var(--shop-pine); }
.credits-list p { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.9; color: var(--shop-ink-soft); }

@media (max-width: 760px) {
  .credits-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .credits-list li:nth-child(2) { border-top: 1px solid var(--shop-paper-line); padding-top: 18px; }
}

@media (max-width: 760px) {
  .manners-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .manners-list li:nth-child(-n + 2) { border-top: 1px solid var(--shop-paper-line); padding-top: 20px; }
  .manners-list li:first-child { border-top: none; padding-top: 0; }
}

/* --- 帳面の一枚: 入場の後の紙の画面(卓を見る・対戦記録・棋楽軒とは) ---
   入場は暗がりに暖簾・紋・台の影絵があるのに、入ると無地の紙になって
   いた。その落差を埋めるため、この三画面の中身を一枚の帳面にする。地は
   にじんだわら半紙(--shop-wara-ground)、帳面の縁は朱の二重罫、下罫には
   入場の台の影絵を乗せる(罫がそのまま台の縁になる)。見出しの小書きには
   真鍮の菱と細い罫。棚の画面は灯りの棚があるので、この帳面には入れない。 */
#top-screen, #about-screen {
  background-color: var(--shop-paper);
  background-image: var(--shop-wara-ground);
}
.paper-sheet {
  position: relative;
  margin: 14px;
  border: 1px solid var(--shop-sheet-rule);
  outline: 1px solid var(--shop-sheet-rule-outer);
  outline-offset: 3px;
}
/* 店の中は広い画面ではページごとスクロールさせない縦 flex。帳面がその
   残りの高さを取る。 */
#top-screen.screen.active .paper-sheet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 帳面の中の区画は地を持たない ―― わら半紙が透けて一枚に見えるように。 */
.paper-sheet .detail-hero,
.paper-sheet .detail-body,
.paper-sheet .hero,
.paper-sheet .credits { background: none; }
.paper-sheet .manners { background: rgba(222, 208, 170, 0.45); }

/* 台の影絵。右下の音のボタンの左に置き、下罫の上に乗せる。中身の後ろ。 */
.paper-sheet::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: 76px;
  bottom: 0;
  width: 220px;
  height: 53px;
  background: url('/icons/counter-silhouette.svg') no-repeat center bottom / contain;
  pointer-events: none;
}
.paper-sheet > * { position: relative; z-index: 1; }

/* 見出しの小書き: 頭に真鍮の菱、尻に消えていく細い罫。 */
.paper-sheet .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.paper-sheet .eyebrow::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  background: var(--shop-brass);
  transform: rotate(45deg);
}
.paper-sheet .eyebrow::after {
  content: '';
  flex: 0 0 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--shop-brass), transparent);
}

@media (max-width: 640px) {
  /* 狭い画面では帳面の縁を詰め、影絵は左下へ(右下は音のボタン)。 */
  .paper-sheet { margin: 8px; }
  .paper-sheet::after { right: auto; left: 10px; width: 170px; height: 41px; }
}

/* CPU戦の成績(issue #96)。「CPUと一局」の下に一行で。 */
.detail-cpu-record {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--shop-ink-soft);
}
.detail-cpu-record.hidden { display: none; }

/* 横にしたスマホ(高さ 500px 以下)。名乗りを二段にすると「この名前で入る」が
   画面の下に切れる(#178)。名前欄・入る・別の名前を一段に戻す。 */
@media (max-height: 500px) and (min-width: 641px) {
  .gate-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name enter other";
    width: 600px;
  }
  .gate-form .gate-cta { height: 52px; padding: 0 22px; }
}

/* 横にしたスマホの戸口(#167)。縦に積むと、名入れの段が見本の箱の帯に押されて
   丈 172px の送り枠になり、名前欄と「この名前で入る」が最初の画面の下に隠れて
   いた。名入れを左右の二段組にして、左に紋・屋号・口上、右に名前欄から下を
   置く(段組みの切れ目は名前欄か、再訪の札)。見本の箱は帯から出して左下に
   浮かべ、名入れに画面の丈を全部渡す。暖簾は細くする。 */
@media (max-height: 500px) and (min-width: 641px) {
  #entry-screen.shop-entry { --noren-w: min(620px, 92vw, 40vh); }
  /* 右端の音と言葉の丸い札(縦に二つ)の下に名入れが潜らないよう、右を空ける。 */
  .entry-layout { box-sizing: border-box; padding-right: 64px; }
  .entry-card {
    display: block;
    columns: 2;
    column-gap: 40px;
    width: 100%;
    max-width: 720px;
    margin: 0 0 auto;
    padding-top: 8px;
  }
  /* 背後の灯りは名入れの丈に収める(はみ出すと名入れの段が送り枠になる)。 */
  .entry-card::before { height: 100%; }
  .entry-card > * { margin-left: auto; margin-right: auto; }
  .entry-card > :is(#gate-form, #returning-panel) { break-before: column; margin-top: 0; }
  .entry-card > :is(.gate-alt-btn, .gate-rules-link) { display: table; }
  .entry-card > .gate-alt-btn.hidden { display: none; }
  .entry-card .emblem.gate { width: 34px; height: 34px; }
  .entry-card .emblem.gate span { font-size: 1rem; }
  .shop-name { font-size: 1.7rem; margin-top: 12px; }
  .gate-rule { margin-top: 10px; }
  #entry-screen .gate-lede { margin-top: 10px; font-size: 0.85rem; line-height: 1.75; }
  /* 右の段は幅が半分なので、名前欄の段は上下二段(#178 の広い形)に戻す。 */
  .gate-form {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name other" "enter enter";
    width: 100%;
  }
  .gate-form .gate-cta { height: 50px; }
  .gate-note { margin-top: 8px; }
  .returning-panel { padding: 16px 24px 16px; }
  /* 段組みの頭より上(top: -9px)に出たぶんは、前の段の下の端に描かれてしまう。
     札の頭に置いてから、ずらしは transform で(こちらは段で切れない)。 */
  .returning-panel .pin { top: 0; transform: translate(-50%, -9px); }
  .returning-cta { margin-top: 12px; }
  .gate-alt-btn { margin-top: 10px; }
  .gate-hairline { margin-top: 10px; }
  .gate-rules-link { margin-top: 8px; }
  .entry-sampler {
    --lid: 56px;
    --box-t: 4px;
    --sampler-bottom: 8px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    margin: 0;
  }
  .sampler-side:nth-child(n + 4) { display: none; }
  /* 900px からの広い形(‹ 点 › を台の下へ)は、低い画面では下に切れるので、
     題の下の段に戻す。 */
  .sampler-caption { position: relative; margin-left: 18px; padding-bottom: 0; }
  .sampler-name { font-size: 1.05rem; }
  .sampler-pager { position: static; margin: 6px 0 0 -3px; }
  .sampler-board { height: 10px; margin: 0 -10px 0 -30px; }
}