/*!
 * © 2026 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: typing-rabbit3-moguranoanayuki.css
 * BUILD_ID: YR-2026-0213-K20                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/*!
 * styles.css
 * タイピングゲーム用スタイルシート（整形版）
 * * テーマ: 原宿系Kawaii Pop
 * 特徴:
 * - 画面いっぱいに広がるゲーム画面 (object-fit: fill)
 * - 敵撃破時のみの画面揺れ演出 (.canvas-shake)
 * - ポップな配色とUIデザイン
 */

/* ==========================================================================
   1. 変数定義 (CSS Custom Properties)
   ========================================================================== */
:root {
    /* ゲーム背景画像（JSで動的に変更される場合があります） */
    --playfield-bg: url("assets/bg_stage1.png");

    /* カラーパレット */
    --color-primary: #006064;
    --color-primary-light: #00838f;
    --color-bg: #e0f7fa;
    --color-panel: #ffffff;
    --color-text: #37474f;
    --color-accent: #fbc02d;

    /* UIパーツ設定 */
    --radius-lg: 16px;
    --radius-md: 8px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   2. アニメーション定義 (@keyframes)
   ========================================================================== */

/* * jelly-pop: 
 * 登場時にゼリーのようにボヨヨンと弾むアニメーション 
 */
@keyframes jelly-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* * screen-shake: 
 * 敵を倒したときの衝撃で画面を一瞬揺らす
 */
@keyframes screen-shake {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-5px, 5px);
    }
    50% {
        transform: translate(5px, -5px);
    }
    75% {
        transform: translate(-5px, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* * bg-scroll: 
 * 背景の水玉模様などを斜めに流すループアニメーション
 */
@keyframes bg-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 40px;
    }
}

/* * rainbow-border: 
 * 枠線の色と影を虹色に変化させる（ゲーミング発光）
 */
@keyframes rainbow-border {
    0% {
        border-color: #ff5252;
        box-shadow: 0 0 15px #ff5252;
    }
    25% {
        border-color: #ffeb3b;
        box-shadow: 0 0 15px #ffeb3b;
    }
    50% {
        border-color: #00e676;
        box-shadow: 0 0 15px #00e676;
    }
    75% {
        border-color: #2979ff;
        box-shadow: 0 0 15px #2979ff;
    }
    100% {
        border-color: #ff5252;
        box-shadow: 0 0 15px #ff5252;
    }
}

/* * pop: 
 * 文字などを強調して少し傾けながら拡大縮小させる
 */
@keyframes pop {
    from {
        transform: scale(1) rotate(-5deg);
    }
    to {
        transform: scale(1.1) rotate(5deg);
    }
}

/* * slideIn: 
 * モーダルウィンドウなどを下からスライドインさせる
 */
@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* * gentle-sway: 
 * 図鑑の画像などをゆっくり左右に揺らす
 */
@keyframes gentle-sway {
    0% {
        transform: translateX(0) rotate(-2deg);
    }
    50% {
        transform: translateX(8px) rotate(-2deg);
    }
    100% {
        transform: translateX(0) rotate(-2deg);
    }
}

/* * heartbeat: 
 * 心臓の鼓動のようにドクンドクンと動く
 */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

/* * rainbow-anim: 
 * テキストの色相を回転させて虹色に見せる
 */
@keyframes rainbow-anim {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* * reel-throb: 
 * スロットのリールなどが回転中に伸縮する動き
 */
@keyframes reel-throb {
    0% {
        transform: scale(1);
        border-color: #ffb74d;
    }
    100% {
        transform: scale(1.04);
        border-color: #ff9800;
        box-shadow: 0 0 15px #ff9800;
    }
}

/* ==========================================================================
   3. 基本設定 (Base Styles)
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Zen Maru Gothic", sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 画面全体のスクロールを禁止 */
}

/* ==========================================================================
   4. ヘッダー (Header)
   ========================================================================== */
.app-header {
    background-color: #4db6ac;
    /* 斜めストライプの背景パターン */
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    color: white;
    padding: 0 24px;
    height: 74px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    border-bottom: 4px solid #00796b;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ステッチ（縫い目）風の装飾 */
.app-header::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px dashed #ffffff;
    border-radius: 12px;
    pointer-events: none;
}

.header-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.app-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ==========================================================================
   5. ボタン (Buttons - Candy Style)
   ========================================================================== */
.btn-control {
    background: #fff;
    color: #00695c;
    border: 2px solid #00695c;
    padding: 0 16px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 #004d40;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-control:hover {
    transform: translateY(2px) scale(1.05); /* ホバー時に少し拡大 */
    box-shadow: 0 2px 0 #004d40;
    background: #e0f2f1;
}

.btn-control:active {
    transform: translateY(4px) scale(0.95); /* 押下時に沈む */
    box-shadow: none;
}

/* 「学習TOPへ」ボタン（特別色） */
a.btn-control {
    background: #fff9c4;
    color: #ef6c00;
    border-color: #ef6c00;
    box-shadow: 0 4px 0 #e65100;
    margin-right: 10px;
}

a.btn-control:hover {
    background: #fff176;
    box-shadow: 0 2px 0 #e65100;
}

a.btn-control:active {
    box-shadow: none;
}

/* ==========================================================================
   6. メインレイアウト (Main Layout)
   ========================================================================== */
.main-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 340px; /* 左：可変（ゲーム）、右：固定（サイドバー） */
    gap: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

.panel {
    background: var(--color-panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid #b2ebf2;
}

.panel-header {
    padding: 12px 16px;
    border-bottom: 2px solid #e0f2f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--color-primary);
}

/* ==========================================================================
   7. ゲームエリア & キャンバス (Game Area)
   ========================================================================== */
.game-panel {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* HUD (ヘッドアップディスプレイ: スコア等の表示) */
.hud-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f1f8e9;
    border-bottom: 2px solid #dcedc8;
    font-weight: bold;
    font-size: 13px;
    color: var(--color-primary);
    white-space: nowrap;
    overflow-x: auto;
    gap: 10px;
}

.hud-val {
    font-size: 18px;
    margin-left: 2px;
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #006064;
}

.life-area {
    color: #e91e63;
    letter-spacing: 1px;
}

/* キャンバスコンテナ */
.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    
    /* 枠線を太くポップに */
    border: 6px solid #fff;
    outline: 6px solid #ff7043;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
    
    background-color: #81c784;
    background-image: var(--playfield-bg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    
    /* 常時の鼓動アニメーションは削除済み */
}

/* 敵撃破時にJSで付与される揺れクラス */
.canvas-shake {
    animation: screen-shake 0.2s ease-in-out;
}

/* フィーバーモード（ボス戦）時の演出 */
.canvas-container.fever-mode {
    outline-color: #ffeb3b; /* 金色の枠線 */
    box-shadow: 0 0 50px #ffeb3b;
}

/* フィーバーモード時の背景オーバーレイ */
.canvas-container.fever-mode::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, rgba(0, 0, 50, 0.6) 80%);
    pointer-events: none;
    z-index: 0;
}

/* ゲームキャンバス本体 */
#game {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    
    /* 重要: 枠線いっぱいまで引き伸ばす設定 */
    object-fit: fill; 
}

/* ==========================================================================
   8. オーバーレイ (Overlays: Start / Bonus)
   ========================================================================== */

/* 難易度選択などの全画面オーバーレイ */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    
    background-color: rgba(255, 255, 255, 0.9);
    /* 動く水玉模様の背景 */
    background-image: 
        radial-gradient(#80deea 20%, transparent 20%),
        radial-gradient(#80deea 20%, transparent 20%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: bg-scroll 2s linear infinite;
}

/* ダイアログボックス */
.dialog-box {
    background: white;
    padding: 40px;
    border-radius: 30px;
    text-align: center;
    
    /* 虹色の枠線アニメーション */
    border: 8px solid #ff5252;
    animation: jelly-pop 0.6s, rainbow-border 2s linear infinite;
    
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    min-width: 320px;
}

.dialog-box h2 {
    font-size: 32px;
    margin-top: 0;
    color: #00bcd4;
    display: inline-block;
    text-shadow: 2px 2px 0 #b2ebf2;
}

/* 難易度選択ボタン群 */
.diff-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
}

.diff-buttons button {
    padding: 20px 30px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    font-size: 18px;
    color: white;
    transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.4, 1);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    min-width: 140px;
}

.btn-success {
    background: #66bb6a;
    transform: rotate(-3deg);
}

.btn-primary {
    background: #42a5f5;
    transform: rotate(0deg) scale(1.1);
    z-index: 1;
}

.btn-danger {
    background: #ff7043;
    transform: rotate(3deg);
}

.diff-buttons button:hover {
    transform: scale(1.2) rotate(0deg) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
    z-index: 10;
}

.diff-buttons button:active {
    transform: scale(0.95) !important;
    box-shadow: none !important;
}

.sub {
    font-size: 12px;
    opacity: 0.9;
    display: block;
    margin-top: 6px;
    font-weight: normal;
}

.note {
    font-size: 14px;
    color: #555;
    margin-top: 20px;
    font-weight: bold;
}

/* ボーナス（フィーバー）オーバーレイ */
.bonus-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    z-index: 10;
}

.bonus-overlay[hidden] {
    display: none;
}

.bonus-msg {
    text-align: center;
    color: #ff6f00;
    transform: rotate(-5deg);
    animation: pop 0.5s infinite alternate;
}

.bonus-title {
    font-size: 60px;
    font-weight: 900;
    -webkit-text-stroke: 2px white;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   9. サイドバー (Sidebar)
   ========================================================================== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 4px;
}

/* カードコレクションパネル */
.card-panel {
    flex: 1;
    min-height: 300px;
}

.card-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #f5f5f5;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* カードスロット */
.slot {
    aspect-ratio: 1 / 1;
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: transform 0.2s;
}

.slot.filled {
    border: 2px solid var(--color-accent);
    background: radial-gradient(circle, #fffde7 0%, #fff9c4 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.slot:hover {
    transform: scale(1.05);
    z-index: 1;
}

.slot img {
    width: 85%;
    height: auto;
    display: block;
}

.btn-small {
    padding: 4px 8px;
    font-size: 11px;
}

/* 所持数バッジ */
.card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: #ff3d00;
    color: white;
    border: 2px solid #fff;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* ==========================================================================
   10. ランキング & 遊び方 (Ranking & Howto)
   ========================================================================== */
.rank-content {
    padding: 12px;
}

.rank-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

#playerName {
    flex: 1;
    padding: 6px;
    border: 2px solid #b2dfdb;
    border-radius: 6px;
    outline: none;
}

.btn-save {
    background: var(--color-primary-light);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.rank-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: rank-counter;
}

.rank-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #e0f2f1;
    font-size: 14px;
    counter-increment: rank-counter;
}

.rank-list li::before {
    content: counter(rank-counter) ". ";
    font-weight: bold;
    color: var(--color-primary);
    width: 24px;
}

.rank-name {
    font-weight: bold;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555;
}

.rank-score {
    font-family: monospace;
    font-weight: bold;
    color: #00838f;
    margin-left: 8px;
}

.howto-panel {
    background: #fffde7;
    border-color: #fff9c4;
    flex: 0 0 auto;
}

.howto-panel summary {
    padding: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #f57f17;
}

.howto-content {
    padding: 0 16px 16px;
    font-size: 13px;
    color: #666;
}

/* ==========================================================================
   11. モーダルウィンドウ (Modals)
   ========================================================================== */
.modal-window {
    border: none;
    background: transparent;
    padding: 0;
}

.modal-window::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.modal-inner {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 90vw;
    max-width: 400px;
    border: 6px solid #ef5350;
    animation: jelly-pop 0.5s;
}

#modalTitle {
    margin: 0 0 16px;
    font-size: 28px;
    color: #c62828;
}

.result-body {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 24px;
}

.result-body p {
    margin: 4px 0;
    border-bottom: 1px dashed #eee;
    padding-bottom: 4px;
}

/* カード詳細モーダル */
.detail-inner {
    max-width: 500px;
    padding: 0;
    background: #fff;
    border: 6px solid #FF7043;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(255, 112, 67, 0.4);
}

.detail-image-container {
    background: #FFF3E0;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.detail-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
    border: 6px solid #fff;
    transform: rotate(-2deg);
    transition: transform 0.3s;
}

.detail-image-container img:hover {
    transform: rotate(0deg) scale(1.02);
}

/* モーダルが開いた時のアニメーション */
dialog[open] .detail-image-container img {
    animation: gentle-sway 1.8s ease-in-out 1 forwards;
}

.detail-content {
    padding: 24px 30px;
    text-align: left;
}

#detailName {
    font-size: 22px;
    color: #fff;
    background: #FF7043;
    margin: 0 0 16px 0;
    padding: 8px 20px;
    display: inline-block;
    border-radius: 20px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
}

dialog[open] #detailName {
    animation: heartbeat 1.3s ease-in-out infinite;
}

#detailDescription {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin: 0;
    font-family: "Zen Maru Gothic", sans-serif;
}

.detail-inner .modal-actions {
    padding: 0 30px 24px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-lang {
    background: #fff;
    border: 2px solid #FF7043;
    color: #FF7043;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-lang:hover {
    background: #FF7043;
    color: #fff;
}

#detailClose {
    background: #FF7043;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 #D84315;
    transition: transform 0.1s;
}

#detailClose:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* ==========================================================================
   12. スロットマシン (Slot Machine)
   ========================================================================== */
.slot-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 11000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
    backdrop-filter: blur(5px);
}

.slot-overlay[hidden] {
    display: none;
}

.slot-container {
    background-color: #ffab91;
    background-image: 
        radial-gradient(#ffffff 20%, transparent 20%),
        radial-gradient(#ffffff 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    padding: 30px;
    border-radius: 30px;
    border: 8px solid #ffffff;
    outline: 8px solid #ffca28;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    max-width: 800px;
    width: 95%;
}

.rainbow-text {
    font-size: 48px;
    font-weight: 900;
    margin: 0 0 10px;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
    animation: rainbow-anim 2s linear infinite;
}

.slot-machine {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    position: relative;
    transform-origin: center top;
}

.reels-frame {
    display: flex;
    gap: 20px;
    background: #3e2723;
    padding: 25px;
    border-radius: 20px;
    border: 6px solid #ffb74d;
    box-shadow: inset 0 0 30px #000;
}

.reel-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    position: relative;
}

/* 目押しガイドランプ */
.guide-lamp {
    position: absolute;
    top: 60px;
    right: -18px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #444;
    border: 2px solid #222;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transform: translateY(-50%);
    z-index: 100;
    transition: background 0.05s;
}

.guide-lamp.active {
    background: #00e676;
    box-shadow: 0 0 10px #00e676, 0 0 20px #00e676;
    border-color: #fff;
}

.reel-window {
    width: 160px;
    height: 160px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 4px solid #fff;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.reel-window::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 0, 0, 0.4);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.reel-strip {
    display: flex;
    flex-direction: column;
}

.reel-card-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
    background: #fff9c4;
    border-bottom: 1px solid #ddd;
}

.btn-slot-stop {
    width: 80px;
    height: 80px;
    font-size: 20px;
    font-weight: 900;
    color: white;
    background: linear-gradient(to bottom, #ff5252, #d50000);
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 0 #b71c1c, 0 10px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.1s;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.btn-slot-stop:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #b71c1c, inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-slot-stop:disabled {
    background: #555;
    color: #888;
    box-shadow: none;
    transform: translateY(6px);
    cursor: default;
}

.slot-message {
    font-size: 24px;
    font-weight: bold;
    color: #d84315;
    min-height: 1.5em;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
    margin-top: 10px;
}

.reel-bouncing {
    animation: reel-throb 0.3s infinite alternate;
}

/* ==========================================================================
   13. 演出用クラス (VFX)
   ========================================================================== */
.slot-anim-card {
    position: fixed;
    z-index: 12000;
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 15px;
    background: #fff;
    border: 4px solid gold;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    --tx: 0px;
    --ty: 0px;
    pointer-events: none;
}

.slot-anim-card.merge-side {
    animation: merge-side-spin 1.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* カード合成アニメーション */
@keyframes merge-side-spin {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(720deg);
        opacity: 0;
    }
}

.slot-anim-card.merge-center {
    animation: merge-center-spin 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    z-index: 12005;
}

@keyframes merge-center-spin {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    30% {
        transform: translate(var(--tx), var(--ty)) scale(0.8) rotate(360deg);
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(3) rotate(1080deg);
    }
}

.slot-anim-card.shaking {
    transform: translate(var(--tx), var(--ty)) scale(3) rotate(0deg);
    animation: card-shake 0.5s ease-in-out infinite;
}

@keyframes card-shake {
    0% {
        transform: translate(var(--tx), var(--ty)) scale(3) rotate(0deg);
    }
    25% {
        transform: translate(var(--tx), var(--ty)) scale(3) rotate(-3deg);
    }
    50% {
        transform: translate(var(--tx), var(--ty)) scale(3) rotate(0deg);
    }
    75% {
        transform: translate(var(--tx), var(--ty)) scale(3) rotate(3deg);
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(3) rotate(0deg);
    }
}

/* コンボ演出テキスト */
.slot-result-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg) scale(0);
    opacity: 0;
    font-size: 80px;
    font-weight: 900;
    font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
    color: #ffeb3b;
    text-shadow: 3px 3px 0 #ff9800, 6px 6px 0 rgba(0, 0, 0, 0.3);
    z-index: 12006;
    pointer-events: none;
    white-space: nowrap;
}

.slot-result-text.show {
    animation: 
        text-enter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        text-loop 0.6s ease-in-out 0.5s infinite alternate;
}

@keyframes text-enter {
    0% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
        opacity: 1;
    }
}

@keyframes text-loop {
    0% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.15);
    }
}

/* パーティクル */
.star-particle {
    position: fixed;
    pointer-events: none;
    z-index: 12007;
    --vx: 0px;
    --vy: 0px;
    animation: star-explosion 1s ease-out forwards;
}

@keyframes star-explosion {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--vx), var(--vy)) scale(0) rotate(180deg);
        opacity: 0;
    }
}

/* スロットの待機メッセージ */
.slot-wait-msg {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 12005;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 30px;
}

.slot-wait-msg.show {
    opacity: 1;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   14. レスポンシブ対応 (Responsive)
   ========================================================================== */

/* タブレット・小型PC (900px以下) */
@media (max-width: 900px) {
    .main-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow-y: auto;
        padding-bottom: 80px;
    }

    .app-header {
        height: auto;
        padding: 12px;
        flex-direction: column;
        gap: 10px;
    }

    .header-inner {
        flex-direction: column;
        gap: 10px;
    }

    .toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .btn-control {
        font-size: 12px;
        height: 36px;
        padding: 0 12px;
    }

    .game-panel {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        flex: none;
    }

    .canvas-container {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        flex: none;
    }

    #game {
        width: 100%;
        height: 100%;
    }

    .sidebar {
        overflow: visible;
        height: auto;
        width: 100%;
        margin-top: 20px;
    }

    .card-panel {
        min-height: auto;
    }

    .card-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
}

/* モバイル (600px以下) */
@media (max-width: 600px) {
    .app-header h1 {
        font-size: 20px;
    }

    .btn-control {
        flex: 1 1 auto;
        min-width: 70px;
        font-size: 11px;
        padding: 0 4px;
    }

    .card-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .slot-container {
        padding: 15px;
        width: 90%;
        max-width: none;
    }

    .slot-header h2 {
        font-size: 28px;
    }

    .slot-machine {
        transform-origin: center top;
        transform: scale(0.65);
        margin-bottom: -60px;
    }

    .slot-message {
        font-size: 18px;
        margin-top: 10px;
    }

    .diff-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .diff-buttons button {
        width: 100%;
        transform: none !important;
    }
}

/* 小型モバイル (380px以下) */
@media (max-width: 380px) {
    .slot-machine {
        transform: scale(0.55);
        margin-bottom: -80px;
    }
}