/* Bacteria Fever — the art direction (2026-10-12): hostile, electric microbiology. A lab black tinted green, the brand's
   acid green for what one does, magenta for what threatens, violet for the secondary; Space Grotesk for titles and
   scores, Inter for everything else (both self-hosted, SIL OFL: assets/fonts). On top of bf.css and v2.css.
   The temperature's five colours (white, blue, yellow, orange, red) stay the GAME's information, on the cards and the
   colonies' bodies; the players' colours are greens and purples only (src/bf/second-board.js PLAYER_COLORS). */
@font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #101411;
  --panel: #161c17;
  --line: #2a332b;
  --ink: #F0F3E8;
  --muted: #8F998F;      /* secondary text (4.5:1 on the panels); #687168 for what is disabled */
  --off: #687168;
  --cyan: #B7FF38;       /* the brand: the action that matters (the old cyan accent of bf.css) */
  --magenta: #F0448C;    /* threat, opposition */
  --violet: #7656E8;
  --green: #B7FF38;
  --good: #B7FF38;
  --bad: #F0448C;
  --flat: #8F998F;
  --display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}
html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body { background: radial-gradient(120% 70% at 50% 0%, #17231a 0%, var(--bg) 62%) fixed; }
h1, h2, h3, .turnno, .rankme b, .timer, .card2 .temp, .card2 .el, .victory h1, .rk, .phase b { font-family: var(--display); }
h2 { text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-shadow: none; }
small { color: var(--muted); }

/* The logo (a typographic direction, not the final logo): BACTERIA compact, FEVER wider and shifted, the V as two
   organisms converging; the signature under it. */
.logo { text-align: center; margin: 30px 0 10px; font-family: var(--display); line-height: .9; }
.logo .l1 { display: block; font-size: 44px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.logo .l2 { display: block; font-size: 58px; font-weight: 700; letter-spacing: .14em; color: var(--green); margin-left: .6em; text-shadow: 0 0 18px rgba(183, 255, 56, .35); }
.logo .v { display: inline-block; position: relative; color: transparent; width: .78em; }
.logo .v svg { position: absolute; left: 0; top: .08em; width: .78em; height: .78em; overflow: visible; }
.logo .tag { display: block; margin-top: 14px; font: 600 12px/1.2 var(--display); letter-spacing: .28em; color: var(--muted); text-transform: uppercase; }
.logo .sig { display: block; margin-top: 6px; font: 500 15px/1.2 'Inter', sans-serif; color: var(--magenta); letter-spacing: .02em; }

/* Buttons: the brand green for the main action, magenta stays for threats. */
.neon { background: rgba(183, 255, 56, .08); border-color: var(--green); color: var(--ink); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 0 12px rgba(183, 255, 56, .28); text-shadow: none; }
.neon.ghost { border-color: var(--violet); box-shadow: 0 0 10px rgba(118, 86, 232, .35); }
.chip.on, .aimb.on { border-color: var(--green); box-shadow: 0 0 10px rgba(183, 255, 56, .45); color: var(--ink); }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(183, 255, 56, .2); }
.qr { background: #F0F3E8; box-shadow: 0 0 24px rgba(183, 255, 56, .3); }
.top2 { background: var(--panel); }
.top2 .rankme b { color: var(--green); text-shadow: none; font-size: 19px; }
.turnno { color: var(--ink); text-shadow: none; }
.timer.low { color: var(--magenta); text-shadow: none; }
.hand { background: var(--panel); }
.netbar { background: #241a07; }

/* The dish: lab glass and agar tinted green. */
.glass { fill: rgba(220, 255, 200, .04); stroke: rgba(210, 240, 200, .45); filter: drop-shadow(0 0 8px rgba(183, 255, 56, .25)); }
.agar { stroke: rgba(210, 240, 200, .14); }
.hex { fill: rgba(30, 44, 33, .55); stroke: #243327; }
.gate { stroke: var(--c); }
/* membrane (the table's): the edge cells are the player's colour, bright; the inside the temperature's colour. */
.dish.v2 .hex.own { fill: color-mix(in srgb, var(--c) 68%, #0b0f0c); stroke: color-mix(in srgb, var(--c) 80%, #fff); stroke-width: 1; filter: none; }
.dish.v2.m-membrane .hex.own.rim { fill: color-mix(in srgb, var(--c) 30%, #0b0f0c); stroke: var(--c); stroke-width: 2.2; filter: drop-shadow(0 0 2px var(--c)); }
/* contour: the cells in the temperature's colour, the colony's outline in the player's. */
.dish.v2 .membrane { fill: none; stroke: var(--w); stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--w)); }
/* aura: the cells in the player's colour, the temperature as a glow around the colony. */
.dish.v2 .colony.aura { filter: drop-shadow(0 0 5px var(--t)) drop-shadow(0 0 2px var(--t)); }
.dish.v2 .colony.aura .hex.own { fill: color-mix(in srgb, var(--c) 55%, #0b0f0c); }
.hex.own.served { stroke: #fff; stroke-width: 2.2; filter: drop-shadow(0 0 5px #fff); }
.clabel2 .nm { fill: var(--w, #fff); font-family: var(--display); }
.clabel2.me .nm { fill: var(--w, #fff); text-decoration: underline; }
.clabel2 text { stroke: #0b0f0c; }
.clabel2 .badge { fill: var(--ink); }
.clabel2 .sub.good { fill: var(--green); }
.clabel2 .sub.bad { fill: var(--magenta); }
.who { color: var(--w, var(--c)); }

/* The card keeps its temperature's colour; its frame, the lab's. */
.card2 { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, #101411) 0%, #0b0f0c 58%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .025) 3px 4px); }
.card2.bonus { --c: #7656E8 !important; }

/* The firing: my window in the brand green, the next one warned in magenta. */
.game.v2.mywindow { box-shadow: inset 0 0 0 4px var(--green), inset 0 0 40px rgba(183, 255, 56, .45); }
.game.v2.mywindow .go { color: var(--green); text-shadow: none; }
.game.v2.soon { box-shadow: inset 0 0 0 4px var(--magenta), inset 0 0 30px rgba(240, 68, 140, .4); }
.firerow span.now { border-color: var(--green); box-shadow: 0 0 8px rgba(183, 255, 56, .6); }
.wbar i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.strip .closing { background: rgba(240, 68, 140, .1); border-color: var(--magenta); color: #ffd0e2; }
@keyframes pulse { 50% { box-shadow: 0 0 14px rgba(240, 68, 140, .55); } }
.strip span { background: rgba(118, 86, 232, .1); border-color: rgba(118, 86, 232, .5); }
.sheet { background: #161c17f2; border-color: var(--green); box-shadow: 0 0 20px rgba(183, 255, 56, .3); }
.victory h1.win { color: var(--green); text-shadow: 0 0 18px rgba(183, 255, 56, .45); text-transform: uppercase; }
.victory h1.over { color: var(--ink); text-shadow: none; text-transform: uppercase; }
.rank { border-color: color-mix(in srgb, var(--w, var(--c)) 60%, transparent); }
.rank b { color: var(--w, var(--c)); text-shadow: none; }
.tablemap .tabletop { fill: rgba(183, 255, 56, .04); stroke: rgba(183, 255, 56, .35); }
.tablemap .seat circle { stroke: var(--w, var(--magenta)); }
.tablemap .seat.me circle { fill: rgba(183, 255, 56, .2); }
.toast { background: #161c17; border-color: var(--green); box-shadow: 0 0 16px rgba(183, 255, 56, .3); }

/* « Ta carte » (each result) and « ton coup décisif » (the end): what one's decisions did, in the brand's green. */
.mycard { margin: 0; text-align: center; font-size: 14px; padding: 4px 8px; border-radius: 10px; background: rgba(183, 255, 56, .07); border: 1px solid rgba(183, 255, 56, .35); }
.mycard b { color: var(--green); }
.decisive { margin: 0; text-align: center; font-size: 13px; padding: 5px 10px; border-radius: 10px; background: rgba(183, 255, 56, .07); border: 1px solid rgba(183, 255, 56, .4); }