/* Browser client additions on top of the UI kit (tokens only): fonts, the canvas host and the boot panels. */
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2'); }
/* Under the interface, pixel-exact when stretched. Laid out at 1/--canvas-stretch (devicePixelRatio × render scale,
   input/render_scale.rs) of the page and scaled back, so the drawing buffer is CSS px ÷ render scale at any display
   scaling and the pointer, in CSS px, lands where it points. !important beats Bevy's inline 100%. */
canvas#game { position: absolute; left: 0; top: 0; width: calc(100% / var(--canvas-stretch, 1)) !important; height: calc(100% / var(--canvas-stretch, 1)) !important; transform: scale(var(--canvas-stretch, 1)); transform-origin: 0 0; outline: none; image-rendering: pixelated; }
.boot { display: grid; place-items: center; }
.boot-panel { position: relative; width: min(520px, calc(100vw - 2 * var(--s4))); }
.boot-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); }
.boot-detail { font-size: var(--t-s); }
.session-badge { position: absolute; left: var(--s3); top: var(--s3); padding: var(--s1) var(--s3); background: var(--panel-soft); border: 2px solid var(--line); border-radius: var(--radius); font-size: var(--t-s); pointer-events: none; }
/* The TS page hosts Phaser's canvas inside div#game; here the canvas is #game itself. */
body.champion-fallen canvas#game { filter: grayscale(0.85) brightness(0.6); }
/* uPlot 1.6.32 (uPlot.min.css, MIT): the gold graph keeps uPlot's DOM classes and look. */
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
/* Sandbox rooms (ui/play/sandbox.rs): the DPS chip and toggle, the panel and the click-to-place hint, right side under the score. */
.sandbox-dock { position: absolute; top: 76px; right: var(--s4); zoom: var(--ui-scale); z-index: var(--z-overlay); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); pointer-events: none; }
.sandbox-dock > * { pointer-events: auto; }
.sandbox-bar { gap: var(--s2); }
.sandbox-dps { font-variant-numeric: tabular-nums; }
.sandbox-panel { width: 400px; max-height: calc(100vh / var(--ui-scale) - 380px); overflow-y: auto; padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.sandbox-sec { gap: var(--s2); }
.sandbox-wrap { flex-wrap: wrap; }
.sandbox-champs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); }
.sandbox-champ { padding: 0; aspect-ratio: 1; border: 2px solid var(--line); background: var(--bg-1); cursor: pointer; }
.sandbox-champ:is(:hover, .virtual-hover) { border-color: var(--text-dim); }
.sandbox-champ.on { border-color: var(--you); box-shadow: 0 0 0 1px var(--you-glow); }
.sandbox-champ img { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.sandbox-level { min-width: 0; accent-color: var(--you); }
.sandbox-select { width: auto; padding: var(--s1) var(--s2); font-size: var(--t-s); }
.sandbox-dps-big { font-size: var(--t-l); font-variant-numeric: tabular-nums; color: var(--you); }
.sandbox-hint { max-width: 400px; padding: var(--s2) var(--s3); font-size: var(--t-xs); color: var(--you-light); border-color: var(--you); }
body.sandbox-placing canvas#game { cursor: crosshair; }
/* The kill feed starts below the sandbox bar. */
body:has(.sandbox-dock) .feed { top: 124px; }