:root {
    /* Fallback-Werte, bevor body.theme-pirates (immer aktiv) sie überschreibt -
       tiefes Void-Blau statt des reinen Tailwind-slate-900, damit es nicht 1:1
       wie das Standard-Dark-Mode-Preset jedes KI-Tutorials aussieht. */
    --bg-color: #0b1220;
    --bg-gradient: linear-gradient(135deg, #0b1220 0%, #142035 100%);

    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;

    --color-action: #f43f5e; /* Red-ish for Handeln */
    --color-knowledge: #3b82f6; /* Blue for Wissen */
    --color-social: #10b981; /* Green for Soziales */

    --color-heal: #10b981;
    --color-dmg: #ef4444;
    --color-accent: #57c2f0;
    --panel-border: rgba(255, 255, 255, 0.15);

    --font-main: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Seekarten-Farben für die Seekampf-Karte (battlemap.js, Canvas-Modul aus
       dem Schwesterprojekt demonslayer) - bewusst FEST statt pro Vibe-Theme
       überschrieben, damit die Karte immer als dunkle Seekarte lesbar bleibt,
       egal welches Farbthema gerade aktiv ist. */
    --karte-blatt: #0b1a24;
    --karte-tinte: #e8f1f5;
    --karte-stempel: #f0b429;
    --karte-mess: #57c2f0;
    --karte-raster: rgba(200, 225, 235, 0.16);
    --karte-schleier: rgba(200, 225, 235, 0.35);
    --karte-beschriftung: rgba(11, 26, 36, 0.92);
    --karte-umriss: rgba(232, 241, 245, 0.7);
    --karte-nebelVoll: #16323f;
    --karte-nebelHalb: rgba(22, 50, 63, 0.66);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    background-image: url('assets/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-main);
    padding: 2rem;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Mouse Spotlight Effect Base */
.glass-panel, .tool-btn, .add-skill-btn, .add-item-row button, .points-counter {
    position: relative;
}
.glass-panel::before, .tool-btn::before, .add-skill-btn::before, .add-item-row button::before, .points-counter::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.06),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 0;
}
.glass-panel:hover::before, .tool-btn:hover::before, .add-skill-btn:hover::before, .add-item-row button:hover::before, .points-counter:hover::before {
    opacity: 1;
}

/* Ensure children sit above the spotlight */
.glass-panel > *, .tool-btn > *, .add-skill-btn > *, .add-item-row button > *, .points-counter > * {
    position: relative;
    z-index: 1;
}

/* Subtle animated background blobs */
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.5;
    animation: float 20s infinite alternate;
}
body::before {
    top: -10%; left: -10%;
    width: 500px; height: 500px;
    background: rgba(139, 92, 246, 0.3);
}
body::after {
    bottom: -10%; right: -10%;
    width: 600px; height: 600px;
    background: rgba(59, 130, 246, 0.2);
    animation-delay: -10s;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.app-container {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    grid-template-areas: 
        "toolbar toolbar" 
        "left right"
        "notes right";
    gap: 1.5rem;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 1fr;
        grid-template-areas: "toolbar" "left" "notes" "right";
    }
}

/* Schnellnavigation (mobilenav.js) - mitscrollende Leiste mit Sprunglinks zu
   allen gerade sichtbaren Panels, für ALLE Spieler. Auf dem Handy als volle
   Leiste am unteren Bildschirmrand, ab 769px als schwebende Leiste unten in
   der Mitte (die Seite ist auch am Desktop lang genug, um zwischen z.B.
   Logbuch und Talentbaum hin- und herzuspringen). */
.mobile-nav {
    display: flex;
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: 0.8rem;
    width: max-content; max-width: min(96vw, 1400px);
    z-index: 900; /* unter Modals (1000), Karten-Vollbild (1200), Kampf-Popup (2000) */
    background: rgba(6, 13, 18, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    padding: 0.4rem 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
}
.mobile-nav-chip {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    flex-shrink: 0;
    min-width: 60px;
    padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mobile-nav-chip i { font-size: 1.05rem; color: var(--color-accent); }
.mobile-nav-chip:hover, .mobile-nav-chip:active { background: rgba(255,255,255,0.16); border-color: var(--color-accent); }
/* Panel ist gerade im Sichtfeld (mobilenav.js, IntersectionObserver) */
.mobile-nav-chip.mobile-nav-aktiv { background: rgba(255,255,255,0.12); border-color: var(--color-accent); color: var(--text-primary); }
.mobile-nav-chip span { white-space: nowrap; }

/* Handy-Statusleiste (mobilestatus.js) - bleibt oben stehen, zeigt immer die
   aktuellen Lebenspunkte. Eigene, etwas flachere Leiste als die Navigation
   unten, damit beide zusammen nicht zu viel vom kleinen Bildschirm fressen. */
.mobile-status-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 900;
    align-items: center; gap: 0.6rem;
    background: rgba(6, 13, 18, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--glass-border);
    padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.9rem 0.45rem;
    cursor: pointer;
}
.mobile-status-bar i.fa-heart { color: var(--color-dmg); font-size: 0.95rem; flex-shrink: 0; }
.mobile-status-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.mobile-status-fill { height: 100%; width: 100%; background: var(--color-heal); transition: width 0.3s, background-color 0.3s; }
.mobile-status-bar span { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); flex-shrink: 0; }
.mobile-status-warnung { animation: mobile-status-puls 1s ease infinite; }
@keyframes mobile-status-puls {
    0%, 100% { border-bottom-color: var(--glass-border); }
    50% { border-bottom-color: var(--color-dmg); }
}

/* Platz für die fixe Leiste, sonst verdeckt sie die Fußzeile der Seite */
body { padding-bottom: 5rem; }
@media (max-width: 768px) {
    /* Handy: volle Breite am Rand, dazu die Statusleiste oben */
    .mobile-nav {
        left: 0; right: 0; bottom: 0; transform: none;
        width: auto; max-width: none;
        border: 0; border-top: 1px solid var(--glass-border); border-radius: 0; box-shadow: none;
        padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        gap: 0.5rem;
    }
    .mobile-status-bar { display: flex; }
    body { padding-bottom: 5.4rem; padding-top: 2.6rem; }
}

/* Kurzes Aufblitzen des Zielpanels nach einem Leisten-Sprung, damit klar ist,
   wo man gelandet ist - scrollIntoView allein ist auf einem langen Handy-
   Bildschirm manchmal nicht offensichtlich genug. */
.mobile-nav-highlight { animation: mobilenav-blitz 1.2s ease; border-radius: 12px; }
@keyframes mobilenav-blitz {
    0% { box-shadow: 0 0 0 3px var(--color-accent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* 3-Column Layout */
@media (min-width: 1300px) {
    .app-container.layout-3col {
        max-width: 1800px;
        grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr) minmax(300px, 1fr);
        grid-template-areas: 
            "toolbar toolbar toolbar" 
            "notes left right";
    }
    
    .app-container.layout-3col .notes-section {
        margin-top: 0 !important;
        height: 100%;
    }
}

.toolbar {
    grid-area: toolbar;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: -1rem;
    position: relative;
    z-index: 50;
}

.tool-btn {
    background: rgba(10,10,15,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    font-family: var(--font-main);
}
.tool-btn:hover {
    background: rgba(10,10,15,0.75);
    border-color: var(--color-accent);
}
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.save-indicator {
    font-size: 0.8rem;
    color: var(--color-heal);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.save-indicator.show { opacity: 1; }

.points-counter {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid var(--color-accent);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    margin-right: auto;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}
.points-counter.over-limit {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--color-dmg);
    color: var(--color-dmg);
}
.pts-val {
    color: #fbbf24;
    font-size: 1.1rem;
}
.points-counter.over-limit .pts-val {
    color: var(--color-dmg);
}
.pts-max-input {
    width: 75px;
    background: transparent !important;
    border: 1px dashed rgba(255,255,255,0.3) !important;
    color: var(--text-primary) !important;
    padding: 0.2rem 15px 0.2rem 0.2rem !important;
    text-align: center;
    font-weight: 700;
}

/* Glassmorphism Classes */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    padding: 2rem;
}

/* Common Inputs */
input[type="text"], input[type="number"] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-family: var(--font-main);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s;
    font-size: 1rem;
}
input[type="text"]:focus, input[type="number"]:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cat-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}

.category-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.4);
    mix-blend-mode: screen;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Character Header */
.character-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 600px) {
    .character-header { flex-direction: column; }
}

.portrait-container {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.2);
}

.character-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.portrait-container:hover .portrait-overlay {
    opacity: 1;
}

.basic-info.grid-2-col {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.input-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Attributes Grid */
.attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.attribute-card {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 1.5rem;
    border-top: 4px solid var(--accent);
}

.attr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.attr-header h2 { margin: 0; color: var(--accent); }
.attr-val {
    width: 60px;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    border-color: var(--accent) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.attr-val:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--accent);
}
.attr-val::-webkit-inner-spin-button,
.attr-val::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.attr-gbp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.gbp-counter {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
}

.gbp-input {
    width: 60px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    padding: 0;
    outline: none;
}

.gbp-input::-webkit-inner-spin-button,
.gbp-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.gbp-input {
    -moz-appearance: textfield;
}

.gbp-adjust-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.gbp-adjust-btn:hover { background: rgba(255,255,255,0.25); }


.gbp-separator {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0 0.4rem;
}

.gbp-max {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 700;
    width: 2.5rem;
    text-align: left;
}

.skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skill-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.4rem;
}

.skill-item-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.skill-item .skill-name-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    outline: none;
    transition: all 0.3s;
    cursor: text;
}
.skill-item .skill-name-input:focus {
    border-color: var(--accent);
    background: rgba(15, 23, 42, 0.8);
}
.skill-item .skill-name-input:empty:before {
    content: attr(placeholder);
    color: rgba(255,255,255,0.3);
}
/* Talent aus einer festen Paket-Talentliste (Eldara, hausregeln.js) - Name
   kommt aus dem Dropdown und ist hier bewusst nicht mehr eintippbar. */
.skill-item .skill-name-input.skill-name-fixed {
    cursor: default;
    background: rgba(15, 23, 42, 0.3);
}

.add-skill-select {
    width: 100%; margin-top: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.2);
    color: var(--text-secondary);
    padding: 0.5rem; border-radius: 8px; cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}
.add-skill-select:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }

.skill-item input[type="number"] {
    width: 40px;
    text-align: center;
    padding: 0 !important;
    flex-shrink: 0;
    -moz-appearance: textfield;
}
.skill-item input[type="number"]::-webkit-inner-spin-button, 
.skill-item input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.skill-total {
    font-weight: 700;
    min-width: 35px;
    text-align: right;
    color: var(--color-accent);
    flex-shrink: 0;
}
.skill-total.over-cap {
    color: var(--color-dmg);
}
.btn-bonus-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: rgba(255,255,255,0.6);
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-bonus-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.btn-bonus-toggle.bonus-excluded {
    color: rgba(255,255,255,0.25);
    text-decoration: line-through;
    border-style: dashed;
}
.btn-delete-icon {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 0.25rem; flex-shrink: 0;
    transition: color 0.2s;
}
.btn-delete-icon:hover { color: var(--color-dmg); }

.add-skill-btn {
    width: 100%; margin-top: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.2);
    color: var(--text-secondary);
    padding: 0.5rem; border-radius: 8px; cursor: pointer;
    transition: all 0.2s;
}
.add-skill-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }


/* Inventory */
.inventory-section h2 { color: #38bdf8; }
.inventory-list {
    display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;
}
.inv-item {
    display: flex; gap: 0.5rem; align-items: center;
    background: rgba(255,255,255,0.02); padding: 0.25rem; border-radius: 8px;
}
.inv-item input { flex-grow: 1; color: #38bdf8; font-weight: 600;}
.item-amount-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 2px;
}
.item-amount {
    min-width: 24px;
    text-align: center;
    color: var(--text-primary);
    font-weight: bold;
    font-size: 0.9rem;
}
.btn-icon-small {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1;
}
.btn-icon-small:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
.add-item-row { display: flex; gap: 0.5rem; }
.add-item-row input { flex-grow: 1; }
.add-item-row button {
    background: var(--color-accent); border: none; border-radius: 8px;
    color: white; width: 40px; cursor: pointer; transition: transform 0.2s;
}
.add-item-row button:hover { transform: scale(1.05); }


/* Right Panel / Tools */
.character-sheet { grid-area: left; }
.notes-section { grid-area: notes; }
.tools-panel {
    grid-area: right;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 2rem;
    align-self: start;
}

/* HP Tracker */

/* Hide spin buttons for HP */
.hp-display input[type="number"]::-webkit-inner-spin-button,
.hp-display input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hp-display input[type="number"] {
    -moz-appearance: textfield;
}

.hp-max-adjust {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.hp-max-adjust:hover {
    background: rgba(255,255,255,0.25);
}

.hp-tracker { text-align: center; }
.hp-display {
    display: flex; justify-content: center; align-items: center; gap: 0.5rem;
    font-size: 2.5rem; font-weight: 800; margin: 1rem 0;
}
.hp-display input {
    font-size: 2.5rem; font-weight: 800; width: 100px; text-align: center;
    background: transparent; border: none; padding: 0;
}
.hp-display input:focus { box-shadow: none; border-bottom: 2px solid var(--color-heal); border-radius: 0;}

.hp-bar-container {
    height: 12px; background: rgba(0,0,0,0.5); border-radius: 6px;
    margin-bottom: 1.5rem; overflow: hidden; position: relative;
}
.hp-bar-fill {
    height: 100%; background: var(--color-heal); width: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.hp-controls {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
}
.hp-controls button {
    padding: 0.75rem 0.2rem; border: none; border-radius: 8px; font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer; color: white; transition: transform 0.1s, filter 0.2s;
}
.hp-controls button:active { transform: scale(0.95); }
.hp-controls button:hover { filter: brightness(1.2); }
.btn-dmg { background: var(--color-dmg); }
.btn-heal { background: var(--color-heal); }

/* Dice Roller */
.dice-buttons { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.dice-btn {
    flex: 1; padding: 0.6rem; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 700; color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.dice-btn.w6 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dice-btn.w100 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.dice-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.dice-btn:active { transform: translateY(0); }

/* Shake animation class */
.shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-5deg); }
    20%, 80% { transform: translate3d(2px, 0, 0) rotate(5deg); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0) rotate(-10deg); }
    40%, 60% { transform: translate3d(4px, 0, 0) rotate(10deg); }
}

.dice-result-display {
    background: rgba(0,0,0,0.3); border-radius: 12px; padding: 1rem;
    text-align: center; margin-bottom: 0.8rem; margin-top: 0.8rem;
    border: 1px solid rgba(255,255,255,0.05);
}
.result-number {
    display: block; font-size: 2.2rem; font-weight: 800;
    font-family: var(--font-mono); color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}
.result-label { font-size: 0.9rem; color: var(--text-secondary); }

.dice-log-container h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.dice-log-container ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; max-height: 200px; overflow-y: auto; padding-right: 0.5rem;}
.dice-log-container ul::-webkit-scrollbar { width: 4px; }
.dice-log-container ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.log-entry {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.03); padding: 0.5rem 0.75rem; border-radius: 6px;
    font-size: 0.9rem;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
.log-time { color: var(--text-secondary); font-size: 0.75rem; }
.log-type { color: #8b5cf6; font-weight: 600; margin-left: 0.5rem; }
.log-val { font-family: var(--font-mono); font-weight: 700; color: #fbbf24; }

/* Activity Log */
.activity-log-container { margin-top: 0; }
.activity-log-container summary { cursor: pointer; user-select: none; }
.activity-log-container summary h3 { display: inline-flex; margin: 0; transition: color 0.2s; }
.activity-log-container summary::marker, .activity-log-container summary::-webkit-details-marker { display: none; content: ""; }
.activity-log-container summary:hover h3, .activity-log-container summary:hover .toggle-icon { color: white !important; }
.activity-log-container[open] summary .toggle-icon { transform: rotate(180deg); }
.activity-log-container ul {
    list-style: none; display: flex; flex-direction: column; gap: 0.5rem; max-height: 280px; overflow-y: auto;
    padding-right: 0.6rem; margin-top: 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.activity-log-container ul::-webkit-scrollbar { width: 7px; }
.activity-log-container ul::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.activity-log-container ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 4px; }
.activity-log-container ul::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.55); }

.activity-entry { display: flex; align-items: flex-start; gap: 0.5rem; background: rgba(255,255,255,0.03); padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; animation: slideIn 0.3s ease-out; line-height: 1.3;}
.activity-time { font-size: 0.8rem; opacity: 0.7; min-width: 40px; }
.activity-icon { min-width: 20px; text-align: center; }
.activity-content { flex: 1; }

/* Help System */
.help-icon {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    margin-left: 0.5rem;
    transition: color 0.2s, text-shadow 0.2s;
}
.help-icon:hover {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
}

.help-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.help-modal-overlay.active {
    opacity: 1; pointer-events: auto;
}

.help-modal-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--panel-border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px; width: 90%;
    /* Lange Hilfetexte (z.B. Talentbaum "Besondere Fähigkeiten") sonst auf
       niedrigen Bildschirmen nicht lesbar, weil sie über den Viewport
       hinausragten, ohne dass etwas davon scrollbar war. */
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s;
    color: white;
}
.help-modal-overlay.active .help-modal-box {
    transform: translateY(0);
}
.help-modal-box h3 { margin-top: 0; color: var(--color-primary); display: flex; align-items: center; gap: 0.5rem; }
.help-modal-box p { line-height: 1.6; color: var(--text-light); }
.help-modal-box code { background: rgba(0,0,0,0.5); padding: 0.2rem 0.4rem; border-radius: 4px; font-family: var(--font-mono); }
.modal-close {
    position: absolute; top: 1rem; right: 1rem;
    background: transparent; border: none; color: white;
    font-size: 1.2rem; cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
}
.modal-close:hover { opacity: 1; }

.activity-good { color: #10b981; }
.activity-bad { color: #ef4444; }
.activity-neutral { color: #fbbf24; }

/* Canvas Confetti */
#confetti-canvas {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9999;
}



/* Utility Pack Styles */
.status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: flex-start;
    align-content: flex-start;
}
.status-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    color: var(--text-secondary);
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.2);
}
.status-badge.malus, .status-badge.active {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.status-badge.bonus {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
.status-badge.neutral {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border-color: #94a3b8;
    box-shadow: 0 0 8px rgba(148, 163, 184, 0.4);
}
.currency-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,0,0,0.3);
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
}
.currency-name {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    min-width: 3ch;
    font-size: 0.9rem;
    outline: none;
}
.currency-val {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 60px;
    font-size: 1.1rem;
    font-weight: bold;
    appearance: none;
    -moz-appearance: textfield;
    text-align: right;
    outline: none;
}
.currency-val::-webkit-inner-spin-button,
.currency-val::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.weapon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: background 0.3s;
}
.weapon-item:hover {
    background: rgba(255,255,255,0.1);
}
.weapon-name {
    flex-grow: 1;
    font-weight: 500;
}
.weapon-dmg {
    color: var(--text-secondary);
    margin-right: 1rem;
}
.btn-roll-dmg {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
}
.btn-roll-dmg:hover {
    background: rgba(239, 68, 68, 0.4);
    transform: scale(1.05);
}
.gbp-use-btn {
    background: transparent;
    border: 1px solid rgba(250, 204, 21, 0.4);
    color: #fde047;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.gbp-use-btn:hover {
    background: rgba(250, 204, 21, 0.2);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
}
.skill-val.clickable {
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    padding: 0 0.3rem;
}
.skill-val.clickable:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    transform: scale(1.1);
}


/* Drag & Drop and Inventory Enhancements */
.drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    padding: 0 0.5rem;
    font-size: 1.1rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.drag-handle:hover {
    opacity: 1;
}
.drag-handle:active {
    cursor: grabbing;
}
.inv-item {
    transition: transform 0.2s, background 0.2s;
    flex-wrap: wrap; /* Allow description to wrap to next line */
}
.inv-item.dragging {
    opacity: 0.5;
    background: rgba(255,255,255,0.1);
}
.inv-item.drag-over {
    border-top: 2px solid var(--accent-gold);
}
.item-desc-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem;
    transition: color 0.2s;
}
.item-desc-toggle:hover {
    color: var(--text-primary);
}
.item-description {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 0.5rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 40px;
    outline: none;
    display: none;
}
.item-description.show {
    display: block;
}

/* Card Layout Enhancements for Inventory */
.inventory-list, .weapons-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    align-items: start !important;
}

.inv-item.card-layout {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-items: stretch;
}
.inv-item.card-layout:hover {
    background: rgba(255, 255, 255, 0.08);
}

.inv-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.inv-card-header .inv-item-name {
    flex-grow: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.2rem 0;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}
.inv-card-header .inv-item-name:focus {
    border-bottom-color: rgba(255,255,255,0.3);
}

.inv-card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* --- Rasterinventar (Eldara-Hausregel, inventarraster.js) ------------------ */
.ir-hint { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1rem 0; }
.ir-warnung { color: var(--color-dmg); }
.ir-einstellungen { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-bottom: 0.8rem; font-size: 0.85rem; color: var(--text-secondary); }
.ir-einstellung { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ir-mini-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    color: var(--text-secondary); font-size: 0.72rem; padding: 0.25rem 0.5rem; cursor: pointer;
}
.ir-mini-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--color-accent); }
.ir-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ir-ruestung-block { flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; }
.ir-ruestung-titel { font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ir-ruestung-titel .ir-zone-malus { color: var(--color-accent); }
.ir-ruestung-teile { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ir-ruestung-teil { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--text-secondary); flex: 1 1 140px; }
.ir-ruestung-teil select { width: 100%; }
.ir-gruppen { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; }
.ir-gruppe { flex: 1 1 280px; min-width: 240px; }
.ir-gruppe-titel { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ir-zone-count { font-weight: 400; text-transform: none; letter-spacing: normal; opacity: 0.7; }
.ir-zone-malus { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--color-dmg); }
.ir-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ir-slot { border-radius: 12px; min-width: 0; }
.ir-slot-breit-2 { grid-column: span 2; }
.ir-slot-breit-3 { grid-column: span 3; }
.ir-slot-leer {
    display: flex; align-items: center; justify-content: center; min-height: 84px;
    border: 1px dashed rgba(255,255,255,0.18); color: rgba(255,255,255,0.25); font-size: 1.3rem;
    transition: border-color 0.2s, color 0.2s;
}
.ir-slot-over { border-color: var(--color-accent) !important; color: var(--color-accent) !important; }
.ir-slot:not(.ir-slot-leer).ir-slot-over .ir-karte { outline: 2px dashed var(--color-accent); outline-offset: 2px; }

/* Paperdoll-Anordnung (inventarraster.js renderInventarRaster): jeder
   Ausrüstungsplatz sitzt als eigene Grid-Zelle nah an seiner Körperstelle
   am Piratenbild - Kopf oben drüber, Schulter/Hals+Brust auf Schulterhöhe
   links/rechts, Hände+Beine tiefer links/rechts, Füße und Schmuck unter
   den Füßen. Gürtel/Gürtel(Waffen) stehen NICHT mehr hier, die sind in die
   Zeile darunter (.ir-gruppen) gewandert. Auf schmalen Bildschirmen wird
   das zu einer einfachen Ein-Spalten-Reihenfolge von Kopf bis Fuß. */
.ir-paperdoll {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(170px, 1.3fr) minmax(130px, 1fr);
    grid-template-areas:
        "kopf kopf kopf"
        "linksoben figur rechtsoben"
        "linksunten figur rechtsunten"
        "fuesse fuesse fuesse"
        "schmuck schmuck schmuck";
    gap: 0.8rem 1rem;
    align-items: center;
    margin-bottom: 1.2rem;
}
.ir-paperdoll-kopf { grid-area: kopf; }
.ir-paperdoll-links-oben { grid-area: linksoben; }
.ir-paperdoll-rechts-oben { grid-area: rechtsoben; }
.ir-paperdoll-links-unten { grid-area: linksunten; }
.ir-paperdoll-rechts-unten { grid-area: rechtsunten; }
.ir-paperdoll-fuesse { grid-area: fuesse; }
.ir-paperdoll-schmuck { grid-area: schmuck; }
.ir-paperdoll-figur { grid-area: figur; align-self: center; justify-self: center; max-width: 240px; width: 100%; padding: 0 0.4rem; }
.ir-paperdoll-bild { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.65)); }
.ir-paperdoll-kopf .ir-gruppe,
.ir-paperdoll-links-oben .ir-gruppe,
.ir-paperdoll-rechts-oben .ir-gruppe,
.ir-paperdoll-links-unten .ir-gruppe,
.ir-paperdoll-rechts-unten .ir-gruppe,
.ir-paperdoll-fuesse .ir-gruppe,
.ir-paperdoll-schmuck .ir-gruppe { min-width: 0; height: 100%; }
.ir-gruppe-ausruestung .ir-gruppe-titel { color: var(--color-accent); }

@media (max-width: 640px) {
    .ir-paperdoll {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kopf"
            "figur"
            "linksoben"
            "rechtsoben"
            "linksunten"
            "rechtsunten"
            "fuesse"
            "schmuck";
    }
    .ir-paperdoll-figur { max-width: 200px; margin: 0 auto; }
}
.ir-karte { margin: 0; gap: 0.4rem; padding: 0.6rem; }
/* Griff statt ganzer Karte als Zugauslöser (siehe inventarraster.js) - läuft
   über Pointer Events, funktioniert also gleich auf Maus, Touch und Stift.
   touch-action:none verhindert, dass der Browser eine Berührung hier als
   Scroll-Geste abfängt, bevor JS überhaupt reagieren kann. */
.ir-drag-griff { color: var(--text-secondary); font-size: 0.85rem; flex-shrink: 0; cursor: grab; touch-action: none; padding: 0.3rem; margin: -0.3rem; }
.ir-drag-griff:active { cursor: grabbing; }
.ir-drag-griff-gesperrt { opacity: 0.3; cursor: not-allowed; }
.ir-drag-griff-gesperrt:active { cursor: not-allowed; }

/* Kampf-Start/Ende-Popup beim Spieler (kampf.js, kampfPopupZeigen) */
.kampf-popup {
    position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%) translateY(-30px);
    z-index: 2000; display: flex; align-items: center; gap: 0.9rem;
    background: rgba(15, 23, 42, 0.95); border: 1px solid var(--color-accent);
    box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 20px rgba(69, 214, 148, 0.4);
    border-radius: 12px; padding: 1rem 1.5rem; max-width: min(90vw, 420px);
    opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s;
    color: var(--text-primary); font-family: var(--font-main); cursor: pointer;
}
.kampf-popup.kampf-popup-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.kampf-popup i { font-size: 1.8rem; color: var(--color-accent); flex-shrink: 0; }
.kampf-popup strong { color: var(--color-accent); }
.kampf-popup-ende { border-color: var(--color-heal); box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 20px rgba(16, 185, 129, 0.4); }
.kampf-popup-ende i, .kampf-popup-ende strong { color: var(--color-heal); }

/* Team-Würfel-Popup beim Spieler (teamwuerfel.js, teamwuerfelPopupZeigen) -
   gleiches Muster wie .kampf-popup, nur mit der Farbe des würfelnden
   Mitspielers statt einer festen Akzentfarbe. */
.tw-popup {
    position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%) translateY(-30px);
    z-index: 2000; display: flex; align-items: center; gap: 0.9rem;
    background: rgba(15, 23, 42, 0.95); border: 1px solid var(--tw-farbe, var(--color-accent));
    box-shadow: 0 10px 40px rgba(0,0,0,0.7); border-radius: 12px; padding: 1rem 1.5rem;
    max-width: min(90vw, 420px);
    opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s;
    color: var(--text-primary); font-family: var(--font-main); cursor: pointer;
}
.tw-popup.tw-popup-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tw-popup i { font-size: 1.8rem; color: var(--tw-farbe, var(--color-accent)); flex-shrink: 0; }
.tw-popup strong { color: var(--tw-farbe, var(--color-accent)); }
.ir-karte-wird-gezogen { opacity: 0.35; }
.ir-karte-geist {
    position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none;
    transform: translate(-50%, -50%) rotate(-2deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5); opacity: 0.95;
}
.ir-name {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
    color: var(--accent-blue); font-weight: 600; font-size: 0.8rem; padding: 0.15rem 0; outline: none; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Beim Fokussieren (Umbenennen) lieber den Cursor an die echte Position
   lassen als die Ellipse - sonst "springt" der Text beim Tippen sichtbar. */
.ir-name:focus { text-overflow: clip; }
.ir-name-reihe { display: flex; align-items: center; gap: 0.3rem; width: 100%; }
.ir-name-reihe .ir-name { flex: 1; }
.ir-waffe-icon { color: var(--color-dmg); font-size: 0.85rem; flex-shrink: 0; }
.ir-karte-waffe { border-left: 2px solid var(--color-dmg); }
.ir-waffen-reihe { gap: 0.4rem; }
.ir-schaden-input { flex: 1; min-width: 0; font-size: 0.8rem; padding: 0.3rem 0.5rem; color: var(--color-dmg); font-weight: 600; }
.ir-wuerfeln-btn { color: var(--color-dmg); flex-shrink: 0; }
.ir-waffe-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; flex: 0 0 auto; }
.ir-input-schaden { flex: 1 1 140px; }
.ir-karte-reihe { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; width: 100%; }
/* Ausrüstung (Kopf/Schulter-Hals/Brust/Hände/Beine/Füße/Schmuck) - eigene
   Akzentfarbe statt Waffen-Rot, damit beides auf einen Blick zu unterscheiden ist. */
.ir-karte-ausruestung { border-left: 2px solid var(--color-accent); }
.ir-ausr-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--color-accent); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ir-karte-ausruestung .ir-waffe-icon { color: var(--color-accent); }
.ir-karte-ausruestung .ir-schaden-input { color: var(--color-accent); }
.ir-karte-reihe .item-amount-wrapper { margin-right: auto; }
.ir-karte .btn-delete-icon { font-size: 0.85rem; }
/* Runenmagie/Schmiede-Roulette (runenmagie.js) - eigene Lila-Akzentfarbe.
   .btn-icon-small ist eigentlich für reine 20x20-Icon-Buttons gedacht - der
   "Verzaubern"-Knopf hat aber Text dabei, deshalb hier auf Auto-Breite und
   passendes Padding umgestellt statt der festen Icon-Maße. */
.ir-runen-reihe { font-size: 0.78rem; gap: 0.4rem; }
.ir-runen-reihe .btn-icon-small {
    width: auto; height: auto; padding: 0.25rem 0.5rem; gap: 0.35rem;
    color: #c084fc; background: rgba(192,132,252,0.12); border: 1px solid rgba(192,132,252,0.35);
    font-size: 0.78rem;
}
.ir-runen-reihe .btn-icon-small:hover { background: rgba(192,132,252,0.22); }
.ir-runen-wartend { color: #fbbf24; font-style: italic; }
.ir-runen-bestaetigt { color: #c084fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-runen-bestaetigt .btn-icon-small {
    margin-left: auto; width: 20px; height: 20px; padding: 0; background: transparent; border: none;
    color: var(--color-dmg); flex-shrink: 0;
}
.ir-groesse-select {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
    color: var(--text-secondary); font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.2rem; cursor: pointer; flex-shrink: 0; max-width: 46px;
}
.ir-groesse-select:hover { color: var(--text-primary); border-color: var(--color-accent); }
.ir-groesse-select option { background: #0f172a; color: #f8fafc; }
.ir-art-select {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
    color: var(--text-secondary); font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.2rem; cursor: pointer; flex-shrink: 1; min-width: 0; max-width: 92px;
}
.ir-art-select:hover { color: var(--text-primary); border-color: var(--color-accent); }
.ir-art-select option { background: #0f172a; color: #f8fafc; }
.ir-form { display: flex; flex-wrap: wrap; gap: 0.5rem; background: rgba(255,255,255,0.05); padding: 0.8rem; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.2); }
.ir-input {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
    padding: 0.5rem; color: white; outline: none; font-family: inherit;
}
.ir-input-groesse { flex: 0 1 110px; }
.ir-input-menge { flex: 0 1 80px; }
.ir-input-desc { flex: 1 1 100%; resize: vertical; min-height: 40px; }
.ir-add-btn {
    flex: 1 1 100%; width: 100%; background: var(--accent-blue); color: white; border: none;
    border-radius: 4px; padding: 0.5rem; font-weight: bold; cursor: pointer; transition: opacity 0.2s;
}
.ir-add-btn:hover { opacity: 0.85; }

.weapon-dmg-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 6px;
}
.weapon-dmg-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-weight: bold;
    width: 90px;
    text-align: center;
    outline: none;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }



/* --- Dice Fumble FX --- */
@keyframes shakeHard {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-10px, -10px) rotate(-2deg); }
    20% { transform: translate(10px, 10px) rotate(2deg); }
    30% { transform: translate(-15px, 5px) rotate(-3deg); }
    40% { transform: translate(15px, -5px) rotate(3deg); }
    50% { transform: translate(-10px, 10px) rotate(-2deg); }
    60% { transform: translate(10px, -10px) rotate(2deg); }
    70% { transform: translate(-5px, -5px) rotate(-1deg); }
    80% { transform: translate(5px, 5px) rotate(1deg); }
    90% { transform: translate(-2px, -2px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.shake-hard-active {
    animation: shakeHard 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

#crit-fail-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, transparent 40%, rgba(255, 0, 0, 0.4) 100%);
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.6);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}
#crit-fail-overlay.show {
    opacity: 1;
}

/* Waffenschaden Button im Inventar */
.weapon-damage-btn {
    cursor: pointer;
    transition: all 0.2s;
}
.weapon-damage-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--color-accent);
}

/* Eldara-Theme (Voodoo-Piraten) - einziges Theme, siehe body.theme-pirates in
   index.html (immer aktiv). Die Signaturfarbe ist das spektrale Grün der
   Voodoo-Runen/des Nebels aus assets/bg_pirates.jpg (Geisterschiff bei Nacht),
   nicht mehr generisches Piraten-Gold - Gold bleibt als zweiter Akzent für
   Beute/Währung (--accent-gold). Für den SL-Bereich siehe die gm-mode-Variante
   weiter unten - eigene Signaturfarbe (Laternen-Bernstein) und eigenes
   Hintergrundbild (Kapitänstisch statt Geisterschiff), damit Spielerbogen und
   SL-Dashboard auch auf den ersten Blick unterscheidbar sind. */
body.theme-pirates {
    --bg-color: #060d12;
    --glass-bg: rgba(7, 18, 22, 0.74);
    --glass-border: rgba(69, 214, 148, 0.28);
    --text-primary: #f2e7d3; /* warmes Pergament/Knochen statt reinem Weiß */
    --text-secondary: #a89e8f;
    --color-action: #b3372a; /* Blutrot (Handeln) */
    --color-wissen: #2f86a3; /* nautisches Teal-Blau (Wissen), abgesetzt vom Akzent-Grün */
    --color-soziales: #d1a13c; /* Laternen-Messing (Soziales) */
    --color-accent: #45d694; /* spektrales Voodoo-Grün - Signaturfarbe */
    --accent-gold: #e0ab42; /* Laternen-Gold, für Beute/Währung-Akzente */
    /* Aliase für ältere/anderswo referenzierte Variablennamen (waren zuvor
       nirgends definiert - siehe hausregeln/OFFENE_FRAGEN.md-artige Altlast:
       .attr-header/.attr-val/.help-icon/.ir-name/.ir-add-btn etc. hingen an
       --accent/--accent-blue/--color-primary, ohne dass die je gesetzt
       wurden, und blieben dadurch unsichtbar bzw. transparent). */
    --accent: var(--color-accent);
    --accent-blue: var(--color-accent);
    --color-primary: var(--color-accent);
    background-image: url('assets/bg_eldara_f.jpg');
}

body.theme-pirates .app-container {
    box-shadow: 0 0 50px rgba(69, 214, 148, 0.14);
}

body.theme-pirates .card-layout {
    background: linear-gradient(135deg, rgba(7,18,22,0.82), rgba(3,10,13,0.85));
    border: 1px solid rgba(69, 214, 148, 0.22);
}

body.theme-pirates .btn-primary {
    background: rgba(8, 22, 20, 0.8);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

body.theme-pirates .btn-primary:hover {
    background: var(--color-accent);
    color: #04140d;
    box-shadow: 0 0 15px rgba(69, 214, 148, 0.5);
}

/* SL-Dashboard: eigene Palette (multiplayer.js setzt/entfernt die Klasse
   body.gm-mode in enterGmMode()/exitGmMode()) - warmes Laternen-Bernstein
   statt des spektralen Grüns der Spieler, plus eigenes Hintergrundbild
   (Kapitänstisch mit Schatzkarte/Kompass/Laterne statt Geisterschiff). */
body.theme-pirates.gm-mode {
    --bg-color: #100905;
    --glass-bg: rgba(24, 14, 7, 0.76);
    --glass-border: rgba(224, 146, 47, 0.32);
    --text-primary: #f5e8d2;
    --text-secondary: #b8a894;
    --color-accent: #e0922f; /* Laternen-Bernstein - SL-Signaturfarbe */
    --accent: var(--color-accent);
    --accent-blue: var(--color-accent);
    --color-primary: var(--color-accent);
    background-image: url('assets/bg_pirates_.jpg');
}

body.theme-pirates.gm-mode .card-layout {
    background: linear-gradient(135deg, rgba(24,14,7,0.85), rgba(10,6,3,0.88));
    border: 1px solid rgba(224, 146, 47, 0.24);
}

body.theme-pirates.gm-mode .btn-primary {
    background: rgba(22, 14, 6, 0.8);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

body.theme-pirates.gm-mode .btn-primary:hover {
    background: var(--color-accent);
    color: #1a0f04;
    box-shadow: 0 0 15px rgba(224, 146, 47, 0.5);
}

/* Toolbar/Werkzeug-Gruppen des GM-Dashboards waren bisher neutral grau -
   jetzt leicht bernsteinfarben eingefärbt statt reinem Weiß-Alpha, damit
   auch die Chrome selbst nach "Kapitänstisch" statt "Admin-Panel" aussieht. */
body.gm-mode .gm-toolbar { background: rgba(16, 10, 5, 0.66); border-bottom: 1px solid rgba(224, 146, 47, 0.22); }
body.gm-mode .gm-group { background: rgba(16, 10, 5, 0.6); border: 1px solid rgba(224, 146, 47, 0.2); }
body.gm-mode .gm-title { color: var(--color-accent); }

@keyframes waveRoll {
    0% { background-position-x: 0px; }
    100% { background-position-x: -1000px; }
}

@keyframes tentacleRise {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    35% { transform: translateY(-240px) rotate(-6deg); }
    55% { transform: translateY(-255px) rotate(5deg); }
    75% { transform: translateY(-225px) rotate(-4deg); opacity: 1; }
    100% { transform: translateY(20px) rotate(0deg); opacity: 0; }
}

/* Footer Styling */
.site-footer {
    position: relative;
    z-index: 10;
    margin-top: 30px;
    padding: 24px 20px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(3px);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
    gap: 26px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-col { display: flex; flex-direction: column; }

.footer-col h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    font-weight: 700;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.footer-brand-icon { width: 24px; height: auto; }

.footer-tagline {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 42ch;
    margin: 0;
}

.footer-meta {
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.footer-link-btn { width: fit-content; }

.footer-link:hover { color: var(--color-accent); }

.footer-link-ext { font-size: 0.65rem; opacity: 0.5; margin-left: 2px; }

.footer-col-legal {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-secondary);
    border-left: 1px solid var(--glass-border);
    padding-left: 20px;
}

.footer-col-legal p { margin: 0 0 8px 0; }

.footer-col-legal strong { color: var(--text-primary); }

.footer-col-legal a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-col-legal a:hover { color: var(--color-accent); }

.footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px !important; }

.footer-legal-links a { font-size: 0.75rem; text-decoration: none; }

.footer-legal-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; gap: 18px; }
    .footer-col-legal { border-left: 0; padding-left: 0; border-top: 1px solid var(--glass-border); padding-top: 14px; }
}

/* --- Multiplayer GM Dashboard --- */
#gm-live-log li {
    animation: slideIn 0.3s ease-out;
}
#gm-players-grid .glass-panel {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#gm-players-grid .glass-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
#gm-players-grid details summary::-webkit-details-marker {
    display: none;
}
#gm-players-grid details summary::after {
    content: '\f0d7';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    float: right;
    color: #fbbf24;
}
#gm-players-grid details[open] summary::after {
    content: '\f0d8';
}

/* Low HP Warning Animations */
@keyframes lowHpPulse {
    0% { box-shadow: 0 0 5px rgba(237, 66, 69, 0.2); border-color: rgba(237, 66, 69, 0.3); }
    50% { box-shadow: 0 0 15px rgba(237, 66, 69, 0.9); border-color: rgba(237, 66, 69, 1); }
    100% { box-shadow: 0 0 5px rgba(237, 66, 69, 0.2); border-color: rgba(237, 66, 69, 0.3); }
}

@keyframes textPulseDanger {
    0% { color: #ed4245; text-shadow: 0 0 5px rgba(237, 66, 69, 0.2); }
    50% { color: #ff6b6b; text-shadow: 0 0 15px rgba(237, 66, 69, 0.9); }
    100% { color: #ed4245; text-shadow: 0 0 5px rgba(237, 66, 69, 0.2); }
}

.low-hp-warning {
    animation: lowHpPulse 1.5s infinite !important;
    border: 1px solid #ed4245 !important;
}

.hp-text-danger {
    animation: textPulseDanger 1.5s infinite !important;
    font-weight: bold;
}

/* --- GM Dashboard Layout (Sticky-Seitenpanel) --- */
.gm-dashboard-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 2rem;
    flex: 1;
    padding: 1rem;
    align-items: start;
    min-width: 0;
}
.gm-dashboard-grid > * { min-width: 0; }

.gm-side-panel {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
    /* Hoehe = Viewport minus Sticky-Abstand: nie hoeher als der Bildschirm,
       aber auch nie hoeher als noetig -> nichts wird mehr abgeschnitten. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
/* Wuerfel-Box, letzter Spieler-Wurf und Feed-Header behalten ihre Hoehe ... */
.gm-side-panel > div { flex: 0 0 auto; }
/* ... der Live-Feed nimmt den Rest und scrollt in sich selbst. */
.gm-side-panel > #gm-live-log {
    flex: 1 1 auto;
    min-height: 140px;
}

/* Schmale Bildschirme: einspaltig, kein Sticky, volle Hoehe */
@media (max-width: 1100px) {
    .gm-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem 0.5rem;
    }
    .gm-side-panel {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .gm-side-panel > #gm-live-log {
        max-height: 50vh;
        min-height: 200px;
    }
}

/* --- GM Dashboard Toolbar ---
   Eine zusammenhaengende Leiste statt lose verstreuter Chips:
   Zeile 1 = Identitaet + Session, Zeile 2 = beschriftete Werkzeug-Gruppen. */
.gm-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: rgba(10, 10, 15, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    z-index: 50;
}
.gm-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
}
.gm-toolbar-row .gm-toolbar-end { margin-left: auto; }

.gm-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: #ed4245;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
}

/* Werkzeug-Gruppe: eine Karte pro Themenbereich */
.gm-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.35rem 0.65rem;
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    min-width: 0;
}
.gm-group-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}
.gm-group-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.15rem 0.2rem;
    background: rgba(255, 255, 255, 0.15);
}
.gm-group-icon { color: var(--text-secondary); font-size: 0.8rem; }
.gm-group-value {
    font-size: 0.82rem;
    color: #9ca3af;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-group .help-icon { margin-left: 0.1rem; }

/* Gruppe fuer rein lokale Daten: gestrichelt = verlaesst das Geraet nicht */
.gm-group-private {
    background: rgba(139, 92, 246, 0.12);
    border: 1px dashed rgba(168, 85, 247, 0.45);
}
.gm-group-private .gm-group-label { color: #c4b5fd; }

/* Einheitliche Buttons statt gemischter Groessen */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    white-space: nowrap;
    height: 32px;
    padding: 0 0.7rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.gm-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }
.gm-btn:active { transform: scale(0.96); }
.gm-btn-icon { width: 32px; padding: 0; font-size: 0.9rem; }
.gm-btn-ghost { background: transparent; }
.gm-btn-ghost:hover { background: rgba(237, 66, 69, 0.18); border-color: rgba(237, 66, 69, 0.5); }

.gm-select {
    height: 32px;
    max-width: 150px;
    padding: 0 1.7rem 0 0.6rem;
    background-color: rgba(0, 0, 0, 0.55);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 10px 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.gm-select-wide { max-width: 190px; }
.gm-select:focus { border-color: var(--color-accent); }
.gm-select option, .gm-select optgroup { background: #0f172a; color: #f8fafc; }

.gm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    cursor: pointer;
}
.gm-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-accent);
}

.gm-volume {
    width: 70px;
    cursor: pointer;
    accent-color: var(--color-accent);
}

/* Session-Badge: der Raum-Code ist die wichtigste Info oben */
.gm-room-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.35rem 0.8rem;
    background: rgba(237, 66, 69, 0.12);
    border: 1px solid rgba(237, 66, 69, 0.4);
    border-radius: 10px;
}
.gm-room-badge .gm-group-label { color: rgba(255, 138, 140, 0.9); }
.gm-room-badge strong {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    letter-spacing: 3px;
    color: #ed4245;
    text-shadow: 0 0 10px rgba(237, 66, 69, 0.5);
}
#gm-room-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Schmale Screens: Gruppen als volle Zeilen statt als Flickenteppich */
@media (max-width: 760px) {
    .gm-toolbar { padding: 0.75rem; }
    .gm-group, .gm-room-badge { width: 100%; flex-wrap: wrap; }
    .gm-toolbar-row .gm-toolbar-end { margin-left: 0; width: 100%; }
    .gm-select { flex: 1 1 120px; max-width: none; }
    .gm-volume { flex: 1 1 80px; width: auto; }
}

/* Lautstärkeregler des Spielers in der Symbolleiste */
.player-volume-box {
    gap: 0.5rem;
    margin-right: 0.5rem;
    cursor: default;
    /* 5px statt 0.5rem: mit dem 18px hohen Regler drin ergibt das exakt die
       30px der übrigen Symbolleisten-Buttons */
    padding: 5px 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border, rgba(255,255,255,0.15));
}
.player-volume-box:hover { border-color: var(--panel-border, rgba(255,255,255,0.15)); }
.player-volume-box i { opacity: 0.8; font-size: 0.9rem; }
.player-volume {
    width: 70px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-accent);
    vertical-align: middle;
}


/* ============================================================
   Erweiterungen 2.0: Hausregeln, Talentbaum, Tischmitte, Gruppe
   (hausregeln.js / talentbaum.js / tischmitte.js / gruppe.js)

   Alles hier hängt an den Theme-Variablen (--color-accent, --glass-border,
   --text-*) und an .card-layout, damit die 13 Vibes auch die neuen Teile
   einfärben. Feste Farben nur für Bedeutungen, die überall gleich sind
   (HP grün/gelb/rot, Bonus/Malus) - wie beim Rest des Bogens.
   ============================================================ */

/* --- gemeinsame Bausteine ------------------------------------------------- */

/* Karten-Grundoptik wie beim Inventar (.inv-item.card-layout); die Themes
   überschreiben .card-layout mit ihrer eigenen Fläche */
.tm-item, .gr-spieler, .tb-ast, .hr-paket-info {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Aufklappbare Abschnitte: kein Browser-Dreieck, eigener Pfeil */
.x-details > summary { list-style: none; cursor: pointer; outline: none; }
.x-details > summary::-webkit-details-marker { display: none; }
.x-chevron { font-size: 0.7em; opacity: 0.55; transition: transform 0.2s; }
.x-details[open] > summary .x-chevron { transform: rotate(90deg); }

/* Zähler neben Überschriften, wie die GBP-Anzeige: schlicht, mono */
.x-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(0,0,0,0.25);
    color: var(--text-secondary);
}
.x-count-warn { color: var(--color-dmg); border-color: var(--color-dmg); }

/* Hinweiszeile, blendet sich nach ein paar Sekunden aus */
.x-hint { font-size: 0.8rem; min-height: 1.1rem; opacity: 0; transition: opacity 0.3s; color: var(--text-secondary); }
.x-leer { padding: 0.8rem; color: var(--text-secondary); font-size: 0.85rem; text-align: center; }

/* Kleine Knöpfe innerhalb von Karten - Optik wie die ± am Skill */
.x-mini {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
    color: rgba(255,255,255,0.7); width: 22px; height: 22px; font-size: 0.65rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.x-mini:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); }
.x-mini-danger:hover { color: var(--color-dmg); }
/* .x-mini ist fest auf 22x22px für Icon-/Einzelzeichen-Inhalt ausgelegt
   (siehe oben) - für Knöpfe mit echtem Textlabel (z.B. "Zurücksetzen") lief
   der Text deshalb über die winzige Box hinaus und überlappte Nachbar-
   Elemente. .x-mini-label behält Farbe/Optik von .x-mini(-danger), ersetzt
   aber die feste Größe durch Auto-Breite mit Textpolster. */
.x-mini-label { width: auto; height: auto; padding: 0.3rem 0.55rem; font-size: 0.72rem; white-space: nowrap; }

/* Eingaben in den neuen Abschnitten - wie die Item-Felder */
.x-input, .x-select {
    background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 4px;
    color: var(--text-primary); padding: 0.45rem 0.6rem; outline: none;
    font-family: var(--font-main); font-size: 0.85rem; min-width: 0;
}
.x-input:focus, .x-select:focus { border-color: var(--color-accent); }
.x-select option { background: #0f172a; color: #f8fafc; }

/* Sondertabellen-Knopf am Talent (z.B. Kochen, Zechen) */
.btn-skill-tabelle {
    background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
    color: var(--color-accent); width: 22px; height: 22px; font-size: 0.65rem;
    cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.btn-skill-tabelle:hover { border-color: var(--color-accent); }

/* --- Hausregeln-Modal ----------------------------------------------------- */
.hausregeln-modal { max-width: 640px; max-height: 90vh; overflow-y: auto; }
.hausregeln-modal h3 { color: var(--color-accent); }
.hausregeln-modal h4 { margin: 1.1rem 0 0.4rem; color: var(--color-accent); font-size: 0.95rem; font-weight: 600; }
.hr-hint { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0.3rem 0; }
.hr-dim { color: var(--text-secondary); font-size: 0.85rem; }
.hr-select { flex: 1; min-width: 220px; padding: 0.5rem; font-size: 0.9rem; }
.hr-paket-info { padding: 0.7rem 0.9rem; font-size: 0.9rem; line-height: 1.5; border-radius: 8px; }
.hr-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; padding: 0.35rem 0; font-size: 0.88rem; line-height: 1.4; }
.hr-check input { width: 18px; height: 18px; margin-top: 0.1rem; flex-shrink: 0; cursor: pointer; }
.hr-footer { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--glass-border); }
.hr-primary { border-color: var(--color-accent) !important; }

/* --- Talentbaum-Abschnitt auf dem Bogen ----------------------------------- */
.talentbaum-section { margin-top: 2rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--glass-border); }
.talentbaum-section .cat-title { margin-bottom: 0.8rem; }
.talentbaum-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }
.tb-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.tb-punkte { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tb-pill {
    font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap;
    background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
    padding: 0.25rem 0.6rem; border-radius: 6px; color: var(--text-primary);
}
.tb-pill.tb-ueber { color: var(--color-dmg); border-color: var(--color-dmg); }
.tb-auswahl { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.tb-select { flex: 1; min-width: 150px; }
.tb-select-wesen { border-color: var(--color-accent); }
.tb-wesen-effekte { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
/* Wesen-Boni/-Mali in der Optik der Status-Badges */
.tb-effekt { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 12px; line-height: 1.3; max-width: 100%; cursor: help; border: 1px solid; }
.tb-effekt-buff { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.6); color: #86efac; }
.tb-effekt-debuff { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }

.tb-baeume { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.5rem; }
.tb-ast {
    flex: 1 1 0; min-width: 200px; border-radius: 12px; padding: 0.8rem 0.6rem;
    display: flex; flex-direction: column; align-items: center;
    border-top-width: 4px; border-top-color: var(--color-accent);
}
.tb-ast-wesen { border-top-color: var(--color-action); }
.tb-ast-titel { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; text-align: center; color: var(--text-primary); }
/* Rang/SP je Ast als schlichte Textzeile statt eigener Badges - taucht bis zu
   vier Mal auf dem Bogen auf, eine Pille je Zahl summierte sich schnell zu
   einer Wand aus Kapseln. */
.tb-ast-stand { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); text-align: center; margin-bottom: 0.6rem; }
.tb-ast-stand .tb-ueber { color: var(--color-dmg); font-weight: 700; }
.tb-rang { width: 100%; }
.tb-rang-label { font-size: 0.65rem; color: var(--text-secondary); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; margin-bottom: 0.3rem; }
.tb-rang-knoten { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.tb-verbinder { width: 1px; height: 14px; background: var(--glass-border); margin: 0.3rem auto; }

.tb-node {
    width: 80px; min-height: 58px;
    background: rgba(0,0,0,0.25); border: 1px solid var(--glass-border); border-radius: 8px;
    padding: 0.35rem 0.3rem; cursor: pointer; user-select: none;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: border-color 0.15s, background 0.15s;
}
.tb-node:hover { border-color: var(--text-secondary); background: rgba(255,255,255,0.05); }
.tb-node-aktiv { border-color: var(--color-accent); }
.tb-node-max { border-color: var(--color-accent); background: rgba(255,255,255,0.06); }
.tb-node-max .tb-node-level { color: var(--color-accent); }
.tb-node-gesperrt { opacity: 0.35; cursor: not-allowed; }
.tb-node-gesperrt:hover { border-color: var(--glass-border); background: rgba(0,0,0,0.25); }
.tb-node-platzhalter { border-style: dashed; }
.tb-node-form { border-color: var(--color-accent); }
.tb-select-form { width: 100%; margin: 0.3rem 0; }
.tb-node-kopf { display: flex; align-items: flex-start; gap: 0.25rem; }
.tb-node-name { font-size: 0.7rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.tb-art { font-size: 0.6rem; color: var(--text-secondary); flex-shrink: 0; margin-top: 1px; }
.tb-art-aktiv { color: var(--color-action); }
.tb-node-fuss { display: flex; align-items: center; gap: 0.2rem; margin-top: 0.3rem; }
.tb-node-level { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); flex: 1; }
.tb-mini-minus { font-weight: 700; font-size: 0.8rem; }

.tb-details { margin-top: 0.8rem; }
.tb-details > summary { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; font-size: 0.9rem; }
.tb-refresh { margin-left: auto; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 4px; }
/* Schlichte Zeilenliste mit Trennlinie statt eigener Karte je Skill - das
   sind hier potenziell viele Einträge, nicht jeder braucht eine Card-Optik. */
.tb-gelernt-liste { margin-top: 0.5rem; display: flex; flex-direction: column; }
.tb-gelernt {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.2rem;
    font-size: 0.85rem; border-bottom: 1px solid var(--glass-border);
}
.tb-gelernt:last-child { border-bottom: none; }
.tb-gelernt-verbraucht { opacity: 0.45; }
/* Wesen/Monster-Skill, während der Charakter in menschlicher Form ist (RW 5.1: nur in Monsterform nutzbar) */
.tb-gelernt-menschlich { opacity: 0.6; border-left-style: dashed; }
.tb-monsterform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px dashed var(--glass-border); }
.tb-monsterform-an { border: 1px solid #a855f7; background: rgba(168, 85, 247, 0.12); }
/* Token-Ringe (karten.js) */
.kt-figur { padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.kt-ring-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0 0.1rem; }
.kt-ring-farbe { width: 30px; height: 28px; }
.kt-ring-wahl { flex: 0 1 auto; width: auto; max-width: 8.5rem; padding: 0.2rem 0.3rem; font-size: 0.78rem; }
/* Herstellen & Verbrauchen (herstellen.js) */
.herstellen-modal { max-width: 620px; }
.hs-art { margin: 1rem 0 0.4rem; color: var(--color-accent); font-size: 0.95rem; }
.hs-eintrag { padding: 0.5rem 0.7rem; margin-bottom: 0.45rem; border-radius: 8px; background: rgba(255,255,255,0.04); border-left: 3px solid var(--color-accent); }
.hs-teuer { opacity: 0.6; }
.hs-kopf { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.hs-preis { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.8; }
.hs-effekt { font-size: 0.82rem; opacity: 0.85; margin: 0.15rem 0 0.4rem; }
.hs-aktion { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ir-benutzen { background: rgba(87, 242, 135, 0.15); border-color: #57F287; }
.ir-herstellen-btn { margin-bottom: 0.4rem; }
/* Kampf-Tracker: verbrauchte Aktion A/B/Extra dieser Runde */
.sk-aktion-benutzt { opacity: 0.55; text-decoration: line-through; border-color: var(--color-accent); }
/* Meine Eigenschaften im Einsatz */
.tb-einsatz-liste { display: flex; flex-direction: column; gap: 0.45rem; }
.tb-einsatz-zeile { padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(255,255,255,0.04); border-left: 3px solid var(--color-accent); }
.tb-einsatz-text { font-size: 0.82rem; margin: 0.1rem 0 0.3rem; }
.tb-einsatz { display: inline-flex; align-items: center; gap: 0.4rem; }
.tb-einsatz-punkt { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-accent); }
.tb-einsatz-genutzt { background: var(--color-accent); opacity: 0.35; }
.tb-einsatz-wert { font-size: 0.85rem; }
.tb-gelernt-verbraucht .tb-gelernt-text > div:first-child { text-decoration: line-through; }
.tb-gelernt-verwaist { border-bottom-style: dashed; }
.tb-gelernt-text { flex: 1; min-width: 0; }
.tb-gelernt-detail { font-size: 0.75rem; }
/* Volle Stufen-Übersicht pro gelerntem Skill, per Chevron ausklappbar (siehe
   tbGelerntAufklappenToggle) - flex-basis:100% in der flex-wrap-Zeile oben
   zwingt den Block auf eine eigene Zeile statt daneben zu quetschen. */
.tb-gelernt-voll { flex-basis: 100%; margin: 0.3rem 0 0 1.9rem; padding: 0.5rem 0.7rem; background: rgba(255,255,255,0.04); border-radius: 6px; font-size: 0.78rem; color: var(--text-secondary); }
.tb-gelernt-voll p { margin: 0 0 0.4rem 0; }
.tb-gelernt-voll ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.tb-gelernt-voll li { margin: 0.15rem 0; }
.tb-gelernt-voll-aktuell { color: var(--text-primary); font-weight: 600; }
.tb-dim { color: var(--text-secondary); font-size: 0.78rem; }
.tb-check { background: none; border: none; color: var(--color-accent); font-size: 1.1rem; cursor: pointer; padding: 0; flex-shrink: 0; }
.tb-tabellen { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.tb-tabelle-btn { font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 6px; }
.tb-hinweis-box { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--text-secondary); }
.tb-hinweis-box > i { color: var(--color-accent); font-size: 1.3rem; }

@media (max-width: 700px) {
    .tb-baeume { flex-direction: column; }
    .tb-ast { min-width: 0; }
}

/* --- Tischmitte ----------------------------------------------------------- */

/* SL-Panel im Dashboard: gleiche Optik wie die Notizen-Box darunter */
.gm-tischmitte, .gm-nscliste, .gm-quests, .gm-schiff, .gm-seekampf { background: rgba(0,0,0,0.3); padding: 1.2rem 1.5rem; border-radius: 8px; border: 1px solid var(--panel-border); }
.gm-tischmitte .tm-head, .gm-schiff .tm-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.gm-tischmitte .tm-title, .gm-schiff .tm-title { font-weight: bold; color: #fbbf24; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.tm-head-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tm-form {
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
    margin-top: 0.9rem; padding: 0.7rem; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.2);
}
.tm-input { flex: 1 1 140px; }
.tm-input-klein { flex: 0 1 110px; }
.tm-input-desc { flex: 2 1 200px; }
.tm-input-menge { flex: 0 0 70px; text-align: center; }
.tm-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.tm-item { padding: 0.5rem 0.7rem; border-radius: 8px; }
.gm-tischmitte .tm-item, .gm-schiff .tm-item { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); box-shadow: none; }
.gm-tischmitte .tm-item-hidden { border-style: dashed; opacity: 0.75; }
.tm-item-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tm-art-icon { color: var(--text-secondary); width: 1.1rem; text-align: center; }
.tm-item-name { font-weight: 600; flex: 1; min-width: 0; }
.tm-von { font-size: 0.75rem; color: var(--text-secondary); }
.tm-badge { font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 12px; white-space: nowrap; border: 1px solid; }
.tm-badge-visible { color: #86efac; border-color: rgba(34, 197, 94, 0.6); }
.tm-badge-hidden { color: var(--text-secondary); border-color: rgba(255,255,255,0.25); }
.tm-item-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; white-space: pre-wrap; }
.tm-item-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.45rem; }
.tm-geben { max-width: 170px; }
.tm-del { margin-left: auto; }

/* Spieler-Panel auf dem Bogen */
.tischmitte-section { margin-top: 2rem; }
.tischmitte-section .cat-title { margin: 0; }
.tischmitte-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }
.tischmitte-section .tm-list { margin-top: 0.8rem; }
.tm-take { font-size: 0.85rem; padding: 0.3rem 0.8rem; border-radius: 6px; }
.tm-take:disabled { opacity: 0.5; cursor: wait; }
.tm-ablegen { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--glass-border); }
.tm-select { flex: 1; min-width: 160px; }

/* --- NSC-Liste (SL-Übersicht über eigene NPCs) ---------------------------- */
.gm-nscliste .nsc-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.nsc-title { font-weight: bold; color: #fbbf24; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.nsc-head-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.nsc-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.nsc-input { flex: 1 1 140px; }
.nsc-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.gm-nscliste .nsc-item { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.55rem 0.75rem; }
.nsc-item-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nsc-name { font-weight: 600; flex: 1; min-width: 80px; }
.nsc-badge {
    font-size: 0.72rem; color: var(--text-secondary); background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.1rem 0.55rem; white-space: nowrap;
}
.nsc-item-details { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.nsc-notiz { display: block; width: 100%; margin-top: 0.5rem; resize: none; overflow: hidden; min-height: 2.1rem; font-size: 0.82rem; font-family: var(--font-main); }

.nsc-groesse {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: var(--text-secondary); background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.1rem 0.3rem;
}
.nsc-groesse-val { min-width: 1.6em; text-align: center; font-family: var(--font-mono); }

.nsc-bildausschnitt {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.45rem;
}
.nsc-bildausschnitt input[type="range"] {
    flex: 1; max-width: 220px; accent-color: var(--color-accent, #8b5cf6); cursor: pointer;
}

/* Galerie-Auswahl fuer Kartentoken (nscliste.js: nscListeGaleriePicker) */
.nsc-galerie-modal { max-width: 900px; width: 92%; max-height: 82vh; overflow-y: auto; }
.nsc-galerie-gruppe { margin-top: 1rem; }
.nsc-galerie-gruppe:first-of-type { margin-top: 0.5rem; }
.nsc-galerie-gruppe h4 {
    display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem;
    font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em;
}
.nsc-galerie-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem;
}
.nsc-galerie-item {
    background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 8px;
    padding: 0.4rem; cursor: pointer; color: var(--text-secondary); font-size: 0.68rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem; transition: background 0.15s, border-color 0.15s;
}
.nsc-galerie-item:hover { background: rgba(255,255,255,0.1); border-color: var(--color-accent, #8b5cf6); color: var(--text-primary); }
.nsc-galerie-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; background: rgba(0,0,0,0.4); }
.nsc-galerie-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

/* --- Quest-Logbuch --------------------------------------------------------- */
.gm-quests .qs-head, .quest-section .qs-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.qs-title { font-weight: bold; color: #fbbf24; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.qs-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.qs-input { flex: 1 1 140px; }
.qs-input-desc { flex: 2 1 200px; }
.qs-hint { font-size: 0.78rem; color: var(--text-secondary); margin: 0.6rem 0 0; line-height: 1.4; }
.qs-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.gm-quests .qs-item { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.6rem 0.8rem; }
.gm-quests .qs-item-hidden { border-style: dashed; opacity: 0.8; }
.qs-item-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.qs-name { font-weight: 700; flex: 1; min-width: 100px; }
.qs-beschreibung { display: block; width: 100%; margin-top: 0.5rem; resize: none; overflow: hidden; min-height: 2.1rem; font-size: 0.85rem; font-family: var(--font-main); }
.qs-item-desc { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.4rem; white-space: pre-wrap; }
.qs-teil { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--glass-border); }
.qs-teil-titel { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 0.4rem; }
.qs-teil-zeile { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.qs-teil-text { flex: 1; font-size: 0.85rem; min-width: 0; }
.qs-teil-versteckt { opacity: 0.55; font-style: italic; }
.qs-ziel-check { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; cursor: pointer; }
.qs-ziel-check input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--color-accent); }
.qs-ziel-erledigt { text-decoration: line-through; opacity: 0.65; }
.qs-teil-add { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.qs-teil-input { flex: 1; font-size: 0.82rem; padding: 0.32rem 0.5rem; }

/* Spieler-Ansicht: kein Bearbeiten, nur Anzeigen - dafür ohne die versteckte-Optik */
.quest-section { margin-top: 2rem; }
.quest-section .cat-title { margin: 0; }
.quest-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }
.quest-section .qs-list { margin-top: 0.8rem; }
.qs-teil-zeile-spieler { gap: 0.6rem; }
.qs-teil-zeile-spieler i { color: var(--text-secondary); width: 1rem; text-align: center; }

/* Mein Logbuch (spielerlog.js) - eigenes Tagebuch des Spielers */
.spielerlog-section { margin-top: 2rem; }
.spielerlog-section .cat-title { margin: 0; }
.spielerlog-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }
.spielerlog-section .qs-list { margin-top: 0.8rem; }
.sl-teil-input { flex: 1 1 140px; }

.seekampf-section { margin-top: 2rem; }
.seekampf-section .cat-title { margin: 0; }
.seekampf-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }

/* Karte (Eldara-VTT, karten.js) - Spieler-Ansicht */
.karte-section { margin-top: 2rem; }
.karte-section .cat-title { margin: 0; }
.karte-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }
.qs-ziel-icon-erledigt { color: var(--color-heal) !important; }
.qs-hinweise-liste { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--text-secondary); }
.qs-hinweise-liste li { padding: 0.1rem 0; }

/* --- Team-Würfel: Live-Wurf-Feed für Spieler (teamwuerfel.js) ------------- */
.teamwuerfel-section { padding: 1.2rem 1.5rem; }
.teamwuerfel-section .cat-title { margin: 0; }
.teamwuerfel-section .category-icon-fa { color: var(--color-accent); font-size: 1.4rem; width: 36px; text-align: center; }
.tw-liste { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 260px; overflow-y: auto; padding-right: 0.2rem; }
.tw-zeile {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    background: rgba(255,255,255,0.03); padding: 0.4rem 0.6rem; border-radius: 6px;
    border-left: 3px solid var(--tw-farbe, var(--text-secondary));
    animation: slideIn 0.3s ease-out;
}
.tw-zeit { color: var(--text-secondary); font-size: 0.75rem; flex-shrink: 0; }
.tw-name { font-weight: 700; font-size: 0.85rem; color: var(--tw-farbe, var(--text-primary)); flex-shrink: 0; }
.tw-msg { font-size: 0.85rem; color: var(--text-primary); }

/* Letzter Wurf - bewusst AUSSERHALB des <details>, bleibt also auch bei
   eingeklapptem Feed sichtbar (siehe renderTeamwuerfel). */
.tw-letzter {
    background: rgba(0,0,0,0.3); border-radius: 12px; padding: 0.8rem 1rem;
    text-align: center; margin-bottom: 0.8rem;
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid var(--tw-farbe, var(--text-secondary));
    animation: slideIn 0.3s ease-out;
}
.tw-letzter-kopf { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.tw-letzter-name { font-weight: 700; font-size: 0.85rem; color: var(--tw-farbe, var(--text-primary)); }
.tw-letzter-zeit { color: var(--text-secondary); font-size: 0.75rem; }
.tw-letzter-zahl {
    display: block; font-size: 1.9rem; font-weight: 800;
    font-family: var(--font-mono); color: var(--tw-farbe, #fbbf24);
    text-shadow: 0 0 16px rgba(255,255,255,0.15);
}
.tw-letzter-sub { font-size: 0.8rem; color: var(--text-secondary); }

.tw-teilen-toggle {
    display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0;
    font-size: 0.8rem; color: var(--text-secondary); cursor: pointer;
}
.tw-teilen-toggle input { cursor: pointer; }

/* --- Gruppenübersicht für Spieler ----------------------------------------- */
.gruppe-panel { padding: 1.2rem 1.5rem; }
.gruppe-panel h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; margin: 0; }
.gruppe-panel h3 .fa-people-group { color: var(--color-accent); }
/* Die rechte Spalte ist sticky - die Liste bleibt kompakt und scrollt bei vielen Spielern in sich */
.gr-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; max-height: 260px; overflow-y: auto; padding-right: 0.2rem; }
.gr-spieler { padding: 0.45rem 0.6rem; border-radius: 8px; border-left-width: 3px; border-left-color: var(--gr-farbe, var(--text-secondary)); }
.gr-kopf { display: flex; align-items: center; gap: 0.5rem; }
.gr-bild {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--gr-farbe, var(--glass-border)); background: rgba(0,0,0,0.4);
    display: inline-flex; align-items: center; justify-content: center;
}
.gr-bild-leer { color: var(--text-secondary); font-size: 0.85rem; }
.gr-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.gr-hp { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; color: var(--text-secondary); }
.gr-hp i { color: var(--color-dmg); margin-right: 0.2rem; }
.gr-balken { height: 6px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; margin-top: 0.35rem; }
.gr-balken-fuellung { height: 100%; transition: width 0.3s ease; }
.gr-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.4rem; }
.gr-tags .status-badge { cursor: default; font-size: 0.7rem; padding: 0.05rem 0.45rem; box-shadow: none; }


/* --- SL-Eingriff (eingriff.js) -------------------------------------------- */
.eingriff-modal { max-width: 560px; }
.eingriff-modal h3 { color: var(--color-accent); }
.eingriff-modal h4 { margin: 1.1rem 0 0.4rem; color: var(--color-accent); font-size: 0.95rem; font-weight: 600; }
.eg-still { margin-top: 0.3rem; }
.eg-zeile { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; }
.eg-zeile .x-input, .eg-zeile .x-select { flex: 1 1 140px; }
.eg-zeile .eg-klein { flex: 0 1 130px; }
.eg-zeile .tool-btn { flex: 0 0 auto; }
.eg-status-liste { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.eg-st-weg { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.75rem; padding: 0 0 0 0.3rem; opacity: 0.7; }
.eg-st-weg:hover { opacity: 1; }
.gm-eingriff-btn { margin-left: auto; height: 26px; font-size: 0.75rem; padding: 0 0.5rem; }


/* --- Zufallsgenerator (randomizer.js) --------------------------------------
   Bewusst als prominente Karte in der breiten Hauptspalte des Dashboards
   (nicht in der schmalen Seitenleiste) - der SL soll beim Würfeln möglichst
   viele Tabellen auf einen Blick sehen, statt sich durch eine Liste zu
   scrollen. Kennfarbe Türkis/Cyan (#22d3ee) grenzt es von Gold (Würfel-Box),
   Blau (Spieler-Wurf) und Grün (Tischmitte) ab - war vorher generisches
   AI-Violett (#a78bfa), bewusst rausgeworfen. Das Dashboard bleibt absichtlich
   unabhängig vom Charakterbogen-Vibe-Theme (fixe Farbcodierung je Kachel), das
   hier ist also kein --color-accent-Fall. */
.gm-randomizer {
    background: rgba(19, 78, 84, 0.16);
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
}
.rz-details > summary { list-style: none; cursor: pointer; outline: none; }
.rz-details > summary::-webkit-details-marker { display: none; }
.rz-titelzeile { display: flex; align-items: center; gap: 0.8rem; }
.rz-titelzeile .x-chevron { font-size: 0.85rem; opacity: 0.7; }
.rz-titel-icon { font-size: 1.5rem; color: #22d3ee; flex-shrink: 0; }
.rz-titel { font-weight: 800; color: var(--text-primary); font-size: 1.25rem; }
.rz-untertitel { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.1rem; }
.rz-titelzeile .help-icon { margin-left: auto; }
.rz-body { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 1.1rem; }

.rz-generatoren-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.rz-block {
    background: rgba(0,0,0,0.22); border: 1px solid var(--glass-border); border-radius: 8px;
    padding: 0.9rem 1rem;
}
.rz-block-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.7rem; }
.rz-block-kopf .rz-block-titel { margin-bottom: 0; }
.rz-block-titel { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.rz-zeile { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.rz-btn-primary { background: rgba(34,211,238,0.22) !important; border-color: #22d3ee !important; font-weight: 700; }
.rz-nsc-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }
.rz-badge {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: #22d3ee; background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.3);
    border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap;
}
.rz-nsc-hint { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; margin: 0 0 0.8rem 0; }
.rz-kriterien-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin-bottom: 0.9rem; }
.rz-feld { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rz-feld label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
.rz-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rz-tab {
    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: var(--text-secondary);
    padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; cursor: pointer; font-family: inherit;
}
.rz-tab-aktiv { background: rgba(34,211,238,0.18); border-color: #22d3ee; color: var(--text-primary); font-weight: 600; }
.rz-kategorien-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.4rem; }
.rz-kat { min-width: 0; }
.rz-kat-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.rz-tabelle-btn { font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 6px; }
.rz-ergebnis-box {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(34, 211, 238, 0.35); border-radius: 8px;
    padding: 1.1rem 1.3rem; min-height: 3rem;
}
.rz-quelle { font-size: 0.72rem; color: #22d3ee; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; font-weight: 700; }
.rz-ergebnis-text { font-size: 1.1rem; line-height: 1.6; }
.rz-neben { opacity: 0.7; font-size: 0.85em; }
.rz-attribution { font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.6rem; font-style: italic; }
.rz-ergebnis-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.rz-ergebnis-actions .tool-btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }

/* --- Seekampf (Eldara-Hausregel, seekampf.js + battlemap.js) --------------- */
.sk-karten-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; }
.sk-karten-werkzeuge .tool-btn { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
.tool-btn-aktiv { border-color: var(--color-accent) !important; color: var(--text-primary) !important; }
/* Modul-Sichtbarkeit (modul.js) - muss IMMER gewinnen, egal was das jeweilige
   Modul selbst gerade an style.display setzt (siehe Kopfkommentar dort). */
.modul-versteckt { display: none !important; }

/* Erste-Schritte-Tour (tour.js) */
#tour-overlay {
    position: fixed; inset: 0; background: rgba(5,8,15,0.78);
    z-index: 9997; display: none;
}
#tour-overlay.active { display: block; }
.tour-highlight-ziel {
    position: relative !important; z-index: 9998 !important;
    box-shadow: 0 0 0 4px var(--color-accent), 0 0 32px 8px rgba(251,191,36,0.55) !important;
    border-radius: 10px;
    transition: box-shadow 0.2s;
}
.tour-box {
    position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 24px);
    background: rgba(15, 23, 42, 0.97); border: 1px solid var(--panel-border);
    border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    color: white;
}
.tour-box-zentriert { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-box h4 { margin: 0.3rem 0 0.5rem 0; color: var(--color-primary); }
.tour-box p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-light); }
.tour-box-kopf { display: flex; justify-content: space-between; align-items: center; }
.tour-schritt-zaehler { font-size: 0.75rem; color: var(--text-secondary); font-family: var(--font-mono); }
.tour-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: 0.2rem; }
.tour-close:hover { color: var(--text-primary); }
.tour-box-knoepfe { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; gap: 0.5rem; }
.tour-ueberspringen {
    display: block; width: 100%; margin-top: 0.5rem; background: none; border: none;
    color: var(--text-secondary); font-size: 0.75rem; text-decoration: underline; cursor: pointer; text-align: center;
}
.tour-ueberspringen:hover { color: var(--text-primary); }
.sk-canvas {
    width: 100%; height: 420px; display: block; border-radius: 8px;
    border: 1px solid var(--panel-border); background: var(--karte-blatt); touch-action: none; cursor: grab;
}
.sk-mal-art { max-width: 200px; }
.sk-mal-farbe { width: 34px; height: 34px; padding: 2px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: transparent; cursor: pointer; }
.sk-mal-deckkraft-label {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 7px;
    color: var(--text-secondary); font-size: 0.78rem; cursor: pointer;
}
.sk-mal-deckkraft-label input[type="range"] { width: 70px; accent-color: var(--color-accent); cursor: pointer; }
.sk-mal-deckkraft-label span { min-width: 2.4em; text-align: right; font-family: var(--font-mono); }
.sk-raster-farben { display: inline-flex; align-items: center; gap: 0.3rem; }
.sk-raster-farbpunkt { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: inline-block; }
.sk-raster-farbpunkt-aktiv { border-color: var(--color-accent); }

/* Karten-Werkzeuge nach Themenbereich gruppiert statt einer einzigen langen,
   umbrechenden Zeile (karten.js renderKarteGm) - eine Box pro Gruppe mit
   kleiner Überschrift, gleiche Bauart wie .ir-gruppe im Rasterinventar. */
.sk-kt-gruppen { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.8rem 0; }
.sk-kt-gruppe { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 0.6rem 0.8rem; }
.sk-kt-gruppe-titel {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem;
}
.sk-kt-gruppe-titel i { color: var(--color-accent); }
.sk-kt-gruppe-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sk-kt-trenner { width: 1px; align-self: stretch; min-height: 1.6rem; background: rgba(255,255,255,0.12); margin: 0 0.1rem; }

/* Karten-Vollbild (index.html #karte-vollbild-overlay) - die vorhandene
   Leinwand (GM oder Spieler) wandert per appendChild rein/raus, siehe
   karteVollbildOeffnen/karteVollbildSchliessen in karten.js. Unter dem
   Kampf-Popup (2000) und Konfetti (9999), aber über den normalen Panels. */
.karte-vollbild-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(3, 7, 11, 0.97);
    display: flex; flex-direction: column; padding: 1rem;
}
.karte-vollbild-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; flex-shrink: 0; }
.karte-vollbild-werkzeuge .sk-kt-trenner { min-height: 1.8rem; }
.karte-vollbild-schliessen { margin-left: auto; }
.karte-vollbild-leinwand-host { flex: 1; min-height: 0; display: flex; }
.karte-vollbild-leinwand-host .sk-canvas { flex: 1; height: auto; }
.sk-raster-feld { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); }
.sk-num-stepper { display: inline-flex; align-items: stretch; }
.sk-num-stepper button {
    flex: none; width: 1.6rem; padding: 0; line-height: 1; font-size: 0.95rem;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary); cursor: pointer;
}
.sk-num-stepper button:hover:not(:disabled) { background: rgba(255,255,255,0.15); color: var(--text-primary); }
.sk-num-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.sk-num-stepper button:first-child { border-radius: 4px 0 0 4px; border-right: 0; }
.sk-num-stepper button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.sk-num-stepper input[type="number"] { width: 3.4rem; flex: none; border-radius: 0; text-align: center; }
.sk-marker-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.sk-marker-liste { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sk-kopfzeile { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin: 1rem 0; }
.sk-wind-anzeige, .sk-runde-anzeige { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; }
.sk-kompass { width: 36px; height: 36px; flex-shrink: 0; transition: transform 0.4s; }
.sk-initiative-leiste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.sk-init-chip {
    background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); border-radius: 20px;
    padding: 0.25rem 0.7rem; font-size: 0.78rem; color: var(--text-secondary);
}
.sk-init-chip-aktiv { background: rgba(87,194,240,0.18); border-color: var(--color-accent); color: var(--text-primary); font-weight: 700; }
.sk-vorschlaege {
    background: rgba(240,180,41,0.08); border: 1px solid rgba(240,180,41,0.3); border-radius: 8px;
    padding: 0.7rem 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.sk-vorschlaege-titel { font-size: 0.82rem; font-weight: 700; color: #f0b429; }
.sk-vorschlag-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.sk-vorschlag-zeile span { flex: 1 1 160px; }
.sk-neu-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.sk-neu-form .sk-input:first-child { flex: 1 1 180px; }
.sk-input {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
    padding: 0.45rem 0.6rem; color: white; outline: none; font-family: inherit; font-size: 0.85rem;
}
.sk-input:focus { border-color: var(--color-accent); }
.sk-input option { background: #0f172a; color: #f8fafc; }
.sk-input-schmal { max-width: 90px; }
.sk-add-btn {
    background: rgba(87,194,240,0.15); border: 1px solid var(--color-accent); color: var(--text-primary);
    border-radius: 6px; padding: 0.45rem 0.9rem; cursor: pointer; font-family: inherit; font-size: 0.85rem;
}
.sk-add-btn:hover { background: rgba(87,194,240,0.28); }
.sk-einheiten-liste { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; }
.sk-einheit {
    background: rgba(0,0,0,0.25); border: 1px solid var(--glass-border); border-left: 4px solid var(--sk-farbe, var(--color-accent));
    border-radius: 8px; padding: 0.8rem 1rem;
}
.sk-einheit-amzug { box-shadow: 0 0 0 2px var(--color-accent) inset; }
.sk-einheit-gesunken { opacity: 0.6; }
.sk-einheit-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.sk-farbpunkt { width: 10px; height: 10px; border-radius: 50%; background: var(--sk-farbe, var(--color-accent)); flex-shrink: 0; }
.sk-einheit-kopf .sk-name { flex: 1 1 140px; font-weight: 600; }
.sk-name-anzeige { flex: 1 1 140px; font-weight: 600; }
.sk-besitzer-zeile { display: flex; flex-direction: column; gap: 0.35rem; margin: -0.2rem 0 0.6rem 0; }
.sk-besitzer-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sk-besitzer-chip {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px;
    color: var(--text-secondary); font-size: 0.75rem; padding: 0.25rem 0.7rem; cursor: pointer; font-family: inherit;
}
.sk-besitzer-chip:hover { border-color: var(--color-accent); color: var(--text-primary); }
.sk-besitzer-chip-aktiv { background: rgba(87,194,240,0.18); border-color: var(--color-accent); color: var(--text-primary); font-weight: 600; }
.sk-besitzer-chip-gruppe { display: inline-flex; align-items: center; gap: 0.2rem; }
.sk-besitzer-chip-gruppe .sk-badge-groesse { border-radius: 50%; }
.sk-kapitaen-aktiv { color: #fbbf24 !important; border-color: #fbbf24 !important; opacity: 1 !important; }
.sk-struktur-zeile { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.sk-struktur-bar { flex: 1 1 100px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 60px; }
.sk-struktur-fill { height: 100%; background: linear-gradient(90deg, var(--color-heal), var(--color-accent)); transition: width 0.3s; }
.sk-struktur-zahl { font-size: 0.8rem; white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; }
.sk-struktur-max { width: 55px; }
.sk-werte-zeile { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); }
.sk-werte-zeile label { display: flex; flex-direction: column; gap: 0.2rem; }
.sk-werte-input { width: 80px; }
.sk-effekte { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.sk-badge {
    background: color-mix(in srgb, var(--sk-farbe, #f0b429) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--sk-farbe, #f0b429) 40%, transparent);
    color: var(--sk-farbe, #f0b429);
    border-radius: 20px; padding: 0.2rem 0.6rem; font-size: 0.72rem; display: inline-flex; align-items: center; gap: 0.3rem;
}
.sk-badge .sk-farbpunkt { width: 8px; height: 8px; }
.sk-badge-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; opacity: 0.7; }
.sk-badge-x:hover { opacity: 1; }
.sk-badge-groesse { background: none; border: 1px solid currentColor; color: inherit; cursor: pointer; font-size: 0.7rem; line-height: 1; width: 15px; height: 15px; border-radius: 50%; padding: 0; opacity: 0.7; display: inline-flex; align-items: center; justify-content: center; }
.sk-badge-groesse:hover { opacity: 1; }
.sk-aktionen summary { cursor: pointer; font-size: 0.8rem; color: var(--color-accent); user-select: none; margin-top: 0.3rem; }
.sk-aktion-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.sk-mini-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    color: var(--text-secondary); font-size: 0.75rem; padding: 0.3rem 0.6rem; cursor: pointer; white-space: nowrap;
}
.sk-mini-btn:hover { color: var(--text-primary); border-color: var(--color-accent); }
.sk-manoever-referenz { margin-bottom: 1rem; }
.sk-manoever-referenz summary { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); padding: 0.4rem 0; }
.sk-manoever-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.sk-manoever-karte { background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); border-radius: 6px; padding: 0.6rem 0.8rem; }
.sk-manoever-kopf { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 0.3rem; }
.sk-log-details summary { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); padding: 0.4rem 0; }
.sk-log { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.sk-log-zeile { font-size: 0.78rem; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.3rem; }
.sk-log-zeile b { color: var(--text-primary); }

@media (max-width: 700px) {
    .sk-canvas { height: 300px; }
    .rz-generatoren-reihe, .rz-kategorien-grid { grid-template-columns: 1fr; }
}

/* --- SL-Dashboard: sortierbare Panel-Reihenfolge (gmlayout.js) ------------- */
.gm-panels-spalte { display: flex; flex-direction: column; gap: 2rem; }
.gm-panel-slot { position: relative; transition: opacity 0.15s; }
.gm-panel-slot-ziehend { opacity: 0.35; }
.gm-panel-griff {
    display: flex; align-items: center; justify-content: center;
    height: 18px; margin-bottom: 0.35rem; border-radius: 6px;
    color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03);
    cursor: grab; font-size: 0.8rem; transition: color 0.15s, background 0.15s;
}
.gm-panel-griff:hover { color: var(--color-accent); background: rgba(255,255,255,0.08); }
.gm-panel-griff:active { cursor: grabbing; }

/* Sichtbare Warnung, falls localStorage fehlschlägt (siehe speicher.js) -
   bewusst fest oben angeheftet statt eines wegklickbaren Toasts, das ist
   ein echtes Datenverlust-Risiko, kein informativer Hinweis. */
.speicher-warnung-banner {
    position: sticky; top: 0; z-index: 9999;
    background: var(--color-dmg); color: #fff;
    padding: 0.6rem 1rem; text-align: center; font-size: 0.9rem; font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* --- Beziehungsnetz (netzwerk.js) ------------------------------------------ */
.nw-board-container {
    position: relative; overflow: hidden; height: 420px; margin-top: 0.9rem;
    border-radius: 8px; border: 1px solid var(--panel-border);
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.25) 100%);
    cursor: grab; touch-action: none;
}
.nw-board-container:active { cursor: grabbing; }
.nw-board { width: 4000px; height: 4000px; position: absolute; transform-origin: 0 0; }
.nw-thread-layer { position: absolute; top: 0; left: 0; width: 4000px; height: 4000px; pointer-events: none; transform-origin: 0 0; }
.nw-node {
    position: absolute; padding: 0.5rem 1rem; border-radius: 30px;
    background: rgba(15, 23, 42, 0.92); border: 2px solid var(--panel-border);
    color: var(--text-primary); font-weight: 600; font-size: 0.85rem;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.5); user-select: none; white-space: nowrap;
}
.nw-node-pc { border-color: var(--color-accent); color: var(--color-accent); }
.nw-node-nsc { border-color: #fbbf24; color: #fbbf24; }
.nw-node:hover { box-shadow: 0 0 15px rgba(255,255,255,0.25); }
.nw-linie { stroke: var(--text-secondary); stroke-width: 2; stroke-dasharray: 4,4; fill: none; }
.nw-linie-label {
    fill: var(--text-primary); font-size: 12px; font-weight: 700; text-anchor: middle;
    paint-order: stroke; stroke: rgba(15, 23, 42, 0.9); stroke-width: 4px; stroke-linejoin: round;
}
.nw-relation-liste { list-style: none; margin: 0 0 0.4rem 0; padding: 0; max-height: 180px; overflow-y: auto; }
.nw-relation-item {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--panel-border); font-size: 0.85rem;
}
.nw-relation-item:last-child { border-bottom: none; }
.speicher-warnung-banner i { margin-right: 0.4rem; }

/* --- SL-Dashboard: Sprungleiste zu den Panels (gmjump.js) ------------------ */
.gm-jump-bar {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    position: sticky; top: 0; z-index: 30;
    padding: 0.6rem; margin-bottom: -0.6rem;
    background: rgba(10, 10, 15, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--panel-border); border-radius: 8px;
}
.gm-jump-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.65rem; font-size: 0.8rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
    color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.gm-jump-chip:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); border-color: var(--color-accent); }
.gm-jump-chip i { color: var(--color-accent); }
.gm-jump-highlight { animation: mobilenav-blitz 1.2s ease; border-radius: 12px; }

/* --- Aktuelle Werte (aktuelleWerte.js) - größer als die normalen Status-
   Badges, Feedback aus der Runde: der Bereich wirkte zu klein/eng für
   Einträge wie "Waffenschaden Entermesser: 1w6+2". Eigene Klasse statt die
   geteilte .status-badge-Basis zu ändern, damit Status-Effekte unberührt
   bleiben. */
#aktuelle-werte-container.status-tags { gap: 0.7rem; margin-top: 1.1rem; }
.av-badge { font-size: 1rem; padding: 0.4rem 0.9rem; gap: 0.3rem; }
.av-wert-input { font-size: 1rem !important; }

/* --- Rasterinventar: Beschreibung direkt sichtbar (inventarraster.js) ------ */
.ir-desc-wrap { margin-top: 0.5rem; }
.ir-desc-input {
    width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.4rem 0.5rem;
    color: var(--text-primary); font-family: inherit; font-size: 0.85rem; resize: vertical; outline: none; min-height: 2.2rem;
}
.ir-desc-geklemmt { height: 1.8rem; min-height: 0; overflow: hidden; resize: none; }
.ir-desc-mehr {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    font-size: 0.75rem; padding: 0.2rem 0.1rem; text-decoration: underline;
}
.ir-desc-mehr:hover { color: var(--text-primary); }

/* Zoom-Knöpfe im Spieler-Beziehungsnetz (spielernetz.js) - Handy hat kein Mausrad */
.sn-zoom { position: absolute; right: 0.5rem; bottom: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; z-index: 5; }

/* Talentbaum: Hinweis nach Regelwerk-Update (talentbaum.js, tbStandPruefen) */
.tb-reset-hinweis { margin: 0.6rem 0; padding: 0.7rem 0.9rem; border: 1px solid #fbbf24; background: rgba(251,191,36,0.1); border-radius: 8px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tb-reset-hinweis p { margin: 0; }
.tb-reset-hinweis .tool-btn { align-self: flex-start; }

/* --- Regelwerk-Viewer (regelwerk.js) --------------------------------------- */
/* Seitenleiste von rechts, nach dem Vorbild von KINETIK. Schmal (Handy): volle Breite. */
.rb-scrim {
    display: none; position: fixed; inset: 0; z-index: 1100; border: 0; cursor: default;
    background: rgba(0, 0, 0, 0.5);
}
.rb-scrim.rb-offen { display: block; animation: rb-einblenden 0.2s; }
@keyframes rb-einblenden { from { opacity: 0; } }
body.rb-aktiv { overflow: hidden; }
.rb {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1110;
    width: min(560px, 100vw); display: flex; flex-direction: column;
    container-type: inline-size; /* Tabellen werden je nach Breite der Leiste zu Karten */
    background: #0a0f14; color: var(--text-primary);
    border-left: 1px solid var(--glass-border); box-shadow: -10px 0 40px rgba(0,0,0,0.6);
    transform: translateX(105%); visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.25s, visibility 0s 0.28s;
}
.rb.rb-offen { transform: none; visibility: visible; transition-delay: 0s; }
.rb.rb-breit { width: min(980px, 100vw); }
.rb-kopf {
    display: grid; gap: 0.5rem; flex-shrink: 0;
    padding: calc(0.55rem + env(safe-area-inset-top, 0px)) 0.8rem 0.6rem;
    background: rgba(6, 13, 18, 0.98); border-bottom: 1px solid var(--glass-border);
}
.rb-titelzeile { display: flex; align-items: center; gap: 0.3rem; }
.rb-titel { font-size: 1.25rem; letter-spacing: 0.08em; color: var(--color-accent); }
.rb-abstand { flex: 1; }
.rb-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem;
    padding: 0 0.5rem; border-radius: 8px; cursor: pointer; text-decoration: none;
    font-family: var(--font-main); font-size: 0.9rem; color: var(--text-secondary);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
}
.rb-btn:hover { background: rgba(255,255,255,0.14); color: var(--text-primary); }
.rb-btn i { color: var(--color-accent); }
.rb-btn-an { border-color: var(--color-accent); background: rgba(255,255,255,0.12); }
.rb-btn-aus i { opacity: 0.4; }
.rb-tabs { display: flex; gap: 0.35rem; }
.rb-tab {
    flex: 1; padding: 0.4rem 0.6rem; cursor: pointer; border-radius: 8px;
    font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
}
.rb-tab:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.rb-tab-aktiv { color: var(--text-primary); border-color: var(--color-accent); background: rgba(255,255,255,0.12); }
.rb-suche {
    width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; font-family: var(--font-main); font-size: 0.9rem;
    background: rgba(0,0,0,0.4); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text-primary); outline: none;
}
.rb-suche:focus { border-color: var(--color-accent); }
.rb-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }
.rb-pad { padding: 1rem 1.2rem; }
.rb-hinweis { padding: 1rem 1.2rem; color: var(--text-secondary); }
.rb-fehler { color: var(--color-dmg); }

/* Titelblatt, Kapitel, Abschnitte - Bilder behalten ihr Seitenverhältnis (width/height-Attribute
   reservieren den Platz, damit die Seite beim Nachladen nicht springt) */
.rb-deko { display: block; max-width: 100%; height: auto; }
.rb.rb-ohne-bilder .rb-deko { display: none; }
.rb-titelblatt { background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent); }
.rb-titelbild { margin: 0 auto; max-height: min(70vh, 620px); width: auto; }
.rb-titeltext { padding: 1.1rem 1.4rem 1.2rem; display: grid; gap: 0.4rem; justify-items: start; }
.rb-titeltext h1 { margin: 0; font-size: 3.2rem; letter-spacing: 0.1em; line-height: 1; }
.rb-kicker { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent); }
.rb-sub { color: var(--text-secondary); font-size: 0.95rem; }
.rb-kapitel { border-top: 2px solid var(--color-accent); }
.rb-bannerbild { width: 100%; }
.rb-bannertext { padding: 0.9rem 1.4rem 0.7rem; border-bottom: 1px solid var(--glass-border); background: linear-gradient(to bottom, rgba(255,255,255,0.04), transparent); }
.rb-nr { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent); }
.rb-bannertext h2 { margin: 0.15rem 0 0; font-size: 2.1rem; letter-spacing: 0.04em; line-height: 1.05; }
.rb-abschnitt { padding: 0.4rem 1.2rem 1.2rem; }
.rb-abschnitt h3 { font-size: 1.25rem; margin: 1rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--glass-border); color: var(--color-accent); }
.rb-abschnittsbild { width: 100%; margin: 0.6rem 0; border: 1px solid var(--glass-border); border-radius: 4px; }

/* Inhaltsverzeichnis */
.rb-toc { display: grid; gap: 2px; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); }
.rb-toc button { text-align: left; background: none; border: 0; color: var(--text-primary); font: inherit; cursor: pointer; padding: 0.32em 0.4em; border-radius: 4px; }
.rb-toc button:hover { background: rgba(255,255,255,0.1); color: var(--color-accent); }
.rb-toc-kap { font-weight: 700; margin-top: 0.5rem; color: var(--color-accent) !important; }
.rb-toc-abs { padding-left: 1.2em !important; color: var(--text-secondary) !important; font-size: 0.92rem; }

/* Suchtreffer */
.rb-treffer-liste h3 { margin: 0 0 0.6rem; font-size: 1rem; color: var(--text-secondary); }
.rb-treffer-eintrag {
    display: grid; gap: 2px; width: 100%; text-align: left; padding: 0.55rem 0.7rem; margin-bottom: 5px; cursor: pointer;
    font: inherit; color: var(--text-primary); background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border); border-left: 3px solid var(--color-accent); border-radius: 4px;
}
.rb-treffer-eintrag:hover { border-color: var(--color-accent); background: rgba(255,255,255,0.09); }
.rb-treffer-kopf { font-weight: 700; font-size: 0.88rem; color: var(--color-accent); }
.rb-treffer-text { font-size: 0.85rem; line-height: 1.4; color: var(--text-secondary); }
.rb mark, .rb mark.rb-treffer { background: rgba(255, 214, 10, 0.4); color: var(--text-primary); border-radius: 2px; padding: 0 1px; }

/* Fließtext im Stil des Regelwerks */
.rb-inhalt { font-size: 0.97rem; line-height: 1.55; }
.rb-inhalt p { margin: 0 0 0.7em; }
.rb-inhalt h4, .rb-inhalt h5 { font-size: 1.05rem; color: var(--color-accent); margin: 1.1rem 0 0.4rem; }
.rb-inhalt strong { color: #fff; }
.rb-inhalt ul, .rb-inhalt ol { padding-left: 1.3em; margin: 0 0 0.8em; }
.rb-inhalt li { margin: 0.2em 0; }
.rb-inhalt hr { border: 0; border-top: 1px solid var(--glass-border); margin: 1rem 0; }
.rb-inhalt blockquote { margin: 0.8em 0; padding: 0.2em 0.9em; border-left: 3px solid var(--color-accent); color: var(--text-secondary); }
.rb-inhalt code { font-family: var(--font-mono); font-size: 0.9em; background: rgba(255,255,255,0.08); padding: 0 0.3em; border-radius: 3px; }
.rb-inhalt a { color: var(--color-accent); }
.rb-inhalt .tablewrap { overflow-x: auto; margin: 0.8em 0; }
.rb-inhalt table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-accent); font-size: 0.88rem; }
.rb-inhalt th { text-align: left; padding: 0.45em 0.6em; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); background: rgba(255,255,255,0.05); border-bottom: 1px solid var(--glass-border); }
.rb-inhalt td { padding: 0.45em 0.6em; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; }
.rb-inhalt tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
.rb-inhalt td:first-child { font-weight: 600; }

/* Sprung zu einer Tabellenzeile (Talentbaum): kurz aufleuchten */
.rb-blitz td { animation: rb-blitz 2.4s ease; }
@keyframes rb-blitz { 0%, 55% { background: rgba(255, 214, 10, 0.35); } 100% { background: transparent; } }

/* Schmale Leiste (Handy, nicht verbreitert): breite Tabellen als Karten statt seitwärts scrollend */
@container (max-width: 640px) {
    .rb-titeltext h1 { font-size: 2.6rem; }
    .rb-bannertext h2 { font-size: 1.7rem; }
    .rb-inhalt .rb-karten thead { display: none; }
    .rb-inhalt .rb-karten, .rb-inhalt .rb-karten tbody { display: block; width: 100%; border-top: 0; }
    .rb-inhalt .rb-karten tr {
        display: block; margin: 0.55rem 0; padding: 0.5rem 0.75rem;
        background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-left: 3px solid var(--color-accent); border-radius: 6px;
    }
    .rb-inhalt .rb-karten td, .rb-inhalt .rb-karten tr:nth-child(even) td { display: block; padding: 0.12rem 0; border: 0; background: none; }
    .rb-inhalt .rb-karten td:first-child { font-size: 1rem; color: var(--color-accent); margin-bottom: 0.2rem; }
    .rb-inhalt .rb-karten td[data-label]::before {
        content: attr(data-label) ': '; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
    }
}
@media (prefers-reduced-motion: reduce) { .rb { transition: none; } .rb-blitz td { animation: none; } }

/* Sprung-Knopf zum Regelwerk (Talentbaum) */
.tb-rw-btn { opacity: 0.75; }
.tb-rw-btn:hover { opacity: 1; }

/* --- Anflüstern (fluestern.js) --------------------------------------------- */
.fluestern-modal { max-width: 520px; }
.fl-empfaenger { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; align-items: center; }
.fl-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
    padding: 0.3rem 0.65rem; border-radius: 20px; font-size: 0.82rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-secondary);
}
.fl-chip input { display: none; }
.fl-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fl-farbe, var(--color-accent)); opacity: 0.6; }
.fl-chip-an { color: var(--text-primary); border-color: var(--fl-farbe, var(--color-accent)); background: rgba(255,255,255,0.12); }
.fl-chip-an::before { opacity: 1; }
.fl-text { width: 100%; resize: vertical; min-height: 5rem; box-sizing: border-box; }
.fl-fuss { display: flex; justify-content: space-between; align-items: center; margin: 0.4rem 0; }
.fl-h4 { margin: 1rem 0 0.4rem; color: var(--color-accent); font-size: 0.9rem; font-weight: 600; }
.fl-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fl-verlauf li { padding: 0.45rem 0.6rem; background: rgba(0,0,0,0.3); border-radius: 6px; border-left: 3px solid #a855f7; }
.fl-verlauf-kopf { display: block; font-size: 0.72rem; opacity: 0.65; margin-bottom: 0.15rem; }
.fl-verlauf-text { display: block; white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; }

/* Hinweiskarten beim Spieler: bleiben stehen, bis sie als gelesen bestätigt sind */
#fluestern-toasts {
    position: fixed; left: 50%; transform: translateX(-50%); top: calc(0.8rem + env(safe-area-inset-top, 0px));
    z-index: 1600; /* über Regelwerk-Viewer (1100) und Modals, unter dem Kampf-Popup (2000) */
    display: flex; flex-direction: column; gap: 0.5rem; width: min(440px, 94vw); pointer-events: none;
}
#fluestern-toasts:empty { display: none; }
.fl-toast {
    pointer-events: auto; padding: 0.75rem 0.9rem; border-radius: 12px;
    background: rgba(24, 12, 40, 0.97); border: 1px solid #a855f7; box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 18px rgba(168,85,247,0.35);
    animation: fl-herein 0.35s ease;
}
.fl-toast-kopf { font-size: 0.78rem; font-weight: 700; color: #c4a1ff; margin-bottom: 0.35rem; display: flex; gap: 0.4rem; align-items: center; }
.fl-toast-kopf span { margin-left: auto; font-family: var(--font-mono); font-weight: 400; opacity: 0.7; }
.fl-toast-text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: 0.95rem; margin-bottom: 0.6rem; color: var(--text-primary); }
.fl-toast-ok { width: 100%; justify-content: center; }
.fl-zahl { background: #a855f7; color: #fff; border-radius: 10px; padding: 0 0.4rem; font-size: 0.72rem; margin-left: 0.2rem; }
@keyframes fl-herein { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* --- Handouts (handouts.js) und PenNodePaper-Brücke (pnpbridge.js) --------- */
.handouts-modal { max-width: 560px; }
/* Über der Regelwerk-Seitenleiste (1100/1110): ein gezeigtes Handout darf nicht dahinter aufgehen */
#handout-modal-overlay { z-index: 1150; }
.ho-eintrag { padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; background: rgba(0,0,0,0.3); border-radius: 8px; border-left: 3px solid var(--color-accent); }
.ho-kopf { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.ho-kopf span { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.65; }
.ho-bild { display: block; max-width: 100%; max-height: 60vh; margin: 0.3rem auto 0.5rem; border-radius: 6px; }
.ho-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; font-size: 0.95rem; margin-bottom: 0.4rem; }
.ho-aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.pnp-modal { max-width: 520px; }
.pnp-feld { display: block; margin-bottom: 0.7rem; font-size: 0.85rem; }
.pnp-feld input { width: 100%; box-sizing: border-box; margin-top: 0.25rem; }
.pnp-fuss { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.pnp-status-zeile { font-size: 0.85rem; opacity: 0.85; }
.pnp-status-zeile[data-status="verbunden"] { color: var(--color-heal); opacity: 1; }
.pnp-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; background: #6b7280; }
.pnp-punkt[data-status="verbunden"] { background: #57F287; }
.pnp-punkt[data-status="verbinde"] { background: #fee75c; }


/* ---------- Panel-Kopfband ----------
   Überschrift jedes Panels als abgesetztes Band (statt freischwebendem Titel
   im Fließtext, wie im alten How-to-be-a-Hero-Layout): getönt in der Signatur-
   farbe des Themes (--color-accent: Spieler-Grün / SL-Bernstein), Funktions-
   Elemente (Hilfe, Knöpfe, Zähler) sitzen rechts im Band.
   Drei Lagen: (1) erstes Element eines Panels = Band bis an den Rand (hebt das
   Panel-Padding --pk-x/--pk-y auf, oben mit dem Panel-Radius --pk-r); (2) Abschnitt
   im Charakterbogen = Band über die volle Bogenbreite; (3) alles andere (z.B.
   zweites Panel im selben Container) = eigenständiges, abgerundetes Band. */
.glass-panel { --pk-x: 2rem; --pk-y: 2rem; --pk-r: 19px; }
.gruppe-panel, .teamwuerfel-section { --pk-x: 1.5rem; --pk-y: 1.2rem; }
.gm-tischmitte, .gm-nscliste, .gm-quests, .gm-schiff, .gm-seekampf { --pk-x: 1.5rem; --pk-y: 1.2rem; --pk-r: 7px; }
.gm-randomizer { --pk-x: 1.6rem; --pk-y: 1.4rem; --pk-r: 9px; --pk-farbe: #22d3ee; }

.panel-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    margin: 0 0 1rem 0; padding: 0.55rem 1rem;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--pk-farbe, var(--color-accent, #45d694)) 22%, rgba(0,0,0,0.45)),
        color-mix(in srgb, var(--pk-farbe, var(--color-accent, #45d694)) 6%, rgba(0,0,0,0.35)));
    border: 1px solid color-mix(in srgb, var(--pk-farbe, var(--color-accent, #45d694)) 32%, transparent);
    border-radius: 12px;
    font-size: 0.92rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-primary);
}
h2.panel-kopf { justify-content: flex-start; }   /* Band IST die Überschrift (z.B. Lebenspunkte) */
.panel-kopf h2, .panel-kopf h3, .panel-kopf .tm-title, .panel-kopf .qs-title, .panel-kopf .nsc-title {
    margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.panel-kopf .category-icon { width: 26px; height: 26px; }
.panel-kopf .category-icon-fa, .panel-kopf .tm-title > i:not(.x-chevron):not(.help-icon), .panel-kopf .qs-title > i:not(.x-chevron):not(.help-icon),
.panel-kopf .nsc-title > i:not(.x-chevron):not(.help-icon), .panel-kopf h2 > i:not(.x-chevron):not(.help-icon), .panel-kopf h3 > i:not(.x-chevron):not(.help-icon),
.panel-kopf .rz-titel-icon {
    color: var(--pk-farbe, var(--color-accent, #45d694)); font-size: 1em; width: auto;
}
.panel-kopf .help-icon, .panel-kopf .x-count, .panel-kopf button, .panel-kopf select { text-transform: none; letter-spacing: 0; }
details > summary.panel-kopf { cursor: pointer; }
.panel-kopf .rz-titelzeile { flex: 1; }
.panel-kopf .rz-titel { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.panel-kopf .rz-untertitel { letter-spacing: 0; text-transform: none; font-weight: 400; }

/* (1) erstes Element im Panel: Band bis an den Rand */
:is(.glass-panel, .gruppe-panel, .teamwuerfel-section, .gm-tischmitte, .gm-nscliste, .gm-quests, .gm-schiff, .gm-seekampf, .gm-randomizer) > .panel-kopf:first-child,
:is(.glass-panel, .gruppe-panel, .teamwuerfel-section, .gm-tischmitte, .gm-nscliste, .gm-quests, .gm-schiff, .gm-seekampf, .gm-randomizer) > details:first-child > .panel-kopf {
    margin: calc(-1 * var(--pk-y)) calc(-1 * var(--pk-x)) 1.3rem calc(-1 * var(--pk-x));
    border-width: 0 0 1px 0; border-radius: var(--pk-r) var(--pk-r) 0 0; padding: 0.75rem 1.4rem;
}
/* zugeklappt: Band füllt das ganze Panel */
:is(.glass-panel, .gruppe-panel, .teamwuerfel-section, .gm-tischmitte, .gm-nscliste, .gm-quests, .gm-schiff, .gm-seekampf, .gm-randomizer) > details:first-child:only-child:not([open]) > .panel-kopf,
details:is(.glass-panel, .gm-seekampf):not([open]) > .panel-kopf:first-child {
    margin-bottom: calc(-1 * var(--pk-y)); border-bottom-width: 0; border-radius: var(--pk-r);
}
:is(.gm-tischmitte, .gm-nscliste, .gm-quests, .gm-schiff, .gm-seekampf, .gm-randomizer) > details:first-child:not(:only-child):not([open]) > .panel-kopf { margin-bottom: 0; }

/* (2) Abschnitte im Charakterbogen (Fertigkeiten, Inventar, Talentbaum, Tischmitte, Quests …):
   Band über die ganze Bogenbreite, bleibt aber mitten im Panel - ohne Radius und ohne Zug nach oben */
.character-sheet .panel-kopf {
    margin: 1.5rem -2rem 1.2rem -2rem; border-width: 1px 0; border-radius: 0; padding: 0.7rem 1.4rem;
}
.character-sheet > details:not([open]) > .panel-kopf { margin-bottom: 0; }

/* SL-Seitenleiste (Würfel-Box, letzter Spieler-Wurf, Live-Feed): Bänder über die volle Breite,
   Abschnitte haben 1.5rem Innenabstand */
.gm-side-panel .panel-kopf {
    margin: -1.5rem -1.5rem 1.2rem -1.5rem; border-width: 0 0 1px 0; border-radius: 0; padding: 0.7rem 1.4rem;
}
.gm-side-panel > .panel-kopf-leiste { margin: 0; padding: 0.7rem 1.4rem; }
.gm-side-panel .panel-kopf > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.gm-side-panel .panel-kopf .help-icon { margin-left: 0.2rem; }

/* Notizen zugeklappt: Band füllt das ganze Panel (kein <details>, daher per :has) */
.notes-section:has(> #notes-content[style*="display: none"]) > .panel-kopf {
    margin-bottom: calc(-1 * var(--pk-y)); border-bottom-width: 0; border-radius: var(--pk-r);
}

/* Kampf-Tracker: wer gerade am Zug ist (kampf.amZug), gleiche Goldfarbe wie die Markierung auf der Karte */
.sk-einheit.sk-am-zug { border-color: #fbbf24; box-shadow: 0 0 0 1px #fbbf24, 0 0 14px rgba(251,191,36,0.35); }

/* Karten-Pins: Zeilen in der SL-Liste und Infokarte beim Anklicken */
.kt-pins { margin: 0.6rem 0; }
.kt-pin-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.4rem 0; border-top: 1px dashed var(--glass-border); }
.kt-pin-icon { width: 4rem; }
.kt-pin-label { flex: 1 1 130px; min-width: 100px; }
.kt-pin-text { flex: 2 1 200px; min-width: 140px; }
.kt-pin-handout { flex: 1 1 140px; max-width: 220px; }
.kt-pin-popover {
    position: fixed; z-index: 1300; width: min(300px, calc(100vw - 16px));
    background: var(--glass-bg, rgba(7,18,22,0.92)); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--color-accent, #45d694) 45%, transparent); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.kt-pin-popover-kopf { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
.kt-pin-popover-icon { font-size: 1.5rem; }
.kt-pin-popover-text { white-space: pre-wrap; font-size: 0.9rem; color: var(--text-secondary); }

/* Mehrfachauswahl: Sammelleiste und markierte Figuren in der Liste */
.kt-auswahl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.kt-figur-gewaehlt { box-shadow: inset 3px 0 0 #22d3ee; background: rgba(34,211,238,0.07); }

/* Pin-Liste: einklappbar, sortierbar, filterbar */
.kt-pins-kopf { cursor: pointer; font-weight: 700; color: #fbbf24; display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; }
.kt-pins-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0; }
.kt-pins-werkzeuge input[type="search"] { flex: 1 1 160px; min-width: 120px; }

/* Schiffs-Inventar und Kisten: Menge runterzählen (Verbrauch) */
.schiff-menge { display: inline-flex; align-items: center; gap: 0.25rem; }
.schiff-menge-feld { width: 3.6rem; text-align: center; padding: 0.15rem 0.3rem; }