/* =========================================================
   オールール杯 ポータル — スタイル
   配信システム nodecg-allrulecup の Graphics デザイン
   （docs/graphics/graphics-design-guide.md）に合わせた Web 版。

   - 背景: 深海グラデーション + 泡（js/sea.js。配信の background.tsx の移植）
   - パネル: Liquid Glass（LiquidGlassPanel.tsx の CSS を移植。
     borderRadius 40 / blur 80 / bgOpacity 0.15 を Web の寸法に換算）
   - 文字: 新ゴ R / 新ゴ B（Xserver Webフォント）+ 数字は Martian Mono
   - 色: 配信の UI カラー・ルール色・チーム色をそのまま使う

   ※ Webフォントは font-weight を無視するため、太字は font-family を
     「新ゴ B」に切り替えて表現する。
   ========================================================= */

:root {
  --font-fallback: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "新ゴ R", var(--font-fallback);
  --font-bold: "新ゴ B", var(--font-fallback);
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 深海（配信の THEME_DEFAULT） */
  --sea-top: rgb(12, 34, 64);
  --sea-mid: rgb(7, 22, 42);
  --sea-bottom: rgb(4, 12, 24);
  --sea-container: #06162b;

  /* UI カラー（配信 4.2） */
  --text: rgba(255, 255, 255, 0.95);
  --text-sub: rgba(255, 255, 255, 0.78);
  --text-dim: rgba(255, 255, 255, 0.55);
  --gold: #ffd700;
  --gold-deep: #f0b400;

  /* ルール色（配信 ranking.tsx の RULE_COLORS） */
  --rule-nawabari: #c8f51f;
  --rule-area: #04e9c6;
  --rule-yagura: #6d35c4;
  --rule-hoko: #eadd07;
  --rule-asari: #dfbf00;

  /* チーム色（配信 4.1 の Primary） */
  --team-a: #e6ac54; --team-a-dark: #dc7521;
  --team-b: #ee6a88; --team-b-dark: #e64565;
  --team-c: #bbd445; --team-c-dark: #7c9a2c;
  --team-d: #a789bc; --team-d-dark: #8c4da3;
  --team-e: #7bbccc; --team-e-dark: #388db7;
  /* F〜H は第 2 回（8 チーム・トーナメント）だけ。既存 5 色の色相の隙間（緑 140° / 青 225° / マゼンタ 310°）。ダーク色は棒の数字 #06162b とのコントラスト 5.78 / 4.01 / 4.25（3 以上を保つ） */
  --team-f: #6fd39a; --team-f-dark: #2fa565;
  --team-g: #8aa2ec; --team-g-dark: #5470d4;
  --team-h: #df94dc; --team-h-dark: #b556b0;   /* 09-11 あくさん指摘: 元の #1c465b は棒の数字（#06162b）とのコントラストが 1.79 しかなく読めなかった。他チームは 3.2〜5.7 なので、色相はそのままに明度を 23 % → 47 % に上げて 4.89 に */

  /* Liquid Glass。角丸は配信と同じ値（設計書 11.x: 外側パネル 40 / 内側パネル・行 32 /
     ボックス 24 / カード・行 16 / バッジは完全円形 9999）。blur だけ 80 → 28px に換算 */
  --r-panel: 40px;
  --r-inner: 32px;
  --r-box: 24px;
  --r-card: 16px;
  --glass-radius: var(--r-panel);
  --glass-radius-sm: var(--r-inner);
  --glass-blur: 28px;
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.27) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(240, 245, 255, 0.18) 100%);
  --glass-bg-dark: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(10, 15, 30, 0.22) 100%);
  --glass-border: rgba(255, 255, 255, 0.32);
  --glass-border-dark: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06),
                  inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.06);
  --text-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.15);
  --ease-quint: cubic-bezier(0.86, 0, 0.07, 1);

  --max: 1120px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 28px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  background: var(--sea-container);
  text-shadow: var(--text-shadow);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, strong, b, th { font-family: var(--font-bold); font-weight: 700; }
p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }
a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: #fff; }
small { font-size: 0.85em; }
ul, ol { margin: 0; padding: 0; }
.num { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.01em; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.container { width: min(var(--max), 100% - 2rem); margin-inline: auto; }
.ext { display: inline-block; margin-left: 0.25em; font-size: 0.8em; transform: translateY(-1px); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.5rem 1rem; background: var(--gold); color: var(--sea-container);
  border-radius: 0 0 var(--r-card) var(--r-card); font-family: var(--font-bold); text-shadow: none;
}
.skip-link:focus { top: 0; }

/* ---------- 背景（Canvas は js/sea.js が描く） ---------- */
.sea {
  position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--sea-top) 0%, var(--sea-mid) 50%, var(--sea-bottom) 100%);
}

/* ---------- Liquid Glass ---------- */
.glass {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(2) brightness(1.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(2) brightness(1.05);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass::before { /* スペキュラーハイライト（上部の光沢） */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 15%, rgba(200, 220, 255, 0.08) 35%, rgba(255, 220, 255, 0.04) 55%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #fff 0%, transparent 50%);
  mask-image: linear-gradient(180deg, #fff 0%, transparent 50%);
}
.glass > * { position: relative; z-index: 1; }
.glass--dark { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); }
.glass--sm { border-radius: var(--glass-radius-sm); }

/* パネル内のタイル（backdrop-filter を重ねない軽量版） */
.tile {
  position: relative; border-radius: var(--r-box);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* ---------- ヘッダー（配信の Header と同じフローティングのガラスピル） ---------- */
.site-header { position: sticky; top: 12px; z-index: 50; padding: 0 1rem; }
.site-header__inner {
  width: min(var(--max), 100%); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h); padding: 0 0.55rem 0 1.1rem; border-radius: var(--r-panel);
}
.brand { display: inline-flex; align-items: center; color: #fff; text-decoration: none; padding: 0.5rem 0; }
.brand__logo { display: block; height: 42px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }

/* メニュー項目: クリック範囲はバーの高さいっぱい。見た目のピルは ::before で描く */
.site-nav ul { display: flex; align-items: stretch; list-style: none; }
.site-nav li { display: flex; align-items: stretch; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; gap: 0.45em; padding: 0 0.95rem;
  color: #fff; text-decoration: none; font-size: 0.92rem; letter-spacing: 0.06em; white-space: nowrap;
}
.site-nav a > * { position: relative; z-index: 1; }
.site-nav a i { width: 1.15em; text-align: center; font-size: 0.95em; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.35); }
.site-nav a.site-nav__cta { color: var(--sea-container); font-family: var(--font-bold); text-shadow: none; }
.site-nav a.site-nav__cta i { color: #000; text-shadow: none; } /* 黄色の上なので黒 */

@media (min-width: 1025px) {
  .site-nav ul { height: var(--header-h); }
  .site-nav a::before {
    content: ""; position: absolute; inset: 14px 2px; border-radius: 999px; z-index: 0;
    background: transparent; transition: background-color 0.25s ease;
  }
  .site-nav a:hover::before { background: rgba(255, 255, 255, 0.14); }
  /* 右端の CTA: 高さは他の項目と同じ。角丸は完全な丸（高さの半分が上限） */
  .site-nav li:last-child { margin-left: 0.35rem; }
  .site-nav a.site-nav__cta { padding: 0 1.2rem; }
  .site-nav a.site-nav__cta::before {
    inset: 14px 0; border-radius: 999px; background: linear-gradient(180deg, #ffe066 0%, var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .site-nav a.site-nav__cta:hover::before { background: linear-gradient(180deg, #fff0a0 0%, #ffe14d 45%, var(--gold) 100%); }
}

/* ≡ ボタン（スマホ幅だけ表示） */
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 0.1rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 1.15rem; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.nav-toggle:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)); }

@media (min-width: 1025px) and (max-width: 1180px) {
  .site-nav a { font-size: 0.88rem; letter-spacing: 0.02em; padding: 0 0.65rem; }
  .site-nav a.site-nav__cta { padding: 0 1rem; }
}
@media (max-width: 1024px) {
  .site-header { top: 8px; padding: 0 0.6rem; }
  /* backdrop-filter を持つ要素は絶対配置の基準にもなり overflow で切られるので、
     メニューは外に垂らさず、ガラスのピルそのものが下に伸びて中に収める */
  .site-header__inner { flex-wrap: wrap; row-gap: 0; border-radius: var(--r-inner); padding: 0.35rem 0.5rem 0.35rem 0.9rem; }
  .brand__logo { height: 36px; }
  .nav-toggle { display: inline-flex; }
  /* 開閉は easeInOutQuint（配信と同じ）。高さは grid-template-rows 0fr → 1fr で滑らかに伸ばす */
  .site-nav {
    display: grid; grid-template-rows: 0fr; width: 100%; order: 3;
    transition: grid-template-rows 0.45s var(--ease-quint);
  }
  .site-nav > ul {
    min-height: 0; overflow: hidden; flex-direction: column; height: auto;
    margin-top: 0; padding: 0 0.1rem; border-top: 0 solid rgba(255, 255, 255, 0.16);
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity 0.3s var(--ease-quint), transform 0.45s var(--ease-quint), margin-top 0.45s var(--ease-quint),
                padding 0.45s var(--ease-quint), border-top-width 0.3s var(--ease-quint), visibility 0s linear 0.45s;
  }
  .site-header.is-open .site-nav { grid-template-rows: 1fr; }
  .site-header.is-open .site-nav > ul {
    margin-top: 0.35rem; padding: 0.4rem 0.1rem 0.4rem; border-top-width: 1px;
    opacity: 1; transform: none; visibility: visible; transition-delay: 0s;
  }
  .site-nav li { display: block; }
  .site-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .site-nav a { display: flex; padding: 0.85rem 1rem; border-radius: var(--r-card); font-size: 1rem; letter-spacing: 0.06em; }
  .site-nav a:hover { background: rgba(255, 255, 255, 0.12); }
  .site-nav a i { width: 1.4em; font-size: 1.05em; }
  .site-nav li:last-child { border-top: 0; margin-top: 0.5rem; }
  .site-nav a.site-nav__cta {
    justify-content: center; border-radius: 999px; padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #ffe066 0%, var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

/* ---------- ヒーロー ---------- */
.hero { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero__inner { position: relative; max-width: 860px; margin-inline: auto; text-align: center; }
.hero__eyebrow {
  display: inline-block; margin-bottom: 1.2rem; padding: 0.35rem 1rem; border-radius: 999px;
  font-size: 0.8rem; letter-spacing: 0.18em; color: #fff;
}
.hero__title { margin: 0 0 0.6rem; line-height: 0; }
.hero__logo { display: block; width: min(640px, 100%); height: auto; margin-inline: auto; }
@media (min-width: 1025px) { .hero__logo { width: min(840px, 100%); } } /* PC では大きく */
.hero__slogan {
  position: relative; z-index: 1; /* 絵の下端に重ねるため前面に */
  font-family: var(--font-bold); font-size: clamp(1.45rem, 1rem + 2.6vw, 2.5rem); line-height: 1.5;
  letter-spacing: 0.04em; color: #fff; margin: clamp(-3rem, -5vw, -1rem) 0 0.6rem; /* 絵の下端に食い込ませて上へ */
  text-shadow: none;
}
.hero__slogan ruby { ruby-position: over; }
.hero__slogan rt { font-family: var(--font-body); font-size: 0.42em; letter-spacing: 0.12em; color: var(--gold); -webkit-text-fill-color: var(--gold); text-shadow: var(--text-shadow); }
.hero__slogan rp { display: none; }
/* 文字のグラデーション: 上は白、下へ行くほど金色を濃く（ロゴの文字と同じ調子）。
   行ごとに掛けたいので、折り返し単位の span に背景を切り抜く。影は text-shadow が透けるので drop-shadow で */
.hero__slogan-part {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #ffe27a 68%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.3));
}
@media (max-width: 420px) {
  .hero__slogan { font-size: 1.32rem; letter-spacing: 0.02em; }
}
.hero__copy { font-size: clamp(0.98rem, 1.8vw, 1.15rem); line-height: 1.8; margin: 0 0 2rem; color: var(--text-sub); }
@media (max-width: 480px) {
  /* 説明文をスマホ幅で 1 行に収める。実測: 430px 幅（iPhone 14 Pro Max）で使える幅 398px、
     15.68px だと 400px で折れる → 3.4vw（430px で 14.6px = 約 370px、390px で 13.3px = 約 345px） */
  .hero__copy { font-size: clamp(0.78rem, 3.4vw, 0.98rem); }
}

.next-event { display: inline-block; margin-bottom: 2rem; padding: 1.15rem 1.8rem 1.05rem; text-align: center; }
.next-event__label { font-size: 0.78rem; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 0.45rem; font-family: var(--font-bold); }
/* Day1 / Day2 を左右に並べる */
.next-event__days { display: flex; justify-content: center; gap: 0 1.2rem; margin: 0 0 0.6rem; }
/* DAY ラベルは日付の数字の真上に置く（曜日バッジは別の列にして中央の計算から外す） */
/* 列は「年 / 月日 / 曜日バッジ」。DAY ラベルは月日（11.21 / 11.22）の列の真上に置く */
.next-event__day { position: relative; display: grid; grid-template-columns: auto auto auto; grid-template-areas: ". label ." "year md badge"; align-items: center; justify-content: center; column-gap: 0; text-align: center; }
.next-event__day .next-event__dayno { grid-area: label; }
.next-event__day .next-event__date, .next-event__day .next-event__date time { display: contents; }
.next-event__year { grid-area: year; }
.next-event__md { grid-area: md; }
.next-event__day .next-event__wd { grid-area: badge; margin-left: 0.5em; }
/* Day 1 → Day 2 の連日開催を示す「▶」（CSS の三角形。DAY ラベルぶん下げて日付の高さに合わせる） */
.next-event__arrow { align-self: stretch; display: flex; align-items: center; padding-top: 1.45rem; }
.next-event__arrow::before {
  content: ""; width: 0; height: 0; border-top: 0.42em solid transparent; border-bottom: 0.42em solid transparent;
  border-left: 0.62em solid var(--gold); filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
}
.next-event__dayno { font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.24em; color: var(--gold); margin: 0 0 0.1rem; }
.next-event__date { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: #fff; white-space: nowrap; }
/* 曜日: 丸囲みの「土」「日」。土曜は青丸、日曜は赤丸（暦の慣習） */
.next-event__wd {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em;
  border-radius: 50%; font-family: var(--font-bold); font-size: 0.5em; letter-spacing: 0; color: #fff; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.next-event__wd--sat { background: #3b82f6; }
.next-event__wd--sun { background: #ef4444; }
.next-event__meta { font-size: 0.85rem; color: var(--text-dim); margin: 0.2rem 0 0; }
.next-event__meta i { margin-right: 0.4em; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.35); }
@media (max-width: 480px) {
  /* スマホ幅でも DAY 1 / DAY 2 を横並びのまま 1 行に収める（430px 幅の実測値をもとに間隔と文字を詰める） */
  .next-event { padding-inline: 1.1rem; }
  .next-event__days { gap: 0 0.8rem; }
  .next-event__arrow { padding-top: 1.35rem; }
  .next-event__date { font-size: 1.25rem; }
}
@media (max-width: 340px) {
  .next-event__days { flex-direction: column; gap: 0.5rem; }
  .next-event__arrow { display: none; }
}


/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.2em;
  padding: 0.85rem 1.5rem; border-radius: 999px; text-decoration: none; text-align: center;
  font-family: var(--font-bold); font-size: 0.98rem; line-height: 1.3;
  transition: transform 0.25s var(--ease-quint), box-shadow 0.25s ease, background-color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: linear-gradient(180deg, #ffe066 0%, var(--gold) 45%, var(--gold-deep) 100%);
  color: var(--sea-container); text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* 落ち影（金色のグロー）は無し。ヘッダーの CTA と同じ */
}
.btn--primary:hover { background: linear-gradient(180deg, #fff0a0 0%, #ffe14d 45%, var(--gold) 100%); }
.btn--ghost {
  color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)); }

/* ---------- サブページ ---------- */
.page-sub main { padding-top: clamp(1.2rem, 3vw, 2.4rem); }
.page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ---------- セクション共通 ---------- */
.section { padding: clamp(1.4rem, 3vw, 2.2rem) 0; }
.section:last-of-type { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.panel { padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 3.5vw, 2.8rem); }

.section-head { width: 100%; margin-bottom: 2rem; }
.section-head__eyebrow { font-size: 0.76rem; letter-spacing: 0.32em; color: var(--gold); margin-bottom: 0.35rem; font-family: var(--font-bold); }
.section-head__title { font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.2rem); line-height: 1.3; margin: 0 0 0.8rem; color: #fff; }
.section-head__lead { color: var(--text-sub); font-size: 1rem; }
.section-head__lead small { display: inline-block; margin-top: 0.4rem; color: var(--text-dim); }
.section-foot { margin-top: 1.5rem; color: var(--text-dim); font-size: 0.9rem; }

/* ---------- カード ---------- */
.cards { display: grid; gap: 1rem; }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { padding: 1.4rem 1.3rem; }
.card__icon { font-size: 1.7rem; line-height: 1; margin-bottom: 0.65rem; }
.card__title { font-size: 1.1rem; margin: 0 0 0.45rem; line-height: 1.4; color: #fff; }
.card p:not(.card__title) { color: var(--text-sub); font-size: 0.95rem; }
.card .btn { margin-top: 0.9rem; } /* カード末尾のボタン（/join/） */

/* ---------- コンセプトと醍醐味（トップ → /about/ への導線） ---------- */
.section-head__part { display: inline-block; } /* 見出しは「。」でだけ折り返す */
/* 480px 以下: 前半 13 文字が本文幅に収まる大きさに。本文幅 = 100vw − 32（container）− 38.4（panel 左右 1.2rem）なので
   1 文字 ≤ (100vw − 70.4) / 13 ≈ 7.7vw − 5.4px。実測: 390px で 22.9px × 13 = 297 < 317、340px で 19.2px × 13 = 250 < 270 */
@media (max-width: 480px) { #concept .section-head__title { font-size: clamp(1.15rem, 7.4vw - 6px, 1.62rem); } }
.highlights { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 1.4rem; margin: 0; } /* 縦並び。行は等分して 3 項目の高さを揃える */
.highlight { position: relative; padding: 0 1rem; border-left: 3px solid var(--gold); }
.highlight dt, .highlight dd { position: relative; z-index: 1; } /* 文字は番号より手前 */
/* 番号: 透かしのように薄い白で大きく、文字の後ろに敷く（あくさん指示） */
.highlight__no { position: absolute; right: 0; bottom: -0.1em; z-index: 0; font-family: var(--font-mono); font-weight: 700; font-size: 2.2rem; letter-spacing: 0.04em; line-height: 1; color: rgba(255, 255, 255, 0.28); text-shadow: none; }
@media (max-width: 760px) { .highlight__no { font-size: 1.8rem; } }
/* PC: 「01 ｜ 項目」の横並び。番号は左、金の線はその右、見出し・本文はさらに右（あくさん指示）。
   線は ::before を 2 列目の 2 行ぶんに置き、行を auto 1fr にして項目の高さいっぱいに伸ばす */
@media (min-width: 761px) {
  .highlight { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; padding: 0; border-left: 0; }
  .highlight::before { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 3px; background: var(--gold); }
  .highlight dt, .highlight dd { grid-column: 2; padding-left: calc(3px + 1rem); }
  .highlight dt { grid-row: 1; }
  .highlight dd { grid-row: 2; }
  .highlight__no { position: static; grid-column: 1; grid-row: 1 / span 2; align-self: center; padding-right: 0.8rem; }
}
.highlight dt { font-family: var(--font-bold); font-size: 1.1rem; line-height: 1.4; color: #fff; margin: 0 0 0.35rem; }
.highlight dd { margin: 0; color: var(--text-sub); font-size: 0.95rem; }
.section-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
/* 本文中の強調（『』）: 金色のグラデーション文字。text-shadow は透けて濁るので切る。折り返した各行に同じ勾配を掛ける */
.em-gold {
  font-family: var(--font-bold); color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #fff0a0 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section-actions .btn { gap: 0.45em; }

/* ---------- 前回大会の模様（運営配信の埋め込み。トップ） ---------- */
.stream__date { display: inline-flex; align-items: center; gap: 0.4em; margin-left: 1em; color: var(--text-dim); font-size: 0.92rem; white-space: nowrap; }
.stream__date i { color: var(--gold); }
.stream__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.8rem; }
.stream__label { display: inline-flex; align-items: center; gap: 0.6em; margin: 0; color: #fff; font-family: var(--font-bold); }
.stream__day { font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.24em; color: var(--gold); }
/* 16:9 の枠に YouTube の iframe を敷き詰める。角丸は配信のボックスと同じ 24px */
.stream__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-box); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.stream__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- データベース（トップの案内。CONCEPT と STREAM の間） ---------- */
.db-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.db-feats li { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.95rem; font-size: 0.92rem; color: #fff; }
.db-feats i { flex: none; width: 1.6rem; text-align: center; font-size: 1.15rem; color: var(--gold); }
@media (max-width: 760px) { .db-feats { grid-template-columns: 1fr; } }

/* ---------- 書籍販売中（トップ。BOOTH のガイドブック） ---------- */
.book { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 1.4rem 2rem; align-items: start; }
.book__cover { display: block; border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); background: #000; transition: transform 0.4s var(--ease-quint); }
.book__cover:hover { transform: translateY(-3px); }
.book__cover img { display: block; width: 100%; height: auto; }
.book__title { margin: 0 0 0.6rem; font-size: clamp(0.95rem, 1.55vw, 1.12rem); line-height: 1.45; color: #fff; } /* PC では 1 行に収める */
@media (max-width: 640px) { .book__title { font-size: 1.05rem; } }
.book__lead { margin: 0 0 0.8rem; color: var(--text); font-size: 0.98rem; }
.book__specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; margin: 0 0 0.8rem; padding: 0; color: var(--text-sub); font-size: 0.92rem; }
.book__specs li { display: inline-flex; align-items: center; gap: 0.45em; }
.book__specs i { color: var(--gold); }
.book__contents { margin: 0; color: var(--text-sub); font-size: 0.92rem; line-height: 1.7; }
.book__contents strong { color: var(--gold); }
.book__actions { margin-top: 1.2rem; }
@media (max-width: 640px) {
  .book { grid-template-columns: 1fr; }
  .book__cover { width: min(240px, 70%); margin: 0 auto; }
}
@media (max-width: 480px) { .stream__date { display: flex; align-items: flex-start; margin: 0.35rem 0 0; white-space: normal; } .stream__date i { margin-top: 0.3em; } }

/* ---------- チーム背景のガラスパネル（トップの NEXT / CONCEPT / STREAM。重なりは /history/ の .tourney.glass と同じ） ---------- */
.glass--team {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tc-dark) 53%, transparent) 0%, color-mix(in srgb, var(--tc) 27%, transparent) 100%),
    var(--tc-img) center / cover no-repeat,
    rgba(6, 22, 43, 0.35);
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
}
.glass--team-a { --tc: var(--team-a); --tc-dark: var(--team-a-dark); --tc-img: url(/img/team-a.webp); }
.glass--team-b { --tc: var(--team-b); --tc-dark: var(--team-b-dark); --tc-img: url(/img/team-b.webp); }
.glass--team-c { --tc: var(--team-c); --tc-dark: var(--team-c-dark); --tc-img: url(/img/team-c.webp); }
.glass--team-d { --tc: var(--team-d); --tc-dark: var(--team-d-dark); --tc-img: url(/img/team-d.webp); }
.glass--team-e { --tc: var(--team-e); --tc-dark: var(--team-e-dark); --tc-img: url(/img/team-e.webp); }

/* ---------- 次回大会（NEXT。トップのヒーロー直下） ---------- */
/* 募集状況のピル。色は --c で切り替える（募集開始前: 灰青 / 募集中: ナワバリの緑 / 募集終了: 金） */
.next-status {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.25em 0.85em; border-radius: 999px; vertical-align: middle;
  font-family: var(--font-bold); font-size: 0.82rem; color: #fff; white-space: nowrap;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24);
}
.next-status::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.next-status--before { --c: #9fb3c8; }
.next-status--open { --c: var(--rule-nawabari); }
.next-status--closed { --c: var(--gold); }
.next-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; }
.next-block { padding: 1.3rem 1.3rem 1.2rem; }
.next-block__title { display: flex; align-items: center; gap: 0.5em; margin: 0 0 0.6rem; font-size: 1.05rem; color: #fff; }
.next-block__title i { color: var(--gold); }
/* 節目と日付の 2 列。行ごとに細い横線 */
.next-schedule { margin: 0; }
.next-schedule__row { display: grid; grid-template-columns: minmax(10.5em, auto) 1fr; column-gap: 0.8rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.next-schedule__row:first-child { border-top: 0; }
.next-schedule__row dt { color: var(--text-sub); font-size: 0.92rem; }
.next-schedule__row dd { margin: 0; color: #fff; font-family: var(--font-bold); }
.next-schedule time { white-space: nowrap; } /* 折り返すなら日付の間（〜）で */
.next-schedule__row--sub { border-top: 0; padding-top: 0; }
.next-schedule__row--sub dt { padding-left: 1em; font-size: 0.85rem; color: var(--text-dim); }
.next-schedule__row--sub dd { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-sub); }
.next-schedule__row--main dt { color: var(--gold); font-family: var(--font-bold); }
.next-schedule__row--main dd { font-size: 1.05rem; }
/* 募集枠。大きい数字は Martian Mono */
.next-slots { list-style: none; display: grid; gap: 0.9rem; }
.next-slot__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.3rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-family: var(--font-bold); }
.next-slot__num { color: var(--text-sub); font-size: 0.88rem; }
.next-slot__num b { font-family: var(--font-mono); font-size: 1.35rem; color: var(--gold); }
.next-slot__sub { list-style: none; display: grid; gap: 0.2rem; font-size: 0.92rem; color: var(--text-sub); }
.next-slot__sub li { display: flex; justify-content: space-between; gap: 0.6rem; }
.next-slot__sub li span { color: #fff; font-family: var(--font-bold); white-space: nowrap; }
.next-license { margin: 0; color: var(--text-dim); font-size: 0.85rem; } /* 見出し行の直下 */
.next-license i { margin-right: 0.4em; color: var(--gold); }
.next-license .num { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; color: var(--text-sub); }
@media (max-width: 860px) { .next-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .next-schedule__row { grid-template-columns: 1fr; row-gap: 0.15rem; }
  .next-schedule__row--sub dt { padding-left: 0; }
}

/* ---------- オールール杯とは（ガイドブック準拠の各節で使う部品） ---------- */
.lead-p { margin: 0 0 1.2rem; color: var(--text-sub); }
.body-p { margin: 0 0 0.9rem; color: var(--text-sub); font-size: 0.95rem; }
.note-p { margin: 0.8rem 0 0; color: var(--text-dim); font-size: 0.88rem; }
.section-head .note-p { margin-top: 1rem; }
.list { padding-left: 1.3rem; margin: 0 0 0.9rem; color: var(--text-sub); font-size: 0.95rem; }
.list li { margin-bottom: 0.35rem; }
.list strong { color: #fff; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.block { padding: 1.2rem 1.3rem 1.1rem; }
.block__title { display: flex; align-items: center; gap: 0.6em; margin: 0 0 0.6rem; font-size: 1.05rem; color: #fff; }
.block__title .mono { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; }
.chip { padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.86rem; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.18); }
.stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage__name {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 0.55rem 0.4rem; font-size: 0.78rem; font-weight: 700; line-height: 1.2; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
@media (max-width: 600px) {
  .stages { gap: 0.5rem; }
  .stage__name { font-size: 0.72rem; padding: 1.2rem 0.45rem 0.35rem; }
}

/* ブキ・ギア: 背景にアイコンの帯を流す（画像は img/bands/*.webp の横長ストリップ。2x で描き、CSS で半分に） */
.bands { display: grid; gap: 1rem; }
.band { position: relative; overflow: hidden; border-radius: var(--r-box); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2); }
.band__bg { position: absolute; inset: 0; display: grid; align-content: center; gap: 0.5rem; opacity: 0.7; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.band__row { height: 60px; background-repeat: repeat-x; background-size: auto 60px; will-change: background-position; }
.band__row--w1 { background-image: url("/img/bands/weapons-1.webp"); animation: band-slide-w1 150s linear infinite; }
.band__row--w2 { background-image: url("/img/bands/weapons-2.webp"); animation: band-slide-w2 180s linear infinite; }
.band__row--g { background-image: url("/img/bands/gear-powers.webp"); animation: band-slide-g 45s linear infinite; }
/* 1 周 = ストリップ 1 枚ぶん（1 個 = 60px。weapons: 87 個 = 5220px、gear: 27 個 = 1620px）。ぴったり 1 枚ぶん動かすと継ぎ目が出ない */
@keyframes band-slide-w1 { to { background-position-x: -5220px; } }
@keyframes band-slide-w2 { from { background-position-x: -5220px; } to { background-position-x: 0; } }
@keyframes band-slide-g { to { background-position-x: -1620px; } }
.band__body { position: relative; padding: 1.6rem 1.4rem; min-height: 180px; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 0, 0, 0.6);
  background: linear-gradient(90deg, rgba(8, 20, 44, 0.85) 0%, rgba(8, 20, 44, 0.6) 40%, rgba(8, 20, 44, 0) 72%); }
.band__body .block__title { margin-bottom: 0.4rem; }
.band__text { margin: 0; font-size: 1.05rem; color: #fff; }
.band__text strong { color: var(--gold); }
@media (max-width: 600px) { .band__body { min-height: 150px; padding: 1.3rem 1.1rem; } .band__text { font-size: 0.98rem; } }
@media (prefers-reduced-motion: reduce) { .band__row { animation: none; } }

/* 使用ステージ: Day1 / Day2 の帯。名前つきサムネイルを 2 周ぶん並べ、1 周ぶん（-50%）動かして継ぎ目を出さない。載せると止まる */
.stage-bands { display: grid; gap: 1rem; }
.stage-band { padding: 1rem 0 1.1rem; overflow: hidden; background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2); } /* ブキ・ギアの帯（.band）と同じ暗い背景 */
.stage-band .block__title { padding: 0 1.2rem; }
.stage-band__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.stage-band__track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0 0 0 1.2rem; animation: stage-slide 70s linear infinite; will-change: transform; }
.stage-band__track--rev { animation-direction: reverse; animation-duration: 80s; }
.stage-band__viewport:hover .stage-band__track { animation-play-state: paused; }
.stage-band .stage { flex: none; width: 216px; margin-right: 10px; }
@keyframes stage-slide { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .stage-band .stage { width: 168px; margin-right: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .stage-band__track { animation: none; width: auto; overflow-x: auto; padding-right: 1.2rem; }
  .stage-band__track li[aria-hidden] { display: none; }
}

/* 回線落ち: 試合時計の帯（0:00 → 1:00 を境に色が変わる）+ 2 枚のカード */
.dc { --ng: var(--rule-area); --go: var(--team-b); }
.dc__clock { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 44px; margin: 0.4rem 0 1.1rem; padding-top: 0; border-radius: 999px; overflow: visible; }
.dc__seg { display: flex; align-items: center; justify-content: center; gap: 0.45em; font-family: var(--font-bold); font-size: 0.9rem; color: #061a2e; letter-spacing: 0.04em; }
.dc__seg--ng { background: linear-gradient(90deg, rgba(4, 233, 198, 0.75), var(--ng)); border-radius: 999px 0 0 999px; }
.dc__seg--go { background: linear-gradient(90deg, var(--go), rgba(238, 106, 136, 0.55)); border-radius: 0 999px 999px 0; color: #fff; }
.dc__t { position: absolute; z-index: 1; top: 100%; margin-top: 0.3rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; }
.dc__t small { display: inline; margin-left: 0.45em; font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; letter-spacing: 0; color: var(--text-dim); }
.dc__t--start { left: 0.2rem; }
.dc__t--mark { left: 50%; transform: translateX(-50%); padding-top: 0.15rem; }
.dc__t--mark::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 44px; margin-bottom: 0.3rem; background: #fff; transform: translateX(-50%); }
.dc__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2.6rem; }
.dc__card { padding: 1.1rem 1.15rem 1.15rem; border-top: 4px solid var(--c); }
.dc__card--ng { --c: var(--ng); }
.dc__card--go { --c: var(--go); }
.dc__when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.86rem; color: var(--text-sub); }
.dc__tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--c); color: #061a2e; font-family: var(--font-bold); font-size: 0.78rem; letter-spacing: 0.04em; }
.dc__card--go .dc__tag { color: #fff; }
.dc__verdict { display: flex; align-items: center; gap: 0.5em; margin: 0 0 0.4rem; font-family: var(--font-bold); font-size: 1.15rem; color: #fff; }
.dc__verdict i { color: var(--c); font-size: 0.95em; }
.dc__desc { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-sub); }
@media (max-width: 640px) {
  .dc__cards { grid-template-columns: 1fr; margin-top: 2.4rem; }
  .dc__seg { font-size: 0.8rem; }
  .dc__t small { display: none; }
}

/* 総練習タイム: 式（人数 × 分）+ 数える / 数えない + 使いみち */
.pt { --ok: var(--rule-area); --ng: var(--team-b); display: grid; gap: 0.8rem; margin: 0.2rem 0 1rem; }
.pt__formula { padding: 1.1rem 1.2rem 1rem; }
.pt__label { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.25em; color: var(--gold); }
.pt__eq { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.7rem; margin: 0 0 0.8rem; }
.pt__term { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--font-bold); font-size: 1.05rem; color: #fff; }
.pt__term i { color: var(--gold); font-size: 0.95em; }
.pt__term--result { background: rgba(255, 215, 0, 0.16); border-color: rgba(255, 215, 0, 0.5); color: var(--gold); }
.pt__op { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--text-dim); }
.pt__examples { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--text-sub); }
.pt__examples li { display: inline-flex; align-items: center; gap: 0.5em; }
.pt__examples strong { color: #fff; font-family: var(--font-bold); }
.pt__arrow { color: var(--text-dim); }
.pt__cond { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.pt__case { padding: 1rem 1.15rem 1.1rem; border-top: 4px solid var(--c); }
.pt__case--ok { --c: var(--ok); }
.pt__case--ng { --c: var(--ng); }
.pt__icons { display: flex; gap: 0.55rem; margin: 0 0 0.55rem; font-size: 1.35rem; color: var(--c); }
.pt__icons .fa-microphone-slash { color: var(--ng); }
.pt__ghost { color: rgba(255, 255, 255, 0.18) !important; }
.pt__verdict { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.35rem; font-family: var(--font-bold); font-size: 1.1rem; color: #fff; }
.pt__verdict i { color: var(--c); }
.pt__desc { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-sub); }
.pt__desc strong { color: #fff; }
.pt__subhead { margin: 0.6rem 0 -0.1rem; font-size: 1.05rem; }
.pt__uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.pt__uses li { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; font-size: 0.9rem; color: #fff; }
.pt__uses i { flex: none; width: 1.6rem; text-align: center; font-size: 1.1rem; color: var(--gold); }
@media (max-width: 640px) {
  .pt__cond, .pt__uses { grid-template-columns: 1fr; }
  .pt__term { font-size: 0.95rem; padding: 0.35rem 0.75rem; }
}
.scroll-x { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; color: var(--text-sub); }
.tbl th, .tbl td { padding: 0.5rem 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: left; vertical-align: top; }
.tbl tr:first-child th, .tbl tr:first-child td { border-top: 0; }
.tbl th { color: var(--gold); font-family: var(--font-bold); font-weight: 400; white-space: nowrap; }
.tbl--sets td { color: #fff; font-family: var(--font-bold); }
.tbl--sets .vs { margin: 0 0.35em; font-family: var(--font-mono); font-weight: 700; font-size: 0.85em; color: var(--gold); }
.tbl--time td:first-child { color: #fff; font-family: var(--font-mono); white-space: nowrap; }

/* ---------- データベース（/database/。build_database.py が生成） ---------- */
.db-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; }
.db-pill { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px; font-family: var(--font-bold); font-size: 0.86rem; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); }
.db-pill:hover { background: rgba(255, 255, 255, 0.2); }
.db-round__head .section-head__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; color: var(--text); }
.db-date { display: inline-flex; align-items: center; gap: 0.45em; }
.db-date i { color: var(--gold); }
.db-champ { display: inline-flex; align-items: center; gap: 0.4em; }
.db-champ i { color: var(--gold); }
/* チーム記号のチップ（A〜E の色は配信と同じ） */
.tc { display: inline-flex; align-items: center; gap: 0.4em; vertical-align: middle; font-family: var(--font-bold); color: #fff; white-space: nowrap; }
.tc__name { display: inline-block; max-width: 10em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.tc__logo { width: 1.7em; height: 1.7em; flex: none; object-fit: contain; }   /* チームロゴ（Excel のロゴ画像ファイル名。あれば A〜E の代わりに出す） */   /* チーム名は 10 文字までは必ず出し、11 文字以上は … */
.tc__letter { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; color: #061a2e; background: var(--tc, #999); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.tc--a { --tc: var(--team-a); --tc-dark: var(--team-a-dark); } .tc--b { --tc: var(--team-b); --tc-dark: var(--team-b-dark); } .tc--c { --tc: var(--team-c); --tc-dark: var(--team-c-dark); } .tc--d { --tc: var(--team-d); --tc-dark: var(--team-d-dark); } .tc--e { --tc: var(--team-e); --tc-dark: var(--team-e-dark); } .tc--f { --tc: var(--team-f); --tc-dark: var(--team-f-dark); } .tc--g { --tc: var(--team-g); --tc-dark: var(--team-g-dark); } .tc--h { --tc: var(--team-h); --tc-dark: var(--team-h-dark); }   /* ダーク色も持たせる（カウントの棒の波が使う。無いと回のパネルの色を継いでしまう） */
.tc--none { color: var(--text-dim); }
/* ふりがな（ブラウザ標準の ruby）。読みが親文字より長いと親文字の間が空く。09-11 に読みを右へはみ出させる形を試したが
   かっこ悪い（あくさん）ので標準に戻した。読みは親文字全体に付ける前提（部分に付けると間が空く） */
.tc__name ruby { ruby-position: over; }
.tc__name:has(ruby) { padding-top: 0.7em; margin-top: -0.7em; }   /* overflow: hidden で切れないよう、ふりがなのぶん上に余白を取る（位置は負のマージンで戻す） */
.tc__name rt { font-family: var(--font-body); font-weight: 400; font-size: 0.55em; letter-spacing: 0.05em; color: var(--text-sub); }
/* 順位表: ルール別の積み上げ棒（配信の最終順位画面と同じ配色） */
.rb--nawabari { --rc: var(--rule-nawabari); } .rb--area { --rc: var(--rule-area); } .rb--yagura { --rc: var(--rule-yagura); } .rb--hoko { --rc: var(--rule-hoko); } .rb--asari { --rc: var(--rule-asari); }
.rb-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; list-style: none; margin: -0.2rem 0 0.8rem; padding: 0; font-size: 0.8rem; color: var(--text-sub); }
.rb-legend__item { display: inline-flex; align-items: center; gap: 0.35em; }
.rb-legend__sw { width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--rc); }
.ri { display: inline-block; vertical-align: middle; }
.rb { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.rb__row { display: grid; grid-template-columns: 2rem 14.6em minmax(0, 1fr) auto; grid-template-areas: "rank team bar total" ". . . sub"; align-items: center; gap: 0 0.8rem; }   /* チーム名の列は固定（10 文字 + 記号 + 間隔）で、棒の左端を全回で揃える */
/* 総獲得ポイントの数字は棒と同じ行（上下中央が棒と一致）、総練習タイムはその下の行（09-10 あくさん指摘: 2 行の塊で中央揃えだと数字が 6 px 上に見える）。
   .rb__total を display: contents にして b と small を行のグリッドの直接の項目にする（スマホでは元に戻す） */
.rb__rank { grid-area: rank; } .rb__team { grid-area: team; } .rb__bar { grid-area: bar; }
.rb__total { display: contents; }
.rb__total b { grid-area: total; justify-self: end; min-width: 8rem; text-align: right; }
.rb__total small { grid-area: sub; justify-self: end; min-width: 8rem; text-align: right; }
.rb__rank {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; color: #06162b;
  /* メタル風: 上に中心を置いた楕円で明るい面を作り、その下端が下向きの弧になって暗い面に切り替わる */
  background:
    radial-gradient(ellipse 115% 73% at 50% 5%, color-mix(in srgb, var(--rc, #fff) 40%, #fff) 0%, var(--rc, #fff) 62%, transparent 62.6%),   /* 弧の最下点 = 5% + 0.62 × 73% ≈ 50%（上下中央） */
    linear-gradient(180deg, color-mix(in srgb, var(--rc, #fff) 55%, #000) 0%, color-mix(in srgb, var(--rc, #fff) 78%, #000) 100%);
  border: 2px solid color-mix(in srgb, var(--rc, #fff) 70%, #fff);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.6), 0 0 10px color-mix(in srgb, var(--rc, #fff) 45%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.rb__rank--1 { --rc: var(--gold); }
.rb__rank--2 { --rc: #d8dde3; }
.rb__rank--3 { --rc: #d9964f; }
.rb__rank--4, .rb__rank--5, .rb__rank--6, .rb__rank--7, .rb__rank--8 { --rc: #99a0a8; }   /* 09-10 あくさん指摘: #e6e6e6 は 2 位の銀（#d8dde3）と見分けが付かないので暗く落とす */
.rb__team { min-width: 0; }
/* トーナメント方式の回で試合の記録がまだ無いとき: 棒は無く、順位のバッジ + チームだけ。同着は同じ順位の数字 */
.rb--tour .rb__row { grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "rank team"; }   /* 2 クラスにするのは、後ろの @media (max-width: 640px) の .rb__row に上書きされないため */
.gs__round { font-size: 0.85rem; color: var(--gold); }
@media (max-width: 640px) {
  .rb--tour .rb__row { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-areas: "rank team"; }
}
.rb__bar { display: block; min-width: 0; height: 30px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); }
.rb__fill { display: flex; height: 100%; border-radius: 999px; overflow: hidden; will-change: width; }
.rb__seg { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; overflow: hidden; background: var(--rc); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); container-type: inline-size; }
@container (max-width: 26px) { .rb__n, .rb__ico { display: none; } }   /* 細い区間は数字を出さない（title と aria-label で読める） */
.rb__seg.rb--yagura { color: #fff; }
.rb__n { font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem; color: #06162b; padding: 0 0.3em; white-space: nowrap; }
/* 数字とルールアイコンを 5 秒おきにクロスフェード（10 秒で 1 周） */
.rb__n, .rb__ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.rb__n { animation: rb-num 10s ease-in-out infinite; }
.rb__ico { animation: rb-ico 10s ease-in-out infinite; }
.rb__ico .ri { width: 20px; height: 20px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }
@keyframes rb-num { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rb-ico { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rb__n, .rb__ico { animation: none; } .rb__ico { opacity: 0; } }
.rb__seg.rb--yagura .rb__n { color: #fff; }
.rb__total { text-align: right; white-space: nowrap; line-height: 1.15; min-width: 8rem; }
.rb__total b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 1.45rem; color: #fff; }
.rb__total small { display: block; font-size: 0.66rem; color: var(--text-dim); }
/* 試合結果: 1 セット 1 カード、GAME 1〜5 は縦に */
.gs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }   /* 1 列 1 セット */
.gs { padding: 0.9rem 1rem 0.8rem; }
/* ---- /database/ のメモリ対策（2026-09-10。スマホで再ロード・画像欠けの報告）----
   回のパネルは 1 枚 3,900〜8,400 px（スマホ 8,900〜15,300 px）。backdrop-filter と mask-image は要素全体の大きさの
   バッファを要求し、iOS では 7 枚で数百 MB になるので、回のパネルだけ外して同等のグラデーションに置き換える。
   回とセットのカードは content-visibility: auto で、画面に近づくまでレイアウト・描画をしない（画像も読まれない）。
   contain-intrinsic-size は実測値（PC 1280px / スマホ 390px。09-10 に第 14 回の試合詳細を入れて全部を測り直した）。auto を付けると一度描いた高さを覚える */
.db-round { content-visibility: auto; contain-intrinsic-size: auto 4260px; }
.db-round--off { contain-intrinsic-size: auto 220px; }   /* 中止の回（第 11 回）は見出しだけの小さなパネル。見積もりを大きいままにすると近づいたときにスクロールが飛ぶ */
.db-round--off .db-round__head { margin-bottom: 0; }
.db-round--off .section-head__title { margin-bottom: 0; }
.db-round .glass.panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
.db-round .glass.panel::before {
  inset: 0 0 auto 0; height: min(50%, 1200px); -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 15%, rgba(200, 220, 255, 0.02) 55%, transparent 100%);   /* 元の 160deg + 上半分マスクと同じ濃さを縦 1 本にたたんだもの */
}
.gs { content-visibility: auto; contain-intrinsic-size: auto 350px; }
.gs--detail { contain-intrinsic-size: auto 850px; }   /* 試合詳細（カウントの棒 + ブキ）付きのセット */
@media (max-width: 640px) {
  .db-round { contain-intrinsic-size: auto 9150px; }
  .gs { contain-intrinsic-size: auto 820px; }
  .gs--detail { contain-intrinsic-size: auto 1520px; }
}
.gs__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.gs__set { display: flex; align-items: baseline; gap: 0.9em; margin: 0; font-family: var(--font-bold); font-size: 0.95rem; color: #fff; }
.gs__set .db-day { display: inline; font-size: 0.72rem; }
.gs__set b { color: var(--gold); }
.gs__score { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.4rem; margin: 0; }
.gs__side { display: inline-flex; align-items: center; gap: 0.5rem; }
.gs__pt { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--text-dim); margin-left: 0.2rem; }
.gs__pt--win { color: #fff; }
.gs__pt--word { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--gold); }   /* 勝敗しか分からない試合（第 2 回の配信に無い試合）の WIN */
.gs__score .vs { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; color: var(--gold); }   /* PC だけ。スマホは 2 段なので出さない */
.gm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; } /* 中身が長くても枠より広がらない */
.gm { display: grid; grid-template-columns: 3.6rem 1.5rem 9.5rem minmax(0, 1fr) auto;   /* GAME / YouTube / ルール / ステージ / 勝者 */   /* ルールの列を固定幅にして、ステージのサムネイルの位置を全行・全回で揃える */ align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: var(--r-card); background: rgba(0, 0, 0, 0.18); }
.gm__no { font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.15em; color: var(--gold); white-space: nowrap; }
.gm__yt { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 6px; color: #ff3b3b; font-size: 1.05rem; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; }
@media (hover: hover) { .gm__yt:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.1); } }   /* タッチ端末では hover を付けない */
.gm__yt--none { visibility: hidden; }
.gm__rule { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.86rem; color: #fff; white-space: nowrap; }
.gm__stage { display: inline-flex; align-items: center; gap: 0.5em; min-width: 0; font-size: 0.82rem; color: var(--text-sub); }
.gm__stage > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm__thumb { flex: none; width: 56px; height: 31.5px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.2); }
.gm__win { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.gm__winline { display: inline-flex; align-items: center; gap: 0.45em; }
.gm__pts { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; color: var(--gold); }
.gm__pts small { font-family: var(--font-body); font-weight: 400; font-size: 0.6rem; margin-left: 0.15em; color: var(--text-dim); }
.gm__win small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; color: var(--gold); }
.gm--none { grid-template-columns: 3.6rem 1fr; color: var(--text-dim); font-size: 0.82rem; }
.gm--note { grid-template-columns: 1fr; }   /* GAME 番号の無い注記の行（配信に残っていない試合）。.gm--none の後に置いて勝たせる */
/* 試合の詳細: 進めたカウントの棒（左右で色分け）と、チームごとのブキ 4 つ + 塗りポイント */
.gm__detail { grid-column: 1 / -1; min-width: 0; contain: inline-size; margin-top: 0.15rem; padding-top: 0.45rem; border-top: 1px dashed rgba(255, 255, 255, 0.14); } /* 中身の % 幅が行の幅を押し広げないよう、幅の計算から切り離す */

/* カウントの棒（スプラトゥーン 3 のリザルト画面の棒に寄せる。09-10 あくさんの録画（4K）から実測）。
   09-12 に作り直し（あくさん指摘: 手前の濃い側が「波が打ち消し合っている」ように見える）。録画を層ごとに測り直すと:
   ・明るい色は **奥**、濃い色は **手前** の 2 層で、それぞれが自分の波打つ上辺を持つ。見える上辺は 2 つの高い方。
     濃い層の波が明るい層より高い所では明るい色は見えず、低い所だけ明るい色が「山」として顔を出す
     （以前は棒全体の上辺を 1 つの波で切り、水面を半周期ずらしていたので、明るい帯が常に残り「打ち消し合い」に見えた）
   ・濃い層の上辺には尖った谷（2 つの波の重なり）があり、山の進み方が一定でない → 濃い層は 2 つの波の「高い方」で作る。
     明るい層は 09-10 の 1 本の波が形を変えずに左へ流れ、層ごと上下に揺れる（09-12 あくさん）
   ・波長は棒の高さの 5〜8.5 倍、片振幅 0.14〜0.28 倍、左へ 1 波長 2.4〜5.5 秒。濃い層の長い波だけ右へ
   ・濃い色は明るい色の 0.71 倍（変更なし）。左右の色の境目の縦波も変更なし
   作り: 棒（.gm__count）と数字（.gm__cnums）は別の要素。棒の中は 色の 2 層（.gm__layer--bright = 明るい層 /
        --dark = 濃い層）で、各層の中に左右のインク 2 枚（.gm__ink--l / --r）。波の mask は層の包みにかける
        （インクごとにかけると右の波の縁の半透明の画素から左チームの色が透けて動く。09-12 あくさん指摘）。濃い層は mask を 2 枚重ね（mask-composite: add = 高い方）、
        1 波長 = viewBox 100×100（高さ 100 = 棒の高さ）。mask-size と流す距離は --h（棒の高さ）から calc で出すので
        スマホ（24px）でも比率が保たれる。--t1/--t2 が明るい色、--c1/--c2 がダーク色、--w1 = 左の幅（generator が inline で入れる）。
        波の定数は assets/data/tools/wave_sim.py で本家の録画と並べて決めた。動きを減らす設定では止める */
.gm__cwrap { position: relative; height: 30px; --h: 30px; }   /* 順位表の積み上げ棒（.rb__bar）と同じ高さ。変えるときは両方（09-10 あくさん指示） */
.gm__count { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; isolation: isolate; }
.gm__layer, .gm__ink { position: absolute; inset: 0; }
.gm__layer--bright .gm__ink--l { background: var(--t1, var(--tc)); }
.gm__layer--bright .gm__ink--r { background: var(--t2, var(--tc)); }
.gm__layer--dark .gm__ink--l { background: var(--c1, var(--tc-dark)); }
.gm__layer--dark .gm__ink--r { background: var(--c2, var(--tc-dark)); }
.gm__layer--bright {   /* 明るい層（奥）: 09-10 の 1 本の波（中心 0.14H・片振幅 0.14H・波長 7.2H・左へ 1 波長 3.4 秒）が、形を変えずに層ごと上下に揺れる
                        （09-12 あくさん: 本家は波全体が固定長で左に動きながら上下にも動く。録画の明るい層の中心は 1.5 秒周期で ±0.057H = 30px なら ±1.7px） */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,14.09%20q25,-28.18%2050,0%20t50,0%20V100%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,14.09%20q25,-28.18%2050,0%20t50,0%20V100%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: calc(7.2 * var(--h)) 100%; mask-size: calc(7.2 * var(--h)) 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  animation: cbar-bright 3.4s linear infinite, cbar-bob 1.5s ease-in-out infinite; }   /* 左へ流れつつ、層ごと上下に揺れる */
.gm__layer--dark {    /* 濃い層（手前）: 中心 0.30H・片振幅 0.18H・波長 5.0H・左へ 2.4 秒 と 0.45H・0.28H・8.5H・右へ 4.0 秒 の高い方 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,30%20q25,-36%2050,0%20t50,0%20V100%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,45%20q25,-56%2050,0%20t50,0%20V100%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,30%20q25,-36%2050,0%20t50,0%20V100%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,45%20q25,-56%2050,0%20t50,0%20V100%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: calc(5.0 * var(--h)) 100%, calc(8.5 * var(--h)) 100%; mask-size: calc(5.0 * var(--h)) 100%, calc(8.5 * var(--h)) 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-composite: source-over; mask-composite: add;
  animation: cbar-dark 12s linear infinite; }
/* 左右の色の境目も縦に波打つ（09-10 あくさん指摘）。右の色を境目の波で切り抜いて左の色に重ねる。
   mask ではなく clip-path を使う: mask-position の % は「要素幅 − 画像幅」を基準にするので境目の位置とわずかにずれ、
   境目に細い筋が出てしまう。clip-path の % は要素の幅そのものが基準なのでずれない。
   波は縦に 8 分割した多角形で、位相を 8 段階ずらしたキーフレームで上へ流す（片振幅 1.84px = 棒の高さの 6.1 %、1 周 1.05 秒） */
.gm__ink--r { clip-path: polygon(calc(var(--w1, 50%) + 0.00px) 0.000%, calc(var(--w1, 50%) + 1.30px) 12.500%, calc(var(--w1, 50%) + 1.84px) 25.000%, calc(var(--w1, 50%) + 1.30px) 37.500%, calc(var(--w1, 50%) + 0.00px) 50.000%, calc(var(--w1, 50%) + -1.30px) 62.500%, calc(var(--w1, 50%) + -1.84px) 75.000%, calc(var(--w1, 50%) + -1.30px) 87.500%, calc(var(--w1, 50%) + -0.00px) 100.000%, 100% 100%, 100% 0%); animation: cbar-seam 1.05s linear infinite; }
.gm__ink--full { clip-path: none; animation: none; }   /* ノックアウトで片側だけのときは境目が無い */
@keyframes cbar-seam {
  0.000% { clip-path: polygon(calc(var(--w1, 50%) + 0.00px) 0.000%, calc(var(--w1, 50%) + 1.30px) 12.500%, calc(var(--w1, 50%) + 1.84px) 25.000%, calc(var(--w1, 50%) + 1.30px) 37.500%, calc(var(--w1, 50%) + 0.00px) 50.000%, calc(var(--w1, 50%) + -1.30px) 62.500%, calc(var(--w1, 50%) + -1.84px) 75.000%, calc(var(--w1, 50%) + -1.30px) 87.500%, calc(var(--w1, 50%) + -0.00px) 100.000%, 100% 100%, 100% 0%); }
  12.500% { clip-path: polygon(calc(var(--w1, 50%) + -1.30px) 0.000%, calc(var(--w1, 50%) + 0.00px) 12.500%, calc(var(--w1, 50%) + 1.30px) 25.000%, calc(var(--w1, 50%) + 1.84px) 37.500%, calc(var(--w1, 50%) + 1.30px) 50.000%, calc(var(--w1, 50%) + 0.00px) 62.500%, calc(var(--w1, 50%) + -1.30px) 75.000%, calc(var(--w1, 50%) + -1.84px) 87.500%, calc(var(--w1, 50%) + -1.30px) 100.000%, 100% 100%, 100% 0%); }
  25.000% { clip-path: polygon(calc(var(--w1, 50%) + -1.84px) 0.000%, calc(var(--w1, 50%) + -1.30px) 12.500%, calc(var(--w1, 50%) + 0.00px) 25.000%, calc(var(--w1, 50%) + 1.30px) 37.500%, calc(var(--w1, 50%) + 1.84px) 50.000%, calc(var(--w1, 50%) + 1.30px) 62.500%, calc(var(--w1, 50%) + 0.00px) 75.000%, calc(var(--w1, 50%) + -1.30px) 87.500%, calc(var(--w1, 50%) + -1.84px) 100.000%, 100% 100%, 100% 0%); }
  37.500% { clip-path: polygon(calc(var(--w1, 50%) + -1.30px) 0.000%, calc(var(--w1, 50%) + -1.84px) 12.500%, calc(var(--w1, 50%) + -1.30px) 25.000%, calc(var(--w1, 50%) + 0.00px) 37.500%, calc(var(--w1, 50%) + 1.30px) 50.000%, calc(var(--w1, 50%) + 1.84px) 62.500%, calc(var(--w1, 50%) + 1.30px) 75.000%, calc(var(--w1, 50%) + 0.00px) 87.500%, calc(var(--w1, 50%) + -1.30px) 100.000%, 100% 100%, 100% 0%); }
  50.000% { clip-path: polygon(calc(var(--w1, 50%) + -0.00px) 0.000%, calc(var(--w1, 50%) + -1.30px) 12.500%, calc(var(--w1, 50%) + -1.84px) 25.000%, calc(var(--w1, 50%) + -1.30px) 37.500%, calc(var(--w1, 50%) + 0.00px) 50.000%, calc(var(--w1, 50%) + 1.30px) 62.500%, calc(var(--w1, 50%) + 1.84px) 75.000%, calc(var(--w1, 50%) + 1.30px) 87.500%, calc(var(--w1, 50%) + 0.00px) 100.000%, 100% 100%, 100% 0%); }
  62.500% { clip-path: polygon(calc(var(--w1, 50%) + 1.30px) 0.000%, calc(var(--w1, 50%) + -0.00px) 12.500%, calc(var(--w1, 50%) + -1.30px) 25.000%, calc(var(--w1, 50%) + -1.84px) 37.500%, calc(var(--w1, 50%) + -1.30px) 50.000%, calc(var(--w1, 50%) + 0.00px) 62.500%, calc(var(--w1, 50%) + 1.30px) 75.000%, calc(var(--w1, 50%) + 1.84px) 87.500%, calc(var(--w1, 50%) + 1.30px) 100.000%, 100% 100%, 100% 0%); }
  75.000% { clip-path: polygon(calc(var(--w1, 50%) + 1.84px) 0.000%, calc(var(--w1, 50%) + 1.30px) 12.500%, calc(var(--w1, 50%) + -0.00px) 25.000%, calc(var(--w1, 50%) + -1.30px) 37.500%, calc(var(--w1, 50%) + -1.84px) 50.000%, calc(var(--w1, 50%) + -1.30px) 62.500%, calc(var(--w1, 50%) + 0.00px) 75.000%, calc(var(--w1, 50%) + 1.30px) 87.500%, calc(var(--w1, 50%) + 1.84px) 100.000%, 100% 100%, 100% 0%); }
  87.500% { clip-path: polygon(calc(var(--w1, 50%) + 1.30px) 0.000%, calc(var(--w1, 50%) + 1.84px) 12.500%, calc(var(--w1, 50%) + 1.30px) 25.000%, calc(var(--w1, 50%) + -0.00px) 37.500%, calc(var(--w1, 50%) + -1.30px) 50.000%, calc(var(--w1, 50%) + -1.84px) 62.500%, calc(var(--w1, 50%) + -1.30px) 75.000%, calc(var(--w1, 50%) + 0.00px) 87.500%, calc(var(--w1, 50%) + 1.30px) 100.000%, 100% 100%, 100% 0%); }
  100.000% { clip-path: polygon(calc(var(--w1, 50%) + 0.00px) 0.000%, calc(var(--w1, 50%) + 1.30px) 12.500%, calc(var(--w1, 50%) + 1.84px) 25.000%, calc(var(--w1, 50%) + 1.30px) 37.500%, calc(var(--w1, 50%) + -0.00px) 50.000%, calc(var(--w1, 50%) + -1.30px) 62.500%, calc(var(--w1, 50%) + -1.84px) 75.000%, calc(var(--w1, 50%) + -1.30px) 87.500%, calc(var(--w1, 50%) + 0.00px) 100.000%, 100% 100%, 100% 0%); }
}
@keyframes cbar-bright { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: calc(-7.2 * var(--h)) 0; mask-position: calc(-7.2 * var(--h)) 0; } }
@keyframes cbar-bob { 0%, 100% { transform: translateY(calc(0.057 * var(--h))); } 50% { transform: translateY(calc(-0.057 * var(--h))); } }   /* 上下の揺れ。ease-in-out で正弦に近づける。下がった分は濃い層が隠す */
@keyframes cbar-dark { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: calc(-25.0 * var(--h)) 0, calc(25.5 * var(--h)) 0; mask-position: calc(-25.0 * var(--h)) 0, calc(25.5 * var(--h)) 0; } }
@media (prefers-reduced-motion: reduce) { .gm__layer, .gm__ink--r { animation: none; } }

/* 数字。棒の外に置くので mask に切られない。左右それぞれの棒の幅を持たせて、細いときの縮小（下の @container）を効かせる */
.gm__cnums { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; box-sizing: border-box; min-width: 0; overflow: hidden; container-type: inline-size;
  font-family: "Martian Mono", "新ゴ R", var(--font-fallback); font-weight: 700; font-size: 0.7rem; color: #06162b; white-space: nowrap; }   /* 英数字は Martian Mono、無い字（日本語）だけ新ゴ R に落ちる */
.gm__cnums--l { left: 0; width: var(--w1, 50%); justify-content: flex-start; padding-left: 0.6em; }
.gm__cnums--r { left: var(--w1, 50%); right: 0; justify-content: flex-end; padding-right: 0.6em; }
/* 数字と単位（「カウント」）。棒が細いときは単位だけを縮め、それでも入らなければ単位を消して数字を残す
   （09-10 あくさん指摘: スマホで極端な差になると細い側の数字が見切れていた。棒ごとの幅で切り替えるので @container） */
.gm__cu { font-size: 1em; margin-left: 0.45em; }   /* small の既定の縮小は打ち消す（広いときは従来どおりの大きさ） */
@container (max-width: 84px) { .gm__cu { font-size: 0.7em; margin-left: 0.3em; } }
@container (max-width: 64px) { .gm__cu { display: none; } .gm__cnums--l { padding-left: 0.45em; } .gm__cnums--r { padding-right: 0.45em; } }
@container (max-width: 32px) { .gm__cnums--r { justify-content: flex-start; padding: 0 0 0 0.3em; } .gm__cnums--l { padding-left: 0.3em; } }   /* 数字も入らないほど細いときの保険。右は右揃えのままだと数字の頭から切れる */
.gm__teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.4rem; }
.gm__side { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.gm__side--r { flex-direction: row-reverse; }
.gm__ws { display: flex; gap: 0.35rem; min-width: 0; }
.gm__w { position: relative; display: flex; flex-direction: column; align-items: center; width: 44px; }
.gm__w img { width: 40px; height: 40px; display: block; }
.gm__paint { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-sub); white-space: nowrap; }
.gm__paint small { font-size: 0.55rem; margin-left: 0.1em; }
.gm__unsure { position: absolute; top: -2px; right: 0; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 999px; background: var(--gold); color: #06162b; font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem; }
@media (max-width: 640px) {
  .rb__row { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-areas: "rank team" "rank total" "bar bar"; gap: 0.15rem 0.5rem; }
  .rb__rank { grid-area: rank; align-self: center; } .rb__team { grid-area: team; } .rb__bar { grid-area: bar; height: 24px; margin-top: 0.25rem; } .gm__cwrap { height: 24px; --h: 24px; }   /* カウントの棒も順位表の棒と同じ高さに。波長・流す距離は --h から出る */ .rb__total { display: block; grid-area: total; text-align: right; min-width: 0; }   /* 2 段目（総獲得ポイント + 総練習タイム）は右揃え。PC の display: contents を戻す */
  .rb__total b { font-size: 1.15rem; display: inline; margin-right: 0.5em; min-width: 0; } .rb__total small { display: inline; min-width: 0; }
  .rb__n { font-size: 0.66rem; }
  .gm { grid-template-columns: 3.9rem minmax(0, 1fr); grid-template-areas: "no rule" "no stage" "no win"; gap: 0.2rem 0.5rem; }
  /* 左の列: GAME n と YouTube を 1 組として、ルール・ステージ・勝者の 3 行に対して上下中央（GAME が少し上、YouTube がその下） */
  .gm__no { grid-area: no; align-self: center; justify-self: center; margin-bottom: 1.7rem; }   /* 中央揃えの margin で上下にずらす（transform だと hover の scale に上書きされてタップで跳ねる） */
  .gm__yt { grid-area: no; align-self: center; justify-self: center; margin-top: 1.7rem; }
  .gm__yt--none { display: none; }
  .gm__win { white-space: normal; flex-wrap: wrap; row-gap: 0.1rem; }
  .gm__winline { flex-basis: 100%; }   /* WIN と pt はチーム名の次の行に */
  .gm__no { grid-area: no; } .gm__rule { grid-area: rule; } .gm__stage { grid-area: stage; } .gm__win { grid-area: win; }
  .gm__thumb { width: 44px; height: 24.75px; }
  .gm__teams { grid-template-columns: 1fr; gap: 0.3rem; }   /* スマホは 2 チームを縦に */
  .gm__side--r { flex-direction: row; }
  .gs__score { flex-direction: column; align-items: flex-start; gap: 0.25rem; }   /* スマホはチーム名を 2 段に */
  .gs__score .vs { display: none; }
  .gs__side--r { flex-direction: row; }
}
.subhead + .list, .subhead + .body-p { margin-top: 0; }

/* ---------- ルールのチップ（配信のルール色） ---------- */
.rule-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin-top: 1.5rem; }
.rule-chip {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.4rem 0.95rem 0.4rem 0.7rem; border-radius: 999px;
  font-family: var(--font-bold); font-size: 0.9rem; color: #fff; text-shadow: var(--text-shadow);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.rule-chip::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 10px var(--c, #fff); }
.rule-chip--nawabari { --c: var(--rule-nawabari); }
.rule-chip--area { --c: var(--rule-area); }
.rule-chip--yagura { --c: var(--rule-yagura); }
.rule-chip--hoko { --c: var(--rule-hoko); }
.rule-chip--asari { --c: var(--rule-asari); }

.notice { margin-top: 1.6rem; padding: 0.9rem 1.2rem; border-left: 4px solid var(--gold); border-radius: 0 var(--r-card) var(--r-card) 0; background: rgba(0, 0, 0, 0.18); font-size: 0.92rem; color: var(--text-sub); }

/* ---------- 1 セットの流れ ---------- */
.game-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; list-style: none; margin-bottom: 1.6rem; }
.game-flow__item { position: relative; padding: 1rem 0.85rem; text-align: center; display: flex; flex-direction: column; }
.game-flow__item:not(:last-child)::after { content: "›"; position: absolute; right: -0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 1.2rem; line-height: 1; }
.game-flow__no { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--gold); }
.game-flow__rule { display: block; margin: 0.3rem 0 0.4rem; font-family: var(--font-bold); font-size: 0.98rem; line-height: 1.35; color: #fff; }
.game-flow__desc { display: block; font-size: 0.78rem; line-height: 1.5; color: var(--text-sub); }
.game-flow__sep { display: block; height: 0; overflow: hidden; }
/* 各試合の下に、対象ルールのアイコン（GAME 1〜4 はガチ 4 種、GAME 5 はナワバリ） */
.game-flow__rules { display: flex; justify-content: center; align-items: flex-end; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; } /* 枠の下端に揃える */
.game-flow__rules img { width: 28px; height: 28px; display: block; }
/* GAME 1〜4（ガチ）は同じグラデーション。GAME 5（ナワバリ）は薄い黄緑。文字はどちらも金 + 白 */
.game-flow__item--gachi { background: linear-gradient(135deg, rgba(4, 233, 198, 0.22), rgba(109, 53, 196, 0.22) 50%, rgba(223, 191, 0, 0.18)); }
.game-flow__item--turf { background: rgba(200, 245, 31, 0.2); border-color: rgba(200, 245, 31, 0.45); }

@media (max-width: 860px) {
  .game-flow { grid-template-columns: 1fr; }
  .game-flow__item { text-align: left; display: grid; grid-template-columns: 4.8rem 1fr; column-gap: 0.8rem; align-items: center; }
  .game-flow__no { grid-row: 1 / span 2; align-self: center; }
  .game-flow__rule { margin: 0; }
  .game-flow__sep { display: inline; height: auto; overflow: visible; }
  .game-flow__item:not(:last-child)::after { content: none; }
  .game-flow__rules { grid-column: 2; justify-content: flex-start; margin-top: 0.4rem; }
}

/* ---------- ポイント ---------- */
/* 3 段の積み上げ: 下（LAYER 1 = WP）が土台、その上に AP、さらに上に BP / CP / DP。下の段ほど幅を広げて積み上がって見せる */
.points-stack { display: grid; gap: 0.6rem; }
.points-tier { display: grid; grid-template-columns: 4.6rem 1fr; column-gap: 0.7rem; align-items: center; }
.points-tier__label { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--gold); text-align: right; }
/* 各段の帯の中に「バッジ + 名前 + 説明」（.point）を収める。LAYER 3 は BP・DP の 2 枚。札（全ルール / *条件により発動）は名前の行の右端 */
.points-tier__bar { display: grid; gap: 0.6rem; }
.points-tier__bar--2 { grid-template-columns: 1fr; } /* LAYER 3 の BP・DP は上下に並べる（09-09 あくさん指示） */
.points-tier__bar .point__code { grid-row: 1 / span 2; }
.point__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.8rem; }
.points-tier__tag { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-dim); white-space: nowrap; }
.points-tier__tag img { width: 18px; height: 18px; } /* ルールのアイコン */
.points-tier--4 .points-tier__bar { width: 88%; margin-inline: auto; }
.points-tier--3 .points-tier__bar { width: 92%; margin-inline: auto; }
.points-tier--2 .points-tier__bar { width: 96%; margin-inline: auto; }
@media (max-width: 760px) {
  .points-tier { grid-template-columns: 1fr; row-gap: 0.3rem; }
  .points-tier__label { text-align: left; }
  .points-tier--4 .points-tier__bar, .points-tier--3 .points-tier__bar, .points-tier--2 .points-tier__bar { width: 100%; }
  /* BP・DP のタグはアイコン 4 つで 182px。body が overflow-x: hidden なので幅 320px では右端ちょうどで切れかける（実測）。16px・gap 0.25em の 168px にして 14px 余らせる */
  .points-tier__tag { gap: 0.25em; }
  .points-tier__tag img { width: 16px; height: 16px; }
}
.point { display: grid; grid-template-columns: 4rem 1fr; column-gap: 1rem; row-gap: 0.15rem; padding: 1.25rem 1.25rem; }
.point__code {
  grid-row: 1 / span 2; align-self: start;
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--r-card); margin: 0;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--sea-container); text-shadow: none;
  background: var(--c, #fff); box-shadow: 0 0 18px color-mix(in srgb, var(--c, #fff) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.point__code--wp { --c: #fff; }
.point__code--ap { --c: var(--rule-area); }
.point__code--bp { --c: var(--gold); }
.point__code--cp { --c: var(--rule-nawabari); }
.point__code--dp { --c: var(--rule-yagura); color: #fff; text-shadow: var(--text-shadow); }
.point__name { font-size: 1.05rem; line-height: 1.35; margin: 0; color: #fff; }
.point__name small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text-dim); }
.point p:not(.point__code) { font-size: 0.95rem; color: var(--text-sub); }
.point strong { color: #fff; }

/* ---------- タイムライン（印はチーム A〜E の色） ---------- */
.timeline { --axis: 10rem; --dot: 0.9rem; list-style: none; position: relative; margin: 0; padding: 0; }
/* 縦線: 時期の軸と本文の間 */
.timeline::before { content: ""; position: absolute; left: calc(var(--axis) + 1rem + var(--dot) / 2 - 1px); top: 0.7rem; bottom: 1.2rem; width: 2px; background: rgba(255, 255, 255, 0.18); }
.timeline__item { position: relative; display: grid; grid-template-columns: var(--axis) 1fr; column-gap: 2rem; padding: 0 0 1.5rem; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(var(--axis) + 1rem); top: 0.45rem; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 14px var(--c);
}
.timeline__item:nth-child(1) { --c: var(--team-a); }
.timeline__item:nth-child(2) { --c: var(--team-b); }
.timeline__item:nth-child(3) { --c: var(--team-c); }
.timeline__item:nth-child(4) { --c: var(--team-d); }
.timeline__item:nth-child(5) { --c: var(--team-e); }
.timeline__item:nth-child(6) { --c: var(--gold); }
.timeline__when { margin: 0; padding-top: 0.3rem; text-align: right; font-family: var(--font-bold); font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1.4; color: var(--gold); white-space: nowrap; }
.timeline__body { min-width: 0; padding-left: calc(var(--dot) + 1.4rem); }
.timeline__step { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.25em; color: var(--gold); margin: 0 0 0.1rem; }
.timeline__title { font-size: 1.15rem; margin: 0 0 0.35rem; line-height: 1.4; color: #fff; }
.timeline__item p:not(.timeline__step):not(.timeline__when) { color: var(--text-sub); font-size: 0.96rem; }
/* STEP 5 本戦は金色のカードで強調 */
.timeline__card { padding: 1rem 1.15rem 1.05rem; border-radius: var(--r-card); border: 1px solid rgba(255, 215, 0, 0.55); background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(240, 180, 0, 0.1) 60%, rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25); }
.timeline__card .timeline__title { font-size: 1.3rem; color: var(--gold); }
.timeline__card p:not(.timeline__step) { color: #fff !important; }
@media (max-width: 640px) {
  .timeline { --axis: 0rem; }
  .timeline::before { left: calc(var(--dot) / 2 - 1px + 0.2rem); }
  .timeline__item { grid-template-columns: 1fr; row-gap: 0.15rem; }
  .timeline__item::before { left: 0.2rem; top: 1.65rem; }
  .timeline__when { text-align: left; padding: 0 0 0 calc(var(--dot) + 1.4rem); font-size: 0.66rem; }
  .timeline__body { padding-left: calc(var(--dot) + 1.4rem); }
}
.timeline__sub { margin-top: 0.45rem; padding: 0.7rem 0.9rem; border-radius: var(--r-card); background: rgba(0, 0, 0, 0.18); font-size: 0.9rem !important; }

/* ---------- これまでの大会（大会ごとのカード + 運営配信のサムネイル） ---------- */
.section-head__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
/* 見出しの横にピルなどを並べる行。狭い幅では見出しの下に回り込む */
.section-head__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-bottom: 0.8rem; }
.section-head__title-row .section-head__title { margin-bottom: 0; }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.88rem; gap: 0.45em; }
.btn--sm i { font-size: 1em; }
.subhead { font-size: 1.15rem; margin: 2rem 0 0.9rem; color: #fff; }
.subhead--top { margin-top: 0; }
.glass.panel > .section-head:last-child { margin-bottom: 0; } /* 見出しだけのパネルの余白 */
/* 1 大会 = 1 パネル。背景は配信のチームカラー A〜E を上から順に繰り返す
   （配信の順位表と同じ linear-gradient(135deg, dark 53% → primary 27%)） */
.tourneys { display: grid; gap: 1rem; margin: 1rem 0; }
.tourney { padding: 1.2rem clamp(1.2rem, 3.5vw, 2.8rem) 1.25rem; --glass-blur: 14px; } /* 左右は見出しパネル（.panel）と同じ余白で、文字の左端を揃える */
/* 背景画像は配信の img/background/<team>.webp（不透明度 0.35 を画像側に焼き込んだ Web 版）。
   重なりは配信と同じ: ガラス → 背景画像 → チームカラーのグラデーション → 内容 */
.tourney.glass {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tc-dark) 53%, transparent) 0%, color-mix(in srgb, var(--tc) 27%, transparent) 100%),
    var(--tc-img) center / cover no-repeat,
    rgba(6, 22, 43, 0.35);
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
}
.tourney:nth-child(5n+1) { --tc: var(--team-a); --tc-dark: var(--team-a-dark); --tc-img: url(/img/team-a.webp); }
.tourney:nth-child(5n+2) { --tc: var(--team-b); --tc-dark: var(--team-b-dark); --tc-img: url(/img/team-b.webp); }
.tourney:nth-child(5n+3) { --tc: var(--team-c); --tc-dark: var(--team-c-dark); --tc-img: url(/img/team-c.webp); }
.tourney:nth-child(5n+4) { --tc: var(--team-d); --tc-dark: var(--team-d-dark); --tc-img: url(/img/team-d.webp); }
.tourney:nth-child(5n+5) { --tc: var(--team-e); --tc-dark: var(--team-e-dark); --tc-img: url(/img/team-e.webp); }
.tourney__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.1rem; }
.tourney__no { margin: 0; font-size: 1.25rem; line-height: 1.3; color: #fff; }
.tourney__no small { font-family: var(--font-body); font-size: 0.8rem; color: var(--gold); margin-left: 0.4em; }
.tourney__badge { display: inline-block; margin-left: 0.5em; padding: 0.1em 0.55em; border-radius: 999px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; background: var(--gold); color: var(--sea-container); text-shadow: none; vertical-align: middle; }
.tourney__date { margin: 0; color: var(--text); font-size: 0.95rem; }
.tourney__date i { margin-right: 0.4em; color: var(--gold); }
.tourney__license { margin: 0; width: 100%; color: var(--text-dim); font-size: 0.8rem; }
.tourney__note { margin: 0.7rem 0 0; color: var(--text-sub); font-size: 0.9rem; } /* 動画が無い回の注記（第 1 回: サーバー内限定公開） */
.tourney__note i { margin-right: 0.45em; color: var(--gold); }
.tourney__license i { margin-right: 0.4em; color: var(--gold); }
.tourney__license .num { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; color: var(--text-sub); }
.tourney__badge--off { background: rgba(255, 255, 255, 0.22); color: #fff; text-shadow: var(--text-shadow); }
.tourney__media { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; margin-top: 0.9rem; }
.tourney__links { margin: 0.9rem 0 0; }
/* YouTube のサムネイル（hqdefault は 4:3 なので 16:9 に切り抜く） */
.yt { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.18); text-decoration: none; }
.yt img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-quint); }
.yt:hover img { transform: scale(1.05); }
.yt__play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.2rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); transition: background-color 0.3s ease;
}
.yt:hover .yt__play { color: #ff3b3b; }
.yt__label { position: absolute; left: 0.65rem; bottom: 0.5rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }

/* ---------- フッター ---------- */
.site-footer { padding: 0 0 2rem; font-size: 0.9rem; color: var(--text-sub); }
.site-footer__inner { display: grid; gap: 1rem; padding: 1.6rem clamp(1.2rem, 3.5vw, 2.4rem) 1.5rem; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__brand { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.site-footer__logo { height: 44px; width: auto; }
.site-footer__name { display: inline-flex; align-items: center; margin: 0; font-family: var(--font-bold); font-size: 1.05rem; letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
/* ロゴとの区切り線（文字ではなく CSS で描く） */
.site-footer__name::before { content: ""; width: 1px; height: 1.6em; margin-right: 0.75em; background: rgba(255, 255, 255, 0.35); }
/* 公式サイト・X・YouTube の丸いガラスボタン */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social__link {
  display: inline-flex; align-items: center; gap: 0.55em; height: 44px; padding: 0 1.05rem 0 0.9rem; border-radius: 999px;
  color: #fff; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0; text-decoration: none; white-space: nowrap; /* 配信の英字フォント（Martian Mono） */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: transform 0.25s var(--ease-quint), background-color 0.25s ease;
}
.social__link i { font-size: 1.15rem; }
.social__link:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12)); }
.site-footer__legal, .site-footer__copy { font-size: 0.8rem; color: var(--text-dim); margin: 0; }
.site-footer__copy { text-align: center; }
@media (max-width: 480px) {
  /* スマホではロゴと「オールール杯」を中央揃えに */
  .site-footer__brand { width: 100%; justify-content: center; }
  /* SNS の 3 つを 1 行に（430px 幅で使える幅 約 360px に収める） */
  .social { gap: 0.45rem; }
  .social__link { height: 38px; padding: 0 0.7rem 0 0.62rem; gap: 0.42em; font-size: 0.7rem; }
  .social__link i { font-size: 0.98rem; }
}
@media (max-width: 400px) {
  /* 390px 幅（iPhone 14 / 15）でも 1 行に。使える幅 約 320px */
  .social { gap: 0.35rem; }
  .social__link { height: 36px; padding: 0 0.58rem 0 0.52rem; gap: 0.36em; font-size: 0.64rem; }
  .social__link i { font-size: 0.9rem; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .site-nav a, .site-nav, .site-nav > ul { transition: none; }
}

/* backdrop-filter 非対応ブラウザでは不透明度を上げて読みやすくする */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(180deg, rgba(20, 40, 70, 0.92), rgba(10, 24, 46, 0.94)); }
}