/* サイト全体の共通の見た目。トップページ・部屋・各作品の共通部品（合言葉の欄・だれかと遊ぶ・共有・結果）はこれを使う。
   作品のゲームの中身（盤・絵柄）は作品ごとでよいが、ボタン・入力欄・枠・書体はここに合わせる。
   #FAF7F7 の地に白いカード（2026-10-14 ユーザー指定）・黒い太枠・朱色（ポスターや看板の見た目。クリーム色・真っ白の地は使わない）。見出しは Dela Gothic One、本文は Zen Kaku Gothic New */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap");
:root {
  --ui-paper:#FAF7F7; --ui-card:#ffffff; --ui-ink:#111111; --ui-sub:#57504f; --ui-line:#111111; --ui-soft:#e3dada;
  --ui-red:#d63c22; --ui-red-ink:#ffffff; --ui-chip:#f0e9e9; --ui-play:#2f9e5f; --ui-wait:#2f62c8; --ui-shade:rgba(250,247,247,.96);
  --ui-display:"Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --ui-body:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --ui-border:1.5px solid var(--ui-soft);
  --ui-radius:16px; --ui-radius-s:10px;
  --ui-shadow:0 1px 3px rgba(60,40,40,.08), 0 4px 14px rgba(60,40,40,.05);
}
.ui-title { font-family:var(--ui-display); font-weight:400; line-height:1.15; margin:0; }
.ui-note { font-size:.86rem; color:var(--ui-sub); margin:0; }
.ui-panel { background:var(--ui-card); border:0; border-radius:var(--ui-radius); box-shadow:var(--ui-shadow); padding:16px; display:flex; flex-direction:column; gap:8px; font-family:var(--ui-body); color:var(--ui-ink); }
.ui-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ui-input { min-width:0; font:inherit; font-size:1.05rem; padding:9px 12px; border:1.5px solid var(--ui-soft); border-radius:var(--ui-radius-s); background:var(--ui-paper); color:var(--ui-ink); }
.ui-btn { font-family:var(--ui-body); font-weight:700; font-size:1rem; padding:9px 20px; border:0; border-radius:var(--ui-radius-s); background:var(--ui-red); color:var(--ui-red-ink); cursor:pointer; line-height:1.3; }
.ui-btn.sub { background:var(--ui-chip); color:var(--ui-ink); }
.ui-btn:hover:not(:disabled) { filter:brightness(.92); }
.ui-btn:disabled { opacity:.45; cursor:not-allowed; }
.ui-btn:focus-visible, .ui-input:focus-visible, .ui-chip:focus-visible { outline:3px solid var(--ui-red); outline-offset:2px; }
.ui-chip { flex:none; border:1.5px solid var(--ui-soft); background:var(--ui-card); color:var(--ui-ink); padding:3px 12px; font:inherit; font-size:.86rem; border-radius:999px; white-space:nowrap; cursor:pointer; }
.ui-chip[aria-pressed="true"] { background:var(--ui-ink); color:var(--ui-paper); border-color:var(--ui-ink); }
.ui-pill { display:inline-flex; align-items:center; gap:4px; background:var(--ui-chip); border-radius:6px; padding:2px 8px; font-size:.8rem; color:var(--ui-sub); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-pill b { color:var(--ui-ink); font-weight:700; }
.ui-msg { color:var(--ui-red); font-size:.88rem; min-height:1.2em; margin:0; }
/* 共有ボタン（shell.shareButtons / shareRoom） */
.shell-share { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-family:var(--ui-body); }
.shell-share button { font-family:var(--ui-body); font-weight:700; font-size:.9rem; padding:6px 14px; border:0; border-radius:999px; background:var(--ui-chip); color:var(--ui-ink); cursor:pointer; }
.shell-share button:hover { filter:brightness(.94); }
.shell-share .shell-done { font-size:.85rem; color:var(--ui-sub); }
/* みんなで遊ぶ入口（shell.roomEntry） */
.ui-entry .ui-input.code { flex:1 1 160px; letter-spacing:.06em; }
.ui-entry .wait { font-size:.9rem; color:var(--ui-sub); font-variant-numeric:tabular-nums; }
/* 人数（合言葉 / オンライン） */
.ui-count { font-size:.86rem; color:var(--ui-sub); font-variant-numeric:tabular-nums; }
.ui-count b { font-weight:700; color:var(--ui-ink); }