/* Siege of Champions UI kit. Components every screen is built from; tokens only. */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-m);
  line-height: 1.3;
}
button, input, select { font: inherit; color: inherit; }
/* One field for every select: a light value on the browser's white field was unreadable (client UI council round 0). */
select { padding: 9px; color: var(--text); background: var(--bg-0); border: 1px solid var(--line-strong); }
select:disabled { color: var(--text-dim); }
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--you); }
button { cursor: pointer; }
#game { position: absolute; inset: 0; }
canvas { display: block; image-rendering: pixelated; }
[hidden] { display: none !important; }
/* Scrollbars match the panels instead of the browser default. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--bg-1); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--you-deep); }
::-webkit-scrollbar-corner { background: transparent; }
h1, h2, h3, .head { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; margin: 0; }
h1 { font-size: var(--t-display); line-height: 1; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.xs { font-size: var(--t-xs); }
.sm { font-size: var(--t-s); }
.md { font-size: var(--t-m); }
.lg { font-size: var(--t-l); }
.xl { font-size: var(--t-xl); }
.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.c-you { color: var(--you); }
.c-ally { color: var(--ally); }
.c-enemy { color: var(--enemy); }
.c-phys { color: var(--physical); }
.c-magic { color: var(--magic); }
.c-true { color: var(--true); }
.c-mana { color: var(--mana); }
.c-hp { color: var(--hp); }
.c-ready { color: var(--ready); }
.row { display: flex; align-items: center; gap: var(--s2); }
.col { display: flex; flex-direction: column; gap: var(--s2); }
.grow { flex: 1; }
.center { text-align: center; }
.eyebrow { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* Rich text vocabulary (text-clarity.ts) — same meanings as everywhere else */
.clarity-physical { color: var(--physical); }
.clarity-magic { color: var(--magic); }
.clarity-health { color: var(--hp); }
.clarity-mana { color: var(--mana); }
.clarity-shield { color: var(--shield); }
.clarity-gold { color: var(--you); }
.clarity-bonus { color: var(--ready); }
.clarity-negative { color: var(--enemy); }
.clarity-neutral { color: inherit; }
[class*='clarity-champion-'] { color: var(--text); font-style: normal; font-weight: 700; }
em[class*='clarity-'] { font-style: normal; }

/* Panel */
.panel {
  /* Stepped pixel corners, like the combat console's cut corners (Opus, round 4). */
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  background: var(--steel);
  border: none;
  border-top: 3px solid var(--trim);
  border-radius: 0;
  box-shadow: var(--steel-edge), 0 8px 24px var(--shadow);
}
/* Native dialogs otherwise use the browser's dark dialog text on our dark panels. */
dialog.panel { color: var(--text); }
.panel.you { box-shadow: var(--steel-edge), 0 0 0 2px var(--you), 0 8px 24px var(--shadow); }
.panel-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-l);
  padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--trim-dark);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* A title row with a button beside the title: the rule runs under the whole row. */
.panel-head { border-bottom: 2px solid var(--trim-dark); align-items: center; }
.panel-head > .panel-title { border-bottom: none; }

/* Buttons — primary, secondary, quiet; a disabled button always carries a reason */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-m);
  color: var(--text);
  /* Moonsteel like the panels and the HUD (GPT-6.1 Sol, round 3: blue web-form buttons beside the pixel art). */
  background: var(--steel-flat);
  border: 2px solid var(--steel-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  border-radius: var(--radius);
  padding: var(--s3) var(--s5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  white-space: nowrap;
}
.btn:is(:hover, .virtual-hover):not(:disabled) { border-color: var(--trim); }
.btn.primary {
  background: linear-gradient(var(--you-light), var(--you-deep));
  color: var(--ink);
  border-color: var(--you-light);
  font-size: var(--t-l);
  padding: var(--s4) var(--s6);
  /* Stepped corners and a crisp dark edge, the same material as the pixel plates, no glow (GPT-6.1 Sol, rounds 6
     and 8). */
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  box-shadow: inset 0 0 0 1px var(--you-edge), inset 0 -3px 0 var(--you-deep);
}
.btn.primary:is(:hover, .virtual-hover):not(:disabled) { filter: brightness(1.08); border-color: var(--you-light); }
.btn.big { font-size: var(--t-xl); padding: var(--s5) var(--s7); }
.btn.small { font-size: var(--t-s); padding: var(--s2) var(--s4); }
.btn.quiet { background: transparent; border-color: var(--steel-line); box-shadow: none; color: var(--text-dim); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; filter: grayscale(0.6); }

/* The client's buttons out of a match: the title, the client and the room (.client-shell), and Settings in and out of a
   match. The match, its loading screens and results keep the buttons above (Tyler, 29 October 2026: "please bring back
   the old buttons for the camera and player and settings in the top right ... Whatever is on main right now is what you
   need to be using"). :where() keeps each rule's weight that of the rule above it, so the resets below undo the rest.
   Primary (gold), secondary (steel), quiet. Moonsteel frames from /art/ui/ shown at 2x (layout A, Tyler 28 October
   2026: "why aren't we using the Moonforge Steel components"): the 12px frames are 9-sliced at 5px and drawn 10px wide
   over a 4px border, their face the gradient under them. Gold is only for the Play and Start family. The Moonforge kit
   replaces the files under the same names. */
:where(.title-screen, .client-shell, .game-settings) .btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-m);
  line-height: 1.1;
  color: var(--text);
  background: var(--face-steel) padding-box;
  border: 4px solid transparent;
  border-image: url('/c/21c428881f7c1c8e8af997a3b077a6db135f5fa9e4787d722abb9f29942ad5cd.png') 5 / 10px stretch;
  image-rendering: pixelated;
  border-radius: 0;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}
:where(.title-screen, .client-shell, .game-settings) .btn:is(:hover, .virtual-hover):not(:disabled) { border-image-source: url('/c/07193ecb182886b98126d5ebe6b4189811e17fbd0f8bc4cb2295069407ec45ca.png'); background: var(--face-steel-hover) padding-box; }
:where(.title-screen, .client-shell, .game-settings) .btn:active:not(:disabled) { border-image-source: url('/c/c31284c3a2c7df8c099d6c58270cc839ef86f48c9daee68fe9cd9e18786fc5db.png'); background: var(--face-steel-pressed) padding-box; }
/* Selected: a lit gold rim on the steel, for the chosen tab, an open drawer's button and the current page. */
:where(.title-screen, .client-shell, .game-settings) .btn:is(.on, [aria-pressed="true"], [aria-current="page"], [aria-expanded="true"]):not(.primary) { border-image-source: url('/c/237b4ddb8b6a22cd95523b9185aecfac1bebc5a8cba46a3a7428d6a69a3fe737.png'); color: var(--you-light); }
:where(.title-screen, .client-shell, .game-settings) .btn:focus-visible { outline: 3px solid var(--you-light); outline-offset: 2px; }
:where(.title-screen, .client-shell, .game-settings) .btn.primary {
  color: var(--ink);
  text-shadow: 0 2px 0 var(--gold-text-shade);
  font-size: var(--t-l);
  padding: var(--s4) var(--s6);
  border-image-source: url('/c/a45acd7c1a0c134020cb7a0483ee926794a89be47cbfa370c0d22614286a7c77.png');
  background: var(--face-gold) padding-box;
  clip-path: none;
  box-shadow: none;
}
/* The big gold actions (Play, Find match, Start match) are short display labels: Silkscreen capitals. */
:where(.title-screen, .client-shell, .game-settings) .btn.primary.big { font: 400 var(--t-xl-sm)/1 var(--font-head); letter-spacing: 2px; text-transform: uppercase; }
:where(.title-screen, .client-shell, .game-settings) .btn.primary:is(:hover, .virtual-hover):not(:disabled) { border-image-source: url('/c/5b7a87e674f3d6219108e328f0d9011be6b5d7c3808645e68b652f63fe8f610e.png'); background: var(--face-gold-hover) padding-box; filter: none; }
:where(.title-screen, .client-shell, .game-settings) .btn.primary:is(:active, [aria-current="page"]):not(:disabled) { border-image-source: url('/c/f971626c33be548ca5545379ee4dd02f5d7d6845aa67f4c90a6668912371da2d.png'); background: var(--face-gold-pressed) padding-box; }
:where(.title-screen, .client-shell, .game-settings) .btn.big { font-size: var(--t-l); padding: var(--s5) var(--s7); }
:where(.title-screen, .client-shell, .game-settings) .btn.small { font-size: var(--t-s); padding: 7px 12px; }
:where(.title-screen, .client-shell, .game-settings) .btn.quiet { border-image: none; border: 2px solid transparent; background: transparent; color: var(--text-dim); }
:where(.title-screen, .client-shell, .game-settings) .btn.quiet:is(:hover, .virtual-hover):not(:disabled) { border-image: none; border-color: transparent; background: transparent; color: var(--you-light); text-decoration: underline; text-underline-offset: 4px; }
:where(.title-screen, .client-shell, .game-settings) .btn.quiet:active:not(:disabled) { border-image: none; background: transparent; }
:where(.title-screen, .client-shell, .game-settings) .btn:disabled { opacity: 1; filter: none; cursor: not-allowed; color: var(--text-faint); text-shadow: none; border-image-source: url('/c/5d0485c11876432101bd750eccd04a4ffb2cd5498336e9ecf753d595ea5393aa.png'); background: var(--face-steel-disabled) padding-box; }
:where(.title-screen, .client-shell, .game-settings) .btn.primary:disabled { color: var(--text-dim); border-image-source: url('/c/036615453a7055473f1aaa7c0c37c02c426c7865344dcae68adcfd581e882e24.png'); background: var(--face-gold-disabled) padding-box; }
:where(.title-screen, .client-shell, .game-settings) .btn.quiet:disabled { border-image: none; background: transparent; }
/* An icon button: a square steel button holding a pixel icon (.pico), with an optional count badge on its corner. */
.btn.icon { position: relative; padding: 8px; }
.count-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--you); color: var(--ink); font: 700 var(--t-badge)/20px var(--font-body); text-align: center; box-shadow: 0 0 0 2px var(--steel-dark); pointer-events: none; }
.why { font-size: var(--t-xs); color: var(--text-dim); margin-top: var(--s1); }
.key {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--text);
  background: var(--bg-0);
  border: 1px solid var(--line-strong);
  padding: 0 var(--s1);
  border-radius: var(--radius);
  line-height: 20px;
  display: inline-block;
  min-width: 22px;
  text-align: center;
}
.input {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-m);
  color: var(--text);
  background: var(--bg-0);
  border: 2px solid var(--steel-line);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  outline: none;
}
.input:focus { border-color: var(--you); }

/* Tabs */
.tabs { display: flex; gap: var(--s1); border-bottom: 2px solid var(--trim-dark); }
.tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-m);
  padding: var(--s3) var(--s4);
  color: var(--text-dim);
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
}
.tab.on { color: var(--you-light); background: var(--bg-2); border-color: var(--line); border-bottom: 2px solid var(--bg-2); }
/* In the client and in Settings a tab is a Silkscreen label with a gold underline when chosen; the match keeps the tabs above. */
:is(.client-shell, .front, .game-settings) .tabs { border-bottom: 2px solid var(--steel-line); }
:is(.client-shell, .front, .game-settings) .tab, .kit-tab { position: relative; font: 400 var(--t-s)/1 var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 0; margin: 0; padding: var(--s3) var(--s4) var(--s4); cursor: pointer; }
:is(.client-shell, .front, .game-settings) .tab:is(:hover, .virtual-hover), .kit-tab:is(:hover, .virtual-hover) { color: var(--text); }
:is(.client-shell, .front, .game-settings) .tab:is(.on, [aria-selected="true"], [aria-current="page"]), .kit-tab:is(.on, [aria-current="page"]) { color: var(--you-light); background: transparent; }
:is(.client-shell, .front, .game-settings) .tab:is(.on, [aria-selected="true"], [aria-current="page"])::after, .kit-tab:is(.on, [aria-current="page"])::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--you); box-shadow: 0 0 8px var(--you-glow); }
:is(.client-shell, .front, .game-settings) .tab:focus-visible, .kit-tab:focus-visible { outline: 3px solid var(--you-light); outline-offset: -3px; }

/* Moonsteel panels: steel with a forged gold rim and cut corners, the 16px frame 9-sliced at 7px and drawn 14px over an
   8px border (feature panels: 18px, 8px, 16px over 10px). .flat is the same rim on a flat face, .solid on an opaque
   one for what opens over other panels; .kit-plate a rimless
   steel plate for lists inside a framed column. */
.ms { border: 8px solid transparent; border-image: url('/c/7e3b3375da5f0c9761558b21d39d7874f8906318c7da420ce073476b3cac8fc5.png') 7 / 14px stretch; background: var(--panel-steel) padding-box; image-rendering: pixelated; }
.ms.feature { border-width: 10px; border-image: url('/c/9cd69333dc17ed5ade6bb46d5efcec31312af5d14fe544a36a658f159be82b62.png') 8 / 16px stretch; }
.ms.flat { background: var(--panel-flat) padding-box; }
.ms.solid { background: var(--bg-1) padding-box; }
.kit-plate { background: var(--plate); border: 2px solid var(--plate-edge); box-shadow: inset 0 1px 0 var(--plate-sheen); }
/* Portrait sockets, like the HUD's ability slots: the 8px frame 9-sliced at 3px, drawn 6px. .empty is an open seat. */
.socket { display: inline-grid; place-items: center; flex: none; line-height: 0; border: 6px solid transparent; border-image: url('/c/8bc02bcbba9193539b6f4a27d5f15eb52bdd7c3d38357d3badb9645d0baaa5e4.png') 3 / 6px stretch; background: var(--bg-1) padding-box; image-rendering: pixelated; color: var(--text-dim); font: 700 var(--t-s)/1 var(--font-body); }
.socket.on { border-image-source: url('/c/4054d4a674bdb554cd1c93aea296707690854c1e934830690e4178df43ab41eb.png'); box-shadow: 0 0 0 2px var(--you-soft), 0 0 18px var(--you-glow); }
.socket > img { display: block; image-rendering: pixelated; }
.socket.empty { border-image: none; border: 2px dashed var(--steel-line); background: var(--plate); color: var(--text-faint); font: 400 var(--t-l)/1 var(--font-head); }
button.socket { padding: 0; cursor: pointer; }
button.socket.empty:is(:hover, .virtual-hover) { border-color: var(--trim); color: var(--you-light); }
/* Chips: a choice or tag in a steel box; chosen, a gold edge and gold words. */
.kit-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--steel-line); background: var(--chip-face); font: 700 var(--t-s)/1 var(--font-body); color: var(--text-dim); white-space: nowrap; }
.kit-chip.on, button.kit-chip[aria-pressed="true"] { border-color: var(--you); color: var(--you-light); background: var(--you-soft); }
button.kit-chip { cursor: pointer; } button.kit-chip:is(:hover, .virtual-hover) { border-color: var(--trim); }
/* A Silkscreen eyebrow over a panel's contents, and the gold rule under a column's section heading. */
.kit-label { font: 400 var(--t-s)/1 var(--font-head); letter-spacing: 1px; color: var(--trim); text-transform: uppercase; margin: 0; }
.kit-rule { height: 2px; background: linear-gradient(90deg, var(--trim), var(--trim-dark) 60%, transparent); }
/* Presence: a square pixel and its word; the word carries the meaning. */
.pres { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--text-dim); }
.pres::before { content: ''; width: 8px; height: 8px; flex: none; background: var(--away); box-shadow: 0 0 0 2px var(--steel-dark); }
.pres[data-state="online"] { color: var(--online-text); } .pres[data-state="online"]::before { background: var(--online); }
.pres[data-state="busy"] { color: var(--in-match-text); } .pres[data-state="busy"]::before { background: var(--in-match); }
/* Pixel icons drawn with SVG rects. */
.pico { width: 20px; height: 20px; display: block; flex: none; shape-rendering: crispEdges; fill: currentColor; }

/* Slot — one icon box, every state */
.slot {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  position: relative;
  background: var(--bg-0);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  flex: none;
  padding: 0;
  color: var(--text);
}
.slot > img { width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; }
.slot.empty { border-color: var(--steel-line); background: var(--scrim); }
.slot .k {
  position: absolute;
  left: -2px;
  top: -2px;
  font-weight: 700;
  font-size: var(--t-xs);
  background: var(--bg-0);
  border: 1px solid var(--line-strong);
  padding: 0 var(--s1);
  line-height: 18px;
  z-index: 2;
}
.slot .badge {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg-0);
  z-index: 2;
}
.slot .badge svg { width: 13px; height: 13px; }
.slot .cost-tag {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-weight: 700;
  font-size: var(--t-xs);
  line-height: 1;
  padding: 1px 3px;
  color: var(--mana);
  background: var(--bg-0);
  border: 1px solid var(--mana);
  z-index: 2;
}
.slot .count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-weight: 700;
  font-size: var(--t-xs);
  text-shadow: 0 0 3px var(--bg-0), 0 0 3px var(--bg-0);
}
.slot .charges {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--s1);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-xs);
  background: var(--bg-0);
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  z-index: 3;
}
/* A charge refilling while one is still banked: the icon stays bright and usable. Only a thin green ring fills around
 * the border and a small corner timer counts, so it never reads as the dark full-icon sweep of a real cooldown. */
.slot .recharge {
  position: absolute;
  inset: -4px;
  padding: 3px;
  border-radius: calc(var(--radius) + 3px);
  background: conic-gradient(var(--ready) 0 var(--rdone, 0%), color-mix(in srgb, var(--ready) 18%, transparent) var(--rdone, 0%) 100%);
  -webkit-mask: linear-gradient(var(--bg-0) 0 0) content-box, linear-gradient(var(--bg-0) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--bg-0) 0 0) content-box exclude, linear-gradient(var(--bg-0) 0 0);
  z-index: 1;
  pointer-events: none;
}
.slot .recharge-t {
  position: absolute;
  left: 3px;
  bottom: 1px;
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--ready);
  text-shadow: 0 0 3px var(--bg-0), 0 0 3px var(--bg-0);
  z-index: 2;
  pointer-events: none;
}
/* Charges banked: the pill lights up; at zero it stays dim beside the normal cooldown. */
.slot:not(.cd) .charges { border-color: var(--ready); color: var(--ready); box-shadow: 0 0 6px color-mix(in srgb, var(--ready) 60%, transparent); }
.slot.cd::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(transparent 0 var(--done, 40%), var(--cooldown-shade) var(--done, 40%) 100%);
  z-index: 1;
}
.slot.cd::after {
  content: attr(data-cd);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-l);
  text-shadow: 0 0 4px var(--bg-0);
  z-index: 1;
}
.slot.nomana::before { content: ''; position: absolute; inset: 0; background: var(--mana-tint); mix-blend-mode: multiply; }
.slot.nomana { border-color: var(--mana); }
/* Unlearned and unaffordable keep their art readable (UI council rounds 0 and 2: they read as muddy silhouettes); the
   state is in the dashed socket and the price. */
/* Recognisable before it is learned (GPT-6.1 Sol, round 6) but plainly not ready beside a learned one (Opus, round 8). */
.slot.unlearned > img { filter: saturate(0.55) brightness(0.62); }
.slot.unlearned { border-color: var(--text-faint); }
.slot.ready { border-color: var(--text); }
.slot.aiming { border-color: var(--you); box-shadow: 0 0 0 2px var(--you), 0 0 16px var(--you-glow); }
.slot.poor > img { filter: saturate(0.6) brightness(0.75); }
.slot.poor { border-color: var(--bg-2); }
.slot.locked > img { filter: grayscale(1) brightness(0.35); }
.slot.sel { border-color: var(--you); box-shadow: 0 0 0 2px var(--you), 0 0 18px var(--you-glow); }
.slot.ownedpart { border-color: var(--owned); }
.slot.building { border-color: var(--ally); box-shadow: 0 0 0 2px var(--ally), 0 0 16px var(--ally-glow); }
button.slot:is(:hover, .virtual-hover) { border-color: var(--text); }
.b-owned { background: var(--owned); color: var(--bg-0); }
.b-rec { background: var(--you); color: var(--ink); }
.b-lock { background: var(--locked); color: var(--text); }
.pips { display: flex; gap: 3px; justify-content: center; margin-top: var(--s1); }
.pips i { width: 9px; height: 9px; background: var(--bg-3); border: 1px solid var(--line-strong); }
.pips i.on { background: var(--levelup); border-color: var(--levelup); }
.plus {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  width: 36px;
  height: 28px;
  background: var(--levelup);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-m);
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 0 10px var(--levelup-glow);
  padding: 0;
  z-index: 3;
}

/* Shop tile = slot + price (+ name) */
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; background: none; border: none; padding: 0; color: var(--text); }
.tile .price { font-weight: 700; font-size: var(--t-s); color: var(--you); }
/* Not yet affordable still reads, for planning; gold stays for what you can buy (GPT-6.1 Sol, round 10). */
.tile.poor .price { color: var(--text-dim); }
.tile.locked .price { color: var(--text-faint); }
.tile .nm { font-size: var(--t-xs); color: var(--text-dim); text-align: center; line-height: 1.1; height: 31px; overflow: hidden; }
.tile:is(:hover, .virtual-hover) .slot { border-color: var(--text); }

/* Portrait */
.portrait {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  position: relative;
  border: 2px solid var(--line-strong);
  background: var(--bg-2);
  flex: none;
}
.portrait > img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.portrait.ally { border-color: var(--ally); }
.portrait.enemy { border-color: var(--enemy); }
.portrait.you { border-color: var(--you); }
.portrait .lvl {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-weight: 700;
  font-size: var(--t-xs);
  background: var(--bg-0);
  border: 1px solid var(--line-strong);
  min-width: 22px;
  text-align: center;
  line-height: 18px;
}
/* Dead is grey with its respawn count; unseen keeps some colour under a fog veil, so the two never look alike
   (Opus, round 3). */
.portrait.dead > img { filter: grayscale(1) brightness(0.4); }
/* Brighter, with a lighter veil, so the champion is still recognisable (Grok, round 5: "mud"). */
.portrait.unseen > img { filter: saturate(0.6) brightness(0.75); }
.portrait.unseen::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(164 180 208 / 14%) 0 2px, transparent 2px 4px); }
.portrait.dead::after {
  content: attr(data-respawn);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-l);
  color: var(--text);
  text-shadow: 0 0 4px var(--bg-0);
}
.portrait .ult {
  position: absolute;
  left: -5px;
  bottom: -5px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 2px solid var(--bg-0);
  background: var(--locked);
}
/* No diamond until the ultimate is learned; "not learned" stays in the tooltip (Opus, round 10). */
.portrait .ult:not(.cooling, .on) { display: none; }
.portrait .ult.cooling { background: var(--mana); }
.portrait .ult.on { background: var(--ready); box-shadow: 0 0 8px var(--ready); }

/* Bar — ticks every 100, heavy every 1000 (set --max) */
.bar { position: relative; height: 18px; background: var(--bg-0); border: 1px solid var(--bg-0); outline: 1px solid var(--line); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 70%); background: var(--hp); }
.bar.mana > i { background: var(--mana); }
.bar.ally > i { background: var(--ally); }
.bar.enemy > i { background: var(--enemy); }
.bar.xp > i { background: var(--levelup); }
.bar > s { position: absolute; top: 0; bottom: 0; left: var(--v, 70%); width: var(--sh, 0%); background: var(--shield); }
.bar.ticks::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% * 1000 / var(--max) - 2px), var(--bg-0) calc(100% * 1000 / var(--max) - 2px) calc(100% * 1000 / var(--max))),
    repeating-linear-gradient(90deg, transparent 0 calc(100% * 100 / var(--max) - 1px), var(--scrim) calc(100% * 100 / var(--max) - 1px) calc(100% * 100 / var(--max)));
}
.bar .val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-xs);
  text-shadow: 0 0 3px var(--bg-0), 0 0 3px var(--bg-0);
  z-index: 1;
  white-space: nowrap;
}
.bar.thin { height: 8px; }
.bar.mid { height: 12px; }

/* Stat line — icon, value, label */
.stat { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); }
.stat svg { width: 18px; height: 18px; flex: none; }
.stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--text-dim); }
.ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; flex: none; }

/* Tooltip — the only one (positioned by Floating UI) */
.tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-toast);
  width: max-content;
  max-width: 400px;
  background: var(--bg-0);
  border: 2px solid var(--line-strong);
  padding: var(--s3) var(--s4);
  box-shadow: 0 10px 30px var(--shadow);
  font-size: var(--t-s);
  pointer-events: none;
}
/* While anything is aimed, even a spell still cooling down, its hint above the panel matters more than a tooltip. The
   combat panel stays mounted but hidden under an open panel, which then has its tooltips. */
body:has([data-aiming]:not([hidden])) .tip { visibility: hidden; }
.tip h4 { margin: 0 0 var(--s1); font-size: var(--t-m); display: flex; gap: var(--s3); justify-content: space-between; }
.tip .rule { height: 1px; background: var(--line); margin: var(--s2) 0; }
.tip table { border-collapse: collapse; font-size: var(--t-xs); width: 100%; }
.tip td, .tip th { padding: 2px var(--s2) 2px 0; text-align: left; }
.tip th { color: var(--text-dim); }

/* Chips & badges */
.chip {
  font-weight: 700;
  font-size: var(--t-xs);
  padding: 2px var(--s2);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  border-radius: var(--radius);
  color: var(--text-dim);
  white-space: nowrap;
}
.chip.on { color: var(--ink); background: var(--you); border-color: var(--you); }
button.chip { cursor: pointer; }
.badge-you { font-weight: 700; font-size: var(--t-xs); color: var(--ink); background: var(--you); padding: 0 var(--s1); }

/* Toast */
#toast {
  position: fixed;
  left: 50%;
  top: 140px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: var(--s2) var(--s5);
  background: var(--panel);
  border: 2px solid var(--line-strong);
  font-size: var(--t-m);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  max-width: 720px;
  text-align: center;
}
#toast.show { opacity: 1; }

/* Software cursor and capture prompts (settings.ts) */
:root {
  --arena-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M3 2v25l7-7 5 10 5-3-5-9 10-1z' fill='%23f4c440' stroke='%23060812' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m6 7 13 8-9 1-4 5z' fill='%23ffe89a'/%3E%3C/svg%3E") 3 2;
}
canvas { cursor: default; }
.arena-software-cursor {
  display: none;
  position: fixed;
  top: -2px;
  left: -3px;
  width: 28px;
  height: 32px;
  pointer-events: none;
  z-index: 99999;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32'%3E%3Cpath d='M3 2v25l7-7 5 10 5-3-5-9 10-1z' fill='%23f4c440' stroke='%23060812' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m6 7 13 8-9 1-4 5z' fill='%23ffe89a'/%3E%3C/svg%3E");
}
.arena-cursor-locked .arena-software-cursor { display: block; }
/* Hovering your own fountain stall: a coin-purse cursor says the click opens the shop. */
:root {
  --shop-cursor-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M9 3h10l-3 5h-4z' fill='%23d09622' stroke='%23060812' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11 8h6c6 3 9 9 8 15-1 5-5 7-11 7S4 28 3 23C2 17 5 11 11 8z' fill='%23f4c440' stroke='%23060812' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M10 9h8' stroke='%23060812' stroke-width='2'/%3E%3Ccircle cx='14' cy='20' r='4.5' fill='%23ffe89a' stroke='%239a6414' stroke-width='1.5'/%3E%3C/svg%3E");
  --shop-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M9 3h10l-3 5h-4z' fill='%23d09622' stroke='%23060812' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11 8h6c6 3 9 9 8 15-1 5-5 7-11 7S4 28 3 23C2 17 5 11 11 8z' fill='%23f4c440' stroke='%23060812' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M10 9h8' stroke='%23060812' stroke-width='2'/%3E%3Ccircle cx='14' cy='20' r='4.5' fill='%23ffe89a' stroke='%239a6414' stroke-width='1.5'/%3E%3C/svg%3E") 14 16;
}
.arena-shop-hover canvas { cursor: var(--shop-cursor), pointer; }
.arena-shop-hover .arena-software-cursor { background: var(--shop-cursor-image); top: -16px; left: -14px; }
/* Above the casting hint, off the battlefield's centre (Opus, round 6: it sat over the spot being aimed at). */
.capture-resume {
  position: fixed;
  left: 50%;
  bottom: 236px;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 520px;
  padding: var(--s1) var(--s2);
  background: var(--panel);
  border: 1px solid var(--you);
}

.client-shell select:focus-visible { outline: 3px solid var(--you-light); outline-offset: 3px; }

.look-picker { margin: 1rem 0; }
.look-picker label { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.look-picker select { max-width: 100%; }
.cosmetic-page :focus-visible, .look-picker :focus-visible { outline: 3px solid var(--you-light); outline-offset: 3px; }

/* The search status every client page shows (Quick play's own page is play.css). */
.search-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; }
.search-status.found { color: var(--you-light); }

/* A champion's idle filling its box at one height for every champion (menu_art.rs FitIdle), standing on the floor. */
.idle-fit { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; min-height: 0; }