/* =========================================================
   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-pine { background: linear-gradient(160deg, var(--shop-pine), var(--shop-pine-deep)); }
.tone-burgundy { background: linear-gradient(160deg, var(--shop-burgundy), var(--shop-burgundy-deep)); }
.tone-walnut { background: linear-gradient(160deg, #4a3524, var(--shop-walnut-deep)); }
.tone-muted { background: linear-gradient(160deg, #8a8272, #6b6455); }
.tone-slate { background: linear-gradient(160deg, #45536a, #262f3d); }
.tone-crimson { background: linear-gradient(160deg, var(--shop-crimson), var(--shop-crimson-deep)); }
.tone-teal { background: linear-gradient(160deg, var(--shop-teal), var(--shop-teal-deep)); }
.tone-violet { background: linear-gradient(160deg, var(--shop-violet), var(--shop-violet-deep)); }
.tone-gold { background: linear-gradient(160deg, var(--shop-gold), var(--shop-gold-deep)); }
.tone-brass { background: linear-gradient(160deg, var(--shop-brass), var(--shop-brass-deep)); }
.tone-rust { background: linear-gradient(160deg, var(--shop-rust), var(--shop-rust-deep)); }

/* --- entry gate --- */
/* 暖簾の丈は幅で決まる(viewBox 620:190)。裾の位置を追うものが他にもある
   ので、幅はここ一箇所に置いて、みなこの値から算する。 */
#entry-screen.shop-entry {
  --noren-w: min(620px, 92vw);
  --noren-h: calc(var(--noren-w) * 0.3065);
  min-height: 100vh;
  position: relative;
  /* 横だけ塞ぐ。暖簾と台が画面幅を越えても横スクロールは出さないが、縦の
     短い画面では切り落とさずにスクロールさせる。 */
  overflow-x: hidden;
  padding: 0 24px 132px;
  background: radial-gradient(ellipse at 50% 30%, #2c1d12 0%, var(--shop-walnut-deep) 55%, #140d08 100%);
}
#entry-screen.shop-entry.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 名入れは画面の中央ではなく暖簾の裾に付ける。中央に置くと、縦に広い画面
   ほど布から離れて、くぐった先に立っているという関係が切れる。 */
.entry-layout {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--noren-h) + 46px);
}

.entry-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.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;
}
.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-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 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--noren-w);
  z-index: 1;
  pointer-events: none;
}
/* height を auto にして viewBox の比を保つ。--noren-h の式が成り立つのは
   この一行のおかげで、縦に潰すと裾の位置がずれる。 */
.noren svg { display: block; width: 100%; height: auto; }

/* 行灯。暖簾の下だけが明るく、その光の中に名入れが立つ。 */
.entry-lamp {
  position: absolute;
  top: calc(var(--noren-h) * 0.7);
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 96vw);
  height: 620px;
  background: radial-gradient(ellipse at 50% 40%, rgba(221, 192, 127, 0.075) 0%, rgba(221, 192, 127, 0) 68%);
  z-index: 0;
  pointer-events: none;
}

/* 台の高さは画面の高さに従う。天井を決め打ちにすると、縦の短い画面で
   名入れの札まで品物がせり上がってくる。台の縁の線だけは幅いっぱいに
   引いて、品物の並びが切れた先も台が続いているようにしてある - ただし
   右下の音量ボタンに届く前に消える。 */
.entry-counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(76px, 14vh, 120px);
  z-index: 1;
  pointer-events: none;
}
.entry-counter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20%;
  height: 1px;
  background: linear-gradient(to right, rgba(221, 192, 127, 0.16) 0%, rgba(221, 192, 127, 0.1) 34%, transparent 64%);
}
.entry-counter svg {
  display: block;
  height: 100%;
  width: auto;
  margin-left: clamp(4px, 3vw, 60px);
  /* 但し書きが音量つまみの隣に座ったので、譲る幅はその一行とつまみの分で
     足りる。以前は段いっぱいの幅を空けていた。 */
  max-width: calc(100vw - 210px);
}

/* 二度目の人の道。名前欄と横に並べず、同じ場所に入れ替わりで立つ。
   塗りの札と輪郭のボタンを並べると主動線が二本になり、どちらが自分の道か
   を来た人に選ばせることになる。 */
.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; }

/* 入口に押し戻されたときが、この画面でいちばん説明の要る場面 - 名前を
   取られた、混んでいる。裸の赤い一行ではなく、紙に書いた断りとして出す。 */
.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
   に落ちる。暖簾の丈と段の間を一枚ずつ削って、戸口の一式が折り返しの上に
   収まるようにする。閾はいちばん丈の出る再訪の札を出した形で決めてある -
   そこまでは原寸のほうが台との間が詰まって、床が広く空かない。 */
@media (max-height: 840px) {
  #entry-screen.shop-entry { --noren-w: min(500px, 84vw); padding-bottom: 104px; }
  .entry-layout { padding-top: calc(var(--noren-h) + 30px); }
  .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: 26px; }
  .gate-alt-btn { margin-top: 16px; }
  .gate-hairline { margin-top: 26px; }
  .gate-occupancy-line { margin-top: 14px; }
  .entry-counter { height: clamp(66px, 12vh, 96px); }
}

@media (max-width: 640px) {
  /* 暖簾も台も仕舞っていたころは、スマホでは茶のグラデに名前欄が一つ
     残るだけで、この店の作りが全部落ちていた。丈と並びを削って、両方とも
     残す。 */
  #entry-screen.shop-entry { --noren-w: min(380px, 88vw); padding-bottom: 112px; }
  .entry-layout { padding-top: calc(var(--noren-h) + 34px); }
  .shop-name { font-size: 2.05rem; }
  .gate-lede { font-size: 0.95rem; line-height: 2; }
  .gate-form { flex-direction: column; align-items: stretch; width: min(300px, 80vw); }
  #player-name-input { width: 100%; box-sizing: border-box; }
  .returning-panel { width: min(300px, 80vw); }
  .entry-counter { height: clamp(58px, 11vh, 88px); }
  .entry-counter svg { margin-left: 8px; max-width: calc(100vw - 24px); }
  /* つまみの横には並ばない幅なので、真上に積む。 */
  .se-notice { right: 20px; bottom: calc(var(--tool-stack-base) + 58px); }
}

/* --- 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);
}

.site-header {
  background-color: var(--shop-walnut);
  background-image: var(--wood-sheen), var(--wood-knots), var(--wood-grain);
  box-shadow: var(--wood-shadow-panel);
  padding: 0 24px;
}
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  flex-wrap: wrap;
}
.logotype {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.logotype .name {
  font-family: var(--shop-font-stamp);
  font-size: 1.35rem;
  color: var(--shop-paper);
  letter-spacing: 0.08em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(236, 225, 200, 0.82);
}
.site-nav a, .nav-link-btn {
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.site-nav a:hover, .nav-link-btn:hover { color: var(--shop-brass-light); }
.player-badge {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--shop-brass-light);
}

.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); }

.shelf-page-heading { background: var(--shop-paper); padding: 52px 24px 26px; border-bottom: 1px solid var(--shop-paper-line); }
.shelf-page-heading-inner { max-width: 1120px; margin: 0 auto; }
.shelf-page-heading h1 { font-size: 1.4rem; font-weight: 900; margin-top: 4px; }

.shelf {
  background: var(--shop-paper-deep);
  padding: 48px 24px 60px;
  border-top: 1px solid var(--shop-paper-line);
  border-bottom: 1px solid var(--shop-paper-line);
}
.shelf-inner { max-width: 1120px; margin: 0 auto; }
/* The shelf label sits at the left end of its own plank. It used to carry an
   eyebrow reading "Game" above a heading reading ボード, which said the same
   thing twice, and at 1.4rem it competed with the page heading above it. */
.shelf-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.shelf-heading h2 { font-size: 1.15rem; letter-spacing: 0.08em; }
.shelf-heading::after { content: ""; flex: 1; height: 1px; background: var(--shop-paper-line); }

.shelf-group { margin-bottom: 34px; }
.shelf-group:last-child { margin-bottom: 0; }

.shelf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 26px;
}

/* --- game box on the shelf: a printed lid with a 題箋 pasted across it --- */
.game-box {
  flex: 0 0 240px;
  /* A hairline of paper shows around the lid, like a print left slightly proud
     of its mount. Set explicitly because the implemented cards are <button>s and
     base.css pads every button - left alone that inset is 10px/18px, and the
     coming-soon <div>s get none of it. */
  padding: 3px 3px 0;
  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;
  color: var(--shop-ink);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.game-box:hover { box-shadow: 0 3px 6px rgba(36, 24, 16, 0.22), 0 18px 30px rgba(36, 24, 16, 0.22); }
.game-box:focus-visible { outline: 2px solid var(--shop-pine); outline-offset: 2px; }
.game-box.coming-soon { cursor: default; opacity: 0.7; }
.game-box.coming-soon:hover { box-shadow: 0 1px 2px rgba(36, 24, 16, 0.18), 0 6px 14px rgba(36, 24, 16, 0.1); }

/* The lid. It is printed on the box on the shelf and again, at the same size,
   on the page that box opens onto - so it carries its own class rather than
   living under .game-box. */
.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;
}
.game-box:hover .cover::after { border-color: rgba(221, 192, 127, 0.78); }

/* 準備中 reads as a seal stamped in the corner, clear of the title tag */
.cover .soon-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  background: var(--shop-seal);
  color: var(--shop-paper);
  font-family: var(--shop-font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-shadow: none;
  padding: 3px 9px;
  border-radius: 2px;
}

.box-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

/* 題箋: a paper slip pasted across the foot of the lid */
.title-tag { position: relative; z-index: 1; margin-top: -22px; }
.title-tag-svg {
  display: block;
  width: 100%;
  max-width: 176px;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(36, 24, 16, 0.22));
}
/* a warm walnut edge rather than near-black ink: the lid's brass hairline is
   the finest line on the card, and the slip must not shout over it */
.title-tag-rect { fill: var(--shop-paper); stroke: var(--shop-walnut); stroke-opacity: 0.55; stroke-width: 1; }
.title-tag-rule { fill: none; stroke: var(--shop-brass); stroke-width: 1; opacity: 0.75; }
.title-tag-text {
  fill: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
}

.shelf-ledge {
  height: 10px;
  max-width: 1120px;
  margin: -14px auto 0;
  background: linear-gradient(to bottom, var(--shop-brass), var(--shop-brass) 40%, transparent 40%);
  opacity: 0.5;
  border-radius: 2px;
}

/* --- room list (ledger) --- */
.room-list-section { background: var(--shop-paper); padding: 0 24px 72px; }
.room-list-inner { max-width: 1120px; margin: 0 auto; padding-top: 52px; }
.room-list-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.room-list-heading h2 { font-size: 1.4rem; margin-top: 4px; }

.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-list-heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* base.css's .hidden loads first, so its display:none loses to the flex above
   at equal specificity. */
.room-list-heading-actions.hidden { display: none; }

/* An empty ledger, which is what a small shop usually has. Same .visible switch
   the old one-line .empty-text used. */
.room-empty { display: none; padding: 8px 0 24px; }
.room-empty.visible { display: block; }
.room-empty-lead {
  margin: 0 0 28px;
  text-align: center;
  font-family: var(--shop-font-display);
  font-size: 1.05rem;
  color: var(--shop-ink-soft);
}
.room-empty-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}
.room-empty-way {
  background: var(--shop-paper-deep);
  border: 1px solid var(--shop-paper-line);
  border-radius: 3px;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.room-empty-way h3 {
  margin: 0;
  font-family: var(--shop-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--shop-ink);
}
.room-empty-way p {
  margin: 0;
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--shop-ink-soft);
}
.room-empty-way button { margin-top: 4px; }
@media (max-width: 640px) {
  .room-empty-ways { grid-template-columns: minmax(0, 1fr); }
}

.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-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); }

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

/* 帳面から: the tail of the match book, under the ledger. Quiet on purpose -
   it is a sign the shop gets used, not something to act on. (No display of its
   own, so base.css's .hidden still switches it off.) */
.recent-matches { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--shop-paper-line); }
.recent-matches-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* base.css pads and boxes every button; .link-btn is only undone inside
   .breadcrumb, so it needs undoing here too or the way through to the book
   reads as another thing to press. */
.recent-matches-heading .link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--shop-font-body);
  font-size: 0.78rem;
  color: var(--shop-ink-soft);
  cursor: pointer;
  border-bottom: 1px dotted var(--shop-ink-soft);
}
.recent-matches-heading .link-btn:hover { color: var(--shop-ink); border-bottom-color: var(--shop-ink); }
.activity-highlight { margin: 0; font-size: 0.85rem; color: var(--shop-ink-soft); }

/* --- 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; }
#history-screen .detail-hero { padding-bottom: 26px; border-bottom: 1px solid var(--shop-paper-line); }
#history-screen .detail-body { padding-top: 26px; }
.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; }
#history-screen .detail-hero h1 { font-size: 1.4rem; }
.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); }

.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; }
#history-screen .detail-body-inner { max-width: 1120px; }
/* 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; }
.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;
}
.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; }

.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; }
  /* The nav drops onto its own line under the logotype rather than being
     hidden: four short links fit, and hiding them left the logo as the only
     way out of a page on a phone. */
  .header-inner { gap: 0 16px; padding: 14px 0; }
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(221, 192, 127, 0.22);
    font-size: 0.8rem;
    letter-spacing: 0;
  }
  .player-badge { order: 2; font-size: 0.78rem; }
  .logotype .name { font-size: 1.15rem; }
  .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; }
}