@charset "UTF-8";

/* ==========================================================================
   ゲームインデックス専用：レトロカチッとした1カラム・グリッドデザイン
   （アニメーションを廃止し、即時切り替えに特化）
   ========================================================================== */

/* メインコンテナ：プロフィールページ等の白枠と外見を統一 */
.game-index-container {
  max-width: 1100px;
  margin: 20px auto;
  background-color: #ffffff;
  border: 1px solid #999999;
  padding: 30px;
  box-sizing: border-box;
}

.game-index-container h3 {
  border-bottom: 2px solid #bbf1ef;
  padding-bottom: 5px;
  margin-bottom: 15px;
  color: #009999;
}

.game-intro-text {
  font-size: 13px;
  color: #555555;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* グリッドレイアウト：アイテムを隙間なく横並びにする */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}

/* 1ページ単発用の外枠リンク */
.game-card-single {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* 複数ページアコーディオン用の外枠コンテナ */
.game-card-accordion {
  display: block;
}

/* チェックボックスは完全非表示 */
.game-toggle-input {
  display: none;
}

/* --------------------------------------------------------------------------
   ゲームカード本体（レトロゲーム風の2重線デザイン）
   -------------------------------------------------------------------------- */
.game-card {
  background-color: #fafafa;
  /* レトロな雰囲気を醸し出す2重線の境界線 */
  border: 3px double #bbbbbb; 
  padding: 20px 15px 15px 15px;
  position: relative;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: pointer;
  /* 滑らかさをなくすため、transitionをすべて撤去（瞬時に切り替わる設定） */
  transition: none !important; 
}

/* 【修正箇所】
  1ページ用（game-card-single）のホバー時、および
  複数ページ用（game-card-accordion）のホバー時、両方で同様に背景色と枠線が変わるよう統一
*/
.game-card-single:hover .game-card,
.game-card-accordion:hover .game-card {
  background-color: #bbf1ef;
  border-color: #009999;
}

/* 1ページ用：右下に表示する「→」ジャンプマーク */
.game-card-single .game-card::after {
  content: "→";
  position: absolute;
  bottom: 12px;
  right: 15px;
  font-size: 13px;
  font-family: "ＭＳ ゴシック", "MS Gothic", monospace;
  color: #999999;
  font-weight: bold;
}
.game-card-single:hover .game-card::after {
  color: #007a7a;
}

/* 複数ページ用：右下に表示する「▼」マーク（常時表示） */
.game-card-accordion .game-card::after {
  content: "▼";
  position: absolute;
  bottom: 14px;
  right: 15px;
  font-size: 9px;
  color: #999999;
}
.game-card-accordion:hover .game-card::after {
  color: #009999;
}

/* アコーディオンが開いているとき（チェックON）のカード状態：瞬時に色を固定 */
.game-toggle-input:checked + .game-card {
  background-color: #e6f7f7;
  border-color: #009999;
}
.game-toggle-input:checked + .game-card::after {
  content: "▲"; /* 瞬時に上向き矢印に変更 */
  color: #009999;
}

/* タイトルとサブテキストのスタイル */
.game-title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin: 15px 0 10px 0;
  line-height: 1.45;
}

.game-meta {
  font-size: 11px;
  font-family: "ＭＳ ゴシック", "MS Gothic", monospace;
  color: #888888;
  margin: 0;
  padding-right: 15px;
}

/* --------------------------------------------------------------------------
   ステータスタグ（CLEAR / PLAYING：角を丸めずシャープなレトロ風に）
   -------------------------------------------------------------------------- */
.game-status {
  position: absolute;
  top: 10px;
  left: 15px;
  font-family: "ＭＳ ゴシック", "MS Gothic", monospace;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border: 1px solid;
  border-radius: 0; /* レトロ感を出すため角丸を完全に排除 */
}

.status-clear {
  background-color: #ffffff;
  color: #009999;
  border-color: #009999;
}

.status-playing {
  background-color: #ffffff;
  color: #ff6600;
  border-color: #ff6600;
}

/* --------------------------------------------------------------------------
   アコーディオン展開される子パネル・リンクボタン
   -------------------------------------------------------------------------- */
.game-sub-panel {
  display: none; /* 初期状態は完全に非表示 */
  background-color: #ffffff;
}

/* チェックONで瞬時に表示（アニメーションさせない） */
.game-toggle-input:checked ~ .game-sub-panel {
  display: block; 
  border: 3px double #009999;
  border-top: none; /* 上のカードの底面と綺麗に結合 */
}

.game-link-list {
  list-style: none;
  padding: 12px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 各話数・日付のリンクボタン：はみ出しを防ぎつつ幅をそろえる */
.game-link-list li a {
  display: inline-block;
  font-size: 11px;
  font-family: "ＭＳ ゴシック", "MS Gothic", monospace;
  background-color: #f0f0f0;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff #aaaaaa #aaaaaa #ffffff; /* 控えめなレトロ立体ボタン枠 */
  color: #0066cc;
  padding: 3px 6px;         /* 【修正】左右に6pxの余白を復活させ、文字のはみ出しを絶対に防ぐ */
  min-width: 32px;          /* 【修正】左右余白を含めて「10」が綺麗に収まる最小横幅に調整 */
  text-align: center;       /* 枠内で中央揃え */
  text-decoration: none;
  box-sizing: border-box;   /* 【追加】パディングと枠線を横幅の計算に含めてサイズを安定させる */
}

.game-link-list li a:hover {
  background-color: #bbf1ef;
  border-color: #009999;
  color: #003366;
}

.status-tweet {
  background-color: #ffffff;
  color: #663399;
  border-color: #663399;
}

/* --------------------------------------------------------------------------
   スマートフォン環境対応（横幅600px以下）
   ========================================================================== */
@media (max-width: 600px) {
  .game-index-container {
    padding: 15px;
    margin: 10px;
  }
  .game-grid {
    grid-template-columns: 1fr; /* スマホでは縦一列配置 */
    gap: 15px;
  }
}