/*
 * テスト環境ゲームページ専用スタイル（レイアウト土台を含む単体バンドル）
 * 異世界衰弱・異世界シューティング・ポイントランキング用。
 * テンプレートでは本ファイルと test-game-card-fantasybattle.css のみを読み込む（main-layout.css は不要）。
 */

/* === ゲームページ用レイアウト土台（main-layout.css からの抜粋・テスト環境ゲーム3ページのみで使用） === */
/* === ベース・テーマ（未指定時用） === */
:root {
  --bg: #f5f5f8;
  --card: #ffffff;
  --sidebar-brand-bg: #fcfcfc;
  --text: #1a1a1e;
  --muted: #5c5c6a;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --border: #e2e4e8;
}
* { box-sizing: border-box; }
html {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
.page-wrapper { display: flex; min-height: 100vh; }
.u-nowrap { white-space: nowrap !important; }
.u-flex { display: flex !important; }
.u-flex-nowrap { display: flex !important; flex-wrap: nowrap !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-items-center { align-items: center !important; }
.u-gap-2 { gap: 0.5rem !important; }
.u-gap-3 { gap: 0.75rem !important; }
/* 異世界衰弱（ロビー）: 公開/非公開ラジオの既定マージンを無効化 */
input[type="radio"][name="room-visibility"]{
  margin: 0;
  margin-left: 0;
}
/* === サイドバー・ハンバーガーメニュー（全ページ共通） === */
.sidebar {
  min-width: 220px;
  width: max-content;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}
#sidebar.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}
#sidebar .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0.75rem; }
.sidebar-nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4; /* 記事ページの body line-height: 1.8 を継承しないよう固定し、他ページと見た目を揃える */
  transition: background 0.15s;
}
.sidebar-nav a:hover { background: var(--bg); color: var(--accent); }
.sidebar-nav .nav-label {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0.6rem 0.75rem 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 事業者カタログ「要対応」（青ボタン内・白文字・main-layout と整合） */
#sidebar .sidebar-user-block .sidebar-user-business-nav .sidebar-attention-badge {
  flex: 0 0 auto !important;
  margin-left: 0.35rem !important;
  padding: 0.12rem 0.4rem !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  min-width: 0 !important;
}
#sidebar .sidebar-top {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem 3rem 0.5rem 0.5rem;
  background: var(--sidebar-brand-bg);
  box-sizing: border-box;
  flex-shrink: 0;
}
#sidebar .sidebar-top .sidebar-brand {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sidebar .sidebar-brand-link {
  display: inline-block;
  max-width: 180px;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  border: none;
  background: transparent;
  opacity: 1;
}
#sidebar .sidebar-brand-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#sidebar .sidebar-brand-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 1;
}
/* スマホでサイドバー開いたときの ×（ロゴ行と重ならないよう z-index を確保） */
#sidebar .menu-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 202;
}
.menu-toggle {
  display: none;
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 201;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex-direction: row;
  gap: 3px;
}
.menu-toggle:focus { outline: 2px solid var(--accent); }
.menu-toggle .menu-line {
  display: block;
  width: 3px;
  height: 14px;
  background: var(--text);
  border-radius: 1px;
}
.sidebar.open ~ .sidebar-overlay ~ .menu-toggle { display: none !important; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }
/* 管理者ログイン時「管理画面」バッジ: ヘッダー・メニューより前面に表示 */
.admin-return-badge {
  position: fixed !important;
  top: 0.75rem !important;
  right: 1rem !important;
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.4rem 0.75rem !important;
  background: #6b7280 !important;
  color: #fff !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  isolation: isolate;
}
.admin-return-badge:hover {
  background: #4f46e5 !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .admin-return-badge {
    top: 0.5rem !important;
    right: 0.5rem !important;
    font-size: 0.8rem !important;
    padding: 0.35rem 0.6rem !important;
  }
}

/* === 戻るリンク（全ページ共通・継承を受けないよう line-height 固定） === */
.back-link {
  display: inline-block;
  margin: 1rem 0 0.5rem 0;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.25;
}
button.back-link {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}
.back-link:hover { text-decoration: underline; }
.back-link--no-top-margin { margin-top: 0; }
/* === Cursor 作成バッジ（全ページ共通・継承を受けないよう line-height 固定） === */
.cursor-badge {
  position: fixed;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.9;
  pointer-events: none;
  z-index: 99999;
  line-height: 1.25;
  text-align: right;
  background: rgba(255,255,255,0.95);
  padding: 4px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.cursor-badge--minimal {
  font-size: 10px;
  opacity: 0.75;
  z-index: 9999;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
@media (max-width: 768px) {
  .cursor-badge { z-index: 999999; }
  .cursor-badge--minimal { z-index: 999999; }
}
/* メインエリア: 縦方向 Flex。子がヘッダー＋コンテンツ or コンテンツのみ */
.main-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  min-width: 0;
  background: var(--card);
}
/* ヘッダー: 全ページ共通。sticky でスクロール時に上に固定 */
.main-area > header,
.header-sticky {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card, #fff) !important;
  border-bottom: 1px solid var(--border, #e2e4e8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ヘッダー内トップバー・ページタイトル: 全ページ共通 */
.top-bar {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  gap: 0.75rem;
}
.top-bar .page-title {
  font-size: 1.15rem;
  margin: 0;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ヘッダー下のツールバー（検索・タブ等）がある場合: 全ページ共通 */
.header-toolbar-wrap {
  padding: 0.5rem 1rem;
  background: var(--bg, #f5f5f8);
  border-bottom: 1px solid var(--border, #e2e4e8);
}
.header-inner { padding-left: 0.5rem; padding-right: 0.5rem; }
/* ヘッダーの直後の要素: 残り領域でスクロール。実質フル幅 */
.main-area > header + * {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ヘッダーがない場合（子が1つだけ）: その子をスクロール領域に */
.main-area > *:only-child {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ヘッダー下の横幅: 全ページ共通でフル幅。padding も統一 */
.container {
  max-width: none !important;
  margin: 0 auto;
  padding: 0 1.5rem 2rem 1.5rem;
}
/* ヘッダー内の .container は下余白をつけない（書き出し位置がずれないように） */
.main-area > header .container {
  padding-bottom: 0;
}
/* ヘッダー〜main 余白の統一: 共通クラス .main-below-header を付けた要素だけ。詳細度を上げてテンプレートの .container や後読み込みの style に絶対に負けないようにする */
.container.main-content.main-below-header,
main.main-content.main-below-header,
div.main-content.main-below-header {
  padding: 1rem 1.5rem 2rem 1.5rem !important;
}
/* 先頭子要素の上マージンを必ず0にし、余白は .main-below-header の padding だけにする（トップの p.top-lead の UA margin 等で差が出ないように） */
.main-below-header > *:first-child {
  margin-top: 0 !important;
}
/* 翻訳ウィジェット等が付与する top / position を打ち消し、余白は padding だけにする */
.main-below-header,
main.main-content.main-below-header {
  top: auto !important;
  position: relative;
}
/* PC: サイドバー固定・メインエリア左マージン */
@media (min-width: 769px) {
  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    z-index: 50;
    overflow-y: auto;
  }
  #sidebar.sidebar {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #sidebar .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-area { margin-left: 300px; }
  /* PC では × 非表示のためロゴ行の右余白を詰める */
  #sidebar .sidebar-top { padding-right: 0.5rem; }
}
@media (max-width: 768px) {
  html { overflow-x: hidden; height: 100%; }
  body { padding: 0; margin: 0; overflow: hidden; height: 100%; }
  /**
   * display:flex のままだと、position:fixed のサイドバーが flex 子として幅（最大 300px）を
   * 横方向に確保し続け、メインが右に押しつぶされる環境がある（異世界衰弱／シューティング等）。
   * ブロック化して固定サイドバーをフロー外にし、.main-area を全幅にする。
   */
  .page-wrapper {
    display: block !important;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    /* ベース .sidebar の min-width:220px がこのブロックで上書きされず残ると、
       display:flex の page-wrapper 行方向で幅を確保し続けメインが右に寄る */
    min-width: 0 !important;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    box-shadow: 4px 0 12px rgba(0,0,0,0.1);
  }
  .sidebar.open { transform: translateX(0); }
  #sidebar.sidebar {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #sidebar .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* スマホでサイドバーを開いたとき、×で閉じるボタンを必ず表示（全ページ共通） */
  #sidebar.open .menu-close { display: flex !important; visibility: visible !important; align-items: center; justify-content: center; }
  /* メニュー行の a のみ（.sidebar-user-block 内へ display:flex が波及すると横幅・折り返し・矢印が崩れる） */
  .sidebar-nav > a,
  .sidebar-nav .sidebar-admin-block a {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    min-height: 44px;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-nav > a .nav-count {
    flex-shrink: 0;
  }
  .sidebar-overlay { position: fixed !important; }
  .menu-toggle {
    position: fixed !important;
    display: flex !important;
    top: 0 !important;
    left: 0 !important;
    height: 48px !important;
    width: 48px !important;
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  .main-area {
    flex: none;
    width: 100%;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 1rem !important;
    overflow: hidden;
  }
  /* スマホ: ヘッダーはフロー内に置き、高さは折り返しに応じて可変。絶対指定で top 固定にしない。padding は控えめにして「フッター領域」のように見えないようにする */
  .main-area-scroll {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding-bottom: 1rem !important;
  }
  .main-area-scroll .main-content {
    padding-bottom: 2rem !important;
    min-height: auto !important;
  }

  /* ヘッダーは fixed にせずフロー内のまま。表示量が増えて折り返しても重ならない */
  .main-area > header,
  .header-sticky {
    flex-shrink: 0;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--card, #fff) !important;
    border-bottom: 1px solid var(--border, #e2e4e8) !important;
  }
  .header-sticky .header-toolbar-wrap { flex-shrink: 0; }
  .main-area .top-bar,
  .header-sticky .top-bar {
    padding-left: 48px;
    padding-right: 1rem;
    min-height: 48px;
    display: flex !important;
    align-items: center;
  }
  .top-bar .page-title { font-size: 1rem; }
  .header-inner { padding-left: 0; }
  .container.main-content.main-below-header,
  main.main-content.main-below-header,
  div.main-content.main-below-header {
    padding: 1rem 1.5rem 2rem 1.5rem !important;
  }
}
/* サイドバー: 表示名編集 | 異世界ポイント を1行・左詰め（表示名と同じ 0.8rem） */
#sidebar .sidebar-user-block .sidebar-edit-name-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.5rem !important;
}
#sidebar .sidebar-user-block .sidebar-edit-name-row a {
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: nowrap !important;
}
#sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-edit-name-link {
  margin-bottom: 0 !important;
}
#sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-edit-name-sep {
  flex-shrink: 0 !important;
  width: 1px !important;
  height: 0.85em !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--border) !important;
  border: none !important;
}
/* 表示名を編集と同じ #sidebar .sidebar-edit-name-link 由来の色・ホバーを継承。行内用に上書きのみ */
#sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-fantasy-points-link {
  flex-shrink: 0 !important;
  text-align: left !important;
}
/* メニュー「AIストック」等: .sidebar-nav > a の flex gap:0.75rem とラベル〜件数の間隔を揃える */
#sidebar .sidebar-user-block .sidebar-fantasy-points-link .nav-count {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--accent) !important;
  margin-left: 0.75rem !important;
  font-variant-numeric: tabular-nums;
}
/* 表示名編集・異世界ポイント: 該当ページ表示中は .sidebar-nav a[aria-current="page"] と同じ（太字・淡い青背景） */
#sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-edit-name-link[aria-current="page"] {
  background: #eef1f9 !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
/* スマホ: 1行・nowrap だと「表示名を編集」と「異世界ポイント」が重なるため、縦に分けてエリア表示 */
@media (max-width: 768px) {
  /* .sidebar-user-block の左右パディングを相殺し、下の .sidebar-nav > a と同じ 1rem 基準で矢印位置を揃える */
  #sidebar .sidebar-user-block .sidebar-edit-name-row {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    width: calc(100% + 1.5rem) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  #sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-edit-name-sep {
    display: none !important;
  }
  #sidebar .sidebar-user-block .sidebar-edit-name-row a {
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: 0 1rem !important;
    min-height: 48px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--text) !important;
  }
  /* トップ・AIストック等のメニュー行と同様、ホバー／タップ／キーボードフォーカスで背景が変わる */
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:hover,
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:focus-visible,
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:active {
    background: var(--bg) !important;
    color: var(--accent) !important;
  }
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:hover::after,
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:focus-visible::after,
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:active::after {
    border-right-color: var(--accent) !important;
    border-top-color: var(--accent) !important;
  }
  #sidebar .sidebar-user-block .sidebar-edit-name-row a:first-of-type {
    border-top: 1px solid var(--border) !important;
  }
  /* スマホのみ: メニュー行と同じ右矢印（.sidebar-user-block a::after の非表示より詳細度で上書き） */
  #sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-edit-name-link::after {
    content: "" !important;
    display: inline-block !important;
    width: 0.4em !important;
    height: 0.4em !important;
    margin-left: auto !important;
    border-right: 2px solid var(--muted) !important;
    border-top: 2px solid var(--muted) !important;
    transform: rotate(45deg) !important;
    flex-shrink: 0 !important;
  }
  #sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-fantasy-points-link .nav-count {
    flex-shrink: 0 !important;
  }
  #sidebar .sidebar-user-block .sidebar-edit-name-row .sidebar-fantasy-points-link {
    flex-shrink: 1 !important;
  }
}

/* 異世界衰弱 ロビー・ランキング: 同一 body クラスで外周を揃え、メイン枠の上下は変数1か所（絶対pxは使わない） */
body.fantasy-battle-shell {
  margin: 0;
  padding: 0;
}
body.fantasy-battle-shell .page-wrapper {
  margin: 0;
  padding: 0;
}
body.fantasy-battle-shell .main-area {
  margin: 0;
  padding: 0;
}
body.fantasy-battle-shell {
  --fantasy-main-pad-top: 1.5rem;
  --fantasy-main-pad-bottom: 2rem;
}
/* 異世界衰弱 ロビー・ランキング共通: ヘッダー直下の上余白・下余白は同一変数。全ページ共通の .main-below-header（1rem）を上書き。左右だけページ別 */
.main-area .fantasy-battle-main.container.main-content.main-below-header {
  padding-top: var(--fantasy-main-pad-top) !important;
  padding-bottom: var(--fantasy-main-pad-bottom) !important;
  box-sizing: border-box;
}
.main-area .fantasy-battle-main.fantasy-content-wrap.container.main-content.main-below-header {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.main-area .fantasy-battle-main.fantasy-ranking-page.container.main-content.main-below-header {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.main-area .fantasy-content-wrap .lobby-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* ランキング: .back-link の margin-bottom(0.5rem) + .fantasy-ranking-page .article-card の margin-top(0.35rem) に合わせる */
  margin-bottom: 0.85rem;
}
.main-area .fantasy-content-wrap .lobby-status-row .status {
  margin: 0;
  line-height: 1.35;
}
.main-area .fantasy-content-wrap .lobby-ranking-link {
  color: var(--accent, #4f46e5);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
}
.main-area .fantasy-content-wrap .lobby-ranking-link:hover {
  text-decoration: underline;
}
/* 左に接続ステータスがないとき（例: 異世界シューティング）— ランキングリンクを右端に */
.main-area .fantasy-content-wrap .lobby-status-row.lobby-status-row--ranking-only {
  justify-content: flex-end;
}
.main-area .fantasy-content-wrap #ws-status {
  white-space: nowrap;
  min-height: 1.25em;
}
/* ランキング: 「戻る」の下にニックネーム枠、その下に本ブロック。ニックネーム枠の下余白（.lobby-input-area）で十分なため、上マージンは詰める */
.main-area .fantasy-ranking-page .article-card {
  margin-top: 0 !important;
}

/* ゲームルールブロック（異世界衰弱テンプレートと同一。各ページで .game-rules / .game-rules-body を共通化） */
.game-rules {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.game-rules h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.5rem;
}
.game-rules h3 {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.game-rules h3:first-of-type {
  margin-top: 0;
}
.game-rules p,
.game-rules ol,
.game-rules ul {
  margin: 0 0 0.75rem;
  color: var(--text);
}
.game-rules ol,
.game-rules ul {
  padding-left: 1.5rem;
}
.game-rules ul.skill-list li {
  margin-bottom: 0.5rem;
}
.game-rules-table-wrap {
  overflow-x: auto;
  margin: 0.75rem 0;
}
.game-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.game-rules-table th,
.game-rules-table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  text-align: center;
}
.game-rules-table th {
  background: rgba(79, 70, 229, 0.08);
  color: var(--text);
}
.game-rules .suit-red {
  color: #c00;
}
.game-rules-table-caption {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
@media (max-width: 768px) {
  /* 異世界衰弱: 上下は body の --fantasy-main-pad-* と同一。左右はロビー＝ヘッダー基準、ランキング＝通常コンテナ */
  .main-area .fantasy-battle-main.container.main-content.main-below-header {
    padding-top: var(--fantasy-main-pad-top) !important;
    padding-bottom: var(--fantasy-main-pad-bottom) !important;
  }
  /**
   * テスト用ゲーム2ページのみ（body に page-test-fantasy-game-main を付与したテンプレートだけ）。
   * ランキング・他記事・見本ページには当てない。左の広いインデント（旧 48px）を詰める。
   */
  body.page-test-fantasy-game-main .main-area .fantasy-battle-main.fantasy-content-wrap.container.main-content.main-below-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .main-area .fantasy-battle-main.fantasy-ranking-page.container.main-content.main-below-header {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /**
   * 上記2ページ専用: page-wrapper / main-area の全幅化（fantasy-battle-shell 単体ではランキング等にも付くため使わない）
   */
  body.page-test-fantasy-game-main .page-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  body.page-test-fantasy-game-main .page-wrapper > .main-area {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
    min-width: 0 !important;
  }
  body.page-test-fantasy-game-main.page-body-isekai-shooting .page-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}
/* 異世界衰弱 ポイントランキング表 */
.fantasy-ranking-lead {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}
.fantasy-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.fantasy-ranking-table th,
.fantasy-ranking-table td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.fantasy-ranking-table thead th {
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
}
.fantasy-ranking-points {
  font-variant-numeric: tabular-nums;
}
/* 異世界シューティング: 表示領域内に収め、ページ全体のスクロールバーを出さない */
html.isekai-shooting-page-html {
  height: 100%;
  overflow: hidden;
}
body.page-body-isekai-shooting {
  height: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-body-isekai-shooting .page-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 異世界シューティング（テスト環境・縦スクロール）
   緑ゲーム枠の見た目は test-game-card-fantasybattle.css の .memory-game-wrap のみ（ここではレイアウト用クラスのみ） */
.isekai-shooting-main.container {
  max-width: none;
  margin: 0;
  padding: 1rem 0 2rem;
}
.isekai-shooting-lead {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}
.isekai-shooting-game-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
/* シューティング: 全画面ボタン行（.memory-game-wrap 内・test-game-card-fantasybattle.css の見た目と併用） */
.memory-game-wrap .isekai-shooting-fs-row {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.memory-game-wrap .isekai-shooting-fs-row .isekaiFullscreenBtn,
.memory-game-wrap .isekai-shooting-fs-row .btn-fullscreen {
  pointer-events: auto;
}
#isekai-shoot-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 768px) {
  .page-body-isekai-shooting .main-area > header + .container.fantasy-content-wrap.fantasy-battle-main {
    padding-bottom: 72px !important;
  }
}

/* 異世界シューティング: メインをビューポート高に固定（上記 .page-wrapper と併用） */
.page-body-isekai-shooting .main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  min-width: 0;
  /* overflow:hidden は子 .memory-game-wrap の box-shadow（test-game-card-fantasybattle.css と同一）を切る */
  overflow-x: visible;
  overflow-y: hidden;
}
.page-body-isekai-shooting .isekai-shooting-page-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: visible;
}
.page-body-isekai-shooting .isekai-shooting-main.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  /* 横方向の余白は .game-panel.game-wide > .isekai-shooting-page-shell（test-game-card-fantasybattle.css） */
  padding: 0.35rem 0 0.5rem;
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
}
.page-body-isekai-shooting .isekai-shooting-lead {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
/* 遊び方・説明：異世界衰弱と同じ .game-rules / .game-rules-body（#isekai-fs-target 外・シェルで縦スクロール） */
.page-body-isekai-shooting .isekai-shooting-page-shell > .game-rules {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-left: 0;
  margin-right: 0;
  max-width: none !important;
}
.page-body-isekai-shooting .isekai-shooting-page-shell > .game-rules .game-rules-body code {
  font-size: 0.9em;
  word-break: break-all;
}
/* ゲーム列：中立背景（全画面時は #isekai-fs-target:fullscreen で黒に上書き） */
.page-body-isekai-shooting .isekai-fs-target > .main-area-scroll.isekai-shooting-page-scroll {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
}
.page-body-isekai-shooting .isekai-shooting-game-block {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.page-body-isekai-shooting .isekai-shooting-game-block .memory-game-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
  justify-content: center;
}
.page-body-isekai-shooting #isekai-shoot-canvas {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
/* 異世界シューティング: コンパクト（説明文を隠して縦をゲームに割く） */
.page-body-isekai-shooting--compact .isekai-shooting-lead {
  display: none !important;
}
.page-body-isekai-shooting--compact .isekai-shooting-main.container {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}

/* 異世界衰弱と同じ: ヘッダー直下の .container がメインの縦スクロール（右端バー）。
   コンテナは block のまま（display:flex だと子が flex-basis:0 で潰れてゲームが消えることがある） */
.page-body-isekai-shooting .main-area > header + .container.fantasy-content-wrap.fantasy-battle-main {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
/* シェル: 親コンテナの高さいっぱい＋縦 flex。幅は .game-panel.game-wide（test-game-card-fantasybattle.css）に任せる */
.page-body-isekai-shooting .main-area .isekai-shooting-page-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  min-height: 100%;
}
.page-body-isekai-shooting .isekai-shooting-page-shell > .isekai-fs-target {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  min-width: 0;
  overflow: visible;
}
.page-body-isekai-shooting .isekai-fs-target > .main-area-scroll {
  flex: 1;
  min-height: 0;
  overflow: visible;
}
.page-body-isekai-shooting .top-bar {
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}
.page-body-isekai-shooting .top-bar .page-title {
  flex: 1 1 auto;
  min-width: 0;
}
.isekaiFullscreenBtn {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
}
.isekaiFullscreenBtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#isekai-fs-target:fullscreen,
#isekai-fs-target:-webkit-full-screen,
#isekai-fs-target:-moz-full-screen,
#isekai-fs-target:-ms-fullscreen {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #000;
  box-sizing: border-box;
  overflow: hidden;
}
#isekai-fs-target:fullscreen .isekai-shooting-page-scroll,
#isekai-fs-target:-webkit-full-screen .isekai-shooting-page-scroll,
#isekai-fs-target:-moz-full-screen .isekai-shooting-page-scroll,
#isekai-fs-target:-ms-fullscreen .isekai-shooting-page-scroll {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden;
  min-height: 0;
}
#isekai-fs-target:fullscreen .main-area-scroll,
#isekai-fs-target:-webkit-full-screen .main-area-scroll,
#isekai-fs-target:-moz-full-screen .main-area-scroll,
#isekai-fs-target:-ms-fullscreen .main-area-scroll {
  background: #000;
  overflow: hidden;
  min-height: 0;
}
/* 全画面時: ページヘッダー非表示済み。ゲームをビューポートいっぱいに近づける */
#isekai-fs-target:fullscreen .isekai-shooting-main.container,
#isekai-fs-target:-webkit-full-screen .isekai-shooting-main.container,
#isekai-fs-target:-moz-full-screen .isekai-shooting-main.container,
#isekai-fs-target:-ms-fullscreen .isekai-shooting-main.container {
  flex: 1;
  min-height: 0;
  padding: 0.25rem !important;
}
#isekai-fs-target:fullscreen .isekai-shooting-game-block,
#isekai-fs-target:-webkit-full-screen .isekai-shooting-game-block,
#isekai-fs-target:-moz-full-screen .isekai-shooting-game-block,
#isekai-fs-target:-ms-fullscreen .isekai-shooting-game-block {
  flex: 1;
  min-height: 0;
  width: 100%;
}
#isekai-fs-target:fullscreen .memory-game-wrap,
#isekai-fs-target:-webkit-full-screen .memory-game-wrap,
#isekai-fs-target:-moz-full-screen .memory-game-wrap,
#isekai-fs-target:-ms-fullscreen .memory-game-wrap {
  flex: 1;
  min-height: 0;
  max-width: none !important;
  width: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  /* 全画面時は縦のプレイ領域を最大化（緑の帯を細くする） */
  padding: 4px 8px !important;
}
#isekai-fs-target:fullscreen .isekaiFullscreenBtn,
#isekai-fs-target:-webkit-full-screen .isekaiFullscreenBtn,
#isekai-fs-target:-moz-full-screen .isekaiFullscreenBtn,
#isekai-fs-target:-ms-fullscreen .isekaiFullscreenBtn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
#isekai-fs-target:fullscreen .isekaiFullscreenBtn:hover,
#isekai-fs-target:-webkit-full-screen .isekaiFullscreenBtn:hover,
#isekai-fs-target:-moz-full-screen .isekaiFullscreenBtn:hover,
#isekai-fs-target:-ms-fullscreen .isekaiFullscreenBtn:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
body.isekai-fs-active .cursor-badge {
  opacity: 0.35;
}