/* =============================================================
 * Morioka Portal v2 (kai) — Style (PHP twclone と視覚的互換)
 *
 * 構成 (PHP style-new.css に倣う):
 *   §0  デザイントークン
 *   §1  リセット + ベース
 *   §2  アニメーション
 *   §3  レイアウト (3 カラム + レスポンシブ)
 *   §4  サイドバーナビ (左カラム)
 *   §5  メインカラム (col-main-header / タブ)
 *   §6  モバイルヘッダー + サイドドロワー
 *   §7  ボトムナビ (モバイル)
 *   §8  アバター + バッジ
 *   §9  投稿カード
 *   §10 メディア (画像グリッド / 動画)
 *   §11 OGP カード + 引用カード
 *   §12 アクションバー (X 風)
 *   §13 コンポーザモーダル
 *   §14 共通 (フォーム / リスト / 空状態 / プロフィール)
 *   §15 v2 独自コンポーネント
 *
 * PHP style-new.css のデザイントークン・命名規則と互換。
 * HTML は Go html/template から生成、PHP 流用ではなく v2 ネイティブ実装。
 * ============================================================= */

/* §0  デザイントークン */
:root {
  --bg-primary:    #070916;
  --bg-secondary:  #0d1330;
  --bg-tertiary:   #0b1028;
  --bg-overlay:    rgba(13, 19, 48, 0.95);
  --bg-hover:      rgba(255, 255, 255, 0.04);
  --bg-card:       rgba(13, 19, 48, 0.55);
  --bg-card-hover: rgba(255, 255, 255, 0.025);

  --text-primary:   #e7ecff;
  --text-secondary: #9aa6d6;
  --text-muted:     #6b7aa1;
  --text-accent:    #ffffff;

  --accent-purple: #7c4dff;
  --accent-cyan:   #00e5ff;
  --accent-green:  #00ff9d;
  --accent-pink:   #ff4d6d;
  --accent-gold:   #ffd700;

  --action-reply:    var(--accent-cyan);
  --action-repost:   var(--accent-green);
  --action-like:     var(--accent-pink);
  --action-share:    var(--accent-purple);
  --action-bookmark: var(--accent-gold);
  --action-reply-bg:    rgba(0, 229, 255, 0.10);
  --action-repost-bg:   rgba(0, 255, 157, 0.10);
  --action-like-bg:     rgba(255, 77, 109, 0.10);
  --action-share-bg:    rgba(124, 77, 255, 0.10);
  --action-bookmark-bg: rgba(255, 215, 0, 0.10);

  --gradient-primary:   linear-gradient(135deg, rgba(124, 77, 255, 0.95), rgba(0, 229, 255, 0.85));
  --gradient-secondary: linear-gradient(135deg, rgba(0, 229, 255, 0.20), rgba(124, 77, 255, 0.15));

  --border-primary:   rgba(255, 255, 255, 0.10);
  --border-secondary: rgba(255, 255, 255, 0.06);
  --border-glow:      rgba(0, 229, 255, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  --transition-fast:   0.15s ease-out;
  --transition-normal: 0.20s ease-out;

  --sidebar-width:        260px;
  --sidebar-width-narrow: 72px;
  --aside-width:          340px;
  --tl-max-width:         620px;
  --header-mobile-height: 52px;
  --bottom-nav-height:    56px;
}

/* §1  リセット + ベース */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans JP", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(ellipse 1400px 700px at 10% -10%, rgba(124, 77, 255, 0.4), transparent 65%),
    radial-gradient(ellipse 1000px 600px at 90%   0%, rgba(0, 229, 255, 0.3), transparent 65%),
    radial-gradient(ellipse 1000px 700px at 70% 110%, rgba(0, 255, 157, 0.2), transparent 60%),
    var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: clip;
}

/* .lightbox-close / .lightbox-nav の見た目は php-style.css §138 で
   Morioka brand 風 (暗ガラス + 紫グラデ glow on hover) に統一済。
   ここでは §109 text-primary 強制を打ち消すための色 !important のみ。 */
.lightbox-nav {
  background: rgba(20, 16, 40, 0.62) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}
.lightbox-close,
.lightbox-close *,
.lightbox-nav,
.lightbox-nav * { color: #fff !important; }
.lightbox-nav:hover {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.85), rgba(0, 229, 255, 0.7)) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 認証ページ (login / register / forgot / reset) は PHP と同じ
 * 暗めの linear-gradient + orbs + 花火で statement する。
 * v2.css の body radial-gradient を上書き。 */
body.auth-page {
  background: linear-gradient(135deg, #0a0e2a 0%, #1a0f3a 50%, #070916 100%) !important;
}

/* iOS PWA (standalone) の Dynamic Island / notch にロゴ/ヘッダが被るのを防ぐ。
 * auth (login/register/forgot/reset) と legal (terms/privacy) で
 * 上端に safe-area-inset-top を加算。bottom も home indicator 分を確保。 */
body.auth-page .auth-x-container,
body.auth-page .auth-x-hero,
body.legal-page .legal-wrap {
  padding-top: max(env(safe-area-inset-top), 12px);
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
}
@media (max-width: 768px) {
  body.auth-page .auth-x-hero { padding-top: max(env(safe-area-inset-top), 16px); }
  body.legal-page .legal-header { padding-top: max(env(safe-area-inset-top), 12px); }
}
a { color: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* §2  アニメーション */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes likePop { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes cm-slide-down { from { transform: translateY(-110%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }

/* §3  レイアウト (3 カラム) */
.layout-3col {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, var(--tl-max-width)) var(--aside-width);
  max-width: calc(var(--sidebar-width) + var(--tl-max-width) + var(--aside-width));
  margin: 0 auto;
  min-height: 100vh;
}
.col-nav { position: sticky; top: 0; height: 100dvh;
  border-right: 1px solid var(--border-primary); display: flex; flex-direction: column;
  padding: 4px var(--space-2) var(--space-2); z-index: 50; }
.col-main { border-right: 1px solid var(--border-primary); min-width: 0; position: relative; }
.col-aside { position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }

@media (max-width: 1279px) {
  .layout-3col {
    grid-template-columns: var(--sidebar-width-narrow) minmax(0, var(--tl-max-width)) var(--aside-width);
    max-width: calc(var(--sidebar-width-narrow) + var(--tl-max-width) + var(--aside-width));
  }
  .nav-item .label, .logo-section .logo-text { display: none; }
  .nav-item { justify-content: center; padding: 12px; }
}
@media (max-width: 1023px) {
  .layout-3col {
    grid-template-columns: var(--sidebar-width-narrow) minmax(0, 1fr);
    max-width: calc(var(--sidebar-width-narrow) + var(--tl-max-width));
  }
  .col-aside { display: none; }
}
@media (max-width: 767px) {
  .layout-3col { grid-template-columns: 1fr; max-width: 100%; }
  .col-nav { display: none; }
  /* PWA standalone モードでは status bar (≈47px) と被るぶん mobile-header が
     視覚的に背伸びするので、col-main の margin-top にも safe-area-inset-top を
     足さないとコンテンツ先頭 (col-main-header の h1) が mobile-header に潜り込む。
     bottom-nav も同様に safe-area-inset-bottom 加算。 */
  .col-main { border-right: none;
    margin-top: calc(var(--header-mobile-height) + env(safe-area-inset-top));
    margin-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
}

/* §4  サイドバーナビ */
.logo-section {
  margin-bottom: 0;
  padding: 6px var(--space-3) 4px;
  display: flex; align-items: center; gap: var(--space-2);
}
.logo-section a { display: flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: inherit; transition: filter var(--transition-fast); }
.logo-section a:hover { filter: brightness(1.2) drop-shadow(0 0 12px rgba(0, 229, 255, 0.40)); }
.logo-section .logo-text {
  font-weight: 900; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--text-accent), var(--accent-cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.logo-section .logo-emoji { font-size: 1.6rem; }
.logo-section .sidebar-logo-link img {
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
@media (max-width: 1279px) {
  .logo-section { padding: 6px 4px 4px; justify-content: center; }
  .logo-section .sidebar-logo-link img { width: 40px; height: 40px; }
}

/* PC サイドバー: 項目が縦方向に増えても、最下部のアカウントカード /
   フィードバックボタンが画面外にはみ出さないように、中央の nav-menu だけ
   独立してスクロール可能にする (上のロゴ・下のアカウントは常に見えたまま)。
   min-height:0 を入れないと flex の min-content 制約で overflow が効かない。 */
.nav-menu {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  scrollbar-gutter: stable;
}
.nav-menu::-webkit-scrollbar { width: 0; height: 0; }   /* Safari/Chrome */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 1px 12px; border-radius: var(--radius-full);
  color: var(--text-primary); text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  line-height: 1.1;
  transition: background var(--transition-fast);
  position: relative; white-space: nowrap;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); }
.nav-item.active { font-weight: 800; }
.nav-item .icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; position: relative; flex-shrink: 0;
}
.nav-item .label { flex: 1; }

.notification-badge {
  position: absolute; top: -4px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent-pink); color: #fff;
  font-size: 0.7rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.50);
}

.sidebar-actions {
  margin-top: auto; padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  border-top: 1px solid var(--border-primary);
}

.btn-post-new {
  width: 100%;
  background: var(--gradient-primary);
  color: #fff; border: none;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: 1rem; font-weight: 800;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.20);
}
.btn-post-new:hover {
  filter: brightness(1.15); transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.35), 0 4px 16px rgba(124, 77, 255, 0.25);
}
@media (max-width: 1279px) {
  .btn-post-new { padding: 12px; font-size: 0; }
  .btn-post-new::before { content: '+'; font-size: 1.5rem; font-weight: 800; }
}

.sidebar-account {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
  border-radius: var(--radius-full);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: background var(--transition-fast);
}
.sidebar-account:hover { background: rgba(255, 255, 255, 0.06); }
.sidebar-account .account-info { min-width: 0; flex: 1; overflow: hidden; }
.sidebar-account .account-info > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .account-name { font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.sidebar-account .account-handle { font-size: 0.82rem; color: var(--text-muted); }
@media (max-width: 1279px) {
  .sidebar-account .account-info, .sidebar-account .account-chevron { display: none; }
  .sidebar-account { justify-content: center; }
}

/* §5  メインカラム header / タブ */
.col-main-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 22, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-primary);
  padding: var(--space-3) var(--space-4) 0;
  transition: transform var(--transition-normal);
}
/* sticky 要素を display:none で flow から消すと document 高が縮み、
   ブラウザの scroll 補正 → JS の逆方向検知 → 反対トグルのループで
   コンテンツがガクガクする (ホーム中盤を小刻みスクロールで再現)。
   flow を動かさない transform + opacity (iOS の sticky+transform バグ用の
   視覚フォールバック) + pointer-events:none (クリック透過) で隠す。 */
.col-main-header.hidden {
  /* !important は body.theme-* 等の specificity 0-2-1 オーバーライドからの保険
     (php-style.css 11444 の theme-light GPU ヒントが上書きしていた件)。 */
  transform: translateY(-200%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.col-main-header h1 { font-size: 1.25rem; font-weight: 800; margin: 0 0 var(--space-2); }

/* ホームページは H1 ("ホーム") を撤去したので、その分の余白も詰める。
   タブ (おすすめ/フォロー中) を直接上端に置いて 1 行分縦スペース節約。 */
.col-main-header.is-home {
  padding: var(--space-2) var(--space-4) 0 !important;
}
.col-main-header.is-home .tabs {
  margin-top: 0 !important;
}

/* モバイル時は固定 mobile-header (高さ var(--header-mobile-height) + PWA の
   safe-area-inset-top) が viewport 上端を占めるので、col-main-header の sticky
   top にも同じ計算を入れて「ホーム」見出し / タブが mobile-header に被らない
   ようにする。 */
@media (max-width: 767px) {
  .col-main-header { top: calc(var(--header-mobile-height) + env(safe-area-inset-top)); }
}

.tabs { display: flex; margin-top: var(--space-3); gap: 0; }
.tab {
  flex: 1; min-width: 0; text-align: center;
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  color: var(--text-muted); text-decoration: none;
  font-weight: 700; font-size: 1rem;
  white-space: nowrap;
  position: relative;
  transition: all var(--transition-fast);
}
.tab:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.tab.active { color: var(--text-primary); }
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 80px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* §6  モバイルヘッダー + ドロワー */
.mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  /* PWA standalone モードで status bar (~47px) と被るぶん height を増やす。
     padding-top が border-box で 52px を食ってしまうのを防ぐ。これで
     mobile-header の実体は (52 + safe-area) px に拡張され、コンテンツ部は
     常に 52px 確保される。 */
  height: calc(var(--header-mobile-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(7, 9, 22, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-primary);
  z-index: 100;
}
.mobile-header-content {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-3);
  height: var(--header-mobile-height);
}
.mobile-logo .logo-emoji { font-size: 1.6rem; }
.account-icon { width: 32px; height: 32px; cursor: pointer; }
.account-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.account-icon-placeholder {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}

.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  /* .bottom-nav が z-index:1000 で上に乗ってしまっていたので、それより上に出す。
     overlay 1099 / drawer 1100 でドロワーがボトムナビを覆う。 */
  z-index: 1099; opacity: 0;
  transition: opacity var(--transition-normal);
}
.drawer-overlay.open { display: block; opacity: 1; }

.side-drawer {
  position: fixed; top: 0; left: 0;
  width: 280px; height: 100dvh;
  /* 旧 var(--bg-secondary) は半透明値で、スクロール時に裏のページ内容
     (ホーム/検索/+ ボタン等) が透けて重なって読めなくなる事故。
     完全不透明な solid 色で塗って下に何も透けないように。 */
  background: #0a0e1a;
  border-right: 1px solid var(--border-primary);
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  z-index: 1100;
  padding: env(safe-area-inset-top) var(--space-3) var(--space-3);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
/* light テーマでは白寄りに */
body.theme-light .side-drawer {
  background: #ffffff;
}
.side-drawer.open { transform: translateX(0); }
/* iOS Safari の overflow scroll で子要素が描画ズレ (drawer-header と
 * drawer-menu が重なって見える) するのを防ぐため、新しいスタッキング
 * コンテキストを切って慣性スクロールも有効化。 */
.side-drawer {
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
  contain: layout style;
}
/* drawer 内の主要セクションは必ず block + 自身の不透明背景で重ならないよう
 * 明示。PHP では暗黙的に成立してたが iOS PWA で稀に z 順が崩れて被る。 */
.drawer-header,
.drawer-x-header,
.drawer-account-menu,
.drawer-menu,
.drawer-footer,
.drawer-feedback {
  position: relative;
  display: block;
  z-index: 1;
  background: inherit;
}
.drawer-menu { display: flex; flex-direction: column; }
.drawer-header { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-primary); }
.drawer-x-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-x-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.drawer-x-name { margin-top: var(--space-2); font-weight: 800; font-size: 1.05rem; }
.drawer-x-handle { color: var(--text-muted); font-size: 0.88rem; }
.drawer-x-stats { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.drawer-x-stat { text-decoration: none; color: inherit; }
.drawer-x-stat-num { font-weight: 800; }
.drawer-x-stat-label { color: var(--text-muted); margin-left: 4px; font-size: 0.85rem; }
.drawer-menu { padding: var(--space-2) 0; flex: 1; }
.drawer-menu-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px var(--space-3); border-radius: var(--radius-md);
  color: var(--text-primary); text-decoration: none; font-size: 1rem;
}
.drawer-menu-item:hover { background: var(--bg-hover); }
.drawer-menu-item .icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; position: relative;
}
.drawer-footer { padding: var(--space-3) var(--space-2); border-top: 1px solid var(--border-primary); }
.drawer-logout-btn {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-3); border-radius: var(--radius-full);
  color: var(--accent-pink); text-decoration: none; font-weight: 700;
}
.drawer-logout-btn:hover { background: var(--action-like-bg); }

@media (max-width: 767px) { .mobile-header { display: block; } }

/* php-style.css L7906-7912 で .drawer-header に
     background: linear-gradient(#0a0e2a, #050714) !important;
   が当たっていて、user-colors を変えても drawer 上部のアカウント枠だけ
   濃紺のままになる。selector specificity 0-2-0 + !important で上書きして
   .side-drawer 本体 (var(--bg-secondary)) と同じ色味に揃える。 */
@media (max-width: 767px) {
  .side-drawer .drawer-header {
    background: transparent !important;
  }
  /* drawer-x-name / handle も PHP は color: white / #7a8aaf 固定なので
     CSS variable に戻してカスタムカラー追従。 */
  .side-drawer .drawer-x-name   { color: var(--text-primary) !important; }
  .side-drawer .drawer-x-handle { color: var(--text-muted) !important; }

  /* php-style.css L8203- が "X 本物互換" として モバイル限定で本文系を
       color: #e7e9ea !important; (白) / #71767b !important; (グレー)
     にハードコード塗りしているせいで、明色テーマ / 桃色などカスタム
     カラー時に読めなくなる (背景白っぽい + 文字も白系)。
     selector 先頭に body を足して specificity 0-1-1 + !important で
     CSS variable 経由に戻す。 */
  body .post-body,
  body .post-detail-body,
  body .post-author-meta .author-name,
  body .quote-card .author-name,
  body .quote-card .quote-body,
  body .ogp-title {
    color: var(--text-primary) !important;
  }
  body .post-author-meta .author-handle,
  body .post-author-meta .post-meta-sep,
  body .post-author-meta .time-toggle,
  body .quote-card .author-handle,
  body .quote-card .quote-time,
  body .ogp-host,
  body .ogp-desc,
  body .post-author-meta .muted.small,
  body .post-pinned-label,
  body .action-btn,
  body .action-btn i,
  body .action-btn .count,
  body .kebab-btn {
    color: var(--text-muted) !important;
  }
  body .quote-card,
  body .ogp-card {
    border-color: var(--border-primary) !important;
  }
}

/* §7  ボトムナビ — スタイル定義は php-style.css の .bottom-nav / .bottom-nav .nav-item
   に完全依存。v2 独自の bottom-nav-inner / bottom-nav-item ルールは bottom_nav.html を
   PHP 互換 (.nav-menu > .nav-item) 構造に書き換えたので不要になり削除した。 */

/* §8  アバター + バッジ */
.avatar { display: inline-block; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 80px; height: 80px; }
.avatar-xl { width: 128px; height: 128px; }
.avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-sm.avatar-placeholder { font-size: 0.85rem; }
.avatar-md.avatar-placeholder { font-size: 1.1rem; }
.avatar-lg.avatar-placeholder { font-size: 2.2rem; }
.avatar-xl.avatar-placeholder { font-size: 3.4rem; }

/* 認証バッジ (specialMark / adminMark / secretMark) は php-style.css の実装
   (cyan-purple ✓ 円 / 青 fa-circle-check / cyan fa-lock) に完全に任せる。
   v2.css が独自に gold ★ + ピンク 🛡 でラップしていたが、PHP と見た目が
   食い違う + secretMark を 18x18 のブロック化して FA lock を潰すバグ付きだった。 */

/* プレミアム加入ユーザのバッジ。Plan.BadgeIcon = "fa-solid fa-gem" を Pink-Gold
   グラデのチップに乗せる。.specialMark 等と並んで表示可能。
   タイムライン / プロフィール / drawer など、@handle 横で共通使用。 */
.premiumMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff578b, #ffd700);
  color: #fff;
  font-size: 9px;
  margin-left: 1px;
  vertical-align: middle;
  flex-shrink: 0;
}
.premiumMark i { font-size: 9px; line-height: 1; color: #fff; }
/* ライトモードでもバッジ内の宝石アイコンは白固定 (グラデ円の上で黒字化を防ぐ) */
body.theme-light .premiumMark,
body.theme-light .premiumMark i { color: #fff !important; }

.beta-tag {
  display: inline-block;
  /* ダーク・ライト両モードで完全一致の固定グラデーション (テーマ変数に依存しない)。
     ユーザ要望: light でも dark でも同じ見た目に。 */
  background: linear-gradient(135deg, #7c4dff, #00e5ff) !important;
  color: #fff !important;
  border-radius: var(--radius-full);
  padding: 1px 8px; font-size: 0.65rem; font-weight: 800;
  margin-left: 4px; vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 3px rgba(124, 77, 255, 0.35);
}
.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }

/* §9  投稿カード */
.post {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border-primary);
  transition: background var(--transition-fast);
  position: relative;
  cursor: pointer;
  /* iOS Safari メモリ対策: 無限スクロールで何百枚も積み上がると WebKit プロセスが
     OOM で落ちて「問題が繰り返し起きました」エラーになる。content-visibility:auto で
     画面外カードを skip-paint・skip-layout 対象にし、メモリ消費を 1/N に抑える。
     contain-intrinsic-size はスクロール位置安定化用のプレースホルダ高さ。 */
  content-visibility: auto;
  /* auto キーワードが肝: 一度描画したカードの実寸をブラウザが記憶し、再び画面外へ
     出ても 280px のプレースホルダに戻さない。これが無いと引用ポストや画像付き投稿
     (280px より遥かに高い) が画面外⇄画面内で 280px ⇄ 実寸に伸縮し、スクロール位置が
     飛ぶ (= 「つまずく」)。auto により skip-paint の OOM 対策は維持したまま、サイズの
     再収縮だけを止められる。1つ目=width(auto 0), 2つ目=height(auto 280px)。 */
  contain-intrinsic-size: auto 0 auto 280px;
}
.post:last-child { border-bottom: none; }
.post:hover { background: var(--bg-card-hover); }
/* 装飾アバター枠 (gold/neon/aura/spark/sakura/sparkle/phoenix…) を持つ投稿だけ、
   content-visibility:auto に伴う paint containment を解除する。これがオーラ/スパーク/
   発光をカード境界でクリップしていたため、解除すると枠エフェクトがツイートの外まで描ける。
   装飾枠は稀なので大多数の素の投稿は content-visibility:auto の iOS OOM 対策を維持する。
   z-index:1 で下に続く投稿に被られず、はみ出した光が上へ描かれる。 */
.post:has(.avatar-frame) {
  content-visibility: visible;
  z-index: 1;
}
.post-pinned-label {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: var(--space-2); padding-left: 56px;
}
/* X 風「↻ ◯◯ さんがリポストしました」: アバター列の左にインデントを揃え、
   ミュート色で控えめに表示。post-card 全体をクリック可能なまま個別リンクとして動かす。 */
.post-repost-by {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: var(--space-2); padding-left: 56px;
  text-decoration: none;
}
.post-repost-by:hover span { text-decoration: underline; }
.post-repost-by i { color: var(--accent-green); font-size: 0.82rem; flex-shrink: 0; }
.post-grid {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3); min-width: 0;
}
.post-avatar-col { width: 44px; }
.post-main-col { min-width: 0; }
.posthead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3); margin-bottom: 2px;
}
.post-author-meta {
  /* PHP _post_card.php と同じく flex-wrap: nowrap + flex: 1 で 1 行固定。
     これで名前 / handle / 時刻が長くても折り返さず、posthead 直下の kebab
     (post-meta-right) が常に最右上に居続ける (折り返して "下に潜る" のを防ぐ)。
     名前が長い場合は author-link が overflow: hidden + ellipsis で省略される。 */
  display: flex; align-items: center; gap: 4px 6px;
  flex: 1; min-width: 0; flex-wrap: nowrap;
  font-size: 0.9rem; line-height: 1.3;
}
.post-author-meta .author-link {
  text-decoration: none; color: inherit;
  min-width: 0;     /* 子の ellipsis を有効化 */
  flex: 0 1 auto;
  overflow: hidden;
}
.post-author-meta .author-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.author-link { text-decoration: none; color: inherit; }
.author-name {
  font-size: 0.95rem; font-weight: 800; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 4px;
}
.author-name:hover .author-name-text { text-decoration: underline; }
.author-handle { font-size: 0.88rem; color: var(--text-muted); white-space: nowrap; }
.post-meta-sep { color: var(--text-muted); padding: 0 2px; }
.time-toggle {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0; font: inherit; font-size: 0.88rem;
}
.time-toggle:hover { color: var(--accent-cyan); }
.post-meta-right {
  display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
}
.reply-to-line { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-1); }
.post-body {
  word-wrap: break-word; overflow-wrap: break-word;
  white-space: pre-wrap;
  font-size: 0.9375rem; line-height: 1.45;
  color: var(--text-primary); margin-bottom: 4px;
}
.linkified, .mention, .hashtag, .post-body a {
  color: var(--accent-cyan); text-decoration: none;
  transition: color var(--transition-fast);
}
.linkified:hover, .mention:hover, .hashtag:hover, .post-body a:hover { text-decoration: underline; }

/* ケバブ */
.kebab-wrapper { position: relative; display: inline-block; }
.kebab-btn {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.kebab-btn:hover { background: var(--action-reply-bg); color: var(--accent-cyan); }
.kebab-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-1) 0;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.15s ease-out;
}
.kebab-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 10px 16px;
  color: var(--text-primary); font-size: 0.9rem;
  text-decoration: none; font-family: inherit;
}
.kebab-item:hover { background: var(--bg-hover); }
.kebab-danger { color: var(--accent-pink); }
.kebab-danger:hover { background: var(--action-like-bg); }
.kebab-divider { height: 1px; background: var(--border-primary); margin: var(--space-1) 0; }

/* kebab-menu / repost-menu / share-menu を開いた post を最上位に持ち上げる。
   ・ z-index は 1000 に引き上げ (50/100 だと、次の post が
     content-visibility:auto の paint containment で stacking context を
     作って menu の上に来てしまう事故が観測された)
   ・ さらに content-visibility:visible を強制してその post の paint
     containment を解除し、絶対配置の menu が次の post 領域まで
     表示されてもクリックを横取りされないようにする */
.post:has(.kebab-menu:not([hidden])),
.post:has(.repost-menu:not([hidden])),
.post:has(.share-menu:not([hidden])) {
  z-index: 1000 !important;
  content-visibility: visible !important;
  contain: none !important;
}
/* menu 自体も最高 z-index を維持 (元から 9999 だが念のため) */
.kebab-menu:not([hidden]),
.repost-menu:not([hidden]),
.share-menu:not([hidden]) {
  z-index: 10000 !important;
}

/* 管理者削除 (admin / special のみ表示)。デフォルト hidden で
   body[data-user-role="admin"] / "special" のときだけ flex 表示。 */
.kebab-admin-only { display: none !important; }
body[data-user-role="admin"]   .kebab-admin-only,
body[data-user-role="special"] .kebab-admin-only { display: flex !important; }
body[data-user-role="admin"]   .kebab-divider.kebab-admin-only,
body[data-user-role="special"] .kebab-divider.kebab-admin-only { display: block !important; }

/* §10  メディア */
.post-media {
  margin-top: var(--space-3); border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border-primary);
}
.post-media img { display: block; max-width: 100%; height: auto; }
.post-media-grid { display: grid; gap: 2px; }
.post-media-grid.post-media-1 { grid-template-columns: 1fr; }
.post-media-grid.post-media-2 { grid-template-columns: 1fr 1fr; }
.post-media-grid.post-media-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media-grid.post-media-3 .post-media-item:nth-child(1) { grid-row: span 2; }
.post-media-grid.post-media-4 { grid-template-columns: 1fr 1fr; }
.post-media-item {
  display: block; position: relative;
  background: var(--bg-secondary); overflow: hidden;
}
.post-media-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.post-media-1 .post-media-item img { aspect-ratio: auto; max-height: 540px; }

.post-video {
  margin-top: var(--space-3); position: relative; width: 100%;
  aspect-ratio: 16 / 9; border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer;
  background: #000; border: 1px solid var(--border-primary);
}
.post-video video { width: 100%; height: 100%; object-fit: contain; }

/* §11  OGP + 引用 */
.ogp-card {
  display: block; margin-top: var(--space-3);
  border: 1px solid var(--border-primary); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  background: var(--bg-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ogp-card:hover { border-color: var(--border-glow); background: var(--bg-card-hover); }
.ogp-image {
  width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; display: block;
  background: var(--bg-secondary);
}
.ogp-body  { padding: 10px 12px; }
.ogp-title {
  font-weight: 600; margin-bottom: 2px; color: var(--text-primary);
  font-size: 0.9375rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ogp-desc {
  font-size: 0.875rem; color: var(--text-secondary); line-height: 1.35; margin-bottom: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ogp-host { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.3; }

.quote-card {
  display: block; margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  /* 親 post-card との視覚的分離は親色に薄いオーバーレイで作る。
     ハードコード色だとカスタムテーマで「青いブロブ」になるため、
     透過オーバーレイ + 透過 panel の重ねで全テーマに追従させる。 */
  background:
    linear-gradient(rgba(127,127,127,0.06), rgba(127,127,127,0.06)),
    var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--transition-fast);
  min-width: 0; max-width: 100%; overflow: hidden;
}
.quote-card:hover { border-color: var(--border-glow); }
.quote-head { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.quote-meta { flex: 1; min-width: 0; }
.quote-author {
  font-weight: 700; font-size: 0.875rem; color: var(--text-primary);
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.quote-author .author-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.quote-handle { color: var(--text-muted); }
.quote-time { white-space: nowrap; font-size: 0.825rem; color: var(--text-muted); }
.quote-body {
  font-size: 0.875rem; color: var(--text-primary); line-height: 1.4;
  word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.quote-image {
  max-width: 60%; max-height: 200px; object-fit: cover;
  margin-top: var(--space-2); border-radius: var(--radius-sm); display: block;
}

/* §12  アクションバー X 風
   PHP _post_card.php と完全同等: 親 col-main の幅一杯まで space-between で
   広げる (ブックマーク/共有が右端に来る)。前 commit で max-width: 425px に
   絞ったら左寄せでスカスカになり PHP より悪化したので 100% に戻す。 */
.post-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px; max-width: 100%; padding-right: var(--space-2);
}
/* スマホ幅: 親幅一杯 + 5 等分配置 (PC と同じく親幅一杯)。
   form ラッパが flex 子なので button に flex:1 が効かない問題対策で
   直系子に flex:1 を当てる。 */
@media (max-width: 767px) {
  .post-actions > * { flex: 1 1 0; min-width: 0; }
  .post-actions > form > .action-btn { width: 100%; justify-content: center; }
  .post-actions > .action-btn         { justify-content: center; }
}
.action-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.8125rem;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; text-decoration: none;
  font-family: inherit; font-weight: 500;
  transition: color var(--transition-fast);
}
.action-btn i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  font-size: 16px; transition: all var(--transition-fast); flex-shrink: 0;
}
.action-btn .count { font-variant-numeric: tabular-nums; min-width: 1ch; }

.action-btn:hover     { color: var(--action-reply); }
.action-btn:hover i   { background: var(--action-reply-bg); color: var(--action-reply); }
.action-btn.like:hover     { color: var(--action-like); }
.action-btn.like:hover i   { background: var(--action-like-bg); color: var(--action-like); }
.action-btn.liked          { color: var(--action-like); }
.action-btn.liked i        { color: var(--action-like); }
.action-btn.liked:active i { animation: likePop 0.4s ease-out; }
.action-btn.repost:hover   { color: var(--action-repost); }
.action-btn.repost:hover i { background: var(--action-repost-bg); color: var(--action-repost); }
.action-btn.reposted       { color: var(--action-repost); }
.action-btn.reposted i     { color: var(--action-repost); }
.action-btn.share:hover    { color: var(--action-share); }
.action-btn.share:hover i  { background: var(--action-share-bg); color: var(--action-share); }
.action-btn.bookmark:hover     { color: var(--action-bookmark); }
.action-btn.bookmark:hover i   { background: var(--action-bookmark-bg); color: var(--action-bookmark); }
.action-btn.bookmarked         { color: var(--action-bookmark); }
.action-btn.bookmarked i       { color: var(--action-bookmark); }

.repost-wrapper, .share-wrapper { position: relative; display: inline-block; }
.repost-menu {
  position: absolute; bottom: calc(100% + 4px); left: 0;
  min-width: 200px; background: var(--bg-secondary);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  padding: var(--space-1) 0; z-index: 100; box-shadow: var(--shadow-lg);
}
.repost-menu.share-menu { left: auto; right: 0; }
.repost-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left; background: none; border: none;
  padding: 10px 16px; color: var(--text-primary);
  font-size: 0.9rem; text-decoration: none; cursor: pointer; font-family: inherit;
}
.repost-menu-item:hover { background: var(--bg-hover); }
.repost-menu-divider { height: 1px; background: var(--border-primary); margin: var(--space-1) 0; }

/* §13  コンポーザ */
.composer-inline {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.composer-grid { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); }
.composer-textarea {
  width: 100%;
  background: transparent;
  border: none; color: var(--text-primary);
  font: inherit; font-size: 1.1rem;
  resize: none; outline: none;
  min-height: 56px; line-height: 1.4;
}
.composer-textarea::placeholder { color: var(--text-muted); }
.composer-actions {
  display: flex; align-items: center;
  margin-top: var(--space-2); gap: var(--space-2);
  border-top: 1px solid var(--border-primary); padding-top: var(--space-2);
}
.composer-action {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--accent-cyan); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: background var(--transition-fast);
}
.composer-action:hover { background: var(--action-reply-bg); }
.composer-counter { color: var(--text-muted); margin-left: auto; font-size: 0.85rem; }
.composer-submit {
  background: var(--gradient-primary); color: #fff; border: none;
  padding: 8px 20px; border-radius: var(--radius-full);
  font-weight: 800; font-size: 0.95rem; cursor: pointer;
  transition: filter var(--transition-fast);
}
.composer-submit:hover:not(:disabled) { filter: brightness(1.15); }
.composer-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.composer-modal {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  align-items: flex-start; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: var(--space-4);
}
.composer-modal[open] { display: flex; }
.cm-sheet {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 600px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  margin-top: max(calc(env(safe-area-inset-top, 0px) + 8px), 8px);
}
.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-primary);
}
.cm-close {
  background: none; border: none; color: var(--text-primary);
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; font-size: 1.2rem;
}
.cm-close:hover { background: var(--bg-hover); }
.cm-body { padding: var(--space-3) var(--space-4); flex: 1; overflow-y: auto; }
.cm-preview {
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-3); background: var(--bg-card);
}
.cm-preview-text {
  font-size: 0.88rem; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-preview-thumb {
  max-width: 160px; max-height: 96px; border-radius: var(--radius-sm);
  margin-top: var(--space-2); object-fit: cover;
}
.cm-image-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 6px; margin-top: var(--space-2);
}
.cm-image-tile { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.cm-image-tile img { width: 100%; max-height: 140px; object-fit: cover; }
/* 動画プレビュー (1 投稿に 1 本)。サムネがあれば <img>、無ければ noimg。 */
.cm-video-preview { margin-top: var(--space-2); }
.cm-video-tile {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 320px;
}
.cm-video-tile img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.cm-video-tile-noimg {
  display: flex; align-items: center; justify-content: center;
  height: 120px; background: #1a1033; color: #fff; font-size: 1.4rem;
}
.cm-image-remove {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  border: none; cursor: pointer; font-size: 1rem;
}
.cm-progress {
  position: relative; margin: var(--space-2) 0; height: 6px;
  background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); overflow: hidden;
}
.cm-progress-bar { height: 100%; width: 0; background: var(--gradient-primary); transition: width 0.1s; }
.cm-actions-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-primary);
}
.cm-attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-primary); color: var(--text-muted);
  cursor: pointer; margin-right: auto; font-size: 1rem; background: transparent;
}
.cm-attach-btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* TL ピン留めトグル (composer 内、attach btn 横)。
 *   - 既定: 線アイコン + 文字 "ピン留め" (グレー)
 *   - active (1h/24h 選択時): gold 色 + ラベル変化、押すたびに cycle */
.cm-promote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--border-primary);
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 0.78rem; line-height: 1; font-weight: 600;
  white-space: nowrap;
}
.cm-promote-btn i { font-size: 0.78rem; }
.cm-promote-btn:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.cm-promote-btn.active { color: var(--bg-primary); background: var(--accent-gold); border-color: var(--accent-gold); }
body.theme-light .cm-promote-btn.active { color: #fff; }

@media (max-width: 720px) {
  .composer-modal { padding: 0; align-items: flex-start; }
  .cm-sheet {
    margin-top: calc(8px + env(safe-area-inset-top, 0px));
    max-height: calc(90dvh - env(safe-area-inset-top, 0px));
    border-radius: var(--radius-lg);
    animation: cm-slide-down 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* §14  共通 */
.empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted); }
.empty-state h2 { color: var(--text-primary); margin: 12px 0; font-size: 1.1rem; }
.empty-state .empty-icon { font-size: 2rem; color: var(--accent-cyan); }
.empty-state code {
  background: var(--bg-hover); padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em;
}

.v2-error {
  padding: 11px 14px;
  margin: 0 var(--space-4) var(--space-3);
  border: 1px solid var(--accent-pink);
  background: var(--action-like-bg);
  border-radius: var(--radius-md);
  color: var(--accent-pink); font-size: 0.9rem;
}
.v2-success, .settings-success {
  padding: 11px 14px; margin-bottom: var(--space-3);
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid var(--accent-green);
  border-radius: var(--radius-md);
  color: var(--accent-green); font-size: 0.9rem;
}
.v2-breadcrumb {
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem; color: var(--text-muted);
}
.v2-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.v2-breadcrumb a:hover { color: var(--accent-cyan); }
.v2-breadcrumb-sep { margin: 0 6px; }

/* .btn の基本スタイルは php-style.css L929 (subtle bg + border) を継承。
 * 旧 v2 では全 .btn を gradient 化していたが、PHP 配色に揃えるため撤回。
 * gradient が欲しい primary action は class="btn primary" を使う (php-style L960)。 */
.auth-submit {
  background: var(--gradient-primary); color: #fff; border: none;
  padding: 10px 22px; border-radius: var(--radius-full);
  font-weight: 800; cursor: pointer; font-family: inherit; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  text-decoration: none; transition: filter var(--transition-fast);
}
.auth-submit:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; border: 1px solid var(--border-primary); color: var(--text-primary); }
.btn.ghost:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

.auth-form-section {
  max-width: 420px; margin: var(--space-8) auto;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.auth-form-title {
  margin: 0 0 var(--space-4); font-size: 1.4rem; text-align: center;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-label { font-size: 0.85rem; color: var(--text-muted); }
.auth-label small { color: var(--text-muted); opacity: 0.7; margin-left: 4px; font-size: 0.78em; }
.auth-form input, .settings-textarea {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
  background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font: inherit;
}
.auth-form input:focus, .settings-textarea:focus { outline: none; border-color: var(--accent-cyan); }
.settings-textarea { resize: vertical; line-height: 1.5; }
.auth-alt { text-align: center; font-size: 0.9rem; color: var(--text-muted); margin: var(--space-4) 0 0; }
.auth-alt a { color: var(--accent-cyan); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.user-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-primary); }
.user-list-item { border-bottom: 1px solid var(--border-primary); }
.user-list-link {
  display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  text-decoration: none; color: inherit;
}
.user-list-link:hover { background: var(--bg-card-hover); }
.user-list-avatar img, .user-list-avatar-placeholder {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
}
.user-list-avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.user-list-meta { min-width: 0; flex: 1; }
.user-list-name { color: var(--text-primary); font-weight: 700; font-size: 0.95rem; }
.user-list-handle { color: var(--text-muted); font-size: 0.85rem; }
.user-list-bio {
  margin-top: 4px; color: var(--text-muted); font-size: 0.85rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Profile */
.profile-header {
  padding: var(--space-5) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-primary);
}
.profile-identity { display: flex; gap: var(--space-4); align-items: center; }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.profile-avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800; font-size: 2.4rem;
  display: flex; align-items: center; justify-content: center;
}
.profile-name-block { flex: 1; min-width: 0; }
.profile-name { font-size: 1.4rem; font-weight: 800; }
.profile-handle { color: var(--text-muted); font-size: 0.95rem; }
.profile-bio { margin: var(--space-3) 2px var(--space-2); white-space: pre-wrap; word-break: break-word; }
.profile-meta {
  display: flex; gap: var(--space-4);
  color: var(--text-muted); font-size: 0.88rem; margin-top: var(--space-2);
}
.profile-meta-item strong { color: var(--text-primary); }
.profile-meta-link { text-decoration: none; color: var(--text-muted); }
.profile-meta-link:hover { color: var(--accent-cyan); text-decoration: underline; }

.profile-actions { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
.profile-msg-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-primary);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--text-primary); font-size: 1.05rem;
}
.profile-msg-btn:hover { border-color: var(--accent-cyan); background: var(--action-reply-bg); }
.profile-follow-form { margin: 0; }
.profile-follow-btn {
  padding: 8px 22px; border-radius: var(--radius-full);
  font-weight: 800; cursor: pointer;
  border: 1px solid var(--accent-cyan);
  background: var(--gradient-primary); color: #fff; font-size: 0.9rem;
}
.profile-follow-btn:hover { filter: brightness(1.15); }
.profile-follow-btn--on { background: transparent; color: var(--accent-cyan); }
.profile-follow-btn--on:hover {
  background: var(--action-like-bg); border-color: var(--accent-pink); color: var(--accent-pink);
}
.profile-more { position: relative; }
.profile-more[open] .profile-more-menu { display: block; }
.profile-more-btn {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--border-primary); border-radius: 50%;
  font-size: 1.2rem;
}
.profile-more-btn::-webkit-details-marker { display: none; }
.profile-more-btn:hover { border-color: var(--accent-cyan); }
.profile-more-menu {
  display: none; position: absolute; right: 0; top: 46px; z-index: 50;
  min-width: 220px;
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-md); padding: var(--space-1);
  box-shadow: var(--shadow-lg);
}
.profile-more-menu form { margin: 0; }
.profile-more-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text-primary);
  padding: 10px 14px; border-radius: var(--radius-sm);
  cursor: pointer; font: inherit; text-decoration: none;
}
.profile-more-item:hover { background: var(--bg-hover); }
.profile-more-item--danger { color: var(--accent-pink); }
.profile-more-item--danger:hover { background: var(--action-like-bg); }

/* §15  v2 独自コンポーネント */
.timeline {}

.settings-section { padding: var(--space-4); }
.settings-title { margin: 0 0 var(--space-3); font-size: 1.3rem; }
.settings-help { color: var(--text-muted); font-size: 0.88rem; margin: 6px 0 var(--space-3); }
.settings-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; }
.settings-btn {
  padding: 9px 22px; border: none; border-radius: var(--radius-full);
  font-weight: 800; color: #fff; background: var(--gradient-primary);
  cursor: pointer; font-family: inherit;
}
.settings-btn:hover { filter: brightness(1.15); }
.settings-btn--ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-primary);
}
.settings-btn--ghost:hover {
  color: var(--accent-cyan); border-color: var(--accent-cyan); background: var(--action-reply-bg);
}
.settings-avatar-form {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.settings-avatar-preview img, .settings-avatar-placeholder {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block;
}
.settings-avatar-placeholder {
  background: var(--gradient-primary); color: #fff;
  font-weight: 800; font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
}
.settings-avatar-actions { display: flex; flex-direction: column; gap: 6px; }

.notify-title { margin: var(--space-3) var(--space-4); font-size: 1.3rem; }
.notify-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-primary); }
.notify-item { border-bottom: 1px solid var(--border-primary); }
.notify-item--unread { background: var(--action-reply-bg); }
.notify-link { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; }
.notify-link:hover { background: var(--bg-card-hover); }
.notify-avatar img, .notify-avatar-placeholder {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block;
}
.notify-avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.notify-body { flex: 1; min-width: 0; }
.notify-text { color: var(--text-primary); font-size: 0.92rem; line-height: 1.5; }
.notify-handle { color: var(--text-muted); margin-left: 4px; font-size: 0.85em; }
.notify-snippet {
  margin-top: 4px; color: var(--text-muted); font-size: 0.85rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notify-time { margin-top: 4px; color: var(--text-muted); font-size: 0.75rem; }

.msg-title { margin: var(--space-3) var(--space-4); font-size: 1.3rem; }
.msg-conv-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-primary); }
.msg-conv-item { border-bottom: 1px solid var(--border-primary); }
.msg-conv-item--unread { background: var(--action-reply-bg); }
.msg-conv-link { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; align-items: center; }
.msg-conv-link:hover { background: var(--bg-card-hover); }
.msg-conv-avatar img, .msg-conv-avatar-placeholder {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0;
}
.msg-conv-avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.msg-conv-body { flex: 1; min-width: 0; }
.msg-conv-head { display: flex; align-items: baseline; gap: 8px; font-size: 0.9rem; min-width: 0; overflow: hidden; }
.msg-conv-name {
  font-weight: 700;
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-conv-handle { color: var(--text-muted); font-size: 0.8rem; }
.msg-conv-time {
  color: var(--text-muted); font-size: 0.8rem;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 時刻表記 (「○分前」「2026年5月17日」等) は絶対に改行させない。
 * post カード / 通知 / DM / 引用 / 全 <time> 要素を一括カバー。 */
time,
.time-toggle,
.notif-time,
.notif-time time,
.quote-time,
.post-time {
  white-space: nowrap !important;
  flex-shrink: 0;
}
.msg-conv-last { margin-top: 2px; color: var(--text-muted); font-size: 0.88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-self { color: var(--text-primary); opacity: 0.85; margin-right: 4px; }
.msg-conv-badge {
  background: var(--accent-pink); color: #fff; font-weight: 700;
  border-radius: var(--radius-full); padding: 2px 8px; font-size: 0.78rem;
}
/* ====================================================================
   DM (Direct Messages) — 全面再設計版
   ====================================================================
   構造:
     <header.dm-head> peer + 通話ボタン
     <section.dm-thread>
       <div.dm-row.is-me|is-peer>
         <button.dm-quote>?     (返信引用)
         <div.dm-bubble> 画像/テキスト
         <div.dm-meta>  時刻 + 返信/リアクション/削除
         <div.dm-reacts>?       (リアクション集計)
     <form.dm-composer>  画像 / textarea / 送信
     <div.dm-call-modal> 通話 UI
     <div.dm-react-modal> リアクションピッカー

   余計な width 計算を一切しない (bubble は max-width: 75% + viewport 上限)
   親 grid item が広がらないよう min-width:0 を明示。
   ==================================================================== */

/* === ヘッダ (sticky で常に最上部に表示) === */
/* === DM shell: 高さ固定 + 内部スクロールのチャットレイアウト ===
   PHP messages.php の .dm-col-main / .dm-chat と同じパターン:
   shell 高さを viewport - chrome に固定し、内部の .dm-thread が
   overflow:auto でスクロール。composer は flex-shrink: 0 で常に底に
   いるので、iOS Safari のキーボード展開時もページ全体の auto-scroll
   で自然に composer がキーボード直上に来る (visualViewport JS 不要)。 */
.dm-shell {
  display: flex; flex-direction: column;
  /* PC: viewport 全部使ってよい。sticky にして col-main 内で
     スクロール時もカラム上端に張り付かせる。 */
  height: 100dvh;
  position: sticky; top: 0;
  min-height: 0;
}
@media (max-width: 767px) {
  .dm-shell {
    position: static;
    /* mobile-header / bottom-nav 分を viewport から引く。
       safe-area-inset も chrome 高さに含めて差し引く必要がある。 */
    height: calc(
      100vh
      - var(--header-mobile-height) - env(safe-area-inset-top)
      - var(--bottom-nav-height)    - env(safe-area-inset-bottom)
    );
  }
  /* 入力フォーカス中は bottom-nav を隠して composer をキーボード直上に。
     PHP と同じパターン (style-new.css L12498 周辺)。 */
  body:has(.dm-input:focus) .bottom-nav { display: none; }
  body:has(.dm-input:focus) .col-main   { margin-bottom: 0; }
  body:has(.dm-input:focus) .dm-shell {
    height: calc(100vh - var(--header-mobile-height) - env(safe-area-inset-top));
  }
}

.dm-head {
  display: flex; align-items: center; gap: 12px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  /* user-colors の header 指定 (= --bg-overlay) に追従するため CSS var を
     使う。フォールバックは元のハードコード値を残す。 */
  background: var(--bg-overlay, rgba(7, 9, 22, 0.92));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.dm-peer { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.dm-peer-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; display: block;
}
.dm-peer-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.dm-peer-name { min-width: 0; line-height: 1.2; overflow: hidden; }
.dm-peer-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-call-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--action-reply-bg); color: var(--accent-cyan);
  border: none; cursor: pointer; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dm-call-btn:hover { background: var(--accent-cyan); color: #fff; }

/* === スレッド (= bubble の縦リスト) ===
   shell 内で flex: 1 + overflow-y: auto。内部スクロール領域として動作。
   justify-content: flex-end + 先頭子要素 margin-top: auto で、メッセージが
   少ない時も下端 (composer 直上) に寄せて表示する (PHP 互換)。 */
.dm-thread {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
  justify-content: flex-end;
  /* grid item の min-width:auto / fit-content による横はみ出しを完全防止 */
  max-width: 100%; min-width: 0; overflow-x: clip;
  box-sizing: border-box;
}
.dm-thread > :first-child { margin-top: auto; }
.dm-empty {
  text-align: center; color: var(--text-muted);
  padding: 40px 12px; font-size: 0.95rem;
}
.dm-empty i { display: block; font-size: 2rem; margin-bottom: 8px; opacity: 0.6; }

/* === 行 === */
.dm-row {
  display: flex; flex-direction: column;
  /* 75% + viewport 上限の二重防御 */
  max-width: min(75%, calc(100vw - 64px));
  min-width: 0;
}
.dm-row.is-me   { align-self: flex-end;   align-items: flex-end; }
.dm-row.is-peer { align-self: flex-start; align-items: flex-start; }

/* 通話履歴 chip (LINE 風): 中央寄せの小さい pill。発信/着信どちらでも同じ見た目。
   call_signal.go の /end で direct_messages に "📞 通話 M:SS" or "📞 不在着信"
   を insert し、テンプレ側 (hasPrefix .Body "📞 ") で chip にレンダリング。
   別途 call_history テーブル / /calls ページが並列で詳細履歴を持つ (29b7a28)。 */
.dm-row.dm-row--call-event {
  align-self: center;
  align-items: center;
  max-width: 90%;
}
.dm-call-event {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.2;
}
.dm-call-event i { color: var(--accent-cyan); font-size: 0.78rem; }
.dm-call-event-text { color: var(--text-primary); font-weight: 600; }
.dm-call-event-time { color: var(--text-muted); margin-left: 4px; }
/* 通話イベントの色分け: 応答済み=緑 / つながらなかった系(不在/応答なし/拒否)=赤。
   ネオン色 (--accent-green/--accent-pink) は赤緑が隣接するとチカチカするため、
   彩度を抑えた落ち着いたトーンを使う。inline style は html/template が var() を
   潰すので class で付ける。 */
.dm-row--call-event .ico-phone          { --ico-color: #4cb98c; }
.dm-row--call-event .dm-call-event-text { color: #4cb98c; }
.dm-row--call-event.is-missed .ico-phone          { --ico-color: #d97585; }
.dm-row--call-event.is-missed .dm-call-event-text { color: #d97585; }
/* メッセージ一覧の通話プレビュー (同じく class で色分け) */
.msg-call-ico            { --ico-color: #4cb98c; }
.msg-call-ico.is-missed  { --ico-color: #d97585; }
.msg-call-text           { color: #4cb98c; }
.msg-call-text.is-missed { color: #d97585; }

/* === 引用 (返信元 snippet) === */
.dm-quote {
  display: block; max-width: 100%;
  background: var(--bg-card-hover);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 10px;
  padding: 4px 8px; margin-bottom: 4px;
  font-size: 0.78rem; cursor: pointer;
  border-top: none; border-right: none; border-bottom: none;
  color: var(--text-muted); text-align: left;
  /* inline span の overflow:hidden は効かないので、親 block 側で
     name + text をまとめて 1 行省略する。 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-quote-name { color: var(--accent-cyan); font-weight: 700; margin-right: 6px; }
.dm-quote-text { color: var(--text-secondary); }

/* === bubble === */
.dm-bubble {
  width: fit-content; max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px; border-radius: 16px;
  font-size: 0.93rem; line-height: 1.45;
  word-break: break-word; overflow-wrap: anywhere;
  /* white-space: pre-wrap は本文 .dm-text にだけ当てる。
     ここに付けるとテンプレのインデント (改行 + 空白) まで文字として
     描画され、本文の上下に不思議な空白行が入る。 */
}
.dm-row.is-me   .dm-bubble {
  background: var(--gradient-primary); color: #fff;
  border-bottom-right-radius: 4px;
}
.dm-row.is-peer .dm-bubble {
  background: rgba(255, 255, 255, 0.06); color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
body.theme-light .dm-row.is-peer .dm-bubble {
  background: #e9edf1; color: #0f1419; border: 1px solid rgba(0, 0, 0, 0.07);
}
/* 送信側 (.is-me) はグラデ維持。php-style.css §109 の text-primary 強制で
   dark に潰されるのを !important + * で全 descendant に白を当てて救済。
   投稿ボタン (.post-btn) と同じ「ネオン背景 = 白文字」思想。
   重要: v2 DM テンプレは .dm-row.is-me を使う (.dm-message-row.sent ではない)。
   php-style.css 側の .dm-message-row.sent ルールは v1/PHP 互換用の死蔵。 */
body.theme-light .dm-row.is-me .dm-bubble,
body.theme-light .dm-row.is-me .dm-bubble *,
body.theme-light .dm-row.is-me .dm-bubble a { color: #ffffff !important; }
.dm-bubble .dm-image {
  display: block; max-width: 100%; height: auto;
  border-radius: 10px; margin-bottom: 4px;
}
.dm-bubble .dm-image:not([src]),
.dm-bubble .dm-image[src=""] { display: none; }

/* 動画メッセージ (画像と同じ吹き出し馴染ませ思想)。
   playsinline + controls + preload=metadata を template 側で付与。 */
.dm-bubble .dm-video {
  display: block;
  max-width: min(360px, 100%);
  width: 100%;
  height: auto;
  max-height: 480px;
  border-radius: 10px;
  margin-bottom: 4px;
  background: #000;
}
.dm-bubble.image-only .dm-video {
  border-radius: 16px;
  margin: 0;
  max-width: min(360px, 100%);
}
.dm-bubble.has-video:not(.image-only) .dm-video {
  margin: -8px -12px 8px;
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  border-radius: 0;
}
.dm-row.is-me   .dm-bubble.image-only.has-video,
.dm-row.is-me   .dm-bubble.image-only .dm-video { border-bottom-right-radius: 4px; }
.dm-row.is-peer .dm-bubble.image-only.has-video,
.dm-row.is-peer .dm-bubble.image-only .dm-video { border-bottom-left-radius: 4px; }

/* 動画プレビュー (送信前): 画像プレビューの dm-imgpreview と同じ思想 */
.dm-vidpreview {
  position: relative;
  padding: 8px 12px 0;
}
.dm-vidpreview video {
  display: block;
  max-width: min(280px, 100%);
  max-height: 200px;
  border-radius: 10px;
  background: #000;
}
.dm-vidpreview > button {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.dm-vidpreview > button:hover { background: rgba(0,0,0,.85); }

/* === 画像メッセージ (LINE/Instagram/X 風) ===
   - 画像のみ:   吹き出し背景・余白を取り去り、画像そのものを吹き出しに。
   - 画像+本文: 画像は吹き出しの端から端まで貼り付け、本文は下に通常 padding で続く。
   いずれもバブルの角丸を画像にも適用して馴染ませる。 */
.dm-bubble.image-only {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden;
  border-radius: 16px;
}
.dm-bubble.image-only .dm-image {
  border-radius: 16px;
  margin: 0;
  width: auto;
  max-width: min(320px, 100%);
}
.dm-row.is-me   .dm-bubble.image-only,
.dm-row.is-me   .dm-bubble.image-only .dm-image { border-bottom-right-radius: 4px; }
.dm-row.is-peer .dm-bubble.image-only,
.dm-row.is-peer .dm-bubble.image-only .dm-image { border-bottom-left-radius: 4px; }

.dm-bubble.has-image:not(.image-only) { overflow: hidden; }
.dm-bubble.has-image:not(.image-only) .dm-image {
  /* 吹き出しの padding (8px 12px) を相殺して画像を端まで貼る */
  margin: -8px -12px 8px;
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  border-radius: 12px 12px 0 0;
}
/* 本文だけ pre-wrap で改行保持。bubble 全体に当てるとテンプレのインデントまで
   見える空白行になるので必ず .dm-text のスコープに限定する。 */
.dm-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.dm-text p { margin: 0; }
.dm-text br + br { display: none; }

/* === メタ (時刻 + アクション) === */
/* LINE 風: 時刻 + 返信/削除/リアクションは既定で隠し、吹き出しタップで出す。
   常時表示だとごちゃついて見にくいので。 */
.dm-meta {
  display: none; align-items: center; gap: 6px;
  margin-top: 3px;
  font-size: 0.72rem; color: var(--text-muted);
}
.dm-row.show-actions .dm-meta { display: inline-flex; }
/* デスクトップ (ホバー可能) ではホバーでも出す。タッチ端末には影響しない。 */
@media (hover: hover) {
  .dm-row:hover .dm-meta { display: inline-flex; }
}
.dm-bubble { cursor: pointer; }
.dm-row.show-actions .dm-bubble { box-shadow: 0 0 0 2px var(--accent-cyan); }
.dm-time { font-size: inherit; }
.dm-act {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.9rem; padding: 2px 6px;
  border-radius: 6px; line-height: 1;
}
.dm-act:hover { color: var(--accent-cyan); background: var(--action-reply-bg); }
.dm-meta .inline-form { display: inline; margin: 0; }

/* === リアクション === */
.dm-reacts { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.dm-react {
  background: var(--bg-card-hover); border-radius: 999px;
  padding: 2px 8px; font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 3px;
}
.dm-react small { color: var(--text-muted); font-size: 0.72rem; }

/* === ハイライト (引用元へジャンプ) === */
.dm-highlight {
  animation: dm-highlight-flash 1.4s ease-out;
}
@keyframes dm-highlight-flash {
  0%   { background: rgba(0, 229, 255, 0.20); }
  100% { background: transparent; }
}

/* === 現況届けの発令による投稿バッジ (PHP _layout_header.php L129 互換) ===
   _post_card / view_post / 引用カード / composer で使う共通スタイル。
   PHP では inline CSS だが v2 ではここに移植。 */
.post-genkyo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 8px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; line-height: 1.4;
  text-decoration: none;
  background: rgba(124,77,255,0.05);
  border: 1px solid var(--border-primary);
  color: var(--accent-cyan) !important;
  max-width: 100%;
  transition: background 0.12s, transform 0.12s;
}
body.theme-light .post-genkyo-tag {
  /* 枠は元の控えめな見た目 (薄い背景+ラベンダー枠) を維持。
     本文 (.g-topic) は color:inherit なので、ここの color を変えるだけで
     「お題：〇〇」の 〇〇 部分だけブランドブルー (--accent-cyan = ライト時
     #1d9bf0) になる。アイコンと .g-l「お題：」は別途 --text-secondary を
     強制しているためグレーのまま。 */
  background: rgba(0,131,168,0.06);
  color: var(--accent-cyan) !important;
  border-color: #d9e0ee;
}
a.post-genkyo-tag:hover { transform: translateY(-1px); }
.post-genkyo-tag i { font-size: 0.78rem; flex-shrink: 0; color: var(--text-secondary) !important; }
.post-genkyo-tag .g-l { white-space: nowrap; color: var(--text-secondary) !important; font-weight: 600; }
.post-genkyo-tag .g-topic {
  color: inherit; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; max-width: 260px;
}
/* お題本体は常時表示 (テキスト短縮後はモバイルでも収まる、はみ出しは ellipsis)。 */

/* === X 風アンケート (投票/予想/質問箱) を TL にインライン描画 === */
.gk-poll { margin: 8px 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* お題本文 (埋め込みの主役。旧: 極小ピル内のみだった) */
.gk-poll .gk-q { align-self: stretch; font-weight: 700; font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); word-break: break-word; }
/* 埋め込み内の締切カウントダウン */
.gk-embed-cd { white-space: nowrap; }
.gk-embed-cd.gk-cd-soon { color: #ff8c42; font-weight: 800; }
.gk-embed-cd.gk-cd-urgent { color: #ff4d6d; font-weight: 800; }
.gk-embed-cd.gk-cd-done { color: var(--text-secondary); }
/* お題バッジ行 (種類チップ + お題バッジ) */
.gk-tagrow { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.gk-tagrow .post-genkyo-tag { margin: 4px 0 2px; min-width: 0; }
/* 種類チップ (投票/予想/質問箱) — genkyo_home の .gkh-tbadge と同色 */
.gk-kind {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.66rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  color: #fff; white-space: nowrap; letter-spacing: .02em;
}
.gk-kind i { font-size: 0.62rem; }
.gk-kind.k-poll { background: #2563eb; }
.gk-kind.k-predict { background: #7c4dff; }
.gk-kind.k-q { background: #0891b2; }
/* お題バッジは内容幅に収める (縦 flex の stretch で横いっぱいに伸びるのを防ぐ)。 */
.gk-poll .post-genkyo-tag { align-self: flex-start; max-width: 100%; margin-bottom: 2px; }
/* 投票/予想のフォーム・結果バーは全幅で並ぶ。 */
.gk-poll form, .gk-poll .gk-poll-res, .gk-poll .gk-poll-meta { align-self: stretch; }
.gk-poll form { display: flex; flex-direction: column; gap: 7px; margin: 0; }
/* 投票/賭けボタン */
.gk-poll-vote {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; font-weight: 700;
  padding: 11px 15px; border-radius: 12px;
  border: 1.5px solid var(--accent-cyan); background: rgba(0,229,255,0.08);
  color: var(--text-primary); text-decoration: none;
  transition: background .12s, transform .1s, box-shadow .12s;
}
.gk-poll-vote:hover { background: rgba(0,229,255,0.16); box-shadow: 0 2px 10px rgba(0,229,255,0.14); }
.gk-poll-vote:active { transform: scale(.985); }
.gk-poll-vote.single { justify-content: center; }
.gk-poll-vote .gk-poll-pct { border: 0; background: none; padding: 0; color: var(--text-secondary); font-weight: 700; }
/* 結果バー */
.gk-poll-res {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px; overflow: hidden;
  background: rgba(127,127,127,0.10); border: 1px solid var(--border-primary);
}
.gk-poll-res.mine { border-color: var(--accent-cyan); }
.gk-poll-fill {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(0,229,255,0.20); border-radius: 12px; transition: width .4s ease;
  transform-origin: left; animation: gkFillIn .55s cubic-bezier(.22,.9,.35,1);
}
@keyframes gkFillIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .gk-poll-fill { animation: none; } }
.gk-poll-fill.predict { background: rgba(124,77,255,0.22); }
.gk-poll-res .gk-poll-lbl { position: relative; z-index: 1; flex: 1; min-width: 0; font-weight: 700; color: var(--text-primary); }
.gk-poll-res .gk-poll-lbl i { color: var(--accent-cyan); }
.gk-poll-res .gk-poll-lbl i.fa-crown { color: #ffce54; }
/* 首位の選択肢を強調 (閉票後は王冠も) */
.gk-poll-res.top .gk-poll-fill { background: rgba(0,229,255,0.30); }
.gk-poll-res.top .gk-poll-fill.predict { background: rgba(124,77,255,0.32); }
.gk-poll-res.top .gk-poll-pct { color: var(--accent-cyan); }
.gk-poll-res.top .gk-poll-fill.predict ~ .gk-poll-pct { color: #a78bfa; }
.gk-poll-res .gk-poll-pct { position: relative; z-index: 1; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.gk-poll-meta { font-size: 0.78rem; color: var(--text-secondary); padding-left: 2px; }
/* 締切到達時にカウントダウンの前置詞 (「締切まで」「残」等) を隠す (genkyo-countdown.js) */
.gk-cd-done .gk-cd-pfx { display: none; }
/* 引用カード内: 引用元が投票/予想/質問箱 (body 空) の時のヒント */
.quote-genkyo-hint { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--accent-cyan); margin-top: 2px; }
.gk-bet-amt { font-size: 0.84rem; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.gk-bet-amt i { color: #ffce54; }
.gk-bet-amt input {
  width: 72px; border: 1px solid var(--border-primary); background: rgba(255,255,255,0.05);
  color: var(--text-primary); border-radius: 8px; padding: 5px 8px; font: inherit;
}
body.theme-light .gk-bet-amt input { background: #fff; }
/* スマホ: TL 内インラインアンケートを縦長画面に最適化 */
@media (max-width: 767px) {
  .gk-poll-vote { padding: 10px 13px; font-size: 0.9rem; }
  .gk-poll-res { padding: 9px 12px; }
  .gk-poll-res .gk-poll-lbl { font-size: 0.9rem; }
  .post-genkyo-tag .g-topic { max-width: 60vw; }
  .gk-bet-amt { flex-wrap: wrap; }
}

/* === Composer ===
   .dm-shell flex column の最下段。flex-shrink: 0 で常にレイアウト下端に居る。
   position:fixed や visualViewport JS は使わない (PHP 互換)。 */
.dm-composer {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-primary);
  background: var(--bg-primary);
  flex-shrink: 0;
  box-sizing: border-box;
}
.dm-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.dm-input {
  flex: 1; resize: none; min-height: 40px; max-height: 160px;
  padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary); color: var(--text-primary);
  font-family: inherit; box-sizing: border-box;
  /* iOS Safari は input/textarea の font-size が 16px 未満だと focus 時に
     画面を自動拡大するので、明示的に 16px を当てて zoom を抑制する。 */
  font-size: 16px;
}
.dm-input:focus { outline: none; border-color: var(--accent-cyan); }
.dm-img-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  color: var(--accent-cyan); cursor: pointer; font-size: 1.1rem;
  border-radius: 50%; transition: background var(--transition-fast);
}
.dm-img-btn:hover { background: var(--action-reply-bg); }
.dm-send {
  padding: 10px 16px; border: none; border-radius: var(--radius-full);
  background: var(--gradient-primary); color: #fff; cursor: pointer;
  font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dm-send:hover { filter: brightness(1.15); }
/* ライト: 紙飛行機アイコンが §109 text-primary 強制で dark になるのを
   !important + * で白に固定 (is-me バブルと同じ思想)。 */
body.theme-light .dm-send,
body.theme-light .dm-send *,
body.theme-light .dm-send i { color: #ffffff !important; }

.dm-replyto {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-card-hover); border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-cyan); font-size: 0.85rem;
}
/* 返信中バー: name + text を 1 行に揃えて、長文は ellipsis で省略。
   text のみ span に nowrap を当てても効かない (inline 要素は overflow 不可)
   ので、block 親の dm-replyto-body 側で省略する。 */
.dm-replyto-body { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dm-replyto-name { color: var(--accent-cyan); font-weight: 700; margin-right: 6px; }
.dm-replyto-text { color: var(--text-muted); }
.dm-replyto button {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1.2rem; padding: 4px 8px;
}

.dm-imgpreview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; background: var(--bg-card-hover); border-radius: var(--radius-md);
}
.dm-imgpreview img { max-width: 80px; max-height: 80px; border-radius: 6px; }
.dm-imgpreview button {
  background: rgba(0,0,0,0.4); color: #fff; border: none;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
}

/* === 音声通話モーダル === */
.dm-call-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
}
.dm-call-card {
  background: var(--bg-secondary); border-radius: var(--radius-xl);
  padding: 32px 24px; min-width: 280px; max-width: 90vw;
  display: flex; flex-direction: column; gap: 20px; align-items: center;
  box-shadow: var(--shadow-lg);
}
.dm-call-peer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dm-call-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent-cyan);
}
.dm-call-avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.dm-call-name strong { font-size: 1.15rem; }
.dm-call-status { margin-top: 4px; }
.dm-call-timer { margin-top: 2px; font-variant-numeric: tabular-nums; }
.dm-call-controls { display: flex; gap: 16px; align-items: center; }
.dm-call-mute,
.dm-call-hangup {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 1.4rem; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-call-mute   { background: var(--bg-card); color: var(--text-primary); }
.dm-call-mute.is-muted { background: var(--accent-gold); color: #000; }
.dm-call-hangup { background: var(--accent-pink); }
.dm-call-hangup:hover { filter: brightness(1.15); }
.dm-call-camera {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 1.4rem;
  background: var(--bg-card); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-call-camera.is-off { background: var(--accent-gold); color: #000; }
/* カメラボタンはビデオ通話の時だけ出す */
.dm-call-modal[data-call-video="0"] .dm-call-camera { display: none; }

/* === 最小化ボタン (通話確立中だけ表示) === */
.dm-call-min {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.16); color: #fff; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-call-min:hover { background: rgba(255,255,255,0.28); }
.dm-call-modal[data-call-state="idle"] .dm-call-min,
.dm-call-modal[data-call-state="incoming"] .dm-call-min { display: none; }

/* === 最小化フローティング通話バー === */
.dm-call-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  z-index: 9998; width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #1f8f4e, #15c98e); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.dm-call-bar-ic {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.dm-call-bar-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dm-call-bar-meta strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-call-bar-sub { font-size: 0.74rem; opacity: 0.9; font-variant-numeric: tabular-nums; }
.dm-call-bar-hangup {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-pink); color: #fff; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-call-bar-hangup:hover { filter: brightness(1.15); }

/* === ビデオ通話レイアウト (data-call-video="1") ===
   相手の映像を全面、自分の映像を小窓 (PiP)、名前/操作は下部にオーバーレイ。 */
.dm-call-remote-video, .dm-call-local-video { display: none; }
.dm-call-modal[data-call-video="1"] .dm-call-remote-video {
  display: block; position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; background: #000;
}
.dm-call-modal[data-call-video="1"] .dm-call-local-video {
  display: block; position: absolute; z-index: 2;
  right: 14px; top: calc(14px + env(safe-area-inset-top, 0px));
  width: 28vw; max-width: 130px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 12px; border: 2px solid rgba(255,255,255,0.65);
  background: #111; transform: scaleX(-1); /* 自分の映像は鏡像 */
}
.dm-call-modal[data-call-video="1"] .dm-call-card {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  width: 100%; max-width: none; min-width: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  box-shadow: none; border-radius: 0;
  justify-content: flex-end; gap: 16px;
  padding: 24px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
.dm-call-modal[data-call-video="1"] .dm-call-name strong,
.dm-call-modal[data-call-video="1"] .dm-call-status { color: #fff; }
/* 通話中は映像を主役にするためアバターを隠す (着信/発信中はアバター表示のまま) */
.dm-call-modal[data-call-video="1"][data-call-state="active"] .dm-call-avatar { display: none; }
.dm-call-modal[data-call-video="1"] .dm-call-settings-link { display: none; }

/* 相手のカメラOFF (data-remote-video-off="1") のときは黒い映像の代わりに
   相手アバターを中央に表示する (LINE/Zoom 風)。カードを全面・中央寄せにする。 */
.dm-call-modal[data-call-video="1"][data-call-state="active"][data-remote-video-off="1"] .dm-call-card {
  inset: 0; justify-content: center;
  background: rgba(0,0,0,0.6);
}
.dm-call-modal[data-call-video="1"][data-call-state="active"][data-remote-video-off="1"] .dm-call-avatar {
  display: block;
}

/* === 着信モーダル状態切替 ===
   data-call-state=incoming: 応答 / 拒否ボタンのみ
   data-call-state=calling | active: ミュート / 切断ボタンのみ
   confirm() に頼らず明示ボタンにすることで PWA / iOS でも
   user gesture を保持して getUserMedia を呼べる */
.dm-call-controls-incoming,
.dm-call-controls-active { display: none; }
.dm-call-modal[data-call-state="incoming"] .dm-call-controls-incoming { display: flex; }
.dm-call-modal[data-call-state="calling"]  .dm-call-controls-active   { display: flex; }
.dm-call-modal[data-call-state="active"]   .dm-call-controls-active   { display: flex; }
.dm-call-accept,
.dm-call-decline {
  width: 64px; height: 64px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 1.5rem; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-call-accept  { background: #2bbf6a; }
.dm-call-accept:hover  { filter: brightness(1.12); }
.dm-call-decline { background: var(--accent-pink); }
.dm-call-decline:hover { filter: brightness(1.12); }
/* 着信中は着信ボタンを軽く呼吸させる */
@keyframes dmCallPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.dm-call-modal[data-call-state="incoming"] .dm-call-accept {
  animation: dmCallPulse 1.1s ease-in-out infinite;
}
/* 通話モーダル内に置く設定画面への導線リンク (旧 gear popover を /settings/dm に移管) */
.dm-call-settings-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
}
.dm-call-settings-link:hover { color: var(--accent-cyan); }

/* === リアクションピッカー === */
.dm-react-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.dm-react-card {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  padding: 20px; min-width: 280px; max-width: 90vw;
  box-shadow: var(--shadow-lg);
}
.dm-react-card h3 { margin: 0 0 12px; font-size: 1rem; }
.dm-react-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.dm-react-grid button {
  background: var(--bg-card-hover); border: none; cursor: pointer;
  padding: 10px; border-radius: 8px; font-size: 1.4rem;
}
.dm-react-grid button:hover { background: var(--bg-hover); }

/* 言葉の銀行 */
.kb-header { display: flex; align-items: center; justify-content: space-between;
  margin: var(--space-3) var(--space-4); }
.kb-title { margin: 0; font-size: 1.3rem; }
.kb-lock-btn {
  background: transparent; border: 1px solid var(--border-primary); color: var(--text-muted);
  border-radius: var(--radius-full); padding: 6px 14px; cursor: pointer;
}
.kb-lock-btn:hover { border-color: var(--accent-pink); color: var(--accent-pink); }
.kb-gate { max-width: 360px; margin: 28px auto; padding: 26px; text-align: center;
  border: 1px solid var(--border-primary); border-radius: var(--radius-lg); background: var(--bg-card); }
.kb-gate-ico { font-size: 2.2rem; color: var(--accent-cyan); }
.kb-pin-input {
  width: 170px; text-align: center; letter-spacing: 0.35em;
  font-size: 1.4rem; padding: 9px 8px;
  border-radius: var(--radius-md); border: 1px solid var(--border-primary);
  background: rgba(255, 255, 255, 0.03); color: var(--text-primary);
}
.kb-pin-input:focus { outline: none; border-color: var(--accent-cyan); }
.kb-gate-btn {
  display: block; width: 100%; margin-top: 14px; padding: 11px; border: none;
  border-radius: var(--radius-full); background: var(--gradient-primary);
  color: #fff; font-weight: 800; cursor: pointer;
}
.kb-account {
  padding: 20px; border-radius: var(--radius-lg); margin: var(--space-4); color: #fff;
  background: linear-gradient(135deg, #3a2d7d, #1f6f8b 60%, #149c8e);
  box-shadow: 0 8px 24px rgba(31, 111, 139, 0.25);
}
.kb-account-bal { font-size: 2.2rem; font-weight: 800; }
.kb-account-bal small { font-size: 0.95rem; opacity: 0.9; }
.kb-account-label { font-size: 0.78rem; opacity: 0.85; margin-top: 12px; }
.kb-account-bank { font-size: 0.8rem; opacity: 0.85; letter-spacing: 0.08em; }
.kb-account-holder { margin-top: 10px; font-size: 0.82rem; opacity: 0.9; }
.kb-convert { font-size: 0.72rem; color: var(--text-muted); text-align: center;
  margin: -6px var(--space-4) var(--space-3); }
.kb-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px var(--space-4) 18px; }
.kb-summary-item {
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  padding: 10px 12px; background: var(--bg-card);
}
.kb-summary-name { font-size: 0.78rem; color: var(--text-muted); }
.kb-summary-val { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin-top: 3px; }
.kb-section-title { font-size: 0.95rem; font-weight: 800; margin: var(--space-3) var(--space-4); }
.kb-list { list-style: none; padding: 0; margin: 0; }
.kb-row { display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-4); border-bottom: 1px solid var(--border-primary); }
.kb-row-ico { font-size: 1.1rem; width: 28px; text-align: center; }
.kb-row-lbl { flex: 1; }
.kb-row-time { color: var(--text-muted); font-size: 0.78rem; }
.kb-row-amt { color: #00c896; font-weight: 800; }
.kb-guide-lead { color: var(--text-muted); font-size: 0.88rem;
  line-height: 1.8; margin: var(--space-3) var(--space-4); }
.kb-rule {
  padding: 12px 14px; border: 1px solid var(--border-primary);
  border-radius: var(--radius-md); margin: 0 var(--space-4) 8px; background: var(--bg-card);
}
.kb-rule-name { font-weight: 700; color: var(--text-primary); }
.kb-rule-pt { color: #00c896; font-weight: 800; font-size: 0.82rem; margin-left: 4px; }
.kb-rule-desc { color: var(--text-muted); font-size: 0.82rem; margin-top: 3px; }

/* 公式バッジ (specialMark) はユーザカスタムカラー (Misskey 風 user-colors.js が
   --accent-cyan / --accent-purple を上書きできる) の影響を受けない固定色にする。
   PHP twclone はカスタムカラー機能を持たないため、PHP 版の見た目 (常に cyan→purple
   の ✓ 円) と揃えるのが意図。selector specificity 0-1-1 で php-style.css の
   .specialMark (0-1-0) と user-colors の :root, body[class][class] (var の上書き)
   両方に勝つ。adminMark は元々 #1d9bf0 ハードコードなので対応不要。 */
body .specialMark {
  background: linear-gradient(135deg, #00e5ff, #7c4dff);
}

/* Community notes (view_post.html の投稿詳細下「公共注釈」ブロック専用) -
   注意: /community_notes ページ用のスタイルは php-style.css (.cn-page / .cn-item /
   .cn-status-badge / .cn-rate-helpful 等) を使う。view_post の旧 BEM 命名
   (.cn-note / .cn-note-head / .cn-note-body 等) とクラス名がぶつかるので、
   ここでは必ず親 .cn-note でスコープして community_notes ページに漏らさない。 */
.cn-section { margin: var(--space-5) var(--space-4) 0; padding-top: var(--space-3);
  border-top: 1px solid var(--border-primary); }
.cn-section-title { font-size: 1rem; color: var(--text-muted); margin: 0 0 var(--space-3); }
.cn-note { margin-bottom: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-card); }
.cn-note--proposed { opacity: 0.85; border-style: dashed; }
.cn-note--hidden { opacity: 0.5; }
.cn-note .cn-note-head { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.cn-note-status {
  margin-left: auto; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 0.7rem; font-weight: 700;
}
.cn-note-status--visible { background: var(--action-repost-bg); color: var(--accent-green); }
.cn-note-status--proposed { background: var(--action-bookmark-bg); color: var(--accent-gold); }
.cn-note-status--hidden { background: var(--action-like-bg); color: var(--accent-pink); }
.cn-note .cn-note-body { margin-top: 6px; color: var(--text-primary); font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; }
.cn-note-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; font-size: 0.83rem; }
.cn-note-counts { color: var(--text-muted); margin-right: auto; }
.cn-rate-form { margin: 0; }
.cn-note .cn-rate-btn {
  background: transparent; border: 1px solid var(--border-primary); color: var(--text-muted);
  border-radius: var(--radius-full); padding: 4px 12px; font-size: 0.78rem; cursor: pointer;
  flex: none; min-width: 0; font-weight: 600;
}
.cn-note .cn-rate-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.cn-note .cn-rate-btn--on { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); }
.cn-note .cn-rate-btn--neg.cn-rate-btn--on { background: var(--accent-pink); border-color: var(--accent-pink); color: #fff; }
.cn-empty { color: var(--text-muted); font-size: 0.88rem; padding: 0 var(--space-4); }
.cn-submit-form {
  margin: var(--space-3) 0 0; padding: var(--space-3);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-card);
}
.cn-submit-btn {
  margin-top: 8px; padding: 8px 22px; border-radius: var(--radius-full); border: none;
  background: var(--gradient-primary); color: #fff; font-weight: 800; cursor: pointer;
}

/* Admin */
.admin-title { margin: var(--space-3) var(--space-4); font-size: 1.3rem; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; padding: 0 var(--space-4) var(--space-4); }
.admin-stat-card {
  padding: 14px 16px; border: 1px solid var(--border-primary);
  border-radius: var(--radius-md); background: var(--bg-card);
}
.admin-stat-card--urgent { border-color: var(--accent-pink); background: var(--action-like-bg); }
.admin-stat-card--warn { border-color: var(--accent-gold); background: var(--action-bookmark-bg); }
.admin-stat-label { color: var(--text-muted); font-size: 0.82rem; }
.admin-stat-value { color: var(--text-primary); font-size: 1.8rem; font-weight: 800; line-height: 1.2; margin-top: 4px; }
.admin-stat-link { display: inline-block; margin-top: 6px; color: var(--accent-cyan); text-decoration: none; font-size: 0.83rem; }
.admin-nav { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 var(--space-4) var(--space-3); }
.admin-nav-link {
  padding: 8px 14px; border: 1px solid var(--border-primary); border-radius: var(--radius-full);
  text-decoration: none; color: var(--text-primary); font-size: 0.88rem;
}
.admin-nav-link:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.admin-table { width: calc(100% - 2*var(--space-4)); margin: 0 var(--space-4);
  border-collapse: collapse; font-size: 0.86rem; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-primary); text-align: left; }
.admin-table th { color: var(--text-muted); font-weight: 600; }
.admin-table td a { color: var(--accent-cyan); text-decoration: none; }
.admin-table code { background: var(--bg-hover); padding: 1px 6px; border-radius: 4px; font-size: 0.8em; }
.badge {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700;
}
.badge--ok      { background: var(--action-repost-bg); color: var(--accent-green); }
.badge--warn    { background: var(--action-bookmark-bg); color: var(--accent-gold); }
.badge--danger  { background: var(--action-like-bg); color: var(--accent-pink); }
.inline-form { display: inline; margin: 0; }
.admin-btn {
  padding: 5px 12px; border: 1px solid var(--border-primary);
  background: transparent; color: var(--text-primary);
  border-radius: var(--radius-full); cursor: pointer; font-size: 0.8rem;
}
.admin-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.admin-btn--small { padding: 3px 10px; font-size: 0.76rem; }
.admin-feedback-list { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--space-4); }
.admin-feedback-item { padding: var(--space-3); border: 1px solid var(--border-primary);
  border-radius: var(--radius-md); background: var(--bg-card); }
.admin-feedback-item--new { border-color: var(--accent-cyan); background: var(--action-reply-bg); }
.admin-feedback-head { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; margin-bottom: 6px; }
.admin-feedback-cat { background: var(--bg-hover); padding: 1px 6px; border-radius: 4px; font-size: 0.74rem; }
.admin-feedback-time { margin-left: auto; color: var(--text-muted); }
.admin-feedback-body { color: var(--text-primary); white-space: pre-wrap; font-size: 0.92rem; }

/* Search */
.search-form {
  display: flex; gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.search-input {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--border-primary); border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font: inherit;
}
.search-input:focus { outline: none; border-color: var(--accent-cyan); }

/* 入力欄の左に虫眼鏡アイコン: ラッパーを flex 化しアイコンと入力を横並び
   (絶対配置をやめて重なりを構造的に排除)。枠/背景はラッパーに移す。 */
.search-inwrap {
  position: relative; flex: 1;
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--border-primary); border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
}
.search-inwrap:focus-within { border-color: var(--accent-cyan); }
.search-form-ic { flex: 0 0 auto; color: var(--text-secondary); font-size: 0.95rem; }
.search-inwrap .search-input {
  flex: 1; width: 100%;
  padding: 10px 0; border: 0; border-radius: 0; background: transparent;
}
.search-inwrap .search-input:focus { outline: none; border: 0; }

/* ===== 検索 input の autocomplete dropdown ===== */
/* 親 form は position: relative を指定して dropdown が input の真下に来るように */
.search-form, form:has(.search-suggest-input) { position: relative; }
.search-suggest-box {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 60vh;
  overflow-y: auto;
  /* 不透明背景: var(--bg-card) は半透明で後ろが透けるため固定色にする */
  background: #11141c;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  padding: 6px 0;
}
body.theme-light .search-suggest-box {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}
.ss-section {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 8px 14px 4px;
  text-transform: uppercase;
}
.ss-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  text-decoration: none; color: inherit;
  border-radius: 0;
  transition: background .12s;
}
.ss-item:hover, .ss-item.is-active { background: var(--bg-hover, rgba(124,77,255,0.10)); }
.ss-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  flex: 0 0 36px; background: var(--bg-secondary);
  object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--text-secondary);
}
.ss-avatar-ph { background: linear-gradient(135deg, #7c4dff, #00b8d4); color: #fff; }
.ss-tag-ic, .ss-post-ic {
  width: 36px; height: 36px; border-radius: 10px;
  flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  color: var(--accent-cyan);
  font-weight: 800; font-size: 1.05rem;
}
.ss-post-ic { color: var(--accent-purple); }
.ss-meta { min-width: 0; flex: 1; }
.ss-name {
  color: var(--text-primary); font-weight: 700; font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-sub {
  color: var(--text-secondary); font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-body {
  color: var(--text-secondary); font-size: 0.82rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.ss-item-all .ss-name { color: var(--accent-cyan); }
.ss-empty {
  padding: 14px; text-align: center;
  color: var(--text-secondary); font-size: 0.86rem;
}

/* 検索ページ専用: col-main-header の sticky chrome (rgba(7,9,22,.85) + blur)
   を捨て、検索フォームを .aside-card と同じ「フロート風カード」装飾にする。
   元は edge-to-edge の暗い帯になり、画面下の本体背景と段差が出ていた。
   タブ (検索結果時) は同じカード内に下続きで配置。 */
.col-main-header.col-main-header--search {
  position: static;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: var(--space-3) var(--space-3) 0;
}
/* X 風: 外側カードを廃止し、検索バー (.search-inwrap) 単体のシンプルなピルに。 */
.col-main-header--search .search-form {
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  margin: 0;
}
/* X のサーチピル: 控えめなグレー背景・枠なし、フォーカスで白背景+細い青枠 */
.col-main-header--search .search-inwrap {
  background: rgba(231, 233, 234, 0.10);
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 0 16px;
}
.col-main-header--search .search-inwrap:focus-within {
  background: var(--bg-card);
  border-color: var(--accent-cyan);
}
.col-main-header--search .search-inwrap .search-input { padding: 9px 0; font-size: 0.95rem; }
.col-main-header--search .search-form-ic { font-size: 1rem; }
body.theme-light .col-main-header--search .search-inwrap { background: rgba(0, 0, 0, 0.05); }
body.theme-light .col-main-header--search .search-inwrap:focus-within { background: #fff; }
.col-main-header--search .tabs { margin-top: var(--space-2); }

/* 右サイドバー (col-aside) 内の検索帯だけ scope して、角丸 + 余白で
   フロート感を出す。.aside-search 本体 (background / position:sticky) は
   他箇所でも使われているので一切触らず、ここでは radius と padding のみ
   上書き。元は side-padding が 0 で帯が col-aside の content edge まで
   伸び、radial-gradient 背景との段差が square-edged で目立っていた。 */
.col-aside .aside-search {
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.search-submit {
  padding: 10px 22px; border: none; border-radius: var(--radius-full);
  background: var(--gradient-primary); color: #fff; font-weight: 800; cursor: pointer;
}
.search-section-title {
  margin: var(--space-4) var(--space-4) var(--space-2);
  font-size: 1rem; color: var(--text-muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--border-primary);
}

/* Static */
.static-page { padding: var(--space-4); max-width: 720px; }
.static-page h1 { font-size: 1.4rem; margin: var(--space-3) 0; }
.static-page h2 { font-size: 1.05rem; margin: var(--space-5) 0 6px; color: var(--text-primary); }
.static-page p, .static-page ul { color: var(--text-primary); margin: 6px 0; line-height: 1.7; font-size: 0.93rem; }
.static-page ul { padding-left: 22px; }
.static-page a { color: var(--accent-cyan); }

/* reply / view_post */
.reply-section-title {
  font-size: 1rem; color: var(--text-muted);
  margin: var(--space-5) var(--space-4) var(--space-2);
  padding-bottom: 8px; border-bottom: 1px solid var(--border-primary);
}
.reply-empty {
  margin: var(--space-3) var(--space-4); padding: 24px 16px;
  color: var(--text-muted); text-align: center;
  border: 1px dashed var(--border-primary); border-radius: var(--radius-md);
}
.reply-login-hint {
  padding: var(--space-3); margin: var(--space-3) var(--space-4);
  background: var(--action-reply-bg); border: 1px solid var(--border-glow);
  border-radius: var(--radius-md); text-align: center;
  color: var(--text-muted); font-size: 0.9rem;
}
.reply-login-hint a { color: var(--accent-cyan); text-decoration: none; }

[hidden] { display: none !important; }

/* ===== 投稿詳細ページ (view_post) ===== */

/* 親投稿コンテキスト (返信投稿の上に出る親カード) */
.parent-post-context { position: relative; }
.parent-post-context .thread-line {
  position: absolute;
  left: calc(var(--space-4) + 22px);  /* avatar の中央線 */
  top: 56px; bottom: -8px;
  border-left: 2px solid var(--border-primary);
  pointer-events: none;
}

/* 本投稿 (大表示) */
.post-detail {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.post-detail:hover { background: transparent; }
.post-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.post-detail-author {
  display: flex; gap: var(--space-3); align-items: center;
  flex: 1; min-width: 0;
}
.post-detail-author .author-link { flex-shrink: 0; }
.post-detail-author .author-meta {
  display: flex; flex-direction: column; min-width: 0;
}
.post-detail-author .author-meta .author-name {
  font-size: 1rem; font-weight: 800; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-detail-author .author-meta .author-handle {
  font-size: 0.9rem; color: var(--text-muted);
  white-space: nowrap;
}
.post-detail-body {
  font-size: 1.25rem; line-height: 1.45;
  color: var(--text-primary);
  white-space: pre-wrap; word-wrap: break-word;
  margin: var(--space-3) 0;
}
.post-detail-time {
  color: var(--text-muted); font-size: 0.88rem;
  margin-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-secondary);
}
.post-detail-stats {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) 0;
  color: var(--text-muted); font-size: 0.9rem;
}
.post-detail-stats strong { color: var(--text-primary); font-weight: 800; margin-right: 4px; }
.post-detail-stats a { color: inherit; text-decoration: none; }
.post-detail-stats a:hover strong { text-decoration: underline; }

/* 返信ツリーの depth=1 ノード (full post_card) */
.reply-node { position: relative; }
.reply-node--depth-1.is-continuation::before {
  /* 同一作者連投: 縦線を継続 (OP との連続感) */
  content: ''; position: absolute;
  left: calc(var(--space-4) + 22px);
  top: -1px; height: 16px;
  border-left: 2px solid var(--border-secondary);
}

/* 返信ツリー (深い階層 compact chip)
   設計: Twitter / Mastodon 風の階層 trunk。
   - 各 chip 行は祖先 depth ぶんの "guide column" を flex で並べ、最後に枝列、chip 本体の順
   - 各 guide は ::before で縦線、::after で枝の └ / ├ を描く
   - これにより depth-3 chip は depth-2 trunk の上に自分独自の trunk を
     さらにインデントして持てる → 「親 chip の中に nested する」見た目になる
*/
.reply-tree {
  padding-bottom: var(--space-3);
  --reply-indent-step: 24px;
  /* 返信ツリーの trunk/branch 色は accent-cyan に追従させて user-colors の
     accent 指定が効くようにする (旧: rgba(255,255,255,0.45) ハードコード)。
     color-mix は Safari 16.4+ / Chrome 111+ で対応 (PHP も同じパターンを使用)。 */
  --reply-line-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
}
body.theme-light .reply-tree {
  --reply-line-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);
}

.nested-reply-row {
  display: flex; align-items: stretch;
  /* 1 列目の guide の縦線中心が depth-1 アバター中心 (space-4 + 22) に揃うよう、
     左 padding を `space-4 + 22 - indent-step/2` = `space-4 + 10` にする。 */
  padding: 6px var(--space-4) 6px calc(var(--space-4) + 10px);
  text-decoration: none; color: inherit;
}
.rt-guide {
  width: var(--reply-indent-step);
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
}
/* vline: 祖先 trunk が継続中 → 行の上端〜下端まで縦線を引く */
.rt-guide--vline::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0;
  border-left: 2px solid var(--reply-line-color);
}
/* blank: 祖先 trunk が終了 → 何も描かない (= 空白でインデントだけする) */

/* branch-mid (├): 縦線フル + 中央あたりから右に水平の枝 */
.rt-guide--branch-mid::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0;
  border-left: 2px solid var(--reply-line-color);
}
.rt-guide--branch-mid::after {
  content: ''; position: absolute;
  left: 50%; top: 18px;
  width: 14px;
  border-top: 2px solid var(--reply-line-color);
}
/* branch-last (└): 縦線を chip 中央で止め、丸い corner + 横線 */
.rt-guide--branch-last::before {
  content: ''; position: absolute;
  left: 50%; top: 0;
  width: 14px; height: 18px;
  border-left: 2px solid var(--reply-line-color);
  border-bottom: 2px solid var(--reply-line-color);
  border-bottom-left-radius: 12px;
}

/* depth=1 カードから最初の chip 行へ trunk を繋ぐ橋渡し。
   reply-node の bottom 中央右寄り (= 最初 guide の縦線位置) に縦線を伸ばして
   次行の guide ::before の上端と接合する。 */
.reply-node--depth-1:has(+ .nested-reply-row)::after {
  content: ''; position: absolute;
  /* guide 1 列目の中心 = padding-left + indent-step/2 = space-4 + 10 + 12 = space-4 + 22 */
  left: calc(var(--space-4) + 22px);
  bottom: -2px; height: 4px;
  border-left: 2px solid var(--reply-line-color);
}

.nested-reply-chip {
  display: flex; gap: 10px;
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.nested-reply-chip:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
}
.nested-reply-avatar { flex-shrink: 0; }
.nested-reply-body { flex: 1; min-width: 0; font-size: 0.9rem; }
.nested-reply-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 0.85rem;
}
.nested-reply-head strong { font-weight: 700; color: var(--text-primary); }
.nested-reply-head .author-handle {
  color: var(--text-muted); font-size: 0.78rem;
}
/* 「↳ @parent への返信」を chip 内に小さく出して文脈を明示 */
.nested-reply-to {
  color: var(--text-muted); font-size: 0.72rem;
  margin-left: auto; padding-left: 6px;
  white-space: nowrap;
}
.nested-reply-to::before { content: '↳ '; opacity: 0.7; }
.nested-reply-text {
  color: var(--text-primary); margin-top: 3px; white-space: pre-wrap;
  word-wrap: break-word; line-height: 1.5;
}
.nested-reply-actions { margin-top: 4px; }
.nested-reply-actions .action-btn i { width: 28px; height: 28px; font-size: 14px; }

/* light テーマの trunk/branch 色は --reply-line-color (上で .reply-tree に
   theme-light 用 override 済) で統一しているのでここでは何もしない。 */
.reply-collapse > summary {
  cursor: pointer; list-style: none;
  padding: 8px var(--space-4);
  color: var(--text-muted); font-size: 0.85rem;
}
.reply-collapse > summary::-webkit-details-marker { display: none; }
.reply-collapse[open] > summary { border-bottom: 1px solid var(--border-primary); }

/* ============================================================
 * §17 Phase 3: Animations / Toast / Pull-to-refresh
 * ============================================================ */

/* --- 17.1 Animations ---------------------------------- */
@keyframes v2-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes v2-like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes v2-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes v2-spin {
  to { transform: rotate(360deg); }
}

/* タイムライン投稿 fadeIn (初回描画) */
.timeline .post {
  animation: v2-fade-in 320ms ease-out both;
}
/* 新着 PTR 挿入 — 入場時に .post--new で表示前に opacity=0、--in で fadeIn */
.post.post--new { opacity: 0; transform: translateY(-8px); transition: opacity 360ms ease, transform 360ms ease; }
.post.post--new.post--in { opacity: 1; transform: translateY(0); }

/* like / repost / bookmark / share ボタン押下時 pop (PHP @keyframes likePop と同等)。
 * 旧 selector は .action-btn.action-like.is-popping i だったが、テンプレ側の
 * class は .action-btn.like / .repost / .bookmark / .share なので一致せず無効化
 * していた。.action-btn.is-popping i で全 action ボタンに統一適用する。 */
.action-btn.is-popping i {
  animation: likePop 420ms ease-out;
}

/* repost / share メニューを「下方向に開く」に変更。
 * PHP CSS は bottom: calc(100% + 4px) で上に開くが、v2 ホーム上部の post で
 * 開くとコンポーザに被って読めなくなる。X 風に下に開いて自然な視線移動に。 */
.repost-menu, .share-menu {
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  /* 完全不透明にして背後の post が透けないように。backdrop-filter で安心感。 */
  background: #161b22 !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
/* light テーマでは白寄りの solid に */
body.theme-light .repost-menu,
body.theme-light .share-menu {
  background: #ffffff !important;
  border-color: #e7e9ea !important;
}
/* share は右端ボタンなので右寄せ維持 (php-style L1616 と同等) */
.share-menu { left: auto !important; right: 0 !important; }
/* repost / share / bookmark もタップ時に pop させるための JS-friendly hook */
.action-btn.repost.is-popping i,
.action-btn.share.is-popping i,
.action-btn.bookmark.is-popping i {
  animation: likePop 420ms ease-out;
}

/* shimmer (loading skeleton 用、必要箇所で .skeleton クラスを当てる) */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 800px 100%;
  animation: v2-shimmer 1.2s linear infinite;
  border-radius: var(--radius-md);
}

/* ホバー時の transition 統一 (Phase 2 で散らばってた箇所を補強) */
.action-btn, .author-link, .post {
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* prefers-reduced-motion 尊重 */
@media (prefers-reduced-motion: reduce) {
  .timeline .post,
  .post.post--new,
  .post.post--new.post--in,
  .action-btn.action-like.is-popping i,
  .skeleton {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- 17.2 Toast (統一ピル: 「新しい投稿はありません」と同一デザイン) -------
 * 画面上部中央に出るグラデーションの丸ピル。ライト/ダークで見た目は不変
 * (グラデ + 白文字をハードコード)。showToast() が .mp-toast / .mp-toast-inner を
 * 生成する (web/ts/toast.ts)。リフレッシュトースト (.pull-refresh-toast-inner) と
 * 同じ見た目・同じ出入りアニメに揃えてある。 */
.mp-toast-stack {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  pointer-events: none;
}
.mp-toast {
  max-width: calc(100vw - 24px);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.22s ease, transform 0.24s ease-out;
}
.mp-toast--in  { opacity: 1; transform: translateY(0); }
.mp-toast--out { opacity: 0; transform: translateY(-16px); }
.mp-toast-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.95), rgba(124, 77, 255, 0.95));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.35;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.35),
              0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
.mp-toast-text {
  min-width: 0;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mp-toast-icon svg { width: 18px; height: 18px; display: block; }

/* 種別ごとの色 (形・配置・アニメは全く同一、グラデだけ差し替え) */
.mp-toast--error .mp-toast-inner {
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.97), rgba(214, 40, 90, 0.97));
  box-shadow: 0 8px 24px rgba(255, 77, 109, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.mp-toast--warn .mp-toast-inner {
  background: linear-gradient(135deg, rgba(255, 193, 71, 0.97), rgba(245, 130, 32, 0.97));
  box-shadow: 0 8px 24px rgba(245, 130, 32, 0.32), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ライトテーマ: 汎用文字色ルールに負けてピル上で白文字が濃色になり消えるのを防ぐ
   (= ダークと全く同じ白文字 + グラデを強制)。 */
body.theme-light .mp-toast-inner,
body.theme-light .mp-toast-inner .mp-toast-text,
body.theme-light .mp-toast-icon { color: #ffffff !important; }

/* 長文 (err.Error() 等) はスマホで折り返しを許可 (はみ出し防止) */
@media (max-width: 600px) {
  .mp-toast-text { white-space: normal; word-break: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-toast { transition: opacity 0.18s ease; transform: none; }
  .mp-toast--in, .mp-toast--out { transform: none; }
}

/* --- 17.3 Pull-to-refresh ----------------------------- */
.pull-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: height 180ms ease;
  background: linear-gradient(180deg, var(--bg-card) 0%, transparent 100%);
}
.pull-indicator-icon {
  transition: transform 180ms ease;
  font-size: 1rem;
}
.pull-indicator--ready .pull-indicator-icon {
  transform: rotate(180deg);
  color: var(--accent-cyan);
}
.pull-indicator--loading .pull-indicator-icon {
  animation: v2-spin 700ms linear infinite;
  /* arrow を spinner 風に見せるため border-only に上書き */
  border: 2px solid var(--border-primary);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.pull-indicator--loading .pull-indicator-icon::before { content: ''; }
.pull-indicator--loading .pull-indicator-label { color: var(--accent-cyan); }

/* ============================================================
 * §18 View Transitions API (Chrome 126+, Safari 18+)
 *   - 同一オリジンのナビゲーション時にブラウザが自動で fade を入れる。
 *   - サポート無いブラウザは無視される (普通のページ遷移)。
 *   - 投稿詳細など、移動先で「同じ post」が欲しい所には
 *     view-transition-name を CSS で当てる。
 * ============================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* 投稿カードのモーフィング (一覧 → 詳細で同じ post に滑らかに繋ぐ) */
.post[data-post-id] {
  /* Chrome は属性セレクタの値を view-transition-name に直接使えないので
     名前は付けず、root の fade だけに任せる。
     将来 attr() が view-transition-name で使えるようになったらここで指定。 */
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ============================================================
 * §19  右サイドバー (col-aside) ウィジェット
 *   - .aside-card: トレンド / おすすめユーザー / About 用カード
 *   - .trend-row / .suggestion-row: PHP 版と同等の見た目
 * ============================================================ */
.aside-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.aside-card--mini { padding: var(--space-3); }
.aside-card-title {
  font-size: 1.1rem; font-weight: 800;
  margin: 0 0 var(--space-2) 0;
}
.aside-card-more {
  display: block; margin-top: var(--space-2);
  color: var(--accent-cyan); text-decoration: none;
  font-size: 0.9rem;
}
.aside-card-more:hover { text-decoration: underline; }
.aside-card-links {
  margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: 4px;
}
.aside-card-links a {
  color: var(--text-muted); text-decoration: none; font-size: 0.85rem;
}
.aside-card-links a:hover { color: var(--accent-cyan); }

/* .trend-row は php-style.css L8929 の flex を継承しつつ、
 *   1) border-radius を 0 にする (radius + border-bottom で丸ブラケットに見える対策)
 *   2) border-bottom で各項目を直線で区切る (Twitter/X 風)
 *   3) .trend-rank は「#10」2桁対応で min-width 拡張
 */
.trend-row { border-radius: 0 !important; border-bottom: 1px solid var(--border-primary); padding: 12px 8px !important; }
.trend-row:last-of-type { border-bottom: none; }
.trend-rank { min-width: 48px; width: auto !important; }

/* === 「丸縁ブラケット」対策の一括適用 ===
 * 各「項目リスト」型 component で、border-radius + border-bottom の組み合わせ
 * によりブラケット形が現れていたものを、フラットな直線 separator に統一。
 * .reply-nudge-row    : 返信、忘れていませんか? の各行 (右サイドカード内)
 * .settings-hub-item  : /settings ハブの各メニュー
 * .suggestion-row-main: 検索ホームのおすすめユーザー (radius が付くと丸ブラケット)
 */
.reply-nudge-row { border-radius: 0 !important; }
.settings-hub-item {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border-primary);
}
.settings-hub-item:last-of-type { border-bottom: none; }
.suggestion-row-main { border-radius: 0 !important; }

.suggestion-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-primary);
}
.suggestion-row:last-of-type { border-bottom: none; }
.suggestion-row-main {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  flex: 1; min-width: 0;
}
.suggestion-row-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: 0 0 40px;
}
.suggestion-row-avatar.avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.suggestion-row-info { min-width: 0; overflow: hidden; }
.suggestion-row-name {
  font-weight: 800; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-row-handle {
  color: var(--text-muted); font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-follow-btn {
  background: var(--text-primary); color: var(--bg-primary);
  border: none; border-radius: var(--radius-full);
  padding: 6px 14px;
  font-weight: 800; font-size: 0.85rem; cursor: pointer;
  flex: 0 0 auto;
}
.suggestion-follow-btn:hover { opacity: 0.9; }

/* §20  サイドバーフィードバック ボタン + 右カラムフッター + Settings ハブ */
.sidebar-feedback {
  margin: var(--space-2) 0;
  padding: 0 var(--space-2);
}
.sidebar-feedback-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-feedback-btn:hover {
  background: var(--bg-hover); color: var(--text-primary);
}
@media (max-width: 1279px) {
  /* 旧版は .sidebar-feedback-btn span 全部に display:none を当てていたが、
     これだとドロワー (.side-drawer .sidebar-feedback-btn) の「フィードバック」
     文字まで消えて PWA 表示で寂しくなっていた。PHP は narrow PC sidebar
     (.col-nav 配下) でだけ非表示にしているのでそれに揃える。 */
  .col-nav .sidebar-feedback-btn span { display: none; }
  .col-nav .sidebar-feedback-btn { padding: 10px; }
}

.aside-footer {
  padding: var(--space-3) var(--space-2);
  line-height: 1.6;
}
.aside-footer a {
  color: var(--text-muted); text-decoration: none;
}
.aside-footer a:hover { color: var(--accent-cyan); text-decoration: underline; }

/* Settings ハブ (PHP settings.php と同じ大きなカードリスト) */
.settings-hub {
  display: flex; flex-direction: column;
  padding: var(--space-3);
}
.settings-hub-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: background var(--transition-fast);
}
.settings-hub-item:hover { background: var(--bg-hover); }
.settings-hub-icon {
  font-size: 1.5rem;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 40px;
}
.settings-hub-meta { flex: 1; min-width: 0; }
.settings-hub-title { font-weight: 700; font-size: 1rem; }
.settings-hub-desc { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }
.settings-hub-arrow { color: var(--text-muted); font-size: 1.5rem; }
.settings-hub-divider {
  height: 1px; background: var(--border-primary);
  margin: var(--space-2) var(--space-3);
}
.settings-hub-danger .settings-hub-title { color: var(--accent-pink); }

/* §21 返信、忘れていませんか? */
.reply-nudge-lead { margin-bottom: var(--space-2); line-height: 1.5; }
.reply-nudge-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-primary);
  text-decoration: none; color: inherit;
}
.reply-nudge-row:last-of-type { border-bottom: none; }
.reply-nudge-row:hover { background: var(--bg-hover); }
.reply-nudge-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex: 0 0 36px;
}
.reply-nudge-avatar.avatar-placeholder {
  background: var(--gradient-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.reply-nudge-info { flex: 1; min-width: 0; overflow: hidden; }
.reply-nudge-name {
  font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-nudge-body {
  color: var(--text-muted); font-size: 0.82rem; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-nudge-btn {
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.8rem; font-weight: 700;
  flex: 0 0 auto;
}

/* ============================================================
 * ポスト区切り位置の修正
 *
 * 問題: home.html / profile.html 等は
 *   <article class="post">…本文…</article>
 *   <div style="padding:…72px;"><div class="post-actions">…</div></div>
 * の 2 要素構造で 1 ポストを描画している。.post に
 * border-bottom が掛かっているため、区切り線が「本文と返信ボタンの間」
 * に出てしまい、アクションが次のポストに属しているように見える。
 *
 * 修正: .post の border-bottom を消し、.post-actions を直接子に持つ
 * 隣接 div (= ラッパー) に border-bottom を移す。
 * 結果: ポスト本文と返信ボタンが一体になり、区切り線が「ポストとポストの間」
 * に出るようになる。
 *
 * 対象スコープ:
 *   - .timeline 直下 (home / profile / bookmarks / search)
 *   - .reply-tree 内の reply-node (view_post の返信ツリー)
 *   - .post-actions-wrap (engagement.html 専用クラス)
 *
 * view_post 単独ポストには影響させない (元の border 配置 + #reply section の
 * border-top をいじると二重線になるリスクがあるため、別タスクで対応)。
 * ============================================================ */
.timeline > .post + div:has(> .post-actions),
.reply-tree .reply-node > div:has(> .post-actions),
.post-actions-wrap {
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: var(--space-3) !important;
}
.timeline > .post:has(+ div > .post-actions),
.reply-tree .reply-node > .post:has(+ div > .post-actions) {
  border-bottom: none !important;
}
/* タイムライン末尾は余計な区切り線を出さない */
.timeline > div:has(> .post-actions):last-child {
  border-bottom: none;
}

/* ===========================================================================
 * §27.5 借入中 (赤字) ユーザの視覚マーク (PHP _layout_header.php L161-200 移植)
 *
 *   .avatar.is-deficit-avatar
 *     タイムライン / 投稿詳細 / 引用カード で投稿者アバターを薄く白黒に。
 *     プロフィールページの大アバターは class を付けないので影響しない。
 *
 *   .profile-deficit-badge
 *     プロフィールの名前横に出す「[🏦] 借入中」赤い丸ピル。
 *
 *   名前のグレー化は意図的に未実装 (ユーザ要望 2026-05-25)。
 * =========================================================================== */
.profile-deficit-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid #ff4d6d;
  color: #ff4d6d !important;
  font-size: 0.74rem; font-weight: 800;
  text-decoration: none;
  vertical-align: middle;
}
.profile-deficit-badge:hover { background: rgba(255, 77, 109, 0.20); }
.profile-deficit-badge i { font-size: 0.78rem; }
body.theme-light .profile-deficit-badge {
  background: #ffe5ec; color: #c8002a !important; border-color: #c8002a;
}
.avatar.is-deficit-avatar {
  opacity: 0.4;
  filter: grayscale(0.85) saturate(0.4) brightness(0.95);
}

/* ===========================================================================
 * §28 言葉の銀行 (kotoba_bank) スタイル
 *
 * 旧 pages/kotoba_bank.html 内に inline <style> として 184 行入っていたのを
 * ここに移動。理由:
 *   - inline は毎リクエスト送信 = キャッシュ不可、HTML 7-8KB 増し
 *   - v2.css に出せば 1 年 immutable で long-cache、Gzip 圧縮もまとめて
 *   - テーマ/カスタムカラー override の対象になる (specificity が揃う)
 * PHP kotoba_bank.php の inline <style> ベース、一部省略・整理済。
 * =========================================================================== */
.wb-wrap   { padding: 12px 14px 56px; }
.wb-flash  { padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:0.9rem; font-weight:600;
             background:rgba(255,77,109,0.10); border:1px solid #ff4d6d; color:#ff4d6d; }
.wb-info   { font-size:0.8rem; color:var(--text-secondary); background:rgba(124,77,255,0.06);
             border:1px solid var(--border-primary); border-radius:12px; padding:10px 13px; margin-bottom:14px;
             display:flex; gap:9px; align-items:flex-start; line-height:1.65; }
.wb-info i { color:var(--accent-cyan); flex-shrink:0; margin-top:2px; font-size:1rem; }
.wb-info strong { color:var(--text-primary); }

/* ===== 残高カード (Morioka Portal+ ブランド: 紫→シアン) ===== */
.wb-balance { position:relative; overflow:hidden; padding:18px 20px 15px; border-radius:20px;
              margin-bottom:16px; color:#fff !important;
              background:linear-gradient(135deg,#241c4d 0%,#243355 52%,#1c4257 100%);
              border:1px solid rgba(124,77,255,0.22);
              box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.wb-balance::after { content:''; position:absolute; right:-42px; top:-42px; width:175px; height:175px;
                     border-radius:50%; background:radial-gradient(circle,rgba(124,77,255,0.16),transparent 70%);
                     pointer-events:none; }
.wb-balance.is-deficit { background:linear-gradient(135deg,#4a2230 0%,#5e2a39 55%,#6b2f3d 100%);
                         border-color:rgba(196,74,94,0.30);
                         box-shadow:0 8px 22px rgba(0,0,0,0.35); }
/* テキストは常に白 (カスタムテーマの --text-primary に引っ張られないよう固定) */
.wb-balance, .wb-balance .wb-bank-name, .wb-balance .wb-rank,
.wb-balance .wb-balance-label, .wb-balance .wb-pending,
.wb-balance .wb-balance-num, .wb-balance .wb-balance-num .num,
.wb-balance .wb-balance-num .unit, .wb-balance .wb-deficit-note,
.wb-balance .wb-balance-foot, .wb-balance .wb-balance-foot .holder { color:#fff !important; }
.wb-balance-top  { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wb-bank-name    { font-size:0.82rem; font-weight:700; letter-spacing:0.05em; opacity:0.96;
                   display:flex; align-items:center; gap:6px; }
.wb-rank         { background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.32);
                   border-radius:999px; padding:3px 12px; font-size:0.72rem; font-weight:700; white-space:nowrap; }
.wb-balance-label { position:relative; z-index:1; margin-top:13px; font-size:0.78rem; opacity:0.92;
                    display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wb-pending      { background:rgba(255,255,255,0.20); border-radius:999px; padding:2px 9px;
                   font-size:0.7rem; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.wb-balance-num  { position:relative; z-index:1; margin-top:2px; display:flex; align-items:baseline;
                   gap:6px; flex-wrap:wrap; }
.wb-balance-num .num  { font-size:2.9rem; font-weight:900; line-height:1.0; letter-spacing:-0.01em; }
.wb-balance-num .unit { font-size:1.05rem; font-weight:700; opacity:0.95; }
.wb-deficit-badge { font-size:0.72rem; font-weight:900; letter-spacing:0.04em;
                    background:#fff; color:#c44a5e !important; padding:3px 11px; border-radius:999px; }
.wb-deficit-note { position:relative; z-index:1; margin-top:10px; font-size:0.78rem; font-weight:700;
                   background:rgba(0,0,0,0.18); border:1px dashed rgba(255,255,255,0.55);
                   padding:7px 12px; border-radius:9px; }
.wb-balance-foot { position:relative; z-index:1; margin-top:15px; display:flex; align-items:center;
                   justify-content:space-between; gap:8px; font-size:0.8rem; }
.wb-balance-foot .holder { opacity:0.92; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-balance-link { flex-shrink:0; color:#fff !important; text-decoration:none; font-weight:700;
                   background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.34);
                   border-radius:999px; padding:5px 14px; display:inline-flex; align-items:center; gap:6px;
                   transition:background 0.15s; }
.wb-balance-link:hover { background:rgba(255,255,255,0.32); }

/* ===== 博打タブ共通: 上部の残高ミニカード =====
   ゲームに集中させつつ「今いくらあるか」「賭けると残高がどう動くか」を常時可視化。
   タップで通帳 (取引履歴) に遷移。sticky にして縦スクロールでも残し続ける。 */
.wb-balance-mini {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -2px 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg,#241c4d 0%,#243355 52%,#1c4257 100%);
  border: 1px solid rgba(124,77,255,0.30);
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
  color: #fff !important;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, box-shadow 0.12s;
}
.wb-balance-mini:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.36); }
.wb-balance-mini.is-deficit {
  background: linear-gradient(135deg,#4a2230 0%,#5e2a39 55%,#6b2f3d 100%);
  border-color: rgba(196,74,94,0.34);
}
.wb-balance-mini-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.92;
  display: inline-flex; align-items: center; gap: 6px;
}
.wb-balance-mini-num {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.wb-balance-mini-num .num { font-size: 1.55rem; font-weight: 900; line-height: 1.0; letter-spacing: -0.01em; }
.wb-balance-mini-num .unit { font-size: 0.82rem; font-weight: 700; opacity: 0.95; }
.wb-balance-mini-deficit {
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.04em;
  background: #fff; color: #c44a5e !important; padding: 2px 8px; border-radius: 999px;
  margin-left: 4px;
}
.wb-balance-mini-pending {
  margin-left: auto;
  background: rgba(255,255,255,0.20); border-radius: 999px; padding: 3px 10px;
  font-size: 0.7rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
/* ライトモード: 暗紺グラデのままだとテキストがにじんで読みにくいので、
   彩度の高い藍 → 青緑にして白文字とのコントラストを確保する。子要素 (.num /
   .unit / .label / .pending) も明示的に白に固定。
   ※ 後段の body:has(.gm-topbar) .wb-balance-mini が !important で
      薄色を当ててくるため、こちらも !important を付けて勝つ。
      iOS Safari の :has 振る舞いが不安定な機種でも一律に効く保険。 */
body.theme-light .wb-balance-mini {
  background: linear-gradient(135deg,#3b30ad 0%,#1d6dd0 52%,#0e9aa7 100%) !important;
  border-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 6px 18px rgba(30,80,180,0.28) !important;
  color: #fff !important;
}
body.theme-light .wb-balance-mini.is-deficit {
  background: linear-gradient(135deg,#9b1f3a 0%,#c44a5e 55%,#d96a44 100%) !important;
  border-color: rgba(255,255,255,0.45) !important;
}
body.theme-light .wb-balance-mini,
body.theme-light .wb-balance-mini .wb-balance-mini-label,
body.theme-light .wb-balance-mini .wb-balance-mini-num,
body.theme-light .wb-balance-mini .num,
body.theme-light .wb-balance-mini .unit,
body.theme-light .wb-balance-mini .wb-balance-mini-pending,
body.theme-light .wb-balance-mini i {
  color: #fff !important;
}

@media (max-width: 360px) {
  .wb-balance-mini { padding: 8px 12px; gap: 8px; }
  .wb-balance-mini-num .num { font-size: 1.3rem; }
  .wb-balance-mini-pending { margin-left: 0; }
}

/* ===== アイコンメニュー (Morioka ブランド配色グリッド) ===== */
.wb-menu { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; margin-bottom:20px; }
.wb-menu-item { display:flex; flex-direction:column; align-items:center; gap:7px;
                text-decoration:none; color:var(--text-secondary); }
.wb-menu-item .ic { position:relative; width:58px; height:58px; border-radius:18px;
                    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
                    background:var(--bg-card); border:1px solid var(--border-primary);
                    color:var(--accent-cyan); box-shadow:0 3px 10px rgba(0,0,0,0.10);
                    transition:transform 0.12s, box-shadow 0.12s, background 0.12s; }
.wb-menu-item .lbl { font-size:0.74rem; font-weight:600; text-align:center; line-height:1.25; }
.wb-menu-item:hover .ic { transform:translateY(-3px); box-shadow:0 7px 16px rgba(0,0,0,0.18); border-color:var(--accent-cyan); }
.wb-menu-item.active .ic { background:linear-gradient(135deg,#5238c2,#2c6fae); color:#fff; border-color:transparent; }
.wb-menu-item.active .lbl { color:var(--text-primary); font-weight:800; }
.wb-menu-badge { position:absolute; top:-9px; right:-9px; min-width:26px; height:26px; padding:0 7px;
                 border-radius:999px; background:#ff3b30; color:#fff; font-size:0.92rem; font-weight:800;
                 display:flex; align-items:center; justify-content:center; border:2.5px solid var(--bg-primary);
                 box-shadow:0 2px 6px rgba(0,0,0,0.35); line-height:1; letter-spacing:-0.01em; }
/* 一時停止中のメニュー項目 (さんぽの守バランス調整中など) */
.wb-menu-item.is-disabled { cursor:not-allowed; opacity:0.42; filter:grayscale(1); }
.wb-menu-item.is-disabled:hover .ic { transform:none; box-shadow:0 3px 10px rgba(0,0,0,0.10); border-color:var(--border-primary); }
.wb-menu-item.is-disabled .ic { background:var(--bg-card); color:var(--text-secondary); }
.wb-menu-item.is-disabled .lbl { color:var(--text-secondary); }
.wb-menu-sub { display:block; font-size:0.62rem; font-weight:700; color:var(--text-secondary); margin-top:2px; }
/* さんぽ停止中の本文 */
.walk-suspended { text-align:center; padding:40px 18px; }
.walk-suspended-icon { font-size:3rem; color:var(--text-secondary); opacity:0.5; margin-bottom:14px; filter:grayscale(1); }
.walk-suspended h2 { font-size:1.1rem; margin:0 0 10px; color:var(--text-primary); }
.walk-suspended p { font-size:0.88rem; line-height:1.7; max-width:480px; margin:0 auto; }
/* ===== ライトモード: 明るい背景に調和させる ===== */
body.theme-light .wb-balance {
  background:linear-gradient(135deg,#6a4fe0 0%,#566add 46%,#3f8ed4 100%);
  border-color:rgba(106,79,224,0.30);
  box-shadow:0 10px 26px rgba(94,63,230,0.22);
}
body.theme-light .wb-balance::after { background:radial-gradient(circle,rgba(255,255,255,0.24),transparent 70%); }
body.theme-light .wb-balance.is-deficit {
  background:linear-gradient(135deg,#c44a5e 0%,#d35468 55%,#df6076 100%);
  border-color:rgba(196,74,94,0.32);
}
/* ライトのアイコンタイル: ハードコード白だとカスタムカラー (panel/bg) に追従しないため
   CSS 変数経由にしてユーザのカスタム panel 色が効くようにする (アクティブのグラデは固定)。 */
body.theme-light .wb-menu-item .ic { background:var(--bg-card); border-color:var(--border-primary); color:#5e3fe6;
                                     box-shadow:0 3px 10px rgba(50,80,150,0.10); }
body.theme-light .wb-menu-item:hover .ic { border-color:#5e3fe6; }
body.theme-light .wb-menu-item.active .ic { background:linear-gradient(135deg,#6a4fe0,#3f8ed4);
                                            color:#fff; border-color:transparent; }
body.theme-light .wb-menu-item.active .lbl { color:var(--text-primary); }
body.theme-light .wb-menu-badge { border-color:var(--bg-primary); }

/* ===== 注意書き / 警告 ===== */
.wb-alert { display:flex; align-items:flex-start; gap:9px; padding:11px 14px; border-radius:12px;
            margin-bottom:14px; font-size:0.84rem; line-height:1.6; color:var(--text-primary);
            background:rgba(255,138,0,0.08); border:1px solid rgba(255,138,0,0.35); }
.wb-alert i { color:#ff8a00; margin-top:2px; flex-shrink:0; }
.wb-alert strong { color:#ff8a00; }

.wb-convert { font-size:0.72rem; color:var(--text-secondary); text-align:center; margin:16px 0 4px;
              display:flex; align-items:center; justify-content:center; gap:6px; line-height:1.5; }

.wb-welcome { padding:18px 18px 16px; border-radius:16px; margin-bottom:14px;
              background:linear-gradient(135deg,rgba(124,77,255,0.15),rgba(0,229,255,0.10));
              border:1px solid var(--accent-cyan); }
.wb-welcome h2 { font-size:1.05rem; margin:0 0 5px; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.wb-welcome h2 i { color:var(--accent-purple); }
.wb-welcome p  { font-size:0.85rem; color:var(--text-secondary); margin:0 0 12px; line-height:1.7; }
.wb-welcome strong { color:var(--text-primary); }

.wb-section-h { font-size:0.82rem; font-weight:700; color:var(--text-secondary);
                margin:18px 0 8px; display:flex; align-items:center; gap:7px;
                text-transform:uppercase; letter-spacing:0.08em; }
.wb-section-h i { color:var(--accent-cyan); }
.wb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:14px; }
.wb-card { border:1px solid var(--border-primary); border-radius:14px; padding:13px 15px;
           background:var(--bg-card); display:flex; flex-direction:column; gap:3px;
           text-decoration:none; color:inherit; transition:transform 0.12s, border-color 0.12s; }
.wb-card.link:hover { transform:translateY(-2px); border-color:var(--accent-cyan); }
.wb-card .l { font-size:0.74rem; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }
.wb-card .l i { color:var(--accent-cyan); }
.wb-card .v { font-size:1.25rem; font-weight:800; color:var(--text-primary); line-height:1.1; margin-top:2px; }
.wb-card .v small { font-size:0.72rem; color:var(--text-secondary); font-weight:600; }
.wb-card .s { font-size:0.72rem; color:var(--text-secondary); margin-top:2px; line-height:1.4; }
.wb-card.cta { background:linear-gradient(135deg,rgba(124,77,255,0.10),rgba(0,229,255,0.07)); border-color:var(--accent-cyan); }
.wb-card.warn { border-color:#ff4d6d; }
.wb-card.warn .v { color:#ff4d6d; }

.wb-week { display:flex; flex-wrap:wrap; gap:10px; padding:11px 14px;
           background:var(--bg-card); border:1px solid var(--border-primary); border-radius:12px;
           font-size:0.82rem; color:var(--text-secondary); margin-bottom:14px; align-items:center; }
.wb-week .label { color:var(--text-primary); font-weight:700; display:flex; align-items:center; gap:6px; }
.wb-week .label i { color:var(--accent-cyan); }
.wb-week .stat strong { color:var(--text-primary); font-weight:700; }
.wb-week .total { margin-left:auto; padding:3px 11px;
                  background:linear-gradient(135deg,rgba(0,200,150,0.18),rgba(0,229,255,0.12));
                  border:1px solid #00c896; border-radius:999px; color:#00c896; font-weight:800; }

.wb-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:8px; margin-bottom:16px; }
.wb-sum-it { border:1px solid var(--border-primary); border-radius:12px; padding:11px 13px; background:var(--bg-card); }
.wb-sum-it .t { font-size:0.76rem; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }
.wb-sum-it .t i { color:var(--accent-cyan); }
.wb-sum-it .v { font-size:1.05rem; font-weight:800; color:var(--text-primary); margin-top:4px; }
.wb-sum-it .v.neg { color:#ff4d6d; }
.wb-sum-it .v small { font-size:0.72rem; color:var(--text-secondary); font-weight:600; }

.wb-row { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border-primary); }
.wb-row .ic { width:36px; height:36px; border-radius:10px;
              background:linear-gradient(135deg,rgba(124,77,255,0.14),rgba(0,229,255,0.14));
              color:var(--accent-cyan); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wb-row .meta { flex:1; min-width:0; }
.wb-row .lbl  { color:var(--text-primary); font-size:0.9rem; font-weight:600; }
.wb-row .date { color:var(--text-secondary); font-size:0.74rem; margin-top:1px; }
.wb-row .amt  { color:#00c896; font-weight:800; font-size:0.95rem; white-space:nowrap; }
.wb-row .amt.neg  { color:#ff4d6d; }
.wb-row .amt.pending { color:var(--text-secondary); font-style:italic; }

.wb-empty { text-align:center; color:var(--text-secondary); padding:36px 20px; font-size:0.88rem;
            background:var(--bg-card); border:1px dashed var(--border-primary); border-radius:14px; }
.wb-empty i { display:block; font-size:2rem; margin-bottom:10px; color:var(--accent-cyan); opacity:0.5; }

.wb-item { display:block; padding:14px 15px; border:1px solid var(--border-primary); border-radius:14px;
           margin-bottom:10px; background:var(--bg-card); text-decoration:none; color:inherit;
           transition:transform 0.12s, border-color 0.12s; }
.wb-item:hover { transform:translateY(-1px); border-color:var(--accent-cyan); }
.wb-item-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.wb-item-head .name { flex:1; min-width:0; font-weight:700; color:var(--text-primary); font-size:0.95rem; }
.wb-item-head .name i { color:var(--accent-cyan); margin-right:4px; }
.wb-item-head .age { font-size:0.74rem; color:var(--text-secondary); white-space:nowrap;
                     background:var(--bg-card-hover); padding:2px 9px; border-radius:999px; border:1px solid var(--border-primary); }

.wb-shop-hero { padding:14px 16px; border-radius:14px; margin-bottom:14px;
                background:linear-gradient(135deg,rgba(124,77,255,0.10),rgba(0,229,255,0.07));
                border:1px solid var(--accent-cyan); color:var(--text-primary); font-size:0.86rem; line-height:1.7; }
.wb-shop-hero strong { color:var(--accent-purple); }
.wb-ticket { display:flex; gap:13px; padding:14px; border:1px solid var(--border-primary); border-radius:14px;
             margin-bottom:10px; background:var(--bg-card); }
.wb-ticket .ti { width:54px; height:54px; border-radius:12px;
                 background:linear-gradient(135deg,rgba(124,77,255,0.20),rgba(0,229,255,0.20));
                 color:var(--accent-cyan); display:flex; align-items:center; justify-content:center;
                 font-size:1.45rem; flex-shrink:0; }
.wb-ticket .body { flex:1; min-width:0; }
.wb-ticket .name { font-weight:800; font-size:0.96rem; color:var(--text-primary);
                   display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wb-ticket .price { background:linear-gradient(135deg,#00c896,#00e5ff); color:#fff;
                    padding:2px 10px; border-radius:999px; font-size:0.74rem; font-weight:800; }
.wb-ticket .desc { color:var(--text-secondary); font-size:0.82rem; margin-top:4px; line-height:1.55; }
.wb-ticket .meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; font-size:0.72rem; color:var(--text-secondary); }
.wb-ticket .meta span { background:var(--bg-card-hover); border:1px solid var(--border-primary); border-radius:8px; padding:2px 8px; }
.wb-ticket .why { margin-top:9px; font-size:0.76rem; color:#ff8a00;
                  background:rgba(255,138,0,0.08); border:1px solid rgba(255,138,0,0.30);
                  border-radius:8px; padding:6px 10px; }
.wb-open-btn { border:none; border-radius:999px; padding:9px 18px; font-weight:800; font-size:0.85rem;
               color:#fff !important; cursor:pointer; margin-top:10px;
               background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
               display:inline-flex; align-items:center; gap:7px; }
.wb-open-btn:hover { filter:brightness(1.08); }

.wb-rule { display:flex; gap:13px; padding:14px; border:1px solid var(--border-primary);
           border-radius:14px; margin-bottom:10px; background:var(--bg-card); }
.wb-rule .ic { width:44px; height:44px; border-radius:12px;
               background:linear-gradient(135deg,rgba(124,77,255,0.20),rgba(0,229,255,0.20));
               color:var(--accent-cyan); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.wb-rule .body { flex:1; }
.wb-rule .name { font-weight:800; color:var(--text-primary); font-size:0.92rem;
                 display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wb-rule .pt { background:linear-gradient(135deg,#00c896,#00e5ff); color:#fff;
               padding:2px 10px; border-radius:999px; font-size:0.74rem; font-weight:800; }
.wb-rule .desc { color:var(--text-secondary); font-size:0.83rem; margin-top:4px; line-height:1.65; }

/* ===== ホームからガイドへの導線 ===== */
.wb-guide-cta { display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:14px;
                margin-bottom:14px; text-decoration:none; color:var(--text-primary);
                background:linear-gradient(135deg,rgba(124,77,255,0.10),rgba(0,229,255,0.07));
                border:1px solid var(--border-primary); font-size:0.88rem; font-weight:700;
                transition:transform 0.12s, border-color 0.12s; }
.wb-guide-cta:hover { transform:translateY(-1px); border-color:var(--accent-cyan); }
.wb-guide-cta > i:first-child { color:var(--accent-purple); font-size:1.25rem; flex-shrink:0; }
.wb-guide-cta > i:last-child { color:var(--text-secondary); font-size:0.85rem; flex-shrink:0; }
.wb-guide-cta-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wb-guide-cta-txt b { font-size:0.92rem; font-weight:800; color:var(--text-primary); }
.wb-guide-cta-txt small { font-size:0.76rem; font-weight:600; color:var(--text-secondary); }

/* ===== ガイド (集約版・読みやすさ重視) ===== */
.wb-guide { display:flex; flex-direction:column; gap:13px; }
.wb-guide-hero { display:flex; gap:14px; align-items:flex-start; padding:17px 18px; border-radius:16px;
                 background:linear-gradient(135deg,rgba(124,77,255,0.13),rgba(0,229,255,0.08));
                 border:1px solid var(--border-primary); }
.wb-guide-hero > i { font-size:1.9rem; color:var(--accent-purple); flex-shrink:0; margin-top:3px; }
.wb-guide-hero h2 { margin:0 0 6px; font-size:1.12rem; color:var(--text-primary); }
.wb-guide-hero p  { margin:0; font-size:0.88rem; line-height:1.8; color:var(--text-secondary); }
.wb-guide-hero strong { color:var(--text-primary); }

.wb-guide-sec { padding:15px 17px; border-radius:14px; background:var(--bg-card); border:1px solid var(--border-primary); }
.wb-guide-h   { display:flex; align-items:center; gap:9px; margin:0 0 11px; font-size:1rem;
                color:var(--text-primary); font-weight:800; }
.wb-guide-h i { color:var(--accent-cyan); }
.wb-guide-p   { margin:0; font-size:0.86rem; line-height:1.85; color:var(--text-secondary); }
.wb-guide-p strong { color:var(--text-primary); }
.wb-guide-sec .wb-rule { margin-bottom:8px; }
.wb-guide-sec .wb-rule:last-child { margin-bottom:0; }

.wb-guide-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.wb-guide-list li { position:relative; padding-left:20px; font-size:0.86rem; line-height:1.7; color:var(--text-secondary); }
.wb-guide-list li::before { content:''; position:absolute; left:2px; top:8px; width:7px; height:7px;
                            border-radius:50%; background:var(--accent-cyan); }
.wb-guide-list li b { color:var(--text-primary); font-weight:800; }
.wb-guide-list strong { color:var(--text-primary); }

.wb-guide-note { display:flex; gap:9px; align-items:flex-start; padding:12px 15px; border-radius:12px;
                 font-size:0.82rem; line-height:1.7; color:var(--text-secondary);
                 background:rgba(124,77,255,0.06); border:1px dashed var(--border-primary); }
.wb-guide-note i { color:var(--accent-cyan); flex-shrink:0; margin-top:2px; }
.wb-guide-note strong { color:var(--text-primary); }

/* ===== くじ引き (tab=lottery) ===== */
.wb-lottery { display:flex; flex-direction:column; gap:18px; }
.wb-lottery-head { display:flex; align-items:flex-start; gap:14px; padding:16px;
                   border:1px solid var(--border-primary); border-radius:16px;
                   background:linear-gradient(135deg,rgba(0,200,150,0.10),rgba(0,229,255,0.06)); }
.wb-lottery-head > i { font-size:2rem; color:var(--accent-green,#00c896); flex-shrink:0; }
.wb-lottery-head h2 { margin:0 0 4px; font-size:1.15rem; color:var(--text-primary); }
.wb-lottery-head p { margin:0; font-size:0.85rem; line-height:1.6; }

.wb-lottery-result { text-align:center; padding:22px 16px; border-radius:18px;
                     border:1px solid var(--accent-gold,#ffd700);
                     background:radial-gradient(ellipse at center,rgba(255,215,0,0.18),rgba(255,215,0,0.04));
                     animation:wbLotteryPop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.wb-lottery-result .wb-lottery-burst { font-size:2.6rem; color:var(--accent-green,#00c896);
                     animation:wbLotterySpin 0.9s ease-out; }
.wb-lottery-result .amt { font-size:2.4rem; font-weight:900; color:var(--accent-gold,#ffd700);
                     margin-top:6px; }
.wb-lottery-result .lbl { font-size:0.95rem; color:var(--text-primary); margin-top:4px; font-weight:700; }
/* 結果カラーバリアント */
.wb-lottery-result.lose {
  border-color: var(--accent-pink, #ff4d6d);
  background: radial-gradient(ellipse at center, rgba(255,77,109,0.22), rgba(255,77,109,0.04));
}
.wb-lottery-result.lose .wb-lottery-burst { color: var(--accent-pink, #ff4d6d); }
.wb-lottery-result.lose .amt { color: var(--accent-pink, #ff4d6d); }
.wb-lottery-result.miss {
  border-color: var(--border-primary);
  background: rgba(255,255,255,0.03);
}
.wb-lottery-result.miss .wb-lottery-burst { color: var(--text-secondary); }
.wb-lottery-result.miss .amt { color: var(--text-secondary); }
.wb-lottery-result.bonus {
  border-color: var(--accent-cyan, #00e5ff);
  background: radial-gradient(ellipse at center, rgba(0,229,255,0.18), rgba(0,229,255,0.04));
}
.wb-lottery-result.bonus .wb-lottery-burst { color: var(--accent-cyan, #00e5ff); }
.wb-lottery-result.bonus .amt { color: var(--accent-cyan, #00e5ff); font-size: 1.6rem; }
@keyframes wbLotteryPop { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
@keyframes wbLotterySpin { from { transform:rotate(-180deg) scale(0.4); } to { transform:rotate(0) scale(1); } }

.wb-prize-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.wb-prize-list li { display:flex; align-items:center; gap:12px; }
.wb-prize-list .amt { width:72px; flex-shrink:0; font-weight:800; color:var(--text-primary);
                      font-size:0.9rem; text-align:right; }
.wb-prize-list .bar { flex:1; height:10px; border-radius:999px; background:var(--bg-secondary,rgba(255,255,255,0.06));
                      overflow:hidden; }
.wb-prize-list .bar i { display:block; height:100%; border-radius:999px;
                        background:linear-gradient(90deg,var(--accent-green,#00c896),var(--accent-cyan)); }

.wb-lottery-action { display:flex; flex-direction:column; align-items:center; padding:6px 0 12px; }
.wb-lottery-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
                  padding:15px 40px; border:none; border-radius:999px; cursor:pointer;
                  font-size:1.1rem; font-weight:900; color:#fff;
                  background:linear-gradient(135deg,var(--accent-green,#00c896),var(--accent-cyan));
                  box-shadow:0 6px 20px rgba(0,200,150,0.35); transition:transform 0.12s, box-shadow 0.12s; }
.wb-lottery-btn:hover:not(.is-disabled) { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,200,150,0.45); }
.wb-lottery-btn:active:not(.is-disabled) { transform:translateY(0); }
.wb-lottery-btn.is-disabled { background:var(--bg-secondary,rgba(255,255,255,0.06));
                  color:var(--text-secondary); box-shadow:none; cursor:not-allowed; }

/* ===== 同好談話室 (danwa) ===== */
.danwa-header-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.danwa-header-title i { margin-right:8px; color:var(--accent-cyan); }
.danwa-header-action { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:34px; padding:0 13px; border-radius:999px; text-decoration:none; font-size:0.84rem; font-weight:800;
  color:#fff; background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent-purple) 24%, transparent);
  transition:transform .12s, filter .12s, box-shadow .12s; }
.danwa-header-action:hover { transform:translateY(-1px); filter:brightness(1.04); text-decoration:none; }
.danwa-header-action i, .danwa-header-action span { color:#fff; }

.danwa-wrap { padding:14px 14px 72px; display:flex; flex-direction:column; gap:16px; }

.danwa-flash { display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px;
  font-size:0.86rem; font-weight:700; background:var(--bg-card); border:1px solid var(--border-primary);
  color:var(--text-primary); box-shadow:var(--shadow-sm); }
.danwa-flash i { color:var(--accent-cyan); }
.danwa-flash--ok { background:color-mix(in srgb, var(--accent-green) 9%, var(--bg-card));
  border-color:color-mix(in srgb, var(--accent-green) 32%, var(--border-primary)); color:var(--accent-green); }
.danwa-flash--ok i { color:var(--accent-green); }
.danwa-flash--err { background:color-mix(in srgb, var(--accent-pink) 9%, var(--bg-card));
  border-color:color-mix(in srgb, var(--accent-pink) 34%, var(--border-primary)); color:var(--accent-pink); }
.danwa-flash--err i { color:var(--accent-pink); }

.danwa-hero, .danwa-room-hero, .danwa-intro, .danwa-form, .danwa-members, .danwa-empty {
  border:1px solid var(--border-primary); background:var(--bg-card); box-shadow:var(--shadow-sm);
}

.danwa-hero { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:13px;
  padding:15px; border-radius:16px; }
.danwa-hero::before, .danwa-room-hero::before, .danwa-intro::before {
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple),var(--accent-green));
}
.danwa-hero-main { display:flex; gap:13px; align-items:flex-start; min-width:0; }
.danwa-hero-icon, .danwa-intro-icon { flex-shrink:0; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent-cyan) 18%, transparent); }
.danwa-hero-copy { flex:1; min-width:0; }
.danwa-hero-kicker, .danwa-room-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:0.75rem; font-weight:800; color:var(--accent-cyan); }
.danwa-hero-title { margin-top:4px; font-size:1.08rem; line-height:1.35; font-weight:900; color:var(--text-primary); }
.danwa-hero-sub { margin:5px 0 0; font-size:0.84rem; line-height:1.7; color:var(--text-secondary); }
.danwa-hero-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.danwa-hero-metric { min-width:0; padding:9px 10px; border:1px solid var(--border-secondary); border-radius:12px;
  background:color-mix(in srgb, var(--bg-card-hover) 72%, transparent); line-height:1.15; }
.danwa-hero-metric-label { display:block; margin-bottom:4px; font-size:0.68rem; font-weight:800; color:var(--text-secondary); }
.danwa-hero-metric strong { font-size:1.1rem; font-weight:900; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.danwa-hero-metric span:last-child { margin-left:3px; font-size:0.72rem; font-weight:700; color:var(--text-secondary); }

.danwa-cta { display:flex; align-items:center; gap:12px; text-decoration:none; padding:12px 13px; border-radius:13px;
  color:#fff; background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent-purple) 28%, transparent);
  transition:transform .12s, box-shadow .12s, filter .12s; }
.danwa-cta:hover { transform:translateY(-1px); filter:brightness(1.04); text-decoration:none;
  box-shadow:0 12px 26px color-mix(in srgb, var(--accent-purple) 36%, transparent); }
.danwa-cta:active { transform:translateY(0); }
.danwa-cta-ico { flex-shrink:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,0.22); }
.danwa-cta-main { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.28; }
.danwa-cta-title { font-size:0.94rem; font-weight:900; color:#fff; }
.danwa-cta-sub { margin-top:1px; font-size:0.72rem; font-weight:600; opacity:0.9; color:#fff; }
.danwa-cta-arrow, .danwa-cta i { color:#fff; }

.danwa-sec, .danwa-feed { display:flex; flex-direction:column; gap:9px; }
.danwa-sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px; color:var(--text-secondary); }
.danwa-sec-head > span { display:flex; align-items:center; min-width:0; gap:8px; font-size:0.84rem; font-weight:900; color:var(--text-secondary); }
.danwa-sec-head i { color:var(--accent-cyan); }
.danwa-sec-head small { flex-shrink:0; font-size:0.72rem; font-weight:700; color:var(--text-muted); }
.danwa-list2 { display:flex; flex-direction:column; gap:9px; }

.danwa-room2 { position:relative; display:flex; align-items:stretch; gap:12px; padding:13px 13px 13px 14px;
  border:1px solid var(--border-primary); border-radius:14px; background:var(--bg-card);
  color:inherit; text-decoration:none; overflow:hidden; transition:transform .12s, border-color .12s, background .12s, box-shadow .12s; }
.danwa-room2:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent-cyan) 34%, var(--border-primary));
  background:color-mix(in srgb, var(--bg-card-hover) 70%, var(--bg-card));
  box-shadow:0 10px 24px color-mix(in srgb, var(--accent-cyan) 10%, transparent); text-decoration:none; }
.danwa-room2:active { transform:translateY(0); }
.danwa-room2-accent { position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,hsl(var(--rh,265) 78% 58%),hsl(calc(var(--rh,265) + 28) 78% 50%)); opacity:0.85; }
.danwa-room2.is-member { border-color:color-mix(in srgb, var(--accent-cyan) 28%, var(--border-primary));
  background:linear-gradient(135deg,color-mix(in srgb, var(--accent-cyan) 5%, var(--bg-card)),var(--bg-card)); }
.danwa-room2.is-member .danwa-room2-accent { background:linear-gradient(180deg,var(--accent-cyan),var(--accent-green)); opacity:1; }
.danwa-room2.is-closed { opacity:0.74; }

.danwa-ava { position:relative; flex-shrink:0; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  font-size:1.15rem; font-weight:900; color:#fff; background:linear-gradient(140deg,hsl(var(--rh,265) 70% 56%),hsl(calc(var(--rh,265) + 26) 72% 48%));
  box-shadow:0 4px 12px hsl(var(--rh,265) 60% 45% / 0.28); text-shadow:0 1px 2px rgba(0,0,0,0.25);
  -webkit-user-select:none; user-select:none; }
.danwa-ava.has-img { background:var(--bg-card-hover); }
.danwa-ava img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.danwa-ava-lg { width:64px; height:64px; font-size:1.5rem; }
.danwa-room2.is-closed .danwa-ava { filter:grayscale(0.45); }
.danwa-status { position:absolute; right:-3px; bottom:-3px; width:14px; height:14px; border-radius:50%;
  border:2.5px solid var(--bg-card); box-sizing:border-box; }
.danwa-room2:hover .danwa-status { border-color:var(--bg-card-hover); }
.danwa-status.is-open { background:var(--accent-green); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-green) 45%, transparent);
  animation:danwaPulse 2.2s infinite; }
.danwa-status.is-always { background:var(--accent-cyan); }
.danwa-status.is-shut { background:var(--text-muted); opacity:0.78; }
@keyframes danwaPulse {
  0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-green) 45%, transparent); }
  70% { box-shadow:0 0 0 7px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .danwa-status.is-open { animation:none; }
  .danwa-cta, .danwa-room2, .danwa-submit, .danwa-header-action { transition:none; }
}

.danwa-room2-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.danwa-room2-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-width:0; }
.danwa-room2-title { flex:1; min-width:0; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.danwa-room2-name { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:0.98rem; font-weight:900; color:var(--text-primary); }
.danwa-room2-desc { margin:0; color:var(--text-secondary); font-size:0.82rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.danwa-mchip, .danwa-state-pill { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  font-size:0.68rem; line-height:1.35; font-weight:800; padding:3px 8px; border:1px solid transparent; }
.danwa-mchip { color:var(--accent-cyan); background:color-mix(in srgb, var(--accent-cyan) 10%, transparent);
  border-color:color-mix(in srgb, var(--accent-cyan) 28%, transparent); }
.danwa-mchip.is-muted { color:var(--text-secondary); background:rgba(127,127,127,0.08); border-color:var(--border-primary); }
.danwa-state-pill.is-open { color:var(--accent-green); background:color-mix(in srgb, var(--accent-green) 10%, transparent);
  border-color:color-mix(in srgb, var(--accent-green) 30%, transparent); }
.danwa-state-pill.is-always { color:var(--accent-cyan); background:color-mix(in srgb, var(--accent-cyan) 9%, transparent);
  border-color:color-mix(in srgb, var(--accent-cyan) 28%, transparent); }
.danwa-state-pill.is-shut { color:var(--text-secondary); background:rgba(127,127,127,0.08); border-color:var(--border-primary); }

.danwa-stats { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--text-secondary);
  font-size:0.76rem; font-weight:700; }
.danwa-buzz { display:inline-flex; align-items:center; gap:6px; }
.danwa-buzz-bar { display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.danwa-buzz-bar i { width:3.5px; height:5px; border-radius:2px; display:block; background:var(--border-primary); }
.danwa-buzz-bar i:nth-child(2) { height:7px; }
.danwa-buzz-bar i:nth-child(3) { height:9px; }
.danwa-buzz-bar i:nth-child(4) { height:11px; }
.danwa-buzz-bar i:nth-child(5) { height:13px; }
.danwa-buzz-bar[data-lv="1"] i:nth-child(-n+1),
.danwa-buzz-bar[data-lv="2"] i:nth-child(-n+2),
.danwa-buzz-bar[data-lv="3"] i:nth-child(-n+3),
.danwa-buzz-bar[data-lv="4"] i:nth-child(-n+4),
.danwa-buzz-bar[data-lv="5"] i:nth-child(-n+5) {
  background:linear-gradient(180deg,var(--accent-cyan),var(--accent-purple));
}
.danwa-buzz-label { color:var(--text-secondary); font-size:0.72rem; font-weight:800; }
.danwa-stat { display:inline-flex; align-items:center; gap:5px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.danwa-stat i { color:var(--text-muted); }

.danwa-metas { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--text-secondary); font-size:0.73rem; }
.danwa-time, .danwa-fee { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--border-primary); background:rgba(127,127,127,0.06); font-weight:800; white-space:nowrap; }
.danwa-time.is-open { color:var(--accent-green); border-color:color-mix(in srgb, var(--accent-green) 30%, transparent);
  background:color-mix(in srgb, var(--accent-green) 9%, transparent); }
.danwa-time.is-always { color:var(--accent-cyan); border-color:color-mix(in srgb, var(--accent-cyan) 28%, transparent);
  background:color-mix(in srgb, var(--accent-cyan) 8%, transparent); }
.danwa-time.is-shut { color:var(--text-secondary); }
.danwa-time-sub { font-weight:700; opacity:0.9; }
.danwa-by { min-width:0; max-width:11em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.danwa-fee { margin-left:auto; color:var(--accent-purple); border-color:color-mix(in srgb, var(--accent-purple) 28%, transparent);
  background:color-mix(in srgb, var(--accent-purple) 9%, transparent); font-variant-numeric:tabular-nums; }
.danwa-go { align-self:center; flex-shrink:0; color:var(--text-muted); opacity:0.58; font-size:0.8rem;
  transition:transform .12s, color .12s, opacity .12s; }
.danwa-room2:hover .danwa-go { transform:translateX(2px); color:var(--accent-cyan); opacity:1; }

.danwa-room-hero { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:13px; padding:16px;
  border-radius:16px; background:linear-gradient(180deg,color-mix(in srgb, var(--bg-card-hover) 55%, var(--bg-card)),var(--bg-card)); }
.danwa-room-hero-top { display:flex; align-items:flex-start; gap:14px; }
.danwa-room-hero-body { flex:1; min-width:0; }
.danwa-room-name { margin-top:5px; font-weight:900; font-size:1.2rem; line-height:1.35; color:var(--text-primary);
  overflow-wrap:anywhere; }
.danwa-room-desc { margin:6px 0 0; color:var(--text-secondary); font-size:0.88rem; line-height:1.7; overflow-wrap:anywhere; }
.danwa-room-summary { display:flex; flex-direction:column; gap:8px; padding:10px 0; border-top:1px solid var(--border-secondary);
  border-bottom:1px solid var(--border-secondary); }
.danwa-room-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.danwa-inline-form { display:inline-flex; margin:0; }
.danwa-room-gate { padding:13px 14px; border-radius:13px; border:1px dashed color-mix(in srgb, var(--accent-purple) 38%, var(--border-primary));
  background:color-mix(in srgb, var(--accent-purple) 7%, transparent); }
.danwa-room-gate.is-closed { border-color:color-mix(in srgb, var(--text-muted) 36%, var(--border-primary));
  background:rgba(127,127,127,0.06); }
.danwa-room-gate.is-locked { border-color:color-mix(in srgb, var(--accent-cyan) 32%, var(--border-primary));
  background:color-mix(in srgb, var(--accent-cyan) 6%, transparent); }
.danwa-gate-title { display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--text-primary); font-size:0.9rem; font-weight:900; }
.danwa-gate-title i { color:var(--accent-cyan); }
.danwa-room-gate.is-closed .danwa-gate-title i { color:var(--text-muted); }
.danwa-room-gate p { margin:0 0 10px; color:var(--text-secondary); font-size:0.84rem; line-height:1.65; }
.danwa-room-gate strong { color:var(--text-primary); }
.danwa-gate-form { margin:0; }

.danwa-intro { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:15px; border-radius:16px; }
.danwa-intro-main { display:flex; gap:13px; align-items:flex-start; }
.danwa-intro-head { margin-bottom:4px; color:var(--text-primary); font-size:1rem; font-weight:900; }
.danwa-intro p { margin:0; color:var(--text-secondary); font-size:0.84rem; line-height:1.75; }
.danwa-intro-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.danwa-intro-metrics > div { padding:10px; border:1px solid var(--border-secondary); border-radius:12px;
  background:color-mix(in srgb, var(--bg-card-hover) 72%, transparent); }
.danwa-intro-metrics span { display:block; color:var(--text-secondary); font-size:0.72rem; font-weight:800; }
.danwa-intro-metrics strong { color:var(--text-primary); font-size:1.15rem; font-weight:900; font-variant-numeric:tabular-nums; }
.danwa-intro-metrics small { margin-left:3px; color:var(--text-secondary); font-weight:700; }

.danwa-form { display:flex; flex-direction:column; gap:15px; padding:16px; border-radius:16px; }
.danwa-form-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.danwa-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; color:var(--text-primary); font-size:0.86rem; font-weight:900; }
.danwa-field-help { color:var(--text-secondary); font-size:0.78rem; line-height:1.55; }
.danwa-field-help.is-error { color:var(--accent-pink); font-weight:800; }
.danwa-form input[type=text], .danwa-form input[type=number], .danwa-form textarea {
  width:100%; min-width:0; padding:10px 11px; border:1px solid var(--border-primary); border-radius:10px;
  background:var(--bg-card-hover); color:var(--text-primary); font-size:0.92rem; font-family:inherit; outline:none;
  transition:border-color .12s, box-shadow .12s, background .12s; }
.danwa-form textarea { resize:vertical; min-height:110px; }
.danwa-form input:focus, .danwa-form textarea:focus { border-color:var(--accent-cyan);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-cyan) 13%, transparent); background:var(--bg-card); }
.danwa-form input::placeholder, .danwa-form textarea::placeholder { color:var(--text-muted); }
.danwa-fieldset { margin:0; padding:12px; border:1px solid var(--border-primary); border-radius:13px;
  background:color-mix(in srgb, var(--bg-card-hover) 72%, transparent); }
.danwa-fieldset legend { padding:0 6px; }
.danwa-check { display:inline-flex; align-items:center; gap:8px; color:var(--text-primary); font-size:0.86rem; font-weight:900; }
.danwa-check input { width:16px; height:16px; accent-color:var(--accent-cyan); }
.danwa-check small { color:var(--text-secondary); font-weight:700; }
.danwa-hours-row { display:flex; align-items:flex-end; flex-wrap:wrap; gap:9px; margin-top:9px; }
.danwa-hour-field { display:flex; flex-direction:column; gap:5px; width:86px; }
.danwa-hour-field span { color:var(--text-secondary); font-size:0.72rem; font-weight:800; }
.danwa-hour-sep { padding-bottom:8px; color:var(--text-secondary); font-weight:900; }
.danwa-hour-note { padding-bottom:8px; color:var(--text-secondary); font-size:0.78rem; font-weight:700; }
.danwa-form-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.danwa-iconpick { display:flex; align-items:center; gap:14px; margin:2px 0; }
.danwa-iconpick-prev { flex-shrink:0; width:72px; height:72px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  color:var(--text-secondary); font-size:1.45rem; background:var(--bg-card-hover); border:1px dashed var(--border-primary); }
.danwa-iconpick-prev.has-img { border-style:solid; }
.danwa-iconpick-prev img { width:100%; height:100%; object-fit:cover; display:block; }
.danwa-iconpick-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:9px 15px; border-radius:999px;
  font-weight:800; font-size:0.86rem; color:var(--accent-cyan);
  background:color-mix(in srgb, var(--accent-cyan) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent); transition:background .12s, border-color .12s; }
.danwa-iconpick-btn:hover { background:color-mix(in srgb, var(--accent-cyan) 15%, transparent);
  border-color:color-mix(in srgb, var(--accent-cyan) 44%, transparent); }

.danwa-iconedit { margin-top:2px; padding-top:12px; border-top:1px solid var(--border-secondary); }
.danwa-iconedit > summary { list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--text-primary);
  font-size:0.88rem; font-weight:900; }
.danwa-iconedit > summary::-webkit-details-marker { display:none; }
.danwa-iconedit > summary i { color:var(--accent-cyan); }
.danwa-iconedit-form { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.danwa-iconedit-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.danwa-submit { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 19px;
  border:none; border-radius:999px; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
  text-decoration:none; font-size:0.92rem; font-weight:900; box-shadow:0 8px 18px color-mix(in srgb, var(--accent-purple) 22%, transparent);
  transition:transform .12s, filter .12s, box-shadow .12s; }
.danwa-submit i, .danwa-submit span { color:#fff; }
.danwa-submit:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05); text-decoration:none; }
.danwa-submit:disabled { opacity:0.52; cursor:not-allowed; box-shadow:none; }
.danwa-leave, .danwa-secondary-link { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px;
  padding:0 15px; border-radius:999px; border:1px solid var(--border-primary); background:var(--bg-card-hover);
  color:var(--text-secondary); cursor:pointer; text-decoration:none; font-size:0.84rem; font-weight:800; }
.danwa-leave:hover { color:var(--accent-pink); border-color:color-mix(in srgb, var(--accent-pink) 36%, var(--border-primary)); }
.danwa-secondary-link:hover { color:var(--accent-cyan); border-color:color-mix(in srgb, var(--accent-cyan) 34%, var(--border-primary));
  text-decoration:none; }

.danwa-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 20px; border-style:dashed;
  border-radius:16px; color:var(--text-secondary); text-align:center; }
.danwa-empty-icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  color:var(--accent-cyan); background:color-mix(in srgb, var(--accent-cyan) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-cyan) 24%, transparent); }
.danwa-empty-icon i { font-size:1.35rem; color:var(--accent-cyan); }
.danwa-empty strong { color:var(--text-primary); font-size:0.98rem; }
.danwa-empty > span:not(.danwa-empty-icon) { max-width:360px; color:var(--text-secondary); font-size:0.85rem; line-height:1.65; }

.danwa-members { padding:0; border-radius:14px; overflow:hidden; }
.danwa-members > summary { list-style:none; cursor:pointer; }
.danwa-members > summary::-webkit-details-marker { display:none; }
.danwa-members-head { display:flex; align-items:center; gap:9px; padding:12px 15px; color:var(--text-primary); font-size:0.88rem; }
.danwa-members-head i { color:var(--accent-cyan); }
.danwa-members-head:hover { background:var(--bg-card-hover); }
.danwa-members-caret { margin-left:auto; color:var(--text-muted); transition:transform .18s; font-size:0.74rem; }
.danwa-members[open] .danwa-members-caret { transform:rotate(180deg); }
.danwa-members-list { list-style:none; margin:0; padding:8px 10px 12px; display:flex; flex-direction:column; gap:4px;
  max-height:60vh; overflow-y:auto; border-top:1px solid var(--border-secondary); }
.danwa-member-trigger { border:none; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer;
  text-decoration:underline dotted; text-underline-offset:3px; }
.danwa-member-trigger:hover { color:var(--accent-cyan); }
.danwa-member { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; transition:background .12s; }
.danwa-member:hover { background:var(--bg-card-hover); }
.danwa-member.is-suspended { opacity:0.58; }
.danwa-member-link { flex:1; min-width:0; display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.danwa-member-meta { display:flex; flex-direction:column; min-width:0; }
.danwa-member-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); font-size:0.9rem; font-weight:800; }
.danwa-member-handle { font-size:0.76rem; }
.danwa-member-tag { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:0.72rem; font-weight:900; }
.danwa-member-tag.is-host { color:#fff; background:linear-gradient(135deg,var(--accent-gold),#f59e0b); }
.danwa-member-tag.is-paused { color:var(--accent-pink); background:color-mix(in srgb, var(--accent-pink) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-pink) 34%, transparent); }

body.theme-light .danwa-hero, body.theme-light .danwa-room-hero, body.theme-light .danwa-intro,
body.theme-light .danwa-form, body.theme-light .danwa-members, body.theme-light .danwa-empty,
body.theme-light .danwa-room2 { box-shadow:0 8px 22px rgba(124,77,255,0.08); }
body.theme-light .danwa-room2:hover { background:#fff; }
body.theme-light .danwa-submit, body.theme-light .danwa-cta, body.theme-light .danwa-header-action { color:#fff; }

@media (max-width:520px) {
  .danwa-wrap { padding:12px 12px 72px; gap:14px; }
  .danwa-header-action { width:36px; min-height:36px; padding:0; }
  .danwa-header-action span { display:none; }
  .danwa-hero, .danwa-room-hero, .danwa-intro, .danwa-form { border-radius:14px; padding:14px; }
  .danwa-hero-icon, .danwa-intro-icon { width:40px; height:40px; border-radius:12px; }
  .danwa-hero-title { font-size:1rem; }
  .danwa-hero-rail, .danwa-intro-metrics { gap:6px; }
  .danwa-hero-metric, .danwa-intro-metrics > div { padding:8px; }
  .danwa-room2 { gap:10px; padding:12px 12px 12px 13px; }
  .danwa-ava { width:44px; height:44px; }
  .danwa-ava-lg { width:58px; height:58px; }
  .danwa-room2-head { gap:8px; }
  .danwa-state-pill { align-self:flex-start; }
  .danwa-stats, .danwa-metas { gap:7px; }
  .danwa-fee { margin-left:0; }
  .danwa-room-actions, .danwa-form-actions { align-items:stretch; flex-direction:column; }
  .danwa-room-actions .danwa-submit, .danwa-room-actions .danwa-inline-form, .danwa-room-actions .danwa-leave,
  .danwa-form-actions .danwa-submit, .danwa-form-actions .danwa-secondary-link { width:100%; }
  .danwa-hours-row { align-items:flex-end; }
}
@media (max-width:380px) {
  .danwa-go { display:none; }
  .danwa-state-pill { display:none; }
  .danwa-hero-rail { grid-template-columns:1fr; }
  .danwa-room2-name { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
}

/* ==========================================================
 * さんぽ (tab=walk) — 先進的ダッシュボード
 * - ダーク/ライト両対応 (CSS 変数で切替)
 * - ネオングロー / グラデーション / パルスアニメで動的演出
 * - モバイル幅 (< 480px) でもタッチ操作しやすい配置
 * ========================================================== */

.walk-hub { display: flex; flex-direction: column; gap: 14px; }

/* ===== ヒーロー (発光する歩行アイコン) ===== */
.walk-hero {
  position: relative; overflow: hidden;
  border-radius: 18px;
  padding: 22px 18px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(102, 51, 255, 0.18), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(0, 229, 255, 0.15), transparent 55%),
    linear-gradient(135deg, rgba(10, 14, 42, 0.55), rgba(7, 9, 22, 0.5));
  box-shadow: 0 12px 30px rgba(0, 229, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.walk-hero-glow {
  position: absolute; inset: -40% -20% auto auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.35), transparent 65%);
  filter: blur(28px);
  animation: walk-hero-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes walk-hero-pulse {
  0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(1); }
  50%      { opacity: 0.85; transform: translate(8px, 8px) scale(1.08); }
}
.walk-hero-content { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.walk-hero-head {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.walk-hero-icon {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #00e5ff, #6633ff);
  color: #fff; font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
}
.walk-hero-title {
  margin: 0; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.2;
  background: linear-gradient(120deg, var(--text-primary) 0%, var(--accent-cyan) 50%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.walk-hero-sub {
  margin: 0; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.6;
  /* 行末に 1〜2 文字だけ取り残されるオーフィン防止 (text-wrap: pretty 対応 Chrome / Safari) */
  text-wrap: pretty;
  /* CJK で単語境界を尊重して中途半端な位置で切らない */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ===== スピードゲージ ===== */
.walk-gauge {
  padding: 14px 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.walk-gauge-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 4px;
}
.walk-gauge-k { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-primary); }
.walk-gauge-k i { color: var(--accent-cyan); }
.walk-gauge-cap { font-size: 0.7rem; opacity: 0.75; }
.walk-gauge-value {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 2.4rem; font-weight: 900; line-height: 1; margin: 8px 0 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-cyan);
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
  transition: color 0.2s, text-shadow 0.2s;
}
.walk-gauge-value.is-warn { color: #f59e0b; text-shadow: 0 0 18px rgba(245, 158, 11, 0.4); }
.walk-gauge-value.is-over { color: #ef4444; text-shadow: 0 0 22px rgba(239, 68, 68, 0.55); }
.walk-gauge-value small { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-shadow: none; }
.walk-gauge-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(102, 51, 255, 0.08));
  border: 1px solid var(--border-primary);
  /* overflow:hidden だと上限ラインの上ラベルが切れるので overflow visible に */
  overflow: visible;
  /* ラベル分の余白を上に確保 */
  margin-top: 20px;
}
.walk-gauge-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, #6633ff 100%);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
  transition: width 0.35s ease, background 0.25s;
}
.walk-gauge-fill.is-warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); box-shadow: 0 0 12px rgba(245, 158, 11, 0.55); }
.walk-gauge-fill.is-over { background: linear-gradient(90deg, #ef4444, #b91c1c); box-shadow: 0 0 14px rgba(239, 68, 68, 0.6); }

/* 30 km/h 上限ライン (位置 = 30/300 = 10%) */
.walk-gauge-thresh--limit {
  position: absolute; top: -6px; bottom: -6px; left: 10%;
  width: 2px;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0), rgba(239, 68, 68, 0.95) 25%, rgba(239, 68, 68, 0.95) 75%, rgba(239, 68, 68, 0));
}
.walk-gauge-thresh-label {
  position: absolute; left: 50%; top: -18px;
  transform: translateX(-50%);
  font-size: 0.62rem; font-weight: 800; color: #ef4444;
  white-space: nowrap;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.walk-gauge-thresh-label::after { /* 三角の指針 */
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(239, 68, 68, 0.55);
}

/* 絶対配置の目盛り — 0/30/100/200/300 を位置指定 */
.walk-gauge-marks--abs {
  position: relative; height: 14px; margin-top: 6px;
  font-size: 0.65rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.walk-gauge-marks--abs span {
  position: absolute; top: 0; transform: translateX(-50%);
  white-space: nowrap;
}
.walk-gauge-marks--abs span:first-child { transform: translateX(0); }
.walk-gauge-marks--abs span:last-child { transform: translateX(-100%); }
.walk-gauge-marks .warn { color: #ef4444; font-weight: 700; }

/* ===== 統計カード ===== */
.walk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.walk-stat {
  position: relative; overflow: hidden;
  padding: 14px 16px;
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  background: var(--bg-card);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.walk-stat:hover { border-color: rgba(0, 229, 255, 0.4); box-shadow: 0 6px 20px rgba(0, 229, 255, 0.12); }
.walk-stat-icon {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.10);
  color: var(--accent-cyan);
  font-size: 0.85rem;
}
.walk-stat-k { font-size: 0.76rem; color: var(--text-secondary); }
.walk-stat-v {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 1.9rem; font-weight: 900; color: var(--text-primary);
  line-height: 1.05; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.walk-stat-v small { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.walk-stat-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.walk-stat-bar {
  position: relative; height: 4px; border-radius: 999px; margin-top: 6px;
  background: rgba(255, 255, 255, 0.06);
}
.walk-stat-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan), #a78bfa);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  transition: width 0.45s ease;
}
.walk-stat--accent {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(102, 51, 255, 0.08));
  border-color: rgba(0, 229, 255, 0.3);
}
/* col-span 2 (= 2 列ぶち抜き、full width)。下段の \"今日の打刻\" などに使う。 */
.walk-stat--full { grid-column: 1 / -1; }
.walk-stat--accent .walk-stat-icon {
  background: linear-gradient(135deg, #00e5ff, #6633ff); color: #fff;
}
.walk-stat--accent .walk-stat-v { color: var(--accent-cyan); text-shadow: 0 0 14px rgba(0, 229, 255, 0.3); }

/* ===== メインボタン (パルス ring 付き) ===== */
.walk-checkin-btn {
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 18px 24px;
  border: none; border-radius: 18px; cursor: pointer;
  color: #fff !important;
  background: linear-gradient(135deg, #00e5ff 0%, #6633ff 60%, #a78bfa 100%);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.45),
    0 14px 36px rgba(102, 51, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.12s, box-shadow 0.18s;
}
.walk-checkin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.6),
    0 18px 40px rgba(102, 51, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.walk-checkin-btn:active:not(:disabled) { transform: translateY(0); }
.walk-checkin-btn:disabled { opacity: 0.6; cursor: wait; }
.walk-checkin-btn.is-active {
  background: linear-gradient(135deg, #c44a5e, #b03a4d);
  box-shadow: 0 0 0 1px rgba(196, 74, 94, 0.5), 0 12px 24px rgba(196, 74, 94, 0.4);
}
.walk-btn-content {
  position: relative; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 900;
}
.walk-btn-content i { font-size: 1.5rem; color: #fff !important; }
.walk-btn-label { font-size: 1.05rem; letter-spacing: 0.02em; }
.walk-btn-ring {
  position: absolute; inset: 0; border-radius: 18px;
  border: 2px solid rgba(0, 229, 255, 0.55);
  pointer-events: none;
  animation: walk-ring-pulse 2.4s ease-out infinite;
}
.walk-btn-ring--delay { animation-delay: 1.2s; }
@keyframes walk-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.18); opacity: 0; }
}
.walk-checkin-btn:disabled .walk-btn-ring,
.walk-checkin-btn.is-active .walk-btn-ring { animation: none; opacity: 0; }

/* walk-geo-msg は walk-gauge カード内に配置。
   min-height で常に枠を予約することで、メッセージ有無による全体レイアウト
   シフトを完全に防ぐ。空のときは何も見せず透明枠だけ確保。 */
.walk-geo-msg {
  margin: 14px 0 0;
  padding: 10px 14px;
  text-align: center; font-size: 0.84rem;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed transparent;
  color: var(--text-secondary);
  min-height: 44px; /* 空でも常にこの高さを確保 */
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.walk-geo-msg:empty { /* 空のときは枠線も淡く */
  background: transparent;
  border-color: var(--border-primary);
  opacity: 0.45;
}
.walk-geo-msg:empty::before {
  content: '—';
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.walk-geo-msg.is-show {
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.22);
  animation: walk-msg-in 0.25s ease-out;
}
@keyframes walk-msg-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 累進制バンド表 ===== */
.walk-bracket {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
}
.walk-bracket-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: 800; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 12px;
}
.walk-bracket-head i { color: var(--accent-cyan); }
.walk-bracket-formula {
  margin-left: auto; font-size: 0.72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 229, 255, 0.10); color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.25);
}
.walk-bracket-rows { display: flex; flex-direction: column; gap: 8px; }
.walk-bracket-row {
  display: grid; grid-template-columns: 70px 1fr 80px; align-items: center; gap: 10px;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.walk-bracket-range { color: var(--text-secondary); font-weight: 700; }
.walk-bracket-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.walk-bracket-fill { height: 100%; border-radius: 999px; box-shadow: 0 0 6px currentColor; opacity: 0.92; }
.walk-bracket-rate { text-align: right; font-weight: 700; color: var(--text-primary); }
.walk-bracket-note {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px dashed var(--border-primary);
  font-size: 0.76rem; line-height: 1.65; color: var(--text-secondary);
}
.walk-bracket-note strong { color: var(--text-primary); }

/* ===== プライバシー注意書き ===== */
.walk-privacy {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-primary);
  background: rgba(0, 229, 255, 0.04);
  font-size: 0.78rem; color: var(--text-secondary); line-height: 1.65;
}
.walk-privacy i { color: var(--accent-cyan); margin-top: 2px; flex-shrink: 0; }
.walk-privacy strong { color: var(--text-primary); }

/* ===== ライトモード上書き ===== */
body.theme-light .walk-hero {
  border-color: rgba(102, 51, 255, 0.22);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(102, 51, 255, 0.08), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(0, 229, 255, 0.10), transparent 55%),
    linear-gradient(135deg, #fbfcff, #f3f6ff);
  box-shadow: 0 8px 24px rgba(102, 51, 255, 0.08);
}
body.theme-light .walk-hero-glow { opacity: 0.45; }
body.theme-light .walk-gauge,
body.theme-light .walk-stat,
body.theme-light .walk-bracket { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); }
body.theme-light .walk-gauge-bar { background: #eef2ff; }
body.theme-light .walk-bracket-bar { background: #eef2ff; }
body.theme-light .walk-stat-bar { background: #eef2ff; }
body.theme-light .walk-privacy { background: rgba(102, 51, 255, 0.04); }
/* 「移動した」ボタンはグラデ背景のうえ。ライトモードの body color: --text-primary
   !important が child span に効いて黒になる事故防止 (ボタン側の !important より
   body セレクタの方が詳細度が高いので、こちらで明示的に白を再宣言する)。 */
body.theme-light .walk-checkin-btn,
body.theme-light .walk-checkin-btn * { color: #fff !important; }

/* ===== モバイル (< 480px) で文字サイズ調整 ===== */
@media (max-width: 480px) {
  .walk-hero { padding: 16px 14px; }
  .walk-hero-icon { width: 38px; height: 38px; font-size: 1.15rem; border-radius: 12px; }
  .walk-hero-head { gap: 10px; }
  .walk-hero-title { font-size: 1.1rem; }
  .walk-hero-sub { font-size: 0.8rem; line-height: 1.55; }
  .walk-gauge-value { font-size: 2rem; }
  .walk-stat-v { font-size: 1.6rem; }
  .walk-bracket-row { grid-template-columns: 60px 1fr 70px; gap: 8px; font-size: 0.72rem; }
  .walk-bracket-formula { font-size: 0.66rem; padding: 2px 7px; }
}

/* ===== 通知: グループのアバタースタック (X 風) ===== */
.notif-actor-stack { display:flex; flex-direction:row; }
.notif-actor-stack .avatar { margin-left:-10px; border:2px solid var(--bg-primary); box-shadow:0 0 0 1px var(--border-primary); }
.notif-actor-stack .avatar:first-child { margin-left:0; }

/* ==========================================================
 * Admin pages (PHP admin/* と互換のフル機能 UI)
 * ========================================================== */

.admin-page { padding: 0 var(--space-4) var(--space-6); }

.admin-section-title {
  font-size: 1.05rem; margin: var(--space-4) 0 var(--space-2);
  color: var(--text-primary); display: flex; align-items: center; gap: 10px;
}
.admin-section-title i { color: var(--accent-cyan); }

.admin-section {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: 14px; padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.admin-section h2 {
  margin: 0 0 var(--space-3); font-size: 1rem; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.admin-section h2 i { color: var(--accent-cyan); }
.admin-subhead { font-size: 0.9rem; color: var(--text-secondary); margin: var(--space-3) 0 var(--space-1); }

.admin-stat-card--active { border-color: var(--accent-cyan); }

.admin-nav-bar {
  display: flex; gap: 8px; flex-wrap: wrap; padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--border-primary); margin-bottom: var(--space-3);
}
.admin-nav-bar .admin-nav-link {
  padding: 6px 12px; border: 1px solid var(--border-primary); border-radius: 999px;
  color: var(--text-secondary); text-decoration: none; font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.admin-nav-bar .admin-nav-link:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

.admin-flash {
  padding: 10px 14px; border-radius: 10px; margin-bottom: var(--space-3);
  font-size: 0.88rem;
}
.admin-flash--ok { background: rgba(0,255,157,0.1); border: 1px solid var(--accent-mint); color: var(--accent-mint); }
.admin-flash--err { background: rgba(255,77,109,0.1); border: 1px solid var(--accent-pink); color: var(--accent-pink); }

.admin-filter-tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.admin-filter-tab {
  padding: 6px 14px; border: 1px solid var(--border-primary); border-radius: 999px;
  color: var(--text-secondary); text-decoration: none; font-size: 0.84rem;
}
.admin-filter-tab.is-active {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  color: #fff; border-color: transparent;
}
.admin-spacer { flex: 1 1 auto; }
.admin-allread-form { margin-left: auto; }

.admin-card-list { display: flex; flex-direction: column; gap: 12px; }
.admin-card {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: 12px; padding: var(--space-3);
}
.admin-card--pending { border-color: var(--accent-gold); }
.admin-card--reviewed { opacity: 0.85; }
.admin-card--approved { border-color: var(--accent-mint); }
.admin-card--rejected { border-color: var(--accent-pink); }
.admin-card--new { border-color: var(--accent-cyan); }
.admin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.admin-card-meta { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 10px; display: grid; gap: 4px; }
.admin-card-meta b { color: var(--text-primary); font-weight: 600; }
.admin-card-detail { font-size: 0.88rem; margin: 8px 0; }
.admin-card-resolved { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-primary); }
.admin-quote {
  background: var(--bg-hover); border-left: 3px solid var(--accent-cyan);
  margin: 8px 0; padding: 8px 12px; font-size: 0.88rem; color: var(--text-primary);
  white-space: pre-wrap;
}

.admin-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; margin-left: 6px;
}
.admin-pill--warn { background: rgba(255,215,0,0.12); color: var(--accent-gold); border: 1px solid var(--accent-gold); }
.admin-pill--ok { background: rgba(0,255,157,0.12); color: var(--accent-mint); border: 1px solid var(--accent-mint); }
.admin-pill--err { background: rgba(255,77,109,0.12); color: var(--accent-pink); border: 1px solid var(--accent-pink); }
.admin-pill--urgent { background: var(--accent-pink); color: #fff; }
.admin-pill--reason { background: rgba(124,77,255,0.15); color: var(--accent-purple); border: 1px solid var(--accent-purple); }
.admin-pill--cat { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-primary); }
.admin-pill--auto { background: rgba(255,138,0,0.15); color: #ff8a00; border: 1px solid #ff8a00; }

.admin-decision-form {
  display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap;
}
.admin-decision-form--vertical { flex-direction: column; align-items: stretch; }
.admin-decision-form select, .admin-decision-form textarea {
  background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 8px;
  color: var(--text-primary); padding: 6px 10px; font-size: 0.9rem; font-family: inherit;
}
.admin-decision-form textarea { min-height: 60px; resize: vertical; }
.admin-decision-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.admin-btn--ok { background: linear-gradient(135deg, var(--accent-mint), var(--accent-cyan)); color: #fff; border-color: transparent; }
.admin-btn--danger { background: rgba(255,77,109,0.12); border-color: var(--accent-pink); color: var(--accent-pink); }
.admin-btn--danger:hover { background: var(--accent-pink); color: #fff; }
.admin-btn--ghost { background: transparent; }

.admin-search-bar {
  display: flex; gap: 8px; align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap;
}
.admin-search-bar input[type=text], .admin-search-bar input[type=search] {
  background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 8px;
  color: var(--text-primary); padding: 6px 12px; font-size: 0.9rem; flex: 1 1 240px;
}

.admin-profile-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.admin-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.admin-avatar--placeholder {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.6rem;
}
.admin-kv {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 16px; font-size: 0.86rem; color: var(--text-secondary);
}
.admin-kv b { color: var(--text-primary); font-weight: 600; margin-right: 6px; }
.admin-bio { margin-top: 8px; padding: 8px 12px; background: var(--bg-hover); border-radius: 8px; }

.admin-restriction-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px; margin-bottom: var(--space-3);
}
.admin-restriction-item {
  display: flex; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border-primary); border-radius: 10px;
  background: var(--bg-card);
}
.admin-restriction-item:hover { border-color: var(--accent-cyan); }
.admin-restriction-item input { margin-top: 3px; }
.admin-restriction-item strong { display: block; color: var(--text-primary); font-size: 0.88rem; }
.admin-restriction-item small { color: var(--text-muted); font-size: 0.78rem; }

.admin-attachments { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.admin-attachments img { max-width: 120px; max-height: 120px; border-radius: 8px; border: 1px solid var(--border-primary); }

.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-field { display: flex; flex-direction: column; gap: 4px; }
.admin-field > span { font-size: 0.84rem; color: var(--text-secondary); }
.admin-field input, .admin-field textarea {
  background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 8px;
  color: var(--text-primary); padding: 8px 12px; font-size: 0.92rem; font-family: inherit;
}

.admin-table--compact th, .admin-table--compact td { padding: 4px 8px; font-size: 0.82rem; }

/* ==========================================================
 * Admin users page (PHP admin/users.php 互換)
 * ========================================================== */
.au-list { display: flex; flex-direction: column; gap: 10px; }
.au-group { display: flex; flex-direction: column; gap: 6px; }
.au-item {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: 10px; padding: 14px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.au-item--suspended { border-color: var(--accent-pink); background: rgba(255,77,109,0.04); }
.au-item--restricted { border-color: #ffa500; background: rgba(255,165,0,0.04); }
.au-item--flagged { border-color: var(--accent-gold); background: rgba(255,215,0,0.03); }

.au-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover;
}
.au-avatar--placeholder {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.2rem;
}
.au-main { flex: 1; min-width: 220px; }
.au-name { color: var(--text-primary); font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.au-handle { font-size: 0.85rem; }
.au-meta { display: flex; gap: 10px; font-size: 0.8rem; margin-top: 4px; flex-wrap: wrap; align-items: center; }

.au-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.au-actions form { margin: 0; }
.au-actions .admin-btn { font-size: 0.78rem; }
.copied { background: var(--accent-mint) !important; color: #051a10 !important; border-color: var(--accent-mint) !important; }

.au-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 30px; }
.au-toggle {
  align-self: flex-start; padding: 4px 12px;
  background: transparent; border: 1px dashed var(--border-primary);
  color: var(--text-secondary); border-radius: 999px;
  font-size: 0.78rem; cursor: pointer;
}
.au-toggle:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.au-toggle-suspect { border-color: #ffa500; color: #ffa500; }
.au-toggle-suspect:hover { color: #fff; background: #ffa500; }

.au-children {
  position: relative; margin-left: 30px; padding-left: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.au-children.collapsed { display: none; }
.au-item--child { position: relative; }
.au-item--child::before {
  content: ''; position: absolute; left: -20px; top: 50%;
  width: 18px; height: 2px; background: var(--border-primary);
}
.au-item--child::after {
  content: ''; position: absolute; left: -20px; top: -3px;
  width: 2px; height: calc(100% + 6px); background: var(--border-primary);
}
.au-item--child:last-child::after { height: calc(50% + 3px); }
.au-children:has(+ .au-children) .au-item--child:last-child::after { height: calc(100% + 6px); }
.au-children-suspect .au-item--child::before,
.au-children-suspect .au-item--child::after { background: #ffa500; }

.au-suspect-email-group { margin: 4px 0; }
.au-suspect-email-group > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: #ffa500;
  padding: 4px 10px; margin: 4px 0 4px 8px;
  border: 1px solid rgba(255,165,0,0.35); border-radius: 999px;
  background: rgba(255,165,0,0.08);
}
.au-suspect-email-group > summary::-webkit-details-marker { display: none; }
.au-suspect-email-group > summary::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 10px; margin-left: 4px;
}
.au-suspect-email-group[open] > summary::after { content: "\f077"; }
.au-suspect-email-group > summary:hover { background: rgba(255,165,0,0.18); }

/* ==========================================================
 * Admin pages: 両サイドバー (col-nav / col-aside) を隠して
 * col-main をフル幅にする。CSS :has() で .admin-page 検出。
 * ========================================================== */
.layout-3col:has(.admin-page) {
  grid-template-columns: 1fr;
  max-width: 100%;
}
.layout-3col:has(.admin-page) .col-nav,
.layout-3col:has(.admin-page) .col-aside { display: none; }
.layout-3col:has(.admin-page) .col-main { border-right: none; }
.layout-3col:has(.admin-page) .admin-page { max-width: 1200px; margin: 0 auto; padding: var(--space-4); }

/* ==========================================================
 * Admin pages: 全ページで完全に同じ見た目を強制する
 * (header / nav / sections / cards / tables / 入力欄)
 * ========================================================== */

/* ページ全体の枠: 1200px センタリング + 共通パディング */
.layout-3col:has(.admin-page) .col-main { background: transparent; }
.admin-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
}

/* ヘッダー: 全 admin ページで同じ間隔・borders */
.layout-3col:has(.admin-page) .col-main-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border-primary);
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}
.layout-3col:has(.admin-page) .col-main-header h1 {
  margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.layout-3col:has(.admin-page) .col-main-header h1 i { color: var(--accent-cyan); }

/* 共通ナビゲーション (admin_nav.html) — admin-page 内の最初の要素 */
.admin-nav-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
}

/* admin-card / admin-table / admin-section / admin-stat-card のサイズ感を統一 */
.admin-section {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: 12px; padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.admin-stats { margin-bottom: var(--space-3); gap: 10px; }
.admin-card-list { margin-bottom: var(--space-3); }
.admin-table { width: 100%; margin: 0 0 var(--space-3); }

/* admin_users の au-* item を admin-card と視覚的に揃える */
.au-item {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: var(--space-3);
}

/* 検索バー / フィルタタブの位置を統一 */
.admin-search-bar { margin-bottom: var(--space-3); }
.admin-filter-tabs { margin-bottom: var(--space-3); }

/* 全 admin ページのフォーム入力欄を統一 */
.admin-page input[type=text],
.admin-page input[type=search],
.admin-page input[type=number],
.admin-page input[type=email],
.admin-page select,
.admin-page textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 7px 12px;
  font-size: 0.9rem;
  font-family: inherit;
}
.admin-page input:focus, .admin-page select:focus, .admin-page textarea:focus {
  outline: none; border-color: var(--accent-cyan);
}

/* モバイル: admin-nav-bar を横スクロール可能に */
@media (max-width: 767px) {
  .admin-nav-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .admin-nav-bar .admin-nav-link { flex-shrink: 0; }
  .admin-page { padding: var(--space-2) var(--space-3) var(--space-5); }
}

/* ============================================================
 * §35  sidebar-account-popover を theme token / custom color 追従に
 * ============================================================
 * php-style.css §133 (ライトモード) と §131 (dark) は全部 rgba(124, 77, 255, X) の
 * ハードコード紫で書かれていて、user-colors.js で accent を pink/green 等に変えても
 * popover だけ紫のままだった。ここで全 hardcoded を CSS variable に置換する。
 *
 * specificity 0-2-1 (body[class][class] .x) で php-style.css の 0-2-0 (body.theme-light .x)
 * を超えるので !important 連発を避けつつ確実に勝てる (user-colors.js と同じパターン)。
 */
body[class][class] .sidebar-account-popover {
  background: color-mix(in srgb, var(--bg-card), black 4%);
  border: 1px solid color-mix(in srgb, var(--accent-purple) 28%, var(--border-primary));
}
body[class][class] .sidebar-account-popover .popover-current-account {
  background: color-mix(in srgb, var(--bg-card), var(--accent-purple) 8%);
}
body[class][class] .sidebar-account-popover .popover-other-account:hover {
  background: color-mix(in srgb, var(--bg-card), var(--accent-cyan) 10%);
}
body[class][class] .sidebar-account-popover .popover-action:hover {
  background: color-mix(in srgb, var(--bg-card), var(--accent-purple) 10%);
}
body[class][class] .sidebar-account-popover .popover-action i {
  color: var(--accent-cyan);
}
body[class][class] .sidebar-account-popover .popover-current-mark {
  color: var(--accent-cyan);
}
body[class][class] .sidebar-account-popover .popover-divider {
  background: var(--border-primary);
}
body[class][class] .sidebar-account-popover .popover-avatar-placeholder {
  background: var(--gradient-primary);
}

/* ライトモード時の追加調整: 「現在のアカウント」行の左ボーダを accent に追従 */
body[class][class].theme-light .sidebar-account-popover {
  background: color-mix(in srgb, var(--bg-card), white 6%);
  border: 1px solid color-mix(in srgb, var(--accent-purple) 20%, transparent);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--accent-purple) 18%, transparent),
    0 4px 16px color-mix(in srgb, var(--accent-cyan) 10%, transparent);
}
body[class][class].theme-light .sidebar-account-popover .popover-current-account {
  background: color-mix(in srgb, var(--bg-card), var(--accent-purple) 6%);
  border-left: 3px solid var(--accent-purple);
}
body[class][class].theme-light .sidebar-account-popover .popover-other-account:hover,
body[class][class].theme-light .sidebar-account-popover .popover-action:not(.popover-action-danger):hover {
  background: color-mix(in srgb, var(--bg-card), var(--accent-purple) 10%);
  color: var(--accent-purple);
}
body[class][class].theme-light .sidebar-account-popover .popover-other-account:hover .popover-account-name,
body[class][class].theme-light .sidebar-account-popover .popover-other-account:hover .popover-account-handle,
body[class][class].theme-light .sidebar-account-popover .popover-other-account:hover i,
body[class][class].theme-light .sidebar-account-popover .popover-action:not(.popover-action-danger):hover i,
body[class][class].theme-light .sidebar-account-popover .popover-action:not(.popover-action-danger):hover span {
  color: var(--accent-purple);
}
/* 危険系 (ログアウト) は accent ではなく赤系のまま (役割の警告色は theme と独立) */

/* drawer-account-menu (モバイル) も同じ理由で hardcoded color の追従漏れを修正。
   現在行や hover bg は php-style.css の元仕様を尊重 (新しい強調を勝手に足さない)、
   ハードコードされてる cyan / 紫グラデだけ accent token に置換する。 */
body[class][class] .drawer-account-other:hover,
body[class][class] .drawer-account-other:active {
  background: color-mix(in srgb, var(--bg-card), var(--accent-cyan) 10%);
}
body[class][class] .drawer-account-other:hover .drawer-switch-icon,
body[class][class] .drawer-account-other:active .drawer-switch-icon {
  color: var(--accent-cyan);
}
body[class][class] .drawer-current-mark {
  color: var(--accent-cyan);
}
body[class][class] .drawer-avatar-placeholder {
  background: var(--gradient-primary);
}

/* ==========================================================
 * /settings/dm — 通話音のプリセット選択カード
 * ========================================================== */
.dm-cfg-section { margin-top: 18px; }
.dm-cfg-section:first-of-type { margin-top: 0; }
.dm-cfg-section-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.dm-cfg-section-title > i { color: var(--accent-cyan); }
.dm-cfg-section-title #dmCfgVolumeLabel,
.dm-cfg-section-title .muted { font-weight: 400; }

.dm-cfg-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.dm-cfg-preset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  color: var(--text-primary);
  text-align: left;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.dm-cfg-preset:hover { border-color: var(--accent-cyan); background: var(--bg-card-hover, rgba(255,255,255,0.03)); }
.dm-cfg-preset:active { transform: scale(0.985); }
.dm-cfg-preset > i:first-child {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 1rem;
  flex-shrink: 0;
}
.dm-cfg-preset-body { flex: 1; min-width: 0; }
.dm-cfg-preset-name {
  font-weight: 700; line-height: 1.2;
  color: var(--text-primary);
}
.dm-cfg-preset-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-cfg-preset-check {
  margin-left: auto;
  font-size: 0.86rem;
  color: var(--accent-cyan);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  transform: scale(0.6);
}

.dm-cfg-preset.is-active {
  border-color: var(--accent-cyan);
  background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(124,77,255,0.04));
  box-shadow: 0 0 0 1px rgba(0,229,255,0.25), 0 2px 12px rgba(0,229,255,0.08);
}
.dm-cfg-preset.is-active > i:first-child {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff;
}
.dm-cfg-preset.is-active .dm-cfg-preset-check {
  opacity: 1;
  transform: scale(1);
}

/* 音量スライダ */
.dm-cfg-volume {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  outline: none;
  margin-top: 2px;
}
.dm-cfg-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,229,255,0.4), 0 2px 8px rgba(0,0,0,0.4);
}
.dm-cfg-volume::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: none;
  cursor: pointer;
}

/* 試聴ボタン行 */
.dm-cfg-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-primary);
}

/* === /settings/dm カスタム MP3 アップロード関連 === */
.dm-cfg-preset--empty {
  border-style: dashed;
}
.dm-cfg-preset--empty > i:first-child {
  background: rgba(255,255,255,0.03);
  color: var(--accent-cyan);
}
.dm-cfg-preset--empty .dm-cfg-preset-name {
  color: var(--text-secondary);
}
.dm-cfg-custom-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ============================================================
 * Pull-to-Refresh: user-colors (Misskey 風カスタムカラー) 対応
 *
 * php-style.css の PtR スタイル (§142.5) はハードコード rgba (cyan
 * 0,229,255 / purple 124,77,255 / 紺 7,9,22) を使っているため、
 * user-colors で primary / accent / bg を変えても反映されない。
 * ここでは CTA ボタン (var(--gradient-primary)) と同じカラー系に
 * 統一して、user-colors の primary / primaryEnd 指定でボタンと
 * 同時に色変えできるようにする。
 *
 * specificity は同等で source order 後勝ち (v2.css は php-style.css
 * の後に読み込まれる)。box-shadow / border のアルファは color-mix で
 * accent-cyan のユーザ指定を反映。
 *
 * 外側の .pull-refresh 80px バーは透明化 (背景 + blur + 下線を全部消す)。
 * mobile-header の下に dark band が残って見えるのを撤去し、引き下げ時は
 * 中央のピル (.pull-refresh-inner) だけがフロートで降りてくる見た目に。
 * 元 PHP では blur 紺帯が前提だったが v2 では「ピルだけ」演出に統一。 */
.pull-refresh {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
.pull-refresh-ready {
  color: var(--accent-cyan);
}
.pull-refresh-ready .pull-refresh-inner {
  background: var(--gradient-primary);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent-cyan) 30%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.30);
}
.pull-refresh-refreshing .pull-refresh-inner {
  background: var(--gradient-primary);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent-cyan) 65%, transparent);
  box-shadow:
    0 0 32px color-mix(in srgb, var(--accent-cyan) 45%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.pull-refresh-toast-inner {
  background: var(--gradient-primary);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--accent-cyan) 35%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.25);
}
/* light テーマ追従 (php-style.css L12700- の override を上書き) */
body.theme-light .pull-refresh {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
body.theme-light .pull-refresh-ready {
  color: var(--accent-purple);
}
/* light モードでも pill は常にグラデ + 白文字 (PHP の dark と同じ視認性に揃える)。
 * 旧実装は ready/refreshing のみグラデ → idle (「↓ 下に引いて更新」状態) で
 * 文字色が text-primary (黒) を継承して白背景ピル上で見づらかった。 */
body.theme-light .pull-refresh-inner,
body.theme-light .pull-refresh-ready .pull-refresh-inner,
body.theme-light .pull-refresh-refreshing .pull-refresh-inner,
body.theme-light .pull-refresh-toast-inner {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.theme-light .pull-refresh-inner .pull-refresh-text,
body.theme-light .pull-refresh-inner .pull-refresh-spinner {
  color: #fff !important;
  border-color: #fff transparent #fff #fff !important;
}

/* ============================================================
 * §36 通知 ON 案内バナー (push-nudge.js)
 *
 * アクセス 7 回ごとに画面下から滑り込むスナックバー。
 * bottom-nav が出るモバイル幅では bottom-nav の上に、PC では右下に。
 * ============================================================ */
.mp-push-nudge {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); /* bottom-nav 上 */
  z-index: 220;
  /* 旧 var(--bg-card) は半透明 (rgba(13,19,48,0.55)) で TL が透けて見えていた。
     不透明な base + backdrop-filter で「綺麗に被せる」表示にする。 */
  background: #0b1228;
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.32s;
}
body.theme-light .mp-push-nudge {
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(60, 100, 180, 0.22), 0 2px 6px rgba(40, 60, 120, 0.10);
  border-color: rgba(40, 60, 120, 0.12);
}
.mp-push-nudge--in  { transform: translateY(0); opacity: 1; }
.mp-push-nudge--out { transform: translateY(140%); opacity: 0; }
.mp-push-nudge-body {
  display: flex; align-items: center; gap: 12px;
}
.mp-push-nudge-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124, 77, 255, 0.15);
  color: var(--accent-purple);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.mp-push-nudge-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mp-push-nudge-text strong { font-size: 0.95rem; font-weight: 700; }
.mp-push-nudge-text span   { font-size: 0.82rem; color: var(--text-muted); }
.mp-push-nudge-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.mp-push-nudge-btn {
  appearance: none;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.mp-push-nudge-btn--primary {
  background: var(--accent-purple);
  color: #fff;
}
.mp-push-nudge-btn--primary:hover { filter: brightness(1.08); }
.mp-push-nudge-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.mp-push-nudge-btn--ghost:hover { background: var(--bg-hover); }

/* PC (bottom-nav 無し) では右下に小さく */
@media (min-width: 768px) {
  .mp-push-nudge {
    left: auto;
    right: 24px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    max-width: 380px;
  }
}

/* ============================================================
 * §post-button (mobile header 右上の投稿 + ボタン) 視覚調整
 *
 * php-style.css :5393 の base スタイル (36×36 円 / font-size: 1.25rem /
 * font-weight: 700) を v2 側で上書き:
 *   - font-weight 400 → "+" を細くする
 *   - 大きさ補填 (1.4rem)
 *   - line-height 1 + padding-bottom 1px で光学センタリング
 *     ("+" グリフは em-box 上部寄りに描画される font が多く、
 *      flex の geometric center だと下に空きが見える)
 * ============================================================ */
.mobile-header-content .post-button {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  padding-bottom: 1px;
}

/* ============================================================
 * §37 森岡証券 (shoken) — kotoba_bank?tab=securities + /shoken/{code}
 * 既存 §28 .wb-* のトークン (var(--accent-*)) を流用してテーマ追従。
 * 「上昇」「下落」は currentColor + 親要素のクラス .up / .down で
 * 緑/赤を渡し、SVG polyline もそのまま吸う設計。
 * ============================================================ */

/* === 一覧 (kotoba_bank の tab=securities ブロック) === */
.sh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.sh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.sh-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-purple);
  box-shadow: 0 6px 16px rgba(124, 77, 255, 0.18);
}
/* 株価カード: 上昇=緑 / 下落=ピンク。ライトモードで広域 color 上書きに負けて
   currentColor が text-primary (濃紺) になってしまっていたので !important + 明示で
   テーマ問わず色が出るようにする。spark SVG は stroke="currentColor"。 */
.sh-card.up   { color: var(--accent-green) !important; }
.sh-card.down { color: var(--accent-pink)  !important; }
.sh-card.up   .sh-change,
.sh-card.up   .sh-spark  { color: var(--accent-green) !important; }
.sh-card.down .sh-change,
.sh-card.down .sh-spark  { color: var(--accent-pink)  !important; }
.sh-card.up   .sh-spark polyline { stroke: var(--accent-green) !important; }
.sh-card.down .sh-spark polyline { stroke: var(--accent-pink)  !important; }
body.theme-light .sh-card.up   .sh-change,
body.theme-light .sh-card.up   .sh-spark polyline { color: #00a36a !important; stroke: #00a36a !important; }
body.theme-light .sh-card.down .sh-change,
body.theme-light .sh-card.down .sh-spark polyline { color: #d6195a !important; stroke: #d6195a !important; }
.sh-card-head {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--text-primary);
}
.sh-card .sh-name { font-weight: 700; font-size: 1rem; }
.sh-card .sh-code { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; }
.sh-card .sh-sector { color: var(--text-muted); font-size: 0.78rem; }
.sh-card .sh-price {
  color: var(--text-primary);
  font-weight: 800;
  font-size: 1.4rem;
  margin-top: 4px;
}
.sh-card .sh-price small { font-size: 0.7em; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.sh-card .sh-change {
  font-weight: 700;
  font-size: 0.88rem;
  /* 親 .sh-card.up / .down が currentColor で緑赤を渡す */
}
.sh-spark {
  width: 100%;
  height: 36px;
  margin-top: 2px;
  display: block;
  opacity: 0.85;
}

/* === 保有銘柄 / 売買ログ テーブル (共通) === */
.sh-holdings, .sh-trades {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 0.88rem;
}
.sh-holdings th, .sh-trades th,
.sh-holdings td, .sh-trades td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
}
.sh-holdings th, .sh-trades th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.02);
}
.sh-holdings td a, .sh-trades td a {
  color: var(--accent-cyan);
  text-decoration: none;
}
.sh-holdings td a:hover, .sh-trades td a:hover { text-decoration: underline; }
.sh-holdings td.pos, .sh-trades td.pos { color: var(--accent-green); font-weight: 700; }
.sh-holdings td.neg, .sh-trades td.neg { color: var(--accent-pink); font-weight: 700; }
.sh-trades tr.is-buy  td:nth-child(3) { color: var(--accent-pink); }
.sh-trades tr.is-sell td:nth-child(3) { color: var(--accent-green); }

/* === 詳細ページ (/shoken/{code}) === */
.sh-wrap { padding: 14px 16px 30px; max-width: 760px; margin: 0 auto; }

.sh-detail-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  margin-bottom: 14px;
}
.sh-detail-head.up   { border-color: var(--accent-green); }
.sh-detail-head.down { border-color: var(--accent-pink); }
.sh-detail-name {
  font-size: 1.15rem; font-weight: 800;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.sh-detail-name .sh-code  { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.05em; }
.sh-detail-name .sh-sector { color: var(--accent-cyan); font-size: 0.78rem; font-weight: 600; }
.sh-detail-price {
  font-size: 2.1rem; font-weight: 900;
  margin-top: 4px;
}
.sh-detail-price small { font-size: 0.5em; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.sh-detail-change {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: baseline; gap: 12px;
}
.sh-detail-head.up   .sh-detail-change { color: var(--accent-green); }
.sh-detail-head.down .sh-detail-change { color: var(--accent-pink); }
.sh-detail-change small { font-weight: 500; }

.sh-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
  min-height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.sh-chart-wrap.up   { color: var(--accent-green); }
.sh-chart-wrap.down { color: var(--accent-pink); }
.sh-chart { width: 100%; height: 120px; display: block; }
.sh-chart-empty { font-size: 0.9rem; padding: 30px 10px; text-align: center; }

.sh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.sh-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 10px 12px;
}
.sh-stat .l { font-size: 0.78rem; color: var(--text-muted); }
.sh-stat .v { font-size: 1.2rem; font-weight: 800; margin-top: 2px; }
.sh-stat .v small { font-size: 0.6em; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.sh-stat .s { font-size: 0.72rem; margin-top: 2px; }
.sh-stat.up   .v { color: var(--accent-green); }
.sh-stat.down .v { color: var(--accent-pink); }

.sh-trade-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.sh-trade-form {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  padding: 14px;
}
.sh-trade-form h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.sh-trade-form.sh-buy  h3 { color: var(--accent-pink); }
.sh-trade-form.sh-sell h3 { color: var(--accent-green); }
.sh-trade-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; color: var(--text-muted);
}
.sh-trade-form input[type="number"] {
  background: var(--bg-input, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 16px; /* iOS auto-zoom 抑止 */
  width: 100%;
  box-sizing: border-box;
}
.sh-cost-row {
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.92rem;
}
.sh-cost-row strong { font-size: 1.05rem; }
.sh-buy-btn, .sh-sell-btn {
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  color: #fff;
}
.sh-buy-btn  { background: var(--accent-pink); }
.sh-sell-btn { background: var(--accent-green); }
.sh-buy-btn:hover, .sh-sell-btn:hover { filter: brightness(1.08); }
.sh-buy-btn:disabled, .sh-sell-btn:disabled {
  background: var(--border-primary);
  color: var(--text-muted);
  cursor: not-allowed;
}

.sh-other-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
.sh-other {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.sh-other:hover { border-color: var(--accent-purple); }
.sh-other-name { font-weight: 700; }
.sh-other-code { letter-spacing: 0.05em; }
.sh-other-price { margin-left: auto; font-weight: 700; color: var(--accent-cyan); }

/* flash の error バリアント (詳細ページで使う) */
.wb-flash.is-error {
  border-color: var(--accent-pink);
  color: var(--accent-pink);
  background: rgba(255, 77, 109, 0.06);
}

/* === ランキング (利益 / 損失 top 10) === */
.sh-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.sh-rank-block {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 4px 12px 12px;
}
.sh-rank-block .wb-section-h {
  margin: 10px 0 8px;
  font-size: 0.92rem;
}
.sh-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sh-rank li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.02);
}
.sh-rank-up    li:nth-child(1) { background: rgba(255, 215, 0, 0.10); }
.sh-rank-up    li:nth-child(2) { background: rgba(192, 192, 192, 0.10); }
.sh-rank-up    li:nth-child(3) { background: rgba(205, 127, 50, 0.10); }
.sh-rank-down  li:nth-child(1) { background: rgba(255, 77, 109, 0.10); }
.sh-rank-no {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--border-primary);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.sh-rank-up   li:nth-child(1) .sh-rank-no { background: rgba(255,215,0,0.7);  color: #1a1a1a; }
.sh-rank-up   li:nth-child(2) .sh-rank-no { background: rgba(192,192,192,0.7); color: #1a1a1a; }
.sh-rank-up   li:nth-child(3) .sh-rank-no { background: rgba(205,127,50,0.7);  color: #fff; }
.sh-rank-down li:nth-child(1) .sh-rank-no { background: var(--accent-pink);   color: #fff; }
.sh-rank-user {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.sh-rank-user:hover .sh-rank-name { text-decoration: underline; }
.sh-rank-user .avatar { width: 28px; height: 28px; flex-shrink: 0; }
.sh-rank-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-rank-pl {
  margin-left: auto;
  font-weight: 800;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.sh-rank-pl.pos { color: var(--accent-green); }
.sh-rank-pl.neg { color: var(--accent-pink); }

/* ==========================================================
 * プレミアム設定ページ (settings_premium.html) — 整えたデザイン
 * ヒーロー + 特典グリッド + 残高&請求カード + アクション
 * ========================================================== */
.prem-wrap { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }

/* ===== ヒーロー (現在の状態) ===== */
.prem-hero {
  position: relative; overflow: hidden;
  padding: 22px 22px 20px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #6a3df0 0%, #5b54ea 45%, #2a7fc4 100%);
  box-shadow: 0 12px 28px rgba(106, 61, 240, 0.30);
}
.prem-hero.is-inactive {
  background: linear-gradient(135deg, #444d6e 0%, #3a4566 60%, #2c354f 100%);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
.prem-hero, .prem-hero * { color: #fff !important; }
.prem-hero-deco {
  position: absolute; right: -16px; top: -16px; font-size: 8rem;
  opacity: 0.10; pointer-events: none; line-height: 1;
}
.prem-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 700;
  background: rgba(255,255,255,0.18);
  padding: 4px 12px; border-radius: 999px;
}
.prem-hero-eyebrow i { font-size: 0.78rem; }
.prem-hero-expiry { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.prem-hero-expiry .lbl { font-size: 0.78rem; opacity: 0.85; }
.prem-hero-expiry .val { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.prem-hero-expiry .val small { font-size: 0.95rem; font-weight: 700; opacity: 0.92; margin-left: 4px; }
.prem-hero-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.prem-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28);
}
.prem-pill--on { background: rgba(0, 200, 150, 0.32); border-color: rgba(0, 200, 150, 0.55); }
.prem-pill--off { background: rgba(255, 180, 80, 0.28); border-color: rgba(255, 180, 80, 0.55); }
.prem-pill--cost { background: rgba(255,255,255,0.16); }

/* ===== セクション見出し ===== */
.prem-section-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.92rem; font-weight: 800; color: var(--text-primary);
  margin: 4px 0 -6px; letter-spacing: 0.02em;
}
.prem-section-h i { color: var(--accent-cyan); font-size: 0.95rem; }

/* ===== 特典グリッド ===== */
.prem-perks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.prem-perk {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 15px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border-primary);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.prem-perk:hover { transform: translateY(-2px); border-color: var(--accent-cyan); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.prem-perk-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: linear-gradient(135deg, rgba(124,77,255,0.18), rgba(0,229,255,0.18));
  color: var(--accent-purple);
}
.prem-perk-body { min-width: 0; flex: 1; }
.prem-perk-title { font-weight: 800; color: var(--text-primary); font-size: 0.92rem; line-height: 1.35; }
.prem-perk-desc { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.55; margin-top: 3px; }
.prem-perk-desc b { color: var(--text-primary); font-weight: 800; }

/* ===== 残高 & 請求カード ===== */
.prem-bill {
  padding: 16px 17px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border-primary);
  display: flex; flex-direction: column; gap: 12px;
}
.prem-bill.is-low { border-color: rgba(255, 77, 109, 0.45); background: rgba(255, 77, 109, 0.04); }
.prem-bill-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prem-bill-stat {
  padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,77,255,0.06), rgba(0,229,255,0.04));
  border: 1px solid var(--border-primary);
}
.prem-bill-stat .k { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; }
.prem-bill-stat .v {
  margin-top: 2px; font-size: 1.55rem; font-weight: 900; color: var(--text-primary);
  display: flex; align-items: baseline; gap: 3px; line-height: 1.05;
}
.prem-bill-stat .v small { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }

.prem-progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.08));
}
.prem-progress i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  transition: width 0.45s ease;
}
.prem-bill.is-low .prem-progress i {
  background: linear-gradient(90deg, #ff7a8e, var(--accent-pink));
}
.prem-bill-note {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary);
}
.prem-bill-note i { margin-top: 2px; flex-shrink: 0; color: var(--accent-cyan); }

/* ===== アクション ===== */
.prem-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.prem-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border: none; border-radius: 999px; cursor: pointer;
  font-size: 0.95rem; font-weight: 800; transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  min-width: 240px;
}
.prem-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #6a3df0, #2a7fc4);
  box-shadow: 0 6px 18px rgba(106, 61, 240, 0.30);
}
.prem-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(106, 61, 240, 0.40); }
.prem-btn--ghost {
  color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border-primary);
}
.prem-btn--ghost:hover { border-color: var(--accent-pink); color: var(--accent-pink); }
.prem-btn--disabled {
  color: var(--text-secondary);
  background: var(--bg-secondary, rgba(0,0,0,0.06)); cursor: not-allowed; opacity: 0.85;
}
.prem-actions-note {
  margin: 0; font-size: 0.78rem; color: var(--text-secondary); text-align: center; line-height: 1.6;
}
.prem-actions-note b { color: var(--text-primary); }

/* ==========================================================
 * 公式ユーザー (specialMark / adminMark) は premiumMark を非表示
 * 隣接兄弟セレクタは間のテキストノード (改行/空白) を跨ぐので、テンプレ側の
 * {{- 有無に依存せず全レンダリング箇所をまとめてカバーする。
 * ========================================================== */
.specialMark + .premiumMark,
.adminMark + .premiumMark { display: none !important; }

/* === TradingView 風チャート (/shoken/{code}) === */
.sh-tv-wrap {
  position: relative;
  background: #0d1118;
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  padding: 12px 0 0 0;
  margin-bottom: 14px;
  overflow: hidden;
}
body.theme-light .sh-tv-wrap { background: #ffffff; }
.sh-tv-wrap.up   { border-color: rgba(34, 197, 133, 0.45); }
.sh-tv-wrap.down { border-color: rgba(255, 77, 109, 0.45); }
.sh-tv-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 6px 16px 4px;
}
.sh-tv-symbol { font-size: 0.95rem; }
.sh-tv-symbol strong { font-size: 1.05rem; letter-spacing: 0.04em; }
.sh-tv-symbol .muted { margin-left: 6px; }
.sh-tv-price-row { display: flex; align-items: baseline; gap: 10px; }
.sh-tv-price { font-size: 1.8rem; font-weight: 900; }
.sh-tv-price small { font-size: 0.5em; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.sh-tv-change { font-size: 0.95rem; font-weight: 800; }
.sh-tv-change.pos { color: #22c585; }
.sh-tv-change.neg { color: #ff4d6d; }
.sh-tv-chart {
  width: 100%; height: 360px;
  margin-top: 2px;
}
.sh-tv-legend {
  position: absolute; top: 54px; right: 18px;
  pointer-events: none;
  background: rgba(13, 17, 24, 0.65);
  color: #cfd2d4;
  padding: 4px 10px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  user-select: none;
}
body.theme-light .sh-tv-legend {
  background: rgba(255,255,255,0.85);
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.08);
}
.sh-tv-empty {
  height: 360px;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sh-meta-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 10px;
  font-size: 0.85rem;
}
.sh-meta-bar .sh-sector { color: var(--accent-cyan); font-weight: 700; }

/* === 森岡証券 レバ + オラクル UI === */
.sh-lev-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-gold, #f5b800), var(--accent-pink, #ff4d6d));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sh-lev-badge i { font-size: 0.65rem; }
.sh-lev-badge-small {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 0.66rem;
  padding: 1px 6px;
}
.sh-oracle-note {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.sh-oracle-note i { color: var(--accent-cyan); margin-right: 4px; }
.sh-pl-preview.pos { color: var(--accent-green); }
.sh-pl-preview.neg { color: var(--accent-pink); }
.sh-fee-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 184, 0, 0.15);
  color: var(--accent-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
 * §Cosmetic — 装飾アイテム (ハンドル色 + アバター額縁)
 *
 * ハンドル色は inline style="color:..." で適用。CSS なし。
 * アバター額縁はクラスで適用: .avatar-frame.avatar-frame-{key}
 * post_card / post_detail では <a class="author-link"> に当てる。
 * profile では <div class="profile-avatar-container avatar-frame-xl"> に。
 * ============================================================ */
.avatar-frame {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  padding: 2px;
  background: var(--bg-card);
  /* flex/grid 親 (user-list / nested-reply 等、align-items 未指定= stretch) の
     直下に置かれると inline-block が blockify されて行高 (名前+bio 等) まで縦に
     伸び、丸い額縁が縦長の楕円になる。align-self で content 高に留めてアイコンに
     ぴったり収める。通常フロー (TL カードの author-link 等) では無視されるので無害。 */
  align-self: flex-start;
}
.avatar-frame > img.avatar,
.avatar-frame > .avatar {
  display: block;
  border-radius: 50%;
  background: var(--bg-card);
}
/* プロフィール用: .profile-avatar-container はバナーに重ねる absolute 配置。
   .avatar-frame の position:relative / display:inline-block が上書きすると、
   通常フローを占有してアクション/名前が大幅に下へ押し下げられる。
   profile に当たった時だけ元の absolute / block を維持する。 */
.profile-avatar-container.avatar-frame {
  position: absolute;
  display: block;
}
/* ゴールド枠 — 明るい金グラデのリング */
.avatar-frame-gold {
  background: linear-gradient(135deg, #fff5b3, #ffd700, #b8860b, #ffd700);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}
/* ネオン枠 — cyan ↔ purple の発光、ゆっくり回転 */
.avatar-frame-neon {
  background: conic-gradient(from 0deg, #00e5ff, #a78bfa, #00e5ff);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4), 0 0 16px rgba(167, 139, 250, 0.35);
  animation: avatar-frame-neon-spin 6s linear infinite;
}
@keyframes avatar-frame-neon-spin {
  to { background: conic-gradient(from 360deg, #00e5ff, #a78bfa, #00e5ff); }
}
/* 桜枠 — ピンク〜淡ピンクのグラデ、柔らかな光彩 */
.avatar-frame-sakura {
  background: linear-gradient(135deg, #ffafd7, #ffe4f1, #ff90c6, #ffe4f1);
  box-shadow: 0 0 8px rgba(255, 175, 215, 0.5);
}
/* プロフィール用 (xl): 額縁を大きく */
.avatar-frame-xl { padding: 3px; }

/* === エフェクト枠 ===
 * 枠の外周から ::before / ::after で粒子や波動が出る。
 * .avatar-frame は position:relative なので、::before/::after は
 * absolute で枠の外側に展開できる。pointer-events:none でクリックを邪魔しない。 */

/* キラキラ枠: 2 pseudo に 5 個ずつ 計 10 個の星屑を glow blur 付きで散らし、
   別 timing で瞬かせる。各粒に box-shadow の blur (3-4px) を加えて
   それぞれが光ってる感じに。色は白 + ゴールド mix、サイズも 2-3px 混ぜる。 */
.avatar-frame-sparkle {
  background: linear-gradient(135deg, #ffe082, #ffd700);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
/* グループ A: 白 3px の主粒 + glow + 4 個の追加粒 */
.avatar-frame-sparkle::before {
  content: '';
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  top: -8px; right: 6px;
  box-shadow:
    /* 自分自身に glow */
    0 0 4px 1px rgba(255,255,255,0.8),
    /* 周辺粒も blur 付きで配置 */
    -34px  18px 3px 0 #fff,
      0px  46px 3px 0 #fff,
    -42px  -2px 3px 0 #ffe082,
     12px -12px 3px 0 #fff;
  animation: avatar-frame-sparkle-twinkle 1.8s ease-in-out infinite;
}
/* グループ B: ゴールド 2px の主粒 + 4 個の追加粒 (0.9s 遅延) */
.avatar-frame-sparkle::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #ffd700;
  pointer-events: none;
  top: 8px; left: -6px;
  box-shadow:
    0 0 4px 1px rgba(255,215,0,0.9),
     56px  -8px 3px 0 #ffd700,
     42px  46px 3px 0 #ffd700,
     -4px  56px 3px 0 #ffe082,
     56px  22px 3px 0 #fff;
  animation: avatar-frame-sparkle-twinkle 1.8s ease-in-out infinite;
  animation-delay: 0.9s;
}
@keyframes avatar-frame-sparkle-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.55); }
  45%, 55% { opacity: 1.0;  transform: scale(1.6); }
}

/* オーラ枠: 紫↔シアンの 多層 ripple + 枠本体の rainbow conic-gradient 回転。
   ::before / ::after は blur+spread 大の box-shadow で広く柔らかい波動。
   枠本体は conic-gradient を slowly 回転させて常時光ってる感じ。
   背景は transparent なのでアバター本体 (avatar) には被らない。 */
.avatar-frame-aura {
  background: conic-gradient(from 0deg, #a78bfa, #00e5ff, #c084fc, #00e5ff, #a78bfa);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6),
              0 0 24px rgba(0, 229, 255, 0.35);
  animation: avatar-frame-aura-spin 4s linear infinite;
}
@keyframes avatar-frame-aura-spin {
  to { background: conic-gradient(from 360deg, #a78bfa, #00e5ff, #c084fc, #00e5ff, #a78bfa); }
}
.avatar-frame-aura::before,
.avatar-frame-aura::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: transparent;
  animation: avatar-frame-aura-ripple 2.4s ease-out infinite;
}
.avatar-frame-aura::after { animation-delay: 1.2s; }
/* 3 層の box-shadow を spread + blur で同時に外向きに広げる: 紫 / シアン / 桃 */
@keyframes avatar-frame-aura-ripple {
  0%   {
    box-shadow:
      0 0  4px 0px  rgba(167,139,250,0.85),
      0 0  8px 0px  rgba(0,229,255,0.65),
      0 0 12px 0px  rgba(192,132,252,0.45);
    opacity: 1;
  }
  100% {
    box-shadow:
      0 0 14px 16px rgba(167,139,250,0),
      0 0 22px 22px rgba(0,229,255,0),
      0 0 32px 30px rgba(192,132,252,0);
    opacity: 0;
  }
}

/* 火花枠: 赤橙のグラデ枠 + 燃える glow から大きな火の粉が打ち上がって
   重力で落ちる。各粒子に blur:2 を加えて熱い光感、9 個ずつ × 2 グループ、
   別軌道 + 1.2s 遅延で常に火花が舞ってる。 */
.avatar-frame-spark {
  background: conic-gradient(from 0deg, #ff6f3c, #ffae42, #ff8c00, #ff4500, #ff6f3c);
  box-shadow:
    0 0 10px rgba(255, 100, 30, 0.7),
    0 0 20px rgba(255, 140, 0, 0.4);
}
.avatar-frame-spark::before,
.avatar-frame-spark::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  top: 50%; left: 50%;
  margin: -2px 0 0 -2px;
}
.avatar-frame-spark::before {
  animation: avatar-frame-spark-arc-a 2.4s ease-out infinite;
}
.avatar-frame-spark::after {
  animation: avatar-frame-spark-arc-b 2.4s ease-out infinite 1.2s;
}
/* グループ A: 右半円 + 中央上方向に打ち上げ → 重力で右下に落下。
   各 box-shadow に blur:2px を加えて発光した火の粉感に。 */
@keyframes avatar-frame-spark-arc-a {
  0% {
    box-shadow:
       14px -12px 2px 1 #ff6f3c,
       24px  -4px 2px 1 #ffae42,
       30px   8px 2px 1 #ff8c00,
       18px  14px 2px 1 #ffae42,
        4px -24px 2px 1 #ff6f3c,
       -8px -18px 2px 1 #ffae42,
       10px -32px 2px 1 #ff8c00,
       36px   0px 2px 1 #ff4500,
       -2px -36px 2px 1 #ffd54f;
    opacity: 1;
  }
  30% {
    box-shadow:
       26px -34px 2px 1 #ff6f3c,
       40px -22px 2px 1 #ffae42,
       48px  -6px 2px 1 #ff8c00,
       34px   8px 2px 1 #ffae42,
       10px -52px 2px 1 #ff6f3c,
       -6px -46px 2px 1 #ffae42,
       22px -64px 2px 1 #ff8c00,
       58px -16px 2px 1 #ff4500,
       -4px -58px 2px 1 #ffd54f;
    opacity: 0.95;
  }
  100% {
    box-shadow:
       46px  64px 2px 1 transparent,
       62px  68px 2px 1 transparent,
       68px  72px 2px 1 transparent,
       50px  78px 2px 1 transparent,
       18px  60px 2px 1 transparent,
        4px  64px 2px 1 transparent,
       30px  56px 2px 1 transparent,
       80px  60px 2px 1 transparent,
       16px  54px 2px 1 transparent;
    opacity: 0;
  }
}
/* グループ B: 左半円 + 中央上方向に打ち上げ → 重力で左下に落下 */
@keyframes avatar-frame-spark-arc-b {
  0% {
    box-shadow:
      -14px -12px 2px 1 #ff8c00,
      -24px  -4px 2px 1 #ffae42,
      -30px   8px 2px 1 #ff6f3c,
      -18px  14px 2px 1 #ffae42,
       -4px -24px 2px 1 #ff8c00,
        8px -18px 2px 1 #ff6f3c,
      -10px -32px 2px 1 #ffae42,
      -36px   0px 2px 1 #ff4500,
        2px -36px 2px 1 #ffd54f;
    opacity: 1;
  }
  30% {
    box-shadow:
      -26px -34px 2px 1 #ff8c00,
      -40px -22px 2px 1 #ffae42,
      -48px  -6px 2px 1 #ff6f3c,
      -34px   8px 2px 1 #ffae42,
      -10px -52px 2px 1 #ff8c00,
        6px -46px 2px 1 #ff6f3c,
      -22px -64px 2px 1 #ffae42,
      -58px -16px 2px 1 #ff4500,
        4px -58px 2px 1 #ffd54f;
    opacity: 0.95;
  }
  100% {
    box-shadow:
      -46px  64px 2px 1 transparent,
      -62px  68px 2px 1 transparent,
      -68px  72px 2px 1 transparent,
      -50px  78px 2px 1 transparent,
      -18px  60px 2px 1 transparent,
       -4px  64px 2px 1 transparent,
      -30px  56px 2px 1 transparent,
      -80px  60px 2px 1 transparent,
      -16px  54px 2px 1 transparent;
    opacity: 0;
  }
}

/* === Animated SVG asset frames (Discord 風 アバター装飾) ===
 * CSS pure では到達できないリッチさを SVG アセット側に焼き込む。
 * ::before で /static/frames/{name}.svg を center/contain で重ねる。
 * 親 .avatar-frame は position:relative、paint 順は親背景 → ::before → img なので
 * アバター本体は ::before の上に描かれる (z-index 指定不要)。
 * .avatar-frame の background を透明化しないと本体の bg-card 円が枠の見えを邪魔する。 */
.avatar-frame-phoenix,
.avatar-frame-wings {
  background: transparent;
  box-shadow: none;
}
.avatar-frame-phoenix::before,
.avatar-frame-wings::before {
  content: '';
  position: absolute;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* 青炎の不死鳥: 円形、22% 外側にはみ出して炎を見せる */
.avatar-frame-phoenix::before {
  inset: -22%;
  background-image: url('/static/frames/phoenix.svg');
}
.avatar-frame-phoenix.avatar-frame-xl::before { inset: -27%; }
/* 黄金の翼: viewBox が横長 (240x200) なので左右に大きくはみ出す */
.avatar-frame-wings::before {
  top: -15%; bottom: -15%; left: -38%; right: -38%;
  background-image: url('/static/frames/wings.svg');
}
.avatar-frame-wings.avatar-frame-xl::before {
  top: -18%; bottom: -18%; left: -42%; right: -42%;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-frame-neon,
  .avatar-frame-aura,
  .avatar-frame-sparkle::before,
  .avatar-frame-sparkle::after,
  .avatar-frame-aura::before,
  .avatar-frame-aura::after,
  .avatar-frame-spark::before,
  .avatar-frame-spark::after { animation: none; }
  /* SVG 内 SMIL animation は CSS から止められないため phoenix/wings の
     回転・羽ばたきは継続する (Discord も完全停止はしない仕様)。 */
}

/* 装飾ハンドル色を .author-name-text と .author-handle に伝播させる。
   php-style.css L14069 で .author-name-text に直接
   `color: var(--text-primary) !important` が当たっていて、親 .author-name の
   inline style="color:..." がテキストに届かなかった。inline color が指定された
   時だけ inherit に強制上書きして、親の inline 値をテキストに引き継がせる。
   adjacent sibling (+) で同じ post-author-meta 内の @handle も同色に。
   specificity: .author-name[style*="color"] .author-name-text = (0,0,3,0)
   > 元の .author-name-text = (0,0,1,0) で勝つ。 */
.author-name[style*="color"] .author-name-text,
.author-name[style*="color"] + .author-handle {
  color: inherit !important;
}
/* .author-handle 側は親が違うので、adjacent sibling では取れない。
   代わりに親 .post-author-meta が :has() で「inline color 持ち .author-name」
   を含む時に @handle も色を引き継ぐ (モダンブラウザ向け、未対応ブラウザは
   element 単位の通常色のまま、機能劣化はマイルド)。 */
.post-author-meta:has(> a > .author-name[style*="color"]) .author-handle,
.post-author-meta:has(> .author-link > .author-name[style*="color"]) .author-handle {
  color: var(--text-secondary);
}

/* ========================================
 * TL ピン (post promote) のバッジ
 * ピン中の投稿は post_author_meta の末尾 or detail head に
 *  「↑ ピン留め」chip を出して、ユーザに「Home トップに固定されている」
 *  ことを伝える。色味は accent-gold (cosmetic gold と統一感)。
 * ======================================== */
.promoted-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bg-primary);
  background: var(--accent-gold);
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 4px;
}
.promoted-chip i { font-size: 0.68rem; }
body.theme-light .promoted-chip { color: #fff; }
/* アイコンのみ表示モード: 丸バッジ風にコンパクト化 */
.promoted-chip.promoted-chip-icon {
  gap: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  justify-content: center;
  border-radius: 50%;
}
.promoted-chip.promoted-chip-icon i { font-size: 0.72rem; }

/* ==========================================================
 * Composer 拡張: 添付1ボタン + 現況届け/同好談話室 ピッカー
 * ========================================================== */
.cm-video-preview {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0; padding: 8px 12px; border: 1px solid var(--border-primary);
  border-radius: 10px; background: var(--bg-card-hover); font-size: 0.85rem;
}
.cm-video-preview i { color: var(--accent-cyan); }
.cm-video-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-video-remove,
.cm-target-remove {
  background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
  font-size: 1.05rem; padding: 0 4px; line-height: 1;
}
.cm-video-remove:hover, .cm-target-remove:hover { color: var(--accent-pink); }

.cm-target-chip {
  display: inline-flex; align-items: center; gap: 8px;
  /* 親が flex column のため align-self を指定しないと横幅いっぱいに
     stretch されてチップ右側に大きな余白が出る。内容サイズに縮める。 */
  align-self: flex-start;
  width: fit-content; max-width: 100%;
  margin: 6px 0; padding: 6px 12px;
  border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: linear-gradient(135deg, rgba(124,77,255,0.14), rgba(0,229,255,0.10));
  border: 1px solid var(--accent-cyan); color: var(--text-primary);
}
.cm-target-chip i { color: var(--accent-purple); }

/* composer-actions 内の各アクションを等間隔に並べる。
   .cm-attach-btn の margin-right:auto が画像だけ左端に押し付けて隙間が
   開いていた問題を打ち消し、3 つのアイコンが均等に並ぶようにする。 */
.composer-actions.cm-actions-tight { gap: 6px; }
.composer-actions.cm-actions-tight .composer-action { padding: 6px; }
.composer-actions.cm-actions-tight .cm-attach-btn {
  margin-right: 0;                 /* デフォの margin-right:auto を打ち消す */
  border: none;                    /* 枠を外して他のアイコンと統一感 */
  color: var(--accent-cyan);       /* 他の composer-action と同じ色 */
}

/* ピッカー popover — 「選択メニュー」スタイル:
   - ボタンの「下」に開く (上はヘッダ/タブで隠れるため必ず下)
   - 幅はコンパクト (max 300px)
   - 右端切れは JS (composer-extras.js) で開いた直後に translateX 補正
   - 行は 1 行に固定 + 長いラベルは末尾 ellipsis */
.cm-picker-wrap { position: relative; display: inline-flex; }
.cm-picker-popover {
  position: absolute;
  left: 0; right: auto;
  top: calc(100% + 8px); bottom: auto;     /* ← 下方向に開く */
  z-index: 1000;
  min-width: 220px;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  max-height: 320px; overflow-y: auto;
  /* --bg-card は半透明 (rgba(13,19,48,0.55)) なので下の投稿カードが透けて見にくい。
     ポップオーバーは必ず不透明にして下を完全に隠す。カスタムテーマで bg vars が
     半透明になるケースも考慮して backdrop-filter で blur も併用。 */
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-light .cm-picker-popover {
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(50,80,150,0.18);
}
.cm-picker-popover[hidden] { display: none; }
.cm-picker-head {
  padding: 10px 14px; border-bottom: 1px solid var(--border-primary);
  font-weight: 800; font-size: 0.86rem; color: var(--text-primary);
  background: var(--bg-card-hover);
}
.cm-picker-list { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cm-picker-item {
  text-align: left; background: transparent; border: 1px solid transparent;
  color: var(--text-primary); padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.cm-picker-item:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--accent-cyan); }
.cm-picker-item:disabled { opacity: 0.55; cursor: not-allowed; }
.cm-picker-item-title {
  font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; gap: 8px;
  /* 1 行に固定 + 末尾省略 */
  white-space: nowrap; overflow: hidden;
}
/* タイトルの中で「ラベルテキスト本体」だけ ellipsis 対象。
   アイコン (<i>) と末尾の (閉鎖中) chip は ellipsis されないように
   .cm-picker-item-label を巻いておく前提。 */
.cm-picker-item-title .cm-picker-item-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-picker-item-title i { color: var(--accent-cyan); flex: 0 0 auto; }
.cm-picker-item-title .cm-picker-closed { flex: 0 0 auto; }
.cm-picker-item-sub { color: var(--text-secondary); font-size: 0.75rem; margin-top: 2px; padding-left: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-picker-closed { color: var(--accent-pink); font-weight: 700; margin-left: 4px; }
.cm-picker-empty { padding: 18px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }

/* 写真オンリーお題: ピッカー内の「写真のみ」タグ */
.cm-picker-item-sub .cm-photo-tag { color: var(--accent-cyan); font-weight: 700; }

/* 写真オンリーお題を選択中の composer:
   テキストは封鎖 (disabled) して沈め、添付ボタンへ視線誘導する */
form.cm-photo-only .composer-textarea {
  opacity: 0.55; cursor: not-allowed;
  background: var(--bg-tertiary);
}
form.cm-photo-only .cm-attach-btn,
form.cm-photo-only .composer-action.cm-attach-btn {
  color: var(--accent-cyan); border-color: var(--accent-cyan);
  animation: cmPhotoNudge 1.6s ease-in-out infinite;
}
@keyframes cmPhotoNudge {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  form.cm-photo-only .cm-attach-btn { animation: none; }
}

/* スマホでも上方向に開く dropdown のまま。ボタンが action-bar 左寄り
   なので、popover は max-width 300px で wrapper の left:0 から右に伸びる
   が、ビューポート (calc(100vw - 24px)) を超えないので端切れしない。 */

/* 現況届けボタンの未投稿バッジ (iOS アプリのバッジに寄せた円形) */
.cm-picker-btn { position: relative; }
.cm-picker-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ff3b30; color: #fff;
  font-size: 0.7rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  border-radius: 999px;
  border: 2px solid var(--bg-primary, #070916);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  /* iOS 風の微妙な内側ハイライトで立体感を出す (サイズは元のまま) */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
}
body.theme-light .cm-picker-badge {
  border-color: #ffffff;
  box-shadow: 0 2px 6px rgba(244, 33, 46, 0.35);
}

/* composer モーダルの帯バナー (現況届け / 同好談話室 の「投稿先を選んでいます」通知)。
   従来は banner ごとに微妙に違うグラデ色を inline style で個別記述していた
   (danwa だけ teal 起点で他ページの紫アクセントと不揃い) → 紫→シアンに統一。 */
.cm-inline-banner { margin:0 0 12px; padding:10px 12px; border-radius:10px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent-purple) 10%, transparent),
    color-mix(in srgb, var(--accent-cyan) 8%, transparent));
  border:1px solid var(--accent-cyan); font-size:0.85rem;
  color:var(--text-primary); line-height:1.6; }
.cm-inline-banner > i:first-child { color:var(--accent-cyan); }
.cm-inline-banner-sub { color:var(--text-secondary); }
.cm-inline-banner-note { display:inline-block; margin-top:2px; font-size:0.74rem; color:var(--text-secondary); }
.cm-inline-banner-note i { color:var(--text-secondary); }
.cm-inline-banner-clear { margin-left:8px; background:transparent; border:none;
  color:var(--text-secondary); cursor:pointer; font-size:0.85rem; }
.cm-inline-banner-clear:hover { color:var(--accent-pink); }

/* composer モーダルの同好談話室「投稿先」ピッカー (cm-picker-* と同じ言語に統一。
   #cmDanwaMenu の position/inset はモバイルで bottom-sheet 化するため
   php-style.css の @media 上書きに委ねる。ここでは見た目 (色/角丸/影) だけ。 */
.cm-danwa-wrap { position: relative; }
.cm-danwa-menu {
  position: absolute; top: auto; bottom: calc(100% + 6px); left: auto; right: 0;
  min-width: 200px; width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  max-height: min(260px, 60vh); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
}
body.theme-light .cm-danwa-menu {
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(50,80,150,0.18);
}
.cm-danwa-menu[hidden] { display: none; }
.cm-danwa-item {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  background: transparent; border: none; color: var(--text-primary);
  cursor: pointer; font-size: 0.88rem;
}
.cm-danwa-item:hover { background: var(--bg-card-hover); }
.cm-danwa-item .fa-comments { color: var(--accent-cyan); flex: 0 0 auto; }
.cm-danwa-item-closed { color: var(--text-secondary); font-size: 0.75rem; }
.cm-danwa-divider { height: 1px; background: var(--border-primary); margin: 2px 6px; }

/* AI に質問する トグルボタン */
.cm-ai-btn {
  position: relative;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cm-ai-btn:hover { color: var(--accent-cyan); }
.cm-ai-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, #00e5ff 0%, #6633ff 100%);
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35), 0 4px 14px rgba(102, 51, 255, 0.45);
}
.cm-ai-btn.is-active i { text-shadow: 0 0 6px rgba(255,255,255,0.6); }

/* AI モード時の form 全体 (textarea の縁取りを ネオン化) */
.composer.cm-ai-on .cm-body {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.45), 0 4px 16px rgba(0, 229, 255, 0.18);
}
/* cm-target-chip を AI モード仕様で上書き */
.cm-target-chip.cm-target-ai {
  background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(102,51,255,0.18));
  border-color: rgba(0, 229, 255, 0.55);
  color: var(--accent-cyan);
}
.cm-target-chip.cm-target-ai .cm-target-icon {
  color: var(--accent-cyan);
}

/* === ハンドル名 アニメーショングラデ ===
 * users.handle_color に "grad-rainbow" 等を保存し、profile.html / post_card.html /
 * post_detail.html 側で `hasPrefix HandleColor "grad-"` を見て `class="handle-grad
 * grad-rainbow"` を付ける。inline color は付けない (background-clip: text のため
 * color: transparent を強制する必要があり、inline color と衝突する)。
 * background-size: 200% で gradient を 2 倍に引き伸ばし、background-position を
 * 動かして流れるアニメ。WebKit prefix を併記。 */
/* .handle-grad は text 専用 (background-clip: text)。block 要素 (= ショップの
 * スウォッチ等) には .grad-* クラス単独で当てると gradient + animation が
 * そのまま見える。 */
.handle-grad {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
/* 全 grad-* 共通: background-size + animation 既定値。
 * .handle-grad と組み合わせれば text、block 要素単独でも同じ動きで流れる。 */
.grad-rainbow,
.grad-blue-sky,
.grad-red-black,
.grad-aurora,
.grad-magma,
.grad-galaxy,
.grad-cyberpunk,
.grad-chrome,
.grad-ocean,
.grad-sakura {
  background-size: 200% 200%;
  background-position: 0% 50%;
  animation: handle-grad-shift 4s linear infinite;
}
.grad-rainbow {
  background-image: linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00cc00,#00aaff,#6633ff,#ff00cc,#ff0000);
}
.grad-blue-sky {
  background-image: linear-gradient(90deg,#1e3a8a,#3b82f6,#87ceeb,#bfdbfe,#87ceeb,#3b82f6,#1e3a8a);
  animation-duration: 5s;
}
.grad-red-black {
  background-image: linear-gradient(90deg,#000000,#7f1d1d,#dc2626,#ff0000,#dc2626,#7f1d1d,#000000);
  animation-duration: 4.5s;
}

/* === 追加 7 種 (それぞれ別ベクトル: 方向 / 速度 / 動き) === */

/* 1. オーロラ — 斜め (135deg) 緩やかな ease-in-out。背景サイズ大きめで揺らぎ感 */
.grad-aurora {
  background-image: linear-gradient(135deg,#003366,#00ff99,#00ccff,#9d00ff,#00ff99,#003366);
  background-size: 300% 300%;
  animation: handle-grad-diag 7s ease-in-out infinite;
}

/* 2. マグマ — 縦 (0deg) に速め、強い脈動。火が下から立ち上る感 */
.grad-magma {
  background-image: linear-gradient(0deg,#000000,#4a0000,#b91c1c,#ff4500,#ff8c00,#ffd700,#ff8c00,#ff4500,#b91c1c,#4a0000,#000000);
  background-size: 100% 300%;
  animation: handle-grad-vertical 3s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 69, 0, 0.45);
}

/* 3. 銀河 — 斜め + 色相回転で星のきらめき。最長 8s */
.grad-galaxy {
  background-image: linear-gradient(45deg,#0a0033,#1a0080,#4a00ff,#ffffff,#9d00ff,#4a00ff,#1a0080,#0a0033);
  background-size: 300% 300%;
  animation: handle-grad-galaxy 8s linear infinite;
  text-shadow: 0 0 6px rgba(157, 0, 255, 0.55);
}

/* 4. サイバーパンク — 高速横方向 1.6s。マゼンタ⇄シアンが点滅級に走る */
.grad-cyberpunk {
  background-image: linear-gradient(90deg,#ff00ff,#00ffff,#ff00ff,#00ffff,#ff00ff);
  background-size: 200% 100%;
  animation: handle-grad-shift 1.6s linear infinite;
  text-shadow: 0 0 6px rgba(255, 0, 255, 0.55), 0 0 10px rgba(0, 255, 255, 0.35);
}

/* 5. クローム — 110deg の鈍い金属感、ease-in-out で柔らかい反復 */
.grad-chrome {
  background-image: linear-gradient(110deg,#1a1a1a,#888888,#e0e0e0,#ffffff,#e0e0e0,#888888,#1a1a1a);
  background-size: 250% 100%;
  animation: handle-grad-shift 6s ease-in-out infinite alternate;
}

/* 6. オーシャン — 縦 (180deg) 大きな波。深海 → 泡の白 → 深海。中速 6s */
.grad-ocean {
  background-image: linear-gradient(180deg,#001a4d,#003366,#0066cc,#66ccff,#ffffff,#66ccff,#0066cc,#003366,#001a4d);
  background-size: 100% 300%;
  animation: handle-grad-vertical 6s linear infinite;
}

/* 7. 桜吹雪 — 柔らかい斜め流れ ease-in-out。最も落ち着いた変化 */
.grad-sakura {
  background-image: linear-gradient(135deg,#ffe4f1,#ffafd7,#ff7eb6,#ffd1e8,#ffafd7,#ffe4f1);
  background-size: 300% 300%;
  animation: handle-grad-diag 7s ease-in-out infinite alternate;
}

@keyframes handle-grad-shift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes handle-grad-vertical {
  0%   { background-position: 50%   0%; }
  100% { background-position: 50% 200%; }
}
@keyframes handle-grad-diag {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}
/* 銀河: 位置 + hue-rotate でランダム感のあるきらめき */
@keyframes handle-grad-galaxy {
  0%   { background-position:   0% 50%; filter: hue-rotate(0deg); }
  50%  { background-position: 100% 50%; filter: hue-rotate(40deg); }
  100% { background-position: 200% 50%; filter: hue-rotate(0deg); }
}
/* prefers-reduced-motion: アニメは止めるが gradient 表示は維持 */
@media (prefers-reduced-motion: reduce) {
  .handle-grad,
  .grad-rainbow, .grad-blue-sky, .grad-red-black,
  .grad-aurora, .grad-magma, .grad-galaxy,
  .grad-cyberpunk, .grad-chrome, .grad-ocean, .grad-sakura {
    animation: none;
  }
}

/* === プロフィール BGM カスタムプレイヤー ===
 * デフォルトの <audio controls> は OS / ブラウザでまちまちでダサいので、
 * 再生ボタン + プログレスバー + 時刻 + ミュート の自前 UI を JS で操作。
 * カスタムカラー (user-colors) 対応: 背景/枠/ボタン/フィルすべて CSS 変数経由。
 * - 背景       = var(--bg-card)          [user-colors panel で上書き可]
 * - 枠         = var(--border-primary)   [user-colors divider で上書き可]
 * - 再生ボタン = var(--gradient-primary) [user-colors primary/primaryEnd で上書き可]
 * - フィル     = var(--gradient-primary)
 * - 文字色     = var(--text-secondary / --text-primary)
 * 再生中グロウは accent-cyan 系を半透明で焼いた静的色 (CSS 変数だけだと alpha 合成
 * できないため。視覚的に控えめなのでテーマで違和感は出ない)。 */
.bgm-player {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 420px;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  color: var(--text-primary);
}
.bgm-player .bgm-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bgm-player .bgm-btn:hover { transform: scale(1.05); }
.bgm-player .bgm-btn:active { transform: scale(0.95); }
.bgm-player .bgm-btn.bgm-mute {
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  width: 28px; height: 28px;
}
.bgm-player .bgm-btn.bgm-mute:hover { color: var(--text-primary); }
.bgm-player .bgm-progress {
  flex: 1 1 auto;
  position: relative;
  height: 6px;
  background: var(--border-primary);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
.bgm-player .bgm-progress:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-cyan);
}
.bgm-player .bgm-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--gradient-primary);
  border-radius: 999px;
  transition: width .08s linear;
}
.bgm-player .bgm-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--text-secondary);
}
/* 再生中: 枠を accent 色に切替。box-shadow は alpha 合成の都合で静的 rgba。 */
.bgm-player.is-playing {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.18);
}

/* ================================================================
 * §149. くじ引きタブの再設計 (.lot-* 名前空間)
 *
 * 旧 .wb-prize-list の bar 表示は確率を出さない設計で意味を失ったので撤廃。
 * カードグリッドで「起こりうる結果」を直感的に並べる。
 * モバイル優先 (Hub に多い縦スクロール幅 350-414pt 想定)。
 * ================================================================ */

.lot { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.lot-card {
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 16px;
}
body.theme-light .lot-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(40,80,160,0.05);
}

/* ----- hero ----- */
.lot-hero { padding: 14px 16px; }
.lot-hero-row { display: flex; align-items: center; gap: 12px; }
.lot-hero-icon {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,0.25), rgba(0,229,255,0.05));
  color: var(--accent-cyan, #00e5ff);
  font-size: 1.4rem;
}
.lot-hero-text { flex: 1 1 auto; min-width: 0; }
.lot-hero-text h2 { margin: 0 0 2px; font-size: 1.05rem; color: var(--text-primary); }
.lot-hero-text p { margin: 0; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
/* 残り枠 / 直近 1h 活動 (pool は UI 非表示) */
.lot-quota {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.lot-quota-it {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.18);
}
.lot-quota-it .k { font-size: 0.7rem; color: var(--text-secondary); letter-spacing: 0.04em; }
.lot-quota-it .v { font-size: 1.4rem; font-weight: 800; color: var(--accent-cyan, #00e5ff); line-height: 1.1; }
.lot-quota-it .v small { font-size: 0.7rem; margin-left: 3px; opacity: 0.8; font-weight: 700; }

/* ----- 抽選結果フラッシュ ----- */
.lot-result { text-align: center; padding: 26px 16px; animation: lotPop 0.42s cubic-bezier(.34,1.56,.64,1); }
.lot-result-icon { font-size: 2.4rem; margin-bottom: 6px; animation: lotSpin 0.8s ease-out; }
.lot-result-amt { font-size: 2.6rem; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.lot-result-amt small { font-size: 0.9rem; font-weight: 700; margin-left: 4px; opacity: 0.8; }
.lot-result-lbl { font-size: 0.9rem; color: var(--text-primary); font-weight: 700; }
.lot-result-win {
  border-color: var(--accent-gold, #ffd700);
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.18), rgba(255,215,0,0.02));
}
.lot-result-win .lot-result-icon, .lot-result-win .lot-result-amt { color: var(--accent-gold, #ffd700); }
.lot-result-lose {
  border-color: var(--accent-pink, #ff4d6d);
  background: radial-gradient(ellipse at center, rgba(255,77,109,0.18), rgba(255,77,109,0.02));
}
.lot-result-lose .lot-result-icon, .lot-result-lose .lot-result-amt { color: var(--accent-pink, #ff4d6d); }
.lot-result-miss {
  border-color: var(--border-primary);
  background: rgba(255,255,255,0.02);
}
.lot-result-miss .lot-result-icon, .lot-result-miss .lot-result-amt { color: var(--text-secondary); }
.lot-result-bonus {
  border-color: var(--accent-cyan, #00e5ff);
  background: radial-gradient(ellipse at center, rgba(0,229,255,0.18), rgba(0,229,255,0.02));
}
.lot-result-bonus .lot-result-icon, .lot-result-bonus .lot-result-amt { color: var(--accent-cyan, #00e5ff); }
.lot-result-bonus .lot-result-amt { font-size: 1.6rem; }
@keyframes lotPop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes lotSpin { from { transform: rotate(-180deg) scale(.4); } to { transform: rotate(0) scale(1); } }

/* ----- 引くボタン ----- */
.lot-action { text-align: center; }
.lot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 220px; padding: 14px 24px;
  border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-cyan, #00e5ff), var(--accent-purple, #6a5cff));
  color: #ffffff; font-weight: 800; font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,229,255,0.32);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lot-btn i { color: #ffffff; }
.lot-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,229,255,0.4); }
.lot-btn:active { transform: translateY(0); }
.lot-btn-bonus { background: linear-gradient(135deg, #00e5ff, #00c896); }
.lot-btn-disabled {
  background: var(--bg-secondary, rgba(255,255,255,0.05)) !important;
  color: var(--text-secondary) !important;
  cursor: not-allowed; box-shadow: none;
}
.lot-note { font-size: 0.78rem; color: var(--text-secondary); margin: 10px 0 0; }

/* ----- 無料チケットカード ----- */
.lot-voucher {
  display: flex; align-items: center; gap: 14px;
  border-color: var(--accent-cyan, #00e5ff);
  background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(106,92,255,0.04));
}
.lot-voucher-icon { font-size: 1.6rem; color: var(--accent-cyan, #00e5ff); }
.lot-voucher-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lot-voucher-text strong { font-size: 0.95rem; color: var(--text-primary); }

/* ----- カードグリッド (起こりうること) ----- */
.lot-h { margin: 0 0 4px; font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.lot-h i { color: var(--accent-cyan, #00e5ff); }
.lot-sub { margin: 0 0 12px; font-size: 0.74rem; color: var(--text-secondary); line-height: 1.5; }

.lot-group-title {
  margin: 14px 0 8px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
}
.lot-group-win { color: var(--accent-gold, #ffd700); }
.lot-group-lose { color: var(--accent-pink, #ff4d6d); }
.lot-group-bonus { color: var(--accent-cyan, #00e5ff); }

.lot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.lot-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 8px; border-radius: 12px;
  border: 1px solid var(--border-primary, rgba(255,255,255,0.1));
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  text-align: center;
  min-height: 64px;
}
.lot-tile .amt { font-size: 1rem; font-weight: 800; line-height: 1.1; }
.lot-tile .lbl { font-size: 0.68rem; color: var(--text-secondary); margin-top: 4px; }

.lot-tile-win .amt { color: var(--accent-gold, #ffd700); }
.lot-tile-win {
  border-color: rgba(255,215,0,0.32);
  background: linear-gradient(135deg, rgba(255,215,0,0.10), rgba(255,215,0,0.02));
}
.lot-tile-big .amt { font-size: 1.15rem; }
.lot-tile-mega .amt { font-size: 1.3rem; }
.lot-tile-mega {
  border-color: rgba(255,215,0,0.55);
  background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,140,0,0.08));
  box-shadow: 0 0 14px rgba(255,215,0,0.18) inset;
}

.lot-tile-lose .amt { color: var(--accent-pink, #ff4d6d); }
.lot-tile-lose {
  border-color: rgba(255,77,109,0.32);
  background: linear-gradient(135deg, rgba(255,77,109,0.10), rgba(255,77,109,0.02));
}
.lot-tile-miss .amt { color: var(--text-secondary); }

.lot-tile-bonus .amt { color: var(--accent-cyan, #00e5ff); font-size: 1.3rem; }
.lot-tile-bonus {
  border-color: rgba(0,229,255,0.32);
  background: linear-gradient(135deg, rgba(0,229,255,0.10), rgba(106,92,255,0.04));
}

/* ----- しくみ details ----- */
.lot-details summary {
  cursor: pointer; list-style: none;
  font-weight: 800; font-size: 0.88rem;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}
.lot-details summary::-webkit-details-marker { display: none; }
.lot-details summary i { color: var(--accent-cyan); }
.lot-details summary::after { content: "▾"; margin-left: auto; color: var(--text-secondary); transition: transform .15s; }
.lot-details[open] summary::after { transform: rotate(180deg); }
.lot-explain {
  margin: 10px 0 0; font-size: 0.82rem; line-height: 1.6;
  color: var(--text-secondary);
}

/* ----- スマホ最終調整 ----- */
@media (max-width: 480px) {
  .lot-hero-row { flex-wrap: wrap; }
  .lot-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .lot-tile { min-height: 60px; padding: 10px 6px; }
  .lot-quota-it { padding: 8px 10px; }
  .lot-quota-it .v { font-size: 1.25rem; }
}

/* ================================================================
 * §150. アンチスパム制限ページ (.rst-*)
 *
 * 制限がかかった時に表示する専用ページ。プレーンテキスト 429 を返す
 * 代わりに redirect でこの画面に飛ばして、状況と対処をやさしく伝える。
 * ================================================================ */

.rst-wrap {
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
}
.rst-card {
  width: 100%; max-width: 480px;
  padding: 36px 28px 28px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  animation: rstPop 0.45s cubic-bezier(.34,1.56,.64,1);
}
body.theme-light .rst-card {
  background: linear-gradient(160deg, #ffffff, #f7faff);
  border-color: rgba(50,80,150,0.10);
  box-shadow: 0 16px 48px rgba(50,80,160,0.10);
}
@keyframes rstPop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* バリアント別の縁取り (情報 / 警告 / 危険) */
.rst-card-info  { border-color: rgba(0,229,255,0.32); }
.rst-card-warn  { border-color: rgba(255,180,40,0.42); }
.rst-card-danger{ border-color: rgba(255,77,109,0.52); }

/* アイコン (大きく、リングが脈打つ) */
.rst-icon-wrap {
  position: relative;
  width: 92px; height: 92px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.rst-icon-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.25;
  animation: rstPulse 2.4s ease-out infinite;
}
.rst-icon {
  font-size: 2.6rem; line-height: 1;
  position: relative; z-index: 1;
}
.rst-card-info  .rst-icon, .rst-card-info  .rst-icon-ring { color: var(--accent-cyan, #00e5ff); }
.rst-card-warn  .rst-icon, .rst-card-warn  .rst-icon-ring { color: #ffb84d; }
.rst-card-danger.rst-card-danger .rst-icon, .rst-card-danger .rst-icon-ring { color: var(--accent-pink, #ff4d6d); }
@keyframes rstPulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(1.55); opacity: 0;    }
  100% { transform: scale(1.55); opacity: 0;    }
}

.rst-title {
  font-size: 1.25rem; font-weight: 800; margin: 0 0 12px;
  color: var(--text-primary);
}
.rst-msg {
  font-size: 0.92rem; line-height: 1.55;
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
body.theme-light .rst-msg { background: rgba(50,80,150,0.04); }
.rst-hint {
  font-size: 0.86rem; line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.rst-until {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,180,40,0.10);
  border: 1px solid rgba(255,180,40,0.32);
  color: #ffb84d;
  font-size: 0.88rem; font-weight: 700;
  margin: 0 0 22px;
}
.rst-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin: 6px 0 22px;
}
.rst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800; font-size: 0.95rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rst-btn:hover { transform: translateY(-1px); }
.rst-btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan, #00e5ff), var(--accent-purple, #6a5cff));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 8px 24px rgba(0,229,255,0.30);
}
.rst-btn-primary:hover { filter: brightness(1.05); }
.rst-btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}
body.theme-light .rst-btn-ghost { background: #fff; border-color: rgba(0,0,0,0.10); }

.rst-foot {
  font-size: 0.74rem; color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.rst-foot i { color: var(--accent-cyan); }

/* ================================================================
 * §150. 博打ハブ (.gamble-*) — 言葉の銀行 ?tab=gamble
 *  各種ギャンブル機能の入り口を並べるカードグリッド。
 *  くじ引き、(将来) スロット / ポーカー 等を順次追加する場所。
 * ================================================================ */
.gamble-hub { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
/* ハブ見出し: カード調 (背景/枠) を捨て、ページタイトル + 説明文の素のセクション
   ヘッダに。下のタイル群と質感を変えることで「説明 ≠ クリック対象」を視覚分離。 */
.gamble-hub-head {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 4px 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.gamble-hub-head > i {
  flex: 0 0 auto; width: auto; height: auto; border-radius: 0;
  background: none; padding: 0;
  color: var(--accent-pink, #ff4d6d);
  font-size: 1.4rem;
}
.gamble-hub-head h2 { margin: 0 0 2px; font-size: 1.1rem; color: var(--text-primary); }
.gamble-hub-head p  { margin: 0; font-size: 0.82rem; line-height: 1.5; }
body.theme-light .gamble-hub-head { background: none; border: 0; }

.gamble-hub-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gamble-tile {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  grid-template-areas: "icon name go" "icon desc go";
  align-items: center; gap: 4px 14px;
  padding: 16px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.gamble-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent-cyan, #00e5ff);
  box-shadow: 0 8px 24px rgba(0,229,255,0.15);
}
body.theme-light .gamble-tile { background: #fff; border-color: rgba(0,0,0,0.08); }
.gamble-tile-icon {
  grid-area: icon;
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,0.22), rgba(0,229,255,0.04));
  color: var(--accent-cyan, #00e5ff);
  font-size: 1.4rem;
}
.gamble-tile-name { grid-area: name; font-weight: 800; font-size: 1rem; color: var(--text-primary); }
/* 「非公開」バッジ (管理者にだけ見える数当てタイル等)。名前の右に小さく添える。 */
.gamble-tile-private {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 800; vertical-align: middle; white-space: nowrap;
  background: rgba(255,77,109,0.16); color: #ff6b8a; border: 1px solid rgba(255,77,109,0.4);
}
body.theme-light .gamble-tile-private { background: rgba(214,40,72,0.1); color: #c2185b; border-color: rgba(214,40,72,0.35); }
.gamble-tile-desc { grid-area: desc; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; }
.gamble-tile-go   { grid-area: go;   color: var(--text-secondary); font-size: 0.9rem; }

.gamble-tile.is-soon {
  opacity: 0.55; cursor: not-allowed;
}
.gamble-tile.is-soon:hover { transform: none; box-shadow: none; border-color: var(--border-primary); }
.gamble-tile.is-soon .gamble-tile-icon {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}

/* === ゲーム別カラー ===
   各タイルに gamble-tile--<name> modifier を付けることで、
   アイコン背景 + アクセント色 + hover 枠を個別に切り替える。
   配色は各ゲームの UI ヘッダ色と合わせて視覚的に同一性を確保。 */
.gamble-tile--lottery .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(0,176,112,0.28), rgba(0,176,112,0.06));
  color: #00b070;
}
.gamble-tile--lottery:hover {
  border-color: rgba(0,176,112,0.6);
  box-shadow: 0 8px 24px rgba(0,176,112,0.18);
}

.gamble-tile--numguess .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,77,109,0.28), rgba(255,77,109,0.06));
  color: #ff4d6d;
}
.gamble-tile--numguess:hover {
  border-color: rgba(255,77,109,0.6);
  box-shadow: 0 8px 24px rgba(255,77,109,0.18);
}

.gamble-tile--slot .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,159,67,0.32), rgba(255,159,67,0.08));
  color: #ff9f43;
}
.gamble-tile--slot:hover {
  border-color: rgba(255,159,67,0.6);
  box-shadow: 0 8px 24px rgba(255,159,67,0.22);
}

.gamble-tile--highlow .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(29,155,240,0.32), rgba(29,155,240,0.06));
  color: #1d9bf0;
}
.gamble-tile--highlow:hover {
  border-color: rgba(29,155,240,0.6);
  box-shadow: 0 8px 24px rgba(29,155,240,0.20);
}

.gamble-tile--chinchiro .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,209,102,0.32), rgba(255,209,102,0.08));
  color: #ffd166;
}
.gamble-tile--chinchiro:hover {
  border-color: rgba(255,209,102,0.6);
  box-shadow: 0 8px 24px rgba(255,209,102,0.22);
}

/* ===== 数当て (tab=numguess) ===== */
.ng { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.ng-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.ng-head > i { color: #ff4d6d; font-size: 1.5rem; }
.ng-head h2 { margin: 0 0 2px; font-size: 1.1rem; color: var(--text-primary); }
.ng-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }

.ng-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
body.theme-light .ng-card { background: #fff; border-color: rgba(0,0,0,0.08); }
.ng-card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--text-primary); }

.ng-status-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
}
.ng-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.ng-stat-v { color: var(--text-primary); font-size: 1rem; }
.ng-stat-v strong { color: #ff4d6d; font-size: 1.15rem; margin-right: 2px; }
.ng-status-hint { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.6; }

.ng-theme { font-size: 1.05rem; color: var(--text-primary); margin: 4px 0 8px; font-weight: 600; }

.ng-mybet {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,176,112,0.14), rgba(0,176,112,0.04));
  border: 1px solid rgba(0,176,112,0.35);
  color: var(--text-primary);
  font-size: 0.92rem;
}

.ng-bet-form {
  display: grid; gap: 10px; margin-top: 12px;
}
.ng-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.ng-label { font-size: 0.82rem; color: var(--text-secondary); }
.ng-bet-form input[type=number] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
}
.ng-bet-btn {
  margin-top: 4px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, #ff4d6d, #c43cf0);
  color: #fff; font-weight: 800; font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,77,109,0.30);
}
.ng-bet-btn:hover { transform: translateY(-1px); }
.ng-bet-btn:active { transform: translateY(0); }

.ng-winners { margin: 8px 0 0; padding: 0 0 0 18px; }
.ng-winners li { font-size: 0.92rem; color: var(--text-primary); padding: 4px 0; }
.ng-winners li strong { color: #00b070; }

.ng-back { text-align: center; padding-top: 4px; }
.ng-back a { color: var(--text-secondary); font-size: 0.88rem; }
.ng-back a:hover { color: var(--text-primary); }

.ng-soon { text-align: center; padding: 18px; }

/* ===== スロット (tab=slot) ===== */
.sl { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.sl-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.sl-head > i { color: #ff9f43; font-size: 1.5rem; }
.sl-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.sl-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }

.sl-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
body.theme-light .sl-card { background: #fff; border-color: rgba(0,0,0,0.08); }
.sl-card h3 { margin: 0 0 8px; font-size: 1rem; }
.sl-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.sl-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.sl-stat-v strong { color: #ff9f43; font-size: 1.15rem; margin-right: 2px; }

/* ステージ (リール + ボタン) — 本格機 ver. */
.sl-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* 機体: 6 リール × 3 段。背景はメタリック黒 + 内側に LED 風光彩。
   ペイラインを中段に強調表示。 */
.sl-machine {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(54px, 1fr));
  gap: 8px;
  padding: 20px 14px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,159,67,0.22), transparent 70%),
    linear-gradient(180deg, #1a1033 0%, #0d0a1f 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,159,67,0.45);
  box-shadow:
    inset 0 2px 18px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 12px 32px rgba(0,0,0,0.45),
    0 0 0 4px rgba(255,159,67,0.10);
}
/* ペイライン (機体内部の横帯) */
.sl-payline {
  position: absolute;
  top: calc(20px + 64px + 4px); /* 上段 (~64px) + gap */
  left: 14px; right: 14px;
  height: 64px;
  border-top: 2px solid rgba(255,159,67,0.55);
  border-bottom: 2px solid rgba(255,159,67,0.55);
  background: linear-gradient(90deg, rgba(255,159,67,0.06), rgba(255,77,109,0.10) 50%, rgba(255,159,67,0.06));
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 24px rgba(255,159,67,0.20) inset;
}
/* (旧 sl-row-label 列は廃止。reels 自体がコンテナを満たすように) */

/* 各リール (= 1 列、3 セル積層) */
.sl-reel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0;
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border: 1px solid rgba(255,159,67,0.45);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.18);
}
.sl-cell {
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-top: 1px dashed rgba(0,0,0,0.06);
}
.sl-cell-top { border-top: 0; }
.sl-cell.is-faded {
  opacity: 0.32;
  filter: blur(0.6px);
}
.sl-cell-mid {
  background: linear-gradient(180deg, rgba(255,243,224,0.6), rgba(255,243,224,0));
}
.sl-reel.is-winning .sl-cell-mid {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,209,102,0.55), transparent 65%),
    linear-gradient(180deg, rgba(255,243,224,0.6), rgba(255,243,224,0));
  animation: sl-win-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes sl-win-pulse {
  from { box-shadow: inset 0 0 12px rgba(255,209,102,0.4); }
  to   { box-shadow: inset 0 0 32px rgba(255,209,102,0.9); }
}

.sl-reel .sl-sym {
  font-size: 1.85rem;
  font-weight: 900;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: inline-block;
  color: #1a1033;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.sl-cell-mid .sl-sym { font-size: 2.15rem; }
/* 高速回転中は半透明 + 微小ブラー、上下動で「流れてる」感 */
.sl-reel.is-spinning .sl-cell .sl-sym {
  animation: sl-cell-bounce 0.12s linear infinite;
  opacity: 0.55;
}
.sl-reel.is-spinning .sl-cell-mid .sl-sym { opacity: 0.75; }
@keyframes sl-cell-bounce {
  0%   { transform: translateY(-4px); filter: blur(0.8px); }
  50%  { transform: translateY(0);     filter: blur(0.4px); }
  100% { transform: translateY(4px);  filter: blur(0.8px); }
}
/* 着地直後にバウンス */
.sl-reel.is-just-landed .sl-cell-mid .sl-sym {
  animation: sl-land 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes sl-land {
  0%   { transform: translateY(-14px); }
  60%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* === STOP ボタン (各リール下端に絶対配置) === */
.sl-stop-btn {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #ff4d6d 0%, #c43cf0 100%);
  color: #fff;
  font-weight: 900; font-size: 0.68rem;
  letter-spacing: 0.10em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255,77,109,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  z-index: 5;
  white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.sl-stop-btn:hover:not(:disabled) {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 5px 14px rgba(255,77,109,0.55), inset 0 1px 0 rgba(255,255,255,0.30);
}
.sl-stop-btn:active:not(:disabled) {
  transform: translateX(-50%) translateY(1px);
}
.sl-stop-btn.is-waiting,
.sl-stop-btn:disabled {
  opacity: 0.45;
  cursor: wait;
}
.sl-stop-btn.is-waiting::after {
  content: ''; /* 応答待ち時のシンプルなグレーアウト */
}

/* スマホ (540px 以下): ラベル列なしの 6 リール均等配置 */
@media (max-width: 540px) {
  .sl-machine {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 12px 8px 14px;
  }
  .sl-cell { height: 46px; }
  .sl-payline {
    top: calc(12px + 46px + 2px);
    height: 46px;
    left: 8px; right: 8px;
  }
  .sl-reel .sl-sym { font-size: 1.25rem; }
  .sl-cell-mid .sl-sym { font-size: 1.45rem; }
  .sl-stop-btn {
    bottom: 2px;
    padding: 2px 8px;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  .sl-cell .sl-sym-cherry,
  .sl-cell .sl-sym-lemon {
    width: 28px; height: 28px;
  }
  .sl-cell-mid .sl-sym-cherry,
  .sl-cell-mid .sl-sym-lemon {
    width: 34px; height: 34px;
  }
}
/* iPhone SE (375px) クラスではさらに圧縮 */
@media (max-width: 380px) {
  .sl-machine {
    gap: 3px;
    padding: 10px 6px 12px;
  }
  .sl-cell { height: 38px; }
  .sl-payline {
    top: calc(10px + 38px + 2px);
    height: 38px;
    left: 6px; right: 6px;
  }
  .sl-reel .sl-sym { font-size: 1.05rem; }
  .sl-cell-mid .sl-sym { font-size: 1.25rem; }
  .sl-cell .sl-sym-cherry,
  .sl-cell .sl-sym-lemon {
    width: 22px; height: 22px;
  }
  .sl-cell-mid .sl-sym-cherry,
  .sl-cell-mid .sl-sym-lemon {
    width: 28px; height: 28px;
  }
}

/* 結果表示の文字 */
.sl-result-headline { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.sl-result-money { font-size: 1rem; }
.sl-result-money strong { font-size: 1.2rem; }
/* シンボル別の色味 — Vegas 風に深い色 + 縁取り + 影 */
.sl-sym-seven {
  color: #d6195a;
  font-family: 'Impact', 'Helvetica Neue', sans-serif;
  font-weight: 900;
  -webkit-text-stroke: 1.2px #fff;
  text-shadow:
    -1px 0 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff,
    0 0 10px rgba(214,25,90,0.55), 0 2px 4px rgba(0,0,0,0.20);
}
.sl-sym-mori {
  color: #5e3fe6;
  font-weight: 900;
  text-shadow:
    -1px 0 0 #fff8e6, 0 1px 0 #fff8e6, 1px 0 0 #fff8e6, 0 -1px 0 #fff8e6,
    0 0 10px rgba(94,63,230,0.45), 0 2px 4px rgba(0,0,0,0.18);
}
.sl-sym-bar {
  color: #1a1033;
  font-family: 'Impact', 'Helvetica Neue', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0.4px #1a1033;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.sl-sym-cherry, .sl-sym-lemon {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20));
}

.sl-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.sl-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.sl-label { font-size: 0.82rem; color: var(--text-secondary); }
.sl-bet-form input[type=number] {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
  width: 110px;
}
.sl-spin-btn {
  padding: 12px 28px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, #ff9f43, #ff4d6d);
  color: #fff; font-weight: 800; font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,159,67,0.40);
}
.sl-spin-btn:hover:not(:disabled) { transform: translateY(-1px); }
.sl-spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 「止める」ボタン: 回す と同サイズ、赤紫グラデで対比 */
.sl-stop-all-btn {
  padding: 12px 28px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, #ff4d6d 0%, #c43cf0 100%);
  color: #fff; font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,77,109,0.45), inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform .12s, box-shadow .12s;
}
.sl-stop-all-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,77,109,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
}
.sl-stop-all-btn:active:not(:disabled) { transform: translateY(1px); }
.sl-stop-all-btn:disabled,
.sl-stop-all-btn.is-waiting {
  opacity: 0.45;
  cursor: wait;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* 結果表示 */
.sl-result {
  min-width: 240px; text-align: center;
  padding: 10px 14px; border-radius: 10px;
  font-size: 1rem;
}
.sl-result.is-win {
  background: linear-gradient(135deg, rgba(0,176,112,0.20), rgba(0,176,112,0.06));
  border: 1px solid rgba(0,176,112,0.50);
  color: var(--text-primary);
}
.sl-result.is-jackpot {
  background: linear-gradient(135deg, rgba(255,159,67,0.30), rgba(255,77,109,0.20));
  border: 1px solid rgba(255,159,67,0.80);
  animation: sl-flash 0.6s ease-in-out 3;
}
@keyframes sl-flash {
  0%, 100% { box-shadow: 0 0 0 rgba(255,159,67,0); }
  50%      { box-shadow: 0 0 24px rgba(255,159,67,0.7); }
}
.sl-result.is-lose, .sl-result.is-push {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}
.sl-result strong { color: inherit; font-size: 1.15rem; }

.sl-brag-btn {
  margin-top: 8px;
  padding: 8px 16px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #ff4d6d, #c43cf0);
  color: #fff; font-weight: 800; cursor: pointer;
}

.sl-msg { text-align: center; padding: 8px; border-radius: 8px; }
.sl-msg.is-err { background: rgba(228,79,107,0.14); color: #e44f6b; }

/* 配当表 */
.sl-table-list { list-style: none; margin: 0; padding: 0; }
.sl-table-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-primary);
  font-size: 0.92rem;
}
.sl-table-list li:last-child { border-bottom: 0; }
.sl-row-left { display: inline-flex; gap: 6px; align-items: center; }
.sl-sym-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  font-weight: 800; font-size: 0.95rem;
}

.sl-back { text-align: center; padding-top: 4px; }
.sl-back a { color: var(--text-secondary); font-size: 0.88rem; }
/* sl-back--top: スロットページ先頭の戻るボタン。
   機体が縦長で末尾の sl-back まで届きにくいため、上部にも目立つ形で置く。
   左寄せ + チップ風背景 + ホバーで accent-cyan に。 */
.sl-back--top { text-align: left; padding-top: 0; margin-bottom: 4px; }
.sl-back--top a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.10));
  color: var(--text-secondary);
  font-size: 0.86rem; font-weight: 600;
  text-decoration: none;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sl-back--top a:hover {
  color: var(--accent-cyan, #00e5ff);
  background: rgba(0,229,255,0.08);
  border-color: rgba(0,229,255,0.30);
}

/* ===== ハイ&ロー (tab=highlow) ===== */
.hl { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.hl-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.hl-head > i { color: #1d9bf0; font-size: 1.5rem; }
.hl-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.hl-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }

.hl-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
body.theme-light .hl-card { background: #fff; border-color: rgba(0,0,0,0.08); }
.hl-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.hl-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.hl-stat-v strong { color: #1d9bf0; font-size: 1.15rem; margin-right: 2px; }

.hl-stage { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 18px; }
.hl-table {
  display: flex; gap: 14px; align-items: flex-end; justify-content: center;
  padding: 20px 16px; perspective: 900px; position: relative;
  background: radial-gradient(circle at 50% 18%, rgba(29,155,240,0.18), rgba(0,0,0,0.45));
  border-radius: 16px;
}
.hl-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hl-slot-cap { font-size: .72rem; color: var(--text-secondary); letter-spacing: .04em; }
.hl-arrow { color: rgba(255,255,255,.45); font-size: 1.2rem; align-self: center; padding-bottom: 18px; }
/* 3D めくりカード */
/* 2D カード (3D flip は Safari で表面が描画されない事故があったため廃止)。
   表面 (.hl-face) は常に DOM に存在し、裏 (.hl-back) を上に重ねて opacity で出し入れ
   するので「絵が出ない」事故が起きない。めくりは scaleX で 2D 表現。 */
/* 札のサイズは `.hl-slot` 子孫に限定する。`.hl-card` はステージ枠
   (<section class="hl-card hl-stage">) とトランプ札の両方に付くため、ここで
   bare `.hl-card` に width/height を置くと枠まで 114×158px に潰れ、札と操作部が
   見切れる (スマホで画面崩壊していた原因)。札だけに効かせる。 */
.hl-slot .hl-card { position: relative; width: 114px; height: 158px; border-radius: 13px; transform-origin: center; }
.hl-slot .hl-card.is-flip { animation: hl-flip .42s ease-in-out; }
@keyframes hl-flip { 0% { transform: scaleX(1); } 48% { transform: scaleX(.04); } 100% { transform: scaleX(1); } }
.hl-face {
  position: absolute; inset: 0; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* 温かみのあるアイボリーの紙 + 中央のほのかな照り */
  background:
    radial-gradient(130% 80% at 50% -10%, #ffffff, #fbf7ef 55%, #f3ecdf 100%);
  /* 二重の縁: 外=濃い罫, 内=金の細枠。札の「額装」感を出す。 */
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.16),
    inset 0 0 0 4px #ffffff,
    inset 0 0 0 5px rgba(190,150,70,.55);
  color: #15110a;
}
.hl-face::before { /* ごく薄いリネン地のテクスチャ */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);
}
.hl-card.is-red .hl-face { color: #c5103f; }
/* 札の裏面。`.hl-back` はハブ戻る × ボタンとクラス名が衝突するため、必ず
   `.hl-card` 子孫に限定 + !important で位置を確定させる (× ボタン側の
   position:fixed が札の裏に漏れないように)。中身: 王室調の紺紫地 + 金の
   菱形ギヨーシェ + 中央メダリオン。 */
.hl-card .hl-back {
  position: absolute !important; inset: 0 !important; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,120,.18), transparent 42%),
    repeating-linear-gradient(45deg, rgba(255,214,120,.14) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(255,214,120,.14) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, #2a1d6e 0%, #4a1d7a 50%, #1a2f7a 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.5),
    inset 0 0 0 3px rgba(255,214,120,.35),
    inset 0 0 0 5px rgba(0,0,0,.28),
    inset 0 0 0 6px rgba(255,214,120,.22);
  opacity: 1; transition: opacity .14s ease;
}
.hl-card .hl-back::after { /* 中央の金メダリオン */
  content: "\2660"; font-size: 2rem; color: #1a1240;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 32%, #ffe9a8, #d9a441 70%, #b3812c);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.6);
}
.hl-card:not(.is-back) .hl-back { opacity: 0; }
/* ピップ場: 隅のインデックスを避けた内側エリア。本物の札と同じ配置で suit を並べる。 */
.hl-pip { position: absolute; inset: 30px 15px; pointer-events: none; }
.hl-p {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 1.6rem; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.14));
}
.hl-p.is-down { transform: translate(-50%, -50%) rotate(180deg); }
.hl-p.is-ace { font-size: 3.8rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
/* 絵札 (J/Q/K): 二重金枠 + セリフのイニシャル + 大きな suit の高級ミニマル意匠。 */
.hl-court {
  position: absolute; inset: 6px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, rgba(255,255,255,.6), rgba(238,232,250,.35));
}
.hl-court-frame {
  position: absolute; inset: 4px; border-radius: 5px;
  border: 1.5px solid currentColor; opacity: .5;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), inset 0 0 0 4px currentColor;
  -webkit-mask: linear-gradient(#000,#000); /* 角飾りなしのクリーンな二重罫 */
}
.hl-court-letter {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 3.1rem; line-height: 1; position: relative; z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.hl-court-suit { position: absolute; bottom: 14px; font-size: 1.5rem; z-index: 1; }
.hl-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 900; z-index: 2; }
.hl-corner .hl-rank { font-size: 1.2rem; }
.hl-corner .hl-suit { font-size: .98rem; margin-top: 1px; }
.hl-tl { top: 9px; left: 10px; }
.hl-br { bottom: 9px; right: 10px; transform: rotate(180deg); }
.hl-swipe-hint { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: .72rem; color: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) { .hl-card.is-flip { animation: none; } }

/* ================================================================
 * ハイ&ロー 札コンポーネント (hlx- 専用名前空間)
 *   既存の .hl-card / .hl-table / .hl-back は枠・配当隠し・×ボタン等と
 *   名前衝突して札が潰れる/消える事故が頻発したため、札まわりだけ完全に
 *   独立した hlx- クラスで作り直した。どの既存ルールにも当たらないので
 *   ここの指定が確実に効く。両テーマ・全環境対応。
 * ================================================================ */
.hlx-felt {
  display: flex; gap: 16px; align-items: flex-end; justify-content: center;
  padding: 22px 14px; position: relative; border-radius: 16px;
  background: radial-gradient(circle at 50% 14%, rgba(29,155,240,.20), rgba(8,10,25,.55));
  box-shadow: inset 0 2px 18px rgba(0,0,0,.4);
}
.hlx-seat { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.hlx-seat-cap { font-size: .72rem; letter-spacing: .05em; color: rgba(255,255,255,.72); }
.hlx-arrow { align-self: center; color: rgba(255,255,255,.5); font-size: 1.3rem; padding-bottom: 64px; flex: 0 0 auto; }

.hlx-card {
  position: relative; width: 116px; height: 162px; flex: 0 0 auto;
  border-radius: 13px; transform-origin: center; box-sizing: border-box;
}
.hlx-card.is-flip { animation: hlx-flip .42s ease-in-out; }
@keyframes hlx-flip { 0% { transform: scaleX(1); } 48% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hlx-card.is-flip { animation: none; } }

.hlx-face {
  position: absolute; inset: 0; border-radius: 13px; overflow: hidden;
  background: radial-gradient(130% 80% at 50% -10%, #ffffff, #fbf7ef 55%, #f3ecdf 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.16),
    inset 0 0 0 4px #ffffff,
    inset 0 0 0 5px rgba(190,150,70,.55);
  color: #15110a;
}
.hlx-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);
}
.hlx-card.is-red .hlx-face { color: #c5103f; }

.hlx-back {
  position: absolute; inset: 0; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,120,.18), transparent 42%),
    repeating-linear-gradient(45deg, rgba(255,214,120,.14) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(255,214,120,.14) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, #2a1d6e 0%, #4a1d7a 50%, #1a2f7a 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.5),
    inset 0 0 0 3px rgba(255,214,120,.35),
    inset 0 0 0 5px rgba(0,0,0,.28);
}
.hlx-back::after {
  content: "\2660"; width: 46px; height: 46px; border-radius: 50%;
  font-size: 2rem; color: #1a1240;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 32%, #ffe9a8, #d9a441 70%, #b3812c);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.6);
}
/* 表/裏の出し分けは opacity ではなく display で行う。Safari は重ねた要素の
   opacity + stacking context で「裏面が消えない/隅文字が透ける」描画事故を
   起こすことがあるため、確実な display:none で切り替える。
   - 表向き (引いた後): 裏面を消す → アイボリーの表 + ピップが出る
   - 裏向き (引く前):   表面を消す → きれいな裏模様だけ */
.hlx-card:not(.is-back) .hlx-back { display: none; }
.hlx-card.is-back .hlx-face { display: none; }

.hlx-pip { position: absolute; inset: 30px 14px; pointer-events: none; }
.hlx-p { position: absolute; transform: translate(-50%, -50%); font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.14)); }
.hlx-p.is-down { transform: translate(-50%, -50%) rotate(180deg); }
.hlx-p.is-ace { font-size: 3.8rem; }

.hlx-court { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; }
/* 絵札の二重額装: 外=金枠、内=スート色の細罫 */
.hlx-court::before { content: ""; position: absolute; inset: 2px; border: 2px solid rgba(190,150,70,.65); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,236,180,.4); }
.hlx-court::after  { content: ""; position: absolute; inset: 6px; border: 1px solid currentColor; border-radius: 5px; opacity: .4; }
.hlx-court-letter { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 3.1rem; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 3px rgba(0,0,0,.18); z-index: 1; }
.hlx-court-suit { position: absolute; bottom: 12px; font-size: 1.4rem; z-index: 1; }

.hlx-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 900; z-index: 2; }
.hlx-corner .hlx-rank { font-size: 1.2rem; }
.hlx-corner .hlx-suit { font-size: .95rem; margin-top: 1px; }
.hlx-tl { top: 8px; left: 9px; }
.hlx-br { bottom: 8px; right: 9px; transform: rotate(180deg); }

.hl-bet-form { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.hl-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.hl-label { font-size: 0.82rem; color: var(--text-secondary); }
.hl-bet-form input[type=number] {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
  width: 110px;
  text-align: center;
}
.hl-guess-row { display: flex; gap: 12px; width: 100%; justify-content: center; }
.hl-guess-btn {
  padding: 14px 24px;
  border: 0; border-radius: 10px;
  font-weight: 800; font-size: 1rem;
  color: #fff; cursor: pointer;
  min-width: 130px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.hl-guess-btn small { display: block; font-size: 0.78rem; opacity: 0.9; margin-top: 2px; }
.hl-guess-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hl-low  { background: linear-gradient(135deg, #00b8d4, #1d9bf0); }
.hl-high { background: linear-gradient(135deg, #ff4d6d, #ff9f43); }
.hl-low:hover:not(:disabled), .hl-high:hover:not(:disabled) { transform: translateY(-1px); }

.hl-draw-btn {
  padding: 12px 28px;
  border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #5e3fe6, #1d9bf0);
  color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(29,155,240,0.40);
}
.hl-draw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.hl-draw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 結果バナー: 小さなピルだと勝敗が「申し訳程度」に見えるので、
   アイコン + ラベル + 金額強調のバナーとしてポップインさせる。 */
.hl-msg {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 300px; margin-left: auto; margin-right: auto;
  text-align: center; padding: 11px 18px; border-radius: 999px;
  font-weight: 800; font-size: .95rem;
  border: 1px solid transparent;
  animation: hlMsgPop .34s cubic-bezier(.2, 1.4, .4, 1);
}
.hl-msg[hidden] { display: none; }
.hl-msg strong { font-size: 1.18rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-msg i { font-size: 1.05rem; }
@keyframes hlMsgPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-msg { animation: none; } }
.hl-msg.is-win {
  background: linear-gradient(135deg, rgba(0,217,126,.22), rgba(0,176,112,.10));
  color: #2bffaa; border-color: rgba(0,217,126,.5);
  box-shadow: 0 0 22px rgba(0,217,126,.25);
}
.hl-msg.is-win i { color: #ffd166; }
.hl-msg.is-push { background: rgba(255,255,255,0.08); color: var(--text-secondary); border-color: rgba(255,255,255,.14); }
.hl-msg.is-lose {
  background: linear-gradient(135deg, rgba(228,79,107,.2), rgba(160,40,60,.10));
  color: #ff7d96; border-color: rgba(228,79,107,.45);
}
.hl-msg.is-err  { background: rgba(228,79,107,0.14); color: #e44f6b; }
body.theme-light .hl-msg.is-win  { color: #047a52; box-shadow: 0 2px 14px rgba(0,176,112,.18); }
body.theme-light .hl-msg.is-lose { color: #c2304f; }

.hl-back { text-align: center; padding-top: 4px; }
.hl-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* ===== チンチロ (tab=chinchiro) ===== */
.ch { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.ch-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.ch-head > i { color: #ffd166; font-size: 1.5rem; }
.ch-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.ch-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }

.ch-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
body.theme-light .ch-card { background: #fff; border-color: rgba(0,0,0,0.08); }
.ch-card h3 { margin: 0 0 8px; font-size: 1rem; }
.ch-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.ch-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.ch-stat-v strong { color: #ffd166; font-size: 1.15rem; margin-right: 2px; }

.ch-stage { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 18px; }
.ch-dice {
  display: flex; gap: 18px;
  padding: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(255,209,102,0.20), rgba(0,0,0,0.4));
  border-radius: 16px;
  box-shadow: inset 0 4px 14px rgba(0,0,0,0.40);
}
.ch-die {
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  /* 角を丸めた象牙のサイコロ。上面に照り、底に厚みの影で立体感。 */
  background:
    radial-gradient(120% 90% at 32% 22%, #ffffff 0%, #fff6e0 55%, #f6e9c8 100%);
  border: 1px solid rgba(190,150,70,0.5);
  border-radius: 16px;
  box-shadow:
    0 5px 0 rgba(150,110,40,0.28),
    0 8px 16px rgba(0,0,0,0.35),
    inset 0 2px 2px rgba(255,255,255,0.9),
    inset 0 -3px 6px rgba(150,110,40,0.18);
}
/* 初手の「?」表示 (まだ振っていない状態) のテキストスタイル。 */
.ch-die-face {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 2.2rem; font-weight: 900; color: #4a3d6e;
}
/* ピップ面: 3×3 グリッド。.on のセルだけ点を打つ。 */
.ch-die-face.ch-pips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%;
  padding: 12px; gap: 1px; place-items: center;
}
.ch-pip { width: 13px; height: 13px; border-radius: 50%; background: transparent; }
.ch-pip.on {
  background: radial-gradient(circle at 36% 30%, #5b4a86 0%, #271a4d 60%, #160d33 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.4);
}
.ch-die.is-rolling { animation: ch-shake 0.18s linear infinite; }
.ch-die.is-rolling .ch-die-face { filter: blur(1.2px); opacity: 0.5; }
@keyframes ch-shake {
  0%   { transform: translate(0, 0)    rotate(0deg); }
  25%  { transform: translate(-2px,-3px) rotate(-12deg); }
  50%  { transform: translate(3px, 2px) rotate(8deg); }
  75%  { transform: translate(-2px, 3px) rotate(-4deg); }
  100% { transform: translate(2px,-2px) rotate(10deg); }
}
.ch-die.is-win  { border-color: rgba(0,176,112,0.9); }
.ch-die.is-win .ch-pip.on  { background: radial-gradient(circle at 36% 30%, #2ad18c, #007a4d 70%); }
.ch-die.is-lose .ch-pip.on { background: radial-gradient(circle at 36% 30%, #8a99a3, #4f5b63 70%); }
/* 旧テキスト目の色 (フォールバック用に残す) */
.ch-die.is-win .ch-die-face { color: #00b070; }
.ch-die.is-lose .ch-die-face { color: #6d808a; }

.ch-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.ch-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.ch-label { font-size: 0.82rem; color: var(--text-secondary); }
.ch-bet-form input[type=number] {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
  width: 110px;
}
.ch-roll-btn {
  padding: 12px 28px;
  border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #ffd166, #ff9f43);
  color: #1a1033; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,209,102,0.40);
}
.ch-roll-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ch-roll-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ch-result {
  min-width: 240px; text-align: center;
  padding: 12px 16px; border-radius: 10px;
  font-size: 1rem;
}
.ch-result.is-win {
  background: linear-gradient(135deg, rgba(255,209,102,0.25), rgba(255,159,67,0.12));
  border: 1px solid rgba(255,209,102,0.6);
  color: var(--text-primary);
  animation: ch-pop 0.4s ease-out;
}
@keyframes ch-pop {
  0%   { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
.ch-result.is-lose, .ch-result.is-push {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}

.ch-msg { text-align: center; padding: 8px; border-radius: 8px; }
.ch-msg.is-err { background: rgba(228,79,107,0.14); color: #e44f6b; }

.ch-table-list { list-style: none; margin: 0; padding: 0; }
.ch-table-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-primary);
  font-size: 0.92rem;
}
.ch-table-list li:last-child { border-bottom: 0; }
.ch-role { color: var(--text-primary); }
.ch-table-list li strong { color: #ffd166; min-width: 70px; text-align: right; }
.ch-table-list li em { font-size: 0.78rem; }

.ch-back { text-align: center; padding-top: 4px; }
.ch-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* ================================================================
 * §151. 悪役 AI バッジ (.villainMark) — bot_kind=3
 *   FA fa-user-secret (フード被ったスパイ顔) を赤グロー + 黒丸背景で
 *   バッジ化。旧 CSS の絵文字風 (顔+目+口) は止め、ハッカー仮面アイコン
 *   らしい見た目に。
 * ================================================================ */
.villainMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: middle;
  background: radial-gradient(circle at 50% 50%, #1a0303 0%, #000 100%);
  border-radius: 50%;
  border: 1px solid rgba(255, 58, 58, 0.55);
  box-shadow:
    0 0 6px rgba(255, 58, 58, 0.45),
    inset 0 0 4px rgba(255, 58, 58, 0.25);
  user-select: none;
}
.villainMark > i {
  font-size: 0.7em;
  color: #ff5050;
  text-shadow: 0 0 3px rgba(255, 50, 50, 0.8);
  line-height: 1;
}
body.theme-light .villainMark {
  background: radial-gradient(circle at 50% 50%, #2a0606 0%, #110102 100%);
  border-color: rgba(220, 30, 30, 0.6);
  box-shadow:
    0 0 6px rgba(220, 30, 30, 0.4),
    inset 0 0 4px rgba(220, 30, 30, 0.3);
}
body.theme-light .villainMark > i { color: #ff6060; }

/* 悪役プロフィールから詳細ページ (/villains) への導線。
   profile-header-content (position: relative) 内で absolute 配置し、
   アバター (左 16px, 幅 128px) の右隣・アクション行と同じ高さに置く。
   profile-actions 内に置くと親 margin-left: auto の都合で別行に落ちて
   しまうため、構造上は profile-actions の外側に置いている。 */
.profile-villain-pill {
  position: absolute;
  top: var(--space-4);
  left: calc(var(--space-4) * 2 + 128px); /* avatar 右端 + 隙間 */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0 14px;
  height: 40px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #ff8a8a;
  background: rgba(40, 4, 6, 0.75);
  border: 1px solid rgba(255, 58, 58, 0.5);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.profile-villain-pill:hover {
  background: rgba(80, 8, 10, 0.9);
  border-color: rgba(255, 90, 90, 0.7);
  color: #ffb0b0;
}
.profile-villain-pill > i { font-size: 0.95em; }
.profile-villain-pill-label { line-height: 1; }

/* 中幅 (タブレット/小デスクトップ): pill を少し縮める */
@media (max-width: 720px) {
  .profile-villain-pill {
    height: 34px;
    padding: 0 10px;
    font-size: 0.76rem;
  }
}

/* スマホ: 折り返さずに ⋯ の左隣 (同じ行) に詰める。
   横スペースが厳しいので、right: 指定で action 群の左端にアンカー +
   文字を極小にして無理矢理 1 行に並べる。avatar (128px) との隙間も
   ギリギリ確保 (= 約 145px の avatar 右端の直後から始まる)。 */
@media (max-width: 480px) {
  .profile-villain-pill {
    top: var(--space-4);
    left: auto;
    /* 右端 padding (16) + 張り込む button (~94) + ⋯ (40) + gaps (~16) ≒ 166 */
    right: 166px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.65rem;
    gap: 0.25em;
    box-shadow: none;
    letter-spacing: -0.01em;
  }
  .profile-villain-pill > i { font-size: 0.85em; }
}

body.theme-light .profile-villain-pill {
  color: #a01515;
  background: rgba(255, 220, 220, 0.7);
  border-color: rgba(160, 20, 20, 0.35);
}
body.theme-light .profile-villain-pill:hover {
  background: rgba(255, 200, 200, 0.9);
  border-color: rgba(160, 20, 20, 0.55);
  color: #8a0a0a;
}

/* ================================================================
 * §152. 悪役 AI 詳細ページ (/villains)
 *   ハッカー仮面感のあるダーク基調 + 赤金アクセント。
 *   ヘッダーに戻るボタン、本文はカード型 + アイコンセクション。
 * ================================================================ */
.villains-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.villains-back-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.villains-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-cyan);
}
.villains-page-header h1 { font-size: 1.15rem; margin: 0; }

.villains-page {
  padding: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}

/* Hero */
.villain-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-5);
  background:
    radial-gradient(circle at 80% 30%, rgba(255, 58, 58, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0a0203 0%, #1a0606 100%);
  border: 1px solid rgba(255, 58, 58, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.villain-hero-icon {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a0606 0%, #000 100%);
  border: 2px solid rgba(255, 58, 58, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  color: #ff5050;
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.7);
  box-shadow: 0 0 14px rgba(255, 58, 58, 0.35);
}
.villain-hero-text h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}
.villain-hero-text p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Section titles */
.villains-section-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
}
.villains-section-title > i { color: #ff7070; font-size: 0.95em; }

/* Character cards */
.villain-card {
  position: relative;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 58, 58, 0.04) 100%);
  border: 1px solid var(--border-primary);
  border-left: 4px solid #ff3a3a;
  border-radius: var(--radius-md);
  transition: transform 0.15s, box-shadow 0.15s;
}
.villain-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.villain-card-akuto { border-left-color: #ff3a3a; }
.villain-card-morinotame { border-left-color: #ffd24a; }

.villain-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.villain-card-name { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.villain-card-handle { margin-top: 2px; font-size: 0.85rem; color: var(--text-muted); font-family: monospace; }
.villain-card-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 6px 12px;
  background: rgba(255, 58, 58, 0.12);
  border: 1px solid rgba(255, 58, 58, 0.35);
  border-radius: var(--radius-full);
  color: #ff8a8a;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.villain-card-link:hover {
  background: rgba(255, 58, 58, 0.22);
  border-color: rgba(255, 58, 58, 0.6);
}
.villain-card-morinotame .villain-card-link {
  background: rgba(255, 210, 74, 0.12);
  border-color: rgba(255, 210, 74, 0.4);
  color: #ffdc70;
}
.villain-card-morinotame .villain-card-link:hover {
  background: rgba(255, 210, 74, 0.22);
  border-color: rgba(255, 210, 74, 0.65);
}
.villain-card-tagline {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.villain-traits {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 0.88rem;
}
.villain-traits dt {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding-top: 2px;
}
.villain-traits dd { margin: 0; color: var(--text-secondary); line-height: 1.5; }

/* Info grid */
.villains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.villain-info-card {
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  text-align: center;
}
.villain-info-icon {
  width: 44px; height: 44px;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 58, 58, 0.18) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  color: #ff8a8a;
  font-size: 1.15rem;
}
.villain-info-card h4 {
  margin: 0 0 6px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
}
.villain-info-card p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.villain-info-card strong { color: #ffd24a; }

/* NG list */
.villain-ng-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.villain-ng-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 10px var(--space-3);
  margin-bottom: 6px;
  background: rgba(255, 58, 58, 0.05);
  border-left: 3px solid rgba(255, 58, 58, 0.55);
  border-radius: 4px;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.villain-ng-list li > i {
  flex: 0 0 auto;
  color: #ff6060;
  margin-top: 2px;
}
.villain-note {
  margin: var(--space-3) 0 var(--space-3);
  padding: var(--space-3);
  background: rgba(255, 210, 74, 0.06);
  border-left: 3px solid rgba(255, 210, 74, 0.55);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.villain-prose {
  margin: var(--space-2) 0 var(--space-2);
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.75;
}
.villain-prose strong { color: #ff8a8a; }

/* Light theme tweaks */
body.theme-light .villain-hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(255, 58, 58, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  border-color: rgba(220, 30, 30, 0.4);
}
body.theme-light .villain-hero-icon {
  background: radial-gradient(circle, #ffd5d5 0%, #ffb0b0 100%);
  color: #b01515;
  text-shadow: 0 0 6px rgba(220, 30, 30, 0.45);
  border-color: rgba(220, 30, 30, 0.5);
}
body.theme-light .villain-hero-text h2 { color: #1a1a1a; }
body.theme-light .villain-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 230, 230, 0.5) 100%); }
body.theme-light .villains-section-title > i { color: #b01515; }
body.theme-light .villain-info-card { background: rgba(255, 255, 255, 0.6); }
body.theme-light .villain-info-icon { color: #b01515; }
body.theme-light .villain-info-card strong { color: #b07a00; }

/* ================================================================
 * §153. 博打 (gamble) ゲーム用カスタムアイコン / ヘルプモーダル
 *   - 絵文字 (🍒🍋📣🏁✓🎉) を全て独自 CSS / FA アイコンに置換
 *   - 各ゲーム右上に ?ボタン → モーダル全面表示でルール説明
 * ================================================================ */

/* === スロットシンボル: cherry/lemon を SVG background で描画 ====== */
/* cherry: 2つの赤い実 + 緑の茎 (mask 不使用、background-image で 2色対応) */
.sl-sym-cherry {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M22 16 Q32 4 46 14' stroke='%234ea64a' stroke-width='3' fill='none' stroke-linecap='round'/><circle cx='22' cy='44' r='14' fill='%23e02644'/><circle cx='42' cy='46' r='13' fill='%23b81b35'/><circle cx='18' cy='40' r='4' fill='%23ff7a8e' opacity='0.55'/><circle cx='38' cy='42' r='3' fill='%23ff7a8e' opacity='0.45'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 92%;
  color: transparent !important;
  text-shadow: none !important;
}
.sl-sym-cherry::before { content: none; }
/* lemon: 黄色の楕円 + 葉 */
.sl-sym-lemon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><ellipse cx='32' cy='34' rx='22' ry='17' fill='%23f5c63a' stroke='%23c79a1a' stroke-width='2'/><ellipse cx='25' cy='28' rx='9' ry='5' fill='%23fff3a8' opacity='0.6'/><path d='M14 24 Q10 16 18 12 Q24 18 22 24' fill='%2378b04a' stroke='%234e7a2a' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
  color: transparent !important;
  text-shadow: none !important;
}

/* リール大表示時はサイズ確保 + シャドウの調整 */
.sl-reel .sl-sym.sl-sym-cherry,
.sl-reel .sl-sym.sl-sym-lemon {
  width: 2.4em; height: 2.4em;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
/* mini (配当表) サイズ */
.sl-sym-mini.sl-sym-cherry,
.sl-sym-mini.sl-sym-lemon {
  width: 28px; height: 28px;
  background-color: rgba(255,255,255,0.08); /* 配当表セルの背景は残す */
}

/* 7 と BAR と 守 はテキストのままだが、もう少しゲーム風にスタイル */
.sl-sym-seven {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
}
.sl-sym-bar {
  font-family: 'Impact', 'Arial Black', sans-serif;
  letter-spacing: -0.03em;
}

/* === スロット mini 行に sl-sym 単独 (リール幅) が来た時の box 表示確保 === */
.sl-row-left .sl-sym.sl-sym-mini {
  font-size: 1rem;
}

/* === ヘルプボタン (各ゲームヘッダー右上) ============================ */
.gm-help-btn {
  margin-left: auto;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-primary);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gm-help-btn:hover {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #fff;
}

/* === ヘルプモーダル ================================================== */
.gm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* バックドロップを濃いめ + blur で背後の TL を完全に沈ませる */
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
  animation: gm-modal-fade 0.18s ease-out;
}
.gm-modal[open],
.gm-modal.is-open { display: flex; }
@keyframes gm-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gm-modal-panel {
  max-width: 540px;
  width: 100%;
  margin: auto;
  /* 完全不透明な背景 (var(--bg-card) は半透明変数があるため hardcode で
     ダーク = #1a1d23、ライト = #fff にする → 背後 TL が透けない) */
  background: #1a1d23;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  animation: gm-modal-slide 0.2s ease-out;
}
body.theme-light .gm-modal-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
@keyframes gm-modal-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.gm-modal-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-primary);
}
.gm-modal-head h3 {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
}
.gm-modal-close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
}
.gm-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.gm-modal-body {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.gm-modal-body h4 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.96rem;
  color: var(--accent-cyan);
}
.gm-modal-body h4:first-child { margin-top: 0; }
.gm-modal-body ul,
.gm-modal-body ol {
  margin: var(--space-1) 0;
  padding-left: 1.4em;
}
.gm-modal-body li {
  margin-bottom: 4px;
}
.gm-modal-body strong { color: #ff9f43; }
.gm-modal-body .gm-tip {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(28,156,240,0.08);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 4px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* === ヘッダーを flex row 化して ?ボタン を右端に置く調整 ============== */
.ch-head, .hl-head, .sl-head, .ng-head { gap: 12px; align-items: flex-start; }
.ch-head > div, .hl-head > div, .sl-head > div, .ng-head > div { flex: 1; }
.ch-head > i, .hl-head > i, .sl-head > i, .ng-head > i { font-size: 1.6rem; margin-top: 2px; }

/* === ジャックポット時の「TL で自慢する」ボタン (絵文字なし) ========== */
.sl-brag-btn .gm-icon-party { color: #fff; }

/* ================================================================
 * §154. 博打 新ゲーム (クラッシュ / マインスイーパ / ガチャ)
 * ================================================================ */

/* === クラッシュ ============================================== */
.cr { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.cr-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.cr-head > i { color: #ff4d6d; font-size: 1.6rem; margin-top: 2px; }
.cr-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.cr-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.cr-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.cr-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.cr-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.cr-stat-v strong { color: #ff4d6d; font-size: 1.15rem; }
.cr-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cr-display {
  position: relative; width: 100%; min-height: 220px;
  background: radial-gradient(circle at 50% 30%, rgba(255,77,109,0.18), rgba(0,0,0,0.4));
  border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cr-mult { font-size: 3.5rem; font-weight: 900; color: #fff; text-shadow: 0 0 12px rgba(255,77,109,0.6); transition: color 0.2s; }
.cr-mult-x { font-size: 0.6em; opacity: 0.7; margin-left: 4px; }
.cr-status-text { color: var(--text-secondary); margin-top: 8px; font-size: 0.95rem; }
.cr-graph { width: 100%; height: 120px; color: #ff4d6d; margin-top: 12px; filter: drop-shadow(0 0 7px rgba(255,77,109,0.55)); }
.cr-graph path { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cr-graph circle { filter: drop-shadow(0 0 6px currentColor); }
/* 降りた=緑、墜落=赤 にカーブごと染める (倍率数字だけでなく曲線も連動) */
.cr.is-cashed .cr-graph { color: #00d97e; }
.cr.is-crashed .cr-graph { color: #ff3a3a; }
.cr.is-crashed .cr-mult { color: #ff3a3a; animation: cr-shake 0.4s ease-in-out 2; }
.cr.is-cashed .cr-mult { color: #00d97e; }
@keyframes cr-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.cr-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.cr-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.cr-label { font-size: 0.82rem; color: var(--text-secondary); }
.cr-bet-form input[type=number] {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 110px;
}
.cr-btn {
  padding: 12px 28px; border-radius: 10px; border: 0;
  font-weight: 800; font-size: 1.05rem; cursor: pointer;
}
.cr-btn-start { background: linear-gradient(135deg, #ff4d6d, #c43cf0); color: #fff; }
.cr-btn-cashout { background: linear-gradient(135deg, #00d97e, #1d9bf0); color: #fff; min-width: 140px; }
.cr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cr-msg { text-align: center; padding: 10px; border-radius: 8px; }
.cr-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.cr-msg.is-ok { background: rgba(0,217,126,0.15); color: #00d97e; }
.cr-back { text-align: center; padding-top: 4px; }
.cr-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === マインスイーパ ============================================ */
.mi { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.mi-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.mi-head > i { color: #ffb947; font-size: 1.6rem; margin-top: 2px; }
.mi-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.mi-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.mi-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.mi-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.mi-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.mi-stat-v strong { color: #ffb947; font-size: 1.15rem; }
.mi-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mi-start-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.mi-start-form label { display: flex; flex-direction: column; gap: 4px; }
.mi-label { font-size: 0.82rem; color: var(--text-secondary); }
.mi-start-form input[type=number],
.mi-start-form select {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 110px;
}
.mi-btn {
  padding: 12px 28px; border-radius: 10px; border: 0;
  font-weight: 800; font-size: 1.05rem; cursor: pointer;
}
.mi-btn-start { background: linear-gradient(135deg, #ffb947, #ff4d6d); color: #fff; }
.mi-btn-cashout { background: linear-gradient(135deg, #00d97e, #1d9bf0); color: #fff; min-width: 140px; }
.mi-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mi-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
}
.mi-tile {
  background: linear-gradient(180deg, #2c333d 0%, #1a1d23 100%);
  border: 1px solid rgba(255,185,71,0.25);
  border-radius: 8px; color: #fff;
  font-size: 1.4rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.mi-tile:hover:not(:disabled) { background: linear-gradient(180deg, #3c4350 0%, #2a2f38 100%); transform: translateY(-2px); }
.mi-tile:disabled { cursor: not-allowed; }
/* 開けたタイル/地雷/旗の見た目は末尾の「マインスイーパ クラシック UI 完全版」
   セクションに集約 (旧宝石アートの color:transparent が古典数字を消す事故があった)。 */
@keyframes mi-explode {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.mi-actions {
  display: flex; gap: 18px; align-items: center; justify-content: center;
  padding: 8px 0;
}
.mi-current { color: var(--text-secondary); font-size: 1rem; }
.mi-current strong { color: #ffb947; font-size: 1.4rem; }
.mi-msg { text-align: center; padding: 10px; border-radius: 8px; }
.mi-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.mi-msg.is-ok { background: rgba(0,217,126,0.15); color: #00d97e; }
.mi-back { text-align: center; padding-top: 4px; }
.mi-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === ガチャ ==================================================== */
.gc { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.gc-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.gc-head > i { color: #ffd700; font-size: 1.6rem; margin-top: 2px; }
.gc-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.gc-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.gc-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.gc-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.gc-stat-k { color: var(--text-secondary); font-size: 0.88rem; }
.gc-stat-v strong { color: #ffd700; font-size: 1.15rem; }
.gc-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.gc-box-wrap { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 18px; }
.gc-box { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
/* 開封待ち: 自分でタップ/スワイプして開ける「どハマり」の間。tier 色で脈動。 */
.gc-box.is-ready { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gc-box.is-ready .gc-gift {
  animation: gc-ready 0.85s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(var(--gc-glow, 255,215,0), 0.85));
}
@keyframes gc-ready {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.12) translateY(-4px); }
}
.gc-open-hint {
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-size: .92rem; font-weight: 800; letter-spacing: .04em;
  color: rgb(var(--gc-glow, 255,215,0));
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  animation: gc-hint-bounce 0.9s ease-in-out infinite; pointer-events: none; z-index: 5;
}
@keyframes gc-hint-bounce { 0%,100% { transform: translateY(0); opacity:.85; } 50% { transform: translateY(-5px); opacity:1; } }
body.theme-light .gc-open-hint { text-shadow: 0 1px 2px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: reduce) {
  .gc-box.is-ready .gc-gift, .gc-open-hint { animation: none; }
}
/* tier ごとの発光色 (RGB 値だけ持たせて rgba() で使う) */
.gc-box.is-tier-miss   { --gc-glow: 138,138,138; }
.gc-box.is-tier-small  { --gc-glow: 95,168,255; }
.gc-box.is-tier-normal { --gc-glow: 29,155,240; }
.gc-box.is-tier-mid    { --gc-glow: 0,217,126; }
.gc-box.is-tier-big    { --gc-glow: 196,60,240; }
.gc-box.is-tier-super  { --gc-glow: 255,159,67; }
.gc-box.is-tier-jackpot{ --gc-glow: 255,215,0; }
.gc-gift {
  position: relative; z-index: 2; font-size: 5rem; color: #ffd700;
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.5));
  transition: transform .3s ease, opacity .3s ease;
}
.gc-box.is-shaking .gc-gift { animation: gc-shake .9s ease-in-out infinite; }
.gc-box.is-charging .gc-gift { animation: gc-charge .24s ease-in-out infinite; color: rgb(var(--gc-glow, 255,215,0)); filter: drop-shadow(0 0 30px rgba(var(--gc-glow, 255,215,0),.95)); }
.gc-box.is-burst .gc-gift { animation: gc-open .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gc-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes gc-charge { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.08) rotate(3deg); } }
@keyframes gc-open { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(.2) translateY(-30px) rotate(20deg); opacity: 0; } }
/* 中央から広がる光 */
/* 中心寄せは top/left:50% + translate(-50%,-50%) で確実に。inset:0+margin:auto は
   要素が親(150px)より大きいと Safari で負 auto マージンが 0 化して右にズレるため不可。
   アニメの keyframe にも translate を含めて中心を保つ。 */
.gc-burst {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.3);
  background: radial-gradient(circle, rgba(var(--gc-glow, 255,215,0),.95), rgba(var(--gc-glow, 255,215,0),.25) 40%, transparent 70%);
  opacity: 0; z-index: 1; pointer-events: none;
}
.gc-box.is-burst .gc-burst { animation: gc-burst .75s ease-out forwards; }
@keyframes gc-burst { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(7); opacity: 0; } }
/* 放射状の光線 */
.gc-rays {
  position: absolute; top: 50%; left: 50%; width: 210px; height: 210px; z-index: 0; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(var(--gc-glow, 255,215,0),0) 0deg 8deg, rgba(var(--gc-glow, 255,215,0),.55) 8deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 16%, #000 22%, transparent 72%);
          mask: radial-gradient(circle, transparent 16%, #000 22%, transparent 72%);
}
.gc-box.is-burst .gc-rays { animation: gc-rays .8s ease-out forwards; }
@keyframes gc-rays { 0% { transform: translate(-50%,-50%) scale(.4) rotate(0); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-50%,-50%) scale(1.4) rotate(40deg); opacity: 0; } }
/* きらめき粒子 */
.gc-spark { position: absolute; top: 50%; left: 50%; font-size: 1.1rem; color: rgb(var(--gc-glow, 255,215,0)); opacity: 0; z-index: 3; pointer-events: none; }
.gc-spark.s1 { --sx: -70px; --sy: -50px; } .gc-spark.s2 { --sx: 70px; --sy: -55px; } .gc-spark.s3 { --sx: -82px; --sy: 30px; }
.gc-spark.s4 { --sx: 82px; --sy: 40px; } .gc-spark.s5 { --sx: 0; --sy: -92px; } .gc-spark.s6 { --sx: 12px; --sy: 86px; }
.gc-box.is-burst .gc-spark { animation: gc-spark .8s ease-out forwards; }
@keyframes gc-spark { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.1); opacity: 0; } }
/* 結果は箱の上に重ねて中央表示 */
.gc-box-wrap .gc-result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  .gc-box .gc-gift, .gc-burst, .gc-rays, .gc-spark { animation: none !important; }
}
.gc-result { text-align: center; animation: gc-popin 0.45s ease-out; }
.gc-result-name { font-size: 1.6rem; font-weight: 900; margin-bottom: 6px; }
.gc-result-mult { font-size: 1.05rem; color: var(--text-primary); }
@keyframes gc-popin {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { transform: scale(1); }
}
/* tier color variables */
.gc-color-gray,    .gc-result.is-tier-miss .gc-result-name    { color: #8a8a8a; }
.gc-color-blue,    .gc-result.is-tier-small .gc-result-name   { color: #5fa8ff; }
.gc-color-cyan,    .gc-result.is-tier-normal .gc-result-name  { color: #1d9bf0; }
.gc-color-green,   .gc-result.is-tier-mid .gc-result-name     { color: #00d97e; }
.gc-color-purple,  .gc-result.is-tier-big .gc-result-name     { color: #c43cf0; }
.gc-color-orange,  .gc-result.is-tier-super .gc-result-name   { color: #ff9f43; }
.gc-color-gold,    .gc-result.is-tier-jackpot .gc-result-name { color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.7); }
/* ライトテーマ: 白カード上で薄すぎる色 (金/緑/灰) を読める濃さへ。 */
body.theme-light .gc-color-gold,
body.theme-light .gc-result.is-tier-jackpot .gc-result-name { color: #c08a00; text-shadow: none; }
body.theme-light .gc-color-green,
body.theme-light .gc-result.is-tier-mid .gc-result-name { color: #009a5a; }
body.theme-light .gc-color-gray,
body.theme-light .gc-result.is-tier-miss .gc-result-name { color: #6a6a6a; }
.gc-result.is-tier-jackpot { animation: gc-jackpot 0.6s ease-in-out 4; }
@keyframes gc-jackpot {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,215,0,0.9)); }
}
.gc-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.gc-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.gc-label { font-size: 0.82rem; color: var(--text-secondary); }
.gc-bet-form input[type=number] {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 110px;
}
.gc-btn {
  padding: 12px 28px; border-radius: 10px; border: 0;
  background: linear-gradient(135deg, #ffd700, #ff9f43);
  color: #1a1a1a; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,215,0,0.4);
}
.gc-btn:hover:not(:disabled) { transform: translateY(-1px); }
.gc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gc-msg { text-align: center; padding: 10px; border-radius: 8px; }
.gc-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.gc-table-list { list-style: none; margin: 0; padding: 0; }
.gc-table-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--border-primary);
}
.gc-table-list li:last-child { border-bottom: 0; }
.gc-table-name { font-weight: 700; }
.gc-back { text-align: center; padding-top: 4px; }
.gc-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === ハブタイル (新 3 種) ======================================
   crash / mines / gacha は元々アイコン色のみで chip 背景が無く、
   default の cyan radial に落ちていた。各ゲーム色の radial を当てる。 */
.gamble-tile--crash .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,77,109,0.28), rgba(255,77,109,0.06));
  color: #ff4d6d;
}
.gamble-tile--crash:hover {
  border-color: rgba(255,77,109,0.6);
  box-shadow: 0 8px 24px rgba(255,77,109,0.18);
}
.gamble-tile--mines .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,185,71,0.30), rgba(255,185,71,0.06));
  color: #ffb947;
}
.gamble-tile--mines:hover {
  border-color: rgba(255,185,71,0.6);
  box-shadow: 0 8px 24px rgba(255,185,71,0.20);
}
.gamble-tile--gacha .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.32), rgba(255,215,0,0.06));
  color: #ffd700;
}
.gamble-tile--gacha:hover {
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 8px 24px rgba(255,215,0,0.22);
}

/* === ライトモード: chip 背景を濃いめにしてカラフルに ============
   ダーク用の rgba 0.06〜0.32 は白背景ではほぼ無色に見えるため、
   ライトでは pastel solid (HSL の高明度) に置換して識別性を確保。 */
body.theme-light .gamble-tile--lottery   .gamble-tile-icon { background: #d4f5e6; color: #008557; }
body.theme-light .gamble-tile--numguess  .gamble-tile-icon { background: #ffe0e6; color: #e63756; }
body.theme-light .gamble-tile--slot      .gamble-tile-icon { background: #ffe6ce; color: #e6841f; }
body.theme-light .gamble-tile--highlow   .gamble-tile-icon { background: #d9efff; color: #1481cf; }
body.theme-light .gamble-tile--chinchiro .gamble-tile-icon { background: #fff2c8; color: #c79100; }
body.theme-light .gamble-tile--crash     .gamble-tile-icon { background: #ffe0e6; color: #e63756; }
body.theme-light .gamble-tile--mines     .gamble-tile-icon { background: #fff0d4; color: #d68900; }
body.theme-light .gamble-tile--gacha     .gamble-tile-icon { background: #fff6c4; color: #b8941a; }
body.theme-light .gamble-tile--russian   .gamble-tile-icon { background: #ffd9d9; color: #a01010; }
body.theme-light .gamble-tile--scratch   .gamble-tile-icon { background: #fff0d4; color: #d68900; }
body.theme-light .gamble-tile--rps       .gamble-tile-icon { background: #d9efff; color: #1481cf; }
body.theme-light .gamble-tile--stopwatch .gamble-tile-icon { background: #d2f5e3; color: #009957; }

/* ================================================================
 * §155. 博打 バッチ1 (Russian / Scratch / RPS / Stopwatch)
 * ================================================================ */

/* === ロシアンルーレット ====================================== */
.ru { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.ru-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.ru-head > i { color: #c41818; font-size: 1.6rem; margin-top: 2px; }
.ru-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.ru-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.ru-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.ru-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.ru-status-row span:first-child { color: var(--text-secondary); font-size: 0.88rem; }
.ru-status-row strong { color: #ff3a3a; font-size: 1.15rem; }
.ru-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
/* リボルバー: 撃鉄ピン + 回転する円形弾倉 */
.ru-gun { position: relative; width: 200px; height: 218px; display: flex; align-items: flex-end; justify-content: center; }
.ru-pin {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid #cfd3dc; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); z-index: 3;
}
.ru-pin.is-flash { animation: ru-pin .18s ease; }
@keyframes ru-pin { 0% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(9px); } 100% { transform: translateX(-50%) translateY(0); } }
.ru-cylinder {
  position: relative; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #34343e, #16161c 70%);
  border: 6px solid #3c3c46;
  box-shadow: inset 0 0 28px rgba(0,0,0,.7), 0 8px 26px rgba(0,0,0,.55);
  transition: transform .9s cubic-bezier(.18,.85,.15,1);
}
.ru-cylinder.is-hit { animation: ru-shake .12s linear 5; }
.ru-hub { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: radial-gradient(circle, #4a4a56, #23232b); box-shadow: inset 0 0 6px rgba(0,0,0,.8); }
.ru-chamber {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #15151b, #050507); border: 2px solid #54545e;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.9);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.ru-chamber[data-idx="0"] { transform: translate(-50%,-50%) rotate(0deg)   translateY(-60px); }
.ru-chamber[data-idx="1"] { transform: translate(-50%,-50%) rotate(60deg)  translateY(-60px); }
.ru-chamber[data-idx="2"] { transform: translate(-50%,-50%) rotate(120deg) translateY(-60px); }
.ru-chamber[data-idx="3"] { transform: translate(-50%,-50%) rotate(180deg) translateY(-60px); }
.ru-chamber[data-idx="4"] { transform: translate(-50%,-50%) rotate(240deg) translateY(-60px); }
.ru-chamber[data-idx="5"] { transform: translate(-50%,-50%) rotate(300deg) translateY(-60px); }
.ru-chamber.is-fired   { background: radial-gradient(circle at 40% 35%, #5a5a64, #2c2c34); border-color: #8a8a96; }
.ru-chamber.is-survived{ background: radial-gradient(circle at 40% 35%, #00f59a, #009d5a); border-color: #00d97e; box-shadow: 0 0 14px rgba(0,217,126,.6); }
.ru-chamber.is-bullet  { background: radial-gradient(circle at 40% 35%, #ff5a5a, #c41818); border-color: #ff3a3a; box-shadow: 0 0 22px rgba(255,58,58,.85); }
@keyframes ru-shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-5px, 2px); }
  75% { transform: translate(5px, -2px); }
}
@media (prefers-reduced-motion: reduce) { .ru-cylinder { transition: none; } .ru-cylinder.is-hit, .ru-pin.is-flash { animation: none; } }
.ru-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.ru-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.ru-bet-form label span { font-size: 0.82rem; color: var(--text-secondary); }
.ru-bet-form input[type=number],
.ru-bet-form select {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 130px;
}
.ru-btn {
  padding: 12px 28px; border-radius: 10px; border: 0;
  background: linear-gradient(135deg, #ff3a3a, #c41818);
  color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(196,24,24,0.4);
}
.ru-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ru-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ru-msg { text-align: center; padding: 10px; border-radius: 8px; }
.ru-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.ru-msg.is-ok { background: rgba(0,217,126,0.15); color: #00d97e; }
.ru-back { text-align: center; padding-top: 4px; }
.ru-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === スクラッチ ============================================== */
.sc { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.sc-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.sc-head > i { color: #ffb947; font-size: 1.6rem; margin-top: 2px; }
.sc-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.sc-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.sc-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.sc-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.sc-status-row span:first-child { color: var(--text-secondary); font-size: 0.88rem; }
.sc-status-row strong { color: #ffb947; font-size: 1.15rem; }
.sc-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.sc-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.sc-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.sc-bet-form label span { font-size: 0.82rem; color: var(--text-secondary); }
.sc-bet-form input[type=number] {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 110px;
}
.sc-btn {
  padding: 12px 28px; border-radius: 10px; border: 0;
  background: linear-gradient(135deg, #ffb947, #ff4d6d);
  color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer;
}
.sc-btn:hover:not(:disabled) { transform: translateY(-1px); }
.sc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%; max-width: 320px; aspect-ratio: 1 / 1;
}
.sc-cell {
  position: relative; overflow: hidden;
  background: #14171d;
  border: 1px solid rgba(255,185,71,0.25);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.sc-cell-sym { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 0 9px currentColor) drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.sc-cell-foil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: grab; border-radius: 8px;
}
.sc-cell-foil:active { cursor: grabbing; }
.sc-cell.is-revealed { background: #1a1d23; }
.sc-cell.is-revealed .sc-cell-sym { animation: sc-pop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes sc-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.sc-cell.is-win { animation: sc-blink 0.6s ease-in-out 3; }
@keyframes sc-blink {
  0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
  50%      { box-shadow: 0 0 18px rgba(255,215,0,0.7); }
}
.sc-sym-pink   { background: #ff6a8a !important; }
.sc-sym-yellow { background: #ffd700 !important; color: #1a1a1a; }
.sc-sym-blue   { background: #5fa8ff !important; }
.sc-sym-orange { background: #ff9f43 !important; }
.sc-sym-purple { background: #c43cf0 !important; }
.sc-sym-red    { background: #ff3a3a !important; }
.sc-color-pink   { color: #ff6a8a; }
.sc-color-yellow { color: #ffd700; }
.sc-color-blue   { color: #5fa8ff; }
.sc-color-orange { color: #ff9f43; }
.sc-color-purple { color: #c43cf0; }
.sc-color-red    { color: #ff3a3a; }
/* 「のこりをめくって結果を見る」: 全面ゴシゴシ不要のショートカット */
.sc-reveal-all {
  align-self: center; margin-top: 2px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-size: .9rem; font-weight: 800;
  background: rgba(255,185,71,.14); color: #ffce6b;
  border: 1px solid rgba(255,185,71,.45);
  transition: transform .12s ease, background .15s ease;
}
.sc-reveal-all i { margin-right: 5px; }
.sc-reveal-all:hover { background: rgba(255,185,71,.22); }
.sc-reveal-all:active { transform: scale(.96); }
body.theme-light .sc-reveal-all { background: rgba(200,150,40,.12); color: #b45309; border-color: rgba(200,150,40,.4); }
.sc-msg { text-align: center; padding: 10px; border-radius: 8px; }
.sc-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.sc-msg.is-ok { background: rgba(0,217,126,0.15); color: #00d97e; }
.sc-back { text-align: center; padding-top: 4px; }
.sc-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === じゃんけん ============================================== */
.jk { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.jk-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.jk-head > i { color: #1d9bf0; font-size: 1.6rem; margin-top: 2px; }
.jk-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.jk-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.jk-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.jk-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.jk-status-row span:first-child { color: var(--text-secondary); font-size: 0.88rem; }
.jk-status-row strong { color: #1d9bf0; font-size: 1.15rem; }
.jk-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.jk-hands { display: flex; gap: 24px; align-items: center; justify-content: center; padding: 18px; }
.jk-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.jk-hand-label { font-size: 0.85rem; color: var(--text-secondary); }
.jk-hand-icon {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(29,155,240,0.18), rgba(0,0,0,0.4));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: #1d9bf0;
}
/* ライトテーマ: 暗い径グラデのままだと白カード上で「黒い円」になり浮くので
   明るい青系の淡グラデへ差し替える。 */
body.theme-light .jk-hand-icon {
  background: radial-gradient(circle, rgba(29,155,240,0.16), rgba(29,155,240,0.04));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.jk-vs { font-size: 1.5rem; font-weight: 900; color: #c43cf0; }
.jk-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.jk-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.jk-bet-form label span { font-size: 0.82rem; color: var(--text-secondary); }
.jk-bet-form input[type=number] {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 110px;
}
.jk-choice-row { display: flex; gap: 10px; }
.jk-choice {
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-primary);
  background: var(--bg-card); color: var(--text-primary);
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.jk-choice:hover:not(:disabled) { background: var(--bg-hover); border-color: #1d9bf0; }
.jk-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.jk-msg { text-align: center; padding: 10px; border-radius: 8px; }
.jk-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.jk-msg.is-ok { background: rgba(0,217,126,0.15); color: #00d97e; }
.jk-msg.is-info { background: rgba(29,155,240,0.12); color: #1d9bf0; }
.jk-back { text-align: center; padding-top: 4px; }
.jk-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === ストップウォッチ ======================================== */
.sw { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.sw-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 0; }
.sw-head > i { color: #00d97e; font-size: 1.6rem; margin-top: 2px; }
.sw-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.sw-head p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.sw-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px; }
.sw-status-row { display: flex; justify-content: space-between; padding: 4px 0; }
.sw-status-row span:first-child { color: var(--text-secondary); font-size: 0.88rem; }
.sw-status-row strong { color: #00d97e; font-size: 1.15rem; }
.sw-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.sw-display {
  width: 100%; min-height: 160px;
  background: radial-gradient(circle at 50% 30%, rgba(0,217,126,0.18), rgba(0,0,0,0.4));
  border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sw-counter {
  font-family: 'Courier New', monospace;
  font-size: 4rem; font-weight: 900;
  color: #00d97e; text-shadow: 0 0 12px rgba(0,217,126,0.55);
}
.sw-status-text { color: var(--text-secondary); margin-top: 8px; font-size: 0.95rem; }
.sw-bet-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.sw-bet-form label { display: flex; flex-direction: column; gap: 4px; }
.sw-bet-form label span { font-size: 0.82rem; color: var(--text-secondary); }
.sw-bet-form input[type=number] {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-size: 1rem; width: 110px;
}
.sw-btn {
  padding: 12px 28px; border-radius: 10px; border: 0;
  font-weight: 800; font-size: 1.05rem; cursor: pointer; min-width: 140px;
}
.sw-btn-start { background: linear-gradient(135deg, #00d97e, #1d9bf0); color: #fff; }
.sw-btn-stop  { background: linear-gradient(135deg, #ff4d6d, #c43cf0); color: #fff; }
.sw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sw-msg { text-align: center; padding: 10px; border-radius: 8px; }
.sw-msg.is-err { background: rgba(255,58,58,0.14); color: #ff5a5a; }
.sw-msg.is-ok { background: rgba(0,217,126,0.15); color: #00d97e; }
.sw-msg.is-info { background: rgba(29,155,240,0.12); color: #1d9bf0; }
.sw-back { text-align: center; padding-top: 4px; }
.sw-back a { color: var(--text-secondary); font-size: 0.88rem; }

/* === ハブタイル (バッチ1 4 種) ================================
   ダークモードの chip 背景もここで付ける (元はアイコン色のみで
   デフォの cyan radial 落ちだったため、識別性が弱かった)。 */
.gamble-tile--russian .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(196,24,24,0.30), rgba(196,24,24,0.06));
  color: #c41818;
}
.gamble-tile--russian:hover {
  border-color: rgba(196,24,24,0.6);
  box-shadow: 0 8px 24px rgba(196,24,24,0.20);
}
.gamble-tile--scratch .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,185,71,0.30), rgba(255,185,71,0.06));
  color: #ffb947;
}
.gamble-tile--scratch:hover {
  border-color: rgba(255,185,71,0.6);
  box-shadow: 0 8px 24px rgba(255,185,71,0.20);
}
.gamble-tile--rps .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(29,155,240,0.32), rgba(29,155,240,0.06));
  color: #1d9bf0;
}
.gamble-tile--rps:hover {
  border-color: rgba(29,155,240,0.6);
  box-shadow: 0 8px 24px rgba(29,155,240,0.20);
}
.gamble-tile--stopwatch .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(0,217,126,0.30), rgba(0,217,126,0.06));
  color: #00d97e;
}
.gamble-tile--stopwatch:hover {
  border-color: rgba(0,217,126,0.6);
  box-shadow: 0 8px 24px rgba(0,217,126,0.20);
}

/* けしマス (対人 2 人対戦盤、紫系) */
.gamble-tile--kesimasu .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(155,109,255,0.28), rgba(155,109,255,0.06));
  color: #9b6dff;
}
.gamble-tile--kesimasu:hover {
  border-color: rgba(155,109,255,0.6);
  box-shadow: 0 8px 24px rgba(155,109,255,0.20);
}


/* ================================================================
 * §156. 博打ゲーム結果メッセージ/ベットフォーム統一レイアウト
 *   (ユーザ要望: 「ハズレ/あたりの表示で 回す などが改行される」)
 *
 * 方針:
 *   1. 結果メッセージ (.xx-result / .xx-msg) を 1 行コンパクト pill に
 *      畳む。padding/font-size を下げ、white-space: nowrap で改行禁止、
 *      max-width 100% / overflow ellipsis で長文も安全。
 *   2. ベットフォームの input + ボタン (回す/止める/cashout 等) は
 *      flex-wrap: nowrap で同じ行に張り付け、結果に押し下げられない。
 *   3. 既存ゲーム固有の色 (is-win 緑/is-jackpot 金/is-lose 灰) は維持。
 *   4. JACKPOT 時の「TL で自慢する」ボタンだけは下の段に置く。
 * ================================================================ */
.sl-result,
.ch-result,
.ch-msg,
.sl-msg,
.hl-msg,
.cr-msg,
.mi-msg,
.ru-msg,
.gc-msg,
.sc-msg,
.rp-msg,
.jk-msg,
.sw-msg,
.ng-msg {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 7px 16px !important;
  font-size: 0.92rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 6px auto !important;
}
.sl-result-headline,
.sl-result-money {
  display: inline !important;
  margin: 0 !important;
}
.sl-result-headline { font-size: 0.86rem; }
.sl-result-money strong { font-size: 1.04rem; margin-right: 2px; }
.sl-result-money small { font-size: 0.76rem; opacity: 0.78; margin-left: 2px; }

/* chinchiro / その他 <br> による改行を視覚的に消す (ピル化のため) */
.ch-result br,
.sl-result br { display: none; }

/* JACKPOT の自慢ボタンは別段に */
.sl-brag-btn {
  display: block !important;
  margin: 8px auto 0 !important;
  font-size: 0.84rem;
  padding: 6px 14px !important;
}

/* ベットフォーム全種: input + ボタンが同じ行に並ぶように */
.sl-bet-form,
.ch-bet-form,
.hl-bet-form,
.cr-bet-form,
.mi-start-form,
.ru-bet-form,
.gc-bet-form,
.sc-bet-form,
.jk-bet-form,
.sw-bet-form,
.ng-bet-form,
#crForm,
#miStartForm,
#swForm {
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* 480px 以下の極狭スマホは label を 1 行に畳む方が破綻しないので、
   その時だけ wrap を許可するが、ピル (結果) は別段にして
   ボタンと同じ行に粘らせる */
@media (max-width: 480px) {
  .sl-bet-form label,
  .ch-bet-form label,
  .hl-bet-form label,
  .cr-bet-form label,
  .gc-bet-form label,
  .sc-bet-form label,
  .jk-bet-form label,
  .sw-bet-form label {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
}

/* ----------------------------------------------------------------
 * スマホ (≤480px) の複数コントロール ベットフォーム崩れ対策。
 * ロシアンルーレット / マインスイーパは [select][input][ボタン] の 3 要素を
 * 持ち、上の global ルール (.X-bet-form { flex-wrap:nowrap !important }) のせいで
 * 375px 幅では 1 行に収まらず横はみ出し or 不自然な改行になっていた。
 * スマホでは wrap を許可し、ラベルを縦積みの 2 列、ボタンを単独行・全幅にする。
 * (数当て .ng-bet-form は display:grid なので元から崩れない → 対象外)
 * ---------------------------------------------------------------- */
@media (max-width: 480px) {
  #ruForm.ru-bet-form, #miStartForm.mi-start-form,
  body:has(.gm-topbar) #ruForm.ru-bet-form,
  body:has(.gm-topbar) #miStartForm.mi-start-form {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    row-gap: 12px !important;
  }
  .ru-bet-form > label, .mi-start-form > label {
    flex: 1 1 130px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0;
  }
  .ru-bet-form select, .mi-start-form select,
  .ru-bet-form input[type=number], .mi-start-form input[type=number] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .ru-bet-form > button, .mi-start-form > button {
    flex: 1 0 100% !important;
    width: 100%;
  }

  /* じゃんけん グー/チョキ/パー: 3 ボタンを折り返し可 + 均等伸縮で 375px に収める */
  .jk-choice-row { flex-wrap: wrap; }
  .jk-choice { flex: 1 1 28%; min-width: 0; padding: 10px 8px; }

  /* ハイ&ロー HIGH/LOW: 極狭幅でも 2 つ並べて収まるよう均等伸縮にする */
  .hl-guess-btn { min-width: 0 !important; flex: 1 1 0 !important; }
}

/* ================================================================
 * §157. 博打 ゲーム本体ページの説明テキスト削減
 *   (ユーザ要望: 「ガイドを開かなくても書いてある説明文を減らしたい。
 *    ルールはガイドに、ゲームページは直感的な UI のみに」)
 *
 * 方針:
 *   - タイトル下のタグライン (xx-head > p) は非表示
 *   - 状態カードの長い注釈 (.muted) は非表示
 *   - 配当表 (xx-table) は ? モーダルにあるので非表示
 *   - ヘルプ "?" ボタンをグラデ + パルスで目立たせ、「遊び方」ラベルを下に
 *   - 状態の数値 (ブースト / ベット上限) は体感に必要なので残す
 * ================================================================ */

/* (1) タイトル下のタグライン (1 行説明) を非表示 */
.ch-head > p,
.hl-head > p,
.sl-head > p,
.cr-head > p,
.mi-head > p,
.gc-head > p,
.ru-head > p,
.sc-head > p,
.jk-head > p,
.rp-head > p,
.sw-head > p,
.ng-head > p {
  display: none !important;
}

/* (2) 状態カード内の長文注釈 (.muted) と hint を非表示 */
.sl-card.sl-status > p.muted,
.ch-card.ch-status > p.muted,
.hl-card.hl-status > p.muted,
.cr-card.cr-status > p.muted,
.mi-card.mi-status > p.muted,
.gc-card.gc-status > p.muted,
.ru-card.ru-status > p.muted,
.sc-card.sc-status > p.muted,
.jk-card.jk-status > p.muted,
.rp-card.rp-status > p.muted,
.sw-card.sw-status > p.muted,
.ng-card.ng-status > p.muted,
.ng-status-hint {
  display: none !important;
}

/* (3) 配当表/ルール表は ? モーダル側に同等内容があるので非表示 */
.sl-card.sl-table,
.ch-card.ch-table,
.hl-card.hl-table,
.cr-card.cr-table,
.mi-card.mi-table,
.gc-card.gc-table,
.ru-card.ru-table,
.sc-card.sc-table,
.jk-card.jk-table,
.rp-card.rp-table,
.sw-card.sw-table,
.ng-card.ng-table,
section.sl-table,
section.ch-table,
section.hl-table,
section.cr-table,
section.mi-table,
section.gc-table,
section.ru-table,
section.sc-table,
section.jk-table,
section.rp-table,
section.sw-table,
section.ng-table {
  display: none !important;
}
/* 注意: 以前ここに bare `.hl-table` があったが、ハイ&ローでは `.hl-table` は
   配当表ではなく「カードを並べる場」(<div class="hl-table" id="hlTable">) の
   クラスなので、それを display:none にすると札が丸ごと消える (= 札が出ない
   主因だった)。HighLow に配当表セクションは無いので bare 指定ごと削除。 */

/* (4) ヘルプ ? ボタンをグラデ円形 + パルスで誘導 + 「遊び方」サブラベル */
.gm-help-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: linear-gradient(135deg, #06b6d4, #a855f7) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  position: relative;
  animation: gm-help-pulse 2.4s ease-in-out infinite;
}
.gm-help-btn::after {
  content: '遊び方';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--accent-cyan, #06b6d4);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.9;
}
.gm-help-btn:hover { transform: translateY(-1px); }
@keyframes gm-help-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35); }
  50%      { box-shadow: 0 4px 22px rgba(6, 182, 212, 0.55), 0 0 0 6px rgba(168, 85, 247, 0.10); }
}

/* (5) ヘッダ全体: タイトル + ?ボタン を中央寄せのシンプル構成に */
.ch-head, .hl-head, .sl-head, .cr-head, .mi-head, .gc-head,
.ru-head, .sc-head, .jk-head, .rp-head, .sw-head, .ng-head {
  align-items: center !important;
  padding-bottom: 18px !important;
}
.ch-head h2, .hl-head h2, .sl-head h2, .cr-head h2, .mi-head h2,
.gc-head h2, .ru-head h2, .sc-head h2, .jk-head h2, .rp-head h2,
.sw-head h2, .ng-head h2 {
  margin: 0 !important;
}

/* ================================================================
 * §158. 博打 ゲームページ フルスクリーン化 (スマホ最適)
 *   (ユーザ要望: 上下メニューを消す + スクロール無し + 直感的)
 *
 * - 12 ゲーム wrapper (.sl/.ch/.cr 等) が body の中にあれば
 *   :has() で chrome (mobile-header / bottom-nav / col-aside / sidebar)
 *   を非表示。col-main を 100dvh フルスクリーンに
 * - 「← 博打ハブに戻る」を右上 × 円ボタンに昇格 (片手で押せる)
 * - ? ヘルプボタンも右上固定で chrome 並みに常駐 (片手で開ける)
 * - ゲーム本体は flex で縦中央寄せ、padding 詰めて 1 画面に収める
 * ================================================================ */

/* (a) gamble モード判定 → chrome 非表示 */
body:has(.sl), body:has(.ch), body:has(.cr), body:has(.mi),
body:has(.gc), body:has(.ru), body:has(.sc), body:has(.jk),
body:has(.sw), body:has(.hl), body:has(.ng), body:has(.lot) {
  /* 完全に画面を固定 (Pull-to-refresh / バウンス / スクロール全停止) */
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-x pinch-zoom !important; /* 縦スワイプ無効化、横スワイプは入力で必要 */
}
html:has(body :is(.sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot)) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  height: 100% !important;
}
/* layout-3col も viewport 高に制限 (col-main が overflow 起こさないよう) */
body:has(.sl) .layout-3col, body:has(.ch) .layout-3col,
body:has(.cr) .layout-3col, body:has(.mi) .layout-3col,
body:has(.gc) .layout-3col, body:has(.ru) .layout-3col,
body:has(.sc) .layout-3col, body:has(.jk) .layout-3col,
body:has(.sw) .layout-3col, body:has(.hl) .layout-3col,
body:has(.ng) .layout-3col, body:has(.lot) .layout-3col {
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
body:has(.sl) .mobile-header, body:has(.ch) .mobile-header,
body:has(.cr) .mobile-header, body:has(.mi) .mobile-header,
body:has(.gc) .mobile-header, body:has(.ru) .mobile-header,
body:has(.sc) .mobile-header, body:has(.jk) .mobile-header,
body:has(.sw) .mobile-header, body:has(.hl) .mobile-header,
body:has(.ng) .mobile-header, body:has(.lot) .mobile-header,
body:has(.sl) .bottom-nav, body:has(.ch) .bottom-nav,
body:has(.cr) .bottom-nav, body:has(.mi) .bottom-nav,
body:has(.gc) .bottom-nav, body:has(.ru) .bottom-nav,
body:has(.sc) .bottom-nav, body:has(.jk) .bottom-nav,
body:has(.sw) .bottom-nav, body:has(.hl) .bottom-nav,
body:has(.ng) .bottom-nav, body:has(.lot) .bottom-nav,
body:has(.sl) .col-main-header, body:has(.ch) .col-main-header,
body:has(.cr) .col-main-header, body:has(.mi) .col-main-header,
body:has(.gc) .col-main-header, body:has(.ru) .col-main-header,
body:has(.sc) .col-main-header, body:has(.jk) .col-main-header,
body:has(.sw) .col-main-header, body:has(.hl) .col-main-header,
body:has(.ng) .col-main-header, body:has(.lot) .col-main-header {
  display: none !important;
}

/* スマホでは sidebar / aside も消す */
@media (max-width: 1023px) {
  body:has(.sl) .col-aside, body:has(.ch) .col-aside,
  body:has(.cr) .col-aside, body:has(.mi) .col-aside,
  body:has(.gc) .col-aside, body:has(.ru) .col-aside,
  body:has(.sc) .col-aside, body:has(.jk) .col-aside,
  body:has(.sw) .col-aside, body:has(.hl) .col-aside,
  body:has(.ng) .col-aside, body:has(.lot) .col-aside,
  body:has(.sl) .sidebar-nav, body:has(.ch) .sidebar-nav,
  body:has(.cr) .sidebar-nav, body:has(.mi) .sidebar-nav,
  body:has(.gc) .sidebar-nav, body:has(.ru) .sidebar-nav,
  body:has(.sc) .sidebar-nav, body:has(.jk) .sidebar-nav,
  body:has(.sw) .sidebar-nav, body:has(.hl) .sidebar-nav,
  body:has(.ng) .sidebar-nav, body:has(.lot) .sidebar-nav {
    display: none !important;
  }
}

/* (b) col-main を 100dvh フルスクリーンシェルに */
body:has(.sl) .col-main, body:has(.ch) .col-main,
body:has(.cr) .col-main, body:has(.mi) .col-main,
body:has(.gc) .col-main, body:has(.ru) .col-main,
body:has(.sc) .col-main, body:has(.jk) .col-main,
body:has(.sw) .col-main, body:has(.hl) .col-main,
body:has(.ng) .col-main, body:has(.lot) .col-main {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  height: 100svh !important;
  height: 100dvh !important;
}
/* .wb-wrap を 100dvh の flex column に。残高バーは auto-height で
   上に置き、その下にゲーム本体 (.sl 等) が flex:1 で残り全部を使う。
   こうすると total height = ちょうど 100dvh で overflow しない。 */
body:has(.sl) .wb-wrap, body:has(.ch) .wb-wrap,
body:has(.cr) .wb-wrap, body:has(.mi) .wb-wrap,
body:has(.gc) .wb-wrap, body:has(.ru) .wb-wrap,
body:has(.sc) .wb-wrap, body:has(.jk) .wb-wrap,
body:has(.sw) .wb-wrap, body:has(.hl) .wb-wrap,
body:has(.ng) .wb-wrap, body:has(.lot) .wb-wrap {
  height: 100svh;
  height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
/* 残高バー: 上部に auto-height で、safe-area + 小 padding。
   ? と × はその下端あたりに浮く (position:fixed) */
body:has(.sl) .wb-balance-mini, body:has(.ch) .wb-balance-mini,
body:has(.cr) .wb-balance-mini, body:has(.mi) .wb-balance-mini,
body:has(.gc) .wb-balance-mini, body:has(.ru) .wb-balance-mini,
body:has(.sc) .wb-balance-mini, body:has(.jk) .wb-balance-mini,
body:has(.sw) .wb-balance-mini, body:has(.hl) .wb-balance-mini,
body:has(.ng) .wb-balance-mini, body:has(.lot) .wb-balance-mini {
  flex: 0 0 auto;
  margin: calc(env(safe-area-inset-top) + 8px) 12px 0 !important;
}
.sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
  position: relative;
  overflow: hidden;
}

/* (c) 「博打ハブに戻る」を右上 × 円ボタンに昇格 */
.sl-back, .ch-back, .cr-back, .mi-back, .gc-back, .ru-back,
.sc-back, .jk-back, .rp-back, .sw-back, .hl-back, .ng-back, .lot-back {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 10px) !important;
  right: 10px !important;
  z-index: 1000;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
.sl-back a, .ch-back a, .cr-back a, .mi-back a, .gc-back a, .ru-back a,
.sc-back a, .jk-back a, .rp-back a, .sw-back a, .hl-back a, .ng-back a, .lot-back a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  font-size: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}
body.theme-light .sl-back a, body.theme-light .ch-back a,
body.theme-light .cr-back a, body.theme-light .mi-back a,
body.theme-light .gc-back a, body.theme-light .ru-back a,
body.theme-light .sc-back a, body.theme-light .jk-back a,
body.theme-light .rp-back a, body.theme-light .sw-back a,
body.theme-light .hl-back a, body.theme-light .ng-back a,
body.theme-light .lot-back a {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.sl-back a::before, .ch-back a::before, .cr-back a::before, .mi-back a::before,
.gc-back a::before, .ru-back a::before, .sc-back a::before, .jk-back a::before,
.rp-back a::before, .sw-back a::before, .hl-back a::before, .ng-back a::before,
.lot-back a::before {
  content: '\00d7';
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.sl-back a:active, .ch-back a:active, .cr-back a:active, .mi-back a:active,
.gc-back a:active, .ru-back a:active, .sc-back a:active, .jk-back a:active,
.rp-back a:active, .sw-back a:active, .hl-back a:active, .ng-back a:active,
.lot-back a:active { transform: scale(0.92); }

/* (d) ? ヘルプボタンを右上固定で × の隣に */
body:has(.sl) .gm-help-btn, body:has(.ch) .gm-help-btn,
body:has(.cr) .gm-help-btn, body:has(.mi) .gm-help-btn,
body:has(.gc) .gm-help-btn, body:has(.ru) .gm-help-btn,
body:has(.sc) .gm-help-btn, body:has(.jk) .gm-help-btn,
body:has(.sw) .gm-help-btn, body:has(.hl) .gm-help-btn,
body:has(.ng) .gm-help-btn, body:has(.lot) .gm-help-btn {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 10px) !important;
  right: 58px !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 1000;
  animation: gm-help-pulse 2.4s ease-in-out infinite;
}
/* 右上固定モードでは下の「遊び方」ラベルは消す (場所が狭い) */
body:has(.sl) .gm-help-btn::after, body:has(.ch) .gm-help-btn::after,
body:has(.cr) .gm-help-btn::after, body:has(.mi) .gm-help-btn::after,
body:has(.gc) .gm-help-btn::after, body:has(.ru) .gm-help-btn::after,
body:has(.sc) .gm-help-btn::after, body:has(.jk) .gm-help-btn::after,
body:has(.sw) .gm-help-btn::after, body:has(.hl) .gm-help-btn::after,
body:has(.ng) .gm-help-btn::after, body:has(.lot) .gm-help-btn::after {
  display: none;
}

/* (e) ヘッダのタイトルだけ残してコンパクト化 */
body:has(.sl) .sl-head, body:has(.ch) .ch-head,
body:has(.cr) .cr-head, body:has(.mi) .mi-head,
body:has(.gc) .gc-head, body:has(.ru) .ru-head,
body:has(.sc) .sc-head, body:has(.jk) .jk-head,
body:has(.sw) .sw-head, body:has(.hl) .hl-head,
body:has(.ng) .ng-head {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* (f) ゲーム内カードの padding を詰めて 1 画面に収める */
.sl-card, .ch-card, .hl-card, .cr-card, .mi-card, .gc-card,
.ru-card, .sc-card, .jk-card, .rp-card, .sw-card, .ng-card {
  padding: 8px !important;
  margin: 0 !important;
}

/* ----- 余白圧縮 (ユーザ要望: 1 画面に収めたい) ----- */
.sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot {
  gap: 6px !important;
  /* .wb-wrap が 100dvh の flex column に変わったので、ここでの padding は最小限 */
  padding-top: 6px !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 6px) !important;
}

/* スマホでは状態カード (ブースト + ベット上限) を非表示 (情報はモーダル側) */
@media (max-width: 768px) {
  body:has(.sl) .sl-status,
  body:has(.ch) .ch-status,
  body:has(.cr) .cr-status,
  body:has(.mi) .mi-status,
  body:has(.gc) .gc-status,
  body:has(.ru) .ru-status,
  body:has(.sc) .sc-status,
  body:has(.jk) .jk-status,
  body:has(.sw) .sw-status,
  body:has(.hl) .hl-status,
  body:has(.ng) .ng-status {
    display: none !important;
  }
  /* ヘッダのタイトルもスマホでは非表示 (画面節約)。? と × だけで充分 */
  body:has(.sl) .sl-head,
  body:has(.ch) .ch-head,
  body:has(.cr) .cr-head,
  body:has(.mi) .mi-head,
  body:has(.gc) .gc-head,
  body:has(.ru) .ru-head,
  body:has(.sc) .sc-head,
  body:has(.jk) .jk-head,
  body:has(.sw) .sw-head,
  body:has(.hl) .hl-head,
  body:has(.ng) .ng-head {
    display: none !important;
  }
  /* カードも限界まで詰める */
  .sl-card, .ch-card, .hl-card, .cr-card, .mi-card, .gc-card,
  .ru-card, .sc-card, .jk-card, .rp-card, .sw-card, .ng-card {
    padding: 6px !important;
    border-radius: 10px !important;
  }
  /* スマホ用: ゲームコンテナをさらに詰める */
  .sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot {
    gap: 4px !important;
    padding-top: 4px !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 4px) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ----- 各ゲーム固有: 余分な margin/padding を潰す ----- */
.sl-stage, .sl-machine,
.ch-stage, .ch-board,
.hl-stage, .cr-stage, .cr-graph,
.mi-stage, .mi-board,
.gc-stage, .gc-box,
.ru-stage, .ru-cylinder,
.sc-stage, .sc-board,
.jk-stage, .sw-stage {
  margin: 0 !important;
}

/* ----- 結果ピル: マージンも縮める ----- */
.sl-result, .ch-result, .ch-msg, .sl-msg,
.hl-msg, .cr-msg, .mi-msg, .ru-msg, .gc-msg,
.sc-msg, .rp-msg, .jk-msg, .sw-msg, .ng-msg {
  margin: 2px auto !important;
}

/* ----- ベットフォームの input/ボタンを少し小さく ----- */
@media (max-width: 768px) {
  .sl-bet-form input[type=number], .ch-bet-form input[type=number],
  .hl-bet-form input[type=number], .cr-bet-form input[type=number],
  .mi-start-form input[type=number], .gc-bet-form input[type=number],
  .ru-bet-form input[type=number], .sc-bet-form input[type=number],
  .jk-bet-form input[type=number], .sw-bet-form input[type=number],
  .ng-bet-form input[type=number] {
    padding: 8px 10px !important;
    font-size: 0.95rem !important;
    width: 90px !important;
  }
  .sl-spin-btn, .sl-stop-all-btn,
  .ch-roll-btn, .hl-draw-btn,
  .cr-btn-start, .cr-btn-cashout,
  .mi-btn-start, .mi-btn-cashout,
  .gc-btn, .ru-btn,
  .sc-btn, .rp-choice-btn,
  .sw-btn-start, .sw-btn-stop,
  .ng-bet-btn {
    padding: 10px 22px !important;
    font-size: 1rem !important;
  }
}

/* ================================================================
 * §159. 博打ゲーム共通トップバー (.gm-topbar — gamble-topbar.js が挿入)
 *   ユーザ要望: × は廃止、代わりに ← (戻る) + アイコン + ゲーム名 を
 *   表示する共通バーを作る。残高表示はそのバーのすぐ下に。
 * ================================================================ */
.gm-topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 10px;
  /* スマホゲームアプリ感: 深い藍紫のグラデ + 下端にネオン光 */
  background:
    linear-gradient(180deg, rgba(8,12,38,0.88) 0%, rgba(20,15,50,0.72) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35),
              0 1px 0 rgba(168,85,247,0.4) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  position: relative;
}
.gm-topbar::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, rgba(6,182,212,0.7), rgba(168,85,247,0.7), transparent);
}
body.theme-light .gm-topbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,245,255,0.85));
  border-bottom-color: rgba(0,0,0,0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

.gm-topbar-back {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  transition: background .14s ease, transform .12s, box-shadow .14s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
body.theme-light .gm-topbar-back {
  background: linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  border-color: rgba(0,0,0,0.10);
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.gm-topbar-back:hover {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 4px 12px rgba(6,182,212,0.30);
}
.gm-topbar-back:active { transform: scale(0.90); }

.gm-topbar-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.gm-topbar-title i {
  font-size: 1.25rem;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(6,182,212,0.22), rgba(168,85,247,0.22));
  border-radius: 10px;
  color: #06d4ff;
  text-shadow: 0 0 12px rgba(6,212,255,0.6);
}
body.theme-light .gm-topbar-title {
  color: #111;
  text-shadow: none;
}
body.theme-light .gm-topbar-title i {
  color: #0891b2;
  text-shadow: none;
  background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(168,85,247,0.15));
}

.gm-topbar-spacer { display: block; }

/* ----------- 残高バーをトップバー直下に密着させ、見た目をリッチに ----------- */
body:has(.gm-topbar) .wb-balance-mini {
  margin: 8px 12px 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(168,85,247,0.18)) !important;
  border: 1px solid rgba(6,182,212,0.30) !important;
  box-shadow: 0 6px 18px rgba(6,182,212,0.20),
              0 0 0 1px rgba(255,255,255,0.04) inset !important;
}
body.theme-light:has(.gm-topbar) .wb-balance-mini {
  /* ライトモードのゲームページ: 旧来は半透明 (0.10) で背景に溶けて
     白文字が見えなくなっていた。濃いめのグラデに揃えてコントラスト確保。
     hub 側 (theme-light .wb-balance-mini) と同色系で統一感も出す。 */
  background: linear-gradient(135deg,#3b30ad 0%,#1d6dd0 52%,#0e9aa7 100%) !important;
  border-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 6px 18px rgba(30,80,180,0.28) !important;
  color: #fff !important;
}
body.theme-light:has(.gm-topbar) .wb-balance-mini *,
body.theme-light:has(.gm-topbar) .wb-balance-mini .num,
body.theme-light:has(.gm-topbar) .wb-balance-mini .unit,
body.theme-light:has(.gm-topbar) .wb-balance-mini i {
  color: #fff !important;
}

/* ----------- ゲーム本体カードの背景も若干濃く・丸く ----------- */
body:has(.gm-topbar) .sl-card,
body:has(.gm-topbar) .ch-card,
body:has(.gm-topbar) .hl-card,
body:has(.gm-topbar) .cr-card,
body:has(.gm-topbar) .mi-card,
body:has(.gm-topbar) .gc-card,
body:has(.gm-topbar) .ru-card,
body:has(.gm-topbar) .sc-card,
body:has(.gm-topbar) .jk-card,
body:has(.gm-topbar) .rp-card,
body:has(.gm-topbar) .sw-card,
body:has(.gm-topbar) .ng-card,
body:has(.gm-topbar) .lot-card {
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(20,16,40,0.85), rgba(14,12,30,0.72)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32),
              0 0 0 1px rgba(255,255,255,0.03) inset !important;
}
body.theme-light:has(.gm-topbar) .sl-card,
body.theme-light:has(.gm-topbar) .ch-card,
body.theme-light:has(.gm-topbar) .hl-card,
body.theme-light:has(.gm-topbar) .cr-card,
body.theme-light:has(.gm-topbar) .mi-card,
body.theme-light:has(.gm-topbar) .gc-card,
body.theme-light:has(.gm-topbar) .ru-card,
body.theme-light:has(.gm-topbar) .sc-card,
body.theme-light:has(.gm-topbar) .jk-card,
body.theme-light:has(.gm-topbar) .rp-card,
body.theme-light:has(.gm-topbar) .sw-card,
body.theme-light:has(.gm-topbar) .ng-card,
body.theme-light:has(.gm-topbar) .lot-card {
  background: linear-gradient(180deg, #ffffff, #f8f9ff) !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06) !important;
}

/* (a) 既存 .xx-back (右上 × 円ボタン) は topbar の ← で代替されるので非表示 */
body:has(.sl) .sl-back, body:has(.ch) .ch-back,
body:has(.cr) .cr-back, body:has(.mi) .mi-back,
body:has(.gc) .gc-back, body:has(.ru) .ru-back,
body:has(.sc) .sc-back, body:has(.jk) .jk-back,
body:has(.sw) .sw-back, body:has(.hl) .hl-back,
body:has(.ng) .ng-back, body:has(.lot) .lot-back {
  display: none !important;
}

/* (b) ? ヘルプボタンを topbar の右側 (spacer 位置) に重ねる */
body:has(.sl) .gm-help-btn, body:has(.ch) .gm-help-btn,
body:has(.cr) .gm-help-btn, body:has(.mi) .gm-help-btn,
body:has(.gc) .gm-help-btn, body:has(.ru) .gm-help-btn,
body:has(.sc) .gm-help-btn, body:has(.jk) .gm-help-btn,
body:has(.sw) .gm-help-btn, body:has(.hl) .gm-help-btn,
body:has(.ng) .gm-help-btn, body:has(.lot) .gm-help-btn {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 8px) !important;
  right: 8px !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 11;
}

/* (c) 残高バーは topbar の真下に詰める (margin-top をリセット) */
body:has(.sl) .wb-balance-mini, body:has(.ch) .wb-balance-mini,
body:has(.cr) .wb-balance-mini, body:has(.mi) .wb-balance-mini,
body:has(.gc) .wb-balance-mini, body:has(.ru) .wb-balance-mini,
body:has(.sc) .wb-balance-mini, body:has(.jk) .wb-balance-mini,
body:has(.sw) .wb-balance-mini, body:has(.hl) .wb-balance-mini,
body:has(.ng) .wb-balance-mini, body:has(.lot) .wb-balance-mini {
  margin: 0 12px !important;
  flex: 0 0 auto;
}

/* (d) ゲーム本体は残り全部の中央寄せ (justify-content:center は既に当たっている) */
.sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* ================================================================
 * §160. くじ引き (.lot) は情報量が多いので、ゲーム本体内だけ
 *   スクロール可能にし、トップバー + 残高は固定。コンパクト化も同時に。
 * ================================================================ */
body:has(.lot) {
  /* 縦タッチを内側でだけ拾えるよう、body は manipulation に緩める */
  touch-action: manipulation !important;
}
body:has(.lot) .lot {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;       /* 上から積む */
  align-items: stretch !important;
  overflow-y: auto !important;                  /* ← 内部だけスクロール */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;      /* 親へバブルさせない */
  touch-action: pan-y pinch-zoom !important;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px) !important;
  gap: 8px !important;
}

/* lot のスクロールバーを最小化 (iOS は元々細い、Chrome 用) */
body:has(.lot) .lot::-webkit-scrollbar { width: 4px; }
body:has(.lot) .lot::-webkit-scrollbar-thumb {
  background: rgba(168,85,247,0.45);
  border-radius: 4px;
}

/* ----- lot 内部のコンパクト化 ----- */
body:has(.lot) .lot-hero {
  padding: 10px 12px !important;
}
body:has(.lot) .lot-hero .lot-hero-row {
  gap: 8px;
}
body:has(.lot) .lot-hero h2 {
  font-size: 1.05rem !important;
  margin: 0 0 2px !important;
}
body:has(.lot) .lot-hero p {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  opacity: 0.85;
}
body:has(.lot) .lot-hero-icon {
  font-size: 1.6rem !important;
  flex: 0 0 auto;
}
body:has(.lot) .lot-quota {
  gap: 8px !important;
  margin-top: 8px !important;
}
body:has(.lot) .lot-quota-it {
  padding: 6px 8px !important;
}

body:has(.lot) .lot-action {
  padding: 10px !important;
}
body:has(.lot) .lot-btn {
  padding: 12px 20px !important;
  font-size: 1rem !important;
}
body:has(.lot) .lot-note {
  font-size: 0.74rem !important;
  margin: 4px 0 0 !important;
  opacity: 0.75;
}

/* タイル grid (起こりうること) はそのまま見せる (ユーザ要望: 配当感は残す) */
body:has(.lot) .lot-grid {
  gap: 6px !important;
}
body:has(.lot) .lot-tile {
  padding: 8px 6px !important;
  border-radius: 10px !important;
}
body:has(.lot) .lot-tile .amt { font-size: 0.95rem !important; }
body:has(.lot) .lot-tile .lbl { font-size: 0.7rem !important; }
body:has(.lot) .lot-group-title {
  font-size: 0.78rem !important;
  margin: 8px 0 4px !important;
}
body:has(.lot) .lot-sub {
  font-size: 0.72rem !important;
  margin: 4px 0 !important;
  opacity: 0.75;
}
body:has(.lot) .lot-h {
  font-size: 0.95rem !important;
  margin: 0 0 4px !important;
}

/* スクロール終端のヒント (ふんわり下フェード) */
body:has(.lot) .lot::after {
  content: '';
  display: block;
  flex: 0 0 8px;
}

/* ================================================================
 * §161. ゲームトップバー右端の「ガイド」ボタン (.gm-topbar-guide)
 *   ユーザ要望: 上のバーの右端にガイドボタンを設置
 *   gamble-topbar.js が data-gm-open="gmHelpXX" 付きで挿入する。
 * ================================================================ */
.gm-topbar-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 212, 0.45);
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(168,85,247,0.18));
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: 0 2px 8px rgba(6,182,212,0.25),
              0 0 0 1px rgba(255,255,255,0.06) inset;
}
.gm-topbar-guide i {
  font-size: 0.95rem;
  color: #67e8f9;
  text-shadow: 0 0 6px rgba(103,232,249,0.7);
}
.gm-topbar-guide-lbl {
  /* スマホでは label を隠してアイコンだけ — 横幅節約 */
}
@media (max-width: 380px) {
  .gm-topbar-guide-lbl { display: none; }
  .gm-topbar-guide { padding: 8px 10px; }
}
.gm-topbar-guide:hover {
  background: linear-gradient(135deg, rgba(6,182,212,0.28), rgba(168,85,247,0.28));
  box-shadow: 0 4px 14px rgba(6,182,212,0.40),
              0 0 0 1px rgba(255,255,255,0.10) inset;
}
.gm-topbar-guide:active { transform: scale(0.94); }

body.theme-light .gm-topbar-guide {
  border-color: rgba(6, 182, 212, 0.45);
  background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(168,85,247,0.12));
  color: #0b3a6a;
  box-shadow: 0 2px 8px rgba(6,182,212,0.18);
}
body.theme-light .gm-topbar-guide i {
  color: #0891b2;
  text-shadow: none;
}

/* ----------- 元の page 内 ? ボタン (.gm-help-btn) はゲーム中は非表示 -----------
   トップバー右端の「ガイド」が同じモーダルを開く役目を引き継ぐ。 */
body:has(.gm-topbar) .gm-help-btn {
  display: none !important;
}

/* ================================================================
 * §162. 博打ゲーム共通の「大手スマホアプリ」風 polish
 *   ユーザ要望: もっと絵的・図形的に、ごちゃごちゃせず大手アプリのように。
 *
 * 方針:
 *   - body 全体に幾何学的 (ドット + radial グロー) な背景パターン
 *   - カードに深い 3D 影 + 内側ハイライト + 強めの角丸
 *   - ボタンは大型ピル + グラデ + リフトする hover/active
 *   - 余計な細字ラベルは小さく弱める ("ベット 1〜100 守" 等)
 *   - 数字 (倍率 / 残高 / 結果) は太く大きく
 *   - 入力欄も大型化 + 通貨アイコン付ヘッダ風
 * ================================================================ */

/* (a) ゲーム body に幾何学的背景 (radial グロー + 微細ドット)。
   モバイル (フルスクリーン化) 専用 — body 全体がゲーム領域だから OK。
   デスクトップ/iPad は body にサイドバーも含まれるので、グラデを当てると
   ユーザの設定テーマが全部塗り替わってしまう → 媒体クエリで分離する。 */
@media (max-width: 1023px) {
  body:has(.gm-topbar) {
    background:
      radial-gradient(circle at 20% -10%, rgba(168,85,247,0.32), transparent 55%),
      radial-gradient(circle at 100% 110%, rgba(6,182,212,0.30), transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(255,77,109,0.06), transparent 70%),
      linear-gradient(180deg, #060a1f 0%, #0a0a1a 100%) !important;
    background-attachment: fixed !important;
  }
  body:has(.gm-topbar)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.6;
  }
  body.theme-light:has(.gm-topbar) {
    background:
      radial-gradient(circle at 20% -10%, rgba(168,85,247,0.16), transparent 55%),
      radial-gradient(circle at 100% 110%, rgba(6,182,212,0.16), transparent 50%),
      linear-gradient(180deg, #f6f8ff 0%, #eef0ff 100%) !important;
    background-attachment: fixed !important;
  }
  body.theme-light:has(.gm-topbar)::before {
    background-image:
      radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
    opacity: 0.5;
  }
}

/* layout-3col を背景の上に乗せる */
body:has(.gm-topbar) .layout-3col,
body:has(.gm-topbar) .wb-wrap {
  position: relative;
  z-index: 1;
}

/* (b) ゲーム内カードを 3D 風に深く */
body:has(.gm-topbar) .sl-card,
body:has(.gm-topbar) .ch-card,
body:has(.gm-topbar) .hl-card,
body:has(.gm-topbar) .cr-card,
body:has(.gm-topbar) .mi-card,
body:has(.gm-topbar) .gc-card,
body:has(.gm-topbar) .ru-card,
body:has(.gm-topbar) .sc-card,
body:has(.gm-topbar) .jk-card,
body:has(.gm-topbar) .rp-card,
body:has(.gm-topbar) .sw-card,
body:has(.gm-topbar) .ng-card,
body:has(.gm-topbar) .lot-card {
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(30,24,60,0.78) 0%, rgba(16,14,32,0.62) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.10) inset !important;
}
body.theme-light:has(.gm-topbar) .sl-card,
body.theme-light:has(.gm-topbar) .ch-card,
body.theme-light:has(.gm-topbar) .hl-card,
body.theme-light:has(.gm-topbar) .cr-card,
body.theme-light:has(.gm-topbar) .mi-card,
body.theme-light:has(.gm-topbar) .gc-card,
body.theme-light:has(.gm-topbar) .ru-card,
body.theme-light:has(.gm-topbar) .sc-card,
body.theme-light:has(.gm-topbar) .jk-card,
body.theme-light:has(.gm-topbar) .rp-card,
body.theme-light:has(.gm-topbar) .sw-card,
body.theme-light:has(.gm-topbar) .ng-card,
body.theme-light:has(.gm-topbar) .lot-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow:
    0 12px 28px rgba(168,85,247,0.10),
    0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

/* (c) アクションボタン (回す / 引く / cashout 等) を大型ピル + グロー */
body:has(.gm-topbar) .sl-spin-btn,
body:has(.gm-topbar) .sl-stop-all-btn,
body:has(.gm-topbar) .ch-roll-btn,
body:has(.gm-topbar) .hl-draw-btn,
body:has(.gm-topbar) .cr-btn-start,
body:has(.gm-topbar) .cr-btn-cashout,
body:has(.gm-topbar) .mi-btn-start,
body:has(.gm-topbar) .mi-btn-cashout,
body:has(.gm-topbar) .gc-btn,
body:has(.gm-topbar) .ru-btn,
body:has(.gm-topbar) .sc-btn,
body:has(.gm-topbar) .rp-choice-btn,
body:has(.gm-topbar) .sw-btn-start,
body:has(.gm-topbar) .sw-btn-stop,
body:has(.gm-topbar) .ng-bet-btn,
body:has(.gm-topbar) .lot-btn {
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  box-shadow:
    0 8px 20px rgba(255,77,109,0.35),
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 -2px 0 rgba(0,0,0,0.18) inset !important;
  transition: transform .12s ease, box-shadow .14s ease, filter .14s !important;
}
body:has(.gm-topbar) .sl-spin-btn:hover,
body:has(.gm-topbar) .ch-roll-btn:hover,
body:has(.gm-topbar) .hl-draw-btn:hover,
body:has(.gm-topbar) .cr-btn-start:hover,
body:has(.gm-topbar) .cr-btn-cashout:hover,
body:has(.gm-topbar) .mi-btn-start:hover,
body:has(.gm-topbar) .mi-btn-cashout:hover,
body:has(.gm-topbar) .gc-btn:hover,
body:has(.gm-topbar) .ru-btn:hover,
body:has(.gm-topbar) .sc-btn:hover,
body:has(.gm-topbar) .rp-choice-btn:hover,
body:has(.gm-topbar) .sw-btn-start:hover,
body:has(.gm-topbar) .sw-btn-stop:hover,
body:has(.gm-topbar) .ng-bet-btn:hover,
body:has(.gm-topbar) .lot-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
body:has(.gm-topbar) .sl-spin-btn:active,
body:has(.gm-topbar) .ch-roll-btn:active,
body:has(.gm-topbar) .hl-draw-btn:active,
body:has(.gm-topbar) .cr-btn-start:active,
body:has(.gm-topbar) .cr-btn-cashout:active,
body:has(.gm-topbar) .mi-btn-start:active,
body:has(.gm-topbar) .mi-btn-cashout:active,
body:has(.gm-topbar) .gc-btn:active,
body:has(.gm-topbar) .ru-btn:active,
body:has(.gm-topbar) .sc-btn:active,
body:has(.gm-topbar) .rp-choice-btn:active,
body:has(.gm-topbar) .sw-btn-start:active,
body:has(.gm-topbar) .sw-btn-stop:active,
body:has(.gm-topbar) .ng-bet-btn:active,
body:has(.gm-topbar) .lot-btn:active {
  transform: translateY(1px);
}

/* (d) ベット入力欄を大型化 + 内側に通貨マーク (✦) */
body:has(.gm-topbar) .sl-bet-form,
body:has(.gm-topbar) .ch-bet-form,
body:has(.gm-topbar) .hl-bet-form,
body:has(.gm-topbar) .cr-bet-form,
body:has(.gm-topbar) .mi-start-form,
body:has(.gm-topbar) .gc-bet-form,
body:has(.gm-topbar) .ru-bet-form,
body:has(.gm-topbar) .sc-bet-form,
body:has(.gm-topbar) .jk-bet-form,
body:has(.gm-topbar) .sw-bet-form,
body:has(.gm-topbar) .ng-bet-form,
body:has(.gm-topbar) #crForm,
body:has(.gm-topbar) #miStartForm,
body:has(.gm-topbar) #swForm {
  gap: 14px !important;
  align-items: center !important;
}
body:has(.gm-topbar) .sl-bet-form input[type=number],
body:has(.gm-topbar) .ch-bet-form input[type=number],
body:has(.gm-topbar) .hl-bet-form input[type=number],
body:has(.gm-topbar) .cr-bet-form input[type=number],
body:has(.gm-topbar) .mi-start-form input[type=number],
body:has(.gm-topbar) .gc-bet-form input[type=number],
body:has(.gm-topbar) .ru-bet-form input[type=number],
body:has(.gm-topbar) .sc-bet-form input[type=number],
body:has(.gm-topbar) .jk-bet-form input[type=number],
body:has(.gm-topbar) .sw-bet-form input[type=number],
body:has(.gm-topbar) .ng-bet-form input[type=number] {
  width: 100px !important;
  padding: 12px 14px !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  text-align: center !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.20) inset !important;
}

/* (e) ベットフォーム内ラベル ("ベット (1〜100 守)") はコイン絵文字 + 簡素化 */
body:has(.gm-topbar) .sl-label,
body:has(.gm-topbar) .ch-label,
body:has(.gm-topbar) .hl-label,
body:has(.gm-topbar) .cr-label,
body:has(.gm-topbar) .mi-label,
body:has(.gm-topbar) .gc-label,
body:has(.gm-topbar) .ru-label,
body:has(.gm-topbar) .sc-label,
body:has(.gm-topbar) .rp-label,
body:has(.gm-topbar) .sw-label,
body:has(.gm-topbar) .ng-label {
  font-size: 0.7rem !important;
  opacity: 0.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* (f) 結果ピル: アイコン + 数字を強調、外周にネオン光彩 */
body:has(.gm-topbar) .sl-result.is-win,
body:has(.gm-topbar) .ch-result.is-win {
  box-shadow:
    0 0 0 2px rgba(34,197,94,0.45),
    0 8px 24px rgba(34,197,94,0.30) !important;
}
body:has(.gm-topbar) .sl-result.is-jackpot {
  box-shadow:
    0 0 0 2px rgba(255,209,102,0.6),
    0 10px 30px rgba(255,159,67,0.45) !important;
}
body:has(.gm-topbar) .sl-result.is-lose,
body:has(.gm-topbar) .ch-result.is-lose,
body:has(.gm-topbar) .sl-result.is-push,
body:has(.gm-topbar) .ch-result.is-push {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 6px 16px rgba(0,0,0,0.30) !important;
}

/* (g) 共通: 細い muted テキストは更に淡く (情報密度を下げる) */
body:has(.gm-topbar) .muted,
body:has(.gm-topbar) p.muted,
body:has(.gm-topbar) small.muted,
body:has(.gm-topbar) em.muted {
  opacity: 0.55 !important;
}

/* (h) 余計に出ているステータステキスト (例: 「降りるならいま！」) は小さく */
body:has(.gm-topbar) .cr-status-text,
body:has(.gm-topbar) .sw-status-text {
  font-size: 0.85rem !important;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* (i) 倍率/カウンタ等の大型数値 (.cr-mult / #swCounter / etc) はモノ幅 + 発光 */
body:has(.gm-topbar) .cr-mult,
body:has(.gm-topbar) #swCounter,
body:has(.gm-topbar) #miMult {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 900;
  font-size: 2.6rem !important;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(6,212,255,0.6);
  background: linear-gradient(135deg, #fff, #67e8f9 60%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* (j) リール / 盤面の角を更に丸く */
body:has(.gm-topbar) .sl-machine,
body:has(.gm-topbar) .mi-board,
body:has(.gm-topbar) .sc-board,
body:has(.gm-topbar) .ru-cylinder {
  border-radius: 18px !important;
  overflow: hidden;
}

/* ================================================================
 * §163. デスクトップ (>=1024px) では博打ゲームのフルスクリーン化を
 *   完全に解除して通常の 3-col レイアウトに戻す。
 *   フルスクリーン UI はスマホ専用、デスクトップは普通に col-main 内
 *   でレンダリングする。
 * ================================================================ */
@media (min-width: 1024px) {
  /* body の position:fixed / overflow:hidden 等を解除。
     背景は base.html がインラインで `body { background: <UserTheme.BgColor> !important }`
     を流し込んでいるので、ここで触らない (触るとユーザのテーマ設定が
     塗り替わって「サイドバーや右側の話題の背景が変わる」事故になる)。 */
  body:has(.sl), body:has(.ch), body:has(.cr), body:has(.mi),
  body:has(.gc), body:has(.ru), body:has(.sc), body:has(.jk),
  body:has(.sw), body:has(.hl), body:has(.ng), body:has(.lot) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
  }
  /* カード / topbar / 残高バーは不透明化 (半透明だと右サイドバーが透けて
     見える iPad 事故防止) */
  body:has(.gm-topbar) .sl-card,
  body:has(.gm-topbar) .ch-card,
  body:has(.gm-topbar) .hl-card,
  body:has(.gm-topbar) .cr-card,
  body:has(.gm-topbar) .mi-card,
  body:has(.gm-topbar) .gc-card,
  body:has(.gm-topbar) .ru-card,
  body:has(.gm-topbar) .sc-card,
  body:has(.gm-topbar) .jk-card,
  body:has(.gm-topbar) .rp-card,
  body:has(.gm-topbar) .sw-card,
  body:has(.gm-topbar) .ng-card,
  body:has(.gm-topbar) .lot-card,
  .gm-topbar {
    background: linear-gradient(180deg, #1a1530 0%, #100c20 100%) !important;
  }
  body:has(.gm-topbar) .wb-balance-mini {
    background: linear-gradient(135deg, #15294a, #1b1542) !important;
    border: 1px solid rgba(6,182,212,0.30) !important;
  }
  body.theme-light:has(.gm-topbar) .sl-card,
  body.theme-light:has(.gm-topbar) .ch-card,
  body.theme-light:has(.gm-topbar) .hl-card,
  body.theme-light:has(.gm-topbar) .cr-card,
  body.theme-light:has(.gm-topbar) .mi-card,
  body.theme-light:has(.gm-topbar) .gc-card,
  body.theme-light:has(.gm-topbar) .ru-card,
  body.theme-light:has(.gm-topbar) .sc-card,
  body.theme-light:has(.gm-topbar) .jk-card,
  body.theme-light:has(.gm-topbar) .rp-card,
  body.theme-light:has(.gm-topbar) .sw-card,
  body.theme-light:has(.gm-topbar) .ng-card,
  body.theme-light:has(.gm-topbar) .lot-card,
  body.theme-light .gm-topbar {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%) !important;
  }
  body.theme-light:has(.gm-topbar) .wb-balance-mini {
    /* ハブ側 (theme-light .wb-balance-mini) と同じ濃グラデに揃える。
       旧来 #e4eefc → #ede4fc の薄色だと白文字が読めなかった。 */
    background: linear-gradient(135deg, #3b30ad 0%, #1d6dd0 52%, #0e9aa7 100%) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: #fff !important;
  }
  body.theme-light:has(.gm-topbar) .wb-balance-mini *,
  body.theme-light:has(.gm-topbar) .wb-balance-mini .num,
  body.theme-light:has(.gm-topbar) .wb-balance-mini .unit,
  body.theme-light:has(.gm-topbar) .wb-balance-mini i {
    color: #fff !important;
  }
  body:has(.sl)::before, body:has(.ch)::before, body:has(.cr)::before,
  body:has(.mi)::before, body:has(.gc)::before, body:has(.ru)::before,
  body:has(.sc)::before, body:has(.jk)::before, body:has(.sw)::before,
  body:has(.hl)::before, body:has(.ng)::before, body:has(.lot)::before {
    content: none !important;
    display: none !important;
  }
  /* html の overflow:hidden 解除 */
  html:has(body :is(.sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot)) {
    overflow: auto !important;
    height: auto !important;
    overscroll-behavior: auto !important;
  }
  /* layout-3col を grid 復元。grid-template-columns / max-width は
     php-style.css L201/253/281 の @media レスポンシブに任せる。
     ここで強制すると iPad 中画面 (1024-1279px) で narrow sidebar (72px)
     ではなく wide (260px) になり、合計が viewport を超えて右端の
     col-aside が中央列に被さる事故が起きるので、それらは触らない。
     §158 が margin/padding/display を !important で潰しているので
     それだけ戻す。 */
  body:has(.sl) .layout-3col, body:has(.ch) .layout-3col,
  body:has(.cr) .layout-3col, body:has(.mi) .layout-3col,
  body:has(.gc) .layout-3col, body:has(.ru) .layout-3col,
  body:has(.sc) .layout-3col, body:has(.jk) .layout-3col,
  body:has(.sw) .layout-3col, body:has(.hl) .layout-3col,
  body:has(.ng) .layout-3col, body:has(.lot) .layout-3col {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* col-main を通常の縦スクロール可能なカラムに戻す */
  body:has(.sl) .col-main, body:has(.ch) .col-main,
  body:has(.cr) .col-main, body:has(.mi) .col-main,
  body:has(.gc) .col-main, body:has(.ru) .col-main,
  body:has(.sc) .col-main, body:has(.jk) .col-main,
  body:has(.sw) .col-main, body:has(.hl) .col-main,
  body:has(.ng) .col-main, body:has(.lot) .col-main {
    height: auto !important;
    overflow: visible !important;
    padding: revert !important;
    margin: revert !important;
    border-right: 1px solid var(--border-primary) !important;
    background: revert !important;
  }
  /* wb-wrap も通常の block に */
  body:has(.sl) .wb-wrap, body:has(.ch) .wb-wrap,
  body:has(.cr) .wb-wrap, body:has(.mi) .wb-wrap,
  body:has(.gc) .wb-wrap, body:has(.ru) .wb-wrap,
  body:has(.sc) .wb-wrap, body:has(.jk) .wb-wrap,
  body:has(.sw) .wb-wrap, body:has(.hl) .wb-wrap,
  body:has(.ng) .wb-wrap, body:has(.lot) .wb-wrap {
    height: auto !important;
    display: revert !important;
    overflow: visible !important;
    padding: revert !important;
  }
  /* col-aside / sidebar-nav は表示 (デスクトップは元々表示すべき) */
  body:has(.sl) .col-aside, body:has(.ch) .col-aside,
  body:has(.cr) .col-aside, body:has(.mi) .col-aside,
  body:has(.gc) .col-aside, body:has(.ru) .col-aside,
  body:has(.sc) .col-aside, body:has(.jk) .col-aside,
  body:has(.sw) .col-aside, body:has(.hl) .col-aside,
  body:has(.ng) .col-aside, body:has(.lot) .col-aside,
  body:has(.sl) .sidebar-nav, body:has(.ch) .sidebar-nav,
  body:has(.cr) .sidebar-nav, body:has(.mi) .sidebar-nav,
  body:has(.gc) .sidebar-nav, body:has(.ru) .sidebar-nav,
  body:has(.sc) .sidebar-nav, body:has(.jk) .sidebar-nav,
  body:has(.sw) .sidebar-nav, body:has(.hl) .sidebar-nav,
  body:has(.ng) .sidebar-nav, body:has(.lot) .sidebar-nav {
    display: revert !important;
  }
  /* col-main-header は表示に戻す */
  body:has(.sl) .col-main-header, body:has(.ch) .col-main-header,
  body:has(.cr) .col-main-header, body:has(.mi) .col-main-header,
  body:has(.gc) .col-main-header, body:has(.ru) .col-main-header,
  body:has(.sc) .col-main-header, body:has(.jk) .col-main-header,
  body:has(.sw) .col-main-header, body:has(.hl) .col-main-header,
  body:has(.ng) .col-main-header, body:has(.lot) .col-main-header {
    display: revert !important;
  }
  /* topbar はデスクトップでも表示 (モバイルとデザインを揃える)。
     代わりに kotoba_bank の col-main-header (← 言葉の銀行) を非表示にして
     ヘッダの重複を回避する */
  body:has(.gm-topbar) .col-main-header {
    display: none !important;
  }
  body:has(.gm-topbar) .gm-help-btn {
    /* gm-topbar の中に "ガイド" ボタンが既にあるので、page 内 ? は非表示維持 */
    display: none !important;
  }
  /* topbar 自体の見た目はデスクトップでも同じだが、横幅を 720px に絞って
     カードと縦線を揃える (iPad 等で col-main が広くなりすぎて右サイドバーと
     近接する事故を防ぐ)。!important を付けないと他の grid/flex 子要素
     ルールに負けてフル幅になる事故が起きるため明示。 */
  .gm-topbar {
    border-radius: 18px !important;
    margin: 12px auto 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    max-width: 720px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }
  /* xx-back を元のテキストリンクに戻す */
  .sl-back, .ch-back, .cr-back, .mi-back, .gc-back, .ru-back,
  .sc-back, .jk-back, .rp-back, .sw-back, .hl-back, .ng-back, .lot-back {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: revert !important;
    margin: 16px 0 0 !important;
    text-align: center !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  .sl-back a, .ch-back a, .cr-back a, .mi-back a, .gc-back a, .ru-back a,
  .sc-back a, .jk-back a, .rp-back a, .sw-back a, .hl-back a, .ng-back a, .lot-back a {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: 0.88rem !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .sl-back a::before, .ch-back a::before, .cr-back a::before, .mi-back a::before,
  .gc-back a::before, .ru-back a::before, .sc-back a::before, .jk-back a::before,
  .rp-back a::before, .sw-back a::before, .hl-back a::before, .ng-back a::before,
  .lot-back a::before { content: none !important; }
  /* ゲーム本体 (.sl/.ch/...) の flex フルスクリーン化を解除 */
  .sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot {
    flex: none !important;
    min-height: auto !important;
    display: block !important;
    overflow: visible !important;
    padding: revert !important;
    align-items: revert !important;
    justify-content: revert !important;
  }
  /* くじ引き内部スクロールも解除 */
  body:has(.lot) .lot {
    overflow: visible !important;
    touch-action: auto !important;
  }
  body:has(.lot) {
    touch-action: auto !important;
  }
  /* 残高バー: topbar とゲームの間に置く。max-width 720px で中央寄せ
     (topbar とカードに揃える) */
  body:has(.gm-topbar) .wb-balance-mini {
    margin: 14px auto 0 !important;
    border-radius: 14px !important;
    max-width: 720px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }

  /* (重要) ゲーム本体のセクション間に余白を入れる (キツキツ防止)。
     スマホでは flex column 100dvh で自動配分されているが、デスクトップでは
     普通の block 並びなので明示的な gap が要る。 */
  .sl, .ch, .cr, .mi, .gc, .ru, .sc, .jk, .sw, .hl, .ng, .lot {
    padding: 16px 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  /* カードに横幅上限 + 中央寄せ + 角丸を強める (モバイルと同じ印象)。
     polish 側の box-shadow / border が border-box 計算を狂わせないよう
     box-sizing も明示。 */
  .sl-card, .ch-card, .hl-card, .cr-card, .mi-card, .gc-card,
  .ru-card, .sc-card, .jk-card, .rp-card, .sw-card, .ng-card, .lot-card {
    border-radius: 20px !important;
    margin: 0 auto !important;
    max-width: 720px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }
  /* xx-back ("← 博打ハブに戻る") はテキストリンクだがマージン余裕 */
  .sl-back, .ch-back, .cr-back, .mi-back, .gc-back, .ru-back,
  .sc-back, .jk-back, .rp-back, .sw-back, .hl-back, .ng-back, .lot-back {
    margin: 12px auto !important;
  }
}

/* ================================================================
 * プロフィール ページャ (前のページ / もっと前を見る) — フル遷移リンク。
 * 無限スクロール JS は iOS Safari の WebKit プロセスが落ちる
 * (「問題が繰り返し起きました」エラー) ため撤去し、各ページ独立に
 * フル HTML をロードする方式にした。 */
.profile-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border-primary);
}
.profile-pager--bottom { border-bottom: none; }
.profile-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 9999px;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background var(--transition-fast);
}
.profile-pager-link:hover { background: var(--bg-card-hover); }
.profile-pager-link--primary {
  background: var(--accent-cyan, #1d9bf0);
  color: #fff;
  border-color: transparent;
}
.profile-pager-link--primary:hover {
  filter: brightness(1.08);
  background: var(--accent-cyan, #1d9bf0);
}
.profile-pager-current { font-size: 0.78rem; }

/* ============================================================
 * §200. お喋り部屋 (Spaces 風) ベータ表示
 *  - サイドバー / ドロワーのリンクに付く小さい [BETA] バッジ
 *  - ホーム composer 下の横スクロール ピル列 (.oshaberi-strip)
 *  - ピル本体 (.oshaberi-pill) はグラデ + マイクアイコン
 *  - ライト/ダーク両対応 (var で配色を吸収)
 * ============================================================ */

.oshaberi-beta-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7c4dff, #ff578b);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.45;
  box-shadow: 0 0 8px rgba(124, 77, 255, 0.35);
}

/* 横スクロール列: 部屋が複数あったら横に並んで、横スワイプで見える。
   X の Spaces と同じ挙動 (1 件目から軽く右側がチラ見えするように 88% で snap)。
   左右にしっかりインセットを取って、col-main の左右枠に張り付かないように。 */
.oshaberi-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 4px 20px 6px;               /* 上下を詰める / 左右 20px のインセット */
  padding: 0 20px 2px 0;              /* 右に余白を残して 2 件目以降を覗かせる */
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
}
.oshaberi-strip::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .oshaberi-strip {
    margin: 6px 20px 8px;             /* PC も上下を詰める / 左右 20px */
    padding-right: 20px;
  }
}

.oshaberi-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 9999px;
  background: linear-gradient(95deg, #ff4ea1 0%, #b96bff 45%, #4d6bff 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(124, 77, 255, 0.28);
  transition: transform 0.15s ease-out, filter 0.15s ease-out;
  min-height: 44px;
  flex: 0 0 88%;                      /* 1 個ずつ ≒画面幅で snap、右側がチラ見え */
  max-width: 520px;
  scroll-snap-align: start;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .oshaberi-pill { flex: 0 0 360px; }  /* PC では固定幅で複数同時に見える */
}
.oshaberi-pill:active,
.oshaberi-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* バリエーション: ホストごとにちょっと違う色にして "別の部屋" 感を出す */
.oshaberi-pill--v2 {
  background: linear-gradient(95deg, #ff9847 0%, #ff578b 50%, #b96bff 100%);
  box-shadow: 0 4px 18px rgba(255, 87, 139, 0.28);
}
.oshaberi-pill--v3 {
  background: linear-gradient(95deg, #15c98e 0%, #00b8d4 50%, #7c4dff 100%);
  box-shadow: 0 4px 18px rgba(0, 184, 212, 0.28);
}

.oshaberi-pill-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  color: #ffe;
  flex-shrink: 0;
}
.oshaberi-pill-title {
  flex: 1; min-width: 0;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.oshaberi-pill-title .oshaberi-beta-badge {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: none;
}
.oshaberi-pill-mic {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  padding: 6px;
}

/* ライトモード: 暗背景前提の box-shadow が白背景で薄いハロー (枠) として
   見えてしまうため、ライト時は影を完全に外す。グラデ自体は変えない。 */
body.theme-light .oshaberi-pill,
body.theme-light .oshaberi-pill--v2,
body.theme-light .oshaberi-pill--v3 {
  box-shadow: none;
}

/* リスナー数チップ (ピル内に表示) */
.oshaberi-pill-listener {
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.oshaberi-pill-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}


/* ============================================================
 * §201. 通知 actor-stack のアバターサイズを強制揃え
 *
 * php-style.css §107 が body.theme-light .avatar-placeholder に
 * border: 2px を付け、v2.css の .notif-actor-stack .avatar も
 * border: 2px を付けるため、ライトモードでは:
 *   - <img>  → body.theme-light img.avatar-* の border:none !important で 0px
 *   - <div placeholder> → border 2px のまま
 * となり、隣の写真より placeholder が明らかに大きく見えるバグになる。
 *
 * 通知の actor stack は「揃って並んでる」が必須なので、img と placeholder の
 * 両方に border:0 + 明示の 32x32 + content-box を強制する。リングが欲しい
 * 場合は box-shadow で描画する (= レイアウトを変えない)。
 * ============================================================ */
.notif-actor-stack .avatar,
.notif-actor-stack .avatar-placeholder,
.notif-actor .avatar,
.notif-actor .avatar-placeholder {
  border: 0 !important;
  box-sizing: border-box !important;
}
body.theme-light .notif-actor-stack .avatar,
body.theme-light .notif-actor-stack .avatar-placeholder,
body.theme-light .notif-actor .avatar,
body.theme-light .notif-actor .avatar-placeholder {
  border: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(124, 77, 255, 0.18) !important;
}

/* ================================================================
 * §202. ネオン・カジノ — 博打 (gamble) 没入ビジュアル基盤
 *  全ゲーム共通の高級カジノ質感。背景アンビエンス + ハブのネオン
 *  カード化 + 残高 HUD のコイン演出。CSS のみ (Go 不要)。
 *  §150 の上に積む上書きレイヤーなので、このブロック削除で旧に戻る。
 * ================================================================ */

/* --- 没入背景: position:fixed で全ゲームページの背後に常駐 --- */
.gamble-stage-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 16% -4%, rgba(124,77,255,0.22), transparent 70%),
    radial-gradient(55% 45% at 94% 10%, rgba(0,229,255,0.16), transparent 70%),
    radial-gradient(80% 60% at 50% 112%, rgba(255,77,160,0.18), transparent 72%),
    linear-gradient(180deg, #0a0a16 0%, #0c0a1c 55%, #07060f 100%);
  animation: gambleStageDrift 20s ease-in-out infinite alternate;
}
.gamble-stage-bg::after { /* ビネットで中央に視線を集める */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, transparent 52%, rgba(0,0,0,0.55) 100%);
}
@keyframes gambleStageDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; filter: saturate(1); }
  to   { background-position: 3% 2%, -3% 1%, 2% -2%, 0 0; filter: saturate(1.18); }
}
/* 背景の上に .wb-wrap 直下の全要素 (topbar/残高/ゲーム本体) を持ち上げる。
   topbar は JS が背景より前に挿入するので兄弟結合子ではなく :has で全子を対象。 */
.wb-wrap:has(.gamble-stage-bg) > *:not(.gamble-stage-bg) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gamble-stage-bg { animation: none; } }

body.theme-light .gamble-stage-bg {
  background:
    radial-gradient(60% 50% at 16% -4%, rgba(124,77,255,0.10), transparent 70%),
    radial-gradient(55% 45% at 94% 10%, rgba(0,170,255,0.08), transparent 70%),
    linear-gradient(180deg, #f4f2fc 0%, #eef0fb 100%);
}
body.theme-light .gamble-stage-bg::after { background: none; }

/* --- ライトテーマ: ゲーム「装置」内のキャプション文字を読めるように ---
   .cr-display / .sw-display / .hl-table は意図的に暗いステージ (スロット機や
   ダイストレイと同じ「装置」表現) なので、ライトでもステージは暗いまま。
   ただし中の説明テキストは var(--text-secondary) でライト時に濃色へ転び、
   暗ステージ上で dark-on-dark になり読めなくなる。ここだけ淡い白に固定する。
   数値 (.cr-mult / .sw-counter) は 9672 のグラデ clip で両テーマとも明色なので触らない。 */
body.theme-light .cr-status-text,
body.theme-light .sw-status-text,
body.theme-light .hl-slot-cap {
  color: rgba(255, 255, 255, 0.74) !important;
}
/* チップ系の極薄白背景はライトの白カード上で消えるので、薄い黒に置換して輪郭を残す */
body.theme-light .sl-result.is-lose,
body.theme-light .sl-result.is-push,
body.theme-light .sl-sym-mini,
body.theme-light .hl-msg.is-push {
  background: rgba(0, 0, 0, 0.05);
}

/* --- ハブ見出しをネオンタイトルに --- */
.gamble-hub-head h2 {
  font-size: 1.35rem; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(90deg, #ffd86b, #ff7eb3 55%, #7c4dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 18px rgba(255,126,179,.22);
}
.gamble-hub-head > i { color: #ffd86b; filter: drop-shadow(0 0 8px rgba(255,200,80,.6)); }

/* --- タイルを高級ネオンカードに --- */
.gamble-tile {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(14,12,28,0.74);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
}
.gamble-tile::before { /* 上端の金ライン (hover で点灯) */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,216,107,.9), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.gamble-tile::after { /* hover の光沢スイープ */
  content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
.gamble-tile:hover {
  transform: translateY(-3px) scale(1.012);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,77,255,.28);
}
.gamble-tile:hover::before { opacity: 1; }
.gamble-tile:hover::after { left: 125%; }
.gamble-tile.is-soon:hover::before,
.gamble-tile.is-soon:hover::after { opacity: 0; left: -60%; }

.gamble-tile-icon {
  width: 54px; height: 54px; border-radius: 16px; font-size: 1.6rem;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.4);
}
.gamble-tile-icon::after { /* アイコン色に同調する発光ハロー */
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 20px 1px currentColor; opacity: .32; pointer-events: none;
}
.gamble-tile:hover .gamble-tile-icon { transform: scale(1.06) rotate(-2deg); transition: transform .18s ease; }
.gamble-tile-name { font-size: 1.06rem; letter-spacing: .01em; }
.gamble-tile-go { color: #ffd86b; }

body.theme-light .gamble-tile {
  background: linear-gradient(180deg, #ffffff, #f7f6ff);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 22px rgba(80,60,160,0.10);
}
body.theme-light .gamble-hub-head h2 { text-shadow: none; }

/* ================================================================
 * §210. 博打ハブ: 目に見える入場アニメ + アイドル演出
 *   - ロード時にタイルが下からカスケードで出現 (全環境・両テーマで可視)。
 *   - hover 可能デバイス (PC) のみアイコンがゆっくり浮遊。スマホは入場のみ
 *     (連続アニメで電池を食わせない)。
 *   - reduced-motion では一切動かさず即表示。
 *   ※ animation-fill-mode は backwards: 入場後は素の状態へ戻すので hover の
 *     translateY/scale を殺さない。
 * ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .gamble-hub-grid > .gamble-tile {
    animation: gmTileIn 0.5s cubic-bezier(0.21, 1.02, 0.73, 1) backwards;
  }
  .gamble-hub-grid > .gamble-tile:nth-child(1)  { animation-delay: 0.03s; }
  .gamble-hub-grid > .gamble-tile:nth-child(2)  { animation-delay: 0.07s; }
  .gamble-hub-grid > .gamble-tile:nth-child(3)  { animation-delay: 0.11s; }
  .gamble-hub-grid > .gamble-tile:nth-child(4)  { animation-delay: 0.15s; }
  .gamble-hub-grid > .gamble-tile:nth-child(5)  { animation-delay: 0.19s; }
  .gamble-hub-grid > .gamble-tile:nth-child(6)  { animation-delay: 0.23s; }
  .gamble-hub-grid > .gamble-tile:nth-child(7)  { animation-delay: 0.27s; }
  .gamble-hub-grid > .gamble-tile:nth-child(8)  { animation-delay: 0.31s; }
  .gamble-hub-grid > .gamble-tile:nth-child(9)  { animation-delay: 0.35s; }
  .gamble-hub-grid > .gamble-tile:nth-child(10) { animation-delay: 0.39s; }
  .gamble-hub-grid > .gamble-tile:nth-child(11) { animation-delay: 0.43s; }
  .gamble-hub-grid > .gamble-tile:nth-child(12) { animation-delay: 0.47s; }
  .gamble-hub-grid > .gamble-tile:nth-child(13) { animation-delay: 0.51s; }
  .gamble-hub-grid > .gamble-tile:nth-child(14) { animation-delay: 0.55s; }
  .gamble-hub-grid > .gamble-tile:nth-child(n+15) { animation-delay: 0.59s; }
  @keyframes gmTileIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* JACKPOT メーターも入場で少し遅れて降りてくる */
  .gamble-hub > .gamble-jackpot {
    animation: gmJackpotIn 0.55s cubic-bezier(0.21, 1.02, 0.73, 1) backwards;
  }
  @keyframes gmJackpotIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gamble-tile .gamble-tile-icon { animation: gmIconFloat 4.2s ease-in-out infinite; }
  .gamble-tile:nth-child(2n) .gamble-tile-icon { animation-delay: -1.1s; }
  .gamble-tile:nth-child(3n) .gamble-tile-icon { animation-delay: -2.4s; }
  .gamble-tile:hover .gamble-tile-icon { animation: none; }
  @keyframes gmIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
}

/* ================================================================
 * §211. 全ゲーム共通: アクションボタンの押下フィードバック
 *   どのゲームでもボタンを押すと沈む (scale + 微発光)。触覚 (gamble_sfx.js)
 *   と対で、タップのたびに「効いている」手応えを返す。両テーマ・全環境で可視。
 * ================================================================ */
.ch-roll-btn, .cr-btn, .gc-btn, .hl-draw-btn, .hl-guess-btn,
.lot-btn, .mi-btn, .ng-bet-btn, .ru-btn, .sc-btn,
.sl-spin-btn, .sl-stop-all-btn, .sw-btn {
  transition: transform 0.09s ease, box-shadow 0.14s ease, filter 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.ch-roll-btn:active, .cr-btn:active, .gc-btn:active, .hl-draw-btn:active,
.hl-guess-btn:active, .lot-btn:active, .mi-btn:active, .ng-bet-btn:active,
.ru-btn:active, .sc-btn:active, .sl-spin-btn:active, .sl-stop-all-btn:active,
.sw-btn:active {
  transform: scale(0.94) translateY(1px);
  filter: brightness(1.1) saturate(1.05);
}
/* 無効ボタンは沈ませない */
.ch-roll-btn:disabled:active, .cr-btn:disabled:active, .gc-btn:disabled:active,
.hl-draw-btn:disabled:active, .hl-guess-btn:disabled:active, .lot-btn:disabled:active,
.mi-btn:disabled:active, .ng-bet-btn:disabled:active, .ru-btn:disabled:active,
.sc-btn:disabled:active, .sl-spin-btn:disabled:active, .sl-stop-all-btn:disabled:active,
.sw-btn:disabled:active {
  transform: none; filter: none;
}

/* --- 残高 mini を高級コイン HUD に --- */
.gamble-stage-bg ~ .wb-balance-mini,
.wb-balance-mini {
  background: linear-gradient(135deg, rgba(255,216,107,0.16), rgba(124,77,255,0.12));
  border: 1px solid rgba(255,216,107,0.38);
  box-shadow: 0 0 20px rgba(255,200,80,0.12), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-balance-mini-num .num { font-weight: 900; text-shadow: 0 0 12px rgba(255,216,107,.4); }
.wb-balance-mini-label i { color: #ffd86b; filter: drop-shadow(0 0 6px rgba(255,200,80,.6)); }
body.theme-light .wb-balance-mini {
  background: linear-gradient(135deg, rgba(255,196,60,0.16), rgba(124,77,255,0.08));
  border-color: rgba(210,160,40,0.4);
  box-shadow: 0 4px 14px rgba(180,140,40,0.14);
}
body.theme-light .wb-balance-mini-num .num { text-shadow: none; }

/* ================================================================
 * §203. スロット機体の高級化 (視覚のみ・SFX 不変)
 *  既存 §151 クラスの上書きのみ。マークアップ/JS は変更しない。
 *  ※ .sl-payline の top はハードコードなので .sl-machine の
 *    padding は変えない (変えると中段とズレる)。
 * ================================================================ */
.sl-machine {
  background:
    radial-gradient(circle at 50% -10%, rgba(255,159,67,0.30), transparent 60%),
    linear-gradient(180deg, #221538 0%, #0d0a1f 100%);
  border: 1px solid rgba(255,180,90,0.55);
  box-shadow:
    inset 0 2px 22px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 18px 44px rgba(0,0,0,0.55),
    0 0 0 4px rgba(255,159,67,0.12),
    0 0 40px rgba(255,159,67,0.18);
}
/* 上部マーキー: 流れる光の LED ストリップ (機体上 padding 内に収める) */
.sl-machine::before {
  content: ""; position: absolute; top: 6px; left: 14px; right: 14px; height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff4d6d, #ffd166, #ff9f43, #ffd166, #ff4d6d);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(255,180,90,0.7);
  animation: slMarquee 3s linear infinite;
  z-index: 0; pointer-events: none;
}
@keyframes slMarquee { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .sl-machine::before { animation: none; } }

/* ペイラインを生きたネオンに */
.sl-payline {
  border-color: rgba(255,200,90,0.8);
  animation: slPayline 1.6s ease-in-out infinite alternate;
}
@keyframes slPayline {
  from { box-shadow: 0 0 18px rgba(255,159,67,0.25) inset, 0 0 6px rgba(255,159,67,0.30); }
  to   { box-shadow: 0 0 34px rgba(255,159,67,0.50) inset, 0 0 16px rgba(255,159,67,0.55); }
}

/* リールにガラスの奥行き */
.sl-reel {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5ff 48%, #e7ebfb 100%);
  border-color: rgba(255,180,90,0.5);
  box-shadow: inset 0 10px 14px rgba(0,0,0,0.20), inset 0 -10px 14px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.5);
}
.sl-reel::before { /* ガラス上端のハイライト (シンボルは透けて見える程度) */
  content: ""; position: absolute; inset: 0 0 62% 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), transparent);
}
/* 当たりリールをより派手に */
.sl-reel.is-winning {
  border-color: rgba(255,209,102,0.95);
  box-shadow: 0 0 24px rgba(255,209,102,0.6), inset 0 0 18px rgba(255,209,102,0.4);
}

/* STOP ボタン premium */
.sl-stop-btn {
  background: linear-gradient(135deg, #ff5d7a 0%, #c43cf0 100%);
  box-shadow: 0 3px 12px rgba(255,77,109,0.5), inset 0 1px 0 rgba(255,255,255,0.30), 0 0 0 1px rgba(255,255,255,0.08);
}

/* ================================================================
 * §204. 累積ジャックポット メーター (.gamble-jackpot)
 * ================================================================ */
.gamble-jackpot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 18px; border-radius: 18px; text-align: center; overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,216,107,0.25), transparent 70%),
    linear-gradient(180deg, rgba(40,28,8,0.85), rgba(20,14,28,0.92));
  border: 1px solid rgba(255,216,107,0.55);
  box-shadow: 0 0 28px rgba(255,200,80,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.gamble-jackpot::before { /* 流れる光帯 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  background-size: 250% 100%; animation: jpShine 4.5s linear infinite;
}
@keyframes jpShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.gamble-jackpot-label {
  font-weight: 900; letter-spacing: .22em; font-size: .78rem;
  color: #ffd86b; text-shadow: 0 0 10px rgba(255,200,80,.6);
}
.gamble-jackpot-label i { margin-right: 4px; }
.gamble-jackpot-amount { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.gamble-jackpot-amount .num {
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fff7d6, #ffd166 55%, #ff9f43);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: jpPulse 1.8s ease-in-out infinite;
}
@keyframes jpPulse {
  0%, 100% { filter: drop-shadow(0 2px 6px rgba(255,160,40,.45)); }
  50%      { filter: drop-shadow(0 2px 14px rgba(255,200,80,.85)); }
}
.gamble-jackpot-amount .unit { font-size: 1rem; font-weight: 800; color: #ffd86b; }
.gamble-jackpot-sub { font-size: .72rem; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .gamble-jackpot::before, .gamble-jackpot-amount .num { animation: none; }
}
body.theme-light .gamble-jackpot {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,200,80,0.22), transparent 70%),
    linear-gradient(180deg, #fffaf0, #fff4e0);
  border-color: rgba(210,160,40,0.5);
  box-shadow: 0 6px 20px rgba(200,150,40,0.18);
}
/* ライトモード: 金額の淡色グラデがクリーム背景に溶けて読めないため、濃い
   アンバー〜焦げ橙のグラデに差し替えてコントラストを確保する。ラベル/単位も
   淡い金 (#ffd86b) は低コントラストなので濃いアンバーに。 */
body.theme-light .gamble-jackpot-amount .num {
  background: linear-gradient(180deg, #d98000, #c2410c 55%, #8a2d0a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  body.theme-light .gamble-jackpot-amount .num { animation: none; }
}
body.theme-light .gamble-jackpot-label {
  color: #b45309; text-shadow: none;
}
body.theme-light .gamble-jackpot-amount .unit { color: #c2410c; }

/* ================================================================
 * §205. 連勝コンボ チップ (.gm-streak)
 * ================================================================ */
.gm-streak {
  display: flex; align-items: center; gap: 6px; width: fit-content;
  margin: 8px auto 0; padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,77,45,0.18), rgba(255,159,67,0.14));
  border: 1px solid rgba(255,120,60,0.5);
  box-shadow: 0 0 18px rgba(255,90,40,0.22);
  font-size: .82rem; font-weight: 800; color: #ffcaa0;
  animation: gmStreakPulse 1.2s ease-in-out infinite;
}
@keyframes gmStreakPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,90,40,0.20); }
  50%      { box-shadow: 0 0 26px rgba(255,120,50,0.48); }
}
.gm-streak-fire { color: #ff6b35; filter: drop-shadow(0 0 6px rgba(255,90,30,.8)); animation: gmFire .6s ease-in-out infinite alternate; }
@keyframes gmFire { from { transform: translateY(0) scale(1); } to { transform: translateY(-1px) scale(1.12); } }
.gm-streak-n { font-size: 1.05rem; font-weight: 900; color: #fff; }
.gm-streak-lbl { color: #ffb38a; }
.gm-streak-bonus { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(255,120,50,0.22); color: #ffd9b0; font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .gm-streak, .gm-streak-fire { animation: none; } }
body.theme-light .gm-streak { color: #b3502a; background: linear-gradient(135deg, rgba(255,90,40,0.12), rgba(255,159,67,0.10)); }
body.theme-light .gm-streak-n { color: #c0341a; }

/* ================================================================
 * §206. 博打ランク カード (.gm-rank) — --rank-color を inline で受ける
 * ================================================================ */
.gm-rank {
  position: relative; overflow: hidden;
  padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), rgba(14,12,28,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.gm-rank::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rank-color, #ffd166); opacity: .85; }
.gm-rank-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gm-rank-badge { font-weight: 900; font-size: .95rem; letter-spacing: .03em; color: var(--rank-color, #ffd166); text-shadow: 0 0 12px rgba(255,255,255,.16); }
.gm-rank-badge i { margin-right: 5px; }
.gm-rank-xp { font-size: .78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.gm-rank-bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.gm-rank-fill {
  display: block; height: 100%; border-radius: 999px; min-width: 2%;
  background: var(--rank-color, #ffd166);
  box-shadow: 0 0 12px var(--rank-color, #ffd166);
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.gm-rank-next { margin-top: 6px; font-size: .74rem; color: var(--text-secondary); text-align: right; }
body.theme-light .gm-rank { background: linear-gradient(180deg, #fff, #f7f6ff); border-color: rgba(0,0,0,0.08); box-shadow: 0 6px 18px rgba(80,60,160,0.10); }

/* ================================================================
 * §207. デイリーボーナス / コンボ保護 (.gm-daily-grant / .gm-shields)
 * ================================================================ */
.gm-daily-grant {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: 8px auto 0; padding: 8px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,77,255,0.20), rgba(0,229,255,0.14));
  border: 1px solid rgba(124,77,255,0.5);
  box-shadow: 0 0 22px rgba(124,77,255,0.22);
  font-size: .82rem; color: #e8e0ff;
  animation: gmDailyPop .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes gmDailyPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gm-daily-grant strong { color: #ffd86b; }
.gm-daily-streak { padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: .72rem; }
.gm-shields {
  display: flex; align-items: center; gap: 6px; width: fit-content;
  margin: 6px auto 0; padding: 4px 12px; border-radius: 999px;
  background: rgba(64,180,255,0.14); border: 1px solid rgba(64,180,255,0.45);
  font-size: .78rem; font-weight: 800; color: #9fd9ff;
}
.gm-shields i { color: #4db6ff; filter: drop-shadow(0 0 5px rgba(60,160,255,.7)); }
@media (prefers-reduced-motion: reduce) { .gm-daily-grant { animation: none; } }
body.theme-light .gm-daily-grant { color: #4a3a80; background: linear-gradient(135deg, rgba(124,77,255,0.12), rgba(0,170,255,0.08)); }
body.theme-light .gm-shields { color: #1f6fae; }

/* ================================================================
 * §208. 博打 当選フラッシュ演出 (.gm-celebrate*) — 視覚のみ・音なし
 * ================================================================ */
.gm-celebrate-flash { position: fixed; inset: 0; z-index: 9998; pointer-events: none; animation: gmCelFlash .9s ease-out forwards; }
.gm-celebrate-flash--jackpot { background: radial-gradient(circle at 50% 45%, rgba(255,216,107,.55), rgba(255,140,40,.25) 40%, transparent 70%); }
.gm-celebrate-flash--combo { background: radial-gradient(circle at 50% 45%, rgba(255,90,40,.45), rgba(255,159,67,.2) 40%, transparent 70%); }
@keyframes gmCelFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.gm-celebrate { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; }
.gm-celebrate.is-in { opacity: 1; transition: opacity .2s ease; }
.gm-celebrate.is-out { opacity: 0; transition: opacity .4s ease; }
.gm-celebrate-card {
  text-align: center; padding: 22px 34px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(30,20,50,0.96), rgba(16,12,28,0.96));
  border: 1px solid rgba(255,216,107,0.6);
  box-shadow: 0 0 50px rgba(255,200,80,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: scale(.7) translateY(8px);
}
.gm-celebrate.is-in .gm-celebrate-card { animation: gmCelPop .5s cubic-bezier(.18,1.3,.4,1) forwards; }
@keyframes gmCelPop { to { transform: scale(1) translateY(0); } }
.gm-celebrate--combo .gm-celebrate-card { border-color: rgba(255,120,60,0.6); box-shadow: 0 0 50px rgba(255,100,50,0.4), inset 0 1px 0 rgba(255,255,255,0.12); }
.gm-celebrate--shield .gm-celebrate-card { border-color: rgba(80,180,255,0.6); box-shadow: 0 0 40px rgba(60,160,255,0.4); }
/* コンボ保護は「負け」と同時に出る救済演出。敗北エフェクト (.glfx-overlay, z-index
   99999) と画面中央で重なると埋もれて不自然になるため、敗北 FX より前面 (z) かつ
   画面下寄りに出して棲み分ける (敗北カードは中央、コンボ保護は下に分離して両方読める)。 */
.gm-celebrate--shield { z-index: 100001; align-items: flex-end; padding-bottom: 20vh; }
.gm-cel-title {
  font-size: 1.7rem; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff7d6, #ffd166 60%, #ff9f43);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255,160,40,.5));
}
.gm-celebrate--combo .gm-cel-title { background: linear-gradient(180deg, #ffd9b0, #ff7a3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gm-celebrate--shield .gm-cel-title { background: linear-gradient(180deg, #cdeaff, #4db6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gm-cel-amount { margin-top: 4px; font-size: 2.4rem; font-weight: 900; color: #fff; text-shadow: 0 0 18px rgba(255,216,107,.6); }
.gm-cel-amount span { font-size: 1.1rem; color: #ffd86b; }
.gm-cel-sub { margin-top: 4px; font-size: .85rem; color: #d9d2ee; }
@media (prefers-reduced-motion: reduce) {
  .gm-celebrate-flash { animation: none; }
  .gm-celebrate.is-in .gm-celebrate-card { animation: none; transform: none; }
}

/* ================================================================
 * §209. お喋り部屋 (X の Spaces 風) — .osp-*
 *   配色はサイト共通の紫系 (#7c4dff→#b14dff) を軸に、一覧カードは
 *   ホームの .oshaberi-pill と同じ 3 系統グラデをローテーション。
 *   座席 (.osp-seat / .osp-ring / .osp-mute) のセレクタは
 *   web/ts/oshaberi.ts (音量メーター / ライブ差分更新) が参照する。
 * ================================================================ */
/* --- 一覧: 部屋を開くフォーム --- */
.osp-new { display: flex; align-items: center; gap: 10px; margin: 12px 16px; padding: 6px 6px 6px 8px; border-radius: 999px; border: 1px solid var(--border-primary); background: var(--bg-card, rgba(255,255,255,.03)); }
.osp-new:focus-within { border-color: rgba(124,77,255,.55); box-shadow: 0 0 0 3px rgba(124,77,255,.15); }
.osp-new-mic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem;
  background: linear-gradient(135deg, #7c4dff, #b14dff); box-shadow: 0 3px 10px rgba(124,77,255,.35); }
.osp-new-input { flex: 1; min-width: 0; padding: 9px 4px; border: 0; background: transparent; color: var(--text-primary); font-size: .95rem; }
.osp-new-input:focus { outline: none; }
.osp-new-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 0; border-radius: 999px; font-weight: 800; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #7c4dff, #b14dff); box-shadow: 0 4px 14px rgba(124,77,255,.35); cursor: pointer; }
.osp-new-btn:hover { filter: brightness(1.06); }

/* --- LIVE イコライザ (音が鳴っている感の 3 本バー。LIVE バッジ内で使用) --- */
.osp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; margin-right: 1px; }
.osp-eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor;
  transform-origin: bottom; animation: ospEq 1.1s ease-in-out infinite; }
.osp-eq i:nth-child(1) { animation-delay: 0s; }
.osp-eq i:nth-child(2) { animation-delay: .25s; }
.osp-eq i:nth-child(3) { animation-delay: .5s; }
@keyframes ospEq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* --- 一覧: Spaces カード (グラデ + facepile + CTA) --- */
.osp-list { display: flex; flex-direction: column; gap: 12px; padding: 6px 16px 24px; }
.osp-card { display: block; position: relative; padding: 16px 16px 14px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #ff4ea1 0%, #b96bff 45%, #4d6bff 100%);
  box-shadow: 0 8px 26px rgba(124,77,255,.28);
  transition: transform .14s, filter .14s, box-shadow .14s; -webkit-tap-highlight-color: transparent; }
.osp-card--v2 { background: linear-gradient(135deg, #ff9847 0%, #ff578b 50%, #b96bff 100%); box-shadow: 0 8px 26px rgba(255,87,139,.26); }
.osp-card--v3 { background: linear-gradient(135deg, #15c98e 0%, #00b8d4 50%, #7c4dff 100%); box-shadow: 0 8px 26px rgba(0,184,212,.26); }
.osp-card:hover { transform: translateY(-2px); filter: brightness(1.04); }
body.theme-light .osp-card, body.theme-light .osp-card--v2, body.theme-light .osp-card--v3 { box-shadow: 0 6px 18px rgba(30,20,70,.18); }
.osp-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.osp-card-live { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 900; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fff; }
.osp-card-count { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.92); }
.osp-card-tag { margin-left: auto; font-size: .66rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.25); color: #fff; white-space: nowrap; }
.osp-card-title { font-size: 1.16rem; font-weight: 900; line-height: 1.4; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.osp-card-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: .8rem; }
.osp-faces { display: inline-flex; align-items: center; }
.osp-face { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); object-fit: cover; margin-left: -8px; background: rgba(0,0,0,.3); }
.osp-faces .osp-face:first-child { margin-left: 0; }
.osp-face-ph, .osp-face-more { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .64rem; }
.osp-card-hostname { font-weight: 800; }
.osp-card-hosttag { font-size: .62rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.25); }
.osp-card-ago { color: rgba(255,255,255,.78); }
.osp-card-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.96); color: #2a1657; font-weight: 900; font-size: .95rem; box-shadow: 0 4px 14px rgba(0,0,0,.16); transition: transform .1s; }
.osp-card:active .osp-card-cta { transform: scale(.98); }

/* --- 一覧: 空状態 --- */
.osp-empty { text-align: center; padding: 44px 20px 30px; color: var(--text-secondary); }
.osp-empty-ic { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, #7c4dff, #b14dff); box-shadow: 0 10px 30px rgba(124,77,255,.35); }
.osp-empty h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; color: var(--text-primary); }
.osp-empty-tips { list-style: none; margin: 22px auto 0; padding: 0; max-width: 340px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.osp-empty-tips li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-primary); background: var(--bg-card); font-size: .9rem; color: var(--text-secondary); }
.osp-empty-tips li i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124,77,255,.14); color: #b14dff; font-size: .9rem; }

/* --- ルーム: ヒーロー (紫グラデの没入ヘッダ) --- */
.osp-room { position: relative; padding: 0 0 calc(96px + var(--bottom-nav-height, 56px) + env(safe-area-inset-bottom)); }
.osp-hero { position: relative; overflow: hidden; margin: 12px 16px 0; padding: 18px 18px 16px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 85% -20%, rgba(255,78,161,.5), transparent 55%),
              linear-gradient(135deg, #5b2bd6 0%, #7c4dff 55%, #b14dff 100%);
  box-shadow: 0 10px 32px rgba(124,77,255,.3); }
.osp-hero::after { content: ""; position: absolute; inset: -45%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.13), transparent 68%);
  animation: ospAura 7s ease-in-out infinite; }
@keyframes ospAura {
  0%, 100% { transform: translate(20%, -14%) scale(1); }
  50%      { transform: translate(30%, 0%) scale(1.18); }
}
.osp-hero--ended { background: linear-gradient(135deg, #4a4460, #5f5878); box-shadow: none; }
body.theme-light .osp-hero { box-shadow: 0 8px 22px rgba(60,30,140,.22); }
.osp-hero-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.osp-live { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 900; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: rgba(255,59,92,.92); color: #fff; box-shadow: 0 2px 10px rgba(255,59,92,.45); }
.osp-live .osp-timer { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.95); background: rgba(0,0,0,.24); padding: 3px 10px; border-radius: 999px; }
.osp-hero-count { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 800; color: rgba(255,255,255,.95); background: rgba(0,0,0,.24); padding: 3px 10px; border-radius: 999px; }
.osp-ended-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 900; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; }
.osp-hero-title { margin: 0 0 12px; font-size: 1.28rem; font-weight: 900; line-height: 1.4; overflow-wrap: anywhere; }
.osp-hero-host { display: flex; align-items: center; gap: 8px; font-size: .84rem; flex-wrap: wrap; }
.osp-hero-avatar { display: inline-flex; flex: 0 0 auto; }
.osp-hero-avatar img, .osp-hero-ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); }
.osp-hero-ph { display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); font-size: .74rem; font-weight: 800; color: #fff; }
.osp-hero-hostname { font-weight: 800; }
.osp-hero-handle { color: rgba(255,255,255,.75); }
.osp-hero-hosttag { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.25); }

/* --- ルーム: 接続ステータス (JS が文言を更新) --- */
.osp-status { width: fit-content; max-width: calc(100% - 32px); text-align: center; margin: 14px auto 0; padding: 8px 18px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-primary); font-size: .88rem; color: var(--text-secondary); }

/* --- ルーム: 参加者グリッド (全ロール共通の席) --- */
.osp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 112px)); justify-content: center; gap: 18px 12px; padding: 18px 16px 8px; justify-items: center; }
.osp-seat { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 88px; }
.osp-avatar { position: relative; width: 64px; height: 64px; }
.osp-avatar img, .osp-avatar-ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.osp-avatar-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c4dff, #b14dff); color: #fff; font-size: 1.4rem; font-weight: 800; }
/* リング: --lvl (0..1) で実音量に反応して光る/拡大する (音量メーター)。 */
.osp-ring { position: absolute; inset: -5px; border-radius: 50%; border: 3px solid transparent; transition: border-color .12s, box-shadow .08s, transform .08s; }
.osp-seat--host .osp-ring { border-color: rgba(177,77,255,.55); }
.osp-ring[data-speaking="1"] {
  border-color: #34e39a;
  box-shadow: 0 0 calc(8px + var(--lvl, 0) * 30px) rgba(52,227,154, calc(.35 + var(--lvl, 0) * .6));
  transform: scale(calc(1 + var(--lvl, 0) * .07));
}
.osp-mute { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: #e0245e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .6rem; border: 2px solid var(--bg-primary, #15202b); }
.osp-name { font-size: .86rem; font-weight: 700; color: var(--text-primary); max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osp-role-badge { font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-primary); }
.osp-role-badge--host { background: rgba(124,77,255,.2); color: #c4a8ff; border-color: transparent; }
.osp-role-badge--speaker { background: rgba(0,170,255,.16); color: #7fd0ff; border-color: transparent; }
body.theme-light .osp-role-badge--host { color: #6d35f2; }

/* --- ライトテーマ: 紫グラデ面の白文字を強制復元 ---
   php-style.css §113 の body.theme-light ワイルドカード (超高詳細度で全テキストを
   ダーク色に強制) が、お喋り部屋のグラデ面 (ボタン/カード/ヒーロー) の白文字まで
   黒くしてしまうため、!important で白に戻す (公共注釈 pcrp と同じ対策パターン)。 */
body.theme-light .osp-new-btn,
body.theme-light .osp-card,
body.theme-light .osp-card span:not(.osp-face):not(.osp-face-ph):not(.osp-face-more):not(.osp-card-cta),
body.theme-light .osp-card .osp-card-title,
body.theme-light .osp-hero,
body.theme-light .osp-hero .osp-hero-title,
body.theme-light .osp-hero span,
body.theme-light .osp-hero h2,
body.theme-light .osp-cta,
body.theme-light .osp-cta span,
body.theme-light .osp-leave--end,
body.theme-light .osp-enable {
  color: #fff !important;
}
body.theme-light .osp-card .osp-card-title { color: #fff !important; }
/* CTA ピルは白背景 + 濃紫文字がデザイン。白文字強制の巻き添えにすると
   白ピルに白文字で読めなくなる (f859b2e の回帰、2026-07-06 修正)。 */
body.theme-light .osp-card .osp-card-cta,
body.theme-light .osp-card .osp-card-cta i {
  color: #2a1657 !important;
}
/* facepile のイニシャル/+N は暗い半透明円の上の白文字がデザイン */
body.theme-light .osp-card .osp-face-ph,
body.theme-light .osp-card .osp-face-more {
  color: #fff !important;
}
/* 状態色 (退出の警告赤 / ミュート中の赤) もワイルドカードに負けるので復元 */
body.theme-light .osp-leave:not(.osp-leave--end) { color: #d63f63 !important; }
body.theme-light .osp-rbtn--mic[aria-pressed="true"],
body.theme-light .osp-rbtn--mic[aria-pressed="true"] i { color: #d63f63 !important; }
body.theme-light .osp-rbtn--mic[aria-pressed="false"],
body.theme-light .osp-rbtn--mic[aria-pressed="false"] i { color: #04221a !important; }
body.theme-light .osp-role-badge--speaker { color: #0d84c9; }

/* --- ルーム: ジェスチャー起動ボタン (iOS マイク/自動再生の制約対策) --- */
/* 参加者が多い部屋でもグリッドの下に沈まないよう、コントロールバーの
   すぐ上に fixed で浮かせる (iOS はこのタップが無いと無音のままになる)。 */
.osp-enable { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-height, 56px) + 84px + env(safe-area-inset-bottom)); z-index: 60;
  display: block; padding: 14px 28px; border: 0; border-radius: 999px; font-size: 1.05rem; font-weight: 900; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #7c4dff, #b14dff); box-shadow: 0 10px 30px rgba(124,77,255,.45); cursor: pointer; animation: ospEnablePulse 1.6s ease-in-out infinite; }
.osp-enable:hover { filter: brightness(1.06); }
.osp-enable:disabled { opacity: .6; }
@keyframes ospEnablePulse { 0%,100% { box-shadow: 0 10px 26px rgba(124,77,255,.4); } 50% { box-shadow: 0 10px 40px rgba(124,77,255,.7); } }

/* --- ルーム: 下部コントロールバー (X 風: 左に退出、右に丸ボタン群) --- */
.osp-controls { position: fixed; left: 0; right: 0; z-index: 50; display: flex; gap: 10px; justify-content: space-between; align-items: center;
  /* モバイルは bottom-nav の上にドックする (bottom:0 だとナビと重なって両方押せない) */
  bottom: calc(var(--bottom-nav-height, 56px) + env(safe-area-inset-bottom));
  padding: 10px 16px; background: linear-gradient(180deg, transparent, var(--bg-primary, #15202b) 34%); }
@media (min-width: 768px) {
  /* デスクトップに bottom-nav は無いので、その分を足すと宙に浮く */
  .osp-enable { bottom: 84px; }
  /* デスクトップ: ルームを 1 画面分の縦 flex にして、バーを常に最下部へ置く。
     旧 sticky 単体はコンテンツが短いと画面中腹に浮いて下に大きな空白ができていた。 */
  .osp-room { display: flex; flex-direction: column; min-height: calc(100vh - 120px); padding-bottom: 0; }
  .osp-controls { position: sticky; bottom: 0; margin-top: auto;
    background: color-mix(in srgb, var(--bg-primary, #15202b) 80%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-primary); }
}
.osp-controls form { display: inline-flex; margin: 0; }
.osp-leave { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 999px; font-weight: 800; font-size: .9rem; cursor: pointer;
  border: 1px solid rgba(255,77,109,.5); background: rgba(255,77,109,.12); color: #ff4d6d; }
.osp-leave:hover { background: rgba(255,77,109,.2); }
.osp-leave--end { border: 0; background: linear-gradient(135deg, #ff4d6d, #e0245e); color: #fff; box-shadow: 0 6px 18px rgba(224,36,94,.4); }
.osp-rbtns { display: flex; gap: 10px; align-items: center; }
.osp-rbtn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-primary); background: var(--bg-card); color: var(--text-primary); font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition-fast), transform .1s; }
.osp-rbtn:hover { background: var(--bg-card-hover); }
.osp-rbtn:active { transform: scale(.92); }
.osp-rbtn--mic[aria-pressed="false"] { border: 0; background: linear-gradient(135deg, #34e39a, #19c37d); color: #04221a; box-shadow: 0 4px 14px rgba(25,195,125,.4); }
/* 配信/接続開始前 (disabled) は「マイク生きてる」緑発光を出さず中立表示 */
.osp-rbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.osp-rbtn--mic:disabled { background: var(--bg-card); border: 1px solid var(--border-primary); color: var(--text-muted); box-shadow: none; }
.osp-rbtn--mic[aria-pressed="true"] { background: rgba(224,36,94,.16); color: #ff6b8d; border-color: rgba(224,36,94,.4); }
.osp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.osp-join-form { flex: 1; display: flex; }
.osp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border: 0; border-radius: 999px; font-weight: 900; font-size: 1rem; color: #fff; background: linear-gradient(135deg, #7c4dff, #b14dff); box-shadow: 0 8px 24px rgba(124,77,255,.4); cursor: pointer; text-decoration: none; }
.osp-cta:hover { filter: brightness(1.06); }
.osp-cta--join { flex: 1; }

/* --- ルーム: 絵文字リアクション (ピッカー + 浮遊演出) --- */
.osp-react-pop { position: absolute; right: 12px; bottom: calc(100% + 8px); display: flex; gap: 4px; padding: 7px 10px; border-radius: 999px;
  background: var(--bg-card, #1c2733); border: 1px solid var(--border-primary); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.osp-react-emoji { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: transform .1s, background var(--transition-fast); }
.osp-react-emoji:hover { transform: scale(1.18); background: var(--bg-card-hover); }
.osp-react-emoji:active { transform: scale(.9); }
.osp-fx { position: absolute; right: 18px; bottom: 10px; width: 80px; height: 300px; pointer-events: none; z-index: 1200; /* バー(1100)/ナビ(1000)より前面。クリックは透過 */ }
.osp-fx-item { position: absolute; bottom: 0; right: 22px; font-size: 1.7rem; opacity: 0; animation: ospFloatUp var(--dur, 2.2s) ease-out forwards; will-change: transform, opacity; }
@keyframes ospFloatUp {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  12%  { transform: translate(calc(var(--dx, 0px) * .2), -36px) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), -300px) scale(1.25); opacity: 0; }
}

/* --- ルーム: 終了画面 --- */
.osp-ended-card { margin: 18px 16px; padding: 28px 20px; text-align: center; border-radius: 20px; border: 1px solid var(--border-primary); background: var(--bg-card); }
.osp-ended-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); background: var(--bg-card-hover, rgba(255,255,255,.06)); }
.osp-ended-card h3 { margin: 0 0 12px; font-size: 1.05rem; color: var(--text-primary); }
.osp-ended-stats { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: .85rem; color: var(--text-secondary); margin-bottom: 18px; }
.osp-ended-stats i { color: #b14dff; margin-right: 4px; }
.osp-ended-actions { display: flex; justify-content: center; }

/* 終了画面: コントロールバーが無いので下部退避余白は不要 */
.osp-room.osp-room--ended { padding-bottom: 24px; }

/* --- 動きを抑える設定 --- */
@media (prefers-reduced-motion: reduce) {
  .osp-enable,   .osp-card, .osp-card:hover { transform: none; }
}

/* --- 診断ログ (#oshaberiDebug があれば表示) --- */
.osp-debug { margin: 10px 16px; padding: 8px 10px; max-height: 200px; overflow-y: auto; border-radius: 10px;
  background: rgba(0,0,0,.5); border: 1px solid var(--border-primary); color: #9fe0c0;
  font-family: ui-monospace, Menlo, monospace; font-size: .68rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.osp-debug:empty { display: none; }

/* --- スマホ (ボトムナビ表示幅): バーをナビの上に退避 + 作成フォーム縦積み --- */
@media (max-width: 767px) {
  /* ボトムナビ (56px + safe-area, z-index:1000) の上にコントロールバーを重ねる */
  .osp-controls {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: 10px;
    z-index: 1100;
  }
  .osp-enable { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 84px); }
  /* バー + ナビの背後にグリッド末尾が隠れないよう下余白を確保 */
  .osp-room { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 140px); }
  /* 一覧: 作成フォームを縦積みにして開設ボタンを大きく */
  .osp-new { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; border-radius: 18px; }
  .osp-new-mic { display: none; }
  .osp-new-input { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--border-primary); border-radius: 999px; background: var(--bg-input, rgba(255,255,255,.04)); }
  .osp-new-btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 1rem; }
}
/* 極狭幅: リスナー時のバーは退出+丸ボタン4個 (~371px) 必要なので圧縮して収める */
@media (max-width: 389px) {
  .osp-controls { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .osp-rbtns { gap: 6px; }
  .osp-rbtn { width: 42px; height: 42px; }
  .osp-leave { padding: 10px 12px; font-size: .84rem; white-space: nowrap; }
}

/* ================================================================
 * §209. じゃんけん 本格演出 (チョップ + カウントダウン + 勝敗発光)
 * ================================================================ */
.jk-hands { position: relative; }
.jk-hand-icon { transition: transform .25s ease, box-shadow .25s ease, color .2s ease, filter .25s ease; will-change: transform; }
/* じゃん・けん の手を振るチョップ */
.jk-hand-icon.is-chop { animation: jkChop .32s ease-in-out infinite; }
@keyframes jkChop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(-14deg); } }
.jk-hand-ai .jk-hand-icon.is-chop { animation-name: jkChopR; }
@keyframes jkChopR { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(14deg); } }
/* 勝者は金色発光・拡大、敗者はグレーアウト、あいこは青パルス */
.jk-hand-icon.jk-win { color: #ffd166; box-shadow: 0 0 30px rgba(255,209,102,.75); transform: scale(1.14); }
.jk-hand-icon.jk-lose { filter: grayscale(1); opacity: .42; transform: scale(.92); }
.jk-hand-icon.jk-draw { box-shadow: 0 0 18px rgba(29,155,240,.55); }
/* カウントダウン (じゃん→けん→ぽん!) */
.jk-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 900; color: #fff; pointer-events: none; opacity: 0;
  text-shadow: 0 0 22px rgba(124,77,255,.85), 0 2px 6px rgba(0,0,0,.5); letter-spacing: .04em;
}
.jk-count.is-show { animation: jkCountPop .32s cubic-bezier(.2,1.3,.4,1); opacity: 1; }
@keyframes jkCountPop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* VS が勝敗で色変化 + フラッシュ */
.jk-vs { transition: color .2s ease; }
.jk-vs.is-win { color: #ffd166; }
.jk-vs.is-lose { color: #ff5a5a; }
.jk-vs.is-draw { color: #1d9bf0; }
.jk-vs.is-flash { animation: jkVsFlash .55s ease; }
@keyframes jkVsFlash { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }
/* 選択ボタンを大きくタップしやすく */
.jk-choice-row { gap: 12px; width: 100%; }
.jk-choice { flex: 1; flex-direction: column; gap: 4px; padding: 12px 8px; font-weight: 800; }
.jk-choice i { font-size: 1.5rem; }
.jk-choice:active:not(:disabled) { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { .jk-hand-icon.is-chop, .jk-count.is-show, .jk-vs.is-flash { animation: none; } }

/* ================================================================
 * §210. スクラッチ / じゃんけん / クラッシュ UI ブラッシュアップ
 *   見た目の高級化のみ (レイアウトは既存のスマホ規則を尊重)。
 *   ダーク/ライト両テーマで破綻しないよう各々 override を用意する。
 * ================================================================ */

/* ---- クラッシュ: 宇宙的なディスプレイ + グラデ倍率 + 艶ボタン ---- */
.cr-display {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,77,109,0.22), transparent 62%),
    linear-gradient(180deg, #090d1d, #0d1326 58%, #090e1f);
  border: 1px solid rgba(124,77,255,0.30);
  box-shadow: inset 0 0 44px rgba(124,77,255,0.12), 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}
.cr-display::before {            /* 奥行きを出すグリッド線 (下ほど濃く) */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; z-index: 0;
  background-image:
    linear-gradient(rgba(124,77,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,77,255,0.10) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.cr-mult {
  position: relative; z-index: 1;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 3.9rem; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #ffd2dc 58%, #ff7aa0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 14px rgba(255,90,130,0.5));
}
.cr-status-text { position: relative; z-index: 1; }
.cr.is-cashed .cr-mult {
  background: linear-gradient(180deg, #eafff5, #7bffc4 58%, #00d97e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(0,217,126,0.55));
}
.cr.is-crashed .cr-mult {
  background: linear-gradient(180deg, #ffffff, #ff8d8d 55%, #ff3a3a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,58,58,0.55));
}
.cr-btn { box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.cr-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.cr-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.cr-btn-cashout:not(:disabled) { animation: crCashPulse 1.05s ease-in-out infinite; }
@keyframes crCashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,217,126,.45); }
  50%      { box-shadow: 0 0 0 9px rgba(0,217,126,0); }
}
body.theme-light .cr-display {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,77,109,0.10), transparent 62%),
    linear-gradient(180deg, #f4f2ff, #eef2ff);
  border-color: rgba(124,77,255,0.22);
  box-shadow: inset 0 0 30px rgba(124,77,255,0.06), 0 8px 22px rgba(120,110,180,0.14);
}
body.theme-light .cr-display::before { opacity: .32; }
body.theme-light .cr-mult {
  background: linear-gradient(180deg, #ff5a8a, #e0265c 58%, #b3194a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(180,30,74,.25));
}

/* ---- スクラッチ: 金色の「あたり券」フレーム + 立体セル ---- */
.sc-board {
  padding: 10px; border-radius: 16px;
  background: linear-gradient(135deg, #2c2512, #1a1610);
  border: 1px solid rgba(255,200,90,0.42);
  box-shadow: inset 0 0 0 2px rgba(255,200,90,0.12), 0 10px 24px rgba(0,0,0,.32);
}
.sc-cell {
  border: 1px solid rgba(255,200,90,0.28);
  background: linear-gradient(135deg, #222732, #14171d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sc-cell.is-revealed {
  background: radial-gradient(circle at 50% 32%, #232834, #101319);
  box-shadow: inset 0 0 12px rgba(0,0,0,.5);
}
.sc-cell-sym { font-size: 2.4rem; }
.sc-cell.is-win { box-shadow: 0 0 0 2px rgba(255,215,0,.85), 0 0 22px rgba(255,215,0,.55); }
body.theme-light .sc-board {
  background: linear-gradient(135deg, #fff6df, #ffedc4);
  border-color: rgba(200,150,40,.5);
  box-shadow: inset 0 0 0 2px rgba(200,150,40,.14), 0 6px 18px rgba(180,140,40,.16);
}
body.theme-light .sc-cell { background: linear-gradient(135deg, #ffffff, #f3f0e6); border-color: rgba(200,150,40,.3); }
body.theme-light .sc-cell.is-revealed { background: radial-gradient(circle at 50% 32%, #ffffff, #efe9d6); box-shadow: inset 0 0 10px rgba(180,150,80,.18); }

/* ---- じゃんけん: ステージ + 立体ハンド + VS バッジ + 色付きボタン ---- */
.jk-hands {
  gap: 26px; padding: 22px 18px 28px; border-radius: 16px; width: 100%;
  background: radial-gradient(circle at 50% 122%, rgba(124,77,255,0.16), transparent 60%);
}
.jk-hand { position: relative; }
.jk-hand-icon {
  width: 104px; height: 104px; font-size: 2.8rem;
  background: radial-gradient(circle at 50% 34%, rgba(29,155,240,0.30), rgba(10,14,30,0.62));
  box-shadow: inset 0 2px 8px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.4), 0 0 24px rgba(29,155,240,.18);
}
.jk-hand-ai .jk-hand-icon {
  color: #c77bff;
  background: radial-gradient(circle at 50% 34%, rgba(196,60,240,0.28), rgba(10,14,30,0.62));
  box-shadow: inset 0 2px 8px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.4), 0 0 24px rgba(196,60,240,.18);
}
.jk-hand-icon::after {            /* 手の下の台座影 */
  content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 64%; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
}
.jk-hand-label { font-weight: 800; letter-spacing: .08em; }
.jk-vs {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff;
  background: linear-gradient(135deg, #ff4d6d, #c43cf0);
  box-shadow: 0 6px 16px rgba(196,60,240,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.jk-vs.is-win  { background: linear-gradient(135deg, #ffd166, #ff9f43); color: #3a2a00; }
.jk-vs.is-lose { background: linear-gradient(135deg, #ff5a5a, #c43c3c); color: #fff; }
.jk-vs.is-draw { background: linear-gradient(135deg, #1d9bf0, #5fa8ff); color: #fff; }
.jk-choice { border-width: 2px; transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.jk-choice[data-choice="0"] i { color: #ff9f43; }
.jk-choice[data-choice="1"] i { color: #1d9bf0; }
.jk-choice[data-choice="2"] i { color: #06d6a0; }
.jk-choice:hover:not(:disabled) { border-color: #c43cf0; background: rgba(196,60,240,.12); box-shadow: 0 0 0 3px rgba(196,60,240,.12); }
body.theme-light .jk-hands { background: radial-gradient(circle at 50% 122%, rgba(124,77,255,0.10), transparent 60%); }
body.theme-light .jk-hand-icon {
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 8px 18px rgba(120,110,180,.18), 0 0 18px rgba(29,155,240,.12);
}
body.theme-light .jk-hand-ai .jk-hand-icon {
  background: radial-gradient(circle at 50% 34%, rgba(196,60,240,.16), rgba(196,60,240,.04));
}
body.theme-light .jk-hand-icon::after { background: radial-gradient(ellipse, rgba(120,110,180,.22), transparent 70%); }

/* 極狭スマホ (≤360px) はハンドを少し縮めて 2 つ + VS が収まるように */
@media (max-width: 360px) {
  .jk-hand-icon { width: 88px; height: 88px; font-size: 2.3rem; }
  .jk-hands { gap: 16px; padding: 18px 12px 24px; }
}

/* モバイル app-mode (.gm-topbar) では §(i) のシアングラデが .cr-mult を上書き
   するため、降りた=緑 / 墜落=赤 の色フィードバックが消えていた。スマホでも
   反映されるよう、より高い詳細度で結果色グラデを足す (背景クリップ/text-fill は
   §210 / §(i) から継承)。 */
body:has(.gm-topbar) .cr.is-cashed .cr-mult {
  background: linear-gradient(135deg, #eafff5, #7bffc4 60%, #00d97e);
  text-shadow: 0 0 18px rgba(0,217,126,0.55);
}
body:has(.gm-topbar) .cr.is-crashed .cr-mult {
  background: linear-gradient(135deg, #ffffff, #ff8d8d 55%, #ff3a3a);
  text-shadow: 0 0 18px rgba(255,58,58,0.55);
}

/* ----- じゃんけん 仕上げ修正 (2026-06-11 スクショ指摘) ----- */
/* (1) global の .jk-bet-form{flex-wrap:nowrap!important} で「掛け金 + 入力 +
   グー/チョキ/パー」が 1 行に詰め込まれ、ボタンが細くなって「グー」が「グ／ー」、
   「チョキ」が縦 3 文字に割れていた。スマホでは form を wrap させ、選択 3 ボタンを
   独立行・全幅 3 等分にして文字が 1 行に収まるようにする。 */
@media (max-width: 768px) {
  #jkForm.jk-bet-form,
  body:has(.gm-topbar) #jkForm.jk-bet-form {
    flex-wrap: wrap !important;
    row-gap: 14px !important;
  }
  .jk-bet-form > label { flex: 0 1 auto; }
  .jk-bet-form .jk-choice-row { flex: 1 0 100%; width: 100%; }
  .jk-choice { white-space: nowrap; }
}
/* (2) 「じゃん・けん・ぽん」のカウント表示中は、中央の VS バッジと文字が重なって
   不自然なので VS バッジを一時的に隠す (カウントが終われば勝敗色で再表示)。 */
.jk-vs { transition: color .2s ease, opacity .15s ease; }
.jk-hands:has(.jk-count.is-show) .jk-vs { opacity: 0; }

/* (3) ハイ&ロー結果バナー: §156 の「コンパクト pill 強制 (inline-flex !important)」
   が勝つと小さなピルに潰れて不自然なので、ID 詳細度で打ち消してバナー表示にする。
   (アイコン + ラベル + 金額強調は gamble_highlow.js の showMsg が組み立てる) */
#hlMsg.hl-msg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  max-width: 300px !important;
  padding: 11px 18px !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  margin: 10px auto 4px !important;
}
#hlMsg.hl-msg[hidden] { display: none !important; }

/* ================================================================
 * §211. マインスイーパ ロビー (スタート前の見本盤面 + 倍率ブリーフィング)
 *   スタート前の画面が「何もなさすぎる」問題への対策。ゲームの見た目
 *   (見本盤面) と、地雷数に連動した倍率早見・リスク表示を出す。
 * ================================================================ */
.mi-lobby { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; }
/* 「遊び方の見本」ボックス: 実盤面と誤認しないよう、枠 + 見出し + リボン + 凡例で包む */
.mi-demo-box {
  width: 100%; max-width: 380px;
  border: 1px dashed rgba(255,185,71,.45); border-radius: 14px;
  padding: 12px; background: rgba(255,185,71,.04);
}
.mi-demo-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.mi-demo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .74rem; font-weight: 800;
  background: rgba(255,185,71,.16); color: #ffb947; border: 1px solid rgba(255,185,71,.4);
}
.mi-demo-title { font-size: .84rem; font-weight: 700; color: var(--text-secondary); line-height: 1.5; flex: 1; min-width: 180px; }
.mi-preview.is-demo { position: relative; opacity: .9; }
/* 盤面に斜めの「見本」リボン */
.mi-demo-ribbon {
  position: absolute; top: 10px; right: -34px; z-index: 2;
  transform: rotate(38deg);
  padding: 3px 40px; font-size: .76rem; font-weight: 900; letter-spacing: .25em;
  color: #1a1205; background: linear-gradient(135deg, #ffd166, #ffb947);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.mi-preview.is-demo { overflow: hidden; border-radius: 10px; }
.mi-demo-legend {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
  font-size: .8rem; color: var(--text-secondary); line-height: 1.5;
}
.mi-demo-legend li { display: flex; align-items: center; gap: 7px; }
.mi-demo-legend i { color: #ffb947; width: 16px; text-align: center; }
.mi-lg {
  display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex: 0 0 16px;
}
.mi-lg-gem  { background: radial-gradient(circle at 50% 38%, #0e4a34, #06281d); border: 1px solid #00d97e; box-shadow: 0 0 6px rgba(0,217,126,.5); }
.mi-lg-bomb { background: radial-gradient(circle at 50% 38%, #5a2630, #2a1418); border: 1px solid rgba(255,58,58,.6); box-shadow: 0 0 6px rgba(255,58,58,.4); }
.mi-paytable-cap {
  margin: 0 0 8px; font-size: .76rem; color: var(--text-secondary); text-align: center;
}
body.theme-light .mi-demo-box { background: rgba(200,140,30,.05); border-color: rgba(180,130,30,.45); }
/* 見本盤面: 実盤面 (.mi-board) と同じ 5×5 比率・タイル質感のミニ版 */
.mi-preview {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  width: 100%; max-width: 380px; aspect-ratio: 1 / 1;
}
.mi-pv-tile {
  position: relative; border-radius: 8px;
  background: linear-gradient(180deg, #2c333d 0%, #1a1d23 100%);
  border: 1px solid rgba(255,185,71,0.25);
}
/* 未開タイルに「?」をうっすら + ゆっくり明滅で生きてる感 */
.mi-pv-tile:not(.is-gem):not(.is-bomb)::after {
  content: "?"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.28); font-weight: 800; font-size: 1.1rem;
  animation: miPvBreath 2.6s ease-in-out infinite;
}
@keyframes miPvBreath { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.mi-pv-tile.is-gem {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><polygon points='14,9 34,9 42,19 24,45 6,19' fill='%2300d97e'/><polygon points='14,9 34,9 24,19' fill='%235bffc0'/><polygon points='14,9 24,19 6,19' fill='%2300b56a'/><polygon points='34,9 42,19 24,19' fill='%2300a862'/><polygon points='6,19 24,19 24,45' fill='%2300c873'/><polygon points='42,19 24,19 24,45' fill='%23009d5a'/><polygon points='20,11 28,11 24,16' fill='%23eafff7' opacity='0.85'/></svg>") center/58% no-repeat,
    radial-gradient(circle at 50% 38%, #0e4a34, #06281d);
  border-color: #00d97e;
}
.mi-pv-tile.is-gem em {
  position: absolute; right: 3px; bottom: 3px; font-style: normal;
  font-size: .58rem; font-weight: 800; line-height: 1;
  padding: 2px 4px; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #7bffc4;
}
.mi-pv-tile.is-glow { animation: miPvGlow 1.8s ease-in-out infinite; }
@keyframes miPvGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(0,217,126,0); }
  50%      { box-shadow: 0 0 16px rgba(0,217,126,.55); }
}
.mi-pv-tile.is-bomb {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect x='24' y='10' width='6' height='7' rx='2' fill='%23454e5c'/><path d='M29 12 Q38 5 41 12' stroke='%23c8922e' stroke-width='2.4' fill='none' stroke-linecap='round'/><circle cx='41.5' cy='11' r='3.2' fill='%23ffd166'/><circle cx='41.5' cy='11' r='1.5' fill='%23fff6db'/><circle cx='22' cy='30' r='14' fill='%23222831'/><ellipse cx='17' cy='25' rx='4.5' ry='3' fill='%237a8696' opacity='0.6'/></svg>") center/56% no-repeat,
    radial-gradient(circle at 50% 38%, #5a2630, #2a1418);
  border-color: rgba(255,58,58,.55); opacity: .85;
}
/* ブリーフィング: リスクバッジ + 倍率早見テーブル */
.mi-briefing {
  width: 100%; max-width: 380px; border-radius: 12px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border-primary);
}
.mi-brief-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mi-risk {
  padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap;
}
.mi-risk.is-low  { background: rgba(0,217,126,.16); color: #00d97e; border: 1px solid rgba(0,217,126,.4); }
.mi-risk.is-mid  { background: rgba(255,185,71,.16); color: #ffb947; border: 1px solid rgba(255,185,71,.4); }
.mi-risk.is-high { background: rgba(255,58,58,.16);  color: #ff5a5a; border: 1px solid rgba(255,58,58,.45); }
.mi-brief-safe { font-size: .82rem; color: var(--text-secondary); white-space: nowrap; }
.mi-brief-safe strong { color: var(--text-primary); font-size: 1rem; }
.mi-paytable {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mi-paytable li {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-primary);
}
.mi-paytable li span { font-size: .7rem; color: var(--text-secondary); white-space: nowrap; }
.mi-paytable li strong { font-size: .92rem; color: #ffb947; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-paytable li.is-max { background: rgba(255,185,71,.10); border-color: rgba(255,185,71,.45); }
.mi-paytable li.is-max strong { color: #ffd166; text-shadow: 0 0 10px rgba(255,200,80,.45); }
/* ライトテーマ */
body.theme-light .mi-pv-tile { background: linear-gradient(180deg, #eef1f6, #dde2ea); border-color: rgba(180,140,40,.35); }
body.theme-light .mi-pv-tile:not(.is-gem):not(.is-bomb)::after { color: rgba(0,0,0,.30); }
body.theme-light .mi-paytable li { background: rgba(0,0,0,.03); }
/* 狭幅: 早見は 2×2 に畳む (×2,256 等の桁が潰れないように) */
@media (max-width: 400px) {
  .mi-paytable { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
 * §163. 博打ゲーム個別ページの全画面化 (PC)
 *   ユーザ要望: マス消し (game.html シェル) と同様に、各ゲームページでは
 *   左ナビ / 右トレンド / 上部ヘッダを隠して全画面にする。
 *   ハブ (tab=gamble のゲーム選択画面) は 3-col のまま残す。
 *   ゲームページの判定は wrapper クラス (.sl/.ch/...) の存在で行う
 *   (game.css の body:has(.gk-wrap) 方式の踏襲)。
 * ================================================================ */
body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .col-nav,
body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .col-aside,
body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .col-main-header,
body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .push-nudge-card {
  display: none !important;
}
body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .col-main {
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
}
body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .layout-3col {
  /* 3 列グリッドを 1 列化 + コンテナの max-width 解除。
     これをしないと col-main が中央列の位置に残り、左寄りに見える。 */
  grid-template-columns: 1fr !important;
  max-width: none !important;
}
/* 全画面化したぶん、ゲーム本体は中央寄せの読みやすい幅に保つ。
   §158 (スマホ全画面化) が .wb-wrap { margin: 0 !important } を掛けるため、
   こちらも !important + より高い詳細度 (:has 内 2 クラス) で打ち勝つ。 */
@media (min-width: 768px) {
  body:has(.wb-wrap :is(.sl, .ch, .hl, .cr, .mi, .gc, .ru, .sc, .jk, .rp, .sw, .ng, .lot)) .wb-wrap {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================================================================
 * §212. クラッシュ / ストップウォッチ ライトモード作り込み
 *   ライトでステージが「白飛び」「暗いまま」になっていた両画面を、
 *   読みやすく意図的な意匠に仕立てる。ダークは既存のまま不変。
 * ================================================================ */

/* ---- クラッシュ: ライトは「取引端末」風。グリッドと折れ線を視認可能に ---- */
body.theme-light .cr-display {
  background:
    radial-gradient(circle at 50% 8%, rgba(255,77,109,0.12), transparent 60%),
    linear-gradient(180deg, #fbfaff, #eef0fc);
  border: 1px solid rgba(124,77,255,0.30);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 26px rgba(124,77,255,0.07), 0 8px 22px rgba(120,110,180,0.16);
}
body.theme-light .cr-display::before {
  opacity: .6;
  background-image:
    linear-gradient(rgba(124,77,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,77,255,0.16) 1px, transparent 1px);
}
/* ステージ内の説明文 (10356 の白固定を上書き) — 暗背景でないので濃色で読ませる */
body.theme-light .cr-stage .cr-status-text { color: #7a3a5c !important; font-weight: 600; }
body.theme-light .cr-graph { filter: drop-shadow(0 1px 3px rgba(255,77,109,0.35)); }

/* ---- ストップウォッチ: ライトは本物のデジタル時計風 LCD パネル ---- */
body.theme-light .sw-display {
  background:
    repeating-linear-gradient(0deg, rgba(0,120,70,0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #ecfbf2, #d6f3e3);
  border: 1px solid rgba(0,150,90,0.30);
  border-radius: 16px;
  box-shadow:
    inset 0 2px 12px rgba(0,120,70,0.12),
    inset 0 0 0 4px rgba(255,255,255,0.45),
    0 8px 22px rgba(80,150,110,0.16);
}
body.theme-light .sw-counter {
  color: #07955c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
/* 9600 の「白いグラデ clip」(#swCounter) を解除して LCD 上で濃緑に。
   id セレクタに勝つため theme-light + :has + id で上書きする。 */
body.theme-light:has(.gm-topbar) #swCounter {
  background: none;
  -webkit-text-fill-color: #07955c;
  color: #07955c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
/* 10356 の白固定を上書きして LCD 上で読ませる */
body.theme-light .sw-stage .sw-status-text { color: #2e7d5b !important; font-weight: 600; }

/* ================================================================
 * §164. くじ引きヒーローの作り込み + モバイル全画面時の救済
 * ================================================================ */
/* クローバーをふわっと光らせる */
.lot-hero-icon { animation: lotCloverGlow 2.6s ease-in-out infinite; }
@keyframes lotCloverGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0,217,126,0.25)); transform: rotate(0deg); }
  50%      { filter: drop-shadow(0 0 12px rgba(0,217,126,0.6)); transform: rotate(-8deg); }
}
/* 残り枠の進捗バー (--lot-q: 0〜15 を template が埋める) */
.lot-quota-bar {
  display: block; width: 100%; height: 6px; margin-top: 6px;
  border-radius: 999px; background: rgba(127,127,127,0.18); overflow: hidden;
}
.lot-quota-fill {
  display: block; height: 100%;
  width: calc(var(--lot-q, 0) / 15 * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #00d97e, #00e5ff);
  box-shadow: 0 0 8px rgba(0,217,126,0.5);
  transition: width 0.4s ease;
}
/* 「あと N 投稿で引けます」等の待機ボタンに微パルス (死んで見えないように) */
.lot-btn-disabled {
  animation: lotWaitPulse 2.4s ease-in-out infinite;
}
@keyframes lotWaitPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
/* モバイル全画面化 (§158) で .lot の中身が多いと潰れて埋もれるため、
   くじだけは縦スクロール許可 + 上詰めにする (ガイドボタン/残高が隠れない) */
body:has(.lot) .lot {
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ================================================================
 * §165. マインスイーパ本格化: 隣接地雷数の古典配色 + 旗
 * ================================================================ */
.mi-tile.is-revealed {
  font-weight: 900;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  cursor: default;
}
body.theme-light .mi-tile.is-revealed { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); }
/* 古典 minesweeper の数字配色 (ダークでも視認できる明るめ調整) */
.mi-tile.mi-a1 { color: #4d9fff; }
.mi-tile.mi-a2 { color: #2ecc71; }
.mi-tile.mi-a3 { color: #ff5a5a; }
.mi-tile.mi-a4 { color: #9b6dff; }
.mi-tile.mi-a5 { color: #e08e3c; }
.mi-tile.mi-a6 { color: #00d0d0; }
.mi-tile.mi-a7 { color: #f0f0f0; }
.mi-tile.mi-a8 { color: #aab2c4; }
body.theme-light .mi-tile.mi-a1 { color: #1d6dd0; }
body.theme-light .mi-tile.mi-a2 { color: #168a4a; }
body.theme-light .mi-tile.mi-a3 { color: #d03434; }
body.theme-light .mi-tile.mi-a4 { color: #6a3fd0; }
body.theme-light .mi-tile.mi-a5 { color: #a05a10; }
body.theme-light .mi-tile.mi-a6 { color: #0a9b9b; }
body.theme-light .mi-tile.mi-a7 { color: #222; }
body.theme-light .mi-tile.mi-a8 { color: #5b6985; }
/* 旗 */
.mi-tile.is-flagged {
  background: rgba(255,185,71,0.14);
  border-color: rgba(255,185,71,0.55);
  font-size: 1.05rem;
}
/* 連鎖開放の軽いポップ */
.mi-tile.is-revealed { animation: miPop 0.18s ease-out; }
@keyframes miPop {
  0% { transform: scale(0.7); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

/* オセロ / チェス タイルの個別カラー (博打ハブ) */
.gamble-tile--othello .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(0,176,112,0.30), rgba(0,176,112,0.06));
  color: #2ad18c;
}
.gamble-tile--othello:hover { border-color: rgba(42,209,140,0.6); box-shadow: 0 8px 24px rgba(42,209,140,0.18); }
.gamble-tile--chess .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(236,217,185,0.30), rgba(169,122,79,0.10));
  color: #ecd9b9;
}
.gamble-tile--chess:hover { border-color: rgba(236,217,185,0.55); box-shadow: 0 8px 24px rgba(169,122,79,0.25); }
body.theme-light .gamble-tile--othello .gamble-tile-icon { background: #d4f5e6; color: #008557; }
body.theme-light .gamble-tile--chess   .gamble-tile-icon { background: #f3e7d3; color: #8a5a2b; }

.gamble-tile--shogi .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(232,201,138,0.32), rgba(176,124,62,0.10));
  color: #e8c98a;
}
.gamble-tile--shogi:hover { border-color: rgba(232,201,138,0.55); box-shadow: 0 8px 24px rgba(176,124,62,0.25); }
body.theme-light .gamble-tile--shogi .gamble-tile-icon { background: #f3e7d3; color: #9a6a2b; }

.gamble-tile--mahjong .gamble-tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(0,160,90,0.30), rgba(0,160,90,0.08));
  color: #2ad18c;
}
.gamble-tile--mahjong:hover { border-color: rgba(42,209,140,0.55); box-shadow: 0 8px 24px rgba(0,160,90,0.22); }
body.theme-light .gamble-tile--mahjong .gamble-tile-icon { background: #d4f5e6; color: #00744c; }

/* §165 追補: 開いたマスを古典らしく明確に「凹んだ」見た目へ + カウンタ */
.mi-tile.is-revealed {
  background: #11141c !important;
  border-color: rgba(255,255,255,0.05) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.55) !important;
  transform: none !important;
}
body.theme-light .mi-tile.is-revealed {
  background: #e6e9f0 !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.18) !important;
}
/* コード操作のため開いた数字もタップ可能 — hover で軽く明示 */
.mi-tile.is-revealed:not(:disabled) { cursor: pointer; }
.mi-counter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 0.88rem; font-weight: 700;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-primary);
}
.mi-counter strong { font-variant-numeric: tabular-nums; }
body.theme-light .mi-counter { background: rgba(0,0,0,0.04); }

/* ================================================================
 * マインスイーパ クラシック UI 完全版
 *   - 未開放: 凸ベベル (古典の盛り上がったタイル)
 *   - 開放済: 凹んだ平面 + 古典配色の数字
 *   - 旗 🚩 / 正解旗 / 誤旗 ✕ / 💣 地雷 / 💥 爆発 は SVG アート
 *   - HUD: LCD 風カウンタ (残り地雷 / タイマー)
 *   §165 追補の !important を上書きするため必ずファイル末尾に置くこと。
 * ================================================================ */
.mi-board {
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #232833, #171b23);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
}
body.theme-light .mi-board {
  background: linear-gradient(180deg, #aeb6c4, #98a1b0);
  border-color: rgba(0,0,0,0.12);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.12);
}
/* 未開放タイル: 古典の凸ベベル */
.mi-tile {
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.45);
  background: linear-gradient(180deg, #3a4250 0%, #2a303c 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.42);
  transition: filter 0.1s, transform 0.1s;
}
.mi-tile:hover:not(:disabled):not(.is-revealed) {
  background: linear-gradient(180deg, #465061 0%, #323948 100%);
  transform: none;
}
.mi-tile:active:not(:disabled):not(.is-revealed) {
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
  filter: brightness(0.9);
}
body.theme-light .mi-tile {
  background: linear-gradient(180deg, #d6dbe4 0%, #bfc6d2 100%);
  border-color: rgba(0,0,0,0.25);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.75),
    inset -2px -2px 0 rgba(0,0,0,0.22);
}
body.theme-light .mi-tile:hover:not(:disabled):not(.is-revealed) {
  background: linear-gradient(180deg, #e2e6ee 0%, #cdd3de 100%);
}
/* 開放済み: 凹んだ平面 (数字の色は既存 .mi-aN がそのまま乗る) */
.mi-tile.is-revealed {
  background: #131722 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6) !important;
  transform: none !important;
}
body.theme-light .mi-tile.is-revealed {
  background: #e8ebf1 !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important;
}
/* 旗 🚩 (赤い三角旗 + ポール + 台座) */
.mi-tile.is-flagged {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M26 7v28' stroke='%23d8dee9' stroke-width='3' stroke-linecap='round'/><path d='M26 8 L10 14.5 L26 21 Z' fill='%23ff3a3a'/><path d='M26 8 L10 14.5 L26 21' fill='none' stroke='%23c81e1e' stroke-width='1'/><rect x='16' y='35' width='20' height='4' rx='1.5' fill='%23566070'/><rect x='13' y='39' width='26' height='3' rx='1.5' fill='%23454e5c'/></svg>") center/72% no-repeat,
    linear-gradient(180deg, #3a4250 0%, #2a303c 100%) !important;
  border: 1px solid rgba(255,58,58,0.5) !important;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.42) !important;
  color: transparent !important;
}
body.theme-light .mi-tile.is-flagged {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M26 7v28' stroke='%23394150' stroke-width='3' stroke-linecap='round'/><path d='M26 8 L10 14.5 L26 21 Z' fill='%23e02424'/><rect x='16' y='35' width='20' height='4' rx='1.5' fill='%23566070'/><rect x='13' y='39' width='26' height='3' rx='1.5' fill='%23454e5c'/></svg>") center/72% no-repeat,
    linear-gradient(180deg, #d6dbe4 0%, #bfc6d2 100%) !important;
  border-color: rgba(200,30,30,0.55) !important;
}
/* 正しかった旗 (終局時): 緑の縁取りで「正解」を示す */
.mi-tile.is-flag-good {
  border-color: rgba(0,217,126,0.75) !important;
  box-shadow:
    0 0 0 2px rgba(0,217,126,0.35),
    inset 2px 2px 0 rgba(255,255,255,0.16),
    inset -2px -2px 0 rgba(0,0,0,0.42) !important;
}
/* 誤旗 (終局時): 地雷ではなかった旗 → 💣 + 赤い ✕ (§9) */
.mi-tile.is-flag-wrong {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='27' r='13' fill='%23222831' opacity='0.55'/><rect x='21' y='9' width='6' height='6' rx='2' fill='%23454e5c' opacity='0.55'/></svg>") center/66% no-repeat,
    #131722 !important;
  border: 1px solid rgba(255,58,58,0.6) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6) !important;
  color: transparent !important;
}
body.theme-light .mi-tile.is-flag-wrong { background-color: #e8ebf1 !important; }
.mi-tile.is-flag-wrong::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900; color: #ff3a3a;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* 地雷 💣 (終局時の公開) */
.mi-tile.is-mine {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect x='24' y='10' width='6' height='7' rx='2' fill='%23454e5c'/><path d='M29 12 Q38 5 41 12' stroke='%23c8922e' stroke-width='2.4' fill='none' stroke-linecap='round'/><circle cx='41.5' cy='11' r='3.2' fill='%23ffd166'/><circle cx='41.5' cy='11' r='1.5' fill='%23fff6db'/><circle cx='22' cy='30' r='14' fill='%23222831'/><ellipse cx='17' cy='25' rx='4.5' ry='3' fill='%237a8696' opacity='0.6'/></svg>") center/64% no-repeat,
    #131722 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6) !important;
  color: transparent !important;
}
body.theme-light .mi-tile.is-mine { background-color: #cfd5de !important; }
/* 爆発した地雷 💥 (踏んだマス): 赤背景 + 爆発アニメ */
.mi-tile.is-busted {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><polygon points='24,3 28,16 41,8 33,20 46,24 33,28 41,40 28,32 24,45 20,32 7,40 15,28 2,24 15,20 7,8 20,16' fill='%23ffd166'/><polygon points='24,10 26.5,18 35,13 30,21 38,24 30,27 35,35 26.5,30 24,38 21.5,30 13,35 18,27 10,24 18,21 13,13 21.5,18' fill='%23ff8c42'/><circle cx='24' cy='24' r='6.5' fill='%23fff6db'/></svg>") center/82% no-repeat,
    radial-gradient(circle at 50% 45%, #ff5a5a, #9d1414) !important;
  border: 1px solid #ff3a3a !important;
  box-shadow: 0 0 14px rgba(255,58,58,0.55) !important;
  color: transparent !important;
  animation: mi-explode 0.5s ease-out;
}
/* HUD: LCD 風カウンタ */
.mi-lcd {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: #0a0c10;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
}
.mi-lcd-ico { font-size: 0.85rem; line-height: 1; }
.mi-lcd strong {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.15rem; font-weight: 800; letter-spacing: 2px;
  /* LCD の赤数字は黒ベゼル前提の固定色。テーマ/カスタムカラー/グラデ文字
     (background-clip:text + text-fill-color は継承される) のどの経路にも
     負けないよう !important + fill-color まで明示する。 */
  color: #ff4438 !important;
  -webkit-text-fill-color: #ff4438 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: 0 0 6px rgba(255,59,48,0.6);
  font-variant-numeric: tabular-nums;
}
body.theme-light .mi-lcd { background: #14171c; border-color: rgba(0,0,0,0.3); }
.mi-actions { flex-wrap: wrap; gap: 10px 14px; }

/* --- マインスイーパ ライトモード完全対応 ------------------------------
   ダーク前提の明るい強調色 (#ffb947 系 / #00d97e 系 / #ff5a5a 系) は
   白背景ではコントラスト不足になるため、ライトでは濃色に振り替える。 */
body.theme-light .mi-head > i { color: #b07908; }
body.theme-light .mi-stat-v strong { color: #9a6a00; }
body.theme-light .mi-current strong { color: #9a6a00; }
body.theme-light .mi-msg.is-err { background: rgba(208,52,52,0.10); color: #b91c1c; }
body.theme-light .mi-msg.is-ok  { background: rgba(22,138,74,0.10); color: #137a42; }
body.theme-light .mi-risk.is-low  { background: rgba(22,138,74,0.12); color: #137a42; border-color: rgba(22,138,74,0.4); }
body.theme-light .mi-risk.is-mid  { background: rgba(176,121,8,0.12);  color: #9a6a00; border-color: rgba(176,121,8,0.4); }
body.theme-light .mi-risk.is-high { background: rgba(208,52,52,0.10);  color: #b91c1c; border-color: rgba(208,52,52,0.4); }
body.theme-light .mi-paytable li strong { color: #9a6a00; }
body.theme-light .mi-paytable li.is-max { background: rgba(176,121,8,0.08); border-color: rgba(176,121,8,0.45); }
body.theme-light .mi-paytable li.is-max strong { color: #8a5a00; text-shadow: none; }
body.theme-light .mi-demo-badge { background: rgba(176,121,8,0.12); color: #9a6a00; border-color: rgba(176,121,8,0.4); }
body.theme-light .mi-demo-legend i { color: #9a6a00; }
body.theme-light .mi-brief-safe strong { color: #1a1d27; }
/* スマホ全画面 (app-mode) の現倍率: 白→水色グラデ文字はライトでは
   ほぼ見えないため、濃紺→青のグラデに差し替える */
body.theme-light:has(.gm-topbar) #miMult {
  background: linear-gradient(135deg, #14254d, #1d6dd0 60%, #0e9aa7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
/* 終局公開時の地雷タイル: ライトでは凹み地に合わせて薄いグレー地 */
body.theme-light .mi-tile.is-flag-wrong { background-color: #e8ebf1 !important; }
/* 誤旗の ✕ はライトでも赤のまま (背景が薄いので影だけ無効化) */
body.theme-light .mi-tile.is-flag-wrong::after { text-shadow: none; color: #d03434; }

/* ================================================================
 * PC サイドバー「もっと見る」ポップオーバー (X 風)
 *   col-nav 内なのでスマホでは sidebar 自体が display:none → PC 専用。
 *   二次メニュー (お喋り部屋/公共注釈/さんぽ/森岡証券/設定) を上方向に出す。
 * ================================================================ */
.nav-more { position: relative; }
.nav-more-btn {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left;
}
.nav-more-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 4px; right: 4px;
  background: rgba(15, 18, 50, 0.98);
  border: 1px solid rgba(124, 77, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 120;
  padding: 8px 0;
  animation: popoverFadeIn 0.18s ease;
}
.nav-more-popover .popover-action {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  color: var(--text-primary); text-decoration: none;
  font-size: 0.98rem; font-weight: 600;
  transition: background 0.15s;
}
.nav-more-popover .popover-action:hover { background: rgba(0, 229, 255, 0.08); }
.nav-more-popover .popover-action i,
.nav-more-popover .popover-action svg,
.nav-more-popover .popover-action .cn-icon-gavel {
  width: 24px; text-align: center; font-size: 1.2rem; flex-shrink: 0;
}
/* アイコンは全て白に統一 (各種テーマ色を上書き) */
.nav-more-popover .popover-action i,
.nav-more-popover .popover-action svg,
.nav-more-popover .popover-action .cn-icon-gavel {
  color: #fff !important;
  fill: #fff !important;
}
body.theme-light .nav-more-popover {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(124, 77, 255, 0.22);
  box-shadow: 0 16px 40px rgba(50, 80, 150, 0.18);
}
body.theme-light .nav-more-popover .popover-action { color: #15181e; }
body.theme-light .nav-more-popover .popover-action:hover { background: rgba(0, 0, 0, 0.05); }
/* ライトモードは白背景なのでアイコンを濃色に (白だと公共注釈 SVG 等が消える) */
body.theme-light .nav-more-popover .popover-action i,
body.theme-light .nav-more-popover .popover-action svg,
body.theme-light .nav-more-popover .popover-action .cn-icon-gavel {
  color: #15181e !important;
  fill: #15181e !important;
}

/* ================================================================
 * 森岡商店 → 現況届け 統合のお知らせカード (kotoba_bank?tab=shop)
 * ================================================================ */
.wb-notice-card {
  text-align: center;
  margin: 0 auto 16px;
  max-width: 560px;
  padding: 24px 22px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.wb-notice-ic {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,229,255,0.12); color: var(--accent-cyan);
  font-size: 1.5rem;
}
.wb-notice-ic--soft { background: rgba(176,121,8,0.14); color: #ffb947; }
body.theme-light .wb-notice-ic--soft { color: #9a6a00; }
.wb-notice-h { margin: 0 0 10px; font-size: 1.12rem; font-weight: 800; color: var(--text-primary); }
.wb-notice-p { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); }
.wb-notice-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff; font-weight: 800; text-decoration: none;
}
.wb-notice-btn:hover { filter: brightness(1.08); }
.wb-notice-card--soft { background: rgba(255,185,71,0.05); border-color: rgba(176,121,8,0.35); }
.wb-notice-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 800;
  background: rgba(176,121,8,0.14); color: #ffb947;
  border: 1px solid rgba(176,121,8,0.4);
}
body.theme-light .wb-notice-tag { color: #9a6a00; }

/* ================================================================
 * 検索ディスカバリー (X 風): ニュースカード + タブ
 * ================================================================ */
.disc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.disc-tabs .tab { white-space: nowrap; }
.news-card {
  display: block; text-decoration: none;
  padding: 14px 16px; border-bottom: 1px solid var(--border-primary);
  transition: background 0.12s;
}
.news-card:hover { background: rgba(255,255,255,0.04); }
body.theme-light .news-card:hover { background: rgba(0,0,0,0.03); }
.news-card-title {
  font-size: 1.0rem; font-weight: 800; line-height: 1.45; color: var(--text-primary);
}
.news-card-summary {
  margin-top: 4px; font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary);
}
.news-card-meta {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 0.76rem; color: var(--text-secondary);
}
.news-card-fav { border-radius: 3px; flex: 0 0 16px; }
.news-card-source { font-weight: 700; }
.news-card-ext { margin-left: auto; color: var(--accent-cyan); font-weight: 700; }
.news-card-ext i { font-size: 0.7rem; margin-right: 3px; }
.disc-news-note {
  padding: 10px 16px; font-size: 0.74rem; line-height: 1.6;
  color: var(--text-secondary); border-bottom: 1px solid var(--border-primary);
}
.disc-more {
  display: block; padding: 12px 16px; text-align: center;
  color: var(--accent-cyan); font-weight: 700; text-decoration: none;
  font-size: 0.9rem;
}
.disc-more:hover { text-decoration: underline; }

/* ============================================================
 * フラッシュ/バナー統一ピル (base.html 系)
 * 「新しい投稿はありません」トーストと同一の中央グラデピルに揃える。
 * !important で各既存定義 + theme-light 上書きに勝たせ、ライト/ダーク同一に。
 * (.flash は php-style.css / .gk-flash は game.css / .admin-flash は admin.css 側)
 * ========================================================== */
.wb-flash,
.danwa-flash, .danwa-flash--ok, .danwa-flash--err,
.settings-success:not(:has(h3, p)), .v2-success:not(:has(h3, p)) {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(0,229,255,0.95), rgba(124,77,255,0.95)) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,229,255,0.30), 0 4px 12px rgba(0,0,0,0.22) !important;
}
/* 既存 FA アイコン (<i>) はピル上で白く */
.wb-flash > i, .danwa-flash > i { color: #ffffff !important; flex-shrink: 0; }
/* エラー系は同形・赤グラデ */
.wb-flash.is-error,
.danwa-flash--err {
  background: linear-gradient(135deg, rgba(255,77,109,0.97), rgba(214,40,90,0.97)) !important;
  box-shadow: 0 8px 24px rgba(255,77,109,0.30), 0 4px 12px rgba(0,0,0,0.22) !important;
}
/* アイコンを持たない成功バナーに独自 ✓ アイコンを付与 */
.settings-success:not(:has(h3, p)):not(:has(> i))::before,
.v2-success:not(:has(h3, p)):not(:has(> i))::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; display: inline-block;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* ===== §215. 博打: ステータスチップ + 今日の道楽 (2026-07-03) =====
   説明文はガイドへ集約し、ハブは数字だけのチップ列 (タップでガイド)。 */
.gm-qc-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.gm-qc {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .74rem; font-weight: 700; padding: 6px 11px; border-radius: 999px;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border-color, rgba(255,255,255,.1));
  color: var(--text-secondary, inherit);
}
.gm-qc:active { transform: scale(.96); }
.gm-qc strong { font-weight: 800; }
.gm-qc i { color: #ffd166; }
.gm-qc-heat i { color: #ff9c53; }
.gm-qc-valve i { color: #4cc9a8; }
.gm-qc-katsu { border-color: rgba(255,93,126,.5); color: #ff5d7e; }
.gm-qc-katsu i { color: #ff5d7e; }
.gm-qc-sub {
  font-size: .64rem; font-weight: 700; color: var(--text-muted);
  padding-left: 6px; border-left: 1px solid var(--border-color, rgba(255,255,255,.12));
}
.gm-qc-katsu .gm-qc-sub { color: #ff5d7e; opacity: .85; }
.gm-today {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px;
}
.gm-today-item {
  font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border-color, rgba(255,255,255,.09));
  color: var(--text-secondary, inherit); display: inline-flex; align-items: center; gap: 5px;
}
.gm-today-item.is-plus { color: #4cc9a8; border-color: rgba(76,201,168,.4); }
.gm-today-item.is-minus { color: #ff5d7e; border-color: rgba(255,93,126,.35); }
.gm-today-item.is-best { color: #ffd166; border-color: rgba(255,209,102,.4); }

/* ===== §216. 博打: HUD / ベットチップ / サウンドトグル / 天井ピル (2026-07-03) ===== */
.gm-hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 8px 0 2px; padding: 8px 12px; border-radius: 12px;
  background: var(--bg-elevated, rgba(255,255,255,.04));
  border: 1px solid var(--border-color, rgba(255,255,255,.09));
  font-size: .74rem;
}
.gm-hud-max { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.gm-hud-max i { color: #ffd166; }
.gm-hud-max strong { font-size: .95rem; }
.gm-hud-boost {
  font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(108,198,255,.14); color: #6cc6ff; border: 1px solid rgba(108,198,255,.3);
}
.gm-hud-boost.is-max { background: rgba(255,209,102,.16); color: #ffd166; border-color: rgba(255,209,102,.4); }
.gm-hud-note { color: var(--text-muted); font-size: .68rem; }

.gm-bet-chips { display: flex; gap: 6px; flex-basis: 100%; width: 100%; margin-top: 6px; }
.gm-bet-chip {
  flex: 1; min-width: 0; padding: 6px 0; border-radius: 9px; cursor: pointer;
  font-size: .74rem; font-weight: 800; letter-spacing: .03em;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border-color, rgba(255,255,255,.12));
  color: var(--text-secondary, inherit);
  transition: transform .12s ease, border-color .12s ease;
}
.gm-bet-chip:active { transform: scale(.94); }
.gm-bet-chip.is-max { color: #ffd166; border-color: rgba(255,209,102,.45); }

.gm-sound-toggle {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border-color, rgba(255,255,255,.12));
  color: var(--text-secondary, inherit); font-size: .82rem; margin-left: auto;
}
.gm-sound-toggle.is-muted { color: var(--text-muted); opacity: .75; }
.gm-guide-btn ~ .gm-sound-toggle, .gm-sound-toggle + .gm-guide-btn { margin-left: 8px; }

.gc-pity-pill {
  margin: 8px auto 0; width: max-content; max-width: 100%;
  padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: rgba(255,156,83,.12); color: #ff9c53; border: 1px solid rgba(255,156,83,.35);
  text-align: center;
}