/* ==========================================================================
   AETHELGARD: CHRONIKEN DES GRÜNEN DRACHEN (V2 – KAMPAGNE, SCHMIEDE & KOMBOS)
   Design-System: "Obsidian Grimoire & Emerald Dragon"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    --bg-obsidian: #07090e;
    --bg-deep: #0c1018;
    --bg-panel: rgba(16, 22, 34, 0.86);
    --bg-card: rgba(22, 30, 46, 0.94);
    --border-subtle: rgba(148, 163, 184, 0.15);
    --border-gold: rgba(245, 158, 11, 0.45);
    --border-emerald: rgba(16, 185, 129, 0.48);

    --text-main: #f1f5f9;
    --text-parchment: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    --emerald: #10b981;
    --emerald-glow: rgba(16, 185, 129, 0.35);
    --gold: #f59e0b;
    --gold-bright: #fbbf24;
    --crimson: #ef4444;
    --amethyst: #a855f7;
    --sapphire: #3b82f6;

    --font-display: 'Cinzel', Georgia, serif;
    --font-story: 'Crimson Pro', Georgia, serif;
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-obsidian);
    color: var(--text-main);
    font-family: var(--font-ui);
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

#ambient-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.ambient-backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.13) 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(245, 158, 11, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(168, 85, 247, 0.09) 0%, transparent 45%),
        linear-gradient(180deg, #070a0f 0%, #0b101b 60%, #06080d 100%);
    z-index: -1;
}

/* ==========================================================================
   LOGIN / HELDEN-ERSCHAFFUNG OVERLAY
   ========================================================================== */
.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(circle at center, rgba(11, 16, 27, 0.86) 0%, rgba(5, 7, 11, 0.96) 100%);
    backdrop-filter: blur(12px);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-screen.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.04);
}

.auth-card {
    width: 100%;
    max-width: 530px;
    background: linear-gradient(165deg, rgba(20, 28, 44, 0.96) 0%, rgba(11, 15, 25, 0.98) 100%);
    border: 1px solid var(--border-emerald);
    border-radius: 18px;
    padding: 2.2rem 2.1rem;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.85),
        0 0 40px rgba(16, 185, 129, 0.16);
}

.auth-crest {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.03) 70%);
    border: 1px solid var(--border-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    box-shadow: 0 0 25px var(--emerald-glow);
}

.auth-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 55%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.3rem;
}

.auth-subtitle {
    text-align: center;
    font-family: var(--font-story);
    font-size: 1.08rem;
    color: var(--text-muted);
    margin-bottom: 1.4rem;
    line-height: 1.4;
}

.form-group {
    margin-bottom: 1.05rem;
}

.form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cbd5e1;
    margin-bottom: 0.4rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(9, 13, 22, 0.85);
    color: var(--text-main);
    font-size: 0.96rem;
    font-family: var(--font-ui);
}

.form-input:focus {
    outline: none;
    border-color: var(--emerald);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.class-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}

.class-option {
    background: rgba(13, 18, 30, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.55rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.class-option:hover {
    border-color: rgba(16, 185, 129, 0.45);
    transform: translateY(-2px);
}

.class-option.active {
    background: rgba(16, 185, 129, 0.14);
    border-color: var(--emerald);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.22);
}

.class-option .class-icon {
    font-size: 1.35rem;
    display: block;
    margin-bottom: 0.15rem;
}

.class-option .class-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
    display: block;
}

.class-option .class-bonus {
    font-size: 0.65rem;
    color: #a7f3d0;
    display: block;
    margin-top: 0.12rem;
    line-height: 1.25;
}

.class-option .class-stats-mini {
    display: block;
    margin-top: 0.22rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    padding: 0.12rem 0.3rem;
}

/* Rassen-Spezialität im Heldenbogen */
.race-specialty-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: 10px;
    padding: 0.52rem 0.65rem;
    margin-bottom: 0.65rem;
    cursor: help;
}

.race-spec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.22rem;
}

.race-spec-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: #6ee7b7;
}

.race-switch-pills {
    display: flex;
    gap: 0.2rem;
}

.race-pill-btn {
    background: rgba(9, 13, 22, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 6px;
    padding: 0.12rem 0.32rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.race-pill-btn:hover {
    border-color: var(--gold-bright);
    transform: translateY(-1px);
}

.race-pill-btn.active {
    background: rgba(16, 185, 129, 0.25);
    border-color: var(--emerald);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.race-spec-desc {
    font-size: 0.68rem;
    color: #cbd5e1;
    line-height: 1.32;
}

/* Event Intelligenz/Charisma Check Badges */
.stat-check-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.35rem;
}

.stat-check-badge.pass {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.55);
    color: #6ee7b7;
}

.stat-check-badge.risk {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

.btn-primary {
    width: 100%;
    padding: 0.88rem 1.4rem;
    border: 1px solid rgba(16, 185, 129, 0.6);
    border-radius: 11px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
    margin-top: 0.4rem;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    transform: translateY(-1px);
}

.auth-quick-hint {
    margin-top: 0.95rem;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* ==========================================================================
   HAUPT-DASHBOARD LAYOUT (100vh)
   ========================================================================== */
.dashboard-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px 1fr 212px;
    height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* TOPBAR */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: rgba(10, 14, 23, 0.92);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.brand-emblem {
    font-size: 1.45rem;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #f8fafc;
}

.brand-tag {
    font-size: 0.7rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.38);
    color: #6ee7b7;
    font-weight: 600;
}

.topbar-timer-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(17, 24, 39, 0.88);
    border: 1px solid var(--border-subtle);
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
}

.timer-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.timer-countdown {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-bright);
    min-width: 52px;
    text-align: center;
}

.hand-counter-pill {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--gold-bright);
}

.btn-SimulateHour {
    background: rgba(168, 85, 247, 0.18);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #e9d5ff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-SimulateHour:hover {
    background: rgba(168, 85, 247, 0.35);
    transform: translateY(-1px);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.btn-ghost {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid var(--border-subtle);
    color: #cbd5e1;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ghost:hover {
    color: #ffffff;
    border-color: var(--emerald);
    background: rgba(16, 185, 129, 0.14);
}

/* ==========================================================================
   MITTLERER BEREICH: 3-SPALTEN-GRID
   ========================================================================== */
.dashboard-main {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 330px;
    gap: 0.9rem;
    padding: 0.75rem 1.1rem 0.35rem;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.panel-header {
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(11, 15, 25, 0.6);
}

.panel-title {
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #e2e8f0;
    text-transform: uppercase;
}

.panel-body {
    padding: 0.8rem 0.95rem;
    overflow-y: auto;
    flex: 1;
}

/* LINKES PANEL: HELDENSTATUS, AUSRÜSTUNG & RELIKTE */
.hero-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.hero-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(15, 23, 42, 0.9));
    border: 1px solid var(--border-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.hero-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
}

.hero-title-badge {
    font-size: 0.72rem;
    color: #6ee7b7;
    font-weight: 600;
    margin-top: 0.08rem;
}

.hero-class-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.bar-group {
    margin-bottom: 0.65rem;
    padding: 0.42rem 0.55rem;
    background: rgba(11, 16, 28, 0.55);
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: help;
    transition: border-color 0.2s, background 0.2s;
}

.bar-group:hover {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
}

.bar-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.73rem;
    margin-bottom: 0.28rem;
    font-weight: 600;
}

.bar-track {
    width: 100%;
    height: 9px;
    background: rgba(9, 13, 22, 0.9);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-fill.hp {
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 60%, #f87171 100%);
}

.bar-fill.xp {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 65%, #60a5fa 100%);
}

.bar-fill.clues {
    background: linear-gradient(90deg, #059669 0%, #10b981 60%, #fbbf24 100%);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.left-section-caption {
    font-family: var(--font-display);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.6rem 0 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hint-badge {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.48rem;
}

.stat-tile {
    background: rgba(11, 16, 28, 0.82);
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    padding: 0.5rem 0.62rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: help;
    transition: all 0.18s ease;
    position: relative;
}

.stat-tile:hover {
    border-color: var(--emerald);
    background: rgba(16, 185, 129, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.stat-tile .stat-label {
    font-size: 0.72rem;
    color: #cbd5e1;
    font-weight: 500;
}

.stat-tile .stat-val {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main);
}

.stat-buff {
    color: #34d399;
    font-size: 0.72rem;
    margin-left: 0.2rem;
}

/* Angelegte Ausrüstung & Relikte im linken Panel */
.equip-box {
    margin-top: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: rgba(11, 16, 28, 0.76);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 0.73rem;
}

.equip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.28rem 0.35rem;
    border-radius: 6px;
    cursor: help;
    transition: background 0.18s;
}

.equip-row:hover {
    background: rgba(245, 158, 11, 0.12);
}

.equip-name {
    color: #fde68a;
    font-weight: 600;
}

/* Kosten-Badge in den rechten Aktionsbuttons für bessere Übersicht */
.cost-pill {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.18rem 0.48rem;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--gold-bright);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================================
   SCHWEBENDES INFO-POPOVER (TOOLTIP FÜR WERTE, AUSRÜSTUNG & MECHANIKEN)
   ========================================================================== */
.ui-popover {
    position: fixed;
    z-index: 1500;
    width: 310px;
    background: linear-gradient(165deg, rgba(17, 24, 39, 0.98) 0%, rgba(9, 13, 22, 0.99) 100%);
    border: 1px solid var(--emerald);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.88),
        0 0 22px rgba(16, 185, 129, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ui-popover.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 0.42rem;
    margin-bottom: 0.48rem;
}

.popover-title {
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.popover-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}

.popover-desc {
    font-size: 0.77rem;
    line-height: 1.45;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.popover-formula {
    font-family: var(--font-mono);
    font-size: 0.71rem;
    background: rgba(6, 9, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    padding: 0.4rem 0.55rem;
    color: #fde68a;
    margin-bottom: 0.45rem;
}

.popover-tip {
    font-size: 0.71rem;
    line-height: 1.38;
    color: #6ee7b7;
    border-top: 1px dashed rgba(148, 163, 184, 0.16);
    padding-top: 0.38rem;
}

.relic-pill {
    display: inline-block;
    font-size: 0.66rem;
    padding: 0.16rem 0.45rem;
    margin: 0.15rem 0.15rem 0 0;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #a7f3d0;
}

.hof-list {
    margin-top: 0.7rem;
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.6rem;
}

.hof-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--gold-bright);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.hof-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    padding: 0.22rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
}

/* ==========================================================================
   ZENTRALES PANEL: KAMPAGNEN-TRACKER, BÜHNE & CHRONIK
   ========================================================================== */
.center-panel {
    border-color: rgba(16, 185, 129, 0.28);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Kampagnen- & Spielziel-Leiste (Akte I bis V + Drachenspuren) */
.campaign-tracker {
    padding: 0.65rem 1.1rem;
    background: linear-gradient(90deg, rgba(6, 78, 59, 0.35) 0%, rgba(15, 23, 42, 0.92) 60%, rgba(120, 53, 15, 0.28) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex-shrink: 0;
}

.act-steps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.act-pills {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.act-pill {
    font-size: 0.69rem;
    font-weight: 700;
    padding: 0.22rem 0.58rem;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.act-pill.unlocked:hover {
    border-color: var(--emerald);
    color: #fff;
}

.act-pill.active {
    background: rgba(16, 185, 129, 0.22);
    border-color: var(--emerald);
    color: #6ee7b7;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.act-pill.locked {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Elementar-Resonanz Badge für Karten-Kombos */
.resonance-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.resonance-badge.res-fire { border-color: #f97316; color: #fdba74; background: rgba(234, 88, 12, 0.2); }
.resonance-badge.res-frost { border-color: #38bdf8; color: #bae6fd; background: rgba(2, 132, 199, 0.2); }
.resonance-badge.res-aether { border-color: #a855f7; color: #e9d5ff; background: rgba(147, 51, 234, 0.2); }
.resonance-badge.res-shadow { border-color: #f43f5e; color: #fecdd3; background: rgba(225, 29, 72, 0.2); }

.clues-progress-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.clues-bar-wrap {
    flex: 1;
}

.btn-boss-challenge {
    background: linear-gradient(135deg, #d97706 0%, #b91c1c 100%);
    border: 1px solid #fbbf24;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.38rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.5);
    animation: pulseBoss 1.6s infinite alternate;
}

@keyframes pulseBoss {
    from { transform: scale(1); box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
    to { transform: scale(1.04); box-shadow: 0 0 24px rgba(239, 68, 68, 0.75); }
}

/* Interaktive Bühne */
.encounter-stage {
    padding: 0.85rem 1.15rem;
    background: linear-gradient(180deg, rgba(16, 24, 39, 0.95) 0%, rgba(11, 16, 27, 0.9) 100%);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.stage-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.stage-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid var(--border-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.stage-content {
    flex: 1;
    min-width: 0;
}

.stage-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--emerald);
    margin-bottom: 0.1rem;
}

.stage-heading {
    font-family: var(--font-display);
    font-size: 1.06rem;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.stage-desc {
    font-family: var(--font-story);
    font-size: 1rem;
    line-height: 1.42;
    color: var(--text-parchment);
    user-select: text;
}

.stage-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.btn-choice {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #f1f5f9;
    padding: 0.46rem 0.85rem;
    border-radius: 8px;
    font-size: 0.79rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-choice:hover {
    background: rgba(16, 185, 129, 0.22);
    border-color: var(--emerald);
    transform: translateY(-2px);
}

.btn-choice.combat-atk {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.85), rgba(127, 29, 29, 0.92));
    border-color: rgba(248, 113, 113, 0.55);
}

.monster-hp-wrap {
    margin-top: 0.5rem;
    max-width: 360px;
}

/* Chronik-Logbuch */
.chronicle-feed {
    padding: 0.85rem 1.15rem;
    overflow-y: visible;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    user-select: text;
}

.story-entry {
    background: rgba(13, 18, 29, 0.78);
    border-left: 3px solid var(--emerald);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0 10px 10px 0;
    padding: 0.7rem 0.95rem;
    animation: storySlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-entry.type-card_play {
    border-left-color: var(--gold-bright);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, rgba(13, 18, 29, 0.82) 100%);
}

.story-entry.type-event,
.story-entry.type-event_resolved {
    border-left-color: var(--amethyst);
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.1) 0%, rgba(13, 18, 29, 0.82) 100%);
}

.story-entry.type-combat,
.story-entry.type-combat_round {
    border-left-color: var(--crimson);
}

.story-entry.type-victory {
    border-left-color: #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(13, 18, 29, 0.85) 100%);
}

.story-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.story-title {
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.story-time {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
}

.story-body {
    font-family: var(--font-story);
    font-size: 1.02rem;
    line-height: 1.46;
    color: #e2e8f0;
}

@keyframes storySlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RECHTES PANEL: EXPEDITION, SCHMIEDE, DORF & ALTAR
   ========================================================================== */
.places-section-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: 0.65rem 0 0.35rem;
}

.places-section-label:first-child {
    margin-top: 0;
}

.places-list {
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
}

.place-btn {
    width: 100%;
    text-align: left;
    background: rgba(13, 19, 31, 0.84);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.58rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-main);
}

.place-btn:hover {
    border-color: var(--emerald);
    background: rgba(16, 185, 129, 0.11);
    transform: translateX(3px);
}

.place-btn.primary-forest {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.58) 0%, rgba(15, 23, 42, 0.92) 100%);
    border-color: rgba(16, 185, 129, 0.52);
}

.place-btn.forge-btn {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.28) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.place-btn.forge-btn:hover {
    border-color: var(--gold-bright);
    background: rgba(245, 158, 11, 0.16);
}

.place-icon {
    font-size: 1.3rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    flex-shrink: 0;
}

.place-info {
    flex: 1;
}

.place-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: #f8fafc;
    display: block;
}

.place-sub {
    font-size: 0.69rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.08rem;
}

/* ==========================================================================
   UNTERER BROWSERRAND: HANDKARTEN-DOCK (MAX. 13 KARTEN IM FÄCHER)
   ========================================================================== */
.hand-dock {
    position: relative;
    z-index: 30;
    width: 100%;
    height: 212px;
    background: linear-gradient(180deg, rgba(7, 9, 14, 0) 0%, rgba(8, 12, 20, 0.94) 30%, rgba(6, 9, 15, 0.99) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
}

.hand-dock-header {
    position: absolute;
    top: 4px;
    left: 1.2rem;
    right: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.dock-title-pill {
    pointer-events: auto;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid var(--border-subtle);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
}

.dock-toggle-btn {
    display: none;
    pointer-events: auto;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.55);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
}

.hand-fan {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 182px;
    width: 97%;
    max-width: 1540px;
    padding: 0 1rem;
    perspective: 1100px;
}

.fate-card {
    --offset-from-center: 0;
    width: 145px;
    height: 186px;
    margin: 0 -13px;
    background: linear-gradient(165deg, #1b2436 0%, #0f1522 100%);
    border: 1.5px solid rgba(148, 163, 184, 0.4);
    border-radius: 13px;
    padding: 0.55rem 0.58rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform-origin: bottom center;
    transform:
        translateY(calc(abs(var(--offset-from-center)) * 3.4px))
        rotate(calc(var(--offset-from-center) * 2.1deg));
    transition:
        transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.26s ease,
        border-color 0.26s ease,
        margin 0.26s ease;
    overflow: hidden;
}

.fate-card.rarity-common { border-color: rgba(148, 163, 184, 0.45); }
.fate-card.rarity-rare {
    border-color: rgba(16, 185, 129, 0.7);
    background: linear-gradient(165deg, #132a2e 0%, #0d1624 100%);
}
.fate-card.rarity-epic {
    border-color: rgba(168, 85, 247, 0.78);
    background: linear-gradient(165deg, #27173a 0%, #101322 100%);
}
.fate-card.rarity-legendary {
    border-color: rgba(251, 191, 36, 0.92);
    background: linear-gradient(165deg, #332411 0%, #14121d 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 18px rgba(245, 158, 11, 0.3);
}
.fate-card.rarity-mythic {
    border-color: #34d399;
    background: linear-gradient(165deg, #064e3b 0%, #3b0764 55%, #111827 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 24px rgba(16, 185, 129, 0.55);
}

/* Meisterwerk (+) Veredelungs-Glanz */
.fate-card.is-upgraded {
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(251, 191, 36, 0.38),
        inset 0 0 12px rgba(251, 191, 36, 0.16);
}

/* Wenn Elementar-Kombo für diese Karte aktiv ist! */
.fate-card.combo-ready {
    border-color: #fbbf24 !important;
    box-shadow:
        0 0 25px rgba(251, 191, 36, 0.85),
        0 0 40px rgba(239, 68, 68, 0.45) !important;
}

.combo-ready-ribbon {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.fate-card:hover {
    z-index: 60 !important;
    margin: 0 7px;
    transform: translateY(-46px) scale(1.22) rotate(0deg);
    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.92),
        0 0 28px rgba(16, 185, 129, 0.42);
}

.card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.card-rarity-dot {
    padding: 0.08rem 0.34rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.56rem;
}

.rarity-common .card-rarity-dot { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }
.rarity-rare .card-rarity-dot { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; }
.rarity-epic .card-rarity-dot { background: rgba(168, 85, 247, 0.25); color: #d8b4fe; }
.rarity-legendary .card-rarity-dot { background: rgba(245, 158, 11, 0.28); color: #fde68a; }
.rarity-mythic .card-rarity-dot { background: linear-gradient(90deg, #10b981, #f59e0b); color: #052e16; }

.card-art-orb {
    width: 38px;
    height: 38px;
    margin: 0.1rem auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.38) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.card-title {
    font-family: var(--font-display);
    font-size: 0.71rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    line-height: 1.18;
}

.is-upgraded .card-title {
    color: #fde68a;
}

.card-effect-text {
    font-size: 0.63rem;
    line-height: 1.24;
    color: #cbd5e1;
    text-align: center;
    background: rgba(7, 10, 18, 0.68);
    padding: 0.28rem 0.34rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-actions-bar {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

.btn-card-play {
    flex: 1;
    background: linear-gradient(135deg, #059669, #047857);
    border: 1px solid rgba(110, 231, 183, 0.4);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.24rem 0.28rem;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-card-discard {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
    font-size: 0.62rem;
    padding: 0.24rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
}

/* ==========================================================================
   KARTEN-KODEX & SPIELZIEL MODAL
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(5, 8, 14, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal-backdrop.hidden {
    display: none;
}

.modal-window {
    width: 100%;
    max-width: 980px;
    max-height: 86vh;
    background: rgba(15, 21, 34, 0.97);
    border: 1px solid var(--border-emerald);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9);
}

.modal-header {
    padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 13, 22, 0.8);
}

.modal-body {
    padding: 1.2rem 1.3rem;
    overflow-y: auto;
}

.codex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.codex-card-item {
    background: rgba(20, 28, 44, 0.9);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.7rem;
    font-size: 0.76rem;
}

.codex-card-item.undiscovered {
    opacity: 0.55;
    filter: grayscale(0.5);
}

.flying-card-clone {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    transition: all 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-delta {
    position: fixed;
    z-index: 1000;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    pointer-events: none;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
    animation: floatUpFade 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes floatUpFade {
    0% { opacity: 0; transform: translateY(10px) scale(0.85); }
    20% { opacity: 1; transform: translateY(0) scale(1.06); }
    100% { opacity: 0; transform: translateY(-48px) scale(0.95); }
}

.toast-container {
    position: fixed;
    top: 68px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast-msg {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid var(--emerald);
    color: #f8fafc;
    padding: 0.68rem 1rem;
    border-radius: 10px;
    font-size: 0.82rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
}

.toast-msg.error {
    border-color: var(--crimson);
    color: #fecaca;
}

/* ==========================================================================
   MOBILE & SMARTPHONE VERSION (BASIS-AUSBLENDUNG DESKTOP)
   ========================================================================== */
.mobile-nav-wrapper {
    display: none;
}

/* ==========================================================================
   D&D 3D-WÜRFEL-ARENA (W20 EVENT-SKILL-CHECKS MIT DRAG & THROW / CLICK)
   ========================================================================== */
.btn-choice.selected-dnd-choice {
    border-color: var(--gold-bright) !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.24) 0%, rgba(16, 185, 129, 0.14) 100%) !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.32), inset 0 0 10px rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
}

.choice-selected-indicator {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    margin-right: 0.4rem;
    background: rgba(245, 158, 11, 0.25);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.6);
}

.dnd-dice-arena {
    margin-top: 0.85rem;
    background: radial-gradient(circle at 50% 35%, rgba(30, 41, 59, 0.95) 0%, rgba(9, 13, 22, 0.98) 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 0 24px rgba(245, 158, 11, 0.07);
    position: relative;
    overflow: hidden;
}

.dnd-arena-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.dnd-arena-title {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dnd-arena-hint {
    font-size: 0.72rem;
    color: #cbd5e1;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
}

.dnd-hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.dnd-hud-pill {
    flex: 1;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    text-align: center;
}

.dnd-hud-pill .hud-label {
    display: block;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.dnd-hud-pill .hud-val {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    font-weight: 700;
    color: #f8fafc;
}

.dnd-hud-pill.dc-pill {
    border-color: rgba(245, 158, 11, 0.45);
}

.dnd-hud-pill.dc-pill .hud-val {
    color: #fbbf24;
}

.dnd-hud-pill.mod-pill {
    border-color: rgba(56, 189, 248, 0.45);
}

.dnd-hud-pill.mod-pill .hud-val {
    color: #38bdf8;
}

.dnd-dice-tray {
    position: relative;
    width: 100%;
    height: 168px;
    background:
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, rgba(6, 10, 18, 0.95) 78%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 10px, transparent 10px, transparent 20px);
    border: 2px solid rgba(217, 119, 6, 0.55);
    border-radius: 12px;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.88), 0 4px 14px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    perspective: 900px;
}

/* Dekorativer Runenkreis auf dem Boden des Würfeltellers */
.dnd-tray-rune-ring {
    position: absolute;
    width: 136px;
    height: 136px;
    border: 1px dashed rgba(245, 158, 11, 0.28);
    border-radius: 50%;
    pointer-events: none;
    animation: slowSpinRing 24s linear infinite;
}

.dnd-tray-rune-ring::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
}

@keyframes slowSpinRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dnd-throw-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

/* Echter plastischer 3D-Elfenbein- & Gold-Würfel mit versenkten Würfelaugen (Pips) & Zahlen-Medaillon */
.d20-scene {
    position: relative;
    width: 74px;
    height: 74px;
    cursor: grab;
    z-index: 10;
    transform-style: preserve-3d;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.d20-scene:hover {
    filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.7));
}

.d20-scene.is-dragging {
    cursor: grabbing;
    transition: none;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(251, 191, 36, 0.85));
}

.d20-scene.is-rolling {
    cursor: default;
    pointer-events: none;
}

.d20-shadow {
    position: absolute;
    bottom: -18px;
    left: 50%;
    width: 72px;
    height: 20px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.82) 0%, transparent 72%);
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.2s ease;
}

.d20-scene.is-dragging .d20-shadow {
    width: 88px;
    bottom: -28px;
    opacity: 0.5;
}

/* 3D-Würfelkörper (74×74×74px geschlossener 3D-Kubus) */
.d20-body {
    width: 74px;
    height: 74px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-28deg);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.d20-scene.is-settled .d20-body {
    transform: rotateX(-18deg) rotateY(-22deg) rotateZ(0deg);
}

.d20-scene:not(.is-dragging):not(.is-rolling):not(.is-settled) .d20-body {
    animation: d20IdleFloat 3.6s ease-in-out infinite;
}

@keyframes d20IdleFloat {
    0%, 100% { transform: translateY(0px) rotateX(-22deg) rotateY(-28deg) rotateZ(0deg); }
    50% { transform: translateY(-6px) rotateX(-16deg) rotateY(24deg) rotateZ(3deg); }
}

/* Innere Kern-Platten verhindern jegliche Lücken an den abgerundeten 3D-Würfelkanten */
.d20-core-plane {
    position: absolute;
    inset: 2px;
    background: #78350f;
    border-radius: 8px;
    pointer-events: none;
}
.d20-core-plane.core-x { transform: rotateX(90deg); }
.d20-core-plane.core-y { transform: rotateY(90deg); }
.d20-core-plane.core-z { transform: translateZ(0px); }

/* Die 6 massiven Elfenbein-Gold-Seitenflächen des 3D-Würfels */
.d20-cube-face {
    position: absolute;
    width: 74px;
    height: 74px;
    inset: 0;
    border-radius: 11px;
    background: radial-gradient(circle at 32% 28%, #fffbeb 0%, #fde68a 58%, #d97706 100%);
    border: 2.5px solid #92400e;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.85),
        inset 0 -4px 8px rgba(120, 53, 15, 0.55);
    backface-visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* Realistische 3D-Schattierung je nach Würfelseite */
.d20-cube-face.f-front  {
    transform: translateZ(37px);
    background: radial-gradient(circle at 35% 30%, #fffbeb 0%, #fef08a 52%, #f59e0b 100%);
}
.d20-cube-face.f-top    {
    transform: rotateX(90deg) translateZ(37px);
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fef3c7 65%, #fbbf24 100%);
}
.d20-cube-face.f-right  {
    transform: rotateY(90deg) translateZ(37px);
    background: radial-gradient(circle at 30% 30%, #fef3c7 0%, #fcd34d 55%, #b45309 100%);
}
.d20-cube-face.f-left   {
    transform: rotateY(-90deg) translateZ(37px);
    background: radial-gradient(circle at 30% 30%, #fef3c7 0%, #fcd34d 55%, #b45309 100%);
}
.d20-cube-face.f-bottom {
    transform: rotateX(-90deg) translateZ(37px);
    background: radial-gradient(circle at 50% 50%, #fde68a 0%, #d97706 70%, #78350f 100%);
}
.d20-cube-face.f-back   {
    transform: rotateY(180deg) translateZ(37px);
    background: radial-gradient(circle at 50% 50%, #fef3c7 0%, #f59e0b 65%, #92400e 100%);
}

/* Klassisches 3x3 Raster für echte versenkte 3D-Würfelaugen (Pips) */
.dice-pip-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
}

.dice-pip {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #334155 0%, #0f172a 75%);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(255, 255, 255, 0.65);
}

.dice-pip.corner-pip {
    width: 8px;
    height: 8px;
    position: absolute;
}
.dice-pip.corner-pip.tl { top: 7px; left: 7px; }
.dice-pip.corner-pip.tr { top: 7px; right: 7px; }
.dice-pip.corner-pip.bl { bottom: 7px; left: 7px; }
.dice-pip.corner-pip.br { bottom: 7px; right: 7px; }

/* Vorderseitiges Zahlen-Medaillon (eingebettet in die vordere Würfelfläche) */
.dice-front-medallion {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1e293b 0%, #090d16 90%);
    border: 2px solid #b45309;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.95),
        0 1px 2px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.d20-number-display {
    font-family: var(--font-display);
    font-size: 1.38rem;
    font-weight: 900;
    color: #fef3c7;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.95), 0 2px 3px #000;
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: none;
}

/* Farb-Stadien nach dem Wurf (Erfolg = Smaragd, Nat 20 = Gold, Fehlschlag = Karmesin) */
.d20-scene.roll-pass .d20-cube-face {
    border-color: #047857;
    background: radial-gradient(circle at 32% 28%, #ecfdf5 0%, #6ee7b7 55%, #059669 100%);
}
.d20-scene.roll-pass .dice-front-medallion {
    border-color: #10b981;
    background: radial-gradient(circle at 35% 30%, #065f46 0%, #022c22 90%);
}
.d20-scene.roll-pass .d20-number-display {
    color: #a7f3d0;
    text-shadow: 0 0 14px #34d399, 0 2px 3px #000;
}

.d20-scene.roll-nat20 .d20-cube-face {
    border-color: #fef08a;
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #fde047 50%, #eab308 100%);
    box-shadow: 0 0 24px rgba(250, 204, 21, 0.85), inset 0 0 14px rgba(255, 255, 255, 0.9);
}
.d20-scene.roll-nat20 .dice-front-medallion {
    border-color: #fde047;
    background: radial-gradient(circle at 35% 30%, #854d0e 0%, #422006 90%);
}
.d20-scene.roll-nat20 .d20-number-display {
    color: #fffbeb;
    font-size: 1.5rem;
    text-shadow: 0 0 18px #facc15, 0 2px 3px #000;
}

.d20-scene.roll-fail .d20-cube-face,
.d20-scene.roll-nat1 .d20-cube-face {
    border-color: #991b1b;
    background: radial-gradient(circle at 32% 28%, #fef2f2 0%, #fca5a5 55%, #dc2626 100%);
}
.d20-scene.roll-fail .dice-front-medallion,
.d20-scene.roll-nat1 .dice-front-medallion {
    border-color: #f87171;
    background: radial-gradient(circle at 35% 30%, #7f1d1d 0%, #450a0a 90%);
}
.d20-scene.roll-fail .d20-number-display,
.d20-scene.roll-nat1 .d20-number-display {
    color: #fecaca;
    text-shadow: 0 0 14px #ef4444, 0 2px 3px #000;
}

/* Funken-Partikel beim Aufprall des W20 */
.dnd-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 15;
    animation: dndSparkBurst 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dndSparkBurst {
    0% {
        transform: translate(0, 0) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.1);
        opacity: 0;
    }
}

.dnd-tray-footer {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.btn-dnd-roll-trigger {
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.75);
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.88) 0%, rgba(146, 64, 14, 0.95) 100%);
    color: #fffbeb;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.32);
    transition: all 0.2s ease;
}

.btn-dnd-roll-trigger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(251, 191, 36, 0.52);
    filter: brightness(1.1);
}

.btn-dnd-roll-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Ergebnis-Banner nach dem Würfelwurf */
.dnd-roll-outcome-box {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(251, 191, 36, 0.5);
    animation: storySlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dnd-roll-outcome-box.outcome-pass {
    border-color: rgba(52, 211, 153, 0.65);
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.42) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.dnd-roll-outcome-box.outcome-fail {
    border-color: rgba(248, 113, 113, 0.65);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.38) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.dnd-math-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.42rem 0.75rem;
    border-radius: 8px;
    background: rgba(9, 13, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.6rem;
}

.dnd-math-equation .eq-part {
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.dnd-math-equation .eq-total {
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.22);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.5);
}

.dnd-outcome-stamp {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.45rem;
    letter-spacing: 0.04em;
}

.dnd-outcome-stamp.stamp-pass {
    color: #34d399;
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

.dnd-outcome-stamp.stamp-fail {
    color: #f87171;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.dnd-outcome-story {
    font-family: var(--font-story);
    font-size: 1.02rem;
    line-height: 1.48;
    color: #f1f5f9;
    margin-bottom: 0.7rem;
}

/* ==========================================================================
   VOLLSTÄNDIGE MOBILE & SMARTPHONE VERSION (<= 900px)
   Exakte 100% Bildschirmbreite, echtes vertikales Seiten-Scrolling & Touch-UI
   ========================================================================== */
@media (max-width: 900px) {
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Login & Rassenwahl auf Smartphones scrollbar */
    .auth-screen {
        position: fixed;
        inset: 0;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start !important;
        justify-content: center;
        padding: 0.85rem 0.65rem 2.8rem !important;
    }

    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
        padding: 1.25rem 0.95rem !important;
    }

    .auth-title {
        font-size: 1.45rem;
    }

    .auth-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .class-selector {
        grid-template-columns: 1fr !important;
        gap: 0.45rem;
    }

    .class-option {
        padding: 0.55rem 0.65rem;
        text-align: left;
        display: grid;
        grid-template-columns: 36px 1fr;
        column-gap: 0.55rem;
        align-items: center;
    }

    .class-option .class-icon {
        grid-row: span 3;
        font-size: 1.55rem;
        margin: 0;
        text-align: center;
    }

    /* Haupt-Shell: Natürlicher vertikaler Seitenfluss ohne eingesperrte Scroll-Boxen */
    .dashboard-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding-bottom: 186px !important;
    }

    .dashboard-shell.dock-collapsed {
        padding-bottom: 54px !important;
    }

    /* Topbar kompakt & umbrechend */
    .topbar {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        padding: 0.45rem 0.6rem !important;
    }

    .brand-group {
        min-width: 0;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .brand-title {
        font-size: 0.92rem;
    }

    .brand-tag {
        font-size: 0.62rem;
        padding: 0.1rem 0.42rem;
    }

    .topbar-actions {
        flex-shrink: 0;
        gap: 0.3rem;
    }

    .btn-ghost {
        padding: 0.3rem 0.52rem;
        font-size: 0.7rem;
    }

    .topbar-timer-box {
        order: 3;
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.26rem 0.55rem;
        gap: 0.3rem;
        border-radius: 10px;
    }

    .timer-label,
    .hide-on-xs {
        display: none !important;
    }

    .btn-SimulateHour {
        font-size: 0.66rem;
        padding: 0.22rem 0.5rem;
    }

    /* Sticky Mobile Quick-HUD & Tab-Umschalter oben beim Scrollen */
    .mobile-nav-wrapper {
        display: flex !important;
        flex-direction: column;
        position: sticky;
        top: 0;
        width: 100% !important;
        max-width: 100vw !important;
        background: rgba(9, 13, 22, 0.97);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(16, 185, 129, 0.35);
        z-index: 60;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
    }

    .mobile-hud-strip {
        display: flex;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.3rem 0.4rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        width: 100%;
    }

    .m-hud-pill {
        background: rgba(17, 24, 39, 0.92);
        border: 1px solid var(--border-subtle);
        padding: 0.14rem 0.42rem;
        border-radius: 999px;
        font-family: var(--font-mono);
        font-size: 0.68rem;
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-tab-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.32rem;
        padding: 0.32rem 0.5rem;
        width: 100%;
    }

    .mobile-tab-btn {
        background: rgba(17, 24, 39, 0.85);
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
        border-radius: 8px;
        padding: 0.46rem 0.25rem;
        font-family: var(--font-display);
        font-size: 0.68rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-tab-btn.active {
        background: rgba(16, 185, 129, 0.22);
        border-color: var(--emerald);
        color: #ffffff;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.28);
    }

    /* Hauptbereich & Panels wachsen mit dem Inhalt für flüssiges Seiten-Scrollen */
    .dashboard-main {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0.45rem 0.45rem 0.8rem !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 0 auto;
    }

    .dashboard-main > .panel {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .dashboard-main > .panel.mobile-active-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    .panel-body,
    .center-panel,
    .chronicle-feed {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }

    /* Kampagnen-Tracker, Bühne & 3D-Würfel-Arena mobil */
    .campaign-tracker {
        padding: 0.5rem 0.65rem;
    }

    .act-steps-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .act-pills {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.25rem;
        width: 100%;
    }

    .act-pill {
        font-size: 0.62rem;
        padding: 0.24rem 0.15rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .resonance-badge {
        font-size: 0.65rem;
        width: 100%;
        text-align: center;
    }

    .clues-progress-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .btn-boss-challenge {
        width: 100%;
        text-align: center;
        padding: 0.55rem;
    }

    .encounter-stage {
        padding: 0.65rem 0.7rem;
    }

    .stage-banner {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .stage-icon-box {
        width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }

    .stage-heading {
        font-size: 0.96rem;
        word-break: break-word;
    }

    .stage-desc {
        font-size: 0.92rem;
        word-break: break-word;
    }

    .chronicle-feed {
        padding: 0.6rem 0.65rem;
    }

    .dnd-dice-arena {
        padding: 0.6rem 0.6rem;
        margin-top: 0.6rem;
        width: 100%;
    }

    .dnd-arena-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .dnd-arena-hint {
        font-size: 0.64rem;
        width: 100%;
        text-align: center;
    }

    .dnd-hud-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
        width: 100%;
    }

    .dnd-hud-pill {
        padding: 0.26rem 0.2rem;
        min-width: 0;
    }

    .dnd-hud-pill .hud-label {
        font-size: 0.54rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dnd-hud-pill .hud-val {
        font-size: 0.72rem;
    }

    .dnd-dice-tray {
        height: 142px;
        width: 100%;
    }

    .btn-dnd-roll-trigger {
        width: 100%;
        font-size: 0.76rem;
        padding: 0.6rem 0.65rem;
        min-height: 44px;
        white-space: normal;
        line-height: 1.25;
    }

    .btn-choice {
        width: 100%;
        text-align: left;
        line-height: 1.35;
        padding: 0.58rem 0.68rem;
        min-height: 44px;
        word-break: break-word;
    }

    .stat-check-badge {
        display: inline-block;
        margin-top: 0.25rem;
        margin-left: 0;
    }

    /* Fester Handkarten-Dock am unteren Smartphone-Rand (ein-/ausklappbar & exakt 100vw breit) */
    .hand-dock {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100vw !important;
        height: 174px;
        background: linear-gradient(180deg, rgba(8, 12, 20, 0.98) 0%, rgba(5, 8, 14, 1) 100%);
        border-top: 1.5px solid rgba(245, 158, 11, 0.45);
        box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.85);
        padding-bottom: 0.25rem;
        z-index: 70;
        overflow: hidden;
        transition: height 0.25s ease;
    }

    .hand-dock.is-collapsed {
        height: 38px !important;
        padding-bottom: 0 !important;
    }

    .hand-dock.is-collapsed .hand-fan {
        display: none !important;
    }

    .hand-dock-header {
        left: 0.45rem;
        right: 0.45rem;
        top: 4px;
        gap: 0.3rem;
    }

    .dock-title-pill {
        font-size: 0.6rem;
        padding: 0.16rem 0.48rem;
        max-width: 56%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dock-codex-pill {
        display: none !important;
    }

    .dock-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0.62rem;
        padding: 0.16rem 0.55rem;
    }

    .hand-fan {
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 0.5rem;
        width: 100% !important;
        max-width: 100vw !important;
        height: 142px;
        padding: 0.2rem 0.6rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        perspective: none;
    }

    .fate-card {
        flex: 0 0 124px;
        width: 124px;
        height: 134px;
        margin: 0 !important;
        transform: none !important;
        scroll-snap-align: center;
        padding: 0.38rem 0.42rem;
        touch-action: pan-x manipulation;
    }

    .fate-card:hover,
    .fate-card:active {
        margin: 0 !important;
        transform: translateY(-2px) !important;
    }

    .card-art-orb {
        width: 24px;
        height: 24px;
        font-size: 0.95rem;
        margin: 0 auto;
    }

    .card-title {
        font-size: 0.62rem;
        line-height: 1.12;
    }

    .card-effect-text {
        font-size: 0.54rem;
        line-height: 1.16;
        padding: 0.16rem 0.22rem;
    }

    .btn-card-play,
    .btn-card-discard {
        font-size: 0.58rem;
        padding: 0.22rem 0.25rem;
        min-height: 26px;
    }

    /* Popover & Toast mobil sauber eingepasst */
    .ui-popover {
        width: calc(100vw - 24px) !important;
        max-width: 340px !important;
        left: 12px !important;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        top: 56px;
    }

    .modal-backdrop {
        padding: 0.5rem;
    }

    .modal-window {
        max-height: 92dvh;
    }
}