/* ===================================================================
   Twilight Imperium Companion — dark "deep space" theme
   =================================================================== */
:root {
    --bg: #070b16;
    --bg-2: #0b1226;
    --panel: #111a30;
    --panel-2: #16223f;
    --panel-border: #243456;
    --text: #e8eefc;
    --text-dim: #9fb0d0;
    --text-faint: #6b7da0;
    --gold: #d9b04a;
    --gold-dim: #9c7e34;
    --accent: #4fc3f7;
    --danger: #e0556a;
    --good: #46c08a;
    --radius: 12px;
    --shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* App shell: a full-height flex column so the legal footer is always pushed to the very bottom
   (short pages — e.g. the start page — no longer have the footer riding up under the content). */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-shell .content { flex: 1 0 auto; }

html, body {
    margin: 0;
    padding: 0;
    background: radial-gradient(1200px 800px at 70% -10%, #16224a 0%, transparent 60%),
               radial-gradient(900px 700px at 0% 100%, #1a1233 0%, transparent 55%),
               var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
    font-family: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
    letter-spacing: .03em;
    font-weight: 700;
    margin: 0 0 .4em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1:focus { outline: none; }

/* ---- App bar ---- */
.appbar {
    display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap;
    padding: .5rem 1rem;
    background: linear-gradient(180deg, rgba(20,30,60,.9), rgba(10,16,34,.85));
    border-bottom: 1px solid var(--panel-border);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(6px);
}
.appbar .brand { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--gold); font-size: 1.1rem; letter-spacing: .06em; }
.appbar .brand small { color: var(--text-faint); font-weight: 400; font-family: 'Rajdhani', sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: .62rem; display:block; }
.appbar .spacer { flex: 1; }
.appbar .conn { font-size: .72rem; color: var(--text-faint); display: flex; align-items: center; gap: .35rem; }
/* In-session app bar: round + phase on the left, the player's badge + name on the right. */
.appbar .ab-meta { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.appbar .ab-round { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--gold); font-size: 1rem; white-space: nowrap; }
.appbar .ab-phase { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.appbar .ab-name { font-weight: 700; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .ab-code { font-size: .85rem; letter-spacing: .2em; padding: .1rem .45rem; cursor: pointer; }
.appbar .ab-code:hover { border-color: var(--gold); }
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--text-faint); display: inline-block; }
.dot.on { background: var(--good); box-shadow: 0 0 8px var(--good); }
.dot.off { background: var(--danger); }
/* Single-colour statistics glyph (inherits the button text colour). */
.stat-icon { display: inline-block; vertical-align: -0.16em; }
/* End-game button in the app bar: keep it compact next to the icons. */
.appbar .ab-endgame { font-size: .82rem; padding: .28rem .55rem; }

/* Pause overlay — covers everything while paused, so all input is locked until the host resumes. */
.pause-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: rgba(4, 8, 18, .82); backdrop-filter: blur(3px); }
.pause-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 3rem; text-align: center;
    background: var(--panel-2); border: 1px solid var(--gold-dim); border-radius: 14px; box-shadow: var(--shadow); }
.pause-box .pause-icon { font-size: 3rem; color: var(--gold); line-height: 1; }
.pause-box .pause-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--gold); }
.btn-lg { font-size: 1.1rem; padding: .7rem 1.4rem; }

.container { max-width: 1180px; margin: 0 auto; padding: 1rem; }
.content { padding-top: 1rem; }
/* Start page: vertically centre the create/join panel in the leftover height (footer stays pinned). */
.content:has(> .home-view) { display: flex; flex-direction: column; }
.home-view { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }

/* ---- Panels / cards ---- */
.panel {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
}
.panel + .panel { margin-top: 1rem; }
.panel h2, .panel h3 { color: var(--gold); }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.row-wrap { display: flex; flex-wrap: wrap; gap: .75rem; }
.grid { display: grid; gap: .75rem; }

/* ---- Buttons ---- */
.btn {
    font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: .03em;
    border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text);
    padding: .5rem .9rem; border-radius: 9px; cursor: pointer; font-size: .95rem;
    display: inline-flex; align-items: center; gap: .4rem; transition: .12s ease;
}
.btn:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, #2a64b8, #1d4a93); border-color: #2f6fc6; color: #fff; }
.btn-primary:hover { border-color: var(--accent); }
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); border-color: var(--gold); color: #20160a; }
.btn-danger { background: linear-gradient(180deg, #b5374a, #8d2738); border-color: #c14257; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: .28rem .55rem; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Form controls ---- */
label { display: block; font-size: .8rem; color: var(--text-dim); margin-bottom: .25rem; letter-spacing: .03em; }
input[type=text], input[type=number], select, .input {
    width: 100%; background: #0a1020; border: 1px solid var(--panel-border); color: var(--text);
    padding: .55rem .7rem; border-radius: 9px; font-size: 1rem; font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,195,247,.25); }
.field { margin-bottom: .8rem; }

/* ---- Badges / pips ---- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid var(--panel-border); }
.pip { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.25); }
.pip-B { background: #4caf50; } .pip-P { background: #4a78d6; } .pip-C { background: #e0c341; } .pip-W { background: #d6534a; }

/* ---- Tabs ---- */
.tabs { display: flex; flex-wrap: nowrap; gap: .25rem; border-bottom: 1px solid var(--panel-border); margin-bottom: 1rem; }
/* Fill the full available width (each tab shares it equally); the label scales down with the viewport
   and ellipsises so all tabs fit a phone on one row. */
.tab { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
    padding: .5rem .45rem; border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0;
    cursor: pointer; color: var(--text-dim); font-weight: 600; font-size: clamp(.72rem, 2.9vw, .95rem); }
.tab:hover { color: var(--text); }
.tab.active { background: var(--panel); border-color: var(--panel-border); color: var(--gold); }

/* ---- Display control ("Displaysteuerung"): a compact titled groupbox with a 3-way segmented
   control. Title line + full-width segment row reads as ~1.5 lines on a phone. ---- */
.display-ctl { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .7rem; margin-bottom: .6rem;
    border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-2); }
.display-ctl-lbl { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; }
.seg { display: flex; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; }
.seg-btn { flex: 1 1 0; min-width: 0; border: 0; border-right: 1px solid var(--panel-border); background: var(--panel);
    color: var(--text-dim); padding: .4rem .5rem; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .12s ease; }
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); color: #20160a; }

/* ---- Faction icon badge ---- */
.faction-badge {
    position: relative; overflow: hidden;
    width: 2.2rem; height: 2.2rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .9rem; flex: 0 0 auto;
    background: #0d1426; border: 2px solid rgba(255,255,255,.2);
}
/* Show the whole symbol, uncropped, with a little breathing room. */
.faction-badge .fb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.faction-badge .fb-initials { position: relative; z-index: 1; }

.tech-icon { object-fit: contain; display: inline-block; vertical-align: middle; }
.tg-icon { height: 1.1em; width: auto; vertical-align: -0.2em; }

/* ---- Player card ---- */
.player-card { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel-2); border-left: 5px solid var(--player-color, #888); }
.player-card.active { box-shadow: 0 0 0 2px var(--gold), var(--shadow); }
.player-card .pname { font-weight: 700; }
.player-card .pfac { font-size: .78rem; color: var(--text-dim); }

/* ---- Strategy card (equal size; names only by default; ★ bullet abilities) ---- */
.strat { --c: #888; --corner: var(--panel-border); position: relative; min-height: 3.4rem; display: flex; flex-direction: column;
    border: 1px solid var(--panel-border); border-top: 4px solid var(--c); border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, var(--panel)), var(--panel)); padding: .6rem .7rem;
    /* cut the bottom-right corner for a hint of the printed card shape */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%); }
/* Draw the border along the cut corner (clip-path removes the real border there). --corner tracks the
   card state so the cut corner matches the border: grey → hover gold-dim → highlight gold. */
.strat::after { content: ""; position: absolute; right: 0; bottom: 0; width: 1rem; height: 1rem; pointer-events: none;
    background: linear-gradient(to bottom right, transparent calc(50% - 0.8px), var(--corner) calc(50% - 0.8px), var(--corner) calc(50% + 0.8px), transparent calc(50% + 0.8px)); }
/* Highlighted card: gold border all around, including the cut corner. */
.strat.highlight { border-color: var(--gold); border-top-color: var(--gold); --corner: var(--gold); }
.strat .num { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--c); font-size: 1.1rem; }
.strat .sname { font-family: 'Orbitron', sans-serif; font-weight: 700; }
.strat.used { opacity: .55; }
.strat.clickable { cursor: pointer; transition: .12s ease; }
.strat.clickable:hover { border-color: var(--gold-dim); transform: translateY(-1px); box-shadow: var(--shadow); --corner: var(--gold-dim); }
.strat-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.strat .tg { font-size: .7rem; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 0 .4rem; }
.strat .ability-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); margin-top: .4rem; }
.strat .ability-label.sec { margin-top: .3rem; }
.ability-bullets { list-style: none; margin: .15rem 0 0; padding: 0; }
.ability-bullets li { position: relative; padding-left: 1.1em; font-size: .82rem; color: var(--text); margin-bottom: .15rem; line-height: 1.25; }
.ability-bullets li::before { content: "✦"; position: absolute; left: 0; color: var(--text); font-size: .85em; top: .05em; }

/* Strategy-phase pick grid: cards equal height (stretch), controls below. */
.strat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; margin-top: 1rem; align-items: stretch; }
.strat-cell { display: flex; flex-direction: column; gap: .35rem; }
.strat-cell .strat { flex: 1 1 auto; }
.strat-ctl { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* "Now choosing" banner */
.picker-banner { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .5rem .8rem; border-radius: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--player-color) 26%, var(--panel)), var(--panel));
    border: 1px solid var(--panel-border); border-left: 5px solid var(--player-color, #888); }
.picker-banner.you { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.picker-banner .pb-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.picker-banner .pb-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.3rem; }

/* phase bar */
.phase-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* In-game phases (Setup excluded) as plain labels — no button boxes; the current phase glows blue. */
.phase-leiste { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.pseg { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .05em; white-space: nowrap;
    color: var(--text-faint); position: relative; }
/* faint chevron between labels to suggest the flow */
.pseg:not(:last-child)::after { content: "›"; position: absolute; right: -.75rem; color: var(--text-faint); opacity: .5; font-weight: 400; }
.pseg.done { color: var(--text-dim); }
.pseg.on { color: var(--accent); text-shadow: 0 0 10px rgba(79,195,247,.75), 0 0 20px rgba(79,195,247,.45); }
/* Setup: ready count instead of the leiste. */
.phase-ready { font-size: .9rem; color: var(--text-dim); }
.phase-ready strong { font-family: 'Orbitron', sans-serif; color: var(--gold); font-size: 1.05rem; }

/* faction picker (symbol grid) */
.faction-picker { display: flex; flex-direction: column; gap: .5rem; }
.fp-search { max-width: 260px; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .5rem; max-height: 42vh; overflow: auto; padding: .15rem; }
.fp-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .3rem; cursor: pointer;
    background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 10px; color: var(--text); font: inherit; transition: .12s ease; }
.fp-item:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.fp-item.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel-2)); }
.fp-name { font-size: .68rem; line-height: 1.05; text-align: center; color: var(--text-dim); }
.fp-item.sel .fp-name { color: var(--text); }

/* join identity: pick which player to take over (or create new) */
.join-players { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0; max-height: 46vh; overflow: auto; }
.join-player { display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%; padding: .5rem .7rem; border-radius: 10px;
    border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; transition: .12s ease; }
.join-player:hover:not(:disabled) { border-color: var(--gold-dim); transform: translateY(-1px); }
.join-player:disabled { opacity: .55; cursor: default; }
.join-player .jp-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* seat-order up/down buttons (setup, host) */
.seat-btns { display: inline-flex; flex-direction: column; gap: .1rem; }
.seat-btns .btn { padding: .05rem .35rem; line-height: 1; font-size: .7rem; }

/* color swatches */
.swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.swatch { width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 2px solid rgba(255,255,255,.25); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.swatch:disabled { cursor: default; }
.swatch .taken { opacity: .7; }

/* objective cards */
.obj-card { border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.obj-card.stage1 { border-top: 4px solid #d98a2b; --ovp: #d98a2b; }
.obj-card.stage2 { border-top: 4px solid #3a6fd0; --ovp: #3a6fd0; }
.obj-card.secret { border-top: 4px solid #b01030; --ovp: #b01030; }
/* Reveal-list stage badge: centred circle. Stage I gold, Stage II blue. */
.stage-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid; font-size: .68rem; font-weight: 700;
    font-family: 'Orbitron', sans-serif; line-height: 1; }
.stage-badge.s1 { background: rgba(217,176,74,.16); color: var(--gold); border-color: var(--gold-dim); }
.stage-badge.s2 { background: rgba(58,111,208,.2); color: #6ea0ff; border-color: #3a6fd0; }
.obj-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; }
.obj-stage { font-family: 'Orbitron', sans-serif; font-weight: 700; }
.obj-card.stage1 .obj-stage { color: #e0a64b; }
.obj-card.stage2 .obj-stage { color: #5a8de0; }
.obj-name { font-weight: 700; flex: 1; }
.obj-pts { font-family: 'Orbitron', sans-serif; color: var(--gold); }
/* Circled victory-point badge (closer to the printed card look) */
/* white number, with a glow in the objective's stage colour */
.obj-vp { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--text); flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em;
    border: 2px solid var(--ovp, var(--gold)); border-radius: 50%; font-size: .95rem;
    box-shadow: 0 0 7px color-mix(in srgb, var(--ovp, var(--gold)) 70%, transparent),
        inset 0 0 5px color-mix(in srgb, var(--ovp, var(--gold)) 28%, transparent); }
/* Searchable reveal results */
.reveal-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; max-height: 40vh; overflow: auto; }
.obj-req { padding: 0 .7rem .4rem; font-size: .82rem; color: var(--text); }
.obj-markers { display: flex; gap: .35rem; flex-wrap: wrap; padding: .3rem .7rem .6rem; }
.marker { background: none; border: none; padding: 0; cursor: pointer; opacity: .3; filter: grayscale(.6); transition: .12s; }
.marker.on { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px var(--gold); border-radius: 7px; }
.marker:hover { opacity: .85; }
/* Hairline token outline + tighter symbol padding — the framed look was still too heavy on the markers. */
.obj-markers .marker .faction-badge { border-width: 1px; border-radius: 6px; }
.obj-markers .marker .faction-badge .fb-img { padding: 3%; }

/* tech rows */
.tech-row { background: var(--panel-2); border-radius: 8px; padding: .4rem .5rem; }
.tech-text { font-size: .78rem; color: var(--text-dim); margin-top: .2rem; }
.unit-img { display: inline-block; flex: 0 0 auto; }

/* player's own technologies as names-only chips */
.my-techs { display: flex; flex-wrap: wrap; gap: .4rem; }
.my-tech { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--panel-border); border-left: 3px solid #9aa7c0; font-weight: 600; font-size: .85rem; }
.my-tech .x { cursor: pointer; color: var(--text-faint); margin-left: .1rem; }
.my-tech .x:hover { color: var(--danger); }

/* tech colour picker (step 1 of the card-based tech selection) */
.color-picker { display: flex; gap: .4rem; flex-wrap: wrap; }
.color-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600;
    background: var(--panel-2); border: 1px solid var(--panel-border); border-bottom: 3px solid var(--cc); color: var(--text); transition: .12s ease; }
.color-btn:hover { transform: translateY(-1px); }
.color-btn.sel { background: color-mix(in srgb, var(--cc) 18%, var(--panel-2)); border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc); }

/* tech browser / catalog (control view search results) */
.tech-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: .5rem; }
.tech-cat .tc-owned { color: var(--good); font-size: .72rem; }

/* ---- Tech card (all equal size; prereqs left stacked, tech point right large) ---- */
.techcard { --tc: #9aa7c0; position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .5rem;
    align-items: stretch; height: 100%; min-height: 5.6rem; padding: .5rem .55rem; border-radius: 10px;
    border: 1px solid var(--panel-border); border-left: 4px solid var(--tc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 12%, var(--panel)), var(--panel)); }
.techcard.compact { min-height: 3rem; gap: .35rem; padding: .35rem .4rem; }
.techcard.clickable { cursor: pointer; transition: .12s ease; }
.techcard.clickable:hover { border-color: var(--gold-dim); transform: translateY(-1px); box-shadow: var(--shadow); }
/* prerequisites stacked at the BOTTOM-left */
.techcard .tc-pre { display: flex; flex-direction: column; gap: .2rem; align-items: center; justify-content: flex-end; min-width: 2.1rem; }
.techcard.compact .tc-pre { min-width: 1.5rem; }
/* faction marker: circular, top-left */
.techcard .tc-fac { position: absolute; top: .3rem; left: .3rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    border: 2px solid var(--tc); background: #0d1426; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 2; }
.techcard.compact .tc-fac { width: 1.4rem; height: 1.4rem; }
.techcard .tc-fac img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.techcard .tc-facfb { color: var(--gold); font-size: .8rem; }
.techcard .tc-body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
/* Coloured name with a tech-colour → white gradient, like the printed cards. */
.techcard .tc-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .9rem; line-height: 1.1;
    background: linear-gradient(90deg, var(--tc), #ffffff 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* unit names stay solid white, not the tech-colour gradient */
.techcard.unitcard .tc-name { background: none; color: var(--text); -webkit-text-fill-color: var(--text); position: relative; z-index: 1; }
.techcard.compact .tc-name { font-size: .8rem; }
.techcard .tc-desc { font-size: .8rem; color: var(--text); line-height: 1.25; }
/* Research point sits at the bottom-right, like the card. */
.techcard .tc-point { display: flex; align-items: flex-end; justify-content: center; }
/* Non-unit techs (magazine layout): the name spans the full width on top; the prerequisite pips sit in the
   BOTTOM-left corner and the tech-point symbol in the BOTTOM-right corner, with the description wrapping
   around them so nothing is ever covered. Each corner is reached by a w0, full-height-minus-symbol float
   spacer (declared first, so it anchors at the card top): the symbol — same side, cleared — drops just past
   the spacer into the bottom symbol-height strip. Needs a definite card height; the .tech-cat grid rows and
   the beamer tech cards both provide one. --pre-n (prereq count) is set inline on the card. */
.techcard.nonunit { display: block; --pre-icon: 18px; --pre-gap: .2rem; --pt-h: 36px;
    /* Never shorter than the tech-point: two opposite bottom-corner floats couple (a float may not sit
       higher than an earlier one in source), so a single-pip stack — shorter than the point — would drag
       the point down below the card. Reserving at least --pt-h keeps both symbols pinned to the bottom. */
    --pre-h: max(calc(var(--pre-n, 0) * var(--pre-icon) + max(var(--pre-n, 1) - 1, 0) * var(--pre-gap)), var(--pt-h)); }
.techcard.nonunit.compact { --pre-icon: 14px; --pt-h: 24px; }
.techcard.nonunit .tc-name { width: 100%; }
.techcard.nonunit.faction .tc-name { padding-left: 2rem; }   /* clear the circular faction marker top-left */
.techcard.nonunit .fl-spacer { width: 0; }
.techcard.nonunit .fl-l { float: left; height: calc(100% - var(--pre-h)); }
.techcard.nonunit .fl-r { float: right; height: calc(100% - var(--pt-h)); }
.techcard.nonunit .tc-pre { float: left; clear: left; flex-direction: column; align-items: center;
    justify-content: flex-end; gap: var(--pre-gap); height: var(--pre-h); min-width: 0; margin: 0 .45rem 0 0; }
.techcard.nonunit .tc-pre:empty { display: none; }
.techcard.nonunit .tc-point { float: right; clear: right; align-items: flex-end; height: var(--pt-h); margin: 0 0 0 .45rem; }
.techcard.nonunit .tc-point:empty { display: none; }
.techcard.nonunit .tc-desc { color: var(--text); }
/* ---- Unit cards (shared by unit-upgrade techs and base UnitCard): name on top, abilities + stats
   pinned at the very bottom, silhouette placed by type (side / centred / backdrop). ---- */
.techcard.unitcard { display: flex; }                              /* override the 3-col tech grid */
.techcard.unitcard .tc-body { flex: 1; min-width: 0; display: flex; flex-direction: column;
    position: relative; z-index: 1; }
.techcard.unitcard .tc-foot { margin-top: auto; }                  /* abilities + stats sink to the bottom */
.techcard.unitcard.has-gutter .tc-body { padding-left: 1.9rem; }   /* clear the marker / prereq pips */
.techcard.unitcard.compact.has-gutter .tc-body { padding-left: 1.4rem; }
.techcard.unitcard .tc-pre { position: absolute; left: .35rem; bottom: .5rem; min-width: 0; }

/* unit silhouette: absolute so the text can sit beside or over it. */
.techcard .tc-unitart { position: absolute; object-fit: contain; pointer-events: none; z-index: 0; }
/* the prose sits vertically centred (beside the side image / over the backdrop silhouette). */
.techcard.unitcard .tc-desc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
/* side mode: silhouette right, vertically centred; prose padded to its left. */
.techcard.unitcard.side .tc-unitart { right: .45rem; top: 46%; transform: translateY(-50%);
    width: 38%; max-height: 52%; opacity: .9; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.techcard.unitcard.side .tc-desc { padding-right: 39%; }
/* centred mode: big ships are the focus, vertically centred (a gap on tall equal-height cards is
   preferred over an over-large / clipped silhouette). */
.techcard.unitcard.centered .tc-unitart { left: 50%; top: 42%; transform: translate(-50%, -50%);
    width: 56%; max-height: 56%; opacity: .92; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
/* with abilities (dreadnought/destroyer) lift + shrink so the ★ line and stats stay clear of it */
.techcard.unitcard.centered.hasabils .tc-unitart { top: 33%; max-height: 46%; }
.techcard.unitcard.centered .tc-abils { justify-content: center; }
.techcard.unitcard.centered .tc-foot { text-shadow: 0 1px 2px rgba(0,0,0,.85); }
/* backdrop mode (flagships, dreadnought II, war sun): silhouette behind the text, filled solid black
   with a white outline that glows and falls off outward. */
.techcard.unitcard.backdrop .tc-unitart { right: 0; top: 43%; transform: translateY(-50%);
    width: 82%; max-height: 84%; opacity: .9;
    filter: brightness(0) drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 3px rgba(255,255,255,.55)) drop-shadow(0 0 7px rgba(255,255,255,.28)); }
/* crisp dark contour around the text so it reads cleanly against the white glow */
.techcard.unitcard.backdrop .tc-body { text-shadow:
    -1px -1px 0 #05080f, 1px -1px 0 #05080f, -1px 1px 0 #05080f, 1px 1px 0 #05080f,
    0 0 3px #05080f, 0 0 4px #05080f; }

/* abilities like the printed cards: a white four-point ✦ then the keyword in bold */
.techcard .tc-abils { display: flex; flex-wrap: wrap; align-items: center; gap: .05rem .7rem; margin-top: .25rem; }
.techcard .tc-abil { display: inline-flex; align-items: center; gap: .22em; font-size: .72rem; color: var(--text); line-height: 1.3; white-space: nowrap; }
.techcard .tc-abil .star { color: var(--text); font-size: .82em; }
.techcard .tc-abil b { font-weight: 700; letter-spacing: .02em; }
.techcard .tc-abil .av { font-weight: 600; }

.techcard .tc-stats { display: flex; gap: .3rem; margin-top: .3rem; }
.techcard .tc-stat { flex: 1; text-align: center; background: #0c1426; border: 1px solid var(--panel-border); border-radius: 7px; padding: .15rem .1rem; }
.techcard .tc-stat .v { display: flex; align-items: center; justify-content: center; gap: .2rem;
    font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--text); font-size: 1rem; }
.techcard .tc-stat .l { display: block; font-size: .55rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
/* fighter/infantry cost symbols + combat dice: a tight stack of small icons beside the number. */
.techcard .tc-stat .statmult { display: inline-flex; flex-direction: column; gap: 1px; justify-content: center; }
.techcard .tc-stat .statmult img { object-fit: contain; opacity: .95; }
.techcard .tc-stat .statmult.cost img { width: 13px; height: 11px; }
.techcard .tc-stat .statmult.dice img { width: 9px; height: 9px; }
/* 3 dice (war sun): bow the middle one out to the right so they arc around the number */
.techcard .tc-stat .statmult.dice.n3 img:nth-child(2) { transform: translateX(3px); }

/* tech cards on the wall display — base overrides (the tech-mode cards add more specific sizing below). */
.beamer .techcard { min-height: 0; background: var(--panel-2); }
.beamer .techcard .tc-name { font-size: clamp(.65rem, .92vw, 1.15rem); }
/* keep unit cards inside the narrow wall column (the silhouette is % so it scales already) */
.beamer .tc-abil { font-size: clamp(.5rem, .68vw, .8rem); white-space: normal; }
.beamer .tc-stat .v { font-size: clamp(.7rem, 1vw, 1.1rem); }
.beamer .tc-stat .statmult.cost img { width: clamp(8px, .9vw, 13px); height: auto; }
.beamer .tc-stat .statmult.dice img { width: clamp(6px, .65vw, 9px); height: auto; }

/* agenda */
.agenda-card { background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 10px; padding: .7rem .9rem; }
.agenda-pick { justify-content: flex-start; text-align: left; width: 100%; }
.speaker-row { box-shadow: inset 0 0 0 1px var(--gold-dim); }
.beamer .vote-card.speaker-row { box-shadow: 0 0 0 2px var(--gold); }
.beamer .vote-card .spk { color: var(--gold); }

/* Speaker token icon (recreated Sprecher token) — scales to its inline height. */
.speaker-icon { width: auto; vertical-align: -0.18em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
/* Speaker marker among the display status flags: just the token, no chip background. */
.beamer .p-flag.speaker { background: none; border: 0; padding: 0; display: inline-flex; align-items: center; }
/* Agenda vote-weight stepper (±1/5/10). */
.vote-step .vote-step-n { font-family: 'Orbitron', sans-serif; font-weight: 700; min-width: 1.7em; text-align: center; color: var(--gold); }

/* ---- Agenda control view ---- */
/* Big "enter your influence" prompt (styled like the action-phase turn banner). */
.agenda-prompt { display: flex; align-items: center; padding: .6rem 1rem; margin-bottom: .7rem; border-radius: 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel));
    border: 1px solid var(--panel-border); border-left: 6px solid var(--accent); }
.agenda-prompt .ap-big { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.4rem); }
/* Influence value: always blue, with the influence symbol. */
.inf-val { display: inline-flex; align-items: center; gap: .2rem; font-family: 'Orbitron', sans-serif; font-weight: 700;
    color: #5bb8f5; min-width: 2.4em; justify-content: center; }
.inf-val .inf-ico { height: 1.1em; width: auto; }
/* Vote draft: outcome buttons Against · Abstain · For, coloured by selection. */
.vote-draft { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.oa-row { display: flex; gap: .3rem; flex: 1 1 auto; }
.oa { flex: 1 1 0; padding: .45rem .5rem; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--panel-2);
    color: var(--text-dim); font: inherit; font-weight: 700; cursor: pointer; transition: .12s ease; white-space: nowrap; }
.oa:hover { color: var(--text); }
.oa-for.on { background: linear-gradient(180deg, #36c07a, #259b5f); border-color: #36c07a; color: #06210f; }    /* Dafür = green */
.oa-against.on { background: linear-gradient(180deg, #e0556a, #b23548); border-color: #e0556a; color: #fff; }   /* Dagegen = red */
.oa-abstain.on { background: #e8eefc; border-color: #fff; color: #0a1020; }                                     /* Enthalten = white */
/* "Cast vote" — yellow (gold), with the ballot glyph. */
.vote-set { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); border-color: var(--gold); color: #20160a; font-weight: 700; }
.vote-set:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.vote-set .vote-glyph { vertical-align: -0.16em; }
/* Player self voting card (non-host): only their own seat, enlarged. */
.vote-self { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border-radius: 12px;
    border: 1px solid var(--panel-border); border-left: 6px solid var(--player-color, #888);
    background: linear-gradient(180deg, color-mix(in srgb, var(--player-color) 14%, var(--panel)), var(--panel)); }
.vote-self .vs-head { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; }
.vote-self .vs-head strong { font-family: 'Orbitron', sans-serif; }
.vote-self .vote-draft { gap: .6rem; }
.vote-self .oa { padding: .6rem .5rem; font-size: 1rem; }
.vote-self .vs-done { color: var(--good); font-weight: 600; margin: 0; font-size: 1.05rem; }

/* "logged in as" tag in the session header */
.you-tag { display: flex; align-items: center; gap: .5rem; padding: .25rem .6rem; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--gold-dim); }
.you-tag .lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); }
.you-tag .nm { font-weight: 700; line-height: 1.1; }

/* action phase: tappable turn strip (focus a player to steer their turn) */
.turn-strip { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.turn-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 999px;
    border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.turn-chip:hover { border-color: var(--gold-dim); }
.turn-chip .ti { font-family: 'Orbitron', sans-serif; color: var(--gold); font-weight: 700; }
.turn-chip.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.turn-chip.passed { opacity: .5; }
.active-player-card { border-width: 2px; }

/* action-phase turn status banner (outside the player card) */
.turn-banner { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; border-radius: 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--player-color) 26%, var(--panel)), var(--panel));
    border: 1px solid var(--panel-border); border-left: 6px solid var(--player-color, #888); }
.turn-banner.you { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.turn-banner .tb-big { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.5rem; }
.turn-banner .tb-sub { font-size: .85rem; color: var(--danger); font-weight: 600; }

/* status chips */
.chip { font-size: .68rem; padding: .08rem .45rem; border-radius: 999px; border: 1px solid var(--panel-border); }
.chip-passed { background: rgba(224,85,106,.18); color: #f1a3ae; border-color: #6b2a35; }
.chip-done { background: rgba(70,192,138,.16); color: #8fe0bd; border-color: #2c5e49; }
.chip-active { background: rgba(217,176,74,.16); color: var(--gold); border-color: var(--gold-dim); }

/* ---- code chip ---- */
.codechip { font-family: 'Orbitron', monospace; letter-spacing: .25em; font-size: 1.1rem; color: var(--gold); background: #0a1020; border: 1px dashed var(--gold-dim); padding: .2rem .6rem; border-radius: 8px; }

/* ===================================================================
   Beamer (projection / wall display) view
   Fills exactly one screen — never scrolls — for up to 8 players.
   Player rows and objectives flex to share the available height; font
   sizes scale with the viewport so text stays as large as it can.
   =================================================================== */
.beamer {
    height: 100vh; width: 100vw; overflow: hidden;
    padding: 1vh 1.4vw; display: flex; flex-direction: column; gap: 1vh;
}
.beamer .b-head { display: flex; align-items: baseline; gap: 1.2rem; flex: 0 0 auto; }
.beamer .b-title { font-size: clamp(1.4rem, 2.4vw, 3rem); color: var(--gold); }
.beamer .b-meta { font-size: clamp(.9rem, 1.4vw, 1.8rem); color: var(--text-dim); }
.beamer .b-phase { font-family: 'Orbitron', sans-serif; color: var(--text); font-weight: 700; }
/* Prominent join code on the wall so players can read it across the room and join. */
.beamer .b-join { display: flex; align-items: center; gap: .6vw; }
.beamer .b-join-lbl { font-size: clamp(.7rem, 1vw, 1.3rem); color: var(--text-faint); text-transform: uppercase; letter-spacing: .18em; }
.beamer .b-join-code { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--gold); letter-spacing: .22em;
    font-size: clamp(1.4rem, 2.6vw, 3.2rem); line-height: 1; background: #0a1020; border: 1px dashed var(--gold-dim);
    padding: .12em .42em; border-radius: 10px; }

/* The two-column body fills the remaining height and clips (never scrolls). */
.beamer-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2vw; }
.beamer-grid.two-col { grid-template-columns: .9fr 1.25fr; }
/* Until a Stage II objective is revealed there's only one column → the objectives panel needn't be full width. */
.beamer-grid.obj-single { grid-template-columns: 1.35fr .65fr; }
.beamer-grid.one-col { grid-template-columns: 1fr; }
/* Two-area display (objectives/tech/secondary): left player table = content width, right panel fills. */
.beamer-grid.two-area { grid-template-columns: max-content minmax(0, 1fr); }
.beamer-grid.two-area .players-panel { max-width: 52vw; }

/* ===================================================================
   Bereich 1 — player table (one row per player; columns aligned via subgrid)
   =================================================================== */
.beamer .ptable { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: 1fr; align-content: stretch;
    gap: .6vh .9vw; grid-template-columns: auto auto minmax(0, 14em) auto; }
.beamer .ptr { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; gap: 0 .9vw;
    padding: .35vh .7vw; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--panel-border);
    border-left: .45vw solid var(--player-color, #888); min-height: 0; overflow: hidden; }
.beamer .ptr.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 2.5vh rgba(217,176,74,.35);
    background: linear-gradient(90deg, color-mix(in srgb, var(--player-color) 38%, var(--panel)), color-mix(in srgb, var(--player-color) 14%, var(--panel))); }
/* Passed: only the identity recedes (the strategy cards stay bright). */
.beamer .ptr.passed .ptr-init,
.beamer .ptr.passed .ptr-badge,
.beamer .ptr.passed .p-name,
.beamer .ptr.passed .p-fac { opacity: .45; filter: saturate(.5); }
.beamer .ptr-init { font-family: 'Orbitron', sans-serif; color: var(--gold); font-size: clamp(1rem, 1.9vw, 2.4rem); text-align: center; min-width: 1.4em; }
.beamer .ptr-badge { display: inline-flex; align-items: center; justify-content: center; }
.beamer .ptr-id { min-width: 0; }
/* Strategy pills: all the same width (stretch to the subgrid column = the widest), so they line up flush. */
.beamer .ptr-strat { display: flex; flex-direction: column; gap: .4vh; align-items: stretch; }
.beamer .ptr-strat .s-pill { width: 100%; min-width: 8em; font-size: clamp(.7rem, .92vw, 1.25rem); padding: .3em .55em; }

/* ===================================================================
   Bereich 2 — right content panels (tech cards / secondaries; objectives reuse .obj-list)
   =================================================================== */
/* Tech: full cards (control-tab layout) flowed into ≥4 columns (column-width sets the count); non-unit
   techs first, UNIT techs in their own same-width area below. Each card keeps a fixed aspect ratio.
   ti4.fitTechCols collapses low-prerequisite techs to a name (`.collapsed`) per column until it fits. */
.beamer .panel-body.tech-cols-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1vh; overflow: hidden; }
/* One column per tech colour (equal width); cards sized by the column width, fixed aspect ratio.
   The colour row gets the leftover height (basis 0); the unit row keeps its natural height (no shrink),
   so the colour columns collapse to fit rather than squeezing the units. */
.beamer .tech-color-row { flex: 1 1 0; min-height: 0; display: flex; gap: 1vw; align-items: stretch; }
/* Same width formula as the unit cards so all columns/cards are exactly equal width. */
.beamer .tech-col { flex: 0 0 calc((100% - (var(--tech-cols, 4) - 1) * 1vw) / var(--tech-cols, 4));
    min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1vh; overflow: hidden; }
/* Units at the bottom — own area, same card width as a colour column (4-up). */
.beamer .tech-unit-row { flex: 0 0 auto; min-height: 0; max-height: 40%; display: flex; flex-wrap: wrap; gap: 1vh 1vw;
    align-content: flex-start; overflow: hidden; border-top: 1px solid var(--panel-border); padding-top: 1vh; }
/* Unit cards match the colour-column width exactly (--tech-cols = number of colour columns). */
.beamer .tech-unit-row .tech-item { flex: 0 0 calc((100% - (var(--tech-cols, 4) - 1) * 1vw) / var(--tech-cols, 4)); }
.beamer .tech-item { margin: 0; }
/* overflow:hidden keeps the card at its aspect-ratio height (content can't push it taller) and clips any
   residual text, so the column layout / ti4.fitTechCols stay font-independent. */
.beamer .tech-item .techcard { width: 100%; aspect-ratio: 5 / 3; height: auto; overflow: hidden; }  /* fixed proportions, scaled by column width */
.beamer .tech-unit-row .tech-item .techcard { aspect-ratio: 4 / 3; }               /* units a bit taller, same width */
/* Per-card DYNAMIC font scaling: ti4.fitTechCardFonts sets --tcfs per card to the largest scale that keeps
   the NAME on one line (nowrap) and the DESCRIPTION from overflowing the fixed-aspect card. Base (scale 1)
   = the player-view tech card sizes (.9/.8/.72rem); the JS fitter searches a scale in [.7, 1.9] per card,
   so a card with spare room grows its text and a text-heavy one shrinks just enough not to overlap. */
.beamer .tech-item { --tcfs: 1; }
.beamer .tech-item .tc-name { font-size: calc(.9rem * var(--tcfs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beamer .tech-item .tc-desc { font-size: calc(.8rem * var(--tcfs)); line-height: 1.18; }
.beamer .tech-item .tc-abil { font-size: calc(.72rem * var(--tcfs)); }
/* Collapsed: name only (card hidden); the researcher markers stay. */
.beamer .tech-item .ti-name { display: none; align-items: center; gap: .35vw; padding: .25vh .5vw; border-radius: 6px;
    background: var(--panel-2); border: 1px solid var(--panel-border); font-weight: 700; font-size: clamp(.72rem, .95vw, 1.35rem); }
.beamer .tech-item .ti-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beamer .tech-item.collapsed .techcard { display: none; }
.beamer .tech-item.collapsed .ti-name { display: flex; }
.beamer .tech-markers { display: flex; flex-wrap: wrap; gap: .2vh .3vw; justify-content: center; margin-top: .3vh; }
.beamer .tech-markers .faction-badge { border-width: 1px; }
/* Secondary: all available cards, equal size (2-up grid, equal-height rows). */
.beamer .panel-body.sec-cards-panel { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; gap: 1vh 1vw; align-content: stretch; overflow: hidden; }
.beamer .panel-body.sec-cards-panel .sec-card { flex: initial; max-width: none; width: auto; height: 100%; min-height: 0; }

.beamer .panel-body.obj-list { overflow: hidden; }
.beamer .panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: .8vh 1vw; margin: 0; }
.beamer .panel > h3 { font-size: clamp(1rem, 1.5vw, 1.9rem); margin: 0 0 .6vh; flex: 0 0 auto; }
.beamer .panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .5vh; overflow: hidden; }

/* Player name / faction / status flags — shared by the wall player table (`.ptr-id`, see `.ptable` below). */
.beamer .p-name { font-weight: 700; font-size: clamp(1rem, 1.7vw, 2.2rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beamer .p-fac { color: var(--text-dim); font-size: clamp(.7rem, 1vw, 1.3rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beamer .p-flags { display: flex; flex-flow: row wrap; gap: .3vh .4vw; align-items: flex-start; margin-top: .3vh; }
.beamer .p-flags:empty { display: none; }

/* Secondary-ability boxes (DisplayMode.Secondary, inside `.sec-cards-panel`): the panel grid sizes them
   equally; this gives the border / accent / bullet styling. */
.beamer .sec-card { --c: #888; flex: 0 0 30vw; max-width: 30vw; border: 1px solid var(--panel-border); border-left: .3vw solid var(--c);
    padding: .3vh .9vw; background: color-mix(in srgb, var(--c) 10%, var(--panel)); border-radius: 6px; }
.beamer .sec-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(.85rem, 1.2vw, 1.6rem); }
.beamer .sec-name .pn { color: var(--c); }
.beamer .sec-card .ability-bullets li { font-size: clamp(.75rem, 1.05vw, 1.45rem); line-height: 1.2; }
.beamer .sec-card .ability-bullets li::before { color: var(--text); }

/* Strategy-card pill (names only on the wall display). */
.s-pill {
    --c: #888; display: inline-flex; align-items: center; gap: .4em; justify-content: flex-start;
    font-family: 'Orbitron', sans-serif; font-weight: 700; min-width: 10.5em;
    font-size: clamp(.85rem, 1.2vw, 1.65rem); line-height: 1;
    padding: .4em .7em; border-radius: 8px; white-space: nowrap;
    background: color-mix(in srgb, var(--c) 22%, var(--panel)); border: 1px solid var(--c);
    border-left: .35em solid var(--c); color: var(--text);
}
.s-pill .pn { font-family: 'Orbitron', sans-serif; color: var(--c); }
/* Exhausted (action already played) cards: struck through + dimmed. */
.s-pill.used { opacity: .45; text-decoration: line-through; filter: grayscale(.5); }
.s-pill .tg { color: var(--gold); font-size: .85em; }

/* Big status flags on the row (PASSED / READY). */
.beamer .p-flag { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(.62rem, .82vw, 1.05rem); padding: .15em .55em; border-radius: 7px; white-space: nowrap; }
.beamer .p-flag.passed { background: rgba(224,85,106,.22); color: #f1a3ae; border: 1px solid #6b2a35; }
.beamer .p-flag.ready { background: rgba(70,192,138,.2); color: #8fe0bd; border: 1px solid #2c5e49; }
.beamer .p-flag.waiting { background: rgba(120,130,160,.16); color: var(--text-faint); border: 1px solid var(--panel-border); }

/* ---- Objectives on the display: two columns (Stage I | Stage II), room for 12, near-card look ---- */
.beamer .obj-list.two, .beamer .obj-list.one { flex-direction: row; gap: .9vw; align-items: stretch; }
.beamer .obj-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .5vh; overflow: hidden; }
/* Uniform card height across BOTH columns = (column height / max card count), capped so few cards don't
   blow up — driven by --obj-rows set on the list. */
.beamer .obj-card { flex: 0 0 min(18vh, calc((100% - (var(--obj-rows, 6) - 1) * .5vh) / var(--obj-rows, 6)));
    min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: .4vh .9vw; }
.beamer .obj-head { padding: 0; gap: .6vw; }
.beamer .obj-name { font-size: clamp(.95rem, 1.45vw, 1.9rem); font-weight: 700; }
.beamer .obj-vp { font-size: clamp(1rem, 1.5vw, 2rem); width: 1.8em; height: 1.8em; }
.beamer .obj-req { padding: .15vh 0 0; font-size: clamp(.82rem, 1.18vw, 1.5rem); color: var(--text); line-height: 1.16; }
.beamer .obj-markers { padding: .25vh 0 0; gap: .4vw; }

/* Tech overview (compact) */
.beamer .tech-line { font-size: clamp(.7rem, .95vw, 1.2rem); line-height: 1.4; display: flex; flex-wrap: wrap; gap: .35vw; align-items: center; }
.beamer .dtech { display: inline-flex; align-items: center; gap: .25em; padding: .05em .4em; border-radius: 6px;
    background: var(--panel-2); border: 1px solid var(--panel-border); white-space: nowrap; }
.beamer .dtech .tech-icon { vertical-align: middle; }

/* ---- Enlarged "played action" highlight band (the one place ability text shows) ---- */
.beamer .highlight-band { flex: 0 0 auto; }
.beamer .big-strat { --c: #888; padding: 1vh 1.2vw; border-radius: 12px;
    border: 1px solid var(--c); border-top: .5vh solid var(--c);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--panel)), var(--panel));
    box-shadow: 0 0 0 3px var(--gold), 0 0 4vh rgba(217,176,74,.3); }
.beamer .big-strat .strat-head { display: flex; align-items: baseline; gap: .8vw; flex-wrap: wrap; }
.beamer .big-strat .num { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--c); font-size: clamp(1.6rem, 2.6vw, 3.2rem); }
.beamer .big-strat .sname { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 2.8rem); }
.beamer .big-strat .ability-label { font-size: clamp(.8rem, 1.05vw, 1.4rem); color: var(--c); margin-top: .5vh; }
.beamer .big-strat .ability-bullets li { font-size: clamp(.85rem, 1.25vw, 1.7rem); color: var(--text); line-height: 1.2; padding-left: 1.2em; margin-bottom: .2vh; }
.beamer .big-strat .ability-bullets li::before { color: var(--text); }

/* ===================================================================
   Beamer — end-game statistics wall (host "End game" only)
   =================================================================== */
.beamer-stats { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1.2vh; overflow: hidden; }
.beamer-stats .bs-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2vw; flex: 0 0 auto; flex-wrap: wrap; }
.beamer-stats .bs-title { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--gold); font-size: clamp(1.6rem, 3vw, 4rem); }
.beamer-stats .bs-match { display: flex; align-items: baseline; gap: 1vw; }
.beamer-stats .bs-lbl { color: var(--text-dim); font-size: clamp(.9rem, 1.4vw, 1.8rem); }
.beamer-stats .bs-big { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--text); font-size: clamp(1.8rem, 3.6vw, 4.8rem); }
.beamer-stats .bs-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.beamer-stats .bs-panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.beamer-stats .bs-panel h3 { color: var(--gold); font-size: clamp(1rem, 1.6vw, 2rem); margin: 0 0 .6vh; }
.beamer-stats .bs-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.beamer-stats .bs-row { display: flex; align-items: center; gap: .8vw; padding: .5vh .4vw .5vh .6vw;
    border-bottom: 1px solid var(--panel-border); border-left: .4vw solid var(--player-color, transparent); }
.beamer-stats .bs-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: clamp(.9rem, 1.4vw, 1.9rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beamer-stats .bs-val { font-family: 'Orbitron', sans-serif; color: var(--gold); font-size: clamp(.9rem, 1.4vw, 1.9rem); white-space: nowrap; }
/* Left column = per-round bar over per-phase pie; right = per-player pie. */
.beamer-stats .bs-left { display: flex; flex-direction: column; gap: 1.2vw; min-height: 0; }
.beamer-stats .bs-left .bs-panel { flex: 1 1 0; }
.beamer-stats .bs-right { min-height: 0; }

/* Pie chart (svg + legend). */
.pie-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 1.5vw; overflow: hidden; }
.pie-svg { height: 100%; max-height: 100%; width: auto; max-width: 48%; flex: 0 0 auto; }
.pie-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .5vh; overflow: hidden; }
.pie-leg-row { display: flex; align-items: center; gap: .6vw; font-size: clamp(.85rem, 1.3vw, 1.8rem); }
.pie-dot { width: 1em; height: 1em; border-radius: 3px; flex: 0 0 auto; }
.pie-leg-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-leg-val { font-family: 'Orbitron', sans-serif; color: var(--gold); flex: 0 0 auto; }

/* Bar chart (horizontal). */
.bar-chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .8vh; justify-content: center; overflow: hidden; }
.bar-row { display: flex; align-items: center; gap: .8vw; font-size: clamp(.85rem, 1.3vw, 1.8rem); }
.bar-label { flex: 0 0 auto; min-width: 5.5em; }
.bar-track { flex: 1 1 auto; height: 1.5em; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 6px 0 0 6px; min-width: 2px; }
.bar-val { flex: 0 0 auto; font-family: 'Orbitron', sans-serif; color: var(--gold); min-width: 4.5em; text-align: right; }

/* ===================================================================
   Beamer — agenda phase (shows ONLY the agenda + votes)
   =================================================================== */
.beamer .agenda-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1.2vh; }
.beamer .agenda-headline { font-size: clamp(1.6rem, 3vw, 4rem); color: var(--gold); line-height: 1.1; }
.beamer .agenda-kind { font-size: clamp(1rem, 1.5vw, 2rem); color: var(--text-dim); }
.beamer .agenda-body { font-size: clamp(1rem, 1.6vw, 2.2rem); color: var(--text); line-height: 1.25; }
.beamer .agenda-elect { font-size: clamp(1rem, 1.6vw, 2.1rem); }
.beamer .agenda-elect b { color: var(--gold); }
.beamer .tally-row { display: flex; gap: 1.2vw; flex-wrap: wrap; }
.beamer .tally { font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 2vw, 2.8rem); padding: .4vh 1.2vw; border-radius: 10px; border: 1px solid var(--panel-border); }
.beamer .tally.lead { box-shadow: 0 0 0 2px var(--gold); }
/* Result line (display only) — large and central. */
.beamer .agenda-result { font-family: 'Orbitron', sans-serif; font-weight: 700; text-align: center; margin: .2vh 0 .4vh;
    font-size: clamp(1.4rem, 2.6vw, 3.4rem); color: var(--gold); text-shadow: 0 0 14px rgba(217,176,74,.45); }

/* Each player is a faction portrait, arranged in a shallow arc ("galactic council"). The middle seats
   sit highest (translateY set inline per index); a soft floor glow + faint arc sit behind them. */
.beamer .votes-grid { flex: 1 1 auto; min-height: 0; position: relative; display: flex; justify-content: center;
    align-items: flex-end; gap: .6vw; padding: 7vh .8vw 1vh; overflow: hidden; }
.beamer .votes-grid::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -34%; height: 72%;
    border-radius: 50%; border: 1px solid rgba(123,160,224,.16);
    background: radial-gradient(60% 80% at 50% 0%, rgba(79,195,247,.10), transparent 70%); pointer-events: none; }
.beamer .vote-card { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: 12vw; display: flex; flex-direction: column;
    align-items: center; gap: .4vh; min-height: 0; padding: 0; background: transparent; border: 0; }
.beamer .vote-card.speaker-row { box-shadow: none; }
.beamer .vote-top { display: flex; flex-direction: column; align-items: center; gap: .1vh; justify-content: flex-end; flex: 0 0 auto; min-height: 2.6em; text-align: center; }
.beamer .vote-choice { font-size: clamp(1rem, 1.5vw, 2rem); color: var(--text); line-height: 1.05; font-weight: 700; }
.beamer .vote-choice.waiting { color: var(--text-faint); font-weight: 400; }
.beamer .vote-choice.v-for { color: #5fd39a; }       /* Dafür = green */
.beamer .vote-choice.v-against { color: #f1707f; }   /* Dagegen = red */
.beamer .vote-weight { font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 1.9vw, 2.6rem); color: var(--gold); line-height: 1; }
.beamer .vote-influence { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25em; margin-top: .3vh;
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(.9rem, 1.3vw, 1.8rem); color: #5bb8f5; }
.beamer .vote-influence .vi-ico { height: 1.05em; width: auto; }
.beamer .vote-card .fac-portrait { width: 100%; }

/* Faction portrait with a name bar (~a fifth up from the bottom), in the player's chosen colour. */
.fac-portrait { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.beamer .fac-portrait { aspect-ratio: 3 / 4; max-height: 40vh; }
.fac-portrait-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.fac-portrait.noimg { display: flex; align-items: flex-start; justify-content: center; padding-top: 8%; background: #0d1426; }
.fac-portrait-bar { position: absolute; left: 0; right: 0; bottom: 22%; background: var(--player-color, #444); padding: .14em .4em; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.fac-portrait-name { display: block; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Speaker token: centred in the strip BELOW the name plate (between the name bar and the portrait
   bottom edge), so it sits under the name without shifting it. */
.fac-portrait-spk { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; display: flex; align-items: center;
    justify-content: center; z-index: 3; pointer-events: none; }
.fac-portrait-spk .speaker-icon { height: 86%; width: auto; max-width: 94%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.75)); }
.beamer .fac-portrait-name { font-size: clamp(.95rem, 1.5vw, 2.1rem); }

/* ===================================================================
   Setup — player card header (wraps so names stay readable on phones)
   =================================================================== */
.setup-pcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.setup-pcard-id { display: flex; align-items: center; gap: .5rem; flex: 1 1 12rem; min-width: 0; }
.setup-pcard-id .seat-no { font-family: 'Orbitron', sans-serif; color: var(--gold); min-width: 1.4em; text-align: center; flex: 0 0 auto; }
.setup-pcard-name { flex: 1 1 auto; min-width: 0; }
.setup-pcard-name input { width: 100%; }
.setup-pcard-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* Agenda influence-entry rows */
.inf-row { flex-wrap: wrap; }
.inf-row .inf-name { flex: 1 1 6rem; min-width: 0; }
.inf-step { flex-wrap: wrap; }

/* ===================================================================
   Modal overlay (match statistics / log)
   =================================================================== */
.modal-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(4, 8, 18, .66); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow: auto; }
.modal { width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: var(--shadow); padding: 1rem; }
.modal-head { display: flex; align-items: center; gap: .5rem; }
.modal-body { overflow: auto; min-height: 0; }
/* Seat-order confirmation dialog (host, before the game starts) */
.seat-confirm { max-width: 440px; }
.seat-confirm-row .seat-no { font-family: 'Orbitron', sans-serif; color: var(--gold); min-width: 1.4em; text-align: center; flex: 0 0 auto; }
.stats-modal .stat-block { margin: .6rem 0; }
.stats-modal .stat-block h4 { margin: .2rem 0 .4rem; color: var(--text-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.stats-modal .stat-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .25rem; border-bottom: 1px solid var(--panel-border); border-left: 3px solid var(--player-color, transparent); padding-left: .5rem; }
.stats-modal .stat-player { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.stats-modal .stat-val { font-family: 'Orbitron', sans-serif; color: var(--gold); white-space: nowrap; }
.stats-modal .stat-big { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .3rem .25rem; }
.stats-modal .stat-big .stat-val { font-size: 1.6rem; }
.stats-modal .stat-label { color: var(--text-dim); }
.log-list { display: flex; flex-direction: column; }
.log-row { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; padding: .2rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.log-time { color: var(--text-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.log-actor { color: var(--gold); font-weight: 600; flex: 0 0 auto; }
.log-desc { color: var(--text); min-width: 0; }

/* iPad / tablet: never scroll sideways — the control view must fit the viewport width. */
html, body { max-width: 100%; overflow-x: hidden; }
.container { width: 100%; box-sizing: border-box; }

/* Legal / IP notice footer (Asmodee/FFG community-use guidelines) */
.legal-footer { max-width: 1180px; margin: 1.5rem auto 0; padding: .9rem 1rem 1.4rem; border-top: 1px solid var(--panel-border); color: var(--text-faint); font-size: .68rem; line-height: 1.4; }
.legal-footer p { margin: .15rem 0; }
.legal-footer .legal-meta { margin-top: .4rem; opacity: .85; }
.legal-footer a { color: var(--text-dim); text-decoration: underline; }
.legal-footer a:hover { color: var(--gold); }

/* ===================================================================
   Blazor essentials (loading + error)
   =================================================================== */
#blazor-error-ui {
    color-scheme: dark only; background: #2a1320; color: #ffd7df;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.4); box-sizing: border-box; display: none;
    left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: #1a2540; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--gold); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto .2rem; color: var(--text-dim); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: 8px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* responsive */
@media (max-width: 760px) {
    .beamer-grid { grid-template-columns: 1fr; }
    .container { padding: .7rem; }
}