/* Piano Arena: THE STAGE (2026-10-02, fourth cut). A bar across the top; a strip of sky with the plane and the
   cages; the sheet, with an enemy soldier beside every note and Piano Attack's zones on the paper (.pa-zone,
   .pa-veil, attack-stage.css); the plane's own bar (.pa-hud); and the lane under that: two headquarters, their
   towers and the armies between. js/arena-stage.js draws it; the keys under the stage are Piano Attack's own
   (.pa-keys). Fonts: the host's. */
.ar-stage { position: relative; width: 100%; height: clamp(600px, 54vw, 760px); background: #0c1020; border: 2px solid #0a0c12; border-radius: 10px; overflow: hidden;
  user-select: none; -webkit-user-select: none; --paper: #f4ead2; }
/* the bar: this city at the left (its rank, the soldiers it has won, the sheet's speed), the clock in the middle,
   the other city at the right */
.ar-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; }
.ar-top .side { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; }
.ar-top .side.foe { flex-direction: row-reverse; }
.ar-top .side b { font-size: 21px; letter-spacing: 1.2px; text-transform: uppercase; }
.ar-top .side span { font: 500 13.5px/1 Barlow, sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .78); }
.ar-top .side u { text-decoration: none; font: 700 19px/1 "Barlow Condensed", Barlow, sans-serif; color: #8ff0a0; font-variant-numeric: tabular-nums; }
.ar-top .side.foe u { color: #ff9a8a; }
.ar-top .side em { font-style: normal; font-weight: 700; color: #ff9a8a; }
.ar-top .spd { background: #2a2e38; padding: 4px 7px; border-radius: 4px; font: 700 14px/1 "Barlow Condensed", Barlow, sans-serif !important; font-variant-numeric: tabular-nums; color: #c9c6bb !important; }
.ar-top .spd.on { background: #8ff0a0; color: #0e2415 !important; }
/* each side's own rank, and how far it is into the next: a measure's worth of soldiers won fills a tenth */
.ar-top .rk { display: inline-flex; flex-direction: column; gap: 3px; background: #2a2e38; padding: 4px 7px 3px; border-radius: 4px; font: 700 14px/1 "Barlow Condensed", Barlow, sans-serif !important;
  letter-spacing: .8px !important; color: #ffe45c !important; }
.ar-top .rk s { display: block; height: 3px; background: rgba(255, 255, 255, .16); }
.ar-top .rk s i { display: block; height: 100%; background: #ffe45c; }
.ar-top .side.foe .rk { color: #ffc7bd !important; } .ar-top .side.foe .rk s i { background: #ff9a8a; }
.ar-top .rk.up { animation: ar-pop .9s ease-out; }
@keyframes ar-pop { 0% { transform: scale(1.4); background: #ffe45c; color: #14161c; } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.ar-top .flag { display: flex; flex-direction: column; width: 26px; height: 17px; border: 2px solid #0a0c12; flex: none; }
.ar-top .flag s { flex: 1; display: block; }
.ar-top .flag.pales { flex-direction: row; }
.ar-top .flag.cross { background: linear-gradient(#d2362b, #d2362b) center / 100% 28% no-repeat, linear-gradient(#d2362b, #d2362b) center / 22% 100% no-repeat, #f6f1e4; }
.ar-top .mid { display: flex; align-items: baseline; gap: 8px; }
.ar-top .mid b { font-size: 25px; color: #ffe45c; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.ar-top .mid span, .ar-top .mid small { font: 500 12px/1 Barlow, sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
@keyframes ar-blink { 50% { opacity: .45; } }

/* the sheet: the paper (js sets its top, under the sky), the strip of pages on it, Piano Attack's zones over the
   ink, the pinned clefs over them; and the sky-and-paper canvas over all of it, where the plane, the cages, the
   soldiers and what flies are drawn */
.ar-paper { position: absolute; left: 0; right: 0; top: 162px; height: 240px; overflow: hidden; background: var(--paper); z-index: 2;
  box-shadow: inset 0 0 0 3px #1b1710, inset 0 0 0 5px #c9b98f; }
.ar-paper .pa-zone::before { top: auto; bottom: 5px; }
.ar-sky { position: absolute; left: 0; top: 40px; z-index: 5; pointer-events: none; image-rendering: pixelated; }
/* the plane's own bar, Piano Attack's (.pa-hud) laid between the paper and the lane */
.ar-hud.pa-hud { bottom: auto; top: 402px; height: 46px; align-items: center; padding: 4px 12px; background: #14161c; border-top: 2px solid #0a0c12; border-bottom: 2px solid #0a0c12; z-index: 3; }
.ar-hud .left { flex-direction: row; align-items: center; gap: 18px; }
.ar-hud .fuel { margin-top: 0; }
.ar-hud .mid { font-size: 13px; }
.ar-hud .ammo canvas { max-height: 26px; }
.ar-strip { position: absolute; left: 0; top: 0; will-change: transform; color: #17130c; z-index: 1; }
.ar-page { position: absolute; top: 0; }
.ar-page svg { display: block; overflow: visible; }
.ar-noengrave { padding: 40px; color: #5a4a2a; font-weight: 700; }
.ar-now { position: absolute; top: 3px; bottom: 3px; width: 2px; background: #2f7fc4; z-index: 5; pointer-events: none; }
.ar-gutter { position: absolute; left: 3px; top: 0; bottom: 3px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 4;
  background: linear-gradient(90deg, var(--paper) calc(100% - 26px), rgba(244, 234, 210, 0)); color: #17130c; }
.ar-gutter.on { opacity: 1; }
.ar-gutter svg { display: block; }
/* the field: the battleground's camera window (battleground.css draws its corner and its full view) */
.ar-stage > canvas#lane { position: absolute; left: 0; top: 448px; display: block; image-rendering: pixelated; z-index: 1; cursor: grab; }
.ar-stage > canvas#lane.dragging { cursor: grabbing; }
.ar-stage .ar-corner { z-index: 4; }
.ar-stage .bg-top .side .meter { width: 120px; }
.ar-card .bg-entries { margin: 8px 0; pointer-events: auto; }
.ar-card .bg-entries button { min-width: 36px; }
.ar-card .row { margin: 6px 0; }

.ar-card { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); z-index: 7; text-align: center; pointer-events: none; max-width: 86%;
  background: rgba(20, 22, 28, .9); border: 2px solid #ffe45c; padding: 13px 24px; font: 700 20px/1.25 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.ar-card[hidden] { display: none; }
.ar-card b { display: block; color: #ffe45c; font-size: 30px; }
.ar-card b small { font-size: 18px; color: #c9c6bb; margin: 0 6px; }
.ar-card span { display: block; font: 500 14.5px/1.35 Barlow, sans-serif; letter-spacing: 0; text-transform: none; color: #c9c6bb; }
.ar-card em { display: block; margin-top: 7px; font-style: normal; font-size: 15px; animation: ar-blink 1s steps(2) infinite; }
.ar-debrief { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); z-index: 8; width: min(470px, 90%); max-height: calc(100% - 60px); overflow-y: auto;
  background: rgba(18, 20, 26, .96); border: 2px solid #ffe45c; padding: 14px 18px 14px; text-align: center; color: #ecebe4; }
.ar-debrief[hidden] { display: none; }
.ar-debrief h3 { font: 700 30px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 2px; color: #ffe45c; margin: 0; }
.ar-debrief h3.won { color: #8ff0a0; } .ar-debrief h3.lost { color: #ff9a8a; }
.ar-debrief .how { margin: 4px 0 8px; font-size: 14px; color: #c9c6bb; }
.ar-debrief table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ar-debrief th { text-align: left; font-weight: 500; color: #c9c6bb; padding: 3px 0; }
.ar-debrief td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 0 3px 12px; }
.ar-debrief tr:first-child td { font: 700 13px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #a7aab4; }
.ar-debrief .hint { margin: 8px 0 0; font-size: 12px; color: #a7aab4; }
.ar-debrief .row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.ar-debrief button { font: 700 14px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .5px; text-transform: uppercase; padding: 9px 13px; border-radius: 8px; border: 1px solid #343945; background: #262a33; color: #ecebe4; cursor: pointer; }
.ar-debrief button.go { background: #ffe45c; color: #14161c; border-color: #ffe45c; }