/* THE MATCH'S PANEL beside the board (SPEC.md § 7) - one sheet for the lab page (game/index.html) and the arena's
   site (site/), as game/panel.mjs is their one code for it. From the top: a line that names the game, with the tick
   shown in its middle; two cards mirrored, red at the left and blue at the right, each a side's whole account (name,
   cells, virus, cells making energy, the game so far, every emoji its DNA showed); the player with the speed and
   the board's layers. Built low: what is beside the board must leave room under it. The page's own sheet names the
   colors (--panel, --line, --text, --dim, --red, --blue). */
#side { display: flex; flex-direction: column; gap: 10px; min-width: 0; --mono: ui-monospace, "SF Mono", Menlo, monospace; }
#side section { border-radius: 12px; }
#side .label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 400; }

/* the line that names the game */
.spine { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 8px 12px; }
.spine .which, .spine .aside { display: flex; align-items: center; gap: 6px; min-width: 0; } .spine .aside { justify-content: flex-end; }
.spine button { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; white-space: nowrap; }
.spine .which button { width: 44px; padding: 0; flex: none; }
.spine .title { font-size: 16px; font-weight: 800; white-space: nowrap; }
.spine .now { text-align: center; }
#tick { display: block; font: 700 22px/1 var(--mono); font-variant-numeric: tabular-nums; } #tick small { font-weight: 400; font-size: 13px; color: var(--dim); }
.spine .now .label { display: block; margin-top: 4px; line-height: 1; }
.spine #map { width: 54px; height: 40px; padding: 0; text-align: center; font: 800 20px/1 var(--mono); appearance: textfield; -moz-appearance: textfield; }
.spine #map::-webkit-inner-spin-button, .spine #map::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* the two sides, mirrored */
.teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.team { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px; min-width: 0; color: var(--text); }
.team.red { box-shadow: inset 0 4px 0 var(--red); } .team.blue { box-shadow: inset 0 4px 0 var(--blue); }
.team .who { width: 100%; min-height: 44px; padding: 0 10px; font-size: 16px; font-weight: 800; background: #0d1220; border: 1px solid var(--line); border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team.red .who { color: var(--red); border-color: #5a2a30; } .team.blue .who { color: var(--blue); border-color: #263f6e; }
.team select.who { cursor: pointer; } .team.blue select.who { text-align-last: right; } .team select.who option { color: var(--text); font-weight: 400; }
.team a.who { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; } .team.blue a.who { align-items: flex-end; }
.team a.who small { font-size: 10.5px; font-weight: 400; color: var(--dim); }
.figures { display: flex; align-items: flex-end; gap: 8px; min-height: 48px; }
.figures .cells { font: 800 52px/.9 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.figures em { font-style: normal; font-size: 11.5px; color: var(--dim); white-space: nowrap; } .figures > em { padding-bottom: 3px; }
.figures .minor { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.figures .pair { display: flex; align-items: baseline; gap: 5px; }
.figures .pair b { font: 700 20px/1.1 var(--mono); font-variant-numeric: tabular-nums; } .figures .pair.lesser b { font-size: 14px; line-height: 1.3; }
.team.red .cells, .team.red .pair b { color: var(--red); } .team.blue .cells, .team.blue .pair b { color: var(--blue); }
.team.blue .figures, .team.blue .pair { flex-direction: row-reverse; } .team.blue .minor { margin-left: 0; margin-right: auto; align-items: flex-start; }
/* the game so far: a measure a chart, its name over the corner where a game's lines begin low */
.spark { position: relative; } .spark canvas { display: block; width: 100%; height: 40px; }
.spark span { position: absolute; left: 0; top: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); pointer-events: none; } .spark i { font-style: normal; }
/* every emoji the side's DNA showed: bright while a cell shows it on this tick; the one pointed at opens its meaning */
.emojis { position: relative; }
.emojis .chips { display: grid; grid-template-columns: repeat(6, 36px); gap: 5px; justify-content: space-between; min-height: 36px; }
.emojis .chip { height: 36px; display: grid; place-items: center; font: 20px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; opacity: .5; cursor: default; }
.emojis .chip.now { opacity: 1; background: #1e2740; border-color: #3d4966; } .emojis .chip.hot, .emojis .chip:focus-visible { opacity: 1; border-color: var(--text); outline: none; }
.emojis .none { grid-column: 1 / -1; align-self: center; color: var(--dim); font-size: 12px; }
.emojis .tip { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; display: flex; gap: 10px; align-items: center; padding: 9px 12px; background: #0d1220; border: 1px solid #3d4966; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: 12.5px; line-height: 1.35; pointer-events: none; }
.emojis .tip[hidden] { display: none; } .emojis .tip .big { font-size: 26px; line-height: 1; } .emojis .tip small { display: block; margin-top: 2px; font-size: 11px; color: var(--dim); }

/* how the game ended, once its last tick is shown */
#verdict { margin: 0 2px; font-size: 15px; font-weight: 700; } #verdict:empty { display: none; }

/* the player */
.player { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.transport { display: flex; align-items: center; gap: 6px; }
.transport button { width: 44px; height: 40px; padding: 0; flex: none; display: grid; place-items: center; }
.transport #play { width: 60px; background: var(--text); color: #0b0e14; border-color: var(--text); }
.transport input[type=range] { flex: 1 1 0; min-width: 0; margin: 0 0 0 10px; padding: 0; accent-color: var(--text); }
.options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.options .group { display: flex; gap: 4px; } .options button { min-width: 32px; height: 30px; padding: 0 7px; border-radius: 7px; }
.options .push { margin-left: auto; }
/* what a layer that is on has nothing to draw of, said in words */
#layerNote { margin: 0; color: var(--gold); font-size: 12px; } #layerNote[hidden] { display: none; }

/* the cell's window (panel.mjs cellWindowHtml): what it is busy with, the drawing of the cell and its six sides, then
   a side at a time what came in and what went out; everything it keeps only when asked for (the key D) */
#pointed .drawing { display: block; width: 100%; max-width: 270px; margin: 6px auto 4px; }
#pointed .drawing text { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
#pointed .side { display: flex; gap: 2px; margin-top: 5px; } #pointed .side > div { flex: 1 1 0; min-width: 0; }
#pointed .arrow { flex: 0 0 1.5em; color: var(--text); font-weight: 700; font-size: 14px; line-height: 1.2; }
#pointed .in, #pointed .out { display: flex; gap: 4px; align-items: baseline; }
#pointed .in i, #pointed .out i { flex: 0 0 2.6em; font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
#pointed .in i { color: var(--gold); } #pointed .out i { color: var(--text); } #pointed .in span, #pointed .out span { min-width: 0; }
#pointed .part { margin-top: 6px; }
#pointed .label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#pointed .gold { color: var(--gold); } #pointed .raw { word-break: break-word; }
#pointed table { margin: 6px 0 0; }