/* 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. */
/* Lighter than it was, so you can still read the fight while you wait (Tyler, 2026-10-27: "we can lighten the gray out
   when you're dead too"). */
body.champion-fallen canvas#game { filter: grayscale(0.7) brightness(0.82); }
/* 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; }
/* The panel: tabs over a scrolling body, the damage readout fixed at the foot (Tyler, 2026-10-27: "Let's get a real like
   UI in there"). */
/* One height on every tab, its body scrolling, so switching tabs never resizes it (Tyler's rule for settings). */
.sandbox-panel { width: 440px; height: min(620px, calc(100vh / var(--ui-scale) - 380px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Hidden (still mounted) while the shop or another overlay is open: it would cover the shop's detail column. */
.sandbox-panel.covered { display: none; }
.sandbox-panel .tabs { padding: 0 var(--s4); margin-top: var(--s2); flex: none; }
.sandbox-panel .tab { flex: 1; padding: var(--s2) var(--s3); font-size: var(--t-s); }
.sandbox-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.sandbox-sec { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.sandbox-sec h4 { margin: 0; }
.sandbox-line { gap: var(--s3); flex-wrap: wrap; }
.sandbox-champs { align-self: stretch; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s1); }
.sandbox-champ { padding: 0; aspect-ratio: 1; border: 2px solid var(--steel-line); background: var(--bg-0); 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), 0 0 10px var(--you-glow); }
.sandbox-champ img { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
/* − Level n +: one control, the steel of the buttons around it. */
.stepper { display: flex; border: 2px solid var(--steel-line); background: var(--bg-0); border-radius: var(--radius); }
.stepper button { width: 36px; padding: 0; border: none; background: var(--steel-flat); font: 700 var(--t-m)/1 var(--font-body); color: var(--text); }
.stepper button:is(:hover, .virtual-hover):not(:disabled) { background: var(--bg-2); color: var(--you-light); }
.stepper button:disabled { color: var(--text-faint); cursor: not-allowed; }
.stepper span { min-width: 5.5em; padding: var(--s2) var(--s2); text-align: center; font-weight: 700; font-size: var(--t-s); font-variant-numeric: tabular-nums; border-inline: 2px solid var(--steel-line); }
.sandbox-sec .seg { border-color: var(--steel-line); }
.sandbox-sec .seg button { padding: var(--s2) var(--s3); }
.sandbox-gold { align-self: stretch; }
.sandbox-gold button { flex: 1; }
.sandbox-pair { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
/* A title and what it does, the control at the right, like a settings row. */
.sandbox-row { align-self: stretch; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
label.sandbox-row { cursor: pointer; }
.sandbox-row small { font-size: var(--t-xs); color: var(--text-dim); line-height: 1.3; }
.sandbox-foot { flex: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 2px solid var(--trim-dark); background: color-mix(in srgb, var(--bg-0) 45%, transparent); }
.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; }