/* [slice] S7: the slice's HUD (client/slicehud.js): the grid bar, the compass, the battery and robot line, the class
   cards and the tactical map, in client/style.css's Bonk look. */
#s7 { position: absolute; inset: 0; pointer-events: none; }
#s7[hidden] { display: none; }
/* the round banner and the Vendetta strip move down past the compass and the grid bar in a slice room */
#hud:has(#s7:not([hidden])) #d-banner { top: 34%; }
#hud:has(#s7:not([hidden])) #d-vend { top: 162px; }

/* the compass: under the round bar */
.s7-compass { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); width: 520px; height: 34px; overflow: hidden;
  border-radius: 8px; background: linear-gradient(90deg, transparent, rgba(8, 10, 22, 0.55) 18%, rgba(8, 10, 22, 0.55) 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.s7-c-ticks span, .s7-c-marks .s7-m { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.s7-c-ticks span { top: 2px; font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: 0.05em; }
.s7-c-ticks span.maj { color: #f4f1ea; font-size: 13px; }
.s7-c-ticks span.min { top: 4px; width: 1px; height: 7px; background: rgba(255, 255, 255, 0.35); }
.s7-c-centre { position: absolute; left: 50%; top: 0; width: 2px; height: 9px; margin-left: -1px; background: var(--amber); }
.s7-m { top: 15px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.s7-m b { font-size: 12px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: rgba(244, 241, 234, 0.9); color: #0b0e1a; }
.s7-m small { font-family: var(--font-mono); font-size: 8.5px; color: var(--dim); margin-top: 1px; }
.s7-m[data-look="owned0"] b { background: #ff8a2a; }
.s7-m[data-look="owned1"] b { background: #1fc7b8; }
.s7-m[data-look="contested"] b { background: #ffd23a; animation: s7blink 0.5s steps(2) infinite; }
.s7-m[data-look="dark"] b { background: #3b4150; color: #9aa4c2; }
.s7-m.heat b { background: none; color: var(--red); font-size: 14px; text-shadow: 0 0 6px rgba(255, 77, 109, 0.8); }
.s7-m.bot b { background: none; color: #fff; font-size: 12px; text-shadow: 0 1px 3px #000; }

/* the grid bar: under the compass in SUBSTATION */
.s7-grid { position: absolute; left: 50%; top: 122px; transform: translateX(-50%); width: 480px; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 10px; background: rgba(8, 10, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.16); } /* [round 3] stronger */
.s7-grid[hidden] { display: none; }
.s7-g-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); overflow: hidden; display: flex; }
.s7-g-bar.a { justify-content: flex-end; }
.s7-g-bar.a i { background: #ff8a2a; }
.s7-g-bar.b i { background: #1fc7b8; }
.s7-g-bar i { display: block; height: 100%; transition: width 400ms var(--ease); }
.s7-g-mid { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.s7-g-mid b { min-width: 26px; text-align: center; font-size: 18px; font-weight: 800; }
.s7-g-pa { color: #ff8a2a; } .s7-g-pb { color: #1fc7b8; }
.s7-pips { display: flex; gap: 4px; }
.s7-pip { position: relative; width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(244, 241, 234, 0.95); color: #0b0e1a; font-weight: 900; font-size: 16px; border: 2px solid rgba(0, 0, 0, 0.5); }
.s7-pip em { font-style: normal; position: relative; z-index: 1; }
.s7-pip i { position: absolute; left: 0; bottom: 0; height: 5px; }
.s7-pip[data-look="owned0"] { background: #ff8a2a; }
.s7-pip[data-look="owned1"] { background: #1fc7b8; }
.s7-pip[data-look="contested"] { background: #ffd23a; animation: s7blink 0.5s steps(2) infinite; }
.s7-pip[data-look="dark"] { background: #262b38; color: #5b6480; }
.s7-pip.surge { box-shadow: 0 0 10px 2px rgba(255, 220, 120, 0.9); }
@keyframes s7blink { 50% { filter: brightness(1.6); } }

/* the battery and the robot's line: beside the vitals (bottom left). [round 2] bigger, brighter text; it flashes
   when the battery runs low */
.s7-robot { position: absolute; left: 282px; bottom: 18px; width: 300px; padding: 8px 12px; border-radius: 10px; background: rgba(7, 10, 22, 0.82); border: 1px solid var(--border-soft); border-left: 4px solid var(--cyan); }
.s7-robot[hidden] { display: none; }
.s7-r-row { display: flex; align-items: center; gap: 10px; }
.s7-r-label { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: #c9d2ec; }
.s7-r-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.s7-r-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22e4ff, #3cf5a7); transition: width 300ms var(--ease); }
.s7-r-pct { font-size: 17px; font-weight: 800; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.s7-r-line { margin-top: 5px; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.s7-robot[data-state="low"] .s7-r-line, .s7-robot[data-state="down"] .s7-r-line { color: #ff6b85; }
.s7-robot[data-state="low"] .s7-r-bar i { background: var(--red); }
.s7-robot[data-state="fire"] .s7-r-line { color: #ffc23a; }
.s7-robot[data-state="out"] .s7-r-line { color: #7dff9a; }
.s7-robot[data-low] { animation: s7low 0.84s linear infinite; border-color: #ff4d6d; border-left-color: #ff4d6d; background: rgba(46, 8, 18, 0.92); } /* [round 8] 1.2 Hz (0.42 s each way), the panel's brightness swinging well over 40 % */
.s7-robot[data-low] .s7-r-bar i { background: #ff3b5c; }
/* [round 6] low: the line says BATTERY LOW in amber, the percentage turns red, and the strip pulses hard (red fill and
   glow, then dark) */
.s7-robot[data-low] .s7-r-line, .s7-robot[data-state="lowout"] .s7-r-line { color: #ffd23f; font-size: 18px; white-space: nowrap; text-shadow: 0 1px 3px #000; } /* [round 9] bigger, brighter, one line */
.s7-r-line .s { display: none; }
/* [round 7, polish round 2] a smooth pulse between two dark reds (never a snap to grey), white and amber text on it */
.s7-robot[data-low] .s7-r-pct { color: #fff; animation: s7pct 0.84s linear infinite; border-radius: 5px; padding: 0 4px; }
@keyframes s7pct { 0%, 49.9% { background: #ff3b5c; color: #fff; } 50%, 100% { background: transparent; color: #fff; } }
.s7-robot[data-low] .s7-r-label { color: #fff; }
/* [round 9, polish round 4] one beat, 1.2 Hz: the glow and the red % chip on together (0-45 %), off together (55-95 %) */
@keyframes s7low { 0%, 45% { background: rgba(150, 18, 42, 0.95); box-shadow: 0 0 24px 6px rgba(255, 59, 92, 0.85); } 55%, 95% { background: rgba(40, 6, 14, 0.92); box-shadow: 0 0 4px 0 rgba(255, 59, 92, 0.3); } 100% { background: rgba(150, 18, 42, 0.95); box-shadow: 0 0 24px 6px rgba(255, 59, 92, 0.85); } }

/* the class cards: a panel on the left, clear of the crosshair and the lower aim area, in WAIT, PREP, death and
   OVER. [round 2] bigger text, one card a row, and stat lines on the robot cards */
/* [round 6] narrower and see-through (the judges: the panel was big and solid) */
.s7-cards { position: absolute; left: 18px; top: 112px; width: 272px; padding: 10px 12px; border-radius: 14px;
  background: rgba(8, 10, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px); }
.s7-cards[hidden] { display: none; }
.s7-k-h { font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: #e3e8f6; margin-bottom: 8px; }
.s7-k-row { display: flex; flex-direction: column; gap: 5px; }
.s7-k-row + .s7-k-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.s7-card { position: relative; padding: 6px 10px; border-radius: 9px; display: flex; flex-direction: column; gap: 1px;
  background: rgba(22, 27, 46, 0.78); border: 1px solid var(--border-soft); transition: border-color 160ms; }
.s7-card b { font-size: 16px; letter-spacing: 0.1em; color: #fff; }
.s7-card span { font-family: var(--font-mono); font-size: 12.5px; color: #d6dcef; }
.s7-card span.s7-blurb { font-family: var(--font-body); font-size: 13px; color: #fff; }
.s7-card em { position: absolute; right: 12px; top: 10px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--cyan); }
/* [round 4] the picks: a class picked is solid amber, a robot picked solid cyan, both with dark text and a tick, so the
   two rows' picks never look alike and an unpicked card never looks picked */
.s7-card.picked { border-color: #ffc23a; background: #ffc23a; box-shadow: 0 0 14px rgba(255, 194, 58, 0.45); }
.s7-card.picked b, .s7-card.picked span { color: #0b0e1a; }
.s7-robotcard.picked { border-color: #22e4ff; background: #22e4ff; box-shadow: 0 0 14px rgba(34, 228, 255, 0.45); }
.s7-card.capped { opacity: 0.38; }
.s7-card i { position: absolute; right: 12px; bottom: 9px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--red); }
.s7-k-note { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: #c9d2ec; min-height: 15px; }
.s7-cards .s { display: none; }

/* the tactical map: [round 2] small and translucent, so the crosshair and the middle of the view stay clear; [round 3]
   top right, under the kill feed's first lines and clear of the weapon panel and the barrel, darker for contrast */
.s7-map { position: absolute; right: 18px; top: 170px; padding: 6px; border-radius: 12px; background: rgba(6, 8, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
.s7-map[hidden] { display: none; }
.s7-map canvas { display: block; width: min(300px, 36vh); height: min(300px, 36vh); border-radius: 8px; } /* [round 6] a little bigger at 720p */
.s7-m-h { text-align: center; margin-top: 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: #fff; }
/* [round 6] the key to the map's icons */
.s7-m-key { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: #dfe5f5; }
.s7-m-key span { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 9.5px; font-weight: 900; color: #0b0e1a; background: #dfe5f5; border: 1.5px solid #0b0e1a; margin-left: 4px; }
.s7-m-key span.s { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 3px; box-sizing: border-box; border: 0; }
.s7-m-key span.p { width: 0; height: 0; background: none; border: 6px solid transparent; border-bottom: 13px solid #dfe5f5; border-top: 0; margin-top: -2px; }

/* [round 2] HP bars over the team's robots (screen overlay, client/slicehud.js robotBars) */
.s7-bars { position: absolute; inset: 0; overflow: hidden; }
.s7-bar { position: absolute; left: 0; top: 0; width: 36px; height: 5px; transition: opacity 120ms; border-radius: 3px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(0, 0, 0, 0.7); will-change: transform; }
.s7-bar[hidden] { display: none; }
.s7-bar i { display: block; height: 100%; border-radius: 2px; background: #3cf5a7; }
.s7-bar[data-band="1"] i { background: #ffc23a; }
.s7-bar[data-band="2"] i { background: #ff4d6d; }
.s7-bar.mine { border-color: #fff; width: 36px; height: 5px; } /* [round 4] no bigger than a teammate's; [round 5] smaller */
/* [round 3] our own robot's marker: its name and a pointer over the bar */
.s7-bar b { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; white-space: nowrap; font-size: 0; }
.s7-bar.mine b { font-size: 9px; font-weight: 900; letter-spacing: 0.08em; color: #fff; padding: 1px 7px; border-radius: 5px; background: rgba(7, 10, 22, 0.78); border: 1px solid #fff; }
.s7-bar.mine b::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; }

/* [round 3] the controls' hint in a slice room: larger, airier, two short rows of chips */
body.s7-room .d-keys { font-size: 12.5px; line-height: 2.2; max-width: 560px; padding: 8px 14px; color: #dfe5f5; background: rgba(7, 10, 22, 0.72); }
/* [round 2] the controls' hint hides in LIVE in a slice room (held Tab shows it with the scoreboard) */
body.s7-keys-off .d-keys { display: none; }

/* [round 6] a phone-sized view (portrait, 390 px wide): every slice panel fits the width, stays out of the middle of
   the view (the crosshair) and off the vitals and weapon panels at the bottom */
@media (max-width: 760px) {
  body.s7-room .hud-tl { display: none; }
  body.s7-room #d-round { top: 4px; border-radius: 10px; }
  body.s7-room .d-rnd { display: none; }
  body.s7-room .d-team { min-width: 62px; padding: 0 10px; gap: 6px; }
  body.s7-room .d-team b { font-size: 20px; }
  body.s7-room .d-tlabel { font-size: 9px; letter-spacing: 0.12em; }
  body.s7-room .d-mid { min-width: 0; padding: 4px 8px 5px; }
  body.s7-room .d-timer { font-size: 18px; }
  body.s7-room .d-phase { font-size: 9px; letter-spacing: 0.2em; }
  body.s7-room .d-rnd { font-size: 7px; letter-spacing: 0.05em; white-space: nowrap; }
  body.s7-room .hud-tr { top: 112px; right: 8px; width: 70vw; }
  body.s7-room .feed-item { font-size: 11px; padding: 4px 8px; }
  .s7-compass { top: 54px; width: min(520px, 94vw); height: 24px; } /* [round 9] slimmer bars at the top */
  .s7-grid { top: 80px; width: min(480px, 94vw); gap: 6px; padding: 2px 8px; }
  .s7-g-mid b { font-size: 15px; min-width: 20px; }
  .s7-pip { width: 22px; height: 22px; font-size: 12px; }
  /* [round 8, polish round 3] the bottom HUD in one row (vitals, battery, weapon), about a tenth of the screen */
  .s7-robot { left: 132px; right: auto; width: 118px; bottom: 6px; padding: 5px 7px; border-left-width: 3px; box-sizing: border-box; }
  .s7-r-label { display: none; }
  .s7-r-row { gap: 5px; }
  .s7-r-bar { height: 7px; }
  .s7-r-line { font-size: 11px; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; }
  .s7-r-line .l { display: none; } .s7-r-line .s { display: inline; } /* [round 9] the short line on a phone: no wrap */
  .s7-robot[data-low] .s7-r-line { font-size: 12px; }
  .s7-r-pct { font-size: 13px; min-width: 34px; }
  .s7-cards { left: 8px; right: 8px; top: 146px; width: auto; padding: 8px; }
  .s7-k-h { font-size: 11.5px; margin-bottom: 6px; }
  .s7-k-row { flex-direction: row; gap: 5px; }
  .s7-k-row + .s7-k-row { margin-top: 6px; padding-top: 6px; }
  .s7-card { flex: 1 1 0; min-width: 0; padding: 5px 7px; }
  .s7-card b { font-size: 13px; letter-spacing: 0.06em; }
  .s7-card span { font-size: 10.5px; line-height: 1.25; }
  .s7-card i { position: static; font-size: 9.5px; }
  .s7-k-note { font-size: 11px; margin-top: 6px; }
  .s7-cards .l { display: none; } .s7-cards .s { display: inline; }
  .s7-map { right: 8px; top: 146px; padding: 4px; }
  .s7-map canvas { width: min(250px, 64vw); height: min(250px, 64vw); }
  body.s7-room .d-vitals { width: 120px; left: 6px; bottom: 6px; padding: 5px 7px; border-radius: 10px; box-sizing: border-box; }
  body.s7-room .d-hp b { font-size: 22px; }
  body.s7-room .d-hp span, body.s7-room .d-stance { display: none; }
  body.s7-room .d-weapon { width: 128px; right: 6px; bottom: 6px; padding: 5px 7px; border-radius: 10px; box-sizing: border-box; }
  body.s7-room .d-weapon .wcal, body.s7-room .d-weapon .wslots, body.s7-room .d-weapon .d-optic, body.s7-room #d-reserve { display: none; } /* [round 6] the calibre line truncated on a phone; [round 8] one row: name, rounds, bolt */
  body.s7-room .wname { font-size: 11px; }
  body.s7-room #pips { gap: 2px; margin: 4px 0; }
  body.s7-room #pips i { height: 10px; }
  body.s7-room .d-ammo { margin-bottom: 4px; }
  body.s7-room .boltbar { height: 13px; }
  body.s7-room .boltbar span { font-size: 8px; letter-spacing: 0.1em; }
  .s7-r-line { margin-top: 3px; }
}

/* [round 8] a phone: the hold-breath bar above the one-row HUD, not on it */
@media (max-width: 760px) { body.s7-room #breath { bottom: 84px; width: min(260px, 70vw); } }

/* [night] the night gear's slots (T flashlight, N goggles, Y night scope) and its prompts (client/night.js) */
#night-hud { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#night-hud .ng-slots { display: none; gap: 6px; }
#night-hud.has-kit .ng-slots { display: flex; }
#night-hud .ng-slot { min-width: 92px; padding: 5px 9px; border-radius: 6px; background: rgba(10, 14, 22, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(244, 241, 234, 0.6); font: 700 12px/1.2 system-ui, sans-serif; letter-spacing: 0.06em; display: flex; gap: 7px; align-items: center; }
#night-hud .ng-slot b { display: inline-block; min-width: 18px; padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); color: #f4f1ea; text-align: center; }
#night-hud .ng-slot.on { color: #9dffb0; border-color: rgba(120, 255, 150, 0.7); background: rgba(20, 60, 32, 0.66); }
#night-hud .ng-prompt { color: #f4f1ea; font: 700 15px/1.2 system-ui, sans-serif; letter-spacing: 0.06em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
#night-hud .ng-prompt:empty { display: none; }
#night-hud .ng-slot i { display: none; font-style: normal; } /* [round 4] the short name, on a phone only */

/* [night] round 4: a phone (390 wide), compact: the brand box goes, the round bar shrinks; at the bottom the vitals (left)
   and the weapon panel (right) side by side and short, the battery strip over the vitals, the gear as one row of small
   key chips over the weapon panel, the breath bar and a prompt above them; nothing overlaps */
@media (max-width: 600px) {
  body.duel:not(.s7-room) .hud-tl { display: none; }
  body.duel:not(.s7-room) #d-round { transform: translateX(-50%) scale(0.8); transform-origin: 50% 0; top: 6px; }
  body.duel:not(.s7-room) .d-vitals { left: 6px; bottom: 6px; width: calc(42% - 9px); box-sizing: border-box; padding: 5px 8px; }
  body.duel:not(.s7-room) .d-hp b { font-size: 22px; }
  body.duel:not(.s7-room) .d-stance { display: none; }
  body.duel:not(.s7-room) .d-weapon { right: 6px; bottom: 6px; width: calc(58% - 9px); box-sizing: border-box; padding: 5px 8px; }
  body.duel:not(.s7-room) .d-weapon .wname { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.duel:not(.s7-room) .d-weapon .wcal, body.duel:not(.s7-room) .d-weapon .wslots { display: none; }
  body.duel:not(.s7-room) .d-optic { letter-spacing: 0.04em; font-size: 9px; margin: 3px 0 4px; }
  body.duel:not(.s7-room) .d-optic b { font-size: 11px; }
  body.duel:not(.s7-room) .boltbar { height: 16px; }
  body.duel:not(.s7-room) .boltbar span { font-size: 9px; letter-spacing: 0.08em; }
  body.duel:not(.s7-room) #breath { bottom: 132px; width: 170px; }
  body.duel:not(.s7-room) #breath-label { font-size: 10px; letter-spacing: 0.12em; }
  #night-hud { left: auto; right: 6px; bottom: 104px; transform: none; width: calc(58% - 9px); align-items: stretch; }
  #night-hud .ng-slots { flex-direction: row; gap: 4px; }
  #night-hud .ng-slot { flex: 1; min-width: 0; padding: 3px 4px; gap: 3px; font-size: 9px; letter-spacing: 0.04em; justify-content: center; }
  #night-hud .ng-slot b { min-width: 14px; padding: 0 3px; }
  #night-hud .ng-slot span { display: none; }
  #night-hud .ng-slot i { display: inline; font-style: normal; }
  #night-hud .ng-prompt { position: fixed; left: 50%; bottom: 168px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); font-size: 13px; text-align: center; }
}