/* Hinweis bei Verbindungsabbruch (alle Spiele) */
.verbindung{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translate(-50%,calc(100% + 40px + env(safe-area-inset-bottom,0px)));visibility:hidden;background:#b4382f;color:#fff;font:700 15px/1.3 "Atkinson Hyperlegible",system-ui,sans-serif;padding:10px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:30;transition:transform .25s ease,visibility 0s .25s;max-width:calc(100vw - 32px);text-align:center;pointer-events:none}
.verbindung.an{transform:translate(-50%,0);visibility:visible;transition:transform .25s ease,visibility 0s}
@media (prefers-reduced-motion: reduce){.verbindung{transition:none}}
/* Bedienung am Handy: keine Doppeltipp-Verzögerung */
button,a,input{touch-action:manipulation}
/* Fußzeile Impressum · Datenschutz (alle Seiten) */
/* Seite mindestens bildschirmhoch, damit die Fußzeile auch bei wenig Inhalt unten steht */
body>.app,body>.seite{box-sizing:border-box;min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.rechtsfuss{flex:none;margin-top:auto;display:flex;justify-content:center;gap:8px;font-size:12px;color:var(--muted);padding-top:2px}
.rechtsfuss a{color:var(--muted);text-decoration:none;padding:4px 2px}
.rechtsfuss a:hover{color:var(--ink);text-decoration:underline}
/* leeres Meldungsfeld in Formularen nimmt keinen Platz weg (Anmeldung) */
form .toast:empty{display:none}
/* Gemeinsame Bausteine für alle Spiele (Raumliste, Medaillen, „+X Punkte für dich“, eigene Tabellenzeile, Regeln) –
   Wortduell und Innere Uhr haben eigene CSS-Dateien, deshalb hier zentral */
.regeln{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}
.regeln b{color:var(--ink)}
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.liste.klein li{display:flex;align-items:center;gap:8px;font-size:14px}
.liste.klein small{color:var(--muted)}
.eintrag{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--line);background:var(--face);border-radius:10px;padding:10px 12px}
.eintrag:hover{border-color:var(--accent)}
.eintrag span:first-child{display:flex;flex-direction:column;min-width:0}
.eintrag small{color:var(--muted);font-size:13px}
.platz{width:26px;height:26px;flex:none;display:inline-grid;place-items:center;font-family:var(--f-mono);font-size:13px;font-weight:500;color:var(--muted)}
.platz.p1,.platz.p2,.platz.p3{border-radius:50%;color:#2a1d05;font-weight:700;font-family:var(--f-display);font-size:14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.2)}
.platz.p1{background:radial-gradient(circle at 35% 30%,#ffe9a3,#e0b22e 55%,#b8860b)}
.platz.p2{background:radial-gradient(circle at 35% 30%,#ffffff,#c3cad2 55%,#8e979f)}
.platz.p3{background:radial-gradient(circle at 35% 30%,#f6c9a0,#c27a43 55%,#8c5226);color:#2b1406}
.meine-punkte{font-family:var(--f-display);font-weight:800;font-size:22px;padding:6px 16px;border-radius:999px;background:var(--face);border:1px solid var(--line)}
.meine-punkte.plus{color:var(--gut);border-color:color-mix(in srgb,var(--gut) 40%,var(--line))}
.meine-punkte.minus{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.meine-punkte.null{color:var(--muted)}
tr.ich td{background:color-mix(in srgb,var(--accent) 8%,transparent)}