/* Cold Start - Prototyp-Oberflaeche. Optik: Brettspiel auf einem Tisch. Bewusst zurueckhaltend, damit die Mechanik beurteilt wird und nicht die Grafik. */ /* Das Sechseckraster steht an zwei Stellen (Fenster und Kartendeck) und deshalb hier einmal. */ :root { --hexraster: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='47'%3E%3Cpath d='M13.5 0.5 27 8v15L13.5 30.5 0 23V8zM40.5 0.5 54 8v15L40.5 30.5 27 23V8z' fill='none' stroke='%23c9a227' stroke-width='1'/%3E%3C/svg%3E"); --wood-1: #3a2a1d; --wood-2: #24190f; --felt: #1b2119; --ink: #e8e2d5; --ink-dim: #a49b89; --ink-mute: #736b5c; --panel: #171310; --panel-edge: #33291f; /* --you ist die Farbe des SPIELERS und seit 2026-09-29 waehlbar (Profil -> Farbe). Sie gehoert allem, was "das ist meins" heisst: Einheiten, Marke, Lebensbalken, Zonen, HUD. Sie gehoert NICHT der Oberflaeche. Ein Knopf ist gruen, weil er zustimmt, nicht weil er dem Spieler gehoert - dafuer ist --ok da (Bastian, 2026-09-29: "Das aendern der Spielerfarbe soll keine Button veraendern"). */ --you: #7ea36b; --you-d: #56743f; --ok: #7ea36b; --ok-d: #56743f; --foe: #b4553f; --foe-d: #7d3626; --gold: #c9a227; --t-open: #6f7a55; --t-light: #7d8a5c; --t-heavy: #45543a; --t-road: #8a7f63; --t-village: #86695a; --t-square: #7b776c; --t-city: #5f5d58; --t-street: #4a4845; --t-water: #3f5d6b; --t-bridge:#6d6250; --radius: 6px; /* Systemschrift wie vor 2026-09-24. Inter und Black Ops One wurden probiert und waren schlechter lesbar (siehe kartendesign.md). */ --font: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; /* Anzeigeschrift fuer Namen, Zahlen, Ueberschriften. Black Ops One (2026-09-24) war schlechter lesbar - vorerst die Systemschrift kraeftig. */ --font-display: var(--font); --display-weight: 800; } * { box-sizing: border-box; } /* Muss vor allen Layoutregeln stehen: sonst ueberschreibt ein spaeteres display:grid das hidden-Attribut und das Element faengt weiter Klicks ab. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { font-family: var(--font); color: var(--ink); /* Schwere geoelte Eichenplatte. Die Farbe darunter traegt, bis das Bild geladen ist, und sorgt dafuer, dass es nie grell aufblitzt. */ /* Die Tischplatte selbst liegt als gerendertes Bild im Brett-SVG (assets/decor.js). Diese Farbe traegt nur ganz aussen und beim Laden. */ background: #5e4c3b; display: flex; flex-direction: column; overflow: hidden; } /* ------------------------------------------------------------- Kopfzeile */ .topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; background: linear-gradient(rgba(32,24,15,.94), rgba(20,15,9,.96)); border-bottom: 1px solid #4a3a26; box-shadow: 0 2px 12px rgba(0,0,0,.5); } .brand { display: flex; align-items: center; gap: 10px; } /* Logo: Das Emblem (Drohne im geteilten Ring) haengt groesser als die Kopfzeile nach unten heraus, der Schriftzug steht in der Leiste. */ .brand { position: relative; padding-left: 59px; min-height: 24px; } .brand-emblem { position: absolute; left: 0; top: 50%; width: 52px; height: auto; transform: translateY(-34%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); pointer-events: none; } .brand-word { display: block; height: 12px; width: auto; } .brand-text { display: flex; align-items: baseline; font-weight: 600; letter-spacing: .4px; } .brand-text em { font-style: normal; color: var(--ink-mute); font-weight: 400; font-size: 12px; margin-left: 10px; } .turnbox { font-size: 14px; color: var(--ink-dim); display: flex; gap: 8px; align-items: center; } .turnbox b { color: var(--ink); } .turnbox .sep { color: var(--ink-mute); } .turnbox.is-enemy #phase-label { color: var(--foe); } .turnbox.is-you #phase-label { color: var(--you); } /* --------------------------------------------------------------- Layout */ .layout { flex: 1 1 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr) 240px; gap: 8px; padding: 6px 8px 8px; min-height: 0; } .col { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a3a26 transparent; } .panel { background: linear-gradient(rgba(28,23,18,.9), rgba(20,16,12,.92)); border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03); } .panel h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .muted { color: var(--ink-mute); } .small { font-size: 12px; } /* -------------------------------------------------------------- Nachschub */ .bar { height: 7px; background: #0d0a07; border-radius: 4px; overflow: hidden; border: 1px solid #2c241b; } .bar i { display: block; height: 100%; transition: width .35s ease; } .supply-you .bar i { background: linear-gradient(90deg, var(--you-d), var(--you)); } .supply-enemy .bar i { background: linear-gradient(90deg, var(--foe-d), var(--foe)); } .hint { font-size: 11px; color: var(--ink-mute); margin: 6px 0 0; line-height: 1.45; } .hint b { color: var(--ink-dim); } /* Hinweis-Box (Bastian, 2026-10-02): ein Kasten um einen erklaerenden Satz. Bewusst klein gehalten - Rahmen, etwas Luft, gedaempfte Schrift, sonst nichts. Fuer die Stellen, an denen bisher ein nackter Satz stand und zu leicht uebersehen wurde. .ist-warn, wenn etwas fehlt oder nicht geht. */ .hinweis { margin: 10px 0 0; padding: 9px 12px; border: 1px solid var(--panel-edge); border-radius: var(--radius); background: rgba(0, 0, 0, .22); font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); } .hinweis b { color: var(--ink); font-weight: 600; } /* Ein Link in einem Hinweis ist golden wie jeder Link im Spiel. Die Regel stand nur an `.hinweis` - die drei Geschwister aus den Fenstern (`.pf-hinweis` im Profil, `.qm-hinweis` beim Quartiermeister, `.md-hinweis`) fielen durch und zeigten das Browser-Blau. Aufgefallen am 2026-10-08 am Link zur Hilfsadresse, der neben lauter gedaempftem Text leuchtend blau stand; derselbe Fehler traf vorher schon den Verweis aufs Impressum, nur hat ihn niemand gemeldet. Eine Regel fuer alle vier, nicht vier Regeln: der naechste Hinweis erbt sie dann von selbst. */ .hinweis a, .pf-hinweis a, .qm-hinweis a, .md-hinweis a { color: var(--gold); } .hinweis.ist-warn { border-color: #5a4330; background: rgba(90, 67, 48, .16); } /* ------------------------------------------------------------ Spielfeld */ .board-wrap { position: relative; display: grid; place-items: center; min-height: 0; } .board-frame { position: absolute; inset: 0; padding: 4px 0 8px; } #board { width: 100%; height: 100%; overflow: visible; /* die Tischplatte reicht bis an den Fensterrand; die Seitenleisten liegen per z-index darueber */ } /* Kacheln der Tischszene. Farben kommen aus TERRAIN_RGB in app.js, weil die Seitenflaechen daraus abgedunkelt berechnet werden. */ .tile-shadows polygon { fill: #000; opacity: .55; } .tile-side { stroke: none; } .tile-felt { fill: #1f3a27; stroke: none; } .table-bg, .decor-mini { pointer-events: none; } .tile-side-shade { stroke: none; pointer-events: none; } .tile-edge { stroke: rgba(255,238,214,.78); stroke-width: .6; stroke-linecap: round; pointer-events: none; } .tile-gloss { stroke: none; pointer-events: none; } .tile-top { stroke: rgba(0,0,0,.45); stroke-width: .8; stroke-linejoin: round; } .tile-sheen { fill: url(#sheen); pointer-events: none; } .drone-shadow { fill: #000; opacity: .28; pointer-events: none; } .unit-drop { fill: #000; opacity: .38; } .hex-zone-you { fill: var(--you); opacity: .16; pointer-events: none; } /* Nach der Aufstellung bleibt von der eigenen Zone nur diese Kante. */ .hex-zone-line { fill: none; stroke: var(--you); stroke-opacity: .45; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .hex-zone-foe { fill: var(--foe); opacity: .16; pointer-events: none; } /* Das Einkommensband wird seit 2026-10-04 als Kante gezeichnet, nicht als Flaeche - vier Reihen Goldschleier waeren die halbe Brettflaeche, derselbe Fehler wie bei der Aufstellungszone am 2026-09-30. `.hex-center` (die alte Flaeche) ist damit ersatzlos entfallen; niemand zeichnet sie mehr. */ .hex-band-line { fill: none; stroke: var(--gold); stroke-opacity: .40; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 5; pointer-events: none; } .hex-move { fill: #b9e6a0; opacity: .38; cursor: pointer; stroke: #dff5d0; stroke-width: 1.4; } .hex-move:hover { opacity: .6; } .hex-deploy { fill: var(--gold); opacity: .32; cursor: pointer; stroke: #ffe28a; stroke-width: 1.4; } .hex-deploy:hover { opacity: .55; } .hex-spot { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 3; opacity: .7; } /* Lauerdrohne, Minenfeld, Nebel, Hinterhalt (2026-10-14). Nur Umrisse und ein heller Schleier - das Brett darunter bleibt lesbar. Klickdurchlaessig, damit Einheiten und Ziele darunter erreichbar bleiben. */ .hex-nebel, .hex-lauer, .hex-mine, .hex-hinterhalt { pointer-events: none; } .hex-nebel { fill: #d9dde0; fill-opacity: .42; stroke: #eef1f2; stroke-width: 1.5; stroke-opacity: .6; } .hex-lauer { fill: none; stroke: #7cc4e0; stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .75; } .hex-lauer.is-mitte { stroke-width: 2.5; stroke-dasharray: none; } /* Abfangdrohne (01.11.2026): eigener Schirm gruen, aufgeklaerter feindlicher rot */ .hex-abfang { fill: #7ee08a; fill-opacity: .06; stroke: #7ee08a; stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .85; pointer-events: none; } .hex-abfang.is-feind { fill: #ff7a6b; stroke: #ff7a6b; } .hex-abfang.is-mitte { stroke-width: 2.5; stroke-dasharray: none; } .hex-mine { fill: #c0632d; fill-opacity: .18; stroke: #e0823f; stroke-width: 2; stroke-dasharray: 6 3; } .hex-hinterhalt { fill: none; stroke: #9bc06a; stroke-width: 2.5; stroke-dasharray: 1 4; stroke-linecap: round; } /* Drohnenkarten (2026-10-17): Zielmarkierung, Blickfeld der Echtzeitübertragung, eigene Drohne mit Ausweichmanöver oder Rückkehr */ .hex-markiert, .hex-echtzeit, .hex-drohnenschutz { pointer-events: none; } .hex-markiert { fill: #e04a3a; fill-opacity: .14; stroke: #ff6a55; stroke-width: 2.5; stroke-dasharray: 8 3 2 3; } .hex-echtzeit { fill: #5fd0c0; fill-opacity: .07; stroke: #5fd0c0; stroke-width: 1; stroke-opacity: .55; } .hex-drohnenschutz { fill: none; stroke: #c9b8ff; stroke-width: 2; stroke-dasharray: 3 3; } /* Bewegungsbremse (2026-10-24): Feld unter gegnerischer Drohnenaufklaerung - eigene Bodeneinheiten brauchen dort +1 Bewegung. Feine Punktlinie, damit sie unter Lauer- und Markierungsringen lesbar bleibt. */ .hex-ueberwacht { fill: #d6a74a; fill-opacity: .05; stroke: #d6a74a; stroke-width: 1.2; stroke-opacity: .5; stroke-dasharray: 1 4; pointer-events: none; } /* Unterdrueckungsfeuer (2026-10-19): die Einheit liegt fest. Gedeckte Querschraffur statt eines Rings - die Marke soll nicht mit der roten Zielmarkierung verwechselt werden, die auf demselben Feld liegen kann. */ /* Lichtschein einer Detonation (19.10.2026): additiv, damit er das Gelaende AUFHELLT statt es zu ueberdecken. screen statt lighten - lighten liesse dunkle Stellen unberuehrt und waehlte nur den helleren Kanal; screen rechnet beide zusammen und wirkt damit wie Licht. */ .fx-licht { mix-blend-mode: screen; pointer-events: none; } .hex-unterdrueckt { pointer-events: none; fill: #8a8f6a; fill-opacity: .2; stroke: #d8d58a; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; } /* Der angreifbare Gefechtsstand (assets/hq.js). Er traegt die Klassen einer Einheit (.unit-mini.targetable), damit der Ring dieselbe Regel trifft - hier steht nur, dass man ihn anklicken kann. */ .hq-ziel { cursor: pointer; } .hq-ziel .mini-ring { pointer-events: none; } /* Die Marke ist sonst klickdurchlaessig (.marker, weiter unten). Als Ziel muss sie Klicks annehmen - sonst liegt der Ring da und nichts passiert (Bastian, 2026-10-12: "man kann es nicht anklicken"). */ .marker.hq-ziel { pointer-events: auto; } .frontline { stroke: var(--foe); stroke-width: 3; opacity: .55; stroke-dasharray: 9 6; } .unit { cursor: pointer; } .unit-plate { stroke-width: 1.5; } .unit-you .unit-plate { fill: #2c3a24; stroke: var(--you); } .unit-foe .unit-plate { fill: #3a221b; stroke: var(--foe); } .unit.sel .unit-plate { stroke-width: 3; stroke: var(--gold); } .unit.targetable .unit-plate { stroke: #ffcf4d; stroke-width: 3; } .unit.spent .unit-plate { opacity: .55; } .unit-icon-you { fill: #cfe0c0; } .unit-icon-foe { fill: #eec8bd; } .hp-back { fill: #0c0a07; } .hp-fill-you { fill: var(--you); } .hp-fill-foe { fill: var(--foe); } .stat-text { font: 600 9px var(--font); fill: #efe8da; } .name-text { font: 600 8px var(--font); fill: rgba(255,255,255,.72); } .aura { fill: none; stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .55; } .aura-intercept { stroke: #6fb3d0; } /* "Luftraum oeffnen": die Abfangzone wirkt gerade nicht. Nicht weg - man soll weiter sehen, WO sie steht, nur eben als erloschen. */ .aura-intercept.ist-aus { stroke: #4b5a62; stroke-dasharray: 5 7; opacity: .45; } .aura-jam { stroke: #b58ad0; } .aura-spot { stroke: var(--gold); } /* Vorschau beim Aufstellen: derselbe Kreis, nur deutlicher als Absicht erkennbar - laenger gestrichelt und etwas kraeftiger. */ .aura.ist-vorschau { opacity: .9; stroke-width: 2; stroke-dasharray: 8 6; } /* ------------------------------------------------------------- Handkarten */ .hand { display: flex; flex-direction: column; gap: 7px; } .card { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 7px 9px; background: linear-gradient(#241d16, #191410); border: 1px solid #3b3025; border-radius: 5px; cursor: pointer; transition: border-color .12s, transform .12s, background .12s; text-align: left; } .card:hover { border-color: var(--gold); transform: translateX(-2px); } .card.sel { border-color: var(--gold); background: linear-gradient(#302517, #221a12); } .card.disabled { opacity: .4; cursor: not-allowed; } .card.disabled:hover { border-color: #3b3025; transform: none; } .card-icon { width: 30px; height: 26px; } .card-icon svg { width: 100%; height: 100%; fill: var(--ink-dim); } .card-body { min-width: 0; } .card-name { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-sub { display: block; font-size: 10.5px; color: var(--ink-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-cost { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 3px; background: #0f0c08; border: 1px solid var(--gold); color: var(--gold); font-size: 12px; font-weight: 700; } .card-cost.free { border-color: #3b3025; color: var(--ink-mute); } /* Die Wirkungszeile darf umbrechen - sie ist der eigentliche Inhalt der Karte. */ .card-sub.eff, .card .card-sub { white-space: normal; } /* ------------------------------------------------------- Karten-Sprechblase */ #cardtip { position: fixed; z-index: 60; width: 258px; padding: 11px 13px; background: linear-gradient(#241d16, #17120e); border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); pointer-events: none; /* sonst flackert der Hover */ } #cardtip .tip-name { font-size: 13.5px; font-weight: 600; } #cardtip .tip-head { font-size: 10.5px; color: var(--ink-mute); margin-top: 1px; } #cardtip .tip-eff { font-size: 12px; color: var(--gold); font-weight: 600; margin: 9px 0 0; line-height: 1.4; } #cardtip .tip-desc { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #2a2219; } #cardtip .tip-cost { font-size: 11px; color: var(--ink-mute); margin-top: 8px; } #cardtip .tip-block { font-size: 11px; color: #d08a8a; margin-top: 5px; } /* Steht der Grund allein in der Tafel (grosse Handkarten), traegt er keinen Abstand nach oben und darf etwas groesser sein - es gibt nichts mehr, wovon er sich absetzen muesste. */ #cardtip .tip-block.tip-nur { margin-top: 0; font-size: 12.5px; } /* -------------------------------------------------------------- Auswahl */ .preview { margin-top: 10px; padding: 9px; background: #100d09; border: 1px solid #38291a; border-radius: 5px; } .preview h3 { margin: 0 0 6px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); } .pv-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 1.5px 0; } .pv-row span { color: var(--ink-mute); } .pv-total { margin-top: 5px; padding-top: 5px; border-top: 1px solid #2a2219; font-weight: 700; } .pv-kill { color: #ffcf4d; } /* Durchbruch (2026-10-18): nur der Knopf "Durchbruch starten"; die Werte gehen beim Ueberfahren oder Fokus als Hinweis UEBER dem Knopf auf. */ .db-feld { position: relative; margin-top: 10px; } .db-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; margin: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility 0s linear .12s; pointer-events: none; } .db-feld:hover .db-pop, .db-feld:focus-within .db-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .12s, transform .12s, visibility 0s; } .pv-warn { color: var(--foe); } /* -------------------------------------------------------------- Aktionen */ .actions { display: flex; flex-direction: column; gap: 7px; } .btn { padding: 9px 12px; border-radius: 5px; border: 1px solid transparent; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; } .btn-primary { background: linear-gradient(#3e5130, #2b3a20); border-color: var(--ok-d); color: #e2eed8; } .btn-primary:hover { background: linear-gradient(#4a6139, #344527); } .btn-primary:disabled { opacity: .45; cursor: not-allowed; } .btn-ghost { background: transparent; border-color: #3b3025; color: var(--ink-dim); } .btn-ghost:hover { border-color: var(--gold); color: var(--ink); } /* ------------------------------------------------------------- Feuerplan */ /* Die Ziele in Reichweite (Bastian, 2026-10-08). Loest die gestapelten .preview-Bloecke ab; .preview bleibt fuer den Durchbruch am Gefechtsstand, der nur EINE Moeglichkeit zeigt und keine Liste ist. */ .fp { margin-top: 10px; background: #100d09; border: 1px solid #38291a; border-radius: 5px; overflow: hidden; } .fp-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 9px; background: #16110b; border-bottom: 1px solid #2a2219; } .fp-kopf h3 { margin: 0; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); } /* "SCHADEN" ist die Ueberschrift der Zahlenspalte und steht deshalb im Kopf, buendig ueber den Zahlen - nicht unter jeder einzelnen. */ .fp-kopf b { font-size: 9px; letter-spacing: .6px; color: var(--ink-mute); font-weight: 600; } .fp-ziel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 9px; border-bottom: 1px solid #201a13; cursor: pointer; } .fp-ziel:last-child { border-bottom: 0; } .fp-ziel:hover { background: #17120c; } .fp-ziel:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; } .fp-ziel.ist-offen { background: #1b150d; cursor: default; } .fp-wer { min-width: 0; } /* Kopf aus dem Einheitenblatt im Feuerplan (2026-10-28): die Kachel etwas kleiner, damit vier Ziele noch in die Spalte passen. */ .fp-wer .bl-kopf { gap: 8px; } .fp-wer .bl-gatt { width: 34px; height: 31px; border-radius: 6px; } .fp-wer .bl-gatt .bl-sym { width: 23px; height: 20px; } .fp-wer .bl-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-wer .bl-waffe { font-size: 10px; } .fp-wer .bl-klasse { font-size: 10px; line-height: 1.35; } .fp-zahl { align-self: center; } .fp-leben { grid-column: 1 / -1; } .fp-leben .bl-leben { margin-top: 6px; } .fp-zahl { text-align: right; font-size: 17px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #ffcf4d; white-space: nowrap; } /* Der Balken misst den Schaden an den Trefferpunkten des Ziels. Seine Breite setzt app.js ueber data-breit als element.style - als Attribut im Markup waere sie von der Inhaltsrichtlinie gesperrt (style-src 'self'). */ .fp-marken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .fp-marke { font-size: 9.5px; font-weight: 600; letter-spacing: .3px; padding: 1px 5px; border-radius: 3px; border: 1px solid #3b3025; color: var(--ink-dim); } .fp-marke.ist-warn { border-color: var(--foe-d); color: var(--foe); } .fp-marke.ist-gut { border-color: #6b5a1f; color: #ffcf4d; } .fp-rechnung { grid-column: 1 / -1; margin-top: 7px; padding-top: 6px; border-top: 1px dashed #2a2219; } .fp-r { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; padding: 1px 0; } .fp-r span { color: var(--ink-mute); } .fp-r b { font-variant-numeric: tabular-nums; white-space: nowrap; } .fp-r b.plus { color: var(--ok); } .fp-r b.minus { color: var(--foe); } /* Kassenzettel (2026-10-28): Grundwert neutral, Summe abgesetzt */ .fp-r.fp-grund span { color: var(--ink-dim); } .fp-r b.fp-zufall { color: var(--ink-dim); font-weight: 700; } .fp-r.fp-summe { margin-top: 4px; padding-top: 4px; border-top: 1px solid #3b3025; font-size: 12px; } .fp-r.fp-summe span { color: var(--ink); font-weight: 600; } .fp-r.fp-summe b { color: #ffcf4d; font-size: 14px; } .fp-tun { grid-column: 1 / -1; width: 100%; margin-top: 8px; } /* ------------------------------------------------------------ Protokoll */ /* Neu gefasst 2026-10-08 (Bastian: "uebersichtlicher"). Vorher eine Zeile je Eintrag, alle gleich aussehend, die Rundenmarke nur durch Goldschrift kenntlich. Jetzt: die Runde ist eine Trennlinie mit Seitenangabe, jeder Eintrag traegt ein Zeichen fuer seine Art und einen Rand in der Parteifarbe. Die Art kommt vom Server (Battle::log), die Oberflaeche raet sie nicht aus dem Text. */ .log { flex: 1 1 auto; overflow-y: auto; font-size: 11.5px; line-height: 1.45; color: var(--ink-dim); scrollbar-width: thin; scrollbar-color: #3b3025 transparent; } .pl-runde { display: flex; align-items: center; gap: 7px; margin: 9px 0 5px; } .pl-runde:first-child { margin-top: 0; } .pl-runde b { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold); font-weight: 700; white-space: nowrap; } .pl-runde i { flex: 1 1 auto; height: 1px; background: #2a2219; } .pl-runde em { font-size: 9.5px; font-style: normal; color: var(--ink-mute); } .pl-nach { font-size: 10px; color: var(--ink-mute); padding: 0 0 3px 5px; } .pl-z { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 0 6px; padding: 2.5px 0 2.5px 5px; border-left: 2px solid transparent; } .pl-z.ist-mein { border-left-color: var(--you); } .pl-z.ist-feind { border-left-color: var(--foe); } .pl-ico { font-size: 10px; text-align: center; color: var(--ink-mute); line-height: 1.6; } .pl-z.ist-verlust .pl-ico { color: var(--foe); } .pl-z.ist-ende { color: var(--ink); font-weight: 600; } .pl-z.ist-ende .pl-ico { color: var(--gold); } /* --------------------------------------------------------------- Hinweis */ .toast { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: #2a1512; border: 1px solid var(--foe); color: #f0d6cf; padding: 8px 15px; border-radius: 5px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.5); z-index: 20; } /* Wartezustand: der Klick ist angekommen, der Server antwortet noch nicht. */ /* is-locked: waehrend einer Aktion samt Wiedergabe keine neuen Eingaben. is-busy: erst nach 350 ms Wartezeit auf den Server - dann abblenden. */ body.is-locked .card, body.is-locked .unit { pointer-events: none; } body.is-busy .board-frame { cursor: progress; } body.is-busy #board { opacity: .82; transition: opacity .15s ease; } .wait-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; background: #1d1810; border: 1px solid var(--gold); color: var(--ink-dim); padding: 7px 14px; border-radius: 5px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.5); z-index: 20; } .spinner { width: 13px; height: 13px; border: 2px solid #4a3a26; border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .overlay { position: fixed; inset: 0; background: rgba(8,6,4,.85); display: grid; place-items: center; z-index: 50; } .overlay-card { background: linear-gradient(#211a13, #15100b); border: 1px solid var(--gold); border-radius: 8px; padding: 28px 34px; text-align: center; max-width: 420px; } /* Sechseckraster oben in den groesseren Fenstern - dieselbe Zier wie auf der Kartenrueckseite, in "Deck ansehen" und in "Neues Spiel" (Bastian, 2026-09-29: "grundsaetzlich kann das Spiel noch ein wenig mehr Zier gebrauchen"). Kleine Hinweisfenster bleiben schlicht - dort waere das Raster mehr Unruhe als Schmuck; sie tragen .ov-schlicht. */ .overlay-card { position: relative; overflow: hidden; } /* Das Schliessen-Kreuz oben rechts in einem Fenster (Bastian, 2026-10-08: "ich moechte im Multiplayer, Singleplayer und auf der Turnierkarte oben rechts ein Schliessen-Kreuz wie auf allen anderen Karten auch. Der Abbrechen-Button entfaellt dann"). EINE Klasse fuer alle drei - vorher hatte jedes Fenster seine eigene (.dk-close, .st-close, .fr-close, .qm-druck-x). Das Kreuz sieht ueberall gleich aus, also gehoert es auch an eine Stelle. z-index ueber dem Sechseckraster (.overlay-card::before): ohne das liegt die Zier auf dem Knopf, und der Zeiger trifft ins Leere. */ /* `.overlay-card > .ov-x` und nicht nur `.ov-x`: weiter unten steht `.overlay-card > * { position: relative }` (damit der Inhalt ueber dem Sechseckraster liegt). Beide haben dieselbe Spezifitaet, also gewinnt die spaetere - das Kreuz stand dadurch als gewoehnlicher Absatz oben LINKS im Text. Von der Pruefung gefangen (sh/erf/kreuz.js), nicht vom Auge. */ .overlay-card > .ov-x { position: absolute; top: 14px; right: 16px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--panel-edge); border-radius: var(--radius); background: rgba(0, 0, 0, .25); color: var(--ink-dim); font-size: 20px; line-height: 1; cursor: pointer; } .ov-x:hover { color: var(--ink); border-color: var(--ink-mute); } .ov-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .overlay-card::before { content: ''; position: absolute; inset: -20px -30px auto; height: 150px; pointer-events: none; background: var(--hexraster) 0 0 / 54px 47px repeat; opacity: .12; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } /* Dieselbe Zier zum Anhaengen an eine Flaeche, die KEIN Fenster ist - im Kartendeck fehlte sie ganz (Bastian, 2026-10-02). Ohne negative Raender, damit der Kasten kein overflow: hidden braucht; dort liegen Karten, die beim Ueberfahren herausragen duerfen. */ .zier-hex { position: relative; } .zier-hex::before { content: ''; position: absolute; inset: 0 0 auto; height: 150px; pointer-events: none; background: var(--hexraster) 0 0 / 54px 47px repeat; opacity: .12; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } .zier-hex > * { position: relative; } /* Schlichte Fenster und solche, die ihr Raster selbst mitbringen. */ .overlay-card.ov-schlicht::before, .overlay-card.dk-view-card::before { content: none; } .overlay-card > * { position: relative; } .overlay-card h2 { margin: 0 0 10px; font-size: 20px; } /* ----------------------------------------------- Sicherheitsabfrage Das Fenster fuer "Wirklich zuruecksetzen?" (CSFrage in guard.js). Es loest confirm() des Browsers ab - siehe die Begruendung dort. Bewusst schlicht (ov-schlicht, kein Sechseckraster): es ist eine Rueckfrage, kein Auftritt. Es liegt ueber allem, auch ueber dem Gefechtsende und dem Paket. */ /* Hinweisfenster (CSTip in guard.js) - loest das title-Attribut des Browsers ab, das in Systemschrift und Systemfarbe erscheint und sich nicht gestalten laesst. Aussehen wie die Menuetafel: dunkler Verlauf, feine goldene Kante. Ueber allem, auch ueber der Sicherheitsabfrage - ein Hinweis, der hinter dem Fenster liegt, das ihn ausgeloest hat, ist keiner. */ .cs-tip { position: fixed; z-index: 95; max-width: 280px; padding: 7px 11px; border: 1px solid rgba(201, 162, 39, .55); border-radius: 6px; background: linear-gradient(#241d16, #17120e); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); color: var(--ink); font: 400 12px/1.45 var(--font); pointer-events: none; /* sonst flackert der Hover unter dem Kasten */ } .cs-tip[hidden] { display: none; } /* Der grosse Hinweis: eine kleine Tafel statt einer Zeile (Bastian, 2026-10-03). Gebaut wird er in guard.js aus einzelnen Feldern, nicht aus Markup - deshalb stehen hier Klassen und kein freies Layout. */ .cs-tip.ist-gross { max-width: 320px; padding: 11px 14px 12px; } /* Mit Bild wie die Tafel des Erfolgs: Zeichen links, Worte rechts (Bastian, 2026-10-03). Breiter als ohne, weil links 46 px wegfallen. */ .cs-tip.hat-bild { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; max-width: 370px; } .cs-tip-bild { flex: none; width: 46px; height: 46px; } .cs-tip-bild > * { width: 46px !important; height: 46px !important; } .cs-tip-bild svg { width: 100%; height: 100%; } .cs-tip-kopf { font: 600 13.5px var(--font); color: var(--gold); } /* Dieselben Abstaende wie in der Tafel des Erfolgs (Bastian, 2026-10-04: "gleich die Ansicht im Popup an"): Unterzeile 2 px unter dem Titel, Satz 4 px darunter. */ .cs-tip-sub { margin-top: 2px; font: 600 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); } .cs-tip-text { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); } .cs-tip-lohn { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(201, 162, 39, .22); font-size: 12px; color: var(--ink-mute); } .cs-tip-lohn b { font: 700 15px var(--font); color: var(--gold); } /* Die Gaben als Bild statt als Textzeile (Bastian, 2026-10-06): je Gabe ein kleines Bild und der Name daneben. UNTEREINANDER, nicht nebeneinander. Mit Umbruch sah es bei fuenf Gaben so aus, als gehoerten die letzten beiden zusammen - die Namen sind verschieden lang, und der Umbruch faellt dann irgendwo. Eine Spalte liest sich ruhig, und mehr als zwei Gaben hat ohnehin keine Stufe. */ .cs-gaben { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .cs-gabe { display: flex; align-items: center; gap: 9px; max-width: 100%; } /* KEIN Kasten unter den Stuecken (Bastian, 2026-10-06: "mir gefaellt nicht, dass alles auf einem schwarzen Kasten steht"). Medaillon, Rahmen, Symbol und Farbe bringen ihre eigene Form mit; ein Quadrat darunter macht aus acht verschiedenen Dingen acht gleiche Kacheln. Was bleibt, ist das Beschneiden - die Miniatur braucht es. */ /* QUER, nicht quadratisch (Bastian, 2026-10-06: "bei den Erfolgen kann man die Miniatur nicht erkennen, die muessen wir groesser machen"). Die Miniaturen sind 768x576 und liegend: ein Panzer ist knapp doppelt so breit wie hoch. In einem quadratischen Feld bleibt deshalb die Haelfte der Hoehe leer, und was uebrig bleibt, ist ein Fleck. Das Feld gilt fuer ALLE Gaben, auch die runden - sonst faengt jeder Name an einer anderen Stelle an. Es hat weiterhin keinen Grund und keinen Rahmen, die Breite ist also nur Luft. */ .cs-gabe-bild { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 40px; overflow: hidden; } .cs-gabe-bild > svg, .cs-gabe-bild > img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Das Medaillon braucht WENIGER als das volle Feld (Bastian, 2026-10-14: "das problem hier ist das verdient den rahmen verdeckt"). medal() liefert ein : der Rahmen zeichnet absichtlich ueber seine viewBox hinaus, damit er im Profil ueber dem Portraet liegt. Auf 100 % des Feldes gesetzt, ragt dieser Ueberstand unten aus der Zeile heraus - und dort beginnt neun Pixel spaeter die Marke "VERDIENT". Sie lag damit auf dem Rahmen. Darum 82 %: der Ueberstand hat jetzt Platz IM Feld. Abschneiden waere die falsche Antwort gewesen - dann fehlte dem Rahmen genau der Rand, der ihn zum Rahmen macht. */ .cs-gabe-bild > svg.pf-medal { width: 82%; height: 82%; } /* Die Miniatur als Ausschnitt. 'height: auto' ist hier keine Bequemlichkeit, sondern noetig: vorher standen Breite UND Hoehe auf 152 % eines quadratischen Felds - das 4:3-Bild wurde also um ein Drittel in die Hoehe gezogen. Mit 125 % Breite fuellt der Inhalt des mittleren Modells etwa drei Viertel des Felds; die breitesten (Challenger, Leopard) passen noch hinein, die hoechsten (Radspaeher) werden oben um wenige Pixel beschnitten. Die Mitte des Inhalts liegt ueber alle 36 Modelle gemittelt bei 50 % der Breite und 57 % der Hoehe - genau die holt die Verschiebung in die Feldmitte. */ /* Der Goldstreifen bleibt KLEIN (Bastian, 18.10.2026: „die goldstreifen werden hier zu gross dargestellt. von der groesse eher wie im menue"). Die Grundregel darueber zieht jedes Bild auf das volle Feld; bei 58 px Breite war der Barren dreimal so gross wie im Hauptmenue (18 x 8) und damit das groesste Stueck in der Reihe - obwohl er die unscheinbarste Gabe ist, die jeder Erfolg mitbringt. 28 x 12 ist dieselbe Groesse wie in der Freundesliste und trifft das Seitenverhaeltnis der Datei (256 x 109, also 2,35:1) auf zwei Prozent genau - gestreckt wird nichts. */ .cs-gabe-bild > img.cs-gabe-gold { width: 28px; height: 12px; } .cs-gabe-bild > img.cs-gabe-mini { position: absolute; left: 50%; top: 50%; width: 125%; height: auto; transform: translate(-50%, -57%); } .cs-gabe-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cs-gabe-wort { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 11.5px var(--font); color: var(--ink-mute); } /* Die Stufe einer Einheitenkarte. Eigene Zeile, weil alle Stufen einer Karte gleich heissen - angehaengt wuerde sie als Erstes abgeschnitten. */ .cs-gabe-stufe { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 10.5px var(--font); color: var(--ink-mute); opacity: .75; } /* Verdient: die Stuecke bekommen Farbe und der Name wird heller - vorher sind sie eine Aussicht, nachher Besitz (Bastian, 2026-10-06). Gedaempft wird mit Saettigung und Helligkeit, nicht mit Transparenz: auf dem dunklen Grund wuerden die Stuecke sonst stumpf statt zurueckhaltend. */ .cs-gaben .cs-gabe-bild { filter: grayscale(.55) brightness(.78); } .cs-gaben.ist-da .cs-gabe-bild { filter: none; } .cs-gaben.ist-da .cs-gabe-wort { color: var(--ink-dim); } .cs-gabe-farbe { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--h), var(--d)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); } /* Ein ganzes Farbpaket in der Gabenreihe (Bastian, 18.10.2026): die fuenf Farben ueberlappend, wie beim Quartiermeister (.qm-k-farben). Kleiner als eine einzelne Farbe, sonst sprengen fuenf Kreise das Feld. */ .cs-gabe-farbreihe { display: flex; align-items: center; } .cs-gabe-farbreihe i { width: 14px; height: 14px; border-radius: 50%; margin-left: -4px; background: linear-gradient(135deg, var(--h), var(--d)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); } .cs-gabe-farbreihe i:first-child { margin-left: 0; } .cs-gabe-karte { width: 26px; height: 26px; fill: none; stroke: var(--ink-mute); stroke-width: 1.4; } .cs-gabe-platz { width: 22px; height: 22px; border-radius: 3px; background: var(--panel-edge); } .cs-tip-fuss { margin-top: 6px; font-size: 11.5px; color: var(--ink-mute); } /* "Verdient" und "Noch nicht verdient" als MARKE statt als grauer Zeile (Bastian, 2026-10-06: "verdient und nicht verdient bitte als Hinweis anzeigen"). Der Zustand ist die Auskunft, nach der man die Tafel ueberhaupt aufmacht - als letzte graue Zeile las sie sich wie eine Fussnote. Golden nur, wenn es wirklich verdient ist. */ .cs-tip-fuss.ist-marke { /* 14 statt 9 Pixel: die Marke steht oft unter einer Gabenreihe, und deren Medaillons tragen einen ueberstehenden Rahmen. Neun Pixel waren knapp bemessen - zusammen mit dem Ueberstand reichte es fuer eine Ueberdeckung. */ display: inline-block; margin-top: 14px; padding: 3px 9px; border: 1px solid var(--panel-edge); border-radius: 999px; font: 600 10.5px var(--font); letter-spacing: .05em; text-transform: uppercase; } .cs-tip-fuss.ist-marke.ist-da { border-color: rgba(201, 162, 39, .45); background: rgba(201, 162, 39, .12); color: var(--gold); } .cs-tip-fuss.ist-marke.ist-offen { color: var(--ink-mute); } /* Ladenware: wie "noch nicht verdient" gedaempft, aber mit einem Hauch Farbe - es ist zu haben, nur nicht umsonst. */ .cs-tip-fuss.ist-marke.ist-laden { color: var(--ink-dim); } .cs-frage { z-index: 90; } .cs-frage-karte { max-width: 380px; } .cs-frage-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-dim); } .cs-frage-knoepfe { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .cs-frage-knoepfe .btn { min-width: 116px; } /* Der Knopf, der etwas wegwirft: Warnfarbe statt der gruenen Zustimmung. Die Vorwahl liegt trotzdem auf "Abbrechen" - wer blind Enter drueckt, verliert nichts. */ .btn-weg { background: linear-gradient(#5a2a20, #431f17); border-color: #8a4030; color: #ffd2c6; } .btn-weg:hover, .btn-weg:focus-visible { background: linear-gradient(#6d3326, #52261c); border-color: #b4553f; } /* ---------------------------------------------------------- Gefechtsende EIN Dialog fuer Einzel- und Mehrspieler (Bastian, 2026-09-29): Ausgang, Abrechnung, Erfahrungsbalken, neue Erfolge. Am 15.10.2026 im Breitformat neu aufgeteilt (Bastian, 2026-10-14: "so ist es zu hoch, das Fenster. Es muss mehr richtung breitbild gehen"): Kopfbild, der Titel liegt darin Stufenband, mittig und schmal drei Spalten: Lage | Abrechnung | Erfolge Knoepfe 820 px sind die groesste Breite, die bei 1280 px Fensterbreite noch Luft laesst; darunter fallen die Spalten untereinander, und der Dialog sieht aus wie frueher. */ .overlay-card.ov-ende { max-width: 820px; width: 100%; padding: 24px 28px 20px; text-align: left; } .ov-ende h2 { text-align: center; font-size: 30px; margin-bottom: 8px; } .ov-ende.is-sieg h2 { color: #ded0a0; text-shadow: 0 0 20px rgba(201, 162, 39, .3); } .ov-ende.is-niederlage h2 { color: #c69382; } .ov-ende > p { text-align: center; margin-top: 8px; margin-bottom: 16px; } /* Das Kopfbild sitzt im Anschnitt und laeuft unten in die Karte aus, damit der Titel darin stehen kann, ohne eine Kante zu schneiden. */ .ov-bild { margin: -24px -28px 12px; height: 240px; overflow: hidden; border-radius: 10px 10px 0 0; -webkit-mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .4) 80%, transparent 100%); mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .4) 80%, transparent 100%); } .ov-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .ov-ende .ov-bild:not([hidden]) + h2 { margin-top: -86px; position: relative; text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9); } .ov-ende.is-niederlage .ov-bild img { filter: saturate(.3) brightness(.72); } /* Goldener Schein wie bei "Neuer Erfolg" und der Kiste (erfolg.css .ne-karte, Bastian, 2026-10-19) - zwei Lagen: eng und hell, weit und weich. NUR beim Sieg ("Den Schein gibt es natuerlich nicht" bei der Niederlage). */ .overlay-card.ov-ende.is-sieg { border-color: var(--gold); box-shadow: 0 0 14px rgba(232, 196, 90, .45), 0 0 48px rgba(232, 196, 90, .22), 0 20px 60px rgba(0, 0, 0, .6); } /* Der unterlegene General (2026-10-19): Bild unveraendert, aber ohne Farbe, dunkler, ein wenig gesenkt und geneigt - wie ein gesenkter Kopf. Name und Rang treten zurueck. */ .ov-kopf.is-unterlegen .ov-kopf-bild { filter: grayscale(.9) brightness(.72) contrast(.95); transform: translateY(4px) rotate(-4deg); } .ov-kopf.is-unterlegen b { color: var(--ink-mute); } .ov-kopf.is-unterlegen span { opacity: .7; } /* Drei Spalten. Die erste traegt zwei Namen nebeneinander ("Marek Zawadzki" brach bei .92fr um), die dritte nur eine Reihe Abzeichen - die Breiten folgen dem Inhalt, nicht der Symmetrie. Die Inhalte beginnen oben. Am 15.10.2026 standen sie kurz an einer gemeinsamen Unterkante; seit die Profile ueber dem Stufenbalken stehen, traegt die erste Spalte nur noch die Waage, und alle drei fangen von selbst auf derselben Hoehe an. */ .ov-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } @media (max-width: 720px) { .ov-spalten { grid-template-columns: 1fr; gap: 14px; } } .ov-sp { min-width: 0; } .ov-drei { grid-template-columns: 1.25fr 1.15fr .62fr; gap: 20px; align-items: start; } @media (max-width: 880px) { .ov-drei { grid-template-columns: 1fr; } } /* Ohne Erfolge: zwei Spalten, mittig. 'auto auto' statt Bruchteilen - sonst wuerden die beiden den freien Platz unter sich aufteilen und waeren breiter als noetig; mittig stehen sollen sie, nicht gedehnt. */ .ov-ende.ohne-erfolge .ov-drei { grid-template-columns: auto auto; justify-content: center; gap: 34px; } /* Und die dritte Spalte ganz heraus: bliebe sie stehen, schoebe das Raster sie in eine zweite Zeile - gemessen 34 px leerer Platz unter den beiden anderen, genau die Zeilenluecke. */ .ov-ende.ohne-erfolge .ov-sp-lohn { display: none; } .ov-ende.ohne-erfolge .ov-sp-lage { min-width: 272px; } .ov-ende.ohne-erfolge .ov-sp-rechnung { min-width: 288px; } /* --- Wer gegen wen: ueber allem, mittig ------------------------------- */ /* Die beiden Profile sind die Ueberschrift der Abrechnung. Sie stehen nebeneinander in der Mitte, mit so viel Luft dazwischen, dass es ein Gegenueber bleibt und keine Reihe. */ .ov-koepfe { display: flex; justify-content: center; align-items: flex-start; gap: 60px; margin: 2px 0 16px; } .ov-koepfe:empty { display: none; } .ov-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; } .ov-kopf b { margin-top: 6px; font-size: 14px; color: var(--ink); white-space: nowrap; } .ov-kopf span { font-size: 11px; color: var(--ink-mute); white-space: nowrap; } .ov-kopf-bild { width: 72px; height: 72px; } .ov-kopf-bild svg { width: 100%; height: 100%; display: block; } .ov-kopf.is-du b { color: var(--gold); } /* Die Waage: ein Balken je Zahl, der von der Mitte ausschlaegt. Die Laenge ist der Anteil, die Zahlen stehen aussen als Beleg. Ohne Linie darueber: sie ist jetzt das Erste in ihrer Spalte, und die beiden anderen fangen ebenfalls ohne eine an. */ .ov-wg { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; } .ov-wg-z { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; column-gap: 8px; } .ov-wg-bahn { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .05); } .ov-wg-du { background: var(--gold); } .ov-wg-ge { background: rgba(255, 255, 255, .22); } .ov-wg-l, .ov-wg-r { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-dim); } .ov-wg-l { text-align: right; color: var(--ink); font-weight: 600; } .ov-wg-wort { grid-column: 2; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); text-align: center; margin-top: 1px; } /* --- Zweite Spalte: die Abrechnung ------------------------------------ */ .ov-abrechnung { margin-bottom: 0; } .ov-posten { display: grid; grid-template-columns: 1fr auto 64px; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 13px; color: var(--ink-dim); } .ov-posten .ov-n { font-size: 12px; color: var(--ink-mute); } .ov-posten .ov-xp { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; } .ov-posten.is-grund { color: var(--ink); } .ov-posten.is-abzug { color: var(--ink-mute); } .ov-posten.is-abzug .ov-xp { color: #b07f6a; } /* Die Liste ohne Einrueckung (Bastian, 2026-10-14: "Mitte: Liste aber ohne Einrueckung"). Der Grundwert bleibt durch Helligkeit und Gewicht erkennbar, nicht durch eine Stufe im Satz. */ .ov-posten.is-zusatz { font-size: 13px; } /* Erfahrung und Goldstreifen stehen darunter, abgesetzt durch eine Linie: sie sind die Summe dessen, was darueber steht. */ .ov-lohn { display: flex; flex-direction: column; gap: 10px; } .ov-sp-rechnung .ov-lohn:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-edge); } .ov-gross { display: flex; align-items: baseline; gap: 9px; } .ov-gross b { font-size: 25px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05; } .ov-gross span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); } .ov-gross span img { opacity: .95; } .ov-gross.ist-gold b { color: var(--gold); } .ov-gross.ist-gold { flex-wrap: wrap; } .ov-gross.ist-gold small { flex-basis: 100%; font-size: 11px; color: var(--ink-mute); } /* Rangliste (2026-10-23): die Bewegung der Wertungszahl, gruen oder rot, daneben der neue Stand; darunter klein, was bis zur Platzierung fehlt. */ .ov-gross.ist-wertung { flex-wrap: wrap; } .ov-gross.ist-wertung b.ist-plus { color: var(--ok); } .ov-gross.ist-wertung b.ist-minus { color: var(--foe); } .ov-gross.ist-wertung small { flex-basis: 100%; font-size: 11px; color: var(--ink-mute); } /* --- Stufenband ------------------------------------------------------- */ /* Der Balken steht NICHT ueber die ganze Breite (Bastian, 2026-10-14): ueber 820 px gezogen wirkte er wie eine Fortschrittsanzeige der Seite, nicht wie der eigene Rang; auf 430 px bleibt er ein Abzeichen. */ .ov-stufe { margin-bottom: 18px; } .ov-stufe.ist-band { margin: 0 auto 18px; max-width: 430px; text-align: center; } .ov-stufe-kopf { font-size: 13.5px; color: var(--ink-dim); margin-bottom: 6px; } .ov-stufe.ist-band .ov-stufe-kopf { font-size: 16px; } .ov-stufe-kopf.is-auf { color: var(--gold); font-weight: 600; } .ov-bahn { height: 7px; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px var(--panel-edge); } .ov-stufe.ist-band .ov-bahn { height: 9px; } .ov-fuell { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8a6c1c, var(--gold)); transition: width 1.1s cubic-bezier(.22, .9, .3, 1); } .ov-stufe-fuss { margin-top: 5px; font-size: 11.5px; color: var(--ink-mute); } /* --- Dritte Spalte: die Erfolge --------------------------------------- */ /* Als Reihe von Abzeichen, wie der Schaukasten im Profil. Die Tafel mit Titel, Satz und Gaben war 162 px hoch - je Erfolg; die Reihe ist 52 px fuer alle zusammen, und was drinsteht, zeigt dasselbe Popup wie im Profil, sobald man darauf zeigt. */ .ov-erfolge { margin: 0; padding: 0; border-top: 0; max-height: none; overflow: visible; } .ov-erfolge-kopf { margin: 0 0 9px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .ov-erfolg-reihe { display: flex; flex-wrap: wrap; gap: 9px; } .ov-erfolg-ab { display: inline-flex; line-height: 0; cursor: default; border-radius: 9px; transition: transform .12s ease; } .ov-erfolg-ab:hover { transform: translateY(-2px); } .ov-erfolg-ab.ist-wort { font-size: 12px; color: var(--ink-dim); line-height: 1.3; } /* Mehr Luft vor den Knoepfen (Bastian, 2026-10-15: "Zu den Buttons muss mehr Abstand"). Vorher stiessen sie fast an die letzte Zeile der laengsten Spalte. */ .ov-knoepfe { display: flex; gap: 10px; justify-content: center; margin-top: 26px; } .ov-knoepfe .btn { min-width: 138px; } .ov-knoepfe .btn[hidden] { display: none; } /* ------------------------------------------------- Ausgespielte Karte Spielt der Gegner eine Karte, liegt sie fuer einen Moment gross vor dem Brett (Bastian, 2026-09-29: "wie wenn man bei einem Kartenspiel eine Karte auf den Tisch legt"). Sie kommt von oben - von der Gegenseite -, legt sich leicht schraeg hin und verschwindet wieder. Klicks gehen hindurch: ein Klick aufs Brett bricht die Wiedergabe ab, und das soll die Karte nicht abfangen. Unter dem Abschlussfenster (z-index 50). */ .kv-buehne { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 16px; pointer-events: none; background: rgba(8, 6, 4, 0); transition: background .3s ease; /* Der Winkel steht EINMAL hier und nicht zweimal weiter unten: Karte und Zeile drehen sich damit gemeinsam (Bastian, 2026-10-05: "der soll dann gleich wie die Karte gedreht sein, dass er gerade zum Kartenrand steht"). Vorher lag die Karte schraeg und die Zeile darunter waagerecht - das sah aus, als gehoerte sie nicht dazu. */ --kv-dreh: -10deg; } .kv-buehne.is-da { background: rgba(8, 6, 4, .58); --kv-dreh: -2deg; } .kv-buehne.is-weg { --kv-dreh: -2deg; } .kv-karte { height: min(68vh, 580px); aspect-ratio: 500 / 700; opacity: 0; transform: translateY(-26vh) rotate(var(--kv-dreh)) scale(.62); filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .72)); transition: transform .36s cubic-bezier(.2, .9, .3, 1.28), opacity .24s ease; } .kv-buehne.is-da .kv-karte { opacity: 1; transform: translateY(0) rotate(var(--kv-dreh)) scale(1); } .kv-buehne.is-weg .kv-karte { opacity: 0; transform: translateY(4vh) rotate(var(--kv-dreh)) scale(.94); transition: transform .3s ease, opacity .3s ease; } .kv-karte svg { display: block; width: 100%; height: 100%; } .kv-zeile { font: 600 13px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); opacity: 0; /* Derselbe Winkel wie die Karte. Gedreht wird um die eigene Mitte - die Zeile ist schmaler als die Karte, steht damit aber parallel zu deren Unterkante, und genau das war gefragt. */ transform: rotate(var(--kv-dreh)); transition: opacity .3s ease .08s, transform .36s cubic-bezier(.2, .9, .3, 1.28); } .kv-buehne.is-da .kv-zeile { opacity: 1; } .overlay-card p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; } @media (max-width: 1100px) { .layout { grid-template-columns: 240px minmax(0,1fr) 240px; gap: 10px; padding: 10px; } } /* Nettoeinkommen und Unterhalt in der eigenen Lage */ .hint .detail { color: var(--ink-mute); font-size: 10.5px; } /* Lufteinheiten als kleineres Abzeichen ueber der Bodeneinheit */ .unit-air .unit-plate { stroke-dasharray: 3 2; } .unit-air .name-text { font-size: 7px; } .unit-air .stat-text { font-size: 8px; } /* ------------------------------------------------- Wiedergabe gegnerischer Züge */ .replay-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #1b1710; border: 1px solid #4a3a26; border-left: 3px solid var(--gold); color: var(--ink); padding: 7px 14px; border-radius: 4px; font-size: 12.5px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.5); z-index: 19; } .fx-ring { fill: none; stroke-width: 3; } /* Luftschlag (2026-10-05). Der Ring markiert Ziele, ueber denen die Flugabwehr steht - dorthin kommt kein Flugzeug. Gestrichelt, damit er sich von den Ringen der Wiedergabe unterscheidet: die sagen „hier ist etwas passiert", dieser sagt „hier geht nichts". */ .hex-gesperrt { stroke: #c0564a; stroke-opacity: .75; stroke-dasharray: 5 4; } .fx-jet { pointer-events: none; } .fx-jet-schatten { fill: #000; pointer-events: none; } .fx-target { stroke: #ff7a52; animation: fxpulse .45s ease-out; } .fx-shooter { stroke: var(--gold); opacity: .8; } .fx-moved { stroke: #9ecf86; opacity: .75; } @keyframes fxpulse { from { stroke-width: 6; opacity: 1; } to { stroke-width: 3; opacity: .9; } } .fx-text { font: 700 17px var(--font); animation: fxrise .5s ease-out; paint-order: stroke; stroke: #0d0a07; stroke-width: 3.5; stroke-linejoin: round; } @keyframes fxrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fx-text-hit { fill: #ff8a63; } .fx-text-ret { fill: #ffcf4d; } /* Felder, die eine Karte mit Feld-Ziel treffen kann */ .hex-target { fill: #6fb3d0; opacity: .26; cursor: pointer; } .hex-target:hover { opacity: .44; } /* Ersetzt fruehere style-Attribute im HTML: die Content-Security-Policy verbietet Inline-Styles, und das ist gut so. */ .bar i { width: 100%; } .btn-block { width: 100%; margin-top: 10px; } /* Beschriftung der Gefechtsstaende liegt vor der Grundlinie auf dem Tisch. */ /* Marken an den Grundlinien (assets/marker.js). Seit 2026-09-24 steht je Seite eine flache Marke wie ein Card Guard beim Poker fuer den Gefechtsstand - spaeter aus dem Profil waehlbar. */ .marker { pointer-events: none; } .mk-shadow { fill: #000; opacity: .32; } .mk-edge { fill: #4b4a46; } /* Dicke der Scheibe */ .mk-face { fill: #b9b4a4; stroke: #6d6a61; stroke-width: .8; } .mk-ring { fill: #8d8878; } /* Rille im Rand */ .mk-inner { stroke: rgba(0,0,0,.35); stroke-width: .8; } .mk-mark { fill: #f2efe4; stroke: rgba(0,0,0,.3); stroke-width: .6; } .mk-loch { stroke: none; } /* Aussparung im Zeichen (2026-10-19) */ .mk-you .mk-loch:not([fill]) { fill: var(--you-d); } .mk-foe .mk-loch:not([fill]) { fill: var(--foe-d); } /* Die Farbe des Markenkerns setzt marker.js als fill-Attribut je Spieler (Bastian, 2026-09-29: die Marke traegt IMMER die Farbe ihres Spielers, auch im Mehrspieler). Eine Regel hier wuerde das Attribut ueberstimmen, deshalb steht sie nur noch als Rueckfall fuer Marken ohne Attribut da. */ .mk-you .mk-inner:not([fill]) { fill: var(--you-d); } .mk-foe .mk-inner:not([fill]) { fill: var(--foe-d); } .frontline { pointer-events: none; } .aura { pointer-events: none; } /* ------------------------------------------ Brett bis an den linken Rand Das diagonale Brett laesst oben links und unten rechts leere Dreiecke. Deshalb laeuft es ueber die ersten beiden Spalten des Rasters durch bis an den linken Rand - so wird es rund 30 % groesser als in der Mittelspalte allein. Links stand dabei bis zum 2026-09-29 eine eigene Spalte im oberen linken Dreieck, deren Hoehe limitLeftColumn() in app.js aus der Lage des Bretts gerechnet hat. Beides ist weg: es gibt kein .col-left mehr und keine Funktion dieses Namens. Die Regel fuer .board-wrap bleibt trotzdem notwendig - sie ist es, die das Brett ueber Spalte 1 und 2 spannt. */ .board-wrap { grid-column: 1 / 3; grid-row: 1; z-index: 0; } .col-right { grid-column: 3; grid-row: 1; } /* Kopfzeile flacher - jeder Pixel Hoehe geht direkt ans Brett. */ /* 46 px, auf BEIDEN Seiten (Bastian, 2026-10-03). Stand bis dahin nur in lobby.css, das Gefecht kam auf 35 px - zu wenig fuer die 34 px hohen Felder "Goldstreifen" und "Freunde", die seit heute auch dort haengen: sie stiessen oben und unten an die Kante. Das Brett darunter ist flexibel und gibt die elf Pixel her. */ .topbar { padding: 5px 14px; min-height: 46px; } /* ------------------------------------------------ Handkarten am Tischrand Wie im Vorbild: die Karten ragen als Reiter von unten ins Bild, nur Symbol, Name und Kosten sind zu sehen. Die ganze Karte zeigt #cardtip beim Ueberfahren. Die Leiste liegt ueber dem Brett, aber nur im freien Dreieck unten rechts - ihre linke Kante setzt placeHandStrip() in app.js. */ .hand-strip { position: absolute; right: 0; bottom: 0; left: 45%; /* Startwert, bis das Brett gemessen ist */ height: 66px; z-index: 3; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; /* Luecken fangen keine Klicks ab */ } .hand-strip .card { pointer-events: auto; } /* ---------------------------------------------------- Der Nachziehstapel Er ist eine Handkarte wie die anderen, nur umgedreht (Bastian, 2026-10-10: "da soll genau so eine Karte hin wie die anderen fuenf, nur dass sie halt umgedreht ist"). Deshalb traegt er dieselben Klassen .card.card-v2 und erbt Breite, Seitenverhaeltnis, die Lage im Tischrand und das Hochfahren beim Ueberfahren. Hier steht nur, was anders ist. Die Fassung davor war eine eigene Kachel mit eigener Breite, und ihr Rueckenbild war hochgezogen, damit das Logo in den Streifen rutscht - "wie kann das Logo oben und angeschnitten sein? Das ist in der Mitte der Karte." Eben. Das Logo sitzt in der Mitte und gehoert dorthin; im Tischrand sieht man vom Stapel denselben Ausschnitt wie von jeder anderen Karte, naemlich den oberen. Die DICKE bleibt als gestapelte Kanten hinter der obersten Karte: man soll ohne Lesen sehen, ob noch viel kommt. Fuenf Stufen, ueber Klassen gesetzt (die Inhaltsrichtlinie erlaubt kein style-Attribut aus innerHTML). */ .stapel { display: flex; align-items: flex-end; flex: 0 0 auto; pointer-events: none; } .stapel[hidden] { display: none; } .st-rechts { margin-left: 10px; } .hand-strip .card.card-v2.st-pile { /* --hk-ab bleibt, wie es ist: der Stapel faehrt beim Ueberfahren genauso weit heraus wie jede Handkarte (Bastian, 2026-10-10: "jetzt muss sie sich noch so verhalten wie die anderen"). Mit 0 stand er am Ende 50 px tiefer als seine Nachbarn - derselbe Griff, zwei Hoehen. Den Platz, den bei den anderen die Knopfleiste fuellt, nimmt hier die Zahl ein (.st-schild weiter unten). */ cursor: default; } .st-pile .st-ruecken { display: block; width: 100%; height: auto; border-radius: 10px; filter: drop-shadow(0 -3px 10px rgba(0, 0, 0, .6)); } /* Zahl und Wort stehen am Fuss der Karte und erscheinen erst, wenn sie heraussteht (Bastian, 2026-10-10: "man soll den Stapel auch etwas hervorziehen koennen und erst dann sieht man die Anzahl"). Im Tischrand liegt damit nur eine Karte, ohne Beschriftung. */ .st-schild { /* AUF der Karte, am unteren Rand (Bastian, 2026-10-10: "auf der Rueckseitenkarte sollte beim Rausschieben doch stehen, wie viele Karten noch im Stapel sind"). Sie stand kurz UNTER der Karte, an der Stelle der Knopfleiste. Seit die Knopfleiste abgeschaltet ist, gibt es dort keinen Platz mehr: die Karte endet beim Herausfahren genau am Fensterrand, und alles darunter faellt heraus. Auf der Karte ist sie immer zu sehen, solange die Karte zu sehen ist. */ position: absolute; left: 7%; right: 7%; bottom: 5%; z-index: 2; display: grid; gap: 2px; padding: 7px 10px; border-radius: 8px; background: rgba(8, 6, 4, .86); opacity: 0; transition: opacity .16s ease; pointer-events: none; } /* Drei Zeilen, Zahl und Wort nebeneinander: Nachzug, Ablage, Verluste. */ .st-z { display: flex; align-items: baseline; gap: 7px; } .st-schild b { min-width: calc(var(--card-w, 190px) * .105); text-align: right; font: 800 calc(var(--card-w, 190px) * .062)/1.1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; } .st-schild small { font: 600 calc(var(--card-w, 190px) * .042)/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); } .st-pile:hover .st-schild, .st-pile:focus-visible .st-schild { opacity: 1; } /* Leer: nur ein Umriss, damit der Platz als Platz lesbar bleibt. Gestapelte Kanten dahinter gab es bis zum 2026-10-10 (fuenf Dickenstufen als Auskunft, wie viel noch kommt). Bastian: "der Stapel sieht unrealistisch aus, lassen wir das weg; da liegt dann nur die eine Karte mit der Rueckseite nach oben." Wie viele es sind, sagt jetzt die Zahl auf der Karte. */ .hand-strip .card.card-v2.st-pile.ist-leer { border: 1px dashed #4a3d28; border-radius: 10px; background: rgba(0, 0, 0, .25); } .st-pile.ist-leer .st-z:first-child b { color: var(--ink-mute); } .hand-strip .hand { flex: 1 1 auto; min-width: 0; max-width: 100%; display: flex; flex-direction: row; align-items: flex-end; gap: 6px; } .hand-strip .hand > p { align-self: center; margin: 0; text-shadow: 0 1px 3px #000; } .hand-strip .card { flex: 1 1 0; min-width: 0; /* schrumpfen statt unter die Spalte laufen */ max-width: 176px; height: 66px; grid-template-columns: 1fr auto; align-items: start; gap: 5px; padding: 8px 8px 16px 10px; overflow: hidden; border-radius: 8px 8px 0 0; border-bottom: 0; background: linear-gradient(#2e2519, #1c160f); box-shadow: 0 -4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); transform: translateY(10px); /* ragt vom Tischrand herein */ transition: transform .14s ease, border-color .12s, background .12s; } .hand-strip .card:hover { transform: translateY(2px); border-color: var(--gold); } .hand-strip .card.sel { transform: translateY(-6px); border-color: var(--gold); background: linear-gradient(#3a2d1a, #241b10); } .hand-strip .card.disabled { opacity: .5; } .hand-strip .card.disabled:hover { transform: translateY(10px); border-color: #3b3025; } /* Der Name bekommt die ganze Breite und darf zweizeilig werden - mit Silbentrennung, sonst passt "Panzergrenadiere" nicht. Das Symbol liegt als Wasserzeichen im Hintergrund, die Wirkungszeile steht in der grossen Karte. */ .hand-strip .card-icon { position: absolute; right: 4px; bottom: 12px; width: 38px; height: 33px; opacity: .16; pointer-events: none; } .hand-strip .card-body { position: relative; z-index: 1; } .hand-strip .card-name { font-size: 11.5px; line-height: 1.22; white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; hyphens: auto; -webkit-hyphens: auto; } /* Wird es richtig eng, eine Spur kleiner statt Woerter zu zerhacken. */ .hand-strip.tight .card-name { font-size: 10.5px; } .hand-strip.tight .card { padding-left: 7px; padding-right: 6px; } .hand-strip .card-sub { display: none; } .hand-strip .card-cost { position: relative; z-index: 1; min-width: 20px; height: 20px; font-size: 11px; } .hand-state { margin-top: 8px; } .hand-state b { color: var(--gold); font-weight: 600; } /* Die grosse Karte: steht ueber dem rechten Ende der Leiste. */ #cardtip { width: 262px; padding: 13px 15px 14px; border-radius: 10px; border: 1px solid var(--gold); background: linear-gradient(#2b2217, #17120c); box-shadow: 0 14px 34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); } #cardtip .tip-name { font-size: 15px; } /* Meldungen ueber die Leiste heben, sonst verschwinden sie dahinter. */ .toast { bottom: 92px; } /* ----------------------------------------------------------- Miniaturen */ /* isolation: so mischt die Treffermarke gegen das Fahrzeug, nicht gegen das Gelaende. mini-marke: ohne Mischmodus bringt die Marke die Beleuchtung ihrer Fotoplatte mit und leuchtet auf beschatteten Flaechen; hard-light laesst sie der Flaeche folgen. Siehe assets/minis.js. */ .mini { pointer-events: none; isolation: isolate; } .mini-marke { mix-blend-mode: hard-light; } .mini-hit { fill: transparent; pointer-events: all; cursor: pointer; } .mini-ring { fill: none; stroke-width: 2.4; opacity: 0; pointer-events: none; } .unit-mini.sel .mini-ring { opacity: 1; stroke: var(--gold); } .unit-mini.targetable .mini-ring { opacity: 1; stroke: #ffcf4d; stroke-dasharray: 5 3; } .unit-mini.spent .mini { filter: brightness(.62) saturate(.55); } .mini-hp { pointer-events: none; } .mini-hp-text { font-weight: 700; fill: #efe8da; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 2.5px; pointer-events: none; } /* --- Animationen (assets/anim.js) --------------------------------------- */ #fx-layer, .anim-wrap { pointer-events: none; } .fx-hidden { display: none; } .fx-flash { fill: #fff4b8; } .fx-fire { fill: url(#fx-fire-grad); } .fx-smoke { fill: #3b352f; } .fx-smoke-dark { fill: #1f1b17; } .fx-spark { fill: #ffd27a; } .fx-tracer { stroke: #ffe89a; stroke-linecap: round; } .fx-shell { fill: #2a2622; stroke: #ffcf6a; stroke-width: .8; } .fx-missile { fill: #fff0c0; } .fx-dmg { font-weight: 800; paint-order: stroke; stroke: #1a1410; stroke-width: 3.5px; stroke-linejoin: round; letter-spacing: .02em; } .fx-dmg-hit { fill: #ff6a52; } .fx-dmg-miss { fill: #e8e0cf; font-weight: 700; } /* Seit dem 20.10.2026 traegt die Schadenszahl die Farbe DESSEN, der den Schaden gemacht hat (Bastian: "indem die Schadenspunkte die jweiligen Spielerfarbe bekommen die sie verursacht haben"). Darum die Token und keine festen Werte: --you ist waehlbar (Profil -> Farbe). Steht nach .fx-dmg-hit, damit es dessen Rot ueberschreibt - ohne bekannten Verursacher bleibt das Rot stehen. */ .fx-dmg-du { fill: var(--you); } .fx-dmg-gegen { fill: var(--foe); } /* Ton-Schalter in der Kopfleiste */ #btn-sound.off { opacity: .6; text-decoration: line-through; } /* Miniaturen: Lebensleiste auf der Base, Einheitenschild */ .mini-hpbar, .mini-shield { pointer-events: none; } .mini-shield-val { font-family: var(--font); } .unit-mini.spent .mini-shield { opacity: .6; } /* --- Gerendertes Gelaende (assets/terrain.js, ?terrain=1) ---------------- */ .terrain-ground, .terrain-road, .terrain-water, .terrain-object { pointer-events: none; } /* Tisch unter allem: das Brett-SVG ragt ueber den eigenen Rahmen hinaus, Kopfzeile und Seitenleisten muessen darueber liegen. */ .topbar { position: relative; z-index: 5; } .col-right { position: relative; z-index: 2; } /* ------------------------------------------------ Die Auswahlspalte Neu gebaut am 2026-10-08. Ausgewaehlt wird ein FELD, nicht mehr eine Einheit - die Deckung gehoert zum Feld, nicht zur Figur darauf. Der Kasten hat drei Zonen: Kopf (wo), Gelaende (was fuer ein Feld), Besatzung (wer steht da). Die Trennung Feld / Einheit ist die Botschaft, deshalb sitzt sie auf einer Linie und einem dunkleren Grund. Entwurf: Bastian hat aus drei Vorlagen den Rahmen von A mit dem Einheitenteil von C gewaehlt (sh/ausw). */ .ins-karte { background: linear-gradient(#211a13, #15100b); border: 1px solid #3b3025; border-radius: 8px; overflow: hidden; } .ins-kopf { display: flex; align-items: center; gap: 9px; padding: 9px 12px 8px; background: linear-gradient(90deg, rgba(201, 162, 39, .14), rgba(201, 162, 39, 0)); border-bottom: 1px solid #3b3025; } .ins-hex { width: 22px; height: 24px; flex: none; color: var(--gold); } .ins-ko { font: 800 15px/1 var(--font); color: var(--ink); letter-spacing: .5px; } .ins-ko small { display: block; margin-top: 3px; font: 600 9.5px/1 var(--font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-mute); } .ins-gel { padding: 8px 12px 9px; } .ins-gel-name { font: 700 12.5px/1.2 var(--font); color: #d9c48a; } /* Die Regelklasse unter der Landschaft: leiser, aber lesbar - sie sagt, was das Feld im Spiel bedeutet, waehrend der Name sagt, was man sieht. */ .ins-gel-name small { display: block; margin-top: 2px; font: 600 10.5px/1.2 var(--font); letter-spacing: .04em; color: var(--ink-mute); } .ins-marken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .ins-marke { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid #4a3d28; border-radius: 999px; background: rgba(0, 0, 0, .25); font: 600 10px/1.5 var(--font); color: var(--ink-dim); } .ins-marke.ist-gut { border-color: #5d7a4a; color: #a9c48e; } .ins-marke.ist-sperre { border-color: #7a4a38; color: #d79a86; } .ins-marke.ist-spaeh { border-color: #4a6a7a; color: #8ec0d4; } .ins-einheit { padding: 9px 12px 11px; border-top: 1px solid #3b3025; background: rgba(0, 0, 0, .22); } .ins-e-name { font: 700 13.5px/1.2 var(--font); color: var(--ink); min-width: 0; } .ins-leer { padding: 12px; border-top: 1px solid #3b3025; background: rgba(0, 0, 0, .22); font: 400 11.5px/1.45 var(--font); color: var(--ink-mute); } /* Der Ring um das gewaehlte Feld auf dem Brett. Ohne ihn waere die Auswahl nur in der Spalte zu sehen - man wuesste, WAS man liest, aber nicht WO. */ .hex-gewaehlt { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; pointer-events: none; filter: drop-shadow(0 0 4px rgba(201, 162, 39, .5)); } /* Die Klickflaeche jedes Feldes. Unsichtbar, aber da. */ .hex-pick { fill: transparent; stroke: none; cursor: pointer; } /* Waffenzeile unter dem Kartennamen (Feld weapon in unit_types.json) */ .card-weapon, .tip-weapon { display: block; font-size: 10.5px; font-style: italic; color: var(--ink-mute); line-height: 1.25; } /* Schwebende Drohnen-Miniaturen: Schatten und Besitzerring auf der Kachel */ .air-shadow { fill: #000; opacity: .26; filter: blur(3px); pointer-events: none; } .air-ring { fill: none; stroke-width: 1.8; opacity: .85; pointer-events: none; } .air-ring-you { stroke: var(--mini-you, var(--you)); } .air-ring-foe { stroke: var(--mini-foe, var(--foe)); } .unit-air .mini-hpbar { pointer-events: none; } /* Klickflaechen ueber den Einheitenschilden (addShieldHits in app.js) */ .shield-hit { fill: transparent; pointer-events: all; cursor: pointer; } .mini-ring.air-sel { fill: none; stroke-linecap: round; } /* --- Nachschub-Symbol: Munitionskiste (2026-09-24) ------------------------- Vereinfachte Fassung der Munitionsdose auf den Karten (crate() in cards.js), gleiche Form wie SUPPLY_ICON in icons.js. Als Hintergrundbild, damit HTML und app.js unberuehrt bleiben (CSP erlaubt data:-Bilder). */ .hand-strip .card-cost::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 5px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%229%22%20y%3D%221.5%22%20width%3D%226%22%20height%3D%223%22%20rx%3D%221%22%20fill%3D%22none%22%20stroke%3D%22%232a2d1d%22%20stroke-width%3D%221.3%22/%3E%3Crect%20x%3D%222.5%22%20y%3D%227.5%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%221.2%22%20fill%3D%22%235d6541%22/%3E%3Crect%20x%3D%221.5%22%20y%3D%224.5%22%20width%3D%2221%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%237c855b%22/%3E%3Cpath%20d%3D%22M2.5%2012h19%22%20stroke%3D%22%234a5133%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") center / contain no-repeat; } .hand-strip .card-cost { display: inline-flex; align-items: center; padding: 0 5px; } .hand-strip .card-cost::before { width: 14px; height: 14px; margin-right: 3px; vertical-align: 0; } .hand-strip .card-cost.free::before { opacity: .45; } /* --- Handkarten am unteren Fensterrand (BIG_HAND / fanHand() in app.js) --- Die Karte steckt unten im Fensterrand, nur ihr Kopf (--peek) ist zu sehen. Beim Ueberfahren wird dieselbe Karte ganz nach oben geschoben. Die Leiste ist fixiert, damit sie wirklich am Fensterrand haengt - im Brettbereich laege sie um den Innenabstand des Layouts hoeher. Was unten aus dem Fenster ragt, erzeugt bei position: fixed keinen Rollbalken. */ .hand-strip.big { position: fixed; bottom: 0; height: calc(var(--card-w, 190px) * 1.4); overflow: visible; z-index: 6; } .hand-strip.big .hand { gap: 4px; height: 100%; align-items: flex-end; justify-content: center; } .board-wrap:has(.hand-strip.big) .board-frame { padding-bottom: var(--hand-band, 46px); } /* Ohne ".hand" im Waehler: seit dem 2026-10-10 liegt auch der Nachziehstapel als Karte in dieser Leiste (#nachzug), und er soll "genau so eine Karte wie die anderen fuenf" sein - also dieselbe Regel, nicht eine zweite mit denselben Werten. Alle Nachbarregeln (hover, sel, disabled) stehen ohnehin schon ohne .hand. */ .hand-strip .card.card-v2 { position: relative; display: block; flex: 0 0 auto; width: var(--card-w, 190px); min-width: 0; max-width: none; height: auto; aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 10px; background: none; box-shadow: none; overflow: visible; /* bis auf den Kopf aus dem Fenster geschoben */ transform: translateY(calc(100% - var(--peek, 40px))); transition: transform .2s ease; } .hand-strip .card.card-v2 svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 -3px 10px rgba(0,0,0,.6)); } .hand-strip .card.card-v2:hover, .hand-strip .card.card-v2:focus-visible { transform: translateY(calc(-1 * var(--hk-ab, 0px))); z-index: 10; } .hand-strip .card.card-v2.sel { transform: translateY(calc(100% - var(--peek, 40px) - 14px)); z-index: 9; } .hand-strip .card.card-v2.sel:hover { transform: translateY(calc(-1 * var(--hk-ab, 0px))); } .hand-strip .card.card-v2.sel svg { filter: drop-shadow(0 0 6px rgba(201,162,39,.95)) drop-shadow(0 -3px 10px rgba(0,0,0,.6)); } .hand-strip .card.card-v2.disabled { opacity: 1; } .hand-strip .card.card-v2.disabled svg { filter: grayscale(.6) brightness(.65) drop-shadow(0 -3px 10px rgba(0,0,0,.6)); } .hand-strip .card.card-v2.disabled:hover { transform: translateY(calc(-1 * var(--hk-ab, 0px))); } /* Zwei Knoepfe UNTER der offenen Handkarte (Bastian, 2026-10-09, in der Fassung vom 2026-10-10: "koennen wir C machen, die Buttons aber unter die Karte stellen"). Unter der Karte und nicht auf ihr: jede Lage auf der Karte verdeckte etwas - erst den Text, dann die Fusszeile, sonst das Bild. Darunter verdecken sie nichts. Dafuer muss die hochgeschobene Karte um die Hoehe der Leiste nach oben ruecken, sonst haengt die Leiste unter dem Fensterrand. Das ist --hk-ab; beide Zustaende, die die Karte hochschieben, nehmen denselben Wert. Die Leiste sitzt mit `top: 100%` direkt an der Unterkante und traegt die Luft als Innenabstand. Mit einem Aussenabstand gaebe es eine Luecke zwischen Karte und Leiste - der Zeiger verliesse die Karte auf dem Weg nach unten, sie rutschte weg, und man traefe nie einen Knopf. Breiter Knopf plus Zeichen (Vorschlag C): ausgespielt wird staendig, abgeworfen hoechstens einmal je Zug. */ .hand-strip .card.card-v2 { --hk-hoch: calc(var(--card-w, 190px) * .155); /* Hoehe der Knoepfe */ --hk-luft: calc(var(--card-w, 190px) * .038); /* Abstand zur Karte */ --hk-fuss: calc(var(--card-w, 190px) * .025); /* Luft unter den Knoepfen */ --hk-rand: calc(var(--card-w, 190px) * .055); /* Einzug links und rechts */ --hk-ab: calc(var(--card-w, 190px) * .218); /* Hoehe, Luft und Fuss */ } /* In der Aufstellung steht keine Knopfleiste unter der Karte, also faehrt die Karte auch nicht um deren Hoehe hoch (Bastian, 2026-10-10). Sonst schoebe sie sich ohne Grund weiter heraus als im Gefecht. */ .hand-strip.ohne-knoepfe .card.card-v2 { --hk-ab: 0px; } /* Derselbe Abwurfknopf in der Auswahlspalte: Zeichen und Wort nebeneinander. Das Zeichen waechst dort nicht mit einer Karte, also feste Groesse - an der Handkarte misst .hk-ico in Prozent des Knopfes. */ .ins-weg { display: flex; align-items: center; justify-content: center; gap: 8px; } .ins-weg .hk-ico { flex: none; width: 15px; height: 15px; } /* Nicht ganz bis an die Kartenkante (Bastian, 2026-10-10: "soll innerhalb der Markierung liegen, also etwas Abstand zum Kartenrand haben") - die Leiste steht wie eine Fusszeile unter der Karte, nicht wie ein Brett, das breiter ist als sie. Derselbe Einzug links wie rechts. Der Einzug ist ein INNENabstand, der Kasten selbst so breit wie die Karte (Bastian, 2026-10-10: "wenn man mit der Maus ein kleines Stueck neben dem Abwerfen-Knopf ist, geht die Karte die ganze Zeit auf und zu"). Mit `left: 5.5%; right: 5.5%` lagen links und rechts der Knoepfe zwei Streifen ohne Element: der Zeiger fiel dort aus der Karte heraus, sie rutschte nach unten, lag damit wieder unter dem Zeiger und fuhr wieder hoch - ein Flackern im Takt der Bewegung. Dieselbe Falle wie bei der Luft nach oben, nur zur Seite. */ .hand-strip .card.card-v2 .hk-tat { position: absolute; left: 0; right: 0; top: 100%; bottom: auto; padding: var(--hk-luft) var(--hk-rand) var(--hk-fuss); display: flex; gap: calc(var(--card-w, 190px) * .035); opacity: 0; pointer-events: none; transition: opacity .16s ease; z-index: 2; } .hand-strip .card.card-v2:hover .hk-tat, .hand-strip .card.card-v2:focus-visible .hk-tat, .hand-strip .card.card-v2:focus-within .hk-tat { opacity: 1; pointer-events: auto; } /* Dasselbe Knopfbild wie "Zug beenden" (Bastian, 2026-10-10: "ich moechte dieses Button Design und nicht transparent") - also .btn.btn-primary aus derselben Datei: deckender Verlauf, gruener Rand, helle Schrift, keine Versalien. Die Werte stehen hier noch einmal und werden nicht von .btn geerbt: die Handkarte traegt , kein