/* BJJ Worlddomination by Hocus Chokus – Hausfarben wie Dojo und Website, eckiges Design (Knöpfe 6–8 px, Boxen 10 px, keine Pillen) */
:root {
  --anthrazit: #1a1a1a;
  --rot: #d72929;
  --rot-dunkel: #b31f1f;
  --grau: #5c6670;
  --linie: #e2e2e2;
  --hintergrund: #f1f1f1;
  --weiss: #fff;
  --gruen: #2e9e4f;
  --gelb: #f2c200;
  --meer: #a9cfe3;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); color: var(--anthrazit); background: var(--hintergrund); line-height: 1.45; }
a { color: var(--rot-dunkel); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 1rem 0 .6rem; }
h3 { font-size: .95rem; margin: .8rem 0 .4rem; }
p { margin: .5rem 0; }
code { background: #f4f4f4; padding: .1em .3em; border-radius: 4px; font-size: .85em; }
.umbruch { word-break: break-all; }
.leise { color: var(--grau); }
.klein { font-size: .85rem; }
.rot { color: var(--rot); }
.rechts { text-align: right; }
[hidden] { display: none !important; }

.testbanner { background: #f2a900; color: #1a1a1a; text-align: center; font-weight: 600; font-size: .78rem; padding: .25rem .6rem; }

/* Kopfleiste */
.leiste { background: var(--anthrazit); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
.marke span { display: flex; flex-direction: column; line-height: 1.1; }
.marke strong { font-size: 1.1rem; letter-spacing: .02em; }
.marke small { color: #aaa; font-size: .72rem; }
.marke .logo { border-radius: 6px; }
.nav { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.nav a { color: #ddd; text-decoration: none; padding: .4rem .6rem; border-radius: 6px; font-weight: 500; font-size: .95rem; }
.nav a:hover { background: #333; color: #fff; }
.nav a.ich { background: #2c2c2c; color: #fff; }

.inhalt { max-width: 860px; margin: 0 auto; padding: 1rem; }
body.schmal .inhalt { max-width: 540px; }

.box { background: var(--weiss); border-radius: 10px; padding: 1.1rem 1.2rem; margin: 0 0 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.box.leise { background: transparent; box-shadow: none; padding-top: 0; }
.box.hervor { border: 2px solid var(--gruen); }
.hinweis-box { border-left: 4px solid var(--gelb); }
.leer-box { text-align: center; padding: 2rem 1rem; }

.meldung { padding: .65rem .9rem; border-radius: 8px; margin: 0 0 1rem; background: #e8f5ec; color: #1d5e32; }
.meldung.fehler { background: #fdeaea; color: #8c1a1a; }
.meldung.hinweis { background: #fff6d6; color: #5c4a00; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font: inherit; font-weight: 600; font-size: .95rem;
  padding: .6rem 1rem; border-radius: 7px; border: 1px solid #cfcfcf; background: #fff; color: var(--anthrazit); cursor: pointer; text-decoration: none;
  min-height: 44px; line-height: 1.2; }
.knopf:hover { border-color: #999; }
.knopf.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover { background: var(--rot-dunkel); }
.knopf.gefahr { color: var(--rot-dunkel); border-color: #e3b0b0; }
.knopf.klein { padding: .3rem .6rem; font-size: .85rem; min-height: 34px; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.klein-abstand { margin-top: .8rem; }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: .85rem; }
.formular label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; }
.formular label small { font-weight: 400; color: var(--grau); }
.formular input:not([type=checkbox]):not([type=radio]), .formular select, .formular textarea {
  font: inherit; font-weight: 400; padding: .6rem .7rem; border: 1px solid #ccc; border-radius: 7px; background: #fff; width: 100%; min-height: 44px; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--rot); outline-offset: 0; border-color: var(--rot); }
.formular .haken, .haken { flex-direction: row !important; align-items: center; gap: .55rem !important; font-weight: 400 !important; }
.haken input { width: 20px; height: 20px; accent-color: var(--rot); flex: none; }
.formular.reihe { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.formular.reihe label { flex: 1 1 180px; }
.wahl { border: 1px solid var(--linie); border-radius: 8px; padding: .6rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.wahl legend { font-weight: 600; font-size: .92rem; padding: 0 .3rem; }
.auswahl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem .8rem; }
.falle { position: absolute; left: -9999px; }
.linkzeile { display: flex; gap: .5rem; }
.linkzeile input { flex: 1; min-width: 0; font: inherit; padding: .5rem; border: 1px solid #ccc; border-radius: 7px; }

/* Listen, Tabellen */
.zeile { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th, .tabelle td { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr.gesperrt td { opacity: .55; }
.marke-klein { display: inline-block; font-size: .7rem; font-weight: 700; background: #eee; border-radius: 4px; padding: .05rem .35rem; }
.marke-klein.rot { background: #fdeaea; color: var(--rot-dunkel); }

.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.abschnitt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); margin: 1.3rem 0 .5rem; }
.abschnitt.dran { color: var(--rot); }
.spielkarte { display: flex; align-items: center; gap: .8rem; background: #fff; border-radius: 10px; padding: .8rem 1rem; margin-bottom: .5rem; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 2px solid transparent; }
.spielkarte:hover { border-color: #ddd; }
.spielkarte.dran { border-color: var(--rot); }
.spielkarte.raus, .spielkarte.beendet { opacity: .75; }
.spielkarte .titel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.spielkarte small { color: var(--grau); }
.spielkarte .pfeil { font-size: 1.6rem; color: #bbb; }
.farbe { width: 14px; height: 38px; border-radius: 4px; flex: none; }
.farbe.leer { background: repeating-linear-gradient(45deg, #ddd, #ddd 4px, #f4f4f4 4px, #f4f4f4 8px); }
.uhr.knapp { color: var(--rot); font-weight: 600; }
.spielkarte .titel .punkt { align-self: flex-start; margin: .15rem 0 0; }
.punkt { display: inline-block; background: var(--rot); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; vertical-align: middle; }
.spielerliste { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.spielerliste li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.spielerliste .farbe { height: 22px; width: 22px; }
form.inline { display: inline; margin-left: .3rem; }
.spielerliste li { flex-wrap: wrap; }
.farbwahl { display: flex; gap: .3rem; flex-basis: 100%; margin: .2rem 0 .3rem 1.9rem; flex-wrap: wrap; }
.farbknopf { width: 28px; height: 28px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #bbb; cursor: pointer; padding: 0; }
.farbknopf.an { box-shadow: 0 0 0 2px #1a1a1a; }
.farbknopf:disabled { opacity: .25; cursor: not-allowed; }
.farbwahl.ohne-einzug { margin-left: 0; }
.spiel-link { border-top: 1px solid var(--linie); margin-top: 1rem; padding-top: .6rem; }
.klein-select { font: inherit; padding: .5rem; border: 1px solid #ccc; border-radius: 7px; min-height: 44px; }
.botmarke { font-size: .62rem; font-weight: 700; background: #1a1a1a; color: #fff; border-radius: 3px; padding: 0 .25rem; }
.profilbild { border-radius: 6px; object-fit: cover; vertical-align: middle; flex: none; }
.profilbild.leer { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85em; }
.profilkopf { display: flex; gap: 1rem; align-items: center; }
.profilkopf .profilbild { border-radius: 10px; }
.profilkopf h1 { margin: 0; }
h1.mit-bild { display: flex; align-items: center; gap: .6rem; }
h1.mit-bild a { display: inline-flex; text-decoration: none; }
.dateiwahl { cursor: pointer; }
.chipbild { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; border: 2px solid; flex: none; }
.nachricht { display: flex; gap: .45rem; align-items: flex-start; }
.chatbild { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: none; margin-top: .1rem; }

.regeln ol { padding-left: 1.2rem; }
.regeln li { margin-bottom: .5rem; }
.gurt { vertical-align: middle; }
.gurte-legende { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ===================== Spielbildschirm ===================== */
body.spielseite { height: 100vh; height: 100dvh; overflow: hidden; background: var(--anthrazit); }
body.spielseite .testbanner { font-size: .7rem; padding: .1rem; }
.spiel-main { height: 100%; }
#spiel { display: flex; flex-direction: column; height: 100%; background: var(--hintergrund); position: relative; }
body.spielseite:has(.testbanner) #spiel { height: calc(100% - 1.2rem); }
.spielkopf { display: flex; align-items: center; gap: .5rem; background: var(--anthrazit); color: #fff; padding: .35rem .5rem; padding-top: max(.35rem, env(safe-area-inset-top)); }
.spielkopf .zurueck { color: #fff; text-decoration: none; font-size: 1.8rem; line-height: 1; padding: 0 .5rem; }
.spieltitel { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.spieltitel strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.spieltitel span { font-size: .8rem; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spieltitel b { color: #fff; }
#spiel.mein-zug .spielkopf { background: var(--rot-dunkel); }
.knopf-icon { background: none; border: 0; color: #fff; font-size: 1.5rem; padding: .2rem .7rem; cursor: pointer; border-radius: 6px; min-height: 40px; }
.knopf-icon:hover { background: rgba(255,255,255,.1); }
[data-uhr].knapp { color: #ffd34d; font-weight: 700; }

.leiste-rahmen { position: relative; flex: none; background: #fff; border-bottom: 1px solid var(--linie); }
.spielerleiste { display: flex; gap: .35rem; overflow-x: auto; padding: .35rem .5rem; scrollbar-width: none; user-select: none; -webkit-user-select: none; }
/* Desktop (Inhaber 2026-09-30): mit der Maus ziehen wie am Handy wischen, Mausrad scrollt seitwärts, Pfeile an den Rändern */
@media (hover: hover) and (pointer: fine) {
  .spielerleiste { cursor: grab; }
  .spielerleiste.zieht { cursor: grabbing; }
  .spielerleiste.zieht .chip { pointer-events: none; }
}
.leiste-pfeil { position: absolute; top: 0; bottom: 0; z-index: 2; width: 34px; border: 0; font: 700 1.5rem/1 var(--schrift); color: var(--anthrazit); cursor: pointer; }
.leiste-pfeil.links { left: 0; background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0)); text-align: left; padding-left: 6px; }
.leiste-pfeil.rechts { right: 0; background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0)); text-align: right; padding-right: 6px; }
.leiste-pfeil:hover { color: var(--rot); }
@media (hover: none), (pointer: coarse) { .leiste-pfeil { display: none; } }   /* am Handy wischt man */
.spielerleiste::-webkit-scrollbar { display: none; }
.chip { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border-radius: 6px; background: #f4f4f4; font-size: .78rem; white-space: nowrap; border: 2px solid transparent; flex: none; }
.chip .n { font-weight: 700; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.chip .z { color: var(--grau); }
.chip .naechste { font-weight: 800; color: #fff; background: var(--anthrazit); border-radius: 4px; padding: 0 .3rem; font-variant-numeric: tabular-nums; }
.chip.dran { border-color: var(--anthrazit); background: #fff; }
.chip.ich .n { text-decoration: underline; text-decoration-thickness: 2px; }
.chip.raus { opacity: .45; }
.chip.raus .n { text-decoration: line-through; }
.sn i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .25rem; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.farbe { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.farbpunkt { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; border: 1px solid rgba(0,0,0,.2); }

.spielflaeche { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kartenflaeche { position: relative; flex: 1 1 55%; min-height: 180px; background: var(--meer); overflow: hidden; touch-action: none; }
#karte { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; cursor: grab; }
#karte .meer { fill: var(--meer); }
#karte .seewege line { stroke: #3a6d87; stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
#karte .gebiet { stroke: none; fill: #cfcfcf; fill-opacity: .88; cursor: pointer; transition: fill .3s; }
#karte .gebiet.neutral { fill-opacity: .6; }
#karte .gebiet.unbekannt { fill-opacity: .85; }   /* dichter Nebel: Besitzer unbekannt */
#karte .gebiet.gewaehlt, #karte .gebiet.nach { fill-opacity: 1; }
#karte .rand { fill: none; stroke: #fff; stroke-width: .9; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
#karte .rand.gewaehlt { stroke: #111; stroke-width: 2.8; }
#karte .rand.nach { stroke: #111; stroke-width: 2.8; stroke-dasharray: 5 3; }
#karte .rand.ziel { stroke: #111; stroke-width: 1.8; stroke-dasharray: 3 3; animation: ziel 1s linear infinite; }
@keyframes ziel { to { stroke-dashoffset: -12; } }
#karte .gebiet.blinken { animation: blinken .5s ease-in-out 3; }
@keyframes blinken { 50% { fill-opacity: .3; } }
#karte .marke { pointer-events: auto; cursor: pointer; }
#karte .marke .treffer { fill: transparent; }
#karte .marke .ninja { fill: var(--farbe, #888); stroke: #fff; stroke-width: 40; paint-order: stroke; stroke-linejoin: round; filter: brightness(.78) drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
#karte .marke .schild { fill: var(--farbe, #888); stroke: #fff; stroke-width: 1.2; }
#karte .marke.neutral .ninja, #karte .marke.neutral .schild { fill: #c4c4c4; }
#karte .marke text { font: 700 8.5px var(--schrift); fill: #fff; pointer-events: none; }
#karte .marke text.zahl { font-size: 13px; }
#karte .gurtband.nebel .band { fill: #d6d6d6; stroke: #999; stroke-dasharray: 2 1.5; }
#karte .gurtband.nebel .balken { fill: #aaa; }
#karte .marke.nebel .ninja { filter: brightness(.78) grayscale(.6) opacity(.75); }
#karte .marke.dunkel text { fill: #111; }
#karte .marke text.plus { font-size: 9px; fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
#karte .gruppen path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
#karte .gruppe-unter { stroke: #fff; stroke-width: 6; opacity: .9; }
#karte .gruppe-linie { stroke-width: 3.5; }   /* Inhaber 2026-09-26: erst dicker, dann „wieder etwas dünner“ */
#karte .kontinent-schein path { fill: none; stroke-width: 18; opacity: .38; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
#karte .kschild { cursor: pointer; pointer-events: auto; }
#karte .kschild .treffer { fill: transparent; }
#karte .kschild .feld { stroke: #fff; stroke-width: 1.3; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
#karte .kschild text { font: 800 11px var(--schrift); fill: #fff; pointer-events: none; }
#karte .kschild .halter { stroke: #fff; stroke-width: 1.2; }
#karte.gruppe-hervor .gebiet:not(.in-gruppe) { fill-opacity: .22; }
#karte.gruppe-hervor .marke:not(.in-gruppe), #karte.gruppe-hervor .kschild:not(.in-gruppe) { opacity: .3; }
#karte .gebiet, #karte .marke, #karte .kschild { transition: fill .3s, fill-opacity .3s, opacity .3s; }
#karte .dojo { pointer-events: none; }
#karte .dojo .dach { fill: #1a1a1a; }
#karte .dojo .wand { fill: var(--rot); }
#karte .dojo .tuer { fill: #ffd34d; }
#karte .dojo-name { font: 800 7.5px var(--schrift); fill: #1a1a1a; paint-order: stroke; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; letter-spacing: .02em; }
#karte .pfeil-linie { stroke: #111; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 8 5; animation: ziel 0.6s linear infinite; }
#spiel.beschaeftigt #karte { opacity: .85; }

.zoom { position: absolute; right: .5rem; bottom: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.zoom button { width: 38px; height: 38px; border-radius: 7px; border: 1px solid #bbb; background: rgba(255,255,255,.92); font-size: 1.2rem; font-weight: 700; cursor: pointer; }

.wurfanzeige { position: absolute; left: 50%; top: .6rem; transform: translateX(-50%); background: rgba(20,20,20,.88); color: #fff; border-radius: 10px;
  padding: .6rem .9rem; font-size: .88rem; text-align: center; transition: opacity .5s; cursor: pointer; max-width: 92%; }
.wurfanzeige.weg { opacity: 0; }
.wuerfelreihe { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-bottom: .3rem; }
.w { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; }
.w.a { background: var(--rot); color: #fff; }
.w.v { background: #fff; color: #111; }
.gegen { color: #aaa; font-size: .78rem; margin: 0 .3rem; }
.erobert { color: #ffd34d; font-weight: 800; margin-top: .2rem; }
.wurfanzeige .spruch { margin-top: .25rem; font-style: italic; color: #fff; }
.verlauf .spruch { color: var(--grau); }

.seitenleiste { flex: 0 0 42%; min-height: 0; overflow-y: auto; background: #fff; border-top: 1px solid var(--linie); display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); }
#spiel.schublade-offen .seitenleiste { flex-basis: 62%; }
.aktion { padding: .6rem .8rem; font-size: .92rem; }
.aktion p { margin: .3rem 0; }
.aktion .gross { font-size: 1.25rem; color: var(--rot); }
.aktion .knoepfe .knopf { flex: 1 1 auto; }
.gebietinfo { display: flex; gap: .6rem; align-items: flex-start; background: #f7f7f7; border-radius: 8px; padding: .45rem .6rem; margin-top: .4rem; font-size: .88rem; }
.gebietinfo .farbpunkt { margin-top: .25rem; }
.fein { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; background: #f7f7f7; border-radius: 8px; padding: .35rem .5rem; margin: .3rem 0; }
.fein span { flex: 1 1 auto; }
.angriff .duell { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.zeile-klein { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.segmente { display: inline-flex; border: 1px solid #ccc; border-radius: 7px; overflow: hidden; }
.seg { border: 0; background: #fff; font: inherit; font-weight: 700; width: 44px; height: 38px; cursor: pointer; border-right: 1px solid #ccc; }
.seg:last-child { border-right: 0; }
.seg.an { background: var(--anthrazit); color: #fff; }
.seg:disabled { color: #bbb; cursor: not-allowed; }
.regler { display: flex; align-items: center; gap: .7rem; margin: .4rem 0; }
.regler input { flex: 1; accent-color: var(--rot); height: 32px; }
.regler span { min-width: 2.5em; text-align: center; font-size: 1.2rem; }
.ende { text-align: center; padding: .5rem; font-size: 1.1rem; }
.pokal { font-size: 2.4rem; }

.gurte { display: inline-flex; gap: 2px; flex-wrap: wrap; vertical-align: middle; }
.gurtgruppe { display: inline-flex; gap: 2px; align-items: center; font-size: .75rem; }
.gurt rect { stroke: #555; stroke-width: .6; }
.gurt.weiss rect { fill: #f4f4f4; } .gurt.weiss .balken { fill: #1a1a1a; }
.gurt.blau rect { fill: #1f5fbf; } .gurt.blau .balken { fill: #1a1a1a; }
.gurt.lila rect { fill: #6b2fa0; } .gurt.lila .balken { fill: #1a1a1a; }
.gurt.braun rect { fill: #6b4226; } .gurt.braun .balken { fill: #1a1a1a; }
.gurt.schwarz rect { fill: #1a1a1a; } .gurt.schwarz .balken { fill: var(--rot); }

.reiter { display: flex; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: #fff; z-index: 1; }
.reiter button { flex: 1; border: 0; background: #fff; font: inherit; font-size: .85rem; font-weight: 600; padding: .6rem .2rem; cursor: pointer; color: var(--grau); border-bottom: 3px solid transparent; }
.reiter button.an { color: var(--anthrazit); border-bottom-color: var(--rot); }
.schublade { padding: .4rem .8rem calc(1.6rem + env(safe-area-inset-bottom)); font-size: .9rem; }   /* unten Luft: nichts klebt am Rand (Inhaber 2026-09-27) */
/* Chat offen (Inhaber 2026-09-27): nur die Nachrichten scrollen, das Eingabefeld bleibt immer sichtbar */
#spiel.chat-offen .seitenleiste { overflow-y: auto; }   /* passt normal ohne Scrollen; nur als Rettung, nie abschneiden */
#spiel.chat-offen .aktion { flex: none; max-height: 32%; overflow-y: auto; }
#spiel.chat-offen .reiter { flex: none; }
#spiel.chat-offen .schublade { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
#spiel.chat-offen .schublade > h3 { flex: none; }
#spiel.chat-offen .chatliste { flex: 1 1 auto; min-height: 70px; max-height: none; margin-bottom: .4rem; }
#spiel.chat-offen .chatform-rahmen { flex: none; }
.chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex: none; }
.chat-kopf h3 { margin: .3rem 0; }
.chat-zu { display: none; }
/* Handy (Inhaber 2026-09-27, 2. Anlauf): Chat als eigene Vollbild-Ansicht wie bei WhatsApp. Höhe und Lage folgen dem
   tatsächlich sichtbaren Bereich (visualViewport, --chat-h / --chat-top aus spiel.js) – so bleibt das Eingabefeld auch mit
   offener Tastatur und vergrößerter Systemschrift sichtbar, auf Android wie am iPhone. */
@media (max-width: 899px) {
  #spiel.chat-offen .schublade { position: fixed; left: 0; right: 0; top: var(--chat-top, 0px); height: var(--chat-h, 100dvh); z-index: 800;
    background: #fff; margin: 0; padding: calc(.3rem + env(safe-area-inset-top)) .8rem calc(.5rem + env(safe-area-inset-bottom)); box-shadow: none; }
  #spiel.chat-offen .chat-zu { display: inline-flex; min-width: 44px; min-height: 40px; justify-content: center; align-items: center; font-size: 1.1rem; }
  #spiel.chat-offen .chatliste { min-height: 0; }
}
.schublade h3:first-child { margin-top: .3rem; }
.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf li { padding: .3rem 0; border-bottom: 1px solid #f0f0f0; font-size: .85rem; }
.verlauf li.zug_start { background: #fafafa; }
.verlauf li.neu { border-left: 3px solid var(--gelb); padding-left: .4rem; }
.verlauf .zeit { color: #999; font-size: .75rem; margin-right: .2rem; }
.chatliste { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.nachricht { background: #f3f3f3; border-radius: 8px; padding: .35rem .6rem; max-width: 85%; align-self: flex-start; }
.nachricht.meine { background: #fde6e6; align-self: flex-end; }
.nachricht .wer { display: block; font-size: .72rem; color: var(--grau); }
.nachricht .was { white-space: pre-wrap; word-break: break-word; }
.chatform { display: flex; gap: .4rem; }
.chatform input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 7px; }
.kartenhand { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Admin: kompakte Spielerliste */
.spielerliste { list-style: none; margin: .5rem 0; padding: 0; }
ul.spielerliste > li.sp-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid #eee; }
.sp-zeile.gesperrt { opacity: .6; }
.sp-info { min-width: 0; display: flex; flex-direction: column; }
.sp-info .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-aktionen { justify-self: end; }
.sp-aktionen summary { list-style: none; cursor: pointer; min-width: 36px; text-align: center; }
.sp-aktionen summary::-webkit-details-marker { display: none; }
.sp-aktionen[open] { grid-column: 1 / -1; justify-self: stretch; }
.sp-aktionen[open] summary { margin-left: auto; display: block; width: max-content; }
.sp-aktionen .knoepfe { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; justify-content: flex-end; }
/* Warteraum: Bot umbenennen */
details.botname { display: inline-block; vertical-align: middle; }
details.botname > summary { list-style: none; cursor: pointer; display: inline-block; }
details.botname > summary::-webkit-details-marker { display: none; }
details.botname[open] { display: block; width: 100%; margin: .35rem 0; }
.botname-form { display: flex; gap: .4rem; margin-top: .35rem; }
.botname-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .4rem .55rem; border: 1px solid #ccc; border-radius: 7px; }
.auftrag { border: 2px solid #1a1a1a; border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; background: #fffbea; }
.auftrag h3 { margin: 0 0 .3rem; }
.auftrag p { margin: .2rem 0; }
.auftragsliste { margin: .3rem 0 0; padding-left: 1.1rem; }
.auftragsliste li { margin: .25rem 0; }
.auftrag-kurz { background: #fffbea; border-radius: 8px; padding: .4rem .6rem; margin: 0 0 .5rem; }
.tkarte { width: 92px; height: 116px; border-radius: 8px; border: 2px solid #ccc; background: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: .4rem; cursor: pointer;
  font: inherit; text-align: left; }
.tkarte .sym { font-weight: 800; font-size: .85rem; }
.tkarte .geb { font-size: .72rem; color: var(--grau); }
.tkarte.armbar { border-top: 8px solid #1f6fd1; }
.tkarte.triangle { border-top: 8px solid #2a9d3f; }
.tkarte.kimura { border-top: 8px solid #f08a24; }
.tkarte.joker { border-top: 8px solid #c9a227; background: #fffbea; }
.tkarte.an { border-color: var(--rot); box-shadow: 0 0 0 2px var(--rot); transform: translateY(-3px); }
.tkarte:disabled { cursor: default; }
.kontinente tr { cursor: pointer; }
.kontinente td { padding: .4rem .3rem; }

.menue { position: absolute; right: .5rem; top: 3rem; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: .8rem; z-index: 20; display: flex; flex-direction: column; gap: .5rem; width: 260px; max-width: calc(100% - 1rem); }

.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: #222; color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 50;
  font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: opacity .5s; max-width: calc(100% - 2rem); text-align: center; }
.toast.fehler { background: var(--rot-dunkel); }
.toast.weg { opacity: 0; }

@media (min-width: 900px) {
  .spielflaeche { flex-direction: row; }
  .kartenflaeche { flex: 1 1 auto; }
  .seitenleiste, #spiel.schublade-offen .seitenleiste { flex: 0 0 360px; border-top: 0; border-left: 1px solid var(--linie); }
  .chatliste { max-height: 50vh; }
}
@media (max-width: 520px) {
  .inhalt { padding: .7rem; }
  .box { padding: .9rem; }
  h1 { font-size: 1.3rem; }
  .leiste { padding: .45rem .7rem; gap: .5rem; }
  .nav a { padding: .35rem .45rem; font-size: .88rem; }
}

/* ===================== Spielbericht und Rangliste ===================== */
.st-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.st-kopf h1 { margin: 0; }
.st-sieger { display: flex; align-items: center; gap: .6rem; background: #fff8e0; border-radius: 10px; padding: .6rem .9rem; }
.st-sieger .pokal { font-size: 2rem; }
.st-sieger small { display: block; color: var(--grau); }
.st-name { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.st-endstand { list-style: none; padding: 0; margin: 0; }
.st-endstand li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.st-endstand li:first-child { border-top: 0; }
.st-platz { width: 2em; font-weight: 800; font-size: 1.1rem; }
.st-preise { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.st-preis { background: #fff; border-radius: 10px; padding: .7rem .8rem; border-top: 5px solid #ccc; display: flex; flex-direction: column; gap: .3rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.st-preis strong { font-size: 1rem; }
.st-diagramm { margin-bottom: 1rem; }
.st-diagramm h3 { margin-bottom: .3rem; }
.st-legende { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; margin-bottom: .3rem; }
.st-legende i, .st-tip i { box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.st-legende i, .st-tip i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.st-svg { position: relative; }
.st-svg svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.st-raster { stroke: #e8e8e8; stroke-width: 1; }
.st-raster.null { stroke: #bdbdbd; }
.st-achse { font: 11px var(--schrift); fill: #7a8288; }
.st-kreuz { stroke: #9aa0a6; stroke-width: 1; stroke-dasharray: 3 3; }
.st-tip { position: absolute; top: 0; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: .4rem .55rem; font-size: .78rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); pointer-events: none; min-width: 130px; }
.st-tip div { display: flex; align-items: center; gap: .2rem; white-space: nowrap; }
.st-tip span { margin-left: auto; padding-left: .8rem; font-weight: 700; }
.st-tabelle th:first-child { position: sticky; left: 0; background: #fff; font-weight: 500; white-space: nowrap; }
.st-tabelle td { text-align: right; white-space: nowrap; }
.st-tabelle thead th { white-space: nowrap; font-size: .8rem; }
.st-best { font-weight: 800; background: #fff6d6; }
.rl-kopf { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.rl-reiter { display: inline-flex; border: 1px solid #ccc; border-radius: 7px; overflow: hidden; }
.rl-reiter a { padding: .5rem .9rem; text-decoration: none; color: var(--anthrazit); font-weight: 600; background: #fff; }
.rl-reiter a.an { background: var(--anthrazit); color: #fff; }
.rl-blaettern { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.rl-tabelle td.zahl, .rl-tabelle th.zahl { text-align: right; }
.rl-tabelle tr.ich td { background: #fde6e6; }
.rl-rang { font-weight: 800; width: 2.2em; }
.rl-name { display: inline-flex; align-items: center; gap: .45rem; }
.rl-name strong { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .rl-weg { display: none; }
  .rl-tabelle th, .rl-tabelle td { padding: .45rem .3rem; }
}
/* Gurt am Ninja (Farbe nach Einheiten im Land) */
#karte .gurtband .band { stroke: #fff; stroke-width: 1; }
#karte .gurtband { filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
#karte .gurtband.weiss .band { fill: #f4f4f4; stroke: #555; }
#karte .gurtband.blau .band { fill: #1f5fbf; }
#karte .gurtband.lila .band { fill: #6b2fa0; }
#karte .gurtband.braun .band { fill: #6b4226; }
#karte .gurtband.schwarz .band { fill: #111; }
#karte .gurtband .balken { fill: #111; }
#karte .gurtband.schwarz .balken { fill: var(--rot); }
.gurt-legende { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }

/* Replay (Inhaber 2026-09-25) */
.replay { display: grid; gap: 8px; }
.replay-kopf { display: flex; align-items: center; gap: 8px; }
.replay-kopf .replay-pos { flex: 1; font-size: .85rem; color: var(--leise, #666); font-variant-numeric: tabular-nums; }
.replay-kopf .knopf.klein { padding: 4px 10px; font-size: .85rem; }
.replay-text { margin: 0; padding: 0; list-style: none; min-height: 2.8em; }
.replay-text li { margin: 0; }
.replay-regler { width: 100%; accent-color: var(--rot); margin: 2px 0; }
.replay-knoepfe { display: flex; gap: 6px; }
.replay-knoepfe button { flex: 1; min-height: 42px; border: 1px solid #d5d5d5; border-radius: 6px; background: #fff; font-size: 1.05rem; cursor: pointer; color: #1a1a1a; }
.replay-knoepfe button.haupt { background: var(--rot); border-color: var(--rot); color: #fff; font-size: 1.2rem; }
.replay-tempo { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.replay-tempo span { margin-right: 4px; color: var(--leise, #666); }
.replay-tempo button { flex: 1; min-height: 34px; border: 1px solid #d5d5d5; border-radius: 6px; background: #fff; cursor: pointer; font-weight: 600; color: #1a1a1a; }
.replay-tempo button.an { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#spiel.im-replay .reiter { opacity: .45; pointer-events: none; }

/* Vertretung, Teams, Reaktionen, Abzeichen (Inhaber 2026-09-25) */
.vertretung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; background: #fff4d6; border: 1px solid #f0d58a; }
.vertretung span { flex: 1 1 200px; }
.teammarke { display: inline-block; min-width: 1.3em; text-align: center; font-weight: 800; font-size: .7rem; padding: 0 .25rem; border-radius: 4px; color: #fff; }
.teammarke.t1, .teamknopf.t1.an { background: #1f5fbf; border-color: #1f5fbf; }
.teammarke.t2, .teamknopf.t2.an { background: #c77700; border-color: #c77700; }
.teammarke.t3, .teamknopf.t3.an { background: #2a8a3e; border-color: #2a8a3e; }
.teammarke.t4, .teamknopf.t4.an { background: #7b2fa0; border-color: #7b2fa0; }
.teammarke.t5, .teamknopf.t5.an { background: #b3264a; border-color: #b3264a; }
.teammarke.t6, .teamknopf.t6.an { background: #3b3b3b; border-color: #3b3b3b; }
.teamwahl { flex-wrap: wrap; }
.teamwahl { display: inline-flex; gap: 4px; margin: 0 6px; }
.teamknopf { padding: 2px 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff; font-size: .8rem; cursor: pointer; }
.teamknopf.an { color: #fff; font-weight: 700; }
.teamknopf:disabled { cursor: default; opacity: .8; }
.reakt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rk { border: 1px solid #ddd; background: #fff; border-radius: 6px; padding: 1px 6px; font-size: .9rem; line-height: 1.5; cursor: pointer; }
.rk.an { background: #fff1c2; border-color: #e7c55a; }
.rk.plus { color: #888; font-size: .75rem; }
.rk.wahl { font-size: 1.1rem; }
.abzeichen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.abzeichen-liste li { display: flex; gap: 10px; align-items: center; }
.abzeichen-liste .abz-symbol { font-size: 1.6rem; width: 2rem; text-align: center; }
.abzeichen-liste li.fehlt { opacity: .4; filter: grayscale(1); }
.abz-zahl { font-weight: 800; color: var(--rot); }
.abz-leiste { margin-left: 6px; white-space: nowrap; }
.abz { font-size: .95rem; margin-right: 2px; }
.abz small { font-size: .65rem; font-weight: 700; vertical-align: super; }
.gebietinfo .infobild { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 3px solid; flex: none; }
/* Admin → Technik: PHP-Fehler und Aussetzer umbrechen statt seitlich überzustehen (Inhaber 2026-09-26) */
.fehlerlog { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; max-height: 260px; overflow: auto;
  font-size: .72rem; line-height: 1.4; background: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 8px; padding: 8px 10px; margin: 0; }
.fehlerliste { overflow-wrap: anywhere; padding-left: 1.1rem; }

/* Anleitung (Inhaber 2026-09-26) */
.anleitung h2 { margin-top: 0; }
.anleitung h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.anleitung ol, .anleitung ul { padding-left: 1.2rem; }
.anleitung li { margin-bottom: .45rem; }
.inhalt-liste ol { columns: 2 14rem; column-gap: 1.5rem; margin: .5rem 0 0; }
.box.anleitung[id] { scroll-margin-top: 70px; }
.mitte { text-align: center; }
.name-zeile { display: flex; gap: 6px; }
.name-zeile input { flex: 1; min-width: 0; }
.name-zeile .knopf { flex: none; padding-left: .7rem; padding-right: .7rem; font-size: 1.1rem; }
/* Admin: beendete Spiele aufklappbar und scrollend (Inhaber 2026-09-26) */
.spiele-alt { margin-top: .8rem; }
.spiele-alt summary { cursor: pointer; font-weight: 700; padding: .3rem 0; }
.spiele-alt-liste { max-height: 420px; overflow-y: auto; border: 1px solid #e3e3e3; border-radius: 8px; padding: 0 .6rem; margin-top: .4rem; }
#spiel.kamera-ganz .wurfanzeige { top: auto; bottom: .4rem; padding: .3rem .55rem; font-size: .72rem; }
#spiel.kamera-ganz .wurfanzeige > div:not(.wuerfelreihe):not(.erobert) { display: none; }   /* nur Würfel + „erobert“ – Text steht unten */
#spiel.kamera-ganz .wurfanzeige .w { transform: scale(.8); }
.wichtig-box { border: 2px solid var(--rot); background: #fff6f6; }
#karte .gruppen path.grenze-linie { stroke-width: 3.5; stroke-dasharray: 8 8; stroke-linecap: butt; }
#karte .gruppen path.grenze-linie.zwei { stroke-dashoffset: 8; }

/* Chat an Team / einzelne Spieler, Admin-Suche, privat (Inhaber 2026-09-26) */
.chatform-rahmen { display: grid; gap: .35rem; }
.chat-an-wahl { font: inherit; font-size: 16px; padding: .35rem .5rem; border: 1px solid #ccc; border-radius: 7px; background: #fff; max-width: 100%; }
.chat-an { margin-left: .35rem; font-weight: 700; }
.nachricht.team { border-left: 3px solid #1f5fbf; }
.nachricht.privat { border-left: 3px solid #7b2fa0; background: #f4ecfa; }
.suchzeile { display: flex; gap: .4rem; margin-bottom: .6rem; }
.suchzeile input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .4rem .6rem; border: 1px solid #ccc; border-radius: 7px; }
.seitenleiste-admin { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: .6rem; }
.privat-marke { font-size: .85em; margin-left: .25rem; }