/* ═══════════════════════════════════════════════
   Worldline — the scene, its figure bar, and the margin
   The colophon and caption come from shared/base.css (shared/colophon.js). The
   scene is a figure: the canvas above a hairline figure bar holding the live
   caption and the view controls. The controls live in a margin column on the
   same paper, ruled off by a hairline; on a narrow window it rises as a sheet.
   Every control is drawn in the plate's own notation (src/controls.js):
   - a choice is words, the pressed one in the accent and underlined, as the
     site's tag filters are;
   - a tick is a hairline frame that shows a law's mark from the key while the
     law is in force (src/marks.js);
   - a scale is a ruled line with ticks and a needle in its parameter's ink;
   - a knob is a number in the caption you drag;
   - edges are identification diagrams, applied fields arrows you drag.
   ═══════════════════════════════════════════════ */

:root {
    --margin-w: 356px;
    --gutter: 20px;
    /* The swatches of the key and the margin's marks (src/marks.js): a body's fill is this
       much of its ink in the ground, as particle.wgsl mixes it; a horizon is a void */
    --key-body: 48%;
    --key-void: var(--text);
    --key-void-edge: var(--text);
}

[data-theme="dark"] {
    --key-body: 62%;
    --key-void: #040404;
    --key-void-edge: color-mix(in srgb, var(--text) 30%, transparent);
}

/* ─── Layout ─── */
.sim-body.wl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    height: 100vh;
    height: 100dvh;
}

body.wl.margin-open { grid-template-columns: minmax(0, 1fr) var(--margin-w); }

.scene {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* The canvases fill the stage; GPUBackend adds #gpuCanvas behind #simCanvas */
.stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    z-index: 0;
}

#simCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ─── Text buttons (scene tools, margin foot) ─── */
.text-btn {
    background: none;
    border: 0;
    padding: 4px 2px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    font-variant-numeric: lining-nums tabular-nums;
    transition: color 0.15s var(--ease-out);
}

.text-btn:hover { color: var(--text); }
.text-btn[aria-pressed="true"],
.text-btn[aria-expanded="true"] { color: var(--accent); }

.scene-tools {
    position: absolute;
    top: 16px;
    right: var(--gutter);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 5;
}

/* ─── The key: the plate's Reference at the stage's bottom right (src/scene-key.js) ───
   A double hairline like a map's cartouche; the swatches are the scene's own marks. The
   scale bar takes the bottom left, as the spacetime view's time axis does */
.scene-key {
    position: absolute;
    right: var(--gutter);
    bottom: 16px;
    z-index: 4;
    padding: 3px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--bg-canvas) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 42%, transparent);
    font-size: var(--font-sm);
    pointer-events: none;
}

.scene-key-in {
    border: 1px solid var(--border);
    padding: 5px 12px 7px 9px;
}

.scene-key-title {
    margin: 0 0 3px;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
}

:lang(ja) .scene-key-title { font-style: normal; font-weight: 500; letter-spacing: 0.1em; }

.scene-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* The swatch itself, not the nested svg a hatch clips to */
.scene-key-row > svg { flex: none; overflow: visible; }

.touch-only { display: none; }
@media (pointer: coarse) {
    .touch-only { display: inline-block; }
}

/* The margin's own × closes it, so its opener stays out of the way meanwhile */
@media (min-width: 901px) {
    body.margin-open #panelToggle { display: none; }
}

/* ─── The figure bar: caption and view controls ─── */
/* The streak plate (src/streak.js), under the stage while the view is Seen */
.streak {
    flex: none;
    height: clamp(120px, 24vh, 240px);
    border-top: 1px solid var(--border);
}
.streak > canvas { display: block; width: 100%; height: 100%; }

.figure-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 28px;
    padding: 10px var(--gutter) 14px;
    border-top: 1px solid var(--border);
}

.figure-bar .caption {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 78ch;
}

.scene-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 26px;
}

.scale-row.boost { grid-template-columns: auto 132px 3.6em; }

/* ═══ The kit ═══ */

/* ─── Choice: words, the pressed one in the accent with a hairline under it ─── */
.choice {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 13px;
}

.choice button {
    background: none;
    border: 0;
    padding: 1px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: color 0.15s var(--ease-out), text-decoration-color 0.15s var(--ease-out);
}

.choice button:hover { color: var(--text); }
.choice button[aria-pressed="true"] { color: var(--accent); text-decoration-color: currentColor; }
.choice button:disabled { color: var(--text-muted); opacity: 0.45; cursor: default; }
.choice button:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* ─── Scale: label, a ruled line with a needle in its parameter's ink, the value ─── */
.scale-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 3.4em;
    align-items: center;
    gap: 0 10px;
    padding: 2px 0;
}

.scale-row > label {
    font-size: 0.93rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.scale-row > output {
    text-align: right;
    font-size: 0.92rem;
    font-style: italic;
    color: var(--text);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.scale-row.sub { padding-left: 38px; grid-template-columns: 66px minmax(0, 1fr) 3.4em; }

input.scale {
    --ink: var(--text);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

/* The line, its two ends and its middle, and a minor tick every tenth (drawn on the track
   with gradients: native range inputs have no tick marks of their own) */
input.scale::-webkit-slider-runnable-track {
    height: 11px;
    background:
        linear-gradient(var(--border-strong), var(--border-strong)) 0 7px / 100% 1px no-repeat,
        linear-gradient(var(--border-strong), var(--border-strong)) 0 1px / 1px 6px no-repeat,
        linear-gradient(var(--border-strong), var(--border-strong)) 50% 1px / 1px 6px no-repeat,
        linear-gradient(var(--border-strong), var(--border-strong)) 100% 1px / 1px 6px no-repeat,
        repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 10%) 0 4px / 100% 3px no-repeat;
}

input.scale::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3px;
    height: 14px;
    margin-top: -2px;
    border-radius: 0;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--bg-canvas);
}

input.scale::-moz-range-track {
    height: 7px;
    background:
        linear-gradient(var(--border-strong), var(--border-strong)) 0 6px / 100% 1px no-repeat,
        linear-gradient(var(--border-strong), var(--border-strong)) 50% 0 / 1px 6px no-repeat;
}

input.scale::-moz-range-thumb { width: 3px; height: 14px; border: 0; border-radius: 0; background: var(--ink); }
input.scale:focus-visible { outline: none; }
input.scale:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 3.5px var(--accent); }
input.scale:focus-visible::-moz-range-thumb { outline: 1.5px solid var(--accent); outline-offset: 2px; }
input.scale:disabled { opacity: 0.4; cursor: default; }

/* ─── Knob: a number in the caption you drag (src/controls.js Knob) ─── */
.knob {
    color: var(--text);
    cursor: ew-resize;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 70%, transparent);
    padding: 0 1px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: lining-nums tabular-nums;
    transition: color 0.15s var(--ease-out);
}

.knob:hover, .knob.drag { color: var(--accent); }
.knob:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* ─── The margin ─── */
.margin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid var(--border);
    background: var(--bg-canvas);
    user-select: none;
}

body.wl:not(.margin-open) .margin { visibility: hidden; }

.margin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 18px var(--gutter) 0;
    border-bottom: 1px solid var(--border);
}

.sidebar-tabs { display: flex; gap: 18px; }

.tab-btn {
    position: relative;
    background: none;
    border: 0;
    padding: 2px 0 9px;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s var(--ease-out);
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); }

.tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--accent);
}

.margin-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
}

.margin-close:hover { color: var(--text); }

.tabs-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tab-panels {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--gutter) 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* base.css makes .panel-section a flex column; here it is a block ruled off from the last */
.panel-section {
    display: block;
    margin: 0;
    padding: 13px 0 11px;
    border-top: 1px solid var(--border);
}

.tab-panel > .panel-section:first-child { border-top: 0; }
.panel-section[hidden] { display: none; }
[hidden] { display: none !important; }

.group-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 0.93rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
}

.margin-foot {
    display: flex;
    gap: 18px;
    padding: 10px var(--gutter) 14px;
    border-top: 1px solid var(--border);
}

.panel-hint {
    margin: 4px 0 0;
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--text-muted);
}

/* The info tips' triggers: a quiet italic ?, or, on a law, its formula */
.margin .info-trigger {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0 2px;
    border-radius: 0;
    background: none;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 400;
    font-style: italic;
    cursor: help;
}

.margin .info-trigger:hover,
.margin .info-trigger:focus-visible { background: none; color: var(--accent); }

/* A formula's sub- and superscripts need inline layout, not base.css's flex */
.margin .info-trigger.law { display: inline-block; line-height: 1.3; }

/* ─── Tick: a hairline frame that shows the law's own mark while it is in force ─── */
.tick {
    --ink: var(--text);
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 9px;
    padding: 3px 0;
    cursor: pointer;
}

.tick.sub { padding-left: 20px; }

.tick input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.tick-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 18px;
    border: 1px solid var(--border-strong);
    transition: border-color 0.15s var(--ease-out);
}

/* Only the mark's own svg overflows: a hatch's nested svg clips to its box */
.tick-frame > svg { width: 24px; height: 13px; overflow: visible; opacity: 0; transition: opacity 0.15s var(--ease-out); }
.tick input:checked ~ .tick-frame { border-color: color-mix(in srgb, var(--ink) 60%, transparent); }
.tick input:checked ~ .tick-frame > svg { opacity: 1; }
.tick input:focus-visible ~ .tick-frame { outline: 1.5px solid var(--accent); outline-offset: 2px; }

.tick-name {
    min-width: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: color 0.15s var(--ease-out);
}

.tick:hover .tick-name,
.tick input:checked ~ .tick-name { color: var(--text); }

.tick-law {
    justify-self: end;
    font-size: 0.86rem;
    font-style: italic;
    color: var(--text-muted);
    white-space: nowrap;
}

kbd.tick-law {
    font-family: var(--font-text);
    font-style: normal;
    font-size: 0.8rem;
    padding: 0 5px;
    background: var(--bg-panel-solid);
}

/* A law whose prerequisite is off: its frame dashed, the row faded */
.tick.ctrl-disabled { opacity: 0.4; cursor: default; }
.tick.ctrl-disabled .tick-frame { border-style: dashed; }
.tick.ctrl-disabled .tick-name { color: var(--text-secondary); }

/* ─── A label beside a choice ─── */
.field-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: baseline;
    gap: 0 10px;
    padding: 3px 0;
}

.field-k { font-size: 0.93rem; color: var(--text-secondary); }

/* ─── The list of figures (src/ui.js builds it from CHAPTERS) ─── */
.figures { display: grid; }

/* A chapter: its numeral over the figures' numbers, its name over theirs, ruled off above */
.figure-chapter {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: baseline;
    gap: 0 10px;
    margin-top: 6px;
    padding: 7px 0 2px;
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
    font-style: italic;
    color: var(--text-muted);
}
.figure-chapter:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.figure-chapter .chapter-no { font-style: normal; text-align: right; }

.figure-row {
    display: grid;
    grid-template-columns: 14px 48px minmax(0, 1fr);
    align-items: center;
    gap: 0 10px;
    padding: 3px 0;
    background: none;
    border: 0;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.97rem;
    cursor: pointer;
    transition: color 0.15s var(--ease-out);
}

.figure-row > svg { display: block; overflow: visible; }
.figure-row .figure-no { color: var(--text-muted); font-size: 0.86rem; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.figure-row:hover { color: var(--text); }
.figure-row[aria-pressed="true"] { color: var(--accent); }

.figure-row[aria-pressed="true"] .figure-name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.figure-row:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* The active figure's knobs, under its row, as scales */
.figure-knobs { padding: 2px 0 4px 72px; }
.figure-knobs .scale-row { grid-template-columns: minmax(58px, max-content) minmax(0, 1fr) 3.4em; }

/* ─── The next body: its glyph beside its scales ─── */
.next-body {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
}

.next-body > svg { overflow: visible; }
.next-body .scale-row { grid-template-columns: 50px minmax(0, 1fr) 3.4em; }

/* ─── Edges: the identification diagrams ─── */
.edges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 2px;
}

.edge {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    cursor: pointer;
    transition: color 0.15s var(--ease-out);
}

.edge > span:last-child { color: var(--text-secondary); }
.edge svg { display: block; overflow: visible; }
.edge:hover { color: var(--text-secondary); }
.edge[aria-pressed="true"],
.edge[aria-pressed="true"] > span:last-child { color: var(--accent); }

.edge[aria-pressed="true"] > span:last-child {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.edge:disabled { opacity: 0.4; cursor: default; }
.edge:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

.universe-more { margin-top: 6px; }

/* ─── Applied fields: arrows you drag ─── */
.pads {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 2px 0 4px;
}

.pad-wrap {
    display: grid;
    justify-items: center;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.pad-wrap output { font-style: italic; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.pad { display: block; cursor: crosshair; touch-action: none; }
.pad:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.bz-ends { color: var(--text-muted); font-size: 0.86rem; }

/* ─── Readouts ─── */
.stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 0;
    font-size: 0.92rem;
}

.stat-label { color: var(--text-secondary); }
.stat-value { color: var(--text); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.stat-sub { padding-left: 14px; }
.stat-sub .stat-label { color: var(--text-muted); font-size: 0.92rem; }
.stat-sub .stat-value { font-size: 0.92rem; color: var(--text); }

/* A drift's sparkline beside its quantity (src/marks.js sparkline) */
.spark { vertical-align: -2px; margin-left: 9px; overflow: visible; }

/* The selected body: its glyph beside its mass, charge and spin */
.specimen {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
    margin-bottom: 2px;
}

.specimen > svg { overflow: visible; }
#selected-particle-section .stat-value { color: var(--accent); }

#force-breakdown { margin-top: 6px; }

/* Each force on the selected body: its law, a bar in its ink against the largest, its size */
.force-row {
    --ink: var(--text-muted);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 4.2em;
    align-items: center;
    gap: 0 8px;
    padding: 1px 0 1px 14px;
    font-size: 0.88rem;
}

.force-row .stat-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.force-row .stat-value { text-align: right; }
.force-bar { display: block; height: 3px; }
.force-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--ink); }

#phase-plot-container canvas,
#eff-pot-container canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1;
}

/* The Measure tab's a(t), H(t) plot and the lens light curve (their panels size them) */
.cosmo-plot {
    display: block;
    margin: 6px 0 2px;
}

/* ─── Dropdowns (shared/dropdown.js): a ruled line that opens a list ─── */
.sim-select { width: 100%; }
.sim-dropdown { position: relative; width: 100%; }
.sim-dropdown.disabled { opacity: 0.4; pointer-events: none; }

.sim-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    background: none;
    color: var(--text);
    font-size: 0.93rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.sim-dropdown-trigger:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.sim-dropdown-chevron { color: var(--text-muted); font-size: 0.7em; }

.sim-dropdown-list {
    display: none;
    position: absolute;
    z-index: 300;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    scrollbar-width: thin;
}

.sim-dropdown.open .sim-dropdown-list { display: block; animation: wlDropIn 0.12s var(--ease-out) both; }
.sim-dropdown.closing .sim-dropdown-list { animation: wlDropOut 0.12s var(--ease-in-out) both; }

@keyframes wlDropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wlDropOut { from { opacity: 1; } to { opacity: 0; } }

.sim-dropdown-item {
    padding: 4px 12px;
    font-size: 0.93rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.sim-dropdown-item:hover,
.sim-dropdown-item.focused { background: var(--bg-hover); color: var(--text); }
.sim-dropdown-item.selected { color: var(--accent); }
.sim-dropdown-item.disabled { color: var(--text-muted); opacity: 0.5; cursor: default; }

/* ─── Overlays (reference, WebGPU notice) ─── */
.stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.stats-title { font-size: 1.15rem; font-weight: 400; }
#reference-overlay { z-index: 9999; }

/* ─── Japanese: labels upright and tracked, as base.css sets the group labels ─── */
:lang(ja) .tick-law,
:lang(ja) .figure-chapter,
:lang(ja) .scale-row > output { font-style: normal; }
:lang(ja) .field-k,
:lang(ja) .scale-row > label { letter-spacing: 0.05em; }

/* ─── Narrow windows: the margin rises over the scene as a sheet ─── */
.sheet-handle { display: none; }

@media (max-width: 900px) {
    :root { --gutter: 14px; }

    .sim-body.wl,
    body.wl.margin-open { grid-template-columns: minmax(0, 1fr); }

    .margin {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        max-height: 62dvh;
        border-left: 0;
        border-top: 1px solid var(--border-strong);
    }

    body.wl:not(.margin-open) .margin { display: none; }

    .sheet-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 2px;
        cursor: pointer;
    }

    .sheet-handle::after {
        content: '';
        width: 36px;
        height: 3px;
        border-radius: 2px;
        background: var(--border-strong);
    }

    .margin-head { padding-top: 6px; }
    .scene-tools { top: 12px; gap: 12px; }
    .figure-bar { padding: 8px var(--gutter) 12px; gap: 8px 18px; }
    .figure-bar .caption { font-size: 0.92rem; flex-basis: 100%; }
    .scale-row.boost { grid-template-columns: auto min(132px, 30vw) 3.6em; }
}

@media (max-width: 600px) {
    .scene-controls { gap: 6px 18px; }
    /* src/ui.js moves speed and language here, and antimatter into the figure bar */
    .margin-foot #speedBtn { margin-left: auto; }
}

@media (pointer: coarse) {
    .choice button { padding: 5px 0; }
    .tick { padding: 6px 0; }
    .scale-row { padding: 5px 0; }
    .figure-row { padding: 5px 0; }
    .margin .info-trigger { padding: 4px 6px; }
}