/* LassZocken – Spiel-Skins (gesperrt, bis die Kinder sie freischalten; Katalog: skins.js / src/Skins.php)
Anders als die Farb-Skins in base.css ändern sie auch Formen, Muster, Knöpfe und Schrift.
block-holz · block-stein · block-eisen · block-diamant (4 Stufen) · obby · brawl · party (hell)
wuerfel · turbo · planeten · seide
Texturen sind eigene kleine SVGs (Data-URIs, erlaubt durch die CSP img-src data:). */
:root {
--tex-planks: url("data:image/svg+xml,");
--tex-cobble: url("data:image/svg+xml,");
--tex-iron: url("data:image/svg+xml,");
--tex-deepslate: url("data:image/svg+xml,");
--tex-deepslate-plain: url("data:image/svg+xml,");
--tex-grass: url("data:image/svg+xml,");
--tex-sparkles: url("data:image/svg+xml,");
--tex-studs: url("data:image/svg+xml,");
--tex-squares: url("data:image/svg+xml,");
--tex-stars-1: url("data:image/svg+xml,");
--tex-stars-2: url("data:image/svg+xml,");
--tex-threads: url("data:image/svg+xml,");
--tex-confetti: url("data:image/svg+xml,");
}
/* ---------- gemeinsam ---------- */
/* Fokus als Outline: viele Spiel-Skins nutzen box-shadow für Kanten und Schatten. */
:is([data-skin^="block-"], [data-skin="obby"], [data-skin="brawl"], [data-skin="party"], [data-skin="wuerfel"],
[data-skin="turbo"], [data-skin="planeten"], [data-skin="seide"]) :focus-visible {
outline: 3px solid var(--focus-color); outline-offset: 3px;
}
/* Deko-Ebenen hinter dem Inhalt */
:is([data-skin^="block-"], [data-skin="wuerfel"], [data-skin="planeten"], [data-skin="party"]) body::before,
:is([data-skin="block-diamant"], [data-skin="wuerfel"], [data-skin="planeten"]) body::after {
content: ""; position: fixed; z-index: -1; pointer-events: none;
}
/* Skin-Auswahl: Stufen-Anzeige und Vorschau-Markierung */
.skin-level { font-size: var(--fs-xs); color: var(--brand); letter-spacing: 0.1em; line-height: 1; }
.skin-tag {
justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
background: var(--surface-3); color: var(--text-2);
}
/* =====================================================================
Block-Welt (Minecraft-Stil) – gemeinsame Form für alle 4 Stufen
Stufe 1 Holz: Bretter · 2 Stein: Bruchstein · 3 Eisen: Nieten + Glanz · 4 Diamant: Erz + Verzauberung
===================================================================== */
:root[data-skin^="block-"] {
--radius-sm: 0; --radius: 0; --radius-lg: 0;
--font: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
--shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
--bevel-light: rgba(255, 255, 255, 0.28);
--bevel-dark: rgba(0, 0, 0, 0.4);
--bevel: inset 3px 3px 0 var(--bevel-light), inset -3px -3px 0 var(--bevel-dark);
--bevel-in: inset 3px 3px 0 var(--bevel-dark), inset -3px -3px 0 var(--bevel-light);
--tex: var(--tex-planks);
--tex-shade: rgba(0, 0, 0, 0.18);
}
[data-skin^="block-"] body {
background-image: linear-gradient(var(--tex-shade), var(--tex-shade)), var(--tex);
background-size: auto, 64px 64px;
}
/* Grasnarbe oben (nur über Tage: Holz und Stein) */
:is([data-skin="block-holz"], [data-skin="block-stein"]) body::before {
left: 0; right: 0; top: 0; height: calc(16px + var(--safe-top));
background: var(--tex-grass) left bottom / 32px 16px repeat-x;
}
:is([data-skin="block-eisen"], [data-skin="block-diamant"]) body::before { display: none; }
[data-skin^="block-"] :is(h1, h2, .headline, .big-timer, .profile-card .name, .quota-value) {
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
letter-spacing: 0;
}
[data-skin^="block-"] :is(.btn, .key, .skin-card) {
border-color: #000;
box-shadow: var(--bevel);
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
[data-skin^="block-"] :is(.btn, .key):active { box-shadow: var(--bevel-in); transform: none; }
[data-skin^="block-"] .btn-ghost { box-shadow: none; border-color: transparent; text-shadow: none; }
[data-skin^="block-"] .btn-ghost:active { box-shadow: none; }
[data-skin^="block-"] .key { background-image: var(--tex); background-size: 48px 48px; }
[data-skin^="block-"] .key-action { background-color: var(--surface-2); }
[data-skin^="block-"] .key-ok { background-image: none; text-shadow: none; }
[data-skin^="block-"] :is(.card, .stat, .today-card, dialog, .badges-grid li, .bonus-items li) {
border: 3px solid #000;
background-image: var(--tex);
background-size: 64px 64px;
box-shadow: var(--bevel), var(--shadow);
}
[data-skin^="block-"] :is(.game-tile, .profile-card, .quota, .streak-card, .timer-box) {
border-width: 3px;
box-shadow: var(--bevel), var(--shadow);
}
[data-skin^="block-"] .game-tile[aria-checked="true"] { box-shadow: var(--bevel-in), 0 0 0 3px var(--brand); }
[data-skin^="block-"] .game-tile[aria-checked="true"]::before { border-radius: 0; }
[data-skin^="block-"] :is(.avatar, .game-art) { clip-path: none; box-shadow: var(--bevel); }
[data-skin^="block-"] :is(.badge, .live-pill, .pin-dot, .skin-tag, .swatch) { border-radius: 0; }
/* Balken in Kästchen wie die Erfahrungsleiste */
[data-skin^="block-"] :is(.quota-bar, .badges-grid .bar) {
border-radius: 0; height: 12px;
-webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13px);
mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13px);
}
[data-skin^="block-"] .game-name { letter-spacing: -0.04em; }
[data-skin^="block-"] .ring circle { stroke-width: 11; }
[data-skin^="block-"] .ring-track { stroke-dasharray: 8.31 3; }
[data-skin^="block-"] .ring-fill { stroke-linecap: butt; }
/* Stufe 1 – Holz */
:root[data-skin="block-holz"] {
--bg: #2b1d0e; --bg-2: #332312; --surface: #5a3d1e; --surface-2: #6b4824; --surface-3: #7d5530;
--line: #24170a; --line-strong: #140c04;
--text: #fff8ec; --text-2: #f0d9b5; --text-3: #d4b48a;
--brand: #3f8a26; --brand-ink: #ffffff;
--glow-1: transparent; --glow-2: transparent;
--header-bg: rgba(43, 29, 14, 0.92); --backdrop: rgba(20, 12, 4, 0.75);
--focus-color: #ffe66d;
--tex-shade: rgba(0, 0, 0, 0.38);
}
/* Stufe 2 – Stein */
:root[data-skin="block-stein"] {
--bg: #2e2f31; --bg-2: #36383a; --surface: #4f5154; --surface-2: #5b5e61; --surface-3: #686b6f;
--line: #1c1d1e; --line-strong: #0e0e0f;
--text: #ffffff; --text-2: #dcdde0; --text-3: #b8bbc0;
--brand: #f0b232; --brand-ink: #241600;
--glow-1: rgba(240, 178, 50, 0.10); --glow-2: transparent;
--header-bg: rgba(46, 47, 49, 0.92); --backdrop: rgba(10, 10, 12, 0.75);
--focus-color: #7fdcff;
--tex: var(--tex-cobble);
--tex-shade: rgba(0, 0, 0, 0.32);
}
[data-skin="block-stein"] .btn-primary { text-shadow: none; }
/* Stufe 3 – Eisen: Eisenplatten mit Nieten, Metallglanz auf Knöpfen */
:root[data-skin="block-eisen"] {
--bg: #2a2e33; --bg-2: #31363c; --surface: #474d54; --surface-2: #535a62; --surface-3: #606870;
--line: #1a1d21; --line-strong: #0c0e10;
--text: #ffffff; --text-2: #dfe4ea; --text-3: #b9c1ca;
--brand: #e3e8ec; --brand-ink: #15181b;
--glow-1: rgba(255, 255, 255, 0.06); --glow-2: rgba(255, 75, 58, 0.06);
--header-bg: rgba(42, 46, 51, 0.92); --backdrop: rgba(8, 9, 11, 0.75);
--focus-color: #ff4b3a;
--tex: var(--tex-iron);
--tex-shade: rgba(0, 0, 0, 0.30);
}
[data-skin="block-eisen"] :is(.btn, .key) {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%, rgba(0, 0, 0, 0.16));
}
[data-skin="block-eisen"] .btn-primary { text-shadow: none; }
[data-skin="block-eisen"] :is(.card, .stat, .today-card, dialog, .badges-grid li, .bonus-items li) { background-size: 96px 96px; }
[data-skin="block-eisen"] .btn-ghost { background-image: none; }
/* Stufe 4 – Diamant: Tiefenschiefer mit Diamanterz, funkelnd, Verzauberungs-Schimmer */
:root[data-skin="block-diamant"] {
--bg: #15171c; --bg-2: #1a1d23; --surface: #23262e; --surface-2: #2b2f39; --surface-3: #363b47;
--line: #0b0c0f; --line-strong: #000000;
--text: #f2fffe; --text-2: #c4ecea; --text-3: #8fbfbd;
--brand: #3fe0d8; --brand-ink: #032a28;
--glow-1: rgba(63, 224, 216, 0.16); --glow-2: rgba(170, 110, 255, 0.14);
--header-bg: rgba(21, 23, 28, 0.92); --backdrop: rgba(4, 6, 8, 0.78);
--focus-color: #c38bff;
--tex: var(--tex-deepslate-plain);
--tex-shade: rgba(0, 0, 0, 0.12);
}
[data-skin="block-diamant"] body {
background-image: radial-gradient(900px 500px at 110% -10%, var(--glow-1), transparent 60%),
radial-gradient(800px 500px at -20% 110%, var(--glow-2), transparent 60%), var(--tex-deepslate);
background-size: auto, auto, 160px 160px;
}
[data-skin="block-diamant"] body::after {
inset: 0; background: var(--tex-sparkles) 40px 70px / 320px 320px;
animation: block-twinkle 3.2s ease-in-out infinite;
}
@keyframes block-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.85; } }
[data-skin="block-diamant"] :is(.card, .stat, .today-card, dialog, .badges-grid li, .bonus-items li, .key) { background-size: 128px 128px; }
[data-skin="block-diamant"] :is(.btn-primary, .key-ok) { position: relative; overflow: hidden; text-shadow: none; }
[data-skin="block-diamant"] :is(.btn-primary, .key-ok)::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 30%, rgba(190, 120, 255, 0.55) 44%, rgba(255, 255, 255, 0.45) 50%, rgba(190, 120, 255, 0.55) 56%, transparent 70%) 0 0 / 300% 100%;
animation: block-glint 3.4s linear infinite;
}
@keyframes block-glint { from { background-position: 100% 0; } to { background-position: -50% 0; } }
[data-skin="block-diamant"] :is(.avatar, .game-tile[aria-checked="true"] .game-art) {
box-shadow: var(--bevel), 0 0 16px rgba(63, 224, 216, 0.55);
}
[data-skin="block-diamant"] .ring-fill { filter: drop-shadow(0 0 8px rgba(63, 224, 216, 0.7)); }
/* =====================================================================
Obby (Roblox-Stil): Noppen-Grundplatte, klobige Steine, die beim Drücken einsinken
===================================================================== */
:root[data-skin="obby"] {
--bg: #232527; --bg-2: #2b2d30; --surface: #393b3d; --surface-2: #444649; --surface-3: #515458;
--line: #1a1b1d; --line-strong: #63676c;
--text: #ffffff; --text-2: #d6d9dd; --text-3: #aab0b6;
--brand: #009e5b; --brand-ink: #ffffff;
--glow-1: rgba(0, 162, 255, 0.10); --glow-2: rgba(0, 158, 91, 0.10);
--header-bg: rgba(35, 37, 39, 0.92); --backdrop: rgba(10, 11, 12, 0.75);
--focus-color: #ffd60a;
--radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
--shadow: 0 5px 0 #111214;
}
[data-skin="obby"] body {
background-image: radial-gradient(1000px 500px at 110% -10%, var(--glow-1), transparent 60%), var(--tex-studs);
background-size: auto, 32px 32px;
}
[data-skin="obby"] :is(h1, h2, .headline, .profile-card .name, .active-title) { font-weight: 900; letter-spacing: -0.01em; }
[data-skin="obby"] .btn {
border: 0; font-weight: 800;
box-shadow: 0 5px 0 color-mix(in srgb, var(--btn-bg) 55%, #000);
}
[data-skin="obby"] .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--btn-bg) 55%, #000); }
[data-skin="obby"] .btn-outline { --btn-bg: var(--surface-2); }
[data-skin="obby"] .key-action { background: var(--surface-2); }
[data-skin="obby"] .btn-ghost, [data-skin="obby"] .btn-ghost:active { box-shadow: none; transform: none; }
[data-skin="obby"] .btn-primary { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
[data-skin="obby"] .key { border: 0; box-shadow: 0 5px 0 #17181a; }
[data-skin="obby"] .key:active { transform: translateY(4px); box-shadow: 0 1px 0 #17181a; }
[data-skin="obby"] .key-ok { box-shadow: 0 5px 0 #00592f; }
[data-skin="obby"] :is(.game-tile, .profile-card) {
border: 0;
background-image: var(--tex-studs), linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
background-size: 24px 24px, auto;
box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 35%, #000);
}
[data-skin="obby"] .game-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 35%, #000); }
[data-skin="obby"] .game-tile[aria-checked="true"] {
transform: translateY(-3px);
box-shadow: 0 0 0 3px #fff, 0 9px 0 color-mix(in srgb, var(--accent) 35%, #000);
}
[data-skin="obby"] :is(.card, .stat, .today-card, .quota, .streak-card, .timer-box) { border-width: 0; box-shadow: var(--shadow); }
[data-skin="obby"] :is(.avatar, .game-art) { clip-path: none; border-radius: 14px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25); }
[data-skin="obby"] .game-tile .game-art { border-radius: 9px; }
[data-skin="obby"] .ring circle { stroke-width: 12; }
[data-skin="obby"] .quota-bar { height: 14px; }
/* =====================================================================
Brawl-Arena (Brawl-Stars-Stil): Comic-Konturen, gelbe Knöpfe, Strahlen-Hintergrund
===================================================================== */
:root[data-skin="brawl"] {
--bg: #1b2378; --bg-2: #202a8c; --surface: #2b3aa8; --surface-2: #3446bf; --surface-3: #4053d0;
--line: #0a0f3d; --line-strong: #0a0f3d;
--text: #ffffff; --text-2: #e3e7ff; --text-3: #bfc7ff;
--brand: #ffd21f; --brand-ink: #1a1400;
--glow-1: rgba(190, 70, 255, 0.35); --glow-2: rgba(0, 200, 255, 0.18);
--header-bg: rgba(27, 35, 120, 0.94); --backdrop: rgba(6, 8, 40, 0.78);
--focus-color: #ff3fa4;
--radius-sm: 12px; --radius: 16px; --radius-lg: 20px;
--shadow: 0 5px 0 #0a0f3d;
--outline: 0 3px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000;
}
[data-skin="brawl"] body {
background-image:
radial-gradient(900px 600px at 50% -10%, var(--glow-1), transparent 65%),
repeating-conic-gradient(from 0deg at 50% -5%, rgba(255, 255, 255, 0.06) 0deg 7deg, transparent 7deg 14deg),
radial-gradient(800px 500px at -20% 110%, var(--glow-2), transparent 60%);
background-size: auto;
}
[data-skin="brawl"] :is(h1, h2, .headline, .profile-card .name, .active-title, .big-timer, .quota-value) {
font-weight: 900; letter-spacing: 0.01em; text-shadow: var(--outline);
}
[data-skin="brawl"] :is(h1, h2, .headline, .active-title) { text-transform: uppercase; }
[data-skin="brawl"] .quota-value, [data-skin="brawl"] .active-title .game { color: var(--brand); }
[data-skin="brawl"] .btn {
border: 3px solid #000; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
box-shadow: 0 4px 0 #000;
}
[data-skin="brawl"] .btn:not(.btn-primary, .btn-danger) { text-shadow: 0 2px 0 #000; }
[data-skin="brawl"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
[data-skin="brawl"] .btn-ghost { border-color: transparent; box-shadow: none; }
[data-skin="brawl"] .btn-ghost:active { transform: none; box-shadow: none; }
[data-skin="brawl"] .key { border: 3px solid #000; box-shadow: 0 4px 0 #000; font-weight: 900; }
[data-skin="brawl"] .key:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
[data-skin="brawl"] :is(.card, .stat, .today-card, .quota, .streak-card, .timer-box, .profile-card, .game-tile, dialog) {
border: 3px solid #0a0f3d; box-shadow: var(--shadow);
}
[data-skin="brawl"] .game-tile:nth-child(odd) { rotate: -1.5deg; }
[data-skin="brawl"] .game-tile:nth-child(even) { rotate: 1.5deg; }
[data-skin="brawl"] .game-tile[aria-checked="true"] { rotate: 0deg; scale: 1.06; border-color: #000; box-shadow: 0 0 0 3px var(--brand), var(--shadow); }
[data-skin="brawl"] :is(.avatar, .game-art) { filter: drop-shadow(0 3px 0 #000); }
[data-skin="brawl"] .ring-track { stroke: #0a0f3d; }
[data-skin="brawl"] .ring circle { stroke-width: 12; }
[data-skin="brawl"] .quota-bar { height: 14px; border: 2px solid #000; }
/* =====================================================================
Stolper-Party (Stumble-Guys-Stil, hell): Himmel, Wolken, Konfetti, runde Hüpf-Knöpfe
===================================================================== */
:root[data-skin="party"] {
color-scheme: light;
--bg: #5ec2ff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #eef7ff; --surface-3: #d6ecff;
--line: #bfe0ff; --line-strong: #8ccaff;
--text: #13224d; --text-2: #2f4275; --text-3: #3d4d7e;
--brand: #ffcc1a; --brand-ink: #3b2600;
--danger: #e0244f; --danger-ink: #ffffff; --warn: #b45309; --warn-ink: #ffffff; --ok: #12a150;
--glow-1: transparent; --glow-2: transparent; --grid-line: transparent;
--sheen: rgba(255, 255, 255, 0.6); --hover: rgba(19, 34, 77, 0.07);
--header-bg: rgba(94, 194, 255, 0.92); --backdrop: rgba(19, 34, 77, 0.45);
--focus-color: #ff3d8b;
--warn-text: #7c3a00; --error-text: #9b1030; --ok-text: #0f5a2a; --offline-bg: #fde8b0;
--radius-sm: 18px; --radius: 24px; --radius-lg: 32px;
--shadow: 0 6px 0 rgba(19, 34, 77, 0.16);
}
[data-skin="party"] input[type="datetime-local"].input,
[data-skin="party"] input[type="date"].input { color-scheme: light; }
[data-skin="party"] body {
background-image:
radial-gradient(70px 34px at 18% 14%, #fff 98%, transparent),
radial-gradient(52px 30px at 26% 11%, #fff 98%, transparent),
radial-gradient(90px 38px at 82% 30%, rgba(255, 255, 255, 0.9) 98%, transparent),
radial-gradient(60px 30px at 74% 28%, rgba(255, 255, 255, 0.9) 98%, transparent),
var(--tex-confetti),
linear-gradient(180deg, #47b3ff, #8fd6ff 55%, #c9efff);
background-size: auto, auto, auto, auto, 280px 280px, auto;
}
/* Hüpfburg-Boden */
[data-skin="party"] body::before {
left: 0; right: 0; bottom: 0; height: 90px;
background: radial-gradient(60px 40px at 50% 100%, #2ed47a 98%, transparent) 0 100% / 90px 90px repeat-x,
linear-gradient(transparent 55%, #2ed47a 55%);
opacity: 0.55;
}
[data-skin="party"] :is(h1, h2, .headline, .profile-card .name, .active-title) { font-weight: 900; letter-spacing: -0.01em; }
[data-skin="party"] .headline, [data-skin="party"] .active-title { text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8); }
[data-skin="party"] .active-title .game { color: color-mix(in srgb, var(--accent) 50%, #13224d); }
[data-skin="party"] .live-pill { background: #fff; }
[data-skin="party"] .game-tile[aria-checked="true"]::before { color: #fff; }
[data-skin="party"] .btn-outline { --btn-bg: #fff; }
[data-skin="party"] .key-action { background: #fff; }
[data-skin="party"] .headline-sub, [data-skin="party"] .honest-note { color: var(--text); }
[data-skin="party"] .btn {
border: 0; border-radius: 999px; font-weight: 800;
box-shadow: 0 5px 0 color-mix(in srgb, var(--btn-bg) 72%, #13224d);
}
[data-skin="party"] .btn:active { transform: translateY(4px) scale(1.03, 0.94); box-shadow: 0 1px 0 color-mix(in srgb, var(--btn-bg) 72%, #13224d); }
[data-skin="party"] .btn-ghost { box-shadow: none; }
[data-skin="party"] .btn-ghost:active { box-shadow: none; transform: scale(0.97); }
[data-skin="party"] .key { border: 0; border-radius: 50%; box-shadow: 0 5px 0 #8ccaff; }
[data-skin="party"] .key:active { transform: translateY(4px); box-shadow: 0 1px 0 #8ccaff; }
[data-skin="party"] :is(.card, .stat, .today-card, .quota, .streak-card, .timer-box, dialog) { border: 3px solid #fff; box-shadow: var(--shadow); }
[data-skin="party"] :is(.game-tile, .profile-card) { border: 3px solid #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 45%, #13224d); }
[data-skin="party"] .game-tile[aria-checked="true"] {
border-color: var(--accent);
box-shadow: 0 0 0 4px #fff, 0 8px 0 color-mix(in srgb, var(--accent) 45%, #13224d);
animation: party-boing 0.45s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes party-boing { 0% { transform: scale(0.9); } 60% { transform: scale(1.08, 0.94); } 100% { transform: none; } }
[data-skin="party"] :is(.avatar, .game-art) { clip-path: circle(50%); }
[data-skin="party"] .ring circle { stroke-width: 13; }
[data-skin="party"] .ring-track { stroke: #d6ecff; }
[data-skin="party"] .big-timer { text-shadow: none; }
[data-skin="party"] .quota-bar { height: 14px; }
/* =====================================================================
Würfel-Sprung (Geometry-Dash-Stil): Neon-Würfel, Takt-Puls, Boden-Linie
===================================================================== */
:root[data-skin="wuerfel"] {
--bg: #060a1c; --bg-2: #0a1030; --surface: #0d1538; --surface-2: #122050; --surface-3: #1a2c6a;
--line: #1f3a8a; --line-strong: #2f5bd8;
--text: #f4f8ff; --text-2: #bccbf5; --text-3: #91a6dc;
--brand: #b6ff1f; --brand-ink: #0b1400;
--glow-1: rgba(47, 91, 216, 0.40); --glow-2: rgba(255, 47, 214, 0.14);
--header-bg: rgba(6, 10, 28, 0.92); --backdrop: rgba(2, 4, 14, 0.8);
--focus-color: #ff2fd6;
--radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
--shadow: 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, 0.5);
--outline: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
[data-skin="wuerfel"] body {
background-image: radial-gradient(1100px 650px at 50% -20%, var(--glow-1), transparent 65%),
radial-gradient(700px 400px at 110% 110%, var(--glow-2), transparent 60%), var(--tex-squares);
background-size: auto, auto, 96px 96px;
}
[data-skin="wuerfel"] body::before {
left: 0; right: 0; bottom: 0; height: 56px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent) top / 100% 2px no-repeat,
linear-gradient(rgba(47, 91, 216, 0.35), rgba(6, 10, 28, 0.9));
}
[data-skin="wuerfel"] body::after {
left: 50%; bottom: 56px; width: 100%; height: 40px; translate: -50% 0;
background: radial-gradient(50% 100% at 50% 100%, rgba(120, 170, 255, 0.35), transparent);
}
[data-skin="wuerfel"] :is(h1, h2, .headline, .profile-card .name, .active-title, .big-timer) {
font-weight: 900; letter-spacing: 0.02em; text-shadow: var(--outline);
}
[data-skin="wuerfel"] .btn { border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--btn-line); font-weight: 800; }
[data-skin="wuerfel"] .btn-ghost { box-shadow: none; border-color: transparent; }
[data-skin="wuerfel"] .btn-primary { animation: wuerfel-beat 1.2s ease-out infinite; }
@keyframes wuerfel-beat {
0%, 100% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 10px rgba(182, 255, 31, 0.35); }
12% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 26px rgba(182, 255, 31, 0.75); }
}
[data-skin="wuerfel"] .btn-primary[disabled] { animation: none; }
[data-skin="wuerfel"] .key { border-color: #2f5bd8; box-shadow: inset 0 0 0 2px #000; }
[data-skin="wuerfel"] :is(.card, .stat, .today-card, .quota, .streak-card, .timer-box, dialog) {
border: 2px solid var(--line-strong); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px rgba(47, 91, 216, 0.25);
}
[data-skin="wuerfel"] :is(.avatar, .game-art) { clip-path: none; outline: 2px solid #000; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.28); }
[data-skin="wuerfel"] .game-tile { border-width: 2px; }
[data-skin="wuerfel"] .game-tile[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
[data-skin="wuerfel"] .game-tile[aria-checked="true"] .game-art { animation: wuerfel-jump 0.5s ease-out; }
@keyframes wuerfel-jump { 0% { transform: none; } 50% { transform: translateY(-12px) rotate(45deg); } 100% { transform: rotate(90deg); } }
[data-skin="wuerfel"] .quota-bar { height: 14px; border-radius: 3px; border: 2px solid #fff; background: #000; }
[data-skin="wuerfel"] .quota-bar span { border-radius: 0; }
[data-skin="wuerfel"] .ring-track { stroke: #000; }
[data-skin="wuerfel"] .ring-fill { stroke-linecap: butt; }
/* =====================================================================
Turbo-Arena (Rocket-League-Stil): Spielfeld-Linien, Blau gegen Orange, schräge Knöpfe, Boost-Balken
===================================================================== */
:root[data-skin="turbo"] {
--bg: #0a1330; --bg-2: #0e1a40; --surface: #111f4d; --surface-2: #16285e; --surface-3: #1e3575;
--line: #24408a; --line-strong: #3058b8;
--text: #f2f6ff; --text-2: #bccbef; --text-3: #94a8da;
--brand: #ff8a1f; --brand-ink: #2a1100;
--glow-1: rgba(255, 138, 31, 0.24); --glow-2: rgba(30, 144, 255, 0.28);
--header-bg: rgba(10, 19, 48, 0.92); --backdrop: rgba(3, 7, 20, 0.8);
--focus-color: #3ab0ff;
--radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
--field: rgba(255, 255, 255, 0.07);
}
[data-skin="turbo"] body {
background-image:
radial-gradient(900px 600px at 115% -10%, var(--glow-1), transparent 60%),
radial-gradient(900px 600px at -15% 110%, var(--glow-2), transparent 60%),
radial-gradient(circle at 50% 50%, transparent 0 116px, var(--field) 117px 120px, transparent 121px),
linear-gradient(transparent calc(50% - 1.5px), var(--field) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 60px, transparent 60px 120px);
background-size: auto;
}
[data-skin="turbo"] :is(h1, h2, .headline, .profile-card .name, .active-title, .big-timer, .quota-value) {
font-style: italic; font-weight: 900; letter-spacing: 0.01em;
}
[data-skin="turbo"] :is(h1, .headline, .active-title) { text-transform: uppercase; }
/* Schräge Knöpfe: der Hintergrund liegt verzerrt hinter dem geraden Text */
[data-skin="turbo"] .btn {
position: relative; isolation: isolate; background: transparent; border-color: transparent;
font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
}
[data-skin="turbo"] .btn::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--btn-bg); border: 2px solid var(--btn-line); border-radius: 5px; transform: skewX(-12deg);
}
[data-skin="turbo"] .btn-primary { --btn-bg: linear-gradient(90deg, #ff6a00, #ffb000); --btn-line: #ffb000; }
[data-skin="turbo"] .btn-ghost { --btn-line: transparent; }
[data-skin="turbo"] .btn-xl::before { border-radius: 8px; }
[data-skin="turbo"] :is(.stat, .quota, .today-card, .streak-card) { border-left: 5px solid #1e90ff; }
[data-skin="turbo"] .stat:nth-child(2) { border-left-color: var(--brand); }
[data-skin="turbo"] .game-tile:nth-child(even) { border-color: color-mix(in srgb, #ff8a1f 45%, var(--line)); }
[data-skin="turbo"] .game-tile:nth-child(odd) { border-color: color-mix(in srgb, #1e90ff 45%, var(--line)); }
[data-skin="turbo"] .game-tile[aria-checked="true"] { border-color: var(--accent); }
/* Boost-Balken mit laufenden Streifen */
[data-skin="turbo"] .quota-bar { height: 12px; border-radius: 3px; transform: skewX(-12deg); }
[data-skin="turbo"] .quota-bar span { position: relative; border-radius: 0; }
[data-skin="turbo"] .quota-bar span::after {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 12px) 0 0 / 34px 34px;
animation: turbo-boost 0.8s linear infinite;
}
@keyframes turbo-boost { to { background-position: 34px 0; } }
/* Tacho-Skala um den Ring */
[data-skin="turbo"] .ring-wrap::before {
content: ""; position: absolute; inset: -8px; border-radius: 50%;
border: 4px dotted rgba(255, 255, 255, 0.14);
}
[data-skin="turbo"] .ring-fill { stroke-linecap: butt; }
[data-skin="turbo"] .ring circle { stroke-width: 10; }
/* =====================================================================
Planeten-Crash (Solar-Smash-Stil): Sternenfeld, Planeten, HUD-Rahmen
===================================================================== */
:root[data-skin="planeten"] {
--bg: #04050b; --bg-2: #080a16; --surface: rgba(11, 15, 32, 0.88); --surface-2: #10162d; --surface-3: #18213f;
--line: #1e2a4d; --line-strong: #2d3f70;
--text: #eaf0ff; --text-2: #aebbe0; --text-3: #8292bd;
--brand: #ff5a36; --brand-ink: #160300;
--glow-1: rgba(120, 80, 255, 0.16); --glow-2: rgba(0, 170, 255, 0.12);
--header-bg: rgba(4, 5, 11, 0.9); --backdrop: rgba(0, 0, 4, 0.8);
--focus-color: #ffd23f;
--radius-sm: 2px; --radius: 4px; --radius-lg: 6px;
--hud: color-mix(in srgb, var(--brand) 75%, transparent);
}
[data-skin="planeten"] body {
background-image:
radial-gradient(700px 420px at 15% 20%, var(--glow-1), transparent 65%),
radial-gradient(600px 400px at 90% 60%, var(--glow-2), transparent 65%),
var(--tex-stars-1), var(--tex-stars-2);
background-size: auto, auto, 180px 180px, 290px 290px;
}
/* großer Planet unten rechts */
[data-skin="planeten"] body::before {
width: 78vmin; aspect-ratio: 1; right: -26vmin; bottom: -26vmin; border-radius: 50%;
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.25), transparent 30%),
radial-gradient(14% 10% at 42% 58%, rgba(60, 160, 90, 0.75), transparent 70%),
radial-gradient(18% 12% at 62% 36%, rgba(70, 170, 100, 0.7), transparent 70%),
radial-gradient(circle at 38% 34%, #5fb0ff, #2462c8 40%, #0d2a66 66%, #030816 80%);
box-shadow: 0 0 60px rgba(90, 170, 255, 0.35);
opacity: 0.75;
}
/* kleiner Mond mit glühendem Einschlag oben links */
[data-skin="planeten"] body::after {
width: 13vmin; aspect-ratio: 1; right: 5vmin; top: calc(6px + var(--safe-top)); border-radius: 50%;
background:
radial-gradient(22% 22% at 62% 40%, #ffd23f, #ff5a36 45%, transparent 75%),
radial-gradient(circle at 35% 30%, #a39a92, #5e5650 55%, #1b1816 80%);
box-shadow: 0 0 24px rgba(255, 90, 54, 0.45);
opacity: 0.8;
}
[data-skin="planeten"] :is(.card, .stat, .today-card, .timer-box, dialog, .quota, .streak-card) {
border: 1px solid var(--line);
background-image:
linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud));
background-repeat: no-repeat;
background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
}
[data-skin="planeten"] :is(.stat .label, .quota .label, .today-title, .skin-name, .badge) {
font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
}
[data-skin="planeten"] :is(h1, .headline, .active-title) { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
[data-skin="planeten"] .btn { text-transform: uppercase; letter-spacing: 0.08em; }
[data-skin="planeten"] .btn-primary { box-shadow: 0 0 0 1px var(--brand), 0 0 18px rgba(255, 90, 54, 0.55); }
[data-skin="planeten"] .big-timer { text-shadow: 0 0 18px rgba(255, 90, 54, 0.5); }
[data-skin="planeten"] :is(.avatar, .game-art) { clip-path: circle(50%); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
[data-skin="planeten"] .ring-track { stroke-dasharray: 2 4; stroke: var(--line-strong); }
[data-skin="planeten"] .ring circle { stroke-width: 6; }
/* =====================================================================
Seidenfaden (Silksong-Stil): Tusche-Schwarz, rote Fäden, Doppelrahmen, Serifenschrift
===================================================================== */
:root[data-skin="seide"] {
--bg: #0d0a0f; --bg-2: #141016; --surface: #18131b; --surface-2: #211a25; --surface-3: #2d2331;
--line: #3a2c3c; --line-strong: #5a4354;
--text: #f3ebe1; --text-2: #d2c4b3; --text-3: #a59585;
--brand: #c8243b; --brand-ink: #fff4f0;
--glow-1: rgba(200, 36, 59, 0.16); --glow-2: rgba(242, 210, 122, 0.05);
--grid-line: transparent;
--header-bg: rgba(13, 10, 15, 0.92); --backdrop: rgba(4, 2, 5, 0.82);
--focus-color: #f2d27a;
--radius-sm: 3px; --radius: 4px; --radius-lg: 6px;
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
--frame: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--line-strong) 70%, transparent);
}
[data-skin="seide"] body {
background-image:
radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.7)),
radial-gradient(900px 500px at 110% -10%, var(--glow-1), transparent 60%),
var(--tex-threads);
background-size: auto, auto, 320px 320px;
}
[data-skin="seide"] :is(h1, h2, .headline, .active-title) { font-variant: small-caps; letter-spacing: 0.05em; font-weight: 700; }
[data-skin="seide"] .headline::after {
content: ""; display: block; width: min(180px, 60%); height: 2px; margin-top: 10px;
background: linear-gradient(90deg, var(--brand), transparent);
}
[data-skin="seide"] :is(.card, .stat, .today-card, .quota, .streak-card, .timer-box, .profile-card, .game-tile, dialog) {
border-width: 1px; box-shadow: var(--frame), var(--shadow);
}
[data-skin="seide"] .game-tile[aria-checked="true"] { box-shadow: var(--frame), 0 0 0 2px var(--brand), 0 0 20px rgba(200, 36, 59, 0.4); }
[data-skin="seide"] .btn { border-width: 1px; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-sm); font-weight: 700; }
[data-skin="seide"] .btn-xl { font-size: 1.1rem; }
[data-skin="seide"] .btn-primary { box-shadow: inset 0 0 0 3px var(--brand), inset 0 0 0 4px rgba(255, 244, 240, 0.55); }
[data-skin="seide"] :is(.avatar, .game-art) { clip-path: polygon(50% 0, 100% 22%, 100% 72%, 50% 100%, 0 72%, 0 22%); }
[data-skin="seide"] .ring circle { stroke-width: 5; }
[data-skin="seide"] .ring-fill { stroke-linecap: butt; }
/* ---------- Vorschau-Karten der Skin-Auswahl ---------- */
.skin-preview:is(.block-holz, .block-stein, .block-eisen, .block-diamant) { border-radius: 0; }
.skin-preview.block-holz { background: var(--tex-planks) 0 0 / 32px 32px, #5a3d1e; --p-surface: #7d5530; --p-brand: #3f8a26; }
.skin-preview.block-holz::before, .skin-preview.block-stein::before { box-shadow: 0 -40px 0 -4px #5fae3a; }
.skin-preview.block-stein { background: var(--tex-cobble) 0 0 / 32px 32px, #4f5154; --p-surface: #686b6f; --p-brand: #f0b232; }
.skin-preview.block-eisen { background: var(--tex-iron) 0 0 / 32px 32px, #474d54; --p-surface: #606870; --p-brand: #e3e8ec; }
.skin-preview.block-diamant { background: var(--tex-deepslate) 0 0 / 64px 64px, #23262e; --p-surface: #363b47; --p-brand: #3fe0d8; }
.skin-preview:is(.block-holz, .block-stein, .block-eisen, .block-diamant)::before,
.skin-preview:is(.block-holz, .block-stein, .block-eisen, .block-diamant)::after { border-radius: 0; outline: 2px solid #000; }
.skin-preview.obby { background: var(--tex-studs) 0 0 / 16px 16px, #393b3d; --p-surface: #515458; --p-brand: #009e5b; }
.skin-preview.brawl {
background: repeating-conic-gradient(from 0deg at 50% -20%, rgba(255, 255, 255, 0.08) 0deg 8deg, transparent 8deg 16deg), linear-gradient(160deg, #3a2a9c, #1b2378);
--p-surface: #3446bf; --p-brand: #ffd21f;
}
.skin-preview.brawl::before, .skin-preview.brawl::after { border: 2px solid #000; }
.skin-preview.party { background: radial-gradient(30px 14px at 75% 22%, #fff 98%, transparent), linear-gradient(180deg, #47b3ff, #c9efff); --p-surface: #ffffff; --p-brand: #ffcc1a; }
.skin-preview.party::before, .skin-preview.party::after { border-radius: 999px; }
.skin-preview.wuerfel { background: var(--tex-squares) 0 0 / 48px 48px, linear-gradient(180deg, #1a2c6a, #060a1c); --p-surface: #122050; --p-brand: #b6ff1f; }
.skin-preview.wuerfel::after { box-shadow: 0 0 10px #b6ff1f; }
.skin-preview.turbo {
background: radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(255, 255, 255, 0.14) 23px 25px, transparent 26px),
linear-gradient(90deg, #1e3575, #0a1330 50%, #5a2a0a);
--p-surface: #16285e; --p-brand: #ff8a1f;
}
.skin-preview.turbo::before, .skin-preview.turbo::after { transform: skewX(-12deg); }
.skin-preview.planeten {
background: radial-gradient(circle at 92% 110%, #5fb0ff 0 20px, #2462c8 30px, transparent 34px), var(--tex-stars-1) 0 0 / 90px 90px, #04050b;
--p-surface: #18213f; --p-brand: #ff5a36;
}
.skin-preview.seide { background: var(--tex-threads) 0 0 / 160px 160px, radial-gradient(circle at 70% 30%, #3a1420, #0d0a0f 70%); --p-surface: #2d2331; --p-brand: #c8243b; }