/* Generated by tools/build_bundles.ps1. Edit source CSS files, then regenerate. */

/* source: css/fonts.css */

/* セルフホストフォント（Googleフォント依存を廃止）。
   元フォント: DotGothic16 / M PLUS Rounded 1c を「ゲーム内使用文字 + かな英数記号 + 常用漢字」に
   サブセット化したもの。生成スクリプト: tools/build_font_subset.py
   ライセンス: assets/fonts/OFL.txt（両フォントとも SIL Open Font License 1.1） */

@font-face {
    font-family: 'M PLUS Rounded 1c';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../assets/fonts/MPLUSRounded1c-Regular.subset.woff2) format('woff2');
}

@font-face {
    font-family: 'M PLUS Rounded 1c';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../assets/fonts/MPLUSRounded1c-Bold.subset.woff2) format('woff2');
}

/* DotGothic16 はリザルトの「がめんをほぞん」のcanvas描画でのみ使用（Constants.FONT_PIXEL） */
@font-face {
    font-family: 'DotGothic16';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../assets/fonts/DotGothic16-Regular.subset.woff2) format('woff2');
}

/* source: css/base.css */

:root {
    --bg-color: #080b16;
    --panel-color: #12172a;
    --text-color: #ffffff;
    --primary-color: #4facfe;
    --accent-color: #ffd700;
    --danger-color: #ff4b4b;
    --success-color: #00e676;
    --border-color: #2a3660;
    --accent-border: #374880;
    --font-pixel: 'M PLUS Rounded 1c', sans-serif;
    --font-main: 'M PLUS Rounded 1c', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    background-image: url('../assets/image/ui/bg/BG.webp');
    background-repeat: repeat;
    color: var(--text-color);
    font-family: var(--font-main);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* 仮想キャンバスのベース */
#app {
    background-color: var(--bg-color);
    position: absolute;
    z-index: 10; /* デスクトップサイドパネル (z-index: 1) より前面に表示 */
    /* script.js が中央配置・スケーリングを行います */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.95), 0 0 200px rgba(20, 50, 120, 0.35), inset 0 1px 0 rgba(100, 160, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    outline: 4px solid rgba(79, 172, 254, 0.22);
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

/* 各種画面 */
.screen {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.screen.active {
    display: flex;
}

/* source: css/components/buttons.css */

/* ============================================================
   ボタン・入力フォーム共通コンポーネント
   ============================================================ */
.title-img {
    display: block;
    margin: 0 auto;
}

.title {
    font-family: var(--font-pixel);
    text-align: center;
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.subtitle {
    text-align: center;
    color: var(--primary-color);
}

/* ボタン周りのレイアウト */
.top-action-group {
    /* 【横画面】ノート・アイデアボタン周りの余白調整 */
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    margin-top: 15px;
    /* バトルスタートボタンとの間隔 */
    margin-bottom: 0px;
    /* 画面下部との間隔 */
    padding: 0 0px;
}

.top-action-group button {
    flex: 1;
    margin: 0;
}

/* ボタン類 */
.primary-btn,
.secondary-btn,
.orange-btn,
.green-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    box-sizing: border-box;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    font-family: var(--font-pixel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    vertical-align: middle;
    line-height: 1;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.primary-btn {
    color: #c8deff;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    position: relative;
    padding: 0;
}

button#start-btn {
    /* 【横画面】バトルスタートボタンのサイズ調整用 */
    height: 80px !important;
    font-size: 40px !important;
    padding: 10px 20px;
    /* width: 250px; などを追加して調整してください */
}

button#note-btn {
    /* 【横画面】モンスターノートボタンのサイズ調整用 */
    height: 50px !important;
    font-size: 20px !important;
    padding: 10px 20px;
}

.secondary-btn {
    color: #9a9080;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    position: relative;
    padding: 0;
}

.orange-btn {
    color: #f0d090;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    position: relative;
    padding: 0;
}

.green-btn {
    color: #c0e8c5;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    position: relative;
    padding: 0;
}

/* ボタン背景画像 */
.btn-bg-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* ボタンテキストオーバーレイ */
.btn-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-pixel);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.05em;
}

.primary-btn:active,
.secondary-btn:active,
.orange-btn:active,
.green-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.secondary-btn:hover {
    color: #c8b890;
}

/* 入力フォーム共通 */
.input-group label {
    display: block;
    font-weight: bold;
    color: #a0aabf;
}

input[type="text"] {
    width: 100%;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background: rgba(8, 10, 22, 0.9);
    color: white;
    text-align: center;
    outline: none;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(79, 172, 254, 0.3);
}

.toggle-group,
.checkbox-group {
    display: flex;
    gap: 10px;
}

.toggle-btn,
.checkbox-btn {
    flex: 1;
    background: #252b42;
    border: 2px solid var(--border-color);
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.toggle-btn.active,
.checkbox-btn.active {
    background: linear-gradient(180deg, #5dbeff 0%, #3399f5 50%, #1580e8 100%);
    color: #fff;
    border-color: rgba(79, 172, 254, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* source: css/components/hp-timer.css */

/* ============================================================
   HPバー・タイマーバー共通
   ============================================================ */
.hp-bar-container {
    background: #111;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #3a4060;
    position: relative;
    width: 100%;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.hp-bar-fill {
    height: 100%;
    background: var(--success-color);
    transition: width 0.3s ease-out, background-color 0.3s;
}

.timer-container {
    width: 100%;
    background: #111;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.timer-bar {
    height: 100%;
    background: var(--primary-color);
}

/* source: css/components/message.css */

/* ============================================================
   メッセージログ・テキスト表示
   ============================================================ */

/* メッセージログ行カラー */
.message-log-line {
    color: #fff;
    text-shadow: 0 0 8px #000, 0 0 16px #000;
}

.message-log-line.critical,
.message-log-line.critical.text-player-action {
    color: #ffea00;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0px 0px 10px rgba(255, 234, 0, 0.7);
}

.message-log-line.text-player-action {
    color: #4facfe;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0px 0px 8px rgba(79, 172, 254, 0.7);
}

.message-log-line.text-monster-action {
    color: var(--danger-color);
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0px 0px 6px rgba(0, 0, 0, 0.8);
}

.message-log-line.text-neutral {
    color: #fff;
    text-shadow: 0 0 8px #000, 0 0 16px #000;
}

.monster-turn-text {
    color: var(--accent-color) !important;
}

/* ============================================================
   リザルト画面 共通装飾
   ============================================================ */
.result-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.time-fastest {
    color: #4facfe !important;
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.6);
}

.time-slowest {
    color: #ff4b4b !important;
    text-shadow: 0 0 8px rgba(255, 75, 75, 0.6);
}

/* ============================================================
   Special_モンスター セリフ表示
   ============================================================ */
.special-quote {
    display: none;
    text-align: center;
    font-family: var(--font-pixel);
    font-size: 22px;
    color: #a0e0ff;
    text-shadow: 0 0 8px rgba(100, 200, 255, 0.8), 0 0 20px rgba(100, 200, 255, 0.4);
    background: rgba(0, 60, 120, 0.55);
    border: 2px solid rgba(100, 200, 255, 0.4);
    border-radius: 12px;
    padding: 8px 16px;
    margin-bottom: 8px;
    max-width: 90%;
    word-break: break-all;
    white-space: pre-wrap;
    animation: specialQuoteFadeIn 0.5s ease-out;
}

/* インターバル画面ではショップ店員と同じ吹き出しデザインを使う */
#interval-overlay .special-quote {
    font-size: 42px !important;
    background: rgba(0, 60, 120, 0.88);
    border: 2px solid rgba(100, 200, 255, 0.6);
    border-radius: 16px;
    padding: 18px 32px;
    margin-bottom: 24px;
    width: 600px;
    max-width: 90%;
    min-width: 300px;
    position: relative;
    white-space: pre-wrap;
    word-break: normal;
}

/* 吹き出しの尻尾（モンスター方向＝下向き） */
#interval-overlay .special-quote::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 20px solid transparent;
    border-top-color: rgba(0, 60, 120, 0.88);
    border-bottom: 0;
}

/* ボスカットイン内のセリフ（ヤンチヤントバーンなど）はinterval-overlayと同じデザイン */
#boss-cutin-overlay .special-quote {
    font-size: 42px !important;
    background: rgba(0, 60, 120, 0.88);
    border: 2px solid rgba(100, 200, 255, 0.6);
    border-radius: 16px;
    padding: 18px 32px;
    margin-bottom: 24px;
    width: 600px;
    max-width: 90%;
    min-width: 300px;
    position: relative;
    white-space: pre-wrap;
    word-break: normal;
}

/* 吹き出しの尻尾（モンスター方向＝下向き：セリフを画像の上に配置） */
#boss-cutin-overlay .special-quote::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 20px solid transparent;
    border-top-color: rgba(0, 60, 120, 0.88);
    border-bottom: 0;
}

/* source: css/components/monster-effects.css */

/* ============================================================
   モンスター表示・エフェクト
   ============================================================ */
.monster-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* overflow: visible にして見切れを防ぐ */
    overflow: visible;
}

/* モンスター画像ラッパー（ステータスマスク用） */
.monster-img-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* ステータスマスク（毒・麻痺・石化） */
.monster-status-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 4px;
}

.monster-status-mask.mask--poison {
    background: rgba(150, 30, 220, 0.40);
}

.monster-status-mask.mask--paralyzed {
    background: rgba(255, 230, 0, 0.40);
}

.monster-status-mask.mask--stone {
    background: rgba(140, 140, 140, 0.55);
}

/* ===== 攻撃エフェクト画像 ===== */
.attack-effect-img {
    position: absolute;
    width: 300px;
    height: 300px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    top: 40%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

/* アニメーション中のみコンポジットレイヤーを確保 */
.attack-effect-img.anim-hit,
.attack-effect-img.anim-critical-hit,
.attack-effect-img.anim-critical-hit-mirrored,
.attack-effect-img.anim-slash,
.attack-effect-img.anim-crescent,
.attack-effect-img.anim-sp-attack {
    will-change: transform, opacity;
}

/* 素手攻撃・爆発系（中央でドン） */
.attack-effect-img.anim-hit {
    animation: effectHit 0.55s ease-out forwards;
}

/* 素手クリティカル・爆発系（1.5倍） */
.attack-effect-img.anim-critical-hit {
    animation: effectCriticalHit 0.65s ease-out forwards;
}

/* 剣の通常攻撃・三日月（大きく回転しながら出現） */
.attack-effect-img.anim-slash {
    animation: effectSlash 0.55s ease-out forwards;
}

/* 剣のクリティカル・斬撃（左上から右下へ通過） */
.attack-effect-img.anim-crescent {
    animation: effectCrescent 0.65s ease-out forwards;
}

/* 必殺技（専用アニメ） */
.attack-effect-img.anim-sp-attack {
    animation: effectSpAttack 0.85s ease-out forwards;
}

/* ダブルアタック用ミラー版 */
.attack-effect-img.anim-critical-hit-mirrored {
    animation: effectCriticalHitMirrored 0.65s ease-out forwards;
}

.attack-effect-img.anim-hit-mirrored {
    animation: effectHitMirrored 0.55s ease-out forwards;
}

.attack-effect-img.anim-slash-mirrored {
    animation: effectSlashMirrored 0.55s ease-out forwards;
}

.attack-effect-img.anim-crescent-mirrored {
    animation: effectCrescentMirrored 0.65s ease-out forwards;
}

/* モンスター画像共通設定 */
#monster-img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    transition: opacity 0.2s;
}

.fade-slow {
    transition: opacity 1s !important;
}

/* ============================================================
   モンスターいかり状態（静的な赤オーバーレイ）
   ============================================================ */
.monster-container.angry #monster-img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
            sepia(1) saturate(5) hue-rotate(-50deg) brightness(0.8);
}

/* ============================================================
   必殺技オーラ
   ============================================================ */
/* けん画像ラッパー（オーラの基準点） */
.sword-aura-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* オーラ画像（アイコンの前面でゆらゆら） */
.aura-img {
    position: absolute;
    width: auto;
    height: 165%;
    /* 旧110%の1.5倍 */
    object-fit: contain;
    opacity: 0.6;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 2;
    /* アイコン(z-index:1)の前面 */
    animation: auraFloat 2s ease-in-out infinite;
}

/* 剣画像をオーラより背後に */
.sword-aura-wrapper #sword-label {
    position: relative;
    z-index: 1;
}

/* たて画像ラッパー（はんげきオーラの基準点） */
.shield-aura-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* たて画像をオーラより背後に */
.shield-aura-wrapper #shield-label {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Item Slot（バトル画面・所持アイテム表示）
   ============================================================ */
.item-slot-container {
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
}

.item-slot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.15s;
}

.item-slot-img:hover {
    transform: scale(1.12);
}

/* ============================================================
   Item Use Image（アイテム使用演出）
   ============================================================ */
#item-use-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    object-fit: contain;
    z-index: 20;
    pointer-events: none;
}

.item-use-anim {
    animation: item-use-zoom 2.0s ease-out forwards;
}

/* source: css/components/animations.css */

/* ============================================================
   @keyframes・アニメーションクラス
   ============================================================ */

@keyframes effectHit {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-15deg);
    }

    12% {
        opacity: 1;
        transform: scale(1.75) rotate(6deg);
    }

    35% {
        opacity: 1;
        transform: scale(1.38) rotate(-2deg);
    }

    65% {
        opacity: 0.9;
        transform: scale(1.2) rotate(1deg);
    }

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

@keyframes effectCriticalHit {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-20deg);
    }

    10% {
        opacity: 1;
        transform: scale(2.7) rotate(8deg);
    }

    25% {
        opacity: 1;
        transform: scale(1.9) rotate(-5deg);
    }

    45% {
        opacity: 1;
        transform: scale(2.3) rotate(3deg);
    }

    70% {
        opacity: 0.85;
        transform: scale(1.85) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.7) rotate(0deg);
    }
}

@keyframes effectSlash {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-65deg) scaleX(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.95) rotate(-14deg) scaleX(1.2);
    }

    30% {
        opacity: 1;
        transform: scale(1.6) rotate(-3deg) scaleX(1.05);
    }

    62% {
        opacity: 0.9;
        transform: scale(1.3) rotate(5deg) scaleX(0.97);
    }

    100% {
        opacity: 0;
        transform: scale(0.9) rotate(13deg) scaleX(0.9);
    }
}

@keyframes effectCrescent {
    0% {
        opacity: 0;
        transform: translate(30px, -30px) scale(1.3);
    }

    15% {
        opacity: 1;
        transform: translate(15px, -15px) scale(1.9);
    }

    65% {
        opacity: 1;
        transform: translate(-15px, 15px) scale(1.3);
    }

    100% {
        opacity: 0;
        transform: translate(-30px, 30px) scale(0.95);
    }
}

/* 必殺技専用：大爆発 */
@keyframes effectSpAttack {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg);
    }

    8% {
        opacity: 1;
        transform: scale(3.2) rotate(-10deg);
    }

    20% {
        opacity: 1;
        transform: scale(2.1) rotate(5deg);
    }

    36% {
        opacity: 1;
        transform: scale(2.7) rotate(-7deg);
    }

    55% {
        opacity: 1;
        transform: scale(2.15) rotate(3deg);
    }

    75% {
        opacity: 0.8;
        transform: scale(2.0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.85) rotate(0deg);
    }
}

/* ダブルアタック用ミラーアニメーション */
@keyframes effectCriticalHitMirrored {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-20deg) scaleX(-1);
    }

    10% {
        opacity: 1;
        transform: scale(2.7) rotate(8deg) scaleX(-1);
    }

    25% {
        opacity: 1;
        transform: scale(1.9) rotate(-5deg) scaleX(-1);
    }

    45% {
        opacity: 1;
        transform: scale(2.3) rotate(3deg) scaleX(-1);
    }

    70% {
        opacity: 0.85;
        transform: scale(1.85) rotate(0deg) scaleX(-1);
    }

    100% {
        opacity: 0;
        transform: scale(1.7) rotate(0deg) scaleX(-1);
    }
}

@keyframes effectHitMirrored {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-15deg) scaleX(-1);
    }
    12% {
        opacity: 1;
        transform: scale(1.75) rotate(6deg) scaleX(-1);
    }
    35% {
        opacity: 1;
        transform: scale(1.38) rotate(-2deg) scaleX(-1);
    }
    65% {
        opacity: 0.9;
        transform: scale(1.2) rotate(1deg) scaleX(-1);
    }
    100% {
        opacity: 0;
        transform: scale(1.0) rotate(0deg) scaleX(-1);
    }
}

@keyframes effectSlashMirrored {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-65deg) scaleX(-0.5);
    }
    10% {
        opacity: 1;
        transform: scale(1.95) rotate(-14deg) scaleX(-1.2);
    }
    30% {
        opacity: 1;
        transform: scale(1.6) rotate(-3deg) scaleX(-1.05);
    }
    62% {
        opacity: 0.9;
        transform: scale(1.3) rotate(5deg) scaleX(-0.97);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) rotate(13deg) scaleX(-0.9);
    }
}

@keyframes effectCrescentMirrored {
    0% {
        opacity: 0;
        transform: translate(-30px, -30px) scale(1.3) scaleX(-1);
    }
    15% {
        opacity: 1;
        transform: translate(-15px, -15px) scale(1.9) scaleX(-1);
    }
    65% {
        opacity: 1;
        transform: translate(15px, 15px) scale(1.3) scaleX(-1);
    }
    100% {
        opacity: 0;
        transform: translate(30px, 30px) scale(0.95) scaleX(-1);
    }
}

/* エフェクト */
@keyframes blink-damage {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.2;
    }
}

.flash-effect {
    animation: blink-damage 0.2s step-end;
}

/* 装備時の高速点滅 (3回点滅) */
@keyframes equip-blink {

    0%,
    33.3%,
    66.6% {
        opacity: 0;
    }

    16.6%,
    49.9%,
    83.3%,
    100% {
        opacity: 1;
    }
}

.equip-flash {
    animation: equip-blink 0.4s linear forwards;
}

/* クリティカル：速い5回点滅 */
@keyframes blink-critical {
    0% {
        opacity: 1;
    }

    11% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    46% {
        opacity: 1;
    }

    57% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 0.2;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.flash-critical {
    animation: blink-critical 0.7s linear;
}

/* 必殺技：超高速7回点滅 */
@keyframes blink-sp {
    0% {
        opacity: 1;
    }

    7% {
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    21% {
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    36% {
        opacity: 0;
    }

    43% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    58% {
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    80% {
        opacity: 0.3;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.flash-sp {
    animation: blink-sp 1.0s linear;
}

/* 必殺技：バトルビュー全体を白いオーバーレイでフラッシュ */
.battle-white-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    pointer-events: none;
    z-index: 10;
    animation: battle-white-flash-anim 0.7s ease-out forwards;
}

@keyframes battle-white-flash-anim {
    0%   { opacity: 0.8; }
    12%  { opacity: 0.8; }
    100% { opacity: 0; }
}

/* 被ダメージ：ステータスウィンドウを赤いオーバーレイでフラッシュ */
.damage-flash-overlay {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: rgba(220, 30, 30, 1);
    pointer-events: none;
    z-index: 2;
    animation: damage-flash-anim 0.5s ease-out forwards;
}

@keyframes damage-flash-anim {
    0%   { opacity: 0.65; }
    25%  { opacity: 0.15; }
    50%  { opacity: 0.45; }
    75%  { opacity: 0.05; }
    100% { opacity: 0; }
}

/* クリティカル：細かい高速揺れ（.monster-container に適用） */
@keyframes shake-critical-monster {
    0% {
        transform: translate(0, 0);
    }

    9% {
        transform: translate(-5px, 2px);
    }

    18% {
        transform: translate(5px, -3px);
    }

    27% {
        transform: translate(-7px, -2px);
    }

    36% {
        transform: translate(7px, 3px);
    }

    45% {
        transform: translate(-5px, -3px);
    }

    55% {
        transform: translate(5px, 2px);
    }

    64% {
        transform: translate(-4px, 3px);
    }

    73% {
        transform: translate(4px, -2px);
    }

    82% {
        transform: translate(-2px, 1px);
    }

    91% {
        transform: translate(2px, -1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.shake-critical-monster {
    animation: shake-critical-monster 0.7s ease-out;
}

/* 必殺技：激しい揺れ＋回転（.monster-container に適用） */
@keyframes shake-sp-monster {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    6% {
        transform: translate(-10px, 5px) rotate(-2deg);
    }

    12% {
        transform: translate(10px, -5px) rotate(2deg);
    }

    18% {
        transform: translate(-13px, -6px) rotate(-2.5deg);
    }

    24% {
        transform: translate(13px, 6px) rotate(2.5deg);
    }

    30% {
        transform: translate(-11px, 4px) rotate(-2deg);
    }

    36% {
        transform: translate(11px, -4px) rotate(2deg);
    }

    43% {
        transform: translate(-8px, 5px) rotate(-1.5deg);
    }

    50% {
        transform: translate(8px, -5px) rotate(1.5deg);
    }

    58% {
        transform: translate(-6px, 3px) rotate(-1deg);
    }

    65% {
        transform: translate(6px, -3px) rotate(1deg);
    }

    72% {
        transform: translate(-4px, 2px);
    }

    80% {
        transform: translate(4px, -2px);
    }

    88% {
        transform: translate(-2px, 1px);
    }

    94% {
        transform: translate(2px, -1px);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.shake-sp-monster {
    animation: shake-sp-monster 1.0s ease-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-6px, 4px) rotate(2deg);
    }

    40% {
        transform: translate(6px, -4px) rotate(-2deg);
    }

    60% {
        transform: translate(-6px, -4px) rotate(2deg);
    }

    80% {
        transform: translate(6px, 4px) rotate(-2deg);
    }
}

.shake-effect {
    animation: shake 0.4s;
}

@keyframes dodge {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(20%);
    }

    50% {
        transform: translateX(0);
    }
}

.dodge-effect {
    animation: dodge 0.6s ease-out;
}

@keyframes monster-attack {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(1);
    }
}

.attack-effect {
    /* ぬるっとうごく2割拡大 */
    animation: monster-attack 0.5s ease-out;
}

@keyframes monster-damage {

    0%,
    80% {
        transform: scale(1.3);
    }

    81%,
    100% {
        transform: scale(1);
    }
}

.damage-effect {
    /* アニメーションなしで突然3割拡大 */
    animation: monster-damage 0.5s;
}

/* はんげき発動：背景を赤フラッシュ（不透明度50%から消える） */
@keyframes revenge-bg-flash-anim {
    0%   { opacity: 1; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}

.revenge-bg-flashing {
    animation: revenge-bg-flash-anim 0.6s ease-out forwards;
}

/* ダブルアタック2回目：背景を水色フラッシュ */
@keyframes double-attack-bg-flash-anim {
    0%   { opacity: 1; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}

.double-attack-bg-flashing {
    animation: double-attack-bg-flash-anim 0.6s ease-out forwards;
}


@keyframes auraFloat {

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

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* ============================================================
   ATKupエフェクト（青いグラデーション帯が下から上へ流れる）
   パネルエリア（ユーザーウィンドウ）に対して適用
   ============================================================ */
.atkup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    /* グラデーション帯: 上下が薄く(透明)、中央が濃い青 */
    background: linear-gradient(to top,
            transparent 0%,
            rgba(0, 150, 255, 0.30) 20%,
            rgba(0, 180, 255, 0.70) 50%,
            rgba(0, 150, 255, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: atkUpSweep 2.5s ease-in-out forwards;
}

@keyframes atkUpSweep {

    /* 開始: 帯が画面下で待機（見えない） */
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    /* ウィンドウを通過中: 帯で塗りつぶし */
    50% {
        opacity: 1;
    }

    /* 終了: 帯が画面上に抜けながらフェード */
    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   HEALupエフェクト（緑グラデーション帯が下から上へ流れる）
   かいふくモンスターによる回復時にパネルエリアに適用
   ============================================================ */
.healup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(0, 200, 80, 0.30) 20%,
            rgba(0, 230, 100, 0.70) 50%,
            rgba(0, 200, 80, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: healUpSweep 2.5s ease-in-out forwards;
}

@keyframes healUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   DEFupエフェクト（青いグラデーション帯が下から上へ流れる）
   ぼうぎょだま使用時（ミスターてっぱん効果など）にパネルエリアに適用
   ============================================================ */
.defup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(0, 150, 255, 0.30) 20%,
            rgba(0, 180, 255, 0.70) 50%,
            rgba(0, 150, 255, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: defUpSweep 2.5s ease-in-out forwards;
}

@keyframes defUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   GOLDupエフェクト（黄色いグラデーション帯が下から上へ流れる）
   ミスターきんか効果時にパネルエリアに適用
   ============================================================ */
.goldup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(255, 200, 0, 0.30) 20%,
            rgba(255, 220, 0, 0.70) 50%,
            rgba(255, 200, 0, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: goldUpSweep 2.5s ease-in-out forwards;
}

@keyframes goldUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   EXPupエフェクト（紫のグラデーション帯が下から上へ流れる）
   ミスターねんりん効果時にパネルエリアに適用
   ============================================================ */
.expup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(150, 0, 255, 0.30) 20%,
            rgba(180, 0, 255, 0.70) 50%,
            rgba(150, 0, 255, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: expUpSweep 2.5s ease-in-out forwards;
}

@keyframes expUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@keyframes item-use-zoom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }

    25% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }

    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0);
    }

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


@keyframes shake-img-wrapper {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-8px) rotate(-1deg);
    }

    30% {
        transform: translateX(7px) rotate(1deg);
    }

    45% {
        transform: translateX(-5px) rotate(-1deg);
    }

    60% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(1px);
    }
}

.shake-img-wrapper {
    animation: shake-img-wrapper 0.3s ease-out;
    will-change: transform;
}

@keyframes shake-img-wrapper-crit {

    0%,
    100% {
        transform: translateX(0);
    }

    12% {
        transform: translateX(-12px) rotate(-1.5deg);
    }

    24% {
        transform: translateX(11px) rotate(1.5deg);
    }

    36% {
        transform: translateX(-9px) rotate(-1deg);
    }

    48% {
        transform: translateX(8px) rotate(1deg);
    }

    60% {
        transform: translateX(-6px) rotate(-0.5deg);
    }

    72% {
        transform: translateX(5px);
    }

    84% {
        transform: translateX(-3px);
    }

    96% {
        transform: translateX(2px);
    }
}

.shake-img-wrapper-crit {
    animation: shake-img-wrapper-crit 0.45s ease-out;
    will-change: transform;
}

@keyframes specialQuoteFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* source: css/overlays/base.css */

/* ============================================================
   各種オーバーレイ・モーダル (共通ベース)
   ============================================================ */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.overlay.active {
    display: flex;
}

#interval-blackout {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

#interval-blackout.fade-out {
    opacity: 0;
}

#interval-overlay .overlay-content {
    position: relative;
    z-index: 2;
    animation: intervalContentFadeIn 0.3s ease both;
}

@keyframes intervalContentFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.overlay-content {
    text-align: center;
}

#interval-overlay .overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* source: css/overlays/interval.css */

/* ============================================================
   インターバル画面（モンスター出現）
   ============================================================ */
.interval-img {
    max-width: 600px;
    max-height: 600px;
    margin-bottom: 0px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    animation: bounce 2s infinite ease-in-out;
    will-change: transform;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

#interval-msg {
    font-family: var(--font-pixel);
    font-size: 48px;
    margin-bottom: 40px;
    line-height: 1.4;
}

/* インターバル ボタングループ */
.interval-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

#app.portrait-mode .interval-btns {
    flex-direction: column;
    gap: 40px;
}

/* 各種確認・出現画面ボタンをショップタブ風にする */
.interval-btns button,
.boss-cutin-btns button,
.quit-confirm-buttons button,
.shop-buy-buttons button,
.equip-drop-buttons button {
    background: rgba(30, 40, 80, 1);
    border: 2px solid rgba(55, 80, 155, 0.8);
    border-radius: 10px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.interval-btns button:active,
.boss-cutin-btns button:active,
.quit-confirm-buttons button:active,
.shop-buy-buttons button:active,
.equip-drop-buttons button:active {
    background: rgba(20, 60, 120, 1);
    border-color: var(--primary-color);
}

#battle-start-btn {
    /* 【共通】登場画面「たたかう」ボタンのサイズ */
    font-size: 48px;
    padding: 20px 60px;
    min-width: 380px;
    box-sizing: border-box;
    text-align: center;
}

#boss-battle-start-btn {
    font-size: 48px;
    padding: 20px 60px;
    min-width: 380px;
    box-sizing: border-box;
    text-align: center;
}

#info-btn {
    font-size: 48px;
    padding: 20px 60px;
    min-width: 380px;
    box-sizing: border-box;
    text-align: center;
}

#boss-info-btn {
    font-size: 48px;
    padding: 20px 60px;
    min-width: 380px;
    box-sizing: border-box;
    text-align: center;
}

/* source: css/overlays/boss-cutin.css */

/* ============================================================
   ボスカットインオーバーレイ
   ============================================================ */
.boss-cutin-overlay {
    background: radial-gradient(circle at center, #2d0000 0%, #000 70%);
    z-index: 120;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boss-cutin-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px;
    text-align: center;
}

/* 各要素はデフォルト非表示 — active クラス付与時にアニメーション開始 */
.boss-cutin-label {
    font-family: var(--font-pixel);
    font-size: 72px;
    color: #ff3333;
    text-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 50px rgba(255, 0, 0, 0.8), 0 0 100px rgba(255, 0, 0, 0.4);
    letter-spacing: 10px;
    opacity: 0;
}

.boss-cutin-img {
    max-width: 600px;
    max-height: 600px;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 50, 0, 0.9)) drop-shadow(0 0 50px rgba(255, 0, 0, 0.6));
    opacity: 0;
}

.boss-cutin-name {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 100, 0, 0.8);
    white-space: nowrap;
    opacity: 0;
    display: none; /* ボス名を非表示 */
}

/* active クラスが付いた瞬間にアニメーション発火 */
#boss-cutin-overlay.active .boss-cutin-label {
    animation: boss-cutin-label-pop 0.4s cubic-bezier(0.2, 0, 0.2, 1.5) both;
}

#boss-cutin-overlay.active .boss-cutin-img {
    animation: boss-cutin-img-zoom 1.6s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#boss-cutin-overlay.active .boss-cutin-name {
    animation: boss-cutin-name-rise 0.4s 0.6s ease-out both;
}

@keyframes boss-cutin-label-pop {
    0% {
        opacity: 0;
        transform: scale(2.2);
    }

    70% {
        opacity: 1;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes boss-cutin-img-zoom {
    0% {
        opacity: 0;
        transform: scale(0.05) translateY(40px);
    }

    30% {
        opacity: 1;
        transform: scale(0.6) translateY(10px);
    }

    75% {
        opacity: 1;
        transform: scale(1.08) translateY(0);
    }

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

@keyframes boss-cutin-name-rise {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードアウト（オーバーレイ全体） */
#boss-cutin-overlay.fade-out {
    animation: boss-cutin-fadeout 0.5s ease-out forwards;
}

@keyframes boss-cutin-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ボス登場時：interval-overlay の画像をズームイン後にバウンス */
#interval-overlay.boss-entrance .interval-img {
    animation: boss-interval-enter 0.5s ease-out both,
        bounce 2s 0.5s infinite ease-in-out;
}

@keyframes boss-interval-enter {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(0);
    }

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

/* ============================================================
   ボスカットイン シームレス遷移
   ============================================================ */

/* ボス画像ズームアップ（2秒後に発火） */
.boss-cutin-img.zoom-up {
    animation: boss-img-zoom-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes boss-img-zoom-up {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 1;
        transform: scale(1.4);
    }

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

/* ラベル・名前のフェードアウト */
.boss-cutin-label.fade-out-el,
.boss-cutin-name.fade-out-el {
    animation: boss-el-fadeout 0.4s ease-out forwards;
}

@keyframes boss-el-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* ボタングループ（デフォルト非表示）— オーバーレイ下部に絶対配置 */
.boss-cutin-btns {
    position: absolute;
    bottom: 120px; /* ボス名削除に合わせて上に移動 */
    left: 0;
    right: 0;
    justify-content: center;
    gap: 20px;
    display: none;
    opacity: 0;
}

/* ボタン表示アニメーション */
.boss-cutin-btns.visible {
    display: flex !important;
    animation: boss-btns-fadein 0.5s ease-out 0.3s both;
}

@keyframes boss-btns-fadein {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* source: css/overlays/confirm-dialogs.css */

/* ============================================================
   ダンジョン開始確認ダイアログ
   ============================================================ */
#dungeon-start-confirm-overlay {
    z-index: 160;
}

#dungeon-skip-confirm-overlay {
    z-index: 160;
}

#dungeon-start-confirm-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 2px solid rgba(55, 80, 160, 0.48);
    border-radius: 20px;
    padding: 50px 60px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#dungeon-skip-confirm-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 2px solid rgba(55, 80, 160, 0.48);
    border-radius: 20px;
    padding: 42px 54px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#dungeon-skip-confirm-msg {
    font-size: 42px;
    line-height: 1.45;
}

/* ============================================================
   オーラ / ゲージ チュートリアル（共通スタイル）
   ============================================================ */
#aura-tutorial-overlay,
#gauge-tutorial-overlay,
#revenge-tutorial-overlay {
    z-index: 165;
}

#aura-tutorial-overlay .overlay-content,
#gauge-tutorial-overlay .overlay-content,
#revenge-tutorial-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 2px solid rgba(55, 80, 160, 0.48);
    border-radius: 20px;
    padding: 50px 60px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Heal/Special 選択ポップアップ
   ============================================================ */
#encounter-choice-overlay {
    z-index: 155;
}

#encounter-choice-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 2px solid rgba(55, 80, 160, 0.48);
    border-radius: 20px;
    padding: 50px 60px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ============================================================
   戦闘やめる確認ダイアログ
   ============================================================ */
#quit-confirm-overlay {
    z-index: 160;
}

#quit-confirm-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 2px solid rgba(55, 80, 160, 0.48);
    border-radius: 20px;
    padding: 50px 60px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.quit-confirm-msg {
    font-family: var(--font-pixel);
    font-size: 56px;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 44px;
    white-space: pre-wrap;
}

.quit-confirm-buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.quit-confirm-buttons button {
    font-size: 40px;
    padding: 18px 0;
    width: 180px;
    flex-shrink: 0;
    white-space: nowrap;
}

#dungeon-start-yes-btn {
    font-size: 32px;
}

#aura-tutorial-ok-btn,
#gauge-tutorial-ok-btn,
#revenge-tutorial-ok-btn {
    width: auto;
    padding: 18px 28px;
}

/* source: css/overlays/info-overlay.css */

/* ============================================================
   じょうほう ウィンドウ
   ============================================================ */
.info-overlay {
    z-index: 130;
    /* interval-overlay(100) / boss-cutin-overlay(120) より前面 */
}

.info-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 2px solid rgba(55, 80, 160, 0.48);
    border-radius: 20px;
    padding: 36px 44px 40px;
    width: 680px;
    max-width: 92vw;
    box-sizing: border-box;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.info-sections {
    display: flex;
    gap: 28px;
    margin-bottom: 32px;
}

#app.portrait-mode .info-content {
    width: 1020px;
    max-width: 96%;
}

#app.portrait-mode .info-sections {
    flex-direction: column;
}


.info-section {
    flex: 1;
}

.info-section-title {
    font-family: var(--font-pixel);
    font-size: 26px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.enemy-title {
    color: #ff6b6b;
}

.player-title {
    color: var(--primary-color);
}

.info-divider {
    background: var(--border-color);
    flex-shrink: 0;
}

#app.portrait-mode .info-divider {
    height: 1px;
    width: 100%;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-pixel);
    font-size: 26px;
    padding: 6px 0;
    gap: 16px;
}

.info-label {
    color: #a0aabf;
    white-space: nowrap;
}

.info-value {
    color: #fff;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.info-value.sp-ready {
    color: var(--accent-color);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.info-close-btn {
    font-size: 36px;
    padding: 14px 60px;
    width: fit-content;
    margin: 0 auto;
    display: block;
}

/* source: css/overlays/shop-overlays.css */

/* ============================================================
   ショップ タブ (どうぐ / けん / たて / うる)
   ============================================================ */
.shop-tabs {
    display: flex;
    gap: 10px;
}

.shop-tab {
    flex: 1;
    font-family: var(--font-pixel);
    font-size: 28px;
    padding: 10px 0;
    background: rgba(30, 40, 80, 1);
    border: 2px solid rgba(55, 80, 155, 0.8);
    border-radius: 10px;
    color: #a0aabf;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shop-tab.active {
    background: rgba(20, 60, 120, 1);
    border-color: var(--primary-color);
    color: #4facfe;
}

#app.portrait-mode .shop-tab {
    font-size: 30px;
    padding: 14px 0;
}

/* ============================================================
   ショップ アイテム詳細オーバーレイ
   ============================================================ */
.shop-item-content {
    background: linear-gradient(145deg, #181f3c 0%, #0d1222 100%);
    border: 4px solid var(--accent-color);
    border-radius: 20px;
    padding: 30px 40px;
    width: 400px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 0 44px rgba(255, 215, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 240, 100, 0.08);
}

.shop-item-detail-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
}

.shop-item-detail-name {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: var(--accent-color);
    margin: 0;
}

.shop-item-detail-desc {
    font-size: 24px;
    color: #e2e8f0;
    text-align: center;
}

.shop-item-detail-price {
    font-family: var(--font-pixel);
    font-size: 35px;
    color: var(--success-color);
}

.shop-buy-question {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: #fff;
    margin: 4px 0 0;
}

.shop-buy-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 4px;
}

.shop-buy-buttons button {
    font-size: 32px;
    padding: 14px 40px;
    min-width: 120px;
}

/* ショップ エラーメッセージ オーバーレイ（アイテム詳細より前面） */
.shop-msg-overlay {
    z-index: 105;
}

.shop-msg-text {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #4facfe;
    text-align: center;
    line-height: 1.6;
    white-space: pre-line;
}

.shop-msg-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    border: 3px solid #4facfe;
    border-radius: 20px;
    padding: 40px 50px;
    box-shadow: 0 0 30px rgba(79, 172, 254, 0.45), 0 12px 40px rgba(0, 0, 0, 0.75);
}

.shop-msg-overlay #shop-msg-close-btn {
    font-size: 32px;
    padding: 14px 50px;
    margin: 0 auto;
}

/* source: css/overlays/bag-detail.css */

/* ============================================================
   リュック詳細オーバーレイ (TOPリュック画面から)
   ============================================================ */
.bag-detail-overlay {
    z-index: 110;
}

.bag-detail-content {
    background: linear-gradient(145deg, #181f3c 0%, #0d1222 100%);
    border: 4px solid var(--accent-color);
    border-radius: 20px;
    padding: 30px 40px;
    width: 420px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 0 44px rgba(255, 215, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 240, 100, 0.08);
}

.bag-detail-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
}

.bag-detail-name {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: var(--accent-color);
    margin: 0;
}

.bag-detail-desc {
    font-family: var(--font-pixel);
    font-size: 24px;
    color: #e2e8f0;
    text-align: center;
    margin: 0;
}

.bag-detail-limit {
    font-family: var(--font-pixel);
    font-size: 20px;
    color: #a0aabf;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 16px;
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
}

.bag-detail-count {
    font-family: var(--font-pixel);
    font-size: 26px;
    color: var(--accent-color);
    margin: 0;
}

.bag-detail-close-btn {
    font-size: 32px;
    padding: 14px 50px;
    margin-top: 4px;
}

#app.portrait-mode .bag-detail-content {
    width: 620px;
    padding: 40px 50px;
}

#app.portrait-mode .bag-detail-name {
    font-size: 48px;
}

#app.portrait-mode .bag-detail-desc {
    font-size: 32px;
}

#app.portrait-mode .bag-detail-limit {
    font-size: 28px;
}

#app.portrait-mode .bag-detail-count {
    font-size: 36px;
}

#app.portrait-mode .bag-detail-close-btn {
    font-size: 40px;
    padding: 18px 60px;
}

/* source: css/overlays/battle-bag.css */

/* ============================================================
   戦闘中リュックオーバーレイ
   ============================================================ */
.battle-bag-overlay {
    z-index: 145;
    align-items: center;
    justify-content: center;
}

.battle-bag-content {
    background: linear-gradient(180deg, #181f3c 0%, #0d1222 100%);
    border: 3px solid rgba(200, 165, 0, 0.62);
    border-radius: 20px;
    padding: 0;
    width: 540px;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 34px rgba(200, 165, 0, 0.28), 0 12px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 240, 100, 0.07);
    position: relative;
    overflow: hidden;
}

.battle-bag-header {
    display: flex;
    align-items: center;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.battle-bag-header .quit-battle-btn {
    position: static;
    flex-shrink: 0;
}

.battle-bag-title {
    font-family: var(--font-pixel);
    font-size: 30px;
    color: var(--accent-color);
    margin: 0 auto;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.battle-bag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    max-height: 380px;
}

.battle-bag-card {
    background: linear-gradient(145deg, #1e2848, #131930);
    border: 2px solid rgba(55, 80, 148, 0.42);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    gap: 4px;
    min-height: 90px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.battle-bag-card:hover:not(.battle-bag-card--empty) {
    transform: scale(1.04);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.4);
}

.battle-bag-card.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    background: linear-gradient(145deg, #2a2d18, #1a1c10);
}

.battle-bag-card--empty {
    opacity: 0.45;
    cursor: default;
}

.battle-bag-item-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.7));
}

.battle-bag-item-count {
    font-family: var(--font-pixel);
    font-size: 22px;
    color: var(--accent-color);
    font-weight: bold;
}

.battle-bag-item-name {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: #e2e8f0;
    text-align: center;
}

.bag-img--empty {
    filter: brightness(0) opacity(0.5);
}

/* アイテム使用確認パネル */
.battle-item-confirm {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--border-color);
}

.battle-item-confirm button {
    font-size: 28px;
    padding: 12px 36px;
    flex: 1;
    max-width: 180px;
}

/* portrait overrides */
#app.portrait-mode .battle-bag-content {
    width: 680px;
}

#app.portrait-mode .battle-bag-title {
    font-size: 38px;
}

#app.portrait-mode .battle-bag-grid {
    gap: 18px;
    padding: 20px;
    max-height: 780px;
}

#app.portrait-mode .battle-bag-card {
    padding: 18px 12px;
    min-height: 130px;
}

#app.portrait-mode .battle-bag-item-img {
    width: 70px;
    height: 70px;
}

#app.portrait-mode .battle-bag-item-count {
    font-size: 30px;
}

#app.portrait-mode .battle-bag-item-name {
    font-size: 22px;
}

#app.portrait-mode .battle-item-confirm button {
    font-size: 38px;
    padding: 18px 48px;
    max-width: 216px;
}

/* source: css/overlays/equip-drop.css */

/* ============================================================
   武具ドロップ選択ポップアップ
   ============================================================ */

/* 装備ドロップ ズームイン演出 */
#equip-drop-fly-overlay {
    position: absolute;
    inset: 0;
    z-index: 145;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
}
#equip-drop-fly-overlay.active {
    display: flex;
}
#equip-drop-fly-img {
    width: 330px;
    height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
    animation: equip-fly-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes equip-fly-zoom {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
#app.portrait-mode #equip-drop-fly-img {
    width: 450px;
    height: 450px;
}

.equip-drop-overlay {
    z-index: 150;
}

.equip-drop-content {
    background: linear-gradient(145deg, #181f3c 0%, #0d1222 100%);
    border: 4px solid var(--accent-color);
    border-radius: 20px;
    padding: 47px 62px;
    width: 546px;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    box-shadow: 0 0 44px rgba(255, 215, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.75);
}

.equip-drop-label {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: var(--accent-color);
    margin: 0;
}

.equip-drop-img {
    width: 169px;
    height: 169px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
}

.equip-drop-name {
    font-family: var(--font-pixel);
    font-size: 38px;
    color: #fff;
    margin: 0;
}

.equip-drop-desc {
    font-family: var(--font-pixel);
    font-size: 23px;
    color: #a0aabf;
    text-align: center;
    margin: 0;
}

/* ---- 装備比較テーブル ---- */
.equip-drop-compare {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.equip-drop-compare[data-no-equip="true"] .equip-drop-cmp-val.cur {
    color: #556080;
}

.equip-drop-compare-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-pixel);
    font-size: 26px;
}

.equip-drop-compare-label {
    color: #8899bb;
    width: 3.5em;
    flex-shrink: 0;
}

.equip-drop-cmp-val {
    color: #ccd5ee;
    min-width: 2em;
    text-align: right;
}

.equip-drop-cmp-arrow {
    color: #556080;
    font-size: 20px;
}

.equip-drop-cmp-diff {
    min-width: 3.5em;
    font-size: 24px;
}

.equip-drop-cmp-diff.up   { color: #44ee88; }
.equip-drop-cmp-diff.down { color: #ff6666; }

#app.portrait-mode .equip-drop-compare {
    padding: 18px 22px;
}
#app.portrait-mode .equip-drop-compare-row {
    font-size: 34px;
    gap: 14px;
}
#app.portrait-mode .equip-drop-cmp-arrow {
    font-size: 26px;
}
#app.portrait-mode .equip-drop-cmp-diff {
    font-size: 30px;
}

.equip-drop-buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.equip-drop-buttons button {
    font-size: 50px;
    padding: 26px 78px;
}

#app.portrait-mode .equip-drop-content {
    width: 600px;
    padding: 47px 35px;
}

#app.portrait-mode .equip-drop-img {
    width: 220px;
    height: 220px;
}

#app.portrait-mode .equip-drop-label {
    font-size: 44px;
}

#app.portrait-mode .equip-drop-name {
    font-size: 52px;
}

#app.portrait-mode .equip-drop-desc {
    font-size: 34px;
}

#app.portrait-mode .equip-drop-buttons button {
    font-size: 44px !important;
    padding: 26px !important;
}

/* ============================================================
   メダルドロップ選択ポップアップ
   ============================================================ */

/* メダルドロップ ズームイン演出 */
#medal-drop-fly-overlay {
    position: absolute;
    inset: 0;
    z-index: 145;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
}
#medal-drop-fly-overlay.active {
    display: flex;
}
#medal-drop-fly-img {
    width: 330px;
    height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
    animation: equip-fly-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#app.portrait-mode #medal-drop-fly-img {
    width: 450px;
    height: 450px;
}

.medal-drop-overlay {
    z-index: 150;
}

.medal-drop-content {
    background: linear-gradient(145deg, #181f3c 0%, #0d1222 100%);
    border: 4px solid var(--accent-color);
    border-radius: 20px;
    padding: 47px 62px;
    width: 546px;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    box-shadow: 0 0 44px rgba(255, 215, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.75);
}

/* レアリティ別ボーダー・グロー */
.medal-drop-overlay[data-rarity="bronze"] .medal-drop-content {
    border-color: #cd7f32;
    box-shadow: 0 0 44px rgba(205, 127, 50, 0.50), 0 12px 40px rgba(0, 0, 0, 0.75);
}
.medal-drop-overlay[data-rarity="silver"] .medal-drop-content {
    border-color: #c8c8c8;
    box-shadow: 0 0 44px rgba(200, 200, 200, 0.50), 0 12px 40px rgba(0, 0, 0, 0.75);
}
.medal-drop-overlay[data-rarity="gold"] .medal-drop-content {
    border-color: #ffd700;
    box-shadow: 0 0 44px rgba(255, 215, 0, 0.55), 0 12px 40px rgba(0, 0, 0, 0.75);
}
.medal-drop-overlay[data-rarity="diamond"] .medal-drop-content {
    border-color: #00d4ff;
    box-shadow: 0 0 44px rgba(0, 212, 255, 0.55), 0 12px 40px rgba(0, 0, 0, 0.75);
}

/* レアリティ別メダル画像グロー */
.medal-drop-overlay[data-rarity="bronze"] .medal-drop-img {
    filter: drop-shadow(0 0 6px rgba(205, 127, 50, 1)) drop-shadow(0 0 12px rgba(205, 127, 50, 0.7));
}
.medal-drop-overlay[data-rarity="silver"] .medal-drop-img {
    filter: drop-shadow(0 0 6px rgba(200, 200, 200, 1)) drop-shadow(0 0 12px rgba(200, 200, 200, 0.7));
}
.medal-drop-overlay[data-rarity="gold"] .medal-drop-img {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
}
.medal-drop-overlay[data-rarity="diamond"] .medal-drop-img {
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 1)) drop-shadow(0 0 14px rgba(0, 212, 255, 0.8));
}

/* レアリティ別ズームインSEグロー */
.medal-drop-overlay[data-rarity="bronze"] ~ #medal-drop-fly-overlay #medal-drop-fly-img,
#medal-drop-fly-overlay.rarity-bronze #medal-drop-fly-img {
    filter: drop-shadow(0 0 20px rgba(205, 127, 50, 1)) drop-shadow(0 0 40px rgba(205, 127, 50, 0.8));
}
#medal-drop-fly-overlay.rarity-silver #medal-drop-fly-img {
    filter: drop-shadow(0 0 20px rgba(200, 200, 200, 1)) drop-shadow(0 0 40px rgba(200, 200, 200, 0.8));
}
#medal-drop-fly-overlay.rarity-gold #medal-drop-fly-img {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
}
#medal-drop-fly-overlay.rarity-diamond #medal-drop-fly-img {
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 1)) drop-shadow(0 0 40px rgba(0, 212, 255, 0.8));
}

.medal-drop-label {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: var(--accent-color);
    margin: 0;
}

.medal-drop-img {
    width: 169px;
    height: 169px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
}

.medal-drop-name {
    font-family: var(--font-pixel);
    font-size: 38px;
    color: #fff;
    margin: 0;
}

.medal-drop-desc {
    font-family: var(--font-pixel);
    font-size: 23px;
    color: #a0aabf;
    text-align: center;
    margin: 0;
}

.medal-drop-buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.medal-drop-buttons button {
    font-size: 50px;
    padding: 26px 78px;
    background: rgba(30, 40, 80, 1);
    border: 2px solid rgba(55, 80, 155, 0.8);
    border-radius: 10px;
    width: 100%;
}

#app.portrait-mode .medal-drop-content {
    width: 600px;
    padding: 47px 35px;
}

#app.portrait-mode .medal-drop-img {
    width: 220px;
    height: 220px;
}

#app.portrait-mode .medal-drop-label {
    font-size: 44px;
}

#app.portrait-mode .medal-drop-name {
    font-size: 52px;
}

#app.portrait-mode .medal-drop-desc {
    font-size: 34px;
}

#app.portrait-mode .medal-drop-buttons button {
    font-size: 44px !important;
    padding: 26px !important;
    background: rgba(30, 40, 80, 1) !important;
    border: 2px solid rgba(55, 80, 155, 0.8) !important;
    border-radius: 10px !important;
    width: 100% !important;
}

/* source: css/overlays/image-modal.css */

/* ============================================================
   画像拡大モーダル
   ============================================================ */
.image-modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.image-modal.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal-frame-wrapper {
    background: linear-gradient(145deg, #141a32 0%, #0d1220 100%);
    border: 6px solid #ffd700;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 0 0 6px #8a6000, 0 0 0 12px #0d1220, 0 0 60px rgba(255, 215, 0, 0.7), 0 20px 60px rgba(0, 0, 0, 0.85);
    position: relative;
    animation: zoom 0.3s;
}

.modal-content {
    max-width: 800px;
    max-height: 800px;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) hue-rotate(var(--shiny-hue, 0deg));
}

.item-zoom-glow {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 1))
            drop-shadow(0 0 4px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) !important;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #f1f1f1;
    font-size: 80px;
    font-weight: bold;
    cursor: pointer;
    z-index: 201;
}

#caption {
    color: #ccc;
    font-family: var(--font-pixel);
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
}

.modal-name {
    font-size: 48px;
    color: #fff;
    align-self: center;
    text-align: center;
}

#app #image-modal .modal-limited-diff-badge {
    margin-top: 8px;
    padding: 4px 12px;
    border-width: 2px;
    border-radius: 12px;
    font-size: 20px;
    align-self: center;
}

#app.portrait-mode #image-modal .modal-limited-diff-badge {
    margin-top: 12px;
    padding: 6px 16px;
    font-size: 28px;
}

.modal-equip-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-equip-stats .equip-stat {
    font-size: 38px;
    padding: 4px 16px;
}

.modal-equip-stats .equip-stat.item-desc {
    color: #ffe97a;
}

.modal-diff-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 18px 32px;
    align-self: stretch;
}

.modal-diff-row {
    font-size: 34px !important;
    gap: 16px !important;
}

.modal-diff-row .diff-badge {
    font-size: 28px !important;
}

.modal-diff-row .diff-stars {
    font-size: 34px !important;
    min-width: 120px !important;
}

.modal-diff-row .diff-time {
    font-size: 34px !important;
}

.modal-count {
    font-size: 36px;
    color: #8ab4f8;
    font-family: var(--font-pixel);
    align-self: stretch;
    text-align: left;
}

.modal-diary-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.modal-diary-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(79, 172, 254, 0.5);
    border-radius: 16px;
    color: #e2e8f0;
    font-family: var(--font-pixel);
    font-size: 44px;
    padding: 16px 24px;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    align-self: center;
}

.modal-diary-input:focus {
    border-color: #4facfe;
    box-shadow: 0 0 8px rgba(79, 172, 254, 0.4);
}

.modal-diary-input::placeholder {
    color: #3a4a70;
    font-size: 32px;
}

.modal-transform-btn {
    background: linear-gradient(135deg, #8b4fff 0%, #6a1fd8 100%);
    border: 3px solid #c77dff;
    border-radius: 16px;
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 40px;
    padding: 14px 48px;
    cursor: pointer;
    align-self: center;
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 0 12px rgba(139, 79, 255, 0.5);
}

.modal-transform-btn:active {
    opacity: 0.75;
    transform: scale(0.96);
}

/* source: css/overlays/drop-animations.css */

/* ============================================================
   剣・マールのドロップアニメーション
   ============================================================ */

/* 剣のドロップアニメーション */
.sword-drop-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 70%;
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    transform-origin: center center;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 1))drop-shadow(0 0 4px rgba(255, 215, 0, 0.8))drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    animation: sword-appear 0.5s ease-out;
    z-index: 5;
}

@keyframes sword-appear {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* マールドロップアニメーション */
.malle-drop-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 55%;
    height: 55%;
    max-width: 55%;
    max-height: 55%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 1)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    animation: malle-appear 0.5s ease-out;
    z-index: 5;
}

@keyframes malle-appear {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(30px);
    }

    60% {
        opacity: 1;
        transform: scale(1.1) translateY(-10px);
    }

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

/* source: css/overlays/item-limit.css */

/* ============================================================
   つかえないよ！ メッセージ
   ============================================================ */
.item-limit-overlay {
    z-index: 155;
    pointer-events: none;
}

.item-limit-content {
    background: rgba(20, 10, 30, 0.92);
    border: 3px solid var(--danger-color);
    border-radius: 16px;
    padding: 28px 48px;
    box-shadow: 0 0 20px rgba(255, 75, 75, 0.5);
}

.item-limit-text {
    font-family: var(--font-pixel);
    font-size: 40px;
    color: var(--danger-color);
    text-align: center;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 75, 75, 0.6);
}

#app.portrait-mode .item-limit-text {
    font-size: 52px;
}

/* source: css/overlays/navigation-btn.css */

/* ============================================================
   戦闘離脱ボタン（battle-view 左端・ステージドットと同じ行）
   ============================================================ */
.quit-battle-btn {
    position: absolute;
    top: 20px;
    left: 10px;
    z-index: 150;
    background: none;
    border: none;
    width: auto;
    height: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.75;
    transition: transform 0.1s, opacity 0.1s;
}

.quit-battle-btn img {
    display: block;
    width: auto;
    height: auto;
}

.quit-battle-btn:active {
    transform: scale(0.9);
    opacity: 1;
}

/* source: css/overlays/request.css */

/* ============================================================
   リクエストフォーム
   ============================================================ */
#request-overlay .overlay-content {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(79, 172, 254, 0.22);
    width: 800px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#request-overlay h2 {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 30px;
}

#request-overlay p {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: left;
    font-weight: bold;
}

#request-overlay p:last-of-type {
    color: var(--danger-color);
    font-size: 26px;
    margin-bottom: 20px;
}

#request-text {
    width: 100%;
    height: 250px;
    background: #000;
    color: white;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    font-family: var(--font-pixel);
    font-size: 30px;
    resize: none;
    margin-bottom: 30px;
}

#request-text:focus {
    border-color: var(--primary-color);
    outline: none;
}

.button-group {
    display: flex;
    gap: 15px;
    /* 隙間も少し狭める */
    justify-content: center;
    width: 70%;
    /* 全体の幅を70%に */
    margin: 0 auto;
    /* 中央寄せ */
}

#request-overlay #submit-request-btn,
#request-overlay #cancel-request-btn {
    flex: 1;
    font-size: 24px;
    /* 32px の約70% */
    padding: 14px 0;
    /* 20px の約70% */
    margin: 0;
}

/* source: css/overlays/whiteout.css */

/* ============================================================
   ホワイトアウト演出 (タイトル→メイン遷移)
   ============================================================ */
#whiteout-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: opacity 750ms ease-in-out;
}

#whiteout-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   フェードアウト演出 (黒)
   ============================================================ */
#fadeout-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: opacity 750ms ease-in-out;
}

#fadeout-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* source: css/overlays/intro.css */

/* ============================================================
   チュートリアル（初回説明）オーバーレイ
   ============================================================ */
#intro-overlay,
#monster-house-intro-overlay {
    z-index: 200;
    background: rgba(5, 10, 30, 0.97);
    align-items: stretch;
    justify-content: flex-start;
}

#app.portrait-mode .intro-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 70px 50px 50px;
    box-sizing: border-box;
}

#app.portrait-mode .intro-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#app.portrait-mode .intro-title {
    font-family: var(--font-pixel);
    font-size: 48px;
    color: var(--accent-color);
    text-align: center;
    line-height: 1.6;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(80, 110, 210, 0.4);
}

#app.portrait-mode .intro-text {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #d8e4ff;
    line-height: 1.9;
    margin: 0;
}

#app.portrait-mode .intro-difficulty-list {
    background: rgba(80, 110, 210, 0.1);
    border: 1px solid rgba(80, 110, 210, 0.35);
    border-radius: 12px;
    padding: 30px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#app.portrait-mode .intro-difficulty-list .intro-text {
    color: #ffe97a;
}

#app.portrait-mode .intro-text-hint {
    color: #ffaaaa;
}

#app.portrait-mode .intro-text-last {
    color: #ffe97a;
    text-align: center;
    font-size: 50px;
}

#app.portrait-mode .intro-start-btn {
    width: 100%;
    font-size: 44px;
    padding: 30px;
    margin-top: 40px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #4facfe 0%, #3399f5 50%, #1580e8 100%);
    border: 2px solid rgba(79, 172, 254, 0.5);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fff;
}

#app.portrait-mode .intro-start-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

#app.portrait-mode .intro-start-btn:active {
    filter: brightness(0.9);
    transform: translateY(2px);
}

/* source: css/screens/loading.css */

/* ============================================================
   ローディング画面
   ============================================================ */
#app.portrait-mode #loading-screen {
    position: relative;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
}

.loading-bg {
    position: absolute;
    inset: 0;
    background-image: url('../assets/image/ui/common/loading.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.loading-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 80px 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.loading-notice-bubble {
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 50%;
    width: min(86%, 620px);
    transform: translate(-50%, -50%) scale(0.96);
    padding: 30px 34px;
    border: 4px solid #f4d57b;
    border-radius: 8px;
    background: rgba(35, 24, 16, 0.96);
    color: #fff7d6;
    font-size: 28px;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 0;
    pointer-events: none;
}

.loading-notice-bubble.active {
    animation: loading-notice-in 0.25s ease forwards;
}

.loading-msg {
    font-size: 40px;
    color: #ffffff;
    text-align: center;
    line-height: 1.7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    animation: loading-blink 2.4s ease-in-out infinite;
}

.loading-progress-wrap {
    width: 100%;
    height: 18px;
    background: #2a2a2a;
    border-radius: 9px;
    overflow: hidden;
    transition: opacity 0.5s ease;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8),
                0 1px 0 rgba(255, 255, 255, 0.2);
}

.loading-bar {
    height: 100%;
    width: 0%;
    border-radius: 9px;
    /* 丸みと金属感を出す薄い黄色のグラデーション */
    background: linear-gradient(
        to bottom,
        #fffbe6 0%,   /* ハイライト（白に近い黄色） */
        #fff099 40%,  /* メインの薄い黄色 */
        #ffe066 45%,  /* 少し濃いめの黄色（陰影） */
        #fff5cc 100%  /* 下部の反射 */
    );
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.9),
                inset 0 -2px 3px rgba(0, 0, 0, 0.4);
    transition: width 0.2s ease-out;
}

@keyframes loading-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

@keyframes loading-notice-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* source: css/screens/top.css */

/* ============================================================
   縦画面モード (840x1600) — 共通
   ============================================================ */
#app.portrait-mode .screen {
    padding: 0;
}

/* セットアップ画面（旧） */
#app.portrait-mode #setup-screen {
    padding: 40px 40px;
    justify-content: center;
}

.top-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.top-bg-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.6;
}

.title-img {
    margin-bottom: 0;
}

#app.portrait-mode .screen-title-img {
    display: block;
    width: 500px;
    max-width: 80%;
    height: auto;
    margin: 30px auto 16px;
}

#app.portrait-mode #top-screen .title-img {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    object-fit: cover;
}

#app.portrait-mode .setup-container {
    background: linear-gradient(180deg, rgba(28, 38, 70, 0.95) 0%, rgba(12, 16, 38, 0.98) 100%);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(79, 172, 254, 0.22);
    display: flex;
    flex-direction: column;
    gap: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#app.portrait-mode .input-group label {
    font-size: 28px;
    margin-bottom: 12px;
}

#app.portrait-mode input[type="text"] {
    font-size: 40px;
    padding: 20px;
}

#app.portrait-mode .toggle-btn,
#app.portrait-mode .checkbox-btn {
    font-size: 36px;
    padding: 20px;
}

#app.portrait-mode #start-btn {
    /* 【縦画面】バトルスタートボタンのサイズ調整用 */
    font-size: 55px !important;
    padding: 50px 20px !important;
    margin-top: 20px;
}

#app.portrait-mode #note-btn {
    /* 【縦画面】モンスターノートボタンのサイズ調整用 */
    font-size: 30px !important;
    padding: 10px 10px !important;
    height: 80px !important;
    margin: 0;
    align-self: auto;
    flex: none;
    width: 300px !important;
}


#app.portrait-mode .setup-footer {
    margin-top: auto;
    font-size: 20px;
    color: #5a6275;
    text-align: center;
}

/* ============================================================
   トップ画面 (縦画面)
   ============================================================ */
#app.portrait-mode #top-screen {
    padding: 0;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ライセンス表記オーバーレイ（タイトル画像前面最下部） */
#app.portrait-mode #top-screen .setup-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    background: rgba(8, 11, 22, 0.55);
    padding: 10px 20px;
    border-radius: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    border: 1px solid rgba(79, 172, 254, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* タイトル画面専用（ゲームスタートボタンのみ） */
#app.portrait-mode .top-title-only {
    gap: 0;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* メイン画面 */
#app.portrait-mode #main-screen {
    padding: 0 40px;
    align-items: center;
    justify-content: center;
    position: relative;
}

#app.portrait-mode .top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    position: relative;
    z-index: 1;
}

#app.portrait-mode .top-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

#app.portrait-mode #top-screen .title-img {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    object-fit: cover;
}

#app.portrait-mode #top-screen .subtitle {
    font-size: 28px;
    margin-bottom: 40px;
}

#app.portrait-mode .top-menu {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#app.portrait-mode .top-battle-btn {
    font-size: 68px !important;
    width: 100%;
}

#app.portrait-mode .top-menu-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#app.portrait-mode .top-menu-row button {
    width: 100%;
}


/* メインメニューボタンのフォント色を白に統一 */
#app.portrait-mode #main-screen .top-menu button {
    color: #ffffff;
}

/* ============================================================
   セットアップ画面 back button (縦画面)
   ============================================================ */
#app.portrait-mode #setup-screen {
    position: relative;
}

/* ============================================================
   じょうほうウィンドウ（縦画面）
   ============================================================ */
#app.portrait-mode .info-content {
    width: 740px;
    padding: 44px 52px 52px;
}

#app.portrait-mode .info-section-title {
    font-size: 38px;
    margin: 0 0 18px;
}

#app.portrait-mode .info-row {
    font-size: 38px;
    padding: 10px 0;
    gap: 20px;
}

#app.portrait-mode .info-close-btn {
    font-size: 54px;
    padding: 20px 80px;
    margin-top: 8px;
}

/* source: css/screens/dungeon.css */

/* ============================================================
   ダンジョン選択画面 (縦画面)
   ============================================================ */
#app.portrait-mode #dungeon-select-screen {
    padding: 20px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}


#app.portrait-mode .dungeon-name-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 700px;
}

#app.portrait-mode .dungeon-name-label {
    font-family: var(--font-pixel);
    color: var(--accent-color);
    font-size: 28px;
    white-space: nowrap;
}

#app.portrait-mode .dungeon-name-input {
    font-family: var(--font-pixel);
    font-size: 36px;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid rgba(79, 172, 254, 0.5);
    background: rgba(12, 16, 38, 0.9);
    color: var(--primary-color);
    flex: 1;
}

/* 難易度タブ */
#app.portrait-mode .difficulty-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: 750px;
    margin-bottom: 12px;
}

#app.portrait-mode .difficulty-tab {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-pixel);
    font-size: 28px;
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    border: 2px solid rgba(79, 172, 254, 0.4);
    background: rgba(12, 16, 38, 1);
    color: rgba(180, 200, 255, 0.6);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

#app.portrait-mode .difficulty-tab:hover {
    background: rgba(30, 55, 110, 1);
    color: #cce4ff;
    border-color: rgba(79, 172, 254, 0.7);
}

#app.portrait-mode .difficulty-tab:active {
    transform: scale(0.95);
}

#app.portrait-mode .difficulty-tab.active {
    background: linear-gradient(180deg, #2a5a9e, #1c2646);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.7);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

#app.portrait-mode .dungeon-grid {
    display: grid;
    grid-template-columns: repeat(2, 250px);
    gap: 24px 48px;
    justify-content: center;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* グリッド列幅548px、コンテナ760px → 両端106pxずつネガティブマージンで全幅に */
#app.portrait-mode .dungeon-stage-title {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.8) center / cover;
    margin-left: -100px;
    width: 748px;
    box-sizing: border-box;
}

#app.portrait-mode .dungeon-stage-desc {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: rgba(180, 210, 255, 0.75);
    letter-spacing: 0.05em;
}

#app.portrait-mode .dungeon-stage-name {
    font-family: var(--font-pixel);
    font-size: 42px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 0.05em;
}

#app.portrait-mode .dungeon-cell {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 250px;
    height: 110px;
    padding: 0;
    border-radius: 12px;
    border: none;
    background: none;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s;
}

#app.portrait-mode .dungeon-cell-bg {
    display: block;
    width: 250px;
    height: 110px;
    pointer-events: none;
}

#app.portrait-mode .dungeon-cell-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

#app.portrait-mode .dungeon-cell-num-icon {
    height: 52px;
    width: auto;
    pointer-events: none;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

#app.portrait-mode .dungeon-cell:hover:not(:disabled) {
    transform: scale(1.08);
}

#app.portrait-mode .dungeon-cell:active:not(:disabled) {
    transform: scale(0.95);
}

#app.portrait-mode .dungeon-clear-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    pointer-events: none;
}

#app.portrait-mode .dungeon-cell.locked {
    opacity: 0.55;
    cursor: not-allowed;
}

#app.portrait-mode .top-title-area {
    width: 100%;
    /* タイトル画像容器を全高に */
    height: 100%;
}

/* source: css/screens/battle.css */

/* ============================================================
   バトル画面レイアウト (縦画面)
   ============================================================ */
#app.portrait-mode .battle-view {
    height: 620px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 110% 60% at 50% 115%, rgba(50, 100, 220, 0.20) 0%, transparent 60%),
        radial-gradient(circle at 25% 15%, rgba(80, 40, 180, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 78% 30%, rgba(20, 80, 200, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #0b0f1e 0%, #07091a 100%);
}

/* battle-view 底部の分割ライン */
#app.portrait-mode .battle-view::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(79, 172, 254, 0.6) 15%,
            rgba(160, 220, 255, 1) 50%,
            rgba(79, 172, 254, 0.6) 85%,
            transparent 100%);
    z-index: 5;
    pointer-events: none;
}

#app.portrait-mode .panel {
    height: 980px;
    width: 100%;
    background:
        radial-gradient(ellipse 120% 28% at 50% 0%, rgba(40, 75, 165, 0.24) 0%, transparent 55%),
        linear-gradient(180deg, #0d1120 0%, #07091a 100%);
    padding: 10px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

#app.portrait-mode .panel-section {
    border: 2px solid rgba(60, 88, 165, 0.45);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(22, 32, 62, 0.70) 0%, rgba(7, 10, 24, 0.92) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── メッセージログウィンドウ ── */
#app.portrait-mode .panel-section--message {
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 12px 16px;
    justify-content: flex-start;
    border-color: rgba(80, 120, 230, 0.55);
    background: linear-gradient(180deg, rgba(4, 8, 22, 0.98) 0%, rgba(3, 5, 16, 0.99) 100%);
    box-shadow:
        0 0 0 1px rgba(40, 80, 190, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.65),
        inset 0 0 30px rgba(0, 20, 80, 0.30);
}

#app.portrait-mode .message-log {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#app.portrait-mode .message-log-line {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.3;
    animation: msg-slide-in 0.15s ease-out;
}

@keyframes msg-slide-in {
    from {
        transform: translateY(6px);
    }

    to {
        transform: translateY(0);
    }
}

/* ── 問題ウィンドウ ── */
#app.portrait-mode .panel-section--problem {
    height: 150px;
    gap: 14px;
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#app.portrait-mode .panel-section--problem.player-turn {
    border-color: rgba(79, 172, 254, 0.80);
    box-shadow: 0 0 30px rgba(79, 172, 254, 0.38), 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(79, 172, 254, 0.12);
}

#app.portrait-mode .panel-section--problem.monster-turn {
    border-color: rgba(255, 70, 70, 0.80);
    box-shadow: 0 0 30px rgba(255, 70, 70, 0.38), 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 70, 70, 0.12);
}

/* ── テンキーウィンドウ ── */
#app.portrait-mode .panel-section--numpad {
    height: 542px;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-color: rgba(50, 70, 140, 0.35);
    background: linear-gradient(180deg, rgba(14, 20, 44, 0.80) 0%, rgba(5, 8, 18, 0.96) 100%);
    overflow: hidden;
}

/* ── バトル背景画像 ── */
#app.portrait-mode .battle-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    pointer-events: none;
    display: block;
    opacity: 0.7;
}

/* はんげき発動中：背景への赤オーバーレイ */
#app.portrait-mode .revenge-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(200, 0, 0, 0.5);
    z-index: 0;
    pointer-events: none;
}

/* ダブルアタック2回目：背景への水色オーバーレイ */
#app.portrait-mode .double-attack-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 180, 220, 0.5);
    z-index: 0;
    pointer-events: none;
}

/* ── モンスター領域 ── */
#app.portrait-mode .monster-container {
    width: 100%;
    padding: 0 32px;
}

#app.portrait-mode #monster-img {
    max-width: 100%;
    max-height: 508px;
    object-fit: contain;
}

/* stage-progress: battle-view 最上部に絶対配置 */
#app.portrait-mode .stage-progress {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    justify-content: center;
    z-index: 10;
    padding: 7px 22px;
    background: rgba(4, 6, 18, 0.88);
    border-radius: 24px;
    border: 1px solid rgba(79, 172, 254, 0.22);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* monster-img-wrapper: stage-progress より背後 */
#app.portrait-mode .monster-img-wrapper {
    position: relative;
    z-index: 1;
    line-height: 0;
}

/* monster-stat: モンスター画像下端のオーバーレイ */
#app.portrait-mode .monster-stat {
    position: relative;
    z-index: 2;
    margin-top: -36px;
    width: 100%;
    text-align: center;
    padding: 10px 24px 14px;
    background: rgba(4, 6, 16, 0.60);
    border-radius: 12px;
}

#app.portrait-mode #monster-name {
    font-size: calc(38px * var(--monster-name-scale, 1));
    font-weight: bold;
    text-shadow: 0 0 12px rgba(255, 110, 110, 0.40), 0 2px 5px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    display: block;
    color: #ffb8b8;
    letter-spacing: 1px;
}

#app.portrait-mode .monster-stat .hp-bar-container {
    height: 18px;
    margin-top: 10px;
    border-color: rgba(90, 20, 20, 0.55);
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.18), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* ステージドット */
#app.portrait-mode .stage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.40);
    transition: transform 0.2s, box-shadow 0.2s;
}

#app.portrait-mode .stage-dot.current {
    background: var(--danger-color);
    border-color: #ffaaaa;
    transform: scale(1.5);
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.9);
}

#app.portrait-mode .stage-dot.cleared {
    background: var(--success-color);
    border-color: var(--success-color);
    box-shadow: 0 0 5px rgba(0, 230, 100, 0.6);
}

#app.portrait-mode .stage-dot.cleared.rare {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
}

#app.portrait-mode .stage-dot.cleared.heal {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(79, 172, 254, 0.6);
}

/* ── パネル内部（ステータス）── */
#app.portrait-mode .panel-section--status {
    height: 90px;
    padding: 10px 16px;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

#app.portrait-mode .status-equip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#app.portrait-mode .sword-aura-wrapper {
    height: 64px;
}

#app.portrait-mode .shield-aura-wrapper {
    height: 64px;
}

#app.portrait-mode #sword-label {
    height: 64px;
    width: auto;
    vertical-align: middle;
}

#app.portrait-mode #shield-label {
    height: 64px;
    width: auto;
    vertical-align: middle;
}

#app.portrait-mode .status-hp-area {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
    min-width: 0;
}

#app.portrait-mode .status-hp-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
}

#app.portrait-mode #player-level-text {
    font-size: 22px;
    font-weight: bold;
    color: rgba(160, 200, 255, 0.70);
    letter-spacing: 1px;
    line-height: 1;
    margin-top: 8px;
}

#app.portrait-mode .status-bar-box {
    min-width: 0;
    padding-top: 6px;
}

#app.portrait-mode .exp-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    border: 1px solid rgba(160, 100, 255, 0.30);
    overflow: hidden;
    margin-top: 8px;
}

#app.portrait-mode .exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8844cc, #bb88ff);
    border-radius: 3px;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 6px rgba(160, 80, 255, 0.70);
}

#app.portrait-mode .status-bar-box .hp-bar-container {
    width: 100%;
    height: 16px;
    flex-shrink: 0;
}

/* 必殺技ゲージ */
#app.portrait-mode .special-gauge-row {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
}

#app.portrait-mode .special-gauge {
    flex: 1;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.15s, box-shadow 0.15s;
}

#app.portrait-mode .special-gauge.active {
    background-color: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.85);
}

/* ダブルアタックゲージ */
#app.portrait-mode .double-attack-gauge-row {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
}

#app.portrait-mode .double-gauge {
    flex: 1;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.15s, box-shadow 0.15s;
}

#app.portrait-mode .double-gauge.active {
    background-color: #00ccff;
    box-shadow: 0 0 5px rgba(0, 200, 255, 0.85);
}

/* はんげきゲージ */
#app.portrait-mode .revenge-gauge-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

#app.portrait-mode .revenge-gauge {
    flex: 1;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.15s, box-shadow 0.15s;
}

#app.portrait-mode .revenge-gauge.active {
    background-color: #ff6666;
    box-shadow: 0 0 5px rgba(255, 80, 80, 0.85);
}

/* 必殺技待機: 激しいオーラ放射 (Blazing Flare) */
@keyframes blazing-aura-pulse {

    0%,
    100% {
        box-shadow:
            0 0 25px 10px rgba(255, 80, 0, 0.7),
            inset 0 0 45px 20px rgba(255, 60, 0, 0.6);
        border-color: rgba(255, 120, 0, 0.8);
    }

    50% {
        box-shadow:
            0 0 60px 25px rgba(255, 40, 0, 1),
            inset 0 0 80px 40px rgba(255, 140, 0, 0.9);
        border-color: rgba(255, 200, 50, 1);
    }
}

.numpad-special-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border: 3px solid rgba(255, 150, 0, 0.8);
    animation: blazing-aura-pulse 0.8s ease-in-out infinite;
    overflow: hidden;
    mix-blend-mode: screen;
}

/* はんげき待機: 赤オーラ全面 */
@keyframes revenge-aura-pulse {
    0%,
    100% {
        background: rgba(200, 0, 0, 0.18);
    }

    50% {
        background: rgba(255, 50, 50, 0.38);
    }
}

.numpad-revenge-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    animation: revenge-aura-pulse 0.8s ease-in-out infinite;
    mix-blend-mode: screen;
}

#app.portrait-mode #player-hp-text {
    font-size: 26px;
    font-weight: bold;
    color: #b0e0ff;
    line-height: 1;
}

/* ── 問題表示 ── */
#app.portrait-mode .problem-area {
    text-align: center;
}

#app.portrait-mode .problem-text {
    font-size: 78px;
    line-height: 1;
    font-weight: bold;
    font-family: var(--font-pixel);
    color: var(--accent-color);
    letter-spacing: 5px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    text-shadow: 0 0 22px rgba(255, 215, 0, 0.38), 0 3px 6px rgba(0, 0, 0, 0.95);
}

#app.portrait-mode .problem-hint {
    font-size: 22px;
    font-family: var(--font-pixel);
    color: rgba(255, 215, 0, 0.75);
    letter-spacing: 2px;
    line-height: 1;
    text-align: center;
    margin-top: 4px;
}

#app.portrait-mode .answer-input {
    display: none;
}

#app.portrait-mode .timer-container {
    height: 14px;
    flex-shrink: 0;
}

/* ── テンキー ── */
#app.portrait-mode .numpad-image-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

#app.portrait-mode .numpad-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.9;
}

#app.portrait-mode .numpad {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

#app.portrait-mode .num-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@keyframes numpad-flare-anim {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.95;
    }

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

#app.portrait-mode .numpad-flare {
    position: absolute;
    pointer-events: none;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 245, 255, 0.95) 0%, rgba(79, 172, 254, 0.55) 45%, transparent 70%);
    animation: numpad-flare-anim 0.45s ease-out forwards;
    z-index: 20;
}

/* Item Slot */
#app.portrait-mode .item-slot-container {
    width: 65px;
    height: 65px;
}

#app.portrait-mode #item-use-img {
    width: 280px;
    height: 280px;
}

/* ボス撃破時のゆっくりとしたフェードアウトアニメーション（上から下へ消えつつ暗くなる） */
#app.portrait-mode .boss-defeat-anim {
    animation: boss-defeat-wipe 3s ease-in-out forwards !important;
}

@keyframes boss-defeat-wipe {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: brightness(1.2) saturate(1.2);
    }

    15% {
        opacity: 1;
        filter: brightness(1.5) saturate(0.8);
    }

    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        filter: brightness(0.2) saturate(0);
    }
}

#app.portrait-mode .boss-defeat-anim-name {
    animation: boss-defeat-fade 3s ease-in-out forwards !important;
}

@keyframes boss-defeat-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ボス復活時のフェードインアニメーション（下から上へ現れつつ明るくなる） */
#app.portrait-mode .boss-recover-anim {
    animation: boss-recover-wipe 3s ease-out forwards !important;
}

@keyframes boss-recover-wipe {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        filter: brightness(0.2) saturate(0);
        transform: translateY(30px);
    }

    50% {
        opacity: 1;
        filter: brightness(1.5) saturate(1.2);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: brightness(1) saturate(1);
        transform: translateY(0);
    }
}

#app.portrait-mode .boss-recover-anim-name {
    animation: boss-recover-fade 3s ease-in-out forwards !important;
}

@keyframes boss-recover-fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

/* ボスnext変身時の背景フェードイン */
#app.portrait-mode #battle-bg-img.boss-next-bg-fi {
    animation: boss-next-bg-fade 3s ease-out forwards !important;
}

@keyframes boss-next-bg-fade {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* ============================================================
   コンボカウンター
   ============================================================ */
#app.portrait-mode #combo-counter {
    position: absolute;
    top: 10px;
    right: 18px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 16px;
    background: rgba(4, 6, 18, 0.88);
    border-radius: 24px;
    border: 1px solid rgba(255, 200, 60, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    z-index: 10;
    pointer-events: none;
}

#app.portrait-mode #combo-count-num {
    font-size: 42px;
    font-weight: bold;
    color: rgba(255, 210, 80, 0.85);
    text-shadow: 0 0 10px rgba(255, 200, 60, 0.4);
    line-height: 1;
    transition: color 0.2s, text-shadow 0.2s;
}

#app.portrait-mode .combo-label {
    font-size: 26px;
    font-weight: bold;
    color: rgba(255, 210, 80, 0.70);
    letter-spacing: 1px;
    transition: color 0.2s;
}

/* 10コンボボーナス中 */
#app.portrait-mode #combo-counter.bonus-active {
    border-color: rgba(255, 220, 0, 0.75);
    box-shadow: 0 2px 16px rgba(255, 200, 0, 0.35), 0 0 28px rgba(255, 160, 0, 0.18);
    animation: combo-bonus-pulse 1.4s ease-in-out infinite;
}

#app.portrait-mode #combo-counter.bonus-active #combo-count-num {
    color: #ffe040;
    text-shadow: 0 0 14px rgba(255, 220, 0, 0.8), 0 0 30px rgba(255, 140, 0, 0.5);
}

#app.portrait-mode #combo-counter.bonus-active .combo-label {
    color: #ffd020;
}

@keyframes combo-bonus-pulse {
    0%, 100% {
        box-shadow: 0 2px 16px rgba(255, 200, 0, 0.35), 0 0 28px rgba(255, 160, 0, 0.18);
    }
    50% {
        box-shadow: 0 2px 22px rgba(255, 220, 0, 0.6), 0 0 44px rgba(255, 180, 0, 0.35);
    }
}

/* source: css/screens/result.css */

/* ============================================================
   リザルト画面 (縦画面)
   ============================================================ */
#app.portrait-mode #result-screen {
    padding: 40px;
    overflow-y: auto;
    background: radial-gradient(ellipse 160% 55% at 50% 0%, rgba(79, 172, 254, 0.14) 0%, transparent 55%);
}

#app.portrait-mode .title {
    font-size: 56px;
    margin: 24px 0;
    white-space: nowrap;
    text-align: center;
}

#app.portrait-mode .result-total-container {
    text-align: center;
    margin-bottom: 10px;
}

#app.portrait-mode .total-label {
    font-size: 28px;
    color: #94a3b8;
    display: block;
    text-align: center;
}

#app.portrait-mode .total-time-display {
    font-size: 90px;
    margin: 0;
    text-align: center;
    display: block;
}

#app.portrait-mode .result-settings-container {
    font-size: 28px;
    padding: 16px 24px;
    margin-bottom: 30px;
    background: linear-gradient(145deg, #1e2748, #131930);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(60, 85, 160, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.4);
}

#app.portrait-mode .result-stats {
    background: linear-gradient(180deg, rgba(22, 30, 58, 0.92) 0%, rgba(12, 16, 38, 0.96) 100%);
    border: 2px solid rgba(55, 80, 160, 0.45);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
}

#app.portrait-mode .result-stats h3 {
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
}

#app.portrait-mode #time-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

#app.portrait-mode .result-card {
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 3px solid rgba(55, 80, 155, 0.5);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#app.portrait-mode .result-card--friend {
    background: linear-gradient(145deg, #2e2a10, #1e1a08);
    border-color: rgba(220, 180, 40, 0.6);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 220, 80, 0.08);
}

#app.portrait-mode .result-friend-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(210, 160, 20, 0.85);
    color: #fff8d0;
    font-size: 16px;
    font-family: var(--font-pixel);
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1.4;
    pointer-events: none;
}

#app.portrait-mode .result-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 22px rgba(79, 172, 254, 0.5), 0 4px 18px rgba(0, 0, 0, 0.55);
    border-color: var(--primary-color);
    z-index: 10;
}

#app.portrait-mode .result-img-container {
    width: 80px;
    height: 80px;
}

#app.portrait-mode .result-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#app.portrait-mode .result-name {
    font-size: 18px;
    color: #cbd5e1;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    width: 100%;
}

#app.portrait-mode .result-time {
    font-size: 28px;
    font-weight: bold;
    font-family: var(--font-pixel);
}

#app.portrait-mode .result-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 50px 0;
}

#app.portrait-mode #share-btn,
#app.portrait-mode #restart-btn {
    flex: 1;
    max-width: 280px;
    padding: 22px 0;
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 2px solid rgba(79, 172, 254, 0.5);
    border-radius: 14px;
    color: #e2e8f0;
    font-family: var(--font-pixel);
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    text-align: center;
}

#app.portrait-mode #share-btn:hover,
#app.portrait-mode #restart-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(79, 172, 254, 0.45);
    border-color: var(--primary-color);
}

#app.portrait-mode #share-btn:active,
#app.portrait-mode #restart-btn:active {
    transform: scale(0.97);
}

/* ---- コンパニオン レベルアップ通知バナー ---- */
#app.portrait-mode .result-companion-levelup {
    display: none;
}

#app.portrait-mode .result-companion-levelup.active {
    display: block;
    font-family: var(--font-pixel);
    font-size: 26px;
    color: #3a2a00;
    text-align: center;
    margin: 6px 20px 0;
    padding: 12px 16px;
    background: linear-gradient(180deg, #ffe27a, #ffc400);
    border: 2px solid #fff3b0;
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(255, 200, 0, 0.6);
    animation: result-companion-pop 0.4s ease;
}

@keyframes result-companion-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* source: css/screens/shop.css */

/* ============================================================
   ショップ画面 (縦画面) — 背景に店員が描かれた新レイアウト
   ============================================================ */
#app.portrait-mode #shop-screen {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* 背景は不透明度100%。タブ押下時はJSで0.5に変更 */
#app.portrait-mode #shop-screen .top-bg-img {
    opacity: 1;
}

#app.portrait-mode .shop-header {
    display: flex;
    align-items: center;
    padding: 20px 30px 0;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

/* セリフ: 画面の垂直中央より100px上に絶対配置 */
#app.portrait-mode .shop-clerk-quote {
    position: absolute;
    top: calc(50% - 350px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 42px !important;
    width: 600px;
    max-width: 90%;
    min-height: 200px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-wrap;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    animation: none !important;
    background: rgba(0, 60, 120, 0.8);
}

/* 商品エリア: タイトル下から最下部の上まで。タブ押下時に表示 */
#app.portrait-mode .shop-items-area {
    position: absolute;
    top: 210px;
    left: 30px;
    right: 30px;
    bottom: 260px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 16px;
    padding: 16px;
}

/* 最下部: 所持マール + タブボタン */
#app.portrait-mode .shop-bottom {
    margin-top: auto;
    flex-shrink: 0;
    padding: 20px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 3;
}

#app.portrait-mode .shop-malle-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(40, 28, 0, 0.75) 0%, rgba(20, 14, 0, 0.85) 100%);
    border: 3px solid rgba(255, 215, 0, 0.65);
    border-radius: 12px;
    padding: 20px 30px;
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 240, 100, 0.1);
}

#app.portrait-mode .malle-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

#app.portrait-mode .shop-malle-text {
    font-family: var(--font-pixel);
    font-size: 52px;
    color: var(--accent-color);
}

#app.portrait-mode .shop-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}

#app.portrait-mode .shop-item-btn {
    background: linear-gradient(145deg, #1e2748, #131830);
    border: 3px solid rgba(55, 80, 155, 0.5);
    border-radius: 16px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    color: var(--text-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#app.portrait-mode .shop-item-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
}

#app.portrait-mode .shop-item-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 1))
            drop-shadow(0 0 4px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

#app.portrait-mode .shop-item-name {
    font-family: var(--font-pixel);
    font-size: 39px;
    color: #e2e8f0;
    text-align: center;
}

#app.portrait-mode .shop-item-price {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: var(--success-color);
}

/* ============================================================
   ショップ アイテム詳細 (縦画面)
   ============================================================ */
#app.portrait-mode .shop-item-content {
    width: 620px;
    padding: 50px 60px;
    gap: 20px;
}

#app.portrait-mode .shop-item-detail-img {
    width: 160px;
    height: 160px;
}

#app.portrait-mode .shop-item-detail-name {
    font-size: 52px;
}

#app.portrait-mode .shop-item-detail-desc {
    font-size: 34px;
}

#app.portrait-mode .shop-item-detail-price {
    font-size: 40px;
}

#app.portrait-mode .shop-buy-question {
    font-size: 48px;
}

#app.portrait-mode .shop-buy-buttons button {
    font-size: 44px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 240px;
}

#app.portrait-mode .shop-msg-text {
    font-size: 48px !important;
}

#app.portrait-mode .shop-empty-msg {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #a0aabf;
    text-align: center;
    margin-top: 40px;
}

/* source: css/screens/bag.css */

/* ============================================================
   アイテムノート (縦画面)
   ============================================================ */
#app.portrait-mode #item-note-screen {
    padding: 0;
}

/* ============================================================
   リュック画面 (縦画面)
   ============================================================ */
#app.portrait-mode #bag-screen {
    padding: 0;
    position: relative;
}


#app.portrait-mode .bag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 30px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

#app.portrait-mode .bag-card {
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 3px solid rgba(55, 80, 155, 0.5);
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#app.portrait-mode .bag-card:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.45), 0 4px 18px rgba(0, 0, 0, 0.55);
    border-color: var(--primary-color);
}

#app.portrait-mode .bag-card--empty {
    opacity: 0.5;
}

#app.portrait-mode .bag-item-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

#app.portrait-mode .bag-item-count {
    font-family: var(--font-pixel);
    font-size: 46px;
    color: var(--accent-color);
    font-weight: bold;
}

#app.portrait-mode .bag-item-name {
    font-family: var(--font-pixel);
    font-size: 26px;
    color: #e2e8f0;
    text-align: center;
}

/* リュックアイコン（戦闘中）のサイズ */
#app.portrait-mode .backpack-slot-img {
    width: 60px;
    height: 60px;
}

/* source: css/screens/equip.css */

/* ============================================================
   そうび画面 (縦画面)
   ============================================================ */
#app.portrait-mode #equip-screen {
    padding: 0;
    position: relative;
    flex-direction: column;
}


#app.portrait-mode .equip-status-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 30px;
    background: rgba(10, 20, 60, 0.75);
    border: 2px solid rgba(80, 110, 210, 0.5);
    border-radius: 10px;
    margin: 10px 20px;
}

#app.portrait-mode .equip-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#app.portrait-mode .equip-status-label {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: #a0aabf;
}

#app.portrait-mode .equip-status-value {
    font-family: var(--font-pixel);
    font-size: 40px;
    color: var(--accent-color);
}

#app.portrait-mode .equip-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 30px 0;
}

#app.portrait-mode .equip-tab {
    flex: 1;
    font-family: var(--font-pixel);
    font-size: 34px;
    padding: 14px 0;
    border-radius: 10px 10px 0 0;
    border: 2px solid rgba(55, 80, 155, 0.5);
    border-bottom: none;
    background: rgba(30, 40, 80, 1);
    color: #a0aabf;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#app.portrait-mode .equip-tab:hover {
    background: rgba(40, 65, 120, 1);
    color: #c8d8f0;
}

#app.portrait-mode .equip-tab.active {
    background: linear-gradient(180deg, #1e3a6e, #162a55);
    color: #ffd700;
    border-color: #ffd700;
}

#app.portrait-mode .equip-sort-bar {
    display: flex;
    gap: 12px;
    padding: 10px 30px 0;
}

#app.portrait-mode .equip-sort-btn {
    font-family: var(--font-pixel);
    font-size: 28px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid rgba(55, 80, 155, 0.5);
    background: rgba(30, 40, 80, 0.8);
    color: #a0aabf;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#app.portrait-mode .equip-sort-btn:hover {
    background: rgba(40, 65, 120, 0.9);
    color: #c8d8f0;
}

#app.portrait-mode .equip-sort-btn.active {
    background: rgba(30, 60, 120, 0.9);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.6);
}

#app.portrait-mode .equip-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#app.portrait-mode .equip-none-section {
    display: flex;
    gap: 16px;
}

#app.portrait-mode .equip-none-btn {
    flex: 1;
    font-size: 34px !important;
    padding: 16px !important;
}

#app.portrait-mode .equip-empty-msg {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #a0aabf;
    text-align: center;
    margin-top: 40px;
}

#app.portrait-mode .equip-card {
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 3px solid rgba(55, 80, 155, 0.5);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

#app.portrait-mode .equip-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.35);
}

#app.portrait-mode .equip-card-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

#app.portrait-mode .equip-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#app.portrait-mode .equip-card-name {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #e2e8f0;
}

#app.portrait-mode .equip-card-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#app.portrait-mode .equip-stat {
    font-family: var(--font-pixel);
    font-size: 28px;
    padding: 2px 10px;
    border-radius: 6px;
}

#app.portrait-mode .equip-stat.atk {
    color: #ffa07a;
    background: rgba(255, 100, 50, 0.15);
    border: 1px solid rgba(255, 100, 50, 0.4);
}

#app.portrait-mode .equip-stat.def {
    color: #87cefa;
    background: rgba(50, 150, 255, 0.15);
    border: 1px solid rgba(50, 150, 255, 0.4);
}

#app.portrait-mode .equip-card-btn {
    font-size: 30px !important;
    padding: 14px 20px !important;
    white-space: nowrap;
    pointer-events: none;
}

#app.portrait-mode .equip-card-btn.equip-card-btn-remove {
    background: linear-gradient(135deg, #7a2020, #5a1515) !important;
    border-color: #c04040 !important;
    color: #ffcccc !important;
}

#app.portrait-mode .equip-card.equipped {
    border-color: #ffd700;
}

#app.portrait-mode .equip-card-badge {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-pixel);
    font-size: 22px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 6px;
    padding: 2px 8px;
    vertical-align: middle;
}

/* source: css/screens/setting.css */

/* ============================================================
   ノート選択画面 (縦画面)
   ============================================================ */
#app.portrait-mode #note-hub-screen {
    padding: 0;
    position: relative;
    flex-direction: column;
}

#app.portrait-mode .note-hub-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 100px;
    padding: 30px;
    padding-bottom: 230px;
}

#app.portrait-mode .note-hub-list button {
    width: 80%;
}

/* ============================================================
   せってい画面 (縦画面)
   ============================================================ */
#app.portrait-mode #setting-screen {
    padding: 0;
    position: relative;
    flex-direction: column;
}

#app.portrait-mode .setting-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#app.portrait-mode .setting-item {
    background: rgba(10, 20, 60, 0.75);
    border: 2px solid rgba(80, 110, 210, 0.5);
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

#app.portrait-mode .setting-item-header {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: var(--accent-color);
    padding: 16px 24px;
    background: rgba(80, 110, 210, 0.12);
    border-bottom: 1px solid rgba(80, 110, 210, 0.4);
}

#app.portrait-mode .setting-name-area {
    padding: 20px 24px;
}

#app.portrait-mode .setting-name-input {
    width: 100%;
    box-sizing: border-box;
}

#app.portrait-mode .setting-music-rows {
    display: flex;
    flex-direction: column;
}

#app.portrait-mode .setting-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(55, 80, 155, 0.15);
}

#app.portrait-mode .setting-row:last-child {
    border-bottom: none;
}

#app.portrait-mode .setting-row-label {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: #a0aabf;
    min-width: 150px;
}

#app.portrait-mode .setting-toggle-group {
    display: flex;
    gap: 8px;
}

#app.portrait-mode .setting-toggle-btn {
    font-family: var(--font-pixel);
    font-size: 32px;
    padding: 12px 28px;
    border-radius: 8px;
    border: 2px solid rgba(55, 80, 155, 0.4);
    background: rgba(30, 40, 80, 1);
    color: #606880;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ON ボタンが選択中 または 汎用のアクティブトグル */
#app.portrait-mode .setting-toggle-btn[data-value="on"].active,
#app.portrait-mode .setting-toggle-btn.active {
    background: linear-gradient(135deg, #1e4a2e, #143520);
    color: #4ade80;
    border-color: #4ade80;
}

/* OFF ボタンが選択中 */
#app.portrait-mode .setting-toggle-btn[data-value="off"].active {
    background: linear-gradient(135deg, #4a1e1e, #351414);
    color: #f87171;
    border-color: #f87171;
}

#app.portrait-mode .setting-row-indent {
    padding-left: 40px;
    background: rgba(0, 0, 0, 0.1);
}

#app.portrait-mode .setting-volume-slider {
    flex: 1;
    height: 10px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

#app.portrait-mode .setting-volume-value {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: var(--accent-color);
    min-width: 70px;
    text-align: right;
}

#app.portrait-mode .setting-backup-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
}

#app.portrait-mode .setting-backup-btn {
    width: 100%;
    font-size: 34px;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ほぞんボタン (Primary) */
#app.portrait-mode .setting-backup-btn.primary-btn {
    background: linear-gradient(180deg, #4facfe 0%, #3399f5 50%, #1580e8 100%);
    border-color: rgba(79, 172, 254, 0.5);
}

/* よみこみボタン (Orange) */
#app.portrait-mode .setting-backup-btn.orange-btn {
    background: linear-gradient(180deg, #ff9a44 0%, #ff7433 50%, #e65100 100%);
    border-color: rgba(255, 154, 68, 0.5);
}

#app.portrait-mode .setting-backup-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

#app.portrait-mode .setting-backup-btn:active {
    transform: translateY(2px);
    filter: brightness(0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#app.portrait-mode .setting-keypad-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px 24px;
}

#app.portrait-mode .setting-keypad-btn {
    width: 100%;
    box-sizing: border-box;
    font-size: 34px;
    padding: 20px;
    border-radius: 12px;
}

/* source: css/screens/note.css */

/* ============================================================
   Monster Note (図鑑)
   ============================================================ */
.note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}

#app.portrait-mode .note-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    padding: 30px;
}


.note-category-header {
    grid-column: 1 / -1;
    font-size: 24px;
    color: var(--accent-color);
    font-family: var(--font-pixel);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

.note-category-header:first-child {
    margin-top: 0;
}

.note-category-count {
    font-size: 0.7em;
    color: #8ab4f8;
    margin-left: 8px;
}

#app.portrait-mode .note-category-header {
    font-size: 32px;
    padding-bottom: 10px;
    margin-top: 25px;
    margin-bottom: 10px;
}




.note-card {
    position: relative;
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 3px solid rgba(55, 80, 155, 0.48);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.note-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.5), 0 4px 14px rgba(0, 0, 0, 0.5);
    border-color: var(--primary-color);
}

.note-card.undefeated {
    cursor: default;
}

/* ── カード内NEWバッジ ── */
.note-card-new-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff1744;
    color: white;
    font-family: var(--font-pixel);
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}

#app.portrait-mode .note-card-new-badge {
    font-size: 16px;
    padding: 3px 7px;
}

.note-card.undefeated:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
}

.note-load-more-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 8px 0 12px;
}

.note-load-more-btn {
    font-family: var(--font-pixel);
    font-size: 18px;
    padding: 10px 24px;
    border: 2px solid rgba(79, 172, 254, 0.55);
    border-radius: 10px;
    background: rgba(20, 40, 90, 0.92);
    color: #dbeafe;
    cursor: pointer;
}

.note-load-more-btn:active {
    transform: translateY(2px);
}

#app.portrait-mode .note-load-more-row {
    padding: 12px 0 18px;
}

#app.portrait-mode .note-load-more-btn {
    font-size: 28px;
    padding: 14px 36px;
}

.note-img-container {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

#app.portrait-mode .note-img-container {
    width: 120px;
    height: 120px;
}

.note-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* シルエット処理 */
.silhouette {
    filter: brightness(0);
    opacity: 0.7;
}

/* 未討伐・未登録の「？」プレースホルダ（本物の画像は読み込まない） */
.note-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: bold;
    color: #2b3445;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    opacity: 0.85;
    user-select: none;
    -webkit-user-select: none;
}

#app.portrait-mode .note-img-placeholder {
    font-size: 66px;
}

/* アイテムノート：登録済み */
.item-note-glow {}

.note-floor-label {
    font-size: 11px;
    color: #8ab4f8;
    text-align: center;
    margin-bottom: 2px;
    white-space: nowrap;
}

#app.portrait-mode .note-floor-label {
    font-size: 16px;
}

.note-limited-diff-badge {
    margin-top: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 6px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

#app.portrait-mode .note-limited-diff-badge {
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 14px;
}

.note-name {
    font-size: 14px;
    color: #e2e8f0;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#app.portrait-mode .note-name {
    font-size: 20px;
}

.note-detail-content {
    background: linear-gradient(145deg, #181f3c 0%, #0d1222 100%);
    border: 4px solid var(--primary-color);
    border-radius: 16px;
    padding: 30px;
    width: 400px;
    max-width: 90%;
    position: relative;
    box-shadow: 0 0 40px rgba(79, 172, 254, 0.45), 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#app.portrait-mode .note-detail-content {
    width: 600px;
    padding: 40px;
}

.note-detail-top {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#note-detail-img {
    max-width: 200px;
    max-height: 200px;
}

#app.portrait-mode #note-detail-img {
    max-width: 300px;
    max-height: 300px;
}

.note-detail-stats {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    font-size: 20px;
}

#app.portrait-mode .note-detail-stats {
    font-size: 28px;
    padding: 24px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border-color);
}

.stat-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* ============================================================
   難易度クリアバッジ
   ============================================================ */
.note-diff-badges {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.note-diff-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.diff-badge {
    color: #2a3050;
    font-size: 10px;
    flex-shrink: 0;
    line-height: 1;
}

.diff-badge.diff-bronze.cleared { color: #cd7f32; text-shadow: 0 0 4px rgba(205, 127, 50, 0.5); }
.diff-badge.diff-silver.cleared { color: #c0c0c0; text-shadow: 0 0 4px rgba(192, 192, 192, 0.5); }
.diff-badge.diff-malle.cleared   { color: #ffd700; text-shadow: 0 0 6px rgba(255, 215, 0, 0.7); }

.diff-stars {
    color: #556090;
    font-size: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.note-diff-row .diff-stars {
    min-width: 24px;
}

.diff-badge.diff-bronze.cleared ~ .diff-stars,
.diff-badge.diff-silver.cleared ~ .diff-stars,
.diff-badge.diff-malle.cleared   ~ .diff-stars {
    color: #8ab4f8;
}

.diff-time {
    color: #6a7590;
    font-size: 10px;
    white-space: nowrap;
}

.diff-badge.cleared ~ .diff-time {
    color: #e2e8f0;
}

#app.portrait-mode .note-diff-badges {
    gap: 4px;
    margin-top: 10px;
}

#app.portrait-mode .note-diff-row {
    font-size: 16px;
    gap: 6px;
}

#app.portrait-mode .diff-badge {
    font-size: 14px;
}

#app.portrait-mode .diff-stars {
    font-size: 14px;
}

#app.portrait-mode .note-diff-row .diff-stars {
    min-width: 36px;
}

#app.portrait-mode .diff-time {
    font-size: 14px;
}

/* ============================================================
   Note Progress (総合進捗)
   ============================================================ */
.note-progress-area {
    padding: 6px 20px 4px;
    flex-shrink: 0;
}

.note-progress-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.note-progress-text {
    font-family: var(--font-pixel);
    font-size: 18px;
    color: #e2e8f0;
}

.note-progress-pct {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: #8ab4f8;
}

.note-progress-bar-wrap {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.note-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    border-radius: 4px;
    transition: width 0.4s ease;
    width: 0%;
}

#app.portrait-mode .note-progress-area {
    padding: 8px 30px 6px;
}

#app.portrait-mode .note-progress-text {
    font-size: 26px;
}

#app.portrait-mode .note-progress-pct {
    font-size: 22px;
}

#app.portrait-mode .note-progress-bar-wrap {
    height: 12px;
}

/* ============================================================
   Note Genre Select (ジャンル選択)
   ============================================================ */
.note-genre-select {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

#app.portrait-mode .note-genre-select {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 30px;
}

.note-genre-btn {
    position: relative;
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 2px solid rgba(79, 172, 254, 0.4);
    border-radius: 14px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.note-genre-new-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff1744;
    color: white;
    font-family: var(--font-pixel);
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}

#app.portrait-mode .note-genre-new-badge {
    font-size: 16px;
    padding: 3px 7px;
    top: -8px;
    right: -8px;
}

.note-genre-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(79, 172, 254, 0.5);
    border-color: var(--primary-color);
}

.note-genre-btn:active {
    transform: scale(0.97);
}

.note-genre-label {
    font-family: var(--font-pixel);
    font-size: 20px;
    color: var(--accent-color);
    text-align: center;
}

#app.portrait-mode .note-genre-label {
    font-size: 28px;
}

.note-genre-count {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: #8ab4f8;
}

#app.portrait-mode .note-genre-count {
    font-size: 22px;
}

.note-genre-count-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-genre-medal {
    font-size: 16px;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    line-height: 1;
}

.note-genre-completed {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.2);
}

#app.portrait-mode .note-genre-medal {
    font-size: 22px;
}

/* カードリストビュー */
.note-card-view {
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.note-card-view-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#app.portrait-mode .note-card-view-header {
    padding: 16px 30px;
    gap: 24px;
}

.note-back-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s;
}

.note-back-btn img {
    display: block;
    width: auto;
    height: auto;
}

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

#app.portrait-mode .note-back-btn img {
    width: auto;
}

.note-current-category {
    font-family: var(--font-pixel);
    font-size: 28px;
    color: var(--accent-color);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

#app.portrait-mode .note-current-category {
    font-size: 40px;
}

#app.portrait-mode #note-grid {
    flex: 1;
    overflow-y: auto;
}

/* ============================================================
   アイテムノート タブ
   ============================================================ */
.item-note-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 14px 0;
    flex-shrink: 0;
}

.item-note-tab-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px 8px 0 0;
    border: 2px solid rgba(55, 80, 155, 0.5);
    border-bottom: none;
    background: rgba(30, 40, 80, 1);
    color: #a0aabf;
    font-family: var(--font-pixel);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.item-note-tab-btn:hover {
    background: rgba(40, 65, 120, 1);
    color: #c8d8f0;
}

.item-note-tab-btn.active {
    background: linear-gradient(180deg, #1e3a6e, #162a55);
    border-color: #ffd700;
    color: #ffd700;
}

#app.portrait-mode .item-note-tabs {
    padding: 16px 30px 0;
}

#app.portrait-mode .item-note-tab-btn {
    font-size: 34px;
    padding: 14px 0;
    border-radius: 10px 10px 0 0;
}

/* ============================================================
   Note Footer (バックアップ)
   ============================================================ */
.note-footer {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.note-footer-iphone-notice {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    margin: 0;
}

.note-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#app.portrait-mode .note-footer-buttons button {
    font-size: 24px !important;
    padding: 14px 10px !important;
    height: auto !important;
    width: 100%;
}

/* source: css/screens/monster-house.css */

/* ============================================================
   モンスターハウス画面
   ============================================================ */

/* ---- ハウス画面全体 ---- */
#app.portrait-mode #monster-house-screen {
    position: relative;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}

#app.portrait-mode #monster-house-screen .top-bg-img {
    opacity: 1;
}

/* ---- セリフバブル ---- */
#app.portrait-mode .mh-clerk-quote {
    position: absolute;
    top: calc(50% - 450px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 42px !important;
    width: 600px;
    max-width: 90%;
    min-height: 200px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-wrap;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    animation: none !important;
    /* .special-quote の specialQuoteFadeIn を打ち消す */
    background: rgba(0, 60, 120, 0.8);
}

/* ---- コンテンツエリア初期非表示 ---- */
#app.portrait-mode .mh-content-area.mh-hidden {
    display: none;
}

/* ---- 下部タブコンテナ ---- */
#app.portrait-mode .mh-bottom {
    padding-top: 0;
}

/* ---- コンテンツエリア ---- */
#app.portrait-mode .mh-content-area {
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.75);
    margin: 0 20px 10px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

#app.portrait-mode .mh-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#app.portrait-mode .mh-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ---- ソートバー ---- */
#app.portrait-mode .mh-sort-bar {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    flex-shrink: 0;
}

#app.portrait-mode .mh-sort-btn {
    font-family: var(--font-pixel);
    font-size: 26px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(30, 30, 80, 0.7);
    color: #ccc;
    cursor: pointer;
}

#app.portrait-mode .mh-sort-btn.active {
    background: rgba(0, 100, 200, 0.8);
    color: #fff;
    border-color: rgba(100, 180, 255, 0.6);
}

/* ---- モンスターカードグリッド ---- */
#app.portrait-mode .mh-monster-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

#app.portrait-mode .mh-monster-card {
    background: rgba(20, 30, 80, 0.85);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.1s;
    position: relative;
}

#app.portrait-mode .mh-monster-card:hover {
    border-color: rgba(100, 180, 255, 0.7);
}

#app.portrait-mode .mh-monster-card:active {
    transform: scale(0.96);
}

#app.portrait-mode .mh-monster-card.active-partner {
    border-color: #ff9500;
    background: rgba(60, 30, 0, 0.85);
}

#app.portrait-mode .mh-monster-card-img {
    width: 100%;
    height: 130px;
    object-fit: contain;
}

#app.portrait-mode .mh-monster-card-name {
    font-family: var(--font-pixel);
    font-size: 22px;
    color: #ddd;
    text-align: center;
    word-break: break-all;
}

#app.portrait-mode .mh-medal-badge {
    font-family: var(--font-pixel);
    font-size: 18px;
    background: rgba(255, 215, 0, 0.25);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 6px;
    padding: 2px 8px;
}

#app.portrait-mode .mh-partner-badge {
    font-family: var(--font-pixel);
    font-size: 18px;
    background: rgba(255, 149, 0, 0.3);
    color: #ff9500;
    border: 1px solid rgba(255, 149, 0, 0.5);
    border-radius: 6px;
    padding: 2px 8px;
}

/* ---- 詳細パネル ---- */
#app.portrait-mode .mh-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    gap: 16px;
    overflow-y: auto;
    position: relative;
}

#app.portrait-mode .mh-detail-img-wrapper {
    position: relative;
    display: inline-block;
}

#app.portrait-mode .mh-detail-partner-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-pixel);
    font-size: 30px;
    /* 元のサイズに戻す */
    background: rgba(255, 149, 0, 0.85);
    color: #fff;
    border: 2px solid rgba(255, 149, 0, 0.9);
    /* 元の2pxに戻す */
    border-radius: 10px;
    /* 元の10pxに戻す */
    padding: 6px 20px;
    /* 元に戻す */
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 10px rgba(255, 149, 0, 0.5);
    /* 元に戻す */
}

#app.portrait-mode .mh-detail-panel.mh-detail-panel--partner {
    border: 6px solid #ffd700;
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.4);
}

#app.portrait-mode .mh-monster-detail-img {
    width: 480px;
    /* 元のサイズに戻す */
    height: 480px;
    /* 元のサイズに戻す */
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-monster-detail-name {
    font-family: var(--font-pixel);
    font-size: 40px;
    /* 元のサイズに戻す */
    color: #fff;
    text-align: center;
}

#app.portrait-mode .mh-detail-medal-label {
    font-family: var(--font-pixel);
    font-size: 28px;
    /* 元のサイズに戻す */
    color: #ffd700;
    display: flex;
    align-items: center;
    gap: 12px;
    /* 元のサイズに戻す */
}

#app.portrait-mode .mh-detail-medal-label.mh-no-medal {
    color: #888;
}

#app.portrait-mode .mh-detail-medal-icon {
    width: 48px;
    /* 元のサイズに戻す */
    height: 48px;
    /* 元のサイズに戻す */
    object-fit: contain;
}

#app.portrait-mode .mh-detail-medal-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#app.portrait-mode .mh-detail-medal-large-icon {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

#app.portrait-mode .mh-detail-medal-large-icon.rarity-bronze {
    filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.9)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-detail-medal-large-icon.rarity-silver {
    filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.9)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-detail-medal-large-icon.rarity-gold {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1.0)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-detail-medal-large-icon.rarity-diamond {
    filter: drop-shadow(0 0 12px rgba(185, 242, 255, 1.0)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-detail-medal-effect-text {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: #7df;
    text-align: center;
}

#app.portrait-mode .mh-detail-medal-name {
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 4px;
}

#app.portrait-mode .mh-detail-divider {
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent);
    margin: 8px 0;
    border: none;
}

#app.portrait-mode .mh-detail-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 元の間隔に戻す（垂直だけ広げるならここも24もありだが一旦元に戻す） */
    width: 100%;
    max-width: 500px;
    /* 元の幅に戻す */
    margin: 0 auto;
}

#app.portrait-mode .mh-detail-btn {
    font-size: 32px;
    /* 元のサイズに戻す */
    padding: 16px 20px;
    /* 元のサイズに戻す */
}

#app.portrait-mode .mh-detail-buttons button {
    background: rgba(30, 40, 80, 1);
    border: 2px solid rgba(55, 80, 155, 0.8);
    border-radius: 10px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#app.portrait-mode .mh-detail-buttons button:active {
    background: rgba(20, 60, 120, 1);
    border-color: var(--primary-color);
    transform: translateY(2px);
}

/* ---- メダルカードグリッド ---- */
#app.portrait-mode .mh-medal-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

#app.portrait-mode .mh-medal-card {
    background: rgba(20, 30, 80, 0.85);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
}

#app.portrait-mode .mh-medal-card.equipped {
    border-color: #ffd700;
    background: rgba(50, 40, 0, 0.85);
}

#app.portrait-mode .mh-medal-card-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

#app.portrait-mode .mh-medal-card-img.rarity-bronze {
    filter: drop-shadow(0 0 6px rgba(205, 127, 50, 0.8)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-medal-card-img.rarity-silver {
    filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.8)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-medal-card-img.rarity-gold {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-medal-card-img.rarity-diamond {
    filter: drop-shadow(0 0 10px rgba(185, 242, 255, 1.0)) hue-rotate(var(--shiny-hue, 0deg));
}

#app.portrait-mode .mh-medal-card-name {
    font-family: var(--font-pixel);
    font-size: 20px;
    color: #ddd;
    text-align: center;
    word-break: break-all;
}

#app.portrait-mode .mh-medal-card-count {
    font-family: var(--font-pixel);
    font-size: 26px;
    color: #aaa;
}

#app.portrait-mode .mh-medal-equipped-badge {
    font-family: var(--font-pixel);
    font-size: 18px;
    background: rgba(255, 215, 0, 0.25);
    color: #ffd700;
    border-radius: 6px;
    padding: 2px 8px;
}

#app.portrait-mode .mh-load-more-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 10px 0 16px;
}

#app.portrait-mode .mh-load-more-btn {
    font-family: var(--font-pixel);
    font-size: 26px;
    padding: 12px 34px;
    border: 2px solid rgba(100, 180, 255, 0.6);
    border-radius: 10px;
    background: rgba(20, 40, 90, 0.92);
    color: #dbeafe;
    cursor: pointer;
}

#app.portrait-mode .mh-load-more-btn:active {
    transform: translateY(2px);
}

/* ---- メダル詳細オーバーレイ ---- */
#app.portrait-mode #mh-medal-detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

#app.portrait-mode #mh-medal-detail-overlay.active {
    display: flex;
}

#app.portrait-mode .mh-medal-detail-content {
    background: linear-gradient(135deg, #1a2444, #0d1222);
    border: 3px solid rgba(79, 172, 254, 0.5);
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 600px;
    max-width: 90%;
}

#app.portrait-mode .mh-medal-detail-img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

#app.portrait-mode .mh-medal-detail-name {
    font-family: var(--font-pixel);
    font-size: 38px;
    text-align: center;
}

#app.portrait-mode .mh-medal-detail-rarity,
#app.portrait-mode .mh-medal-detail-effect,
#app.portrait-mode .mh-medal-detail-count,
#app.portrait-mode .mh-medal-detail-equipped {
    font-family: var(--font-pixel);
    font-size: 28px;
    color: #ccc;
    text-align: center;
}

#app.portrait-mode .mh-medal-detail-equipped {
    color: #ffd700;
}

#app.portrait-mode .mh-medal-detail-effect {
    color: #7df;
}


/* ---- おわかれ確認ダイアログ ---- */
#mh-farewell-confirm-overlay .shop-msg-text {
    color: #fff;
    font-size: 42px;
    margin-bottom: 32px;
}

#mh-farewell-confirm-overlay .mh-farewell-confirm-buttons {
    margin-top: 0;
}

/* ---- おわかれタブ ---- */
#app.portrait-mode .mh-farewell-card {
    border-color: rgba(255, 80, 80, 0.4);
}

#app.portrait-mode .mh-farewell-card:hover {
    border-color: rgba(255, 80, 80, 0.8);
}

/* ---- 空メッセージ ---- */
#app.portrait-mode .mh-empty-msg {
    font-family: var(--font-pixel);
    font-size: 30px;
    color: #888;
    text-align: center;
    padding: 40px 20px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ---- もどるボタン ---- */
#app.portrait-mode .mh-back-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px;
    font-size: 30px;
    padding: 14px 20px;
    flex-shrink: 0;
}

/* ---- メダルサブパネルヘッダー ---- */
#app.portrait-mode .mh-medal-sub-header {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: #fff;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 12px;
}

/* ---- 捕獲フェード (未使用) ---- */
#capture-fade {
    display: none;
}

/* ---- 汎用通知バブル ---- */
.game-notification-bubble {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(0, 60, 120, 0.95);
    border: 6px solid rgba(79, 172, 254, 0.8);
    border-radius: 40px;
    padding: 48px 80px;
    font-family: var(--font-pixel);
    font-size: 38px;
    color: #fff;
    text-align: center;
    z-index: 300;
    line-height: 1.5;
    pointer-events: none;
}

.game-notification-bubble.active {
    display: block;
    animation: game-bubble-in 0.3s ease forwards;
}

@keyframes game-bubble-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(calc(-50% + 20px));
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%);
    }
}

/* ---- コンパニオンカットインオーバーレイ ---- */
.companion-cutin-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 100%;
    background: transparent;
    z-index: 10001;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 15%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.companion-cutin-overlay.active {
    opacity: 1;
}

/* メダルタイプ別背景画像（画面全体を覆う） */
.companion-cutin-overlay .companion-cutin-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    z-index: 0;
}

.companion-cutin-overlay .companion-cutin-bg.visible {
    display: block;
}

/* モンスター画像はウィンドウ外へ切り離してアニメーション */
.companion-cutin-overlay .companion-cutin-img {
    position: fixed;
    bottom: calc(15% + 240px);
    width: 810px;
    height: 810px;
    object-fit: contain;
    left: 50%;
    margin-left: -405px;
    z-index: 10002;
    transform: translateX(calc(-50vw - 500px));
    will-change: transform;
}

.companion-cutin-overlay.active .companion-cutin-img {
    animation: companion-img-slide 2.1s forwards;
}

@keyframes companion-img-slide {
    0% {
        transform: translateX(calc(50vw + 500px));
        animation-timing-function: ease-out;
    }

    15% {
        transform: translateX(80px);
        animation-timing-function: linear;
    }

    80% {
        transform: translateX(-80px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateX(calc(-50vw - 500px));
    }
}

.companion-cutin-overlay .companion-cutin-msg {
    font-family: var(--font-pixel);
    font-size: 52px;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    white-space: pre-wrap;
    position: relative;
    z-index: 1;
    background: rgba(0, 20, 60, 0.92);
    border: 6px solid rgba(79, 172, 254, 0.6);
    border-radius: 40px;
    padding: 40px 48px;
    width: 100%;
    box-sizing: border-box;
}

/* ---- バトル画面コンパニオンスロット ---- */
#companion-slot-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.companion-slot-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid rgba(255, 149, 0, 0.8);
    background: rgba(60, 30, 0, 0.5);
}

/* ---- コンパニオンレベル: Lvバッジ / EXPバー ---- */
#app.portrait-mode .mh-lv-badge {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 18px;
    line-height: 1;
    color: #cfe6ff;
    background: rgba(40, 80, 160, 0.85);
    border: 1px solid rgba(120, 180, 255, 0.7);
    border-radius: 6px;
    padding: 3px 8px;
    vertical-align: middle;
}

#app.portrait-mode .mh-monster-card .mh-lv-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
}

#app.portrait-mode .mh-lv-badge.mh-lv-max {
    color: #3a2a00;
    background: linear-gradient(180deg, #ffe27a, #ffc400);
    border-color: #fff3b0;
    box-shadow: 0 0 8px rgba(255, 200, 0, 0.7);
}

#app.portrait-mode .mh-monster-detail-name .mh-lv-badge,
#app.portrait-mode #battle-companion-detail .mh-lv-badge {
    font-size: 26px;
    padding: 4px 12px;
}

#app.portrait-mode .mh-exp-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80%;
    max-width: 420px;
}

#app.portrait-mode .mh-exp-bar {
    width: 100%;
    height: 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(120, 180, 255, 0.6);
    border-radius: 8px;
    overflow: hidden;
}

#app.portrait-mode .mh-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #4facfe, #6ee7ff);
    transition: width 0.3s ease;
}

#app.portrait-mode .mh-exp-label {
    font-family: var(--font-pixel);
    font-size: 18px;
    color: #bcd6ff;
}

#app.portrait-mode .mh-exp-label.mh-exp-max {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* ---- 詳細パネル: メダルスロット(最大2) / レベル倍率 ---- */
#app.portrait-mode .mh-detail-medal-slots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#app.portrait-mode .mh-detail-medal-x {
    font-family: var(--font-pixel);
    font-size: 18px;
    margin-left: 12px;
    padding: 4px 12px;
    border-radius: 6px;
}

#app.portrait-mode .mh-detail-mult-label {
    font-family: var(--font-pixel);
    font-size: 24px;
    color: #ffd700;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* source: css/screens/sticker.css */

/* ============================================================
   がんばりシール画面
   ============================================================ */

/* ── 画面レイアウト ── */
#sticker-screen {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#sticker-screen.active {
    display: flex;
}

/* ── 進捗バー ── */
.sticker-progress-wrap {
    padding: 10px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sticker-progress-bar-bg {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
}

.sticker-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffeb3b, #ff9800);
    border-radius: 6px;
    transition: width 0.4s ease;
}

.sticker-progress-text {
    font-size: 20px;
    color: #ffeb3b;
    text-align: right;
    font-family: var(--font-pixel);
}

#app.portrait-mode .sticker-progress-wrap {
    padding: 14px 30px 0;
}

#app.portrait-mode .sticker-progress-bar-bg {
    height: 16px;
}

#app.portrait-mode .sticker-progress-text {
    font-size: 26px;
}

/* ── カテゴリタブ ── */
.sticker-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.sticker-tabs::-webkit-scrollbar {
    display: none;
}

.sticker-tab-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    border: 2px solid rgba(55, 80, 155, 0.5);
    border-bottom: none;
    background: rgba(30, 40, 80, 1);
    color: #a0aabf;
    font-family: var(--font-pixel);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.sticker-tab-btn:hover {
    background: rgba(40, 65, 120, 1);
    color: #c8d8f0;
}

.sticker-tab-btn.active {
    background: linear-gradient(180deg, #1e3a6e, #162a55);
    border-color: #ffd700;
    color: #ffd700;
}

#app.portrait-mode .sticker-tab-btn {
    padding: 14px 20px;
    font-size: 34px;
    border-radius: 10px 10px 0 0;
}

/* ── グリッド ── */
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 20px;
    column-gap: 4px;
    padding: 14px 40px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    flex: 1;
    align-content: start;
}

#app.portrait-mode .sticker-grid {
    row-gap: 28px;
    column-gap: 5px;
    padding: 20px 60px;
}

/* ── セル ── */
.sticker-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* ── バッジラッパー（NEWバッジの基準点） ── */
.sticker-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── セル内NEWバッジ ── */
.sticker-cell-new-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff1744;
    color: white;
    font-family: var(--font-pixel);
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}

#app.portrait-mode .sticker-cell-new-badge {
    font-size: 16px;
    padding: 3px 7px;
}

/* ── 未取得シールの進捗 ── */
.sticker-cell-progress {
    width: 92px;
    min-height: 28px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: stretch;
    pointer-events: none;
}

.sticker-cell-progress-label {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: #b9c6e8;
    text-align: center;
    white-space: nowrap;
}

.sticker-cell-progress.close .sticker-cell-progress-label {
    color: #ffeb3b;
}

.sticker-cell-progress-bar-bg {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
}

.sticker-cell-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dd3fc, #22c55e);
}

.sticker-cell-progress.close .sticker-cell-progress-bar-fill {
    background: linear-gradient(90deg, #ffeb3b, #ff9800);
}

#app.portrait-mode .sticker-cell-progress {
    width: 126px;
    min-height: 40px;
    gap: 5px;
}

#app.portrait-mode .sticker-cell-progress-label {
    font-size: 17px;
}

#app.portrait-mode .sticker-cell-progress-bar-bg {
    height: 8px;
}

/* ── CSSシールバッジ ── */
.sticker-badge {
    --sticker-light: #ffeb3b;
    --sticker-dark: #ff9800;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--sticker-light), var(--sticker-dark));
    border: 3px solid white;
    box-shadow:
        0 0 0 2px var(--sticker-dark),
        0 3px 10px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    user-select: none;
    transition: transform 0.12s;
}

.sticker-cell:not(.locked):active .sticker-badge {
    transform: scale(0.93);
}

.sticker-badge.locked {
    filter: grayscale(1) opacity(0.35);
}

#app.portrait-mode .sticker-badge {
    width: 90px;
    height: 90px;
    font-size: 2.2rem;
}

/* ── 詳細オーバーレイ ── */
#sticker-detail-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

#sticker-detail-overlay.active {
    display: flex;
}

.sticker-detail-card {
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 3px solid rgba(100, 130, 220, 0.5);
    border-radius: 26px;
    padding: 39px 31px;
    width: 94%;
    max-width: 546px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.sticker-badge--large {
    width: 143px;
    height: 143px;
    font-size: 3.6rem;
    border-width: 5px;
    box-shadow:
        0 0 0 3px var(--sticker-dark),
        0 6px 18px rgba(0, 0, 0, 0.4);
}

.sticker-badge--large.locked {
    filter: grayscale(1) opacity(0.35);
}

#app.portrait-mode .sticker-badge--large {
    width: 182px;
    height: 182px;
    font-size: 4.4rem;
}

.sticker-detail-name {
    font-family: var(--font-pixel);
    font-size: 29px;
    color: #ffeb3b;
    text-align: center;
}

.sticker-detail-name.locked {
    color: #888;
}

.sticker-detail-desc {
    font-family: var(--font-pixel);
    font-size: 22px;
    color: #ccc;
    text-align: center;
    white-space: pre-wrap;
}

.sticker-detail-date {
    font-family: var(--font-pixel);
    font-size: 21px;
    color: #8ab4f8;
}

.sticker-detail-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(138, 180, 248, 0.35);
    font-family: var(--font-pixel);
}

.sticker-detail-progress.close {
    border-color: rgba(255, 235, 59, 0.65);
    background: rgba(255, 235, 59, 0.08);
}

.sticker-detail-progress-label {
    font-size: 22px;
    color: #8ab4f8;
    text-align: center;
}

.sticker-detail-progress.close .sticker-detail-progress-label {
    color: #ffeb3b;
}

.sticker-detail-progress-count {
    font-size: 20px;
    color: #fff;
}

.sticker-detail-progress-remaining {
    font-size: 21px;
    color: #ffeb3b;
    text-align: center;
}

.sticker-detail-progress-bar-bg {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
}

.sticker-detail-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dd3fc, #22c55e);
}

.sticker-detail-progress.close .sticker-detail-progress-bar-fill {
    background: linear-gradient(90deg, #ffeb3b, #ff9800);
}

#app.portrait-mode .sticker-detail-name {
    font-size: 36px;
}

#app.portrait-mode .sticker-detail-desc {
    font-size: 29px;
}

#app.portrait-mode .sticker-detail-date {
    font-size: 26px;
}

#app.portrait-mode .sticker-detail-progress {
    gap: 11px;
    padding: 16px 20px;
    border-radius: 18px;
}

#app.portrait-mode .sticker-detail-progress-label {
    font-size: 29px;
}

#app.portrait-mode .sticker-detail-progress-count {
    font-size: 26px;
}

#app.portrait-mode .sticker-detail-progress-remaining {
    font-size: 28px;
}

#app.portrait-mode .sticker-detail-progress-bar-bg {
    height: 14px;
}

.sticker-detail-close-btn {
    margin-top: 6px;
    padding: 13px 42px;
    border-radius: 24px;
    border: 2px solid #ffeb3b;
    background: rgba(255, 235, 59, 0.12);
    color: #ffeb3b;
    font-family: var(--font-pixel);
    font-size: 26px;
    cursor: pointer;
}

#app.portrait-mode .sticker-detail-close-btn {
    font-size: 34px;
    padding: 18px 57px;
}

/* ── 取得ポップアップ ── */
#sticker-popup {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-110%);
    z-index: 500;
    background: linear-gradient(135deg, #1d2748, #111830);
    border: 3px solid #ffeb3b;
    border-radius: 0 0 20px 20px;
    padding: 14px 24px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
    max-width: 90%;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    pointer-events: none;
    white-space: nowrap;
}

#sticker-popup.active {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.sticker-popup-badge {
    --sticker-light: #ffeb3b;
    --sticker-dark: #ff9800;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--sticker-light), var(--sticker-dark));
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--sticker-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.sticker-popup-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sticker-popup-title {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: #ffeb3b;
}

.sticker-popup-name {
    font-family: var(--font-pixel);
    font-size: 19px;
    color: #fff;
}

#app.portrait-mode .sticker-popup-title {
    font-size: 20px;
}

#app.portrait-mode .sticker-popup-name {
    font-size: 24px;
}

#app.portrait-mode .sticker-popup-badge {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
}

/* ── ノートハブ NEWバッジ ── */
.note-hub-new-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff1744;
    color: white;
    font-family: var(--font-pixel);
    font-size: 14px;
    padding: 2px 7px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 10;
}

#app.portrait-mode .note-hub-new-badge {
    font-size: 18px;
    padding: 3px 9px;
}

/* source: css/screens/strength.css */

/* ============================================================
   つよさ画面 (縦画面)
   仕様書: docs/つよさ画面仕様書.md
   ============================================================ */
#app.portrait-mode #strength-screen {
    padding: 0;
    position: relative;
    flex-direction: column;
}

#app.portrait-mode .strength-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 10px 24px 40px;
}

/* ── 総合ステータス ── */
#app.portrait-mode .strength-status-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 30px;
    background: rgba(10, 20, 60, 0.75);
    border: 2px solid rgba(80, 110, 210, 0.5);
    border-radius: 10px;
}

#app.portrait-mode .strength-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#app.portrait-mode .strength-status-label {
    font-family: var(--font-pixel);
    font-size: 34px;
    color: #a0aabf;
}

#app.portrait-mode .strength-status-value {
    font-family: var(--font-pixel);
    font-size: 40px;
    color: var(--accent-color);
}

/* ── セクション見出し ── */
#app.portrait-mode .strength-section-title {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: #c8d8f0;
    padding: 4px 6px;
    border-left: 8px solid #ffd700;
}

/* ── 四則別 レベル行 ── */
#app.portrait-mode .strength-op-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px;
}

#app.portrait-mode .strength-op-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name lv"
        "bar  bar"
        "num  num";
    gap: 6px 12px;
    padding: 16px 20px;
    background: linear-gradient(145deg, #1d2748, #111830);
    border: 2px solid rgba(80, 110, 210, 0.45);
    border-radius: 12px;
}

#app.portrait-mode .strength-op-name {
    grid-area: name;
    font-family: var(--font-pixel);
    font-size: 36px;
    color: #e8eefc;
}

#app.portrait-mode .strength-op-lv {
    grid-area: lv;
    font-family: var(--font-pixel);
    font-size: 34px;
    color: #ffd700;
    align-self: center;
}

#app.portrait-mode .strength-op-bar-bg {
    grid-area: bar;
    width: 100%;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
}

#app.portrait-mode .strength-op-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dd3fc, #22c55e);
    transition: width 0.3s ease;
}

#app.portrait-mode .strength-op-bar-fill.max {
    background: linear-gradient(90deg, #ffeb3b, #ff9800);
}

#app.portrait-mode .strength-op-num {
    grid-area: num;
    font-family: var(--font-pixel);
    font-size: 26px;
    color: #a0aabf;
    text-align: right;
}

/* けいさんシールはつよさ画面に表示しない（既存がんばりシール図鑑に統合） */

/* source: css/desktop-panels.css */

/* ============================================================
   PCワイド画面 サイドパネル（モバイル縦画面では非表示）
   ============================================================
   表示条件: 幅 1100px 以上
   #app (仮想800px) の左右余白に固定配置。
   #app の実際の幅 = min(100vw, 50vh) なので、
     - 左パネル: left=0 + width=calc(50%-min(50vw,25vh)) → 右端が #app 左端に一致
     - 右パネル: left=calc(50%+min(50vw,25vh)) + right=0 → 左端が #app 右端に一致
   ============================================================ */

.desktop-side-panel {
    display: none;
}

@media (min-width: 1100px) {

    /* ── 共通 ── */
    body.battle-active .desktop-side-panel {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        z-index: 1;
        pointer-events: none;
    }

    body.battle-active .desktop-left-panel {
        left: 0;
        width: calc(50% - min(50vw, 25vh));
        padding: 20px 12px 20px 16px;
        align-items: flex-end;
    }

    body.battle-active .desktop-right-panel {
        left: calc(50% + min(50vw, 25vh));
        right: 0;
        padding: 20px 16px 20px 12px;
        align-items: flex-start;
    }

    .desktop-panel-inner {
        pointer-events: auto;
        width: 100%;
        max-width: 280px;
        max-height: calc(100vh - 40px);
        background: linear-gradient(180deg, rgba(22, 30, 58, 0.97) 0%, rgba(10, 14, 32, 0.98) 100%);
        border: 2px solid rgba(55, 80, 160, 0.48);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ── 左パネル: モンスターじょうほう ── */
    .desktop-info-panel {
        padding: 18px 16px;
        gap: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(79, 172, 254, 0.3) transparent;
    }

    .desktop-info-panel::-webkit-scrollbar {
        width: 4px;
    }

    .desktop-info-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .desktop-info-panel::-webkit-scrollbar-thumb {
        background: rgba(79, 172, 254, 0.3);
        border-radius: 2px;
    }

    /* info-overlay.css の #app.portrait-mode スコープ外サイズを上書き */
    .desktop-info-panel .info-section-title {
        font-size: 13px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .desktop-info-panel .info-row {
        font-size: 13px;
        padding: 3px 0;
        gap: 8px;
    }

    .desktop-info-divider {
        height: 1px;
        width: 100%;
        background: var(--border-color);
        margin: 10px 0;
        flex-shrink: 0;
    }

    /* ── 右パネル: バトルログ ── */
    .desktop-message-panel {
        padding: 0;
    }

    .desktop-panel-header {
        font-family: var(--font-pixel);
        font-size: 12px;
        color: var(--primary-color);
        padding: 10px 14px 8px;
        border-bottom: 1px solid rgba(60, 88, 165, 0.45);
        background: linear-gradient(180deg, rgba(22, 32, 62, 0.70) 0%, rgba(7, 10, 24, 0.92) 100%);
        flex-shrink: 0;
        text-align: center;
        letter-spacing: 0.05em;
    }

    .desktop-message-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 12px;
        scrollbar-width: thin;
        scrollbar-color: rgba(79, 172, 254, 0.3) transparent;
        background: linear-gradient(180deg, rgba(4, 8, 22, 0.98) 0%, rgba(3, 5, 16, 0.99) 100%);
        box-shadow: inset 0 0 20px rgba(0, 20, 80, 0.25);
        /* panel-section--message と同じ border-color */
        border-top: 1px solid rgba(80, 120, 230, 0.55);
    }

    .desktop-message-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .desktop-message-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .desktop-message-scroll::-webkit-scrollbar-thumb {
        background: rgba(79, 172, 254, 0.3);
        border-radius: 2px;
    }

    /* ── 問題一覧ログ ── */
    .desktop-problem-log {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .desktop-problem-entry {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 6px;
        padding: 2px 0;
        font-family: var(--font-pixel);
        font-size: 24px;
        font-weight: bold;
        line-height: 1.4;
    }

    .desktop-problem-text {
        flex: 1;
        color: #c8d4f0;
        word-break: break-all;
    }

    .desktop-problem-result {
        flex-shrink: 0;
        width: 1em;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
    }

    .desktop-problem-result.correct {
        color: var(--success-color);
        text-shadow: 0 0 6px rgba(0, 230, 118, 0.5);
    }

    .desktop-problem-result.wrong {
        color: var(--danger-color);
        text-shadow: 0 0 6px rgba(255, 75, 75, 0.5);
    }

    /* モンスター切り替え時の区切り線 */
    .desktop-log-separator {
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(79, 172, 254, 0.4) 30%,
            rgba(160, 220, 255, 0.7) 50%,
            rgba(79, 172, 254, 0.4) 70%,
            transparent 100%);
        margin: 5px 0 3px;
        flex-shrink: 0;
    }
}