/* === THEMES — 5 Varianten, jede bemerkenswert === */

/* 1. Tropeninsel (Default) — warm, einladend, Sommer */
:root, [data-theme="tropical"] {
    --bg: #87CEEB;
    --header-bg: linear-gradient(135deg, #2C3E50, #34495E);
    --toolbar-bg: linear-gradient(135deg, #F39C12, #E67E22);
    --palette-bg: linear-gradient(180deg, #1ABC9C, #16A085);
    --stats-bg: linear-gradient(180deg, #8E44AD, #7D3C98);
    --canvas-bg: #3498DB;
    --accent: #27AE60;
    --accent-light: #D5F5E3;
    --text: #2C3E50;
    --text-light: white;
    --btn-bg: white;
    --font-heading: 'Fredoka', 'Comic Sans MS', cursive;
    --font-body: 'Comic Neue', 'Segoe UI', sans-serif;
}

/* 2. Nachtmodus — das Neinhorn liebt es */
[data-theme="night"] {
    --bg: #1a1a2e;
    --header-bg: linear-gradient(135deg, #16213e, #0f3460);
    --toolbar-bg: linear-gradient(135deg, #533483, #3d1d72);
    --palette-bg: linear-gradient(180deg, #1a1a2e, #16213e);
    --stats-bg: linear-gradient(180deg, #0f3460, #1a1a2e);
    --canvas-bg: #16213e;
    --accent: #e94560;
    --accent-light: #2d1f3d;
    --text: #eee;
    --text-light: #e0e0e0;
    --btn-bg: #2d1f3d;
}

/* 3. Candy Pop — neon, wild, Tommy-approved */
[data-theme="candy"] {
    --bg: #ff6b9d;
    --header-bg: linear-gradient(135deg, #c44dff, #ff6b9d);
    --toolbar-bg: linear-gradient(135deg, #ffd93d, #ff6b6b);
    --palette-bg: linear-gradient(180deg, #6bcb77, #4ec5c1);
    --stats-bg: linear-gradient(180deg, #c44dff, #ff6b9d);
    --canvas-bg: #ffd93d;
    --accent: #6bcb77;
    --accent-light: #e8f8e8;
    --text: #2d1f3d;
    --text-light: white;
    --btn-bg: white;
}

/* 4. Ozean — ruhig, Elefant-approved */
[data-theme="ocean"] {
    --bg: #0077b6;
    --header-bg: linear-gradient(135deg, #023e8a, #0077b6);
    --toolbar-bg: linear-gradient(135deg, #00b4d8, #0096c7);
    --palette-bg: linear-gradient(180deg, #023e8a, #0077b6);
    --stats-bg: linear-gradient(180deg, #03045e, #023e8a);
    --canvas-bg: #0096c7;
    --accent: #00b4d8;
    --accent-light: #caf0f8;
    --text: #03045e;
    --text-light: #caf0f8;
    --btn-bg: #caf0f8;
}

/* 5. Retro Pixel — 8-bit Vibes, SpongeBob-Edition */
[data-theme="retro"] {
    --bg: #306230;
    --header-bg: linear-gradient(135deg, #0f380f, #306230);
    --toolbar-bg: linear-gradient(135deg, #8bac0f, #9bbc0f);
    --palette-bg: linear-gradient(180deg, #0f380f, #306230);
    --stats-bg: linear-gradient(180deg, #0f380f, #306230);
    --canvas-bg: #9bbc0f;
    --accent: #8bac0f;
    --accent-light: #e0f8d0;
    --text: #0f380f;
    --text-light: #e0f8d0;
    --btn-bg: #e0f8d0;
}

/* 6. Neon — Cyberpunk, leuchtende Konturen, dunkler Hintergrund */
[data-theme="neon"] {
    --bg: #0d0d0d;
    --header-bg: linear-gradient(135deg, #0d0d0d, #1a0033);
    --toolbar-bg: linear-gradient(135deg, #1a0033, #00001a);
    --palette-bg: linear-gradient(180deg, #1a0033, #0d0d0d);
    --stats-bg: linear-gradient(180deg, #00001a, #1a0033);
    --canvas-bg: #0a0a1a;
    --accent: #00ffff;
    --accent-light: #001a1a;
    --text: #e0e0ff;
    --text-light: #00ffff;
    --btn-bg: #1a0033;
}

/* 7. Sakura — Japanische Kirschblüten, Rosa/Weiß-Palette */
[data-theme="sakura"] {
    --bg: #fce4ec;
    --header-bg: linear-gradient(135deg, #880e4f, #ad1457);
    --toolbar-bg: linear-gradient(135deg, #f48fb1, #f06292);
    --palette-bg: linear-gradient(180deg, #ad1457, #c2185b);
    --stats-bg: linear-gradient(180deg, #880e4f, #ad1457);
    --canvas-bg: #fce4ec;
    --accent: #e91e63;
    --accent-light: #fce4ec;
    --text: #4a0026;
    --text-light: #fff8fa;
    --btn-bg: #fff0f5;
}

/* 8. Arctic — Eisblau/Weiß, Schnee-Ästhetik, kalte Töne */
[data-theme="arctic"] {
    --bg: #e8f4fd;
    --header-bg: linear-gradient(135deg, #0d47a1, #1565c0);
    --toolbar-bg: linear-gradient(135deg, #90caf9, #64b5f6);
    --palette-bg: linear-gradient(180deg, #0d47a1, #1565c0);
    --stats-bg: linear-gradient(180deg, #01579b, #0d47a1);
    --canvas-bg: #bbdefb;
    --accent: #29b6f6;
    --accent-light: #e1f5fe;
    --text: #0d47a1;
    --text-light: #e3f2fd;
    --btn-bg: #e1f5fe;
}

/* 9. Dschungel — Tiefes Grün, erdige Töne, dichter Wald */
[data-theme="jungle"] {
    --bg: #2d5a27;
    --header-bg: linear-gradient(135deg, #1b3a1a, #2d5a27);
    --toolbar-bg: linear-gradient(135deg, #8b6914, #a67c1a);
    --palette-bg: linear-gradient(180deg, #1b3a1a, #2d5a27);
    --stats-bg: linear-gradient(180deg, #3e2723, #4e342e);
    --canvas-bg: #4caf50;
    --accent: #ffb300;
    --accent-light: #e8f5e9;
    --text: #1b3a1a;
    --text-light: #e8f5e9;
    --btn-bg: #e8f5e9;
}

/* 10. Vulkan — Dunkle Lava-Töne, dramatisch aber kindgerecht */
[data-theme="volcano"] {
    --bg: #4a1a1a;
    --header-bg: linear-gradient(135deg, #3e1010, #5d1a1a);
    --toolbar-bg: linear-gradient(135deg, #e65100, #ff6d00);
    --palette-bg: linear-gradient(180deg, #3e1010, #4a1a1a);
    --stats-bg: linear-gradient(180deg, #bf360c, #3e1010);
    --canvas-bg: #6d3a3a;
    --accent: #ff9100;
    --accent-light: #3e1010;
    --text: #ffe0b2;
    --text-light: #ffccbc;
    --btn-bg: #5d1a1a;
}

/* 11. Eiskristall — Eisblau, Weiß, Frost-Feeling */
[data-theme="ice"] {
    --bg: #e0f2f9;
    --header-bg: linear-gradient(135deg, #4fc3f7, #29b6f6);
    --toolbar-bg: linear-gradient(135deg, #b3e5fc, #81d4fa);
    --palette-bg: linear-gradient(180deg, #0288d1, #0277bd);
    --stats-bg: linear-gradient(180deg, #4fc3f7, #29b6f6);
    --canvas-bg: #e1f5fe;
    --accent: #00b0ff;
    --accent-light: #e0f7fa;
    --text: #01579b;
    --text-light: #e1f5fe;
    --btn-bg: #ffffff;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body, 'Comic Neue', 'Segoe UI', sans-serif);
    background: var(--bg);
    overflow: hidden;
    height: 100vh;
}

/* === REGENBOGEN HINTERGRUND === */
#rainbow-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 2s ease;
    background:
        radial-gradient(ellipse 120% 60% at 50% 110%,
            transparent 40%,
            rgba(148, 0, 211, 0.08) 41%,
            transparent 42%,
            transparent 43%,
            rgba(75, 0, 130, 0.08) 44%,
            transparent 45%,
            transparent 46%,
            rgba(0, 0, 255, 0.08) 47%,
            transparent 48%,
            transparent 49%,
            rgba(0, 255, 0, 0.08) 50%,
            transparent 51%,
            transparent 52%,
            rgba(255, 255, 0, 0.08) 53%,
            transparent 54%,
            transparent 55%,
            rgba(255, 127, 0, 0.08) 56%,
            transparent 57%,
            transparent 58%,
            rgba(255, 0, 0, 0.08) 59%,
            transparent 60%
        );
}

#rainbow-bg.rainbow-visible {
    opacity: 1;
}

#rainbow-bg.rainbow-hidden {
    opacity: 0;
}

/* === INTRO OVERLAY === */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #87CEEB 0%, #4DB8E8 40%, #F4D03F 70%, #E8C84A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: introFadeIn 0.3s ease-out;
}

/* Big Bang: 1D Singularität — schwarzer Hintergrund */
#intro-overlay.bigbang-phase-singularity {
    background: #000;
}

#intro-overlay.bigbang-phase-singularity .intro-content {
    background: transparent;
    box-shadow: none;
    color: #fff;
    z-index: 2;
    position: relative;
}

#intro-overlay.bigbang-phase-singularity .intro-content h1 {
    color: #fff;
    font-size: 64px;
    animation: singularityPulse 2s ease-in-out infinite;
}

#intro-overlay.bigbang-phase-singularity .intro-subtitle {
    color: rgba(255,255,255,0.5);
}

/* Roter Knopf — Symmetriebrechung */
.bigbang-red-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff4444, #cc0000, #880000);
    border: 4px solid rgba(255,255,255,0.2);
    color: transparent;
    font-size: 40px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: redBtnPulse 2s ease-in-out infinite;
}

.bigbang-red-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(255,0,0,0.6), inset 0 -4px 8px rgba(0,0,0,0.3);
}

.bigbang-red-btn:active {
    transform: scale(0.95);
}

@keyframes redBtnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,0,0,0.3), inset 0 -4px 8px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 0 40px rgba(255,0,0,0.6), inset 0 -4px 8px rgba(0,0,0,0.3); }
}

/* === UNIVERSUM-MODUS — dunkler Raum, nur Teilchen === */
body.universe-mode {
    background: #000 !important;
}

body.universe-mode #game-canvas {
    background: #050510 !important;
}

body.universe-mode .sidebar {
    background: rgba(5, 5, 16, 0.95) !important;
    color: #aaa;
}

body.universe-mode .toolbar {
    background: rgba(5, 5, 16, 0.95) !important;
}

/* Im Universum: Crafting-Grid verstecken */
body.universe-mode #craft-tab-content {
    display: none !important;
}

/* Im Universum: nur Tao + Teilchen in Palette */
body.universe-mode .material-btn:not([data-material="tao"]):not([data-material="charm"]):not([data-material="strange"]):not([data-material="antimatter"]):not([data-material="electron"]):not([data-material="muon"]):not([data-material="tau"]):not([data-base="true"]) {
    display: none !important;
}

/* Teilchen-Zähler Styling */
#particle-counter {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(232, 180, 248, 0.15);
}

@keyframes singularityPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

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

#intro-overlay.hiding {
    animation: introFadeOut 0.3s ease-in forwards;
}

@keyframes introFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.1); }
}

.intro-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 36px 48px;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 560px;
}

.intro-emoji {
    font-size: 80px;
    margin-bottom: 10px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.intro-content h1 {
    font-family: var(--font-heading, 'Fredoka', cursive);
    font-size: 32px;
    color: #2C3E50;
    margin-bottom: 20px;
}

.intro-characters {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 36px;
    margin: 16px 0;
    animation: introCharsWave 3s ease-in-out infinite;
}

.intro-characters span {
    display: inline-block;
    cursor: help;
    transition: transform 0.2s;
}

.intro-characters span:hover {
    transform: scale(1.4) rotate(10deg);
}

.intro-characters span:nth-child(1) { animation: introCharBounce 2s 0s infinite; }
.intro-characters span:nth-child(2) { animation: introCharBounce 2s 0.15s infinite; }
.intro-characters span:nth-child(3) { animation: introCharBounce 2s 0.3s infinite; }
.intro-characters span:nth-child(4) { animation: introCharBounce 2s 0.45s infinite; }
.intro-characters span:nth-child(5) { animation: introCharBounce 2s 0.6s infinite; }
.intro-characters span:nth-child(6) { animation: introCharBounce 2s 0.75s infinite; }

@keyframes introCharBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.intro-story {
    font-size: 20px;
    color: #34495E;
    margin-bottom: 16px;
    line-height: 1.5;
}

#player-name-input {
    font-size: 22px;
    padding: 10px 20px;
    border: 3px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    color: white;
    text-align: center;
    margin-top: 16px;
    width: 220px;
    letter-spacing: 1px;
}

#player-name-input::placeholder {
    color: rgba(255,255,255,0.6);
    font-size: 15px;
}

#player-name-input:focus {
    border-color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.25);
}

#start-button {
    font-size: 32px;
    padding: 20px 56px;
    background: linear-gradient(135deg, #F39C12, #F1C40F);
    color: white;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    margin-top: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(241, 196, 15, 0.5);
    animation: startButtonPulse 1.5s ease-in-out infinite;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@keyframes startButtonPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(241, 196, 15, 0.5); }
    50% { box-shadow: 0 4px 28px rgba(241, 196, 15, 0.9), 0 0 40px rgba(241, 196, 15, 0.3); }
}

#start-button:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.6);
}

#start-button:active {
    transform: scale(0.96);
}

/* === GAME CONTAINER === */
#game-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: padding-right 0.25s ease;
}

body.chat-open #game-container {
    padding-right: 320px;
}

/* === HEADER === */
header {
    background: var(--header-bg);
    color: var(--text-light);
    text-align: center;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

header h1 {
    font-family: var(--font-heading, 'Fredoka', cursive);
    font-size: 24px;
    letter-spacing: 1px;
}

.donate-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    background: none;
    border: none;
    opacity: 0.6;
    transition: opacity 0.2s;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.donate-btn:hover { opacity: 1; }

/* Donation Modal */
.donate-modal-box {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 18px;
    padding: 28px 24px 24px;
    max-width: 360px;
    width: 90%;
    color: #fff;
    position: relative;
    text-align: center;
    font-family: inherit;
}
.donate-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.donate-modal-close:hover { color: #fff; }
.donate-tiers {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.donate-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    text-decoration: none;
    color: #fff;
    flex: 1;
    transition: background 0.15s, border-color 0.15s;
}
.donate-tier:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }
.donate-tier-highlight {
    border-color: #f0a500;
    background: rgba(240,165,0,0.12);
}
.donate-tier-highlight:hover { background: rgba(240,165,0,0.22); }
.donate-tier-icon { font-size: 26px; }
.donate-tier-amount { font-size: 17px; font-weight: 700; }
.donate-tier-label { font-size: 11px; opacity: 0.6; }

/* === TOOLBAR === */
#toolbar {
    background: var(--toolbar-bg);
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.08);
}

.toolbar-group + .toolbar-group {
    margin-left: 8px;
}

.tool-btn {
    font-family: var(--font-body);
    font-size: 22px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    background: var(--btn-bg);
    color: var(--text);
    font-weight: bold;
}

.tool-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tool-btn:active {
    transform: scale(0.92);
}

.tool-btn.active {
    border-color: var(--text);
    background: var(--accent-light);
    box-shadow: 0 0 0 2px var(--accent);
}

/* Overflow-Menü für zusätzliche Toolbar-Buttons */
.toolbar-overflow {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(30,20,50,0.95);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 300px;
}
.toolbar-overflow.open { display: flex; }

/* Action-Buttons haben gleiche Größe wie Tool-Buttons */
.action-btn {
    font-family: var(--font-body);
    font-size: 22px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    background: var(--btn-bg);
    color: var(--text);
    font-weight: bold;
}

.action-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.action-btn:active {
    transform: scale(0.92);
}

#project-name {
    font-size: 16px;
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    background: white;
    color: #2C3E50;
    width: 180px;
    font-weight: bold;
}

#project-name::placeholder {
    color: #95A5A6;
}

/* === MAIN AREA === */
#main-area {
    display: flex;
    flex: 1;
    overflow: auto; /* Iso 64×64 Canvas kann größer als Viewport sein */
}

/* === PALETTE === */
#palette {
    width: 120px;
    background: var(--palette-bg);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.recent-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#genesis-badge {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.95);
    padding: 4px 6px;
    white-space: nowrap;
    cursor: default;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
}

#discovery-counter {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    white-space: nowrap;
    cursor: default;
    letter-spacing: 0.3px;
}


.recent-btn {
    min-height: 40px !important;
    padding: 4px !important;
    flex: 0 0 auto;
}

.recent-btn .mat-emoji {
    font-size: 20px;
}

#palette h2 {
    color: white;
    font-size: 14px;
    text-align: center;
    margin-bottom: 4px;
}

.material-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.85);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    min-height: 84px;
}

.material-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.material-btn:active {
    transform: scale(0.94);
}

.material-btn.active {
    border-color: var(--text);
    background: var(--accent-light);
    box-shadow: 0 0 0 2px var(--accent);
}

.material-btn.craft-locked {
    display: flex;
    opacity: 0.4;
    cursor: not-allowed;
}


.material-btn.craft-unlocked {
    display: flex;
    opacity: 1;
    animation: unlockPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes unlockPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* 道 Ursprung — vor den 5 Elementen */
.material-btn[data-material="tao"]   { background: #808080; color: #fff; }
.material-btn[data-material="yin"]   { background: #1A1A1A; color: #fff; }
.material-btn[data-material="yang"]  { background: #F0F0F0; color: #222; }
.material-btn[data-material="qi"]    { background: #FFD700; color: #222; }

/* 五行 Wu Xing — 5 Grundelemente mit traditionellen Farben */
.material-btn[data-material="wood"]  { background: #1A7A4A; color: #fff; } /* 青 Qing — Grün+Blau */
.material-btn[data-material="fire"]  { background: #CC2222; color: #fff; }
.material-btn[data-material="earth"] { background: #F5C800; color: #222; }
.material-btn[data-material="metal"] { background: #D0D0D0; color: #222; border-color: #aaa; }
.material-btn[data-material="water"] { background: #0D1B4A; color: #fff; }

.material-btn[data-material="tao"].active,
.material-btn[data-material="yin"].active,
.material-btn[data-material="yang"].active,
.material-btn[data-material="qi"].active,
.material-btn[data-material="wood"].active,
.material-btn[data-material="fire"].active,
.material-btn[data-material="earth"].active,
.material-btn[data-material="metal"].active,
.material-btn[data-material="water"].active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #333;
    border-color: transparent;
    filter: brightness(1.15);
}

.mat-emoji {
    font-size: 64px;
    line-height: 1;
}


/* === CANVAS === */
#canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--canvas-bg);
    position: relative;
    overflow: hidden;
}

/* Iso-Modus: Canvas größer als Viewport → Scrollen erlauben */
body.iso-mode #canvas-wrapper {
    overflow: auto;
    align-items: flex-start;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}

#game-canvas {
    cursor: crosshair;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

/* === STATS === */
#stats {
    width: 180px;
    background: var(--stats-bg);
    padding: 14px;
    color: white;
    overflow-y: auto;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

/* Sidebar Tabs */
.sidebar-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 2px;
}

.sidebar-tab {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    opacity: 0.5;
    transition: all 0.2s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-tab.active {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.sidebar-tab:hover {
    opacity: 0.8;
}

.sidebar-tab.tab-flash {
    animation: tab-pulse 0.4s ease-in-out 3;
}

@keyframes tab-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; background: rgba(255, 215, 0, 0.4); }
}

.sidebar-panel {
    display: none;
}

.sidebar-panel.active {
    display: block;
}

#stats h2 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

#stats-content p {
    font-size: 13px;
    margin-bottom: 6px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.stat-count {
    font-weight: bold;
    font-size: 15px;
}

/* === LOAD DIALOG === */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.dialog-overlay.hidden {
    display: none;
}

.dialog-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    min-width: 350px;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dialog-content h2 {
    text-align: center;
    margin-bottom: 16px;
    color: #2C3E50;
}

.saved-project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #ECF0F1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.saved-project-item:hover {
    background: #D5F5E3;
    transform: scale(1.02);
}

.saved-project-name {
    font-weight: bold;
    font-size: 16px;
    color: #2C3E50;
}

.saved-project-date {
    font-size: 12px;
    color: #7F8C8D;
}

.saved-project-delete {
    background: #E74C3C;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.15s;
}

.saved-project-delete:hover {
    transform: scale(1.1);
}

.no-projects {
    text-align: center;
    color: #95A5A6;
    font-size: 16px;
    padding: 20px;
}

#close-load-dialog {
    display: block;
    margin: 16px auto 0;
}

/* === TOAST === */
#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #2C3E50;
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 600;
    pointer-events: none;
    animation: toastIn 0.3s ease-out;
}

#toast.hidden {
    display: none;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === OFFLINE FLÜSTER-MODUS (#57) === */
body.offline-whisper {
    filter: saturate(0.6) brightness(0.9);
    transition: filter 0.8s ease;
}

/* === ANIMATIONS === */
@keyframes pop {
    0% { transform: scale(0.5); opacity: 0.5; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* === MOBILE: iPhone SE (< 768px) === */
@media (max-width: 767px) {
    body {
        overflow: auto;
        height: auto;
    }

    #game-container {
        height: auto;
        min-height: 100vh;
    }

    header h1 {
        font-size: 16px;
    }

    header {
        padding: 6px 10px;
    }

    /* Toolbar: eine Zeile, scrollbar */
    #toolbar {
        padding: 6px 8px;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #toolbar::-webkit-scrollbar {
        display: none;
    }

    .toolbar-section {
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 4px;
    }

    .toolbar-label {
        display: none;
    }

    .tool-btn, .action-btn {
        font-size: 20px;
        padding: 8px 12px;
        white-space: nowrap;
        min-width: 44px;
        min-height: 44px;
    }

    /* Nur Icons auf Mobile, Text weg */
    .action-btn {
        font-size: 0;
    }
    .action-btn::before {
        font-size: 22px;
    }
    #save-btn { font-size: 0; }
    #save-btn::after { content: '💾'; font-size: 22px; }
    #load-btn { font-size: 0; }
    #load-btn::after { content: '📂'; font-size: 22px; }
    #new-btn { font-size: 0; }
    #new-btn::after { content: '🆕'; font-size: 22px; }
    #postcard-btn { font-size: 0; }
    #postcard-btn::after { content: '📸'; font-size: 22px; }

    #project-name {
        width: 80px;
        font-size: 12px;
        padding: 4px 6px;
    }

    /* Hauptbereich: vertikal stacken */
    #main-area {
        flex-direction: column;
        overflow: auto;
    }

    /* Palette: horizontal, scrollbar */
    #palette {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #palette::-webkit-scrollbar {
        display: none;
    }

    #palette h2 {
        display: none;
    }

    /* Stats: auf Mobile versteckt — Canvas ist King */
    #stats {
        display: none;
    }

    /* Header: minimal */
    header {
        padding: 4px 8px;
    }

    header h1 {
        font-size: 14px;
    }

    /* Palette: kompakter */
    .material-btn {
        min-height: 64px;
        min-width: 64px;
        padding: 4px;
    }

    .mat-emoji {
        font-size: 48px;
        line-height: 1;
    }

    /* Canvas: maximale Fläche */
    #canvas-wrapper {
        min-height: 0;
        padding: 2px;
    }

    #game-canvas {
        width: 100% !important;
        height: auto !important;
    }

    /* Toast: schmaler Banner am oberen Rand — über Header, nie über Buttons/Canvas */
    #toast {
        font-size: 11px;
        padding: 4px 12px;
        bottom: auto;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        transform: none;
        border-radius: 0;
        text-align: center;
        opacity: 0.9;
        z-index: 1100;
    }

    /* Intro: kleiner auf Handy */
    .intro-content {
        padding: 24px 20px;
        margin: 10px;
    }

    .intro-emoji {
        font-size: 50px;
    }

    .intro-content h1 {
        font-size: 22px;
    }

    .intro-story {
        font-size: 16px;
    }

    #start-button {
        font-size: 26px;
        padding: 16px 40px;
    }

    /* Lade-Dialog: volle Breite */
    .dialog-content {
        min-width: auto;
        width: 90vw;
        padding: 16px;
    }
}

/* === TABLET (768px - 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    #palette {
        width: 100px;
    }

    #stats {
        width: 150px;
    }

    .material-btn {
        min-height: 52px;
        padding: 6px;
    }
}

/* === ACHIEVEMENT POPUP === */
.achievement-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #F1C40F, #F39C12);
    color: #2C3E50;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(243, 156, 18, 0.5);
    z-index: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement-popup.show {
    transform: translateX(-50%) translateY(0);
}

.ach-emoji {
    font-size: 36px;
}

/* === QUEST DISPLAY (im Stats-Panel) === */
.stats-section-title {
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.quest-item {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.quest-done {
    color: #2ECC71;
    text-decoration: line-through;
}

.quest-todo {
    color: #F9E79F;
}

.no-quests {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 8px;
}

/* === ACHIEVEMENT LIST (im Stats-Panel) === */
.ach-badge {
    display: inline-block;
    font-size: 20px;
    margin: 2px;
    cursor: help;
    transition: transform 0.2s;
}

.ach-badge:hover {
    transform: scale(1.3);
}

.ach-locked {
    filter: grayscale(100%);
    opacity: 0.3;
}

/* === BLUEPRINTS — 4×4 Baupläne === */
.blueprint-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 4px 8px 8px;
    margin: 0;
}

.blueprint-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    border: 2px solid transparent;
}

.blueprint-item:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.02);
}

.blueprint-item.blueprint-active {
    border-color: rgba(52, 152, 219, 0.8);
    background: rgba(52, 152, 219, 0.15);
}

.blueprint-item.blueprint-done {
    border-color: rgba(39, 174, 96, 0.4);
}

.blueprint-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.blueprint-emoji {
    font-size: 20px;
}

.blueprint-check {
    margin-left: auto;
    font-size: 14px;
}

.blueprint-item small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    display: block;
    margin-bottom: 6px;
}

/* 4×4 Mini-Grid Preview */
.bp-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    max-width: 120px;
    margin: 4px auto 0;
}

.bp-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    min-height: 24px;
}

.bp-cell.bp-empty {
    background: rgba(0, 0, 0, 0.15);
}

/* Blueprint Spark Animation (reuses merge-spark base) */
.blueprint-spark {
    animation-duration: 1.2s !important;
    background: radial-gradient(circle, #F39C12, #E67E22, transparent) !important;
}

/* === TOKEN DISPLAY (Rede-Energie — nicht Muscheln!) === */
#token-budget-display {
    display: block;
}

.token-display {
    text-align: center;
    font-size: 11px;
    color: #64b5f6;
    background: rgba(30, 60, 100, 0.5);
    border-top: 1px solid rgba(100, 181, 246, 0.2);
    padding: 4px 8px;
    font-weight: bold;
}

/* === MUSCHELN-VERMÖGEN (Handelswährung — nicht Rede-Energie!) === */
.inv-shell-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(249,168,37,0.15), rgba(255,193,7,0.08));
    border: 1px solid rgba(249,168,37,0.35);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
}
.inv-shell-label {
    color: rgba(255,255,255,0.6);
    font-size: 10px;
    letter-spacing: 0.5px;
}
.inv-shell-amount {
    color: #f9a825;
    font-weight: 700;
    font-size: 13px;
}

/* === NPC CHAT === */
#chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2C3E50, #34495E);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    z-index: 399;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

#chat-bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body.chat-open #chat-bubble {
    display: none;
}

#chat-panel {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    right: 0;
    width: 320px;
    /* Defensive: nie breiter als Viewport (Tesla/PWA/Split-Screen-Guard) */
    max-width: 100vw;
    height: calc(100vh - 52px - env(safe-area-inset-top, 0px));
    background: white;
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    z-index: 400;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(0);
    transition: transform 0.25s ease;
}

#chat-panel.hidden {
    transform: translateX(100%);
}

#chat-header {
    background: linear-gradient(135deg, #2C3E50, #34495E);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#chat-character {
    flex: 1 1 auto;
    min-width: 0; /* ohne das kann flex-item nicht unter min-content shrinken → drückt Close-Btn raus */
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.9);
    color: #2C3E50;
    cursor: pointer;
}

/* Doppelte Info: select zeigt schon Emoji+Namen. Span nur für Screen-Reader. */
.chat-npc-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Settings button: nur im Code-View sichtbar */
#chat-settings-btn {
    display: none;
}

body.code-view-active #chat-settings-btn {
    display: block;
}

#chat-settings-btn, #chat-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0; /* Nie kleiner als 44px. Nie aus dem Panel gedrückt. */
    display: flex;
    align-items: center;
    justify-content: center;
}

#chat-settings-btn:hover, #chat-close-btn:hover {
    opacity: 1;
}

#chat-messages {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-msg.user {
    align-self: flex-end;
    background: #D5F5E3;
    color: #2C3E50;
    border-bottom-right-radius: 4px;
}

.chat-msg.npc {
    align-self: flex-start;
    background: #EBF5FB;
    color: #2C3E50;
    border-bottom-left-radius: 4px;
}

.chat-msg.system {
    align-self: center;
    background: #FDEBD0;
    color: #7D6608;
    font-size: 12px;
    text-align: center;
}

.chat-msg.loading {
    align-self: flex-start;
    background: #EBF5FB;
    color: #95A5A6;
    font-style: italic;
}

#chat-input-area {
    padding: 8px 12px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
}

#chat-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    transition: border-color 0.2s;
}

#chat-input:focus {
    border-color: #27AE60;
}

#chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #27AE60;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s;
}

#chat-send-btn:hover {
    transform: scale(1.1);
}

#chat-send-btn:disabled {
    background: #95A5A6;
    cursor: not-allowed;
}

/* Chat auf Mobile */
@media (max-width: 767px) {
    #chat-bubble {
        width: 48px;
        height: 48px;
        font-size: 24px;
        bottom: 16px;
        right: 16px;
    }

    #chat-panel {
        top: calc(48px + env(safe-area-inset-top, 0px));
        right: 0;
        left: auto;
        width: 92vw;
        max-width: 340px;
        height: calc(100dvh - 48px - env(safe-area-inset-top, 0px));
        max-height: calc(70vh - env(safe-area-inset-top, 0px));
        border-radius: 16px 0 0 16px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #chat-messages {
        max-height: calc(70vh - 140px);
    }

    #chat-input-area {
        position: sticky;
        bottom: 0;
        background: white;
    }
}

/* Chat auf sehr kleinen Screens (iPhone SE portrait) */
@media (max-width: 399px) {
    #chat-panel {
        width: 100vw;
        max-width: none;
        border-radius: 0;
    }

    .chat-msg {
        font-size: 13px;
    }

    #chat-input {
        font-size: 13px;
    }

    #chat-character {
        font-size: 13px;
    }
}

/* === 4K / HiDPI (> 2560px) === */
@media (min-width: 2560px) {
    header h1 {
        font-size: 32px;
    }

    .tool-btn, .action-btn {
        font-size: 20px;
        padding: 12px 20px;
    }

    #palette {
        width: 180px;
    }

    .mat-emoji {
        font-size: 72px;
        line-height: 1;
    }

    #stats {
        width: 240px;
    }

    #stats-content p {
        font-size: 16px;
    }
}

/* ============================================================
   === INVENTAR ===
   ============================================================ */
#inventory-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.inv-item {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
}

.inv-item:active { cursor: grabbing; }

.inv-item.dragging {
    opacity: 0.4;
    transform: scale(0.9);
}

.inv-item.drop-target,
.inv-item.tap-selected,
.material-btn.drop-target-palette {
    box-shadow: 0 0 0 3px #F1C40F, 0 0 12px rgba(241, 196, 15, 0.5);
    transform: scale(1.1);
}

.inv-emoji {
    font-size: 18px;
}

.inv-count {
    font-weight: bold;
    color: #F9E79F;
    font-size: 13px;
}

.inv-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 4px;
}

.craft-open-btn {
    width: 100%;
    margin-top: 8px;
    text-align: center;
    font-size: 14px !important;
}

/* ============================================================
   === CRAFTING DIALOG ===
   ============================================================ */
.crafting-content {
    max-width: 680px !important;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
}

.crafting-layout {
    display: flex;
    gap: 16px;
    margin: 12px 0;
    align-items: flex-start;
}

.crafting-left {
    flex: 1;
    min-width: 120px;
}

.crafting-left h3,
.crafting-right h3 {
    font-size: 13px;
    margin-bottom: 6px;
    color: #555;
}

.craft-inventory {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.craft-inv-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
}

.craft-inv-item:hover {
    background: #e0e0e0;
}

.craft-inv-item.selected {
    background: #D4EFDF;
    outline: 2px solid #27AE60;
}

.craft-inv-item .inv-emoji {
    font-size: 20px;
}

.craft-inv-item .inv-label {
    flex: 1;
}

.craft-inv-item .inv-count {
    color: #555;
    font-weight: bold;
}

.craft-hint {
    font-size: 11px;
    color: #999;
    margin-top: 8px;
    line-height: 1.3;
}

.craft-hints {
    margin: 12px 0 4px 0;
    padding: 10px 14px;
    background: rgba(255, 220, 80, 0.12);
    border: 1px dashed #f0c040;
    border-radius: 10px;
    font-size: 13px;
}


.craft-hint-line {
    margin: 3px 0;
    font-size: 18px;
    letter-spacing: 2px;
}

.craft-hint-empty {
    margin: 0;
    color: #999;
    font-size: 13px;
}

.crafting-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crafting-grid {
    display: grid;
    grid-template-columns: repeat(3, 56px);
    grid-template-rows: repeat(3, 56px);
    gap: 4px;
}

.craft-slot {
    width: 56px;
    height: 56px;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.craft-slot:hover {
    background: #e8e8e8;
    border-color: #aaa;
}

.craft-slot.filled {
    background: #D5F5E3;
    border: 2px solid #27AE60;
}

.craft-emoji {
    font-size: 28px;
}

.craft-arrow {
    font-size: 28px;
}

.craft-result-box {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #FEF9E7, #FCF3CF);
    border: 3px solid #F1C40F;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.craft-question {
    font-size: 28px;
    color: #ccc;
}

.craft-result-count {
    font-size: 11px;
    font-weight: bold;
    color: #8B6914;
}

.craft-result-name {
    font-size: 10px;
    font-weight: bold;
    color: #8B6914;
    text-align: center;
    line-height: 1.1;
}

.craft-preview-label {
    font-size: 9px;
    font-weight: bold;
    color: #E67E22;
    animation: pulse-hint 1s ease infinite;
}

.craft-done-label {
    font-size: 10px;
    font-weight: bold;
    color: #27AE60;
}

.craft-result-box.has-recipe {
    border-color: #E67E22;
    background: linear-gradient(135deg, #FEF9E7, #FDEBD0);
}

.craft-success {
    border-color: #27AE60 !important;
    background: linear-gradient(135deg, #EAFAF1, #D5F5E3) !important;
    animation: craft-bounce 0.5s ease;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes craft-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    50%  { transform: scale(0.9); }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.craft-flyer {
    position: fixed;
    font-size: 32px;
    z-index: 2000;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: craft-fly 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes craft-fly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    50%  { opacity: 1; transform: translate(calc(-50% + var(--fly-dx) * 0.5), calc(-50% + var(--fly-dy) * 0.5 - 30px)) scale(1.2); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--fly-dx)), calc(-50% + var(--fly-dy))) scale(0.5); }
}

.crafting-right {
    flex: 1;
    min-width: 140px;
}

.recipe-book {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.recipe-entry {
    font-size: 12px;
    padding: 4px 6px;
    background: rgba(241, 196, 15, 0.1);
    border-radius: 6px;
    line-height: 1.3;
}

.crafting-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    background: white;
    padding: 8px 0;
}

.crafting-actions .action-btn {
    width: auto;
    padding: 8px 16px;
    font-size: 16px;
    gap: 4px;
}

/* Mobile: Crafting vertikal stapeln */
@media (max-width: 767px) {
    .crafting-layout {
        flex-direction: column;
        align-items: center;
    }

    .crafting-left,
    .crafting-right {
        width: 100%;
    }

    .crafting-center {
        flex-direction: column;
    }

    .craft-arrow {
        transform: rotate(90deg);
    }

    .crafting-grid {
        grid-template-columns: repeat(3, 48px);
        grid-template-rows: repeat(3, 48px);
    }

    .craft-slot {
        width: 48px;
        height: 48px;
    }
}

/* === iPhone Portrait (Hochkant) — max-width 768px === */
@media (orientation: portrait) and (max-width: 768px) {
    /* Hauptlayout: von horizontal zu vertikal */
    #main-area {
        flex-direction: column;
    }

    /* Palette: horizontal scrollbar oben statt vertikal links */
    #palette {
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 8px;
        gap: 4px;
        order: -1; /* Palette über Canvas */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Palette-Buttons: 68x68px — touch-freundlich, doppelte Emoji-Größe */
    #palette .material-btn {
        min-width: 68px;
        min-height: 68px;
        flex-shrink: 0;
    }

    /* Canvas nimmt volle Breite */
    #canvas-wrapper {
        width: 100%;
        flex: 1;
        min-height: 0;
    }

    #game-canvas {
        max-width: 100%;
        max-height: 100%;
    }

    /* Stats: jetzt sichtbar unten, kompakt */
    #stats {
        width: 100%;
        max-height: 200px;
        padding: 10px;
        overflow-y: auto;
        display: block;
        box-shadow: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    #stats h2 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    #stats-content p {
        font-size: 12px;
    }
}

.genesis-hint {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    text-align: center;
    animation: pulse 2s ease-in-out infinite;
    margin: 4px 0;
}

/* Tao-Button pulsiert golden bis zum ersten Klick */
.material-btn[data-material="tao"]:not(.active):not(.tao-clicked) {
    animation: tao-glow 1.5s ease-in-out infinite;
    border-radius: 12px;
}

@keyframes tao-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(241, 196, 15, 0.3); }
    50% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.8), 0 0 40px rgba(241, 196, 15, 0.3); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* === AUTOMERGE ANIMATION === */
.merge-spark {
    position: absolute;
    pointer-events: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 70%);
    animation: mergeSpark 0.6s ease-out forwards;
    z-index: 100;
}

@keyframes mergeSpark {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.merge-spark.triplet {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(192,192,192,0.4) 40%, rgba(255,215,0,0) 70%);
    animation: mergeSparkTriplet 0.8s ease-out forwards;
}

/* S100: Photon-Blitz bei H-Bildung — gelber Lichtblitz */
.merge-spark.atom-photon {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(255,255,100,1) 0%, rgba(255,215,0,0.7) 30%, rgba(255,180,0,0) 70%);
    animation: atomPhoton 0.8s ease-out forwards;
}

@keyframes atomPhoton {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    30% {
        transform: scale(1.8);
        opacity: 1;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

/* S101: Blackhole-Einsaug — dunkler Strudel zur Mitte */
.merge-spark.blackhole-eat {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, rgba(10,10,40,0.9) 0%, rgba(40,20,80,0.5) 40%, rgba(80,40,140,0) 75%);
    animation: blackholeEat 0.9s ease-in forwards;
}

@keyframes blackholeEat {
    0% {
        transform: scale(1.8) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.1) rotate(360deg);
        opacity: 0;
    }
}

/* S101: Hawking-Rückgabe — weißer Blitz */
.merge-spark.hawking-flash {
    width: 46px;
    height: 46px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(220,220,255,0.8) 30%, rgba(180,180,255,0) 70%);
    animation: hawkingFlash 0.6s ease-out forwards;
}

@keyframes hawkingFlash {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }
    40% {
        transform: scale(2.2);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes mergeSparkTriplet {
    0% {
        transform: scale(0.3) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(2) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(3) rotate(360deg);
        opacity: 0;
    }
}

/* === GENESIS REPLAY === */
.genesis-replay-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.genesis-replay-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 70vh;
    color: white;
    font-family: 'Fredoka', sans-serif;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
}

.genesis-replay-modal h2 {
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 20px;
}

.genesis-timeline {
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px 0;
}

.genesis-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 6px 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border-left: 3px solid #FFD700;
    animation: genesisStepIn 0.6s ease-out;
}

.genesis-time {
    font-size: 12px;
    color: rgba(255, 215, 0, 0.7);
    min-width: 45px;
    font-variant-numeric: tabular-nums;
}

.genesis-icon {
    font-size: 18px;
    min-width: 80px;
    text-align: center;
}

.genesis-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
}

.genesis-replay-close {
    display: block;
    margin: 20px auto 0;
    padding: 10px 30px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.genesis-replay-close:hover {
    background: rgba(255, 215, 0, 0.4);
}

@keyframes genesisStepIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === TUTORIAL-PULS — bis zum ersten Block === */
@keyframes canvas-beckon {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(255,215,0,0.7), 0 4px 24px rgba(0,0,0,0.4); }
}

#game-canvas.tutorial-pulse {
    animation: canvas-beckon 1.2s ease-in-out infinite;
}

/* === APPLE HIG #9: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === DARK MODE — Apple HIG #8: Respect prefers-color-scheme === */
/* Falls der User kein Theme manuell gewählt hat, folgt das Spiel dem OS-Setting */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme-manual]) {
        --bg: #1a1a2e;
        --header-bg: linear-gradient(135deg, #16213e, #0f3460);
        --toolbar-bg: linear-gradient(135deg, #533483, #3d1d72);
        --palette-bg: linear-gradient(180deg, #1a1a2e, #16213e);
        --stats-bg: linear-gradient(180deg, #0f3460, #1a1a2e);
        --canvas-bg: #16213e;
        --accent: #e94560;
        --accent-light: #2d1f3d;
        --text: #eee;
        --text-light: #e0e0e0;
        --btn-bg: #2d1f3d;
    }
}

/* === ACCESSIBILITY — :focus-visible for keyboard navigation (WCAG AA) === */
.tool-btn:focus-visible,
.action-btn:focus-visible,
.material-btn:focus-visible,
.sidebar-tab:focus-visible,
.avatar-btn:focus-visible,
.craft-slot:focus-visible,
#start-button:focus-visible,
#chat-send-btn:focus-visible,
#chat-settings-btn:focus-visible,
#chat-close-btn:focus-visible,
#chat-bubble:focus-visible,
#api-key-toggle:focus-visible,
#api-key-save:focus-visible,
#api-key-close:focus-visible,
.saved-project-delete:focus-visible {
    outline: 2px solid #27AE60;
    outline-offset: 2px;
}

#player-name-input:focus-visible,
#project-name:focus-visible,
#chat-input:focus-visible,
#api-key-input:focus-visible,
#api-url-input:focus-visible,
#chat-character:focus-visible,
#api-provider:focus-visible {
    outline: 2px solid #27AE60;
    outline-offset: 2px;
}

/* Skip outline for mouse clicks — keep border-based focus indication */
#player-name-input:focus:not(:focus-visible),
#chat-input:focus:not(:focus-visible) {
    outline: none;
}

/* === BEDTIME — Gute-Nacht-Geschichte Overlay === */
#bedtime-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: linear-gradient(180deg, #0d1b2a 0%, #1b2838 40%, #2c3e50 100%);
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
}
#bedtime-overlay.hidden { display: none; }

.bedtime-container {
    max-width: 680px;
    width: 100%;
    padding: 32px 24px;
}

.bedtime-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.bedtime-header h2 {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 28px;
    color: #f0c040;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.bedtime-tommy {
    font-size: 42px;
    animation: bedtimeFloat 3s ease-in-out infinite;
}
@keyframes bedtimeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.bedtime-ctrl-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #ccc;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}
.bedtime-ctrl-btn:hover { background: rgba(255,255,255,0.2); }

.bedtime-chapter-title {
    font-family: var(--font-heading);
    font-size: 16px;
    color: #8899aa;
    margin: 0 0 24px 0;
    font-weight: 400;
}

.bedtime-story {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.8;
    color: #e0e8f0;
    letter-spacing: 0.02em;
}
.bedtime-story p {
    margin: 0 0 20px 0;
}
.bedtime-story p:last-child {
    margin-bottom: 0;
}

.bedtime-empty {
    color: #8899aa;
    font-style: italic;
    text-align: center;
    padding: 40px 0;
}

.bedtime-error {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

/* Loading */
.bedtime-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
}
.bedtime-loading-emoji {
    font-size: 64px;
    animation: bedtimeRock 1.5s ease-in-out infinite;
}
@keyframes bedtimeRock {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}
.bedtime-loading p {
    font-family: var(--font-body);
    font-size: 18px;
    color: #8899aa;
    margin: 0;
}

/* Navigation */
.bedtime-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.bedtime-nav-btn {
    font-family: var(--font-heading);
    font-size: 16px;
    padding: 10px 20px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: #c0c8d0;
    cursor: pointer;
    transition: all 0.2s;
}
.bedtime-nav-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
    color: white;
}
.bedtime-nav-btn.bedtime-new {
    background: linear-gradient(135deg, rgba(240,192,64,0.2), rgba(240,192,64,0.1));
    border-color: rgba(240,192,64,0.4);
    color: #f0c040;
}
.bedtime-nav-btn.bedtime-new:hover {
    background: linear-gradient(135deg, rgba(240,192,64,0.3), rgba(240,192,64,0.15));
    border-color: rgba(240,192,64,0.6);
}
.bedtime-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Mobile */
@media (max-width: 600px) {
    .bedtime-container { padding: 20px 16px; }
    .bedtime-header h2 { font-size: 22px; }
    .bedtime-tommy { font-size: 32px; }
    .bedtime-story { font-size: 18px; line-height: 1.7; }
}

/* ============================================================ */
/* === ELTERN-DASHBOARD (#17) === */
/* ============================================================ */
.dashboard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8000;
    padding: 16px;
}

.dashboard-overlay.hidden {
    display: none;
}

.dashboard-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 580px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1a1a;
}

.dashboard-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.dashboard-bernd {
    font-size: 40px;
    line-height: 1;
    flex-shrink: 0;
}

.dashboard-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    font-family: inherit;
}

.dashboard-bernd-quote {
    margin: 0;
    font-size: 13px;
    color: #666;
    font-style: italic;
    line-height: 1.4;
}

.dashboard-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.dashboard-close-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 20px 24px;
}

.dashboard-card {
    background: #f7f8fa;
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid #eaeaea;
}

.dashboard-card-wide {
    grid-column: span 3;
}

.dashboard-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    font-weight: 600;
    margin-bottom: 6px;
}

.dashboard-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.1;
}

.dashboard-engagement {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.dashboard-engagement-bar {
    flex: 1;
    height: 10px;
    background: #e8e8e8;
    border-radius: 5px;
    overflow: hidden;
}

.dashboard-engagement-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.6s ease;
    width: 0%;
}

.dashboard-engagement-value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    min-width: 40px;
    text-align: right;
}

.dashboard-sessions-section {
    padding: 0 24px 16px;
}

.dashboard-section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    font-weight: 600;
    margin: 0 0 10px;
}

.dashboard-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f7f8fa;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    font-size: 13px;
}

.dashboard-session-date {
    color: #555;
    font-weight: 500;
}

.dashboard-session-meta {
    color: #999;
    font-size: 12px;
    display: flex;
    gap: 12px;
}

.dashboard-empty {
    font-size: 13px;
    color: #aaa;
    margin: 0;
    padding: 10px 0;
}

.dashboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px 20px;
    border-top: 1px solid #eee;
    gap: 12px;
}

.dashboard-footer-note {
    font-size: 11px;
    color: #bbb;
}

.dashboard-close-action {
    background: #2C3E50;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.dashboard-close-action:hover {
    background: #3d5166;
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        padding: 16px;
    }
    .dashboard-card-wide {
        grid-column: span 2;
    }
    .dashboard-header {
        padding: 18px 16px 14px;
    }
    .dashboard-sessions-section {
        padding: 0 16px 14px;
    }
    .dashboard-footer {
        padding: 12px 16px 16px;
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard-close-action {
        text-align: center;
    }
}

/* === DUNGEON-DIALOG (#50) === */
.dungeon-content {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    border: 2px solid #533483;
    max-width: 440px;
}

.dungeon-content h2 {
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
}

.dungeon-intro {
    text-align: center;
    color: #a0a0c0;
    margin-bottom: 20px;
    font-size: 14px;
}

.dungeon-levels {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.dungeon-level {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.1);
}

.dungeon-level-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.dungeon-level-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dungeon-level-text strong {
    color: #e0e0ff;
    font-size: 15px;
}

.dungeon-level-text span {
    color: #9090b0;
    font-size: 13px;
}

.dungeon-secret {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    color: #e94560;
    font-weight: bold;
    margin-bottom: 16px;
}

.dungeon-content .action-btn {
    background: #533483;
    border-color: #7a55c5;
    color: white;
    width: 100%;
    margin-top: 4px;
}

.dungeon-content .action-btn:hover {
    background: #7a55c5;
}

/* === RTL SUPPORT — Hebräisch & Arabisch === */

/* Language picker */
.lang-picker {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 9999;
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 4px 6px;
}
[dir="rtl"] .lang-picker {
    right: auto;
    left: 8px;
}
.lang-picker button {
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: border-color 0.2s;
}
.lang-picker button.active {
    border-color: rgba(255, 255, 255, 0.8);
}
.lang-picker button:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

/* RTL: Mirror layout direction */
[dir="rtl"] #main-area {
    direction: rtl;
}
[dir="rtl"] #palette {
    text-align: right;
}
[dir="rtl"] #stats {
    text-align: right;
}
[dir="rtl"] header h1 {
    direction: rtl;
}
[dir="rtl"] .toolbar-group {
    direction: rtl;
}
[dir="rtl"] #chat-panel {
    left: 8px;
    right: auto;
    border-radius: 0 16px 16px 0;
}
[dir="rtl"] #chat-panel.hidden {
    transform: translateX(-100%);
}
[dir="rtl"] #chat-input-area {
    direction: rtl;
}
[dir="rtl"] #chat-input {
    text-align: right;
}
[dir="rtl"] .crafting-layout {
    direction: rtl;
}
[dir="rtl"] .craft-arrow {
    transform: scaleX(-1);
}
[dir="rtl"] .genesis-hint {
    direction: rtl;
}
[dir="rtl"] .sidebar-panel {
    text-align: right;
}
[dir="rtl"] .dashboard-modal {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .bedtime-container {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .dungeon-content {
    direction: rtl;
    text-align: right;
}
/* RTL font: keep Arabic/Hebrew-friendly fonts */
[dir="rtl"] body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
}