/* The battleground, seen (2026-10-03): the camera window with its bar across the top, the full view over the
   whole page, and the arena's own use of both (the arena stage's lane band). js/battle/view.js (the engine, vendored from ../piano-battle; this file is its src/battleground.css) draws into
   the canvases; this is their frame. Fonts: the host's. */
.bg-stage { position: relative; width: 100%; height: clamp(420px, 36vw, 560px); background: #1a1d17; border: 2px solid #0a0c12; border-radius: 10px; overflow: hidden;
  user-select: none; -webkit-user-select: none; }
.bg-stage > canvas { position: absolute; left: 0; top: 40px; width: 100%; height: calc(100% - 40px); display: block; image-rendering: pixelated; cursor: grab; }
.bg-stage > canvas.dragging { cursor: grabbing; }
/* the bar: Vienna at the left, the hour's clock in the middle, Paris at the right; each side's structures as a meter */
.bg-top { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 12px;
  background: #14161c; border-bottom: 2px solid #0a0c12; color: #fff; font: 700 15px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .6px; }
.bg-top .side { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; }
.bg-top .side.paris { flex-direction: row-reverse; }
.bg-top .side b { font-size: 21px; letter-spacing: 1.2px; text-transform: uppercase; }
.bg-top .side.vienna b { color: #ff9a8a; } .bg-top .side.paris b { color: #9ab8ff; }
.bg-top .side .meter { display: block; width: 150px; height: 12px; background: #0a0c12; border: 2px solid #0a0c12; }
.bg-top .side .meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff6a5a 0 10px, #0a0c12 10px 12px); transition: width .25s; }
.bg-top .side.paris .meter i { background: repeating-linear-gradient(90deg, #6fa0ff 0 10px, #0a0c12 10px 12px); }
.bg-top .side span { font: 500 13px/1 Barlow, sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .78); }
.bg-top .side u { text-decoration: none; font-variant-numeric: tabular-nums; }
.bg-top .mid { display: flex; align-items: baseline; gap: 8px; }
.bg-top .mid b { font-size: 25px; color: #ffe45c; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.bg-top .mid span, .bg-top .mid small { font: 500 12px/1 Barlow, sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.bg-top .mid em { font-style: normal; background: #2a2e38; color: #ffe9a6; font-size: 12px; padding: 3px 7px; border-radius: 4px; letter-spacing: .5px; }
.bg-top .mid em.break { background: #ff5a4a; color: #fff; }
/* the corner of the window: what the camera is on, and the way to the full view */
.bg-corner { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.bg-corner span { background: rgba(20, 22, 28, .78); color: #ffe9a6; font: 700 12px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .8px; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; }
.bg-corner button, .bg-full-btn { pointer-events: auto; font: 700 12px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .8px; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; border: 1px solid #ffe45c; background: rgba(20, 22, 28, .85); color: #ffe45c; cursor: pointer; }
.bg-corner button:hover, .bg-full-btn:hover { background: #ffe45c; color: #14161c; }
.bg-corner.right { left: auto; right: 10px; }
/* the full view: over the whole page, the field fit to it, the bar kept */
.bg-full { position: fixed; inset: 0; z-index: 200; background: #0c1020; display: flex; flex-direction: column; }
.bg-full[hidden] { display: none; }
.bg-full .bg-top { position: relative; flex: none; }
.bg-full canvas { flex: 1; min-height: 0; width: 100%; display: block; image-rendering: pixelated; cursor: grab; }
.bg-full canvas.dragging { cursor: grabbing; }
.bg-full .bg-corner { bottom: 14px; }
.bg-full .bg-help { position: absolute; right: 14px; bottom: 14px; z-index: 5; color: rgba(255, 255, 255, .7); font: 500 13px/1.4 Barlow, sans-serif; text-align: right; pointer-events: none; }
.bg-full .bg-help kbd { font: inherit; background: #2a2e38; padding: 1px 5px; border-radius: 3px; color: #fff; }
/* the entry points, chosen: seven keys, A to G */
.bg-entries { display: flex; gap: 4px; margin: 4px 0; }
.bg-entries button { flex: 1; font: 700 15px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1px; padding: 8px 0; border-radius: 6px; border: 1px solid #343945; background: #262a33; color: #ecebe4; cursor: pointer; }
.bg-entries button.on { background: #ffe45c; color: #14161c; border-color: #ffe45c; }
.bg-entries button.bot { box-shadow: inset 0 -3px 0 #8ff0a0; }
.bg-entries button.foe { box-shadow: inset 0 -3px 0 #ff6a5a; }
.bg-entries button.bot.foe { box-shadow: inset 0 -3px 0 #8ff0a0, inset 0 3px 0 #ff6a5a; }
/* the pilots' table, live */
.bg-pilots { width: 100%; border-collapse: collapse; font-size: 13px; }
.bg-pilots th { text-align: left; font-weight: 500; color: var(--soft, #c9c6bb); padding: 3px 6px; }
.bg-pilots td { padding: 3px 6px; font-variant-numeric: tabular-nums; }
.bg-pilots td.n { text-align: right; }
.bg-pilots tr.me td { color: #ffe45c; font-weight: 700; }
.bg-pilots tr.v td:first-child { border-left: 3px solid #d2362b; } .bg-pilots tr.p td:first-child { border-left: 3px solid #2f56c8; }