/*
    SKINS
    Freischaltbar über die Gesamtzahl der Siege (Logik in js/skins.js).
    Ein Skin ändert nur die ausgewerteten Plättchen (grün, gelb, grau) und den Hintergrund.
    Die Grundfarben kommen weiter aus --green / --yellow / --gray, damit der Farbenblind-Modus greift.

    Jeder Skin setzt Variablen auf zwei Ebenen:
    - body.skin-x            -> Spielbrett und Seitenhintergrund
    - .skin-scope.skin-x     -> Vorschauen im Inventar (unabhängig vom angelegten Skin)
*/

/*
    STANDARDWERTE
    Auf body UND jeder Vorschau gesetzt, damit Vorschauen nie Werte des angelegten Skins erben.
*/

body,
.skin-scope {
    --t-c: none;                 /* zusätzliche Bildebenen über Grün */
    --t-y: none;                 /* ... über Gelb */
    --t-n: none;                 /* ... über Grau */
    --t-size: auto;              /* background-size dieser Ebenen */
    --t-pos: 0 0;                /* background-position dieser Ebenen */
    --t-repeat: repeat;          /* background-repeat dieser Ebenen */
    --t-radius: 12px;
    --t-border: var(--stroke);
    --t-border-color: var(--ink);
    --t-shadow-c: var(--shadow);
    --t-shadow-y: var(--shadow);
    --t-shadow-n: var(--shadow);
    --t-text: var(--ink);
    --t-text-shadow: none;
    --t-shine: none;             /* Ebene im ::after, z. B. Glanzstreifen */
    --t-shine-anim: none;
    --t-shine-size: 300% 100%;
    --t-shine-blend: normal;
    --t-filter: none;            /* SVG-Filter auf dem Plättchen, z. B. Fell */
    --t-backdrop: none;          /* Filter auf dem Hintergrund hinter dem Plättchen, z. B. Glas */
    --t-inset: 0;                /* Abstand der ::after-Ebene zum Rand */
    --t-inner: none;             /* Rahmen der ::after-Ebene, z. B. eine Naht */
    --t-mark-c: "";              /* kleines Zeichen oben links, z. B. Kartenfarben */
    --t-mark-y: "";
    --t-mark-n: "";
    --t-mark-color-c: var(--ink);
    --t-mark-color-y: var(--ink);
    --t-mark-color-n: var(--ink);
    --skin-bg: none;
    --skin-bg-size: auto;
    --skin-bg-pos: 0 0;
    --skin-bg-repeat: repeat;
}

/*
    GEMEINSAME REGELN
*/

body {
    background-image: var(--skin-bg);
    background-size: var(--skin-bg-size);
    background-position: var(--skin-bg-pos);
    background-repeat: var(--skin-bg-repeat);
    background-attachment: fixed;
}

#board-table .cell.green,
#board-table .cell.yellow,
#board-table .cell.gray,
.skin-scope .tile {
    position: relative;
    border-radius: var(--t-radius);
    border-width: var(--t-border);
    border-color: var(--t-border-color);
    color: var(--t-text);
    text-shadow: var(--t-text-shadow);
    filter: var(--t-filter);
    -webkit-backdrop-filter: var(--t-backdrop);
    backdrop-filter: var(--t-backdrop);
}

#board-table .cell.green,  .skin-scope .tile.c { background-image: var(--t-c) !important; box-shadow: var(--t-shadow-c); }
#board-table .cell.yellow, .skin-scope .tile.y { background-image: var(--t-y) !important; box-shadow: var(--t-shadow-y); }
#board-table .cell.gray,   .skin-scope .tile.n { background-image: var(--t-n) !important; box-shadow: var(--t-shadow-n); }

#board-table .cell.green,
#board-table .cell.yellow,
#board-table .cell.gray,
.skin-scope .tile {
    background-size: var(--t-size) !important;
    background-position: var(--t-pos) !important;
    background-repeat: var(--t-repeat) !important;
}

#board-table .cell.green::after,
#board-table .cell.yellow::after,
#board-table .cell.gray::after,
.skin-scope .tile::after {
    position: absolute;
    inset: var(--t-inset);
    border: var(--t-inner);
    border-radius: inherit;
    pointer-events: none;
    background: var(--t-shine);
    background-size: var(--t-shine-size);
    mix-blend-mode: var(--t-shine-blend);
    animation: var(--t-shine-anim);
    padding: .2em .25em;
    font: 700 .34em/1 Georgia, "Times New Roman", serif;
    text-align: left;
    text-shadow: none;
}

#board-table .cell.green::after,  .skin-scope .tile.c::after { content: var(--t-mark-c); color: var(--t-mark-color-c); }
#board-table .cell.yellow::after, .skin-scope .tile.y::after { content: var(--t-mark-y); color: var(--t-mark-color-y); }
#board-table .cell.gray::after,   .skin-scope .tile.n::after { content: var(--t-mark-n); color: var(--t-mark-color-n); }

/* versetzter Glanz über die Reihe */
#board-table td:nth-child(2) .cell::after { animation-delay: .12s; }
#board-table td:nth-child(3) .cell::after { animation-delay: .24s; }
#board-table td:nth-child(4) .cell::after { animation-delay: .36s; }
#board-table td:nth-child(5) .cell::after { animation-delay: .48s; }

@keyframes skinShine {
    0%   { background-position: 100% 0; }
    55%  { background-position: 0% 0; }
    100% { background-position: 0% 0; }
}

@keyframes skinTwinkle {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

@keyframes skinCaustic {
    0%   { background-position: 0% 0%, 100% 30%, 40% 100%; }
    50%  { background-position: 60% 40%, 20% 80%, 100% 20%; }
    100% { background-position: 100% 100%, 0% 0%, 0% 60%; }
}

@keyframes skinScan {
    from { background-position: 0 0%; }
    to   { background-position: 0 100%; }
}


/*
    1 · BONBON (1 Sieg)
*/

body.skin-bonbon,
.skin-scope.skin-bonbon {
    --t-radius: 18px;
    --t-c: radial-gradient(ellipse 45% 30% at 30% 22%, rgba(255, 255, 255, .9), transparent 70%),
           radial-gradient(ellipse 80% 50% at 50% 110%, rgba(27, 21, 48, .18), transparent 70%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --skin-bg: repeating-linear-gradient(-45deg, rgba(255, 90, 95, .07) 0 28px, transparent 28px 56px);
}


/*
    2 · SCHULHEFT (10 Siege)
*/

body.skin-schulheft,
.skin-scope.skin-schulheft {
    --t-radius: 5px;
    --t-c: repeating-linear-gradient(-45deg, rgba(27, 21, 48, .16) 0 2px, transparent 2px 7px);
    --t-y: repeating-linear-gradient(45deg, rgba(27, 21, 48, .16) 0 2px, transparent 2px 7px);
    --t-n: repeating-linear-gradient(-45deg, rgba(27, 21, 48, .12) 0 2px, transparent 2px 7px),
           repeating-linear-gradient(45deg, rgba(27, 21, 48, .12) 0 2px, transparent 2px 7px);
    --t-shadow-c: 3px 3px 0 rgba(61, 123, 255, .55);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --skin-bg: linear-gradient(90deg, transparent 63px, rgba(255, 90, 95, .35) 63px 65px, transparent 65px),
               linear-gradient(rgba(61, 123, 255, .13) 1px, transparent 1px),
               linear-gradient(90deg, rgba(61, 123, 255, .13) 1px, transparent 1px);
    --skin-bg-size: 100% 100%, 24px 24px, 24px 24px;
}


/*
    3 · COMIC (25 Siege)
*/

body.skin-comic,
.skin-scope.skin-comic {
    --t-border: 4px;
    --t-c: radial-gradient(rgba(27, 21, 48, .24) 1.3px, transparent 1.8px);
    --t-size: 7px 7px;
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 5px 5px 0 var(--ink);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text-shadow: 2px 2px 0 #fff;
    --skin-bg: radial-gradient(rgba(27, 21, 48, .07) 2px, transparent 2.5px),
               repeating-conic-gradient(from 0deg at 100% 0%, rgba(255, 201, 60, .14) 0 4deg, transparent 4deg 10deg);
    --skin-bg-size: 16px 16px, 100% 100%;
}


/*
    4 · NEON (50 Siege)
*/

body.skin-neon,
.skin-scope.skin-neon {
    --t-radius: 10px;
    --t-border-color: #fff;
    --t-c: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 0 0 0 3px var(--ink), 0 0 18px 4px var(--green);
    --t-shadow-y: 0 0 0 3px var(--ink), 0 0 18px 4px var(--yellow);
    --t-shadow-n: 0 0 0 3px var(--ink), 0 0 10px 1px var(--gray);
    --t-text-shadow: 0 0 6px rgba(255, 255, 255, .9);
    /* weicher Verlauf über die ganze Höhe: keine harte Kante, egal wie hoch der Bildschirm ist */
    --skin-bg: linear-gradient(180deg, rgba(138, 92, 255, .16) 0%, rgba(255, 90, 95, .12) 55%, rgba(255, 90, 95, .05) 80%, rgba(138, 92, 255, .08) 100%),
               linear-gradient(rgba(138, 92, 255, .22) 2px, transparent 2px),
               linear-gradient(90deg, rgba(138, 92, 255, .22) 2px, transparent 2px);
    --skin-bg-size: 100% 100%, 100% 40px, 60px 100%;
}


/*
    5 · WACKELPUDDING (100 Siege)
*/

body.skin-wackelpudding,
.skin-scope.skin-wackelpudding {
    --t-radius: 38%;
    --t-c: radial-gradient(ellipse 50% 28% at 35% 22%, rgba(255, 255, 255, .85), transparent 70%),
           linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(27, 21, 48, .22));
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 3px 5px 0 var(--ink), inset 0 -6px 10px rgba(27, 21, 48, .18);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --skin-bg: radial-gradient(circle at 15% 25%, rgba(43, 196, 107, .14) 0 60px, transparent 61px),
               radial-gradient(circle at 80% 15%, rgba(255, 201, 60, .18) 0 90px, transparent 91px),
               radial-gradient(circle at 70% 80%, rgba(255, 90, 95, .12) 0 120px, transparent 121px),
               radial-gradient(circle at 25% 85%, rgba(138, 92, 255, .14) 0 70px, transparent 71px);
}


/*
    6 · AQUARELL (200 Siege)
*/

body.skin-aquarell,
.skin-scope.skin-aquarell {
    --t-radius: 15px 9px 16px 8px;
    --t-border: 2px;
    --t-c: radial-gradient(circle at 28% 28%, rgba(255, 255, 255, .5), transparent 42%),
           radial-gradient(circle at 74% 72%, rgba(27, 21, 48, .2), transparent 48%),
           radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .28), transparent 26%),
           radial-gradient(circle at 18% 82%, rgba(27, 21, 48, .1), transparent 30%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 2px 3px 0 rgba(27, 21, 48, .55);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --skin-bg: radial-gradient(closest-side at 15% 20%, rgba(255, 90, 95, .16), transparent),
               radial-gradient(closest-side at 85% 15%, rgba(61, 123, 255, .14), transparent),
               radial-gradient(closest-side at 75% 75%, rgba(43, 196, 107, .14), transparent),
               radial-gradient(closest-side at 20% 85%, rgba(255, 201, 60, .2), transparent),
               radial-gradient(closest-side at 50% 50%, rgba(138, 92, 255, .08), transparent),
               radial-gradient(rgba(27, 21, 48, .05) 1px, transparent 1.4px);
    --skin-bg-size: 60vw 60vh, 55vw 55vh, 65vw 60vh, 55vw 55vh, 90vw 90vh, 5px 5px;
}


/*
    7 · HOLZWERKSTATT (300 Siege)
*/

body.skin-holz,
.skin-scope.skin-holz {
    --t-radius: 8px;
    --t-border-color: #4a2f1a;
    --t-c: repeating-radial-gradient(ellipse 140% 40% at 20% 120%, rgba(74, 47, 26, .0) 0 6px, rgba(74, 47, 26, .18) 7px 8px),
           linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 3px 4px 0 #4a2f1a;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text: #2b1a0e;
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
    --skin-bg: radial-gradient(rgba(140, 94, 52, .16) 1.5px, transparent 2px),
               radial-gradient(rgba(140, 94, 52, .1) 1px, transparent 1.5px),
               linear-gradient(rgba(214, 170, 120, .16), rgba(214, 170, 120, .16));
    --skin-bg-size: 13px 11px, 7px 9px, 100% 100%;
}


/*
    8 · EISKRISTALL (500 Siege)
*/

body.skin-eis,
.skin-scope.skin-eis {
    --t-radius: 10px;
    --t-border-color: #1e3a5f;
    --t-c: linear-gradient(135deg, rgba(255, 255, 255, .65) 0 16%, transparent 16% 38%, rgba(255, 255, 255, .35) 38% 44%, transparent 44% 70%, rgba(255, 255, 255, .25) 70% 74%, transparent 74%),
           radial-gradient(ellipse 90% 45% at 50% 105%, rgba(255, 255, 255, .7), transparent 70%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: inset 0 0 0 2px rgba(255, 255, 255, .55), 3px 3px 0 #1e3a5f;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text: #10233a;
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    --t-shine: radial-gradient(circle at 78% 24%, #fff 0 1.6px, transparent 2.4px),
               radial-gradient(circle at 24% 70%, #fff 0 1.2px, transparent 2px);
    --t-shine-anim: skinTwinkle 2.2s ease-in-out infinite;
    --skin-bg: linear-gradient(180deg, rgba(61, 123, 255, .13), rgba(207, 224, 255, .25) 70%, rgba(255, 255, 255, .35)),
               radial-gradient(circle, rgba(61, 123, 255, .28) 2px, transparent 2.6px),
               radial-gradient(circle, rgba(61, 123, 255, .18) 1.2px, transparent 1.8px);
    --skin-bg-size: 100% 100%, 53px 61px, 29px 37px;
}


/*
    10 · DIAMANT (1000 Siege)
*/

body.skin-diamant,
.skin-scope.skin-diamant {
    --t-radius: 6px;
    --t-c: linear-gradient(160deg, rgba(255, 255, 255, .3), transparent 35%),
           conic-gradient(from 45deg at 50% 50%, rgba(255, 255, 255, .2) 0 25%, rgba(27, 21, 48, .05) 0 50%, rgba(255, 255, 255, .1) 0 75%, rgba(27, 21, 48, .09) 0);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: inset 0 0 0 3px rgba(255, 255, 255, .4), 4px 4px 0 var(--ink);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    --t-shine: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .6) 47%, rgba(180, 225, 255, .45) 50%, rgba(255, 190, 240, .4) 53%, transparent 60%);
    --t-shine-anim: skinShine 3.4s ease-in-out infinite;
    --skin-bg: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .6), transparent 50%),
               repeating-linear-gradient(115deg, transparent 0 140px, rgba(255, 90, 160, .07) 140px 170px, rgba(61, 200, 255, .07) 170px 200px, rgba(255, 220, 60, .08) 200px 230px, transparent 230px 360px);
}


/*
    9 · GALAXIE (750 Siege)
*/

body.skin-galaxie,
.skin-scope.skin-galaxie {
    --t-radius: 14px;
    --t-c: radial-gradient(circle at 22% 30%, #fff 0 1.2px, transparent 1.8px),
           radial-gradient(circle at 72% 22%, #fff 0 1px, transparent 1.6px),
           radial-gradient(circle at 60% 74%, #fff 0 1.4px, transparent 2px),
           radial-gradient(circle at 34% 80%, #fff 0 .8px, transparent 1.4px),
           radial-gradient(circle at 50% 50%, transparent 40%, rgba(27, 21, 48, .35) 100%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shine: radial-gradient(circle at 80% 55%, #fff 0 1.5px, transparent 2.2px),
               radial-gradient(circle at 15% 60%, #fff 0 1.2px, transparent 2px);
    --t-shine-anim: skinTwinkle 1.8s ease-in-out infinite;
    --t-text: #fff;
    --t-text-shadow: 0 0 6px rgba(27, 21, 48, .9), 2px 2px 0 var(--ink);
    --skin-bg: radial-gradient(circle at 12% 18%, rgba(138, 92, 255, .22), transparent 32%),
               radial-gradient(circle at 85% 30%, rgba(61, 123, 255, .2), transparent 30%),
               radial-gradient(circle at 60% 90%, rgba(255, 90, 95, .16), transparent 35%),
               radial-gradient(circle, rgba(27, 21, 48, .3) 1px, transparent 1.4px);
    --skin-bg-size: 100% 100%, 100% 100%, 100% 100%, 37px 41px;
}


/*
    11 · GOLDENE LEGENDE (1500 Siege)
*/

body.skin-gold,
.skin-scope.skin-gold {
    --t-radius: 12px;
    --t-border-color: #7a5a0c;
    --t-c: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, transparent 28%, rgba(27, 21, 48, .18) 50%, transparent 72%, rgba(255, 255, 255, .4) 100%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 0 0 0 3px #ffd75e, 4px 4px 0 3px #7a5a0c;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: 0 0 0 3px #e9dcae, 4px 4px 0 3px #7a5a0c;
    --t-text: #2a1d00;
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    --t-shine: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%);
    --t-shine-anim: skinShine 3s ease-in-out infinite;
    --skin-bg: radial-gradient(ellipse at 50% -10%, rgba(255, 201, 60, .35), transparent 55%),
               repeating-conic-gradient(from 0deg at 50% -10%, rgba(255, 201, 60, .12) 0 5deg, transparent 5deg 12deg);
}


/*
    NEUE SKINS
    Die Stufen sind noch vorläufig (js/skins.js), deshalb ohne Nummer und Siegzahl.
*/

/*
    HALLOWEEN
*/

body.skin-halloween,
.skin-scope.skin-halloween {
    --t-radius: 10px;
    --t-border-color: #2a1440;
    /* Spinnennetz in der Ecke oben links, unten etwas Nebel */
    --t-c: repeating-conic-gradient(from 90deg at 0 0, rgba(27, 21, 48, .38) 0 1.2deg, transparent 1.2deg 18deg),
           radial-gradient(circle at 0 0, transparent 0 20%, rgba(27, 21, 48, .42) 20% 23%, transparent 23% 42%, rgba(27, 21, 48, .38) 42% 45%, transparent 45% 64%, rgba(27, 21, 48, .32) 64% 67%, transparent 67%),
           radial-gradient(ellipse 90% 55% at 50% 115%, rgba(42, 20, 64, .42), transparent 70%);
    --t-size: 46% 46%, 46% 46%, 100% 100%;
    --t-repeat: no-repeat;
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: 3px 3px 0 #2a1440, 0 0 14px rgba(255, 122, 26, .5);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: 3px 3px 0 #2a1440, 0 0 10px rgba(138, 92, 255, .4);
    --skin-bg: radial-gradient(ellipse 80% 45% at 50% 108%, rgba(255, 122, 26, .24), transparent 70%),
               radial-gradient(ellipse 60% 35% at 15% 0%, rgba(90, 40, 140, .2), transparent 70%),
               radial-gradient(ellipse 50% 30% at 90% 10%, rgba(90, 40, 140, .14), transparent 70%),
               linear-gradient(180deg, rgba(42, 20, 64, .14), rgba(42, 20, 64, .03));
}


/*
    BALLONS
*/

body.skin-ballons,
.skin-scope.skin-ballons {
    --t-radius: 48% 48% 46% 46% / 50% 50% 44% 44%;
    --t-border: 2px;
    /* glänzendes Latex: großer Lichtfleck, kleiner Zweitreflex, dunklerer Rand, Knoten unten */
    --t-c: radial-gradient(ellipse 22% 15% at 32% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 60%, transparent 100%),
           radial-gradient(circle at 70% 72%, rgba(255, 255, 255, .45) 0 4%, transparent 6%),
           conic-gradient(from 150deg at 50% 100%, rgba(27, 21, 48, .5) 0 60deg, transparent 0),
           radial-gradient(ellipse 75% 75% at 42% 38%, transparent 45%, rgba(27, 21, 48, .28) 100%);
    --t-size: 100% 100%, 100% 100%, 26% 12%, 100% 100%;
    --t-pos: 0 0, 0 0, 50% 100%, 0 0;
    --t-repeat: no-repeat;
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: inset 0 -5px 10px rgba(27, 21, 48, .18), inset 4px 4px 10px rgba(255, 255, 255, .3), 0 12px 14px -6px rgba(27, 21, 48, .4);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    /* Glanz, der beim Schweben über die Haut wandert */
    --t-shine: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
    --t-shine-anim: skinShine 5s ease-in-out infinite;
    /* Himmel mit kleinen Wölkchen und Konfetti */
    --skin-bg: radial-gradient(ellipse 18% 6% at 18% 22%, rgba(255, 255, 255, .8), transparent 70%),
               radial-gradient(ellipse 22% 7% at 78% 12%, rgba(255, 255, 255, .75), transparent 70%),
               radial-gradient(ellipse 20% 6% at 64% 62%, rgba(255, 255, 255, .6), transparent 70%),
               radial-gradient(circle, rgba(255, 90, 95, .22) 0 2px, transparent 2.5px),
               radial-gradient(circle, rgba(255, 201, 60, .3) 0 2px, transparent 2.5px),
               linear-gradient(180deg, rgba(143, 211, 255, .3), rgba(207, 224, 255, .12) 60%, rgba(255, 231, 163, .14));
    --skin-bg-size: 100% 100%, 100% 100%, 100% 100%, 83px 97px, 71px 59px, 100% 100%;
    --skin-bg-pos: 0 0, 0 0, 0 0, 0 0, 30px 20px, 0 0;
}


/*
    FLAUSCHIG
*/
body.skin-flauschig,
.skin-scope.skin-flauschig {
    --t-radius: 20px;
    --t-border: 0px;
    /* dichtes Fell aus drei Lagen Härchen, der Filter zerzaust Ränder und Fell (index.html, #rf-fluff) */
    --t-c: radial-gradient(rgba(255, 255, 255, .55) 1.1px, transparent 1.8px),
           radial-gradient(rgba(27, 21, 48, .22) 1.1px, transparent 1.8px),
           radial-gradient(rgba(255, 255, 255, .3) .8px, transparent 1.3px),
           radial-gradient(ellipse 70% 60% at 42% 36%, rgba(255, 255, 255, .45), transparent 75%),
           radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(27, 21, 48, .18));
    --t-size: 4px 4px, 5px 6px, 3px 3px, 100% 100%, 100% 100%;
    --t-pos: 0 0, 2px 3px, 1px 1px, 0 0, 0 0;
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-filter: url(#rf-fluff);
    /* dicker Flausch-Saum in der Plättchenfarbe */
    --t-shadow-c: 0 0 0 4px color-mix(in srgb, var(--green) 70%, #fff), 0 0 0 8px color-mix(in srgb, var(--green) 35%, transparent), 0 0 16px 8px color-mix(in srgb, var(--green) 40%, transparent), 2px 6px 0 6px rgba(27, 21, 48, .22);
    --t-shadow-y: 0 0 0 4px color-mix(in srgb, var(--yellow) 70%, #fff), 0 0 0 8px color-mix(in srgb, var(--yellow) 35%, transparent), 0 0 16px 8px color-mix(in srgb, var(--yellow) 40%, transparent), 2px 6px 0 6px rgba(27, 21, 48, .22);
    --t-shadow-n: 0 0 0 4px color-mix(in srgb, var(--gray) 70%, #fff), 0 0 0 8px color-mix(in srgb, var(--gray) 35%, transparent), 0 0 16px 8px color-mix(in srgb, var(--gray) 40%, transparent), 2px 6px 0 6px rgba(27, 21, 48, .22);
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    --skin-bg: radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .6) 0 70px, transparent 160px),
               radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .55) 0 90px, transparent 190px),
               radial-gradient(circle at 70% 82%, rgba(255, 255, 255, .5) 0 110px, transparent 220px),
               radial-gradient(rgba(138, 92, 255, .1) 1px, transparent 1.6px);
    --skin-bg-size: 100% 100%, 100% 100%, 100% 100%, 9px 9px;
}

/* der Fell-Saum darf über das Plättchen hinausstehen */
body.skin-flauschig #board-table .cell.green,
body.skin-flauschig #board-table .cell.yellow,
body.skin-flauschig #board-table .cell.gray,
.skin-scope.skin-flauschig .tile {
    overflow: visible;
}


/*
    SCHOKOLADE
*/

body.skin-schokolade,
.skin-scope.skin-schokolade {
    --t-radius: 9px 9px 15px 12px / 9px 9px 20px 16px;
    --t-border-color: #3b2314;
    --t-c: linear-gradient(160deg, rgba(255, 255, 255, .28), transparent 32%),
           linear-gradient(rgba(90, 50, 22, .2), rgba(90, 50, 22, .2));
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    /* geprägtes Täfelchen: Wulst am Rand, Rille, glatte Mitte */
    --t-shadow-c: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -4px -4px 0 rgba(59, 35, 20, .3), inset 0 0 0 6px rgba(255, 255, 255, .06), inset 0 0 0 8px rgba(59, 35, 20, .28), 3px 4px 0 #3b2314;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text: #2a160a;
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    /* geschmolzene Tropfen am unteren Rand */
    --t-shine: radial-gradient(ellipse 10% 17% at 27% 100%, rgba(59, 35, 20, .6) 0 70%, transparent 74%),
               radial-gradient(ellipse 6% 24% at 62% 100%, rgba(59, 35, 20, .6) 0 70%, transparent 74%),
               radial-gradient(ellipse 13% 10% at 84% 100%, rgba(59, 35, 20, .55) 0 70%, transparent 74%);
    --t-shine-size: 100% 100%;
    --skin-bg: linear-gradient(rgba(110, 62, 30, .12) 3px, transparent 3px),
               linear-gradient(90deg, rgba(110, 62, 30, .12) 3px, transparent 3px),
               linear-gradient(rgba(170, 110, 60, .1), rgba(170, 110, 60, .1));
    --skin-bg-size: 72px 72px, 72px 72px, 100% 100%;
}


/*
    LEDER
*/

body.skin-leder,
.skin-scope.skin-leder {
    --t-radius: 10px;
    --t-border-color: #3a2212;
    /* Narbung und dunkler gegerbte Ränder */
    --t-c: radial-gradient(rgba(40, 20, 8, .2) .8px, transparent 1.4px),
           radial-gradient(rgba(255, 255, 255, .13) .8px, transparent 1.4px),
           radial-gradient(ellipse 80% 75% at 45% 40%, transparent 52%, rgba(40, 20, 8, .4));
    --t-size: 4px 5px, 5px 4px, 100% 100%;
    --t-pos: 0 0, 2px 1px, 0 0;
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    /* Naht rundherum */
    --t-inset: 4px;
    --t-inner: 2px dashed rgba(255, 246, 225, .9);
    --t-shadow-c: inset 0 2px 0 rgba(255, 255, 255, .2), 3px 4px 0 #3a2212;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text: #24150a;
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    --skin-bg: radial-gradient(rgba(90, 50, 22, .13) 1px, transparent 1.6px),
               radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(90, 50, 22, .14)),
               linear-gradient(rgba(190, 130, 80, .12), rgba(190, 130, 80, .12));
    --skin-bg-size: 6px 7px, 100% 100%, 100% 100%;
}


/*
    GRIECHISCHE FLIESEN
*/

body.skin-fliesen,
.skin-scope.skin-fliesen {
    --t-radius: 4px;
    --t-border-color: #17357a;
    /* Glasur, Ring mit Punkt in der Mitte und Viertelkreise in den Ecken */
    --t-c: linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 38%),
           radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .8) 0 8%, transparent 9% 30%, rgba(255, 255, 255, .75) 31% 36%, transparent 37%),
           radial-gradient(circle at 0 0, rgba(255, 255, 255, .6) 0 15%, transparent 16%),
           radial-gradient(circle at 100% 0, rgba(255, 255, 255, .6) 0 15%, transparent 16%),
           radial-gradient(circle at 0 100%, rgba(255, 255, 255, .6) 0 15%, transparent 16%),
           radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .6) 0 15%, transparent 16%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 0 0 4.5px rgba(23, 53, 122, .5), 3px 3px 0 #17357a;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text: #10204a;
    --t-text-shadow: 0 1px 0 #fff, 0 0 4px rgba(255, 255, 255, .8);
    /* weiß verfugte Kacheln mit blauen Kreisen an den Fugen, unten Meer */
    --skin-bg: linear-gradient(rgba(23, 53, 122, .12) 2px, transparent 2px),
               linear-gradient(90deg, rgba(23, 53, 122, .12) 2px, transparent 2px),
               radial-gradient(circle, rgba(61, 123, 255, .14) 0 14px, transparent 15px),
               linear-gradient(180deg, transparent 55%, rgba(61, 123, 255, .14));
    --skin-bg-size: 64px 64px, 64px 64px, 64px 64px, 100% 100%;
    --skin-bg-pos: 0 0, 0 0, 33px 33px, 0 0;
}


/*
    SPIELEABEND
*/

body.skin-spieleabend,
.skin-scope.skin-spieleabend {
    --t-radius: 9px;
    --t-border: 2px;
    /* Spielkarten: weißer Innenrahmen und Farbe in der Ecke */
    --t-c: linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 40%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    --t-shadow-c: inset 0 0 0 3px rgba(255, 255, 255, .9), inset 0 0 0 4px rgba(27, 21, 48, .25), 3px 4px 0 rgba(27, 21, 48, .85);
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-mark-c: "♣";
    --t-mark-y: "♦";
    --t-mark-n: "♠";
    --t-mark-color-y: #d62839;
    /* Spielbrett mit Schachbrettmuster */
    --skin-bg: conic-gradient(rgba(27, 21, 48, .06) 25%, transparent 0 50%, rgba(27, 21, 48, .06) 0 75%, transparent 0),
               radial-gradient(ellipse at 50% 30%, rgba(255, 201, 60, .16), transparent 65%);
    --skin-bg-size: 64px 64px, 100% 100%;
}


/*
    ZAUBERWÜRFEL
*/
body.skin-rubiks,
.skin-scope.skin-rubiks {
    --t-radius: 13px;
    --t-border: 2px;
    --t-border-color: #120e1f;
    /* ein einzelner Würfelstein: dunkler Kunststoff, darauf ein Aufkleber mit runden Ecken */
    --t-c: linear-gradient(145deg, rgba(255, 255, 255, .5) 0 14%, rgba(255, 255, 255, .15) 30%, transparent 46%),
           linear-gradient(325deg, rgba(27, 21, 48, .18), transparent 40%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    /* Kante oben am Kunststoff, Rahmen um den Aufkleber, Tiefe des Steins nach unten rechts */
    --t-shadow-c: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 0 0 6px #1b1530, inset 0 0 0 7px rgba(0, 0, 0, .35), 3px 3px 0 #120e1f, 6px 6px 0 #2e2648;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    --skin-bg: linear-gradient(rgba(27, 21, 48, .1) 4px, transparent 4px),
               linear-gradient(90deg, rgba(27, 21, 48, .1) 4px, transparent 4px),
               conic-gradient(rgba(255, 90, 95, .1) 0 25%, rgba(61, 123, 255, .1) 0 50%, rgba(255, 201, 60, .13) 0 75%, rgba(43, 196, 107, .1) 0);
    --skin-bg-size: 36px 36px, 36px 36px, 108px 108px;
}


/*
    RETRO NEON
*/

body.skin-retroneon,
.skin-scope.skin-retroneon {
    --t-radius: 6px;
    --t-border-color: #1a0b33;
    /* Scanlines und Chrom-Horizont */
    --t-c: repeating-linear-gradient(180deg, rgba(27, 21, 48, .15) 0 1px, transparent 1px 3px),
           linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 47%, rgba(26, 11, 51, .16) 53%, transparent);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    /* leicht verschobene Farbkanäle wie auf einem alten Bildschirm */
    --t-shadow-c: -3px -2px 0 #ff2bd6, 3px 3px 0 #2be4ff;
    --t-shadow-y: var(--t-shadow-c);
    --t-shadow-n: var(--t-shadow-c);
    --t-text: #1a0b33;
    --t-text-shadow: -1.5px 0 0 rgba(255, 43, 214, .8), 1.5px 0 0 rgba(43, 228, 255, .8);
    /* Lichtbalken, der wie bei einem Röhrenbildschirm durchläuft */
    --t-shine: linear-gradient(180deg, transparent 46%, rgba(255, 255, 255, .55) 50%, transparent 54%);
    --t-shine-size: 100% 300%;
    --t-shine-anim: skinScan 3.2s linear infinite;
    /* Streifensonne am unteren Rand */
    --skin-bg: repeating-linear-gradient(0deg, var(--paper) 0 5px, transparent 5px 20px),
               radial-gradient(circle at 50% 100%, rgba(255, 170, 60, .4) 0 16vmin, rgba(255, 43, 214, .28) 24vmin, transparent 46vmin),
               linear-gradient(0deg, rgba(255, 43, 214, .14), transparent 45%),
               linear-gradient(rgba(138, 92, 255, .14) 2px, transparent 2px);
    --skin-bg-size: 100% 18vmin, 100% 100%, 100% 100%, 100% 36px;
    --skin-bg-pos: 50% 100%, 0 0, 0 0, 0 0;
    --skin-bg-repeat: no-repeat, no-repeat, no-repeat, repeat;
}


/*
    GLAS
*/
body.skin-glas,
.skin-scope.skin-glas {
    --t-radius: 18px;
    --t-border: 1.5px;
    --t-border-color: rgba(255, 255, 255, .95);
    /* Lichtkante oben, gebündeltes Licht unten */
    --t-c: radial-gradient(ellipse 80% 38% at 50% 0%, rgba(255, 255, 255, .75), transparent 72%),
           radial-gradient(ellipse 70% 30% at 50% 104%, rgba(255, 255, 255, .6), transparent 70%),
           linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 50%);
    --t-y: var(--t-c);
    --t-n: var(--t-c);
    /* der Hintergrund dahinter wird weich verzerrt wie durch dickes Glas (index.html, #rf-liquid) */
    --t-backdrop: url(#rf-liquid) blur(1.5px) saturate(1.8) brightness(1.08);
    --t-shadow-c: inset 0 1px 1px #fff, inset 0 0 0 3px rgba(255, 255, 255, .28), inset 0 -10px 16px rgba(27, 21, 48, .14), inset 0 10px 14px rgba(255, 255, 255, .22),
                  0 0 0 1px rgba(27, 21, 48, .2), 0 12px 20px -6px color-mix(in srgb, var(--green) 75%, transparent);
    --t-shadow-y: inset 0 1px 1px #fff, inset 0 0 0 3px rgba(255, 255, 255, .28), inset 0 -10px 16px rgba(27, 21, 48, .14), inset 0 10px 14px rgba(255, 255, 255, .22),
                  0 0 0 1px rgba(27, 21, 48, .2), 0 12px 20px -6px color-mix(in srgb, var(--yellow) 75%, transparent);
    --t-shadow-n: inset 0 1px 1px #fff, inset 0 0 0 3px rgba(255, 255, 255, .28), inset 0 -10px 16px rgba(27, 21, 48, .14), inset 0 10px 14px rgba(255, 255, 255, .22),
                  0 0 0 1px rgba(27, 21, 48, .2), 0 12px 20px -6px color-mix(in srgb, var(--gray) 75%, transparent);
    --t-text-shadow: 0 1px 1px rgba(255, 255, 255, .8), 0 0 10px rgba(255, 255, 255, .5);
    /* wanderndes Lichtspiel wie auf einer Wasseroberfläche */
    --t-shine: radial-gradient(ellipse 30% 22% at 50% 50%, rgba(255, 255, 255, .7), transparent 70%),
               radial-gradient(ellipse 24% 34% at 50% 50%, rgba(255, 255, 255, .5), transparent 70%),
               radial-gradient(ellipse 40% 16% at 50% 50%, rgba(255, 255, 255, .55), transparent 70%);
    --t-shine-size: 180% 180%, 160% 200%, 220% 160%;
    --t-shine-blend: soft-light;
    --t-shine-anim: skinCaustic 7s ease-in-out infinite alternate;
    --skin-bg: radial-gradient(circle at 15% 20%, rgba(61, 123, 255, .3), transparent 36%),
               radial-gradient(circle at 85% 22%, rgba(255, 90, 160, .26), transparent 34%),
               radial-gradient(circle at 72% 85%, rgba(43, 196, 107, .22), transparent 36%),
               radial-gradient(circle at 22% 82%, rgba(255, 201, 60, .28), transparent 34%),
               radial-gradient(circle at 50% 50%, rgba(138, 92, 255, .14), transparent 45%),
               /* Wasserringe, damit man die Verzerrung durch das Glas auch ohne Party-Modus sieht */
               repeating-radial-gradient(circle at 50% 115%, rgba(61, 123, 255, .1) 0 2px, transparent 2px 22px);
}

/* durchsichtig getönt statt deckend: man sieht den verzerrten Hintergrund durch */
body.skin-glas #board-table .cell.green,  .skin-scope.skin-glas .tile.c { background-color: color-mix(in srgb, var(--green) 62%, transparent) !important; }
body.skin-glas #board-table .cell.yellow, .skin-scope.skin-glas .tile.y { background-color: color-mix(in srgb, var(--yellow) 62%, transparent) !important; }
body.skin-glas #board-table .cell.gray,   .skin-scope.skin-glas .tile.n { background-color: color-mix(in srgb, var(--gray) 55%, transparent) !important; }


/*
    SCHWEBENDE MOTIVE IM PARTY-MODUS
    Jeder Skin ersetzt die Konfetti-Punkte durch eigene, zufällig verteilte Motive (900px-Kacheln in img/party/),
    die wandernde Ebene selbst steht in css/party.css.
*/

body[class*="skin-"] {
    --party-opacity: 0.5;
    --party-size: 900px 900px;
}

/* Vorschauen erben nie die Motive des angelegten Skins */
.skin-scope {
    --party-bg: none;
}

body.skin-bonbon, .skin-scope.skin-bonbon          { --party-bg: url("../img/party/bonbon.svg?v=3"); }
body.skin-schulheft, .skin-scope.skin-schulheft    { --party-bg: url("../img/party/schulheft.svg?v=3"); }
body.skin-comic, .skin-scope.skin-comic            { --party-bg: url("../img/party/comic.svg?v=3"); }
body.skin-neon, .skin-scope.skin-neon              { --party-bg: url("../img/party/neon.svg?v=3"); }
body.skin-wackelpudding, .skin-scope.skin-wackelpudding { --party-bg: url("../img/party/wackelpudding.svg?v=3"); }
body.skin-aquarell, .skin-scope.skin-aquarell      { --party-bg: url("../img/party/aquarell.svg?v=3"); }
body.skin-holz, .skin-scope.skin-holz              { --party-bg: url("../img/party/holz.svg?v=3"); }
body.skin-eis, .skin-scope.skin-eis                { --party-bg: url("../img/party/eis.svg?v=3"); }
body.skin-galaxie, .skin-scope.skin-galaxie        { --party-bg: url("../img/party/galaxie.svg?v=3"); }
body.skin-diamant, .skin-scope.skin-diamant        { --party-bg: url("../img/party/diamant.svg?v=3"); }
body.skin-gold, .skin-scope.skin-gold              { --party-bg: url("../img/party/gold.svg?v=3"); }
body.skin-halloween, .skin-scope.skin-halloween    { --party-bg: url("../img/party/halloween.svg?v=4"); }
body.skin-ballons, .skin-scope.skin-ballons        { --party-bg: url("../img/party/ballons.svg?v=3"); }
body.skin-flauschig, .skin-scope.skin-flauschig    { --party-bg: url("../img/party/flauschig.svg?v=3"); }
body.skin-schokolade, .skin-scope.skin-schokolade  { --party-bg: url("../img/party/schokolade.svg?v=3"); }
body.skin-leder, .skin-scope.skin-leder            { --party-bg: url("../img/party/leder.svg?v=3"); }
body.skin-fliesen, .skin-scope.skin-fliesen        { --party-bg: url("../img/party/fliesen.svg?v=3"); }
body.skin-spieleabend, .skin-scope.skin-spieleabend { --party-bg: url("../img/party/spieleabend.svg?v=3"); }
body.skin-rubiks, .skin-scope.skin-rubiks          { --party-bg: url("../img/party/rubiks.svg?v=3"); }
body.skin-retroneon, .skin-scope.skin-retroneon    { --party-bg: url("../img/party/retroneon.svg?v=3"); }
body.skin-glas, .skin-scope.skin-glas              { --party-bg: url("../img/party/glas.svg?v=3"); }


/*
    INVENTAR-BUTTON
*/

#btn-inventory {
    position: relative;
}

.inventory-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--ink);
    font-size: 0.65rem;
    font-weight: 800;
    animation: inventoryDot 1.4s ease-in-out infinite;
}

.inventory-dot[hidden] {
    display: none;
}

@keyframes inventoryDot {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}


/*
    INVENTAR-DIALOG
*/

#modal-inventory.modal-stats {
    width: min(46rem, 95vw);
    max-width: 46rem;
    max-height: 92dvh;
    margin: auto;
    padding: 0;
    overflow: hidden;
}

/* Kopf, Vorschau und Fortschritt bleiben stehen, nur die Skin-Auswahl scrollt */
#modal-inventory[open] {
    display: flex;
    flex-direction: column;
}

#modal-inventory .modal-stats-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

#modal-inventory .inventory-body {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
}

.inventory-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    /* Luft für NEU-Abzeichen, Schatten und Hover, damit nichts am Rand abgeschnitten wird */
    margin: -0.6rem -0.5rem 0;
    padding: 0.8rem 0.5rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* weicher Übergang oben, damit Karten nicht hart unter dem Fortschritt verschwinden */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.8rem);
    mask-image: linear-gradient(180deg, transparent 0, #000 0.8rem);
}

.inventory-scroll::-webkit-scrollbar {
    display: none;
}

.inventory-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem 1.5rem;
}

/* aktueller Skin groß */
.inventory-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
    padding: 1rem;
    border: var(--stroke) solid var(--ink);
    border-radius: 18px;
    box-shadow: var(--shadow);
    background-color: var(--paper);
    background-image: var(--skin-bg);
    background-size: var(--skin-bg-size);
    background-position: var(--skin-bg-pos);
    background-repeat: var(--skin-bg-repeat);
}

.inventory-hero .tiles {
    display: flex;
    gap: 6px;
}

.inventory-hero .tile {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.3rem;
}

.inventory-hero-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.inventory-hero-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.15;
    margin: 0.1rem 0 0.3rem;
}

/* auf dem Handy kompakt nebeneinander, damit für die Skin-Auswahl mehr Höhe bleibt */
@media (max-width: 520px) {
    .inventory-hero {
        gap: 0.8rem;
        padding: 0.7rem 0.8rem;
    }

    .inventory-hero .tiles {
        gap: 3px;
    }

    .inventory-hero .tile {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.95rem;
    }

    .inventory-hero-name {
        font-size: 1.1rem;
    }

    #inventory-hero-text {
        display: none;
    }

    #modal-inventory .inventory-body {
        gap: 0.8rem;
        padding: 0.8rem 1rem 0;
    }

    #modal-inventory .modal-stats-header {
        padding: 0.7rem 1rem 0.6rem;
    }
}

/* Fortschritt zum nächsten Skin */
.inventory-progress {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.inventory-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    font-weight: 700;
}

.inventory-wins {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.inventory-next {
    color: var(--muted);
    font-size: 0.95rem;
}

.inventory-bar {
    height: 1.1rem;
    border: var(--stroke) solid var(--ink);
    border-radius: 99px;
    background: var(--surface);
    overflow: hidden;
}

.inventory-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(-45deg, var(--green) 0 10px, color-mix(in srgb, var(--green) 80%, #fff) 10px 20px);
    border-right: 2px solid var(--ink);
    transition: width .8s cubic-bezier(.34, 1.3, .5, 1);
}

/* Skin-Karten */
.skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.8rem;
}

.skin-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.6rem 0.6rem 0.7rem;
    text-align: left;
    color: var(--ink);
    background: var(--surface);
    border: var(--stroke) solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .15s cubic-bezier(.34, 1.8, .5, 1), box-shadow .15s ease;
    min-width: 0;
}

.skin-card:hover:not(.locked) {
    transform: translateY(-3px) rotate(-1.5deg);
    box-shadow: var(--shadow);
}

.skin-card.active {
    border-color: var(--accent);
    box-shadow: 3px 3px 0 var(--accent);
}

.skin-card.locked {
    cursor: default;
    background: #f4f1fa;
}

/* der Kasten um die Plättchen zeigt den Seitenhintergrund des Skins samt seinen Motiven */
.skin-card .swatch {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0.7rem 0.3rem;
    border: 2px solid var(--ink);
    border-radius: 11px;
    background-color: var(--paper);
    background-image: var(--skin-bg);
    background-size: var(--skin-bg-size);
    background-position: var(--skin-bg-pos);
    background-repeat: var(--skin-bg-repeat);
    overflow: hidden;
}

.skin-card .swatch::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--party-bg);
    background-size: 300px 300px;
    opacity: .75;
}

.skin-card.locked .swatch::before {
    filter: grayscale(.6);
    opacity: .45;
}

.skin-card .tile {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

.skin-card.locked .swatch .tile {
    filter: grayscale(.85) blur(.6px);
    opacity: .6;
}

.skin-card .lock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    text-shadow: 0 2px 0 var(--surface);
}

.skin-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.15;
    overflow-wrap: normal;
    hyphens: manual;
}

.skin-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.skin-state {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 800;
}

.skin-state.is-active {
    color: var(--accent);
}

.skin-state.is-locked {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.skin-new {
    position: absolute;
    top: -9px;
    right: -6px;
    z-index: 1;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--ink);
    border-radius: 99px;
    transform: rotate(6deg);
}

.inventory-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Vorschau-Plättchen */
.skin-scope .tile {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    border-style: solid;
    overflow: hidden;
}

.skin-scope .tile.c { background-color: var(--green); }
.skin-scope .tile.y { background-color: var(--yellow); }
.skin-scope .tile.n { background-color: var(--gray); }

@media (prefers-reduced-motion: reduce) {
    #board-table .cell::after,
    .skin-scope .tile::after {
        animation: none !important;
    }
}