/* Finest LAN: Rahmen, Licht und Oberflächen bestehen nur aus CSS.
   Überschriften-Schrift: Morpheus (Kiwi Media, 1996, Shareware) – die Titelschrift von WoW.
   Nur ein Schnitt: font-weight 400 700 verhindert künstlich verdickte Buchstaben. */
@font-face {
  font-family: "Finest Display";
  src: url("fonts/finest-display.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #0b0e0d;
  --bg-top: #151916;
  --panel: #191d1a;
  --panel-deep: #111512;
  --panel-2: #252a24;
  --panel-high: #303025;
  --line: #49412f;
  --line-bright: #806a43;
  --text: #f3ead6;
  --muted: #c5b79a;
  --faint: #a99c81;
  --gold: #e6c276;
  --gold-bright: #f7dda3;
  --bronze: #bb8552;
  --silver: #c8cbd1;
  --copper: #d09768;
  --gold-soft: rgba(218, 167, 75, .16);
  --gold-wash: rgba(218, 167, 75, .055);
  --good: #a8d69f;
  --warn: #e9b773;
  --bad: #e39a87;
  --pvp: #efa993;
  --xp-start: #7565a7;
  --xp-end: #bba3e2;
  --t1: #c99a73;
  --t2: #c7d0d6;
  --t3: #f1cd7c;
  --t4: #efa16a;
  --radius: 5px;
  --gap: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Finest Display", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; background: linear-gradient(180deg, var(--bg-top), var(--bg) 280px); }
a { color: var(--gold); }
a:hover { color: var(--gold-bright); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* Kopf */
.top {
  display: flex; align-items: center; gap: 22px; padding: 12px 24px;
  border-bottom: 2px solid var(--line-bright);
  background: linear-gradient(180deg, var(--panel-high), var(--panel-deep));
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand > div:last-child { min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border: 2px ridge var(--line-bright); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--panel-high), var(--panel-deep));
  color: var(--gold-bright);
}
.brand-mark svg { width: 27px; height: 27px; }
/* Logo oben links (ersetzt den Text-Titel auf der Tafel) */
.brand-logo { display: block; width: auto; height: 132px; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand h1 {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gold-bright); font: 700 1.8rem/1.15 "Finest Display", Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
}
.brand p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; letter-spacing: .075em; text-transform: uppercase; }
.status { display: flex; align-items: center; gap: 20px; margin-left: auto; color: var(--muted); font-size: .94rem; white-space: nowrap; }
.status .players { color: var(--text); font-weight: 700; }
.status .live { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.dot.off { background: var(--bad); }
.clock { color: var(--gold-bright); font-size: 1.45rem; font-weight: 700; }
.join-link { color: var(--gold); font-weight: 700; text-decoration: none; }
.join-link:hover { text-decoration: underline; }

/* WoW-Fenster und Layout */
main { padding: var(--gap) 24px 22px; }
.board { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: var(--gap); align-items: start; }
.main-col, .side { display: grid; gap: var(--gap); min-width: 0; }
.panel {
  min-width: 0; overflow: hidden; border: 2px ridge var(--line-bright);
  border-radius: var(--radius); background: linear-gradient(145deg, var(--panel), var(--panel-deep));
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 43px; padding: 10px 15px 9px; border-bottom: 1px solid var(--line-bright);
  background: linear-gradient(180deg, var(--panel-high), var(--panel));
}
.panel-head h2 {
  margin: 0; color: var(--gold-bright); font: 700 1.16rem/1.2 "Finest Display", Georgia, "Times New Roman", serif;
  letter-spacing: .045em;
}
.panel-head span { min-width: 0; overflow: hidden; color: var(--muted); font-size: .78rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

/* Rangliste */
.table-wrap { min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  padding: 9px 11px; border-bottom: 1px solid var(--line-bright);
  color: var(--muted); font-size: .73rem; font-weight: 700; letter-spacing: .06em;
  text-align: right; text-transform: uppercase; white-space: nowrap;
}
th.l, td.l { text-align: left; }
td { padding: 9px 11px; border-bottom: 1px solid var(--line); color: var(--text); font-size: .95rem; text-align: right; white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--gold-wash); }
tbody tr.top1 { background: linear-gradient(90deg, var(--gold-soft), transparent 80%); }
tbody tr:last-child td { border-bottom: 0; }
.rank {
  display: inline-grid; place-items: center; width: 31px; height: 31px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--muted); font-weight: 800;
}
.rank.r1 { border-color: var(--gold-bright); background: var(--gold); color: var(--panel-deep); }
.rank.r2 { border-color: var(--silver); background: var(--silver); color: var(--panel-deep); }
.rank.r3 { border-color: var(--bronze); background: var(--bronze); color: var(--panel-deep); }
.who { display: flex; flex-direction: column; min-width: 0; }
.who b { display: block; max-width: 100%; overflow: hidden; font-size: 1.07rem; font-weight: 750; text-overflow: ellipsis; }
.who small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: .79rem; text-overflow: ellipsis; }
.lvl { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.lvl strong { min-width: 2ch; font-size: 1.22rem; text-align: right; }
.bar { width: 88px; height: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--panel-deep); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--xp-start), var(--xp-end)); }
.money { display: inline-flex; gap: 5px; }
.money .g { color: var(--gold-bright); }
.money .s { color: var(--silver); }
.money .c { color: var(--copper); }
td.pvp { color: var(--pvp); }
.fresh { color: var(--good); }
.stale { color: var(--warn); }
.old { color: var(--bad); }
.empty { padding: 40px 20px; color: var(--muted); text-align: center; }
.empty strong { display: block; margin-bottom: 7px; color: var(--text); font-size: 1.15rem; }

/* Rekorde */
.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.record { min-width: 0; padding: 12px 14px; background: var(--panel); }
.record:nth-child(4n + 2), .record:nth-child(4n + 3) { background: var(--panel-deep); }
.record .label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.record .label svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.record .value { margin-top: 4px; color: var(--gold-bright); font-size: 1.5rem; font-weight: 750; }
.record .holder { overflow: hidden; font-size: .87rem; text-overflow: ellipsis; white-space: nowrap; }

/* Neuigkeiten */
.feed { margin: 0; padding: 3px 9px 8px; list-style: none; }
.feed li { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .ico { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--muted); }
.feed .ico svg { width: 18px; height: 18px; }
.feed .txt { min-width: 0; color: var(--text); font-size: .86rem; overflow-wrap: anywhere; }
.feed .txt em { color: var(--gold-bright); font-style: normal; font-weight: 700; }
.feed .first { display: inline-block; margin-left: 5px; padding: 1px 5px; border: 1px solid var(--line-bright); border-radius: 3px; background: var(--gold-soft); color: var(--gold-bright); font-size: .72rem; font-weight: 700; }
.feed time { color: var(--faint); font-size: .75rem; white-space: nowrap; }
.feed li.msg { margin: 4px 0; border: 1px solid var(--line-bright); background: var(--gold-soft); }
.feed li.msg .ico { border-color: var(--gold); background: var(--gold); color: var(--panel-deep); }

/* Erfolge */
.ach-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 1px; background: var(--line); }
.ach-tile { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 6px 9px; background: var(--panel); }
.ach-tile:nth-child(even) { background: var(--panel-deep); }
.ach-tile.none { color: var(--faint); }
.ach-tile.none .badge { opacity: .55; }
.ach-tile .name { overflow: hidden; font-size: .83rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ach-tile .count { color: var(--muted); font-size: .77rem; }
.ach-tile.all .count { color: var(--good); }
.badge { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 3px; background: var(--panel-2); }
.badge svg { width: 15px; height: 15px; }
.tier1 { color: var(--t1); }
.tier2 { color: var(--t2); }
.tier3 { color: var(--t3); }
.tier4 { color: var(--t4); }

/* Tafel auf großen Bildschirmen: alles auf eine Bildschirmhöhe, nichts läuft unten raus.
   Gilt mit und ohne ?kiosk=1; nur die Tafel (body.board-page), nicht Mitmachen/Orga. */
@media (min-width: 1101px) {
  body.board-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  body.board-page .top { flex: none; padding-top: 10px; padding-bottom: 10px; }
  body.board-page main { flex: 1; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  body.board-page .board { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  body.board-page .main-col { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  body.board-page .rank-panel { display: flex; flex-direction: column; min-height: 0; }
  body.board-page .table-wrap { flex: 1; min-height: 0; overflow: auto; }
  body.board-page .side { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  body.board-page .side > .panel:last-child { min-height: 0; }
  body.board-page .feed { height: 100%; overflow: hidden; }
  body.board-page td { padding-top: 7px; padding-bottom: 7px; }
  body.board-page .ach-mini { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  body.board-page .ach-tile { padding-top: 5px; padding-bottom: 5px; }
  body.board-page .record { padding-top: 9px; padding-bottom: 9px; }
}

/* Ab Full-HD-Breite genau 8 Spalten: 39 Erfolge = 5 Reihen, passt unter die Rangliste. */
@media (min-width: 1700px) {
  body.board-page .ach-mini { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Kiosk (Raspberry Pi): kein Mauszeiger, kein Mitmachen-Link, Liste scrollt per Skript. */
body.kiosk { cursor: none; }
body.kiosk .join-link { display: none; }
body.kiosk .table-wrap { overflow: hidden; }

@media (min-width: 2400px) {
  html { font-size: 20px; }
  .board { grid-template-columns: minmax(0, 1fr) 550px; }
  body.board-page .ach-mini { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Schmale Bildschirme */
@media (max-width: 1100px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .top { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .brand-logo { height: 100px; }
  .status { gap: 13px; }
  main { padding: 14px 16px 24px; }
  body.kiosk { cursor: auto; }
  body.kiosk .table-wrap { overflow-x: auto; }
}
@media (max-width: 720px) {
  .brand h1 { font-size: 1.35rem; }
  .brand p { font-size: .7rem; }
  .brand-mark { width: 39px; height: 39px; }
  .brand-logo { height: 76px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .clock, .status .players, .hide-s { display: none; }
  th, td { padding-left: 6px; padding-right: 6px; }
  td { font-size: .88rem; }
  .rank { width: 27px; height: 27px; }
  th:first-child { width: 36px !important; }
  td.l { width: 100%; max-width: 0; overflow: hidden; }
  .who b { font-size: .96rem; }
  .who small { max-width: 40vw; font-size: .72rem; }
  .lvl { gap: 5px; }
  .lvl strong { font-size: 1.05rem; }
  .bar { display: none; }
  .ach-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ach-tile { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px; padding: 6px; }
  .badge { width: 22px; height: 22px; }
  .ach-tile .name { font-size: .76rem; }
  .feed li { grid-template-columns: 28px minmax(0, 1fr); }
  .feed time { grid-column: 2; }
}

/* Mitmachen und Admin */
.doc { max-width: 850px; margin: 0 auto; padding: 28px 18px 64px; }
.doc h2 { margin: 34px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line-bright); color: var(--gold-bright); font: 700 1.42rem/1.3 "Finest Display", Georgia, "Times New Roman", serif; }
.doc p, .doc li { color: var(--text); line-height: 1.55; }
.doc code, .doc kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); color: var(--gold-bright); font-size: .92em; }
.steps { display: grid; gap: 12px; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; padding: 15px 18px 15px 58px; border: 2px ridge var(--line-bright); border-radius: var(--radius); background: linear-gradient(145deg, var(--panel), var(--panel-deep)); counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; top: 14px; left: 16px; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line-bright); background: var(--gold-soft); color: var(--gold-bright); font-weight: 800; }
.steps b { color: var(--gold-bright); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--gold-bright); border-radius: var(--radius); background: linear-gradient(180deg, var(--gold-bright), var(--bronze)); color: var(--panel-deep); cursor: pointer; font: inherit; font-weight: 750; text-decoration: none; }
.btn:hover { color: var(--panel-deep); }
.btn svg { width: 18px; height: 18px; }
.btn.ghost { border-color: var(--line-bright); background: var(--panel-2); color: var(--text); }
.note { padding: 14px 16px; border-left: 3px solid var(--bronze); background: var(--panel); color: var(--muted); }
.form-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.form-row input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--line-bright); border-radius: var(--radius); background: var(--panel-deep); color: var(--text); font: inherit; }
.admin-table { width: 100%; }
.admin-table td, .admin-table th { text-align: left; }
.admin-table button { padding: 6px 10px; border: 1px solid var(--line-bright); border-radius: var(--radius); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; font-size: .85rem; }
.admin-table button.danger { color: var(--bad); }
.msg-line { min-height: 1.4em; color: var(--muted); }

/* ---------- WoW-Fensterstil (Farben aus einem Spiel-Screenshot gemessen) ---------- */
:root {
  --wow-yellow: #ffd100;          /* GameFontNormal */
  --wow-frame: #5c5b57;           /* äußere Metall-Linie */
  --wow-frame-dark: #1f1e1b;      /* dunkle Fuge */
  --wow-frame-mid: #43423e;       /* innere Metall-Linie */
  --wow-window: #070506;          /* Fenstergrund, fast schwarz */
}

/* Kleine Metallniete in den Ecken */
.panel, .panel-head { --rivet: radial-gradient(circle, #bdb8b1 0 1.3px, #6b6863 1.9px 2.8px, #141311 3.3px, transparent 3.9px); }

/* Rahmen: helle Außenlinie, dunkle Fuge, mittlere Innenlinie, dann schwarz */
.panel {
  position: relative;
  padding: 3px;
  border: 2px solid var(--wow-frame);
  border-radius: 4px;
  background:
    var(--rivet) left 4px bottom 4px / 9px 9px no-repeat,
    var(--rivet) right 4px bottom 4px / 9px 9px no-repeat,
    var(--wow-window);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--wow-frame-dark), inset 0 0 0 3px var(--wow-frame-mid);
}

.panel-head {
  position: relative;
  padding-left: 20px;
  padding-right: 46px;
  border-bottom: 1px solid #2a2926;
  background:
    var(--rivet) left 1px top 1px / 9px 9px no-repeat,
    var(--wow-window);
}
.panel-head h2 { color: #fff; text-shadow: 0 1px 2px #000; }
.panel-head span { color: var(--wow-yellow); }

/* Schliessen-X wie im Spiel: abgerundetes Quadrat, graurosa Metallrand,
   dunkelroter Grund, gelb-goldenes X (nur Deko) */
.panel-head::after {
  content: "";
  position: absolute; top: 50%; right: 8px;
  width: 26px; height: 26px; margin-top: -13px;
  border: 2px solid #9d8987; border-radius: 7px;
  background:
    linear-gradient(45deg, transparent 38%, #f5c81c 38% 62%, transparent 62%) center / 15px 15px no-repeat,
    linear-gradient(-45deg, transparent 38%, #ffd83b 38% 62%, transparent 62%) center / 15px 15px no-repeat,
    radial-gradient(circle at 50% 40%, #8e1d12, #6a130c 55%, #470a07);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #2a0503, inset 0 1px 1px rgba(255, 255, 255, .18);
}

/* Beschriftungen in WoW-Gelb */
th, .record .label, .ach-tile .count { color: var(--wow-yellow); }
.record .label svg { color: var(--wow-yellow); }

/* Kopfleiste als Metallkante */
.top {
  background: var(--wow-window);
  border-bottom: 2px solid var(--wow-frame);
  box-shadow: 0 1px 0 #000, inset 0 -1px 0 var(--wow-frame-dark), inset 0 -3px 0 var(--wow-frame-mid);
}

/* Knöpfe wie UIPanelButton: rot mit Goldrand, gelbe Schrift */
.btn, .admin-table button {
  border: 1px solid #c9a44a; border-radius: 4px;
  background: linear-gradient(180deg, #a3261a, #6b0f08 55%, #4a0904);
  color: var(--wow-yellow); text-shadow: 0 1px 1px #000;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn:hover, .admin-table button:hover { color: #fff; background: linear-gradient(180deg, #bd3122, #7d140b 55%, #540a05); }
.btn.ghost {
  border-color: #7a7a7a; color: #d8d8d8;
  background: linear-gradient(180deg, #4a4a4a, #262626 55%, #1a1a1a);
}
.admin-table button.danger { color: #ff8c7a; }

/* Schritte auf der Mitmachen-Seite im selben Rahmen */
.steps > li {
  border: 2px solid var(--wow-frame);
  border-radius: 4px; background: var(--wow-window);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--wow-frame-dark), inset 0 0 0 3px var(--wow-frame-mid);
}
.steps > li::before { border-color: #c9a44a; color: var(--wow-yellow); background: #2a0805; }
.doc h2 { color: #fff; }
.form-row input { border: 2px solid var(--wow-frame-dark); background: #050505; }

/* ---------- Kopf: Countdown links, Logo Mitte, Zahlen rechts ---------- */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.top .brand { justify-self: center; }
.brand-logo { height: 150px; }
.hud { min-width: 0; }
.hud-left { justify-self: start; min-width: 300px; }
.hud-right { justify-self: end; display: flex; gap: 26px; align-items: flex-start; }
.hud-label { display: flex; align-items: center; gap: 6px; color: var(--wow-yellow); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.hud-big { display: block; color: #fff; font-size: 1.9rem; line-height: 1.15; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.hud-sub { display: block; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.stat-clock .hud-big { color: var(--gold-bright); }
.stat-clock .join-link { color: var(--gold); }

/* Fortschrittsbalken der LAN, wie eine WoW-Erfahrungsleiste */
.hud-bar { width: 100%; max-width: 360px; height: 14px; margin: 6px 0 4px; border: 2px solid var(--wow-frame); border-radius: 3px; background: #050505; box-shadow: 0 0 0 1px #000; overflow: hidden; }
.hud-bar i { display: block; height: 100%; background: linear-gradient(180deg, #b58cff, #6a3fc4 60%, #4b2a91); transition: width 1s linear; }

/* Klassen-Icon statt Platznummer, Platz klein unten rechts */
.rank-icon { position: relative; display: inline-block; width: 40px; height: 40px; vertical-align: middle; }
.rank-icon img { display: block; width: 40px; height: 40px; }
.rank-icon .rank { position: absolute; right: -6px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; font-size: .7rem; line-height: 1; box-shadow: 0 0 0 1px #000; }

@media (max-width: 1100px) {
  .top { grid-template-columns: 1fr 1fr; }
  .top .brand { grid-column: 1 / -1; grid-row: 1; }
  .brand-logo { height: 110px; }
  .hud-left { min-width: 0; }
  .hud-right { gap: 14px; }
  .hud-big { font-size: 1.3rem; }
}
@media (max-width: 720px) {
  .top { grid-template-columns: 1fr; }
  .hud-left, .hud-right { justify-self: stretch; }
  .hud-right { justify-content: space-between; }
  .stat { align-items: flex-start; text-align: left; }
  .brand-logo { height: 90px; }
  .hud-big { font-size: 1.1rem; }
  .stat-clock { display: none; }
}