/* ==========================================
   PianoWorks Theme Definition (theme.css)
   ========================================== */

/* ==========================================
   ★ 画面スケール用ラッパー
   1366×768を「設計上の画面」として固定し、実際の画面サイズに
   応じてJS側（main.js）が transform: translate(...) scale(...) を
   動的に設定する。この要素は常に transform を持つため、内部の
   position:fixed 要素は本物の画面ではなく、この枠を基準に配置される。
   ========================================== */
#app-scale-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 1366px;
    height: 768px;
    transform-origin: top left;
    /* 初期表示時（JS適用前）に一瞬でも崩れて見えないよう、
       ロード時点で妥当なデフォルト値を入れておく。実際の値はJSが上書きする。 */
    transform: translate(0px, 0px) scale(1);
}

/* ==========================================
   ★ スマートフォン等からのアクセスをブロックするモーダル
   ========================================== */
#mobile-block-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 6, 3, 0.96);
    z-index: 99999999; /* 何よりも確実に最前面 */
    display: none; /* JS側で該当時のみ flex に切り替え */
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.mobile-block-content {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 92vw;
    background: linear-gradient(135deg, #3d2b1f 0%, #261a12 100%);
    border: 2px solid #634a35;
    border-radius: 10px;
    padding: 22px 26px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.7);
}

.mobile-block-image {
    width: 96px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.mobile-block-text {
    font-family: 'Kiwi Maru', serif;
    color: #e0d0b0;
    font-size: 15px;
    line-height: 1.8;
}

:root {
    /* --- Colors: Wood & Ink (木材とインク) --- */
    --color-wood-dark: #1a1005;            /* 焦げ茶・インク色 */
    --color-wood-frame: #3e2712;           /* 枠組みの木材 */
    --color-wood-gradient-start: rgba(50, 35, 25, 0.98);
    --color-wood-gradient-end: rgba(25, 15, 10, 0.99);

    /* --- Colors: Gold & Brass (金と真鍮) --- */
    --color-gold-antique: rgba(210, 180, 140, 0.95); /* くすんだ金 */
    --color-gold-bright: #d4af37;                    /* 明るい金 */
    --color-gold-glow: rgba(212, 175, 55, 0.4);
    
    /* --- Colors: Accent (アクセント) --- */
    --color-accent-red: rgba(180, 40, 80, 0.95);     /* ホバー時の赤 */

    /* --- Fonts --- */
    --font-brand: 'Lobster', cursive;
    --font-serif: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* --- Shared Effects (共通エフェクト) --- */
    --shadow-stamp: -1px -1px 0px rgba(0, 0, 0, 0.9), 
                    1px 1px 0px rgba(255, 255, 255, 0.5);
    --shadow-inset-soft: inset 1px 1px 2px rgba(0, 0, 0, 0.7);
    --shadow-inset-deep: inset 3px 3px 6px rgba(0, 0, 0, 0.9);
    --blur-modal: blur(4px);
}

/* ============================================================
   PianoWorks Global Theme & Variables
   ============================================================ */

:root {
    /* --- Settings Button Layout --- */
    --settings-btn-top: 20px;
    --settings-btn-right: 20px;
    --settings-btn-size: 42px;

    /* --- Session Mode Layout --- */
    --session-controls-left: 75px;
    --session-controls-top: 58%;
    --session-gap: 18px;
    --session-btn-width: 95px;
    
    /* 既存の変数がある場合はここに追加・統合 */
    --brass-color: #b5a642;
    --brass-light: #ffdf7e;
    --brass-shadow: rgba(0, 0, 0, 0.6);
}

/* --- Global Scrollbar Style --- */
.scroll-container::-webkit-scrollbar {
    width: 6px;
}
.scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.scroll-container::-webkit-scrollbar-thumb {
    background: var(--brass-color);
    border-radius: 3px;
}

/* --- Shared Animations --- */

/* 録音中のパルス点滅 */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ファイル名の横スクロール */
@keyframes scroll-text {
    0% { transform: translateX(var(--container-width, 200px)); } 
    100% { transform: translateX(-100%); } 
}