/* Gemeinsame Gestaltung aller drei Seiten. Zwei Fassungen, umschaltbar über data-theme am : classic Oberfläche von Die Stämme, Pergament und braune Rahmen futuristic dunkles Lagebild, poliertes Metall mit blauem Schimmer und Bernstein als Leitfarbe Jede Seite nutzt dieselben Klassen, deshalb wirkt der Umschalter überall gleich. */ /* ---------- classic ---------- */ :root, [data-theme="classic"]{ --bg:#3b2a12; --bg-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%233b2a12'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%2345331a' stroke-width='1'/%3E%3C/svg%3E"); --panel:linear-gradient(#f4e4bc,#f4e4bc); --panel-solid:#f4e4bc; --panel-2:#eadcb4; --row:#f7edd2; --row-alt:#efe0b8; --row-hover:#fff6dc; --edge:#603000; --edge-soft:#c9b483; --edge-line:#ddcea5; --head:linear-gradient(#d8bd8a,#c1a264); --head-ink:#3f2100; --ink:#2b1d06; --ink-2:#5c4415; --muted:#7a6435; --accent:#8a5a12; --accent-ink:#f7ecd2; --accent-soft:rgba(138,90,18,.14); --good:#2f6b1f; --good-bg:#dfeccd; --bad:#9c2b1c; --bad-bg:#f2ddd6; --btn:linear-gradient(#f6e7bd,#dcc48a); --btn-hover:linear-gradient(#fff3d3,#e6d0a0); --btn-on:linear-gradient(#a97c33,#8a5a12); --bar:linear-gradient(#8a5a12,#603000); --bar-ink:#f4e4bc; --bar-dim:#e2caa0; --bar-edge:#2f1800; --field:#fffaf0; --shine:none; --glow:none; --title-fill:var(--bar-ink); --font:13px/1.45 Verdana,Geneva,"DejaVu Sans",sans-serif; --radius:3px; /* Kartenflächen */ --map-bg:#7c9a4e; --map-grid:rgba(0,0,0,.20); --map-grid-major:rgba(0,0,0,.58); --map-label:rgba(0,0,0,.55); --map-barb:#8d9482; --map-bonus:#d9c26a; --map-other:#a4372c; --map-none:#c8cbbc; --map-edge:rgba(0,0,0,.45); } /* ---------- futuristic ---------- Vorbild: technische Lagebilder mit tiefem Blauschwarz, Cyan als Leitfarbe, glänzenden Beschriftungen und schmalen Kanten. Bernstein bleibt als Warnfarbe. */ [data-theme="futuristic"]{ --bg:#04070d; --bg-image:radial-gradient(1200px 560px at 14% -14%, rgba(34,211,238,.16), transparent 62%), radial-gradient(1000px 480px at 86% -8%, rgba(56,132,255,.13), transparent 62%), radial-gradient(700px 380px at 50% 108%, rgba(20,184,166,.10), transparent 60%), linear-gradient(180deg,#050912,#03060b); --panel:linear-gradient(158deg,rgba(160,236,255,.035) 0%,rgba(60,150,200,.012) 22%,transparent 42%), linear-gradient(178deg,#0c1a28 0%,#08131f 55%,#050c15 100%); --panel-solid:#0a1622; --panel-2:rgba(45,212,238,.07); --row:transparent; --row-alt:rgba(90,200,235,.045); --row-hover:rgba(45,212,238,.13); --edge:rgba(72,214,246,.42); --edge-soft:rgba(72,214,246,.24); --edge-line:rgba(72,214,246,.14); --head:linear-gradient(100deg,rgba(34,211,238,.30),rgba(34,211,238,.06) 62%,transparent); --head-ink:#c9f6ff; --ink:#dff2fb; --ink-2:#9fc9e0; --muted:#6f93ac; --accent:#22d3ee; --accent-ink:#03121a; --accent-soft:rgba(34,211,238,.16); --warn:#ff9f1c; --good:#34e5b0; --good-bg:rgba(52,229,176,.14); --bad:#ff6b81; --bad-bg:rgba(255,107,129,.14); --btn:linear-gradient(180deg,rgba(72,214,246,.16),rgba(72,214,246,.04)); --btn-hover:linear-gradient(180deg,rgba(90,225,255,.28),rgba(72,214,246,.09)); --btn-on:linear-gradient(180deg,#4fe3fb,#12b6d8); --bar:linear-gradient(180deg,#0a1826,#050d16); --bar-ink:#eafcff; --bar-dim:#7fb6cf; --bar-edge:rgba(72,214,246,.28); --field:rgba(5,12,20,.85); --shine:inset 0 1px 0 rgba(210,248,255,.34), inset 0 -1px 0 rgba(0,0,0,.65), inset 1px 0 0 rgba(120,225,255,.12), inset -1px 0 0 rgba(120,225,255,.12); --glow:0 8px 26px rgba(0,0,0,.6), 0 0 26px rgba(34,211,238,.12); --title-fill:linear-gradient(180deg,#ffffff 6%,#a8ecff 52%,#4fc9e8 96%); --font:13px/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif; --radius:8px; --map-bg:#071018; --map-grid:rgba(72,214,246,.10); --map-grid-major:rgba(72,214,246,.28); --map-label:rgba(150,225,250,.55); --map-barb:#33465c; --map-bonus:#c99a35; --map-other:#c0392b; --map-none:#5f7d92; --map-edge:rgba(0,0,0,.55); } *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} html,body{height:100%} body{margin:0; background:var(--bg); background-image:var(--bg-image); background-attachment:fixed; color:var(--ink); font:var(--font); font-variant-numeric:tabular-nums} a{color:var(--accent)} :focus-visible{outline:2px solid var(--accent); outline-offset:1px} .wrap{max-width:1500px; margin-inline:auto; padding-inline:clamp(8px,2vw,18px)} /* ---------- Kopfzeile, auf allen Seiten gleich hoch ---------- */ .appbar{background:var(--bar); border-bottom:1px solid var(--bar-edge); box-shadow:var(--glow)} [data-theme="classic"] .appbar{border-bottom-width:2px} .appbar .wrap{min-height:52px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding-block:7px} .appbar h1{margin:0; font-size:19px; font-weight:700; letter-spacing:.04em; color:var(--bar-ink); background:var(--title-fill); -webkit-background-clip:text; background-clip:text} [data-theme="futuristic"] .appbar h1{color:transparent; text-shadow:0 0 22px rgba(130,195,255,.25)} .appbar .world{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bar-dim)} .appbar nav{margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; align-items:center} .appbar nav a{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bar-dim); text-decoration:none; border:1px solid var(--bar-edge); border-radius:var(--radius); padding:4px 11px; background:var(--btn); box-shadow:var(--shine)} [data-theme="classic"] .appbar nav a{color:var(--ink); border-color:#3f2100} .appbar nav a:hover{background:var(--btn-hover)} .appbar nav a.on{background:var(--btn-on); color:var(--accent-ink); border-color:var(--accent)} [data-theme="classic"] .appbar nav a.on{color:var(--accent-ink)} #theme-toggle{margin-left:4px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bar-dim); background:var(--btn); border:1px solid var(--bar-edge); border-radius:var(--radius); padding:4px 10px; box-shadow:var(--shine)} [data-theme="classic"] #theme-toggle{color:var(--ink); border-color:#3f2100} #theme-toggle:hover{background:var(--btn-hover)} #theme-toggle svg{width:14px; height:14px; flex:none} /* ---------- Kacheln mit Kennzahlen ---------- */ .facts{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0} .facts>div{display:grid; gap:1px; background:var(--panel); color:var(--ink); border:1px solid var(--edge); border-radius:var(--radius); padding:5px 12px 6px; min-width:130px; box-shadow:var(--shine)} .facts dt{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700} .facts dd{margin:0; font-size:19px; font-weight:700; line-height:1.15} [data-theme="futuristic"] .facts dd{text-shadow:0 0 18px rgba(130,195,255,.35)} [data-theme="futuristic"] .facts>div{border-color:rgba(160,212,255,.40)} [data-theme="futuristic"] .accent-num{font-size:23px; letter-spacing:-.01em} .facts .delta{font-size:11.5px; font-weight:700} /* ---------- Panels ---------- */ main.wrap{padding-block:12px 30px; display:grid; gap:12px} .grid{display:grid; gap:10px; grid-template-columns:repeat(12,1fr)} .panel{background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius); box-shadow:var(--shine), var(--glow); min-width:0; position:relative; overflow:hidden} [data-theme="futuristic"] .panel::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(190,225,255,.55),transparent)} .panel>h2{margin:0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--head-ink); padding:6px 11px; background:var(--head); border-bottom:1px solid var(--edge-soft); display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px} .panel>h2 .hint,.panel>h2 em{font-weight:400; font-size:11px; color:var(--muted); letter-spacing:.02em; text-transform:none; font-style:normal} .panel>h2 .right{margin-left:auto; display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center} .body{padding:9px 11px 11px} .scroll{overflow:auto; max-height:min(460px,64vh)} .scroll::-webkit-scrollbar{width:9px; height:9px} .scroll::-webkit-scrollbar-thumb{background:var(--edge-soft); border-radius:5px} .c3{grid-column:span 3} .c4{grid-column:span 4} .c5{grid-column:span 5} .c6{grid-column:span 6} .c7{grid-column:span 7} .c8{grid-column:span 8} .c12{grid-column:span 12} @media (max-width:1100px){ .c3,.c4,.c5{grid-column:span 6} .c6,.c7,.c8{grid-column:span 12} } @media (max-width:640px){ .c3,.c4,.c5,.c6{grid-column:span 12} } /* ---------- Bedienelemente ---------- */ button.tw,.tw{font:inherit; font-size:11.5px; font-weight:700; color:var(--ink); cursor:pointer; background:var(--btn); border:1px solid var(--edge); border-radius:var(--radius); padding:3px 9px; box-shadow:var(--shine)} button.tw:hover:not(:disabled){background:var(--btn-hover)} button.tw[aria-pressed="true"]{background:var(--btn-on); color:var(--accent-ink); border-color:var(--accent)} button.tw:disabled{opacity:.4; cursor:not-allowed} select,input[type="text"],input[type="search"]{font:inherit; font-size:11.5px; padding:2px 6px; color:var(--ink); background:var(--field); border:1px solid var(--edge); border-radius:var(--radius); max-width:min(320px,52vw)} label.pick{display:inline-flex; align-items:center; gap:5px; font-weight:400} label.pick>span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700} /* ---------- Tabellen ---------- */ /* Kopfzeile wie in der Rangliste des Spiels: jede Spalte ein eigenes umrandetes Kästchen mit schmalem Spalt dazwischen. Die Datenzeilen bleiben ohne senkrechte Linien, ihr Streifen liegt auf der Zeile und läuft deshalb durch die Spalten hindurch. */ table{width:100%; border-collapse:separate; border-spacing:2px 0; font-size:11.5px} th,td{padding:3px 6px; text-align:right; white-space:nowrap} td{border-bottom:1px solid var(--edge-line)} td.name{padding-right:10px} th{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--head-ink); font-weight:700; background:var(--head); border:1px solid var(--edge); border-radius:2px; position:sticky; top:0; z-index:1} [data-theme="classic"] th{text-shadow:0 1px 0 rgba(255,255,255,.35)} th.sortable{cursor:pointer; user-select:none} th.sortable:hover{color:var(--accent)} th.sortable::after{content:"\2195"; opacity:.35; margin-left:4px; font-size:9px} th[aria-sort="descending"]::after{content:"\25BC"; opacity:.95; color:var(--accent)} th[aria-sort="ascending"]::after{content:"\25B2"; opacity:.95; color:var(--accent)} th.l,td.l{text-align:left} tbody tr:nth-child(odd){background:var(--row)} tbody tr:nth-child(even){background:var(--row-alt)} tbody tr:hover td{background:var(--row-hover)} td.name{font-weight:700} td.rank{color:var(--muted)} .up{color:var(--good); font-weight:700} .down{color:var(--bad); font-weight:700} .na{color:var(--muted)} .group th{font-size:9.5px; letter-spacing:.12em; background:var(--head); color:var(--head-ink); text-align:center; position:static; padding-block:2px} .group th:empty{background:none; border-color:transparent} .empty{padding:10px 12px; color:var(--muted); font-size:12px} .pill{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:11.5px; padding:2px 9px; border:1px solid var(--edge); border-radius:999px; background:var(--panel-2)} .pill.ok{color:var(--good)} .pill.err{color:var(--bad)} .pill i{width:7px; height:7px; border-radius:50%; background:currentColor} [data-theme="futuristic"] .pill i{box-shadow:0 0 9px currentColor} .rows{display:grid; gap:6px} .row2{display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-size:11.5px} .row2 span{color:var(--muted)} .row2 b{font-weight:700} .meter{height:5px; background:var(--edge-line); border-radius:3px; overflow:hidden; margin-top:4px} .meter i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#ffd88a)} .legendrow{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11px; color:var(--muted); margin-top:7px} .legendrow i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px} footer{color:var(--muted); font-size:11px; border-top:1px solid var(--edge-line); padding-block:12px 22px; margin-top:6px} footer a{color:var(--accent)} /* ---------- Feinschliff der Fassung futuristic ---------- */ /* Messraster im Panel, Lichtreflex über die Fläche, Eckwinkel wie auf einem technischen Display. */ [data-theme="futuristic"] .facts>div,[data-theme="futuristic"] .panel{ background-image: linear-gradient(158deg,rgba(160,236,255,.035) 0%,rgba(60,150,200,.010) 20%,transparent 42%), repeating-linear-gradient(0deg,rgba(72,214,246,.05) 0 1px,transparent 1px 24px), repeating-linear-gradient(90deg,rgba(72,214,246,.05) 0 1px,transparent 1px 24px), linear-gradient(178deg,#0c1a28 0%,#08131f 55%,#050c15 100%); } [data-theme="futuristic"] .facts>div{position:relative; overflow:hidden} [data-theme="futuristic"] .facts>div::after{ background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.010) 41%,transparent 50%); } [data-theme="futuristic"] .facts>div::after,[data-theme="futuristic"] .panel::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(112deg,transparent 30%,rgba(190,245,255,.008) 38%, rgba(255,255,255,.016) 41%,rgba(190,245,255,.006) 44%,transparent 54%); } [data-theme="futuristic"] .panel{box-shadow:var(--shine), var(--glow)} [data-theme="futuristic"] .panel:hover{ box-shadow:var(--shine), 0 10px 30px rgba(0,0,0,.62), 0 0 30px rgba(34,211,238,.22); border-color:rgba(90,228,255,.62); } /* Kachelkopf als angeschrägter Balken, Beschriftung mit Glanzverlauf. */ [data-theme="futuristic"] .panel>h2{ position:relative; border-bottom:0; padding:7px 13px 6px; background:linear-gradient(180deg,#f6feff 4%,#a6ecff 46%,#39b8dd 96%); color:transparent; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 10px rgba(72,214,246,.35)); } [data-theme="futuristic"] .panel>h2::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,rgba(34,211,238,.34),rgba(34,211,238,.07) 58%,transparent); border-bottom:1px solid rgba(72,214,246,.45); clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%); } [data-theme="futuristic"] .panel>h2::after{ content:""; position:absolute; top:6px; right:9px; width:16px; height:9px; border-top:1px solid rgba(120,235,255,.7); border-right:1px solid rgba(120,235,255,.7); border-top-right-radius:3px; } /* Alles, was in der Überschrift sitzt, bekommt seine normale Schriftfarbe zurück. */ [data-theme="futuristic"] .panel>h2 *{-webkit-text-fill-color:initial; filter:none} [data-theme="futuristic"] .panel>h2 .hint,[data-theme="futuristic"] .panel>h2 em{ color:var(--muted); -webkit-text-fill-color:var(--muted); } [data-theme="futuristic"] .panel>h2 button.tw{color:var(--ink); -webkit-text-fill-color:var(--ink)} [data-theme="futuristic"] .panel>h2 button.tw[aria-pressed="true"]{ color:var(--accent-ink); -webkit-text-fill-color:var(--accent-ink)} [data-theme="futuristic"] th{background:rgba(34,211,238,.09); backdrop-filter:blur(2px); text-shadow:0 0 10px rgba(72,214,246,.35)} [data-theme="futuristic"] .facts dd{text-shadow:0 0 20px rgba(72,214,246,.45)} [data-theme="futuristic"] .facts>div{border-color:rgba(72,214,246,.40)} [data-theme="futuristic"] .accent-num{font-size:24px; letter-spacing:-.01em; background:linear-gradient(180deg,#ffffff 8%,#8ee9ff 55%,#2bb8de 98%); color:transparent; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 12px rgba(72,214,246,.5))} [data-theme="classic"] .accent-num{color:var(--accent)} [data-theme="futuristic"] .appbar h1{filter:drop-shadow(0 0 14px rgba(72,214,246,.45))} [data-theme="futuristic"] .scopebar{ background-image:linear-gradient(158deg,rgba(160,236,255,.035),transparent 38%), linear-gradient(178deg,#0c1a28,#060f1a); }