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

/* ══ デザイントークン（色・フォント・形・動き）══════════════════════════════════
   ⚠️ 色や形を変えるときはここだけを書き換える。:root はこのファイルにこの1か所だけ（2026-10-31 整理）。
   --gen（最新世代のロール色）は nav.js の genStyle() がページごとに上書きする */

:root {
  /* 面と線 */
  --bg: #05060a;
  --surface: #0b0d15;
  --surface2: #121522;
  --surface3: #1a1e2e;
  --border: #191d2b;
  --border2: #2a3044;
  /* 文字 */
  --text: #eceef5;
  --muted: #7d8399;
  --muted2: #a4aabe;
  --accent: #ffffff;
  /* ブランド色（インディゴ）と世代色 */
  --brand: #6c7cf0;
  --brand-hi: #9aa5ff;
  --brand-lo: color-mix(in srgb, var(--brand) 14%, transparent);
  --gen: #4cadd0;
  --gen-lo: color-mix(in srgb, var(--gen) 16%, transparent);
  /* 順位・好き嫌い */
  --gold: #d4b35a;
  --silver: #9ba8bb;
  --bronze: #b0845c;
  --like: #ff5c8a;
  --dislike: #4f8cff;
  /* フォント */
  --font: 'Noto Sans JP', 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Chakra Petch', 'Rajdhani', 'Arial Narrow', sans-serif;
  --disp: var(--display);
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  /* 形: 斜めの角度と、アングルカットの切り抜き */
  --skew: -12deg;
  --para: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --para-s: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  --panel: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  /* 動き */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --dur-fast: 0.18s;
  --dur: 0.35s;
  --dur-slow: 0.7s;
  /* カジノ（結果画像 features/casinoImage.js と同じ黒フェルト＋銀。差し色は赤だけ） */
  --csn-bg: #0b0b0c;
  --csn-felt: #131415;
  --csn-felt-line: #2a2b2d;
  --csn-silver: #b9b9b9;
  --csn-silver-dim: #77787a;
  --csn-silver-dark: #3c3d3f;
  --csn-white: #f3f1ec;
  --csn-ink: #111111;
  --csn-red: #a8182b;
  --csn-didot: 'GFS Didot', 'Noto Serif JP', serif;
  --csn-serif: 'Noto Serif JP', serif;
  --csn-num: 'Nunito Sans', 'Noto Sans JP', sans-serif;
}
body {
  color: var(--text);
}
/* ── ベース背景: 「ロメダ」＝アンドロメダらしく、星空をモチーフにする。
   グロウ/ぼかしは使わず、フラットな点(星)がそれぞれ独立して明滅するだけ。
   コンテナ自体はoverflow:hiddenにしない（端に近い星が誤って切り取られるのを防ぐ） */
.bg-stars {
  position: fixed;
  pointer-events: none;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.streak {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: starTwinkle var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes starTwinkle {
  0%, 100% { opacity: var(--op-a, 0.15); }
  50%      { opacity: var(--op-b, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .star, .streak { animation: none; opacity: var(--op-b, 0.5); }
}

/* ── HEADER ── */
/* 2段構成: 1段目=ロゴ・更新時刻・アカウント、2段目=ナビ全幅。
   ナビ項目が15個に増え、1400px幅でもロゴ横の1段に収まらず中途半端な2行に折り返して
   アクティブ下線がヘッダー中段に浮いていたため、ナビを専用の行に分けた（2026-09-27） */
#header {
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* ブランドロゴ: サーバーアイコン + 分厚いゴシック体のワードマーク（PLAYBOYのロゴを意識した
   極太・ベタ塗りの見た目）。2000年代の「スーパーフラット」を意識し、グラデーション/立体感は
   使わずベタ塗りの原色リングだけをモーショングラフィックスとして添える */
#brand {
  display: flex;
  align-items: center;
}
#guild-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: block;
}
#guild-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s;
}
#guild-icon[src]:not([src=""]) { opacity: 1; }

#header :is(h1, .brand-name) {
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  display: flex;
  align-items: center;
}
/* 左右に-40pxはみ出させて区切り線をヘッダー全幅に通しつつ、padding(40-16)で
   先頭項目の文字位置をロゴの左端に揃える。入り切らない幅では折り返さず横スクロール */
#nav {
  flex: 0 0 calc(100% + 80px);
  margin: 0 -40px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  position: relative;
}
#nav::-webkit-scrollbar { display: none; }
#nav a {
  background: none;
  border: none;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
#nav a.active { border-bottom-color: var(--brand); }
/* タブ切替時にアクティブなボタンの下へスライド移動するインジケータ。
   border-bottom-colorの瞬時切替と重ねて表示することで、JS実行前でも見た目が破綻しない
   （2026-08-19、Persona系の勢いのある切替演出として追加。app.jsのpositionNavIndicator()が動かす） */

/* ── アカウントチップ（右上固定。ログイン中はアイコン+名前を常時表示） ──
   2026-08-19追加。マイページの入口をナビのボタン1つから「常に見える自分の存在感」に格上げする */
/* #header は align-items:stretch なので、#account-chip自体を明示的にflex+中央寄せに
   しないと中のピル(.chip-user/.chip-login-btn)が縦の全高ボックスの上端に張り付いて
   位置がずれて見える（2026-08-19、「位置がずれてておかしい」との指摘で修正） */
#account-chip { flex-shrink: 0; display: flex; align-items: center; }
.chip-skeleton {
  display: block; width: 92px; height: 34px;
}
.chip-login-btn {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border2);
  font-size: 0.78rem; font-weight: 600;
  padding: 8px 16px; border-radius: 20px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chip-user {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 5px 14px 5px 5px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.chip-user:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface2)); transform: translateY(-1px); }
.chip-user img {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand);
}
.chip-user span {
  font-family: var(--display);
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── ガチャ装備反映についての案内 ── */
#deco-note {
  margin: 18px auto 0;
  padding: 0 24px;
}
#deco-note code {
  font-size: 0.68rem;
  border: 1px solid var(--border2);
  padding: 1px 5px;
}

/* ── LAST UPDATED ── */
#meta {
  margin-left: auto;
  display: flex;
  color: var(--muted);
  gap: 6px;
}
#meta::before {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── MAIN ── */
#main {
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ── EMBEDDED PAGE (ロメランク／ログ) ── */
.tab-header small a {
  color: var(--muted2);
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
  transition: color 0.2s, border-color 0.2s;
}
.tab-header small a:hover { color: var(--text); border-color: var(--muted2); }

/* ── ゲームタブ内のサブ切り替え ── */
#game-sub-bar { flex-wrap: wrap; width: auto; margin-bottom: 24px; }
.game-pane { display: none; }
.game-pane.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

/* ── TABS ── */
.tab { display: none; }
.tab.active {
  display: block;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ページ見出し(.tab-header)・小見出し(.section-title) は末尾「ページ別スタイル」の共通部品に一本化（2026-09-27） ── */

/* ── MVP ボード ── */
#mvp-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin-bottom: 8px;
}
.mvp-card {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  /* stat-cardと同じアングルカット+斜めワイプに統一(2026-08-19、MVPボードだけ旧statPop
     アニメーションと金色ボーダーが直し忘れで残っていたのを修正) */
  transform-origin: left center;
}
.mvp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--brand);
  transform-origin: left;
  animation: statBarGrow 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 0.25s);
}
.mvp-card:hover { background: var(--surface2); transform: translateY(-2px); }
.mvp-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mvp-emoji {
  font-size: 1rem;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mvp-label {
  font-weight: 700;
  color: var(--muted2);
}
.mvp-card .user-cell { display: flex; }
.mvp-value {
  font-size: 1.05rem;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .mvp-card, .mvp-card::before { animation: none; } }

.hero-ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.hero-ticker-track {
  display: inline-flex;
  animation: tickerScroll 55s linear infinite;
  will-change: transform;
}
.hero-ticker-seq {
  display: inline-flex;
  flex-shrink: 0;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  padding: 10px 26px;
  border-right: 1px solid var(--border2);
}
.hero-ticker-item .sw {
  width: 9px; height: 9px;
  flex-shrink: 0;
  display: inline-block;
}
.hero-ticker-item b {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker-track { animation: none; }
}

/* ── STATS GRID ── */
#stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 52px;
}
.stat-card {
  position: relative;
  overflow: hidden;
  /* 対戦ゲームのHUDカードを意識し、右下の角を鋭角にカットする（2026-08-19、
     UIデザイン刷新でユーザーと4案比較の上アングルカット×インディゴに決定）。
     このclip-path自体は常時固定の形で、アニメーションはさせない */
  transform-origin: left center;
  /* 斜めワイプで左から出現する動的モーション(Persona系の勢いを意識)。
     当初clip-pathの多角形自体をアニメーションさせていたが、ブラウザによっては
     途中の補間が効かずスナップしてしまう(実機で「カードだけモーションが無い」と報告あり、
     accent barのtransform:scaleXは動いていた事から特定)。transform:scaleX+opacityに
     置き換えて確実に動くようにした（2026-08-19） */
}
@keyframes statWipeIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--brand);
  transform-origin: left;
}
@keyframes statBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.stat-card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .stat-card, .stat-card::before { animation: none; }
}
.stat-card .stat-icon {
  margin-bottom: 10px;
  position: relative;
}
.stat-card .label {
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
}
.stat-card .value {
  color: var(--text);
  position: relative;
}
.stat-card .value .unit {
  color: var(--muted2);
}
/* サーバー年齢カードは数値ではなく「◯年◯ヶ月◯日」の文字列なので、他のカードより
   少しフォントサイズを落として折り返さず収まるようにする（2026-08-19追加） */

/* ── 概要カードの前日比（2026-08-19追加。小さく・フラット色のみ） ── */
.stat-delta {
  font-weight: 600;
  margin-top: 6px;
  position: relative;
}
.stat-delta-up   { color: #4ade80; }
.stat-delta-down { color: #f87171; }
.stat-delta-flat { color: var(--muted2); }

/* ── TABLE ── */
/* 行の横スライドイン(rowFadeIn)は、.table-wrap自身のoverflow-x:autoに毎回クリップされて
   ただのフェードインにしか見えなくなっていた（2026-08-19、JSのMutationObserverで一時的に
   overflowを解放する対症療法を複数回試したが、タイミング依存で安定して機能しなかった）。
   釣り図鑑のランキング表はそもそもラッパーにoverflowを持たせておらずクリップされないため
   綺麗にスライドして見える。根本対応として、JSのタイミングに頼らずCSSだけで解決する:
   .table-wrapの左側に見た目上ゼロ幅の「スライド用の遊び」を用意する。padding-leftと
   同量のmargin-leftをマイナスにすることで、width:autoの自動計算により中身(<table>)の
   実際の位置・幅は元のまま変わらず、その左側にだけ透明な遊び(スライド元の逃げ場)ができる。
   これで行がその遊びの範囲内をスライドする限り、常にoverflow-x:auto越しでもクリップされない
   （枠線/背景は.table-wrap自身ではなく.table-wrap内の<table>側に置き、この遊びが
   見た目のズレとして見えないようにしている） */
.table-wrap {
  overflow-x: auto;
  padding-left: 20px;
  margin-left: -20px;
}
.table-wrap > .loading,
.table-wrap > .error {
  border: 1px solid var(--border);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
thead th.r { text-align: right; }
tbody tr {
  border-bottom: 1px solid var(--border);
  /* 横スライド+skewはそのまま(サンプル通り)。「上から流れてくる感じ」は移動方向ではなく
     行ごとのディレイの間隔(下のnth-childリスト)で表現する、との認識合わせ済み(2026-08-19) */
}
tbody tr:last-child { border-bottom: none; }
/* 最初の20行までスタガー表示（それ以降は先頭と同時に出現。100行全部を個別に
   ずらすと画面外の行まで待たされて逆にもたつくため上位だけに留める）。
   「早すぎる」との指摘を受け、1行ごとの間隔と個々のduration/移動距離を拡大した(2026-08-19) */
tbody tr:nth-child(1)  { animation-delay: 0.05s; }
tbody tr:nth-child(2)  { animation-delay: 0.13s; }
tbody tr:nth-child(3)  { animation-delay: 0.21s; }
tbody tr:nth-child(4)  { animation-delay: 0.29s; }
tbody tr:nth-child(5)  { animation-delay: 0.37s; }
tbody tr:nth-child(6)  { animation-delay: 0.45s; }
tbody tr:nth-child(7)  { animation-delay: 0.53s; }
tbody tr:nth-child(8)  { animation-delay: 0.61s; }
tbody tr:nth-child(9)  { animation-delay: 0.69s; }
tbody tr:nth-child(10) { animation-delay: 0.77s; }
tbody tr:nth-child(11) { animation-delay: 0.85s; }
tbody tr:nth-child(12) { animation-delay: 0.93s; }
tbody tr:nth-child(13) { animation-delay: 1.01s; }
tbody tr:nth-child(14) { animation-delay: 1.09s; }
tbody tr:nth-child(15) { animation-delay: 1.17s; }
tbody tr:nth-child(16) { animation-delay: 1.25s; }
tbody tr:nth-child(17) { animation-delay: 1.33s; }
tbody tr:nth-child(18) { animation-delay: 1.41s; }
tbody tr:nth-child(19) { animation-delay: 1.49s; }
tbody tr:nth-child(20) { animation-delay: 1.57s; }
@media (prefers-reduced-motion: reduce) { tbody tr { animation: none; transform: none; } }
.spent-row { cursor: pointer; }
.spent-row:hover { background: var(--surface2); }

/* ── 消費額ドリルダウン: クリックした行のすぐ下に展開する内訳バー一覧
   （一番下の固定パネルだと気づかれなかったため、2026-08-17にその場展開方式へ変更） ── */
.spent-detail-row td {
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  padding: 14px 18px !important;
  animation: fadeIn 0.2s ease;
}
.spent-breakdown-title { font-size: 0.78rem; font-weight: 700; color: var(--muted2); margin-bottom: 10px; }
.spent-breakdown-row {
  display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 12px;
  padding: 6px 0; font-size: 0.8rem;
}
.spent-breakdown-label { color: var(--muted2); white-space: nowrap; }
.spent-breakdown-bar { display: block; height: 6px; background: var(--border); }
.spent-breakdown-bar span { display: block; height: 100%; background: var(--gold); }
.spent-breakdown-value { font-family: var(--mono); color: var(--text); white-space: nowrap; }
tbody tr.podium td { padding-top: 14px; padding-bottom: 14px; }
tbody tr.podium .rank { font-size: 1.15rem; }
tbody tr.podium .avatar,
tbody tr.podium .avatar-placeholder {
  /* ぼやけたグローはやめて、フラットな2重リングだけにする */
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--pc, var(--muted));
}
/* サイズは.avatar-wrapが単一の基準（アイコン枠オーバーレイの位置合わせもこれに追従する） */
tbody tr.podium .avatar-wrap { width: 38px; height: 38px; }
tbody tr.podium .uname {
  font-weight: 700;
  color: var(--pc, var(--text));
  text-shadow: none;
}
tbody tr.podium td.r,
tbody tr.podium td.num {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pc, var(--text));
}

/* 移動距離は.table-wrapに確保した「遊び」(20px)ちょうどに合わせている。
   これを超えるとまたoverflow-x:autoにクリップされて元のフェードインに戻ってしまうため注意 */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-20px) skewX(-8deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0deg); }
}
tbody td.r {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted2);
}
tbody td.num {
  font-family: var(--mono);
  font-size: 0.82rem;
}
.sub-hours {
  margin-left: 4px;
  font-size: 0.78rem;
  color: var(--muted2);
}

/* ── RANK CELL ── */
.rank {
  width: 56px;
  text-align: center;
  white-space: nowrap;
}

/* ── AVATAR + NAME ── */
.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border2);
}
.avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  font-family: var(--mono);
}
.uname {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
/* Notion名がメイン表示のとき、現在のニックネームを添える補助テキスト（2026-08-18追加） */
.uname-sub {
  font-weight: 400;
  font-size: 0.78em;
  color: var(--muted);
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── ガチャ装備反映（アイコン枠・名前色/装飾・称号・行全体の背景） ── */
/* サイズは.avatar-wrapが唯一の基準。アイコン枠は%指定にしてあるので、
   表彰台(podium)で.avatar-wrapが拡大されても比率を保ったまま自動で追従する */
.avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
}
.avatar-wrap .avatar,
.avatar-wrap .avatar-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.frame-overlay {
  position: absolute;
  top: 50%; left: 50%;
  width: 193%; height: 193%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.name-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.title-pill {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.name-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.name-line .uname-sub {
  margin-left: -2px;
}
/* クラン一覧(/clans)のクラン名セルはflexコンテナではなくインライン並びなので、
   name-lineのgapが効かない。ここだけ明示的に余白を入れる */

/* 団長セルの下に並べる団員アイコン。通常のアバター(28px)より小さい18pxにして、
   団長との主従関係が一目で分かるようにする（行の高さもほとんど増えない） */

/* ── XP PROGRESS ── */

/* ── LEVEL BADGE ── */
.level-badge {
  border-radius: 2px;
}

/* ── TWO COLUMN ── */
.cols {
  display: grid;
  /* minmax(0, 1fr)必須: 素の1frだとグリッドアイテムのmin-widthが中身のcontent幅になり、
     行が横に長いテーブル(XP等)が半分の幅を超えた瞬間にグリッド自体が突き破られてページごと
     横スクロールし、見切れる。minmax(0,...)にすることで.table-wrap自身のoverflow-x:autoが
     正しく機能するようになる（2026-08-19、XPランキングの表示崩れ修正時に発見） */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}
/* XPタブはテキスト(左)/ボイス(右)を並べる（2026-11-03、縦積みだとボイスがずっと下にあって見にくいとの指摘）。
   2026-08-19に「2列だと窮屈でLv等が見切れる」との指摘で縦積みにしていたので、見切れないように
   名前の側を短く切る（Lv・XPの数字は必ず見える）。900px以下は他の2列と同じく縦積み */
#xp .name-col { min-width: 0; }
#xp .uname { max-width: 120px; }
#xp .uname-sub { max-width: 80px; }
#xp td.r { white-space: nowrap; }

/* ── RATE BADGE ── */
.rate-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted2);
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 2px;
}

td.profit-pos { color: #4ade80; font-weight: 600; }
td.profit-neg { color: #f87171; font-weight: 600; }

/* ── 順位変動バッジ（2026-08-19、数値バッジから「順位が何位動いたか」だけを示すバッジに変更。
   フラット色面のみ、ぼかしグローは使わない） ── */
.rank-delta {
  display: block;
  font-size: 0.6rem;
  line-height: 1.3;
  margin-top: 1px;
}
.rank-delta.rank-up   { color: #4ade80; }
.rank-delta.rank-down { color: #f87171; }

/* ── TYPE BAR ── */
.type-bar {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  width: fit-content;
  overflow: hidden;
}
.type-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.type-btn:last-child { border-right: none; }
.type-btn:hover  { color: var(--muted2); background: var(--surface2); }
.type-btn.active {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 18%, var(--surface2));
  animation: btnPunch 0.25s cubic-bezier(0.3, 0.85, 0.25, 1.4);
}
/* 切替のたびに軽く弾む「押した感」を出す(2026-08-19、UI全体の動きを強化) */
@keyframes btnPunch {
  0%   { transform: scale(0.9); }
  55%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .type-btn.active, .period-btn.active { animation: none; } }

/* ── PERIOD BAR ── */
.period-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.period-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.period-btn:hover  { color: var(--muted2); border-color: var(--border2); }
.period-btn.active {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 18%, var(--surface2));
  border-color: var(--brand);
  animation: btnPunch 0.25s cubic-bezier(0.3, 0.85, 0.25, 1.4);
}

/* ── LOADING / ERROR ── */
.loading { font-size: 0.85rem; padding: 32px 0; text-align: center; }
.error   { color: #c44; font-size: 0.85rem; padding: 32px 0; text-align: center; }

/* ── RELATIONS GRAPH ── */
.graph-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#graph-info {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
  margin-left: 4px;
}
#graph-canvas {
  background: var(--surface);
  border: 1px solid var(--border);
  height: 700px;
  position: relative;
  overflow: hidden;
}
#graph-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── LIVE PULSE MAP ── */
.graph-node circle {
  stroke: var(--border2);
  stroke-width: 1.5;
  cursor: pointer;
  transition: stroke 0.15s;
}
.graph-node.hl circle  { stroke: var(--text); stroke-width: 2.5; }
.graph-node:hover circle { stroke: var(--muted); }
.graph-node text {
  font-size: 10px;
  fill: var(--muted2);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
#graph-tip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border2);
  padding: 10px 14px;
  font-size: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  max-width: 210px;
  z-index: 200;
  line-height: 1.6;
}
#graph-tip.vis { opacity: 1; }
#graph-tip strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#graph-tip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--mono);
}
#graph-tip .tip-row span:last-child { color: var(--muted2); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #header { padding: 0 16px; }
  #header :is(h1, .brand-name) { padding: 12px 0; }
  #account-chip { margin-left: auto; }
  .chip-user span { max-width: 60px; }
  #nav {
    flex-basis: calc(100% + 32px);
    margin: 0 -16px;
    -webkit-overflow-scrolling: touch;
  }
  #nav a { flex: 0 0 auto; }
  #deco-note { padding: 0 16px; margin-top: 14px; }
  #main   { padding: 28px 16px 60px; }
  #stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cols   { grid-template-columns: 1fr; gap: 28px; }
  #meta   { display: none; }
  #graph-canvas { height: 600px; }
}
@media (max-width: 480px) {
  #stats-grid { grid-template-columns: 1fr 1fr; }

  /* テーブル: セルの余白を詰めて、横スクロール量を減らす（2026-08-18追加） */
  thead th, tbody td { padding: 9px 10px; }
  table { font-size: 0.8rem; }
  .uname { max-width: 120px; }
  .uname-sub { max-width: 90px; }

  /* 消費額の内訳: 固定180px列だとはみ出すため縦積みに切り替える */
  .spent-breakdown-row {
    grid-template-columns: 1fr;
    gap: 4px 12px;
    padding: 8px 0;
  }
  .spent-breakdown-label { white-space: normal; }

  /* 相関図キャンバスは縦長画面に合わせて低めにする */
  #graph-canvas { height: 420px; }
}

/* ── 実績 (ACHIEVEMENTS) ── */
/* /achievements コマンドの画像出力（等級ごとに見出し→横並びアイコン一覧）に寄せたレイアウト */
.achv-section { margin-bottom: 36px; }
.achv-section-head {
  --ac: var(--muted);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ac); margin-bottom: 14px;
  padding-left: 12px; border-left: 2px solid var(--ac);
}
.achv-row { display: flex; flex-wrap: wrap; gap: 18px 10px; }
.achv-item {
  width: 78px;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 6px 2px; cursor: pointer;
  background: none; border: none;
  font-family: inherit;
}
.achv-item:hover { background: var(--surface2); }
.achv-item.active { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); }
/* 保有済み実績: ぼかしグローは使わず、フラットな2重リング+チェックバッジのみで示す
   （既存の「ぼかし禁止」方針＝dashboard-no-blur-glowに合わせている） */
.achv-item.owned .achv-item-icon { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #3fae6a; border-radius: 50%; }
.achv-owned-badge {
  position: absolute; top: 2px; right: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #3fae6a; color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.untrodden-badge {
  font-size: 0.7rem; font-weight: normal; color: #c9af56;
  margin-left: 8px; white-space: nowrap;
}
.achv-item-icon {
  width: 48px; height: 48px;
  /* ぼやけたdrop-shadowのグローは既存の「ぼかし禁止」方針に反していたため撤去(2026-08-19) */
}
.achv-item-name {
  font-size: 0.66rem; color: var(--muted2); text-align: center;
  line-height: 1.25; width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.achv-item.active .achv-item-name { color: var(--text); }

.achv-detail {
  display: none;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--ac);
  padding: 16px 18px;
}
.achv-detail.open { display: block; }
.achv-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.achv-detail-head img { width: 40px; height: 40px; flex: 0 0 auto; }
.achv-detail-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.achv-detail-desc { font-size: 0.78rem; color: var(--muted2); margin-top: 2px; line-height: 1.5; }
.achv-detail-close { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; font-family: inherit; }
.achv-detail-close:hover { color: var(--text); }
.achv-detail-holders-label { font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; }
.achv-holder-list { max-height: 220px; overflow-y: auto; }
.achv-holder-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.78rem; }
.achv-holder-row .avatar-wrap { width: 22px; height: 22px; }
.achv-holder-row .uname { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achv-empty { font-size: 0.76rem; color: var(--muted); padding: 4px 0; }
@media (max-width: 480px) {
  .achv-item { width: 68px; }
  .achv-item-icon { width: 40px; height: 40px; }
}

/* ── ドット絵キャラ(/chara) ── */
/* ドットをぼかさずに拡大する。ランキングではアイコンの横に小さく並べる */
.chara-mini {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  margin: -4px -2px -4px -4px;
  image-rendering: pixelated;
}
tbody tr.podium .chara-mini { height: 42px; }
.chara-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.chara-card {
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--border2);
}
.chara-card img {
  width: 96px;
  height: 104px;
  image-rendering: pixelated;
}
.chara-card .uname {
  font-size: 0.8rem;
  text-align: center;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-27 デザイン刷新（v3「Refined HUD」）
   ブランドの軸（インディゴ1色＋アングルカットのHUD）は2026-08-19にユーザーが4案から選んだものなので
   維持し、質感・タイポ・モーションを作り直した。上の旧ルールをこのブロックで上書きしている。
   ⚠️「ぼやけたグロー/フレア禁止」の方針は継続：box-shadow/text-shadowのblur、drop-shadow、
   radial-gradientのフレア、backdrop-filterのblurは使わない。強調は色面・0blurリング・transformで。
   ═══════════════════════════════════════════════════════════════════════════ */

/* scrollbar-gutter: 縦に長いページ⇔短いページを行き来するとスクロールバーの有無でレイアウト全体が
   横に十数pxずれてガタついていたため、スクロールバー分の幅を常に確保する（2026-09-27） */

html { scrollbar-gutter: stable; font-size: 15px; background: var(--bg); color-scheme: dark; scrollbar-color: var(--border2) transparent; }
body {
  background: var(--bg);
}
:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ── 背景: 星空＋上から消えていく方眼（1pxの線だけ。ぼかし無し） ── */
body::before {
  background-position: -1px -1px;
}

/* ── ページ遷移: ヘッダーと星空は固定し、中身だけが滑らかに入れ替わる（View Transitions） ── */
@view-transition { navigation: auto; }
.bg-stars {
  z-index: -1;
  inset: 0; view-transition-name: site-stars; }
/* 中身は上下に動かさず短いクロスフェードだけにする。以前は旧ページが上へ・新ページが下から
   せり上がる動き(translateY)があり、背景の流れる文字やHUDごと画面全体が揺れて見えていた（2026-09-27） */
::view-transition-group(root) { animation-duration: 0.28s; }
::view-transition-old(root) { animation: vtOut 0.18s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn 0.28s var(--ease-out) both; }
::view-transition-group(nav-ink) { animation-timing-function: var(--ease-expo); }
/* ヘッダーはページ間で同一なので、クロスフェードさせず新しい方をそのまま出す（二重写りのチラつき防止） */
::view-transition-old(site-header), ::view-transition-old(site-stars) { display: none; }
::view-transition-new(site-header), ::view-transition-new(site-stars) { animation: none; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── ヘッダー ── */
#brand { gap: 12px; }
#guild-icon-wrap { width: 36px; height: 36px; }
#guild-icon { border: none; }
/* ワードマークは従来どおり極太のArial Black（Chakra Petchの「&」は「8」に見えてしまうため使わない） */
#header :is(h1, .brand-name) { font-size: 1.28rem; padding: 14px 0; }
#header :is(h1, .brand-name) .amp {
  font-family: inherit;
  font-style: normal;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1em;
  margin-right: 0.02em;
  text-shadow: none; color: var(--brand-hi); }
#nav { border-top-color: var(--border); }
#nav a {
  border-bottom: none;
}
/* ホバー時は下線が左から伸びる（アクティブは.nav-inkが担当） */
#nav a::after {
  content: '';
  transform: scaleX(0);
  transform-origin: left;
}
#nav a:hover::after { transform: scaleX(1); }
#nav a.active::after { display: none; }
.nav-ink {
  position: absolute;
}
#meta {
  align-items: center;
  white-space: nowrap; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em; }
/* 「—」→時刻に変わる際の幅変化でヘッダーが動かないよう幅を確保 */
#last-updated { display: inline-block; min-width: 8ch; font-variant-numeric: tabular-nums; }
#meta::before {
  content: '';
  animation: pulse 2s ease-in-out infinite; background: #3fd07a; }

.chip-login-btn, .chip-user {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur) var(--spring);
}
.chip-login-btn { font-family: var(--display); letter-spacing: 0.06em; background: var(--brand); color: #fff; border-color: var(--brand); }
.chip-login-btn:hover { background: var(--brand-hi); border-color: var(--brand-hi); color: #0b0d1a; transform: translateY(-1px); }
.chip-skeleton { border-radius: 0; background: linear-gradient(90deg, var(--surface2), var(--surface3), var(--surface2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

#deco-note { max-width: 1180px; color: var(--muted); font-size: 0.7rem; }
#deco-note code { font-family: var(--mono); background: var(--surface2); border-color: var(--border2); border-radius: 0; }

#main { max-width: 1180px; padding-top: 44px; }

@keyframes lineGrow { from { transform: scaleX(0); } }

/* ── 概要の統計カード ── */
#stats-grid { border-color: var(--border); }
.stat-card {
  padding: 22px 24px 20px;
  animation: statWipeIn 0.7s var(--ease-expo) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--spring);
}
.stat-card::before { animation: statBarGrow 0.8s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 70ms + 0.1s); }
/* HUDの照準のような右上の角マーク。ホバーで伸びる */
.stat-card::after, .mvp-card::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
  transition: width var(--dur) var(--ease-expo), height var(--dur) var(--ease-expo), border-color var(--dur) var(--ease-out);
}
.stat-card:hover, .mvp-card:hover { background: var(--surface2); transform: translateY(-3px); }
.stat-card .stat-icon { font-size: 1rem; opacity: 0.9; }
.stat-card .label {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.stat-card .value {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-card .value .unit {
  font-weight: 400;
  margin-left: 3px; font-family: var(--font); font-size: 0.72rem; }
.stat-delta { font-family: var(--mono); font-size: 0.68rem; }

/* ── MVPボード ── */
#mvp-board { gap: 12px; }
.mvp-card {
  background: var(--surface);
  border-color: var(--border);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--spring), border-color var(--dur) var(--ease-out);
  animation: statWipeIn 0.6s var(--ease-expo) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.mvp-card::before { height: 2px; }
.mvp-card:hover { border-color: var(--border2); }
.mvp-label { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.08em; }
.mvp-emoji { background: var(--brand-lo); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.mvp-value { font-family: var(--mono); color: var(--brand-hi); }

/* ── ティッカー ── */
.hero-ticker {
  z-index: 2; background: var(--surface); border-color: var(--border); }
.hero-ticker-item { font-size: 0.74rem; letter-spacing: 0.06em; border-right-color: var(--border); }

/* ── テーブル ── */
.table-wrap table, .table-wrap > .loading, .table-wrap > .error { background: var(--surface); border-color: var(--border); }
thead th {
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  background: var(--surface2);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
  border-bottom: 1px solid var(--border2);
  padding: 11px 16px;
}
tbody tr {
  border-bottom-color: var(--border);
  animation: rowFadeIn 0.7s var(--ease-expo) both;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-expo), box-shadow var(--dur-fast) var(--ease-out);
}
tbody td {
  vertical-align: middle; padding: 11px 16px; }
tbody td.r, tbody td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rank { font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--muted); }
/* 1〜3位の行に金銀銅の淡いグラデーションを敷き、表彰台のような特別感を出す */
tbody tr.podium {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc, var(--muted)) 16%, transparent), transparent 55%);
  position: relative; box-shadow: inset 2px 0 0 0 var(--pc, var(--muted)); }
tbody tr.podium:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--pc, var(--muted)) 24%, transparent), var(--surface2) 55%); transform: translateX(4px); }
.uname { font-weight: 500; }
.level-badge, .rate-badge {
  font-family: var(--mono);
  background: var(--surface2);
  border-color: var(--border2);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}

/* ── 切り替えボタン（期間・種類） ── */
.type-bar { border-color: var(--border2); border-radius: 0; gap: 0; }
.type-btn, .period-btn {
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--spring);
}
.type-btn { padding: 7px 16px; border-right-color: var(--border2); }
.period-btn { padding: 6px 14px; border-color: var(--border2); border-radius: 0; }
.type-btn:active, .period-btn:active { transform: scale(0.95); }
.type-btn.active, .period-btn.active {
  border-color: var(--brand);
}
@keyframes btnPunch { from { transform: scale(0.92); } to { transform: scale(1); } }

/* ── 読み込み中: 文字の下を細いバーが往復する ── */
.loading { position: relative; font-family: var(--display); letter-spacing: 0.1em; color: var(--muted); }
.loading::after {
  content: '';
  display: block;
  width: 64px; height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  background-size: 200% 100%;
  animation: loadSweep 1.1s var(--ease-in-out) infinite;
}
@keyframes loadSweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* 「データなし」などの空表示は読み込み中ではないので、往復するバーを出さない */
.loading.empty::after { display: none; }

/* ── スクロールで浮かび上がる（対応ブラウザのみ。非対応ならそのまま表示） ── */
@supports (animation-timeline: view()) {
  .cols > div, .achv-section, .chara-card, #mvp-board, .sk-comments, .sk-vote {
    animation: scrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }
  @keyframes scrollReveal { from { opacity: 0; transform: translateY(28px); } }
}
@media (prefers-reduced-motion: reduce) {
  .cols > div, .achv-section, .chara-card, #mvp-board, .sk-comments, .sk-vote { animation: none !important; }
}

/* ── 共通ボタン・カード類の角をHUD風に揃える ── */
.btn-discord-login {
  border-radius: 0;
  background: var(--brand);
  font-family: var(--display);
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--spring);
}
.btn-discord-login:hover { filter: none; background: var(--brand-hi); color: #0b0d1a; transform: translateY(-2px); }
.chara-card {
  display: flex;
  flex-direction: column;
  align-items: center; border-radius: 0; background: var(--surface); border-color: var(--border); transition: transform var(--dur) var(--spring), border-color var(--dur) var(--ease-out); }
.chara-card:hover { transform: translateY(-4px); border-color: var(--brand); }
.achv-item { border-radius: 0; transition: background var(--dur-fast) var(--ease-out), transform var(--dur) var(--spring); }
.achv-item:hover { transform: translateY(-3px); }
.achv-detail { animation: fadeIn 0.4s var(--ease-expo); }

@media (max-width: 900px) {
  #main { padding-top: 26px; }
}
@media (max-width: 480px) {
  .stat-card { padding: 18px 16px; }
}

/* ═══ モーショングラフィックス（v3.1、2026-09-27） ═══
   「しつこくない今風」: 動きは入場時の一度きり＋常時はごくゆっくりしたものだけ。ぼかし系は不使用 */

/* 登場アニメーションの fill を both→backwards に。both だと終了後も最終フレームの transform が
   残り続け、ホバー時の translateY/translateX（浮く・ずれる）を打ち消していた（実質ホバーが効いていなかった） */
.stat-card, .mvp-card, tbody tr { animation-fill-mode: backwards; }

/* ── ページ上端の読了バー（スクロール連動。対応ブラウザのみ） ── */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--brand);
    transform-origin: left;
    transform: scaleX(0);
    animation: progressGrow linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
    z-index: 2;
  }
  @keyframes progressGrow { to { transform: scaleX(1); } }
}

/* ── 概要ヒーロー ── */
.hero {
  position: relative;
  min-height: 330px;
  margin: -8px 0 34px;
  padding: 36px 0 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-body { position: relative; z-index: 2; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--brand-hi);
  margin-bottom: 14px;
  animation: heroFade 0.8s 0.1s var(--ease-expo) both;
}
.hero-live {
  width: 8px; height: 8px; background: #3fd07a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3fd07a 25%, transparent);
  animation: livePing 2s var(--ease-in-out) infinite;
}
@keyframes livePing { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, #3fd07a 0%, transparent); } }
.hero-title {
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  display: flex;
  overflow: hidden;           /* せり上がる文字を下端で切る */
  padding-bottom: 0.06em;
}
.ht-c {
  display: inline-block;
  color: #fff;
  animation: charRise 0.9s var(--ease-expo) both;
  animation-delay: calc(0.15s + var(--i) * 55ms);
}
.ht-amp { color: var(--brand); }
@keyframes charRise { from { transform: translateY(105%) rotate(6deg); } }
.hero-title:hover .ht-c { animation: charHop 0.6s var(--spring); animation-delay: calc(var(--i) * 30ms); }
@keyframes charHop { 40% { transform: translateY(-10%); } }
.hero-sub {
  margin-top: 14px;
  font-size: 1.05rem; font-weight: 500; color: var(--muted2);
  animation: heroFade 0.9s 0.55s var(--ease-expo) both;
}
.hero-coord {
  margin-top: 18px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--muted);
  animation: heroFade 0.9s 0.75s var(--ease-expo) both;
}
@keyframes heroFade { from { opacity: 0; transform: translateY(10px); } }

/* 背景を流れる巨大な白抜き文字 */
.hero-marquee {
  position: absolute; inset: auto 0 -28px 0;
  z-index: 0; pointer-events: none;
  white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-marquee-track { display: inline-flex; animation: marquee 70s linear infinite; }
.hero-marquee span {
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  font-size: clamp(4rem, 13vw, 10rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--brand) 15%, transparent);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* HUDリング（線だけ。回転速度・向きを変えて奥行きを出す） */
.hero-hud {
  position: absolute; right: -30px; top: 50%;
  width: 400px; height: 400px;
  transform: translateY(-50%);
  z-index: 1;
  animation: hudIn 1.4s 0.2s var(--ease-expo) both;
}
@keyframes hudIn { from { opacity: 0; transform: translateY(-50%) scale(0.85) rotate(-20deg); } }
.hero-hud * { fill: none; vector-effect: non-scaling-stroke; }
.hud-line  { stroke: var(--border2); stroke-width: 1; }
.hud-ticks line { stroke: var(--border2); stroke-width: 1; }
.hud-dash  { stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-width: 1; stroke-dasharray: 2 7; }
.hud-seg   { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 70 24 12 24 140 30; }
.hud-arc   { stroke-width: 2; stroke-dasharray: 90 1000; }
.hud-dash2 { stroke: color-mix(in srgb, var(--brand-hi) 45%, transparent); stroke-width: 1; stroke-dasharray: 30 10; }
.hud-spin { transform-origin: 0 0; }
.hud-spin-a { animation: spin 60s linear infinite; }
.hud-spin-b { animation: spin 28s linear infinite reverse; }
.hud-spin-c { animation: spin 9s var(--ease-in-out) infinite; }
.hud-spin-d { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .hero { min-height: 260px; padding: 20px 0 24px; }
  .hero-hud { width: 280px; height: 280px; right: -90px; opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-c, .hero-eyebrow, .hero-sub, .hero-coord, .hero-hud, .hero-marquee-track, .hud-spin, .hero-live, .scroll-progress { animation: none !important; }
}

/* ── カードの立体チルト（JSがマウス位置から --rx/--ry を入れる。マウス操作時のみ） ── */

/* ── 見出しの解読演出中は幅がガタつかないよう等幅寄せ ── */
.scrambling { font-variant-numeric: tabular-nums; }

/* ═══ 第20世代（XX）アクセント＆全ページ演出（v3.2、2026-09-27） ═══
   --gen は最新世代ロールの色（nav.js の genStyle() がロール色で上書き。既定はXXの#4cadd0）。
   インディゴ(--brand)が主役、--gen は「差し色」として線・端・印にだけ使う */
::selection { color: #fff; background: color-mix(in srgb, var(--gen) 50%, transparent); }

/* 2色の差し色: インディゴ→XXの流れ */
.stat-card::before, .mvp-card::before, .scroll-progress, .nav-ink {
  background: linear-gradient(90deg, var(--brand), var(--gen));
}
.stat-card:hover::after, .mvp-card:hover::after { width: 18px; height: 18px; border-color: var(--gen); }
tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  transform: translateX(4px); box-shadow: inset 2px 0 0 0 var(--gen); }
.rank-delta.rank-new { color: var(--gen); }
#guild-icon {
  object-fit: cover; box-shadow: 0 0 0 1px var(--border2), 0 0 0 3px var(--bg), 0 0 0 4px var(--gen); }


/* ヘッダーの世代チップ */
.gen-chip {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gen);
  border: 1px solid color-mix(in srgb, var(--gen) 60%, transparent);
  background: var(--gen-lo);
  padding: 3px 7px 3px 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
  white-space: nowrap;
}
@media (max-width: 480px) { .gen-chip { display: none; } }

/* 概要ヒーローの世代表記 */
.hero-gen {
  margin-left: 6px;
  padding: 2px 8px;
  color: #06070b;
  background: var(--gen);
  font-weight: 700;
  letter-spacing: 0.16em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
.hud-arc { stroke: var(--gen); }
.hud-gen {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: transparent !important;
  stroke: var(--gen);
  stroke-width: 1.2;
  paint-order: stroke;
  animation: genBreath 4s var(--ease-in-out) infinite;
}
.hud-gen-sub { font-family: var(--font); font-size: 11px; letter-spacing: 0.3em; fill: var(--muted) !important; }
@keyframes genBreath { 50% { stroke-opacity: 0.45; } }

/* ── 各ページの背景演出（流れる英語名＋世代入りHUD）。レイアウトに影響しない背景レイヤー ── */
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  line-height: 1.5;
  min-height: 100vh;
  z-index: 0;
  overflow-x: hidden; position: relative; }
.page-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 520px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.pb-marquee { position: absolute; left: 0; right: 0; top: 150px; white-space: nowrap; }
.pb-track { display: inline-flex; animation: marquee 90s linear infinite; }
.pb-track span {
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(3.5rem, 10vw, 8rem);
  line-height: 1;
  color: transparent;
}
.pb-hud {
  position: absolute;
  right: max(16px, calc((100vw - 1180px) / 2 - 40px));
  top: 118px;
  width: 240px; height: 240px;
  opacity: 0.85;
}
.pb-hud * { fill: none; vector-effect: non-scaling-stroke; }
.pb-hud .hud-spin { transform-origin: 0 0; }
.pb-gen {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 700;
  fill: transparent !important;
  stroke: var(--gen);
  stroke-width: 1;
  animation: genBreath 4s var(--ease-in-out) infinite;
}
@media (max-width: 900px) {
  .pb-hud { width: 170px; height: 170px; right: -40px; top: 100px; opacity: 0.5; }
  .pb-marquee { top: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-track, .pb-hud, .pb-hud .hud-spin, .pb-gen, .hud-gen { animation: none !important; }
}

/* ── ページタイトルのせり上がり（JSが1文字ずつ .kt-c に分割する） ── */

/* ═══════════════════════════════════════════════════════════════════════════
   ページ別スタイル（2026-09-27 統合）
   以前は各ページの<style>に散らばっていた見た目を、すべてここに集約した。
   ⚠️ページ側に<style>を書かないこと。新しいページはまず下の「共通部品」を使い、
     足りない分だけこのセクションにページ名の見出しを付けて追記する。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 共通部品 ─────────────────────────────────────────────────────────────
   .page-wrap / .page-title / .page-lead / .card / .input / .data-table / .chip
   既存ページのクラス名（.wk-*, .fh-*, .g-* 等）は下で同じ部品にまとめて割り当てている */
.page-wrap, .wk-wrap, .fh-wrap, #romerank, #gacha, #chatlog-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 80px;
}
#constitution { max-width: 820px; margin: 0 auto; padding: 44px 24px 80px; }

.page-title, .tab-header :is(h1, h2), .wk-h1, .fh-h1, #gacha > :is(h1, h2), #romerank > :is(h1, h2), #constitution > :is(h1, h2), .wk-person-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 8px;
  text-wrap: balance;
}
.page-title::after, .tab-header :is(h1, h2)::after, .wk-h1::after, .fh-h1::after, #gacha > :is(h1, h2)::after, #romerank > :is(h1, h2)::after, #constitution > :is(h1, h2)::after {
  content: '';
  display: block;
  transform-origin: left;
  animation: lineGrow 0.8s 0.1s var(--ease-expo) both;
}
/* ページ見出しの器（概要系ページ）。見出しの右に「TOP 100」等の補足を並べる */
.tab-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 20px; }
.tab-header :is(h1, h2) { display: block; }
.tab-header .tab-icon { margin-right: 0.3em; } /* 釣り図鑑「🎣 釣り図鑑」と同じく絵文字と文字の間を空ける */

/* 小見出し（釣り図鑑の「🏆 釣り人ランキング」の形に統一）: 左の縦線＋差し色。--ac で色を変えられる */
.section-head, .section-title, .fh-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--display);
  margin-bottom: 14px;
  padding-left: 12px;
}

.page-lead, .wk-tagline, .fh-tagline, .g-tagline, .rr-tagline {
  color: var(--muted2);
  font-size: 0.86rem;
  line-height: 1.8;
  max-width: 70ch;
  margin-bottom: 24px;
}

.card, .wk-hub-card, .fh-card, .g-card, .wk-callout, .wk-toggle, .rr-notes, .rr-rubric-item, .rr-rubric-compare,
#constitution .cst-callout, #chatlog-main .day-list a, #chatlog-main .search-result, #chatlog-main .embed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.card, .wk-hub-card, .fh-card, .g-card, #chatlog-main .day-list a, #chatlog-main .search-result {
  transition: transform var(--dur) var(--spring), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.card:hover, .wk-hub-card:hover, .fh-card:hover, .g-card:hover, #chatlog-main .day-list a:hover, #chatlog-main .search-result:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: var(--surface2);
}

.input, .wk-search, .fh-search, #chatlog-main .search-box input, .rr-version-bar select {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--dur) var(--ease-out);
}
.input:focus, .wk-search:focus, .fh-search:focus, #chatlog-main .search-box input:focus, .rr-version-bar select:focus { border-color: var(--brand); }

.btn, #chatlog-main .search-box button, .rr-evaluate-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--spring);
}
.btn:hover, #chatlog-main .search-box button:hover, .rr-evaluate-btn:hover { background: var(--brand-hi); color: #0b0d1a; transform: translateY(-2px); }

.data-table, .wk-table, .fh-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.data-table th, .data-table td, .wk-table th, .wk-table td, .fh-table th, .fh-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.data-table th, .wk-table th, .fh-table th {
  font-family: var(--display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--muted); background: var(--surface2); cursor: pointer; user-select: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.data-table th:hover, .wk-table th:hover, .fh-table th:hover { color: var(--text); }
.data-table th.sorted::after, .wk-table th.sorted::after, .fh-table th.sorted::after { content: ' ▾'; color: var(--gen); }
.data-table th.sorted.asc::after, .wk-table th.sorted.asc::after, .fh-table th.sorted.asc::after { content: ' ▴'; }
.data-table tr:hover td, .wk-table tr:hover td, .fh-table tr:hover td { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }

.chip, .wk-badge, .wk-member-list a, .wk-person-rank, .fh-tier-badge, .g-chip, #chatlog-main .reaction {
  border-radius: 0;
  font-family: var(--display);
  letter-spacing: 0.04em;
}

@supports (animation-timeline: view()) {
  .card, .wk-hub-card, .fh-card, .g-card, .tier-row, #chatlog-main .day-list a {
    animation: scrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card, .wk-hub-card, .fh-card, .g-card, .tier-row, #chatlog-main .day-list a, .page-title::after { animation: none !important; }
}
@media (max-width: 900px) {
  .page-wrap, .wk-wrap, .fh-wrap, #romerank, #gacha, #chatlog-main, #constitution { padding: 26px 16px 60px; }
}

/* ── Wiki（/wiki） ──────────────────────────────────────────────────────── */
.wk-back { display: inline-block; margin-bottom: 20px; color: var(--muted2); font-size: 0.82rem; text-decoration: none; }
.wk-back:hover { color: var(--text); }
.wk-synced { text-align: right; font-size: 0.72rem; color: var(--muted); margin-top: 24px; font-family: var(--mono); }
.wk-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.wk-hub-card { display: block; padding: 20px; text-decoration: none; }
.wk-hub-icon { font-size: 1.6rem; margin-bottom: 8px; display: block; }
.wk-hub-name, .wk-entry-name, .wk-community-name { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.wk-hub-name { font-size: 1.1rem; display: block; margin-bottom: 4px; }
.wk-hub-desc { font-size: 0.78rem; color: var(--muted2); line-height: 1.6; }
.wk-search { width: 100%; margin-bottom: 20px; }
.wk-entry { padding: 16px 0; border-bottom: 1px solid var(--border); }
.wk-entry:last-child { border-bottom: none; }
.wk-entry-name { font-size: 1.05rem; margin-bottom: 4px; }
.wk-entry-summary { font-size: 0.85rem; color: var(--muted2); line-height: 1.7; white-space: pre-wrap; }
.wk-entry-link { font-size: 0.72rem; color: var(--muted); text-decoration: none; margin-left: 8px; }
.wk-article { font-size: 0.92rem; line-height: 1.9; color: var(--text); max-width: 820px; }
.wk-article h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 32px 0 8px; }
.wk-article h2:first-child { margin-top: 0; }
.wk-article h3 { font-family: var(--display); font-size: 1.15rem; margin: 24px 0 8px; border-left: 3px solid var(--brand); padding-left: 10px; }
.wk-article h4 { font-size: 1rem; margin: 18px 0 6px; color: var(--muted2); }
.wk-article p { margin: 10px 0; color: var(--muted2); }
.wk-article blockquote { margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--gen); color: var(--muted2); background: var(--surface); }
.wk-article ul, .wk-article ol { margin: 10px 0; padding-left: 24px; color: var(--muted2); }
.wk-article hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.wk-callout { padding: 12px 16px; margin: 12px 0; color: var(--muted2); }
.wk-code { background: var(--surface2); border: 1px solid var(--border); padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 0.8rem; }
.wk-figure { margin: 16px 0; }
.wk-figure img { max-width: 100%; display: block; }
.wk-figure figcaption { font-size: 0.75rem; color: var(--muted); margin-top: 6px; text-align: center; }
.wk-toggle { margin: 10px 0; padding: 10px 14px; }
.wk-toggle summary { cursor: pointer; font-weight: 600; color: var(--text); }
.wk-toggle[open] summary { margin-bottom: 8px; }
.wk-table td a { color: var(--text); text-decoration: none; }
.wk-table td a:hover { text-decoration: underline; }
.wk-person-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.wk-person-icon { width: 96px; height: 96px; object-fit: cover; background: var(--surface2); flex: 0 0 auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.wk-person-name { font-size: 1.8rem; margin-bottom: 4px; }
.wk-person-rank { display: inline-block; font-weight: 700; padding: 2px 10px; font-size: 0.85rem; margin-right: 8px; }
.wk-person-meta { font-size: 0.82rem; color: var(--muted2); line-height: 1.8; }
.wk-badges, .wk-member-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wk-badge, .wk-member-list a { font-size: 0.72rem; padding: 3px 10px; background: var(--surface); border: 1px solid var(--border); color: var(--muted2); }
.wk-member-list a { font-size: 0.78rem; text-decoration: none; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.wk-member-list a:hover { color: var(--text); border-color: var(--brand); }
.wk-community-card { padding: 16px 0; border-bottom: 1px solid var(--border); }
.wk-community-name { font-size: 1.1rem; }
.wk-community-count { font-size: 0.75rem; color: var(--muted); margin-left: 8px; }

/* ── 釣り図鑑（/fishing） ──────────────────────────────────────────────── */
.fh-search { width: 100%; max-width: 320px; }
.fh-section { margin-bottom: 36px; }
.fh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.fh-card { position: relative; margin: 0; overflow: hidden; }
.fh-thumb-wrap { position: relative; background: var(--surface2); }
.fh-thumb { display: block; width: 100%; height: 110px; object-fit: cover; }
.fh-tier-badge { position: absolute; top: 6px; right: 6px; font-size: 0.62rem; font-weight: 700; padding: 2px 8px; color: #10121a; background: var(--tc); box-shadow: 0 0 0 2px var(--bg); }
.fh-card figcaption { padding: 10px 12px 12px; }
.fh-name { font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 2px; }
.fh-size-range { font-size: 0.68rem; color: var(--muted); margin-bottom: 8px; font-family: var(--mono); }
.fh-record { padding-top: 8px; border-top: 1px solid var(--border); }
.fh-record-empty { font-size: 0.72rem; color: var(--muted); }
.fh-record-size { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--gold); display: block; margin-bottom: 5px; }
.fh-record-angler { display: flex; align-items: center; gap: 6px; }
.fh-record-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.fh-record-name { font-size: 0.75rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-record-sub { font-size: 0.68rem; color: var(--muted); }
.fh-total { font-size: 0.65rem; color: var(--muted); margin-top: 6px; }
/* 未捕獲のミステリー枠: 破線ボーダー＋フラットな？マークだけで「未解放」を示す（ぼかし不使用） */
.fh-card.fh-mystery { border-style: dashed; border-color: var(--border2); }
.fh-mystery-thumb { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--surface2); }
.fh-mystery-mark { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--tc); opacity: 0.5; }
.fh-mystery-name { color: var(--muted); letter-spacing: 0.2em; }
.fh-table .fh-num { text-align: right; font-family: var(--mono); }
.fh-table .fh-rank-num { color: var(--muted2); font-family: var(--display); font-weight: 700; }
.fh-table .fh-record-avatar { margin-right: 6px; vertical-align: middle; }
/* 2026-11-12 図鑑とランキングをタブで切り替え（ランキングは他と同じ .table-wrap の表） */
.fh-tabs { margin-bottom: 20px; }
.fh-tabs .type-btn { font-size: 0.82rem; padding: 9px 18px; }
.fh-pane { display: none; }
.fh-pane.active { display: block; animation: fadeIn 0.25s ease; }
.fh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 24px; }
.fh-tier-bar { flex-wrap: wrap; margin-bottom: 0; }
.fh-tier-bar .type-btn { display: inline-flex; align-items: center; gap: 6px; }
.fh-tier-bar .type-btn small { color: var(--muted); font-size: 0.64rem; }
.fh-tier-dot { width: 7px; height: 7px; background: var(--tc); flex: none; }
.fh-empty { color: var(--muted); font-size: 0.85rem; }
.fh-rank-note { color: var(--muted); font-size: 0.78rem; margin: 0 0 12px; }
.table-wrap td small.td-sub { display: inline; margin-left: 2px; color: var(--muted); font-size: 0.7rem; font-family: var(--font); }
.table-wrap td br + small.td-sub { margin-left: 0; }
@media (max-width: 640px) {
  .fh-search { max-width: none; }
  .fh-tabs { width: 100%; }
  .fh-tabs .type-btn { flex: 1; }
  .fh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fh-thumb, .fh-mystery-thumb { height: 86px; }
  .fh-card figcaption { padding: 8px 9px 10px; }
  .fh-record-name { font-size: 0.7rem; }
}

/* ── ロメランク（/romerank） ───────────────────────────────────────────── */
.rr-eyebrow { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-hi); margin-bottom: 10px; }
.rr-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.rr-evaluate-btn { font-size: 0.95rem; padding: 12px 24px; }
.rr-cta-note { color: var(--muted); font-size: 0.75rem; }
.rr-distribution { display: flex; align-items: flex-end; gap: 3px; height: 32px; margin-bottom: 6px; }
.rr-distribution span { flex: 1 1 0; min-width: 4px; height: var(--h, 4%); min-height: 4px; transform-origin: bottom; animation: barRise 0.9s var(--ease-expo) both; }
@keyframes barRise { from { transform: scaleY(0); } }
.rr-distribution span[data-n="0"] { opacity: 0.16; }
.rr-dist-caption { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); margin-bottom: 30px; }
.tier-row { position: relative; align-items: stretch; margin-bottom: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.tier-row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 18%, transparent), transparent 55%); pointer-events: none; z-index: 0; }
.tier-badge { flex: 0 0 76px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; cursor: pointer; }
/* ランク文字: ぼかしグローではなくフラットな色面＋0blurのずらし影 */
.tier-badge::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--tc) 20%, transparent); }
.tier-badge span { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: #f4f4f5; text-shadow: 0 2px 0 color-mix(in srgb, var(--tc) 75%, #000); position: relative; }
.tier-members { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; min-height: 60px; position: relative; z-index: 1; border-left: 1px solid var(--border); }
.tier-empty { color: var(--muted); font-size: 0.75rem; font-style: italic; }
.member-card { display: flex; flex-direction: column; align-items: center; width: 60px; cursor: pointer; transition: transform var(--dur) var(--spring); }
.member-card:hover { transform: translateY(-3px); }
.member-avatar { width: 46px; height: 46px; border-radius: 50%; }
.member-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid var(--border2); display: block; }
.member-name { font-size: 0.62rem; margin-top: 5px; text-align: center; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted2); }
.member-score { font-size: 0.6rem; color: var(--tc-score, var(--muted)); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.member-voters { color: var(--muted); }
.rr-updated { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 20px; }
.rr-version-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-size: 0.78rem; color: var(--muted2); }
.rr-version-bar select { padding: 5px 8px; font-family: var(--mono); font-size: 0.75rem; }
.rr-historical-badge { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); padding: 3px 9px; font-size: 0.7rem; }
.rr-notes { padding: 16px 20px; margin-bottom: 24px; font-size: 0.8rem; color: var(--muted2); line-height: 1.7; }
.rr-rubric-toggle { display: inline-block; margin-bottom: 20px; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted2); border: 1px solid var(--border2); padding: 8px 14px; cursor: pointer; background: var(--surface); user-select: none; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.rr-rubric-toggle:hover { color: var(--text); border-color: var(--brand); }
#rr-rubric { display: none; margin-bottom: 24px; }
#rr-rubric.open { display: block; animation: fadeIn 0.4s var(--ease-expo); }
.rr-rubric-item, .rr-rubric-compare { padding: 12px 16px; margin-bottom: 8px; }
.rr-rubric-compare { border-color: var(--gold); }
.rr-rubric-compare .rr-rubric-name { color: var(--gold); }
.rr-rubric-name { font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.rr-rubric-desc { font-size: 0.72rem; color: var(--muted2); line-height: 1.7; white-space: pre-wrap; }
.rr-rubric-grades { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.rr-rubric-grade-row { display: flex; gap: 10px; font-size: 0.72rem; line-height: 1.6; }
.rr-rubric-grade-row b { flex: 0 0 18px; color: var(--gold); }
.rr-rubric-grade-row span { color: var(--muted2); }
/* スコアのツールチップ（旧: ぼかし影 0 4px 16px → 0blurの二重リングに） */
#rr-tooltip { position: fixed; z-index: 200; background: var(--surface2); border: 1px solid var(--border2); padding: 10px 14px; font-size: 0.72rem; color: var(--text); line-height: 1.8; box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--brand); display: none; max-width: 220px; }
#rr-tooltip.open { display: block; animation: fadeIn 0.25s var(--ease-expo); }
#rr-tooltip .tt-name { font-weight: 700; margin-bottom: 4px; color: #fff; }
#rr-tooltip .tt-row { display: flex; justify-content: space-between; gap: 12px; }
#rr-tooltip .tt-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border2); font-weight: 700; }
@media (max-width: 720px) {
  .tier-badge { flex-basis: 56px; }
  .tier-badge span { font-size: 1.3rem; }
}

/* ── ガチャ図鑑（/gacha） ──────────────────────────────────────────────── */
.g-section { margin-bottom: 36px; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 12px; }
.g-card { position: relative; margin: 0; overflow: hidden; }
.g-card img { display: block; width: 100%; height: 90px; object-fit: cover; }
.g-card.g-text img { height: 60px; object-fit: contain; background: var(--surface2); }
.g-card.g-frame img { height: 120px; object-fit: contain; background: var(--surface2); }
.g-swatch { width: 100%; height: 90px; }
.g-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.g-name { font-size: 0.78rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chip { flex: 0 0 auto; font-size: 0.6rem; padding: 2px 7px; color: #fff; }
.g-common .g-chip { background: #6b7280; }
.g-rare .g-chip { background: #2f6fb0; }
.g-sr .g-chip { background: #7a3fc4; }
.g-ur .g-chip { background: #b8860b; }
.g-legend .g-chip { background: linear-gradient(90deg, #ff2d6b, #ffd23e, #4fd8ff, #9b6ef0); }
/* レア度の強調はぼかしグローではなく0blurの多重リングで */
.g-card.g-rare { border-color: #2f6fb055; }
.g-card.g-sr { border-color: #7a3fc4aa; }
.g-card.g-ur { border-color: #b8860b; box-shadow: 0 0 0 1px #b8860b55; }
.g-card.g-legend { border-color: #ff2d6b; box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px #4fd8ff88; }
.g-updated { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 20px; }

/* ── ロメダ憲法（/constitution） ───────────────────────────────────────── */
#constitution > :is(h1, h2) { margin: 48px 0 8px; }
#constitution > :is(h1, h2):first-child { margin-top: 0; }
#constitution h3 { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.03em; margin: 28px 0 10px; color: var(--text); border-left: 3px solid var(--brand); padding-left: 10px; }
#constitution h4 { font-size: 1rem; margin: 18px 0 8px; color: var(--text); }
#constitution p { color: var(--muted2); font-size: 0.9rem; line-height: 1.85; margin: 0 0 12px; }
#constitution ul, #constitution ol { color: var(--muted2); font-size: 0.9rem; line-height: 1.85; margin: 0 0 14px; padding-left: 1.4em; }
#constitution li { margin-bottom: 4px; }
#constitution strong { color: var(--text); }
#constitution blockquote { border-left: 3px solid var(--gen); margin: 12px 0; padding: 4px 14px; color: var(--muted); font-size: 0.85rem; }
#constitution hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
#constitution .cst-callout { padding: 14px 16px; font-size: 0.85rem; color: var(--muted2); margin-bottom: 14px; }
#constitution .cst-updated { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 40px; }
#constitution .cst-source { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 4px; }

/* ── チャットログ（/chatlog、Bot側 features/chatlogArchive.js が生成） ──
   汎用的なクラス名（.avatar/.content等）を使っているので、他ページに漏れないよう #chatlog-main 配下に限定 */
#chatlog-main :is(h1, h2) { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.02em; margin-bottom: 4px; color: var(--text); }
#chatlog-main .page-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 16px; }
#chatlog-main .day-nav { font-size: 0.78rem; margin-bottom: 28px; }
#chatlog-main .day-nav a { color: var(--muted2); text-decoration: none; margin-right: 18px; }
#chatlog-main .day-nav a:hover { color: var(--text); }
#chatlog-main .page-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.78rem; margin: 0 0 20px; }
#chatlog-main .page-nav.bottom { margin: 24px 0 0; }
#chatlog-main .page-nav a, #chatlog-main .page-nav span { padding: 4px 10px; border: 1px solid var(--border2); color: var(--muted2); text-decoration: none; font-family: var(--mono); transition: color var(--dur-fast), background var(--dur-fast); }
#chatlog-main .page-nav a:hover { color: var(--text); background: var(--surface2); }
#chatlog-main .page-nav .current { background: color-mix(in srgb, var(--brand) 25%, var(--surface2)); border-color: var(--brand); color: #fff; }
/* メッセージ: Discordと同じく区切り線なし・カーソルを乗せた行だけ背景を明るく。
   同じ人の7分以内の連続発言(.grouped)は名前とアイコンを省き、左の余白に時刻を出す */
#chatlog-main .messages { margin: 0 -16px; }
#chatlog-main .message { padding: 2px 16px; margin-top: 16px; content-visibility: auto; contain-intrinsic-size: auto 64px; }
#chatlog-main .message.grouped { margin-top: 0; padding-left: 72px; position: relative; contain-intrinsic-size: auto 24px; }
#chatlog-main .message:hover { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
#chatlog-main .message:target { background: color-mix(in srgb, var(--gold) 14%, transparent); }
#chatlog-main .message-main { display: flex; gap: 16px; }
#chatlog-main .gutter-time { position: absolute; left: 0; width: 64px; text-align: right; top: 5px; font-size: 0.66rem; color: var(--muted); font-family: var(--mono); visibility: hidden; }
#chatlog-main .message.grouped:hover .gutter-time { visibility: visible; }
#chatlog-main .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
#chatlog-main .message-body { min-width: 0; flex: 1; }
#chatlog-main .message-header { display: flex; align-items: baseline; gap: 6px; }
#chatlog-main .author { font-weight: 600; font-size: 0.98rem; color: var(--text); }
#chatlog-main .bot-tag { background: #5865f2; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; align-self: center; letter-spacing: 0.02em; }
#chatlog-main .timestamp { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); margin-left: 2px; }
#chatlog-main .edited { font-size: 0.66rem; color: var(--muted); margin-left: 4px; }
#chatlog-main .content { white-space: pre-wrap; word-break: break-word; line-height: 1.375; color: var(--text); }
#chatlog-main .content .emoji { width: 22px; height: 22px; vertical-align: -6px; object-fit: contain; }
#chatlog-main .content.jumbo .emoji { width: 48px; height: 48px; vertical-align: middle; }
#chatlog-main .content .mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; padding: 0 2px; border-radius: 3px; font-weight: 500; }
/* 返信元: 発言の上に小さく(アイコン・名前・本文の抜粋) */
#chatlog-main .reply-ref { display: flex; align-items: center; gap: 4px; margin: 0 0 4px 36px; font-size: 0.78rem; color: var(--muted2); min-width: 0; position: relative; }
#chatlog-main .reply-ref::before { content: ''; position: absolute; left: -18px; top: 50%; width: 14px; height: 9px; border-left: 2px solid var(--border2); border-top: 2px solid var(--border2); border-top-left-radius: 6px; }
#chatlog-main .reply-avatar { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
#chatlog-main .reply-author { font-weight: 600; color: var(--text); flex-shrink: 0; }
#chatlog-main .reply-snippet { color: var(--muted2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatlog-main .reply-snippet:hover { color: var(--text); }
#chatlog-main .reply-missing { font-style: italic; color: var(--muted); }
/* Discordの書式(太字・コード・引用・ネタバレ・見出し・リンク) */
#chatlog-main .md-link { color: #00a8fc; text-decoration: none; word-break: break-all; }
#chatlog-main .md-link:hover { text-decoration: underline; }
#chatlog-main .md-code { background: var(--surface2); padding: 1px 4px; border-radius: 4px; font-family: var(--mono); font-size: 0.85em; }
#chatlog-main .md-codeblock { background: var(--surface); border: 1px solid var(--border2); border-radius: 4px; padding: 8px 10px; margin: 4px 0; font-family: var(--mono); font-size: 0.82rem; white-space: pre-wrap; overflow-x: auto; max-width: 640px; }
#chatlog-main .md-quote { border-left: 4px solid var(--border2); border-radius: 2px; padding: 0 0 0 10px; margin: 0; }
#chatlog-main .md-h { display: block; font-weight: 700; margin: 4px 0 2px; }
#chatlog-main .md-h1 { font-size: 1.5rem; }
#chatlog-main .md-h2 { font-size: 1.25rem; }
#chatlog-main .md-h3 { font-size: 1.05rem; }
#chatlog-main .md-sub { display: block; font-size: 0.75rem; color: var(--muted); }
#chatlog-main .spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; padding: 0 2px; }
#chatlog-main .spoiler img { opacity: 0; }
#chatlog-main .spoiler.revealed { background: color-mix(in srgb, var(--surface2) 80%, transparent); color: inherit; cursor: auto; }
#chatlog-main .spoiler.revealed img { opacity: 1; }
#chatlog-main .attachment img, #chatlog-main .embed-img { max-width: 400px; max-height: 350px; margin-top: 4px; display: block; border-radius: 8px; cursor: zoom-in; }
#chatlog-main .attachment video { max-width: 400px; margin-top: 4px; border-radius: 8px; }
#chatlog-main .attachment a { color: #00a8fc; }
#chatlog-main .sticker img { width: 160px; height: 160px; object-fit: contain; margin-top: 4px; display: block; }
#chatlog-main .sticker-text { font-size: 0.8rem; color: var(--muted2); margin-top: 4px; }
#chatlog-main .embed { border-left: 4px solid var(--gen); border-radius: 4px; background: var(--surface); padding: 8px 14px 10px 12px; margin-top: 4px; max-width: 432px; }
#chatlog-main .embed-title { font-weight: 700; margin-bottom: 4px; color: var(--text); }
#chatlog-main .embed-desc { color: var(--muted2); font-size: 0.85rem; }
#chatlog-main .embed-img { cursor: zoom-in; }
#chatlog-main .reactions { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
#chatlog-main .reaction { background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 2px 6px; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 4px; color: var(--muted2); font-weight: 600; }
#chatlog-main .reaction-emoji { width: 16px; height: 16px; object-fit: contain; }
/* 画像をクリックしたときの拡大表示(public/app.js) */
.chatlog-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.chatlog-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 4px; }
#chatlog-main .day-list a { display: block; color: var(--text); text-decoration: none; padding: 12px 16px; margin-bottom: 6px; }
#chatlog-main .day-list .count { color: var(--muted); font-size: 0.78rem; font-family: var(--mono); }
#chatlog-main .search-box { display: flex; gap: 8px; margin: 20px 0 0; }
#chatlog-main .search-box input { flex: 1; font-size: 0.85rem; padding: 9px 12px; }
#chatlog-main .search-box button { padding: 9px 18px; font-size: 0.85rem; }
#chatlog-main .search-results { margin-top: 12px; }
#chatlog-main .search-result { display: block; color: var(--text); text-decoration: none; padding: 12px 16px; margin-bottom: 6px; }
#chatlog-main .search-result .sr-snippet mark { background: color-mix(in srgb, var(--gen) 40%, transparent); color: #fff; padding: 0 2px; }
#chatlog-main .search-hint { font-size: 0.72rem; color: var(--muted); margin-top: 8px; }
/* 並び順・絞り込みボタン（2026-10-04、Discordの検索に寄せた） */
#chatlog-main .search-box select { background: var(--surface); border: 1px solid var(--border2); color: var(--text); font: inherit; font-size: 0.82rem; padding: 0 10px; outline: none; }
#chatlog-main .search-box select:focus { border-color: var(--brand); }
#chatlog-main .search-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.72rem; color: var(--muted); }
#chatlog-main .search-ops button { background: var(--surface2); border: none; color: var(--muted2); font-family: var(--mono); font-size: 0.7rem; padding: 4px 12px 4px 10px; cursor: pointer; clip-path: var(--para-s); }
#chatlog-main .search-ops button:hover { background: var(--surface3); color: var(--text); }
#chatlog-main .search-ops-note { flex-basis: 100%; font-size: 0.68rem; }
#chatlog-main .search-result .sr-meta { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; display: flex; gap: 10px; align-items: baseline; font-family: inherit; }
#chatlog-main .search-result .sr-meta b { color: var(--text); font-size: 0.8rem; }
#chatlog-main .search-result .sr-meta span { font-family: var(--mono); }
#chatlog-main .search-result .sr-snippet { font-size: 0.86rem; line-height: 1.6; word-break: break-word; }
@media (max-width: 600px) { #chatlog-main .search-box { flex-wrap: wrap; } #chatlog-main .search-box input { flex-basis: 100%; } }

/* ── 好き嫌い（/suki） ─────────────────────────────────────────────────── */
.sk-lead { color: var(--muted2); font-size: 0.84rem; line-height: 1.8; max-width: 70ch; margin-bottom: 22px; }
.sk-lead b { color: var(--text); }
.sk-beta { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--brand); border: 1px solid var(--brand); padding: 2px 7px; }

.sk-search { position: relative; max-width: 420px; margin-bottom: 26px; }
.sk-search input { width: 100%; background: var(--surface); border: 1px solid var(--border2); color: var(--text); padding: 11px 14px; font-size: 0.88rem; outline: none; }
.sk-search input:focus { border-color: var(--brand); }
#sk-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--surface); border: 1px solid var(--border2); border-top: none; display: none; max-height: 320px; overflow-y: auto; }
#sk-suggest.open { display: block; }
#sk-suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text); text-decoration: none; font-size: 0.84rem; }
#sk-suggest a:hover { background: var(--surface2); }
#sk-suggest img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
#sk-suggest .sk-empty { padding: 10px 12px; color: var(--muted); font-size: 0.8rem; }

.sk-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border2); width: fit-content; margin-bottom: 16px; }
.sk-tabs button { background: none; border: none; border-right: 1px solid var(--border2); color: var(--muted2); font-size: 0.78rem; font-weight: 700; padding: 9px 16px; cursor: pointer; }
.sk-tabs button:last-child { border-right: none; }
.sk-tabs button:hover { color: var(--text); }
.sk-tabs button.active { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); color: #fff; }
.sk-pane { display: none; }
.sk-pane.active { display: block; }

.sk-list { border: 1px solid var(--border); background: var(--surface); }
.sk-bar { display: flex; height: 8px; background: var(--dislike); }
.sk-bar i { display: block; background: var(--like); }
.sk-rate { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; text-align: right; }
.sk-counts { font-family: var(--mono); font-size: 0.7rem; color: var(--muted2); text-align: right; white-space: nowrap; }
.sk-counts .l { color: var(--like); }
.sk-counts .d { color: var(--dislike); }
.sk-none { padding: 18px; color: var(--muted); font-size: 0.82rem; }

.sk-feed-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.sk-feed-item:last-child { border-bottom: none; }
.sk-feed-item:hover { background: var(--surface2); }
.sk-feed-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.sk-feed-head { font-size: 0.74rem; color: var(--muted2); margin-bottom: 3px; }
.sk-feed-head b { color: var(--text); }
.sk-feed-body { font-size: 0.86rem; line-height: 1.6; word-break: break-word; }

.sk-tag { display: inline-block; font-size: 0.64rem; font-weight: 700; padding: 1px 7px; color: #fff; margin-right: 6px; vertical-align: 1px; }
.sk-tag.like { background: var(--like); }
.sk-tag.dislike { background: var(--dislike); }

.sk-rank tbody tr { cursor: pointer; }
.sk-td-bar { width: 32%; min-width: 120px; }
.sk-td-rate { white-space: nowrap; }
.sk-td-rate .sk-rate, .sk-td-rate .sk-counts { display: block; }
.sk-td-rate .sk-counts { font-size: 0.64rem; margin-top: 2px; }
.sk-td-bar .sk-bar { width: 100%; }
@media (max-width: 720px) {
  .sk-th-bar, .sk-td-bar { display: none; }
  .sk-td-rate .sk-counts .l, .sk-td-rate .sk-counts .d { display: block; }
  .sk-td-rate .sk-counts { font-size: 0.6rem; line-height: 1.35; color: transparent; } /* 区切りの「・」を隠す */
}
.sk-top-actions { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.sk-top-actions .sk-search { margin-bottom: 0; flex: 1 1 280px; }
.sk-cta { background: var(--like); color: #fff; border: none; font-weight: 800; font-size: 0.9rem; padding: 12px 20px; cursor: pointer; transition: transform 0.12s; }
.sk-cta:hover { transform: translateY(-2px); }
.sk-login { color: var(--brand); font-weight: 700; }
.sk-vbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.sk-chips { display: flex; border: 1px solid var(--border2); }
.sk-chips button { background: none; border: none; border-right: 1px solid var(--border2); color: var(--muted2); font-size: 0.76rem; padding: 7px 12px; cursor: pointer; }
.sk-chips button:last-child { border-right: none; }
.sk-chips button.on { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); color: #fff; }
.sk-chips b { font-family: var(--mono); margin-left: 3px; }
#sk-vsort, #sk-vq { background: var(--surface); border: 1px solid var(--border2); color: var(--text); font-size: 0.78rem; padding: 7px 10px; outline: none; }
#sk-vq { flex: 1 1 180px; }
#sk-vq:focus, #sk-vsort:focus { border-color: var(--brand); }
.sk-vhint { font-size: 0.72rem; color: var(--muted); margin-bottom: 10px; }
.sk-vrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.sk-vrow:last-child { border-bottom: none; }
.sk-vrow.just { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.sk-vrow.busy { opacity: 0.5; pointer-events: none; }
.sk-vrow img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #000; }
.sk-vname { color: var(--text); text-decoration: none; min-width: 0; display: flex; flex-direction: column; }
.sk-vname b { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-vname small { font-size: 0.66rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-vname:hover b { text-decoration: underline; }
.sk-zero { color: var(--muted); }
.sk-vbtns { display: flex; gap: 6px; }
.sk-vbtns button { width: 44px; height: 36px; background: var(--surface2); border: 2px solid var(--border2); font-size: 1rem; cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.sk-vbtns button:hover { transform: translateY(-2px); }
.sk-vbtns button[data-v="1"]:hover, .sk-vbtns button[data-v="1"].on { border-color: var(--like); }
.sk-vbtns button[data-v="-1"]:hover, .sk-vbtns button[data-v="-1"].on { border-color: var(--dislike); }
.sk-vbtns button[data-v="1"].on { background: color-mix(in srgb, var(--like) 25%, var(--surface2)); }
.sk-vbtns button[data-v="-1"].on { background: color-mix(in srgb, var(--dislike) 25%, var(--surface2)); }

.sk-note { margin-top: 26px; font-size: 0.72rem; color: var(--muted); line-height: 1.8; }

/* ── 個人ページ ── */
.sk-back { display: inline-block; font-size: 0.78rem; color: var(--muted2); text-decoration: none; margin-bottom: 18px; }
.sk-back:hover { color: var(--text); }
.sk-hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand); padding: 24px; margin-bottom: 16px; }
.sk-hero > img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border2); }
.sk-hero :is(h1, h2) { font-size: 1.5rem; font-weight: 800; margin-bottom: 2px; overflow-wrap: anywhere; }
.sk-hero .sk-sub { font-size: 0.74rem; color: var(--muted2); margin-bottom: 12px; }
.sk-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sk-big b { font-family: var(--mono); font-size: 2.4rem; line-height: 1; }
.sk-big span { font-size: 0.78rem; color: var(--muted2); }
.sk-hero .sk-bar { height: 12px; margin-bottom: 8px; }
.sk-legend { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 0.78rem; flex-wrap: wrap; }
.sk-legend .l { color: var(--like); font-weight: 700; }
.sk-legend .d { color: var(--dislike); font-weight: 700; }
.sk-legend .n { color: var(--muted); font-size: 0.7rem; }

.sk-vote { background: var(--surface); border: 1px solid var(--border); padding: 18px 20px; margin-bottom: 28px; }
.sk-vote h3 { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted2); margin-bottom: 12px; }
.sk-vote-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sk-vote-btns button { background: var(--surface2); border: 2px solid var(--border2); color: var(--text); font-size: 1rem; font-weight: 800; padding: 14px; cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.sk-vote-btns button:hover { transform: translateY(-2px); }
.sk-vote-btns button[data-v="1"]:hover, .sk-vote-btns button[data-v="1"].on { border-color: var(--like); }
.sk-vote-btns button[data-v="-1"]:hover, .sk-vote-btns button[data-v="-1"].on { border-color: var(--dislike); }
.sk-vote-btns button[data-v="1"].on { background: color-mix(in srgb, var(--like) 22%, var(--surface2)); }
.sk-vote-btns button[data-v="-1"].on { background: color-mix(in srgb, var(--dislike) 22%, var(--surface2)); }
.sk-vote textarea { width: 100%; min-height: 64px; resize: vertical; background: var(--bg); border: 1px solid var(--border2); color: var(--text); padding: 10px 12px; font: inherit; font-size: 0.86rem; outline: none; }
.sk-vote textarea:focus { border-color: var(--brand); }
.sk-vote-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.sk-submit { background: var(--brand); color: #fff; border: none; font-weight: 800; font-size: 0.86rem; padding: 10px 22px; cursor: pointer; transition: transform 0.12s; }
.sk-submit:hover { transform: translateY(-1px); }
.sk-submit:disabled { opacity: 0.4; cursor: default; transform: none; }
.sk-cancel { background: none; border: 1px solid var(--border2); color: var(--muted2); font-size: 0.76rem; padding: 8px 14px; cursor: pointer; }
.sk-cancel:hover { color: var(--text); border-color: var(--muted2); }
.sk-count { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-left: auto; }
#sk-msg { font-size: 0.8rem; min-height: 1.2em; margin-top: 8px; }
.sk-vote-info { font-size: 0.84rem; color: var(--muted2); }
.sk-vote-info a { color: var(--brand); }
.sk-age-note, .sk-stale-note { margin-bottom: 10px; font-size: 0.76rem; }
.sk-stale-note { color: var(--text); border-left: 2px solid var(--brand); padding-left: 10px; }
.sk-rawline { margin-top: 8px; font-size: 0.72rem; color: var(--muted); }
.sk-rawline b { color: var(--text); }
.sk-rawline a { color: var(--muted2); }
.sk-old { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 0.66rem; color: var(--muted2); border: 1px solid var(--border2); border-radius: 2px; white-space: nowrap; }
.sk-spec { max-width: 70ch; margin: -10px 0 22px; font-size: 0.78rem; color: var(--muted2); line-height: 1.8; }
.sk-spec summary { cursor: pointer; color: var(--text); font-weight: 700; }
.sk-spec ul { margin: 8px 0 0; padding-left: 1.2em; }
.sk-spec b { color: var(--text); }

.sk-comments { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sk-col h3 { font-size: 0.82rem; font-weight: 800; padding: 8px 12px; color: #fff; }
.sk-col.like h3 { background: var(--like); }
.sk-col.dislike h3 { background: var(--dislike); }
.sk-col-body { border: 1px solid var(--border); border-top: none; background: var(--surface); }
.sk-comment { padding: 12px 14px; border-bottom: 1px solid var(--border); position: relative; }
.sk-comment:last-child { border-bottom: none; }
.sk-comment p { font-size: 0.86rem; line-height: 1.65; word-break: break-word; white-space: pre-wrap; }
.sk-comment time { display: block; font-family: var(--mono); font-size: 0.64rem; color: var(--muted); margin-top: 4px; }
.sk-cfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sk-cfoot time { margin-top: 0; }
.sk-react { display: flex; gap: 6px; }
.sk-react button { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted2); font-size: 0.72rem; padding: 3px 9px; cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.sk-react button b { font-family: var(--mono); font-weight: 700; margin-left: 2px; }
.sk-react button:hover { transform: translateY(-1px); color: var(--text); }
.sk-react button:disabled { opacity: 0.45; cursor: default; transform: none; }
.sk-react button[data-r="1"].on { border-color: #4ade80; color: #fff; background: color-mix(in srgb, #4ade80 20%, var(--surface2)); }
.sk-react button[data-r="-1"].on { border-color: #f87171; color: #fff; background: color-mix(in srgb, #f87171 20%, var(--surface2)); }
.sk-comment.busy { opacity: 0.6; pointer-events: none; }
.sk-thread { margin-top: 10px; }
.sk-reply { margin: 0 0 6px 10px; padding: 7px 10px; border-left: 2px solid var(--border2); background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.sk-reply.op { border-left-color: var(--brand); }
.sk-reply.mine { border-left-color: #4ade80; }
.sk-reply-head { display: flex; align-items: center; gap: 8px; font-size: 0.66rem; color: var(--muted2); margin-bottom: 2px; }
.sk-reply-head b { color: var(--text); font-weight: 700; }
.sk-reply.op .sk-reply-head b { color: var(--brand); }
.sk-reply-head time { display: inline; font-family: var(--mono); color: var(--muted); margin: 0; }
.sk-side { font-size: 0.6rem; font-weight: 700; padding: 0 5px; color: #fff; }
.sk-side.like { background: var(--like); }
.sk-side.dislike { background: var(--dislike); }
.sk-side.none { background: var(--border2); color: var(--muted2); }
.sk-reply-as { font-size: 0.66rem; color: var(--muted2); margin-top: 4px; }
.sk-reply-as b { color: var(--text); }
.sk-you { font-size: 0.6rem; color: #4ade80; border: 1px solid #4ade80; padding: 0 4px; }
.sk-reply-del { margin-left: auto; background: none; border: 1px solid var(--border2); color: var(--muted); font-size: 0.6rem; padding: 1px 6px; cursor: pointer; }
.sk-reply-del:hover { color: #f87171; border-color: #f87171; }
.sk-reply p { font-size: 0.82rem; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.sk-reply-open { background: none; border: none; color: var(--muted2); font-size: 0.72rem; padding: 2px 0 0 10px; cursor: pointer; }
.sk-reply-open:hover { color: var(--text); }
.sk-reply-form { margin: 6px 0 0 10px; }
.sk-reply-form textarea { width: 100%; min-height: 54px; resize: vertical; background: var(--bg); border: 1px solid var(--border2); color: var(--text); padding: 8px 10px; font: inherit; font-size: 0.82rem; outline: none; }
.sk-reply-form textarea:focus { border-color: var(--brand); }
.sk-reply-actions { display: flex; gap: 8px; margin-top: 6px; }
.sk-reply-send { background: var(--brand); color: #fff; border: none; font-weight: 700; font-size: 0.76rem; padding: 6px 14px; cursor: pointer; }
.sk-reply-send:disabled { opacity: 0.5; }
.sk-reply-cancel { background: none; border: 1px solid var(--border2); color: var(--muted2); font-size: 0.72rem; padding: 5px 10px; cursor: pointer; }
.sk-comment .sk-mod { position: absolute; top: 8px; right: 8px; background: none; border: 1px solid var(--border2); color: var(--muted); font-size: 0.64rem; padding: 2px 6px; cursor: pointer; }
.sk-comment .sk-mod:hover { color: #f87171; border-color: #f87171; }

@media (max-width: 720px) {
  .sk-cta { width: 100%; }
  .sk-vrow { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 8px 12px; gap: 10px; }
  .sk-vrow .sk-counts { grid-column: 2; grid-row: 2; text-align: left; }
  .sk-vrow .sk-vbtns { grid-column: 3; grid-row: 1 / 3; }
  .sk-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .sk-hero > img { width: 64px; height: 64px; }
  .sk-big b { font-size: 2rem; }
  .sk-comments { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v4「GAME UI」（2026-09-27）
   「シンプルすぎて古臭い、ゲームっぽく新しい感じに」との要望で、対戦ゲーム/ソシャゲのメニュー画面を
   意識した層を最後に重ねた。キーワードは「斜め（スキュー）」「色面で塗る」「イタリックの見出し」。
   ・ナビはスキューしたタブ。アクティブタブは色面で塗り、ページ遷移でその色面が次のタブへ滑る（.nav-ink）
   ・ランキングは1行ずつ独立したカード（リーダーボード風）。順位は斜めのプレート
   ・ボタン・チップは平行四辺形。数値はChakra Petchのイタリック
   ⚠️ぼやけたグロー/フレアは引き続き禁止（blur・drop-shadow・radialのフレア不使用）。色面と0blurリングだけ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 背景: 左上から差し込む斜めの色面＋細い斜線（どちらもフラット） ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(-58deg, color-mix(in srgb, var(--brand) 6%, transparent) 0 1px, transparent 1px 22px);
  background-size: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,0.4) 380px, transparent 820px);
          mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,0.4) 380px, transparent 820px);
}
.page-backdrop::before {
  content: '';
  position: absolute;
  top: -40px;
  height: 460px;
  transform: skewX(var(--skew));
  transform-origin: top left; left: -8%; width: 46%; background: color-mix(in srgb, var(--brand) 7%, transparent); }
.pb-track span { font-style: italic; -webkit-text-stroke: 1px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ── ヘッダー ── */
#header { view-transition-name: site-header;
  column-gap: 20px; background: #000; border-bottom: 1px solid var(--border2); }
#header :is(h1, .brand-name) { font-style: italic; letter-spacing: -0.01em; }
#nav { padding: 6px 24px 8px; border-top: 1px solid var(--border); }
#nav a {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.04em;
}
#nav a::after {
  position: absolute;
  left: 15px; right: 15px; bottom: 0;
  height: 2px;
  background: var(--border2);
  transition: transform var(--dur) var(--ease-expo); display: none; }
#nav a:hover { color: var(--text); background: var(--surface2); }
#nav a.active { color: #fff; background: none; }
/* アクティブタブの塗り。ページ遷移時はView Transitionでこの色面ごと次のタブへスライドする */
.nav-ink { bottom: 0; view-transition-name: nav-ink;
  inset: 0;
  left: 0; right: 0;
  height: auto;
  z-index: -1;
  background: var(--brand);
  clip-path: var(--para);
}
.nav-key {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin: 0 8px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted2);
  border: 1px solid var(--border2);
  border-bottom-width: 3px;
  background: var(--surface);
}
@media (hover: none), (max-width: 900px) { .nav-key { display: none; } }
@media (max-width: 900px) {
  #nav { padding: 6px 10px 8px; }
  #nav a::after, .nav-ink { left: 0; right: 0; }
}

/* ── ページ見出し: 英語のアイブロウ＋イタリックの大見出し＋斜めの下線 ── */
.page-title, .tab-header :is(h1, h2), .wk-h1, .fh-h1, #gacha > :is(h1, h2), #romerank > :is(h1, h2), #constitution > :is(h1, h2) {
  font-style: italic;
  font-size: 2.5rem;
  letter-spacing: 0;
  line-height: 1.1;
}
.page-title::before, .tab-header :is(h1, h2)::before, .wk-h1::before, .fh-h1::before, #gacha > :is(h1, h2)::before, #romerank > :is(h1, h2)::before, #constitution > :is(h1, h2)::before {
  content: var(--page-en, none);
  display: block;
  width: max-content;
  margin-bottom: 8px;
  padding: 2px 14px 2px 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #05060a;
  background: var(--gen);
  clip-path: var(--para-s);
}
.page-title::after, .tab-header :is(h1, h2)::after, .wk-h1::after, .fh-h1::after, #gacha > :is(h1, h2)::after, #romerank > :is(h1, h2)::after, #constitution > :is(h1, h2)::after {
  width: 120px; height: 5px; margin-top: 12px;
  background: linear-gradient(90deg, var(--brand) 0 70%, transparent 70% 74%, var(--gen) 74%);
  clip-path: var(--para-s);
}
.tab-header small {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text);
  background: var(--surface3);
  padding: 3px 14px 3px 12px;
  clip-path: var(--para-s);
  align-self: flex-end;
  margin-bottom: 22px;
}

/* 小見出し: 斜めのタグ */
.section-head, .section-title, .fh-section-head {
  --ac: var(--gen);
  font-style: italic;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  color: var(--text);
  border-left: none;
  padding: 7px 18px 7px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 22%, var(--surface)) 0, var(--surface) 70%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: inset 4px 0 0 var(--ac);
}

/* ── 切り替えボタン: 平行四辺形のセグメント ── */
.type-bar, .period-bar { border: none; gap: 4px; background: none; }
.type-btn, .period-btn {
  font-style: italic;
  font-weight: 700;
  border: none;
  background: var(--surface2);
  color: var(--muted2);
  padding: 7px 20px 7px 18px;
  clip-path: var(--para);
}
.type-btn:hover, .period-btn:hover { background: var(--surface3); color: var(--text); }
.type-btn.active, .period-btn.active { background: var(--brand); }

/* ── 汎用ボタン・カード ── */
.btn, #chatlog-main .search-box button, .rr-evaluate-btn, .btn-discord-login, .chip-login-btn {
  font-style: italic;
  clip-path: var(--para);
  padding-left: 22px; padding-right: 22px;
}
.card, .wk-hub-card, .fh-card, .g-card, .chara-card {
  clip-path: var(--panel);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, transparent) 0 18px, transparent 18px),
    var(--surface);
}
.card:hover, .wk-hub-card:hover, .fh-card:hover, .g-card:hover, .chara-card:hover {
  background:
    linear-gradient(135deg, var(--brand) 0 18px, transparent 18px),
    var(--surface2);
}

/* ── 概要の統計カード: ゲームのステータスパネル ── */
#stats-grid { gap: 8px; background: none; border: none; }
.stat-card {
  clip-path: var(--panel);
  background:
    repeating-linear-gradient(-58deg, color-mix(in srgb, #fff 2.5%, transparent) 0 1px, transparent 1px 9px),
    var(--surface);
  border: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.stat-card:hover { background: repeating-linear-gradient(-58deg, color-mix(in srgb, var(--brand) 8%, transparent) 0 1px, transparent 1px 9px), var(--surface2); }
.stat-card::before { height: 3px; }
.stat-card .value, .mvp-value {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.stat-card .value { font-size: 2.2rem; }
.mvp-card { clip-path: var(--panel); border: none; box-shadow: inset 0 0 0 1px var(--border); }

/* ── ランキング: 1行ずつ独立したカード（リーダーボード） ── */
.table-wrap table { border: none; background: none; border-collapse: separate; border-spacing: 0 5px; }
.table-wrap > .loading, .table-wrap > .error { clip-path: var(--panel); }
.table-wrap thead th {
  background: none;
  border: none;
  padding: 4px 16px 2px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
}
.table-wrap tbody tr { --row-ac: transparent; border: none; background-color: var(--surface); }
.table-wrap tbody tr:hover { --row-ac: var(--gen); background-color: var(--surface2); box-shadow: none; transform: translateX(6px); }
.table-wrap tbody tr.podium { --row-ac: var(--pc); box-shadow: none; }
.table-wrap tbody tr.podium:hover { transform: translateX(6px); }
.table-wrap td.rank::after {
  content: '';
  position: absolute;
  background: var(--row-ac);
  transform: skewX(var(--skew));
}
.table-wrap tbody td:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.table-wrap tbody td { padding-top: 10px; padding-bottom: 10px; }
.table-wrap tbody tr.podium td { padding-top: 15px; padding-bottom: 15px; }

/* 順位: 斜めのプレート。1〜3位は金銀銅で塗る */
.table-wrap td.rank {
  width: 64px;
}
.table-wrap td.rank::before {
  content: '';
  position: absolute;
  inset: 7px 9px 7px 12px;
  z-index: -1;
  background: var(--surface3);
  transform: skewX(var(--skew));
}
.table-wrap tr.podium td.rank { font-size: 1.3rem; }
.table-wrap tr.podium td.rank::before { background: color-mix(in srgb, var(--pc) 70%, #000); inset: 6px 7px 6px 10px; }
.table-wrap tbody td.r.num, .table-wrap tbody td.num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
}
.table-wrap tr.podium td.num { font-size: 1.12rem; }
.table-wrap tr.podium .uname { font-size: 1rem; }

/* レベル: 六角形のバッジ */
.level-badge {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 24px;
  padding: 0 9px;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--brand) 55%, var(--surface2));
  border: none;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
.rate-badge { clip-path: var(--para-s); border: none; padding-left: 9px; padding-right: 9px; }
.rank-delta { font-family: var(--mono); font-style: normal; font-weight: 700; }

/* 読み込み中 */
.loading { font-style: italic; }

@media (max-width: 900px) {
  .page-title, .tab-header :is(h1, h2), .wk-h1, .fh-h1, #gacha > :is(h1, h2), #romerank > :is(h1, h2), #constitution > :is(h1, h2) { font-size: 1.9rem; }
  .table-wrap td.rank { width: 48px; }
  .stat-card .value { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .stat-card .value { font-size: 1.35rem; }
}

/* ── v4 調整（2026-09-27 フィードバック） ── */
/* サーバー誕生日数だけ本文フォントのまま（v3の #s-age 指定がIDで勝っていた）。他の値と同じイタリック見出し体に */
#s-age { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.6rem; letter-spacing: 0; }
@media (max-width: 900px) { #s-age { font-size: 1.25rem; } }
/* タブ切り替えを軽く: 中身のクロスフェードをやめて即座に切り替え、動くのはタブの色面だけにする */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(root) { animation: none; }
::view-transition-group(nav-ink) { animation-duration: 0.26s; }
/* 行の入場は軽く短く（skewと長い移動をやめる） */
@keyframes rowFadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
tbody tr, .table-wrap tbody tr { animation-duration: 0.32s; }

/* ── v4 調整2（2026-09-27）── */
/* タブの色面: View Transition（新ページの描画完了まで待ってから動くので、クリック→一瞬止まる→動く、と
   かくついていた）をやめ、nav直下の色面をnav.jsのインラインスクリプトが transform だけで前のタブ位置から滑らせる */
@view-transition { navigation: none; }
#header, .bg-stars, .nav-ink { view-transition-name: none; }
#nav .nav-ink {
  position: absolute;
  left: 0; top: 0; right: auto; bottom: auto;
  z-index: 0;
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}
#nav:not(.ink-on) .nav-ink { display: none; }
#nav:not(.ink-on) a.active { background: var(--brand); }
/* 期間・種類ボタンの世代色アクセントも不要 */
/* 読み込み時に選択中ボタンが縮んでから戻る演出（btnPunch）が、ページを開くたびに走ってフェードのように見えていた */
.type-btn.active, .period-btn.active { animation: none; color: #fff; box-shadow: none; }
/* 順位セル: 斜めのプレート・左バーがセルの外（行カードの外）へはみ出さないよう切り取る */
.table-wrap td.rank {
  position: relative;
  isolation: isolate;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted2); clip-path: inset(0); }
.table-wrap td.rank::after { top: 0; bottom: 0;
  width: 4px; left: 6px; }
/* 背景HUDの登場（拡大＋回転）はページを開くたびに走るので停止 */
.pb-hud { animation: none; }

/* ── ミニゲーム（/arcade）──────────────────────────────────────────────
   ゲーム画面は canvas（dashboard/public/arcade.js）。ここは周りの枠とランキングだけ */
.arcade-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
.arcade-stage canvas {
  display: block; width: 100%; max-width: 420px; aspect-ratio: 360 / 600; height: auto;
  background: #0b0d18; border: 1px solid var(--border2);
  image-rendering: pixelated; touch-action: none; user-select: none; -webkit-user-select: none;
}
.arcade-help { color: var(--muted); font-size: 0.76rem; margin-top: 8px; }
.arcade-me { color: var(--muted2); font-size: 0.84rem; margin-bottom: 12px; }
.arcade-me a { color: var(--brand); }
.arcade-table td { vertical-align: middle; }
.arcade-table td.num, .arcade-table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.arcade-chara { display: block; image-rendering: pixelated; }
.arcade-table tr.arcade-mine td { background: color-mix(in srgb, var(--gen) 14%, var(--surface)); }
.arcade-empty { color: var(--muted); font-size: 0.86rem; }
@media (max-width: 760px) {
  .arcade-layout { grid-template-columns: 1fr; }
  .arcade-stage canvas { margin: 0 auto; }
}

/* ── トレンド（/trend、dashboard/trendHub.js） ── */
.type-bar a.type-btn { text-decoration: none; display: inline-block; }
.trend-word { color: var(--text); text-decoration: none; font-weight: 700; font-size: 1rem; }
.trend-word:hover { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }
.table-wrap tr.podium .trend-word { color: var(--pc); font-size: 1.1rem; }
.trend-surge {
  display: inline-block;
  padding: 2px 12px 2px 10px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  background: color-mix(in srgb, var(--brand) 55%, var(--surface2));
  clip-path: var(--para-s);
}
.trend-surge.is-new { background: var(--gen); color: #05060a; }
.trend-foot { margin-top: 14px; font-size: 0.74rem; color: var(--muted); }
.trend-foot code { font-family: var(--mono); background: var(--surface2); padding: 1px 5px; }

/* ── ロメダのAI 管理（/admin/ai、dashboard/aiHub.js・管理者だけ） ── */
#ai-admin .ai-tabs { margin-bottom: 22px; }
#ai-admin .tab-header small a { margin-left: 6px; }
#ai-admin .ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 28px; }
#ai-admin .ai-stat { padding: 16px 18px; }
#ai-admin .ai-stat-label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); }
#ai-admin .ai-stat-value { font-family: var(--display); font-size: 1.7rem; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
#ai-admin .ai-stat-sub { font-size: 0.74rem; color: var(--muted2); }
#ai-admin .ai-stat.is-ok { border-left: 3px solid #3fb950; }
#ai-admin .ai-stat.is-ok .ai-stat-value { color: #3fb950; }
#ai-admin .ai-stat.is-ng { border-left: 3px solid #e5534b; }
#ai-admin .ai-stat.is-ng .ai-stat-value { color: #e5534b; }
#ai-admin .section-head { margin-top: 28px; }
#ai-admin .section-head small { color: var(--muted); font-family: var(--mono); letter-spacing: 0; }
#ai-admin .section-head a { color: var(--muted2); font-size: 0.74rem; letter-spacing: 0.04em; }
#ai-admin .table-wrap { overflow-x: auto; }
#ai-admin .data-table th { text-align: left; white-space: nowrap; }
#ai-admin .data-table code { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }
#ai-admin .ai-note { margin: 10px 0 0; font-size: 0.78rem; }
#ai-admin .ai-warn { color: #e5534b; }
#ai-admin .ai-empty { color: var(--muted); text-align: center; padding: 22px; }
#ai-admin .ai-inline { display: inline; margin: 0; }
#ai-admin .btn-sm { padding: 4px 12px; font-size: 0.74rem; }
#ai-admin .btn-danger { background: color-mix(in srgb, #e5534b 70%, var(--surface2)); }
#ai-admin .btn-danger:hover { background: #e5534b; color: #fff; }
#ai-admin .ai-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#ai-admin .ai-search .input { flex: 1 1 240px; }
#ai-admin .ai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
#ai-admin .ai-actions .btn { padding: 8px 16px; }
#ai-admin .ai-time { white-space: nowrap; font-family: var(--mono); font-size: 0.76rem; color: var(--muted2); }
#ai-admin .ai-time small { color: var(--muted); font-family: inherit; }
#ai-admin .ai-who { white-space: nowrap; }
#ai-admin .ai-who a, #ai-admin .data-table td > a { color: var(--text); font-weight: 700; text-decoration: none; }
#ai-admin .ai-who a:hover, #ai-admin .data-table td > a:hover { color: var(--brand-hi); text-decoration: underline; }
#ai-admin .ai-qa { min-width: 260px; }
#ai-admin .ai-q { color: var(--text); white-space: pre-wrap; word-break: break-word; }
#ai-admin .ai-a { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--gen); color: var(--muted2); white-space: pre-wrap; word-break: break-word; }
#ai-admin .ai-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; font-family: var(--mono); font-size: 0.8rem; }
#ai-admin .ai-diary { padding: 14px 18px; margin-bottom: 12px; }
#ai-admin .ai-diary-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: var(--mono); }
#ai-admin .ai-diary-body { white-space: pre-wrap; line-height: 1.8; font-size: 0.88rem; }
@media (max-width: 640px) {
  #ai-admin .ai-stat-value { font-size: 1.4rem; }
  #ai-admin .ai-time { white-space: normal; }
}

/* ── マイページの管理者メニュー（管理者ログイン中だけ表示、2026-10-15） ── */
.mypage-admin-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.mypage-admin-links > span { color: var(--muted2); font-size: 0.85rem; font-weight: 700; margin-right: 6px; }
.mypage-admin-links .btn { padding: 8px 16px; font-size: 0.85rem; }

/* ── ロメダのAI 管理: Wiki下書き（2026-10-16） ── */
#ai-admin .ai-draft-text { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 0.85rem; line-height: 1.7; resize: vertical; }
#ai-admin .ai-draft-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
#ai-admin .ai-draft-actions .btn { padding: 8px 16px; }
#ai-admin .ai-draft-force { color: var(--muted2); font-size: 0.85rem; display: inline-flex; gap: 6px; align-items: center; }
/* VCで喋る（/admin/ai?tab=voice、2026-11-06） */
#ai-admin .vc-say { display: grid; gap: 12px; max-width: 760px; }
#ai-admin .vc-box { padding: 14px 16px; display: grid; gap: 10px; }
#ai-admin .vc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#ai-admin .vc-label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); min-width: 2.5em; }
#ai-admin .vc-now { font-size: 0.9rem; }
#ai-admin .vc-select { flex: 1 1 200px; min-width: 0; padding: 6px 8px; background: var(--surface2); color: inherit; border: 1px solid var(--border); border-radius: 6px; }
#ai-admin .vc-text { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; background: var(--surface2); color: inherit; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
#ai-admin .vc-msg { font-size: 0.85rem; color: var(--muted2); }
#ai-admin .vc-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.88rem; }
#ai-admin .vc-recent small, #ai-admin .vc-time { color: var(--muted2); }
#ai-admin .vc-time { margin-right: 8px; font-variant-numeric: tabular-nums; }

/* 昔のサーバーから取り込んだ発言のサーバー名（チャットログ検索、2026-10-18） */
#chatlog-main .search-result .sr-server { margin-left: auto; padding: 1px 8px; font-size: 0.68rem; color: var(--text); background: color-mix(in srgb, var(--gen) 22%, var(--surface2)); }

/* チャットログ一覧の上のサーバーの並び・下の日付の区切り（今のロメダ → 昔のロメダ、2026-10-18） */
#chatlog-main .log-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 22px; }
#chatlog-main .log-server {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: transform var(--dur) var(--spring), border-color var(--dur) var(--ease-out);
}
#chatlog-main .log-server:hover { transform: translateY(-2px); border-color: var(--brand); }
#chatlog-main .log-server img, #chatlog-main .log-server-noicon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
#chatlog-main .log-server-noicon { display: flex; align-items: center; justify-content: center; background: var(--surface2); font-weight: 700; font-size: 1.2rem; }
#chatlog-main .log-server-name { font-weight: 700; font-size: 0.9rem; }
#chatlog-main .log-server-period { font-family: var(--mono); font-size: 0.68rem; color: var(--muted2); }
#chatlog-main .log-server-count { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }
#chatlog-main .day-list .log-era {
  display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; padding-left: 10px; border-left: 2px solid var(--gen);
  font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--text); scroll-margin-top: 80px;
}
#chatlog-main .day-list .log-era:first-child { margin-top: 0; }
#chatlog-main .day-list .log-era img { width: 20px; height: 20px; border-radius: 50%; }
#chatlog-main .day-list .log-era span { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0; }
@media (max-width: 640px) { #chatlog-main .log-servers { grid-template-columns: repeat(2, 1fr); } }

/* ── /admin/newcomers 新規の初日（dashboard/newcomerHub.js）── */
#newcomer-admin .tab-header small a { margin-left: 6px; }
#newcomer-admin .type-bar { margin-bottom: 10px; }
#newcomer-admin .table-wrap { overflow-x: auto; margin-top: 14px; }
#newcomer-admin .data-table th { white-space: nowrap; }
#newcomer-admin .data-table td small { margin-left: 4px; font-size: 0.72rem; color: var(--muted2); }
#newcomer-admin .nc-week { white-space: nowrap; font-family: var(--mono); }
#newcomer-admin .nc-muted { color: var(--muted); }
#newcomer-admin .section-head { margin-top: 28px; }
#newcomer-admin .section-head small { color: var(--muted); letter-spacing: 0; }
#newcomer-admin .nc-empty { color: var(--muted); text-align: center; padding: 22px; }
#newcomer-admin .nc-foot { margin-top: 14px; font-size: 0.76rem; color: var(--muted); }
#newcomer-admin .nc-codes { font-family: var(--mono); font-size: 0.78rem; color: var(--muted2); word-break: break-all; }
#newcomer-admin .nc-label-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
#newcomer-admin > .nc-label-form { margin-top: 12px; }
#newcomer-admin .nc-label-form .input { flex: 1 1 160px; min-width: 0; }
#newcomer-admin .nc-label-form .btn { padding: 6px 14px; font-size: 0.76rem; }

/* ── /chatlog/media ログの画像・動画の一覧（dashboard/mediaHub.js・public/media.js）── */
#chatlog-main .log-media-link { display: inline-block; margin-top: 16px; padding: 9px 16px; font-size: 0.85rem; font-weight: 600; color: var(--text); text-decoration: none; background: var(--surface2); border: 1px solid var(--border2); border-left: 3px solid var(--gen); transition: border-color var(--dur-fast), transform var(--dur-fast); }
#chatlog-main .log-media-link:hover { border-color: var(--brand); transform: translateY(-2px); }
.media-page .media-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.media-page .media-filters .input { padding: 7px 10px; font-size: 0.82rem; min-width: 0; }
.media-page .media-filters input[name=who] { flex: 1 1 180px; }
.media-page .media-filters .btn { padding: 7px 18px; font-size: 0.82rem; }
.media-page .media-kinds { display: flex; gap: 12px; font-size: 0.82rem; color: var(--muted2); }
.media-page .media-kinds label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.media-page .media-status { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 10px; min-height: 1em; }
.media-page .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.media-page .media-tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); text-decoration: none; color: var(--muted2); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.media-page .media-tile:hover { border-color: var(--brand); transform: translateY(-2px); }
.media-page .media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-page .media-tile.media-broken::before { content: '表示できません'; font-size: 0.7rem; color: var(--muted); }
.media-page .media-icon { font-size: 2rem; color: var(--muted2); }
.media-page .media-fname { position: absolute; top: 6px; left: 6px; right: 6px; font-size: 0.66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-page .media-badge { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, 0.7); color: #fff; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; padding: 2px 5px; }
.media-page .media-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 4px; padding: 3px 6px; background: rgba(0, 0, 0, 0.72); font-size: 0.62rem; color: #e8e8f0; opacity: 0; transition: opacity var(--dur-fast); }
.media-page .media-tile:hover .media-cap, .media-page .media-tile:focus-visible .media-cap { opacity: 1; }
.media-page .media-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-page .media-date { font-family: var(--mono); flex-shrink: 0; color: #b8bccc; }
.media-page .media-more-wrap { text-align: center; margin-top: 18px; min-height: 1px; }
.media-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.media-lightbox .media-full { max-width: 94vw; max-height: 82vh; border-radius: 4px; }
.media-lightbox audio.media-full { width: min(480px, 90vw); }
.media-lightbox .media-lb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; font-size: 0.8rem; color: #d8dae6; }
.media-lightbox .media-lb-bar a { color: var(--brand-hi); text-decoration: none; }
.media-lightbox .media-lb-bar a:hover { text-decoration: underline; }
.media-lightbox .media-lb-close { background: none; border: 1px solid #555; color: #ddd; font-size: 1rem; line-height: 1; padding: 4px 10px; cursor: pointer; }
@media (max-width: 640px) { .media-page .media-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; } .media-page .media-cap { display: none; } }

/* ── /tier ティアメーカー（dashboard/tierHub.js・public/tier.js）── */
.tier-page .tier-lead { color: var(--muted2); font-size: 0.85rem; margin: 6px 0 16px; }
.tier-page .tier-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.tier-page .tier-toolbar .btn { padding: 8px 14px; font-size: 0.8rem; }
.tier-page .tier-title-input { flex: 1 1 220px; padding: 8px 10px; font-size: 0.85rem; min-width: 0; }
.tier-page .btn-ghost { background: transparent; color: var(--muted2); border: 1px solid var(--border2); }
.tier-page .btn-ghost:hover { background: var(--surface2); color: var(--text); }
.tier-board { border: 1px solid #000; background: #1a1a1e; }
.tier-row { --tc: #888; isolation: isolate; display: flex; min-height: 96px; border-bottom: 1px solid #000; }
.tier-row:last-child { border-bottom: none; }
.tier-label { flex: 0 0 110px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; color: #111; font-weight: 700; font-size: 1rem; word-break: break-all; cursor: pointer; user-select: none; }
.tier-items { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0; padding: 2px; min-width: 0; background: #1f1f24; }
.tier-zone.over { background: color-mix(in srgb, var(--brand) 16%, #1f1f24); }
.tier-controls { flex: 0 0 76px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #000; }
.tier-gear { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 4px; }
.tier-arrows { display: flex; flex-direction: column; gap: 4px; }
.tier-move { background: none; border: none; color: #fff; font-size: 0.8rem; cursor: pointer; padding: 2px 4px; line-height: 1; }
.tier-move:disabled { color: #444; cursor: default; }
.tier-gear:hover, .tier-move:not(:disabled):hover { color: var(--brand-hi); }
/* アイコン: 世代のロール色の細い枠＋下に小さく名前 */
.tier-tile { width: 72px; margin: 2px; background: #0e0e12; border: 2px solid var(--gen-color, #888); cursor: grab; user-select: none; -webkit-user-select: none; position: relative; }
.tier-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; pointer-events: none; }
.tier-tile-noimg img { visibility: hidden; }
.tier-tile-name { display: flex; justify-content: center; align-items: center; background: #fff; color: #111; height: 15px; line-height: 15px; white-space: nowrap; overflow: hidden; padding: 0 2px; }
/* 名前: 太い字（英字はRajdhani・日本語はNoto Sans JPの最も太いもの）。入りきらない分はJS(fitNames)が横に縮める */
.tier-name-text { display: inline-block; font-family: var(--display), 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.01em; transform-origin: center; white-space: nowrap; flex-shrink: 0; }
.tier-tile.selected { outline: 3px solid var(--brand-hi); outline-offset: 1px; z-index: 1; }
.tier-tile.dragging { opacity: 0.3; }
.tier-ghost { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; opacity: 0.9; cursor: grabbing; }
body.tier-dragging, body.tier-dragging * { cursor: grabbing !important; }
.tier-pool-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 22px 0 8px; }
.tier-pool-title { font-weight: 700; font-size: 0.9rem; margin-right: auto; }
.tier-pool-title span { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.tier-pool-head .input { padding: 7px 10px; font-size: 0.8rem; min-width: 0; }
.tier-pool { display: flex; flex-wrap: wrap; gap: 0; padding: 4px; min-height: 90px; background: var(--surface); border: 1px solid var(--border2); }
.tier-pool-empty { color: var(--muted); font-size: 0.8rem; padding: 30px; margin: auto; }
.tier-menu { position: absolute; z-index: 1500; width: 280px; max-width: calc(100vw - 16px); background: var(--surface2); border: 1px solid var(--border2); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tier-menu .input { padding: 7px 10px; font-size: 0.85rem; }
.tier-menu-head { font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
.tier-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tier-chip { background: var(--surface3, #191d29); border: 1px solid var(--border2); color: var(--muted2); font-size: 0.72rem; padding: 3px 8px; cursor: pointer; }
.tier-chip:hover { color: var(--text); border-color: var(--brand); }
.tier-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tier-swatch { height: 24px; border: 2px solid transparent; cursor: pointer; }
.tier-swatch.on { border-color: #fff; }
.tier-menu-acts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.tier-menu-btn { background: none; border: 1px solid var(--border2); color: var(--muted2); text-align: left; font-size: 0.78rem; padding: 6px 10px; cursor: pointer; }
.tier-menu-btn:hover { color: var(--text); background: var(--surface); }
.tier-menu-btn:last-child:hover { color: #ff7a7a; border-color: #ff7a7a; }
.tier-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2100; background: #000; color: #fff; border: 1px solid var(--border2); padding: 8px 16px; font-size: 0.82rem; }
@media (max-width: 640px) {
  .tier-label { flex-basis: 64px; font-size: 0.8rem; }
  .tier-controls { flex-basis: 40px; flex-direction: column; gap: 2px; }
  .tier-gear { font-size: 1.1rem; }
  .tier-tile { width: 54px; margin: 1px; }
  .tier-tile-name { height: 12px; line-height: 12px; }
  .tier-name-text { font-size: 0.58rem; }
  .tier-row { min-height: 78px; }
}

/* ── /factions 界隈勢力図（dashboard/factionHub.js・public/factions.js）── */
.fx-page .fx-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 6px 0 14px; font-size: 0.82rem; }
.fx-page .fx-head a:not(.btn) { color: var(--muted2); text-decoration: none; }
.fx-page .fx-head a:not(.btn):hover { color: var(--text); }
.fx-page .fx-head .btn, .fx-page .fx-actions .btn { padding: 7px 14px; font-size: 0.8rem; }
.fx-private { display: inline-block; font-size: 0.68rem; color: #ffb36b; border: 1px solid #ffb36b; padding: 0 6px; }
.fx-page .fx-actions { margin: 10px 0 22px; }
.fx-page .fx-empty { color: var(--muted); padding: 30px 0; }
.fx-list { display: flex; flex-direction: column; gap: 6px; }
.fx-list-item { display: block; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border2); color: var(--text); text-decoration: none; font-size: 0.85rem; }
.fx-list-item.on, .fx-list-item:hover { border-color: var(--brand); }
.fx-list-item .fx-date { float: right; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
/* 台（1920×1080をstageの幅に縮めて表示） */
.fx-stage { position: relative; width: 100%; overflow: hidden; background: #fff; border: 1px solid var(--border2); }
.fx-board { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.fx-stage-edit { overflow: auto; background: #2a2a30; }
.fx-box { position: absolute; border-radius: 26px; }
.fx-group { border-radius: 18px; }
.fx-label { position: absolute; font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif; font-weight: 800; line-height: 1.1; white-space: nowrap; pointer-events: none; }
.fx-label-tl { left: 22px; top: 18px; }
.fx-label-tr { right: 22px; top: 18px; }
.fx-label-bl { left: 22px; bottom: 18px; }
.fx-label-br { right: 22px; bottom: 18px; }
.fx-label-top { left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; }
.fx-tile { position: absolute; width: 88px; height: 108px; padding: 4px; border-radius: 6px; background: var(--gen-color, #999); user-select: none; -webkit-user-select: none; }
.fx-tile img { width: var(--icon, 80px); height: var(--icon, 80px); object-fit: cover; display: block; background: #111; pointer-events: none; }
.fx-tile-name { display: flex; justify-content: center; align-items: center; height: var(--name-h, 20px); background: #fff; overflow: hidden; }
.fx-name-text { display: inline-block; flex-shrink: 0; white-space: nowrap; font-family: var(--display), 'Noto Sans JP', sans-serif; font-weight: 900; font-size: var(--name-px, 13px); color: #111; transform-origin: center; }
.fx-sizer { position: relative; margin: 0 auto; }
.fx-titlebox { position: absolute; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; color: #111; font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif; font-weight: 800; line-height: 1; }
.fx-title { white-space: nowrap; }
.fx-subtitle { white-space: nowrap; margin-bottom: 4px; }
/* 編集画面 */
.fx-editor-page { padding: 14px 16px 40px; }
.fx-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 0.82rem; }
.fx-toolbar a { color: var(--muted2); text-decoration: none; margin-right: 6px; }
.fx-toolbar .input { padding: 7px 10px; font-size: 0.82rem; min-width: 0; }
.fx-toolbar #fx-title { width: 180px; }
.fx-toolbar #fx-subtitle { width: 240px; }
.fx-toolbar .btn { padding: 7px 12px; font-size: 0.78rem; }
.fx-page .btn-ghost { background: transparent; color: var(--muted2); border: 1px solid var(--border2); }
.fx-page .btn-ghost:hover { background: var(--surface2); color: var(--text); }
.fx-check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted2); cursor: pointer; }
.fx-dirty { font-family: var(--mono); font-size: 0.72rem; color: #ffb36b; min-width: 60px; }
.fx-edit-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.fx-zoom { display: inline-flex; gap: 2px; }
.fx-zoom .btn { padding: 6px 10px !important; min-width: 34px; justify-content: center; }
.fx-toolbar #fx-tile { width: auto; }
.fx-stage-edit .fx-box { cursor: move; }
.fx-stage-edit .fx-box.selected, .fx-stage-edit .fx-titlebox.selected { outline: 4px solid var(--brand); outline-offset: 2px; z-index: 1; }
.fx-stage-edit .fx-titlebox { cursor: move; outline: 2px dashed rgba(0, 0, 0, 0.25); }
.fx-stage-edit .fx-tile { cursor: grab; z-index: 2; }
.fx-resize { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.45) 50%); border-bottom-right-radius: inherit; }
.fx-over { outline: 4px dashed var(--brand-hi) !important; outline-offset: -4px; }
.fx-tile.dragging { opacity: 0.3; }
.fx-ghost { position: fixed !important; z-index: 3000; pointer-events: none; opacity: 0.9; }
.fx-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 70px; max-height: calc(100vh - 90px); }
.fx-props { background: var(--surface); border: 1px solid var(--border2); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; }
.fx-props .input { padding: 6px 8px; font-size: 0.82rem; }
.fx-props-head { font-weight: 700; font-size: 0.85rem; }
.fx-props-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted2); }
.fx-props-row .input { width: 110px; }
.fx-props-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fx-props-btn { background: none; border: 1px solid var(--border2); color: var(--muted2); font-size: 0.74rem; padding: 6px; cursor: pointer; }
.fx-props-btn:hover { color: var(--text); background: var(--surface2); }
.fx-props-btn:last-child:hover { color: #ff7a7a; border-color: #ff7a7a; }
.fx-hint { color: var(--muted); font-size: 0.76rem; line-height: 1.6; }
.fx-swatches { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.fx-swatch { width: 22px; height: 22px; border: 2px solid var(--border2); cursor: pointer; }
.fx-swatch.on { border-color: var(--brand-hi); }
.fx-color-row { display: flex; align-items: center; gap: 8px; }
.fx-color { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border2); background: none; cursor: pointer; }
.fx-color-row .input { width: 96px; font-family: var(--mono); }
.fx-pool-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; }
.fx-pool-head span { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-right: auto; }
.fx-pool-head .input { padding: 6px 8px; font-size: 0.78rem; flex: 1 1 100px; min-width: 0; }
.fx-pool { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; overflow-y: auto; min-height: 120px; flex: 1; padding: 6px; background: var(--surface); border: 1px solid var(--border2); }
.fx-pool .fx-tile { position: relative; width: 66px; height: 82px; padding: 3px; cursor: grab; }
.fx-pool .fx-tile img { width: 60px; height: 60px; }
.fx-pool .fx-tile-name { height: 16px; }
.fx-pool .fx-name-text { font-size: 10px; }
.fx-tile-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #c0392b; color: #fff; font-size: 12px; line-height: 18px; cursor: pointer; padding: 0; }
.fx-custom-add { font-size: 0.78rem; color: var(--muted2); }
.fx-custom-add summary { cursor: pointer; margin-bottom: 6px; }
.fx-custom-add .input { width: 100%; padding: 6px 8px; font-size: 0.78rem; margin-bottom: 6px; }
.fx-custom-add .btn { padding: 6px 14px; font-size: 0.76rem; }
@media (max-width: 760px) { .fx-edit-body { grid-template-columns: 1fr; } .fx-side { position: static; max-height: none; } .fx-pool { max-height: 360px; } }
/* ティアメーカー: みんなの投稿・拡大表示・投稿画面 */
.tier-posts { margin: 8px 0 18px; }
.tier-posts-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.tier-posts-note { font-size: 0.72rem; color: var(--muted); }
.tier-posts-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.tier-posts-empty { color: var(--muted); font-size: 0.8rem; padding: 10px 0; }
.tier-post-card { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 170px; max-width: 260px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border2); border-left: 3px solid var(--gen); color: var(--text); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.tier-post-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.tier-post-card.mine { border-left-color: var(--brand-hi); }
.tier-post-title { font-weight: 700; font-size: 0.86rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-post-meta { font-size: 0.7rem; color: var(--muted2); }
.tier-posts-more { margin-top: 6px; padding: 6px 14px; font-size: 0.76rem; }
.tier-modal { position: fixed; inset: 0; z-index: 2200; background: rgba(0, 0, 0, 0.82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tier-modal-box { background: var(--surface2); border: 1px solid var(--border2); max-width: min(1140px, 100%); max-height: 100%; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tier-modal-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier-modal-head b { font-size: 1rem; }
.tier-modal-head span { font-size: 0.74rem; color: var(--muted2); }
.tier-modal-close { margin-left: auto; background: none; border: 1px solid var(--border2); color: var(--muted2); font-size: 1rem; line-height: 1; padding: 4px 10px; cursor: pointer; }
.tier-modal-img { width: 100%; height: auto; display: block; }
.tier-modal-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-modal-acts .btn, .tier-modal-box > .btn { padding: 7px 14px; font-size: 0.8rem; align-self: flex-start; }
.tier-modal-acts .btn-ghost, .tier-modal-box .btn-ghost { background: transparent; color: var(--muted2); border: 1px solid var(--border2); }
.tier-modal-loading { color: var(--muted2); padding: 30px 40px; }
.tier-modal-text { color: var(--muted2); font-size: 0.8rem; line-height: 1.6; max-width: 460px; }
.tier-post-form { display: flex; flex-direction: column; gap: 8px; min-width: min(420px, 80vw); }
.tier-post-form label { font-size: 0.74rem; color: var(--muted); }
.tier-post-form .input { padding: 8px 10px; font-size: 0.88rem; }
.tier-post-who { display: flex; gap: 16px; flex-wrap: wrap; }
.tier-radio { font-size: 0.84rem !important; color: var(--text) !important; cursor: pointer; }
.tier-post-form > .btn { align-self: flex-start; padding: 8px 18px; font-size: 0.84rem; }
/* 勢力図／関係図のタブ（/relations） */
.rel-tabs { margin: 4px 0 16px; }
.rel-tabs a.type-btn { text-decoration: none; display: inline-flex; align-items: center; }
.fx-in-relations .fx-map-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }

/* ── ナビの下段（2026-10-31 グループ化）──
   上段 #nav はグループ、下段 #subnav は今いるグループのページ。#nav と同じく全幅の1行で、
   アクティブは色面ではなく文字色＋下線（上段の色面と見分けるため）。ぼかし系の光は使わない */
#subnav {
  padding: 0 32px;
}
#subnav::-webkit-scrollbar { display: none; }
#subnav a {
  font-family: var(--display);
  font-weight: 600;
}
#subnav a:hover { color: var(--text); border-bottom-color: var(--border2); }
#subnav a.active { color: #fff; border-bottom-color: var(--brand); }
@media (max-width: 900px) {
  #subnav { padding: 0 10px; }
}

/* ── ナビの中央寄せと余白（2026-10-31「左寄せで窮屈」の指摘で調整）──
   グループが6つに減ったので、上下段とも中央に寄せてタブ間を広げる。
   safe center は、スマホ幅で横にはみ出すときは左寄せに戻る（中央寄せのままだと左端が切れて見えなくなるため）。
   ナビ両端のQ/Eキー表示もタブのすぐ外側に寄る */
#nav, #subnav { justify-content: safe center; }
#nav {
  order: 10;
  scrollbar-width: none; isolation: isolate; align-items: center; gap: 6px; padding-top: 8px; padding-bottom: 10px; }
#nav a {
  color: var(--muted);
  transition: color var(--dur) var(--ease-out); z-index: 1;
  isolation: isolate;
  clip-path: var(--para);
  position: relative;
  cursor: pointer; font-size: 0.92rem; padding: 9px 26px 9px 24px; }
#subnav {
  flex: 0 0 calc(100% + 80px);
  margin: 0 -40px;
  flex-wrap: nowrap;
  order: 11;
  border-top: 1px solid var(--border);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface); gap: 10px; }
#subnav a {
  flex: 0 0 auto;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); padding: 9px 16px 7px; font-size: 0.82rem; }
@media (max-width: 900px) {
  #nav { gap: 2px; }
  #nav a { font-size: 0.86rem; padding: 8px 16px 8px 14px; }
  #subnav { flex-basis: calc(100% + 32px); margin: 0 -16px; gap: 4px; }
  #subnav a { padding: 8px 12px 6px; }
}
/* 概要のトレンド欄: 期間切り替えの読み込み中 */
#trend-box.is-loading .table-wrap { opacity: 0.45; transition: opacity var(--dur-fast) var(--ease-out); }
/* 概要のトレンド欄: 期間ボタンと「過去の週」の選択を1行に */
.trend-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.trend-controls .type-bar { margin-bottom: 0; }
.trend-week { padding: 6px 10px; font-size: 0.82rem; width: auto; }

/* ══ ロメコイン3 刷新（2026-10-31）══════════════════════════════════════════════
   概要: ヒーローを縮めて最初の画面に数字を入れる・シーズン帯・自分パネル・流通RCのミニグラフ
   ランキング: 名前で絞り込み・自分の行の色付け・画面下の「あなた：◯位」バー・前期の殿堂
   どれも既存の部品と同じく、平行四辺形(--para)・アングルカット(--panel)・フラットな色面だけで作る */

/* ── 概要ヒーロー: 高さを約半分に。HUDリングと文字も小さく ── */
.hero { min-height: 0; padding: 22px 0 20px; margin-bottom: 0; }
.hero-title { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero-sub { margin-top: 10px; font-size: 0.95rem; }
.hero-coord { display: none; }
.hero-hud { width: 260px; height: 260px; right: 0; }
.hero-marquee span { font-size: clamp(3rem, 8vw, 6rem); }
.hero-ticker { margin-bottom: 14px; }
@media (max-width: 900px) {
  .hero { min-height: 0; padding: 16px 0 14px; }
  .hero-hud { width: 190px; height: 190px; right: -60px; opacity: 0.5; }
}

/* ── シーズン帯: 今のロメコイン期と、その数字 ── */
.season-band {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px;
  margin-bottom: 14px;
  padding: 10px 18px 10px 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: var(--panel);
  color: var(--muted2);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background var(--dur-fast);
}
.season-band:hover { background: var(--surface2); }
.sb-name {
  align-self: stretch; display: flex; align-items: center;
  margin: -10px 4px -10px 0;
  padding: 0 22px 0 18px;
  background: var(--gen);
  color: #06070b;
  font-weight: 900;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.sb-item b {
  font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.1rem;
  color: var(--text); font-variant-numeric: tabular-nums; margin: 0 2px;
}
.sb-go { margin-left: auto; font-family: var(--display); font-style: italic; font-weight: 700; color: var(--brand-hi); }

/* ── 自分パネル（ログイン中）／ログイン案内（未ログイン） ── */
.me-panel {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 8px;
  margin-bottom: 40px;
  min-height: 92px;
}
.me-skeleton { grid-column: 1 / -1; display: block; background: var(--surface); clip-path: var(--panel); }
.me-id, .me-cell, .me-cta {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: var(--panel);
  color: var(--text);
  text-decoration: none;
}
.me-id {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 14px 18px;
  background:
    linear-gradient(135deg, var(--brand) 0 18px, transparent 18px),
    var(--surface);
  transition: background var(--dur-fast);
}
.me-id:hover { background: linear-gradient(135deg, var(--gen) 0 18px, transparent 18px), var(--surface2); }
.me-id .user-cell { min-width: 0; }
.me-lv { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted2); }
.me-lv b { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--text); letter-spacing: 0; }
.me-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.me-cell { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; min-width: 0; }
a.me-cell { transition: background var(--dur-fast); }
a.me-cell:hover { background: var(--surface2); }
.me-k { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
.me-v {
  font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.6rem; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.me-v small { font-size: 0.62em; color: var(--muted2); margin-left: 2px; }
.me-s { font-family: var(--mono); font-size: 0.66rem; color: var(--muted2); white-space: nowrap; }
.me-s.up { color: #4ade80; }
.me-s.down { color: #f87171; }
.me-bar { display: block; height: 4px; margin-top: 6px; background: var(--surface3); transform: skewX(var(--skew)); }
.me-bar i { display: block; height: 100%; background: var(--gen); }
.me-cta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
  padding: 18px 22px;
  font-size: 0.82rem; line-height: 1.7; color: var(--muted2);
}
.me-cta b { color: var(--text); }
.me-cta .chip-login-btn { background: var(--brand); color: #fff; border: none; }
@media (max-width: 900px) {
  .me-panel { grid-template-columns: 1fr; margin-bottom: 32px; }
  .me-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .me-v { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .me-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-cell { padding: 12px 12px 10px; }
}

/* ── 統計カード: 小さな補足ラベルと、流通RCの14日ミニグラフ（上=発行・下=回収） ── */
.stat-card .label-sub { margin-left: 4px; color: var(--gen); letter-spacing: 0.04em; text-transform: none; }
.stat-spark { display: block; width: 100%; height: 28px; margin-top: 8px; overflow: visible; }
.stat-spark .sp-in  { fill: var(--brand); }
.stat-spark .sp-out { fill: color-mix(in srgb, #f87171 70%, transparent); }
.stat-spark .sp-base { stroke: var(--border2); stroke-width: 0.5; vector-effect: non-scaling-stroke; }

/* ── ランキング: 名前で絞り込み ── */
.rank-tools { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; }
.rank-search {
  display: flex; align-items: center; gap: 8px;
  width: min(320px, 100%);
  padding: 0 14px 0 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border2);
  clip-path: var(--para);
  color: var(--muted);
}
.rank-search:focus-within { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-hi); }
.rank-search input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--text); font: inherit; font-size: 0.84rem;
  padding: 8px 0;
}
.rank-search input::-webkit-search-cancel-button { filter: invert(0.6); }
.rank-search-hit { font-family: var(--mono); font-size: 0.7rem; color: var(--muted2); }
.table-wrap tbody tr.rank-hidden { display: none; }

/* 自分の行: 左端に世代色の太い帯＋うっすら色面（グローは使わない） */
.table-wrap tbody tr.is-me {
  --row-ac: var(--gen);
  background-color: color-mix(in srgb, var(--gen) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gen) 55%, transparent);
}
.table-wrap tbody tr.is-me .uname::after {
  content: 'YOU';
  margin-left: 8px; padding: 1px 6px;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em;
  color: #06070b; background: var(--gen);
  -webkit-text-fill-color: #06070b; /* グラデ名の透明文字を継がない */
  vertical-align: 2px;
}

/* 自分の行が画面外のときだけ出る、画面下のバー */
.me-float {
  position: fixed; left: 50%; bottom: 18px; z-index: 90;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 26px 10px 24px;
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px var(--gen);
  clip-path: var(--para);
  color: var(--text); font: inherit; font-size: 0.82rem;
  cursor: pointer;
}
.me-float[hidden] { display: none; }
.me-float:hover { background: var(--surface3); }
.me-float .mf-k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--gen); }
.me-float b { font-family: var(--display); font-style: italic; font-size: 1.15rem; }
.me-float .mf-v { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--muted2); }
.me-float .mf-go { color: var(--gen); font-weight: 700; }

/* ── 前期の殿堂（/rc の下） ── */
.hall { margin-top: 56px; }
.hall .page-lead { margin-bottom: 14px; }
.hall .table-wrap tbody tr { opacity: 0.88; }

/* ── 線画アイコン（nav.js icon()）。見出し・統計カードの絵文字を置き換えた ── */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
.tab-header .tab-icon { display: inline-grid; place-items: center; color: var(--gen); margin-right: 0.35em; }
.tab-header .tab-icon .ico { width: 0.82em; height: 0.82em; stroke-width: 2.2; }
.stat-card .stat-icon { color: var(--brand-hi); font-size: 1.15rem; line-height: 1; }

/* 装飾の案内（以前は全ページ上部の帯。今はランキングの検索欄の横に小さく） */
.rank-tools { flex-wrap: wrap; }
.rank-deco-note { margin-left: auto; font-size: 0.68rem; color: var(--muted); }
.rank-deco-note code { font-family: var(--mono); font-size: 0.66rem; color: var(--muted2); }
@media (max-width: 900px) { .rank-deco-note { margin-left: 0; flex-basis: 100%; } }

.me-float, .me-float * { white-space: nowrap; }
@media (max-width: 480px) { .me-cells .me-cell:last-child { grid-column: span 2; } }

/* ── 1位マーク（app.js firstPlaceBadgesHtml。2026-10-31〜）──
   名前の右の、平らな金色の平行四辺形に王冠1つ（2部門以上なら個数）。/rankカード・/topランキング画像と同じ見た目。
   以前の「アイコンに金グラデの丸＋絵文字を重ねる」バッジは浮いていたので廃止 */
.fp-mark {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  height: 16px; padding: 0 7px 0 6px;
  background: var(--gold); color: #16120a;
  clip-path: var(--para-s);
  cursor: help;
}
.fp-mark svg { width: 11px; height: 9px; fill: currentColor; }
.fp-mark b { font-family: var(--display); font-style: italic; font-size: 0.72rem; line-height: 1; -webkit-text-fill-color: #16120a; }

/* ── 個人ページ /u/:userId（dashboard/profileHub.js・app.js loadProfilePage。2026-10-31）──
   /rank カードのサイト版。上から「名前の帯 → TEXT/VOICE/ROMECOIN のタイル → 今月・1位・ゲーム・好き嫌い・実績・ガチャのカード」 */
.pf-hero {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  padding: 30px 32px;
  margin-bottom: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  clip-path: var(--panel);
  overflow: hidden;
}
.pf-hero::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--gen);
}
/* ガチャの背景を装備している人は帯の背景に敷く（文字が読めるよう暗く重ねる） */
.pf-hero.has-bg {
  background: linear-gradient(90deg, rgba(11,13,21,0.92), rgba(11,13,21,0.7)), var(--pf-bg) center / cover;
}
.pf-av .avatar-wrap { width: 112px; height: 112px; }
.pf-av .avatar-wrap .avatar, .pf-av .avatar-wrap .avatar-placeholder { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brand); }
.pf-av .avatar-placeholder { font-size: 2.4rem; }
.pf-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-id .title-pill { font-size: 0.8rem; max-width: none; }
.pf-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  font-size: 2.2rem; font-weight: 900; line-height: 1.15; word-break: break-word;
}
.pf-name .fp-mark { height: 22px; padding: 0 9px 0 8px; }
.pf-name .fp-mark svg { width: 14px; height: 11px; }
.pf-name .fp-mark b { font-size: 0.95rem; }
.pf-handle { font-family: var(--mono); font-size: 0.78rem; color: var(--muted2); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pf-chip {
  font-size: 0.72rem; font-weight: 700; color: var(--text);
  padding: 3px 12px; background: var(--surface3); clip-path: var(--para-s);
}
.pf-chip:first-child { background: var(--gen-lo); color: var(--gen); }
.pf-bio { margin-top: 6px; font-size: 0.86rem; line-height: 1.8; color: var(--muted2); max-width: 62ch; white-space: pre-wrap; }
.pf-chara { width: 120px; image-rendering: pixelated; align-self: end; }

.pf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pf-tile {
  padding: 16px 20px 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); clip-path: var(--panel);
}
.pf-tile-head { display: flex; justify-content: space-between; align-items: baseline; }
.pf-k { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: var(--brand-hi); }
.pf-tile-rc .pf-k { color: var(--gold); }
.pf-rank { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted); }
.pf-rank b { font-family: var(--display); font-style: italic; font-size: 1rem; letter-spacing: 0; color: var(--text); }
.pf-lv { margin: 4px 0 8px; font-family: var(--display); font-style: italic; font-weight: 700; color: var(--muted2); }
.pf-lv b { font-size: 2.2rem; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-bar { height: 6px; background: var(--surface3); transform: skewX(var(--skew)); }
.pf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--gen)); }
.pf-tile-foot { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 0.68rem; color: var(--muted2); }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pf-card {
  padding: 16px 20px 18px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); clip-path: var(--panel);
}
.pf-card h3 {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 900; letter-spacing: 0.06em; color: var(--text);
  margin-bottom: 12px;
}
.pf-card h3 small { font-family: var(--mono); font-weight: 400; color: var(--muted2); }
.pf-card h3 svg { width: 14px; height: 11px; fill: var(--gold); }
.pf-card h3 a { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--brand-hi); text-decoration: none; letter-spacing: 0; }
.pf-card h3 a:hover { color: var(--text); }
.pf-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pf-pairs a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; background: var(--surface2); clip-path: var(--para-s);
  color: var(--text); text-decoration: none;
}
.pf-pairs a:hover { background: var(--surface3); }
.pf-pairs span { font-size: 0.66rem; color: var(--muted); }
.pf-pairs b { font-family: var(--display); font-style: italic; font-size: 1.35rem; line-height: 1.2; }
.pf-pairs b small { font-size: 0.62em; color: var(--muted2); margin-left: 2px; }
.pf-pairs a > small { font-family: var(--mono); font-size: 0.66rem; color: var(--muted2); }
.pf-firsts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-firsts li { font-size: 0.78rem; font-weight: 700; padding: 4px 12px; color: #16120a; background: var(--gold); clip-path: var(--para-s); }
.pf-suki { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; }
.pf-suki .l { color: var(--like); }
.pf-suki .d { color: var(--dislike); }
.pf-trophies { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pf-trophies li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.pf-trophies li span {
  flex-shrink: 0; min-width: 64px; text-align: center;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; clip-path: var(--para-s); background: var(--surface3); color: var(--muted2);
}
.pf-trophies .tier-bronze span { background: color-mix(in srgb, var(--bronze) 35%, var(--surface)); color: #e8c3a0; }
.pf-trophies .tier-silver span { background: color-mix(in srgb, var(--silver) 30%, var(--surface)); color: #dfe6f0; }
.pf-trophies .tier-gold span { background: color-mix(in srgb, var(--gold) 40%, var(--surface)); color: #ffe7a6; }
.pf-trophies .tier-platinum span { background: color-mix(in srgb, var(--gen) 40%, var(--surface)); color: #d8f4ff; }
.pf-empty { font-size: 0.8rem; color: var(--muted); }
.pf-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* 自分のページ（マイページ）だけに出る欄：実績の全一覧・ガチャ所持品・管理者メニュー */
.pf-own { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.pf-own-note {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted2);
}
.pf-own-note::after { content: ''; flex: 1; height: 1px; background: var(--border2); }
.pf-loan { order: 2; font-family: var(--mono); color: #e05a4f; letter-spacing: 0; }
.pf-own .mypage-admin-links { margin: 0; }
.pf-logout { margin-top: 8px; }
.pf-logout a { color: var(--muted); font-size: 0.78rem; }

/* マイページの装飾変更（2026-11-03）。候補は「付けたときのランキングの1行」をそのまま並べる */
.deco-editor { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; margin-top: 14px; box-shadow: inset 0 0 0 1px var(--border), inset 3px 0 0 var(--brand); }
.deco-editor[hidden] { display: none; }
.deco-editor h3 { justify-content: space-between; margin-bottom: 0; }
.deco-close { padding: 2px 8px; border: 0; background: none; color: var(--muted2); font: inherit; font-size: 0.75rem; cursor: pointer; }
.deco-close:hover { color: var(--text); }
/* 名前の下に出す、自分のページだけのボタン */
.pf-deco-btn {
  align-self: flex-start; margin-top: 10px; padding: 7px 14px; border: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: #fff; background: var(--brand);
}
.pf-deco-btn:hover { filter: brightness(1.1); }
.pf-deco-btn.is-on { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--brand); }
.deco-editor.is-busy { opacity: 0.6; pointer-events: none; }
.deco-editor #deco-editor-body { display: flex; flex-direction: column; gap: 12px; }
.deco-row {
  padding: 8px 12px; min-width: 0; overflow: hidden;
  background: var(--surface2); background-size: cover; background-position: center;
}
.deco-row .uname { max-width: 100%; }
.deco-now { display: flex; flex-direction: column; gap: 6px; }
.deco-now > span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted2); }
.deco-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.deco-opt {
  display: flex; flex-direction: column; text-align: left; min-width: 0;
  padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
}
.deco-opt:hover { box-shadow: inset 0 0 0 1px var(--border2); }
.deco-opt.is-on { box-shadow: inset 0 0 0 2px var(--brand); }
.deco-cap { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px 8px; min-width: 0; }
.deco-cap b { font-size: 0.8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deco-cap small { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.deco-opt.is-on .deco-cap b::before { content: '✓ '; color: var(--brand); }
.deco-extras { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 0.8rem; color: var(--muted2); }
.deco-extras select { margin-left: 6px; padding: 4px 8px; background: var(--surface2); color: var(--text); border: 1px solid var(--border2); font: inherit; }
.deco-holo { align-self: flex-start; }
.deco-trophies { display: flex; flex-wrap: wrap; gap: 6px; }
.deco-trophy {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer;
  font-size: 0.8rem; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border);
}
.deco-trophy.is-on { box-shadow: inset 0 0 0 2px var(--brand); }
.deco-trophy span { font-size: 0.7rem; color: var(--muted); }
.deco-trophy input { accent-color: var(--brand); }
.deco-msg { font-size: 0.8rem; color: var(--muted2); min-height: 1.2em; }
@media (max-width: 480px) { .deco-grid { grid-template-columns: 1fr; } }

/* 未ログインで人のページを見ているとき：自分のページへのログイン案内 */
.pf-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  margin-top: 28px; padding: 18px 22px;
  background: var(--brand-lo); box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px var(--border2);
}
.pf-cta div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-cta b { font-size: 0.95rem; color: var(--text); }
.pf-cta span { font-size: 0.8rem; color: var(--muted2); line-height: 1.6; }

/* /u/me を未ログインで開いたとき */
.pf-login { display: flex; justify-content: center; }
.pf-login-card {
  width: 100%; max-width: 560px; margin-top: 24px; padding: 34px 34px 30px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border2); clip-path: var(--panel);
}
.pf-login-card .page-title { margin-bottom: 6px; }
.pf-login-list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 22px 0 26px; }
.pf-login-list li {
  display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 0;
  font-size: 0.82rem; color: var(--muted2); border-bottom: 1px solid var(--border);
}
.pf-login-list b { color: var(--text); }
.pf-login-btn { display: inline-flex; justify-content: center; padding: 12px 28px; font-size: 0.95rem; }
.pf-login-note { margin-top: 16px; font-size: 0.74rem; color: var(--muted); line-height: 1.7; }
.pf-login-note code { font-family: var(--mono); background: var(--surface2); padding: 1px 5px; }

@media (max-width: 900px) {
  .pf-hero { grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 22px 20px; }
  .pf-chara { display: none; }
  .pf-av .avatar-wrap { width: 76px; height: 76px; }
  .pf-name { font-size: 1.6rem; }
  .pf-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pf-hero { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-login-card { padding: 26px 20px 22px; }
  .pf-login-list li { grid-template-columns: 1fr; gap: 2px; }
  .pf-cta .chip-login-btn { width: 100%; justify-content: center; }
}

/* ランキング等の名前は個人ページへのリンク（app.js linkNamesToProfiles） */
a.uname { text-decoration: none; }
a.uname:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── ヘッダー右上のプレイヤー欄（2026-10-31）──
   ソシャゲのホーム画面のステータス欄のように「自分」を常に見せる。押すとマイページ（/u/:id）、未ログインならログイン。
   中身は app.js loadAccountChip()。旧 .chip-user の置き換え */
.chip-skeleton { width: 230px; height: 46px; }
.player-chip {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 6px 0 4px;
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px var(--border2), inset 3px 0 0 var(--brand);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  text-decoration: none; color: var(--text);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--spring);
}
.player-chip:hover { background: color-mix(in srgb, var(--brand) 16%, var(--surface2)); transform: translateY(-1px); }
.pc-av { position: relative; flex-shrink: 0; width: 38px; height: 38px; margin-left: 4px; }
.pc-img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface3);
  box-shadow: 0 0 0 2px var(--surface2), 0 0 0 4px var(--pc-ring, var(--brand));
}
.pc-guest { fill: var(--muted); --pc-ring: var(--border2); } /* 未ログインのシルエット（頭と肩） */
.pc-lv {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) skewX(var(--skew));
  padding: 0 5px; white-space: nowrap;
  font-family: var(--display); font-style: italic; font-size: 0.6rem; font-weight: 700; line-height: 13px; letter-spacing: 0.02em;
  color: #0b0d1a; background: var(--gold);
}
.is-guest .pc-lv { background: var(--muted2); }
.pc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-k { font-family: var(--display); font-size: 0.56rem; letter-spacing: 0.22em; color: var(--brand-hi); line-height: 1; }
.pc-name {
  font-size: 0.86rem; font-weight: 900; line-height: 1.25;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-bar { display: block; width: 100%; min-width: 90px; height: 4px; background: var(--surface3); transform: skewX(var(--skew)); }
.pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--gen)); }
.pc-rc {
  display: flex; align-items: center; align-self: stretch;
  padding: 0 12px 0 14px; margin-left: 2px; border-left: 1px solid var(--border2);
}
.pc-rc b { font-family: var(--display); font-style: italic; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pc-rc small { font-family: var(--display); font-size: 0.62rem; color: var(--gold); margin-left: 3px; letter-spacing: 0.06em; }
.pc-go {
  align-self: center; margin-left: 4px; padding: 7px 14px;
  font-family: var(--display); font-style: italic; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; background: var(--brand); clip-path: var(--para-s);
  transition: background var(--dur) var(--ease-out);
}
.player-chip.is-guest:hover .pc-go { background: var(--brand-hi); color: #0b0d1a; }
@media (max-width: 900px) {
  .chip-skeleton { width: 150px; height: 42px; }
  .player-chip { height: 42px; gap: 10px; }
  .pc-av { width: 32px; height: 32px; }
  .pc-name { max-width: 84px; font-size: 0.8rem; }
  .pc-bar { min-width: 0; }
  .pc-rc { padding: 0 8px 0 10px; }
  .pc-rc b { font-size: 0.92rem; }
}
@media (max-width: 480px) {
  /* スマホ：ヘッダーが2段に折り返さないよう名前の段は隠し、アイコン・Lv・所持RC（未ログインはLOGIN）だけ残す */
  .chip-skeleton { width: 120px; }
  .player-chip .pc-body { display: none; }
  .pc-rc { border-left: 0; padding-left: 2px; }
  .pc-go { padding: 6px 12px; }
}

/* ── Discordアクティビティ（dashboard/activityHub.js）──────────────────────
   Discordアプリの中の枠で開く。ヘッダー・ナビは出さず、ミニゲームの画面だけ */
/* スマホのDiscordは上に「退出」などの帯が重なる。Discordが渡す安全領域（無ければ端末の安全領域）の分だけ下げる */
.activity-body { background: var(--bg); margin: 0;
  --sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
.activity-wrap { max-width: 900px; margin: 0 auto; padding: calc(12px + var(--sait)) 16px calc(24px + var(--saib)); }
.activity-status { color: var(--muted2); font-size: 0.84rem; margin-bottom: 10px; }
.activity-status[hidden] { display: none; }

/* ── パチンコ「&ROMEDA: LEGENDS」（dashboard/pachinkoHub.js・public/pachinko.js）───────────
   台は canvas。ここは横の操作パネルだけ */
.pk-wrap { max-width: 900px; margin: 0 auto; }
.pk-main { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pk-stage canvas { display: block; width: 100%; max-width: 420px; aspect-ratio: 400 / 720; height: auto; border: 1px solid var(--border2); touch-action: manipulation; }
.pk-meter { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pk-meter span { color: var(--muted2); font-size: 0.84rem; }
.pk-meter b { font-family: var(--mono); font-size: 1.9rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.pk-meter small { color: var(--muted); font-size: 0.74rem; width: 100%; }
.pk-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pk-handle { min-width: 150px; }
.pk-handle.pk-on { background: var(--like); border-color: var(--like); color: #fff; }
.pk-speed { width: auto; }
.pk-power { margin-bottom: 12px; }
.pk-power-tip { margin: 4px 0 0; font-size: 0.74rem; color: var(--muted2); line-height: 1.5; }
.pk-power-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 0.84rem; color: var(--muted2); }
.pk-power-head b { font-family: var(--mono); font-size: 1.1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.pk-lane { margin-left: auto; font-size: 0.78rem; padding: 2px 8px; border: 1px solid var(--border2); }
.pk-lane.pk-lane-right { color: #fff; background: #c2187a; border-color: #c2187a; }
.pk-lane.pk-lane-foul { color: var(--muted); }
.pk-power input[type=range] { width: 100%; accent-color: var(--gold); margin: 2px 0 8px; }
.pk-stats .pk-full { color: var(--gold); }
.pk-toast { background: var(--surface3); border-left: 3px solid var(--gold); padding: 8px 10px; font-size: 0.84rem; margin: 0 0 12px; }
.pk-toast[hidden] { display: none; }
.pk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-bottom: 18px; font-size: 0.86rem; }
.pk-stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding: 4px 0; }
.pk-stats span { color: var(--muted); }
.pk-stats b { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pk-plus { color: #3fd18b; }
.pk-minus { color: var(--like); }
.pk-note { color: var(--muted); font-size: 0.78rem; margin: 0 0 8px; }
.pk-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pk-preset { font-size: 0.78rem; padding: 6px 8px; }
.pk-locked { text-align: center; padding: 48px 16px; color: var(--muted2); }
.pk-locked[hidden], .pk-main[hidden] { display: none; }
@media (max-width: 720px) {
  .pk-main { grid-template-columns: 1fr; }
  .pk-stage canvas { margin: 0 auto; }
}

/* ── 全ページ下のフッター・プライバシーポリシー（2026-10-31、特権インテント審査用）── */
.site-foot { max-width: 1180px; margin: 0 auto; padding: 28px 40px 40px; text-align: center; }
.site-foot a { font-size: 0.72rem; color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.privacy { max-width: 820px; }
.privacy-sec { margin-top: 12px; padding: 20px 24px; }
.privacy-sec h3 { font-size: 0.95rem; font-weight: 900; margin-bottom: 10px; }
.privacy-sec p, .privacy-sec li { font-size: 0.86rem; line-height: 1.85; color: var(--muted2); }
.privacy-sec p + p, .privacy-sec ul + p { margin-top: 8px; }
.privacy-sec ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.privacy-sec b { color: var(--text); }
.privacy-sec code { font-family: var(--mono); font-size: 0.82em; background: var(--surface2); padding: 1px 5px; }
@media (max-width: 900px) { .site-foot { padding: 24px 16px 32px; } .privacy-sec { padding: 16px 16px; } }

/* ── お知らせ（2026-10-31〜。/news・/news/:id・概要の帯。dashboard/newsHub.js） ── */
.news-strip {
  display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px 18px 10px 0;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); clip-path: var(--panel);
  color: var(--text); font-size: 0.85rem; text-decoration: none;
  transition: background var(--dur-fast);
}
.news-strip:hover { background: var(--surface2); }
.ns-label {
  align-self: stretch; display: flex; align-items: center;
  margin: -10px 2px -10px 0; padding: 0 20px 0 18px;
  background: var(--brand); color: #fff;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.ns-date, .nc-date { font-family: var(--display); color: var(--muted2); letter-spacing: 0.04em; }
.ns-tag, .nc-tag, .nc-pin {
  padding: 1px 8px; font-size: 0.72rem; font-weight: 700;
  color: var(--gen); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gen) 55%, transparent);
}
.nc-pin { color: var(--brand-hi); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent); }
.ns-title { font-weight: 700; flex: 1 1 240px; min-width: 0; }
.ns-go { color: var(--muted2); margin-left: auto; }

.news-list { display: grid; gap: 10px; }
.news-card {
  display: block; padding: 16px 20px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); clip-path: var(--panel);
  color: var(--text); text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.news-card:hover { background: var(--surface2); transform: translateX(3px); }
.news-card.is-pinned { box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px var(--border); }
.nc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 0.8rem; }
.nc-title { margin: 0; font-size: 1.05rem; }
.nc-summary { margin: 6px 0 0; color: var(--muted2); font-size: 0.86rem; }

.news-article { max-width: 760px; }
.news-body { line-height: 1.85; font-size: 0.95rem; }
.news-body h3 {
  margin: 30px 0 10px; padding-left: 12px; font-size: 1.05rem;
  box-shadow: inset 3px 0 0 var(--gen);
}
.news-body ul { margin: 6px 0 14px; padding-left: 1.3em; }
.news-body li { margin: 3px 0; }
.news-body li::marker { color: var(--gen); }
.news-body b { color: var(--text); }
.news-body a { color: var(--brand-hi); }
.news-back { margin-top: 36px; }

.news-form { display: grid; gap: 12px; margin-bottom: 28px; max-width: 760px; }
.news-form label { display: grid; gap: 4px; font-size: 0.82rem; color: var(--muted2); }
.news-form textarea { font-family: inherit; line-height: 1.6; resize: vertical; }
.news-form .news-check { display: flex; align-items: center; gap: 8px; }

/* 個人ページ: ロメコインの入手経路（2026-11-01） */
.pf-card-wide { grid-column: 1 / -1; }
.pf-routes-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.pf-routes-h { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
.pf-routes { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pf-routes li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.8rem; }
.pf-routes li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted2); }
.pf-routes li i { display: block; height: 8px; transform: skewX(var(--skew)); }
.pf-routes.in li i { background: var(--gold); }
.pf-routes.out li i { background: color-mix(in srgb, #f87171 75%, transparent); }
.pf-routes li b { font-family: var(--display); font-style: italic; font-variant-numeric: tabular-nums; text-align: right; min-width: 5em; }
.pf-routes.in li b { color: var(--text); }
.pf-routes.out li b { color: #f87171; }
.pf-note { margin-top: 12px; font-size: 0.7rem; color: var(--muted); }
@media (max-width: 720px) { .pf-routes-cols { grid-template-columns: 1fr; } }

/* 個人ページ: ガチャをシーズン（ロメコインの期）ごとに（2026-11-01） */
.pf-gacha { display: flex; flex-direction: column; gap: 14px; }
.pf-gacha-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 0.8rem; }
.pf-gacha-head span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; padding: 1px 7px; clip-path: var(--para-s); background: var(--gen-lo); color: var(--gen); }
.pf-gacha-season.past .pf-gacha-head span { background: var(--surface3); color: var(--muted2); }
.pf-gacha-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-size: 0.7rem; color: var(--muted); }
.pf-gacha-row b { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--text); margin-right: 12px; }
.pf-gacha-row b small { font-size: 0.62em; color: var(--muted2); margin-left: 2px; }
.pf-gacha-season.past .pf-bar i { background: var(--muted); }
.pf-gacha-best { margin-top: 6px; font-size: 0.72rem; color: var(--muted); }
.pf-gacha-best b { color: var(--text); margin-right: 6px; }
.pf-gacha-best span { font-family: var(--mono); font-size: 0.62rem; color: var(--gold); }

/* ── 初めて来た人向けの紹介（概要ページの先頭・mainPages.js welcomeHtml。2026-11-05 公開サイト化）──
   ぼかし・グローは使わず、面と線と斜めのカットだけ */
.wc { margin: 4px 0 22px; padding: 26px 28px 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); clip-path: var(--panel); }
.wc-eyebrow { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--gen); margin-bottom: 8px; }
.wc-title { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 900; line-height: 1.45; letter-spacing: 0.01em; }
.wc-lead { margin-top: 12px; max-width: 760px; font-size: 0.92rem; line-height: 1.9; color: var(--muted2); }
.wc-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin: 20px 0 18px; }
.wc-stats li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface2); clip-path: var(--para-s); }
.wc-stats b { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.wc-stats b small { font-size: 0.9rem; margin-left: 2px; color: var(--muted2); }
.wc-stats span { font-size: 0.74rem; color: var(--muted); }
.wc-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.wc-join {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 34px; background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 900; font-size: 1.02rem; letter-spacing: 0.04em; clip-path: var(--para);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.wc-join:hover { background: var(--brand-hi); color: #06070b; transform: translateY(-1px); }
.wc-join-sm { padding: 9px 22px; font-size: 0.86rem; }
.wc-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-code-label { font-size: 0.72rem; color: var(--muted); }
.wc-code code { font-family: var(--mono); font-size: 0.92rem; color: var(--text); background: var(--surface2); padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--border2); }
.wc-sub { margin: 26px 0 10px; font-size: 0.95rem; font-weight: 900; }
.wc-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.wc-feature { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px 16px; background: var(--surface2); color: var(--text); text-decoration: none; clip-path: var(--panel); transition: background var(--dur-fast); }
.wc-feature:hover { background: var(--surface3); }
.wc-ico { grid-row: span 2; display: flex; align-items: flex-start; color: var(--gen); padding-top: 2px; }
.wc-ico .ico { width: 22px; height: 22px; }
.wc-feature b { font-size: 0.9rem; }
.wc-feature span:not(.wc-ico) { font-size: 0.78rem; line-height: 1.7; color: var(--muted2); }
.wc-steps { list-style: none; counter-reset: wc; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.wc-steps li { counter-increment: wc; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 52px; position: relative; background: var(--surface2); }
.wc-steps li::before { content: counter(wc); position: absolute; left: 16px; top: 12px; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.5rem; color: var(--gen); }
.wc-steps b { font-size: 0.88rem; }
.wc-steps span { font-size: 0.78rem; line-height: 1.7; color: var(--muted2); }
.wc-steps code { font-family: var(--mono); font-size: 0.85em; background: var(--surface3); padding: 1px 5px; }
.wc-member { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 20px; }
.wc-member-lead { font-size: 0.86rem; color: var(--muted2); }
.wc-invite-compact .wc-join { padding: 9px 22px; font-size: 0.86rem; }
.foot-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-bottom: 18px; padding: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); clip-path: var(--panel); }
.foot-join p { font-size: 0.84rem; color: var(--muted2); }
.foot-join b { color: var(--text); }
.site-foot .foot-join a.wc-join { font-size: 0.86rem; color: #fff; text-decoration: none; }
.site-foot .foot-join a.wc-join:hover { color: #06070b; }
@media (max-width: 900px) {
  .wc { padding: 20px 16px 22px; }
  .wc-br { display: none; }
  .wc-join { width: 100%; }
  .wc-stats { grid-template-columns: repeat(2, 1fr); }
}
.wc-code-link { text-decoration: none; }
.wc-code-link code { transition: box-shadow var(--dur-fast), color var(--dur-fast); }
.wc-code-link:hover code { color: var(--brand-hi); box-shadow: inset 0 0 0 1px var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ══ シンプル化（2026-11-05）══════════════════════════════════════════════════
   旧デザイン(Refined HUD)の形・色はそのまま、重なっていた飾りだけを減らす。
   - 各ページ背景の流れる英字＋世代HUD、概要の白抜き巨大文字の帯をやめる（概要の回るXXリングだけ残す）
   - 見出しの上の英字ラベル（EXPERIENCE 等）をやめる
   - 表彰台(1〜3位)の行の金・銅の色敷きをやめ、順位の札も暗い面に。色は左端の細い線とメダルだけ（茶色っぽく見えるため）
   - 見出しの文字入れ替わり・カードの傾きは app.js initMotion で停止 */
.page-backdrop, .hero-marquee { display: none !important; }
.page-title::before, .tab-header :is(h1, h2)::before, .wk-h1::before, .fh-h1::before, #gacha > :is(h1, h2)::before, #romerank > :is(h1, h2)::before, #constitution > :is(h1, h2)::before { content: none; display: none; }
.rr-eyebrow { display: none; }
tbody tr.podium, .table-wrap tbody tr.podium { background-color: var(--surface); background: var(--surface); }
tbody tr.podium:hover, .table-wrap tbody tr.podium:hover { background: var(--surface2); }
.table-wrap tr.podium td.rank::before { background: var(--surface3); box-shadow: inset 3px 0 0 var(--pc); }
.table-wrap tr.podium td.rank { color: var(--text); }

/* ══ 公式サイトの入口ページ（siteHub.js /about /guide /features。2026-11-09）══════════════
   ぼかし・グローは使わず、既存の面と線だけ。茶色・金は使わない */
.st-page { max-width: 880px; }
.st-page .wc-stats { margin: 18px 0 6px; }
.st-sec { margin-top: 12px; padding: 22px 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); scroll-margin-top: 90px; }
.st-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 900; margin-bottom: 12px; }
.st-sec h3 { font-size: 0.9rem; font-weight: 900; margin-bottom: 8px; }
.st-sec p, .st-sec li { font-size: 0.9rem; line-height: 1.9; color: var(--muted2); }
.st-sec p + p, .st-sec ul + p, .st-sec p + ul, .st-sec ol + p { margin-top: 8px; }
.st-sec ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.st-sec b { color: var(--text); }
.st-sec code, .st-page .wc-steps code { font-family: var(--mono); font-size: 0.86em; background: var(--surface3); padding: 1px 5px; }
.st-sec a, .page-about a, .wc-more a { color: var(--gen); text-underline-offset: 3px; }
.st-ico { display: inline-flex; color: var(--gen); }
.st-ico .ico { width: 20px; height: 20px; }
.st-rank { list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.st-rank li { counter-increment: st; display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; background: var(--surface2); }
.st-rank li::before { content: counter(st); min-width: 1.4em; font-family: var(--display); font-style: italic; font-weight: 700; color: var(--gen); }
.st-rank li a { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); text-decoration: none; }
.st-rank li a:hover { text-decoration: underline; }
.st-rank li span { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.st-time { list-style: none; display: flex; flex-direction: column; }
.st-time li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.st-time li:first-child { border-top: 0; }
.st-time time { font-family: var(--mono); font-size: 0.8rem; color: var(--gen); padding-top: 2px; }
.st-table-wrap { overflow-x: auto; }
.st-gen td { white-space: nowrap; }
.st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st-faq { display: flex; flex-direction: column; }
.st-faq > div { padding: 12px 0; border-top: 1px solid var(--border); }
.st-faq > div:first-child { border-top: 0; padding-top: 0; }
.st-faq dt { font-size: 0.92rem; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.st-faq dd { font-size: 0.88rem; line-height: 1.85; color: var(--muted2); margin: 0; }
.st-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 12px; padding: 20px 26px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); }
.st-cta p { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.st-next, .st-links, .wc-more, .page-about-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.st-next { margin-top: 18px; font-size: 0.86rem; }
.st-next a { color: var(--gen); }
.st-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.st-toc a { padding: 6px 12px; font-size: 0.8rem; color: var(--muted2); text-decoration: none; background: var(--surface2); }
.st-toc a:hover { color: var(--text); background: var(--surface3); }
.st-steps { grid-template-columns: 1fr; }
.st-steps a { color: var(--gen); }
.wc-more { margin-top: 12px; font-size: 0.86rem; }
.page-about { max-width: 1180px; margin: 28px auto 0; padding: 0 40px; }
.page-about h2 { font-size: 0.92rem; font-weight: 900; margin-bottom: 6px; color: var(--muted2); }
.page-about p { font-size: 0.82rem; line-height: 1.85; color: var(--muted); max-width: 760px; }
.page-about-links { margin-top: 6px; font-size: 0.8rem; }
.foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; margin: 4px 0 20px; text-align: left; }
.foot-nav div { display: flex; flex-direction: column; gap: 4px; }
.foot-nav b { font-size: 0.74rem; color: var(--muted2); margin-bottom: 2px; }
@media (max-width: 900px) {
  .st-sec, .st-cta { padding: 16px; }
  .st-two { grid-template-columns: 1fr; }
  .st-time li { grid-template-columns: 1fr; gap: 2px; }
  .st-cta .wc-join { width: 100%; }
  .page-about { padding: 0 16px; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ══ ロメダカジノ /casino（2026-11-10〜）══════════════════════════════
   結果画像(casinoImage.js)と同じシリーズ。細い銀の二重線、白黒反転で強調、ぼかしと斜線は使わない */
#casino.csn { max-width: 960px; margin: 0 auto; padding: 24px 16px 56px; }
.csn-frame {
  position: relative; padding: 30px clamp(14px, 3vw, 32px) 32px;
  background: var(--csn-bg); color: var(--csn-white);
  border: 1px solid var(--csn-silver-dim); outline: 1px solid var(--csn-silver-dark); outline-offset: -6px;
}
.csn-hero { text-align: center; margin-bottom: 22px; }
.csn-band { display: flex; align-items: center; gap: 14px; color: var(--csn-silver); }
.csn-band::before, .csn-band::after { content: ''; flex: 1; border-top: 1px solid var(--csn-silver-dark); }
.csn-band span { font: 400 0.72rem var(--csn-didot); letter-spacing: 0.32em; white-space: nowrap; }
.csn-hero h1, .csn-hero h2 {
  margin: 14px 0 0; padding: 0; border: 0; background: none; text-transform: none;
  font: 400 clamp(1.9rem, 6vw, 3rem)/1.1 var(--csn-didot); letter-spacing: 0.16em; color: var(--csn-white);
}
.csn-hero small { display: block; margin-top: 10px; font: 400 0.72rem var(--csn-serif); letter-spacing: 0.2em; color: var(--csn-silver-dim); }

.csn-period { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; }
.csn-period button {
  padding: 6px 14px; background: none; color: var(--csn-silver-dim); cursor: pointer;
  border: 1px solid var(--csn-silver-dark); border-radius: 0; font: 400 0.75rem var(--csn-serif);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.csn-period button:hover { color: var(--csn-white); border-color: var(--csn-silver-dim); }
.csn-period button.active { background: var(--csn-white); border-color: var(--csn-white); color: var(--csn-ink); }

.csn-totals dl, .csn-game-stats { display: grid; margin: 0; }
.csn-totals dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--csn-silver-dim); border-bottom: 1px solid var(--csn-silver-dark);
  padding: 3px 0; margin-bottom: 24px; position: relative;
}
.csn-totals dl > div { padding: 12px 6px; text-align: center; border-left: 1px solid var(--csn-silver-dark); min-width: 0; }
.csn-totals dl > div:first-child { border-left: 0; }
.csn dt { font: 700 0.62rem var(--csn-num); letter-spacing: 0.18em; color: var(--csn-silver-dim); }
.csn dd { margin: 5px 0 0; font: 600 clamp(0.9rem, 2.4vw, 1.15rem) var(--csn-num); color: var(--csn-silver); overflow-wrap: anywhere; }
.csn dd small { margin-left: 3px; font-size: 0.62em; color: var(--csn-silver-dim); }
.csn-totals .strong dd { font-weight: 800; font-size: clamp(1rem, 3vw, 1.4rem); color: var(--csn-white); }

.csn-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; background: var(--csn-silver-dark); border: 1px solid var(--csn-silver-dark); }
.csn-tab {
  padding: 11px 4px; background: var(--csn-bg); border: 0; border-radius: 0;
  color: var(--csn-silver-dim); cursor: pointer; min-width: 0; transition: color var(--dur-fast);
}
.csn-tab b { display: block; font: 400 clamp(0.62rem, 1.7vw, 0.86rem) var(--csn-didot); letter-spacing: 0.08em; }
.csn-tab span { display: block; margin-top: 3px; font: 400 0.62rem var(--csn-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csn-tab:hover { color: var(--csn-white); }
.csn-tab.active { background: var(--csn-white); color: var(--csn-ink); }

.csn-pane { display: none; }
.csn-pane.active { display: block; }
.csn-game {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center;
  padding: 16px 18px; margin-bottom: 14px; background: var(--csn-felt);
  border: 1px solid var(--csn-felt-line); outline: 1px solid var(--csn-felt-line); outline-offset: 3px;
}
.csn-game-name { font: 400 1.25rem var(--csn-didot); letter-spacing: 0.12em; color: var(--csn-white); }
.csn-game-name small { margin-left: 10px; font: 400 0.7rem var(--csn-serif); letter-spacing: 0.06em; color: var(--csn-silver-dim); }
.csn-game-text p { margin: 7px 0 9px; font-size: 0.8rem; line-height: 1.7; color: var(--csn-silver); }
.csn-game-text code { padding: 2px 8px; background: none; border: 1px solid var(--csn-silver-dark); font: 400 0.75rem var(--mono); color: var(--csn-white); }
.csn-game-stats { grid-template-columns: repeat(2, minmax(84px, auto)); gap: 10px 20px; }
.csn-game-stats dd { font-size: 0.92rem; }

/* ルール（開くと説明画像と遊び方） */
.csn-rules { margin: -4px 0 16px; border: 1px solid var(--csn-silver-dark); background: var(--csn-felt); }
.csn-rules summary { padding: 11px 16px; cursor: pointer; font: 700 0.85rem var(--csn-serif); color: var(--csn-white); }
.csn-rules summary:hover { background: #1b1c1e; }
.csn-rules[open] summary { border-bottom: 1px solid var(--csn-silver-dark); }
.csn-rules img { display: block; width: 100%; max-width: 680px; height: auto; margin: 14px auto; }
.csn-rules h3 { margin: 14px 16px 6px; padding: 0; border: 0; background: none; font: 700 0.82rem var(--csn-serif); color: var(--csn-white); text-transform: none; }
.csn-rules ol, .csn-rules ul { margin: 0 16px 14px 34px; color: var(--csn-silver); font-size: 0.85rem; line-height: 1.8; }
.csn-rules b { color: var(--csn-white); }

/* 表は既存の casinoTable をそのまま使い、色だけカジノに合わせる */
.csn-table table { background: var(--csn-felt); border: 1px solid var(--csn-felt-line); border-radius: 0; }
.csn-table th { background: none; color: var(--csn-silver-dim); border-color: var(--csn-silver-dark); }
.csn-table td { border-color: var(--csn-felt-line); }
.csn-table .profit-pos { color: var(--csn-white); font-weight: 700; }
.csn-table .profit-neg { color: var(--csn-silver-dim); }
.csn-table > .loading, .csn-table > .error { background: var(--csn-felt); border-color: var(--csn-felt-line); color: var(--csn-silver-dim); }

@media (max-width: 640px) {
  .csn-totals dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csn-totals dl > div:nth-child(3) { border-left: 0; }
  .csn-totals dl > div:nth-child(n+3) { border-top: 1px solid var(--csn-silver-dark); }
  .csn-game { grid-template-columns: minmax(0, 1fr); }
  .csn-game-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .csn-tab b { letter-spacing: 0; }
  .csn-tab span { display: none; }
  .csn dt { letter-spacing: 0.08em; }
}

/* カジノの表：斜めの順位札・金銀銅の帯・斜体の数字をやめて、フェルトに銀の罫線だけにする */
.csn .table-wrap tbody tr, .csn .table-wrap tbody tr.podium { --row-ac: transparent; background-color: var(--csn-felt); }
.csn .table-wrap tbody tr:hover, .csn .table-wrap tbody tr.podium:hover { --row-ac: transparent; background-color: #1b1c1e; transform: none; }
.csn .table-wrap td { border-bottom: 1px solid var(--csn-felt-line); }
.csn .table-wrap td.rank { font: 700 0.95rem var(--csn-num); font-style: normal; color: var(--csn-silver); transform: none; }
.csn .table-wrap tr.podium td.rank { font-size: 1.15rem; color: var(--csn-white); }
.csn .table-wrap td.rank::before, .csn .table-wrap td.rank::after,
.csn .table-wrap tr.podium td.rank::before { display: none; }
.csn .table-wrap tbody td.r.num, .csn .table-wrap tbody td.num, .csn .table-wrap tr.podium td.num {
  font-family: var(--csn-num); font-style: normal; font-weight: 600; font-size: 0.95rem; color: var(--csn-silver); transform: none;
}
.csn .table-wrap tbody td.r.num.profit-pos { color: var(--csn-white); font-weight: 800; }
.csn .table-wrap tbody td.r.num.profit-neg { color: var(--csn-silver-dim); }
.csn .table-wrap th { font-family: var(--csn-num); letter-spacing: 0.12em; font-style: normal; }
.csn .rank-search { background: none; clip-path: none; border: 1px solid var(--csn-silver-dark); border-radius: 0; box-shadow: none; color: var(--csn-silver-dim); }
.csn .rank-search:focus-within { border-color: var(--csn-silver); box-shadow: none; color: var(--csn-white); }
.csn .rank-search input { color: var(--csn-white); font-family: var(--csn-serif); }
.csn .rank-tools { margin: 0 0 12px; color: var(--csn-silver-dim); }

/* ══ 花札（public/hanafuda.js・サイトとアクティビティ共通）2026-11-10〜 ══
   墨と朱だけ。ぼかし・グローは使わず、強調は枠線と位置で出す */
.hf-page { max-width: 1040px; }
.hf-app { --hf-ink: #0c0d10; --hf-panel: #15171c; --hf-line: #2c2f37; --hf-paper: #f2efe6; --hf-red: #c8202f; --hf-card-w: clamp(46px, 9.2vw, 74px); color: var(--text); font-family: var(--font); }
.hf-loading, .hf-note { color: var(--muted2); font-size: 0.84rem; line-height: 1.6; }
.hf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.hf-title { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-size: 2rem; font-weight: 400; color: var(--hf-paper); }
.hf-sub { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.hf-mystat { font-size: 0.9rem; color: var(--muted2); white-space: nowrap; }
.hf-msg { background: var(--hf-panel); border-left: 3px solid var(--hf-red); padding: 8px 12px; font-size: 0.86rem; margin: 0 0 10px; }
.hf-panel { background: var(--hf-panel); border: 1px solid var(--hf-line); padding: 14px; margin-bottom: 12px; min-width: 0; }
.hf-panel h2 { font-size: 0.95rem; font-weight: 700; color: var(--hf-paper); margin-bottom: 8px; }
.hf-start { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.hf-columns .hf-panel { margin-bottom: 0; }
.hf-rules { margin-top: 12px; font-size: 0.86rem; line-height: 1.7; }
.hf-rules summary { cursor: pointer; font-weight: 700; color: var(--hf-paper); }
.hf-rules p { margin: 8px 0; color: var(--muted2); }
.hf-yaku { width: 100%; border-collapse: collapse; }
.hf-yaku td { border-top: 1px solid var(--hf-line); padding: 5px 6px; }
.hf-yaku td:first-child { font-weight: 700; white-space: nowrap; }
.hf-yaku td:last-child { text-align: right; white-space: nowrap; }
.hf-btn { appearance: none; background: transparent; border: 1px solid var(--border2); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 700; padding: 10px 16px; cursor: pointer; text-decoration: none; display: inline-block; transition: background var(--dur-fast), border-color var(--dur-fast); }
.hf-btn:hover { border-color: var(--hf-paper); }
.hf-btn:disabled { opacity: 0.5; cursor: default; }
.hf-btn-primary { background: var(--hf-red); border-color: var(--hf-red); color: #fff; }
.hf-btn-primary:hover { background: #a81a27; border-color: #a81a27; }
.hf-link-btn { appearance: none; background: none; border: none; color: var(--muted2); font: inherit; font-size: 0.78rem; cursor: pointer; padding: 4px 6px; }
.hf-link-btn:hover { color: var(--text); }
.hf-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: none; border: none; border-top: 1px solid var(--hf-line); padding: 9px 2px; color: var(--text); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
button.hf-row:hover { background: #1c1f26; }
.hf-row-static { cursor: default; }
.hf-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-row-side { color: var(--muted2); font-size: 0.78rem; white-space: nowrap; }
.hf-rank { display: inline-block; width: 1.5em; color: var(--muted); font-weight: 700; }
.hf-center { text-align: center; padding: 28px 16px; }
.hf-center h2 { font-size: 1.2rem; margin-bottom: 10px; }
.hf-waiting .hf-modal-actions { justify-content: center; }

/* 札 */
.hf-card { appearance: none; display: inline-block; flex: none; width: var(--hf-card-w); aspect-ratio: 512 / 839; padding: 0; border: 0; border-radius: 3px; background: #000; overflow: hidden; cursor: pointer; position: relative; font-family: var(--font); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.hf-card img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.hf-card-back { background: #000; outline: 1px solid #4a4e58; outline-offset: -1px; cursor: default; }
.hf-card-mini { --hf-card-w: clamp(19px, 3.1vw, 28px); cursor: default; pointer-events: none; }
.hf-card.is-idle { cursor: default; }
.hf-card.has-match { box-shadow: 0 0 0 2px var(--hf-paper); }
.hf-card.is-selected { transform: translateY(-12px); box-shadow: 0 0 0 3px var(--hf-red); }
.hf-card.is-target { box-shadow: 0 0 0 3px var(--hf-red), 0 0 0 6px var(--hf-paper); transform: translateY(-3px); }

/* 対局 */
.hf-game { position: relative; display: flex; flex-direction: column; gap: 8px; }
.hf-topbar { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted2); }
.hf-month { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-size: 1rem; color: var(--hf-paper); margin-right: auto; }
.hf-tag { display: inline-block; border: 1px solid var(--border2); font-size: 0.68rem; padding: 1px 6px; color: var(--muted2); white-space: nowrap; }
.hf-tag-red { background: var(--hf-red); border-color: var(--hf-red); color: #fff; }
.hf-timer { height: 3px; background: var(--hf-line); }
.hf-timer i { display: block; height: 100%; width: 0; background: var(--hf-paper); }
.hf-timer i.is-low { background: var(--hf-red); }
.hf-player { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 7px 10px; background: var(--hf-panel); border-left: 3px solid var(--hf-line); }
.hf-player.is-active { border-left-color: var(--hf-red); }
.hf-player-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hf-player-name { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-player-side { display: flex; align-items: baseline; gap: 10px; }
.hf-hand-count { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.hf-mon { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-size: 1.25rem; color: var(--hf-paper); white-space: nowrap; }
.hf-mon small { font-size: 0.7rem; margin-left: 2px; }
.hf-player-yaku { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.72rem; }
.hf-player-yaku span { color: #fff; background: var(--hf-red); padding: 1px 6px; }
.hf-captured { display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 18px; }
.hf-cap-group { display: flex; align-items: center; gap: 4px; }
.hf-cap-label { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.hf-cap-label b { color: var(--muted2); margin-left: 2px; }
.hf-cap-cards { display: flex; }
.hf-cap-cards .hf-card + .hf-card { margin-left: -8px; }
.hf-opp-hand { display: flex; justify-content: center; }
.hf-opp-hand .hf-card { --hf-card-w: clamp(16px, 2.6vw, 24px); }
.hf-opp-hand .hf-card + .hf-card { margin-left: 3px; }
.hf-table { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--hf-ink); border: 1px solid var(--hf-line); min-height: calc(var(--hf-card-w) * 1.6 + 26px); }
.hf-deck { position: relative; flex: none; }
.hf-deck .hf-card { --hf-card-w: clamp(36px, 7vw, 56px); display: block; }
.hf-deck b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 1.9em; padding: 1px 4px; text-align: center; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 0.86rem; }
.hf-field { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
.hf-drawn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--muted2); }
.hf-status { min-height: 1.3em; text-align: center; font-weight: 700; font-size: 0.92rem; color: var(--hf-paper); }
.hf-move { min-height: 1.2em; text-align: center; font-size: 0.76rem; color: var(--muted); }
.hf-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 10px; }
.hf-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.72); }
.hf-modal-box { width: min(440px, 100%); max-height: 90vh; overflow: auto; background: var(--hf-panel); border: 1px solid var(--hf-line); border-top: 4px solid var(--hf-red); padding: 20px; text-align: center; }
.hf-modal-box h2 { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-size: 1.7rem; font-weight: 400; color: var(--hf-paper); margin-bottom: 6px; }
.hf-modal-box h3 { font-size: 1rem; margin-bottom: 6px; }
.hf-modal-kicker { color: var(--muted2); font-size: 0.78rem; margin-bottom: 4px; }
.hf-modal-yaku { font-size: 0.86rem; color: var(--muted2); margin-bottom: 6px; }
.hf-modal-points { font-size: 0.95rem; margin-bottom: 8px; }
.hf-modal-points b { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-size: 2.2rem; font-weight: 400; color: var(--hf-paper); }
.hf-modal-points small { display: block; color: var(--muted); font-size: 0.74rem; }
.hf-modal-score { font-size: 0.86rem; margin-bottom: 14px; overflow-wrap: anywhere; }
.hf-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 12px 0 8px; }
.hf-modal-actions .hf-btn { min-width: 130px; }
.activity-wrap-hf { max-width: 1040px; }
@media (max-width: 560px) {
  .hf-app { --hf-card-w: min(11.2vw, 48px); }
  .hf-table { padding: 8px; gap: 8px; }
  .hf-field { gap: 4px; }
  .hf-hand { gap: 4px; }
  .hf-title { font-size: 1.6rem; }
}
.hf-card.is-new { animation: hf-drop var(--dur) var(--ease-out); }
@keyframes hf-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hf-card.is-new { animation: none; } }
.hf-credit { margin-top: 12px; color: var(--muted); font-size: 0.7rem; line-height: 1.5; }
.hf-credit a { color: var(--muted2); text-decoration: underline; }

/* ── 絡みランキング（/relations?view=karami・2026-11-11）── */
.karami-since { color: var(--muted); font-size: 0.75rem; margin: 8px 0 12px; }
.karami-partners { font-size: 0.75rem; color: var(--muted2); max-width: 280px; }
.karami-partners a { color: inherit; text-decoration: none; }
.karami-partners a:hover { text-decoration: underline; }
@media (max-width: 640px) { #karami-table-wrap .hide-sm { display: none; } }
.pf-karami { margin-top: 8px; font-size: 0.75rem; color: var(--muted2); line-height: 1.7; }
.pf-karami a { color: inherit; text-decoration: none; }
.pf-karami a:hover { text-decoration: underline; }

/* 宝くじロメ6のタブ（2026-11-12〜）: 見出しだけ足す。表はカジノの表をそのまま使う */
.csn-sub { margin: 22px 0 8px; padding: 0; border: 0; background: none; font: 400 0.95rem var(--csn-didot); letter-spacing: 0.12em; color: var(--csn-white); }
.csn-table td small { color: var(--csn-silver-dim); font-size: 0.72rem; }

/* ── 正解・不正解ランキング（/seikai, 2026-11-12） ── */
#answers-kind-bar { margin-bottom: 10px; }
.answers-table .ans-cell { min-width: 0; }
.answers-table .ans-text { margin: 8px 0 4px; font-size: 0.92rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch; }
.answers-table .ans-empty { color: var(--muted); }
.answers-table .ans-meta { font-size: 0.72rem; color: var(--muted); }
.answers-table .ans-meta a { color: var(--muted2); }
.answers-table .ans-count { font-size: 1.15rem; vertical-align: top; padding-top: 16px; }
@media (max-width: 640px) { .answers-table .ans-text { font-size: 0.86rem; } }

/* ── 花札の演出（2026-11-13〜）: 電脳空間で打つ花札の雰囲気。ぼかし・光彩は使わず、平らな色・線・段階的な点滅だけ ── */
.hf-app { --hf-cyber: #38bdf8; --hf-grid: rgba(56, 189, 248, 0.09); --hf-deep: #070b16; }
.hf-table { position: relative; background-color: var(--hf-deep); background-image: linear-gradient(var(--hf-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hf-grid) 1px, transparent 1px); background-size: 22px 22px; border-color: #1d2a44; }
.hf-table::before, .hf-table::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--hf-cyber); pointer-events: none; }
.hf-table::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hf-table::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hf-timer { height: 4px; background: #131a2c; }
.hf-timer i { background-color: transparent; background-image: repeating-linear-gradient(90deg, var(--hf-cyber) 0 6px, transparent 6px 8px); }
.hf-timer i.is-low { background-color: transparent; background-image: repeating-linear-gradient(90deg, var(--hf-red) 0 6px, transparent 6px 8px); }
.hf-watchers:not(:empty) { font-family: var(--mono); font-size: 0.72rem; color: var(--hf-cyber); border: 1px solid #1d3550; padding: 1px 6px; }
.hf-player.is-active .hf-player-main::after { content: 'TURN'; font: 700 0.6rem/1.5 var(--mono); letter-spacing: 0.08em; color: #06101f; background: var(--hf-cyber); padding: 0 5px; animation: hf-blink 1.1s steps(2, jump-none) infinite; }
@keyframes hf-blink { 50% { opacity: 0.25; } }
.hf-card.is-flying { z-index: 20; }
.hf-backface { position: absolute; inset: 0; background: #000 center / contain no-repeat; pointer-events: none; }

/* 役・こいこいの大きな文字（画面中央の帯） */
.hf-fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.hf-ann { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.hf-ann-band { position: relative; background: #f4f1e8; color: #0c0d10; text-align: center; padding: 14px 16px 16px; border-top: 4px solid var(--hf-red, #c8202f); border-bottom: 4px solid var(--hf-red, #c8202f); animation: hf-band 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; overflow: hidden; }
.hf-ann-band::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 4px); pointer-events: none; }
.hf-ann-band small { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: #4b4e57; }
.hf-ann-band strong { display: block; font-family: 'Zen Antique', 'Noto Serif JP', serif; font-weight: 400; font-size: clamp(2.6rem, 11vw, 5.4rem); line-height: 1.15; animation: hf-stamp 1.9s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.hf-ann-band em { display: block; font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; color: #c8202f; }
.hf-ann-koi .hf-ann-band { background: #c8202f; color: #fff; border-color: #fff; }
.hf-ann-koi .hf-ann-band small, .hf-ann-koi .hf-ann-band em { color: #ffe3e5; }
.hf-ann-koi .hf-ann-band::after { content: 'KOI-KOI  KOI-KOI  KOI-KOI  KOI-KOI  KOI-KOI  KOI-KOI'; position: absolute; left: 0; bottom: 2px; white-space: pre; font: 700 0.62rem var(--mono); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.35); animation: hf-ticker 1.9s linear both; }
@keyframes hf-band { 0% { transform: scaleY(0); } 10% { transform: scaleY(1); } 84% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes hf-stamp { 0% { transform: scale(2.2); opacity: 0; } 12% { transform: scale(0.94); opacity: 1; } 18% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes hf-ticker { from { transform: translateX(0); } to { transform: translateX(-30%); } }
@media (prefers-reduced-motion: reduce) {
  .hf-ann-band, .hf-ann-band strong, .hf-ann-koi .hf-ann-band::after, .hf-player.is-active .hf-player-main::after { animation: none; }
}

/* ── 花札の「役と遊び方」（札の絵つき、2026-11-13） ── */
.hf-guide { padding: 16px; }
.hf-guide-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hf-guide-head h2 { margin: 0; }
.hf-guide-tabs { display: flex; border: 1px solid var(--hf-line); }
.hf-guide-tabs button { appearance: none; background: none; border: 0; border-right: 1px solid var(--hf-line); color: var(--muted2); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 7px 14px; cursor: pointer; }
.hf-guide-tabs button:last-child { border-right: 0; }
.hf-guide-tabs button.is-on { background: var(--hf-red); color: #fff; }
.hf-guide-pane { display: none; }
.hf-guide-pane.is-on { display: block; }
.hf-gcard { display: block; width: 34px; aspect-ratio: 512 / 839; border-radius: 2px; background: #000; flex: none; }
.hf-gcards { display: flex; flex-wrap: wrap; gap: 3px; }
.hf-garrow { color: var(--muted); font-size: 1.1rem; padding: 0 2px; align-self: center; }

/* 遊び方の4ステップ */
.hf-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.hf-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: center; padding: 12px; background: var(--hf-ink); border: 1px solid var(--hf-line); }
.hf-step-pic { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.hf-step-pic .hf-gcard { width: 42px; }
.hf-gpair { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hf-gpair small { font-size: 0.66rem; color: var(--muted); }
.hf-gwin .hf-gcards { padding: 3px; outline: 2px solid var(--hf-red); outline-offset: 0; flex-wrap: nowrap; }
.hf-step-text b { display: flex; align-items: center; gap: 8px; color: var(--hf-paper); font-size: 0.95rem; margin-bottom: 4px; }
.hf-step-text b span { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; background: var(--hf-red); color: #fff; font-size: 0.8rem; flex: none; }
.hf-step-text p { margin: 0; font-size: 0.84rem; line-height: 1.7; color: var(--muted2); }
.hf-gchoice { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-right: 8px; }
.hf-gchoice small { font-size: 0.68rem; color: var(--muted); }
.hf-gbtn { border: 1px solid var(--border2); padding: 7px 16px; font-weight: 700; font-size: 0.86rem; color: var(--text); }
.hf-gbtn-red { background: var(--hf-red); border-color: var(--hf-red); color: #fff; }
.hf-gscore { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; color: var(--muted2); }
.hf-gscore span { border: 1px solid var(--hf-line); padding: 4px 8px; }
.hf-gscore b { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-weight: 400; font-size: 1.05rem; color: var(--hf-paper); margin-left: 2px; }
.hf-gscore .hf-gtotal { border-color: var(--hf-red); }

/* 役一覧 */
.hf-yaku-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.hf-yaku-card { padding: 10px; background: var(--hf-ink); border: 1px solid var(--hf-line); display: flex; flex-direction: column; gap: 7px; }
.hf-yaku-head { display: flex; justify-content: space-between; align-items: baseline; }
.hf-yaku-head b { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-weight: 400; font-size: 1.25rem; color: var(--hf-paper); }
.hf-yaku-head span { font-family: 'Zen Antique', 'Noto Serif JP', serif; font-size: 1.15rem; color: #fff; background: var(--hf-red); padding: 0 8px; }
.hf-yaku-head small { font-size: 0.7rem; margin-left: 1px; }
.hf-yaku-card p { margin: 0; font-size: 0.78rem; line-height: 1.6; color: var(--muted2); }

/* 札の一覧（12か月） */
.hf-month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 6px 14px; margin-bottom: 10px; }
.hf-month-row { display: grid; grid-template-columns: 4.2em repeat(4, 1fr); gap: 6px; align-items: start; padding: 8px 0; border-top: 1px solid var(--hf-line); }
.hf-month-name { font-size: 0.82rem; color: var(--hf-paper); line-height: 1.3; }
.hf-month-name b { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.hf-month-row figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hf-month-row .hf-gcard { width: 100%; max-width: 44px; }
.hf-month-row figcaption { font-size: 0.62rem; padding: 0 4px; color: var(--muted2); border: 1px solid var(--hf-line); white-space: nowrap; }
.hf-month-row figcaption.hf-kind-hikari { background: var(--hf-red); border-color: var(--hf-red); color: #fff; }
.hf-month-row figcaption.hf-kind-tane { border-color: var(--hf-paper); color: var(--hf-paper); }
.hf-month-row figcaption.hf-kind-tan { border-color: #3a6fd0; color: #9db8ec; }

@media (max-width: 640px) {
  .hf-step { grid-template-columns: 1fr; gap: 10px; }
  .hf-step-pic .hf-gcard { width: 36px; }
  .hf-guide-tabs { width: 100%; }
  .hf-guide-tabs button { flex: 1; }
  .hf-yaku-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hf-yaku-card { padding: 8px; }
  .hf-yaku-card .hf-gcard { width: 24px; }
  .hf-yaku-card .hf-gcards { gap: 2px; }
  .hf-yaku-head b { font-size: 1.05rem; }
  .hf-yaku-head span { font-size: 0.95rem; padding: 0 6px; }
}

/* 役の進み具合（あと何枚、2026-11-13） */
.hf-progress { display: flex; flex-wrap: wrap; gap: 4px; }
.hf-progress span { display: inline-flex; align-items: baseline; gap: 4px; font-size: 0.7rem; color: var(--muted2); border: 1px solid var(--hf-line); padding: 1px 6px; background: var(--hf-panel); }
.hf-progress b { font-family: var(--mono); font-weight: 700; color: var(--hf-paper); }
.hf-progress em { font-style: normal; font-weight: 700; color: #fff; background: var(--hf-red); padding: 0 4px; font-size: 0.64rem; }
.hf-progress span.is-reach { border-color: var(--hf-red); color: var(--hf-paper); }

/* 花札の賭け（2026-11-13） */
.hf-bet-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted2); margin-right: 4px; }
.hf-bet-pick select { background: var(--hf-ink); color: var(--text); border: 1px solid var(--border2); font: inherit; padding: 8px 10px; }
.hf-bet-line { font-size: 0.86rem; color: var(--muted2); margin: 0 0 8px; }
.hf-bet-line.is-bet { color: #fff; background: var(--hf-red); display: inline-block; padding: 3px 10px; font-weight: 700; }
.hf-tag-bet { border-color: var(--hf-red); color: #ffd5d9; }
.hf-consent { text-align: left; margin: 6px 0 4px; padding-left: 1.2em; font-size: 0.84rem; line-height: 1.7; color: var(--muted2); }
.hf-settle { font-size: 0.95rem; margin: -6px 0 12px; padding: 8px; border: 1px solid var(--hf-red); }
.hf-settle b { color: var(--hf-paper); }
.hf-settle small { display: block; color: var(--muted); font-size: 0.74rem; }

/* 花札のレーティング（2026-11-13） */
.hf-rating { font-family: var(--mono); color: var(--hf-paper); font-weight: 700; margin-right: 4px; }
.hf-rating-line { font-size: 0.86rem; margin: -4px 0 10px; }
.hf-rating-line small { margin-left: 2px; font-family: var(--mono); }
.hf-rating-line .is-up { color: #6ee7a8; }
.hf-rating-line .is-down { color: #f59ca5; }