/* arena – app-spezifische Styles. Tokens, Kopfzeile, Karten, Buttons, Formulare, Dialoge usw. kommen aus glaze/glaze.css (nicht ändern).
   Nur Tokens aus Glaze: keine eigenen Farben, Radien, Schriftgrößen oder z-index-Zahlen (Glaze 1.5). */

.sprite { position: absolute; }

/* Kleine Helfer statt Inline-Styles */
.flush { margin: 0; }
.flush-top { padding-top: 0; }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); }
.page-h { margin: 0 0 var(--sp-7); }
.new-h { margin: var(--sp-4) 0 var(--sp-1); }
.spacer-v { height: var(--sp-4); }
.wrap { white-space: normal; }
.inline { display: inline; }
.center { display: grid; place-items: center; }
.empty-line { padding: var(--sp-4) var(--sp-1); }
.more-row { margin-top: var(--sp-5); text-align: center; }
.auto-w { width: auto; }
.narrow { max-width: 320px; } .narrow-sm { max-width: 240px; }
.search-grow { flex: 1; min-width: 220px; } .sort-w { width: 200px; }
.select-all { user-select: all; }
.ic-space { width: 17px; flex: none; }
.note-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-8); }
.grade { font-size: var(--fs-title); }
.err-title { text-align: center; }
main small { display: block; }   /* Kleinbeschriftung steht in arena fast immer als zweite Zeile unter einem Titel */
main .upd small, main .clog small { display: inline; }   /* außer in Updates und Änderungsprotokoll aus glaze: dort steht sie hinter dem Wert */

/* Server-Kacheln */
.tile { --tc: var(--unknown); --c: var(--tc); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); transition: transform var(--t), border-color var(--t), background var(--t); cursor: pointer; }
.tile.ok { --tc: var(--ok); } .tile.warn { --tc: var(--warn); } .tile.crit { --tc: var(--crit); }
.tile.crit { border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); }
.tile .ico { --c: var(--tc); }
.tt .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* glaze-ok: Untertitel in Server-Kacheln einzeilig */
.bar-row .bl { opacity: .75; }   /* glaze-ok: Nebenbalken der Ressourcenanzeige */
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.new-tile { place-items: center; text-align: center; border-style: dashed; color: var(--muted); min-height: 150px; align-content: center; }
.new-tile .ic { width: 28px; height: 28px; color: var(--accent-t); }
.new-tile:hover { color: var(--text); }

/* Formulare (Ergänzungen) */
textarea { font-family: var(--font-mono); font-size: var(--fs-sm); resize: vertical; }
.switch { padding-top: 5px; }   /* glaze-ok: Schalter in .fields auf Höhe der Eingabefelder */
.ok-msg { color: var(--ok-t); font-size: var(--fs-md); }

/* Server-Kopf, Reiter */
.srv-head { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; margin-bottom: var(--gap); }
.srv-head h1 { font-size: var(--fs-xl); letter-spacing: -.02em; }

/* Dialoge: Glaze liefert <dialog>; hier nur Breiten und Anordnung */
dialog.wide { width: min(780px, 94vw); }
dialog.xl { width: min(980px, 94vw); }
dialog[open].stack { display: grid; gap: var(--sp-6); align-content: start; }
dialog p { white-space: pre-line; }
dialog.xl textarea { min-height: 55vh; }

/* Konsole: Farben aus glaze.css; immer dunkel, deshalb lösen die Akzent-Tokens hier dunkel auf */
.cmd-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.cmd-row input { font-family: var(--font-mono); }
.conf-list, .gs-bar { overscroll-behavior: contain; }

/* Listen */
.li .ic { color: var(--muted); }   /* glaze-ok: Dateimanager: Dateisymbole gedämpft */
.li .dir .ic, .li.is-dir .ic { color: var(--accent-t); }   /* glaze-ok: Dateimanager: Ordner in Akzentfarbe */
.thumb { width: 44px; height: 44px; border-radius: var(--r-md); object-fit: cover; background: var(--card); border: 1px solid var(--line); flex: none; }
.mod-card { display: flex; gap: var(--sp-6); align-items: flex-start; }
.mod-card .grow { flex: 1; min-width: 0; }
.mod-card h3 { font-size: var(--fs-base); }
.mod-card p { color: var(--muted); font-size: var(--fs-sm); margin: 3px 0 var(--sp-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Spiel-Einstellungen */
.gs-group { padding: 0; overflow: hidden; }
.gs-group > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8); cursor: pointer; font-weight: 620; }
.gs-group > summary::-webkit-details-marker { display: none; }
.gs-group > summary .ic { color: var(--accent-t); width: 17px; height: 17px; }
.gs-group > summary .chev { margin-left: auto; transition: transform var(--t-fast); color: var(--muted); }
.gs-group[open] > summary .chev { transform: rotate(90deg); }
.gs-group .fields { padding: var(--sp-1) var(--sp-8) var(--sp-8); }
.gfield { display: grid; gap: 5px; align-content: start; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid transparent; }
.gfield.dirty { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.gfield.locked { opacity: .55; }
.gfield .lbl { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.gfield .def { background: none; border: 0; padding: 0; color: var(--accent-t); font: inherit; font-size: var(--fs-xs); cursor: pointer; text-align: left; }
.gs-bar { position: sticky; top: var(--sp-3); z-index: var(--z-sticky); display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); }
.gs-bar input[type=search] { flex: 1; min-width: 200px; }

/* Datei-Upload */
.drop-card { position: relative; }
.drop-card.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.drop-card.dropping::after { content: "Dateien oder Ordner hier ablegen"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(3px); font-weight: 650; font-size: var(--fs-lg); color: var(--accent-t); pointer-events: none; }
.upl { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.upl .bar { height: 9px; }
.conf-list { max-height: 180px; overflow: auto; font: var(--fs-xs)/1.5 var(--font-mono); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 5%, transparent); }
.conf-list.codes { max-height: none; font-size: var(--fs-md); }

/* Datei-Auswahl */
.selbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 4%, transparent); position: sticky; top: var(--sp-3); z-index: var(--z-sticky); backdrop-filter: blur(10px); }
.selbar.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--card-hi)); }
.selbar .lbl2 { font-size: var(--fs-sm); font-weight: 600; }
.selbox, .selbar input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; margin: 0; }

/* Wortmarke */
.brand .ver { display: none; }   /* glaze-ok: Version steht im Über-Dialog, nicht in der Kopfzeile */

/* Ereignisse */
.evi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--c, var(--muted));
  background: color-mix(in srgb, var(--c, var(--muted)) 15%, transparent); }
.evi .ic { width: 15px; height: 15px; color: inherit; }
.ev.join .evi { --c: var(--ok-t); } .ev.ready .evi { --c: var(--ok-t); } .ev.crash .evi { --c: var(--crit-t); } .ev.refused .evi { --c: var(--warn-t); }   /* glaze-ok: Ereignisarten von arena (Spieler, Absturz, abgelehnt) */
.ev.start .evi, .ev.stop .evi { --c: var(--accent-t); } .ev.action .evi, .ev.install .evi, .ev.backup .evi { --c: var(--accent-t); }   /* glaze-ok: Ereignisarten von arena (Start, Stopp, Aktionen) */
.filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-5); }
.filters input[type=search] { flex: 1; min-width: 180px; }
.filters select { width: auto; min-width: 150px; }
.daysep { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding: var(--sp-5) var(--sp-1) var(--sp-1); text-transform: uppercase; letter-spacing: .06em; }
.chart { height: 130px; }   /* glaze-ok: Verlaufsdiagramme mit fester Höhe (viewBox 600×130), Schrift skaliert nicht mit */
.online-list { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.chan { display: grid; gap: var(--sp-5); }
table.t td.r, table.t th.r { text-align: right; }

/* Rechte */
.list[data-edit="0"] .li .row button { display: none; }   /* glaze-ok: Benutzerliste: Knöpfe nur im Bearbeiten-Modus */
.list[data-manage="0"] .li button { display: none; }   /* glaze-ok: Listen ohne Verwaltungsrecht */
.permblock { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-3); }
.permgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px var(--sp-7); }
.permgrid .switch { padding-top: 3px; font-size: var(--fs-sm); }

/* Spiele-Kacheln */
.gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-6); }
.gtile { --gc: var(--accent); display: grid; gap: var(--sp-5); justify-items: start; text-align: left; padding: var(--sp-7); border-radius: var(--r-xl); cursor: pointer; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--line); transition: transform var(--t), border-color var(--t), background var(--t); }
.gtile:hover { transform: translateY(-3px); background: var(--card-hi); border-color: color-mix(in srgb, var(--gc) 55%, var(--line)); }
.gtile:focus-visible { outline: 2px solid var(--gc); outline-offset: 2px; }
.gico { width: 58px; height: 58px; border-radius: var(--r-lg); display: grid; place-items: center; color: var(--gc);
  background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 32%, transparent); }
.gico .ic { width: 40px; height: 40px; }
.gtile b { font-weight: 640; font-size: var(--fs-base); letter-spacing: -.01em; }
.gtile small { margin-top: calc(-1 * var(--sp-3)); }
.gico .mono, .ico .mono { width: 86%; height: 86%; display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }   /* glaze-ok: Spielsymbole als Maske (--m) */
.gtitle { display: flex; align-items: center; gap: var(--sp-6); margin: var(--sp-4) 0 var(--gap); }
.gtitle .gico { width: 52px; height: 52px; } .gtitle .gico .ic { width: 36px; height: 36px; }
.gtitle h1 { font-size: var(--fs-xl); letter-spacing: -.02em; }

/* Host-Übersicht */
.host-sub { margin: calc(-1 * var(--sp-2)) 0 var(--sp-6); }
.kvl { display: grid; gap: 7px; margin: var(--sp-6) 0 0; padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.kvl > div { display: flex; justify-content: space-between; gap: var(--sp-5); }
.kvl dt { color: var(--muted); } .kvl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Sicherheit */
.sec-top { display: flex; gap: var(--gap-lg); align-items: center; flex-wrap: wrap; }
.gauge { width: 118px; height: 118px; flex: none; }
.gauge .bg { fill: none; stroke: color-mix(in srgb, var(--text) 10%, transparent); stroke-width: 10; }
.gauge .fg { fill: none; stroke: var(--gc, var(--ok)); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .8s; }
.gauge text { fill: var(--text); text-anchor: middle; }
.gauge text.sub-t { fill: var(--muted); }
.sevrow { border-bottom: 1px solid var(--line); }
.sevrow:last-child { border-bottom: 0; }
.sevrow > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-5); padding: 9px var(--sp-1); cursor: pointer; }
.sevrow > summary::-webkit-details-marker { display: none; }
.sevrow > summary b { font-weight: 560; flex: 1; min-width: 0; }
.sevrow .more { padding: 0 var(--sp-1) var(--sp-5) 46px; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.sevrow .more code { font-size: var(--fs-xs); overflow-wrap: anywhere; color: var(--text); }
.catname { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: var(--sp-7) 0 var(--sp-1); }

/* Hinweisleiste */
.notice { display: flex; align-items: center; gap: var(--sp-5); justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-md); border: 1px solid var(--line); font-size: var(--fs-md); }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.notice.bad { border-color: color-mix(in srgb, var(--crit) 50%, var(--line)); background: color-mix(in srgb, var(--crit) 10%, transparent); }

/* Anmeldung und Einrichtung (Glaze 6.13, 6.14) */
#app { width: 100%; }   /* Seiten ohne Kopfzeile: volle Breite, sonst schrumpft der Assistent auf seinen Inhalt */
.onboard { margin-bottom: var(--gap); }   /* glaze-ok: Abstand der Karte „Erste Schritte“ auf der Übersicht */