/* Wissensduell – Design „Showbühne“ (Vorschau, nur für Admins über den Admin-Bereich).
   Liegt als eigene Schicht über dem bisherigen Design: gleiche Seite, gleiche Funktionen, andere Optik.
   Idee: Quizshow im Fernsehen. Bühne mit zwei Scheinwerfern (das Duell), Antworten als Rauten wie am Ratepult,
   Punkte auf dunklen Anzeigetafeln, Lämpchen statt Kästchen, schmale Tafelschrift für alles, was „angesagt“ wird.
   Farbthemen und Akzentfarben aus dem Profil sowie der Dunkelmodus funktionieren weiter. */
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(assets/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(assets/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2")}

@font-face{font-family:"Big Shoulders Text";font-weight:100 600;font-display:swap;src:url(assets/fonts/big-shoulders-text-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Text";font-weight:700 900;font-display:swap;src:url(assets/fonts/big-shoulders-text-latin-700-normal.woff2) format("woff2")}
html.show{
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Big Shoulders Text","Big Shoulders Display","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --stage-deep:color-mix(in srgb,var(--board) 55%,#000);      /* Kanten, Tafeln */
  --plate:color-mix(in srgb,var(--board) 30%,#000);           /* Anzeigetafel */
  --beam-b:#7fd4ff;                                           /* zweiter Scheinwerfer (Gegenspieler) */
  --loz:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);
}

/* ---------- Bühne: zwei Scheinwerfer von oben, heller Bühnenboden unten ---------- */
html.show body{background-color:var(--board);background-image:
  var(--beam1),var(--beam2),
  radial-gradient(70% 38% at 50% 108%,var(--floor-c),transparent 72%),
  linear-gradient(var(--stage-deep),var(--board) 38%,var(--board))}

/* ---------- Schrift: alles Angesagte in schmaler Tafelschrift ---------- */
html.show h1,html.show h2,html.show h3{font-weight:800;text-transform:uppercase;letter-spacing:.035em;line-height:1.05}
html.show h2{font-size:27px} html.show h3{font-size:21px}
html.show .side h2{font-size:21px}
html.show #hdr .logo{font-weight:900;font-size:44px;line-height:.92;letter-spacing:.06em;text-transform:uppercase}
/* Lämpchenkette unter dem Schriftzug */
html.show #hdr .logo .lt{padding:0 3px 9px;background:radial-gradient(circle at 50% 50%,var(--accent) 0 2.4px,transparent 3.1px) 50% 100%/14px 7px space no-repeat;background-repeat:space no-repeat}
html.show #hdr .logo .lt span{color:var(--accent)}
@media (max-width:620px){html.show #hdr .logo{font-size:34px}}

/* ---------- Karten: Pulte mit fester Kante statt weicher Kacheln ---------- */
html.show .card,html.show .modal,html.show .rl-card{border-radius:10px;box-shadow:0 6px 0 var(--stage-deep)}
html.show.dark .card,html.show.dark .modal,html.show.dark .rl-card{box-shadow:0 6px 0 rgba(0,0,0,.45)}
html.show .banner,html.show .tile,html.show .rnd,html.show .gitem,html.show .frow,html.show .prow,html.show .toast,html.show .tip,html.show .volpop,html.show .achpop{border-radius:8px}
html.show input,html.show select,html.show .dd-btn,html.show .dd-list,html.show .linkbox input{border-radius:8px}
html.show .dd-opt{border-radius:5px}

/* Titelbalken: Die Überschrift jeder Karte steht wie eine Bauchbinde im Fernsehen auf einem dunklen Balken */
html.show .card,html.show .modal{--cpx:16px;--cpt:16px}
html.show .modal{--cpx:18px;--cpt:18px}
html.show .homegrid .card{--cpx:14px;--cpt:14px}
@media (min-width:980px) and (max-height:800px){html.show .homegrid .card{--cpt:10px}}
html.show .card > :is(h2,h3):first-child,html.show .modal > h2:first-child,html.show .card > .row:first-child:has(> :is(h2,h3)){margin:calc(-1 * var(--cpt)) calc(-1 * var(--cpx)) 0;padding:9px var(--cpx) 7px;background:var(--plate);color:#fff;border-radius:10px 10px 0 0;box-shadow:inset 0 -3px 0 var(--accent)}
html.show .card > .row:first-child:has(> :is(h2,h3)) .sub{color:#c8cff5}
html.show.dark .card > :is(h2,h3):first-child,html.show.dark .modal > h2:first-child,html.show.dark .card > .row:first-child:has(> :is(h2,h3)){background:#0c0f18}
html.show .homegrid h2{font-size:23px}

/* ---------- Knöpfe: flache Rauten wie die Antworten (statt der dicken 3D-Tasten) ----------
   Hauptknopf = gefüllt in der Akzentfarbe, Nebenknopf = dunkel mit Leuchtrand, Gefahr = rot. Alle gleich hoch. */
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end){position:relative;isolation:isolate;background:none !important;box-shadow:none !important;border:0 !important;border-radius:0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:17px;line-height:23px;padding:13px 22px;
  --bz:13px;--b-line:#fff;--b-fill:var(--accent);transition:transform .12s ease,filter .12s ease}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end)::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--b-line);clip-path:polygon(var(--bz) 0,calc(100% - var(--bz)) 0,100% 50%,calc(100% - var(--bz)) 100%,var(--bz) 100%,0 50%)}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end)::after{content:"";position:absolute;inset:2px 3px;z-index:-1;background:var(--b-fill);clip-path:polygon(calc(var(--bz) - 1px) 0,calc(100% - var(--bz) + 1px) 0,100% 50%,calc(100% - var(--bz) + 1px) 100%,calc(var(--bz) - 1px) 100%,0 50%)}
html.show :is(.btn-small,.btn-end){font-size:15px;line-height:20px;padding:10px 17px;--bz:11px}
html.show .btn{color:#10131c;--b-line:color-mix(in srgb,var(--accent) 45%,#fff);--b-fill:linear-gradient(color-mix(in srgb,var(--accent) 82%,#fff),var(--accent) 55%,var(--accent-dark))}
html.show :is(.btn-ghost,.btn-plain){color:#fff !important;--b-line:color-mix(in srgb,var(--accent) 70%,var(--board));--b-fill:linear-gradient(color-mix(in srgb,var(--board-2) 80%,#fff),var(--stage-deep))}
html.show .btn-danger{color:#fff;--b-line:#ffc2c4;--b-fill:linear-gradient(#f0666b,#c2343a)}
html.show .btn-end{color:#ffd0d1;--b-line:#e5767a;--b-fill:linear-gradient(color-mix(in srgb,#7a2328 70%,var(--board)),var(--stage-deep))}
html.show .btn-end.btn-hide{color:#dfe4ff;--b-line:rgba(223,228,255,.55);--b-fill:var(--stage-deep)}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end):not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.14) drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 55%,transparent));--b-line:#fff}
html.show .btn-danger:not(:disabled):hover,html.show .btn-end:not(:disabled):hover{filter:brightness(1.14) drop-shadow(0 0 9px rgba(229,72,77,.6))}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end):not(:disabled):active{transform:translateY(1px);filter:brightness(.95)}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end):disabled{opacity:.45}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end):focus-visible{outline:0;--b-line:#fff;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #fff)}
html.show .btn.pulse{animation:showpulse 1.2s ease-in-out 4}
@keyframes showpulse{50%{filter:brightness(1.2) drop-shadow(0 0 14px var(--accent))}}
html.show .side .btn-small{font-size:14px;line-height:19px;padding:8px 14px;--bz:9px}
html.show .side .btn-ghost.btn-small{font-size:13px;line-height:17px}
html.show .tb{border-radius:8px}
html.show .iconbtn,html.show .copyic,html.show .sc-eye{border-radius:6px}
html.show .copyic{box-shadow:none}

/* ---------- Reiter und Auswahl ---------- */
html.show .tabs,html.show .seg,html.show .achtabs{border-radius:8px}
html.show .tab{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:15px;line-height:20px;border-radius:5px}
html.show .seg button{border-radius:5px;font-family:var(--display);font-size:18px}
html.show .chip{border-radius:8px}

/* ---------- Schildchen ---------- */
html.show .pill{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.07em;border-radius:4px;font-size:13px;line-height:17px}
html.show .side .gitem > .pill{font-size:11.5px;line-height:15px}
html.show .section-title{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:14px}
html.show .side .section-title{font-size:12.5px}

/* ---------- Anzeigetafeln: Punktestände leuchten auf dunklem Grund ---------- */
html.show .gitem .score,html.show .vs .big,html.show .bigscore{font-family:var(--display);font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent);background:var(--plate);border-radius:6px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.09),inset 0 -10px 14px -10px rgba(255,255,255,.12);letter-spacing:.04em;line-height:1}
html.show .gitem .score{padding:5px 9px 4px;font-size:22px}
html.show .side .gitem > .score{padding:4px 7px 3px;font-size:17px}
html.show .vs .big{padding:6px 16px 4px;font-size:44px;display:inline-block}
html.show .bigscore{display:inline-block;padding:8px 18px 6px;align-self:center}
html.show.dark .gitem .score,html.show.dark .bigscore{background:#0c0f18}
html.show .tile b{font-weight:900;font-size:30px;letter-spacing:.02em}
html.show .vs .name{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:21px}
html.show .gmeta b{font-family:var(--display);font-size:17px;letter-spacing:.05em}

/* ---------- Rundenübersicht: Lämpchen statt Kästchen ---------- */
html.show .dot{border-radius:50%}
html.show .dot.ok{box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 10px color-mix(in srgb,var(--ok) 75%,transparent)}
html.show .dot.bad{box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 10px color-mix(in srgb,var(--bad) 70%,transparent)}
html.show .dot.hid{background:var(--idle-2);box-shadow:inset 0 0 0 3px var(--idle)}
html.show #app.gameview.d2 .dot,html.show #app.gameview.d3 .dot{border-radius:50%}
html.show .rnd .cat{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px}
html.show .rnd .cat small{font-family:var(--body);text-transform:none;letter-spacing:0}
html.show .rnd.cur{background:color-mix(in srgb,var(--accent) 14%,transparent);outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent)}

/* ---------- Die Frage: Tafel mit Spitzen, an der Lichtleiste aufgehängt ---------- */
html.show .question{position:relative;isolation:isolate;background:none !important;color:#fff !important;border-radius:0;box-shadow:none !important;filter:drop-shadow(0 5px 0 var(--stage-deep));font-family:var(--body);font-weight:800;padding-inline:44px}
html.show .question::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--accent);clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 50%,calc(100% - 28px) 100%,28px 100%,0 50%)}
html.show .question::after{content:"";position:absolute;inset:3px 5px;z-index:-1;background:linear-gradient(color-mix(in srgb,var(--board-2) 82%,#fff),var(--plate));clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%)}

/* ---------- Antworten und Kategorien: Rauten wie am Ratepult ---------- */
html.show .ans,html.show .catbtn{position:relative;isolation:isolate;background:none !important;box-shadow:none !important;border-radius:0;outline:0 !important;color:#fff;padding-inline:30px;
  --lz-line:color-mix(in srgb,var(--accent) 62%,var(--board));--lz-fill:linear-gradient(color-mix(in srgb,var(--board-2) 88%,#fff),var(--stage-deep));
  filter:drop-shadow(0 4px 0 var(--stage-deep));transition:transform .12s ease,filter .12s ease}
html.show .ans::before,html.show .catbtn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--lz-line);clip-path:var(--loz);transition:background-color .12s ease}
html.show .ans::after,html.show .catbtn::after{content:"";position:absolute;inset:3px 4.5px;z-index:-1;background:var(--lz-fill);clip-path:polygon(18.5px 0,calc(100% - 18.5px) 0,100% 50%,calc(100% - 18.5px) 100%,18.5px 100%,0 50%)}
html.show .ans{font-weight:800}
html.show .catbtn{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:25px}
html.show .catbtn small{color:#c8cff5;text-transform:none;letter-spacing:0}
html.show button.ans:not(:disabled):hover,html.show .catbtn:hover{transform:translateY(-3px);filter:drop-shadow(0 7px 0 var(--stage-deep)) brightness(1.12);--lz-line:var(--accent)}
html.show button.ans:not(:disabled):active,html.show .catbtn:active{transform:translateY(2px);filter:drop-shadow(0 2px 0 var(--stage-deep))}
html.show button.ans:focus-visible,html.show .catbtn:focus-visible{--lz-line:#fff}
/* eingeloggt (wartet auf die Auflösung) – richtig – falsch */
html.show .ans.picked{--lz-line:#fff;--lz-fill:var(--accent);color:#16130a;opacity:1}
html.show .ans.ok{--lz-line:#b9f5d3;--lz-fill:linear-gradient(#3fd486,#1f9a5c);color:#fff}
html.show .ans.bad{--lz-line:#ffc2c4;--lz-fill:linear-gradient(#f0666b,#c2343a);color:#fff}
html.show .ans.hint-ok{--lz-line:var(--ok)}
html.show .ans.dim,html.show.dark .ans.dim{opacity:1;color:rgba(255,255,255,.42);--lz-line:color-mix(in srgb,var(--accent) 22%,var(--board));--lz-fill:linear-gradient(color-mix(in srgb,var(--board-2) 55%,var(--stage-deep)),var(--stage-deep))}
/* Lichtleiste hinter Frage und Antworten (nur in der Fragerunde, dort ist seitlich Platz) */
html.show #app.play .question,html.show #app.play .answers{position:relative}
html.show #app.play .answers .ans{overflow:visible}
html.show #app.play .answers::before,html.show #app.play .answers::after{content:"";position:absolute;left:-14px;right:-14px;height:2px;background:color-mix(in srgb,var(--accent) 50%,transparent);z-index:-1;pointer-events:none}
html.show #app.play .answers{isolation:isolate}
html.show #app.play .answers::before{top:calc(25% - 5px)} html.show #app.play .answers::after{top:calc(75% + 3px)}

/* ---------- Zeitleiste: Leuchtsegmente ---------- */
html.show .timer{height:10px;border-radius:3px;-webkit-mask:repeating-linear-gradient(90deg,#000 0 11px,transparent 11px 14px);mask:repeating-linear-gradient(90deg,#000 0 11px,transparent 11px 14px)}
html.show .timer i{box-shadow:0 0 12px var(--accent)}
html.show .qhead{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:16px;line-height:20px}

/* ---------- Kleinigkeiten ---------- */
html.show .loader i{border-radius:50%;box-shadow:0 0 10px var(--accent)}
html.show .darkbtn{border-radius:10px}
html.show .foot{opacity:.8}
/* Knopf zum Verlassen der Vorschau (unten links, nur im neuen Design) */
.showexit{grid-column:1;grid-row:1;justify-self:start;align-self:center;background:var(--plate,#0b1130);color:#fff;border:2px solid var(--accent);border-radius:8px;padding:7px 12px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:14px;line-height:18px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.showexit:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.35);background:var(--accent);color:#16130a}
@media (max-width:620px){.showexit{grid-column:1;grid-row:3;justify-self:center;margin-top:6px;font-size:12px;padding:4px 10px}}
@media (prefers-reduced-motion:reduce){html.show .ans,html.show .catbtn{transition:none}}


/* ====================== Studio: alles dunkel, in der Farbe des gewählten Themas ====================== */
html.show{--card:color-mix(in srgb,var(--board) 42%,#04060c);--ink:#eef2ff;--muted:#9fb0d8;--field:color-mix(in srgb,var(--board-2) 34%,#070a12);--edge:color-mix(in srgb,var(--board-2) 62%,#aab8e6 16%)}
html.show .darkbtn{display:none}
html.show .card,html.show .modal,html.show .rl-card{background:linear-gradient(color-mix(in srgb,var(--board-2) 30%,var(--card)),var(--card) 120px);box-shadow:0 0 0 1px var(--edge),0 14px 30px -12px rgba(0,0,0,.6)}
html.show .card > :is(h2,h3):first-child,html.show .modal > h2:first-child,html.show .card > .row:first-child:has(> :is(h2,h3)){background:var(--plate)}
html.show :is(.gitem,.frow,.prow,.dd-btn,.dd-list,.chip,.ic,.swc,.tmode,.rev){background:var(--field);border-color:var(--edge);color:var(--ink)}
html.show :is(input,select){background:var(--field);border-color:var(--edge);color:var(--ink)}
html.show .gitem:hover,html.show .dd-btn:hover{border-color:var(--accent)}
html.show .dd-opt.hi,html.show .dd-opt:hover{background:color-mix(in srgb,var(--accent) 18%,var(--field))}
html.show .dd-opt[aria-selected="true"]{background:var(--accent);color:#10131c} html.show .dd-opt[aria-selected="true"] small{color:#10131c}
html.show .seg{background:var(--field);box-shadow:inset 0 0 0 1px var(--edge)}
html.show .seg button:hover{background:color-mix(in srgb,var(--accent) 22%,var(--field))}
html.show .tiles.light .tile,html.show .idbox,html.show .mt{background:var(--field)}
html.show .gitem .score,html.show .bigscore{background:#05070c}
html.show tr.meRow td{background:color-mix(in srgb,var(--accent) 16%,transparent)}
html.show table.bil th,html.show table.bil td{border-bottom-color:var(--edge)}

/* ====================== Startseite: oben die Bühne für ein neues Duell, darunter der Spielplan ====================== */
html.show .hero-vs{display:flex;align-items:center;justify-content:center;gap:18px}
html.show .hv-side{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:96px}
html.show .hv-side b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:18px;line-height:1;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
html.show .hv-side .avatar{margin:0;box-shadow:0 0 0 3px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}
html.show .hv-vs{font-family:var(--display);font-weight:900;font-size:58px;line-height:1;letter-spacing:.02em;color:var(--accent);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 65%,transparent);transform:skewX(-8deg)}
html.show .hv-opps{display:flex;height:64px;align-items:center}
html.show .hv-opps i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:900;font-size:34px;color:var(--beam-b);background:var(--plate);box-shadow:0 0 0 3px var(--beam-b),0 0 22px color-mix(in srgb,var(--beam-b) 55%,transparent)}
html.show .hv-opps i + i{margin-left:-38px}
@media (min-width:980px){
  html.show #app.home{padding-inline:max(16px,calc((100% - 1240px)/2))}
  html.show .homegrid{flex:1 1 auto;min-height:0;width:100%;zoom:1 !important;align-items:stretch;justify-content:stretch;gap:14px;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"hero hero hero" "list daily friends" "list practice friends"}
  html.show .homegrid > .homecol{display:contents}
  html.show .homegrid > .side{height:auto;min-height:0}
  html.show .homegrid .gb{grid-area:list} html.show .homegrid .gc{grid-area:friends}
  html.show .homegrid .card.daily{grid-area:daily} html.show .homegrid .card.practice{grid-area:practice}
  html.show .homegrid .card.daily,html.show .homegrid .card.practice{flex:none;min-height:0;justify-content:flex-start}
  html.show .homegrid .card.daily > .btn,html.show .homegrid .card.practice > .btn{margin-top:auto}
  /* die Bühne */
  html.show .newduel{grid-area:hero;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title title" "vs opts" "vs go";column-gap:34px;row-gap:10px;align-items:center}
  html.show .newduel > h2{grid-area:title}
  html.show .newduel > .hero-vs{grid-area:vs;padding:2px 12px 0 8px}
  html.show .newduel > .field{grid-area:opts}
  html.show .newduel > .createrow{grid-area:go;margin:0}
  html.show .newduel > div:last-child{grid-column:1 / -1}
  html.show .newduel .optgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.show .newduel .optgrid .dd-btn{min-height:56px;padding:6px 10px}
  html.show .newduel .createrow{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:16px}
  html.show .newduel .createrow > .btn{height:auto;margin:0;font-size:21px;line-height:26px;padding:8px 24px;--bz:16px}
  html.show .newduel .createrow > .btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:none}
}
@media (max-width:979px){html.show .hero-vs{padding:4px 0 2px} html.show .hv-vs{font-size:44px}}
@media (min-width:980px){html.show .newduel .dd-val small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
html.show :is(.chip,.ic,.swc,.tmode):hover{border-color:var(--accent)}
html.show .star:hover{transform:scale(1.25);color:var(--accent)}
/* Ergebnis-Zeile im Duell: Banner und Knopf gleich hoch */
html.show .endrow2{height:48px}
html.show .endrow2 > .banner.turnslot,html.show .endrow2 > .btn.turnslot{height:44px;margin:0;padding-block:0;display:flex;align-items:center;justify-content:center}


/* ====================== Kopfleiste: eigene Zeichen auf kleinen Tafeln ====================== */
html.show .ico{display:grid;place-items:center;width:20px;height:20px} html.show .ico svg{width:20px;height:20px;display:block}
html.show .ico-vs{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.04em;line-height:1;color:var(--accent);transform:skewX(-8deg);display:inline-block}
html.show .topbar{gap:8px}
html.show .tb{background:var(--plate);color:#dfe7ff;border-radius:8px;padding:8px 9px;box-shadow:inset 0 0 0 1.5px var(--edge);transition:transform .12s ease,box-shadow .12s ease,color .12s ease}
html.show .tb:hover{background:var(--plate);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 12px color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-1px)}
html.show .tb.me{padding:3px 12px 3px 4px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px}
html.show .tb.dotted::after{top:-4px;right:-4px;border-color:var(--board)}
html.show .volpop{background:var(--card);box-shadow:0 0 0 1px var(--edge),0 14px 30px -8px rgba(0,0,0,.7)}
html.show .iconbtn{background:var(--plate);box-shadow:inset 0 0 0 1.5px var(--edge);color:#dfe7ff}
html.show .iconbtn:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
html.show .iconbtn.watch{background:var(--plate);color:#7fe3aa}

/* ====================== Einblendungen: Erfolge, Hinweise, Update-Meldung ====================== */
html.show .achpop{background:linear-gradient(90deg,var(--plate),var(--card));color:var(--ink);border:0;border-radius:6px;padding:12px 12px 14px 16px;box-shadow:0 0 0 1px var(--edge),0 16px 34px -10px rgba(0,0,0,.75);--tier:var(--accent)}
html.show .achpop::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tier);box-shadow:0 0 14px var(--tier)}
html.show .achpop.bronze{--tier:#e0a070} html.show .achpop.silver{--tier:#cfd9ea} html.show .achpop.gold{--tier:#ffd34d} html.show .achpop.frame{--tier:var(--accent)}
html.show .achpop .ap-ic{background:var(--plate) !important;border-radius:50%;box-shadow:0 0 0 2px var(--tier),0 0 16px color-mix(in srgb,var(--tier) 55%,transparent)}
html.show .ap-lbl{font-family:var(--display);font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--tier)}
html.show .ap-tx b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:20px;line-height:1.1}
html.show .ap-tier{color:var(--muted)}
html.show .ap-x:hover{background:rgba(255,255,255,.12)}
html.show .ap-time{background:var(--tier);height:2px}
html.show .toast{background:linear-gradient(90deg,var(--plate),var(--card));color:var(--ink);border-radius:6px;border-left:5px solid var(--accent);box-shadow:0 0 0 1px var(--edge),0 16px 34px -10px rgba(0,0,0,.75)}
html.show .tip{background:var(--plate);box-shadow:0 0 0 1px var(--edge),0 12px 26px rgba(0,0,0,.6)}
html.show .rl-card{border:0;border-radius:10px;box-shadow:0 0 0 2px var(--accent),0 0 40px color-mix(in srgb,var(--accent) 40%,transparent)}
html.show .rl-key kbd{background:var(--plate);border-color:var(--edge);color:#fff}
html.show .modal-back,html.show .reloadpop{background:rgba(2,4,10,.74)}

/* ====================== Startseite: Tagesquiz/Übungsquiz – Inhalt mittig statt Lücke ====================== */
@media (min-width:980px){
  html.show .homegrid .card.daily > :nth-child(2),html.show .homegrid .card.practice > :nth-child(2){margin-top:auto}
  html.show .homegrid .card.daily > :last-child,html.show .homegrid .card.practice > :last-child{margin-top:0;margin-bottom:auto}
  html.show .homegrid .card.daily > p,html.show .homegrid .card.practice > p{font-size:15.5px;text-align:center}
  html.show .homegrid .card.daily .minitop{justify-content:center}
}

/* ====================== Avatar-Rahmen: Studiolicht – je höher die Stufe, desto mehr Show ======================
   Bronze/Silber/Gold: Metallringe. Platin: Doppelring. Diamant: geschliffene Facetten, die sich drehen.
   Meister: Lauflicht aus Leuchtsegmenten. Legende: Goldring, Lauflicht und ein wandernder Scheinwerfer. */
html.show .avatar.fr{--fw:3px} html.show .avatar.fr.xs{--fw:2px} html.show .avatar.fr.sm{--fw:2.5px} html.show .avatar.fr.lg{--fw:4.5px} html.show .avatar.fr.xl{--fw:6px}
html.show .avatar.fr::before{content:none}
html.show .fr-bronze{--frame:conic-gradient(from 210deg,#8a4a1e,#e9b182 18%,#a8612c 36%,#6b3712 55%,#d99a66 78%,#8a4a1e)}
html.show .fr-silber{--frame:conic-gradient(from 210deg,#7b8798,#ffffff 16%,#aeb9ca 34%,#6c7686 55%,#f3f6fb 76%,#7b8798)}
html.show .fr-gold{--frame:conic-gradient(from 210deg,#a87900,#fff6c2 16%,#f2c230 34%,#96690a 55%,#ffe68a 76%,#a87900)}
html.show .avatar.fr-gold{box-shadow:0 0 10px rgba(242,194,48,.55)}
/* Platin: zweiter, feiner Ring außen */
html.show .fr-platin{--frame:conic-gradient(from 210deg,#3d8f88,#f1fffd 16%,#7fe0d4 34%,#2c746e 55%,#d9fffa 76%,#3d8f88)}
html.show .avatar.fr-platin{box-shadow:0 0 0 calc(var(--fw) + 2px) var(--board),0 0 0 calc(var(--fw) + 3.5px) #9aeee3,0 0 14px 4px rgba(98,214,200,.5)}
/* Ab Diamant bewegt sich etwas – weich und gleichmäßig, nichts tickt:
   Diamant: eisiger Ring, über den ein Lichtreflex gleitet. Meister: ein Lichtpunkt mit Schweif umkreist den Ring.
   Legende: Goldring mit wanderndem Glanz, zwei gegenläufige Lichtpunkte und ein ruhig atmendes Leuchten. */
html.show .fr-diamant{--frame:conic-gradient(from 200deg,#2f8fd8,#bfeaff 14%,#5cc8ff 30%,#1f6fb8 50%,#9fdcff 66%,#e8fbff 80%,#2f8fd8)}
html.show .avatar.fr-diamant{box-shadow:0 0 14px 2px rgba(92,200,255,.65)}
html.show .avatar.fr-diamant::after{animation:none}
html.show .avatar:is(.fr-diamant,.fr-meister,.fr-legende)::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none;animation:frspin var(--orbit-t,4s) linear infinite}
/* Diamant: der Reflex läuft direkt auf dem Ring */
html.show .avatar.fr-diamant::before{width:calc(100% + 2 * var(--fw));height:calc(100% + 2 * var(--fw));--orbit-t:5s;
  background:conic-gradient(transparent 0 62%,rgba(255,255,255,.55) 80%,#fff 90%,rgba(255,255,255,.55) 96%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--fw) - 1.5px),#000 calc(100% - var(--fw) - .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--fw) - 1.5px),#000 calc(100% - var(--fw) - .5px))}
/* Meister und Legende: Lichtpunkte auf einer eigenen, feinen Umlaufbahn außen */
html.show .avatar:is(.fr-meister,.fr-legende)::before{width:calc(100% + 5 * var(--fw));height:calc(100% + 5 * var(--fw));
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--fw) * .9 - 1px),#000 calc(100% - var(--fw) * .9));mask:radial-gradient(closest-side,transparent calc(100% - var(--fw) * .9 - 1px),#000 calc(100% - var(--fw) * .9));
  filter:drop-shadow(0 0 3px var(--bulb)) drop-shadow(0 0 6px var(--bulb))}
html.show .fr-meister{--frame:conic-gradient(from 210deg,#5216c9,#f0d2ff 16%,#a65cff 34%,#3d0f9a 55%,#d9b3ff 76%,#5216c9);--bulb:#c79bff}
html.show .avatar.fr-meister{box-shadow:0 0 16px 3px rgba(166,92,255,.6)}
html.show .avatar.fr-meister::before{--orbit-t:3.6s;background:conic-gradient(transparent 0 55%,color-mix(in srgb,var(--bulb) 35%,transparent) 75%,var(--bulb) 93%,#fff 99%,transparent 100%)}
html.show .fr-legende{--frame:conic-gradient(from 0deg,#a87900,#ffe68a 12%,#ffffff 20%,#f2c230 30%,#a87900 50%,#ffe68a 62%,#ffffff 70%,#f2c230 80%,#a87900);--bulb:#ffe08a}
html.show .avatar.fr-legende{animation:frglow 3.2s ease-in-out infinite}
@keyframes frglow{0%,100%{box-shadow:0 0 16px 3px rgba(255,190,60,.6)}50%{box-shadow:0 0 26px 8px rgba(255,205,90,.9)}}
html.show .avatar.fr-legende::after{animation:frspin 7s linear infinite}
html.show .avatar.fr-legende::before{--orbit-t:3s;animation-direction:reverse;background:conic-gradient(transparent 0 22%,color-mix(in srgb,var(--bulb) 40%,transparent) 36%,var(--bulb) 46%,#fff 49.5%,transparent 50%,transparent 72%,color-mix(in srgb,var(--bulb) 40%,transparent) 86%,var(--bulb) 96%,#fff 99.5%,transparent 100%)}
@media (prefers-reduced-motion:reduce){html.show .avatar.fr,html.show .avatar.fr::before,html.show .avatar.fr::after{animation:none}}
html.show .toasts.tl{top:78px}


/* ====================== Tafelschrift überall (Namen, Beschriftungen, Eingabefelder, Platzhalter) ====================== */
html.show body{letter-spacing:.012em}
html.show :is(input,select,textarea,button){letter-spacing:inherit}
html.show ::placeholder{font-family:var(--body);letter-spacing:.02em;color:color-mix(in srgb,var(--muted) 80%,transparent)}
html.show :is(.who b,.who2 > span,.pvtext b,.tbname,.frow .who b,.prow .who b,.gitem .who b,.dd-val,.dd-opt > span:first-child,label,.flabel,.ptitle){font-family:var(--display);font-weight:800;letter-spacing:.045em}
html.show :is(.gitem .who b,.frow .who b,.prow .who b,.who2 > span){text-transform:uppercase;font-size:16px;line-height:1.15}
html.show .side :is(.gitem .who b,.frow .who b){font-size:15px}
html.show .pvtext b{text-transform:uppercase;font-size:26px}
html.show :is(label,.flabel){text-transform:uppercase;font-size:14.5px;letter-spacing:.09em}
html.show .dd-val{font-size:17px;text-transform:uppercase} html.show :is(.dd-val small,.dd-opt small){font-family:var(--body);text-transform:none;letter-spacing:.02em;font-weight:500;font-size:13px}
html.show .dd-opt{font-family:var(--display);text-transform:uppercase;letter-spacing:.045em}
html.show .sub{font-size:15px} html.show .side .gitem > .who .sub,html.show .side .frow .who .sub{font-size:12.5px}
html.show #hello{font-size:15px;letter-spacing:.04em}
html.show .question{font-weight:700;letter-spacing:.02em} html.show .ans{font-weight:700;letter-spacing:.03em;font-size:18px}
html.show .avatar:not(.photo){font-family:var(--display);font-weight:900}
html.show table.bil th{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.07em}
html.show .sortbtn{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.07em}

/* ====================== Erfolge: eigene Zeichen ====================== */
html.show .ach-svg{width:26px;height:26px} html.show .ach-svg svg{width:26px;height:26px}
html.show .ach .ach-ic{background:var(--plate);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--edge)}
html.show .ach.got.bronze .ach-ic{color:#e9b182;box-shadow:inset 0 0 0 2px #c98652,0 0 12px rgba(224,160,112,.45)}
html.show .ach.got.silver .ach-ic{color:#e6edf8;box-shadow:inset 0 0 0 2px #b9c3d6,0 0 12px rgba(207,217,234,.45)}
html.show .ach.got.gold .ach-ic{color:#ffd34d;box-shadow:inset 0 0 0 2px #f2c230,0 0 14px rgba(255,211,77,.55)}
html.show .ach,html.show .achcat{background:var(--field);border-color:var(--edge);border-radius:8px}
html.show .ach.bronze,html.show .achcat.bronze{border-color:#c98652} html.show .ach.silver,html.show .achcat.silver{border-color:#b9c3d6} html.show .ach.gold,html.show .achcat.gold{border-color:#f2c230}
html.show .ach .ach-tx b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:17px}
html.show .achcat .medal .ach-svg,html.show .achcat .medal .ach-svg svg{width:20px;height:20px}
html.show .achcat .medal{color:var(--muted)} html.show .achcat.bronze .medal{color:#e9b182} html.show .achcat.silver .medal{color:#e6edf8} html.show .achcat.gold .medal{color:#ffd34d}
html.show .achcat .cn{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14.5px}
html.show .achpop .ap-ic{color:var(--tier)} html.show .achpop .ap-ic .ach-svg,html.show .achpop .ap-ic .ach-svg svg{width:28px;height:28px}
html.show .achtab{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em}

/* ====================== Profil ====================== */
/* Statuszeile: ein Feld, kein Kasten im Kasten */
html.show .st-field{background:var(--field);border:2px solid var(--edge);border-radius:8px}
html.show .st-field:focus-within{border-color:var(--accent)}
html.show .st-in,html.show .st-in:focus{background:transparent !important;border:0 !important}
html.show .emo-t,html.show .st-x{background:transparent} html.show .emo-t:hover,html.show .st-x:hover{background:rgba(255,255,255,.12)}
html.show .ptitle{border-radius:5px}
/* Statistik-Karte: enger gesetzt, damit sie ohne Scrollen passt */
html.show .bars{gap:5px}
html.show .bar-top{font-size:15px;line-height:1.1} html.show .bar-top .sub{font-size:13.5px}
html.show .bar-top b{font-family:var(--display);letter-spacing:.04em}
html.show .bar-track{height:6px;border-radius:2px;background:var(--field)} html.show .bar-track i{box-shadow:0 0 8px color-mix(in srgb,var(--ok) 60%,transparent)}
html.show #app.pagefix .pgrid > .card{gap:9px}
html.show #app.pagefix .tiles.light .tile{padding:7px 6px}
html.show #app.pagefix .tile b{font-size:27px;line-height:1.05}
html.show .card > h3:not(:first-child){font-size:17px;margin-top:2px !important}
@media (min-width:980px) and (max-height:790px){html.show .bars{gap:3px} html.show .bar-top{font-size:14px} html.show .bar-track{height:5px} html.show #app.pagefix .pgrid > .card{gap:7px} html.show #app.pagefix .tile b{font-size:23px} html.show #app.pagefix .tiles.light .tile{padding:5px 6px}}


/* ====================== Feinschliff ====================== */
html.show #hello{display:none}
/* Titelbalken überall gleich hoch – die Lichtkante liegt auf einer Linie, egal ob ein Knopf im Balken sitzt */
html.show .card > :is(h2,h3):first-child,html.show .modal > h2:first-child,html.show .card > .row:first-child:has(> :is(h2,h3)){min-height:46px;padding-block:0;display:flex;align-items:center;flex-wrap:nowrap}
html.show .card > .row:first-child:has(> :is(h2,h3)) .btn-small{font-size:13px;line-height:16px;padding:6px 12px;--bz:8px}
/* Rahmen- und Titel-Auswahl wie die Statuszeile */
html.show .framebtn{background:var(--field);border:2px solid var(--edge);border-radius:8px;color:var(--ink)}
html.show .framebtn:hover{border-color:var(--accent)}
html.show .fb-name{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:15px}
html.show .fb-lbl{font-family:var(--display);letter-spacing:.1em}
/* Avatar-Rahmen brauchen Platz: Ring und Umlaufbahn zählen jetzt zur Größe, damit nichts in den Rahmen rutscht */
html.show .avatar.fr{margin:calc(var(--fw) + 1px) !important}
html.show .avatar:is(.fr-meister,.fr-legende){margin:calc(var(--fw) * 2.7 + 1px) !important}
html.show .fb-av{padding:0}
/* Eigener Name oben rechts: Bild und Tafel sind ein Stück und wachsen beim Drüberfahren gemeinsam */
html.show .tb.me{padding:2px 12px 2px 3px;gap:6px;overflow:visible}
html.show .tb.me .avatar{pointer-events:none;filter:none !important}
html.show .tb.me:hover{transform:scale(1.06);transform-origin:center}
/* Fragenansicht: enger, wenn es knapp wird */
html.show #app.play.q1 .question{padding-block:12px} html.show #app.play.q3 .ans{font-size:16px} html.show #app.play.q4 .ans{font-size:15px}

/* Anmeldeseite: dieselbe Bühne, Schriftzug mittig */
html.show .loginwrap{background-image:
  var(--beam1),var(--beam2),
  radial-gradient(70% 38% at 50% 108%,var(--floor-c),transparent 72%),
  linear-gradient(var(--stage-deep),var(--board) 38%,var(--board))}
html.show .loginlogo{font-weight:900;font-size:44px;letter-spacing:.06em;text-align:center;margin:6vh 0 4px}

/* Große Ergebnis-Tafel: „9 von 10“ – das Wort klein zwischen den Zahlen (der Schrägstrich der Tafelschrift hing schief nach unten) */
html.show .bigscore{display:inline-flex;align-items:center;gap:14px}
html.show .bigscore .bs-sep{font-size:.3em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}

/* ====================== Runde 3 des Feinschliffs ====================== */
/* Knöpfe bewegen sich beim Drüberfahren nicht mehr (Text und Form liefen dabei auseinander) – sie leuchten nur auf */
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end):not(:disabled):hover,html.show .newduel .createrow > .btn:not(:disabled):hover,html.show .joinrow > .btn:not(:disabled):hover,html.show .createrow > .btn:not(:disabled):hover{transform:none}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end):not(:disabled):active{transform:scale(.98)}
html.show button.ans:not(:disabled):hover,html.show .catbtn:hover{transform:none;filter:drop-shadow(0 4px 0 var(--stage-deep)) brightness(1.16) drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 55%,transparent))}
html.show button.ans:not(:disabled):active,html.show .catbtn:active{transform:scale(.985)}
html.show :is(.btn,.btn-ghost,.btn-danger,.btn-plain,.btn-end,.ans,.catbtn){transition:filter .12s ease}
/* Knöpfe neben Eingabefeldern: gleiche Höhe, gleiche Mitte (die alten 3D-Tasten brauchten unten Platz für ihre Kante) */
html.show .joinrow{align-items:stretch} html.show .joinrow > .btn{margin:0;align-self:stretch;height:auto}
html.show .pact:has(> input) > .btn,html.show .createrow > .btn,html.show .btn.turnslot,html.show .linkbox > .copyic{margin-bottom:0}
html.show .strow{align-items:center} html.show .strow > .btn{height:42px;margin:0}
html.show .pact{align-items:center} html.show .pact > .btn,html.show .pact > .btn-ghost,html.show .pact > .btn-danger{margin:0}
/* Kopier-Knopf: kleine Tafel mit Leuchtrand */
html.show .copyic{background:var(--plate);color:var(--accent);border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--edge);transition:box-shadow .12s ease,color .12s ease,filter .12s ease}
html.show .copyic:hover{transform:none;filter:none;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 10px color-mix(in srgb,var(--accent) 45%,transparent)}
html.show .copyic.done{background:var(--plate);color:#7fe3aa;box-shadow:inset 0 0 0 1.5px #2fbf71,0 0 10px rgba(47,191,113,.45)}
html.show .linkbox > .copyic{align-self:stretch;height:auto;width:44px}
/* Spielstand: Doppelpunkt sitzt mittig zwischen den Zahlen, auch in der Höhe */
html.show .vs .big{display:inline-flex;align-items:center;gap:.22em}
html.show .vs .big .colon{font-style:normal;line-height:1;position:relative;top:-.09em}
.vs .big .colon{font-style:normal;margin:0 .2em}
html.show .vs .big .colon{margin:0}
/* „Duell beenden/zurückziehen“ mittig zwischen letzter Runde und Fußzeile */
html.show #app.gameview > .endrow{margin-block:auto}
/* Stumm-Knopf an den Lautstärke-Reglern */
.volrow{align-items:center;gap:8px} .volrow label{flex:1}
.mutebtn{display:grid;place-items:center;width:30px;height:26px;padding:0;border-radius:6px;background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--edge,#cfd5f3)}
.mutebtn:hover{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.mutebtn[aria-pressed="true"]{color:#ff8f93;box-shadow:inset 0 0 0 1.5px #e5767a}
.mutebtn .ico,.mutebtn .ico svg{width:17px;height:17px}
html.show .volpop{width:250px;gap:8px} html.show .volpop .volrow label{font-size:13px}
/* Namen als Link: beim Drüberfahren in der Akzentfarbe statt unterstrichen (der Strich wurde je nach Zeile abgeschnitten) */
html.show .plink:hover b,html.show .plink:hover b .mqi,html.show .plink:hover .who2 > span{text-decoration:none;color:var(--accent)}
/* Startseite, Bühne: feste Breite – die Auswahl daneben verrutscht nicht mehr, egal wie viele Gegner */
html.show .hv-side{display:grid;grid-template-rows:96px auto;justify-items:center;align-items:center;gap:6px;width:112px;min-width:0}
html.show .hv-side:last-child{width:190px}
html.show .hv-slot{display:grid;place-items:center}
html.show .hv-opps{height:auto}
html.show .hv-opps i{background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--beam-b) 45%,#2f6fe0),#0a1c52 78%);color:#fff}
html.show .hv-opps i + i{margin-left:-36px}
@media (min-width:980px){html.show .newduel{grid-template-columns:420px minmax(0,1fr)} html.show .newduel > .hero-vs{padding:2px 0 0;justify-content:center;gap:14px}}
/* Profilbild in der Übersicht ist ein Knopf (öffnet das Bild-Menü) */
.pv-btn{position:relative;background:none;border:0;padding:0;box-shadow:none;border-radius:50%;cursor:pointer;flex:none;display:grid;place-items:center}
.pv-edit{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--plate,#16235c);color:#fff;box-shadow:0 0 0 2px var(--accent);z-index:2;transition:transform .12s ease}
.pv-edit svg{width:17px;height:17px}
.pv-btn:hover .pv-edit{transform:scale(1.15)} .pv-btn:hover .avatar{filter:brightness(1.12)}
.photomenu{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.pm-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pm-past{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pm-old{width:62px;height:62px;border-radius:50%;padding:0;background:var(--field,#eef1ff) center/cover no-repeat;box-shadow:0 0 0 2px var(--edge,#cfd5f3);transition:transform .12s ease,box-shadow .12s ease}
.pm-old:hover{transform:scale(1.1);box-shadow:0 0 0 3px var(--accent),0 0 14px color-mix(in srgb,var(--accent) 50%,transparent)}
.photomenu .flabel{align-self:center}
/* Farbauswahl im Reiter „Aussehen“ */
html.show .theme{background:var(--field);border-color:var(--edge);border-radius:8px;color:var(--ink)}
html.show .theme.sel{border-color:var(--accent);outline:3px solid var(--accent)}
html.show .theme span{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
html.show .seg button.on,html.show .seg button.on:hover{background:var(--accent);color:#10131c}
html.show .theme{transition:border-color .15s,box-shadow .15s,filter .15s}
html.show .theme:hover{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent),0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);filter:brightness(1.12);transform:none}

/* ---------- Effekte: Scheinwerfer-Bewegung, freischaltbare Themen, Rahmen-Effekt, Namensschild, Siegesanimation ---------- */
html.show{--beam1:conic-gradient(from 118deg at 4% -8%,transparent 0deg,color-mix(in srgb,var(--accent) 26%,transparent) 13deg,transparent 27deg,transparent 360deg);--beam2:conic-gradient(from 215deg at 96% -8%,transparent 0deg,color-mix(in srgb,var(--beam-b) 22%,transparent) 14deg,transparent 27deg,transparent 360deg);
  --floor-c:color-mix(in srgb,var(--floor,var(--board-2)) 70%,#fff 10%)}
html.show.beam-off{--beam1:none;--beam2:none}
/* Schwenkend: die Lichtkegel liegen als eigene Ebenen hinter dem Inhalt und drehen sich langsam um ihre Lampe */
html.show.beam-sway{background-image:radial-gradient(70% 38% at 50% 108%,var(--floor-c),transparent 72%),linear-gradient(var(--stage-deep),var(--board) 38%,var(--board));background-attachment:fixed}
html.show.beam-sway body{background:none}
html.show.beam-sway body::before,html.show.beam-sway body::after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;will-change:transform}
html.show.beam-sway body::before{background:conic-gradient(from 118deg at 17.14% 8.57%,transparent 0deg,color-mix(in srgb,var(--accent) 26%,transparent) 13deg,transparent 27deg,transparent 360deg);transform-origin:17.14% 8.57%;animation:beamL 13s ease-in-out infinite alternate}
html.show.beam-sway body::after{background:conic-gradient(from 215deg at 82.86% 8.57%,transparent 0deg,color-mix(in srgb,var(--beam-b) 22%,transparent) 14deg,transparent 27deg,transparent 360deg);transform-origin:82.86% 8.57%;animation:beamR 17s ease-in-out infinite alternate}
@keyframes beamL{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes beamR{from{transform:rotate(8deg)}to{transform:rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){html.show.beam-sway body::before,html.show.beam-sway body::after{animation:none}}
/* Kacheln mit Schloss */
html.show .theme{position:relative}
html.show .theme.locked .sw2,html.show .theme.locked > span{opacity:.38;filter:saturate(.5)}
html.show .theme .lk{position:absolute;right:5px;top:5px;width:22px;height:22px;border-radius:50%;background:var(--plate);color:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--edge)}
html.show .theme .lk svg{width:13px;height:13px;display:block}
html.show .fxgrid .fxsw{height:46px;align-items:center;justify-content:center;padding:4px;background:var(--plate);overflow:hidden}
html.show .fxgrid .fxsw b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.04em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.show .fxgrid .fxsw .avatar{margin:0 !important;pointer-events:none}
html.show .fxi{display:block;width:100%;height:100%;border-radius:4px}
html.show .fxi-still{background:conic-gradient(from 150deg at 50% -30%,transparent 0deg,color-mix(in srgb,var(--accent) 70%,transparent) 30deg,transparent 60deg)}
html.show .fxi-sway{background:conic-gradient(from 150deg at 50% -30%,transparent 0deg,color-mix(in srgb,var(--accent) 70%,transparent) 30deg,transparent 60deg);transform-origin:50% 0;animation:fxsway 2.6s ease-in-out infinite alternate}
@keyframes fxsway{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
html.show .fxi-off{background:linear-gradient(135deg,transparent 46%,var(--muted) 47%,var(--muted) 53%,transparent 54%);opacity:.6}
html.show .fxi-konfetti{background:radial-gradient(circle at 18% 30%,#ff7eb6 0 3px,transparent 4px),radial-gradient(circle at 40% 70%,#ffc83d 0 3px,transparent 4px),radial-gradient(circle at 62% 28%,#4fe0b0 0 3px,transparent 4px),radial-gradient(circle at 82% 62%,var(--accent) 0 3px,transparent 4px),radial-gradient(circle at 30% 50%,#fff 0 2px,transparent 3px),radial-gradient(circle at 72% 82%,#fff 0 2px,transparent 3px)}
html.show .fxi-blitz{background:radial-gradient(circle at 50% 50%,#fff 0 12%,color-mix(in srgb,var(--accent) 70%,transparent) 30%,transparent 62%)}
html.show .fxi-gold{background:repeating-linear-gradient(90deg,transparent 0 9px,#f2c230 9px 11px,transparent 11px 21px,#ffe68a 21px 22.5px),linear-gradient(transparent,rgba(242,194,48,.25))}
html.show .fxi-feuerwerk{background:radial-gradient(circle at 30% 45%,transparent 0 9px,#ff7eb6 10px 11.5px,transparent 12.5px),radial-gradient(circle at 30% 45%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 55%,transparent 0 12px,var(--accent) 13px 14.5px,transparent 15.5px),radial-gradient(circle at 70% 55%,#fff 0 2px,transparent 3px)}
@media (prefers-reduced-motion:reduce){html.show .fxi-sway{animation:none}}
/* Rahmen-Effekt (Tagesquiz-Serie) */
@keyframes axfunk{0%,100%{filter:drop-shadow(0 0 1.5px #ffd76a)}50%{filter:drop-shadow(0 0 6px #ffd76a) drop-shadow(0 0 2px #fff)}}
@keyframes axpolar{0%,100%{filter:drop-shadow(0 0 5px #4dffb5)}33%{filter:drop-shadow(0 0 7px #4dd8ff)}66%{filter:drop-shadow(0 0 7px #a36bff)}}
html.show .avatar.ax-funken{animation:axfunk 2.2s ease-in-out infinite}
html.show .avatar.ax-polar{animation:axpolar 6s ease-in-out infinite}
html.show .avatar.fr-legende.ax-funken{animation:frglow 3.2s ease-in-out infinite,axfunk 2.2s ease-in-out infinite}
html.show .avatar.fr-legende.ax-polar{animation:frglow 3.2s ease-in-out infinite,axpolar 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.show .avatar.ax-funken{animation:none;filter:drop-shadow(0 0 4px #ffd76a)}html.show .avatar.ax-polar{animation:none;filter:drop-shadow(0 0 5px #4dd8ff)}}
/* Namensschild */
html.show .nf-glow{color:var(--accent);text-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
html.show .nf-gold,html.show .nf-diamant,html.show .nf-legende{background-clip:text;-webkit-background-clip:text;color:transparent !important;-webkit-text-fill-color:transparent}
html.show .nf-gold{background-image:linear-gradient(180deg,#fff6c2,#f2c230 55%,#a87900)}
html.show .nf-diamant{background-image:linear-gradient(100deg,#5cc8ff,#e8fbff 30%,#5cc8ff 50%,#bfeaff 70%,#5cc8ff);background-size:220% 100%;animation:nfshine 5s linear infinite}
html.show .nf-legende{background-image:linear-gradient(100deg,#f2c230,#fff 22%,#ffe68a 40%,#f2c230 60%,#fff 80%,#f2c230);background-size:220% 100%;animation:nfshine 3.6s linear infinite;filter:drop-shadow(0 0 5px rgba(242,194,48,.7))}
@keyframes nfshine{from{background-position:220% 0}to{background-position:0 0}}
html.show .plink:hover .nmfx:not(.nf-glow){filter:brightness(1.25) drop-shadow(0 0 4px rgba(255,255,255,.35))}
@media (prefers-reduced-motion:reduce){html.show .nf-diamant,html.show .nf-legende{animation:none}}
/* Siegesanimation */
.winfx{position:fixed;inset:0;width:100%;height:100%;z-index:900;pointer-events:none}
.wf-blitz i{position:absolute;inset:0;background:#fff;animation:wfflash 1.6s ease-out forwards}
.wf-blitz b{position:absolute;left:50%;top:42%;width:160vmax;height:160vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);animation:wfrays 1.6s ease-out forwards}
@keyframes wfflash{0%{opacity:0}8%{opacity:.85}30%{opacity:.15}45%{opacity:.5}100%{opacity:0}}
@keyframes wfrays{0%{opacity:0;transform:scale(.3) rotate(0)}15%{opacity:1}100%{opacity:0;transform:scale(1) rotate(40deg)}}
/* Handy: alle Reiter passen nebeneinander */
@media (max-width:560px){html.show .backrow .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;gap:2px}html.show .backrow .tabs .tab{padding-inline:2px;font-size:12px;letter-spacing:.02em;min-width:0}}