/* ==========================================
   1. 基本設定 & テーマ変数
   ========================================== */
:root {
    --bg-dark: #0a0a0a;
    --bg-panel: rgba(20, 20, 20, 0.85);
    /* グラスモーフィズム用 */
    --text-main: #f0f0f0;
    --accent-blue: #00d2ff;
    --accent-red: #ff4b2b;
    --zone-border: rgba(255, 255, 255, 0.15);

    /* カードサイズ計算 (画面幅基準) */
    --card-width: 14vw;
    --card-height: 19vw;
    --card-max-width: 65px;
    --card-max-height: 90px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Exo 2', 'Noto Sans JP', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow: hidden;
    height: 100dvh;
    width: 100vw;
    position: fixed;
    touch-action: none;
}

#app-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: radial-gradient(circle at center, #1f1f1f 0%, #000000 100%);
}

/* 画面切り替え */
.screen {
    position: absolute;
    inset: 0;
    z-index: 10;
    /* 非表示状態：activeクラスがない時のみ消す */
    display: none;
}

.screen.active {
    /* displayプロパティを指定しないことで、個別の設定(flex等)を活かす */
    display: revert;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================
   2. UIレイヤー (HUD)
   ========================================== */
#ui-layer {
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    /* フィールド操作を阻害しない */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ui-layer>* {
    pointer-events: auto;
}

/* 左上：カード情報パネル */
#card-info-panel {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    left: 10px;
    width: 280px;
    height: 150px;
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    border-left: 4px solid var(--accent-blue);
    border-radius: 0 10px 10px 0;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 500;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#info-visual-container {
    flex: 0 0 95px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info-visual-container .card-mini {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    pointer-events: none;
}

#info-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.info-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 2px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    min-width: 0;
}

#info-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

#info-attr {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.info-body {
    color: #ddd;
    font-size: 0.7rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#info-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--accent-blue);
    margin-bottom: 4px;
    font-weight: bold;
}

#info-main-stats {
    display: flex;
    gap: 8px;
}

#info-extra-stats {
    color: #aaa;
    font-size: 0.65rem;
}

#info-text {
    flex: 1;
    line-height: 1.2;
    overflow-y: auto;
    white-space: normal;
    word-break: break-all;
    /* 内部でのスクロールを発火させる */
    min-height: 0;
    /* スマホでの縦スクロールを許可 */
    touch-action: pan-y;
    /* スクロールバー非表示 (Firefox, IE/Edge) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* スクロールバー非表示 (Chrome, Safari) */
#info-text::-webkit-scrollbar {
    display: none;
}

/* Redundant Info Styles Removed */

/* Status HUD styles are consolidated in .hud-stats section (Line 197) */

#surrender-btn {
    position: absolute;
    top: calc(15px + env(safe-area-inset-top));
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.75rem;
    padding: 8px 16px;
    border-radius: 20px;
    pointer-events: auto;
}

#next-phase-btn {
    position: absolute;
    right: 10px;
    top: 55%;
    /* フィールド中央の高さに合わせて調整 */
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--accent-blue);
    color: white;
    width: 90px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
    pointer-events: auto;
    z-index: 600;
}

#next-phase-display {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-blue);
}

/* Old Button Style Removed */
.btn-sub {
    font-size: 0.6rem;
    color: #aaa;
}

/* ==========================================
   3. 3Dフィールド
   ========================================== */
.status-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4) !important;
    border: none !important;
}

.status-name {
    font-size: 0.5rem;
    color: #888;
}

.status-lp {
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 10px var(--accent-blue);
}

.opt-status .status-lp {
    text-shadow: 0 0 10px var(--accent-red);
}

.status-hnd {
    font-size: 0.5rem;
    color: #666;
}

.empty-zone {
    border: none !important;
    background: transparent !important;
}

#field-perspective-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 210px;
    padding-bottom: 140px;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

#field-surface {
    position: relative;
    width: 95%;
    max-width: 400px;
    /* スマホ幅に最適化 */
    transform: rotateX(42deg) scale(1.0);
    /* 少し引いて全体を見せる */
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.field-gap {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#phase-center-label {
    font-family: 'Exo 2';
    font-weight: 700;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    transform: rotateX(-42deg);
}

.hud-stats {
    position: absolute;
    z-index: 550;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.hud-stats.opt {
    top: 32%;
    right: 15px;
    text-align: right;
}

.hud-stats.ply {
    top: 62%;
    left: 15px;
    text-align: left;
}

.hud-label {
    font-size: 0.6rem;
    color: #888;
    letter-spacing: 1px;
}

.hud-lp {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Exo 2';
    line-height: 1;
}

.opt .hud-lp {
    color: var(--accent-red);
    text-shadow: 0 0 15px rgba(255, 75, 43, 0.4);
}

.ply .hud-lp {
    color: var(--accent-blue);
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
}

.hud-sub {
    font-size: 0.6rem;
    color: #666;
}

.field-half {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opponent-field {
    /* レイアウト（並び順）は維持し、3D空間のみを定義 */
    transform-style: preserve-3d;
}

/* 相手側の全コンテンツ（カード・文字・バッジ）を180度回転させて正対させる */
.opponent-field .card-mini,
.opponent-field .zone span,
#opt-deck-count {
    transform: rotateZ(180deg);
}

/* 3Dフィールド上で文字を見やすく起こすための共通補正（相手側） */
.opponent-field .zone span,
#opt-deck-count {
    transform: rotateZ(180deg) rotateX(-35deg);
}

.field-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* ゾーンスタイル */
.zone {
    width: var(--card-width);
    height: var(--card-height);
    max-width: var(--card-max-width);
    max-height: var(--card-max-height);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--zone-border);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* ゾーンのヒットエリアを拡大（操作性向上） */
.zone::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    z-index: 5;
    /* カードより手前、ただしUIやオーバーレイより下 */
}

/* ゾーンの識別色 */
.monster-zone {
    border-color: rgba(255, 166, 0, 0.2);
}

.magic-zone {
    border-color: rgba(0, 210, 255, 0.2);
}

.deck-zone,
.trash-zone {
    border-style: dashed;
    opacity: 0.7;
}

/* ゾーン内のテキスト (Deck/Trash) */
.zone span {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    transform: rotateX(-35deg);
    /* 3Dの中で文字を起こす */
    z-index: 10;
    pointer-events: none;
}

.zone {
    overflow: visible !important;
}

/* カード背面の設定 */
.card-back {
    background-image: url('img/card.webp');
    background-size: cover;
    background-position: center;
    border: 2px solid #444 !important;
}

/* 段階的な厚みの表現 (X軸のズレを0にして垂直に積み上げる) */
.stack-stage-1 {
    box-shadow: 0 1px 0 #222;
}

.stack-stage-2 {
    box-shadow: 0 1px 0 #222, 0 2px 0 #151515, 0 3px 0 #000;
}

.stack-stage-3 {
    box-shadow: 0 1px 0 #222, 0 2px 0 #151515, 0 3px 0 #000, 0 4px 0 #000, 0 5px 0 #000;
}

/* 相手側は画面奥に向かって厚みを出す */
.opponent-field .stack-stage-1 {
    box-shadow: 0 -1px 0 #222;
}

.opponent-field .stack-stage-2 {
    box-shadow: 0 -1px 0 #222, 0 -2px 0 #151515, 0 -3px 0 #000;
}

.opponent-field .stack-stage-3 {
    box-shadow: 0 -1px 0 #222, 0 -2px 0 #151515, 0 -3px 0 #000, 0 -4px 0 #000, 0 -5px 0 #000;
}

/* ゾーン内のカードは単体の影を消してスタックと一体化させる */
.zone .card-mini {
    box-shadow: none !important;
}

/* 相手側のゾーンテキスト(Deck/Trash)の向きを補正 */
.opponent-field .zone span {
    transform: rotateX(-35deg) rotateZ(180deg);
}

/* バッジ (デッキ枚数など) */
#ply-deck-count-badge,
#opt-deck-count {
    position: absolute;
    bottom: -10px;
    background: #333;
    border: 1px solid #666;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    color: #fff;
    transform: rotateX(-35deg);
}

/* 相手側の枚数バッジの向きを補正 */
#opt-deck-count {
    transform: rotateX(-35deg) rotateZ(180deg);
}

/* ==========================================
   4. 手札エリア
   ========================================== */
#player-hand-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 160px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, transparent);
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* 追加: クリックを透過させて背後のトラッシュ等を押せるようにする */
}

#player-hand {
    display: flex;
    justify-content: center;
    /* カードを少し重ねる */
    margin-bottom: -10px;
}

/* カード共通スタイル */
.card-mini {
    width: var(--card-width);
    height: var(--card-height);
    max-width: var(--card-max-width);
    max-height: var(--card-max-height);
    flex-shrink: 0;
    position: relative;
    border-radius: 4px;
    border: 2px solid #666 !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, margin-left 0.3s ease, opacity 0.3s ease;
    /* overflow: hiddenを削除して3D表現を有効化 */
    container-type: inline-size;
    background-color: #1a1a1a;
    transform-style: preserve-3d;
    pointer-events: auto;
    /* 追加: コンテナがnoneでもカード本体は操作可能にする */
}

/* カードの表裏構造 */
.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 2px;
}

.card-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.card-back {
    z-index: 1;
    transform: rotateY(180deg);
    background-image: url('img/card.webp');
    background-size: cover;
    background-position: center;
    background-color: #222;
    border: 1px solid #444;
}

/* アニメーション用一時カード */
.anim-drawing-card {
    position: fixed;
    z-index: 5000;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ゾーン内では枠に100%フィットさせる */
.zone .card-mini {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ==========================================
   5. その他 (Detail Overlay, Menu)
   ========================================== */
#card-detail-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #222;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 20px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

/* メニュー画面はindex.htmlのクラスを使用 */
#menu-screen.active {
    background: radial-gradient(circle at center, #1a1a1a, #000);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.menu-header {
    text-align: center;
}

.game-title {
    font-size: 3rem;
    color: #fff;
    letter-spacing: 5px;
}

.game-subtitle {
    color: var(--accent-blue);
    letter-spacing: 2px;
}

.menu-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 260px;
}

.menu-btn {
    background: #222;
    border: 1px solid #444;
    padding: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
}

.menu-btn:active {
    background: #333;
}

.menu-btn.disabled {
    opacity: 0.4;
}

.btn-icon {
    font-size: 1.5rem;
    margin-right: 15px;
}

/* ビューポートの安定化 */
#game-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* カードタイプ別背景色・文字色 */
.bg-normal {
    background: #ffeb3b;
    color: #000;
}

/* 通常モンスターは鮮やかな黄色 */
.bg-effect {
    background: #ff9900;
    color: #000;
}

/* 効果モンスターはオレンジ */
.bg-magic {
    background: #111111;
    color: #fff;
}

/* 魔術カードは黒ベース */

/* モンスター名の文字色を強制的に黒に固定 */
.bg-normal .card-name-text,
.bg-effect .card-name-text {
    color: #000 !important;
}

/* スケーラブル名称エリア */
.card-name-box {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 11%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3%;
    border-radius: 2px;
    z-index: 5;
}

.card-name-text {
    font-size: 10cqi;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
}

/* 固定画像エリア (正方形) */
.card-img-frame {
    position: absolute;
    top: 17%;
    left: 8%;
    width: 84%;
    height: 50%;
    border: 1px solid #555;
    background: #000;
    overflow: hidden;
    z-index: 2;
}

.card-img-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 属性バッジ (右下隅) */
.card-attribute-icon {
    position: absolute;
    bottom: 3%;
    right: 3%;
    width: 30%;
    height: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.card-attribute-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ステータスクラスター (左下隅) */
.card-status-cluster {
    position: absolute;
    bottom: 3%;
    left: 3%;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    z-index: 5;
}

.card-lv-text {
    font-size: 15cqi;
    font-weight: bold;
    color: #00d2ff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.card-atk-text {
    font-size: 18cqi;
    font-weight: bold;
    color: #00d2ff;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
}

.card-magic-type {
    font-size: 13cqi;
    color: #fff;
    font-style: italic;
}

/* 浮遊アクションボタン */
.floating-actions {
    position: fixed;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    /* アニメーションを削除し、初期状態を非表示に設定 */
    opacity: 0;
    transition: opacity 0.1s ease;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.btn-action-float {
    background: var(--accent-blue);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.btn-action-float.attack {
    background: var(--accent-red);
}

.btn-action-float:disabled {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: not-allowed;
    background: #444;
    border-color: #666;
}

/* スロットハイライト */
.zone.highlight {
    border: 3px solid #fff !important;
    box-shadow: 0 0 20px #fff, inset 0 0 10px #fff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    cursor: pointer;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
    }
}

/* コスト選択ハイライト (黄色) */
.zone.cost-highlight {
    border: 3px solid #ffff00 !important;
    box-shadow: 0 0 20px #ffff00, inset 0 0 10px #ffff00 !important;
    background: rgba(255, 255, 0, 0.2) !important;
    cursor: pointer;
    animation: blink 1s infinite alternate;
}

.zone.cost-selected {
    border: 3px solid #ffaa00 !important;
    box-shadow: 0 0 25px #ffaa00 !important;
    background: rgba(255, 170, 0, 0.3) !important;
}

/* 相手ターン中のUIロック */
.disabled-ui {
    filter: grayscale(0.8) brightness(0.7);
    pointer-events: none !important;
    opacity: 0.7;
}

/* 手札選択時の強調表示 (浮き上がり演出) */
#player-hand .card-mini.selected {
    transform: translateY(-15px);
    z-index: 999 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), 0 0 15px var(--accent-blue);
    border-color: var(--accent-blue) !important;
}

/* ==========================================
   6. リザルトモーダル (Transparent Version)
   ========================================== */
#game-result-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    /* 完全透明 */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    pointer-events: auto;
    /* モーダル表示中はここで入力をブロック */
}

/* クラス制御に変更 */
#game-result-overlay.active {
    display: flex;
    animation: fadeIn 0.5s ease forwards;
}

.result-modal-content {
    background: transparent;
    /* 背景なし */
    padding: 30px 40px;
    text-align: center;
    transform: scale(0.8);
    opacity: 0;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 1);
}

#game-result-overlay.active .result-modal-content {
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s forwards;
}

#result-title {
    font-size: 3.5rem;
    /* より大きく強調 */
    margin-bottom: 15px;
    letter-spacing: 4px;
    font-family: 'Exo 2';
    font-weight: 800;
}

/* 勝利スタイル - テキスト発光のみ強化 */
.result-win #result-title {
    color: var(--accent-blue);
    text-shadow: 0 0 30px rgba(0, 210, 255, 0.8), 0 5px 20px rgba(0, 0, 0, 1);
}

/* 敗北スタイル - テキスト発光のみ強化 */
.result-lose #result-title {
    color: var(--accent-red);
    text-shadow: 0 0 30px rgba(255, 75, 43, 0.8), 0 5px 20px rgba(0, 0, 0, 1);
}

#result-message {
    margin-bottom: 40px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}

.result-home-btn {
    background: rgba(0, 0, 0, 0.4);
    /* ボタン認識用にわずかに暗く */
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 40px;
    border-radius: 40px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: none;
    /* ボタン内の文字影はリセット */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.result-home-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.result-home-btn:active {
    transform: scale(0.95);
}

@keyframes modalPop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================
   7. スタートモーダル (DUEL)
   ========================================== */
#game-start-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 4000;
    animation: fadeIn 0.5s ease forwards;
}

.start-modal-content {
    background: transparent;
    text-align: center;
    transform: scale(0.8);
    opacity: 0;
    animation: modalPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 1);
}

#start-title {
    font-size: 5rem;
    color: #ffff00;
    letter-spacing: 12px;
    font-family: 'Exo 2';
    font-weight: 900;
    margin-bottom: 5px;
    text-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 255, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 1);
    animation: duelGlow 1.5s ease-in-out infinite alternate;
}

#start-message {
    margin-bottom: 50px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.start-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 3px solid #ffff00;
    color: #ffff00;
    padding: 15px 60px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
    text-transform: uppercase;
}

.start-btn:hover {
    background: #ffff00;
    color: #000;
    box-shadow: 0 0 40px rgba(255, 255, 0, 0.6);
}

.start-btn:active {
    transform: scale(0.9);
}

@keyframes duelGlow {
    from {
        text-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 1);
    }

    to {
        text-shadow: 0 0 40px rgba(255, 255, 0, 1), 0 0 60px rgba(255, 255, 0, 0.6), 0 5px 15px rgba(0, 0, 0, 1);
    }
}

/* 選択モード中のフィールド制御 */
.selecting-mode .card-mini {
    /* カードを透過させず、タップイベントがゾーンに届くように調整 */
    pointer-events: auto;
}

.selecting-mode .zone.highlight,
.selecting-mode .zone.cost-highlight {
    pointer-events: auto !important;
    z-index: 1000;
}

/*
 * 選択モード中にフィールドを最前面へ昇格し、
 * 手札やUIの干渉を遮断するグローバルクラス。
 * JS側で #game-viewport に .field-selecting を付与して使う。
 */
#game-viewport.field-selecting #field-perspective-wrapper {
    z-index: 2000 !important;
    pointer-events: none;
}

#game-viewport.field-selecting #field-surface {
    pointer-events: auto;
}

#game-viewport.field-selecting #player-hand-container {
    pointer-events: none !important;
    opacity: 0.4;
}

#game-viewport.field-selecting #ui-layer>* {
    pointer-events: none !important;
}

/* :has() 対応ブラウザ向けのフォールバックも維持 */
#field-perspective-wrapper:has(.selecting-mode) {
    z-index: 2000 !important;
    pointer-events: none;
}

#field-surface.selecting-mode {
    pointer-events: auto;
}

/* ドロー演出用：スロット確保中の透明状態 */
.card-mini.entering {
    opacity: 0;
    pointer-events: none;
}

/* デッキ選択画面のレイアウト */
#deck-select-screen.active {
    background: radial-gradient(circle at center, #1a1a1a, #000);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

/* ==========================================
   8. トラッシュ閲覧モーダル
   ========================================== */
#trash-viewer-modal {
    position: absolute;
    inset: 0;
    display: none;
    /* 初期状態は非表示 */
    justify-content: center;
    align-items: center;
    z-index: 2500;
    background: transparent;
}

#trash-viewer-modal .modal-content {
    width: 98%;
    max-width: 600px;
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid var(--accent-blue);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
    pointer-events: auto;
}

#trash-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

#trash-viewer-title {
    font-weight: bold;
    color: var(--accent-blue);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
}

#trash-card-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 5px 2px;
    min-height: auto;
    /* 横スクロールを滑らかにする */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* スクロールバーのカスタマイズ */
#trash-card-list::-webkit-scrollbar {
    height: 6px;
}

#trash-card-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#trash-card-list::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 3px;
}

/* モーダル内のカードは重ならないように固定 */
#trash-card-list .card-mini {
    flex: 0 0 var(--card-width);
    width: var(--card-width);
    height: var(--card-height);
    max-width: var(--card-max-width);
    max-height: var(--card-max-height);
    margin: 0 !important;
    transform: none !important;
    cursor: pointer;
    transition: filter 0.2s, border-color 0.2s;
}

#trash-card-list .card-mini:hover {
    filter: brightness(1.2);
    border-color: var(--accent-blue) !important;
}

/* フィールドのトラッシュゾーン内のカードはクリックを透過させ、ゾーンの閲覧イベントを優先させる */
.trash-zone .card-mini,
.trash-zone .card-mini * {
    pointer-events: none !important;
}

.trash-zone {
    pointer-events: auto !important;
}

/* トラッシュ枚数バッジのスタイル */
#ply-trash-count-badge,
#opt-trash-count-badge {
    position: absolute;
    bottom: -10px;
    background: rgba(40, 40, 40, 0.9);
    border: 1px solid #777;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: #fff;
    transform: rotateX(-35deg);
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

#opt-trash-count-badge {
    transform: rotateX(-35deg) rotateZ(180deg);
}

/* 手札選択モーダル専用スタイル */
#selection-modal {
    position: absolute;
    inset: 0;
    display: none;
    background: transparent;
    /* 背景を暗くしない */
    z-index: 3000;
    justify-content: center;
    align-items: flex-end;
    /* 下寄せ */
    pointer-events: none;
    /* 背後のタップを阻害しないための設定（子要素で戻す） */
}

#selection-modal .modal-content {
    width: 100%;
    max-width: 650px;
    border-top: 2px solid var(--accent-red);
    background: rgba(5, 5, 5, 0.95);
    /* モーダル内の背景を濃く */
    padding: 15px 15px calc(15px + env(safe-area-inset-bottom));
    pointer-events: auto;
    /* タップを有効化 */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
}

.horizontal-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 20px 0;
    min-height: 120px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}

#selection-card-list .card-mini {
    flex: 0 0 75px;
    height: 105px;
    transition: transform 0.2s, box-shadow 0.2s;
}

#selection-card-list .card-mini.selected {
    transform: translateY(-10px);
    box-shadow: 0 0 20px var(--accent-red);
    border-color: var(--accent-red) !important;
}

.modal-footer {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

#selection-confirm-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    background: var(--bg-dark);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

#selection-confirm-btn.active {
    background: var(--accent-red);
    color: #fff;
    box-shadow: 0 0 15px var(--accent-red);
    cursor: pointer;
}

/* Common Confirm Modal (System Overlay) */
#common-confirm-modal {
    position: absolute;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 4500;
    /* Result Modal(3000)より上 */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
}

#common-confirm-modal .modal-content {
    width: 90%;
    max-width: 400px;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--accent-blue);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    text-align: center;
    pointer-events: auto;
    transform: scale(1);
    animation: modalPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================
   9. VFX & Animations (LinkaVel VFX System)
   ========================================== */
/* VFX Layer Constraint */
.card-mini {
    overflow: visible !important;
    /* エフェクトが枠外にはみ出るのを許可 */
}

/* 1. LP変動演出 */
.hud-lp {
    transition: color 0.2s;
}

.hud-lp.damage {
    color: #ff4b2b !important;
    text-shadow: 0 0 15px #ff0000, 0 0 30px #8b0000 !important;
    transform: scale(1.1);
}

.hud-lp.heal {
    color: #00d2ff !important;
    text-shadow: 0 0 15px #00d2ff, 0 0 30px #005f73 !important;
    transform: scale(1.1);
}

/* 2. 波紋エフェクト (Ripple) */
.vfx-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 10px currentColor;
}

.vfx-ripple.monster {
    background: radial-gradient(circle, rgba(255, 215, 0, 0) 30%, rgba(255, 215, 0, 0.8) 50%, rgba(255, 215, 0, 0) 70%);
    color: #ffd700;
    animation: ripple-expand 0.5s ease-out forwards;
}

.vfx-ripple.magic {
    background: radial-gradient(circle, rgba(0, 210, 255, 0) 30%, rgba(0, 210, 255, 0.8) 50%, rgba(0, 210, 255, 0) 70%);
    color: #00d2ff;
    animation: ripple-expand 0.5s ease-out forwards;
}

@keyframes ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* 3. 召喚ランディング (Landing) */
.vfx-landing-flash {
    position: absolute;
    inset: -10px;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 20px #fff, inset 0 0 20px #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    animation: landing-flash 0.4s ease-out forwards;
}

@keyframes landing-flash {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.0);
    }

    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

/* 4. 戦闘演出 (Attack & Damage) */
/* 振動 */
.shake-target {
    animation: shake-anim 0.3s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake-anim {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* スラッシュ（斬撃） */
.vfx-slash-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 4px;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px var(--accent-red);
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    animation: slash-anim 0.3s ease-out forwards;
}

@keyframes slash-anim {
    0% {
        transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2);
        opacity: 0;
    }
}

/* 5. フライト演出用クラス (JSで動的に制御) */
.card-mini.flying-effect {
    position: fixed !important;
    z-index: 5000 !important;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.0) !important;
    pointer-events: none !important;
    transform-origin: center center;
}

.card-mini.fading-out {
    transition: transform 0.5s ease, opacity 0.5s ease !important;
    transform: scale(0.5) !important;
    opacity: 0 !important;
}

/* ==========================================
   10. PC対応レイアウト
   ========================================== */
@media (min-width: 481px) {

    /* ゲーム画面をモバイル幅に制限して中央配置 */
    #game-screen.active {
        display: flex !important;
        justify-content: center;
        background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);
    }

    #game-viewport {
        max-width: 480px;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
}