/* 機甲大戰: a cockpit's look. Dark gunmetal glass with cyan rules, amber for
   what's selected and what's dangerous, angled corners. Latin and numbers in
   Chakra Petch, CJK in Noto Sans (TC, JP or KR by the page's language). */
:root {
  --ink: #e6f1ff;
  --dim: #8fa4c0;
  --panel: rgba(9, 16, 30, 0.82);
  --panel-solid: #0b1322;
  --glass: rgba(18, 32, 56, 0.72);
  --line: #2fd2ff;
  --line-dim: rgba(47, 210, 255, 0.35);
  --amber: #ffb12e;
  --red: #ff4b3e;
  --cut: 14px;
  --cjk: 'Noto Sans TC';
  --font: 'Chakra Petch', var(--cjk), 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* the widths a panel may have (docs/UI-GUIDE.md): a panel takes the one for what it is and never
     grows with the window; only the view, maps and artwork fill it */
  --w-s: 320px;     /* a readout: a HUD card, the radio, a toast */
  --w-m: 440px;     /* a dialog, a column of buttons, a page's side column */
  --w-l: 680px;     /* a form or a sheet: options, a battle's setup, results */
  --w-xl: 1040px;   /* a list or a rail: upgrades, facilities, the mission's status */
  --w-page: 1560px; /* everything on a full-screen page */
}
:root:lang(ja) { --cjk: 'Noto Sans JP'; }
:root:lang(ko) { --cjk: 'Noto Sans KR'; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b1322; color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
[hidden] { display: none !important; }
/* absolute, not fixed: no stacking context, so the settings icons (mounted in #app) stay over the menu */
#app { position: absolute; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* the angled plate every panel is cut from */
.plate, .menu-sheet, .overlay-box, .mech-card {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ------------------------------------------------------------ menu */
.screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen > * { pointer-events: auto; }
#menu .model-control { position: absolute; inset: 0 0 0 min(470px, 44vw); z-index: 0; }
.logo { position: absolute; z-index: 1; left: calc(26px + var(--safe-l)); top: calc(56px + var(--safe-t)); pointer-events: none; }
.logo h1 {
  margin: 0; font-size: clamp(38px, 5.4vw, 64px); font-weight: 900; letter-spacing: 0.04em; line-height: 1;
  font-style: italic; color: #fff; text-shadow: 0 0 24px rgba(47, 210, 255, 0.55), 0 3px 0 #0a1830;
}
.logo-en { margin: 4px 0 0; font: 700 clamp(14px, 1.6vw, 20px)/1 'Chakra Petch', sans-serif; letter-spacing: 0.5em; color: var(--line); }
/* the Latin name under the title, unless the title is Latin already */
:root:lang(en) .logo-en { display: none; }
.dev-badge { display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: #1a0f00; background: var(--amber); }
.model-hint { left: auto; right: calc(24px + var(--safe-r)); color: var(--ink); text-shadow: 0 1px 3px #000; font-weight: 600; opacity: 0.8; }

.menu-sheet {
  position: absolute; z-index: 1; left: calc(20px + var(--safe-l)); top: calc(216px + var(--safe-t)); bottom: calc(18px + var(--safe-b));
  width: min(430px, 42vw); padding: 18px 20px 20px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-left: 3px solid var(--line);
}
.menu-sheet h2 { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.2em; color: var(--line); font-weight: 700; }
.mechs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mech-card {
  --cut: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 12px 12px 12px 14px; border: 0; background: var(--glass); position: relative;
  box-shadow: inset 3px 0 0 var(--paint);
}
.mech-card[aria-pressed="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--paint) 55%, #0b1322), #0f1d33); box-shadow: inset 3px 0 0 var(--glow), inset 0 0 0 1px var(--glow); }
.mech-card:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.mech-name { font-size: 24px; font-weight: 900; line-height: 1.1; }
.mech-code { font: 700 11px/1 'Chakra Petch', sans-serif; letter-spacing: 0.18em; color: var(--glow); }
.mech-role { font-size: 13px; color: var(--dim); }
.stats { display: grid; gap: 3px; width: 100%; margin: 4px 0 2px; }
.stat { display: grid; grid-template-columns: 3.6em 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
.stat i { height: 5px; background: linear-gradient(90deg, var(--glow) calc(var(--v) * 100%), rgba(255, 255, 255, 0.1) 0); }
.row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.label { min-width: 3.4em; font-size: 13px; font-weight: 700; color: var(--dim); flex: none; white-space: nowrap; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1; gap: 4px; }
.seg button { min-height: 40px; padding: 6px 4px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); font-weight: 600; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--amber); color: #1a0f00; border-color: var(--amber); }
.go, .ghost { display: block; width: 100%; margin-top: 16px; min-height: 52px; border: 0; font-weight: 900; font-size: 20px; letter-spacing: 0.08em; }
.go {
  --cut: 12px; color: #1a0f00; background: linear-gradient(180deg, #ffc94f, var(--amber));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 0 22px rgba(255, 177, 46, 0.35);
}
.go:hover { filter: brightness(1.08); }
.go:focus-visible, .ghost:focus-visible, .seg button:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.ghost { min-height: 46px; font-size: 16px; margin-top: 10px; background: transparent; border: 1px solid var(--line-dim); color: var(--ink); }
.ghost:hover { border-color: var(--line); }
.help { margin-top: 14px; font-size: 13px; color: var(--dim); }
.help summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.help p { margin: 8px 0 0; line-height: 1.5; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; font: 600 12px/1.6 'Chakra Petch', sans-serif; text-align: center; color: var(--ink); border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.06); }

/* the mode, and what it means */
.modes { margin-bottom: 4px; }
.modes button { min-height: 44px; font-size: 16px; font-weight: 900; letter-spacing: 0.08em; }
.mode-note { margin: 4px 0 14px; font-size: 12px; color: var(--dim); }
.menu-sheet h2 + .mechs { margin-top: 0; }
.mechs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mech-card { padding: 9px 9px 9px 11px; gap: 3px; }
.mech-card .mech-name { font-size: 19px; }
.mech-card .mech-code { font-size: 9px; letter-spacing: 0.12em; }
.mech-card .mech-role { font-size: 11px; }
.mech-card .stat { grid-template-columns: 2.6em 1fr; font-size: 10px; }
/* the chosen mech: what it is and its three big moves */
.mech-detail { --glow: var(--line); margin: 8px 0 14px; padding: 8px 10px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid var(--glow); font-size: 12px; }
.mech-detail p { margin: 0 0 6px; color: var(--ink); line-height: 1.45; }
.mech-detail ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--amber); font-weight: 700; }
.mech-detail li i { font-style: normal; margin-right: 4px; color: var(--glow); }
.mech-detail li.ult { color: #fff3d6; }
/* everyone playing on this screen */
.local { display: grid; gap: 6px; }
.slot { --c: var(--line); display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 0; background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--c); }
.slot-p { font: 700 13px/1 'Chakra Petch', sans-serif; padding: 4px 7px; color: #061018; background: var(--c); }
.slot-dev { font-size: 16px; }
.slot b { flex: 1; font-size: 16px; font-weight: 900; font-style: italic; }
.slot button { min-width: 34px; min-height: 32px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); font-weight: 700; }
.slot .slot-team { min-width: 56px; font-size: 13px; }
.slot .slot-team.t0 { color: #9fd3ff; border-color: #3fa9ff; }
.slot .slot-team.t1 { color: #ffb8b0; border-color: #ff5a4a; }
.slot .slot-x { color: var(--dim); }
.join-hint { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
.touch .join-hint { display: none; }
/* how many computer mechs */
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; min-height: 40px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); font-size: 20px; font-weight: 700; }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper b { min-width: 2.4em; text-align: center; font: 700 22px/1 'Chakra Petch', sans-serif; }
.seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.seg.wrap button { min-height: 34px; font-size: 13px; }
/* roaming's enemies: "just the city" wide, then the counts */
#foes { grid-auto-flow: row; grid-template-columns: 2.4fr repeat(4, 1fr); }
#foes button { white-space: nowrap; }
#hours { grid-auto-flow: row; grid-template-columns: 1.6fr repeat(3, 1fr); }
#hours button { white-space: nowrap; }
/* a gamepad moving through the menu: the focus shows plainly */
.pad-nav :focus { outline: 3px solid var(--amber) !important; outline-offset: 2px; }
/* the results: everyone, winners first */
.standings { display: grid; gap: 4px; margin: 4px 0 14px; padding: 0; list-style: none; text-align: left; }
.standings li { --c: var(--dim); display: grid; grid-template-columns: 3.4em 1fr auto; align-items: baseline; gap: 8px; padding: 5px 8px; background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--c); }
.standings li.win { background: rgba(255, 177, 46, 0.12); }
.standings b { font: 700 13px/1.2 'Chakra Petch', var(--cjk), sans-serif; color: var(--c); }
.standings span { font-weight: 900; font-style: italic; }
.standings em { font-style: normal; font-size: 12px; color: var(--dim); }

/* online: who you are, the open rooms (or the room you're in) */
.online { margin: 0 0 14px; }
.field { display: flex; align-items: center; gap: 10px; }
.field input, .join-code input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; font: 600 16px/1.2 var(--font); color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-dim); border-radius: 0; user-select: text; -webkit-user-select: text; }
.field input:focus, .join-code input:focus { outline: 2px solid var(--line); outline-offset: 1px; }
.online-actions { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.online-actions .go { margin: 0; flex: 1; }
.go.small, .ghost.small { width: auto; min-height: 40px; margin-top: 0; padding: 0 14px; font-size: 15px; }
.join-code { display: flex; gap: 4px; flex: 1; }
.join-code input { width: 6em; text-transform: uppercase; letter-spacing: 0.2em; font-family: 'Chakra Petch', var(--cjk), sans-serif; }
.online h2 { margin-top: 14px; }
.room-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
.room-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid var(--line-dim); }
.room-list li.empty { display: block; padding: 8px 0; color: var(--dim); font-size: 13px; background: none; border: 0; }
.room-list b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-meta { font-size: 12px; color: var(--dim); white-space: nowrap; }
.online-status { margin: 6px 0 0; min-height: 1em; font-size: 12px; color: var(--amber); }
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
.room-head p { display: grid; margin: 0; min-width: 0; }
.room-head b { font-size: 18px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-code { font: 700 13px/1.3 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.14em; color: var(--line); }
.room-share { display: flex; gap: 4px; flex: none; }
.members { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.member { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid var(--line-dim); }
.member.me { border-left-color: var(--amber); }
.member p { display: flex; gap: 8px; align-items: baseline; margin: 0; min-width: 0; }
.member b { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-tags { font-size: 11px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.member-seats { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.member-seats i { padding: 1px 6px; font-size: 11px; font-weight: 700; font-style: normal; background: rgba(255, 255, 255, 0.08); }
.member-seats i.t0 { color: #9fd3ff; box-shadow: inset 2px 0 #3fa9ff; }
.member-seats i.t1 { color: #ffb8b0; box-shadow: inset 2px 0 #ff5a4a; }
.member .slot-x { grid-row: 1 / span 2; grid-column: 2; min-width: 34px; min-height: 32px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); color: var(--dim); }
.seg button:disabled { opacity: 0.5; cursor: default; }
.modes button { padding-left: 2px; padding-right: 2px; letter-spacing: 0.04em; }

/* ------------------------------------------------------------ overlays */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4, 8, 16, 0.55); padding: 20px; }
.overlay-box { width: min(380px, 100%); padding: 24px; background: var(--panel); border-top: 3px solid var(--line); text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay-box h2 { margin: 0 0 6px; font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: 0.06em; }
#result.won h2 { color: var(--amber); text-shadow: 0 0 20px rgba(255, 177, 46, 0.5); }
#result:not(.won) h2 { color: #b9c7da; }
.result-stats { display: grid; gap: 4px; margin: 0; text-align: left; }
.result-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.result-stats dt { color: var(--dim); }
.result-stats dd { margin: 0; font: 700 16px/1.3 'Chakra Petch', var(--cjk), sans-serif; }

/* ------------------------------------------------------------ HUD */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; font-family: var(--font); text-shadow: 0 1px 2px #000; }
.hud::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(110px + var(--safe-t)); background: linear-gradient(180deg, rgba(3, 6, 14, 0.62), rgba(3, 6, 14, 0.25) 60%, transparent); }
.hud-top { position: absolute; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); top: calc(10px + var(--safe-t)); display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
/* everyone in it: the players here and their side on the left, the rest on the right */
.roster { display: grid; gap: 6px; align-content: start; min-width: 0; }
.roster.rest { justify-items: end; }
.chip { --c: var(--line); display: grid; gap: 3px; width: min(330px, 100%); }
.roster.rest .chip { text-align: right; }
.chip-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.roster.rest .chip-name { justify-content: flex-end; }
.chip-name i { font: 700 12px/1 'Chakra Petch', var(--cjk), sans-serif; padding: 2px 5px; color: #061018; background: var(--c); white-space: nowrap; text-shadow: none; }
.chip-name b { font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { position: relative; display: block; overflow: hidden; }
.chip .bar { height: 16px; background: rgba(5, 9, 18, 0.82); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 3px 10px rgba(0, 0, 0, 0.5); transform: skewX(-18deg); }
/* a tick every tenth, and the light along the top */
.chip .bar::after, .card-hp::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.42) calc(10% - 1px) 10%), linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%, rgba(0, 0, 0, 0.18)); }
.roster.rest .chip .bar { transform: skewX(18deg); }
.chip .bar i, .card-hp i { position: absolute; inset: 1px; transform-origin: left; }
.roster.rest .chip .bar i { transform-origin: right; }
/* (the damage trail's class is the menu buttons' .ghost too: none of the button's size, margin or border) */
.chip .ghost, .card-hp .ghost { width: auto; min-height: 0; margin: 0; border: 0; background: #ffe9c0; opacity: 0.85; }
.chip .fill, .card-hp .fill { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #fff), var(--c)); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.chip.low .fill, .card.low .card-hp .fill { animation: low 0.6s ease-in-out infinite alternate; }
@keyframes low { to { filter: brightness(1.6); } }
.stock { display: flex; gap: 4px; min-height: 9px; }
.roster.rest .chip .stock { justify-content: flex-end; }
.stock i { width: 9px; height: 9px; transform: rotate(45deg) scale(0.85); background: var(--c); box-shadow: 0 0 6px var(--c); }
.chip.out { opacity: 0.35; filter: grayscale(1); }
/* the boss's bar: wider, its six legs under it (lit, low, struck, gone) */
.chip.boss { width: min(460px, 100%); }
.chip.boss .chip-name b { font-size: 22px; }
.chip.boss .bar { height: 20px; }
.boss-legs { display: flex; gap: 5px; justify-content: flex-end; }
.boss-legs i { width: 20px; height: 7px; background: #c9a24a; transform: skewX(18deg); box-shadow: 0 0 6px rgba(201, 162, 74, 0.55); transition: background 0.2s; }
.boss-legs i.low { background: #ff8a3d; }
.boss-legs i.hit { background: #fff; }
.boss-legs i.lost { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.chip.boss.down .chip-name i { background: var(--amber); }
/* more than two on a side: a compact grid */
.roster.many { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px 8px; width: min(44vw, 560px); }
.roster.rest.many { justify-self: end; }
.roster.many .chip-name b { font-size: 12px; }
.roster.many .chip-name i { font-size: 10px; padding: 1px 3px; }
.roster.many .chip .bar { height: 7px; }
.roster.many .stock i { width: 6px; height: 6px; }
.hud-clock { text-align: center; min-width: 86px; }
.hud-clock b { display: block; padding: 4px 18px 6px; font: 700 34px/1 'Chakra Petch', sans-serif; color: #fff; background: rgba(5, 9, 18, 0.82); clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); }
.hud-clock b.low { color: var(--red); }
/* the city's bill under the clock, where it's seen: the total, whose it is under it (the players here
   in their colours, everyone else playing by name, the computer's mechs together), a number jumping
   as it grows (hud.js) and going hotter as it climbs (億 orange, 十億 red) */
.hud-bill { display: grid; justify-items: center; gap: 3px; width: fit-content; max-width: min(92vw, 620px); margin: 6px auto 0; padding: 4px 14px 6px;
  background: rgba(5, 9, 18, 0.82); border-top: 2px solid var(--amber); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.hud-bill .loss { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--amber); white-space: nowrap; }
.hud-bill .loss small { font: 700 12px/1 var(--font); letter-spacing: 0.08em; }
.hud-bill .sum { display: inline-block; font: 700 26px/1.05 'Chakra Petch', var(--cjk), sans-serif; font-variant-numeric: tabular-nums; }
.bill-by { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 14px; }
.bill-by:empty { display: none; }
.bill-by .by { --c: var(--line); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bill-by .who { max-width: 9em; overflow: hidden; text-overflow: ellipsis; padding: 1px 5px; font: 700 11px/1.3 'Chakra Petch', var(--cjk), sans-serif; color: #061018; background: var(--c); text-shadow: none; }
.bill-by .rest .who { color: #dfe7f0; background: rgba(154, 166, 186, 0.32); }
.bill-by .amt { display: inline-block; font: 700 17px/1.2 'Chakra Petch', var(--cjk), sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.bill-by .rest .amt { color: #c3ccd8; }
.hud-bill [data-tier="1"] { color: #ff9a3d; }
.hud-bill [data-tier="2"] { color: var(--red); }
.hud-clock .army-loss { display: block; width: fit-content; margin: 1px auto 0; padding: 1px 8px; font: 700 12px/1.35 'Chakra Petch', var(--cjk), sans-serif; color: #a9cf86; white-space: nowrap; background: rgba(5, 9, 18, 0.72); }
.hud-clock .army-loss[hidden] { display: none; }
/* (a mission's losses as bars: the total on the left, on the right a bar each for what you have broken (off your
   pay), the enemy has and the army's own shells have, each behind its icon; the figures are in their tooltips) */
.hud.bars .hud-bill { grid-template-columns: auto auto; justify-items: start; align-items: center; gap: 0 16px; }
.hud.bars .bill-by, .hud.bars .army-loss { display: none; }
.bill-bars { display: grid; gap: 4px; width: 132px; padding-left: 14px; border-left: 1px solid var(--line-dim); }
.bill-bars[hidden] { display: none; }
.bb { --c: #9aa6ba; display: grid; grid-template-columns: 17px 1fr; gap: 6px; align-items: center; }
.bb[data-k="me"] { --c: #2fd2ff; }
.bb[data-k="rest"] { --c: #ff5a4a; }
.bb[data-k="army"] { --c: #a9cf86; }
.bb[hidden] { display: none; }
.hud-bill.hot .bb[data-k="me"] { --c: var(--red); }
.bb .ic { display: block; width: 17px; height: 17px; color: var(--c); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 55%, transparent)); }
.bb .ic svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.bb .trk { display: block; height: 9px; background: rgba(255, 255, 255, 0.1); transform: skewX(-18deg); overflow: hidden; }
.bb .trk i { display: block; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); transform-origin: left; transform: scaleX(0); transition: transform 0.35s ease-out; }
/* (a campaign mission: the bill is the mission's own, yours red with its minus as it comes off your pay,
   redder when it's a big part of the contract) */
.bill-by .pay .amt { color: var(--red); }
.hud-bill.hot { border-top-color: var(--red); }
/* (a district crossed in a fight: its name lit) */
.hud-clock b.lit { animation: lit 1.6s ease-out; }
@keyframes lit { 0%, 30% { color: #1a0f00; background: var(--amber); } 100% { color: #fff; background: rgba(5, 9, 18, 0.82); } }

/* the tags over the mechs (marked when a player here is aiming at one) */
.tags { position: absolute; inset: 0; overflow: hidden; }
.tag { --c: var(--line); position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.tag b { position: absolute; left: 0; bottom: 9px; transform: translateX(-50%); padding: 1px 6px; font: 700 12px/1.3 'Chakra Petch', var(--cjk), sans-serif; white-space: nowrap; color: var(--c); background: rgba(5, 9, 18, 0.72); border-bottom: 2px solid var(--c); }
.tag.me b { color: #061018; background: var(--c); border-bottom-color: #fff; font-size: 13px; text-shadow: none; }
.tag .bar { position: absolute; left: -22px; bottom: 2px; width: 44px; height: 5px; background: rgba(5, 9, 18, 0.8); }
.tag .bar i { position: absolute; inset: 0; background: var(--c); transform-origin: left; }
.tag.me .bar { display: none; }
.tag.aimed b { outline: 2px solid var(--aim); outline-offset: 2px; }
.tag.aimed::after { content: '\25BC'; position: absolute; left: 0; bottom: 30px; transform: translateX(-50%); font-size: 13px; color: var(--aim); animation: bob 0.55s ease-in-out infinite alternate; }
@keyframes bob { to { translate: 0 -4px; } }
/* the players' enemies (and the giants, the boss): a red arrow over each, bigger when aimed at */
.foe-arrow { display: none; position: absolute; left: 0; bottom: 31px; width: 26px; height: 18px; margin-left: -13px; filter: drop-shadow(0 0 4px rgba(255, 36, 54, 0.9)) drop-shadow(0 1px 0 #000); animation: bob 0.6s ease-in-out infinite alternate; }
.foe-arrow::before { content: ''; position: absolute; inset: 0; background: #ff2436; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tag.foe .foe-arrow { display: block; }
.tag.foe.aimed::after { display: none; }
.tag.foe.aimed .foe-arrow { scale: 1.3; transform-origin: 50% 100%; }
/* (the computer's mechs: a small arrow, and no name over it) */
.tag.cpu.foe b { display: none; }
.tag.cpu.foe .foe-arrow { bottom: 10px; width: 16px; height: 11px; margin-left: -8px; }
.tag.cpu.foe.aimed .foe-arrow { scale: 1.4; }
.foe-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.foe-mark .foe-arrow { display: block; bottom: 0; width: 34px; height: 24px; margin-left: -17px; }
/* (a mission's horde, by the dozen: a small one over each) */
.foe-mark.swarm .foe-arrow { width: 15px; height: 11px; margin-left: -7.5px; filter: drop-shadow(0 0 3px rgba(255, 36, 54, 0.9)) drop-shadow(0 1px 0 #000); animation-duration: 0.8s; }
/* (the army on the players' side: the same arrow, smaller and quieter, in the minimap's army green; a soldier's smaller still) */
.foe-mark.ally .foe-arrow { width: 11px; height: 8px; margin-left: -5.5px; opacity: 0.72; filter: drop-shadow(0 0 2px rgba(150, 214, 110, 0.55)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); animation: bob-soft 0.9s ease-in-out infinite alternate; }
.foe-mark.ally .foe-arrow::before { background: #a9cf86; }
.foe-mark.ally.man .foe-arrow { width: 7px; height: 5px; margin-left: -3.5px; }
@keyframes bob-soft { to { translate: 0 -2px; } }
/* (a mission's player down: 機甲倒下 over the wreck, blinking, till the rescue has it up) */
.tag .down-mark { display: none; position: absolute; left: 0; bottom: 34px; transform: translateX(-50%); padding: 2px 8px; white-space: nowrap; font: 900 14px/1.2 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.06em; font-style: normal;
  color: #fff; background: rgba(150, 18, 22, 0.86); border: 1px solid var(--red); box-shadow: 0 0 12px rgba(255, 75, 62, 0.7); animation: down-blink 0.9s steps(2, jump-none) infinite; }
.tag.down .down-mark { display: block; }
.tag.down .bar { opacity: 0.35; }
@keyframes down-blink { 50% { opacity: 0.45; } }
.tag-note { position: absolute; left: 0; bottom: 34px; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 15px; color: #ffd7cf; text-shadow: 0 0 10px rgba(255, 75, 62, 0.9), 0 2px 0 #000; animation: rise 1.8s ease-out forwards; }
@keyframes rise { from { translate: 0 6px; opacity: 1; } 70% { opacity: 1; } to { translate: 0 -26px; opacity: 0; } }

/* the knock-outs */
.feed { position: absolute; right: calc(14px + var(--safe-r)); top: calc(112px + var(--safe-t)); display: grid; gap: 4px; justify-items: end; font-size: 13px; }
.kill { display: flex; gap: 6px; align-items: center; padding: 3px 8px; background: rgba(5, 9, 18, 0.72); border-right: 2px solid var(--red); animation: slide 0.3s ease-out; }
.kill .x { color: var(--red); font-weight: 900; }
/* Model-based enemy portraits: one small decoded asset shared by every HUD use. */
.enemy-icon { display: block; width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; pointer-events: none; }
.chip-name .enemy-icon { width: 28px; height: 28px; align-self: center; }
.roster.many .enemy-icon { width: 22px; height: 22px; }
.kill-unit { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.kill .enemy-icon { width: 26px; height: 26px; }
/* (over a head only the red arrow: the portraits stay in the cards, the feed and the boss's bar) */
/* (a campaign mission: under its bill's box) */
.hud:has(.cp-hud:not([hidden])) .feed { top: calc(164px + var(--safe-t)); }
@keyframes slide { from { translate: 40px 0; opacity: 0; } }

/* the players' cards */
.cards { position: absolute; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); display: flex; gap: 12px; justify-content: flex-start; align-items: flex-end; }
.cards:not([data-n="1"]) { justify-content: space-between; }
.card { --c: var(--line); --cut: 12px; position: relative; isolation: isolate; width: min(330px, calc((100vw - 70px) / 4)); min-width: 220px; padding: 9px 12px 10px 14px; }
.cards[data-n="1"] .card, .cards[data-n="2"] .card { width: min(330px, 44vw); }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--panel); border-left: 3px solid var(--c); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.card-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.card-p { font: 700 13px/1 'Chakra Petch', sans-serif; padding: 2px 6px; background: var(--c); color: #061018; text-shadow: none; }
.card-mech { font-size: 18px; font-weight: 900; font-style: italic; white-space: nowrap; }
.card-code { font: 700 10px/1 'Chakra Petch', sans-serif; letter-spacing: 0.16em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-head .stock { margin-left: auto; }
.card-hp { position: relative; height: 14px; margin-top: 6px; background: rgba(5, 9, 18, 0.82); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); transform: skewX(-18deg); overflow: hidden; }
.card-hp-n { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) skewX(18deg); font: 700 11px/1 'Chakra Petch', sans-serif; z-index: 1; }
.card-body { display: grid; grid-template-columns: 44px 1fr; gap: 10px; margin-top: 8px; align-items: center; }
/* the mech's parts: whole, hurt, nearly gone (blinking), gone */
.frame { display: block; width: 44px; height: 62px; overflow: visible; }
.frame [data-part] { stroke: #b8e5f0; stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.2s; }
.frame .frame-shell { fill: inherit; stroke: inherit; fill-rule: evenodd; }
.frame .frame-detail { fill: none; stroke: #102431; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.frame .lost .frame-detail { display: none; }
.frame .ok { fill: #55bdd7; }
.frame .warn { fill: var(--amber); }
.frame .crit { fill: var(--red); animation: low 0.35s ease-in-out infinite alternate; }
/* (a lost limb pulses red until it grows back) */
.frame .lost { fill: color-mix(in srgb, var(--red) 15%, transparent); stroke: var(--red); stroke-dasharray: 2 2; animation: limb-lost 0.9s ease-in-out infinite alternate; }
@keyframes limb-lost { to { fill: color-mix(in srgb, var(--red) 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { .frame .lost { animation-duration: 2.4s; } }
.card-moves { display: grid; gap: 4px; min-width: 0; }
.mv { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; height: 20px; padding-right: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; font-size: 12px; font-weight: 700; }
/* the cooldown, running down from the right */
.mv::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); transform-origin: right; transform: scaleX(var(--cool, 0)); }
.mv > * { position: relative; }
.mv .key { font: 700 10px/20px 'Chakra Petch', sans-serif; min-width: 24px; padding: 0 3px; text-align: center; font-style: normal; background: color-mix(in srgb, var(--c) 32%, transparent); }
.mv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (and a little clock at its end: the lit part what's come back) */
.mv .cd { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--c) 0 calc((1 - var(--cool, 0)) * 360deg), rgba(255, 255, 255, 0.16) 0); visibility: hidden; }
.mv.cooling .cd { visibility: visible; }
.mv.ult .cd { display: none; }
.mv.cooling .mv-name { color: var(--dim); }
.mv.weak .mv-name { color: var(--amber); }
.mv.gone .mv-name { text-decoration: line-through; color: #8a7474; }
.mv.gone .key { background: rgba(255, 75, 62, 0.32); }
.mv.ult .cells { display: grid; grid-template-columns: repeat(4, 11px); gap: 3px; }
.mv.ult .cells i { height: 9px; transform: skewX(-20deg); background: linear-gradient(90deg, var(--amber) calc(var(--fill, 0) * 100%), rgba(255, 255, 255, 0.1) 0); }
.mv.ult.ready { background: color-mix(in srgb, var(--amber) 28%, transparent); }
.mv.ult.ready .mv-name { color: #fff3d6; }
.mv.ult.ready .cells i { animation: full 0.5s ease-in-out infinite alternate; }
@keyframes full { to { box-shadow: 0 0 12px var(--amber); filter: brightness(1.4); } }
/* the guard's durability and the boost: two labelled gauges of their own, under the moves (the guard
   in four silver plates, the boost one long mint flame; red when low, blinking when it's run dry) */
.card-gauges { display: grid; gap: 4px; margin-top: 7px; }
/* the pilot's skills (ui/hud.js skillsFrame, shared/campaign/skills.js): a chip each, its icon in a ring
   (filling as it charges or comes back), its name and what it's doing; lit in the mech's colour while
   it's on, a flash as it goes off. With four cards, only what each is doing */
.card-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.sk { --k: 0; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 5px; align-items: center; min-width: 0; padding: 3px 5px 3px 3px; color: var(--dim);
  background: rgba(5, 9, 18, 0.72); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); transition: color 0.2s, background 0.2s, border-color 0.2s; }
.sk-ring { grid-area: 1 / 1 / 3 / 2; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(color-mix(in srgb, var(--c) 75%, transparent) calc(var(--k) * 360deg), rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.sk .sk-icon { grid-area: 1 / 1 / 3 / 2; justify-self: center; width: 14px; height: 14px; }
.sk b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; line-height: 1.15; color: var(--ink); }
.sk small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 9px/1.2 var(--font); }
.sk[data-state="on"] { color: var(--c); border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 16%, rgba(5, 9, 18, 0.85)); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 35%, transparent); }
.sk[data-state="on"] .sk-icon { filter: drop-shadow(0 0 3px var(--c)); }
.sk[data-state="charge"] .sk-icon { color: color-mix(in srgb, var(--c) 60%, var(--dim)); }
.sk[data-state="cool"] { opacity: 0.6; }
.sk.fired { animation: sk-fired 0.6s ease-out; }
@keyframes sk-fired { from { transform: scale(1.12); filter: brightness(2.2); box-shadow: 0 0 22px var(--c); } }
.cards:is([data-n="3"], [data-n="4"]) .sk b { display: none; }
.cards:is([data-n="3"], [data-n="4"]) .sk { grid-template-rows: auto; }
/* the skills' words over the street (game/skills-fx.js): a move's name made up on the spot, a brush
   mark (隙 over the one seen through, 一 at a charged blade's point), a tag (全糖去冰, 已接單), a call */
.sk-words { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sk-word { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; opacity: 0; }
.sk-word.name { font: italic 900 clamp(26px, 3.4vw, 44px)/1 var(--font); color: #fff6d8; letter-spacing: 0.02em; -webkit-text-stroke: 3px #1b0f06; paint-order: stroke fill; text-shadow: 4px 4px 0 #ff9a2a, 0 0 18px rgba(255, 154, 42, 0.8); }
.sk-word.glyph { font: 900 46px/1 'DFKai-SB', 'BiauKai', 'Kaiti TC', 'STKaiti', 'KaiTi', serif; color: #17101c; text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 2px #fff; }
.sk-word.glyph.gold { font-size: 38px; color: #fff3cc; -webkit-text-stroke: 1px #2a2230; paint-order: stroke fill; text-shadow: 0 0 12px #e8c26a, 0 0 4px #fff; }
.sk-word.tag { padding: 2px 8px; font: 900 15px/1.2 var(--font); color: #170812; background: var(--sk, #ff4fbf); box-shadow: 0 2px 0 #0008; }
.sk-word.call { font: italic 900 22px/1 var(--font); color: #ffe7a6; -webkit-text-stroke: 2px #2a2230; paint-order: stroke fill; }
.gauge { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 14px; font-size: 11px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.gauge .g-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.gauge .key, .mv-walk .key { min-width: 20px; padding: 0 3px; font: 700 10px/14px 'Chakra Petch', sans-serif; font-style: normal; text-align: center; background: rgba(255, 255, 255, 0.08); }
.g-bar { position: relative; display: block; height: 8px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transform: skewX(-18deg); overflow: hidden; }
.g-bar > b, .g-bar > i { position: absolute; inset: 0; display: block; transform-origin: left; }
.mv-guard .g-bar b { background: linear-gradient(180deg, #ffffff, #aebfd8); }
.mv-guard .g-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(5, 9, 18, 0.92) calc(25% - 2px) 25%); }
.mv-guard.on { color: #fff; }
.mv-guard.on .key { background: var(--c); color: #061018; text-shadow: none; }
.mv-guard.on .g-bar { box-shadow: 0 0 9px rgba(255, 255, 255, 0.7); }
.mv-guard.broken { color: var(--red); }
.mv-guard.broken .g-bar b { background: repeating-linear-gradient(135deg, var(--red) 0 4px, #7a1a14 4px 8px); }
.g-boost .g-bar { height: 6px; }
.g-boost .g-bar i { background: linear-gradient(90deg, #22d79c, #c8ffe9); box-shadow: 0 0 6px rgba(80, 255, 190, 0.55); }
.g-boost.low, .g-boost.low .g-name { color: var(--red); }
.g-boost.low .g-bar i { background: var(--red); box-shadow: none; }
.g-boost.empty .g-bar { animation: dry 0.5s steps(2) infinite; }
.g-ammo .g-bar { height: 6px; }
.g-ammo .g-bar i { background: linear-gradient(90deg, #ffc455, #fff1c0); box-shadow: 0 0 6px rgba(255, 196, 85, 0.5); }
.g-ammo.low, .g-ammo.low .g-value { color: var(--red); }
.g-ammo.low .g-bar i { background: var(--red); box-shadow: none; }
.g-ammo.reload .g-bar i { background: repeating-linear-gradient(90deg, #ffc455 0 6px, #7a5a1a 6px 10px); }
.g-ammo.reload .g-value { color: #ffc455; }
.g-ammo.heat .g-bar i { background: linear-gradient(90deg, #ff4fbf, #ffd3ef); box-shadow: 0 0 6px rgba(255, 79, 191, 0.5); }
.g-ammo.heat.low .g-bar i { background: linear-gradient(90deg, #ff4fbf, var(--red)); }
.g-ammo.heat.reload .g-bar i { background: repeating-linear-gradient(90deg, #ff4fbf 0 6px, #6a1a4c 6px 10px); }
.g-ammo.heat.reload .g-value { color: #ff8ad6; }
/* (白鷺's 屏息: the held shot's charge, cyan, glowing once it's full) */
.g-ammo.breath .g-bar i { background: linear-gradient(90deg, #1fa89a, #9ff6ff); box-shadow: 0 0 6px rgba(159, 246, 255, 0.5); }
.g-ammo.breath.full .g-bar i { background: linear-gradient(90deg, #9ff6ff, #ffffff); box-shadow: 0 0 10px rgba(159, 246, 255, 0.9); }
.g-ammo.breath.full .g-value { color: #9ff6ff; }
@keyframes dry { 50% { background: rgba(255, 75, 62, 0.55); } }
.mv-walk { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.mv-walk[hidden] { display: none; }
/* knocked out, a stock left: the seconds till it's back, over the card */
.card-down { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 0; background: rgba(5, 9, 18, 0.88);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.card-down small { font-size: 13px; font-weight: 900; letter-spacing: 0.2em; color: var(--ink); }
.card-down b { font: 700 54px/1 'Chakra Petch', sans-serif; color: var(--c); text-shadow: 0 0 18px var(--c), 0 3px 0 #000; }
.card-down b.pop { animation: pop 0.3s ease-out; }
.card-down b:empty { display: none; }
/* (a mission's: 機甲倒下 in red, and whether Polaris's rescue is coming) */
.card.wreck .card-down small { color: #ffd7cf; text-shadow: 0 0 12px rgba(255, 75, 62, 0.85); }
.card-down em { margin-top: 6px; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); opacity: 0.8; }
.card-down em:empty { display: none; }
.card-combo { position: absolute; right: 8px; bottom: calc(100% + 4px); display: grid; justify-items: end; font-style: italic; }
.card-combo b { font: 700 40px/1 'Chakra Petch', sans-serif; color: var(--c); text-shadow: 0 0 14px var(--c), 0 2px 0 #000; }
.card-combo small { font-size: 12px; font-weight: 900; letter-spacing: 0.2em; }
.card-combo.pop b, .card-note.pop { animation: pop 0.28s ease-out; }
.card-note { position: absolute; left: 0; bottom: calc(100% + 6px); font-weight: 900; font-size: 15px; color: #ffd7cf; white-space: nowrap; text-shadow: 0 0 10px rgba(255, 75, 62, 0.8), 0 2px 0 #000; }
@keyframes pop { from { transform: scale(1.5); } to { transform: scale(1); } }

/* an ultimate's cut-in (a big one for the players here) */
.cutin { --c: var(--amber); position: absolute; left: 0; right: 0; top: calc(132px + var(--safe-t)); height: 0; overflow: visible; }
.cutin-band { position: absolute; left: -8%; right: -8%; top: 0; padding: 8px 16%; display: grid; justify-items: center; transform: skewY(-5deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 42%, #0b1322) 18%, color-mix(in srgb, var(--c) 42%, #0b1322) 82%, transparent); border-block: 2px solid var(--c); }
.cutin-band small { font-weight: 700; letter-spacing: 0.2em; color: var(--ink); }
.cutin-band b { font-size: clamp(28px, 4.6vw, 58px); font-weight: 900; font-style: italic; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 24px var(--c), 0 3px 0 #000; }
.cutin.show .cutin-band { animation: cut 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes cut { 0% { translate: 100% 0; } 14% { translate: 0 0; } 84% { translate: 0 0; opacity: 1; } 100% { translate: -100% 0; opacity: 0; } }
.cutin:not(.mine) { top: 15%; }
.cutin:not(.mine) .cutin-band { left: auto; right: 0; width: min(420px, 62vw); padding: 6px 22px; }
.cutin:not(.mine) .cutin-band b { font-size: 24px; }
.cutin:not(.mine).show .cutin-band { animation-duration: 1s; }

/* (over the top of the fight, never on the mechs in the middle; past the first moments of a fight,
   smaller and higher still: .compact) */
.hud-banner { position: absolute; left: 0; right: 0; top: 21%; text-align: center; }
.hud-banner.compact { top: calc(186px + var(--safe-t)); }
.hud-banner.compact b { font-size: clamp(24px, 3.4vw, 42px); text-shadow: 0 0 16px rgba(47, 210, 255, 0.8), 0 3px 0 #0a1830; }
.hud-banner.compact small { margin-top: 2px; font-size: clamp(12px, 1.3vw, 15px); }
.hud-banner.compact.show b { animation: slam-small 0.3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes slam-small { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hud:has(.cp-hud:not([hidden])) .hud-banner.compact { top: calc(212px + var(--safe-t)); }
.hud-banner b { display: inline-block; font-size: clamp(44px, 9vw, 110px); font-weight: 900; font-style: italic; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 30px rgba(47, 210, 255, 0.8), 0 4px 0 #0a1830; }
.hud-banner small { display: block; margin-top: 4px; font-size: clamp(16px, 2.4vw, 24px); font-weight: 900; color: var(--ink); }
.hud-banner.show b { animation: slam 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.hud-banner.ko b, .hud-banner.lose b { color: #ffd7cf; text-shadow: 0 0 34px rgba(255, 75, 62, 0.9), 0 4px 0 #300; }
.hud-banner.win b, .hud-banner.fight b { color: #fff3d6; text-shadow: 0 0 34px rgba(255, 177, 46, 0.9), 0 4px 0 #3a2200; }
@keyframes slam { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.pause-btn { position: fixed; z-index: 6; top: calc(84px + var(--safe-t)); right: calc(16px + var(--safe-r)); width: 44px; height: 44px; border: 1px solid var(--line-dim); background: rgba(9, 16, 30, 0.55); font-size: 14px; letter-spacing: -2px; }
/* (roaming: how far back the camera stands, under the pause button: three nested frames, the chosen one lit) */
.zoom-btn { top: calc(136px + var(--safe-t)); letter-spacing: 0; }
.zoom-btn span, .zoom-btn span::before, .zoom-btn span::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1.5px solid var(--line-dim); }
.zoom-btn span { width: 10px; height: 8px; }
.zoom-btn span::before, .zoom-btn span::after { content: ''; }
.zoom-btn span::before { width: 18px; height: 14px; }
.zoom-btn span::after { width: 26px; height: 20px; }
.zoom-btn[data-level="0"] span, .zoom-btn[data-level="1"] span::before, .zoom-btn[data-level="2"] span::after { border-color: var(--cyan, #35e8ff); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 20%; transform: translateX(-50%); padding: 10px 16px; background: var(--panel); border-left: 3px solid var(--amber); font-weight: 700; }
/* (one with a button: after a lost GPU's reload, its diagnostics to copy, or shown when copying's refused) */
.toast:has(button) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: max-content; max-width: min(640px, calc(100vw - 32px)); }
.toast button { flex: none; width: auto; min-height: 36px; padding: 4px 12px; }
.toast pre { flex-basis: 100%; max-height: 40vh; margin: 0; overflow: auto; white-space: pre-wrap; font: 500 10px/1.35 ui-monospace, monospace; user-select: text; -webkit-user-select: text; }

/* ------------------------------------------------------------ touch controls */
/* (#touch, not .touch: the page’s <html> has the class too on a touch screen, and taken with it the pause and results overlays couldn’t be tapped) */
#touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.touch .stick { position: absolute; left: 0; bottom: 0; width: 46%; height: 62%; pointer-events: auto; touch-action: none; }
.stick-ring { position: absolute; left: 22%; top: 62%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid var(--line-dim); background: rgba(9, 16, 30, 0.25); }
.stick.on .stick-ring { border-color: var(--line); }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(47, 210, 255, 0.35); border: 2px solid var(--line); }
.touch .buttons {
  position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); pointer-events: auto;
  display: grid; grid-template-columns: repeat(4, 64px); grid-template-rows: repeat(3, 64px); gap: 8px;
  grid-template-areas: "walk ult s2 s1" "guard attack fire jump" "surge attack fire jump";
}
@media (max-width: 520px) {
  .touch .buttons { grid-template-columns: repeat(4, 54px); grid-template-rows: repeat(3, 54px); gap: 6px; }
}
.tb { position: relative; display: grid; place-items: center; align-content: center; border: 2px solid var(--line-dim); border-radius: 50%; background: rgba(9, 16, 30, 0.5); touch-action: none; padding: 0; overflow: hidden; }
.tb.down { background: rgba(47, 210, 255, 0.35); border-color: var(--line); }
.tb-icon, .tb-label { position: relative; z-index: 1; }
.tb-icon { font-size: 22px; line-height: 1; }
.tb-label { font-size: 10px; font-weight: 700; color: var(--dim); margin-top: 2px; }
.tb-cool { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.62) calc(var(--cool, 0) * 360deg), transparent 0); pointer-events: none; }
.tb-attack { grid-area: attack; border-radius: 24px; }
.tb-attack .tb-icon { font-size: 34px; }
.tb-fire { grid-area: fire; border-radius: 24px; }
.tb-fire .tb-icon { font-size: 30px; }
.tb-walk { grid-area: walk; border-radius: 18px; }
.tb-walk .tb-icon { font-size: 18px; opacity: 0.55; }
.tb-walk.on { border-color: var(--amber); }
.tb-walk.on .tb-icon { opacity: 1; }
.tb-jump { grid-area: jump; border-radius: 24px; }
.tb-surge { grid-area: surge; }
.tb-guard { grid-area: guard; }
.tb-s1 { grid-area: s1; }
.tb-s2 { grid-area: s2; }
.tb.cooling .tb-icon { opacity: 0.5; }
.tb.gone { opacity: 0.3; }
.tb-ult { grid-area: ult; color: var(--dim); }
.tb-ult.ready { color: #1a0f00; background: var(--amber); border-color: var(--amber); animation: full 0.5s ease-in-out infinite alternate; }
.tb-ult.ready .tb-label { color: #1a0f00; }
/* on a touch screen the one card goes up top, out from under the thumbs */
.touch .cards { left: calc(10px + var(--safe-l)); right: auto; bottom: auto; top: calc(8px + var(--safe-t)); }
.touch .card { width: min(290px, 40vw); min-width: 0; padding: 6px 10px 8px 12px; }
.touch .roster.mine { visibility: hidden; }
.touch .feed { top: calc(96px + var(--safe-t)); }
.touch .card-combo, .touch .card-note { bottom: auto; top: calc(100% + 4px); }
.touch .pause-btn { right: auto; left: 50%; transform: translateX(-50%); top: calc(78px + var(--safe-t)); }
.touch .zoom-btn { left: calc(50% + 50px); top: calc(78px + var(--safe-t)); }

/* ------------------------------------------------------------ loading */
.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 70%, #23345a, #0b1322 70%); padding: 24px; }
.loading-box { width: min(420px, 100%); text-align: center; }
.loading-heading { margin: 0; font-size: 46px; font-weight: 900; font-style: italic; text-shadow: 0 0 24px rgba(47, 210, 255, 0.55); }
.loading-en { margin: 4px 0 18px; font: 700 14px/1 'Chakra Petch', sans-serif; letter-spacing: 0.5em; color: var(--line); }
.loading-meter { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.loading-meter progress { flex: 1; height: 8px; appearance: none; border: 0; background: rgba(255, 255, 255, 0.1); }
.loading-meter progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.1); }
.loading-meter progress::-webkit-progress-value { background: var(--line); }
.loading-meter progress::-moz-progress-bar { background: var(--line); }
.loading-meter span { font: 600 13px/1 'Chakra Petch', sans-serif; color: var(--dim); min-width: 3em; }
[data-loading-note] { color: var(--dim); line-height: 1.5; }
[data-loading-note]:empty { display: none; }
.loading[data-loading-error] [data-loading-note] { color: #ffd7cf; }
.loading-home { display: inline-block; margin-top: 14px; color: var(--line); }

/* ------------------------------------------------------------ phones */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #menu .model-control { inset: 0 0 48% 0; }
  .logo { left: 0; right: 0; top: calc(50px + var(--safe-t)); text-align: center; }
  .logo h1 { font-size: 36px; }
  .dev-badge { margin-top: 4px; }
  .menu-sheet { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); top: auto; width: auto; max-height: 50%; bottom: calc(10px + var(--safe-b)); padding: 14px; }
  .mech-name { font-size: 20px; }
  .model-hint { top: 44%; bottom: auto; left: 0; right: 0; text-align: center; }
  .chip-name b { font-size: 15px; }
  .hud-clock b, .hud.roam .hud-clock.timed b { font-size: 26px; }
  .touch .pause-btn { top: calc(66px + var(--safe-t)); left: auto; right: calc(14px + var(--safe-r)); transform: none; }
  .touch .zoom-btn { top: calc(118px + var(--safe-t)); left: auto; right: calc(14px + var(--safe-r)); transform: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .logo { top: calc(8px + var(--safe-t)); left: auto; right: calc(112px + var(--safe-r)); text-align: right; }
  .logo h1 { font-size: 30px; }
  .dev-badge { display: none; }
  .menu-sheet { top: calc(64px + var(--safe-t)); width: min(400px, 46vw); padding: 12px 14px; }
  .mech-card { padding: 8px 10px; }
  .stats { display: none; }
  .go { min-height: 44px; margin-top: 10px; }
  .touch .buttons { grid-template-columns: repeat(4, 54px); grid-template-rows: repeat(3, 54px); gap: 6px; }
  .hud-banner { top: 19%; }
  .hud-banner b { font-size: clamp(28px, 6.5vw, 56px); }
  .hud-banner small { font-size: 14px; }
  .hud-banner.compact, .hud:has(.cp-hud:not([hidden])) .hud-banner.compact { top: calc(104px + var(--safe-t)); }
  /* (narrow, between the card and the map: its rows wrap) */
  .hud-bill { max-width: 214px; margin-top: 3px; padding: 2px 10px 3px; gap: 1px; }
  .bill-by { gap: 1px 10px; }
  .hud-bill .loss small { font-size: 10px; letter-spacing: 0.04em; }
  .hud-bill .sum { font-size: 18px; }
  .bill-by .amt { font-size: 13px; }
  .bill-by .who { font-size: 10px; }
  /* (a mission's bars: small, close by the total) */
  .hud.bars .hud-bill { gap: 0 8px; }
  .bill-bars { width: 64px; gap: 3px; padding-left: 8px; }
  .bb { grid-template-columns: 11px 1fr; gap: 4px; }
  .bb .ic { width: 11px; height: 11px; }
  .bb .trk { height: 6px; }
  .card-body { grid-template-columns: 36px 1fr; gap: 8px; margin-top: 4px; }
  .frame { height: 50px; width: 36px; }
  .mv { height: 17px; }
  .card-gauges { margin-top: 4px; gap: 3px; }
  .card-down b { font-size: 40px; }
}

/* Roaming Taipei: where the clock was, the district and what's nearest (no stocks: a mech
   knocked out drops back in); the minimap in a corner; the whole city's map over the game,
   with its places to drop in at */
.hud.roam .stock { display: none; }
.hud.roam .hud-clock b { padding: 6px 28px 7px; font: 900 22px/1.15 var(--font); font-style: italic; letter-spacing: 0.02em; white-space: nowrap; }
/* (a mission's fight: its clock where the district was, as a battle's, blinking near the end) */
.hud.roam .hud-clock.timed b { padding: 4px 18px 6px; font: 700 34px/1 'Chakra Petch', sans-serif; letter-spacing: 0; }
.hud-clock.timed b.low { animation: cp-blink 0.8s steps(2) infinite; }
.hud-clock.timed :is(.where, .price, .hour) { display: none; }
.hud-clock .where { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* 無盡: what's left of the wave (or the rest's countdown) under its number, red when a boss is coming */
.hud-clock .wave-left { display: block; width: fit-content; margin: 3px auto 0; padding: 1px 9px; font: 700 13px/1.4 'Chakra Petch', var(--cjk), sans-serif; color: #fff; white-space: nowrap; background: rgba(5, 9, 18, 0.74); font-variant-numeric: tabular-nums; }
.hud-clock .wave-left[hidden] { display: none; }
.hud-clock .wave-left.boss { color: var(--red); }
/* (what a ping sells for there: what the buildings round the players are billed at) */
.hud-clock .price { display: block; width: fit-content; margin: 2px auto 0; padding: 0 7px; font: 700 12px/1.4 'Chakra Petch', var(--cjk), sans-serif; color: var(--amber); white-space: nowrap; background: rgba(5, 9, 18, 0.62); }
/* (roaming: the hour of the city's day) */
.hud-clock .hour { display: block; margin-top: 2px; font: 700 12px/1.2 var(--font); letter-spacing: 0.08em; color: #9fd8ff; font-variant-numeric: tabular-nums; }
.minimap { --cut: 12px; position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 176px; height: 176px; background: var(--panel-solid); box-shadow: 0 0 0 1px var(--line-dim), 0 6px 18px rgba(0, 0, 0, 0.55); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cards:not([data-n="1"]) ~ .minimap { bottom: calc(196px + var(--safe-b)); }
.hud:not(.roam) .minimap { display: none; }
.minimap canvas { display: block; width: 100%; height: 100%; }
.mm-n { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font: 700 11px/1 'Chakra Petch', sans-serif; color: var(--amber); }
.mm-zoom { position: absolute; left: 4px; top: 4px; display: flex; flex-direction: column; gap: 2px; }
.mm-zoom button { margin: 0; width: 22px; min-height: 22px; height: 22px; padding: 0; font: 700 15px/1 var(--font); color: var(--ink); background: rgba(8, 12, 20, 0.62); border: 1px solid var(--line-dim); cursor: pointer; pointer-events: auto; text-shadow: none; }
.mm-zoom button:hover:not(:disabled), .mm-zoom button:focus-visible { border-color: var(--line); outline: none; }
.mm-zoom button:disabled { opacity: 0.35; cursor: default; }
/* (touch: the buttons are bigger; a phone's small round map shows them only once a tap has grown it) */
:root.touch .mm-zoom button { width: 28px; height: 28px; min-height: 28px; }
:root.ph .minimap:not(.ph-big) .mm-zoom { display: none; }
:root.touch .minimap { top: calc(70px + var(--safe-t)); bottom: auto; width: 124px; height: 124px; }
:root.touch .hud.roam .feed { top: calc(204px + var(--safe-t)); }
/* (a touch screen: the card's at the top on the left, the map at the top on the right: the bill between them) */
:root.touch .hud-bill { --l: calc(44px + var(--safe-l) + min(290px, 40vw)); --r: calc(138px + var(--safe-r)); max-width: max(150px, calc(100vw - var(--l) - var(--r) - 16px)); transform: translateX(calc((var(--l) - var(--r)) / 2)); }
.citymap { z-index: 22; padding: 14px; }
.citymap-box { width: min(1180px, 100%); height: min(820px, 100%); display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 14px 16px 16px; background: var(--panel); border-top: 3px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.citymap-box header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.citymap-box h2 { margin: 0; font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: 0.04em; }
.citymap-box header p { flex: 1 1 200px; margin: 0; color: var(--dim); }
.citymap-close { margin: 0; min-height: 36px; }
/* (the coordinate box: a latitude and longitude from Google Maps; 16px so a phone doesn't zoom in on it) */
.citymap-go { display: flex; align-items: stretch; gap: 6px; flex: 0 1 340px; min-width: 0; margin: 0; }
.citymap-go input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; font: 600 16px/1.2 var(--font); color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-dim); border-radius: 0; user-select: text; -webkit-user-select: text; }
.citymap-go input:focus-visible { outline: none; border-color: var(--line); }
.citymap-go .go { flex: none; margin: 0; }
.citymap-note { position: absolute; top: 10px; left: 50%; z-index: 3; transform: translateX(-50%); max-width: min(520px, calc(100% - 24px)); margin: 0; padding: 8px 14px; font-weight: 700; text-align: center; background: var(--panel-solid); border-left: 3px solid var(--red); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
/* (a phone held sideways: the header is one row, the map keeps the height) */
@media (max-height: 520px) and (orientation: landscape) {
  .citymap { padding: 6px; }
  .citymap-box { gap: 6px; padding: 8px 10px 10px; }
  .citymap-box header { align-items: center; gap: 10px; }
  .citymap-box h2 { font-size: 20px; }
  .citymap-box header p { display: none; }
  .citymap-go { flex: 1 1 200px; }
}
.citymap-view { position: relative; min-height: 0; overflow: hidden; touch-action: none; }
.citymap-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.citymap-places { position: absolute; inset: 0; pointer-events: none; }
.citymap-place { position: absolute; transform: translate(-50%, -50%); min-height: 0; padding: 4px 10px; font: 700 13px/1.25 var(--font); color: #1a0f00; background: var(--amber); border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); white-space: nowrap; cursor: pointer; pointer-events: auto; }
.citymap-place:hover, .citymap-place:focus-visible { background: #fff; outline: 2px solid var(--line); }
.citymap-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.citymap-zoom button { margin: 0; width: 40px; min-height: 40px; padding: 0; font: 700 22px/1 var(--font); color: var(--ink); background: var(--panel); border: 1px solid var(--line-dim); cursor: pointer; }
.citymap-zoom button:hover, .citymap-zoom button:focus-visible { border-color: var(--line); outline: none; }

/* roaming: the names of the landmarks and stations in the picture */
.place-tags { position: absolute; inset: 0; overflow: hidden; }
/* what breaking things costs, over where it broke (ui/bills.js): bigger and redder the more it is (it
   comes off the players' money: −NT$100萬); the army's green, the rest's pale */
.bills { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* (sizes kept with bills.js FONT, which lays them out so none overlaps another or a player's mech) */
.bill { position: absolute; left: 0; top: 0; will-change: transform, opacity; white-space: nowrap; font: 700 13px/1 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.02em; color: #ff9a9a;
  text-shadow: 0 2px 0 #220606, 0 0 3px #220606, 1px 0 0 #220606, -1px 0 0 #220606; }
.bill[data-tier="2"] { font-size: 16px; color: #ff7070; }
.bill[data-tier="3"] { font-size: 21px; color: #ff4a4a; text-shadow: 0 2px 0 #2a0404, 0 0 6px rgba(255, 60, 60, 0.65), 1px 0 0 #2a0404, -1px 0 0 #2a0404; }
.bill[data-tier="4"] { font-size: 27px; color: #ff2d2d; text-shadow: 0 3px 0 #2a0202, 0 0 10px rgba(255, 30, 30, 0.8), 1px 0 0 #2a0202, -1px 0 0 #2a0202; }
.bill.army { color: #bfe39a; }
.bill.other, .bill.other[data-tier] { color: #c9cfd8; text-shadow: 0 2px 0 #10141a, 1px 0 0 #10141a, -1px 0 0 #10141a; filter: opacity(0.7); }
.bill.army[data-tier="3"], .bill.army[data-tier="4"] { color: #9fe36a; text-shadow: 0 2px 0 #0d1a06, 0 0 8px rgba(140, 230, 90, 0.6); }
.place-tag { position: absolute; left: 0; top: 0; translate: -50% -100%; padding: 2px 8px 3px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff6e0; background: rgba(5, 9, 18, 0.72); border-bottom: 2px solid var(--amber); }
.place-tag.station { border-bottom-color: var(--c); }
.place-tag.station::before { content: 'M'; display: inline-block; margin-right: 5px; padding: 0 4px; font: 700 10px/1.4 'Chakra Petch', sans-serif; color: #fff; background: var(--c); }

/* the frame-rate meter (the graphics panel's 顯示幀率): at the foot of the screen, between the cards and the minimap, under the menus */
.perf-meter { position: fixed; z-index: 7; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 50%; translate: -50% 0; padding: 3px 8px; font: 600 12px/1.4 'Chakra Petch', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: #cfe9ff; background: rgba(5, 9, 18, 0.72); border-left: 2px solid var(--cyan, #35e8ff); pointer-events: none; white-space: nowrap; }

/* Launch origin: native accessible control, outside gameplay touch guards. */

/* the specials' and skills' tip (ui/move-info.js): the HUD lets the mouse through, so only these rows take it */
.hud .card :is(.mv, .sk) { pointer-events: auto; cursor: help; }
.mtip { position: fixed; z-index: 30; left: 0; top: 0; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px 9px; pointer-events: none;
  background: var(--panel-solid); border: 1px solid color-mix(in srgb, var(--c, var(--line)) 55%, transparent); border-left: 3px solid var(--c, var(--line)); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); font-size: 12px; line-height: 1.5; color: var(--ink); }
.mtip[hidden] { display: none; }
.mtip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.mtip-head b { font-size: 14px; font-weight: 900; }
.mtip-head small { padding: 0 6px; font: 700 10px/16px var(--font); color: var(--dim); background: rgba(255, 255, 255, 0.08); }
.mtip p { margin: 3px 0 0; }
.mtip em { margin-right: 6px; font-style: normal; font-weight: 900; color: var(--c, var(--line)); }
.mtip .mtip-note { color: var(--amber); }

/* Shared numeric terminology: full English on desktop, shorthand on touch screens. */
.stat-label > .stat-short { display: none; }
:root.touch .stat-label > .stat-full { display: none; }
:root.touch .stat-label > .stat-short { display: inline; }
:root.touch .gauge { grid-template-columns: 4.8em minmax(0, 1fr) auto; }