:root {
            --bg: #2E3440; --text: #D8DEE9; --work: #88C0D0; --break: #A3BE8C;
            --accent: #EBCB8B; --panel: #3B4252; --btn: #4C566A; --danger: #BF616A;
            --success: #A3BE8C; --item-bg: #434C5E; --font: 'Helvetica Neue', Arial, sans-serif;
        }
        body.theme-cyberpunk {
            --bg: #0b0c10; --text: #00ffcc; --work: #f0f; --break: #00ffcc;
            --accent: #ff0055; --panel: #1f2326; --btn: #333; --danger: #ff0055;
            --success: #00ffcc; --item-bg: #111; --font: 'Courier New', Courier, monospace;
        }
        body.theme-retro {
            --bg: #0000aa; --text: #fff; --work: #ffcc00; --break: #00ff00;
            --accent: #ff5555; --panel: #000; --btn: #5555ff; --danger: #ff5555;
            --success: #00ff00; --item-bg: #000055; --font: 'Press Start 2P', monospace;
        }
        body.theme-retro input, body.theme-retro button { font-family: 'Press Start 2P', monospace; font-size: 0.7rem; }

        /* 🕰️ 究極のニキシー管テーマ (Nixie Tube) */
        body.theme-nixie {
            --bg: #120c0a; --text: #ffaa55; --work: #ff5500; --break: #ffaa00;
            --accent: #ffcc00; --panel: #1e1512; --btn: #4a2511; --danger: #ff2200;
            --success: #aaee00; --item-bg: #2a1b16; --font: 'Courier New', Courier, monospace;
        }

        body.theme-nixie #timerText {
            font-size: 100px; /* PC用基準サイズ */
            font-weight: normal; margin: 20px 0; background: none; border: none; text-shadow: none; text-align: center;
        }
        @media (max-width: 600px) { body.theme-nixie #timerText { font-size: 50px; } }

        /* ★ ニキシー管のインライン化 (他の数字への適用) */
        body.theme-nixie .nixie-inline {
            display: inline-flex; gap: 0.1em; align-items: center; vertical-align: middle;
            font-size: 1.4em; /* 周りのテキストより少し大きく表示 */
            line-height: 1;
        }
        body.theme-nixie #timerText .nixie-inline { font-size: 1em; /* タイマーは親のサイズをそのまま使う */ }

        /* ★ 文字発光 (グロウ) エフェクト */
        body.theme-nixie .level-text,
        body.theme-nixie .daily-goal,
        body.theme-nixie .xp-text,
        body.theme-nixie .multiplayer-panel {
            font-family: 'Quicksand', sans-serif;
            color: #fff256 !important;
            text-shadow: 0 0 2px #d45424, 0 0 5px #d45424, 0 0 10px #d45524 !important;
        }
        body.theme-nixie .online-count { text-shadow: none !important; }

        /* Vueから移植したCSS基盤 */
        .nixie_tube {
            font-family: 'Quicksand', sans-serif; color: #fff256;
            text-shadow: 0 0 0.05em #d45424, 0 0 0.05em #d45424, 0 0 0.05em #d45524,
                         0 0 0.1em #d45424, 0 0 0.1em #d45424, 0 0 0.1em #d45524,
                         0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524,
                         0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524,
                         0 0.05em 0.01em #000;
            position: relative; display: inline-block; width: 0.6em; height: 1.2em;
        }
        .nixie_tube.colon { width: 0.3em; }

        .light_up_wire { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8, 1.0); z-index: 3; }
        .nixie_wire { color: #34241c; text-shadow: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8, 1.0); }
        .nixie_glass { width: 0.55em; height: 1.2em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; background: radial-gradient(transparent 60%, #aa3315); border-radius: 0.15em; pointer-events: none; z-index: 4; }
        .nixie_cap { width: 0.6em; height: 0.2em; position: absolute; top: -0.1em; left: 50%; transform: translateX(-50%); background: linear-gradient(transparent 40%, #aa5d31 70%, #111 80%), linear-gradient(to top left, #111 60%, #444 80%); border-radius: 0.08em 0.08em 0.02em 0.02em; z-index: 5; }
        .nixie_buttom { width: 0.6em; height: 0.2em; position: absolute; top: 1.1em; left: 50%; transform: translateX(-50%); background: linear-gradient(to top, transparent 40%, #aa5d31 70%, #111 80%), linear-gradient(to top left, #111 60%, #444 80%); border-radius: 0.02em 0.02em 0.08em 0.08em; z-index: 5; }

        .nixie-fadein { animation: nixiefadein linear 0.2s forwards; }
        .nixie-fadeout { animation: nixiefadeout linear 0.2s forwards; z-index: 2; }

        @keyframes nixiefadein { 0% { color: #34241c; text-shadow: none; } 100% { color: #fff256; text-shadow: 0 0 0.05em #d45424, 0 0 0.05em #d45424, 0 0 0.05em #d45524, 0 0 0.1em #d45424, 0 0 0.1em #d45424, 0 0 0.1em #d45524, 0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524, 0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524, 0 0.05em 0.01em #000; } }
        @keyframes nixiefadeout { 0% { color: #fff256; text-shadow: 0 0 0.05em #d45424, 0 0 0.05em #d45424, 0 0 0.05em #d45524, 0 0 0.1em #d45424, 0 0 0.1em #d45424, 0 0 0.1em #d45524, 0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524, 0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524, 0 0.05em 0.01em #000; } 100% { color: #34241c; text-shadow: none; } }
        /* ------------------------------------------- */

        *, *::before, *::after { box-sizing: border-box; }
        input { max-width: 100%; }

        body {
            font-family: var(--font); background-color: var(--bg); color: var(--text);
            margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center;
            transition: background-color 0.3s, color 0.3s;
        }

        .container { width: 100%; max-width: 600px; }
        .panel {
            background-color: var(--panel); padding: 20px; border-radius: 10px;
            margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.5); text-align: center;
            border: 1px solid var(--btn);
        }

        .status-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 8px; }
        .level-text { font-size: 1.2rem; font-weight: bold; color: var(--accent); }
        .xp-container { flex-grow: 1; margin: 0 15px; background: #222; height: 20px; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid var(--btn); }
        .xp-bar { background: var(--work); height: 100%; width: 0%; transition: width 0.5s ease-out; }
        .xp-text { position: absolute; width: 100%; text-align: center; top: 2px; font-size: 0.7rem; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; }
        
        .active-buffs-container { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; min-height: 24px; }
        .buff-badge { background-color: var(--accent); color: #000; font-size: 0.7rem; font-weight: bold; padding: 3px 8px; border-radius: 12px; display: flex; align-items: center; gap: 5px; animation: pulse 2s infinite; }
        .mult-text { font-size: 0.85rem; color: var(--work); font-weight: bold; margin-bottom: 10px; }
        
        @keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.9; } }
        @keyframes fieroFlash { 0% { background-color: var(--work); transform: scale(1.05); } 100% { background-color: var(--panel); transform: scale(1); } }
        .fiero { animation: fieroFlash 0.5s ease-out; }

        .auth-panel { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; }
        #userInfo { font-weight: bold; font-size: 0.9rem; color: var(--text); }
        #authBtn { margin: 0; padding: 8px 15px; font-size: 0.9rem; background-color: var(--work); }

        #statusText { font-size: 1.5rem; font-weight: bold; color: var(--work); }
        
        /* ニキシー管以外のテーマ用タイマーCSS */
        body:not(.theme-nixie) #timerText { font-size: 5rem; font-weight: bold; margin: 10px 0; font-variant-numeric: tabular-nums; transition: color 0.3s, text-shadow 0.3s; }
        
        .daily-goal { font-size: 1.2rem; color: var(--accent); font-weight: bold; margin-bottom: 15px; }
        
        button {
            background-color: var(--btn); color: #fff; border: none; padding: 10px 20px;
            font-size: 1rem; font-weight: bold; border-radius: 5px; cursor: pointer;
            transition: 0.2s; margin: 5px; font-family: var(--font);
        }
        button:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-2px); }
        button:active:not(:disabled) { transform: translateY(0); }
        button:disabled { opacity: 0.5; cursor: not-allowed; background-color: #222; }
        #startBtn.running { background-color: var(--danger); }

        .action-btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 15px; }
        .btn-powerup { background-color: var(--success); font-size: 0.75rem; padding: 8px; flex: 1 1 45%; }
        .btn-badguy { background-color: var(--accent); color: #000; font-size: 0.75rem; padding: 8px; flex: 1 1 100%; }

        .task-header { color: var(--accent); font-weight: bold; text-align: left; margin-bottom: 10px; border-bottom: 1px solid var(--btn); padding-bottom: 5px; display: flex; justify-content: space-between;}
        .task-input-area { display: flex; gap: 10px; margin-bottom: 10px; }
        input[type="text"], input[type="number"], select {
            background-color: var(--bg); color: var(--text); border: 1px solid var(--btn);
            padding: 8px; border-radius: 4px; outline: none; width: 100%; box-sizing: border-box; font-family: var(--font);
        }
        .task-input-area input { flex: 1; }
        ul { list-style: none; padding: 0; margin: 0; text-align: left; max-height: 150px; overflow-y: auto; }
        li { background-color: var(--item-bg); padding: 10px; border-radius: 5px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
        .task-actions button { padding: 5px 10px; font-size: 0.8rem; margin: 0 0 0 5px; }
        .btn-complete { background-color: var(--success); color: var(--bg); }
        .btn-delete { background-color: var(--danger); }
        
        .hide-non-boss li:nth-child(n+2) { display: none; }

        .stats-area { font-size: 0.9rem; line-height: 1.6; text-align: center; }
        .video-container { margin-top: 15px; border-radius: 8px; overflow: hidden; background-color: #000; min-height: 200px; position: relative;}
        #workVideo, #breakVideo { width: 100%; height: 250px; border: none; }

        .settings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; text-align: left; margin-top: 10px; }
        .settings-grid div { display: flex; flex-direction: column; min-width: 0; }
        .settings-grid label { font-size: 0.8rem; margin-bottom: 4px; color: var(--text); opacity: 0.8; }
        .full-width { grid-column: span 3; }
        input:disabled { opacity: 0.5; cursor: not-allowed; }

        .multiplayer-panel { background: rgba(0,0,0,0.3); border: 1px dashed var(--accent); padding: 15px; border-radius: 8px; margin-top: 20px; }
        .online-count { font-size: 1.5rem; font-weight: bold; color: var(--danger); text-shadow: 0 0 5px var(--danger); }

        @media (max-width: 600px) {
            body { padding: 10px; }
            .auth-panel { flex-direction: column; gap: 10px; } 
            body:not(.theme-nixie) #timerText { font-size: 3.5rem; } 
            .settings-grid { grid-template-columns: 1fr; }
            .full-width { grid-column: span 1; }
            .task-input-area { flex-direction: column; }
            .task-input-area button { padding: 12px; }
            .task-actions button { padding: 8px 12px; font-size: 1rem; }
        }
        
        /* ------------------------------------------- */
        /* ★ MMO用 2カラムレイアウト追加 */
        .layout-wrapper { 
            display: flex; gap: 20px; width: 100%; max-width: 1000px; 
            align-items: flex-start; justify-content: center;
        }
        .main-column { flex: 1; max-width: 600px; width: 100%; }
        .side-column { width: 350px; flex-shrink: 0; }
        
        @media (max-width: 900px) { 
            .layout-wrapper { flex-direction: column; align-items: center; } 
            .side-column { width: 100%; max-width: 600px; } 
        }
        /* ------------------------------------------- */

        .article-wrapper { width: 100%; max-width: 800px; margin: 40px auto 0; }
        .content-box { background-color: var(--panel); border: 1px solid var(--btn); border-radius: 8px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); text-align: left; }
        .article-title { font-size: 1.8rem; margin: 10px 0 20px; color: var(--text); border-bottom: 2px solid var(--work); padding-bottom: 10px; }
        .article-body p { line-height: 1.8; font-size: 1.1rem; margin-bottom: 20px; color: var(--text); }
        .article-body h3 { font-size: 1.4rem; margin: 30px 0 15px; border-left: 5px solid var(--work); padding-left: 10px; color: var(--text); }
        .affiliate-btn { display: block; text-align: center; background-color: var(--accent); color: #000; padding: 15px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: opacity 0.2s; margin-top: 20px; }