/* --- room screen (always rendered in the paper/shop palette) --- */
/* No bar across the top: the board is the one dark mass in the room. The
   table's name hangs from the top edge on a low board cut to the width of the
   board or card table below it (core.js sets --room-sign-w), so the two read
   as one piece - a nameplate over the table - and the bottom tabs mirror it.
   Before a game is chosen it takes a fixed width. Leaving sits at the
   left like any back link and stays quiet - in a game it costs the match, and
   the confirm dialog is there for that. The right says what the table is
   doing, so nobody has to open the ルーム drawer to find whose turn it is. */
.room-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}
.room-leave-btn {
  justify-self: start;
  margin-left: -10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--shop-ink-soft);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.room-leave-btn:hover { background: var(--shop-paper-line); color: var(--shop-ink); }
.room-leave-btn:focus-visible {
  outline: 2px solid var(--shop-brass-deep);
  outline-offset: 1px;
}
.room-leave-arrow { font-size: 1rem; line-height: 1; }

.room-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-sizing: border-box;
  width: var(--room-sign-w, 560px);
  /* the side columns keep room for 退室 and the state line */
  max-width: calc(100vw - 400px);
  min-width: 220px;
  height: 42px;
  padding: 0 28px;
  border: 1px solid var(--shop-brass);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background-color: var(--shop-walnut);
  background-image: var(--wood-sheen), var(--wood-grain);
  box-shadow: var(--wood-shadow-button), 0 4px 14px rgba(0, 0, 0, 0.22);
}
.room-header h1 {
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--shop-font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--shop-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-sign-game {
  flex: none;
  padding-left: 14px;
  border-left: 1px solid rgba(221, 192, 127, 0.4);
  color: var(--shop-brass-light);
  font-size: 0.76rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.room-sign-game:empty { display: none; }

.room-state {
  justify-self: end;
  min-width: 0;
  margin: 0;
  color: var(--shop-ink-soft);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-align: right;
}
.room-state-phase { color: var(--shop-ink); font-weight: 600; }
.room-state-phase.mine { color: var(--shop-pine); }
.room-state-phase.mine::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--shop-pine);
  vertical-align: 0.12em;
}
/* 終局の判の控え ―― 盤に捺した判がここへ飛んできて、次の局が始まるまで
   残る(game-fx.js)。飛んでいる間は場所だけ取って伏せておく。 */
.room-state-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.4em;
  border-radius: 3px;
  background: var(--shop-seal);
  color: var(--shop-paper-light);
  font-family: var(--shop-font-stamp);
  font-weight: 400;
  line-height: 1;
  vertical-align: -0.35em;
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 1px var(--shop-seal), inset 0 0 0 2px rgba(247, 241, 225, 0.75);
}
.room-state-seal.draw {
  background: var(--shop-brass);
  color: var(--shop-walnut-deep);
  box-shadow: inset 0 0 0 1px var(--shop-brass), inset 0 0 0 2px rgba(36, 24, 16, 0.35);
}
body.game-fx-holding .room-state-seal { visibility: hidden; }
.room-state-extra::before {
  content: '·';
  margin: 0 0.6em;
  color: rgba(42, 36, 28, 0.5);
}

/* Paper, not the dark UI's blue-grey: this is the first line a visitor reads
   on an empty lobby, and --text-dim sits at about 1.9:1 on --shop-paper. */
.empty-text {
  color: var(--shop-ink-soft);
  text-align: center;
  padding: 40px;
  display: none;
}
.empty-text.visible {
  display: block;
}

.room-body {
  display: flex;
  padding: 24px 32px;
}

.player-panel {
  width: 280px;
  background: var(--shop-paper-deep);
  border: 1px solid var(--shop-paper-line);
  border-radius: var(--radius);
  padding: 18px;
}

/* --- the bottom edge ---
   Four tabs stand on the bottom edge of the table in one row, all the same
   height: ルーム, よもやま, the start plaque while it is up, and the gear. */
#room-screen { --edge-tab-h: 48px; }
/* The dock of a phone or tablet (see 段, after the よもやま section). On a
   wide screen the four stand on the edge each on its own, and the box
   around them is not there at all. */
.room-dock { display: contents; }
.room-toggle-btn .dock-icon,
.room-toggle-count,
.tools-toggle-btn .dock-label,
.dock-ready-btn { display: none; }

/* --- room control (player panel collapsed into a bottom-left dropdown) --- */
.room-control {
  position: fixed;
  left: 20px;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.room-menu {
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px 18px 18px;
  background-color: var(--shop-paper);
  background-image: var(--shop-paper-grain);
  border: 1px solid var(--shop-brass);
  border-top: none;
  border-radius: 0;
}
.room-menu.hidden { display: none; }
.room-toggle-btn {
  width: 280px;
  height: var(--edge-tab-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px 12px 0 0;
  background: var(--shop-walnut);
  background-image: var(--wood-sheen), var(--wood-grain);
  border: 1px solid var(--shop-brass);
  color: var(--shop-brass-light);
  font-family: var(--shop-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  box-shadow: var(--wood-shadow-button);
  transition: background-color 0.18s ease;
}
.room-toggle-btn:hover { background-color: var(--shop-walnut-warm); }
.room-toggle-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}
.room-toggle-btn.open .room-toggle-caret { transform: rotate(180deg); }

/* The list is always shown - the drawer itself is the one thing that folds -
   so its title is a plain ledger heading, with the seat count ruled off to
   the right of it. */
.player-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 0 2px;
  font-family: var(--shop-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--shop-ink-soft);
  letter-spacing: 0.08em;
}
.player-list-head .seat-count {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

#room-player-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border-top: 1px solid var(--shop-paper-line);
}
/* Seats read as ruled lines in a ledger, the same device the lobby
   uses for its room list (.room-ledger). */
#room-player-list li {
  padding: 9px 2px;
  border-bottom: 1px solid var(--shop-paper-line);
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#room-player-list li.spectator-row {
  opacity: 0.7;
}
#room-player-list li.disconnected-row {
  opacity: 0.55;
}
#room-player-list li .seat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#room-player-list li .seat-self {
  color: var(--shop-ink-soft);
  font-size: 0.8rem;
}
#room-player-list li .tag-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* Every seat tag is the same small slip; only the ink changes, so they read
   as one kind of mark rather than a mix of text, boxes and badges. */
#room-player-list li .seat-tag {
  font-family: var(--shop-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--shop-ink-soft);
}
#room-player-list li .host-tag { color: var(--shop-pine-deep); }
#room-player-list li .ready-tag {
  color: var(--shop-paper);
  background: var(--shop-pine);
  border-color: var(--shop-pine);
}
#room-player-list li .not-ready-tag { border-style: dashed; }
#room-player-list li .turn-tag {
  color: var(--shop-walnut-deep);
  background: var(--shop-brass-light);
  border-color: var(--shop-brass);
}
#room-player-list li .disconnected-tag { color: var(--shop-burgundy); }
#room-player-list li .score-tag {
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--shop-paper-deep);
  border-color: var(--shop-brass);
  border-radius: 999px;
  padding: 0 8px;
}
/* The × column: a button on CPU rows, an empty slot of the same width on the
   rest, so the tags end on one line down the list. */
#room-player-list li .cpu-remove-btn,
#room-player-list li .cpu-remove-slot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 4px;
}
#room-player-list li .cpu-remove-btn {
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--shop-burgundy);
  background: none;
  color: var(--shop-burgundy);
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#room-player-list li .cpu-remove-btn:hover {
  background: rgba(122, 45, 45, 0.12);
}

/* --- 高札: the start-game plaque ---
   A tab on the bottom edge like its neighbours, just left of the gear, so the
   row reads as one run of tabs. Pine lacquer + a brass rule, the same pairing
   the lobby uses for .cta-primary. */
.start-game-control {
  position: fixed;
  right: 76px;
  bottom: 0;
  z-index: 5;
}
.start-game-btn-float {
  width: 100%;
  min-width: 172px;
  height: var(--edge-tab-h);
  padding: 0 28px;
  border-radius: 12px 12px 0 0;
  background-color: var(--shop-pine);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.2));
  border: 1px solid var(--shop-brass);
  color: var(--shop-paper);
  font-family: var(--shop-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  box-shadow: inset 0 0 0 1px rgba(221, 192, 127, 0.22), 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.start-game-btn-float:hover {
  background-color: var(--shop-pine-deep);
  box-shadow: inset 0 0 0 1px rgba(221, 192, 127, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 20px rgba(221, 192, 127, 0.25);
}
.start-game-btn-float:disabled {
  background-color: var(--shop-paper-deep);
  background-image: none;
  border-color: var(--shop-paper-line);
  color: #6f6455;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: not-allowed;
}

#change-game-btn,
#ready-btn {
  width: 100%;
  margin-bottom: 8px;
}

/* The two lesser host actions share a row under the one that changes the
   whole table. The CPU button keeps to its label; spectating takes the rest. */
.room-action-row {
  display: flex;
  gap: 8px;
}
.room-action-row:has(> :not(.hidden)) { margin-bottom: 8px; }
.room-action-row .secondary-btn { padding-left: 12px; padding-right: 12px; }
#add-cpu-btn { flex: 0 0 auto; }
#host-spectate-btn { flex: 1 1 auto; }

.room-action-hint {
  margin: -2px 0 8px;
  color: var(--shop-ink-soft);
  font-size: 0.75rem;
}
.room-action-hint.hidden { display: none; }

#force-draw-btn {
  width: 100%;
  margin-top: 8px;
}

.room-menu .status-text {
  margin: 4px 0 0;
  font-size: 0.8rem;
}
.room-menu .status-text:empty { display: none; }

.manageable-row {
  cursor: context-menu;
}

.context-menu {
  position: fixed;
  z-index: 20;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.context-menu.hidden {
  display: none;
}
.context-menu-item {
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  font-size: 0.9rem;
  width: 100%;
}
.context-menu-item:hover {
  background: var(--panel-alt);
}
.context-menu-item.cancel {
  color: var(--text-dim);
}
.context-menu.paper-modal {
  background: var(--shop-paper);
  border: 1px solid var(--shop-brass);
}
.context-menu.paper-modal .context-menu-item {
  color: var(--shop-ink);
}
.context-menu.paper-modal .context-menu-item:hover {
  background: rgba(180, 144, 63, 0.18);
}
.context-menu.paper-modal .context-menu-item.cancel {
  color: var(--shop-ink-soft);
}

.game-panel {
  flex: 1;
  width: 100%;
  /* Without min-width a board wider than the room stretches this flex item,
     which widens the document and leaves the wooden header ending short of the
     scrolled width. Let the board scroll inside the panel instead. `safe`
     centring keeps its left edge reachable once it does overflow. */
  min-width: 0;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: safe center;
  padding-top: 8px;
}

@media (max-width: 640px) {
  .room-body { padding: 14px 12px; }
  /* A phone keeps the sign and the one line that matters - whose turn -
     and drops the head counts, which the ルーム drawer still has. */
  .room-header { gap: 8px; padding: 0 12px; }
  .room-leave-btn { margin-left: -6px; padding: 6px; }
  /* No width to spare for a board-wide sign: it keeps to its words, and
     the game's name goes, being on the board itself. */
  .room-sign { width: auto; min-width: 0; max-width: 50vw; padding: 0 18px; }
  .room-sign-game { display: none; }
  .room-header h1 { font-size: 1rem; letter-spacing: 0.06em; }
  .room-state { font-size: 0.8rem; letter-spacing: 0.02em; }
  .room-state-extra { display: none; }
}



/* --- room screen shell ---
   Every registered game renders in the paper/shop palette (see PAPER_THEME_GAMES
   in main.js), so the room screen's own styling lives directly on its base
   selectors above. What remains here is scoped to #room-screen because
   .primary-btn/.secondary-btn are shared with modals outside the room (e.g. the
   lobby's create-room dialog), which still use the dark palette. */
#room-screen {
  background: var(--shop-paper);
  color: var(--shop-ink);
  font-family: var(--shop-font-body);
  min-height: 100vh;
}
/* Buttons inside the room keep the shop radius (3px, a cut paper or wood
   edge) rather than the 10px default the dark UI uses. */
#room-screen .primary-btn,
#room-screen .secondary-btn { border-radius: 3px; }
#room-screen .primary-btn {
  background: var(--shop-pine);
  border: 1px solid var(--shop-brass);
  color: var(--shop-paper);
}
#room-screen .primary-btn:hover { background: var(--shop-pine-deep); }
/* Stripping the fill and the frame left disabled buttons reading as stray text
   rather than as buttons that cannot be pressed yet. Keep the shape. */
#room-screen .primary-btn:disabled {
  background: var(--shop-paper-deep);
  color: #6f6455;
  border-color: var(--shop-paper-line);
  box-shadow: none;
  cursor: not-allowed;
}
#room-screen .player-panel .secondary-btn,
#room-screen .game-panel .secondary-btn {
  background: transparent;
  border: 1px solid var(--shop-ink-soft);
  color: var(--shop-ink);
  font-family: var(--shop-font-body);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
#room-screen .player-panel .secondary-btn:hover,
#room-screen .game-panel .secondary-btn:hover {
  background: rgba(180, 144, 63, 0.16);
  border-color: var(--shop-brass-deep);
}
#room-screen .player-panel .secondary-btn:disabled,
#room-screen .game-panel .secondary-btn:disabled {
  background: transparent;
  color: #6f6455;
  border-color: var(--shop-paper-line);
  cursor: not-allowed;
}


/* --- per-game rules button (top of the tool stack on the right edge) --- */
.rules-control {
  position: fixed;
  right: 20px;
  bottom: calc(var(--tool-stack-base) + 174px);
  z-index: 5;
}
.rules-control.hidden { display: none; }

/* --- 道具: the gear takes the corner, a short tab at the end of the row ---
   Its wood and brass come from the round counters in base.css; here it is cut
   square at the foot to stand on the edge, and the slips it reveals stack up
   the right-hand side above it. */
.tools-control {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 5;
}
.tools-control .tools-toggle-btn {
  width: 48px;
  height: var(--edge-tab-h);
  flex-basis: auto;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--wood-shadow-button), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.tools-control .tools-toggle-btn:hover {
  transform: none;
  box-shadow: var(--wood-shadow-button), 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 18px rgba(221, 192, 127, 0.3);
}

/* --- よもやま: the chat bar along the bottom edge ---
   It fills the run of edge between the ルーム tab and the gear, less the start
   plaque while that is up (its width follows its label, so core.js reports the
   room it takes as --start-plaque-space). The line to type in is always out;
   only the log folds, opening upward from the bar the way the ルーム drawer
   does. */
.chat-control {
  position: fixed;
  left: 308px;
  right: calc(76px + var(--start-plaque-space, 0px));
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.chat-bar {
  height: var(--edge-tab-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 6px;
  border-radius: 12px 12px 0 0;
  background: var(--shop-walnut);
  background-image: var(--wood-sheen), var(--wood-grain);
  border: 1px solid var(--shop-brass);
  box-shadow: var(--wood-shadow-button);
}
.chat-control.open .chat-bar { border-radius: 0; }
.chat-toggle-btn {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px 3px 3px 3px;
  background: transparent;
  color: var(--shop-brass-light);
  font-family: var(--shop-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  transition: background-color 0.18s ease;
}
.chat-toggle-btn:hover { background: rgba(221, 192, 127, 0.14); }
.chat-toggle-glyph { display: none; }
.chat-toggle-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}
.chat-toggle-btn.open .chat-toggle-caret { transform: rotate(180deg); }
/* a dab of 朱 while something has been said and the log is shut */
.chat-unread {
  position: absolute;
  top: 2px;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--shop-seal);
  border: 1px solid var(--shop-paper);
}
.chat-unread.hidden { display: none; }

.chat-form {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
}
#chat-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 2px;
  border: 1px solid var(--shop-brass-deep);
  background: var(--shop-paper-light);
  color: var(--shop-ink);
  font-family: var(--shop-font-body);
  font-size: 0.85rem;
}
#chat-input::placeholder { color: #857a68; }
#chat-input:focus { outline: 2px solid var(--shop-brass-light); outline-offset: 0; }
.chat-send-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 2px;
  border: 1px solid var(--shop-brass);
  background: var(--shop-pine);
  color: var(--shop-paper);
  font-family: var(--shop-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.chat-send-btn:hover { background: var(--shop-pine-deep); }

/* The log: a washi sheet standing on the bar, as wide as it. It grows with
   what has been said, up to a cap, so three remarks do not stand a tall
   empty sheet over the board. */
.chat-panel {
  min-height: 96px;
  max-height: min(300px, 45vh);
  display: flex;
  flex-direction: column;
  padding: 6px 14px 8px;
  background-color: var(--shop-paper);
  background-image: var(--shop-paper-grain);
  border: 1px solid var(--shop-brass);
  border-bottom: none;
}
.chat-panel.hidden { display: none; }
.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0;
}
/* before anyone has spoken the empty note takes the whole sheet instead */
.chat-log:empty { display: none; }
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--shop-brass); border-radius: 4px; }
/* One line per remark, the name ruled off to the left like a ledger entry,
   so a run of short remarks reads down the sheet rather than as stacked
   two-line cards. */
.chat-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--shop-paper-line);
  font-size: 0.86rem;
  line-height: 1.6;
}
.chat-line:last-child { border-bottom: none; }
.chat-who {
  flex: 0 0 auto;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--shop-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--shop-ink-soft);
}
.chat-who.spectator::after {
  content: '(観戦)';
  margin-left: 2px;
  font-size: 0.7rem;
  font-weight: 400;
}
.chat-line.own .chat-who { color: var(--shop-pine-deep); }
.chat-text {
  min-width: 0;
  color: var(--shop-ink);
  overflow-wrap: anywhere;
}
.chat-empty {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--shop-ink-soft);
}
.chat-empty.hidden { display: none; }

/* 札: a washi slip that rests for a moment on a tab of the bottom row, to say
   something without anything having to be opened. */
.chat-peek,
.start-game-notice {
  position: absolute;
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 6px 12px;
  border-radius: 3px;
  background-color: var(--shop-paper);
  background-image: var(--shop-paper-grain);
  border: 1px solid var(--shop-brass);
  box-shadow: 0 8px 20px rgba(36, 24, 16, 0.28);
  font-size: 0.86rem;
  color: var(--shop-ink);
  pointer-events: none;
  animation: edge-slip-in 0.18s ease-out;
}
.chat-peek.hidden,
.start-game-notice.hidden { display: none; }
.chat-peek.fading,
.start-game-notice.fading { opacity: 0; transition: opacity 0.4s ease; }
@keyframes edge-slip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* 覗き札: while the log is shut, the newest remark shows on the bar, so a
   word said mid-game is seen without opening anything. */
.chat-peek {
  left: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-peek .chat-who { display: inline; margin-right: 8px; }

/* 断り札: why the game did not start, over the tab that was pressed. The
   same line also goes to the ルーム drawer, but that is usually shut by the
   time anyone reaches for the plaque. A seal-red rule marks it as a refusal
   rather than a remark. */
.start-game-notice {
  right: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 40px));
  border-left: 3px solid var(--shop-seal);
  line-height: 1.6;
}
/* the head only serves the phone's full-screen log */
.chat-sheet-head { display: none; }

/* --- 段: the dock of a phone or tablet ---
   Below the width the four tabs need to stand apart, they ran into each
   other: the よもやま bar was squeezed until its line to type in vanished and
   the plaque lay over 送信, and the ルーム drawer opened down onto the edge
   under its neighbours. So a narrower screen turns the bottom edge into one
   walnut dock, and the four sit in it in a row. The room screen and the tool
   stack keep clear of its height, and the drawer opens as a sheet standing on
   it. What goes in the dock differs: a tablet keeps the line to type in, a
   phone only the tabs (the two blocks after this one). */
@media (max-width: 1023px) {
  body.in-room {
    --dock-h: 62px;
    --dock-space: calc(var(--dock-h) + env(safe-area-inset-bottom));
    --tool-stack-base: calc(var(--dock-space) + 10px);
  }
  #room-screen { padding-bottom: calc(var(--dock-space) + 12px); }

  /* 道具 stands in the dock itself here, not as a corner tab, so the stack
     above it no longer needs to clear that tab's 48px + gap: each rung drops
     by 58px, closing the gap that used to hold the tab's shadow. */
  body.in-room .se-control { bottom: var(--tool-stack-base); }
  body.in-room .board-scale-control { bottom: calc(var(--tool-stack-base) + 58px); }
  body.in-room .board-theme-control,
  body.in-room .rules-control { bottom: calc(var(--tool-stack-base) + 116px); }
  body.in-room.has-board-theme .rules-control { bottom: calc(var(--tool-stack-base) + 174px); }
  body.in-room.no-board-scale .rules-control { bottom: calc(var(--tool-stack-base) + 58px); }

  .room-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: var(--dock-space);
    padding: 0 8px env(safe-area-inset-bottom);
    background-color: var(--shop-walnut);
    background-image: var(--wood-sheen), var(--wood-grain);
    border-top: 1px solid var(--shop-brass);
    box-shadow: 0 -6px 18px rgba(36, 24, 16, 0.26);
  }
  /* The four stand in the dock's flow rather than on the screen's edge. */
  .room-dock > .room-control,
  .room-dock > .chat-control,
  .room-dock > .start-game-control:not(.hidden),
  .room-dock > .tools-control {
    position: static;
    min-width: 0;
    display: flex;
    justify-content: center;
    box-shadow: none;
  }

  /* the tabs: no wood of their own, a tint when pressed or open */
  .room-dock .room-toggle-btn,
  .room-dock .chat-toggle-btn,
  .room-dock .tools-control .tools-toggle-btn {
    position: relative;
    flex: none;
    border: none;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--shop-brass-light);
    font-family: var(--shop-font-display);
    font-weight: 600;
    line-height: 1;
    transform: none;
  }
  .room-dock .room-toggle-btn:hover,
  .room-dock .chat-toggle-btn:hover,
  .room-dock .tools-control .tools-toggle-btn:hover {
    background: rgba(221, 192, 127, 0.1);
    box-shadow: none;
    transform: none;
  }
  .room-dock .room-toggle-btn.open,
  .room-dock .chat-toggle-btn.open,
  .room-dock .tools-control .tools-toggle-btn.open {
    background: rgba(221, 192, 127, 0.18);
    color: var(--shop-paper);
    box-shadow: inset 0 -2px 0 var(--shop-brass-light);
  }
  .room-dock .dock-icon,
  .room-dock .tools-toggle-btn svg { display: block; flex: none; width: 22px; height: 22px; }
  .room-dock .tools-toggle-btn .dock-label { display: inline; }
  .room-dock .room-toggle-caret { display: none; }
  /* the seat count, a brass pill by the ルーム icon */
  .room-dock .room-toggle-count {
    display: block;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--shop-brass-light);
    color: var(--shop-walnut-deep);
    font-family: var(--shop-font-body);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
  .room-dock .room-toggle-count:empty { display: none; }

  /* 高札 in the dock: a lacquered button rather than a tab */
  .room-dock .start-game-btn-float,
  .room-dock .dock-ready-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    box-shadow: inset 0 0 0 1px rgba(221, 192, 127, 0.22), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  /* Greyed out on a dark dock, a paper-pale button still read as the one to
     press; here it is only a dashed outline, and its long labels may go to
     two lines. */
  .room-dock .start-game-btn-float:disabled {
    background-color: rgba(0, 0, 0, 0.18);
    border: 1px dashed rgba(221, 192, 127, 0.5);
    color: rgba(240, 228, 200, 0.78);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    box-shadow: none;
  }
  /* A seated guest gets 準備完了 in the plaque's place instead of a grey
     "waiting for the host": it is the one thing they have to do, and in the
     drawer it was a sheet away. */
  .room-dock .dock-ready-btn:not(.hidden) {
    display: block;
    background-color: var(--shop-pine);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.2));
    border: 1px solid var(--shop-brass);
    color: var(--shop-paper);
    font-family: var(--shop-font-display);
    font-weight: 700;
  }
  .room-dock .dock-ready-btn.is-ready {
    background: transparent;
    border-color: var(--shop-brass-light);
    color: var(--shop-brass-light);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: none;
  }
  .room-dock .start-game-control:has(> .dock-ready-btn:not(.hidden)) > .start-game-btn-float { display: none; }
  .room-dock #ready-btn { display: none; }

  /* the refusal slip spans the dock rather than one tab */
  .room-dock .start-game-notice {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }

  /* The drawer opens as a sheet standing on the dock; a tap outside it puts
     it away (core.js). */
  .room-dock .room-menu {
    position: fixed;
    bottom: var(--dock-space);
    box-sizing: border-box;
    max-height: calc(100dvh - var(--dock-space) - 72px);
    padding: 26px 20px 18px;
    border: 1px solid var(--shop-brass);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(36, 24, 16, 0.32);
    animation: dock-sheet-up 0.2s ease-out;
  }
  .room-dock .room-menu::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--shop-paper-line);
  }
  .room-dock #room-player-list li { padding: 12px 2px; font-size: 0.95rem; }
  .room-dock .room-menu .secondary-btn { min-height: 44px; }
}
@keyframes dock-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes dock-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- the phone's dock ---
   Only tabs, the height of a thumb, icon over label. While the game is still
   to start the plaque takes the middle; once play is under way the three
   share the dock evenly. The drawer is a full-width sheet over a dimmed room,
   and the chat opens as a screen of its own (below). */
@media (max-width: 640px) {
  .room-dock > .room-control,
  .room-dock > .chat-control:not(.open),
  .room-dock > .start-game-control:not(.hidden),
  .room-dock > .tools-control { flex: 1 1 0; }
  .room-dock:has(> .start-game-control:not(.hidden)) > :not(.start-game-control) { flex: 0 0 58px; }
  .room-dock > .start-game-control:not(.hidden) { flex: 1 1 auto; padding: 0 4px; }

  .room-dock .room-toggle-btn,
  .room-dock .chat-toggle-btn,
  .room-dock .tools-control .tools-toggle-btn {
    width: 100%;
    max-width: 88px;
    height: 52px;
    padding: 4px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }
  .room-dock .room-toggle-count {
    position: absolute;
    top: 3px;
    left: calc(50% + 7px);
  }

  /* shut, the よもやま bar is only its tab: the line to type in waits for
     the full-screen log */
  .room-dock .chat-control:not(.open) .chat-bar {
    flex: 1;
    height: auto;
    padding: 0;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .room-dock .chat-control:not(.open) .chat-form { display: none; }
  .room-dock .chat-toggle-caret { display: none; }
  .room-dock .chat-toggle-label { display: inline; order: 1; white-space: nowrap; }
  .room-dock .chat-toggle-glyph {
    display: block;
    height: 22px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0;
  }
  .room-dock .chat-unread { top: 4px; right: calc(50% - 17px); }
  /* the peek slip hangs from the dock, not from the narrow 茶 tab */
  .room-dock .chat-peek {
    left: 10px;
    right: 10px;
    max-width: none;
  }

  .room-dock .room-menu { left: 0; right: 0; width: auto; }
  body.room-menu-open #room-screen::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 7;
    background: rgba(36, 24, 16, 0.34);
    animation: dock-scrim-in 0.2s ease-out;
  }
}

/* --- the tablet's dock ---
   A tablet has the width for the line to type in, and a keyboard that
   covers only the lower part of the screen, so よもやま stays the bar it is
   on a wide screen and takes whatever the dock does not need for the rest:
   ルーム and 道具 are short labelled tabs at the two ends, and the plaque
   keeps to its label. The log opens upward from the bar, as wide as it. The
   drawer is a sheet the width of a column at the left, and the board stays
   in sight beside it. */
@media (min-width: 641px) and (max-width: 1023px) {
  .room-dock { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .room-dock > .room-control,
  .room-dock > .start-game-control:not(.hidden),
  .room-dock > .tools-control { flex: none; }
  .room-dock > .start-game-control:not(.hidden) { width: clamp(160px, 22vw, 196px); }
  /* stretched to the dock's full height, so the log it opens stands on the
     dock's top edge */
  .room-dock > .chat-control {
    position: relative;
    left: auto;
    right: auto;
    flex: 1 1 auto;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
  }

  .room-dock .room-toggle-btn,
  .room-dock .tools-control .tools-toggle-btn {
    width: auto;
    height: 44px;
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
  }
  /* ルーム folds the way よもやま does, so it carries the same ▼ / ▲ after
     its count; 道具 is known by its gear alone. */
  .room-dock .room-toggle-btn { padding-right: 16px; }
  .room-dock .room-toggle-caret { display: inline-block; order: 1; }
  .room-dock .tools-control .tools-toggle-btn { width: 44px; padding: 0; justify-content: center; }
  .room-dock .tools-toggle-btn .dock-label { display: none; }

  .room-dock .chat-bar {
    height: 44px;
    padding: 0;
    gap: 8px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* a little more room after the caret, so ▲ does not sit on the edge */
  .room-dock .chat-toggle-btn {
    height: 44px;
    padding: 0 18px 0 12px;
    border-radius: 10px;
    font-size: 0.88rem;
  }
  .room-dock .chat-unread { top: 6px; right: 4px; }
  /* 16px, or iOS zooms the page in when the line is tapped */
  .room-dock #chat-input { height: 40px; padding: 0 12px; font-size: 1rem; }
  .room-dock .chat-send-btn { height: 40px; padding: 0 16px; font-size: 0.9rem; }
  .room-dock .chat-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    max-height: min(320px, 45vh);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 26px rgba(36, 24, 16, 0.26);
  }
  .room-dock .chat-control.open .chat-bar { border-radius: 0; }
  .room-dock .chat-peek { left: 0; max-width: 100%; }

  .room-dock .room-menu {
    left: 12px;
    width: 340px;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 640px) {
  /* Opened, it takes the whole screen: the head to go back by, the log, and
     the line to type in along the bottom. It follows the visual viewport
     (core.js), so the on-screen keyboard pushes the line up rather than
     covering it. */
  .room-dock > .chat-control.open {
    position: fixed;
    justify-content: flex-start;
    top: var(--chat-vv-top, 0px);
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--chat-vv-h, 100dvh);
    z-index: 9;
    background-color: var(--shop-paper);
    background-image: var(--shop-paper-grain);
  }
  .chat-control.open .chat-sheet-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 12px;
    background-color: var(--shop-walnut);
    background-image: var(--wood-sheen), var(--wood-grain);
    box-shadow: var(--wood-shadow-panel);
  }
  .chat-back-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--shop-brass-light);
    font-size: 1.3rem;
    line-height: 1;
  }
  .chat-back-btn:hover { background: rgba(221, 192, 127, 0.14); }
  .chat-sheet-title {
    font-family: var(--shop-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    color: var(--shop-paper);
  }
  .chat-control.open .chat-panel {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 8px 16px;
    border: none;
    background: none;
  }
  .chat-control.open .chat-line { font-size: 0.92rem; }
  .chat-control.open .chat-bar {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-radius: 0;
    border-width: 1px 0 0;
  }
  .chat-control.open .chat-toggle-btn { display: none; }
  /* 16px or iOS zooms the page in on focus */
  .chat-control.open #chat-input { font-size: 1rem; padding: 9px 12px; }
  .chat-control.open .chat-send-btn { padding: 9px 16px; }
}
body.chat-fullscreen { overflow: hidden; }

/* .rules-toggle-btn takes its wooden-counter look from base.css, alongside
   the SE and board-scale buttons; only its anchor is set here. */

/* --- 遊びかた dialog ---
   A single sheet laid on the table under a dimmed room: the head (title and
   閉じる) and the brass rule stay put while only the text scrolls. */
.rules-modal {
  width: min(560px, calc(100vw - 40px));
  max-width: none;
  max-height: 82vh;
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-image: var(--shop-paper-grain);
  box-shadow: 0 18px 44px rgba(36, 24, 16, 0.45);
}
.rules-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.rules-modal-head .eyebrow {
  display: block;
  font-family: var(--shop-font-stamp);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--shop-burgundy);
}
.rules-modal-head h2 {
  margin: 4px 0 0;
  font-family: var(--shop-font-display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}
.rules-close-btn {
  flex-shrink: 0;
  padding: 7px 13px;
  border: 1px solid var(--shop-ink-soft);
  border-radius: 3px;
  background: transparent;
  color: var(--shop-ink-soft);
  font-family: var(--shop-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rules-close-btn:hover {
  background: rgba(180, 144, 63, 0.16);
  border-color: var(--shop-brass-deep);
  color: var(--shop-ink);
}
.rules-modal .rule-double { flex-shrink: 0; }

.game-rules-content {
  overflow-y: auto;
  padding-right: 8px;
  font-size: 0.93rem;
  line-height: 1.9;
}
.game-rules-content::-webkit-scrollbar { width: 8px; }
.game-rules-content::-webkit-scrollbar-thumb {
  background: var(--shop-brass);
  border-radius: 4px;
}
.game-rules-content p {
  margin: 0 0 18px;
  color: var(--shop-ink);
}
.game-rules-content ul {
  margin: 0 0 18px;
  padding-left: 1.2em;
  color: var(--shop-ink-soft);
}
.game-rules-content ul:last-child {
  margin-bottom: 0;
}
.game-rules-content li {
  margin-bottom: 8px;
}
.game-rules-content h4 {
  margin: 0 0 10px;
  font-family: var(--shop-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--shop-ink);
}