/* ===================================================
   百鬼夜行乱舞 〜妖怪大戦争〜
   和風モダン・漆黒＆金箔テーマ スタイルシート
=================================================== */

:root {
    --bg-dark: #0a0c10;
    --paper-dark: #12161f;
    --paper-card: rgba(22, 28, 40, 0.88);
    --gold-primary: #ffd700;
    --gold-secondary: #d4af37;
    --gold-glow: rgba(255, 215, 0, 0.4);
    --crimson: #d32f2f;
    --crimson-glow: rgba(211, 47, 47, 0.5);
    --yokai-blue: #38bdf8;
    --yokai-green: #4ade80;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-gold: rgba(212, 175, 55, 0.45);
    --font-mincho: 'Shippori Mincho', 'Yuji Boku', serif;
    --font-modern: 'Outfit', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    font-family: var(--font-mincho);
    color: var(--text-main);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* メインコンテナ（16:9比率を保って画面中央にフィット） */
#game-app-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 177.78vh; /* 16:9 */
    max-height: 56.25vw;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 1px var(--border-gold);
    overflow: hidden;
}

#game-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: auto;
}

/* 共通画面レイヤー */
.screen-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.hidden {
    display: none !important;
}

/* Menus scroll inside the game viewport, including when embedded in a smaller iframe. */
#title-screen { overflow-y: auto; justify-content: flex-start; }
.title-content-box { flex-shrink: 0; margin: auto; width: 100%; }
.modal-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }

/* ===================================================
   タイトル画面
=================================================== */
#title-screen {
    background: radial-gradient(circle at center, #1b2030 0%, #0d1017 70%, #050608 100%);
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.title-bg-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cloud {
    position: absolute;
    width: 300px;
    height: 80px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(10px);
}
.cloud-1 { top: 20%; left: 10%; animation: floatCloud 25s infinite linear; }
.cloud-2 { top: 60%; right: 10%; animation: floatCloud 35s infinite linear reverse; }

@keyframes floatCloud {
    0% { transform: translateX(-50px); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(-50px); }
}

.title-content-box {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.title-badge {
    display: inline-block;
    padding: 6px 18px;
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--gold-secondary);
    border: 1px solid var(--border-gold);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    margin-bottom: 20px;
}

.main-title {
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 8px;
    color: #fff;
    text-shadow: 0 0 25px var(--gold-glow), 0 0 10px #000, 3px 3px 0px #000;
    background: linear-gradient(180deg, #ffffff 20%, #ffd700 80%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.sub-title {
    font-size: 24px;
    letter-spacing: 12px;
    color: var(--crimson);
    font-weight: 700;
    text-shadow: 0 0 10px var(--crimson-glow);
    margin-bottom: 25px;
}

.title-intro {
    font-size: 16px;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 35px;
    text-shadow: 0 2px 4px #000;
}

.title-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 30px;
}

.title-actions .brush-btn { flex-shrink: 0; padding: 14px 22px; }
.title-actions .btn-text { white-space: nowrap; }
.title-actions .btn-sub { font-size: 11px; margin-top: 4px; letter-spacing: 0.5px; opacity: 0.8; }

/* 筆文字風プレミアムボタン */
.brush-btn {
    position: relative;
    padding: 14px 32px;
    font-family: var(--font-mincho);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.primary-btn {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    color: #fff;
    border: 1px solid #ef4444;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.primary-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.6);
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

.primary-btn .btn-sub {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}

.secondary-btn {
    background: rgba(22, 28, 40, 0.8);
    color: var(--gold-primary);
    border: 1px solid var(--border-gold);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.secondary-btn:hover {
    transform: translateY(-2px) scale(1.03);
    background: rgba(30, 40, 60, 0.9);
    border-color: var(--gold-primary);
    box-shadow: 0 4px 20px var(--gold-glow);
}

.tertiary-btn {
    background: rgba(15, 23, 42, 0.7);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tertiary-btn:hover {
    transform: translateY(-2px);
    background: rgba(30, 41, 59, 0.9);
    color: #fff;
}

.small-btn {
    padding: 8px 20px;
    font-size: 14px;
    background: rgba(22, 28, 40, 0.8);
    color: var(--gold-primary);
    border: 1px solid var(--border-gold);
}

.title-footer-notes {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===================================================
   戦闘 HUD レイヤー
=================================================== */
.hud-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 左上：総大将カード */
.hud-top-left {
    pointer-events: auto;
}

.leader-hud-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--paper-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    width: 320px;
}

.leader-avatar-frame {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--gold-primary);
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 10px var(--gold-glow);
}

.leader-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leader-title-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--crimson);
    color: #fff;
    font-size: 10px;
    text-align: center;
    font-weight: 700;
}

.leader-bars {
    flex: 1;
}

.hud-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 700;
}

.char-name {
    color: var(--gold-primary);
}

.meter-bar-bg {
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-bar-bg {
    height: 12px;
    margin-bottom: 6px;
}

.meter-fill {
    height: 100%;
    transition: width 0.15s ease-out;
}

.hp-fill {
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.skill-bar-bg {
    height: 8px;
}

.skill-fill {
    background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

.skill-name-hint {
    position: absolute;
    right: 4px;
    top: -2px;
    font-size: 9px;
    color: #fff;
    font-family: var(--font-modern);
}

/* 中央上：ボスHUD */
.hud-top-center {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    pointer-events: auto;
}

.boss-frame {
    background: rgba(20, 10, 10, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--crimson);
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 4px 20px var(--crimson-glow);
}

.boss-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.boss-phase-badge {
    background: var(--crimson);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.boss-title {
    font-size: 16px;
    font-weight: 900;
    color: #f87171;
    letter-spacing: 2px;
}

.boss-hp-bg {
    height: 14px;
}

.boss-hp-fill {
    background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

/* 右上：指揮バッジ */
.hud-top-right {
    position: absolute;
    top: 16px;
    right: 16px;
    text-align: right;
    pointer-events: auto;
}

.command-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.command-badge.normal {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
}

.command-badge.regroup {
    background: rgba(30, 64, 175, 0.9);
    border: 1px solid #60a5fa;
    color: #93c5fd;
    animation: pulseGlow 1s infinite alternate;
}

.command-badge.focus {
    background: rgba(180, 83, 9, 0.9);
    border: 1px solid #f59e0b;
    color: #fde68a;
    animation: pulseGlow 1s infinite alternate;
}

@keyframes pulseGlow {
    0% { transform: scale(1); }
    100% { transform: scale(1.04); }
}

.command-keys-hint {
    font-size: 11px;
    color: var(--text-muted);
}
.command-keys-hint span {
    margin-left: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 画面下部：配下妖怪編成スロット */
.hud-bottom-squad {
    pointer-events: auto;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.squad-header-bar {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
    padding: 0 4px;
}

.squad-title-gold {
    color: var(--gold-primary);
    font-weight: 700;
    letter-spacing: 1px;
}

.squad-capacity-hint {
    color: var(--text-muted);
}

.squad-slots-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.squad-slot {
    background: var(--paper-card);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, border-color 0.2s;
}

.squad-slot.active:hover {
    border-color: var(--gold-primary);
    transform: translateY(-2px);
}

.squad-slot.down {
    filter: grayscale(0.8);
    opacity: 0.7;
    border-color: #64748b;
}

.squad-slot.empty {
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
}

.slot-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
}

.slot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.down-tag {
    position: absolute;
    inset: 0;
    background: rgba(185, 28, 28, 0.85);
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.slot-info {
    flex: 1;
    min-width: 0;
}

.slot-name {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.slot-role {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.slot-hp-bg {
    height: 5px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    overflow: hidden;
}

.slot-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

/* 仮想タッチボタン */
.virtual-controls-layer {
    position: absolute;
    bottom: 90px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.virtual-action-buttons, .virtual-command-buttons {
    display: flex;
    gap: 12px;
    pointer-events: auto;
}

.v-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-mincho);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.v-btn:active {
    transform: scale(0.92);
    background: rgba(255, 215, 0, 0.3);
}

.v-btn-cmd {
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-gold);
    color: var(--gold-primary);
    font-size: 11px;
    cursor: pointer;
}

/* 幕間バナー */
.stage-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20;
    pointer-events: none;
}

.banner-box {
    text-align: center;
    padding: 30px 60px;
    border-top: 2px solid var(--gold-primary);
    border-bottom: 2px solid var(--gold-primary);
    background: radial-gradient(circle, rgba(30, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

.banner-box h2 {
    font-size: 42px;
    letter-spacing: 6px;
    color: var(--gold-primary);
    margin-bottom: 8px;
    text-shadow: 0 0 20px var(--gold-glow);
}

.banner-box p {
    font-size: 18px;
    color: #cbd5e1;
    letter-spacing: 4px;
}

/* ===================================================
   モーダルダイアログ（操作指南、入れ替え、リザルト）
=================================================== */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    padding: 20px;
}

.modal-card {
    background: var(--paper-dark);
    border: 1px solid var(--border-gold);
    border-radius: 10px;
    width: 100%;
    max-width: 680px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
    padding: 24px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.modal-header h3 {
    font-size: 22px;
    color: var(--gold-primary);
    letter-spacing: 2px;
}

.close-x-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-muted);
    cursor: pointer;
}

.close-x-btn:hover {
    color: #fff;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 13px;
}

.help-table th, .help-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.help-table th {
    color: var(--gold-secondary);
    font-weight: 700;
}

.help-rules-box {
    background: rgba(0, 0, 0, 0.4);
    padding: 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.8;
}

.help-rules-box h4 {
    color: var(--gold-primary);
    margin-bottom: 6px;
}

.help-rules-box ul {
    padding-left: 20px;
}

/* 編成入れ替えモーダル特化 */
.swap-card-modal {
    max-width: 820px;
}

.swap-content-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.candidate-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid #38bdf8;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.card-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    border: 2px solid #38bdf8;
    margin-bottom: 10px;
}

.card-details h3 {
    font-size: 18px;
    color: #38bdf8;
    margin-bottom: 4px;
}

.card-role {
    font-size: 12px;
    color: var(--gold-secondary);
    margin-bottom: 8px;
}

.card-details p {
    font-size: 11px;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 10px;
    text-align: left;
}

.card-stats {
    font-size: 12px;
    font-family: var(--font-modern);
    color: #fff;
    margin-bottom: 8px;
}

.current-party-box .box-title {
    font-size: 14px;
    color: var(--gold-primary);
    margin-bottom: 10px;
    font-weight: 700;
}

.party-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.party-member-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 10px;
}

.party-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.party-card-top img {
    width: 44px;
    height: 44px;
    border-radius: 4px;
}

.swap-select-btn {
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    border: 1px solid #ef4444;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font-mincho);
}

.swap-select-btn:hover {
    background: #dc2626;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
}

/* リザルト画面 */
.result-card {
    text-align: center;
    padding: 36px;
}

.result-title {
    font-size: 32px;
    margin-bottom: 12px;
    letter-spacing: 4px;
}

.result-title.victory {
    color: var(--gold-primary);
    text-shadow: 0 0 20px var(--gold-glow);
}

.result-title.defeat {
    color: var(--crimson);
    text-shadow: 0 0 20px var(--crimson-glow);
}

.result-desc {
    font-size: 16px;
    color: #cbd5e1;
    margin-bottom: 24px;
}

.result-party-section {
    margin-bottom: 30px;
}

.result-party-grid {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.result-member-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.result-member-badge img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid var(--border-gold);
}

.result-member-badge span {
    font-size: 11px;
    color: #fff;
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ===================================================
   妖怪図鑑画面
=================================================== */
#bestiary-screen {
    background: #0d1117;
    padding: 24px 36px;
}

.bestiary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-gold);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.bestiary-header h2 {
    font-size: 26px;
    color: var(--gold-primary);
    letter-spacing: 3px;
}

.bestiary-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
}

.bestiary-sidebar {
    background: var(--paper-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow-y: auto;
    padding: 8px;
}

.bestiary-tab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: background 0.2s;
}

.bestiary-tab-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.bestiary-tab-item.selected {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--gold-primary);
}

.bestiary-thumb {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.bestiary-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bestiary-tab-info .name {
    font-size: 14px;
    font-weight: 700;
}

.bestiary-tab-info .role {
    font-size: 11px;
    color: var(--text-muted);
}

.bestiary-content-panel {
    background: var(--paper-dark);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 24px;
    overflow-y: auto;
}

.detail-unlocked {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: center;
}

.detail-visual {
    text-align: center;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    border-radius: 12px;
    padding: 16px;
}

.detail-visual img {
    max-width: 100%;
    max-height: 380px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
}

.detail-title-badge {
    display: inline-block;
    color: var(--gold-secondary);
    font-size: 14px;
    margin-bottom: 4px;
}

.detail-text h2 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 6px;
}

.detail-role {
    color: var(--yokai-blue);
    font-size: 14px;
    margin-bottom: 12px;
}

.detail-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.stat-box span {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.stat-box strong {
    font-size: 18px;
    font-family: var(--font-modern);
    color: var(--gold-primary);
}

.detail-skills h4 {
    color: var(--gold-primary);
    margin-bottom: 10px;
}

.skill-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.skill-item p {
    color: var(--text-muted);
    margin-top: 4px;
}

.detail-locked {
    text-align: center;
    padding: 60px 20px;
}

.detail-locked .silhouette-box img {
    height: 240px;
}

.detail-locked h3 {
    font-size: 24px;
    color: #64748b;
    margin-top: 20px;
    letter-spacing: 4px;
}

.detail-locked p {
    color: var(--text-muted);
    margin-top: 8px;
    font-size: 14px;
}
/* Practice keeps all action controls visible without covering the battlefield. */
.training-panel {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 960px);
    padding: 12px 18px;
    z-index: 30;
    color: #f3e5c6;
    background: rgba(12, 18, 26, 0.94);
    border: 1px solid #ab8950;
    border-radius: 8px;
    box-shadow: 0 6px 22px #0008;
    font-size: 13px;
}
.training-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.training-label { font-weight: bold; color: #f4cd83; font-size: 18px; }
.training-controls select, .training-controls button {
    background: #202936; color: #f7e8c6; border: 1px solid #806b48;
    border-radius: 4px; padding: 7px 10px; cursor: pointer; font: inherit;
}
.training-controls :focus-visible { outline: 2px solid #ffdb83; outline-offset: 3px; }
.training-panel p { margin: 10px 0 5px; }
.training-panel small { color: #c0b497; }
.training-mode .virtual-controls-layer { bottom: 154px; }
.training-mode .virtual-command-buttons { display: none; }
@media (max-width: 640px) {
    .training-panel { padding: 8px; font-size: 10px; bottom: 8px; }
    .training-controls { gap: 5px; }
    .training-controls select, .training-controls button { padding: 4px; }
    .training-mode .virtual-controls-layer { bottom: 164px; }
}
.play-settings {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
    max-width: 580px; margin: 16px auto; padding: 12px 16px;
    border: 1px solid #76633e; border-radius: 8px; background: #111b26d9; font-size: 14px;
}
.play-settings select, .battle-settings select {
    color: #ffe2a8; background: #1e2937; border: 1px solid #927749; border-radius: 5px;
    padding: 6px 10px; font: inherit; cursor: pointer;
}
.play-settings p { width: 100%; font-size: 12px; color: #cbbd9c; line-height: 1.6; }
.title-guide-label, .battle-settings label { display: flex; align-items: center; gap: 6px; }
.play-settings input, .battle-settings input { accent-color: #7de5f5; }
.battle-settings {
    pointer-events: auto; padding: 8px 10px; margin-top: 8px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 7px 10px; max-width: 300px;
    background: #101b27dd; border: 1px solid #596774; border-radius: 6px; font-size: 11px;
}
.range-legend { width: 100%; font-size: 10px; color: #dac4a8; line-height: 1.6; }
.range-legend span { color: #67edff; } .range-legend strong { color: #8bffb5; }
.training-mode .battle-difficulty-label { display: none; }
@media (max-width: 640px) {
    .play-settings { margin: 8px auto; padding: 7px; font-size: 11px; }
    .battle-settings { max-width: 210px; padding: 5px; }
    .range-legend { font-size: 9px; }
}
.controller-summary { margin: 12px auto 0; max-width: 600px; font-size: 11px; color: #c6d5df; }
.controller-summary p { margin-bottom: 7px; overflow-wrap: anywhere; }
.controller-summary small { display: block; margin-top: 6px; color: #9bacb9; }
.controller-summary button, .controller-status-button {
    font: inherit; color: #c7efff; background: #152331; border: 1px solid #527389;
    border-radius: 5px; padding: 5px 9px; cursor: pointer;
}
.controller-status-button { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controller-diagnostics { text-align: left; font-size: 13px; line-height: 1.8; }
.controller-diagnostics p { margin-bottom: 14px; overflow-wrap: anywhere; }
.controller-diagnostics select { width: 100%; margin: 8px 0 16px; padding: 8px; background: #1d2935; color: #efdfb9; }
#gamepad-raw-input { white-space: pre-wrap; font-family: monospace; color: #8be6fc; background: #101a22; padding: 10px; }
/* Wave-clear growth choices, usable with pointer, keyboard and controller. */
.upgrade-card { width: min(900px, 94vw); }
.upgrade-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px; }
.upgrade-option { background: #17232d; border: 2px solid #74613d; color: #fff0c7; border-radius: 12px; padding: 24px 18px; min-height: 160px; text-align: left; cursor: pointer; }
.upgrade-option strong { display: block; font-size: 22px; margin-bottom: 16px; }
.upgrade-option span { display: block; line-height: 1.7; color: #ded7c4; }
.upgrade-option.selected, .upgrade-option:focus-visible { outline: 2px solid #ffe298; outline-offset: 3px; background: #343023; border-color: #ffe298; }
.upgrade-help { text-align: center; color: #ded7c4; padding: 0 20px 16px; font-size: 13px; }
@media (max-width: 620px) { .upgrade-choices { grid-template-columns: 1fr; gap: 10px; } .upgrade-option { min-height: 0; padding: 14px; } .upgrade-option strong { font-size: 18px; margin-bottom: 6px; } }

/* Landscape touch play keeps the original 16:9 battlefield without stretching it. */
.touch-stick, .mobile-settings-toggle, .rotate-hint { display: none; }
.virtual-controls-layer { touch-action: none; }
.v-btn, .v-btn-cmd { touch-action: none; -webkit-touch-callout: none; }
.v-btn.pressed, .v-btn-cmd.pressed { background: #63522c; border-color: #ffe19a; }
.touch-device #game-app-container {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; aspect-ratio: auto;
}
.touch-device #game-canvas { object-fit: contain; touch-action: none; }
.touch-device #title-screen { padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); overflow-y: auto; justify-content: flex-start; }
.touch-device .title-content-box { width: 100%; flex-shrink: 0; margin: auto; }
.touch-device .main-title { font-size: 30px; letter-spacing: 4px; }
.touch-device .sub-title { font-size: 16px; letter-spacing: 4px; margin-bottom: 8px; }
.touch-device .title-badge { font-size: 10px; margin-bottom: 6px; }
.touch-device .title-intro { display: none; }
.touch-device .title-actions { margin-bottom: 10px; gap: 8px; }
.touch-device .title-actions .brush-btn { padding: 10px 14px; font-size: 14px; min-height: 44px; }
.touch-device .title-actions .btn-sub { display: none; }
.touch-device .play-settings { margin: 8px auto; padding: 6px 10px; font-size: 12px; }
.touch-device .play-settings select { min-height: 44px; }
.touch-device .controller-summary { display: none; }
.touch-device .title-footer-notes { font-size: 10px; }
.touch-device .hud-layer { padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
.touch-device .leader-hud-card { width: 190px; padding: 5px 8px; gap: 7px; backdrop-filter: none; }
.touch-device .leader-avatar-frame { width: 38px; height: 38px; flex-shrink: 0; }
.touch-device .leader-title-tag { display: none; }
.touch-device .char-name { font-size: 12px; }
.touch-device .leader-bars { min-width: 0; }
.touch-device .hud-label-row { gap: 4px; }
.touch-device .char-name { font-size: 10px; white-space: nowrap; letter-spacing: 0; }
.touch-device .char-hp-num { font-size: 10px; white-space: nowrap; }
.touch-device .skill-name-hint { display: none; }
.touch-device .hud-top-center { top: 64px; width: min(280px, 60vw); }
.touch-device .boss-frame { padding: 4px 8px; backdrop-filter: none; }
.touch-device .boss-title { font-size: 10px; }
.touch-device .boss-phase-badge { font-size: 9px; padding: 2px 4px; }
.touch-device .hud-top-right { top: 8px; right: max(8px, env(safe-area-inset-right)); display: flex; align-items: flex-start; gap: 6px; }
.touch-device .command-badge { max-width: 170px; padding: 6px; font-size: 10px; }
.touch-device .command-keys-hint { display: none; }
.touch-device .mobile-settings-toggle { display: block; min-height: 44px; min-width: 48px; border: 1px solid #ae8c51; border-radius: 8px; color: #ffe0a0; background: #172330; font: inherit; font-size: 12px; }
.touch-device .battle-settings { display: none; position: absolute; top: 46px; right: 0; width: 270px; max-width: min(270px, 90vw); max-height: calc(100dvh - 72px); overflow-y: auto; font-size: 12px; z-index: 40; background: #111d2b; padding: 10px; }
.touch-device .settings-open .battle-settings { display: flex; }
.touch-device .battle-settings select, .touch-device .battle-settings label, .touch-device .battle-settings button { min-height: 44px; }
.touch-device .hud-bottom-squad { position: absolute; bottom: max(5px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(350px, calc(100% - 420px)); min-width: 150px; }
.touch-device .squad-header-bar, .touch-device .slot-role, .touch-device .slot-name, .touch-device .empty-text, .touch-device .down-tag { display: none; }
.touch-device .squad-slots-row { gap: 3px; }
.touch-device .squad-slot { padding: 3px; display: block; backdrop-filter: none; }
.touch-device .slot-avatar { width: 25px; height: 25px; margin: 0 auto 3px; }
.touch-device .virtual-controls-layer { bottom: max(12px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); height: 132px; align-items: flex-end; z-index: 15; }
.touch-device .touch-stick { position: relative; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; flex-shrink: 0; border-radius: 50%; border: 2px solid #b8b29588; background: #142132aa; pointer-events: auto; touch-action: none; }
.touch-stick-knob { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #ffe0a0; background: #6c654baa; pointer-events: none; }
.stick-arrows { position: absolute; font-size: 100px; opacity: 0.15; pointer-events: none; }
.stick-label { position: absolute; bottom: 3px; font-size: 10px; color: #eee3c7; pointer-events: none; }
.touch-device .virtual-action-buttons { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 8px; }
.touch-device .v-btn { width: 48px; height: 48px; font-size: 16px; backdrop-filter: none; }
.touch-device #btn-attack { grid-column: 3; grid-row: 2; background: #624721dc; border: 2px solid #ffe0a0; }
.touch-device #btn-dodge { grid-column: 2; grid-row: 2; }
.touch-device #btn-skill2 { grid-column: 3; grid-row: 1; }
.touch-device #btn-skill { grid-column: 2; grid-row: 1; }
.touch-device #btn-jump { grid-column: 1; grid-row: 2; }
.touch-device .virtual-command-buttons { position: absolute; right: 0; bottom: 116px; gap: 8px; }
.touch-device .v-btn-cmd { min-width: 64px; min-height: 44px; padding: 6px 8px; font-size: 11px; }
.touch-device .modal-overlay { padding: 10px; backdrop-filter: none; }
.touch-device .modal-card { max-height: calc(100dvh - 20px); overflow-y: auto; padding: 14px; overscroll-behavior: contain; }
.touch-device .modal-header { display: block; margin-bottom: 10px; }
.touch-device .modal-header h3 { font-size: 18px; }
.touch-device .modal-header p { font-size: 12px; margin-top: 6px; }
.touch-device .upgrade-choices { grid-template-columns: repeat(3, 1fr); padding: 8px; gap: 10px; }
.touch-device .upgrade-option { min-height: 110px; padding: 12px; }
.touch-device .upgrade-option strong { font-size: 17px; margin-bottom: 8px; }
.touch-device .upgrade-option span { font-size: 12px; }
.touch-device .upgrade-help { padding: 8px; font-size: 11px; }
.mobile-upgrade-help { display: none; }
.touch-device .mobile-upgrade-help { display: block; }
.touch-device .desktop-upgrade-help { display: none; }
.touch-device .modal-card button { min-height: 44px; }
.mobile-touch-help { display: none; }
.touch-device .mobile-touch-help { display: block; margin-bottom: 16px; line-height: 1.8; font-size: 13px; color: #ffe0a0; }
.touch-device .help-table { font-size: 11px; }
.touch-device .help-table td, .touch-device .help-table th { padding: 6px; }
.touch-device #bestiary-screen { padding: 12px; }
.touch-device .bestiary-header { margin-bottom: 10px; padding-bottom: 8px; }
.touch-device .bestiary-header h2 { font-size: 16px; letter-spacing: 1px; }
.touch-device .bestiary-header button { min-height: 44px; }
.touch-device .bestiary-body { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.touch-device .bestiary-content-panel { padding: 12px; }
.touch-device .detail-unlocked { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.touch-device .detail-visual { padding: 4px; }
.touch-device .detail-text h2 { font-size: 22px; }
.touch-device .detail-desc { font-size: 12px; }
.touch-device .result-title { font-size: 22px; }
.touch-device .result-actions { flex-wrap: wrap; gap: 8px; }
.touch-device .swap-content-split { grid-template-columns: 170px 1fr; gap: 10px; }
.touch-device .training-panel { top: 65px; bottom: auto; width: min(460px, 74%); padding: 6px; font-size: 10px; }
.touch-device .training-label { display: none; }
.touch-device .training-controls { gap: 6px; }
.touch-device .training-controls select, .touch-device .training-controls button { min-height: 40px; padding: 4px; }
.touch-device .training-panel p, .touch-device .training-panel small { display: none; }
.touch-device .training-mode .virtual-controls-layer { bottom: max(12px, env(safe-area-inset-bottom)); }
.touch-device .banner-box h2 { font-size: 22px; }
.touch-device .banner-box { padding: 16px; }
@media (orientation: portrait) {
    .touch-device .rotate-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 45; background: #0e1727f5; text-align: center; padding: 24px; }
    .touch-device .rotate-hint > span { font-size: 72px; color: #f9d18a; }
    .touch-device .rotate-hint strong { font-size: 20px; }
    .touch-device .rotate-hint p { font-size: 13px; color: #c4d1dc; }
    .touch-device .upgrade-choices { grid-template-columns: 1fr; }
}

/* Use the iframe's own viewport size, not only touch detection, for compact menus. */
@media (max-width: 1200px), (max-height: 680px) {
    #title-screen { padding: 16px 24px; }
    .main-title { font-size: clamp(28px, 4.5vw, 54px); letter-spacing: 4px; }
    .sub-title { font-size: 18px; margin-bottom: 10px; letter-spacing: 6px; }
    .title-badge { margin-bottom: 8px; font-size: 10px; }
    .title-intro { font-size: 12px; margin-bottom: 12px; }
    .play-settings { margin: 10px auto; padding: 8px 12px; font-size: 12px; }
    .title-actions { gap: 10px; margin-bottom: 12px; }
    .title-actions .brush-btn { padding: 10px 16px; font-size: 15px; }
    .title-footer-notes { font-size: 10px; }
    .controller-summary { margin-top: 8px; font-size: 10px; }
    .controller-summary small { display: none; }
    #bestiary-screen { padding: 14px 18px; }
    .bestiary-header { margin-bottom: 12px; padding-bottom: 8px; flex-shrink: 0; }
    .bestiary-header h2 { font-size: 20px; letter-spacing: 1px; }
    .bestiary-body { grid-template-columns: 200px minmax(0, 1fr); gap: 14px; }
    .bestiary-content-panel { padding: 14px; min-width: 0; }
    .detail-unlocked { grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); gap: 16px; align-items: start; }
    .detail-visual { padding: 4px; position: sticky; top: 0; }
    .detail-visual img { max-height: 300px; }
    .detail-text h2 { font-size: 26px; }
    .detail-desc { font-size: 12px; }
    .detail-skills .skill-item { padding: 8px; }
    .modal-card { padding: 16px; }
    .modal-header { margin-bottom: 12px; }
    .modal-header h3 { font-size: 20px; }
    .help-table { font-size: 12px; }
    .help-table th, .help-table td { padding: 8px; }
}
.bestiary-record { color: #d6be87; font-size: 12px; line-height: 1.6; margin-bottom: 12px; }
#title-screen { overflow-y: auto; justify-content: flex-start; }
.bestiary-tab-item:focus-visible { outline: 2px solid #ffdf7e; outline-offset: -3px; }
.bestiary-content-panel, .bestiary-sidebar { overscroll-behavior: contain; }
#help-modal .modal-card { display: flex; flex-direction: column; overflow: hidden; }
#help-modal .modal-header { flex-shrink: 0; }
#help-modal .modal-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 650px) {
    .bestiary-body { grid-template-columns: 140px minmax(0, 1fr); gap: 8px; }
    .bestiary-thumb { width: 32px; height: 32px; flex-shrink: 0; }
    .bestiary-tab-item { padding: 6px; gap: 6px; }
    .bestiary-tab-info .name { font-size: 12px; }
    .bestiary-tab-info .role { font-size: 9px; }
    .detail-unlocked { grid-template-columns: 1fr; }
    .detail-visual { position: static; }
    .detail-visual img { max-height: 160px; }
    .help-table { font-size: 10px; }
    .help-table th, .help-table td { padding: 5px; }
}