/* MatchHub – Themes (generiert). Pro Instanz ein Theme, pro Spieler hell / dunkel / automatisch.
   data-theme="arena|neon|tactical|clean" und data-mode="auto|light|dark" am <html>-Element. */

@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/exo-2-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/exo-2-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/exo-2-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/rajdhani-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/rajdhani-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/rajdhani-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2')}

/* ── arena ── */
:root[data-theme="arena"]{--f-head:'Chakra Petch','Rajdhani',Impact,sans-serif;--f-body:'Barlow',system-ui,sans-serif;--f-label:var(--f-body);--tt-head:uppercase;--ls-head:1;--r:10px;--r-panel:14px;--grid-size:72px;--bg:#0a0b0d;--surf:#131418;--fg:#eceef2;--fg2:#a9aeb8;--mute:#7c828e;--fg-strong:#ffffff;--fg-soft:#c6cad2;--fg-rgb:255,255,255;--grid-op:.035;--foot-bg:#07080a;color-scheme:dark;--ac-text:var(--ac);--win:var(--win-base);--lose:var(--lose-base);--draw:#8b919c;--warn:#f59e0b;--info:#60a5fa;--shadow-lg:0 18px 40px rgba(0,0,0,.55);--shadow-sm:0 0 #0000}
:root[data-theme="arena"][data-mode="light"]{--bg:#eef0f3;--surf:#ffffff;--fg:#14161b;--fg2:#4a505c;--mute:#6b7280;--fg-strong:#0b0d12;--fg-soft:#2f3440;--fg-rgb:20,24,32;--grid-op:.05;--foot-bg:#e4e7ec;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}
@media (prefers-color-scheme:light){:root[data-theme="arena"][data-mode="auto"]{--bg:#eef0f3;--surf:#ffffff;--fg:#14161b;--fg2:#4a505c;--mute:#6b7280;--fg-strong:#0b0d12;--fg-soft:#2f3440;--fg-rgb:20,24,32;--grid-op:.05;--foot-bg:#e4e7ec;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}}
:root[data-theme="arena"] :is(.toolbar,.board-wrap,.text-editor){--bg:#0a0b0d;--surf:#131418;--fg:#eceef2;--fg2:#a9aeb8;--mute:#7c828e;--fg-strong:#ffffff;--fg-soft:#c6cad2;--fg-rgb:255,255,255;--grid-op:.035;--foot-bg:#07080a;--line:rgba(var(--fg-rgb),.08);--line2:rgba(var(--fg-rgb),.14);--surf2:color-mix(in srgb,var(--surf) 86%,rgb(var(--fg-rgb)) 14%);--inset:color-mix(in srgb,var(--bg) 70%,var(--surf) 30%);--ac-text:var(--ac);color-scheme:dark;color:var(--fg)}

/* ── neon ── */
:root[data-theme="neon"]{--f-head:'Exo 2','Inter',sans-serif;--f-body:'Inter',system-ui,sans-serif;--f-label:var(--f-body);--tt-head:uppercase;--ls-head:.7;--r:12px;--r-panel:18px;--grid-size:72px;--bg:#070818;--surf:#0f1130;--fg:#eef0ff;--fg2:#a9add9;--mute:#767bb0;--fg-strong:#ffffff;--fg-soft:#cdd0f2;--fg-rgb:200,205,255;--grid-op:1;--foot-bg:#05061290;color-scheme:dark;--ac-text:var(--ac);--win:var(--win-base);--lose:var(--lose-base);--draw:#8b919c;--warn:#f59e0b;--info:#60a5fa;--shadow-lg:0 18px 40px rgba(0,0,0,.55);--shadow-sm:0 0 #0000}
:root[data-theme="neon"][data-mode="light"]{--bg:#f3f2ff;--surf:#ffffff;--fg:#17163a;--fg2:#4b4a78;--mute:#6d6c99;--fg-strong:#0f0d33;--fg-soft:#2c2a5a;--fg-rgb:40,36,110;--grid-op:1;--foot-bg:#e9e7ff;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}
@media (prefers-color-scheme:light){:root[data-theme="neon"][data-mode="auto"]{--bg:#f3f2ff;--surf:#ffffff;--fg:#17163a;--fg2:#4b4a78;--mute:#6d6c99;--fg-strong:#0f0d33;--fg-soft:#2c2a5a;--fg-rgb:40,36,110;--grid-op:1;--foot-bg:#e9e7ff;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}}
:root[data-theme="neon"] :is(.toolbar,.board-wrap,.text-editor){--bg:#070818;--surf:#0f1130;--fg:#eef0ff;--fg2:#a9add9;--mute:#767bb0;--fg-strong:#ffffff;--fg-soft:#cdd0f2;--fg-rgb:200,205,255;--grid-op:1;--foot-bg:#05061290;--line:rgba(var(--fg-rgb),.08);--line2:rgba(var(--fg-rgb),.14);--surf2:color-mix(in srgb,var(--surf) 86%,rgb(var(--fg-rgb)) 14%);--inset:color-mix(in srgb,var(--bg) 70%,var(--surf) 30%);--ac-text:var(--ac);color-scheme:dark;color:var(--fg)}

/* ── tactical ── */
:root[data-theme="tactical"]{--f-head:'Rajdhani','Chakra Petch',sans-serif;--f-body:'Inter',system-ui,sans-serif;--f-label:'JetBrains Mono',ui-monospace,monospace;--tt-head:uppercase;--ls-head:1;--r:4px;--r-panel:6px;--grid-size:48px;--bg:#0b0d10;--surf:#12161b;--fg:#e3e7ec;--fg2:#9ba4af;--mute:#6e7783;--fg-strong:#f6f8fa;--fg-soft:#c5ccd4;--fg-rgb:220,228,238;--grid-op:.03;--foot-bg:#090b0d;color-scheme:dark;--ac-text:var(--ac);--win:var(--win-base);--lose:var(--lose-base);--draw:#8b919c;--warn:#f59e0b;--info:#60a5fa;--shadow-lg:0 18px 40px rgba(0,0,0,.55);--shadow-sm:0 0 #0000}
:root[data-theme="tactical"][data-mode="light"]{--bg:#eceff2;--surf:#ffffff;--fg:#11161c;--fg2:#47505b;--mute:#66707b;--fg-strong:#0a0d11;--fg-soft:#2b323b;--fg-rgb:17,24,32;--grid-op:.045;--foot-bg:#e3e7eb;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}
@media (prefers-color-scheme:light){:root[data-theme="tactical"][data-mode="auto"]{--bg:#eceff2;--surf:#ffffff;--fg:#11161c;--fg2:#47505b;--mute:#66707b;--fg-strong:#0a0d11;--fg-soft:#2b323b;--fg-rgb:17,24,32;--grid-op:.045;--foot-bg:#e3e7eb;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}}
:root[data-theme="tactical"] :is(.toolbar,.board-wrap,.text-editor){--bg:#0b0d10;--surf:#12161b;--fg:#e3e7ec;--fg2:#9ba4af;--mute:#6e7783;--fg-strong:#f6f8fa;--fg-soft:#c5ccd4;--fg-rgb:220,228,238;--grid-op:.03;--foot-bg:#090b0d;--line:rgba(var(--fg-rgb),.08);--line2:rgba(var(--fg-rgb),.14);--surf2:color-mix(in srgb,var(--surf) 86%,rgb(var(--fg-rgb)) 14%);--inset:color-mix(in srgb,var(--bg) 70%,var(--surf) 30%);--ac-text:var(--ac);color-scheme:dark;color:var(--fg)}

/* ── clean ── */
:root[data-theme="clean"]{--f-head:'Inter',system-ui,sans-serif;--f-body:'Inter',system-ui,sans-serif;--f-label:var(--f-body);--tt-head:none;--ls-head:0;--r:12px;--r-panel:20px;--grid-size:72px;--bg:#0d0f13;--surf:#16191f;--fg:#eef0f4;--fg2:#a6adb9;--mute:#7b8390;--fg-strong:#ffffff;--fg-soft:#cfd4dc;--fg-rgb:255,255,255;--grid-op:0;--foot-bg:transparent;color-scheme:dark;--ac-text:var(--ac);--win:var(--win-base);--lose:var(--lose-base);--draw:#8b919c;--warn:#f59e0b;--info:#60a5fa;--shadow-lg:0 18px 40px rgba(0,0,0,.55);--shadow-sm:0 0 #0000}
:root[data-theme="clean"][data-mode="light"]{--bg:#f4f5f7;--surf:#ffffff;--fg:#111418;--fg2:#4b5563;--mute:#6b7280;--fg-strong:#05070a;--fg-soft:#272c35;--fg-rgb:16,24,40;--grid-op:0;--foot-bg:transparent;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}
@media (prefers-color-scheme:light){:root[data-theme="clean"][data-mode="auto"]{--bg:#f4f5f7;--surf:#ffffff;--fg:#111418;--fg2:#4b5563;--mute:#6b7280;--fg-strong:#05070a;--fg-soft:#272c35;--fg-rgb:16,24,40;--grid-op:0;--foot-bg:transparent;color-scheme:light;--ac-text:color-mix(in srgb,var(--ac) 78%,#000);--win:color-mix(in srgb,var(--win-base) 72%,#000);--lose:color-mix(in srgb,var(--lose-base) 82%,#000);--draw:#6b7280;--warn:#b45309;--info:#2563eb;--shadow-lg:0 18px 40px rgba(16,24,40,.14);--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05)}}
:root[data-theme="clean"] :is(.toolbar,.board-wrap,.text-editor){--bg:#0d0f13;--surf:#16191f;--fg:#eef0f4;--fg2:#a6adb9;--mute:#7b8390;--fg-strong:#ffffff;--fg-soft:#cfd4dc;--fg-rgb:255,255,255;--grid-op:0;--foot-bg:transparent;--line:rgba(var(--fg-rgb),.08);--line2:rgba(var(--fg-rgb),.14);--surf2:color-mix(in srgb,var(--surf) 86%,rgb(var(--fg-rgb)) 14%);--inset:color-mix(in srgb,var(--bg) 70%,var(--surf) 30%);--ac-text:var(--ac);color-scheme:dark;color:var(--fg)}



/* ── Darstellung umschalten (Kopfleiste) ── */
.mode-btn .bi{display:none}
:root[data-mode="auto"] .mode-btn .i-auto,:root[data-mode="light"] .mode-btn .i-light,:root[data-mode="dark"] .mode-btn .i-dark{display:inline}

/* ── Theme-Auswahl im Admin ── */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.8rem}
.theme-pick{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:.8rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--inset);cursor:pointer}
.theme-pick input{position:absolute;opacity:0;pointer-events:none}
.theme-pick:has(input:checked){border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac);background:rgba(var(--ac-rgb),.07)}
.theme-pick:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.theme-swatch{display:grid;grid-template-columns:1fr 1fr;height:4.4rem;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:.3rem}
.theme-swatch>span{display:grid;grid-template-rows:1fr 1.4fr;gap:5px;padding:7px;background:var(--a)}
.theme-swatch i{display:block;border-radius:4px;background:var(--b)}
.theme-swatch i:nth-child(2){display:none}
.theme-swatch i:last-child{background:linear-gradient(90deg,var(--ac) 0 28%,var(--c) 28%)}
.theme-name{font-size:1.05rem;font-weight:700;color:var(--fg-strong)}
.theme-pick small{color:var(--mute);font-size:.82rem;line-height:1.4}
.theme-font-arena{font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.theme-font-neon{font-family:'Exo 2',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.theme-font-tactical{font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:.08em}
.theme-font-clean{font-family:'Inter',sans-serif}
.mode-pick{display:flex;flex-wrap:wrap;gap:.5rem}
.mode-pick label{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:1px solid var(--line2);border-radius:var(--r);cursor:pointer;font-weight:600}
.mode-pick label:has(input:checked){border-color:var(--ac);background:rgba(var(--ac-rgb),.1)}
.mode-pick input{accent-color:var(--ac)}

/* ── Startseite: Teams ── */
.showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.7rem}
.showcase-team{display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border-radius:12px;background:var(--surf);border:1px solid var(--line);min-width:0;color:var(--fg)}
.showcase-team.is-link:hover{border-color:var(--team);color:var(--fg);transform:translateY(-2px)}
.showcase-team{transition:border-color .15s,transform .15s}
.showcase-logo{width:2.6rem;height:2.6rem;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:color-mix(in srgb,var(--team) 22%,transparent);border:1px solid color-mix(in srgb,var(--team) 50%,transparent);font-family:var(--f-head);font-weight:700;font-size:1.1rem}
.showcase-logo img{width:100%;height:100%;object-fit:contain}
.showcase-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-team>.bi{color:var(--mute)}
.showcase-team.is-link:hover>.bi{color:var(--team)}
.showcase-more{border-style:dashed;color:var(--fg2)}.showcase-more .showcase-logo{--team:var(--mute)}