/* --- modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 卓の上に重ねる札(こいこいの月の結果 z-index:40 など)より上に出す(#102)。 */
  z-index: 50;
  /* 画面より背の高いダイアログ(縦の短い画面の「卓を立てる」など)は幕の中で
     送る。中身の margin:auto は、はみ出すときには 0 になって上端から並ぶ
     (align-items:center だけだと上下に同じだけはみ出し、上端に届かない) (#100)。 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 0;
  box-sizing: border-box;
}
.modal-overlay > * { margin: auto; }
.modal-overlay.hidden {
  display: none;
}

.modal {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.modal h2 {
  margin-top: 0;
  /* 「…ください／い」と一字だけ折り返さないよう、行の長さを均す。 */
  text-wrap: balance;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-wide {
  max-width: 520px;
}

/* --- paper-styled modals (create room / join / promotion) --- */
.paper-modal {
  background: var(--shop-paper);
  color: var(--shop-ink);
  border: 1px solid var(--shop-brass);
  border-radius: 4px;
  font-family: var(--shop-font-body);
}
/* Every dialog wears the same head: mincho title over a brass rule. Scoped to
   the direct child so the 遊びかた sheet, whose head carries its own eyebrow and
   double rule, is not given a second one. */
.paper-modal h2 { font-family: var(--shop-font-display); color: var(--shop-ink); }
.paper-modal > h2 {
  letter-spacing: 0.08em;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--shop-brass);
}
.paper-modal label { color: var(--shop-ink-soft); }
/* A lighter sheet rather than pure white, which appears nowhere else in the shop */
.paper-modal input, .paper-modal select {
  background: var(--shop-paper-light);
  border: 1px solid var(--shop-paper-line);
  color: var(--shop-ink);
  box-shadow: inset 0 1px 2px rgba(36, 24, 16, 0.1);
}
.paper-modal input:focus, .paper-modal select:focus { outline: 2px solid var(--shop-pine); }
.paper-modal .primary-btn { background: var(--shop-pine); border: 1px solid var(--shop-brass); color: var(--shop-paper); }
.paper-modal .primary-btn:hover { background: var(--shop-pine-deep); }
.paper-modal .secondary-btn { background: transparent; border: 1px solid var(--shop-ink-soft); color: var(--shop-ink); }
.paper-modal .secondary-btn:hover { background: rgba(85, 73, 58, 0.1); }
.paper-modal .error-text, .paper-modal .required { color: var(--shop-burgundy); }
.paper-modal .empty-text { color: var(--shop-ink-soft); }

.room-name-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.room-name-label-row label { margin-bottom: 6px; }
.room-name-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.room-name-mini-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--shop-ink-soft);
  background: transparent;
  color: var(--shop-ink);
  cursor: pointer;
}
.room-name-mini-btn:hover { background: rgba(85, 73, 58, 0.1); }

.invite-link-row {
  display: flex;
  gap: 8px;
}
.invite-link-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
}
.invite-link-copied {
  margin: 10px 0 0;
  color: var(--shop-pine);
  font-size: 0.85rem;
}
.invite-link-warning {
  margin: 10px 0 0;
  color: var(--shop-burgundy);
  font-size: 0.85rem;
}
.invite-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}


/* 公開/非公開: two halves of one strip rather than a pair of radio dots, so
   the choice reads at a glance and each half is a full-size tap target. */
.field-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.9rem;
  color: var(--shop-ink-soft);
}
.visibility-choice {
  display: flex;
  border: 1px solid var(--shop-ink-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.visibility-option {
  flex: 1 1 0;
  position: relative;
  margin: 0;
  padding: 8px 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--shop-ink);
  cursor: pointer;
}
.visibility-option + .visibility-option { border-left: 1px solid var(--shop-ink-soft); }
.visibility-option:hover { background: rgba(85, 73, 58, 0.1); }
.visibility-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.visibility-option:has(input:checked) {
  background: var(--shop-pine);
  color: var(--shop-paper);
}
.visibility-option:has(input:focus-visible) { outline: 2px solid var(--shop-brass); outline-offset: -3px; }
.paper-modal .visibility-option input { box-shadow: none; }
#room-visibility-note { margin: 6px 0 0; color: var(--shop-ink-soft); font-size: 0.8rem; }
#invite-link-private-note { margin: 10px 0 0; color: var(--shop-ink-soft); }
#public-confirm-modal .modal-hint { color: var(--shop-ink-soft); }

/* 横にしたスマホ(高さ 500px 以下、#167)。背の高い窓(すごろくの道中記、軍人将棋の
   この駒は? など)は幕ごと送ることになり、「閉じる」が画面の下に切れて見えなかった。
   卓を立てる窓(#176、modal-choices.css)と同じく、下の釦の段を画面の下端に貼り付け、
   紙の色を敷いて上に罫を一本引く。幕の内側の余白(16px)のぶん下にずらす。 */
@media (max-height: 500px) {
  .modal-overlay > .modal > .modal-actions:not(.hidden) {
    position: sticky;
    bottom: -16px;
    z-index: 1;
    margin: 16px -28px -28px;
    padding: 12px 28px 16px;
    background: inherit;
    border-top: 1px solid var(--shop-paper-line);
  }
}