/* =========================================================
 * CARTA POKER SERIES - モックスタイル
 * 種別タブでテーマ全体が切り替わる:
 *   [wolf]  月夜の藍紫 + 銀白 (WOLF SERIES of POKER 準拠)
 *   [utage] 和紙アイボリー + 墨 + 金 + 朱 (歌留多・和モダン)
 *   [other] バーガンディ + 真鍮ゴールド (高級カジノの VIP ルーム)
 * ========================================================= */

:root {
  --radius: 12px;
  --header-h: 70px;
  /* フォントは Noto Sans JP に統一。display / mincho も同一スタックを指す。 */
  --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-display: var(--font-body);
  --font-mincho: var(--font-body);
}

/* ---------- テーマ: その他(バーガンディ VIP) ---------- */

body[data-theme="other"] {
  --bg: #2a0f14;
  --bg-elevated: #371319;
  --bg-card: #3a161d;
  --bg-card-hover: #451b24;
  --bg-inset: #311017;
  --border: #5c2531;
  --border-strong: #7e3747;
  --text: #f5eae7;
  --text-dim: #c4a3a5;
  --text-faint: #96727b;
  --accent: #c9a24d;
  --accent-bright: #e5c470;
  --accent-rgb: 201, 162, 77;
  --accent-contrast: #241007;
  --accent-grad: linear-gradient(135deg, #e5c470, #a37c31);
  --live: #ff6a5e;   --live-rgb: 255, 106, 94;
  --future: #4fce96; --future-rgb: 79, 206, 150;
  --future-deep: #339e70;
  --past: #a58a90;   --past-rgb: 165, 138, 144;
  --startin: #8f9cff;   /* STARTS IN(開始前カウントダウン) */
  --regclose: #ff9a52;  /* REG CLOSE IN(レジクロ前カウントダウン) */
  --cat-strip: #c9a24d;
  --header-bg: rgba(42, 15, 20, 0.92);
  --table-line: rgba(92, 37, 49, 0.55);
  --row-hover: rgba(255, 255, 255, 0.025);
  --shadow-open: 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 12px 40px rgba(12, 2, 4, 0.55);
}

/* ---------- テーマ: ウルフ(月夜の藍紫+銀白) ---------- */

body[data-theme="wolf"] {
  --bg: #141138;
  --bg-elevated: #1c1849;
  --bg-card: #1e1a4e;
  --bg-card-hover: #262159;
  --bg-inset: #171343;
  --border: #322c6e;
  --border-strong: #4a4396;
  --text: #eceafd;
  --text-dim: #a9a5d2;
  --text-faint: #7a75a3;
  --accent: #aebafd;
  --accent-bright: #dfe5ff;
  --accent-rgb: 174, 186, 253;
  --accent-contrast: #100d2e;
  --accent-grad: linear-gradient(135deg, #e6ebff, #8e9cf0);
  --live: #ff5d6d;   --live-rgb: 255, 93, 109;
  --future: #4fd39a; --future-rgb: 79, 211, 154;
  --future-deep: #339e70;
  --past: #8a86b3;   --past-rgb: 138, 134, 179;
  --startin: #97a0ff;
  --regclose: #ff9a4d;
  --cat-strip: #cdd3ff;
  --header-bg: rgba(20, 17, 56, 0.92);
  --table-line: rgba(50, 44, 110, 0.55);
  --row-hover: rgba(255, 255, 255, 0.025);
  --shadow-open: 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 12px 40px rgba(4, 2, 24, 0.55);
}

/* ---------- テーマ: 宴(和紙+墨+金+朱) ---------- */

body[data-theme="utage"] {
  --bg: #f2eee3;
  --bg-elevated: #eae4d3;
  --bg-card: #fbf8f0;
  --bg-card-hover: #ffffff;
  --bg-inset: #f0ebdd;
  --border: #d8d0ba;
  --border-strong: #b9ad8e;
  --text: #2e2921;
  --text-dim: #6e6552;
  --text-faint: #9a9078;
  --accent: #a8842c;
  --accent-bright: #8a6b1f;
  --accent-rgb: 168, 132, 44;
  --accent-contrast: #fffdf5;
  --accent-grad: linear-gradient(135deg, #c39a3a, #8a6b1f);
  --live: #c73e2d;   --live-rgb: 199, 62, 45;
  --future: #2e7d54; --future-rgb: 46, 125, 84;
  --future-deep: #1f5c3d;
  --past: #8a8272;   --past-rgb: 138, 130, 114;
  --startin: #3f47b8;
  --regclose: #c25e14;
  --cat-strip: #c73e2d;
  --header-bg: rgba(242, 238, 227, 0.92);
  --table-line: rgba(216, 208, 186, 0.7);
  --row-hover: rgba(0, 0, 0, 0.025);
  --shadow-open: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 12px 32px rgba(90, 75, 40, 0.18);
}

/* ---------- ベース ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .45s ease, color .45s ease;
}

button { font-family: inherit; cursor: pointer; touch-action: manipulation; }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

main.container { position: relative; z-index: 1; }

/* ---------- テーマ演出(背景) ---------- */

/* ウルフ: 月明かり */
body[data-theme="wolf"]::before {
  content: '';
  position: fixed;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 640px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(226, 232, 255, 0.16) 0%, rgba(206, 214, 255, 0.07) 42%, transparent 68%);
}

/* その他: シャンデリアの光とベルベットの陰影 */
body[data-theme="other"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(229, 196, 112, 0.09), transparent 62%),
    radial-gradient(ellipse 140% 90% at 50% 118%, rgba(10, 1, 3, 0.4), transparent 58%);
}

/* 宴: 青海波風の地紋 */
body[data-theme="utage"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 50% 135%, transparent 42%, rgba(168, 132, 44, 0.07) 43%, rgba(168, 132, 44, 0.07) 46%, transparent 47%, transparent 60%, rgba(168, 132, 44, 0.055) 61%, rgba(168, 132, 44, 0.055) 64%, transparent 65%),
    radial-gradient(circle at 50% 135%, transparent 42%, rgba(168, 132, 44, 0.07) 43%, rgba(168, 132, 44, 0.07) 46%, transparent 47%, transparent 60%, rgba(168, 132, 44, 0.055) 61%, rgba(168, 132, 44, 0.055) 64%, transparent 65%);
  background-size: 72px 36px;
  background-position: 0 0, 36px 18px;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .45s ease, border-color .45s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent-grad);
  color: var(--accent-contrast);
  font-size: 20px;
  font-weight: 900;
  transition: border-radius .45s ease;
}

/* 宴: 家紋風に丸くなる */
body[data-theme="utage"] .brand-mark { border-radius: 50%; }

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}


.brand-sub {
  font-size: 8px;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- フォルダ本体(コンテンツ箱): ヘッダー右のロゴタブと繋がる ---------- */

.content-panel {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: -1px;              /* ヘッダー下辺と地続きに */
  padding: 16px 16px 44px;
  transition: background-color .45s ease, border-color .45s ease;
}

/* ---------- フィルタバー(日付 + 状況フィルタ) ---------- */

.filter-bar {
  background: none;
}

/* ---------- 大会種別タブ ---------- */

/* カテゴリ = ヘッダー右のロゴタブ。選択タブが下のコンテンツ箱と繋がるフォルダタブ */
.category-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: stretch;         /* ヘッダー高さいっぱい */
  align-items: flex-end;       /* タブを下辺(コンテンツ箱の上辺)に寄せる */
}

.category-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 40px;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  padding: 5px 7px 6px;
  opacity: 0.5;                 /* 未選択は薄く */
  transition: opacity .2s, background .2s, border-color .2s;
  user-select: none;
  -webkit-user-select: none;
}

.category-tab:hover { opacity: 0.85; }

.category-tab.is-active {
  opacity: 1;
  background: var(--bg-elevated);        /* = コンテンツ箱の地色 → 繋がる */
  border-color: var(--border);
  margin-bottom: -1px;                   /* 箱の上辺を跨ぐ */
  z-index: 101;
}

/* 種別アイコン(ロゴ)。未選択は明暗固定の下地チップで視認性を確保。 */
.category-tab-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  border-radius: 9px;
  padding: 2px;
}
/* 3 種別とも白抜きロゴなので、下地は共通の濃色 */
.category-tab[data-category="wolf"] .category-tab-icon,
.category-tab[data-category="other"] .category-tab-icon,
.category-tab[data-category="utage"] .category-tab-icon { background: #17132f; }
/* 選択タブはコンテンツ箱と一体化(ロゴ下地は箱の地色に合わせて透過) */
.category-tab.is-active .category-tab-icon { background: transparent; }
/* ただし宴は白抜きロゴなので、選択中も下地の濃色を残す(和紙色の地に溶けるため) */
.category-tab.is-active[data-category="utage"] .category-tab-icon { background: #17132f; }

.category-tab-count { display: none; }

/* ---------- 日付セレクター ---------- */

.date-strip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  transition: background-color .45s ease, border-color .45s ease;
}

.month-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--border);
}

.month-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  transition: background .2s, color .2s;
}

.month-arrow:hover:not(:disabled) { background: var(--row-hover); color: var(--text); }
.month-arrow:disabled { opacity: 0.25; cursor: default; }

/* セレクトボックス風の年月ボタン(押せることが分かる見た目に)
 * 矢印は廃止。月(略称)と年を 2 段表示にして横幅を抑える。 */
.month-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}

.month-label-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 月名("Aug" の g など)のディセンダが下段の年に食い込まない行間。
   * 1.04 では g の下が 2026 に重なっていた。 */
  line-height: 1.32;
}

.ml-month {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ml-year {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.month-label:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.month-label:hover .ml-year { color: var(--accent-bright); }
.month-label.is-active .ml-year { color: var(--accent-contrast); }

.month-label-caret {
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1;
  transition: transform .2s;
}

.month-label:hover .month-label-caret { color: var(--accent-bright); }

.month-label.is-open .month-label-caret { transform: rotate(180deg); }

.month-label.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.month-label.is-active .month-label-caret { color: var(--accent-contrast); }

body[data-theme="utage"] .month-label { font-family: var(--font-mincho); }

/* ---------- 年月ピッカー ---------- */

.month-picker[hidden] { display: none; }

.month-picker {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 280px;
  background: var(--bg-card-hover);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 12px;
  padding: 14px 16px 16px;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.15),
    0 20px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(420px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fade-in .18s ease;
}

body[data-theme="utage"] .month-picker {
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(90, 75, 40, 0.06),
    0 20px 44px rgba(90, 75, 40, 0.3);
}

.mp-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* 年タブ(横スクロール可能) */
.mp-years {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.mp-years::-webkit-scrollbar { display: none; }

.mp-year-chip {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 5px 12px;
  transition: color .2s, border-color .2s, background .2s;
}

.mp-year-chip:hover { color: var(--text); background: var(--row-hover); }

.mp-year-chip.is-active {
  color: var(--accent-bright);
  border-bottom-color: var(--accent);
}

body[data-theme="utage"] .mp-year-chip { font-family: var(--font-mincho); }

/* 12ヶ月グリッド */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mp-month {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 4px;
  min-height: 42px;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}

.mp-month:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.mp-month:disabled {
  opacity: 0.3;
  cursor: default;
  border-color: var(--border);
}

.mp-month.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.mp-month.is-active:hover { color: var(--accent-contrast); }

.mp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.mp-month.is-active .mp-dot { background: var(--accent-contrast); }

.date-strip-scroll {
  display: flex;
  align-items: stretch;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.date-strip-scroll::-webkit-scrollbar { display: none; }

/* 日付セルの幅は「表示領域の 1/5.5」。ちょうど 5.5 日分が見える幅になるので
 * 6 日目が少し覗いてスクロールできることが伝わる。両端は clamp で頭打ち。 */
.date-cell {
  flex: 0 0 auto;
  width: clamp(40px, calc((100% - 25px) / 5.5), 58px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 30px;
  padding: 1px 4px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--text-dim);
  transition: background .2s, color .2s;
  user-select: none;
  -webkit-user-select: none;
}

.date-cell:hover { background: var(--row-hover); }

.date-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
}

.date-dow { font-size: 10px; line-height: 1.2; }

.date-cell.is-sat .date-dow { color: #4e8fd9; }
.date-cell.is-sun .date-dow { color: #d95757; }

/* 今日: 赤丸の縁取り */
.date-cell.is-today .date-num {
  border: 1.5px solid var(--live);
  color: var(--live);
}

.date-cell.is-today .date-dow { color: var(--live); }

/* 選択中: テーマ色で塗りつぶし */
.date-cell.is-selected {
  background: var(--accent);
}

.date-cell.is-selected .date-num,
.date-cell.is-selected .date-dow,
.date-cell.is-selected .date-all-label {
  color: var(--accent-contrast);
}

.date-cell.is-selected.is-today .date-num {
  border-color: var(--accent-contrast);
  color: var(--accent-contrast);
}

.date-cell.is-selected .date-dot { background: var(--accent-contrast); }

/* 大会のない日 */
.date-cell.no-events { opacity: 0.4; }
.date-cell.no-events.is-selected { opacity: 1; }

.date-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 1px;
}

/* 全日程ボタン: スクロール領域の外に固定配置(日付と重ならない) */
.date-cell-all {
  flex: 0 0 auto;
  width: auto;
  min-width: 46px;
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 6px;
  border: 1px dashed var(--border-strong);
  background: var(--bg-inset);
}

.date-cell-all:hover { background: var(--bg-card-hover); }
.date-cell-all.is-selected { border-color: var(--accent); background: var(--accent); }

/* 日付スクロール領域は仕切り線の右側だけ */
.date-strip-scroll {
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

.date-all-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  writing-mode: horizontal-tb;
}

/* ---------- 開催状況フィルタ ---------- */

.status-filter {
  display: flex;
}

/* All / Favorites / Live / Upcoming / Past の5ボタンを横一列で均等配置
 * (スマホでも折り返さない) */
.status-row {
  display: flex;
  gap: 6px;
  width: 100%;
}

/* All / Live / Open / Close は均等ストレッチ、Favorites(★)は右端で幅小(伸ばさない) */
/* 状況フィルタのピルは高さを抑える。padding だけ削っても .status-pill の
 * min-height: 32px が効いて高さが変わらないため、ここで下限も下げている。 */
.status-row .status-pill { flex: 1 1 0; min-width: 0; min-height: 28px; }
.status-row .fav-pill {
  flex: 0 0 auto;
  padding-left: 14px;
  padding-right: 14px;
  /* ★ だけ大きいと行の高さがこれに引っ張られる(status-row は stretch)ので、
   * 他のピルのラベルと同じ高さに収まるサイズにする。 */
  font-size: 13px;
}

.status-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: 99px;
  transition: all .2s;
  white-space: nowrap;
  overflow: hidden;
}

.status-pill .pill-label { overflow: hidden; text-overflow: ellipsis; }

.status-pill:hover { border-color: var(--border-strong); color: var(--text); }

.status-pill.is-active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: var(--accent);
  color: var(--accent-bright);
  /* 選択中は淡い発光で状態を明確化(アクセント色に追従・全テーマ共通) */
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}

/* ウルフ: 淡いラベンダーが濃紺に埋もれがちなので、
 * 発光・内側のにじみ・文字グローを強めて選択を分かりやすくする。 */
body[data-theme="wolf"] .status-pill.is-active {
  background: rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 0 16px 2px rgba(var(--accent-rgb), 0.5),
    inset 0 0 12px rgba(var(--accent-rgb), 0.16);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dot-live { background: var(--live); box-shadow: 0 0 6px var(--live); animation: pulse 1.6s infinite; }
.dot-future { background: var(--future); }
.dot-past { background: var(--past); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 初回表示のシリーズ選択(全画面) ----------
 * ローディング(z-index 300)より手前に出し、選ぶまで背後を操作させない。 */

.category-gate {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--bg);
  overflow-y: auto;
}

.category-gate[hidden] { display: none; }

/* 選択後: 配色は選んだシリーズのものに変わるので、背景色も一緒に移り変わらせる。
 * 最後は背景だけを先に透明にして一覧を見せ、ロゴは右上のタブへ飛びながら消える
 * (全体を透明にするとロゴまで一緒に薄くなり、飛んでいく先が追えないため)。 */
.category-gate {
  transition: background-color .5s ease;
}
.category-gate.is-leaving {
  background-color: transparent;
  pointer-events: none;
}

/* 選んだ瞬間に選択肢と見出しを引っ込める */
.gate-inner { transition: opacity .38s ease, transform .38s ease; }
.category-gate.is-picking .gate-inner {
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
}

/* 中央に大きく出す、選んだシリーズのロゴ */
.gate-splash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease .12s;
}

.gate-splash-icon {
  width: 140px;
  height: 140px;
  object-fit: contain;
  /* 下地は敷かず、シリーズの地色の上にロゴだけを置く。
   * 宴は地色が和紙色(明るい)で白抜きロゴが見えないため、
   * app.js が濃色版のロゴに差し替える。 */
  transform: scale(.78);
  transition: transform 1.05s cubic-bezier(.16, .8, .24, 1) .1s;
}

.category-gate.is-picking .gate-splash { opacity: 1; }
.category-gate.is-picking .gate-splash-icon { transform: scale(1); }

/* 右上のタブへ飛んでいく間。着地するころに消えるよう、透明化は少し遅らせる。
 * 移動先(translate/scale)は app.js が実測して指定する。 */
.gate-splash-icon.is-flying {
  transition: transform .8s cubic-bezier(.45, 0, .15, 1), opacity .34s ease .5s;
  opacity: 0;
}

/* 着地したタブを軽く光らせて、押せる場所だと気づけるようにする */
.category-tab.is-hinted { animation: tab-hint 1.5s ease .45s 1; }

@keyframes tab-hint {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  35%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.35); }
  100% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); }
}

/* 選択中は背後をスクロールさせない */
body.gate-open { overflow: hidden; }

.gate-inner { width: 100%; max-width: 460px; }

.gate-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--text);
}

.gate-lead {
  margin: 8px 0 22px;
  font-size: 13px;
  text-align: center;
  color: var(--text-dim);
}

/* ロゴのみを横 3 つ。均等幅で並べる */
.gate-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gate-item {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 18px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .1s;
}

.gate-item:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.10); }
.gate-item:active { transform: scale(0.99); }
.gate-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gate-icon {
  width: 100%;
  max-width: 78px;
  height: 78px;
  object-fit: contain;
}

/* ---------- 初期ローディング(API取得完了まで全画面) ---------- */

.app-loading {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .35s ease, visibility .35s ease;
}

body.app-ready .app-loading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ---------- カード: 詳細取得中(展開前) ---------- */

.event-card.is-loading .card-expand-toggle { color: var(--accent-bright); }
.event-card.is-loading .card-expand-label::after { content: 'Loading…'; }
.event-card.is-loading .card-chevron { display: none; }
.event-card.is-loading .card-expand-toggle::before {
  content: '';
  width: 11px;
  height: 11px;
  border: 2px solid rgba(var(--accent-rgb), 0.35);
  border-top-color: var(--accent-bright);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ---------- イベントカード ---------- */

.event-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 64px;
}

/* 日付見出し(schedule 区切り): 左に縦アクセントバー + 日付 + 右へ伸びる細線 */
.date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 0;
  margin-top: 6px;
  margin-bottom: -3px;   /* 直後のカードへ寄せる(list gap 14px を詰める) */
}
.date-divider:first-child { margin-top: 0; }
.date-divider::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--cat-strip);
}
.date-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.date-divider-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-bright);
  white-space: nowrap;
}

/* Past 区切り(未来→過去の切替): 両側に細線、中央にラベル */
.past-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 2px;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.past-divider::before,
.past-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, background-color .45s ease;
  border-left-width: 4px;
}

.event-card:hover { border-color: var(--border-strong); }

.event-card.is-open {
  border-color: var(--accent);
  box-shadow: var(--shadow-open);
}

/* ---- 開催状態を左の色帯と濃淡で表現(ラベルを読まなくても分かる) ---- */

/* 進行中: 赤帯 + 赤みのグラデーション */
.event-card.st-running,
.event-card.st-running:hover,
.event-card.st-running.is-open {
  border-left-color: var(--live);
}

.event-card.st-running {
  background:
    linear-gradient(90deg, rgba(var(--live-rgb), 0.1), transparent 45%),
    var(--bg-card);
}

/* 開催予定: 緑帯 */
.event-card.st-future,
.event-card.st-future:hover,
.event-card.st-future.is-open {
  border-left-color: var(--future);
}

/* 終了: グレー帯 + 全体を薄く(ホバー / 展開で復帰) */
.event-card.st-past,
.event-card.st-past:hover,
.event-card.st-past.is-open {
  border-left-color: rgba(var(--past-rgb), 0.55);
}

.event-card.st-past .card-head { opacity: 0.72; transition: opacity .2s, background .2s; }
.event-card.st-past .card-head:hover,
.event-card.st-past.is-open .card-head { opacity: 1; }

.event-card.st-past .card-title { color: var(--text-dim); }

.card-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* Safari は <button> の flex 子要素を stretch しないため明示 */
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  transition: background .2s;
}

/* iOS Safari 対策: button(flex column)配下の各行を確実に横幅いっぱいに。
   これが無いと下部バーが内容幅で切れ、★も右端に寄らない。 */
.card-head > * { width: 100%; }

.card-head:hover { background: var(--bg-card-hover); }

/* カード下部の帯: 左に状態/カウントダウン、右に DETAILS トグル(上部バーは廃止) */
.card-expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color .2s, background .2s;
}

/* 右側の DETAILS / CLOSE トグル */
.card-expand-toggle { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.card-expand-label::after { content: 'Details'; }
.event-card.is-open .card-expand-label::after { content: 'Close'; }

.card-head:hover .card-expand-toggle {
  color: var(--accent-bright);
}

/* 左側の状態表示(ドット + ラベル + カウントダウン)。ホバーしてもフェーズ色を保つ */
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.card-status-label { white-space: nowrap; }

.live-flash {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;          /* フェーズ色(LIVE=緑 / REG CLOSE=橙 / STARTS IN=青)に追従 */
  box-shadow: 0 0 6px currentColor;
  animation: pulse 1.6s infinite;
}

/* フェーズ別の文字色 */
.card-status.s-live { color: var(--live); }
.card-status.s-open { color: var(--future); }
.card-status.s-soon { color: var(--accent-bright); }
.card-status.s-startin  { color: var(--startin); }
.card-status.s-regclose { color: var(--regclose); }
.card-status.s-closed,
.card-status.s-ended { color: var(--past); }

/* カウントダウン数字(STARTS IN / REG CLOSE IN)。フェーズ色で目立たせる */
.card-countdown {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: none;
}
.s-startin  .card-countdown { color: var(--startin); }
.s-regclose .card-countdown { color: var(--regclose); }

/* No + タイトル */
.card-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 0;
}
.event-card.is-minimal .card-headline { padding: 8px 14px; }

/* イベント No バッジ */
.card-no {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: break-word;
}

/* 情報行(Date / Start / Reg Close / Buy-in / Chips) */
/* 情報行は 2 行 × 3 項目。上下の行で項目の開始位置を揃えるため、
 * .card-lines を 1 つのグリッドにして .card-line を display:contents で透過させる。
 * 行ごとに別のグリッドにすると列幅が行内の内容だけで決まり、上下がずれる。
 * 列幅は auto(2 行のうち広いほうに合わせる)で、余りは列の間に配る。 */
.card-lines {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  gap: 3px 16px;
  padding: 7px 14px 12px;
}

.card-line { display: contents; }

.card-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.card-stat .k {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.card-stat .v {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* 下段: 3 セグメントのバー(参加者 / 種別 / 賞金) */
.card-foot {
  display: flex;
  gap: 8px;
  padding: 0 18px 16px;
}

.card-seg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}

.card-seg .k {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.card-seg .v {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-seg.seg-prize .v { color: var(--accent-bright); }
body[data-theme="wolf"] .card-seg.seg-prize .v { font-style: italic; }

.card-chevron {
  flex-shrink: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  transition: transform .3s;
}

/* お気に入り(★) */
.fav-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color .2s, background .2s, transform .15s;
}

.fav-btn:hover {
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.12);
  transform: scale(1.1);
}

.fav-btn.is-fav { color: var(--accent-bright); }

.fav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* お気に入りフィルタピル */
.fav-pill .fav-pill-star { color: var(--text-faint); transition: color .2s; }
.fav-pill.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent-bright);
}
.fav-pill.is-active .fav-pill-star { color: var(--accent-bright); }

.event-card.is-open .card-chevron { transform: rotate(180deg); }
.event-card.is-open .card-expand-toggle { color: var(--accent-bright); }

/* ---------- アコーディオン ---------- */

.card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.event-card.is-open .card-body { grid-template-rows: 1fr; }

.card-body-inner {
  overflow: hidden;
  min-height: 0;
}

.detail-tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar { display: none; }

.detail-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  padding: 10px 16px 9px;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}

.detail-tab:hover { color: var(--text); }
.detail-tab.is-active { color: var(--accent-bright); border-bottom-color: var(--accent); }

.detail-tab[data-tab="live"]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 6px var(--live);
  margin-right: 7px;
  vertical-align: 1px;
  animation: pulse 1.6s infinite;
}

.detail-tab[data-tab="reg"]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--future);
  margin-right: 7px;
  vertical-align: 1px;
}

.detail-panels { padding: 22px 24px 26px; }

.detail-panel { display: none; }
.detail-panel.is-active { display: block; animation: fade-in .25s ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 大会情報パネル ---------- */

/* 大会の説明文(ティッカー)。長い説明でもカードの高さを取らずに全文を流す。 */
.event-ticker {
  overflow: hidden;
  margin-bottom: 18px;
  color: var(--text-dim);
  font-size: 14px;
}

.event-ticker-track {
  display: flex;
  width: max-content;
}

.event-ticker-item { white-space: nowrap; }

/* 収まらないときだけ流す(is-scrolling は app.js が付ける)。
 * コンテナの右端の外から入り、左端の外へ抜けきるまでが 1 周。抜けきってから次の周が
 * 始まるので、流れている文の途中に次の周の文字が割り込むことがない。
 * 開始位置 --ticker-from(= コンテナ幅)と終了位置 --ticker-to(= 文の幅の負値)、
 * および速度は app.js が実測して指定する。
 * ここを % で書くと、flex アイテムの % パディングがトラック幅を基準に循環参照になり、
 * 文が抜けきる前に巻き戻ってしまうため、必ずピクセル値で渡す。 */
.event-ticker.is-scrolling .event-ticker-track {
  animation: ticker-scroll 20s linear infinite;
}

/* 端のフェードは流れているときだけ掛ける。
 * 収まっていて動かない文にも掛けると、左端にある文頭がただ薄いだけになる。
 * 流れている間は、文が出ていく左端だけをぼかす(右端は次の文字が現れる側で、
 * ここを薄くすると読もうとしている先の文字が見えなくなる)。 */
.event-ticker.is-scrolling {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px);
          mask-image: linear-gradient(90deg, transparent, #000 16px);
}

@keyframes ticker-scroll {
  from { transform: translateX(var(--ticker-from, 100%)); }
  to   { transform: translateX(var(--ticker-to, -100%)); }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  background: var(--bg-inset);
  padding: 11px 16px;
}

.info-row dt { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.info-row dd { font-size: 13.5px; font-weight: 500; text-align: right; }

.detail-notes-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}


.detail-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}

.detail-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
}

.detail-notes li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- テーブル共通 ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 460px;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  background: var(--bg-inset);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--table-line);
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--row-hover); }

/* 結果表・賞金表も横スクロールなしで画面幅に収める:
 * 最小幅指定を外し、選手名の列だけ折り返す(数値列は nowrap のまま詰めて収める)。 */
.data-table.results-table,
.data-table.prize-table {
  min-width: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.data-table.results-table th,
.data-table.results-table td,
.data-table.prize-table th,
.data-table.prize-table td {
  padding: 9px 8px;
}

.data-table.results-table th:first-child,
.data-table.results-table td:first-child,
.data-table.prize-table th:first-child,
.data-table.prize-table td:first-child { padding-left: 12px; }

.data-table.results-table th:last-child,
.data-table.results-table td:last-child,
.data-table.prize-table th:last-child,
.data-table.prize-table td:last-child { padding-right: 12px; }

/* 選手名は折り返し可(長い名前でも横スクロールさせない) */
.results-table .col-player {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* ---------- ストラクチャーパネル ---------- */

.structure-meta {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-align: center;
}

/* ストラクチャー表は中央寄せ・全列センター揃えで余白を均等に。
 * 幅に上限を設けてパネル中央に配置する。 */
.data-table.structure-table {
  min-width: 0;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.data-table.structure-table th,
.data-table.structure-table td {
  padding: 8px 6px;
  white-space: nowrap;
  text-align: center;
}

.data-table.structure-table th:first-child,
.data-table.structure-table td:first-child {
  width: 3.4em;
}

/* Blinds を主役に、Ante / Time は控えめの幅。すべて中央揃え */
.data-table.structure-table th:nth-child(3),
.data-table.structure-table td:nth-child(3) { width: 4.6em; }
.data-table.structure-table th:nth-child(4),
.data-table.structure-table td:nth-child(4) { width: 3.8em; }

.row-break td {
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent-bright);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.row-latereg td { background: rgba(var(--live-rgb), 0.05); }

/* レイトレジ終了は Lv 列に inline で入れず、全幅の注記行として表示 */
.row-latereg-note td {
  background: rgba(var(--live-rgb), 0.05);
  padding: 2px 12px 7px;
  text-align: center;
}

.latereg-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--live);
  border: 1px solid rgba(var(--live-rgb), 0.45);
  border-radius: 4px;
  padding: 1px 8px;
}

/* ---------- 結果パネル ---------- */

.result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.summary-item {
  flex: 1;
  min-width: 140px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-label { font-size: 11px; color: var(--text-faint); }

.summary-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-bright);
}

body[data-theme="wolf"] .summary-value { font-style: italic; }

.results-table .col-pos { width: 2.8em; text-align: center; font-weight: 700; }

.pos-medal {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12.5px;
}

.pos-medal.pos-1 { background: linear-gradient(135deg, #f5d97a, #b8913f); color: #14100a; }
.pos-medal.pos-2 { background: linear-gradient(135deg, #d9dee8, #8c96a8); color: #14100a; }
.pos-medal.pos-3 { background: linear-gradient(135deg, #d9a06b, #96602f); color: #14100a; }

.results-table .col-prize { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }

.player-country {
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}

.row-winner td {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03));
}

.row-winner .col-player { color: var(--accent-bright); font-weight: 700; }

/* ---------- 賞金分配(Prize)パネル ---------- */

/* 賞金表は列が少ない(Place / Share / Prize)ため、幅に上限を設けて囲みごと
 * パネル中央に配置する。全列センター揃えで左右の余白を均等にする。 */
.prize-scroll {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* 列は等幅に割り、Place も含めて左右対称に見せる */
.data-table.prize-table { table-layout: fixed; }

.data-table.prize-table th,
.data-table.prize-table td { text-align: center; }

.prize-table .col-pos { font-weight: 700; }
.prize-table .col-prize { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }

/* 標準配分モデルの注記も表に合わせて中央寄せ */
.prize-scroll + .reg-note { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- ライブ状況パネル ---------- */

.live-board {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
}

.live-clock {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(var(--live-rgb), 0.1), transparent),
    var(--bg-inset);
  border: 1px solid rgba(var(--live-rgb), 0.35);
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.live-level {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--live);
}

.live-blinds {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.live-ante {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.live-timer {
  font-family: var(--font-display);
  font-size: clamp(44px, 12vw, 52px);
  font-weight: 700;
  color: var(--accent-bright);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

body[data-theme="wolf"] .live-blinds,
body[data-theme="wolf"] .live-timer { font-style: italic; }

.live-next { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }

.live-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
}

.live-stat {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-stat-label { font-size: 11px; color: var(--text-faint); }

.live-stat-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.live-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------- ライブ座席表(卓を真上から見たレイアウト) ----------
 * .seat-ring を楕円のテーブルに見立て、席カードを縁に沿って並べる。
 * 位置は JS が渡す --sx / --cy(sin / cos)だけで決まり、席カードの大きさ分を
 * 半径から差し引くことで、はみ出さずにリング内へ収める。 */

.live-seats { margin-top: 18px; }

.live-seats-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* ---------- 着席者一覧 ----------
 * 卓が多いとタブを 1 つずつ開いて人を探すことになるため、卓タブの上に全員を出す。
 * 人数が多い(100 人超)ので高さを固定して中だけスクロールさせ、
 * 座席図が画面外に押し出されないようにする。 */
.seat-list-block { margin-bottom: 12px; }

/* 一覧の開閉ボタン。見出し全体が押せる */
.seat-list-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.seat-list-toggle:hover { color: var(--text); border-color: var(--border-strong); }

/* 展開中は下辺の線を消し、一覧の見出しの上端を仕切り線として使う。
 * 線を挟むと、その 1 画素の行で下の行の文字が混ざって覗くことがあるため。 */
.seat-list-block:not(.is-collapsed) .seat-list-toggle { border-bottom-color: transparent; }

.seat-list-chevron { font-size: 10px; transition: transform .2s; }
.seat-list-block:not(.is-collapsed) .seat-list-chevron { transform: rotate(180deg); }
.seat-list-block.is-collapsed .seat-list-wrap { display: none; }

.seat-list-wrap {
  /* 実際の高さは app.js が「見出し + 9 人分」に合わせて指定する。
   * ここの値は、まだ測れていないとき(タブ非表示など)に一覧が伸びきらないための保険。 */
  max-height: 360px;
  overflow-y: auto;
  /* ボタンの下辺に 1 画素重ねて、境目に隙間ができないようにする */
  margin-top: -1px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

/* 開閉ボタンと一覧が 1 つの箱に見えるよう、間の角を落とす */
.seat-list-block:not(.is-collapsed) .seat-list-toggle { border-radius: 10px 10px 0 0; }

/* 狭い画面用の .data-table { min-width: 400px } を打ち消す。
 * 一覧は横スクロールさせず、幅いっぱいに 3 列を収める。
 *
 * border-collapse も collapse から separate に変える。collapse のままだと
 * Chromium で th の position: sticky が効かず、見出しが行と一緒にスクロールして
 * 開閉ボタンとの間に行が覗いて見えてしまう。 */
.seat-list-wrap .seat-list {
  min-width: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* 見出しはスクロールしても残す(どの列か見失わないように) */
.seat-list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* 見出しの背景を上に数 px 伸ばして、開閉ボタンとの継ぎ目を塞ぐ。
   * sticky の見出しと、その下を流れる行の間には端数分の隙間ができることがあり
   * (画面倍率が 1.25 倍などの環境で顕著)、そこから行の文字が覗いて見えていた。 */
  box-shadow: 0 -4px 0 var(--bg-inset);
}

.seat-list thead th.is-sorted { color: var(--accent-bright); }
.seat-list thead th:hover { color: var(--text); }

.seat-list-chips, .seat-list-seat { text-align: right; font-variant-numeric: tabular-nums; }
.seat-list-player { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 60%; }

.seat-list-row { cursor: pointer; }
.seat-list-row:hover { background: rgba(var(--accent-rgb), 0.10); }
.seat-list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 卓の切り替えタブ(2 卓以上のときだけ出る)。卓数が多くても横スクロールで収める */
.seat-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 12px;
}

.seat-tabs::-webkit-scrollbar { display: none; }

.seat-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

.seat-tab:hover { color: var(--text); }

.seat-tab.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent-bright);
}

.seat-tab-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 1px 6px;
}

.seat-tab.is-active .seat-tab-count {
  color: inherit;
  background: rgba(var(--accent-rgb), 0.18);
}

/* 選択中の卓だけ表示 */
.seat-table { display: none; }
.seat-table.is-active { display: block; }

.seat-ring {
  --seat-w: 84px;
  --seat-h: 62px;
  --seat-dot: 30px;
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 0.82;
  margin: 0 auto;
}

/* テーブルの縁(レール)。席の丸の中心を通る楕円を引いて着席位置を示す。
 * 席は translate(-50%,-50%) で中心を合わせているため、丸は node の中心より
 * (seat-h - seat-dot)/2 だけ上にある。その分だけ楕円を上へずらす。 */
.seat-ring::before {
  content: '';
  position: absolute;
  left: calc(var(--seat-w) / 2);
  right: calc(var(--seat-w) / 2);
  top: calc(var(--seat-dot) / 2);
  bottom: calc(var(--seat-h) - var(--seat-dot) / 2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* テーブル面(フェルト)。レールの内側に、実際の卓に近い横長で置く */
.seat-felt {
  position: absolute;
  left: calc(var(--seat-w) / 2 + 9%);
  right: calc(var(--seat-w) / 2 + 9%);
  top: calc(var(--seat-dot) / 2 + 20%);
  bottom: calc(var(--seat-h) - var(--seat-dot) / 2 + 20%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 999px;
  background:
    radial-gradient(ellipse 90% 80% at 50% 30%, rgba(var(--accent-rgb), 0.12), transparent),
    var(--bg-inset);
}

.seat-felt-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-faint);
}

.seat-felt-no {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-bright);
}

.seat-felt-sub {
  font-size: 10.5px;
  color: var(--text-dim);
}

/* 席カード(丸 + 名前 + チップ)。楕円の縁に中心を合わせる */
.seat-node {
  position: absolute;
  left: calc(50% + var(--sx) * (50% - var(--seat-w) / 2));
  top: calc(50% + var(--cy) * (50% - var(--seat-h) / 2));
  transform: translate(-50%, -50%);
  width: var(--seat-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.seat-dot {
  display: grid;
  place-items: center;
  width: var(--seat-dot);
  height: var(--seat-dot);
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: var(--bg-card);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-bright);
}

.seat-player {
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-chips {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* 空席は控えめに */
.seat-node.is-empty .seat-dot {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
  color: var(--text-faint);
}

.seat-node.is-empty .seat-player { color: var(--text-faint); }

/* ディーラー位置(下辺中央) */
.seat-dealer {
  position: absolute;
  left: calc(50% + var(--sx) * (50% - var(--seat-w) / 2));
  top: calc(50% + var(--cy) * (50% - var(--seat-h) / 2));
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

@media (max-width: 560px) {
  .seat-ring {
    --seat-w: 66px;
    --seat-h: 56px;
    --seat-dot: 26px;
    aspect-ratio: 1 / 0.95;
  }

  .seat-felt {
    left: calc(var(--seat-w) / 2 + 4%);
    right: calc(var(--seat-w) / 2 + 4%);
    top: calc(var(--seat-dot) / 2 + 21%);
    bottom: calc(var(--seat-h) - var(--seat-dot) / 2 + 21%);
  }

  .seat-felt-no { font-size: 24px; }
  .seat-player { font-size: 10.5px; }
  .seat-chips { font-size: 10px; }
  .seat-dealer { width: 38px; height: 38px; font-size: 7.5px; }
}

/* ---------- 申込状況パネル ---------- */

.reg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.reg-state {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 99px;
}

.reg-open {
  background: rgba(var(--future-rgb), 0.14);
  color: var(--future);
  border: 1px solid rgba(var(--future-rgb), 0.45);
}

.reg-soon {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-bright);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}

.reg-closed {
  background: rgba(var(--past-rgb), 0.12);
  color: var(--past);
  border: 1px solid rgba(var(--past-rgb), 0.35);
}

.reg-close { font-size: 13px; color: var(--text-dim); }

.reg-progress { margin-bottom: 18px; max-width: 560px; }

.reg-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.progress-bar {
  height: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--future-deep), var(--future));
  border-radius: 99px;
  transition: width .5s ease;
}

.reg-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
  margin-bottom: 14px;
}

.reg-option {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 16px;
}

.reg-option-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.reg-option-chips { font-size: 12px; color: var(--text-dim); }

.reg-option-amount {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-bright);
  min-width: 90px;
  text-align: right;
}

.reg-note { font-size: 12.5px; color: var(--text-faint); margin-bottom: 18px; max-width: 640px; }

.reg-button {
  display: inline-block;
  background: var(--accent-grad);
  color: var(--accent-contrast);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  padding: 13px 42px;
  min-height: 48px;
  transition: transform .15s, box-shadow .2s, filter .2s;
}

.reg-button:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}

.reg-button:disabled {
  background: var(--bg-elevated);
  color: var(--text-faint);
  border: 1px solid var(--border);
  cursor: not-allowed;
}

.reg-applied-note { font-size: 12px; color: var(--text-faint); margin-top: 10px; }

/* 受付ステータス文言(申込ボタンの代わりに状態を明示) */
.reg-status-msg {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.reg-status-msg.msg-open {
  color: var(--future);
  background: rgba(var(--future-rgb), 0.1);
  border-color: rgba(var(--future-rgb), 0.4);
}

.reg-status-msg.msg-soon {
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.reg-status-msg.msg-closed {
  color: var(--past);
  background: rgba(var(--past-rgb), 0.1);
  border-color: rgba(var(--past-rgb), 0.35);
}

/* ---------- 申込モーダル ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 4, 14, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade-in .2s ease;
}

.modal-overlay[hidden] { display: none; }

.modal {
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 14px;
  padding: 22px 24px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: modal-in .25s ease;
}

body[data-theme="utage"] .modal { background: #fffdf8; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body[data-theme="utage"] .modal-title { font-family: var(--font-mincho); }

.modal-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 20px;
  transition: background .2s, color .2s;
}

.modal-close:hover { background: var(--row-hover); color: var(--text); }

/* ステップ表示 */
.modal-steps {
  display: flex;
  gap: 4px;
  list-style: none;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.modal-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
}

.step-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
}

.modal-steps li.is-current { color: var(--accent-bright); }
.modal-steps li.is-current .step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.modal-steps li.is-done { color: var(--future); }
.modal-steps li.is-done .step-num {
  background: rgba(var(--future-rgb), 0.15);
  border-color: var(--future);
  color: var(--future);
}

/* 大会サマリー */
.modal-event {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 16px;
}

.modal-event-name { font-size: 14px; font-weight: 700; }
body[data-theme="utage"] .modal-event-name { font-family: var(--font-mincho); }
.modal-event-meta { font-size: 12px; color: var(--text-dim); }

.modal-note { font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.7; }
.modal-mock-note { color: var(--text-faint); font-size: 11.5px; }

.modal-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 16px 0 8px;
}

/* フォーム */
.form-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.form-input {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 11px 14px;
  transition: border-color .2s;
}

.form-input:focus { outline: none; border-color: var(--accent); }
.form-input::placeholder { color: var(--text-faint); }

/* バイイン選択 */
.radio-group { display: flex; flex-direction: column; gap: 8px; }

.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .2s;
}

.radio-row:hover { border-color: var(--border-strong); }
.radio-row:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.07); }

.radio-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.radio-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.radio-chips { font-size: 12px; color: var(--text-dim); }

.radio-amount {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-bright);
  min-width: 80px;
  text-align: right;
}

/* 同意チェック */
.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 16px 0;
  cursor: pointer;
  line-height: 1.6;
}

.agree-row input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }

/* 主ボタン */
.modal-primary {
  display: block;
  width: 100%;
  background: var(--accent-grad);
  color: var(--accent-contrast);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  padding: 14px;
  min-height: 48px;
  transition: filter .2s, box-shadow .2s;
}

.modal-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
}

.modal-primary:disabled {
  background: var(--bg-elevated);
  color: var(--text-faint);
  border: 1px solid var(--border);
  cursor: not-allowed;
}

.modal-sub { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 12px; }
.modal-sub a { color: var(--accent-bright); }

/* 完了画面 */
.done-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: rgba(var(--future-rgb), 0.15);
  border: 2px solid var(--future);
  color: var(--future);
  font-size: 26px;
  font-weight: 700;
}

.done-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}

body[data-theme="utage"] .done-title { font-family: var(--font-mincho); }

.done-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.done-amount {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-bright);
}

.qr-box {
  width: 168px;
  margin: 0 auto 12px;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.qr {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  aspect-ratio: 1;
}

.qr i { display: block; }
.qr i.on { background: #16181d; }

.done-regnum {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.done-regnum strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.06em;
}

/* ---------- その他 ---------- */

.empty-message {
  text-align: center;
  color: var(--text-faint);
  padding: 64px 0;
}

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 28px 0 36px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------- レスポンシブ(スマホ最適化) ---------- */

@media (max-width: 760px) {
  :root { --header-h: 50px; }

  body { font-size: 14.5px; }

  .container { padding: 0 14px; }

  /* フィルタバーの背景を画面端まで全幅に。全幅の子要素(タブ/日付/ステータス)と
   * 背景の境目(月光グラデの覗き)が生じないようにする。padding で内側の位置は据え置き。 */
  .filter-bar {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand-mark { width: 32px; height: 32px; font-size: 18px; }
  .brand-name { font-size: 15.5px; }

  /* 種別タブ: 3等分のセグメント型 */
  .category-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 6px;
  }

  .category-tab {
    font-size: 14.5px;
    padding: 8px 4px 7px;
    gap: 6px;
    min-height: 44px;
  }

  .category-tab-icon { width: 44px; height: 44px; }
  .category-tab-count { padding: 0 6px; font-size: 10px; }

  /* スマホでは content-panel(フォルダ箱)とフォルダタブを無効化し、素の表示に戻す */
  .content-panel {
    background: none;
    border: none;
    border-radius: 0;
    margin-top: 0;
    padding: 0;
  }
  .category-tabs { align-items: center; }
  .category-tab {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 3px 4px;
  }
  .category-tab.is-active { background: none; }
  /* 選択ロゴの下地チップを戻す(透過解除)。3 種別とも白抜きロゴなので共通の濃色 */
  .category-tab.is-active[data-category="wolf"] .category-tab-icon,
  .category-tab.is-active[data-category="other"] .category-tab-icon,
  .category-tab.is-active[data-category="utage"] .category-tab-icon { background: #17132f; }

  /* 日付セレクター: 全幅・コンパクト */
  .date-strip {
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 5px 6px;
    gap: 8px;
    margin-bottom: 10px;
  }

  .month-nav { position: static; padding-right: 6px; gap: 0; }
  .month-label { padding: 5px 8px; gap: 5px; }
  .ml-month { font-size: 12.5px; }

  /* ピッカーは画面横いっぱいのドロップダウンに */
  .date-strip { position: relative; }

  .month-picker {
    left: 8px;
    right: 8px;
    top: calc(100% + 6px);
    min-width: 0;
  }

  .mp-month {
    flex: 1 0 26%;
    justify-content: center;
    min-height: 44px;
  }

  .date-cell { min-width: 0; min-height: 38px; }
  .date-num { font-size: 15px; width: 24px; height: 24px; }

  /* 状況フィルタ: 2 段構成・横スクロールなし。
   * 各段のピルを均等幅で敷き詰めて画面幅に収める。 */
  /* 日付バーと同じく画面端まで全幅にして、5 ボタンの幅を上の日付行と揃える */
  .status-filter {
    gap: 8px;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 6px 10px 6px;
  }

  .status-row { flex-wrap: nowrap; gap: 5px; }

  /* padding は指定せず基本スタイル(5px 8px)のままにして、ピルの高さを低く保つ */
  .status-row .status-pill {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    gap: 4px;
  }
  /* Favorites(★)は狭画面でも幅小のまま右端に固定(他ラベルの省略を防ぐ) */
  .status-row .fav-pill {
    flex: 0 0 auto;
    padding-left: 11px;
    padding-right: 11px;
    font-size: 12px;
  }

  /* カード: コンパクト表示 */
  .card-expand { padding: 5px 12px; gap: 8px; }
  .card-status { font-size: 10.5px; letter-spacing: 0.06em; }
  .card-countdown { font-size: 11.5px; }
  .card-headline { padding: 8px 12px 0; }
  .event-card.is-minimal .card-headline { padding: 7px 12px; }
  .card-title { font-size: 15px; line-height: 1.25; }
  .fav-btn { width: 30px; height: 30px; font-size: 17px; }

  /* 狭い画面では左右の余白を詰めて、3 項目 × 2 行を折り返さずに収める */
  .card-lines { padding: 6px 6px 11px; }
  /* 情報行は 1 行 3 項目(Date/Start/Reg Close)を必ず 1 段に収める。
   * 390px 幅では使える幅が 333px しかなく、曜日が幅広(Thu)+レジクロが 2 桁(Lv.10)の
   * 大会だと既定の gap では 1px ほど溢れて Reg Close だけ次段に落ちていた。
   * 項目間 14→10px / ラベルと値の間 7→5px で計 14px 詰めて余裕を作る。 */
  .card-lines { column-gap: 8px; }
  .card-stat { gap: 5px; }
  .card-stat .v { font-size: 13px; }

  /* アコーディオン内 */
  .detail-tabs { padding: 0 8px; }
  .detail-tab { padding: 10px 12px 9px; font-size: 12.5px; }
  .detail-panels { padding: 16px 14px 20px; }

  .event-ticker { font-size: 13.5px; }

  .info-grid { grid-template-columns: 1fr; }

  .data-table { font-size: 12.5px; min-width: 400px; }
  .data-table th { padding: 9px 12px; }
  .data-table td { padding: 8px 12px; }

  .live-board { grid-template-columns: 1fr; }
  .live-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .live-stat { padding: 10px 12px; }
  .live-stat-value { font-size: 17px; }

  .result-summary { gap: 8px; }
  .summary-item { min-width: calc(50% - 8px); padding: 10px 12px; }
  .summary-value { font-size: 17px; }

  .reg-button { width: 100%; }

  .event-list { gap: 10px; padding-bottom: 48px; }

  .modal-overlay { padding: 12px; align-items: end; }
  .modal { padding: 18px 16px 22px; max-height: 92vh; }
}

/* ---------- モーション設定の尊重 ---------- */

@media (prefers-reduced-motion: reduce) {
  body, .site-header, .category-tabs, .event-card { transition: none; }
  .card-body { transition: none; }
  .detail-panel.is-active { animation: none; }
  .dot-live, .live-flash, .detail-tab[data-tab="live"]::before { animation: none; }
  /* 動きを止める設定では、説明文は流さず折り返して全文を出す */
  .event-ticker { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .event-ticker-track { animation: none; width: auto; }
  .event-ticker-item { white-space: normal; padding-left: 0; }
  .card-chevron { transition: none; }
}