body {
    font-family: sans-serif;
    color: #e9eef6;
    background-image:
        radial-gradient(rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.00) 1px),
        linear-gradient(135deg, #0f3057 0%, #2b0b4a 35%, #702b9c 65%, #0fb6b6 100%);
    background-size: 18px 18px, cover;
    background-attachment: fixed;
    background-repeat: repeat, no-repeat;
    -webkit-font-smoothing: antialiased;
}
pre { white-space: pre-wrap; word-wrap: break-word; }


/* --- ベーススタイル --- */

.thumb-16-9 { aspect-ratio: 16/9; width: 100%; overflow: hidden; background: #f1f3f5; }
.thumb-16-9 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-16-9.rounded-top { border-top-left-radius: .75rem; border-top-right-radius: .75rem; }

.hero-caption { background: none; padding: 40px 0px 0px 0px; text-align: center; }
.hero-caption h2 { color: #ffffff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.6), 0 0 20px rgba(0, 240, 255, 0.4); font-size: 2rem; font-weight: bold; margin-bottom: 15px; }
.hero-caption p { color: rgba(255,255,255,0.95); font-size: 1rem; letter-spacing: 0.05em; }

.btn-main { padding: .6rem 1rem; font-weight: 600; border-radius: .5rem; font-size: 1rem; }
.btn-main:hover { transform: translateY(-2px); transition: all .18s ease; }

.card { border-radius: .75rem; overflow: hidden; }
/* Card body: dark panel to blend with hero illustration; keep text readable */
.card .card-body { padding: 24px !important; background: linear-gradient(180deg,#0d1117,#121824); color: #e9eef6; }
.card .card-text { color: rgba(233,238,246,0.95); margin-bottom: 16px; }
.card .update-text { color: gray; font-size: 0.8rem; margin-bottom: 16px; }

.card-body .btn { margin-top: 1rem; }

.btn-back-portal { color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.4); font-weight: bold; background: transparent; transition: all 0.3s ease; }
.btn-back-portal:hover { color: #ffffff; border-color: #ffffff; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }

/* 💡 いいねカウンターの共通カスタム */
.like-box {
    color: #ff3e6c !important; /* 鮮やかなハートレッド */
    font-family: 'Courier New', Courier, monospace; /* レトロなフォント */
    font-weight: bold;
    border: 1px dashed rgba(255, 62, 108, 0.4); /* ドット線の枠で囲む */
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 62, 108, 0.05);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* マウスを乗せたらドキドキと拍動する効果 */
@keyframes heart-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: brightness(1.2); }
    100% { transform: scale(1); }
}
.like-box:hover {
    border-color: #ff3e6c;
    background: rgba(255, 62, 108, 0.15);
    animation: heart-beat 0.6s infinite ease-in-out;
}

/* いいねボタン */
.btn-like {
    background: transparent;
    padding: 6px 16px;
    border-radius: 30px; /* カプセル型にする */
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 🔷 20行AIゲーム（ai20）の部屋にある場合 */
.ai20 .btn-like {
    color: #00f0ff;
    border: 1.5px solid rgba(0, 240, 255, 0.4);
}
.ai20 .btn-like:hover {
    color: #ffffff;
    border-color: #00f0ff;
    background: rgba(0, 240, 255, 0.15);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* 🍇 はるみのゲーム（harumi）の部屋にある場合 */
.harumi .btn-like {
    color: #ff007f;
    border: 1.5px solid rgba(255, 0, 127, 0.4);
}
.harumi .btn-like:hover {
    color: #ffffff;
    border-color: #ff007f;
    background: rgba(255, 0, 127, 0.15);
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.5);
}

/* --- いいね済み（Liked）状態のスタイル --- */
/* ボタンに `liked` クラスが付与されたときの見た目 */
.btn.liked, .btn-like.liked {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(90deg, rgba(255,62,108,0.95), rgba(255,107,107,0.85));
    box-shadow: 0 8px 30px rgba(255,62,108,0.18);
    transform: translateY(-1px);
}

.ai20 .btn.liked, .ai20 .btn-like.liked {
    background: linear-gradient(90deg, #00d8a6, #00f0ff);
    color: #042a21 !important;
    box-shadow: 0 8px 40px rgba(0,216,166,0.18), 0 0 36px rgba(0,240,255,0.08);
}

.harumi .btn.liked, .harumi .btn-like.liked {
    background: linear-gradient(90deg, #ff6b6b, #ff007f);
    color: #2b0a0a !important;
    box-shadow: 0 8px 40px rgba(255,107,107,0.18), 0 0 36px rgba(255,0,127,0.08);
}

/* 一覧カードの like-box にも liked 状態を用意（将来の JS 連動用） */
.like-box.liked {
    background: rgba(255,62,108,0.18);
    border-color: #ff3e6c;
    box-shadow: 0 6px 18px rgba(255,62,108,0.12);
    transform: translateY(-1px);
}

/* --- 20行AIプロンプトゲーム研究所 スタイル --- */

.ai20 .btn-main { background: #00d8a6; color: #042a21; border: 1px solid rgba(0,216,166,0.12); box-shadow: 0 8px 24px rgba(0,216,166,0.06); }
.ai20 .btn-main:hover { box-shadow: 0 8px 48px rgba(0,216,166,0.45), 0 0 56px rgba(0,216,166,0.12); color: #ffffff; transform: translateY(-2px); }

.ai20 .card { border: 2px solid rgba(0, 240, 255, 0.5); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); background: linear-gradient(180deg, rgba(6,12,20,0.85), rgba(4,8,16,0.75)); transition: border-color 0.3s, box-shadow 0.3s; }
.ai20 .card:hover { border-color: rgba(0, 240, 255, 0.8); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);  }

.ai20 .btn-what { color: #00f0ff; border-color: rgba(0, 240, 255, 0.5); font-weight: bold; background: transparent; transition: all 0.3s ease; }
.ai20 .btn-what:hover { color: #ffffff; border-color: rgba(0, 240, 255, 0.8); background: rgba(0, 240, 255, 0.15); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }

/* --- はるみのゲームライブラリー復刻 スタイル --- */

.harumi .btn-main { background: #ff6b6b; color: #2b0a0a; border: 1px solid rgba(255,107,107,0.12); box-shadow: 0 8px 24px rgba(255,107,107,0.06); }
.harumi .btn-main:hover { box-shadow: 0 8px 40px rgba(255,107,107,0.30), 0 0 28px rgba(255,107,107,0.10); color: #ffffff; transform: translateY(-2px); }

.harumi .card { border: 2px solid rgba(255, 0, 127, 0.5); box-shadow: 0 0 15px rgba(255, 0, 127, 0.2); background: linear-gradient(180deg, rgba(12,6,18,0.85), rgba(8,4,12,0.75)); transition: border-color 0.3s, box-shadow 0.3s; }
.harumi .card:hover { border-color: rgba(255, 0, 127, 0.8); box-shadow: 0 0 20px rgba(255, 0, 127, 0.4); }

.harumi .btn-what { color: #ff007f; border-color: rgba(255, 0, 127, 0.5); font-weight: bold; background: transparent; transition: all 0.3s ease; }
.harumi .btn-what:hover { color: #ffffff; border-color: rgba(255, 0, 127, 0.8); background: rgba(255, 0, 127, 0.15); box-shadow: 0 0 20px rgba(255, 0, 127, 0.4); }