/* =========================================================
   WINDSURF GAME – CSS CORE
   BLOCK 1: Grundlayout + Header
   ========================================================= */

/* ---------- Globale Variablen ---------- */

:root {
    --app-width: 480px;

    --text: #e5e7eb;
    --text-white: #fff;
    --text-muted: rgba(255, 255, 255, .72);

    --glass-dark:
        linear-gradient(
            135deg,
            rgba(18, 30, 48, .42),
            rgba(8, 15, 30, .52)
        );

    --border-glass: 1px solid rgba(255, 255, 255, .10);

    --blue: #3ea6ff;
    --cyan: #38bdf8;
    --green: #25d366;

    --shadow:
        0 8px 25px rgba(0, 0, 0, .35);
}

/* ---------- Grundlayout ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #0f172a;

    background-color: #020617;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    -webkit-font-smoothing: antialiased;
}

/* ---------- Wetter-Hintergründe ---------- */

body.sunny {
    background-image: url("sunny.jpg");
}

body.cloudy {
    background-image: url("cloudy.jpg");
}

body.rain {
    background-image: url("rain.jpg");
}

body.storm {
    background-image: url("storm.jpg");
}

/* ---------- Globales Hintergrund-Overlay ---------- */

.app-shell::before {
    content: "";

    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at top,
            rgba(15, 23, 42, .18),
            rgba(15, 23, 42, .45)
        );

    pointer-events: none;
    z-index: -1;
}

/* ---------- App Shell ---------- */

.app-shell {
    position: relative;

    width: 100%;
    max-width: var(--app-width);

    min-height: 100vh;

    margin: 0 auto;

    padding-top: 82px;
    padding-bottom: 82px;
}

/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    position: fixed;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 20px);
    max-width: var(--app-width);

    height: 70px;

    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) 95px;

    align-items: center;
    gap: 14px;

    padding: 2px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 30, 48, .42),
            rgba(8, 15, 30, .52)
        );

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;

    box-shadow: var(--shadow);

    overflow: hidden;

    z-index: 50;
}

/* Header-Glaslicht */

.app-header::before {
    content: "";

    position: absolute;

    inset: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent
        );

    pointer-events: none;
}

.app-header::after {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 45px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .04),
            transparent
        );

    pointer-events: none;
}

/* ---------- Header-Spalten ---------- */

.header-box {
    display: flex;
    flex-direction: column;

    justify-content: center;

    height: 100%;
    min-width: 0;
}

.world-box {
    align-items: center;
    justify-content: center;

    padding-left: 2px;

    overflow: visible;
}

.player-box {
    align-items: flex-start;
    justify-content: center;

    min-width: 0;

    padding: 0 2px;
}

.money-box {
    align-items: flex-end;
    justify-content: center;
    gap: 5px;

    padding-right: 2px;
}

/* =========================================================
   KOMPASS
   ========================================================= */

.compass-wrapper {
    position: relative;

    width: 88px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background:
        url("bg/kompass-bg.png")
        center center
        no-repeat;

    background-size: contain;

    filter:
        drop-shadow(
            0 4px 10px rgba(0, 0, 0, .35)
        );

    z-index: 10;
}

/* Wetter */

.compass-weather {
    position: absolute;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 14px;
    line-height: 1;
}

/* Wind */

.compass-wind {
    position: absolute;

    top: 28px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 8px;
    font-weight: 700;

    color: #fff;

    line-height: 1;
}

.compass-wind small {
    margin-top: 2px;

    font-size: 8px;
    font-weight: 600;

    color: rgba(255, 255, 255, .75);

    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Uhrzeit */

.compass-time {
    position: absolute;

    top: 38px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 8px;
    font-weight: 700;

    color: #fff;

    line-height: 1;
}

/* Datum */

.compass-date {
    position: absolute;

    top: 48px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 8px;
    font-weight: 600;

    color: rgba(255, 255, 255, .72);

    line-height: 1;

    white-space: nowrap;
}

/* Wind-Punkt */

.wind-pointer {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 10px;
    height: 10px;

    background: #48ff84;

    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(72, 255, 132, .9);

    transform:
        translate(-50%, -50%)
        rotate(var(--angle, 0deg))
        translateY(-34px);
}

/* =========================================================
   SPIELER-HEADER
   ========================================================= */

/* ---------- XP ---------- */

.xp-text {
    margin-top: 3px;

    font-size: 8px;
    font-weight: 600;

    color: rgba(255, 255, 255, .70);

    line-height: 1;

    letter-spacing: .02em;
}

/* =========================================================
   GELD / COINS / POST – RECHTE HEADER-SPALTE
   Bewusst kompakt: keine großen Pillen, keine unterschiedlichen
   Emoji-Optiken. Alle drei Werte folgen demselben UI-System.
   ========================================================= */

.money-box {
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    padding-right: 1px;
    overflow: visible;
}

.money-row {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    width: 100%;
    min-width: 0;
    height: 25px;

    margin: 0;
    padding: 3px 7px;

    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;

    background: rgba(8, 20, 38, .46);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 3px 10px rgba(0, 0, 0, .20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;
}

.money-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.money-row:first-child::after {
    background: #ffd45a;
}

.money-row:nth-child(2)::after {
    background: #f6c84c;
}

.money-row:last-child::after {
    background: #38bdf8;
}

/* Eigene CSS-Icons für Geld, Coins und Post.
   Dadurch kommt die Darstellung nicht aus dem HTML und es gibt
   keine doppelten Material- oder Emoji-Icons. */

.money-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    font-size: 0;
    line-height: 1;
}

/* Geldschein */
.money-row:first-child .money-icon::before {
    content: "";
    width: 15px;
    height: 10px;
    border: 1.6px solid #ffd45a;
    border-radius: 2px;
    box-sizing: border-box;
}

.money-row:first-child .money-icon::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border: 1.2px solid #ffd45a;
    border-radius: 50%;
}

/* Coin */
.money-row:nth-child(2) .money-icon::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1.7px solid #f6c84c;
    border-radius: 50%;
    box-sizing: border-box;
}

.money-row:nth-child(2) .money-icon::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid #f6c84c;
    border-radius: 50%;
}

/* Briefumschlag */
.money-row:last-child .money-icon::before {
    content: "";
    width: 15px;
    height: 11px;
    border: 1.6px solid #8fdcff;
    border-radius: 2px;
    box-sizing: border-box;
}

.money-row:last-child .money-icon::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-left: 1.4px solid #8fdcff;
    border-bottom: 1.4px solid #8fdcff;
    transform: rotate(-45deg);
    top: 2px;
}

.money-value {
    min-width: 0;
    flex: 1;

    font-size: 11px;
    font-weight: 700;

    color: #f8fafc;

    line-height: 1;
    text-align: right;
    white-space: nowrap;

    text-shadow: 0 1px 3px rgba(0, 0, 0, .42);
}

.money-row:first-child .money-value {
    color: #fff;
}

.money-row:nth-child(2) .money-value {
    color: #ffe08a;
}

.money-row:last-child .money-value {
    font-size: 10px;
    color: #d8f4ff;
}

/* =========================================================
   HEADER – MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .app-header {
        width: calc(100% - 16px);

        height: 90px;

        grid-template-columns:
            112px
            minmax(0, 1fr)
            92px;

        gap: 10px;

        border-radius: 20px;
    }

    .app-shell {
        padding-top: 98px;
    }

    .player-name {
        max-width: 145px;
        font-size: 12px;
    }

    .player-action {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }

    .player-level {
        font-size: 8px;
    }

    .xp-bar {
        height: 4px;
    }

    .xp-text {
        font-size: 8px;
        margin-top: 3px;
    }

    .money-box {
        gap: 4px;
        padding-right: 0;
    }

    .money-row {
        width: 100%;
        min-width: 0;
        height: 24px;
        gap: 5px;
        padding: 3px 6px;
        border-radius: 9px;
    }

    .money-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .money-row:first-child .money-icon::before,
    .money-row:nth-child(2) .money-icon::before,
    .money-row:last-child .money-icon::before {
        font-size: 15px;
    }

    .money-value {
        font-size: 11px;
    }

    .money-row:last-child .money-value {
        font-size: 9px;
    }
}
/* === Main === */
/* =========================================================
   BLOCK 2
   MAIN / STATUS / CARDS / BOTTOM NAV
   ========================================================= */

/* =========================================================
   MAIN
   ========================================================= */

.app-main {
    display: flex;
    flex-direction: column;

    gap: 12px;

    padding: 12px;
}

/* Desktop etwas mehr Innenabstand */

@media (min-width: 600px) {

    .app-main {
        padding-inline: 16px;
    }

}

/* =========================================================
   STATUS-BANNER
   ========================================================= */

.status-banner {
    padding: 10px 12px;

    border-radius: 14px;

    font-size: .8rem;
    line-height: 1.4;

    border: 1px solid transparent;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .7);

    text-shadow:
        0 1px 3px rgba(0, 0, 0, .85);
}

.status-title {
    margin-bottom: 4px;

    font-weight: 600;
}

/* Info */

.status-info {
    background:
        radial-gradient(
            circle at top left,
            rgba(56, 189, 248, .12),
            rgba(15, 23, 42, .25)
        );

    border-color:
        rgba(56, 189, 248, .2);

    color: #e0f2fe;
}

/* Warnung */

.status-warning {
    background:
        radial-gradient(
            circle at top left,
            rgba(250, 204, 21, .26),
            rgba(24, 20, 3, .8)
        );

    border-color: #facc15;

    color: #fefce8;
}

/* Fehler */

.status-error {
    background:
        radial-gradient(
            circle at top left,
            rgba(248, 113, 113, .3),
            rgba(60, 7, 7, .85)
        );

    border-color: #ef4444;

    color: #fee2e2;
}

/* =========================================================
   STANDARD CARD
   ========================================================= */

/* Einheitlicher Textschatten */

.card,
.card * {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, .85);
}

/* =========================================================
   CARD HEADER
   ========================================================= */

.card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;
}

.card-title {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: .9rem;
    font-weight: 600;
}

.card-icon {
    font-size: 1.1rem;
}

/* =========================================================
   CARD BODY
   ========================================================= */

.card-body {
    font-size: .8rem;
}

.card-body p {
    margin: 4px 0;
}

/* =========================================================
   MINI CARDS / STATS
   ========================================================= */

.card-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    margin-top: 8px;
}

.mini-card {
    padding: 6px 8px;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(148, 163, 184, .5);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, .85);
}

.mini-label {
    font-size: .7rem;

    color: #cbd5f5;
}

.mini-value {
    font-size: .9rem;
    font-weight: 600;
}

/* =========================================================
   BENACHRICHTIGUNGEN – BASIS
   ========================================================= */

.notif-list {
    list-style: none;

    padding: 0;
    margin: 0;
}

.notif-list li {
    padding-block: 3px;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav {
    position: fixed;

    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    max-width: var(--app-width);

    height: 70px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 5px 6px;

    overflow-x: auto;

    background:
        rgba(15, 23, 42, .38);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-top:
        1px solid rgba(148, 163, 184, .4);

    box-shadow:
        0 -14px 35px rgba(15, 23, 42, .9);

    z-index: 40;
}

/* Scrollbar */

.bottom-nav::-webkit-scrollbar {
    height: 3px;
}

.bottom-nav::-webkit-scrollbar-thumb {
    background:
        rgba(148, 163, 184, .4);

    border-radius: 999px;
}

/* =========================================================
   NAVIGATION ITEM
   ========================================================= */

.nav-item {
    flex: 0 0 auto;

    display: inline-flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    min-width: 56px;

    padding: 6px 10px;

    background: transparent;

    border:
        1px solid transparent;

    border-radius: 999px;

    color: #e5e7eb;

    font-size: .6rem;

    cursor: pointer;

    outline: none;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, .9);

    transition:
        background .2s ease,
        transform .1s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}

/* Icon */

.nav-icon {
    font-family:
        "Material Symbols Outlined";

    font-weight: 400;
    font-style: normal;

    font-size: 1.6rem;

    line-height: 1;

    color: inherit;

    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

/* Label */

.nav-label {
    white-space: nowrap;
}

/* =========================================================
   NAVIGATION HOVER
   ========================================================= */

.nav-item:not(.active):hover {
    background:
        linear-gradient(
            140deg,
            #00c2ff 0%,
            #0ea5e9 50%,
            #38bdf8 100%
        );

    border-color:
        rgba(148, 163, 184, .7);

    color: #0f172a;

    box-shadow:
        0 0 18px rgba(56, 189, 248, 1),
        0 6px 20px rgba(15, 23, 42, .95);

    text-shadow:
        0 1px 3px rgba(255, 255, 255, .3);
}

/* Klick */

.nav-item:active {
    transform: scale(.94);
}

/* =========================================================
   ANIMATIONEN
   ========================================================= */

@keyframes cardFadeIn {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes levelUpGlow {

    0% {
        box-shadow:
            0 10px 30px rgba(15, 23, 42, .6);
    }

    40% {
        box-shadow:
            0 0 28px rgba(56, 189, 248, 1),
            0 10px 45px rgba(15, 23, 42, .95);
    }

    100% {
        box-shadow:
            0 10px 30px rgba(15, 23, 42, .6);
    }

}

/* =========================================================
   AB HIER: Zusatz-Styles für Modals, Shop, Lager, Notifs
   (dein Grunddesign oben bleibt unverändert)
   ========================================================= */
/* ===========================
   HOME BENACHRICHTIGUNGEN
=========================== */
.notify-entry{
    position:relative;
    display:flex;
    gap:14px;
    align-items:flex-start;

    padding:10px;
    margin-bottom:10px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(18,30,48,.42),
        rgba(8,15,30,.52)
    );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(5px);

    overflow:hidden;

    transition:.25s;
}

.notify-entry:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 35px rgba(0,0,0,.45);
}

    .notify-training{
    border-left:5px solid #28d96f;
}

.notify-job{
    border-left:5px solid #0099ff;
}

.notify-race{
    border-left:5px solid #ffb100;
}

.notify-club{
    border-left:5px solid #9a4dff;
}

.notify-sponsor{
    border-left:5px solid #ff6d00;
}

    .notify-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;

    flex-shrink:0;

    background:rgba(255,255,255,.05);

    border:2px solid rgba(255,255,255,.15);

    box-shadow:
    inset 0 0 15px rgba(255,255,255,.05),
    0 0 20px rgba(0,180,255,.25);
}

    .notify-title{

    color:white;

    font-size:14px;

    font-weight:300;
}

    .notify-text{

    margin-top:4px;

    color:#cdd7e8;

    font-size:12px;
}

    .notify-time{

    margin-left:auto;

    color:#9fb2c8;

    font-size:12px;

    white-space:nowrap;
}

    .notify-rewards{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:12px;
}

/* === Modals allgemein === */

.modal-backdrop.is-open {
    display: flex;
}

.modal-panel {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.92),
        rgba(15, 23, 42, 0.98)
    );
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.95),
        0 0 30px rgba(56, 189, 248, 0.15);
    display: flex;
    flex-direction: column;
    color: #e5e7eb;
}

.modal-panel-wide {
    max-width: 460px;
}

.modal-header h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.modal-close-btn {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1rem;
    cursor: pointer;
}

.modal-intro {
    margin-top: 0;
    margin-bottom: 10px;
    color: #cbd5f5;
    font-size: 0.8rem;
}

/* Buttons im Modal */

.btn-ghost {
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.95);
    color: #e5e7eb;
    font-size: 0.75rem;
    cursor: pointer;
}

/* === Training / Job Karten === */

.training-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.training-item {
    width: 100%;
    border-radius: 14px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: linear-gradient(
        135deg,
        rgba(30, 64, 175, 0.35),
        rgba(15, 23, 42, 0.95)
    );
    text-align: left;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.8rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.85);
}

.training-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.training-desc {
    font-size: 0.75rem;
    color: #cbd5f5;
    margin-bottom: 4px;
}

.training-meta {
    font-size: 0.7rem;
    color: #a5b4fc;
}

/* === Training / Job Karten (neues Layout) === */

.training-card {
    border-radius: 16px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.98));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.training-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.training-level-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: #bfdbfe;
    white-space: nowrap;
}

.training-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    display: inline-block;
}

.training-tag-easy {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.training-tag-medium {
    background: rgba(59, 130, 246, 0.22);
    color: #bfdbfe;
}

.training-tag-hard {
    background: rgba(248, 113, 113, 0.24);
    color: #fecaca;
}

.training-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.training-meta-line {
    font-size: 0.7rem;
    color: #a5b4fc;
}

.training-gear-hint {
    margin-top: 4px;
    font-size: 0.7rem;
    color: #e5e7eb;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px dashed rgba(148, 163, 184, 0.6);
}

.training-gear-hint-danger {
    border-color: rgba(248, 113, 113, 0.8);
    background: rgba(127, 29, 29, 0.85);
}

.training-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Start-Button im Training */

.training-start-btn {
    border-radius: 999px;
    padding: 6px 12px;
    border: none;
    background: linear-gradient(135deg, #22c55e, #86efac);
    color: #022c22;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.training-start-btn:hover {
    filter: brightness(1.05);
}

.training-start-btn:active {
    transform: translateY(1px);
}

/* Job Status-Box */

.job-status-box {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.6);
    margin-bottom: 10px;
}

.job-status-text {
    font-size: 0.8rem;
    color: #e5e7eb;
    margin-bottom: 4px;
}

.job-timer {
    font-size: 0.8rem;
    color: #a5b4fc;
}

.job-error {
    color: #fecaca;
    font-size: 0.75rem;
    margin-top: 4px;
}

.job-item.is-disabled {
    opacity: 0.5;
    cursor: default;
}

/* === Shop === */

.modal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.shop-player-balance {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    font-size: 0.8rem;
    color: #e5e7eb;
}

.shop-item-header-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
}

.shop-item-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.7rem;
    color: #e5e7eb;
}

.shop-item-skill-pill {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.shop-item-level {
    font-size: 0.7rem;
    color: #a5b4fc;
}

.shop-item-price span {
    display: block;
}

.shop-buy-btn.primary {
    background: linear-gradient(135deg, #22c55e, #86efac);
    color: #022c22;
}
.shop-buy-btn.secondary {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #e5e7eb;
}

.shop-item-lock {
    font-size: 0.7rem;
    color: #facc15;
    display: flex;
    align-items: center;
    gap: 3px;
}

.shop-error {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #fecaca;
}

/* Rarity Badges */

.rarity-badge {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
}

.rarity-beginner {
    background: rgba(22, 163, 74, 0.25);
    color: #bbf7d0;
}
.rarity-intermediate {
    background: rgba(59, 130, 246, 0.25);
    color: #bfdbfe;
}
.rarity-pro {
    background: rgba(234, 179, 8, 0.25);
    color: #fef9c3;
}
.rarity-rare {
    background: rgba(139, 92, 246, 0.3);
    color: #e9d5ff;
}

/* === INVENTAR / LAGER === */

.inventory-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inventory-item-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.18), rgba(15, 23, 42, 0.98));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.9);
}

.inventory-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inventory-header-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
}

.inventory-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.inventory-meta {
    font-size: 0.7rem;
    color: #cbd5f5;
}

.inventory-durability {
    font-size: 0.7rem;
    color: #e5e7eb;
}

.durability-bar {
    margin-top: 2px;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    overflow: hidden;
}

.durability-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #f97316);
}

.inventory-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
}

.inventory-sell-price {
    font-size: 0.75rem;
    color: #e5e7eb;
}

.inventory-sell-btn {
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid rgba(248, 250, 252, 0.7);
    background: rgba(15, 23, 42, 0.98);
    color: #fecaca;
    font-size: 0.75rem;
    cursor: pointer;
}

.inventory-sell-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Shop: bereits gekaufte Items optisch hervorheben */
.shop-item-card.shop-item-owned {
    border-color: rgba(96, 165, 250, 0.9);
    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.24), rgba(15, 23, 42, 0.98));
}

/* Inventar: ausgerüstete Items markieren */
.inventory-item-card.inventory-item-equipped {
    border-color: rgba(250, 204, 21, 0.9);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
}

.inventory-equipped-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.6);
    margin-left: 6px;
}

.inventory-skills {
    margin-top: 2px;
}

/* === Training: Ausrüstungs-Slots & Drag & Drop === */

.training-gear-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.training-gear-title {
    margin: 0 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
}

.training-gear-text {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: #cbd5f5;
}

.training-gear-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.training-gear-column {
    border-radius: 14px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.6);
}

.training-gear-column-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #e5e7eb;
}

/* --- NEUES MOBIL-KACHEL-LAYOUT FÜR SLOTS --- */

.training-gear-slot-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    width: 100%;
}

.training-gear-slot {
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px dashed rgba(148, 163, 184, 0.7);

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 60px;
    text-align: left;

    font-size: 0.75rem;
    color: #cbd5f5;

    transition: 0.2s ease;
}

/* Label groß & klar */
.training-gear-slot-label {
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 3px;
    color: #e5e7eb;
}

/* "Hierher ziehen" dezent */
.training-gear-slot-item {
    font-size: 0.72rem;
    opacity: 0.85;
}

/* Hover/Drop Effekt */
.training-gear-slot.is-drag-over {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.training-gear-slot.has-item {
    border-style: solid;
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(15, 23, 42, 0.95);
}

.training-gear-pool-wrapper {
    margin-top: 6px;
}

.training-gear-pool-title {
    font-size: 0.75rem;
    color: #cbd5f5;
    margin-bottom: 4px;
}

.training-gear-pool {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    max-height: none;
    overflow: visible;
    padding: 6px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.6);
}

.training-gear-item {
    font-size: 0.7rem;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: rgba(30, 41, 59, 0.95);
    color: #e5e7eb;
    cursor: grab;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);

    /* Jetzt Kachel statt runde Pills */
    display: block;
    width: 100%;
}

.training-gear-item:hover {
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.training-gear-error {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #fecaca;
}

@media (min-width: 480px) {
    .training-gear-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.inventory-repair-status {
    margin-top: 4px;
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: bold;
}

.inventory-repair-btn {
    margin-top: 6px;
    padding: 6px 10px;
    background: #4b8ef5;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;

    margin-bottom: 8px;
    width: 100%;
    padding: 6px 8px;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
}

.inventory-repair-btn:disabled {
    background: #6b7280;
    cursor: not-allowed;

    background: #4b5563;
    cursor: not-allowed;
}

.repair-progress-box {
    margin-top: 6px;
    background: rgba(255,255,255,0.05);
    padding: 6px;
    border-radius: 6px;
}

.repair-progress-label {
    font-size: 0.75rem;
    color: #8ad1ff;
    margin-bottom: 4px;
}

.repair-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    overflow: hidden;
}

.repair-bar-fill {
    height: 100%;
    background: #3fa7ff;
    width: 0%;
    transition: width 0.5s linear;
}

/* ===========================================
   CLUB OVERVIEW – Stil 2 (Modern / Glass)
   =========================================== */

.club-overview-box {
    background: rgba(255,255,255,0.12);
    padding: 20px;
    border-radius: 20px;
    backdrop-filter: blur(14px);
    box-shadow: 0 0 25px rgba(0,0,0,0.25);
    text-align: center;
    margin-top: 10px;
}

/* Logo */
.club-logo-preview {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 18px;
    background: rgba(255,255,255,0.25);
    padding: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

/* Name */
#club-overview-name {
    font-size: 22px;
    font-weight: 700;
}

/* Tag */
.club-tag {
    color: #58b6ff;
    font-size: 14px;
    margin-top: -4px;
    margin-bottom: 10px;
}

/* Level Block */
.club-level-box {
    margin-top: 10px;
    margin-bottom: 15px;
}

/* EXP bar */
.club-exp-bar {
    width: 100%;
    height: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
    margin: 6px 0;
}

#club-overview-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #3ab4ff, #6edfff);
    border-radius: 20px;
    width: 0%;
}

/* GRID */
.club-info-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    text-align: left;
    font-size: 15px;
}

.club-info-grid strong {
    color: #d9d9d9;
}

/* ===========================================
   Home-Benachrichtigungen: max eine sichtbar, Rest scrollen
   =========================================== */

#home-notifications {
    max-height: 5.5rem;      /* ungefähr Höhe einer Notify-Card */
    overflow-y: auto;
    overflow-x: hidden;
}

#home-notifications .notify-entry {
    margin-bottom: 4px;
}

/* =========================================================
   v38 – Active Activity Cards
   ========================================================= */
.activity-active-card {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.activity-active-head {
    display:flex; align-items:center; gap:8px;
    font-size:.9rem;
}
.activity-active-name {
    margin-top:5px; font-size:1rem; font-weight:800;
}
.activity-active-countdown {
    margin-top:10px; font-size:1.15rem; font-variant-numeric:tabular-nums;
}
.activity-active-countdown strong { font-weight:900; }
.activity-active-end { margin-top:4px; opacity:.68; font-size:.78rem; }
.notify-content { min-width:0; }
.notify-title { overflow-wrap:anywhere; }

/* ===========================================
   HOME GLASS LOOK FOR ALL MODALS
   =========================================== */

.modal-panel,
.modal-panel-wide {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.06)
    ) !important;

    backdrop-filter: blur(10px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;

    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;

    box-shadow:
        0 22px 60px rgba(15, 23, 42, 0.8),
        0 0 35px rgba(0, 194, 255, 0.18) !important; /* Cyan Glow */

    color: #e5e7eb !important;
}

/* Header anpassen */
.modal-header {
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(18px) !important;
}

/* Body */
.modal-body {
    padding: 10px 14px 12px;
    overflow-y: auto;
    font-size: 0.8rem;

    background: transparent !important;
}

/* Footer */
.modal-footer {
    padding: 8px 14px 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    display: flex;
    justify-content: flex-end;
    gap: 6px;

    background: rgba(255, 255, 255, 0.04) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Hintergrund hinter Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 12px;

    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
}

.club-member-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* ==========================
   CLUB / VEREIN
========================== */

.club-dashboard {
    font-size: 0.9rem;
}

.club-member small {
    opacity: 0.6;
    margin-left: 4px;
}

.progress {
    background: rgba(255,255,255,0.15);
    height: 6px;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.progress div {
    height: 100%;
    background: linear-gradient(90deg,#3b82f6,#22d3ee);
}

.mini {
    padding: 4px 6px;
    font-size: 0.7rem;
}

.muted {
    opacity: 0.6;
}

.club-header {
    padding: 12px 14px;
    border-radius: 16px;
    background: radial-gradient(
        circle at top left,
        rgba(56,189,248,0.18),
        rgba(15,23,42,0.95)
    );
    border: 1px solid rgba(148,163,184,0.5);
    box-shadow: 0 16px 34px rgba(15,23,42,0.85);
}

.club-header h3 {
    margin: 0;

    font-size: 1.05rem;
    font-weight: 700;
}

.club-header span {
    font-size: 0.8rem;
    opacity: 0.75;
}

.club-stats {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    opacity: .9;

    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 8px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.club-stats span {
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.4);
    border-radius: 12px;
    padding: 6px 8px;
    text-align: center;
    font-size: 0.75rem;
    box-shadow: 0 8px 18px rgba(15,23,42,0.7);
}

.club-member em {
    font-style: normal;
    font-size: 0.45rem;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
}

.club-member em:contains("leader") {
    background: rgba(250,204,21,0.2);
    color: #fde68a;
}

.club-member em:contains("officer") {
    background: rgba(56,189,248,0.25);
    color: #bfdbfe;
}

.club-member em:contains("member") {
    background: rgba(148,163,184,0.25);
    color: #e5e7eb;
}

.club-log-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #38bdf8;
}

.role-badge {
    font-size: 0.45rem;
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: capitalize;
}

.member-role-select {
    background: rgba(15,23,42,0.95);
    color: #e5e7eb;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    font-size: 0.65rem;
    padding: 3px 8px;
    cursor: pointer;
}

/* Name + Rolle untereinander erlauben */
.member-info {
    display: flex;
    align-items: center;
    gap: 6px;

    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* WICHTIG für Umbruch */
}

/* LANGE NAMEN korrekt umbrechen */
.member-name {
    font-size: 0.85rem;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* Aktionen rechts sauber stapeln */

/* Kick-Button dezent & klar */
.kick-btn {
    background: rgba(248,113,113,0.15);
    border: 1px solid rgba(248,113,113,0.6);
    color: #fecaca;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
}

.kick-btn:hover {
    background: rgba(248,113,113,0.25);
}

/* ===== NICHT IM VEREIN ===== */

.club-empty-intro {
    text-align: center;
    margin-bottom: 16px;
}

.club-empty-text {
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 6px 0 10px;
}

.club-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    font-size: 0.7rem;
}

.club-benefit {
    padding: 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
}

/* Vereinsliste */

.club-join-section h4,
.club-create-section h4 {
    margin-bottom: 6px;
}

.club-list-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
}

.club-list-info span {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Vereins-Gründung */

.club-create-section input {
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.5);
    background: rgba(15,23,42,0.85);
    color: #e5e7eb;
    font-size: 0.75rem;
}

.club-create-section .full {
    width: 100%;
}

.club-full {
    opacity: 0.6;
}

.club-full button {
    background: rgba(148,163,184,0.3) !important;
    color: #cbd5f5;
    cursor: not-allowed;
}

.club-join-success {
    background: linear-gradient(135deg, #22c55e, #4ade80) !important;
    color: #022c22 !important;
    box-shadow: 0 0 18px rgba(34,197,94,0.9);
    animation: joinPop 0.4s ease-out;
}

@keyframes joinPop {
    0%   { transform: scale(0.95); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.club-sort-bar {
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: #cbd5f5;
}

.club-sort-bar select {
    margin-left: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.6);
    color: #e5e7eb;
    font-size: 0.75rem;
}

/* =========================
   CLUB – NO CLUB VIEW
========================= */

.club-no-club {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.club-list-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Vereinsliste */
.club-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;

    list-style: none;
    padding: 0;
    margin: 0;
}

.club-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(148,163,184,0.35);
    margin-bottom: 6px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.club-list-info strong {
    word-break: break-word;
    line-height: 1.2;

    display: block;
    font-size: 0.95rem;
    word-break: break-word;
}

.club-list-meta {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Create Club Box */
.club-create-box {
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(80,180,255,0.18), rgba(0,0,0,0.15));
}

.club-create-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.club-create-form input {
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    outline: none;
    background: rgba(255,255,255,0.9);
}

button.full {
    width: 100%;
}

/* Name Umbruch überall */
.club-member-name,
.club-list-info strong {
    word-break: break-word;
    white-space: normal;
}

.race-result-table th,
.race-result-table td {
    padding: 6px;
    text-align: left;
}

/* ==========================
   RACE RESULT TABLE
========================== */

/* Platzierungen */
.race-result-table tr.place-1 {
    background: linear-gradient(90deg, rgba(255,215,0,0.18), transparent);
    font-weight: 700;
}

.race-result-table tr.place-2 {
    background: linear-gradient(90deg, rgba(192,192,192,0.18), transparent);
    font-weight: 600;
}

.race-result-table tr.place-3 {
    background: linear-gradient(90deg, rgba(205,127,50,0.18), transparent);
    font-weight: 600;
}

/* Medaillen-Icon */
.race-medal {
    margin-right: 4px;
}

/* Spieler selbst */
.race-result-table tr.me {
    background: rgba(34,197,94,0.15);
    font-weight: bold;

    outline: 2px solid rgba(59,130,246,0.6);
    outline-offset: -2px;
    background-color: rgba(59,130,246,0.08);
}

.race-full-results {
    margin-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.15);
    padding-top: 8px;
}

.rank-gold   { background: linear-gradient(90deg,#facc15,#fde68a); }
.rank-silver { background: linear-gradient(90deg,#d1d5db,#f3f4f6); }
.rank-bronze { background: linear-gradient(90deg,#f59e0b,#fde68a); }

.rank-me {
    outline: 2px solid #22c55e;
    font-weight: 600;
}

/* =========================
   GLOBAL RANKING
========================= */

.race-result-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;

    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;

    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.race-result-table th {
    text-align: left;
    padding: 6px 8px;
    color: #9ca3af;
    font-weight: 600;

    text-align: left;
    font-size: 0.65rem;
    color: #94a3b8;
    padding: 6px;
}

.race-result-table td {
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);

    padding: 8px 6px;
    border-bottom: 1px solid rgba(148,163,184,0.12);
}

/* Hover */
.race-result-table tbody tr:hover {
    background: rgba(56,189,248,0.08);
}

/* =========================
   PODIUM
========================= */

.place-1 {
    background: linear-gradient(90deg, rgba(253,224,71,0.25), transparent);
    font-weight: 600;
}

.place-2 {
    background: linear-gradient(90deg, rgba(203,213,225,0.25), transparent);
}

.place-3 {
    background: linear-gradient(90deg, rgba(251,191,36,0.18), transparent);
}

/* Medaillen größer */
.place-1 td:first-child,
.place-2 td:first-child,
.place-3 td:first-child {
    font-size: 0.85rem;
}

/* =========================
   DU-HIGHLIGHT
========================= */

tr.me {
    outline: 1px solid rgba(56,189,248,0.6);
    background: rgba(56,189,248,0.12);
}

.me-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(59,130,246,0.85);
    color: #fff;

    background: #22c55e;
    color: #022c22;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;

    margin-left: 6px;
    padding: 2px 6px;
    font-size: 0.55rem;
    font-weight: 600;
    border-radius: 999px;
    background: #38bdf8;
    color: #082f49;
}

/* =========================
   CLUB BADGE
========================= */

.club-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.55rem;
    border-radius: 6px;
    background: rgba(148,163,184,0.2);
    color: #e5e7eb;
}

/* =========================
   SCORE EMPHASIS
========================= */

.score-strong {
    font-weight: 600;
    color: #e5e7eb;
}

/* =========================
   ENTRY ANIMATION
========================= */

.race-result-table tbody tr {
    animation: fadeUp 0.3s ease-out both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inventory-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.inventory-filters select {
    width: 100%;
    background: rgba(15,23,42,0.9);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.75rem;
}

#training-modal .modal-panel {
    display: flex;
    flex-direction: column;

    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#training-modal .modal-body {
    flex: 1;
    overflow-y: auto;

    flex: 1;
    overflow-y: auto;
}

.training-gear-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-bottom: 8px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.training-gear-filters select {
    width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(148,163,184,0.6);
    color: #e5e7eb;
    font-size: 0.75rem;

    width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(148,163,184,0.6);
    color: #e5e7eb;
    font-size: 0.75rem;
}

/* =========================
   CLUB UI – v1.1.0
   Design Erstellung
   ========================= */

/* ---------- Allgemein ---------- */

.club-section {
    margin-top: 5px;

    margin-top: 0.6rem;
}

.club-section h4 {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    color: #e5e7eb;
}

/* ---------- Vereinsbank ---------- */

.club-bank-box {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    color: #d1d5db;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.club-bank-amount {
    font-weight: 600;
    font-size: 1rem;
    color: #facc15;
}

/* ---------- Mitgliederliste ---------- */

.club-member-list {
    list-style: none;
    padding: 0;

    list-style: none;
    padding: 0;
    margin: 0;
}

.club-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;

    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(148,163,184,0.4);
    border-radius: 12px;
    padding: 6px 8px;
    margin-bottom: 6px;
    box-shadow: 0 8px 18px rgba(15,23,42,0.7);

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 0.35rem;
}

.club-member:hover {
    background: rgba(255,255,255,0.06);
}

/* Rolle / Position */

.club-role-badge {
    font-size: 0.5rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.role-leader {
    background: rgba(250,204,21,0.2);
    color: #fde68a;
    border: 1px solid rgba(250,204,21,0.6);

    background: #f59e0b;
    color: #000;
}

.role-officer {
    background: rgba(56,189,248,0.25);
    color: #bfdbfe;
    border: 1px solid rgba(56,189,248,0.6);

    background: #38bdf8;
    color: #000;
}

.role-member {
    background: rgba(148,163,184,0.25);
    color: #e5e7eb;
    border: 1px solid rgba(148,163,184,0.4);

    background: #9ca3af;
    color: #000;
}

/* Name */

.club-member-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #f3f4f6;
}

/* Aktionen */

.member-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.member-actions select {
    background: rgba(255,255,255,0.08);
    color: #e5e7eb;
    border: none;
    border-radius: 8px;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
}

.member-actions button {
    margin-left: 4px;
    font-size: .75rem;

    font-size: 0.7rem;
    padding: 0.25rem 0.45rem;
    border-radius: 8px;
}

/* ---------- Vereinslog ---------- */

.club-log-box {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.club-log-list {
    font-size: .75rem;
    opacity: .85;

    list-style: none;
    padding: 0;
    font-size: 0.8rem;

    list-style: none;
    padding: 0;
    margin: 0;
}

.club-log-list li {
    margin-bottom: 4px;
    opacity: 0.85;

    padding-left: 10px;
    position: relative;

    padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 0.35rem;
    color: #e5e7eb;
}

.club-log-list li small {
    display: block;
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}

/* ---------- Forschung ---------- */

.research-active {
    margin-bottom: 10px;

    padding: 10px;
    border-radius: 14px;
    background: radial-gradient(
        circle at top left,
        rgba(34,197,94,0.18),
        rgba(15,23,42,0.95)
    );
    border: 1px solid rgba(34,197,94,0.6);
    box-shadow: 0 14px 28px rgba(15,23,42,0.85);

    background: rgba(56,189,248,0.15);
    border-radius: 12px;
    padding: 0.7rem;
    margin-bottom: 0.6rem;
}

.research-active strong {
    font-size: 0.85rem;
}

.research-active .progress {
    background: rgba(255,255,255,.1);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;

    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.35rem 0;
}

.research-active .bar {
    height: 100%;
    background: linear-gradient(90deg,#22c55e,#4ade80);

    height: 100%;
    background: #38bdf8;
}

.research-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.research-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 0.35rem;
}

/* ---------- Scrollbar (sanft) ---------- */

.club-log-box::-webkit-scrollbar {
    width: 6px;
}

.club-log-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
}

/* ---------- Club Content Spacing ---------- */

.club-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.club-modal-body {
    padding-bottom: 1.2rem;
}

.club-level-inline {
    margin-left: 6px;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(250,204,21,0.18);
    color: #fde68a;
    border: 1px solid rgba(250,204,21,0.6);
}

.club-member-count {
    font-size: 0.75rem;
    opacity: 0.75;
    margin-left: 6px;
}

.member-actions button,
.member-actions select {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.7rem;
    border: 1px solid rgba(148,163,184,0.6);
    background: rgba(15,23,42,0.95);
    color: #e5e7eb;
}

.member-actions button:hover,
.member-actions select:hover {
    background: rgba(56,189,248,0.15);
    border-color: rgba(56,189,248,0.8);
}

.member-actions .danger {
    background: rgba(248,113,113,0.15);
    border-color: rgba(248,113,113,0.6);
    color: #fecaca;
}

.member-actions .danger:hover {
    background: rgba(248,113,113,0.25);
}

.research-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    opacity: 0.85;
}

.research-card {
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 6px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: 0 10px 24px rgba(15,23,42,0.8);
}

.research-card.locked {
    opacity: 0.6;
}

.research-actions {
    flex-shrink: 0;
}

.btn-research {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #86efac);
    color: #022c22;
}

.btn-research:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================
   CLUB RESEARCH UI
   ========================= */

.club-research-active-card {
    background: linear-gradient(
        135deg,
        rgba(56,189,248,0.18),
        rgba(15,23,42,0.95)
    );
    border-radius: 14px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}

.research-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.research-level {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(34,197,94,0.2);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,0.6);

    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(56,189,248,0.25);
}

.research-progress {
    margin-top: 0.5rem;
}

.research-progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    overflow: hidden;
}

.research-progress-fill {
    height: 100%;
    background: #38bdf8;
}

.research-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    margin-top: 2px;
    opacity: 0.85;
}

/* ---------- Liste ---------- */

.club-research-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.club-research-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
}

.research-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;

    display: flex;
    flex-direction: column;
}

.research-name {
    font-size: 0.8rem;
    font-weight: 500;
}

.research-sub {
    font-size: 0.65rem;
    opacity: 0.75;
}

.sponsor-card.active::before {
    content: "AKTIV";
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.25);
    color: #fde68a;
    border: 1px solid rgba(250, 204, 21, 0.7);
}

.sponsor-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.reward.money { border-color: rgba(34, 197, 94, 0.7); }
.reward.xp    { border-color: rgba(56, 189, 248, 0.7); }
.reward.box   { border-color: rgba(168, 85, 247, 0.7); }
.reward.coin  { border-color: rgba(250, 204, 21, 0.7); }

.sponsor-card {
    padding: 14px 14px 16px;
    border-radius: 20px;
}

.sponsor-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.sponsor-meta {
    font-size: 0.7rem;
    color: #cbd5f5;
}

.sponsor-progress {
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    overflow: hidden;
    margin-top: 6px;
}

.sponsor-card.active {
    border: 1px solid rgba(250, 204, 21, 0.9);
    background: radial-gradient(
        circle at top left,
        rgba(250, 204, 21, 0.18),
        rgba(15, 23, 42, 0.95)
    );
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.45),
        0 18px 40px rgba(15, 23, 42, 0.9);
    position: relative;

    animation: sponsorPulse 3.5s ease-in-out infinite;
}

@keyframes sponsorPulse {
    0%, 100% {
        box-shadow:
            0 0 18px rgba(250,204,21,0.35),
            0 18px 40px rgba(15,23,42,0.9);
    }
    50% {
        box-shadow:
            0 0 28px rgba(250,204,21,0.55),
            0 22px 48px rgba(15,23,42,0.95);
    }
}

.sponsor-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.sponsor-card.active .sponsor-name {
    color: #fde68a;
}

.reward {

    display:flex;

    align-items:center;

    gap:6px;

    padding:6px 10px;

    border-radius:999px;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.08);

    font-size:13px;

    color:white;

    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #e5e7eb;

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reward:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(255,255,255,0.25);
}

.btn-sponsor-primary {
    background: linear-gradient(135deg, #22c55e, #86efac);
    color: #022c22;
    font-weight: 600;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.7);

    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-sponsor-primary:hover {
    box-shadow: 0 0 24px rgba(34,197,94,0.9);
}

.btn-sponsor-primary:active {
    transform: scale(0.96);
}

.btn-sponsor-secondary {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #e5e7eb;

    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-sponsor-secondary:hover {
    background: rgba(56,189,248,0.18);
    border-color: rgba(56,189,248,0.9);
}

.btn-sponsor-secondary:active {
    transform: scale(0.97);
}

.sponsor-card:not(.active) {
    margin-top: 6px;

    background: linear-gradient(
        135deg,
        rgba(15,23,42,0.55),
        rgba(15,23,42,0.85)
    );
}

.sponsor-warning {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #facc15;
    opacity: 0.9;
}

.sponsor-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #22c55e);

    transition: width 0.4s ease;
}

.club-settings-card {
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.04)
    );
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;

    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);

    box-shadow:
        0 18px 40px rgba(15,23,42,0.85),
        0 0 24px rgba(56,189,248,0.12);
}

.club-setting label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 4px;
    display: block;
}

.club-setting-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.club-setting input {
    width: 100%;

    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;

    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(148,163,184,0.55);
    color: #e5e7eb;

    font-size: 0.85rem;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 6px 16px rgba(15,23,42,0.6);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.club-setting input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow:
        inset 0 0 0 1px rgba(56,189,248,0.35),
        0 0 0 3px rgba(56,189,248,0.18),
        0 10px 24px rgba(15,23,42,0.85);
}

.club-fee-input {
    display: flex;
    align-items: center;
    gap: 6px;

    display: flex;
    align-items: center;
    gap: 8px;
}

.club-fee-input span {
    font-size: 0.8rem;
    color: #9ca3af;white-space: nowrap;

    font-size: 0.75rem;
    color: #cbd5f5;
    opacity: 0.85;
    white-space: nowrap;
}

.club-fee-input input {
    max-width: 120px;
    text-align: center;
    font-weight: 600;
}

.club-fee-hint {
    margin-top: 4px;
    font-size: 0.7rem;
    color: #9ca3af;
    opacity: 0.85;

    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: #9ca3af;
    opacity: 0.85;
}

/* =========================
   BUTTON SYSTEM – GLASS UI
========================= */

button,
.btn {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

/* ---------- PRIMARY ---------- */

button.primary,
.btn-primary {
    padding: 6px 10px;
    border-radius: 999px;

    background: linear-gradient(
        135deg,
        rgba(56,189,248,0.95),
        rgba(14,165,233,0.95)
    );

    color: #022c22;
    font-size: 0.7rem;
    font-weight: 700;

    box-shadow:
        0 0 18px rgba(56,189,248,0.8),
        0 10px 28px rgba(15,23,42,0.9);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}

/* Hover */
button.primary:hover,
.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow:
        0 0 26px rgba(56,189,248,1),
        0 14px 34px rgba(15,23,42,0.95);
}

/* Active */
button.primary:active,
.btn-primary:active {
    transform: scale(0.96);
}

/* Disabled */
button.primary:disabled,
.btn-primary:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

button.secondary,
.btn-secondary {
    padding: 8px 12px;
    border-radius: 999px;

    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(148,163,184,0.6);

    color: #e5e7eb;
    font-size: 0.75rem;

    box-shadow: 0 8px 20px rgba(15,23,42,0.8);
}

button.secondary:hover {
    border-color: rgba(56,189,248,0.8);
    background: rgba(56,189,248,0.15);
}

button.danger {
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;

    background: rgba(127,29,29,0.85);
    border: 1px solid rgba(248,113,113,0.6);

    color: #fecaca;
    font-size: 0.75rem;
    font-weight: 600;

    box-shadow: 0 0 18px rgba(248,113,113,0.35);
}

button.danger:hover {
    background: rgba(220,38,38,0.85);
}

.main {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* CARDS */
.card {
    padding: 10px 12px 12px;

    border-radius: 22px;

    background:
        linear-gradient(
            15deg,
            rgba(15, 23, 42, .02),
            rgba(15, 23, 42, .22)
        );

    border:
        1px solid rgba(148, 163, 184, .38);

    color: #e5e7eb;

    box-shadow:
        0 22px 60px rgba(15, 23, 42, .8),
        0 0 30px rgba(0, 194, 255, .08);

    /*
     * Nur leichtes Blur.
     * Stärkeres Blur wird bei einzelnen Komponenten
     * gezielt gesetzt.
     */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    animation:
        cardFadeIn .4s ease-out;

    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* AKTIVE AKTION */
.active-action .action-name {
    margin-bottom: 12px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4dd0e1, #26c6da);
    transition: width 0.5s ease;
}

/* STATUS GRID */
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat .label {
    font-size: 12px;
    opacity: 0.7;
}

.stat .value {
    font-size: 16px;
    font-weight: 600;
}

/* SKILLS */
.skills .skill {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.skills .skill:last-child {
    border-bottom: none;
}

/* NOTIFICATIONS */
.notifications {
    max-height: 180px;
    overflow-y: auto;
}

.notification {
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    margin-bottom: 8px;
    font-size: 14px;
}

/* BUTTON */
.btn.danger {
    background: #e53935;
    border: none;
    border-radius: 12px;
    padding: 10px;
    color: white;
    font-weight: 600;
}

/* =========================================================
   HOME REDESIGN V1
   ========================================================= */

.modern-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2px;

    position:fixed;

    top:0;
    left:0;
    right:0;

    width:100%;

    padding:3px 3px;

    margin:0;

    z-index:10;

    box-sizing:border-box;

    background:rgba(20,40,70,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

}

.header-weather{

    width:90px;

    padding:5px;

    text-align:center;

}

.weather-icon{

    font-size:14px;

    margin-bottom:2px;

}

.weather-info{

    color:#fff;

    font-size:12px;

}

.header-player{

    flex:1;

    display:flex;

    align-items:center;

    gap:12px;

}

.player-avatar-small{

    width:64px;

    height:64px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid rgba(255,255,255,.25);

    flex-shrink:0;

}

.player-avatar-small img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.player-info{

    flex:1;

}

/* =========================================================
   BLOCK 3
   HOME / HERO / PLAYER STATS
   ========================================================= */

/* =========================================================
   MODERN DASHBOARD
   ========================================================= */

.modern-dashboard {
    padding: 15px;
}

/* =========================================================
   HOME HERO
   ========================================================= */

.hero-character {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 400px;

    margin: 50px 0 10px;

    overflow: hidden;
}

/* Hintergrund-Glow */

/* Boden-/Wasser-Glow */

/* =========================================================
   HERO AVATAR
   ========================================================= */

.hero-avatar {
    position: relative;

    width: 290px;
    max-width: 82%;

    margin-top: 30px;

    z-index: 3;

    transition: .3s;

    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, .35))
        drop-shadow(0 0 25px rgba(0, 180, 255, .25));

    animation:
        heroFloat 4s ease-in-out infinite;
}

.hero-avatar:hover {
    transform:
        translateY(-4px)
        scale(1.02);
}

/* =========================================================
   HERO ANIMATION
   ========================================================= */

@keyframes heroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}

/* Hintergrund pulsieren */

.hero-character::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 360px;

    z-index: 0;

    pointer-events: none;

    animation:
        waterPulse 4s ease-in-out infinite;
}

.hero-character::after {
    content: "";

    position: absolute;

    bottom: 25px;

    width: 220px;
    height: 28px;

    z-index: 1;

    pointer-events: none;

    animation:
        waterPulse2 4s ease-in-out infinite;
}

@keyframes waterPulse {

    0% {
        transform: scale(.9);
        opacity: .35;
    }

    50% {
        transform: scale(1.08);
        opacity: .55;
    }

    100% {
        transform: scale(.9);
        opacity: .35;
    }

}

@keyframes waterPulse2 {

    0% {
        transform: scale(.8);
        opacity: .2;
    }

    50% {
        transform: scale(1.2);
        opacity: .45;
    }

    100% {
        transform: scale(.8);
        opacity: .2;
    }

}

/* =========================================================
   PLAYER STAT CIRCLES
   ========================================================= */

.stat-circle {
    position: absolute;

    width: 68px;
    height: 68px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: #fff;
}

.stat-circle span {
    font-size: 8px;

    opacity: .8;
}

.stat-circle strong {
    margin-top: 2px;

    font-size: 12px;
}

/* =========================================================
   STAT CARDS
   ========================================================= */

.stat-card {
    position: absolute;
    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background:
        rgba(18, 30, 48, .18);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border:
        1px solid rgba(255, 255, 255, .12);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.stat-card span {
    color: #b7c7d9;

    font-size: 10px;

    letter-spacing: .02em;

    text-transform: none;
}

.stat-card strong {
    font-size: 16px;

    font-weight: 400;
}

/* =========================================================
   STAT POSITIONEN
   ========================================================= */

.strength {
    top: 125px;
    left: 15px;
}

.halse {
    top: 215px;
    left: 15px;
}

.balance {
    bottom: 55px;
    left: 15px;
}

.technique {
    top: 125px;
    right: 15px;
}

.spruenge {
    top: 215px;
    right: 15px;
}

.wenden {
    bottom: 55px;
    right: 15px;
}

.stamina {
    bottom: -10px;
    left: 38%;
    transform: translateX(-50%);
}

.tricks {
    bottom: -10px;
    left: 62%;
    transform: translateX(-50%);
}

/* =========================================================
   ENERGY
   ========================================================= */

.energy-circle {
    position: absolute;

    top: 10px;
    left: 50%;
}

/* =========================================================
   PLAYER HEADER / XP
   ========================================================= */

.player-row {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    width: 100%;

    margin-bottom: 1px;

    display: flex;

    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    width: 100%;

    margin-bottom: 1px;
}

.player-name {
    margin: 0;
    padding: 0;

    max-width: 170px;

    font-size: 14px;
    font-weight: 700;

    color: #fff;

    line-height: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, .35);

    font-size:18px;

    color:#fff;

    font-weight:700;

    margin: 0;
    padding: 0;

    max-width: 170px;

    overflow: hidden;

    font-size: 14px;
    font-weight: 700;

    color: #fff;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.player-level {
    margin: 0 0 1px;

    font-size: 8px;
    font-weight: 600;

    color: rgba(255, 255, 255, .75);

    line-height: 1;

    letter-spacing: .04em;
    text-transform: uppercase;

    color:#dbeafe;

    margin-top:2px;

    margin-bottom:8px;

    font-size:13px;

    margin-bottom: 1px;

    font-size: 8px;
    font-weight: 600;

    line-height: 1;

    color:
        rgba(255, 255, 255, .75);

    letter-spacing: .04em;

    text-transform: uppercase;
}

.player-action {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    flex-shrink: 0;

    font-size: 14px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .08);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .08);
}

/* =========================================================
   XP BAR
   ========================================================= */

.xp-bar {
    position: relative;

    width: 100%;
    height: 5px;

    margin-top: 2px;

    overflow: hidden;

    background: rgba(255, 255, 255, .10);

    border-radius: 20px;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, .35);

    width:100%;

    height:10px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    width: 100%;
    height: 10px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .15);
}

.xp-bar-fill {
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #25d366 0%,
            #4ff58b 50%,
            #8bffb6 100%
        );

    box-shadow:
        0 0 10px rgba(50, 208, 107, .45);

    transition: width .35s ease;

    height:100%;

    background:linear-gradient(90deg,#00d4ff,#29f59c);

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #00d4ff,
            #29f59c
        );
}

/* =========================================================
   DASHBOARD CARDS
   ========================================================= */

.dashboard-card {
    padding: 10px;
    padding-top: 0;

    font-size: 12px;
}

.dashboard-card h3 {
    margin-bottom: 0;

    font-size: 14px;

    color: #fff;
}

/* =========================================================
   HEADER MONEY
   ========================================================= */

.header-money {

    min-width:105px;

    text-align:right;

    padding:12px;

    color:#fff;

    font-size:15px;

    font-weight:bold;

    min-width: 105px;

    padding: 12px;

    text-align: right;

    color: #fff;

    font-size: 15px;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE PLAYER
   ========================================================= */

@media (max-width: 420px) {

    .player-name {
        max-width: 145px;

        font-size: 12px;
    }

    .player-action {
        width: 20px;
        height: 20px;

        font-size: 14px;
    }

    .player-level {
        margin-bottom: 1px;

        font-size: 8px;
    }

    .xp-bar {
        height: 4px;
    }

}

/* ==================================================
   SHOP V2 - HEADER
   ================================================== */

.shop-header-v2{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:20px;
}

.shop-balance{
    display:flex;
    gap:12px;
}

.shop-money-card{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-size:10px;
    font-weight:200;
}

.shop-money-card span:first-child{
    font-size:1.0rem;
}

.shop-tabs::-webkit-scrollbar{
    display:none;
}

.shop-tab{

    border:none;

    background:rgba(255,255,255,.06);

    color:#fff;

    padding:5px;

    border-radius:10px;

    white-space:nowrap;

    cursor:pointer;

    transition:.25s;

    font-weight;200;

    flex-shrink:0;

}

.shop-tab:hover{

    background:#1e88e5;

}

.shop-tab.active{

    background:#2196f3;

    box-shadow:0 0 20px rgba(33,150,243,.35);

}

.shop-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;

    display:flex;
    gap:8px;
}

.shop-filters label{
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 22%;
    min-width: 0;

    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.shop-filters select{
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.98);
    color: #e5e7eb;
    padding: 2px 6px;
    font-size: 0.7rem;

    width:100%;
}

    /* ==================================================
   SHOP V2 - ITEM CARDS
   ================================================== */

.shop-list{
    display: flex;
    flex-direction: column;
    gap: 8px;

    display:grid;
    gap:18px;
}

.shop-item-card{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.98));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.9);

    display:grid;
    grid-template-columns:80px minmax(0,1fr);
    gap:10px;

    align-items:center;

    padding:10px;

    border-radius:20px;

    background:linear-gradient(180deg,#20324a,#162434);

    border:1px solid rgba(255,255,255,.08);

    transition:.25s;
}

.shop-item-card:hover{

    transform:translateY(-3px);

    border-color:#3ea6ff;

    box-shadow:0 12px 28px rgba(0,0,0,.30);

}

.shop-item-image{

    width:80px;
    height:100%;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#29415d;

}

.shop-item-image img{

    width:100%;
    height:100%;

    object-fit:contain;

}

.shop-item-main{
    display: flex;
    flex-direction: column;
    gap: 3px;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.shop-item-name{
    font-size: 0.8rem;
    font-weight: 600;

    font-size:1.1rem;

    font-weight:700;

}

.shop-item-brand{
    font-size: 0.7rem;
    color: #cbd5f5;

    color:#9ec6e8;

    font-size:.7rem;

}

.shop-item-meta{
    font-size: 0.7rem;
    color: #9ca3af;

    color:#7fa7c7;

    font-size:.7rem;

}

.shop-item-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:flex-start;

    gap:14px;

}

.shop-item-price{
    font-size: 0.8rem;
    text-align: right;

    font-size:1.0rem;

    font-weight:bold;

    color:#ffd54f;

}

.shop-buy-btn{
    border-radius: 999px;
    padding: 4px 10px;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;

    border:none;

    border-radius:14px;

    padding:14px;

    cursor:pointer;

    font-weight:700;

    background:#2e8cff;

    color:white;

    transition:.2s;

}

.shop-buy-btn:hover{

    background:#1976d2;

}

.shop-buy-btn:disabled{
    opacity: 0.5;
    cursor: default;

    background:#555;

    cursor:not-allowed;

}

     .shop-item-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-top:10px;
    padding-top:8px;
}

    .shop-tabs{

    display:flex;

    gap:6px;

    overflow-x:auto;

    scrollbar-width:none;

    position:relative;
    overflow-x:auto;
}

.shop-tabs::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:100%;
    pointer-events:none;
    background:linear-gradient(to right,
        transparent,
        rgba(20,35,55,.95));
}

/* =========================================================
   BLOCK 4
   SETTINGS / EINSTELLUNGEN
   ========================================================= */

/* =========================================================
   SETTINGS LAYOUT
   ========================================================= */

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* =========================================================
   SETTINGS PROFILE
   ========================================================= */

.settings-profile {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 14px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .08);

    overflow: hidden;
}

.settings-profile::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        var(--spot-bg);

    background-size: cover;
    background-position: center;

    opacity: .35;

    pointer-events: none;
}

.settings-profile > * {
    position: relative;

    z-index: 1;
}

/* =========================================================
   SETTINGS AVATAR
   ========================================================= */

.settings-avatar {
    width: 84px;
    height: 84px;

    object-fit: contain;

    flex-shrink: 0;
}

.avatar-preview {
    display: flex;

    justify-content: center;

    gap: 8px;
}

.avatar-preview img {
    width: 60px;
    height: 60px;

    object-fit: contain;
}

/* =========================================================
   SETTINGS PLAYER INFO
   ========================================================= */

.settings-profile-info {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;
}

.settings-player-name {
    font-size: 1.15rem;
    font-weight: 700;

    color: #fff;

    overflow-wrap: anywhere;
}

.settings-player-level {
    opacity: .7;

    color: #dbeafe;

    font-size: .8rem;
}

/* =========================================================
   SETTINGS BUTTONS
   ========================================================= */

.settings-btn {
    position: relative;

    width: 100%;

    padding:
        14px 50px 14px 18px;

    margin-bottom: 10px;

    border: none;
    border-radius: 18px;

    text-align: left;

    font-family: inherit;
    font-size: 14px;
    font-weight: 300;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(18, 30, 48, .38),
            rgba(8, 15, 30, .58)
        );

    border-left:
        5px solid #3ea6ff;

    border-right:
        5px solid #3ea6ff;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.settings-btn::after {
    content: "›";

    position: absolute;

    top: 50%;
    right: 20px;

    transform:
        translateY(-50%);

    color:
        rgba(255, 255, 255, .75);

    font-size: 26px;
    font-weight: 300;

    transition:
        transform .2s ease,
        color .2s ease;
}

.settings-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .35);
}

.settings-btn:hover::after {
    transform:
        translateY(-50%)
        translateX(4px);

    color: #fff;
}

.settings-btn:active {
    transform:
        scale(.98);
}

.settings-btn-danger {
    border-left-color: #ef4444;
    border-right-color: #ef4444;
}

.settings-account-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(127, 29, 29, .14);
    border: 1px solid rgba(248, 113, 113, .22);
}

.settings-account-card h4 {
    margin: 0 0 8px;
}

.settings-delete-confirm-label {
    display: block;
    margin-top: 14px;
    margin-bottom: 8px;
    font-size: .9rem;
}

.settings-delete-confirm-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(15,23,42,.9);
    color: #fff;
    font: inherit;
    outline: none;
}

.settings-delete-confirm-input:focus {
    border-color: rgba(248,113,113,.75);
    box-shadow: 0 0 0 3px rgba(248,113,113,.12);
}

.settings-delete-error {
    min-height: 20px;
    margin: 8px 0 2px;
    color: #fca5a5;
    font-size: .85rem;
}

/* =========================================================
   SETTINGS NAME
   ========================================================= */

.settings-name-box input {
    width: 100%;

    padding: 14px;

    border:
        1px solid rgba(255, 255, 255, .15);

    border-radius: 14px;

    background:
        rgba(15, 23, 42, .85);

    color: #fff;

    font-family: inherit;

    font-size: 18px;

    outline: none;
}

.settings-name-box input:focus {
    border-color:
        rgba(62, 166, 255, .75);

    box-shadow:
        0 0 0 3px rgba(62, 166, 255, .12);
}

.settings-name-box .settings-btn {
    width: 100%;

    margin-top: 16px;
}

/* =========================================================
   SETTINGS CARD GRID
   ========================================================= */

.settings-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px, 1fr)
        );

    gap: 18px;

    margin-top: 18px;
}

/* =========================================================
   SETTINGS CARD
   ========================================================= */

.settings-card {
    overflow: hidden;

    text-align: center;

    border:
        2px solid transparent;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .05);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.settings-card:hover {
    transform:
        translateY(-2px);
}

.settings-card img {
    width: 100%;
    height: 220px;

    object-fit: contain;
}

.settings-card-title {
    padding: 12px;

    color: #fff;

    font-size: .95rem;
    font-weight: 600;
}

.settings-card button {
    width:
        calc(100% - 24px);

    margin:
        0 12px 12px;
}

/* Ausgewähltes Element */

.settings-card.selected {
    border-color:
        #3ea6ff;

    box-shadow:
        0 0 18px rgba(62, 166, 255, .45);
}

/* =========================================================
   MOBILE SETTINGS
   ========================================================= */

@media (max-width: 420px) {

    .settings-profile {
        gap: 12px;

        padding: 12px;
    }

    .settings-avatar {
        width: 70px;
        height: 70px;
    }

    .settings-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .settings-card img {
        height: 160px;
    }

    .settings-card-title {
        padding: 8px;

        font-size: .8rem;
    }

}

/* =========================================================
   BLOCK 5
   SPIELERPROFIL + VERGLEICH
   ========================================================= */

/* =========================================================
   SPIELERPROFIL
   ========================================================= */

.player-profile-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 18px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(18,30,48,.45),
            rgba(8,15,30,.70)
        );

    animation:
        cardFadeIn .35s ease both;
}

/* =========================================================
   PROFIL-BANNER
   ========================================================= */

.player-profile-banner {
    position: relative;

    min-height: 180px;

    display: flex;
    align-items: flex-end;

    gap: 18px;

    padding: 18px;

    background:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.65)
        ),
        var(--spot-bg);

    background-size: cover;
    background-position: center;
}

/* =========================================================
   PROFIL AVATAR
   ========================================================= */

.player-profile-avatar {
    width: 110px;
    height: 110px;

    flex-shrink: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px rgba(0,0,0,.45)
        );
}

/* =========================================================
   PROFIL INFORMATIONEN
   ========================================================= */

.player-profile-info {
    flex: 1;

    min-width: 0;

    color: #fff;
}

.player-profile-info h3 {
    margin: 0;

    font-size: 24px;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.profile-level {
    margin-top: 3px;

    font-size: 13px;
    font-weight: 600;

    color: #6ee7ff;
}

.profile-line {
    margin-top: 6px;

    font-size: 14px;

    color: #dbeafe;
}

/* =========================================================
   VERGLEICH
   ========================================================= */

.player-compare {
    margin-top: 15px;
}

.player-compare h3 {
    margin: 0 0 12px;

    color: #fff;

    font-size: 18px;
}

/* =========================================================
   VERGLEICHSZEILE
   ========================================================= */

.compare-row {
    display: grid;

    grid-template-columns:
        1.6fr
        55px
        55px
        60px;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    margin-bottom: 8px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,.05);

    transition:
        transform .2s ease,
        background .2s ease;
}

.compare-row:hover {
    transform:
        translateY(-1px);

    background:
        rgba(255,255,255,.08);
}

.compare-row span {
    color: #fff;
}

.compare-row span:nth-child(2),
.compare-row span:nth-child(3),
.compare-row span:nth-child(4) {
    text-align: center;

    font-weight: 700;
}

/* =========================================================
   DIFFERENZ
   ========================================================= */

.compare-diff {
    padding: 4px 8px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.08);
}

/* =========================================================
   VERGLEICH – FARBEN
   ========================================================= */

.compare-win {
    color: #4ade80 !important;
}

.compare-lose {
    color: #fb7185 !important;
}

.compare-even {
    color: #cbd5e1 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .player-profile-banner {
        min-height: 150px;

        gap: 12px;

        padding: 14px;
    }

    .player-profile-avatar {
        width: 80px;
        height: 80px;
    }

    .player-profile-info h3 {
        font-size: 19px;
    }

    .profile-line {
        font-size: 12px;
    }

    .compare-row {
        grid-template-columns:
            1fr
            45px
            45px
            50px;

        gap: 6px;

        padding: 8px 10px;
    }

}

    .profile-gear-list{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:6px 0 12px;
    scroll-snap-type:x proximity;
}

.profile-gear-card{
    flex:0 0 92px;
    background:rgba(255,255,255,.06);
    border-radius:16px;
    padding:8px;
    text-align:center;
}

.profile-gear-card img{
    width:72px;
    height:72px;
    object-fit:contain;
}

.profile-gear-name{
    margin-top:6px;
    font-size:.72rem;
    font-weight:600;
}

.profile-gear-brand{
    font-size:.65rem;
    opacity:.7;
}

    #player-profile-modal .modal-panel{
    opacity:0;
    transform:translateY(20px) scale(.98);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

#player-profile-modal.is-open .modal-panel{
    opacity:1;
    transform:translateY(0) scale(1);
}

#player-profile-modal .player-profile-card,
#player-profile-modal .player-compare,
#player-profile-modal #profile-gear{
    opacity:0;
    transform:translateY(20px);
    transition:.45s ease;
}

#player-profile-modal.is-open .player-profile-card{
    opacity:1;
    transform:none;
    transition-delay:.10s;
}

#player-profile-modal.is-open .player-compare{
    opacity:1;
    transform:none;
    transition-delay:.25s;
}

#player-profile-modal.is-open #profile-gear{
    opacity:1;
    transform:none;
    transition-delay:.40s;
}

    /* ==========================================
   MAIL SYSTEM
   ========================================== */

/* ---------- Inbox ---------- */

.mail-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mail-card{

    position:relative;

    display:flex;
    gap:14px;
    align-items:flex-start;

    padding:14px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(18,30,48,.45),
        rgba(8,15,30,.68)
    );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

    transition:.25s;
}

.mail-card:hover{

    transform:translateY(-2px);

    border-color:#3ea6ff;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35),
        0 0 18px rgba(62,166,255,.30);
}

/* Ungelesen */

.mail-card.unread{

    border-left:5px solid #3ea6ff;

    box-shadow:
        0 0 18px rgba(62,166,255,.45);
}

/* Avatar */

.mail-avatar{

    width:54px;
    height:54px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:24px;

    flex-shrink:0;
}

.mail-body{

    flex:1;

    min-width:0;
}

.mail-header{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-bottom:4px;
}

.mail-sender{

    color:white;

    font-weight:700;

    font-size:15px;
}

.mail-date{

    font-size:11px;

    color:#9db6d5;

    white-space:nowrap;
}

.mail-subject{

    color:#bfe8ff;

    font-size:13px;

    margin-bottom:5px;
}

.mail-preview{

    color:#c8d8ea;

    font-size:12px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;
}

/* ---------- Compose ---------- */

.mail-compose{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.mail-compose input,
.mail-compose textarea{

    width:100%;

    padding:12px;

    border-radius:14px;

    background:rgba(15,23,42,.88);

    border:1px solid rgba(255,255,255,.15);

    color:white;

    font-size:14px;

    outline:none;
}

.mail-compose input:focus,
.mail-compose textarea:focus{

    border-color:#3ea6ff;

    box-shadow:0 0 12px rgba(62,166,255,.35);
}

.mail-compose textarea{

    resize:none;

    min-height:160px;
}

/* ---------- Suchergebnisse ---------- */

.mail-search-results{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:6px;
}

.mail-player-row{

    padding:10px 12px;

    border-radius:12px;

    background:rgba(255,255,255,.06);

    color:white;

    cursor:pointer;

    transition:.2s;
}

.mail-player-row:hover{

    background:rgba(62,166,255,.22);

    transform:translateX(4px);
}

/* ---------- Nachricht lesen ---------- */

.mail-read{

    display:flex;

    flex-direction:column;

    gap:14px;
}

/* ---------- Buttons ---------- */

.mail-actions button{

    flex:1;
}

.mail-read-header{

    border-bottom:1px solid rgba(255,255,255,.08);

    padding-bottom:10px;

    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:16px;
    background:none;
}

.mail-read-subject{

    color:white;

    font-size:18px;

    font-weight:700;

    font-size:1.5rem;
    font-weight:700;
    color:#fff;
}

.mail-read-meta{

    margin-top:5px;

    color:#9db6d5;

    font-size:12px;

    margin-top:6px;
    color:#a9b3c4;
    font-size:.85rem;
}

.mail-read-message{

    white-space:pre-wrap;

    line-height:1.7;

    color:#dde8f4;

    font-size:14px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:18px;
}

    .mail-reply-box{
    display:flex;
    gap:12px;
    align-items:flex-end;
    margin-top:15px;
}

.mail-reply-box textarea{

    flex:1;

    min-height:90px;

    resize:none;

    padding:14px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.08);

    color:#fff;
}

.mail-reply-box textarea::placeholder{
    color:#bbb;
}

    .mail-actions{

    display:flex;

    gap:10px;

    margin-top:14px;

    display:flex;

    gap:10px;

    margin-top:15px;

    justify-content:flex-end;

}

    /* =========================================================
   CHAT SYSTEM
   STYLE: passend zum Einstellungs-Modal
========================================================= */

/* =========================================================
   FLOATING CHAT BUTTON
========================================================= */

.chat-float-button {
    position: fixed;

    right: 14px;
    bottom: 82px;

    width: 58px;
    height: 58px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.95),
            rgba(37,99,235,.95)
        );

    color: #fff;

    font-size: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 25px rgba(56,189,248,.45);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 100;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.chat-float-button:hover {
    transform: scale(1.06);

    box-shadow:
        0 12px 35px rgba(0,0,0,.5),
        0 0 30px rgba(56,189,248,.65);
}

.chat-float-button:active {
    transform: scale(.94);
}

/* =========================================================
   CHAT MODAL
========================================================= */

.chat-widget {
    position: fixed;

    left: 16px;
    right: 16px;
    top: 16px;
    bottom: -20px;

    width: auto;
    height: auto;

    transform: translateY(20px) scale(.98);

    opacity: 0;
    visibility: hidden;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.055)
        );

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 30px;

    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    box-shadow:
        0 24px 60px rgba(15,23,42,.75),
        0 0 35px rgba(0,194,255,.14),
        inset 0 1px 0 rgba(255,255,255,.12);

    overflow: hidden;

    z-index: 1000;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}

.chat-widget.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

/* =========================================================
   GLAS-LICHT OBEN
========================================================= */

.chat-widget::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    pointer-events: none;

    z-index: 10;
}

/* =========================================================
   CHAT HEADER
   → wie Einstellungen-Header
========================================================= */

.chat-header {

    min-height: 70px;

    padding:
        0 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        rgba(255,255,255,.055);

    border-bottom:
        1px solid rgba(255,255,255,.20);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    flex-shrink: 0;
}

.chat-title {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color: #fff;

    font-size: 14px;

    font-weight: 200;

    text-shadow:
        0 2px 4px rgba(0,0,0,.65);
}

/* X Button */

.chat-close {

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        rgba(255,255,255,.70);

    font-size: 22px;

    font-weight: 200;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.chat-close:hover {

    color: #fff;

    background:
        rgba(255,255,255,.08);

    transform: rotate(90deg);
}

/* =========================================================
   CHAT TABS
========================================================= */

.chat-tabs {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    padding: 12px 14px;

    background:
        rgba(255,255,255,.025);

    border-bottom:
        1px solid rgba(255,255,255,.10);

    flex-shrink: 0;
}

.chat-tab {

    min-height: 42px;

    padding:
        8px 10px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 14px;

    background:
        rgba(18,30,48,.35);

    color:
        rgba(255,255,255,.68);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        .2s ease;
}

.chat-tab:hover {

    background:
        rgba(255,255,255,.10);

    border-color:
        rgba(255,255,255,.20);

    color: #fff;
}

.chat-tab.active {

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.90),
            rgba(37,99,235,.90)
        );

    border:
        1px solid rgba(125,211,252,.50);

    color: #fff;

    box-shadow:
        0 0 18px rgba(56,189,248,.25);

    text-shadow:
        0 1px 3px rgba(0,0,0,.45);
}

/* =========================================================
   NACHRICHTENBEREICH
========================================================= */

.chat-messages {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        14px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.05),
            rgba(15,23,42,.16)
        );

    scroll-behavior: smooth;
}

/* Scrollbar */

.chat-messages::-webkit-scrollbar {

    width: 5px;
}

.chat-messages::-webkit-scrollbar-track {

    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,.20);

    border-radius: 999px;
}

/* =========================================================
   NACHRICHTEN-KARTEN
   → ähnlich deinen Settings-Buttons
========================================================= */

.chat-message {

    position: relative;

    margin-bottom: 9px;

    padding:
        10px 12px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(18,30,48,.42),
            rgba(8,15,30,.50)
        );

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 8px 22px rgba(0,0,0,.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    animation:
        chatMessageIn .25s ease-out;
}

/* Eigene Nachricht */

.chat-message.own {

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.18),
            rgba(18,30,48,.52)
        );

    border-left:
        4px solid #3ea6ff;

    border-right:
        1px solid rgba(56,189,248,.35);

    box-shadow:
        0 8px 22px rgba(0,0,0,.25),
        0 0 12px rgba(56,189,248,.10);
}

/* =========================================================
   MESSAGE HEADER
========================================================= */

.chat-message-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 4px;
}

.chat-message-name {

    color:
        #8bdcff;

    font-size: 11px;

    font-weight: 700;

    text-shadow:
        0 1px 3px rgba(0,0,0,.75);
}

.chat-message-time {

    color:
        rgba(255,255,255,.45);

    font-size: 9px;

    white-space: nowrap;
}

.chat-message-text {

    color:
        rgba(255,255,255,.92);

    font-size: 13px;

    line-height: 1.45;

    word-break: break-word;

    text-shadow:
        0 1px 3px rgba(0,0,0,.75);
}

/* =========================================================
   LEERER CHAT
========================================================= */

.chat-loading,
.chat-empty {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 30px;

    text-align: center;

    color:
        rgba(255,255,255,.52);

    font-size: 13px;

    text-shadow:
        0 1px 3px rgba(0,0,0,.75);
}

/* =========================================================
   EINGABEBEREICH
========================================================= */

.chat-form {

    display: flex;

    gap: 8px;

    padding:
        12px 14px;

    background:
        rgba(255,255,255,.045);

    border-top:
        1px solid rgba(255,255,255,.18);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    flex-shrink: 0;
}

/* Input */

#chat-input {

    flex: 1;

    min-width: 0;

    height: 44px;

    padding:
        10px 14px;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 14px;

    outline: none;

    background:
        rgba(15,23,42,.48);

    color: #fff;

    font-family: inherit;

    font-size: 13px;

    box-shadow:
        inset 0 1px 5px rgba(0,0,0,.20);

    transition:
        .2s ease;
}

#chat-input::placeholder {

    color:
        rgba(255,255,255,.42);
}

#chat-input:focus {

    border-color:
        rgba(62,166,255,.75);

    background:
        rgba(15,23,42,.62);

    box-shadow:
        0 0 0 3px rgba(62,166,255,.12),
        inset 0 1px 5px rgba(0,0,0,.25);
}

/* Senden */

.chat-send {

    width: 46px;

    height: 44px;

    flex-shrink: 0;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #3ea6ff,
            #1976d2
        );

    color: white;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(62,166,255,.30);

    transition:
        .15s ease;
}

.chat-send:hover {

    filter: brightness(1.08);

    box-shadow:
        0 7px 22px rgba(62,166,255,.45);
}

.chat-send:active {

    transform: scale(.94);
}

/* =========================================================
   FEHLER
========================================================= */

.chat-error {

    min-height: 16px;

    padding:
        0 14px 8px;

    color:
        #fecaca;

    font-size: 10px;

    text-shadow:
        0 1px 3px rgba(0,0,0,.75);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes chatMessageIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .chat-widget {

        width:
            calc(100vw - 32px);

        height:
            calc(100vh - 145px);

        max-height: none;

        border-radius: 26px;
    }

    .chat-header {

        min-height: 68px;

        padding:
            0 16px;
    }

    .chat-title {

        font-size: 19px;
    }

    .chat-close {

        width: 40px;
        height: 40px;

        font-size: 30px;
    }

    .chat-tabs {

        padding:
            10px 12px;
    }

    .chat-messages {

        padding:
            12px;
    }

    .chat-message {

        border-radius: 16px;
    }

    .chat-form {

        padding:
            10px 12px;
    }

    .chat-float-button {

        right: 14px;
        bottom: 82px;

        width: 54px;
        height: 54px;
    }
}

/* =========================================================
   RESPONSIVE MODAL SYSTEM V2
   ---------------------------------------------------------
   Für: Smartphone / Tablet / Desktop
   Keine HTML- oder JS-Änderungen erforderlich.
   Überschreibt bewusst die älteren Modal-Regeln weiter oben.
   ========================================================= */

:root {
    --modal-gutter: 10px;
    --modal-radius: 22px;
    --modal-height: min(92dvh, 900px);
    --modal-width: min(680px, calc(100vw - 20px));
    --modal-wide-width: min(900px, calc(100vw - 20px));
    --modal-header-h: 54px;
    --modal-footer-h: 52px;
    --modal-gap: 10px;
}

/* ---------- Gemeinsames Modal-Grundsystem ---------- */
.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--modal-gutter) !important;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(2, 6, 23, .42) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

.modal-backdrop.is-open {
    display: flex !important;
}

.modal-panel,
.modal-panel-wide {
    position: relative;
    width: var(--modal-width) !important;
    max-width: var(--modal-width) !important;
    height: var(--modal-height);
    max-height: calc(100dvh - (var(--modal-gutter) * 2));
    min-height: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--modal-radius) !important;
    color: var(--text, #e5e7eb) !important;
}

.modal-panel-wide {
    width: var(--modal-wide-width) !important;
    max-width: var(--modal-wide-width) !important;
}

.modal-header {
    min-height: var(--modal-header-h);
    flex: 0 0 auto;
    padding: 8px 14px !important;
    gap: 10px;
}

.modal-header h2 {
    min-width: 0;
    margin: 0 !important;
    font-size: clamp(.9rem, 1.5vw, 1.05rem) !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.modal-close-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255,255,255,.82) !important;
    font-size: 1.05rem !important;
    touch-action: manipulation;
}

.modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px !important;
}

.modal-footer {
    min-height: var(--modal-footer-h);
    flex: 0 0 auto;
    padding: 8px 14px calc(8px + var(--safe-bottom, 0px)) !important;
    gap: 8px;
}

.modal-footer .btn-ghost {
    min-height: 36px;
    padding: 7px 14px;
    touch-action: manipulation;
}

/* ---------- Alle dynamischen Listen: nie über die Modalbreite hinaus ---------- */
#shop-list,
#inventory-list,
#race-list,
#ranking-list,
#sponsor-offer-list,
#sponsor-active-box,
#club-content,
#mail-list,
#mail-read-content,
#profile-gear,
#settings-content,
#training-list,
#job-modal .training-grid {
    min-width: 0;
    max-width: 100%;
}

/* ---------- Shop ---------- */
#shop-modal .modal-panel-wide,
#inventory-modal .modal-panel-wide,
#race-modal .modal-panel-wide,
#ranking-modal .modal-panel-wide,
#mail-modal .modal-panel-wide,
#mail-read-modal .modal-panel-wide,
#player-profile-modal .modal-panel-wide,
#sponsor-modal .modal-panel-wide {
    width: var(--modal-wide-width) !important;
}

#shop-modal .modal-header {
    flex-wrap: nowrap;
}

#shop-modal .shop-header-v2 {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#shop-modal .shop-tabs {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
}

#shop-modal .shop-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 32px;
    padding: 6px 10px;
    font-size: clamp(.68rem, 1.4vw, .78rem);
    scroll-snap-align: start;
}

#shop-modal .shop-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
}

#shop-modal .shop-filters label {
    min-width: 0;
}

#shop-modal .shop-filters select,
#inventory-modal .inventory-filters select,
#training-modal .training-gear-filters select {
    min-height: 34px;
    padding: 5px 8px;
    font-size: .72rem;
}

#shop-modal .shop-list {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    min-width: 0;
}

#shop-modal .shop-item-card {
    min-width: 0;
    width: 100%;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch;
    padding: 9px !important;
    border-radius: 18px !important;
}

#shop-modal .shop-item-image {
    width: 76px;
    min-height: 108px;
    height: 100%;
    align-self: stretch;
}

#shop-modal .shop-item-main {
    min-width: 0;
    gap: 3px;
}

#shop-modal .shop-item-name {
    min-width: 0;
    font-size: clamp(.9rem, 2vw, 1.05rem) !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

#shop-modal .shop-item-brand,
#shop-modal .shop-item-meta,
#shop-modal .shop-item-level,
#shop-modal .shop-item-skills,
#shop-modal .shop-item-lock {
    font-size: clamp(.62rem, 1.5vw, .72rem);
    line-height: 1.25;
}

#shop-modal .shop-item-skills {
    gap: 4px;
}

#shop-modal .shop-item-footer {
    min-width: 0;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px !important;
    margin-top: 5px;
    padding-top: 6px;
}

#shop-modal .shop-item-price {
    white-space: nowrap;
    font-size: .9rem !important;
}

#shop-modal .shop-buy-btn {
    min-height: 34px;
    padding: 6px 11px !important;
    white-space: nowrap;
    font-size: .7rem !important;
}

/* ---------- Inventar ---------- */
#inventory-modal .inventory-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

#inventory-modal .inventory-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

#inventory-modal .inventory-item-card {
    min-width: 0;
}

/* ---------- Training + Job ---------- */
#training-modal .modal-panel,
#job-modal .modal-panel {
    width: var(--modal-width) !important;
    max-width: var(--modal-width) !important;
}

#training-modal .modal-body,
#job-modal .modal-body {
    min-height: 0 !important;
}

#training-modal .training-grid,
#job-modal .training-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#training-modal .training-card,
#job-modal .job-card {
    min-width: 0;
}

#training-modal .training-gear-inline {
    min-width: 0;
}

#training-modal .training-gear-slot-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 7px !important;
    margin-bottom: 7px;
}

#training-modal .training-gear-slot {
    min-width: 0;
    min-height: 58px;
    padding: 8px 7px;
}

#training-modal .training-gear-pool {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 6px !important;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#training-modal .training-gear-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px !important;
}

/* ---------- Profil / Settings / Mail ---------- */
#settings-modal .settings-section,
#player-profile-modal .modal-body,
#mail-modal .modal-body,
#mail-read-modal .modal-body,
#mail-compose-modal .modal-panel {
    min-width: 0;
}

#mail-compose-modal .modal-panel {
    width: var(--modal-width) !important;
    max-width: var(--modal-width) !important;
    height: auto;
    max-height: calc(100dvh - 20px);
}

#mail-compose-modal .mail-compose {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#mail-compose-modal input,
#mail-compose-modal textarea {
    width: 100%;
    min-width: 0;
}

#mail-compose-modal textarea {
    min-height: 150px;
    resize: vertical;
}

#mail-read-modal .mail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#mail-read-modal .mail-reply-box {
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,.12);
}

#mail-read-modal .mail-reply-box textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}

#player-profile-modal .player-profile-banner {
    min-width: 0;
}

#player-profile-modal .player-profile-info {
    min-width: 0;
}

#player-profile-modal .profile-gear-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

/* ---------- Chat: kein Vollbild-Zwang auf Smartphones ---------- */
.chat-widget {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(92vw, 720px) !important;
    height: min(82dvh, 760px) !important;
    max-width: 720px;
    max-height: calc(100dvh - 24px);
    min-height: 0;
    transform: translate(-50%, calc(-50% + 20px)) scale(.98) !important;
    border-radius: 26px !important;
    z-index: 2100 !important;
}

.chat-widget.is-open {
    transform: translate(-50%, -50%) scale(1) !important;
}

.chat-header {
    min-height: 58px;
    padding: 0 12px;
}

.chat-title {
    font-size: clamp(.82rem, 2vw, 1rem);
}

.chat-close {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
}

.chat-tabs {
    padding: 8px 10px;
    gap: 7px;
}

.chat-tab {
    min-height: 38px;
    padding: 7px 9px;
    font-size: clamp(.68rem, 1.7vw, .78rem);
}

.chat-messages {
    min-height: 0;
    padding: 10px;
}

.chat-form {
    padding: 8px 10px;
}

#chat-input {
    height: 40px;
    font-size: .78rem;
}

.chat-send {
    width: 42px;
    height: 40px;
}

/* =========================================================
   BREAKPOINTS
   ========================================================= */

/* Kleine Smartphones */
@media (max-width: 479px) {
    :root {
        --modal-gutter: 8px;
        --modal-radius: 18px;
        --modal-height: calc(100dvh - 16px);
        --modal-width: calc(100vw - 16px);
        --modal-wide-width: calc(100vw - 16px);
        --modal-header-h: 50px;
        --modal-footer-h: 50px;
    }

    .modal-backdrop {
        padding: 8px !important;
        align-items: center;
    }

    .modal-panel,
    .modal-panel-wide {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px !important;
    }

    .modal-header {
        padding: 7px 10px !important;
    }

    .modal-header h2 {
        font-size: .88rem !important;
    }

    .modal-body {
        padding: 9px 10px 10px !important;
        font-size: .75rem;
    }

    .modal-footer {
        padding: 7px 10px calc(7px + var(--safe-bottom, 0px)) !important;
    }

    #shop-modal .shop-filters,
    #training-modal .training-gear-filters {
        grid-template-columns: 1fr 1fr;
    }

    #shop-modal .shop-item-card {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 15px !important;
    }

    #shop-modal .shop-item-image {
        width: 62px;
        min-height: 92px;
        border-radius: 12px;
    }

    #shop-modal .shop-item-footer {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 5px !important;
    }

    #shop-modal .shop-buy-btn {
        min-height: 31px;
        padding: 5px 8px !important;
        font-size: .64rem !important;
    }

    #inventory-modal .inventory-filters {
        grid-template-columns: 1fr 1fr;
    }

    #training-modal .training-gear-slot-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #training-modal .training-gear-pool {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none !important;
        overflow: visible !important;
    }

    .chat-widget {
        width: 92vw !important;
        height: min(82dvh, 680px) !important;
        max-height: calc(100dvh - 24px);
        border-radius: 22px !important;
    }

    .chat-header {
        min-height: 52px;
    }

    .chat-messages {
        padding: 8px;
    }

    .chat-message {
        padding: 8px 9px;
        border-radius: 14px;
    }

    .chat-message-text {
        font-size: .72rem;
    }
}

/* Große Smartphones / Tablets */
@media (min-width: 480px) and (max-width: 699px) {
    :root {
        --modal-width: min(620px, calc(100vw - 24px));
        --modal-wide-width: min(700px, calc(100vw - 24px));
    }

    #shop-modal .shop-item-card {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    #shop-modal .shop-item-image {
        width: 72px;
        min-height: 104px;
    }

    .chat-widget {
        width: min(90vw, 620px) !important;
        height: min(82dvh, 720px) !important;
    }
}

/* Tablets */
@media (min-width: 700px) and (max-width: 1099px) {
    :root {
        --modal-gutter: 16px;
        --modal-radius: 24px;
        --modal-width: min(720px, calc(100vw - 32px));
        --modal-wide-width: min(900px, calc(100vw - 32px));
        --modal-height: min(90dvh, 880px);
    }

    #training-modal .training-grid,
    #job-modal .training-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #training-modal .training-gear-slot-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #training-modal .training-gear-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #shop-modal .shop-list,
    #inventory-modal .inventory-list {
        gap: 10px !important;
    }

    .chat-widget {
        width: min(88vw, 760px) !important;
        height: min(82dvh, 760px) !important;
    }
}

/* Desktop */
@media (min-width: 1100px) {
    :root {
        --modal-gutter: 20px;
        --modal-radius: 26px;
        --modal-width: min(760px, calc(100vw - 40px));
        --modal-wide-width: min(980px, calc(100vw - 40px));
        --modal-height: min(88dvh, 900px);
    }

    #training-modal .training-grid,
    #job-modal .training-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #training-modal .training-gear-slot-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .chat-widget {
        width: min(760px, 82vw) !important;
        height: min(82dvh, 780px) !important;
    }
}

/* Landscape mit wenig Höhe: Inhalt scrollt, Modal bleibt vollständig bedienbar */
@media (max-height: 620px) and (orientation: landscape) {
    :root {
        --modal-gutter: 6px;
        --modal-height: calc(100dvh - 12px);
        --modal-radius: 16px;
        --modal-header-h: 44px;
        --modal-footer-h: 44px;
    }

    .modal-panel,
    .modal-panel-wide {
        height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
    }

    .modal-header {
        padding: 5px 10px !important;
    }

    .modal-body {
        padding: 7px 10px !important;
    }

    .modal-footer {
        padding: 5px 10px calc(5px + var(--safe-bottom, 0px)) !important;
    }

    .chat-widget {
        width: min(88vw, 760px) !important;
        height: calc(100dvh - 18px) !important;
        max-height: calc(100dvh - 18px);
    }
}


/* =========================================================
   WINDSURF GAME – FINAL UI OVERRIDES V3
   ---------------------------------------------------------
   Diese Regeln stehen bewusst am Ende der Datei, damit sie
   ältere/duplizierte Regeln zuverlässig überschreiben.
   Fokus: Shop-Screenshot, Modals, Mobile, Glass-UI,
   saubere Abstände und Touch-Bedienung.
   ========================================================= */

/* ---------- Globale Variablen ---------- */

:root {
    --ui-accent: #38bdf8;
    --ui-accent-dark: #2196f3;
    --ui-success: #35d978;
    --ui-warning: #ffd54f;
    --ui-danger: #ff7272;
    --ui-purple: #9b6cff;

    --ui-panel:
        linear-gradient(
            145deg,
            rgba(55, 74, 101, .86),
            rgba(13, 27, 46, .96)
        );

    --ui-card:
        linear-gradient(
            145deg,
            rgba(31, 51, 77, .92),
            rgba(14, 29, 49, .94)
        );

    --ui-border: rgba(190, 215, 240, .18);
    --ui-border-strong: rgba(190, 215, 240, .30);

    --ui-shadow:
        0 18px 48px rgba(0, 0, 0, .34);
}


/* =========================================================
   MODAL – FINAL GLASS LOOK
   ========================================================= */

.modal-backdrop {
    padding: max(8px, env(safe-area-inset-top))
             max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom))
             max(8px, env(safe-area-inset-left)) !important;

    background: rgba(2, 8, 18, .38) !important;

    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

.modal-panel,
.modal-panel-wide {
    background: var(--ui-panel) !important;

    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 22px !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .48),
        0 0 35px rgba(56, 189, 248, .10) !important;

    overflow: hidden !important;
}

.modal-header {
    min-height: 54px !important;

    padding: 9px 14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .025)
        ) !important;

    border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
}

.modal-header h2 {
    font-size: clamp(.92rem, 2vw, 1.05rem) !important;
    font-weight: 700 !important;
}

.modal-close-btn {
    width: 38px !important;
    height: 38px !important;

    border-radius: 50% !important;

    color: rgba(255, 255, 255, .78) !important;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    transform: scale(1.04);
}

.modal-body {
    background: transparent !important;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(150, 180, 210, .42)
        transparent;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(150, 180, 210, .36);
}

.modal-footer {
    min-height: 54px !important;

    background:
        linear-gradient(
            180deg,
            rgba(24, 40, 61, .72),
            rgba(11, 24, 41, .92)
        ) !important;

    border-top: 1px solid rgba(255, 255, 255, .14) !important;
}


/* =========================================================
   SHOP – HEADER / TABS
   ========================================================= */

#shop-modal .shop-header-v2 {
    position: sticky;
    top: -12px;
    z-index: 20;

    margin: -12px -14px 12px;
    padding: 10px 14px 11px;

    background:
        linear-gradient(
            180deg,
            rgba(54, 73, 99, .98) 0%,
            rgba(43, 61, 84, .94) 72%,
            rgba(43, 61, 84, 0) 100%
        ) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#shop-modal .shop-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 5px !important;

    width: 100%;
    max-width: 100%;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 1px 0 7px !important;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

#shop-modal .shop-tabs::-webkit-scrollbar {
    display: none;
}

#shop-modal .shop-tabs::after {
    display: none !important;
}

#shop-modal .shop-tab {
    flex: 0 0 auto !important;

    min-height: 32px;

    padding: 6px 10px !important;

    border: 1px solid transparent !important;
    border-radius: 9px !important;

    background: rgba(16, 31, 50, .58) !important;

    color: rgba(255, 255, 255, .76) !important;

    font-size: .69rem !important;
    font-weight: 600 !important;

    box-shadow: none !important;
}

#shop-modal .shop-tab:hover {
    background: rgba(56, 189, 248, .14) !important;
    border-color: rgba(56, 189, 248, .32) !important;
}

#shop-modal .shop-tab.active {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;

    color: #062033 !important;

    box-shadow:
        0 0 15px rgba(56, 189, 248, .22) !important;
}


/* =========================================================
   SHOP – FILTERS
   ========================================================= */

#shop-modal .shop-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 7px !important;

    margin-top: 1px;
}

#shop-modal .shop-filters label {
    min-width: 0;

    gap: 3px !important;

    color: rgba(215, 228, 242, .68);

    font-size: .58rem;
}

#shop-modal .shop-filters select {
    width: 100% !important;
    min-width: 0;

    min-height: 34px !important;

    padding: 5px 7px !important;

    border: 1px solid rgba(170, 195, 220, .30) !important;
    border-radius: 9px !important;

    background: rgba(9, 22, 38, .78) !important;

    color: #eef6ff !important;

    font-size: .65rem !important;
}


/* =========================================================
   SHOP – ITEM CARDS
   ========================================================= */

#shop-modal .shop-list {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;

    width: 100%;
    min-width: 0;
}

#shop-modal .shop-item-card {
    position: relative;

    display: grid !important;

    grid-template-columns: 64px minmax(0, 1fr) !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 9px !important;

    padding: 8px !important;

    border: 1px solid rgba(180, 210, 238, .14) !important;
    border-radius: 17px !important;

    background:
        linear-gradient(
            145deg,
            rgba(31, 51, 76, .96),
            rgba(18, 35, 57, .96)
        ) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .22) !important;

    transition:
        border-color .18s ease,
        transform .18s ease,
        background .18s ease;
}

#shop-modal .shop-item-card:hover {
    transform: translateY(-1px) !important;

    border-color:
        rgba(56, 189, 248, .42) !important;

    background:
        linear-gradient(
            145deg,
            rgba(37, 61, 91, .98),
            rgba(20, 40, 64, .98)
        ) !important;
}

#shop-modal .shop-item-image {
    width: 64px !important;
    min-width: 64px !important;

    min-height: 96px !important;
    height: 100% !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 13px !important;

    background:
        linear-gradient(
            145deg,
            #2a4564,
            #203a58
        ) !important;
}

#shop-modal .shop-item-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}

#shop-modal .shop-item-main {
    min-width: 0 !important;

    display: flex;
    flex-direction: column;

    gap: 2px !important;
}

#shop-modal .shop-item-header-line {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;
}

#shop-modal .shop-item-name {
    min-width: 0;

    margin: 0 !important;

    font-size: .92rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    overflow-wrap: anywhere;
}

#shop-modal .shop-item-brand {
    color: #a9c8e5 !important;
    font-size: .61rem !important;
    line-height: 1.2;
}

#shop-modal .shop-item-meta {
    color: #90aac4 !important;
    font-size: .61rem !important;
    line-height: 1.25;
}

#shop-modal .shop-item-level {
    color: #b9c9db !important;
    font-size: .60rem !important;
}

#shop-modal .shop-item-skills {
    display: flex !important;
    flex-wrap: wrap;

    gap: 4px !important;

    margin-top: 1px;
}

#shop-modal .shop-item-skill-pill {
    padding: 2px 5px !important;

    border: 1px solid rgba(170, 195, 220, .20) !important;
    border-radius: 6px !important;

    background: rgba(7, 20, 35, .50) !important;

    color: #d9e7f5;

    font-size: .57rem !important;
}

#shop-modal .rarity-badge {
    flex: 0 0 auto;

    padding: 3px 6px !important;

    font-size: .53rem !important;
}


/* =========================================================
   SHOP – FOOTER / PRICE / BUTTON
   ========================================================= */

#shop-modal .shop-item-footer {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;

    align-items: center;

    gap: 8px !important;

    margin-top: 4px !important;

    padding-top: 5px !important;
}

#shop-modal .shop-item-price {
    min-width: 0;

    color: var(--ui-warning) !important;

    font-size: .82rem !important;
    font-weight: 800 !important;

    text-align: left !important;

    white-space: nowrap;
}

#shop-modal .shop-buy-btn {
    min-width: 58px !important;
    min-height: 31px !important;

    padding: 5px 11px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #35d978,
            #69e99c
        ) !important;

    color: #052113 !important;

    font-size: .62rem !important;
    font-weight: 800 !important;

    box-shadow:
        0 4px 13px rgba(53, 217, 120, .18);

    touch-action: manipulation;
}

#shop-modal .shop-buy-btn:hover {
    background:
        linear-gradient(
            135deg,
            #40df81,
            #7af0aa
        ) !important;

    filter: brightness(1.04);
}

#shop-modal .shop-buy-btn:disabled {
    background: rgba(90, 103, 116, .72) !important;

    color: rgba(255,255,255,.55) !important;

    box-shadow: none !important;
}

#shop-modal .shop-item-lock {
    color: #f7d96a !important;
    font-size: .60rem !important;
}


/* =========================================================
   SHOP – OWNED ITEM
   ========================================================= */

#shop-modal .shop-item-card.shop-item-owned {
    border-color: rgba(73, 163, 255, .45) !important;

    background:
        linear-gradient(
            145deg,
            rgba(31, 62, 96, .96),
            rgba(17, 37, 62, .96)
        ) !important;
}


/* =========================================================
   INVENTORY
   ========================================================= */

#inventory-modal .inventory-filters {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 7px !important;
}

#inventory-modal .inventory-list {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 9px !important;
}

#inventory-modal .inventory-item-card {
    width: 100%;
    min-width: 0;

    padding: 10px !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(27, 52, 77, .94),
            rgba(14, 30, 49, .96)
        ) !important;
}


/* =========================================================
   TRAINING / JOB – CARDS
   ========================================================= */

#training-modal .training-card,
#job-modal .training-card,
#job-modal .job-card {
    border-radius: 16px !important;

    padding: 10px !important;

    border: 1px solid rgba(160, 190, 220, .20) !important;

    background:
        linear-gradient(
            145deg,
            rgba(30, 55, 83, .90),
            rgba(13, 28, 47, .96)
        ) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.20) !important;
}

#training-modal .training-title {
    font-size: .82rem !important;
}

#training-modal .training-desc {
    color: #c2d0df !important;
}

#training-modal .training-start-btn {
    min-height: 32px !important;

    padding: 6px 12px !important;

    border-radius: 999px !important;

    font-size: .65rem !important;
}


/* =========================================================
   BOTTOM NAV – MOBILE SAFE AREA
   ========================================================= */

.bottom-nav {
    padding-bottom:
        max(5px, env(safe-area-inset-bottom)) !important;
}

.nav-item {
    touch-action: manipulation;
}


/* =========================================================
   CHAT – MOBILE
   ========================================================= */

.chat-widget {
    border:
        1px solid rgba(180, 210, 238, .22) !important;

    background:
        linear-gradient(
            145deg,
            rgba(51, 70, 97, .94),
            rgba(11, 25, 43, .98)
        ) !important;

    box-shadow:
        0 24px 70px rgba(0,0,0,.50) !important;
}


/* =========================================================
   ACCESSIBILITY / TOUCH
   ========================================================= */

button,
select,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   FINAL MOBILE BREAKPOINT
   ========================================================= */

@media (max-width: 479px) {

    .modal-backdrop {
        padding: 7px !important;
    }

    .modal-panel,
    .modal-panel-wide {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;

        height: calc(100dvh - 14px) !important;
        max-height: calc(100dvh - 14px) !important;

        border-radius: 19px !important;
    }

    .modal-header {
        min-height: 50px !important;
        padding: 7px 10px !important;
    }

    .modal-body {
        padding: 9px 10px !important;
    }

    .modal-footer {
        min-height: 50px !important;
        padding: 7px 10px !important;
    }

    /* Shop: exakt für schmale Smartphone-Breiten */
    #shop-modal .shop-header-v2 {
        margin: -9px -10px 10px;
        padding: 9px 10px 9px;
    }

    #shop-modal .shop-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    #shop-modal .shop-filters label {
        font-size: .54rem;
    }

    #shop-modal .shop-filters select {
        min-height: 32px !important;
        padding: 4px 5px !important;
        font-size: .59rem !important;
    }

    #shop-modal .shop-item-card {
        grid-template-columns: 60px minmax(0, 1fr) !important;

        gap: 8px !important;

        padding: 7px !important;

        border-radius: 15px !important;
    }

    #shop-modal .shop-item-image {
        width: 60px !important;
        min-width: 60px !important;
        min-height: 91px !important;

        border-radius: 12px !important;
    }

    #shop-modal .shop-item-name {
        font-size: .83rem !important;
    }

    #shop-modal .shop-item-brand,
    #shop-modal .shop-item-meta,
    #shop-modal .shop-item-level {
        font-size: .56rem !important;
    }

    #shop-modal .shop-item-skill-pill {
        font-size: .53rem !important;
    }

    #shop-modal .shop-item-footer {
        grid-template-columns: minmax(0, 1fr) auto !important;

        gap: 6px !important;
    }

    #shop-modal .shop-item-price {
        font-size: .76rem !important;
    }

    #shop-modal .shop-buy-btn {
        min-width: 54px !important;
        min-height: 29px !important;

        padding: 5px 9px !important;

        font-size: .59rem !important;
    }

    /* Inventory */
    #inventory-modal .inventory-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Training slots */
    #training-modal .training-gear-slot-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #training-modal .training-gear-pool {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Chat */
    .chat-widget {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: min(82dvh, 680px) !important;
        border-radius: 21px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 480px) and (max-width: 699px) {

    #shop-modal .shop-item-card {
        grid-template-columns: 68px minmax(0, 1fr) !important;
    }

    #shop-modal .shop-item-image {
        width: 68px !important;
        min-width: 68px !important;
        min-height: 100px !important;
    }

    #shop-modal .shop-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   TABLET / DESKTOP – SHOP ZWEISPALTIG
   ========================================================= */

@media (min-width: 700px) {

    #shop-modal .shop-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    #shop-modal .shop-item-card {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    #shop-modal .shop-item-image {
        width: 72px !important;
        min-width: 72px !important;
        min-height: 104px !important;
    }
}


/* =========================================================
   LANDSCAPE – KEINE ÜBERLÄUFE
   ========================================================= */

@media (max-height: 620px) and (orientation: landscape) {

    .modal-panel,
    .modal-panel-wide {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }

    .modal-header {
        min-height: 44px !important;
    }

    .modal-footer {
        min-height: 44px !important;
    }

    #shop-modal .shop-item-card {
        grid-template-columns: 56px minmax(0, 1fr) !important;
    }

    #shop-modal .shop-item-image {
        width: 56px !important;
        min-width: 56px !important;
        min-height: 78px !important;
    }
}


/* =========================================================
   FINAL HOME SCALING – MOBILE BASIS BLEIBT UNVERÄNDERT
   ---------------------------------------------------------
   <= 479px: bestehendes mobiles Layout bleibt unangetastet.
   Ab 480px wächst die Oberfläche nur moderat mit der
   Bildschirmbreite. Keine übergroße Desktop-Skalierung.
   ========================================================= */

@media (min-width: 480px) {

    /* Der Home-Inhalt darf auf größeren Displays wachsen,
       aber mit einer klaren Obergrenze. */
    .modern-dashboard {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: clamp(15px, 1.8vw, 24px);
    }

    /* ---------- Oberer Home-Header ---------- */
    .modern-header {
        padding:
            clamp(4px, .45vw, 8px)
            clamp(5px, .55vw, 12px);
        gap: clamp(4px, .7vw, 12px);
    }

    .header-weather {
        width: clamp(90px, 9vw, 132px);
        padding: clamp(5px, .55vw, 9px);
    }

    .weather-icon {
        font-size: clamp(14px, 1.35vw, 20px);
    }

    .weather-info {
        font-size: clamp(12px, 1.05vw, 16px);
    }

    .header-player {
        gap: clamp(12px, 1.1vw, 20px);
    }

    .player-avatar-small {
        width: clamp(64px, 6.2vw, 92px);
        height: clamp(64px, 6.2vw, 92px);
        border-width: clamp(3px, .25vw, 4px);
    }

    /* Der Text wächst nur leicht – nicht proportional zum ganzen
       Desktop, damit der Header nicht wieder riesig wird. */
    .player-name {
        font-size: clamp(14px, 1.15vw, 20px) !important;
    }

    .player-level {
        font-size: clamp(8px, .7vw, 12px) !important;
    }

    .xp-text {
        font-size: clamp(8px, .65vw, 11px) !important;
    }

    .xp-bar {
        height: clamp(5px, .42vw, 8px) !important;
    }

    .header-money {
        min-width: clamp(105px, 11vw, 170px);
        padding: clamp(8px, .8vw, 14px);
        font-size: clamp(15px, 1.15vw, 20px);
    }

    /* ---------- Home-Hauptbereich ---------- */
    .hero-character {
        /* Mobile bleibt unverändert. Auf größeren Screens nur sanft wachsen. */
        min-height: clamp(400px, 36vw, 520px);
        margin-top: clamp(50px, 3.8vw, 62px);
    }

    .hero-avatar {
        width: clamp(290px, 25vw, 360px);
        max-width: 74%;
        margin-top: clamp(30px, 2vw, 38px);
    }

    .hero-character::before {
        width: clamp(340px, 30vw, 470px);
        height: clamp(360px, 32vw, 500px);
    }

    .hero-character::after {
        width: clamp(220px, 20vw, 300px);
        height: clamp(28px, 2.5vw, 38px);
        bottom: clamp(25px, 2vw, 34px);
    }

    /* ---------- Statuskarten ---------- */
    .stat-card {
        border-radius: clamp(22px, 1.8vw, 30px);
    }

    .stat-card span {
        font-size: clamp(10px, .78vw, 14px);
    }

    .stat-card strong {
        font-size: clamp(16px, 1.35vw, 22px);
    }

    .strength,
    .technique {
        top: clamp(135px, 11vw, 175px);
    }

    .strength,
    .balance {
        left: clamp(15px, 1.6vw, 24px);
    }

    .technique,
    .weight {
        right: clamp(15px, 1.6vw, 24px);
    }

    .balance,
    .weight {
        bottom: clamp(20px, 1.7vw, 28px);
    }

    .stamina {
        bottom: clamp(-10px, -.4vw, -5px);
    }

    /* ---------- Energie: sichtbarer Ring ---------- */
    .energy-circle {
        top: clamp(10px, 1vw, 16px);
        width: clamp(82px, 7vw, 108px);
        height: clamp(82px, 7vw, 108px);
        border-radius: 50%;
        position: absolute;
        isolation: isolate;
    }

    /* Ring liegt wirklich AUSSEN um den Energie-Kasten.
       Die Energie beträgt aktuell 72 %. Deshalb ist der Ring zu 72 % geschlossen;
       die restlichen 28 % bleiben sichtbar frei. */
    .energy-circle::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        padding: 3px;
        background: conic-gradient(
            from -90deg,
            #38bdf8 0 72%,
            rgba(255,255,255,.10) 72% 100%
        );
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 20;
        filter: drop-shadow(0 0 7px rgba(56,189,248,.45));
    }

    /* ---------- Bottom-Navigation ---------- */
    .bottom-nav {
        height: clamp(70px, 6.2vw, 86px);
        padding-left: clamp(6px, .7vw, 12px) !important;
        padding-right: clamp(6px, .7vw, 12px) !important;
        gap: clamp(6px, .7vw, 12px);
    }

    .nav-item {
        min-width: clamp(56px, 6vw, 82px);
        padding: clamp(6px, .6vw, 9px) clamp(8px, .8vw, 13px);
        font-size: clamp(.6rem, .58vw, .75rem);
    }

    .nav-icon {
        font-size: clamp(1.6rem, 1.7vw, 2rem);
    }
}


/* =========================================================
   TABLET / DESKTOP APP-WIDTH
   ---------------------------------------------------------
   Die mobile Breite bleibt unverändert. Auf größeren Screens
   wird die eigentliche Spielfläche schrittweise breiter, statt
   bei 480px stehenzubleiben. Obergrenze bewusst begrenzt.
   ========================================================= */

@media (min-width: 700px) {
    :root {
        --app-width: clamp(500px, 50vw, 700px);
    }

    .app-shell {
        max-width: var(--app-width);
    }

    .app-header,
    .bottom-nav {
        max-width: var(--app-width);
    }
}


/* =========================================================
   GROSSE DESKTOPS – NUR NOCH LEICHTER ZUWACHS
   ========================================================= */

@media (min-width: 1200px) {
    :root {
        --app-width: min(700px, 50vw);
    }

    .modern-dashboard {
        max-width: 700px;
    }
}


/* =========================================================
   ENERGIE-RING – 72 % AKTUELLER ENERGIESTAND
   ========================================================= */
.energy-circle {
    position: absolute;
    isolation: isolate;
    border-radius: 50%;
}

.energy-circle::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(
        from -90deg,
        #38bdf8 0 72%,
        rgba(255,255,255,.10) 72% 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 20;
    filter: drop-shadow(0 0 7px rgba(56,189,248,.45));
}

/* =========================================================
   FINAL RESPONSIVE FIX – MOBILE ALS FESTE BASIS
   ---------------------------------------------------------
   Ziel:
   - <=479px: bestehendes Mobile-Layout bleibt unverändert.
   - ab 480px: die Spielfläche wächst moderat mit dem Bildschirm.
   - Die Home-Elemente orientieren sich an der tatsächlichen
     Spielfläche, nicht unkontrolliert am gesamten Viewport.
   - Keine übergroßen Desktop-Karten / Abstände.
   - Energie-Ring bleibt ein echter Rand und wird über
     --energy-percent dynamisch geschlossen.
   ========================================================= */

@media (min-width: 480px) {

    :root {
        /* Moderates Wachstum: bei 480px Basis, danach langsam breiter. */
        --app-width: clamp(480px, 76vw, 640px);
    }

    .app-shell {
        width: 100%;
        max-width: var(--app-width);
        margin-inline: auto;
    }

    .app-header,
    .bottom-nav {
        width: calc(100% - 16px);
        max-width: calc(var(--app-width) - 0px);
    }

    /* Home ist die Bezugsfläche für alle proportionalen Werte. */
    .modern-dashboard {
        width: 100%;
        max-width: var(--app-width);
        margin-inline: auto;
        padding: clamp(15px, 2.1vw, 22px);
        container-type: inline-size;
    }

    /* ---------- Header: wächst nur leicht ---------- */
    .modern-header {
        gap: clamp(6px, 1.2vw, 10px);
        padding: clamp(5px, 1vw, 8px) clamp(6px, 1.2vw, 11px);
    }

    .header-weather {
        width: clamp(90px, 16cqw, 116px);
        padding: clamp(5px, 1.1cqw, 8px);
    }

    .weather-icon {
        font-size: clamp(14px, 2.5cqw, 18px);
    }

    .weather-info {
        font-size: clamp(12px, 2.0cqw, 15px);
    }

    .header-player {
        gap: clamp(10px, 2.2cqw, 16px);
    }

    .player-avatar-small {
        width: clamp(64px, 11cqw, 82px);
        height: clamp(64px, 11cqw, 82px);
    }

    .player-name {
        font-size: clamp(14px, 2.8cqw, 18px) !important;
    }

    .player-level {
        font-size: clamp(8px, 1.7cqw, 11px) !important;
    }

    .xp-text {
        font-size: clamp(8px, 1.55cqw, 10px) !important;
    }

    .xp-bar {
        height: clamp(5px, 1cqw, 7px) !important;
    }

    .header-money {
        min-width: clamp(105px, 19cqw, 145px);
        padding: clamp(6px, 1.5cqw, 10px);
        font-size: clamp(13px, 2.5cqw, 18px);
    }

    /* ---------- HERO: proportional zur Spielfläche ---------- */
    .hero-character {
        min-height: clamp(400px, 72cqw, 500px);
        margin-top: clamp(50px, 8cqw, 60px);
        margin-bottom: clamp(10px, 2cqw, 16px);
    }

    .hero-avatar {
        width: clamp(290px, 48cqw, 340px);
        max-width: 74%;
        margin-top: clamp(30px, 5cqw, 36px);
    }

    .hero-character::before {
        width: clamp(340px, 58cqw, 440px);
        height: clamp(360px, 62cqw, 470px);
    }

    .hero-character::after {
        width: clamp(220px, 38cqw, 290px);
        height: clamp(28px, 4.8cqw, 36px);
        bottom: clamp(25px, 4.2cqw, 32px);
    }

    /* ---------- Stat-Karten: an den Home-Rand gekoppelt ---------- */
    .stat-circle {
        width: clamp(68px, 11.5cqw, 82px);
        height: clamp(68px, 11.5cqw, 82px);
    }

    .stat-card {
        border-radius: clamp(22px, 3.7cqw, 28px);
    }

    .stat-card span {
        font-size: clamp(10px, 1.7cqw, 13px);
    }

    .stat-card strong {
        font-size: clamp(16px, 3cqw, 21px);
    }

    .strength,
    .technique {
        top: clamp(125px, 21cqw, 160px);
    }

    .halse,
    .balance {
        left: clamp(15px, 2.6cqw, 22px);
    }

    .spruenge,
    .wenden {
        right: clamp(15px, 2.6cqw, 22px);
    }

    .halse,
    .spruenge {
        top: clamp(205px, 34cqw, 250px);
    }

    .balance,
    .wenden {
        bottom: clamp(50px, 8.3cqw, 62px);
    }

    .stamina,
    .tricks {
        bottom: clamp(-10px, -1.7cqw, -6px);
    }

    .stamina {
        left: 38%;
    }

    .tricks {
        left: 62%;
    }

    /* ---------- ENERGIE-RING ----------
       Der Ring sitzt außen um den Energie-Kreis.
       --energy-percent kann von JS gesetzt werden:
       z.B. style="--energy-percent: 72%;"
       Ohne JS bleibt der aktuelle Wert 72 %. */
    .energy-circle {
        top: clamp(10px, 2cqw, 15px);
        width: clamp(82px, 13.5cqw, 102px);
        height: clamp(82px, 13.5cqw, 102px);
        position: absolute;
        isolation: isolate;
        --energy-percent: 72%;
    }

    .energy-circle::before {
        content: "";
        position: absolute;
        inset: clamp(-3px, -.5cqw, -2px);
        border-radius: 50%;
        padding: clamp(3px, .5cqw, 4px);

        background: conic-gradient(
            from -90deg,
            #38bdf8 0 var(--energy-percent),
            rgba(255,255,255,.10) var(--energy-percent) 100%
        );

        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;

        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask-composite: exclude;

        pointer-events: none;
        z-index: 20;
        filter: drop-shadow(0 0 7px rgba(56,189,248,.45));
    }

    /* ---------- Bottom-Navigation ---------- */
    .bottom-nav {
        height: clamp(70px, 9vw, 82px);
        padding-left: clamp(6px, 1vw, 10px) !important;
        padding-right: clamp(6px, 1vw, 10px) !important;
        gap: clamp(5px, 1vw, 9px);
    }

    .nav-item {
        min-width: clamp(56px, 8.5cqw, 72px);
        padding: clamp(6px, 1cqw, 8px) clamp(7px, 1.4cqw, 11px);
        font-size: clamp(.6rem, 1.15cqw, .72rem);
    }

    .nav-icon {
        font-size: clamp(1.6rem, 3.1cqw, 1.9rem);
    }
}

/* =========================================================
   DESKTOP AB 700px
   Keine zweite starke Skalierung mehr.
   Die Spielfläche wächst nur noch bis zur definierten Grenze.
   ========================================================= */

@media (min-width: 700px) {

    :root {
        --app-width: clamp(560px, 76vw, 640px);
    }

    .app-shell {
        max-width: var(--app-width);
    }

    .app-header,
    .bottom-nav {
        max-width: var(--app-width);
    }

    .modern-dashboard {
        max-width: var(--app-width);
    }
}

/* Große Bildschirme: NICHT erneut auf 700px aufblasen. */
@media (min-width: 1200px) {

    :root {
        --app-width: 640px;
    }

    .modern-dashboard {
        max-width: 640px;
    }
}

/* =========================================================
   ENERGIE-RING – 0–100 %
   ========================================================= */

.energy-circle {
    position: absolute;

    /* Größe des kompletten Energie-Bereichs */
    padding:5px;

    border-radius: 22px;
    isolation: isolate;

    --energy-percent: 0%;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Der eigentliche Fortschrittsring */
.energy-circle::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background: conic-gradient(
        from -90deg,
        #38bdf8 0 var(--energy-percent),
        rgba(255, 255, 255, 0.12) var(--energy-percent) 100%
    );

    /* Nur den äußeren Rand anzeigen */
    padding: 5px;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    pointer-events: none;

    z-index: 1;

    filter:
        drop-shadow(0 0 5px rgba(56, 189, 248, 0.45));
}


/* =========================================================
   DIE KARTE IN DER MITTE
   ========================================================= */

.energy-circle .stat-card {
    position: relative;
    z-index: 2;

    /*
       Die eigentliche Karte bleibt groß.
       Diese Werte kannst du bei Bedarf noch leicht erhöhen.
    */
    width: 170px;
    min-height: 90px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}


/* =========================================================
   ENERGIE-WERTE
   ========================================================= */

.energy-circle[data-energy="0"] {
    --energy-percent: 0%;
}

.energy-circle[data-energy="1"] {
    --energy-percent: 1%;
}

/* usw. wird durch den Inline-Wert automatisch erledigt */


/* =========================================================
   ALTES .energy-ring NICHT MEHR VERWENDEN
   ========================================================= */

.energy-circle .energy-ring {
    display: none !important;
}


.energy-circle {
    position: absolute;
    width: 150px;
    height: 150px;

    border-radius: 50%;
    isolation: isolate;

    --energy-percent: 0%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.energy-circle::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 50%;
    padding: 4px;

    background: conic-gradient(
        from -90deg,
        #38bdf8 0 var(--energy-percent),
        rgba(255, 255, 255, 0.12) var(--energy-percent) 100%
    );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    pointer-events: none;
    z-index: 1;

    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.45));
}

.energy-circle .stat-card {
    position: relative;
    z-index: 2;

    width: 145px;
    min-height: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.energy-circle .energy-ring {
    display: none !important;
}
/* =========================================================
   FINAL ENERGY UI – rechteckige Referenz-Card
   ---------------------------------------------------------
   Kein großer Kreis mehr: Ring folgt exakt der Card-Form.
   ========================================================= */
.energy-circle {
    position: absolute !important;
    top: 145px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 194px !important;
    height: 142px !important;
    padding: 3px !important;
    box-sizing: border-box !important;

    border-radius: 28px !important;
    isolation: isolate !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    --energy-percent: calc(var(--energy, 0) * 1%);
}

/* Blauer Energie-Ring – exakt dieselbe Form wie die Card */
.energy-circle::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    border-radius: 28px !important;
    padding: 3px !important;

    background: conic-gradient(
        from -90deg,
        #38bdf8 0 var(--energy-percent),
        rgba(255,255,255,.10) var(--energy-percent) 100%
    ) !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;

    pointer-events: none !important;
    filter: drop-shadow(0 0 5px rgba(56,189,248,.40)) !important;
}

/* Milchige Card – komplett gefüllt und vom Ring sauber umschlossen */
.energy-circle .stat-card {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 25px !important;
    border: 1px solid rgba(255,255,255,.12) !important;

    background: rgba(92,105,123,.46) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

.energy-circle .stat-card .material-symbols-outlined {
    margin-bottom: 2px !important;
}

.energy-circle .stat-card strong {
    line-height: 1 !important;
}

/* Das alte innere Ring-Element wird nicht mehr gebraucht. */
.energy-circle .energy-ring {
    display: none !important;
}

/* Auf kleinen Displays proportional kompakt halten. */
@media (max-width: 480px) {
    .energy-circle {
        top: 145px !important;
        width: 194px !important;
        height: 142px !important;
    }
}

/* =========================================================
   FINAL ENERGY CARD V2
   - gleiche Größe wie die normalen Stat-Cards
   - deutlich höher positioniert
   - blauer Ring folgt exakt der Card-Form
   ========================================================= */
.energy-circle {
    top: 55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 140px !important;
    height: 140px !important;
    padding: 3px !important;
    box-sizing: border-box !important;

    border-radius: 22px !important;
    isolation: isolate !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.energy-circle::before {
    inset: 0 !important;
    border-radius: 22px !important;
    padding: 3px !important;
}

.energy-circle .stat-card {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 19px !important;

    background: rgba(92,105,123,.46) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

@media (max-width: 480px) {
    .energy-circle {
        top: 0px !important;
        width: 70px !important;
        height: 70px !important;
    }
}


/* =========================================================
   CHAT – ANKLICKBare SPIELERNAMEN & SYSTEMNACHRICHTEN
========================================================= */

.chat-message-name.player-link,
.chat-system-player {
    display: inline-block;
    cursor: pointer;
    color: #8bdcff;
    text-decoration: none;
    transition: color .18s ease, text-shadow .18s ease;
}

.chat-message-name.player-link:hover,
.chat-system-player:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(62,166,255,.55);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-message.system-message {
    border-color: rgba(62,166,255,.28);
    background: linear-gradient(135deg, rgba(31,95,145,.24), rgba(8,15,30,.52));
    box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 0 22px rgba(62,166,255,.05);
}

.chat-message.system-message .chat-system-name {
    color: rgba(255,255,255,.72);
    letter-spacing: .02em;
}

.chat-message.system-message .chat-system-icon {
    margin-right: 2px;
}

.chat-message.system-message .chat-system-player {
    font-weight: 700;
}
\n\n/* =========================================================\n   FINAL OVERRIDES – SPIELERPROFIL / CHAT / AUSRÜSTUNG\n========================================================= */\n\n/* Reihenfolge: Spielerprofil > Chat > alle anderen Modals */\n#player-profile-modal {\n    z-index: 3000 !important;\n}\n\n#chat-widget {\n    z-index: 2100 !important;\n}\n\n.modal-backdrop:not(#player-profile-modal) {\n    z-index: 2000 !important;\n}\n\n/* Ausrüstung wieder als horizontale Reihe mit Seitenscroll */\n#player-profile-modal #profile-gear.profile-gear-list {\n    display: flex !important;\n    flex-direction: row !important;\n    flex-wrap: nowrap !important;\n    gap: 14px !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    overflow-x: auto !important;\n    overflow-y: hidden !important;\n    padding: 6px 4px 14px !important;\n    scroll-snap-type: x proximity;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: thin;\n}\n\n#player-profile-modal .profile-gear-card {\n    flex: 0 0 92px !important;\n    width: 92px !important;\n    min-width: 92px !important;\n    max-width: 92px !important;\n}\n\n#player-profile-modal .profile-gear-card img {\n    display: block;\n    width: 72px !important;\n    height: 72px !important;\n    margin: 0 auto;\n    object-fit: contain;\n}\n\n/* Trophäen */\n#player-profile-modal .profile-achievements {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n#player-profile-modal .profile-achievement-card {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border: 1px solid rgba(255,255,255,.10);\n    border-radius: 14px;\n    background: rgba(255,255,255,.045);\n}\n\n#player-profile-modal .profile-achievement-card > .material-symbols-outlined {\n    font-size: 26px;\n    flex: 0 0 auto;\n}\n\n#player-profile-modal .profile-achievement-card strong,\n#player-profile-modal .profile-achievement-card small {\n    display: block;\n}\n\n#player-profile-modal .profile-achievement-card small {\n    margin-top: 2px;\n    opacity: .72;\n}\n\n#player-profile-modal .profile-achievement-empty {\n    opacity: .65;\n    padding: 8px 0;\n}\n

/* Trophäen-Bilder: vorbereitet für eigene Assets */
#player-profile-modal .profile-achievement-image-wrap {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
}

#player-profile-modal .profile-achievement-image {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

#player-profile-modal .profile-achievement-icon {
    width: 48px;
    flex: 0 0 48px;
    text-align: center;
    font-size: 28px;
}

#player-profile-modal .profile-achievement-text {
    min-width: 0;
}

/* =========================================================
   FINAL OVERRIDES – SPIELERPROFIL / CHAT / AUSRÜSTUNG
========================================================= */

/* Spielerprofil > Chat > übrige Modals */
#player-profile-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
}

#player-profile-modal.is-open {
    display: flex !important;
}

#chat-widget {
    z-index: 90000 !important;
}

.modal-backdrop:not(#player-profile-modal) {
    z-index: 80000 !important;
}

/* Ausrüstung: wieder eine horizontale Reihe, seitlich scrollbar */
#player-profile-modal .player-compare {
    min-width: 0 !important;
}

#player-profile-modal #profile-gear.profile-gear-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 14px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#player-profile-modal .profile-gear-card {
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
}

#player-profile-modal .profile-gear-card img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Trophäen */
#player-profile-modal .profile-achievements {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

#player-profile-modal .profile-achievement-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
}

#player-profile-modal .profile-achievement-image-wrap {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
    overflow: hidden !important;
}

#player-profile-modal .profile-achievement-image {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}


/* =========================================================
   V5 – PROFIL / TROPHÄEN / AUSRÜSTUNG
   Spielerprofil liegt über Chat und allen anderen Modals.
========================================================= */
#player-profile-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
}

#player-profile-modal.is-open {
    display: flex !important;
}

#chat-widget {
    z-index: 900000 !important;
}

.modal-backdrop:not(#player-profile-modal) {
    z-index: 800000 !important;
}

/* Ausrüstung: eine Reihe, horizontal scrollbar wie zuvor */
#player-profile-modal .player-compare {
    min-width: 0 !important;
    overflow: visible !important;
}

#player-profile-modal #profile-gear.profile-gear-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

#player-profile-modal .profile-gear-card {
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
}

#player-profile-modal .profile-gear-card img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Trophäen: exakt dieselbe horizontale Kartenlogik wie bei Ausrüstung */
#player-profile-modal #profile-achievements.profile-achievements {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

#player-profile-modal .profile-achievement-card {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    min-height: 132px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 9px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
}

#player-profile-modal .profile-achievement-image-wrap {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
    overflow: hidden !important;
}

#player-profile-modal .profile-achievement-image {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
}

#player-profile-modal .profile-achievement-icon {
    width: auto !important;
    flex: 0 0 auto !important;
    font-size: 36px !important;
}

#player-profile-modal .profile-achievement-text {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

#player-profile-modal .profile-achievement-card strong {
    display: block !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
}

#player-profile-modal .profile-achievement-card small {
    display: block !important;
    margin-top: 3px !important;
    font-size: .68rem !important;
    line-height: 1.2 !important;
    opacity: .72 !important;
}

#player-profile-modal .profile-achievement-empty {
    flex: 0 0 auto !important;
    opacity: .65 !important;
    padding: 8px 0 !important;
}


/* =========================================================
   VEREINS-EVENTS
========================================================= */
#events-modal { z-index: 800000 !important; }
#events-modal .modal-panel-wide { max-width: 920px; }
.events-toolbar,
.events-create-header,
.events-create-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.events-toolbar { margin: 8px 0 14px; }
.events-toolbar h3,
.events-create-header h3 { margin:0; }
.events-create-section {
    padding:14px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.045);
}
.events-form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:14px 0;
}
.events-form-grid label { display:block; font-size:.82rem; }
.events-form-grid input,
.events-form-grid select {
    display:block;
    width:100%;
    min-width:0;
    margin-top:6px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:10px 12px;
    background:rgba(0,0,0,.18);
    color:inherit;
}
.events-list { display:grid; gap:10px; }
.event-card {
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:14px;
    background:rgba(255,255,255,.045);
}
.event-card-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.event-card-title { font-weight:700; font-size:1rem; }
.event-card-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; margin:10px 0; font-size:.82rem; }
.event-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.event-status { font-size:.72rem; opacity:.8; }
.event-join-wrap { margin-top:14px; }
#event-join-area .training-gear-inline { margin-top:0; }
@media (max-width: 620px) {
    .events-form-grid { grid-template-columns:1fr; }
    .events-toolbar, .events-create-header { align-items:flex-start; flex-direction:column; }
    .event-card-meta { grid-template-columns:1fr; }
}


.profile-event-stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:8px 0 14px;
}
.profile-event-stat {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:62px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.045);
    padding:8px;
    text-align:center;
    font-size:.75rem;
}
.profile-event-stat strong { font-size:1rem; }
.event-results-list { display:grid; gap:8px; }
.event-result-row {
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
}
@media (max-width: 620px) {
    .profile-event-stats { grid-template-columns:1fr; }
}

/* =========================================================
   SAISON-LIGA
========================================================= */
.league-panel{max-width:980px}
.league-overview{display:grid;grid-template-columns:minmax(220px,.9fr) 1.8fr;gap:12px;margin-bottom:14px}
.league-tier-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.07)}
.league-tier-card.gold{border-color:rgba(255,205,70,.45)}
.league-tier-card.silver{border-color:rgba(190,205,220,.45)}
.league-tier-card.bronze{border-color:rgba(180,110,65,.45)}
.league-tier-icon{font-size:2rem}.league-tier-label{font-weight:800;font-size:1.05rem}.league-season-name{opacity:.72;margin-top:3px}
.league-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.league-stats-grid>div{padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.045)}
.league-stats-grid span,.league-stats-grid small{display:block;opacity:.7;font-size:.75rem}.league-stats-grid strong{display:block;font-size:1.25rem;margin:3px 0}
.league-movement-note{grid-column:1/-1;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:.82rem}
.league-race-card,.league-gear-card,.league-ready-card{border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:15px;background:rgba(255,255,255,.045);margin-bottom:14px}
.league-race-header{display:flex;justify-content:space-between;gap:12px;align-items:center}.league-race-header strong{display:block}.league-race-header span{display:block;font-size:.78rem;opacity:.72;margin-top:3px}.league-countdown{font-weight:800;white-space:nowrap}
.league-race-info{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.league-race-info span{font-size:.78rem;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.07)}
.league-ready-state,.league-locked-state{padding:12px;border-radius:12px;background:rgba(80,180,120,.12);font-weight:700}.league-locked-state{background:rgba(255,120,100,.10)}
.league-section-title{font-weight:800;margin:12px 0 8px}.league-table{display:grid;gap:5px}.league-row{display:grid;grid-template-columns:48px 1fr 80px;gap:8px;align-items:center;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.045)}.league-row.me{outline:1px solid rgba(100,190,255,.55);background:rgba(100,190,255,.10)}.league-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.league-row .player-link{cursor:pointer;text-decoration:none}.league-row .player-link:hover{text-decoration:underline}.league-row span:last-child{text-align:right;font-weight:700}
.league-gear-title{font-weight:800;font-size:1.05rem;margin-bottom:5px}.league-gear-slots{margin-bottom:8px}.league-gear-slots .training-gear-slot{flex:1;min-width:140px}.league-gear-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.league-ready-card{text-align:center;padding:28px 18px}.league-ready-icon{font-size:2.5rem}.league-empty{padding:18px;text-align:center;opacity:.7}
@media(max-width:760px){.league-overview{grid-template-columns:1fr}.league-stats-grid{grid-template-columns:repeat(2,1fr)}.league-race-header{align-items:flex-start;flex-direction:column}.league-gear-actions{grid-template-columns:1fr}}

/* =========================================================
   TEMPORÄRE SAISON-AVATARE
========================================================= */
.settings-avatar-section-title {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 1.05rem;
    font-weight: 700;
}

.settings-avatar-season-title {
    margin-top: 28px;
}

.settings-avatar-help,
.settings-avatar-empty,
.settings-avatar-meta {
    color: rgba(255,255,255,.68);
    font-size: .82rem;
    line-height: 1.4;
}

.settings-avatar-help {
    margin-bottom: 10px;
}

.settings-avatar-meta {
    padding: 0 12px 8px;
}

.settings-league-avatar-card {
    border-color: rgba(255, 193, 7, .16);
}

.settings-league-avatar-card.selected {
    border-color: #3ea6ff;
}

.settings-avatar-season-empty {
    margin: 10px 0 18px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
}

/* Liga-Avatare dauerhaft im Spielerprofil sichtbar, auch wenn sie abgelaufen sind. */
#player-profile-modal .profile-league-avatars {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#player-profile-modal .profile-league-avatar-card {
    flex: 0 0 145px;
    width: 145px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    overflow: hidden;
}

#player-profile-modal .profile-league-avatar-card.active {
    border-color: #3ea6ff;
    box-shadow: 0 0 16px rgba(62,166,255,.25);
}

#player-profile-modal .profile-league-avatar-card img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
}

#player-profile-modal .profile-league-avatar-info {
    padding: 9px 10px 11px;
}

#player-profile-modal .profile-league-avatar-info strong,
#player-profile-modal .profile-league-avatar-info small {
    display: block;
}

#player-profile-modal .profile-league-avatar-info small {
    margin-top: 4px;
    opacity: .68;
    font-size: .74rem;
}


/* ==========================================================
   WINDSURF GAME – GAME UI REFRESH
   Job / Training / Lager / Shop
   ========================================================== */

:root{
    --game-blue:#38bdf8;
    --game-blue-soft:rgba(56,189,248,.14);
    --game-panel:rgba(11,25,47,.94);
    --game-panel-2:rgba(18,38,65,.92);
    --game-line:rgba(148,163,184,.34);
    --game-text:#edf5ff;
    --game-muted:#a9bdd7;
    --game-green:#4ade80;
    --game-gold:#facc15;
}

/* Wider, cleaner game modals */
#job-modal .modal-panel,
#training-modal .modal-panel{
    width:min(700px,calc(100vw - 20px)) !important;
    max-width:min(700px,calc(100vw - 20px)) !important;
}

#shop-modal .modal-panel,
#inventory-modal .modal-panel{
    width:min(820px,calc(100vw - 20px)) !important;
    max-width:min(820px,calc(100vw - 20px)) !important;
}

.game-modal .modal-panel{
    background:
        radial-gradient(circle at 15% 0%, rgba(56,189,248,.12), transparent 34%),
        linear-gradient(145deg,rgba(24,45,72,.98),rgba(7,18,35,.985)) !important;
    border:1px solid rgba(148,197,234,.34) !important;
    box-shadow:0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.game-modal .modal-header{
    min-height:66px;
    padding:12px 16px !important;
    background:linear-gradient(180deg,rgba(80,120,160,.22),rgba(25,48,75,.08));
    border-bottom:1px solid rgba(148,197,234,.16);
}

.game-modal .modal-header h2{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.15rem !important;
    font-weight:750;
    letter-spacing:-.01em;
}

.game-modal .modal-header h2 .material-symbols-outlined{
    font-size:25px;
    color:var(--game-blue);
}

.modal-title-sub{
    display:block;
    margin-left:4px;
    color:#91a9c5;
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.02em;
}

.game-modal .modal-body{
    padding:14px 16px 16px !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(56,189,248,.45) transparent;
}

.game-modal .modal-footer{
    padding:11px 16px 13px !important;
    background:rgba(5,15,29,.52) !important;
}

.game-modal .modal-close-btn{
    border-radius:12px;
    color:#dbeafe;
    background:rgba(15,23,42,.25);
    transition:.18s ease;
}
.game-modal .modal-close-btn:hover{
    background:rgba(56,189,248,.12);
    color:#fff;
}

.game-modal .modal-intro{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:0 0 14px;
    padding:11px 12px;
    border-radius:14px;
    color:#c7d8ed;
    background:rgba(8,21,39,.62);
    border:1px solid rgba(148,163,184,.17);
    line-height:1.45;
}
.game-modal .intro-icon{
    flex:0 0 auto;
    color:var(--game-blue);
    font-size:20px;
    margin-top:1px;
}

/* ---------- JOB ---------- */

#job-modal .training-grid{
    gap:10px;
}

#job-modal .job-card{
    position:relative;
    min-height:86px;
    padding:14px 16px 14px 58px !important;
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(30,64,175,.18),rgba(10,27,49,.92));
    border:1px solid rgba(96,165,250,.22);
    box-shadow:0 10px 28px rgba(0,0,0,.20);
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
#job-modal .job-card::before{
    content:"";
    position:absolute;
    left:16px;
    top:17px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-size:18px;
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.25);
}
#job-modal .job-card[data-job="beach_clean"]::before{content:"♻";}
#job-modal .job-card[data-job="repair"]::before{content:"🔧";}
#job-modal .job-card[data-job="assistant"]::before{content:"🏄";}
#job-modal .job-card[data-job="instructor"]::before{content:"🎓";}

#job-modal .job-card:hover{
    transform:translateY(-2px);
    border-color:rgba(56,189,248,.55);
    background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(10,27,49,.96));
}

#job-modal .job-card .training-title{
    font-size:.98rem;
    margin-bottom:4px;
}
#job-modal .job-card .training-desc{
    margin:0 0 8px;
    line-height:1.35;
}
#job-modal .job-card .training-meta{
    display:inline-flex;
    padding:5px 8px;
    border-radius:9px;
    background:rgba(56,189,248,.08);
    color:#a9c7ee;
    font-size:.68rem;
}

/* Status box */
#job-modal .job-status-box,
#training-modal .job-status-box{
    border-radius:17px !important;
    padding:13px 14px !important;
    background:linear-gradient(135deg,rgba(8,20,37,.90),rgba(13,31,54,.88)) !important;
    border:1px solid rgba(148,163,184,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    margin-bottom:13px;
}
#job-modal .job-status-text,
#training-modal .job-status-text{
    font-size:.9rem;
    line-height:1.4;
}

/* ---------- TRAINING ---------- */

#training-modal .training-grid{
    gap:12px;
}
#training-modal .training-card{
    position:relative;
    padding:15px !important;
    border-radius:19px;
    background:
        radial-gradient(circle at 0 0,rgba(56,189,248,.12),transparent 36%),
        linear-gradient(145deg,rgba(23,52,80,.92),rgba(8,22,39,.96));
    border:1px solid rgba(96,165,250,.22);
    box-shadow:0 12px 30px rgba(0,0,0,.20);
}
#training-modal .training-card-header{
    padding-left:40px;
    position:relative;
}
#training-modal .training-card-header::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.24);
    font-size:17px;
}
#training-modal .training-card[data-training="sup"] .training-card-header::before{content:"🏄";}
#training-modal .training-card[data-training="swim"] .training-card-header::before{content:"🏊";}
#training-modal .training-card[data-training="basic"] .training-card-header::before{content:"🌊";}
#training-modal .training-card[data-training="race"] .training-card-header::before{content:"🏁";}

#training-modal .training-title{
    font-size:1rem;
}
#training-modal .training-desc{
    line-height:1.4;
    font-size:.78rem;
    color:#c3d4e9;
}
#training-modal .training-meta-line{
    display:inline-block;
    margin:2px 4px 0 0;
    padding:5px 8px;
    border-radius:9px;
    background:rgba(15,23,42,.52);
    color:#a9c7ee;
}
#training-modal .training-card-footer{
    margin-top:7px;
}
#training-modal .training-start-btn{
    min-height:42px;
    padding:9px 17px;
    font-weight:750;
    box-shadow:0 8px 20px rgba(34,197,94,.16);
}
#training-modal .training-gear-inline{
    margin-top:9px;
    padding:10px;
    border-radius:15px;
    background:rgba(5,16,29,.50);
    border:1px solid rgba(148,163,184,.16);
}

/* ---------- LAGER ---------- */

#inventory-modal .inventory-filters{
    position:sticky;
    top:-14px;
    z-index:5;
    padding:0 0 12px;
    margin-bottom:4px;
    background:linear-gradient(180deg,rgba(24,45,72,.98) 70%,rgba(24,45,72,0));
}

#inventory-modal .inventory-item-card{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) auto;
    align-items:stretch;
    gap:13px;
    min-height:126px;
    padding:10px;
    border-radius:18px;
    background:
        radial-gradient(circle at 0 0,rgba(34,197,94,.07),transparent 28%),
        linear-gradient(145deg,rgba(20,47,72,.88),rgba(7,21,37,.96));
    border:1px solid rgba(148,197,234,.24);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:.16s ease;
}
#inventory-modal .inventory-item-card:hover{
    border-color:rgba(56,189,248,.46);
    transform:translateY(-1px);
}
#inventory-modal .inventory-item-image{
    width:92px;
    min-width:92px;
    min-height:104px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(48,75,105,.70),rgba(9,24,42,.90));
    border:1px solid rgba(148,163,184,.20);
}
#inventory-modal .inventory-item-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:6px;
}
#inventory-modal .inventory-main{
    min-width:0;
    gap:5px;
}
#inventory-modal .inventory-header-line{
    align-items:center;
}
#inventory-modal .inventory-name{
    font-size:.94rem;
    font-weight:750;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#inventory-modal .inventory-meta{
    font-size:.72rem;
    color:#9eb8d4;
}
#inventory-modal .inventory-skills{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}
#inventory-modal .shop-item-skill-pill{
    padding:4px 7px;
    border-radius:8px;
    font-size:.65rem;
    background:rgba(15,23,42,.66);
    border:1px solid rgba(148,163,184,.20);
}
#inventory-modal .inventory-right{
    min-width:90px;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
}
#inventory-modal .inventory-sell-price{
    font-size:.78rem;
    font-weight:700;
    color:#f1f5f9;
    white-space:nowrap;
}
#inventory-modal .inventory-sell-btn,
#inventory-modal .inventory-repair-btn{
    min-width:90px;
    padding:7px 10px;
    border-radius:11px;
    font-weight:650;
}
#inventory-modal .inventory-repair-btn{
    border:1px solid rgba(56,189,248,.42);
    background:rgba(56,189,248,.10);
    color:#bae6fd;
}
#inventory-modal .inventory-sell-btn{
    border:1px solid rgba(248,113,113,.38);
    background:rgba(127,29,29,.14);
    color:#fecaca;
}
#inventory-modal .inventory-item-equipped{
    border-color:rgba(250,204,21,.55) !important;
    box-shadow:0 0 0 1px rgba(250,204,21,.08),0 10px 30px rgba(250,204,21,.08);
}
#inventory-modal .inventory-equipped-badge{
    white-space:nowrap;
}

/* ---------- SHOP ---------- */

#shop-modal .shop-header-v2{
    position:sticky;
    top:-14px;
    z-index:5;
    padding-bottom:10px;
    background:linear-gradient(180deg,rgba(24,45,72,.99) 72%,rgba(24,45,72,0));
}
#shop-modal .shop-tabs{
    gap:7px;
    padding-bottom:5px;
    overflow-x:auto;
    scrollbar-width:none;
}
#shop-modal .shop-tabs::-webkit-scrollbar{display:none;}
#shop-modal .shop-tab{
    min-height:42px;
    padding:9px 15px;
    border-radius:13px;
    border:1px solid rgba(148,163,184,.18);
    background:rgba(10,25,43,.72);
    color:#b8c9dc;
    font-weight:700;
    white-space:nowrap;
}
#shop-modal .shop-tab.active{
    background:linear-gradient(135deg,#38bdf8,#2563eb);
    border-color:transparent;
    color:#fff;
    box-shadow:0 7px 18px rgba(37,99,235,.22);
}
#shop-modal .shop-filters{
    gap:8px;
    margin-top:4px;
}
#shop-modal .shop-item-card{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:14px;
    min-height:142px;
    padding:10px;
    border-radius:19px;
    background:
        radial-gradient(circle at 0 0,rgba(56,189,248,.09),transparent 30%),
        linear-gradient(145deg,rgba(20,47,72,.90),rgba(7,21,37,.96));
    border:1px solid rgba(148,197,234,.24);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:.16s ease;
}
#shop-modal .shop-item-card:hover{
    transform:translateY(-1px);
    border-color:rgba(56,189,248,.48);
}
#shop-modal .shop-item-image{
    width:104px;
    min-width:104px;
    height:122px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(48,75,105,.72),rgba(9,24,42,.92));
    border:1px solid rgba(148,163,184,.20);
    overflow:hidden;
}
#shop-modal .shop-item-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:6px;
}
#shop-modal .shop-item-main{
    min-width:0;
    gap:5px;
}
#shop-modal .shop-item-name{
    font-size:1rem;
    font-weight:800;
    color:#f1f5f9;
}
#shop-modal .shop-item-brand{
    color:#9eb8d4;
}
#shop-modal .shop-item-meta{
    color:#8ea8c2;
}
#shop-modal .shop-item-skills{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}
#shop-modal .shop-item-skill{
    min-width:74px;
    flex:1 1 74px;
}
#shop-modal .shop-item-level{
    font-size:.67rem;
    color:#8faac7;
}
#shop-modal .shop-item-footer{
    margin-top:auto;
    padding-top:7px;
    border-top:1px solid rgba(148,163,184,.13);
}
#shop-modal .shop-item-price{
    font-size:1rem;
    font-weight:850;
}
#shop-modal .shop-buy-btn{
    min-height:38px;
    padding:8px 15px;
    border-radius:12px;
    font-weight:750;
    background:linear-gradient(135deg,#38bdf8,#2563eb);
    box-shadow:0 7px 18px rgba(37,99,235,.18);
}
#shop-modal .shop-buy-btn:disabled{
    background:rgba(71,85,105,.58);
    box-shadow:none;
}
#shop-modal .shop-avatar-item .shop-item-image{
    background:radial-gradient(circle,rgba(56,189,248,.18),rgba(9,24,42,.94));
}
#shop-modal .shop-item-owned{
    border-color:rgba(74,222,128,.42);
}

/* Extras / Avatar cards use a little more room */
#shop-modal .shop-avatar-item{
    min-height:160px;
}
#shop-modal .shop-avatar-item .shop-item-image{
    height:138px;
}

/* Mobile */
@media (max-width:680px){
    #job-modal .modal-panel,
    #training-modal .modal-panel,
    #shop-modal .modal-panel,
    #inventory-modal .modal-panel{
        width:calc(100vw - 20px) !important;
        max-width:calc(100vw - 20px) !important;
    }

    .modal-title-sub{display:none;}

    #inventory-modal .inventory-item-card{
        grid-template-columns:76px minmax(0,1fr);
        gap:10px;
        min-height:112px;
    }
    #inventory-modal .inventory-item-image{
        width:76px;
        min-width:76px;
        min-height:92px;
    }
    #inventory-modal .inventory-right{
        grid-column:2;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        min-width:0;
        flex-wrap:wrap;
        gap:6px;
    }
    #inventory-modal .inventory-sell-price{
        margin-right:auto;
    }

    #shop-modal .shop-item-card{
        grid-template-columns:82px minmax(0,1fr);
        gap:10px;
    }
    #shop-modal .shop-item-image{
        width:82px;
        min-width:82px;
        height:112px;
    }
    #shop-modal .shop-item-skills{
        gap:4px;
    }
    #shop-modal .shop-item-skill{
        min-width:0;
        flex:0 1 auto;
    }
    #shop-modal .shop-item-footer{
        flex-wrap:wrap;
    }
    #shop-modal .shop-buy-btn{
        flex:1;
    }

    #training-modal .training-card,
    #job-modal .job-card{
        padding:13px !important;
    }
}

/* ==========================================================
   FINAL GAME UI POLISH – SHOP / JOB ICONS / START FEEDBACK
   ========================================================== */

/* Shop follows the same equipment-card structure as the Lager. */
#shop-modal .shop-item-card{
    grid-template-columns:92px minmax(0,1fr) auto;
    align-items:stretch;
    gap:13px;
    min-height:126px;
    padding:10px;
    border-radius:18px;
    background:
        radial-gradient(circle at 0 0,rgba(34,197,94,.07),transparent 28%),
        linear-gradient(145deg,rgba(20,47,72,.88),rgba(7,21,37,.96));
    border:1px solid rgba(148,197,234,.24);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}
#shop-modal .shop-item-image{
    width:92px;
    min-width:92px;
    height:104px;
    border-radius:14px;
}
#shop-modal .shop-item-main{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:5px;
}
#shop-modal .shop-item-right{
    min-width:100px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
}
#shop-modal .shop-item-right .shop-item-price,
#shop-modal .shop-item-right .shop-item-lock{
    white-space:nowrap;
}
#shop-modal .shop-item-right .shop-buy-btn{
    min-width:96px;
}

/* Real Material Symbols instead of emoji pseudo-elements for Jobs. */
#job-modal .job-card::before{
    content:none !important;
    display:none !important;
}
#job-modal .job-card-icon{
    position:absolute;
    left:16px;
    top:17px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-size:19px;
    line-height:1;
    color:var(--game-blue);
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.25);
}

@media (max-width:680px){
    #shop-modal .shop-item-card{
        grid-template-columns:76px minmax(0,1fr);
        gap:10px;
        min-height:112px;
    }
    #shop-modal .shop-item-image{
        width:76px;
        min-width:76px;
        height:92px;
    }
    #shop-modal .shop-item-right{
        grid-column:2;
        min-width:0;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        flex-wrap:wrap;
        gap:6px;
    }
    #shop-modal .shop-item-right .shop-item-price{
        margin-right:auto;
    }
    #shop-modal .shop-item-right .shop-buy-btn{
        flex:1;
    }
}


/* ==========================================================
   FINAL GAME UI – SHOP AN DAS LAGER ANGLEICHEN
   ========================================================== */

/* Die Filterstruktur des Shops orientiert sich jetzt am Lager. */
#shop-modal .shop-header-v2{
    position:sticky;
    top:-14px;
    z-index:5;
    padding-bottom:12px;
    background:linear-gradient(180deg,rgba(24,45,72,.99) 72%,rgba(24,45,72,0));
}

#shop-modal .shop-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    padding:0 0 10px;
    overflow:visible;
}

#shop-modal .shop-tab{
    min-height:42px;
    width:100%;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(15,23,42,.9);
    color:#cbd5e1;
    font-weight:700;
    white-space:nowrap;
}

#shop-modal .shop-tab.active{
    background:linear-gradient(135deg,#38bdf8,#2563eb);
    border-color:rgba(56,189,248,.55);
    color:#fff;
    box-shadow:0 7px 18px rgba(37,99,235,.22);
}

#shop-modal .shop-filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:0;
}

#shop-modal .shop-filters label{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
    color:#9fb4cd;
    font-size:.72rem;
}

#shop-modal .shop-filters select{
    width:100%;
    background:rgba(15,23,42,.9);
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    padding:9px 12px;
    font-size:.78rem;
}

/* Exakt dieselbe Kartenlogik wie im Lager: Bild | Inhalt | Aktion. */
#shop-modal .shop-list{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
}

#shop-modal .shop-item-card{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) auto;
    align-items:stretch;
    gap:13px;
    width:100%;
    min-width:0;
    min-height:126px;
    padding:10px !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,rgba(27,52,77,.94),rgba(14,30,49,.96)) !important;
    border:1px solid rgba(148,197,234,.24);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

#shop-modal .shop-item-image{
    width:92px;
    min-width:92px;
    height:104px;
    min-height:104px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(48,75,105,.70),rgba(9,24,42,.90));
    border:1px solid rgba(148,163,184,.20);
}

#shop-modal .shop-item-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:6px;
}

#shop-modal .shop-item-main{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:5px;
}

#shop-modal .shop-item-header-line{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
}

#shop-modal .shop-item-name{
    font-size:.94rem;
    font-weight:750;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f1f5f9;
}

#shop-modal .shop-item-brand,
#shop-modal .shop-item-meta{
    font-size:.72rem;
    color:#9eb8d4;
}

#shop-modal .shop-item-skills{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

#shop-modal .shop-item-skill{
    min-width:0;
    flex:0 1 auto;
    padding:4px 7px;
    border-radius:8px;
    font-size:.65rem;
    background:rgba(15,23,42,.66);
    border:1px solid rgba(148,163,184,.20);
}

#shop-modal .shop-item-level{
    font-size:.67rem;
    color:#8faac7;
}

#shop-modal .shop-item-right{
    min-width:100px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
}

#shop-modal .shop-item-price{
    font-size:.78rem;
    font-weight:750;
    color:#f1f5f9;
    white-space:nowrap;
}

#shop-modal .shop-buy-btn{
    min-width:90px;
    min-height:38px;
    padding:8px 15px;
    border-radius:12px;
    font-weight:750;
}

#shop-modal .shop-item-owned{
    border-color:rgba(74,222,128,.42);
}

/* Mobile: exakt wie beim Lager – Aktion wandert unter den Inhalt. */
@media (max-width:680px){
    #shop-modal .shop-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #shop-modal .shop-filters{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #shop-modal .shop-item-card{
        grid-template-columns:76px minmax(0,1fr);
        gap:10px;
        min-height:112px;
    }

    #shop-modal .shop-item-image{
        width:76px;
        min-width:76px;
        height:92px;
        min-height:92px;
    }

    #shop-modal .shop-item-right{
        grid-column:2;
        min-width:0;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        flex-wrap:wrap;
        gap:6px;
    }

    #shop-modal .shop-item-right .shop-item-price{
        margin-right:auto;
    }

    #shop-modal .shop-item-right .shop-buy-btn{
        flex:1;
    }

    /* Job-Icon darf niemals mehr in Titel/Beschreibung hineinragen. */
    #job-modal .job-card{
        padding:13px 13px 13px 58px !important;
    }

    #job-modal .job-card-icon{
        left:16px;
        top:17px;
    }
}

/* Auch auf Desktop bleibt links genug Platz für das Job-Icon. */
#job-modal .job-card{
    padding-left:58px !important;
}

/* ==========================================================
   FINAL MOBILE NAV / SHOP TABS – KOMPAKT + HORIZONTAL SCROLL
   ========================================================== */

/* Shop-Tabs: kompakte Breite, mehrere Tabs bleiben sichtbar.
   Falls nicht alle passen, kann horizontal gescrollt werden. */
#shop-modal .shop-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 1px 2px 8px !important;
}

#shop-modal .shop-tabs::-webkit-scrollbar {
    display: none;
}

#shop-modal .shop-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 125px;
    min-height: 38px !important;
    padding: 7px 13px !important;
    border-radius: 11px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
}

/* Auf kleinen Displays noch etwas kompakter, damit mehrere Tabs
   gleichzeitig als Hinweis sichtbar bleiben. */
@media (max-width:680px) {
    #shop-modal .shop-tabs {
        gap: 5px !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    #shop-modal .shop-tab {
        max-width: 118px;
        min-height: 36px !important;
        padding: 7px 11px !important;
        font-size: .72rem !important;
    }
}

/* Bottom-Navigation: niemals umbrechen. Wenn sie nicht komplett
   hineinpasst, bleibt sie horizontal scrollbar. */
.bottom-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.bottom-nav::-webkit-scrollbar {
    display: none;
}

.bottom-nav .nav-item {
    flex: 0 0 auto !important;
    min-width: 64px;
    white-space: nowrap;
}

@media (max-width:680px) {
    .bottom-nav .nav-item {
        min-width: 60px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* FAQ & Roadmap innerhalb der Spieleinstellungen */
.settings-info-box {
    margin-top: 12px;
}

.settings-info-box h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-info-box details {
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid rgba(120, 170, 210, .22);
    border-radius: 14px;
    background: rgba(7, 22, 42, .42);
}

.settings-info-box summary {
    cursor: pointer;
    font-weight: 700;
}

.settings-info-box details p {
    margin: 10px 0 0;
    line-height: 1.55;
}

.settings-info-box .login-roadmap-list {
    margin-bottom: 16px;
}

.settings-info-box h4 {
    margin: 18px 0 8px;
}

/* =========================
   GLOBAL RANKING V2
========================= */
.ranking-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
.ranking-my-card{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid rgba(56,189,248,.2);background:rgba(56,189,248,.07);border-radius:12px;min-width:150px}
.ranking-my-card .material-symbols-outlined{font-size:22px}
.ranking-my-card strong{display:block;font-size:1.05rem}
.ranking-my-card small{display:block;color:#94a3b8;font-size:.7rem}
.ranking-controls{display:flex;gap:8px;min-width:0;flex:1;justify-content:flex-end}
.ranking-search{display:flex;align-items:center;gap:6px;min-width:190px;max-width:280px;padding:7px 10px;border:1px solid rgba(148,163,184,.2);border-radius:10px;background:rgba(15,23,42,.35)}
.ranking-search .material-symbols-outlined{font-size:18px;color:#94a3b8}
.ranking-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:inherit}
.ranking-controls select{border:1px solid rgba(148,163,184,.2);border-radius:10px;background:rgba(15,23,42,.55);color:inherit;padding:7px 9px}
.ranking-summary{font-size:.75rem;color:#94a3b8;margin:4px 0 10px}
.ranking-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:14px}
.ranking-podium-card{border:1px solid rgba(148,163,184,.14);border-radius:14px;padding:11px 8px;background:rgba(15,23,42,.32);color:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.ranking-podium-card:hover{background:rgba(56,189,248,.08)}
.ranking-podium-1{border-color:rgba(250,204,21,.35)}
.ranking-podium-2{border-color:rgba(203,213,225,.3)}
.ranking-podium-3{border-color:rgba(245,158,11,.3)}
.ranking-podium-place{font-size:.75rem;color:#cbd5e1}
.ranking-podium-avatar{width:54px;height:54px;object-fit:contain;border-radius:50%;border:2px solid rgba(255,255,255,.12)}
.ranking-podium-card strong{font-size:.86rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-podium-card span{font-size:.7rem;color:#94a3b8}
.ranking-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ranking-table{width:100%;min-width:760px;border-collapse:collapse;font-size:.78rem}
.ranking-table th{padding:7px 6px;text-align:left;color:#94a3b8;font-size:.68rem;white-space:nowrap;border-bottom:1px solid rgba(148,163,184,.15)}
.ranking-table td{padding:8px 6px;border-bottom:1px solid rgba(148,163,184,.1);white-space:nowrap}
.ranking-table tbody tr{cursor:pointer;transition:background .15s ease}
.ranking-table tbody tr:hover{background:rgba(56,189,248,.07)}
.ranking-table tbody tr.me{background:rgba(59,130,246,.1);box-shadow:inset 2px 0 0 rgba(59,130,246,.75)}
.ranking-player-btn{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:inherit;padding:0;cursor:pointer;font:inherit;max-width:190px}
.ranking-avatar{width:32px;height:32px;object-fit:contain;border-radius:50%;border:1px solid rgba(255,255,255,.1);flex:0 0 32px}
.ranking-rank{font-weight:700}
.ranking-empty,.ranking-loading{padding:22px;text-align:center;color:#94a3b8}

@media (max-width:640px){
    .ranking-toolbar{align-items:stretch}
    .ranking-my-card{flex:1}
    .ranking-controls{width:100%;justify-content:stretch;overflow-x:auto;padding-bottom:2px}
    .ranking-search{min-width:150px;flex:1}
    .ranking-controls select{flex:0 0 auto}
    .ranking-podium{gap:6px}
    .ranking-podium-avatar{width:46px;height:46px}
}

.ranking-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}.ranking-pagination span{font-size:.75rem;color:#94a3b8}.ranking-pagination button:disabled{opacity:.4;cursor:not-allowed}


.login-account-deleted {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(16, 185, 129, .18);
    border: 1px solid rgba(52, 211, 153, .35);
    color: #d1fae5;
    backdrop-filter: blur(10px);
}

/* ==========================
   PUSH-BENACHRICHTIGUNGEN
========================== */
.settings-push-box .push-status-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:16px 0;
    padding:16px;
    border:1px solid rgba(125,211,252,.22);
    border-radius:18px;
    background:rgba(5,22,39,.62);
}
.settings-push-box .push-status-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(56,189,248,.12);
    color:#7dd3fc;
}
.settings-push-box .push-status-icon .material-symbols-outlined{font-size:25px;}
.settings-push-box #push-status-title{display:block;color:#f8fafc;margin-bottom:4px;}
.settings-push-box #push-status-text{margin:0;color:#a9c4d8;line-height:1.45;}
.settings-push-box #settings-disable-push{border-color:rgba(248,113,113,.35);}

/* ==========================================================
   AKTIVITÄTS-SPERRE – TRAINING/JOBS
   Während Training oder Job dürfen die Auswahlkarten niemals
   sichtbar oder anklickbar sein. Inline/!important-Grid-Regeln
   aus älteren UI-Overrides werden hier bewusst überstimmt.
   ========================================================== */
#training-list.activity-options-hidden {
    display: none !important;
}

#job-modal .job-card[aria-hidden="true"] {
    display: none !important;
}

#training-modal .training-start-btn[disabled],
#job-modal .job-card[disabled] {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

#training-timer,
#job-timer {
    margin-top: 10px;
    font-size: 1.05rem;
    line-height: 1.4;
}

#training-timer strong,
#job-timer strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* v39 SUP */
.training-card-sup .training-gear-slot { min-height: 86px; }
.training-card-sup .training-gear-pool { border-style: solid; }


/* v40 – erweiterte Fahr-Skills */
.skill-overview-card { margin-top: 14px; }
.skill-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.skill-overview-item { display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); }
.skill-overview-item .material-symbols-outlined { font-size:24px; }
.skill-overview-item div { display:flex; justify-content:space-between; align-items:center; width:100%; gap:8px; }
.skill-overview-item strong { font-size:20px; }
@media (max-width:700px){ .skill-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }


/* =========================================================
   V41 – SKILL-RAD UM DEN AVATAR
   ---------------------------------------------------------
   Alle acht Spieler-Skills sitzen gleichmäßig um den Avatar.
   Keine separate Fahr-Skill-Kachel unterhalb des Avatars.
   ========================================================= */

.hero-character {
    position: relative;
    min-height: clamp(390px, 58vw, 460px);
    overflow: visible;
}

/* Alle Skill-Karten beziehen ihre Position auf die Mitte des Avatars. */
.hero-character .stat-circle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 68px !important;
    height: 68px !important;
    transform: translate(-50%, -50%) translate(var(--skill-x), var(--skill-y)) !important;
    z-index: 4;
}

/* Acht Positionen – wie ein echtes Skill-Rad rund um den Avatar. */
.hero-character .stat-circle.stamina   { --skill-x: clamp(-126px,-30vw,-112px); --skill-y: clamp(-135px,-34vw,-118px); }
.hero-character .stat-circle.strength  { --skill-x: clamp( 112px, 30vw, 126px); --skill-y: clamp(-135px,-34vw,-118px); }
.hero-character .stat-circle.technique { --skill-x: clamp( 150px, 39vw, 165px); --skill-y: clamp( -50px,-13vw, -35px); }
.hero-character .stat-circle.halse     { --skill-x: clamp( 150px, 39vw, 165px); --skill-y: clamp(  55px, 15vw,  72px); }
.hero-character .stat-circle.spruenge  { --skill-x: clamp( 100px, 27vw, 112px); --skill-y: clamp( 130px, 34vw, 148px); }
.hero-character .stat-circle.tricks    { --skill-x: clamp(-112px,-27vw,-100px); --skill-y: clamp( 130px, 34vw, 148px); }
.hero-character .stat-circle.wenden    { --skill-x: clamp(-165px,-39vw,-150px); --skill-y: clamp(  55px, 15vw,  72px); }
.hero-character .stat-circle.balance   { --skill-x: clamp(-165px,-39vw,-150px); --skill-y: clamp( -50px,-13vw, -35px); }

/* Die Energie bleibt separat oben und wird nicht Teil des Skill-Rads. */
.hero-character .energy-circle {
    z-index: 5;
}

/* Keine doppelte Fahr-Skill-Übersicht unter dem Avatar. */
.skill-overview-card {
    display: none !important;
}

/* Material Symbols auch in Spieler-Vergleichen. */
.compare-row .material-symbols-outlined {
    font-size: 17px;
    vertical-align: -3px;
    margin-right: 3px;
}

@media (max-width: 480px) {
    .hero-character {
        min-height: 365px;
        margin-top: 36px;
    }

    .hero-character .stat-circle {
        width: 62px !important;
        height: 62px !important;
    }

    .hero-character .stat-circle.stamina   { --skill-x:-92px;  --skill-y:-112px; }
    .hero-character .stat-circle.strength  { --skill-x: 92px;  --skill-y:-112px; }
    .hero-character .stat-circle.technique { --skill-x:128px;  --skill-y:-34px; }
    .hero-character .stat-circle.halse     { --skill-x:128px;  --skill-y: 48px; }
    .hero-character .stat-circle.spruenge  { --skill-x: 86px;  --skill-y:108px; }
    .hero-character .stat-circle.tricks    { --skill-x:-86px;  --skill-y:108px; }
    .hero-character .stat-circle.wenden    { --skill-x:-128px; --skill-y: 48px; }
    .hero-character .stat-circle.balance   { --skill-x:-128px; --skill-y:-34px; }
}

/* V41.1 – Skill-Rad: explizite Priorität für alle acht Skills. */
.hero-character > .stat-circle.halse,
.hero-character > .stat-circle.spruenge,
.hero-character > .stat-circle.tricks,
.hero-character > .stat-circle.wenden {
    display: block !important;
}
.hero-character > .stat-circle .stat-card {
    width: 100%;
    height: 100%;
}
@media (max-width: 480px) {
    .hero-character > .stat-circle {
        width: 62px !important;
        height: 62px !important;
    }
}


/* V42 – Spielergewicht zusätzlich im Skill-Rad anzeigen. */
.hero-character .stat-circle.weight {
    --skill-x: 0px;
    --skill-y: clamp(165px, 43vw, 185px);
    z-index: 4;
}
@media (max-width: 480px) {
    .hero-character .stat-circle.weight {
        --skill-x: 0px;
        --skill-y: 145px;
    }
}


/* ==========================================================
   V42.3 – Gewicht wirklich außerhalb des Avatars
   ----------------------------------------------------------
   Die Gewichtskarte gehört nicht auf den Körper des Spielers.
   Sie wird unterhalb des Avatars zentriert und erhält eigene
   Koordinaten, unabhängig vom bisherigen Skill-Rad.
   ========================================================== */
.hero-character > .stat-circle.weight {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 68px !important;
    height: 68px !important;
    --skill-x: 0px !important;
    --skill-y: 300px !important;
    transform: translate(-50%, -50%) translate(0px, 300px) !important;
    z-index: 3 !important;
}

@media (max-width: 480px) {
    .hero-character > .stat-circle.weight {
        width: 62px !important;
        height: 62px !important;
        --skill-x: 0px !important;
        --skill-y: 275px !important;
        transform: translate(-50%, -50%) translate(0px, 275px) !important;
    }
}

/* V42.3 – transparente Produktbilder dürfen nicht von einer
   kräftigen Kachel optisch wieder als Foto erscheinen. */
#shop-modal .shop-item-image {
    background: rgba(20, 38, 58, .45) !important;
}
#shop-modal .shop-item-image img {
    background: transparent !important;
}


/* V42.4 – SUP-Produktbilder komplett neu als saubere transparente Assets.
   Keine Karten, kein Shop-Text, kein künstlicher Bildausschnitt. */
#shop-modal .shop-item-sup .shop-item-image,
#inventory-modal .inventory-item-sup .inventory-item-image {
    background: transparent !important;
    border-color: rgba(148,163,184,.14) !important;
    overflow: hidden;
}
#shop-modal .shop-item-sup .shop-item-image img,
#inventory-modal .inventory-item-sup .inventory-item-image img {
    width: 100% !important;
    height: 100% !important;
    padding: 4px !important;
    object-fit: contain !important;
    background: transparent !important;
    display: block;
}

/* Gewicht wieder näher an den Avatar, aber niemals auf dem Körper. */
.hero-character > .stat-circle.weight {
    --skill-x: 0px !important;
    --skill-y: 182px !important;
    transform: translate(-50%, -50%) translateY(182px) !important;
}
@media (max-width:480px) {
    .hero-character > .stat-circle.weight {
        --skill-y: 168px !important;
        transform: translate(-50%, -50%) translateY(168px) !important;
    }
}


/* =========================================================
   V42.5 – Training Gear UX / mobile touch selection
   ========================================================= */
.training-gear-slot {
    position: relative;
    min-height: 82px;
    padding: 11px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.training-gear-slot::after {
    content: "ITEM HIER EINSETZEN";
    display: block;
    margin-top: 5px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(191,219,254,.62);
}
.training-gear-slot.has-item::after { content: "EINGESETZT · DOPPELTIPPEN ZUM ENTFERNEN"; color: rgba(134,239,172,.75); }
.training-gear-slot-label {
    font-size: .86rem;
    line-height: 1.15;
}
.training-gear-slot-item {
    min-height: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #dbeafe;
}
.training-gear-slot-item strong { font-size: .75rem; color:#f8fafc; }
.training-gear-slot-item small { font-size:.64rem; color:#93c5fd; }

.training-gear-pool-title {
    margin-top: 10px;
    font-size: .82rem;
    font-weight: 800;
    color: #f8fafc;
}
.training-gear-pool-title::after {
    content: " · Tippe auf ein Item – es wird automatisch dem passenden Slot zugeordnet";
    font-weight: 500;
    color: #93c5fd;
}
.training-gear-pool {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    padding: 8px;
}
.training-gear-item {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(96,165,250,.35);
    min-height: 78px;
    padding: 8px;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) 26px;
    align-items: center;
    gap: 8px;
    text-align: left;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
.training-gear-item:active { transform: scale(.985); }
.training-gear-item-image {
    width: 58px;
    height: 62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 11px;
    background: rgba(15,23,42,.55);
    overflow:hidden;
}
.training-gear-item-image img {
    width:100%; height:100%; object-fit:contain; padding:3px;
    display:block;
}
.training-gear-item-info { min-width:0; display:flex; flex-direction:column; gap:2px; }
.training-gear-item-info strong {
    font-size:.74rem; line-height:1.15; color:#f8fafc;
    overflow:hidden; text-overflow:ellipsis;
}
.training-gear-item-target {
    display:flex; align-items:center; gap:3px;
    font-size:.66rem; font-weight:800; color:#67e8f9;
}
.training-gear-item-target .material-symbols-outlined { font-size:14px; }
.training-gear-item-meta { font-size:.61rem; color:#94a3b8; }
.training-gear-item-action {
    width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(14,165,233,.16); color:#7dd3fc;
}
.training-gear-item-action .material-symbols-outlined { font-size:17px; }
.training-gear-empty {
    grid-column:1/-1;
    min-height:70px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:#94a3b8; font-size:.76rem; text-align:center;
}
.training-gear-empty .material-symbols-outlined { color:#60a5fa; }

/* SUP: Slots sollen auf einen Blick verständlich sein. */
.sup-training-gear-inline .training-gear-slot-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
}
.sup-training-gear-inline .training-gear-slot[data-category="sup_leash"] {
    grid-column:1/-1;
}
.sup-training-gear-inline .training-gear-slot[data-category="sup_board"] .training-gear-slot-label::before { content:"▰  "; color:#38bdf8; }
.sup-training-gear-inline .training-gear-slot[data-category="sup_paddle"] .training-gear-slot-label::before { content:"┃  "; color:#38bdf8; }
.sup-training-gear-inline .training-gear-slot[data-category="sup_leash"] .training-gear-slot-label::before { content:"⌁  "; color:#38bdf8; }

/* Die drei SUP-Slots sollen nicht durch die alten generischen Selektoren verschwinden. */
#training-modal .sup-training-gear-inline > .training-gear-slot-row { display:grid !important; }

@media (max-width: 520px) {
    .training-gear-pool { grid-template-columns: 1fr; }
    .training-gear-item { grid-template-columns: 54px minmax(0,1fr) 24px; }
    .training-gear-item-image { width:54px; height:58px; }
    .sup-training-gear-inline .training-gear-slot-row { grid-template-columns:1fr; }
    .sup-training-gear-inline .training-gear-slot[data-category="sup_leash"] { grid-column:auto; }
}


/* =========================================================
   V42.6 – Training gear cards: clean mobile-first design
   ========================================================= */
.training-gear-pool { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; padding:10px !important; }
.training-gear-item { position:relative; min-width:0; min-height:188px !important; padding:10px !important; display:grid !important; grid-template-columns:1fr !important; grid-template-rows:76px auto !important; align-content:start !important; gap:8px !important; overflow:hidden; border:1px solid rgba(125,211,252,.28) !important; border-radius:18px !important; background:linear-gradient(145deg,rgba(30,52,78,.96),rgba(12,27,48,.98)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 18px rgba(0,0,0,.14); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.training-gear-item:hover { transform:translateY(-1px); border-color:rgba(56,189,248,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.2); }
.training-gear-item:active { transform:scale(.985) !important; }
.training-gear-item-image { width:100% !important; height:76px !important; border-radius:13px !important; background:radial-gradient(circle at 50% 40%,rgba(59,130,246,.12),rgba(15,23,42,.72) 72%) !important; border:1px solid rgba(148,163,184,.12); overflow:hidden; }
.training-gear-item-image img { width:100% !important; height:100% !important; object-fit:contain !important; padding:5px !important; display:block; filter:drop-shadow(0 5px 7px rgba(0,0,0,.28)); }
.training-gear-item-info { min-width:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr); gap:5px !important; padding:0 2px; }
.training-gear-item-name { display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; text-overflow:ellipsis; white-space:normal !important; font-size:.79rem !important; line-height:1.18 !important; font-weight:800 !important; color:#f8fafc !important; padding-right:27px; }
.training-gear-item-target { min-width:0; display:flex !important; align-items:center; gap:5px !important; width:max-content; max-width:100%; padding:4px 7px; border-radius:999px; background:rgba(14,165,233,.13); border:1px solid rgba(56,189,248,.22); color:#67e8f9 !important; font-size:.62rem !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.01em; }
.training-gear-item-target .material-symbols-outlined { font-size:14px !important; flex:0 0 auto; }
.training-gear-item-meta, .training-gear-item-durability { display:flex !important; align-items:center; gap:4px; min-width:0; color:#a9bdd4 !important; font-size:.59rem !important; line-height:1.15 !important; }
.training-gear-item-meta .material-symbols-outlined, .training-gear-item-durability .material-symbols-outlined { font-size:13px !important; color:#7dd3fc; }
.training-gear-item-durability { color:#cbd5e1 !important; }
.training-gear-item-action { position:absolute !important; top:14px; right:14px; width:28px !important; height:28px !important; border-radius:50%; display:flex !important; align-items:center; justify-content:center; background:rgba(14,165,233,.16) !important; border:1px solid rgba(125,211,252,.22); color:#7dd3fc !important; }
.training-gear-item-action .material-symbols-outlined { font-size:18px !important; }
.training-gear-pool-title { margin:14px 4px 7px !important; font-size:.9rem !important; line-height:1.25 !important; }
.training-gear-pool-title::after { content:" · Antippen = einsetzen" !important; }
@media (max-width:520px) {
 .training-gear-pool { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; padding:8px !important; }
 .training-gear-item { min-height:182px !important; border-radius:16px !important; padding:9px !important; }
 .training-gear-item-image { height:72px !important; }
 .training-gear-item-name { font-size:.74rem !important; }
 .training-gear-item-target { font-size:.58rem !important; }
 .training-gear-item-meta, .training-gear-item-durability { font-size:.55rem !important; }
 .training-gear-item-action { top:12px; right:12px; width:26px !important; height:26px !important; }
}
@media (max-width:360px) { .training-gear-pool { grid-template-columns:1fr !important; } }


/* ================= V42.7 COMPETITION / GEAR CARDS ================= */
.inline-icon{font-size:16px;vertical-align:-3px;margin-right:4px;color:#7dd3fc}
.gear-card-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:2px}
.gear-card-skills>span{min-width:0;display:flex;align-items:center;gap:2px;padding:4px 5px;border-radius:8px;background:rgba(2,6,23,.34);border:1px solid rgba(148,163,184,.12);font-size:.53rem;color:#b9cbe0;white-space:nowrap;overflow:hidden}
.gear-card-skills .material-symbols-outlined{font-size:12px;color:#67e8f9;flex:0 0 auto}
.gear-card-skills b{font-size:.52rem;color:#dbeafe}
.competition-gear-item{cursor:pointer}
.competition-gear-item .training-gear-item-image{height:82px!important}
.competition-gear-item .training-gear-item-name{font-size:.78rem!important;-webkit-line-clamp:2}
.competition-gear-item .training-gear-item-target{font-size:.61rem!important}
.league-gear-title{display:flex;align-items:center;gap:7px}.league-gear-title .material-symbols-outlined{color:#67e8f9}
.league-gear-card .training-gear-item,.league-race-card .training-gear-item{min-height:200px}
.league-gear-card .training-gear-slot-item strong,.league-ready-card strong{font-size:.74rem}
.league-gear-card .training-gear-slot-item small,.training-gear-slot-item small{display:block;color:#93c5fd;font-size:.62rem;margin-top:3px}
.training-gear-slot.has-item{border-color:rgba(52,211,153,.55)!important;background:linear-gradient(135deg,rgba(16,185,129,.11),rgba(15,23,42,.6))!important}
.training-gear-slot.has-item .training-gear-slot-item{color:#d1fae5}
@media(max-width:520px){.gear-card-skills{grid-template-columns:1fr}.gear-card-skills>span{font-size:.56rem}.competition-gear-item .training-gear-item-image{height:76px!important}}


/* V42.8 – unified competition/training interaction */
.training-gear-item > * { pointer-events:none; }
.league-gear-card .training-gear-pool-title { margin-top:14px; }
.league-gear-card .training-gear-filters { margin-top:10px; }
.league-gear-card .training-gear-slot-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.league-gear-card .training-gear-slot-row:last-of-type { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:520px){ .league-gear-card .training-gear-slot-row,.league-gear-card .training-gear-slot-row:last-of-type{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* =========================================================
   HEADER MODERN MINIMAL V2 – Wind / Wetter / Zeit
   ========================================================= */
.app-header{
    grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr) minmax(128px,.85fr);
    gap:10px;
    padding:5px 8px;
    height:82px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(8,28,49,.84),rgba(5,18,34,.88));
    border-color:rgba(91,190,246,.18);
}
.world-box{overflow:visible;}
.header-compass{display:flex;align-items:center;width:100%;min-width:0;gap:8px;}
.compass-wrapper{width:70px;height:70px;min-width:70px;background:none;filter:drop-shadow(0 5px 12px rgba(0,0,0,.45));overflow:visible;}
.compass-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;border-radius:50%;}
.compass-dynamic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;pointer-events:none;text-shadow:0 2px 5px rgba(0,0,0,.8);}
.compass-wind-main{font-size:13px;font-weight:800;color:#fff;line-height:1;}
.compass-wind-main small{font-size:8px;font-weight:700;opacity:.8;}
.compass-dir{margin-top:3px;font-size:8px;font-weight:800;color:#8fe7ff;letter-spacing:.08em;}
.wind-pointer{z-index:4;width:8px;height:8px;transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(-27px);}
.header-weather-data{min-width:62px;line-height:1.1;white-space:nowrap;}
.weather-main-line{display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;}
.weather-icon-inline{font-size:14px;line-height:1;}
.weather-sub-line{font-size:9px;color:#9fb7d0;margin-top:3px;}
.weather-wind-line{font-size:9px;color:#55d7ff;margin-top:4px;font-weight:700;}
.header-time-data{border-left:1px solid rgba(148,197,234,.18);padding-left:10px;min-width:72px;display:flex;flex-direction:column;line-height:1.15;}
.header-time-data strong{font-size:15px;color:#fff;letter-spacing:.02em;}
.header-time-data span{font-size:8px;color:#9fb7d0;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
.player-box{padding:0 6px;}
.player-row{gap:7px;}
.player-avatar-small{width:38px;height:38px;border-width:2px;}
.player-name{font-size:14px!important;}
.player-level{font-size:9px!important;}
.xp-bar{height:5px;}
.xp-text{font-size:8px!important;}
.money-box{padding-right:3px;}
.money-row{gap:5px;}
.money-value{font-size:10px!important;}

@media (max-width:520px){
    .app-header{height:78px;grid-template-columns:minmax(0,1.8fr) minmax(0,.9fr) 88px;gap:5px;padding:4px 5px;border-radius:19px;}
    .header-compass{gap:4px;}
    .compass-wrapper{width:58px;height:58px;min-width:58px;}
    .compass-wind-main{font-size:11px;}
    .compass-dir{font-size:7px;}
    .wind-pointer{transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(-23px);width:7px;height:7px;}
    .weather-main-line{font-size:10px;}
    .weather-icon-inline{font-size:12px;}
    .weather-sub-line,.weather-wind-line{font-size:7px;}
    .header-time-data{display:none;}
    .player-avatar-small{width:32px;height:32px;}
    .player-name{font-size:12px!important;max-width:75px;}
    .player-level{font-size:8px!important;}
    .xp-text{font-size:7px!important;}
    .money-row{gap:3px;}
    .money-value{font-size:9px!important;}
}


/* =========================================================
   V42.18 – HEADER OPTION 2 / MODERN MINIMAL
   ---------------------------------------------------------
   Neuer leerer Kompass-Hintergrund: bg/kompass-bg.png
   Alle Wind-/Wetter-/Zeitwerte bleiben HTML-dynamisch.
   ========================================================= */
.app-header{
    height:82px;
    grid-template-columns:minmax(0, 1.45fr) minmax(0, 1.75fr) minmax(128px,.85fr);
    gap:7px;
    padding:5px 7px;
    background:linear-gradient(135deg,rgba(7,27,47,.38),rgba(3,15,29,.48));
    border:1px solid rgba(104,197,241,.20);
    border-radius:22px;
    box-shadow:0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.header-compass{
    display:grid;
    grid-template-columns:62px minmax(52px,1fr) 66px;
    align-items:center;
    width:100%;
    min-width:0;
    gap:6px;
}
.compass-wrapper{
    width:62px;
    height:62px;
    min-width:62px;
    background:none !important;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.46));
    overflow:visible;
}
.compass-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    border-radius:50%;
}
.compass-dynamic{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
    pointer-events:none;
    text-shadow:0 2px 6px rgba(0,0,0,.9);
}
.compass-wind-main{
    font-size:12px;
    font-weight:800;
    color:#fff;
    line-height:1;
}
.compass-wind-main small{font-size:7px;font-weight:700;opacity:.82;}
.compass-dir{
    margin-top:3px;
    font-size:8px;
    font-weight:800;
    color:#72dcff;
    letter-spacing:.08em;
}
.wind-pointer{
    z-index:4;
    width:7px;
    height:7px;
    transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(-24px);
}
.header-weather-data{
    min-width:0;
    line-height:1.12;
    white-space:nowrap;
    overflow:hidden;
}
.weather-main-line{display:flex;align-items:center;gap:4px;color:#fff;font-size:11px;}
.weather-main-line strong{font-weight:700;}
.weather-icon-inline{font-size:13px;line-height:1;}
.weather-sub-line{font-size:8px;color:#9db5cb;margin-top:3px;overflow:hidden;text-overflow:ellipsis;}
.weather-wind-line{font-size:8px;color:#56d9ff;margin-top:4px;font-weight:700;}
.header-time-data{
    border-left:1px solid rgba(120,190,225,.20);
    padding-left:7px;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.1;
}
.header-time-data strong{font-size:12px;color:#fff;letter-spacing:.02em;white-space:nowrap;}
.header-time-data span{font-size:7px;color:#9fb7d0;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-box{padding:0 4px;min-width:0;}
.player-row{gap:5px;min-width:0;}
.player-name{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58px;}
.player-level{font-size:8px!important;}
.xp-bar{height:4px;}
.xp-text{font-size:7px!important;}
.money-box{padding-right:1px;gap:3px;min-width:0;}
.money-row{gap:3px;min-height:19px;}
.money-value{font-size:8px!important;white-space:nowrap;}
.money-icon{transform:scale(.8);transform-origin:center;}

/* Weniger vertikaler Leerraum zwischen Header und Skill-Rad. */
.modern-dashboard{padding-top:6px;}
.hero-character{margin-top:16px;}

@media(max-width:420px){
    .app-header{
        height:78px;
        width:calc(100% - 12px);
        padding:4px 5px;
        border-radius:19px;
        grid-template-columns:minmax(0,1.45fr) minmax(0,1.8fr) 128px;
        gap:5px;
        background:linear-gradient(135deg,rgba(7,27,47,.34),rgba(3,15,29,.44));
    }
    .header-compass{grid-template-columns:58px minmax(45px,1fr) 60px;gap:4px;}
    .compass-wrapper{width:58px;height:58px;min-width:58px;}
    .compass-wind-main{font-size:11px;}
    .compass-wind-main small{font-size:6px;}
    .compass-dir{font-size:7px;}
    .wind-pointer{transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(-22px);width:6px;height:6px;}
    .weather-main-line{font-size:9px;}
    .weather-icon-inline{font-size:11px;}
    .weather-sub-line,.weather-wind-line{font-size:6.5px;}
    .header-time-data{padding-left:5px;}
    .header-time-data strong{font-size:10px;}
    .header-time-data span{font-size:6.5px;margin-top:3px;}
    .player-name{font-size:10px!important;max-width:52px;}
    .player-level{font-size:7px!important;}
    .xp-text{font-size:6px!important;}
    .money-value{font-size:7px!important;}
    .money-row{min-height:17px;}
}


/* =========================================================
   V42.20 – HEADER CACHE / COMPASS FINAL
   ========================================================= */
.compass-wrapper{background:none;}
.compass-dynamic{gap:0;}
/* V42.20 – kompakte Werte sauber nach oben ziehen; Wetter-Icon bleibt außerhalb im Wetterfeld. */
.compass-wind-main{position:absolute;top:17px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;}
.compass-dir{position:absolute;top:29px;left:50%;transform:translateX(-50%);margin:0;font-size:8px;}
.compass-time{position:absolute;top:39px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;color:#fff;line-height:1;white-space:nowrap;}
.compass-date{position:absolute;top:49px;left:50%;transform:translateX(-50%);font-size:6px;font-weight:700;color:rgba(255,255,255,.72);line-height:1;white-space:nowrap;}
.header-weather-data{min-width:0;}
.weather-wind-line{display:none!important;}
.header-time-data{display:none!important;}
@media(max-width:520px){
 .compass-wind-main{top:14px;font-size:10px;}
 .compass-wind-main small{font-size:7px;}
 .compass-dir{top:26px;font-size:6px;}
 .compass-time{top:35px;font-size:7px;}
 .compass-date{top:44px;font-size:5.5px;}
}


/* =========================================================
   V42.24 – HEADER / KOMPASS FINAL MOBILE FIX
   - Kompasswerte deutlich weiter nach oben
   - alle Werte bleiben innerhalb des Kompasses
   - Wetter-Icon im Header ausgeblendet
   - Player-Bereich bekommt mehr Breite und sitzt weiter mittig
   ========================================================= */
@media (max-width: 420px){
    .app-header{
        grid-template-columns: 108px minmax(0,1fr) 118px !important;
        gap: 5px !important;
        padding: 4px 5px !important;
    }

    .header-compass{
        grid-template-columns: 58px minmax(45px,1fr) !important;
        gap: 4px !important;
    }

    .compass-wrapper{
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        overflow: hidden !important;
    }

    .compass-dynamic{
        inset: 0 !important;
        overflow: hidden !important;
    }

    .compass-wind-main{
        top: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .compass-wind-main small{
        font-size: 6px !important;
    }

    .compass-dir{
        top: 18px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 1 !important;
    }

    .compass-time{
        top: 29px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 7px !important;
        line-height: 1 !important;
    }

    .compass-date{
        top: 39px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 5.5px !important;
        line-height: 1 !important;
    }

    .header-weather-data .weather-icon-inline{
        display: none !important;
    }

    .weather-main-line{
        gap: 0 !important;
    }

    .player-box{
        padding: 0 4px !important;
    }

    .player-row{
        width: 100% !important;
        gap: 6px !important;
    }

    .player-name{
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

    .player-action{
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .xp-bar{
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 421px){
    .header-weather-data .weather-icon-inline{
        display: none !important;
    }
}


/* =========================================================
   V42.25 – HEADER TRANSPARENT
   - Header-Hintergrund vollständig transparent
   - kein dunkler Glasverlauf mehr
   - Inhalte, Kompass und Spielerpositionen bleiben erhalten
   ========================================================= */
.app-header{
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.app-header::before,
.app-header::after{
    background: transparent !important;
}

@media (max-width: 420px){
    .app-header{
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .app-header::before,
    .app-header::after{
        background: transparent !important;
    }
}


/* =========================================================
   V42.26 – CACHE BUST + ECHT TRANSPARENTER HEADER
   ========================================================= */
.app-header,
.app-header .header-box{
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.app-header{
    border-color: transparent !important;
}

.app-header::before,
.app-header::after{
    background: transparent !important;
    box-shadow: none !important;
}

/* Kompass-Werte: oben und innerhalb des Kreises */
@media (max-width: 420px){
    .compass-wrapper{
        overflow: hidden !important;
    }
    .compass-wind-main{top:5px !important;}
    .compass-dir{top:18px !important;}
    .compass-time{top:29px !important;}
    .compass-date{top:39px !important;}
}


/* =========================================================
   V42.28 – HEADER GRAU/TRANSPARENT + KOMPASS GRÖSSER
   ---------------------------------------------------------
   Header: ca. 80% transparent, grauer Schleier
   Kompass: 68px statt 58px auf Mobile
   Werte sitzen weiterhin oben im Kompass
   ========================================================= */

/* Nur der eigentliche Header bekommt die graue Transparenz.
   Die einzelnen Geld-/Player-Elemente behalten ihre Optik. */
.app-header{
    background: rgba(72, 82, 94, .20) !important;
    border-color: rgba(210, 220, 230, .16) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.app-header::before{
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    ) !important;
}

.app-header::after{
    background: linear-gradient(
        180deg,
        rgba(125,135,145,.10),
        transparent
    ) !important;
}

/* Größerer Kompass */
.compass-wrapper{
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
}

/* Dynamische Kompasswerte höher */
.compass-wind-main{top:6px !important;}
.compass-dir{top:20px !important;}
.compass-time{top:32px !important;}
.compass-date{top:42px !important;}

@media (max-width:420px){
    .app-header{
        background: rgba(72, 82, 94, .20) !important;
    }

    .header-compass{
        grid-template-columns:68px minmax(45px,1fr) 60px !important;
        gap:4px !important;
    }

    .compass-wrapper{
        width:68px !important;
        height:68px !important;
        min-width:68px !important;
    }

    .compass-wind-main{
        top:6px !important;
        font-size:11px !important;
    }

    .compass-dir{
        top:20px !important;
        font-size:7px !important;
    }

    .compass-time{
        top:32px !important;
        font-size:7px !important;
    }

    .compass-date{
        top:42px !important;
        font-size:5.5px !important;
    }

    .wind-pointer{
        transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(-27px) !important;
    }
}


/* =========================================================
   V42.29 – KNOTEN KOMPAKTER / ETWAS TIEFER
   - nur Schrift in den Knoten kleiner
   - Knoten insgesamt etwas kleiner
   - Skill-Rad etwas nach unten
   - Windrichtungs-Text entfernt (Pointer bleibt)
   ========================================================= */
@media (max-width: 480px){
    .hero-character .stat-circle{
        width: 59px !important;
        height: 59px !important;
    }

    .hero-character .stat-card{
        border-radius: 20px !important;
    }

    .hero-character .stat-card strong{
        font-size: 14px !important;
        line-height: 1.05 !important;
        margin-top: 1px !important;
    }

    .hero-character .stat-card span{
        font-size: 8px !important;
        line-height: 1.05 !important;
    }

    .hero-character .stat-card .material-symbols-outlined{
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* Alle Knoten ein kleines Stück tiefer, ohne das Rad auseinanderzuziehen. */
    .hero-character .stat-circle.stamina   { --skill-y:-102px !important; }
    .hero-character .stat-circle.strength  { --skill-y:-102px !important; }
    .hero-character .stat-circle.technique { --skill-y:-24px !important; }
    .hero-character .stat-circle.balance   { --skill-y:-24px !important; }
    .hero-character .stat-circle.halse     { --skill-y:58px !important; }
    .hero-character .stat-circle.wenden    { --skill-y:58px !important; }
    .hero-character .stat-circle.spruenge  { --skill-y:118px !important; }
    .hero-character .stat-circle.tricks    { --skill-y:118px !important; }
}

/* Der Windrichtungs-Text ist nicht mehr nötig – der Pointer zeigt die Richtung. */
.compass-dir{ display:none !important; }


/* V42.30 – Windgeschwindigkeit im Kompass 10px tiefer */
.compass-wind-main{
    top:16px !important;
}
@media (max-width:420px){
    .compass-wind-main{
        top:16px !important;
    }
}

/* V42.32 Coin-Shop / Google Play Vorbereitung */
.coin-purchase-panel{margin:0 0 12px;padding:12px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(20,28,42,.62)}
.coin-purchase-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.coin-purchase-head strong{display:block;font-size:.92rem}.coin-purchase-head small{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:.68rem}.coin-purchase-badge{font-size:.64rem;font-weight:800;padding:5px 8px;border-radius:999px;background:rgba(80,150,255,.15);border:1px solid rgba(80,180,255,.25)}
.coin-package-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.coin-package{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:9px 7px;background:rgba(255,255,255,.05);color:#fff;cursor:pointer;text-align:center}.coin-package strong{display:block;font-size:.82rem}.coin-package span{display:block;margin-top:3px;font-size:.62rem;color:rgba(255,255,255,.62)}.coin-package:hover{background:rgba(80,180,255,.13);border-color:rgba(80,200,255,.45)}.coin-package-loading,.coin-purchase-status{font-size:.68rem;color:rgba(255,255,255,.65)}.coin-purchase-status{margin-top:7px;min-height:1em}
@media(max-width:520px){.coin-package-list{grid-template-columns:repeat(2,minmax(0,1fr))}.coin-purchase-panel{padding:10px}}


/* =========================================================
   V42.33 – DEUTLICHE AKTIONS-/FEHLERMELDUNGEN
   ---------------------------------------------------------
   Gilt einheitlich für:
   Shop, Training, Jobs, Sponsoren, Rennen, Saison-Liga,
   Inventar, Einstellungen, Push, Chat und vergleichbare
   Inline-Meldungen.
   ========================================================= */

/* Grundzustand: leere Meldungen nehmen keinen Platz ein. */
.shop-error:empty,
.job-error:empty,
.training-gear-error:empty,
.settings-delete-error:empty,
.chat-error:empty{
    display:none !important;
}

/* Gemeinsames, deutlich sichtbares Alert-Design */
.shop-error:not(:empty),
.job-error:not(:empty),
.training-gear-error:not(:empty),
.settings-delete-error:not(:empty),
.chat-error:not(:empty),
.error:not(:empty){
    display:flex !important;
    align-items:flex-start;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    margin:12px 0 4px !important;
    padding:12px 14px !important;

    color:#ffe4e6 !important;
    font-size:.88rem !important;
    line-height:1.35 !important;
    font-weight:700;

    background:
        linear-gradient(
            135deg,
            rgba(127,29,29,.72),
            rgba(69,10,10,.58)
        ) !important;

    border:1px solid rgba(248,113,113,.62) !important;
    border-left:4px solid #fb7185 !important;
    border-radius:14px !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.28),
        0 0 18px rgba(248,113,113,.10);

    text-shadow:0 1px 2px rgba(0,0,0,.55);
}

/* Warnsymbol automatisch vor jede sichtbare Meldung */
.shop-error:not(:empty)::before,
.job-error:not(:empty)::before,
.training-gear-error:not(:empty)::before,
.settings-delete-error:not(:empty)::before,
.chat-error:not(:empty)::before,
.error:not(:empty)::before{
    content:"!";
    flex:0 0 22px;
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:0;
    border-radius:50%;

    color:#fff;
    background:#ef4444;
    font-size:.82rem;
    font-weight:900;

    box-shadow:0 0 10px rgba(239,68,68,.45);
}

/* Saison-Liga / Race: Meldung besonders prominent */
#league-error:not(:empty),
#race-error:not(:empty){
    margin:14px 0 10px !important;
    font-size:.95rem !important;
    padding:13px 15px !important;
}

/* Shop / Inventar / Sponsor: etwas kompakter, aber klar */
#shop-error:not(:empty),
#inventory-error:not(:empty),
#sponsor-error:not(:empty),
#events-error:not(:empty){
    font-size:.86rem !important;
}

/* Wenn eine Meldung erscheint, soll sie auch bei langen Texten
   sauber umbrechen und nicht aus dem Modal herauslaufen. */
.shop-error:not(:empty),
.job-error:not(:empty),
.training-gear-error:not(:empty),
.settings-delete-error:not(:empty),
.chat-error:not(:empty),
.error:not(:empty){
    overflow-wrap:anywhere;
    word-break:normal;
}

/* Mobile: Meldungen noch etwas besser lesbar */
@media (max-width:420px){
    .shop-error:not(:empty),
    .job-error:not(:empty),
    .training-gear-error:not(:empty),
    .settings-delete-error:not(:empty),
    .chat-error:not(:empty),
    .error:not(:empty){
        margin:12px 0 5px !important;
        padding:11px 12px !important;
        font-size:.86rem !important;
        border-radius:13px !important;
    }

    #league-error:not(:empty),
    #race-error:not(:empty){
        font-size:.91rem !important;
    }
}


/* V42.34 – Meldung nach Auto-Scroll kurz hervorheben */
.notification-attention {
    animation: notificationAttention 1.4s ease-out;
}
@keyframes notificationAttention {
    0%, 100% { transform: translateZ(0); }
    20% { transform: scale(1.025); }
    45% { transform: scale(0.995); }
    70% { transform: scale(1.012); }
}
\n\n/* V42.36 – Material in aktiver Benutzung */\n.inventory-in-use-badge{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:100%;\n    box-sizing:border-box;\n    margin-top:8px;\n    padding:9px 10px;\n    border-radius:11px;\n    color:#dbeafe;\n    background:rgba(30,64,175,.22);\n    border:1px solid rgba(96,165,250,.48);\n    font-size:.78rem;\n    font-weight:700;\n    line-height:1.2;\n    text-align:center;\n}\n