/* Replay inspector (/replay/, content/replay.html + web/src/replay/). A full-width "app" page:
* dense monospace data on the site's panels, no starfield behind the WebGL view. */
body.app #starfield { display: none; }
body.app .footer { display: none; }
.rp {
--good: #6fd28a;
--warn: #ffcf5a;
width: 100%;
max-width: 1880px;
margin: 0 auto;
padding: 10px 16px 24px;
font-size: 14px;
}
.rp button, .rp select, .rp input {
font: 13px var(--font-body);
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--line-2);
border-radius: 4px;
padding: 4px 9px;
}
.rp button { cursor: pointer; }
.rp button:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.rp button:focus-visible, .rp select:focus-visible, .rp input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.rp button.link { background: none; border: 0; padding: 0; color: var(--amber); text-align: left; font-size: 14px; }
.rp button.link:hover { text-decoration: underline; color: var(--amber-2); }
.rp button.small { padding: 2px 7px; font-size: 12px; }
.rp button.danger:hover { border-color: var(--danger); color: var(--danger); }
.badge {
display: inline-block;
font: 11px/1.5 var(--font-mono);
padding: 0 6px;
margin-left: 6px;
border-radius: 3px;
border: 1px solid var(--line-2);
color: var(--muted);
white-space: nowrap;
vertical-align: middle;
}
.badge.good { color: var(--good); border-color: rgba(111, 210, 138, .5); }
.badge.warn { color: var(--warn); border-color: rgba(255, 207, 90, .5); }
.badge.bad { color: var(--danger); border-color: rgba(255, 107, 107, .6); }
.badge.dim { color: var(--dim); }
.badge:empty { display: none; }
/* --- bar: library, title, transport --- */
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rp-library-toggle { font-family: var(--font-display) !important; letter-spacing: .06em; }
.rp-title { flex: 1 1 280px; min-width: 0; font-family: var(--font-display); font-weight: 700; color: var(--amber-2); letter-spacing: .03em; }
.rp-title #rpRecordingTitle { overflow-wrap: anywhere; }
.rp-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-transport > button { min-width: 36px; }
.rp-play { min-width: 48px !important; border-color: var(--orange) !important; }
.rp-speed, .rp-goto label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.rp-goto input { width: 7.5em; font-family: var(--font-mono); }
/* --- timeline and status line --- */
.rp-timeline { position: relative; margin-top: 10px; }
.rp-timeline canvas { display: block; width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; touch-action: none; }
.rp-tip {
position: absolute;
top: 38px;
z-index: 5;
min-width: 150px;
padding: 4px 8px;
white-space: pre;
font: 12px/1.45 var(--font-mono);
background: var(--panel-2);
border: 1px solid var(--line-2);
border-radius: 4px;
pointer-events: none;
}
.rp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 4px; font: 13px var(--font-mono); color: var(--muted); }
.rp-status .badge { margin-left: 0; }
.rp-timing { margin-left: auto; font-size: 12px; }
.rp-message { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--line-2); background: var(--panel); font-size: 13px; }
.rp-message.good { border-color: var(--good); }
.rp-message.warn { border-color: var(--warn); }
.rp-message.bad { border-color: var(--danger); color: #ffc2c2; }
/* --- library --- */
.rp-library { margin: 10px 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.rp-library-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.rp-library-head h2 { margin: 0; font-size: 1.1rem; }
.rp-import { cursor: pointer; }
.rp-library-table { font-size: 13px; margin: 0; }
.rp-library-table th, .rp-library-table td { padding: 5px 8px; }
.rp-library-table tr.open td { background: rgba(232, 117, 42, .09); }
.rp-library-table td.actions { white-space: nowrap; }
.rp-library-table td.actions button + button { margin-left: 4px; }
.rp-library-table .name .badge { margin-left: 8px; }
.rp-library-note { font-size: 12.5px; margin: 10px 0 0; }
.rp-empty { color: var(--muted); }
body.rp-dropping .rp::after {
content: "Drop .x2events or .x2events.gz files to import them";
position: fixed;
inset: 12px;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
font: 700 1.2rem var(--font-display);
color: var(--amber);
background: rgba(7, 8, 12, .82);
border: 2px dashed var(--amber);
border-radius: 10px;
pointer-events: none;
}
@media (max-width: 760px) {
.rp-library-table thead { display: none; }
.rp-library-table tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
.rp-library-table td { display: inline-block; border: 0; padding: 2px 8px 2px 0; }
.rp-library-table td.name { display: block; }
}
/* --- main area --- */
.rp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 14px; margin-top: 8px; align-items: start; }
@media (max-width: 1100px) { .rp-main { grid-template-columns: minmax(0, 1fr); } }
.rp-scene { position: relative; background: #0b0c11; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.rp-scene canvas { display: block; image-rendering: pixelated; }
.rp-progress {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 8px 14px;
font: 13px var(--font-mono);
background: rgba(18, 20, 27, .92);
border: 1px solid var(--line-2);
border-radius: 4px;
}
.rp-panel { min-width: 0; }
.rp-panel-body { display: flex; flex-direction: column; gap: 10px; }
.rp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 10px; }
.rp-card h3, .rp-card > summary { margin: 0 0 6px; font: 700 .78rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.rp-card > summary { cursor: pointer; list-style: none; margin: 0; }
.rp-card > summary::-webkit-details-marker { display: none; }
.rp-card > summary::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--dim); }
.rp-card[open] > summary::before { content: "\25BE"; }
.rp-card[open] > summary { margin-bottom: 6px; }
.rp-card-diagnostics { border-color: rgba(255, 107, 107, .55); }
.rp-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 12px; margin: 0; font: 12.5px/1.5 var(--font-mono); }
.rp-card dt { color: var(--dim); }
.rp-card dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.rp-raw summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.rp-raw pre { max-height: 50vh; overflow: auto; font-size: 11.5px; }
/* --- scene toolbar and overlay --- */
.rp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.rp-check, .rp-range { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.rp-range input[type=range] { width: 110px; accent-color: var(--orange); }
.rp-range output { min-width: 2.6em; font-family: var(--font-mono); color: var(--text); }
.rp-check input { accent-color: var(--orange); }
.rp-pop { position: relative; }
.rp-pop > summary {
list-style: none;
cursor: pointer;
padding: 3px 9px;
border: 1px solid var(--line-2);
border-radius: 4px;
background: var(--panel-2);
color: var(--text);
}
.rp-pop > summary::-webkit-details-marker { display: none; }
.rp-pop > summary::after { content: " \25BE"; color: var(--dim); }
.rp-pop[open] > summary { border-color: var(--amber); color: var(--amber); }
.rp-pop-body {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
min-width: 250px;
max-height: 70vh;
overflow: auto;
padding: 8px 12px;
background: var(--panel);
border: 1px solid var(--line-2);
border-radius: 6px;
box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
color: var(--text);
}
.rp-pop-body fieldset { border: 0; margin: 0 0 6px; padding: 0; }
.rp-pop-body legend { padding: 0; margin-bottom: 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.rp-pop-body label { display: block; padding: 1px 0; white-space: nowrap; }
.rp-pop-body table { margin: 0; font-size: 12.5px; }
.rp-pop-body th, .rp-pop-body td { padding: 2px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; }
.rp-pop-body td:not(:first-child), .rp-pop-body th:not(:first-child) { text-align: center; }
.rp-pop-body p { margin: 6px 0 0; font-size: 11.5px; white-space: normal; }
.rp-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
@media (max-width: 760px) { .rp-pop-body { position: fixed; left: 16px; right: 16px; top: auto; } }
/* --- "i" explanations (web/src/replay/help.ts) --- */
.rp .rp-info {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 15px;
height: 15px;
margin-left: 4px;
padding: 0;
border: 1px solid var(--line-2);
border-radius: 50%;
background: transparent;
color: var(--dim);
font: italic 700 10px/1 Georgia, serif;
vertical-align: 1px;
cursor: pointer;
}
.rp .rp-info:hover, .rp .rp-info:focus-visible { border-color: var(--amber); color: var(--amber); outline: none; }
.rp .rp-info[aria-expanded="true"] { border-color: var(--amber); background: var(--amber); color: var(--bg); }
/* contain: inline-size lets the text wrap to the row instead of widening a popover or column. */
.rp-help {
contain: inline-size;
margin: 2px 0 6px;
padding: 4px 8px;
border-left: 2px solid var(--amber);
background: rgba(255, 182, 101, .07);
color: var(--muted);
font: 11.5px/1.45 var(--font-body);
white-space: normal;
}
.rp-help[hidden] { display: none; }
/* Where an explanation generated from the C headers lives (struct member or enumerator). */
.rp-help-source { display: block; margin-top: 3px; color: var(--dim); font: 10.5px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.rp-layer { display: flex; flex-wrap: wrap; align-items: center; }
.rp-layer > label { flex: 0 1 auto; }
.rp-layer > .rp-help { flex: 0 0 100%; }
.rp-card dl > .rp-help { grid-column: 1 / -1; margin: 1px 0 5px; }
.rp-pop-body p.rp-help { margin: 4px 0 6px; }
.rp-pop-body th .rp-info { vertical-align: 0; }
.rp-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rp-label {
position: absolute;
left: 0;
top: 0;
font: 10.5px/1.2 var(--font-mono);
white-space: nowrap;
text-shadow: 0 0 2px #000, 0 0 3px #000, 1px 1px 0 #000;
}
.rp-label.small { font-size: 9.5px; opacity: .9; }
.rp-label.selected { font-weight: 700; color: #fff !important; }
.rp-hover {
position: absolute;
z-index: 6;
max-width: 300px;
padding: 4px 8px;
font: 11.5px/1.45 var(--font-mono);
white-space: pre;
background: rgba(18, 20, 27, .94);
border: 1px solid var(--line-2);
border-radius: 4px;
pointer-events: none;
}
.rp-scene canvas { cursor: crosshair; }
/* --- state cards --- */
.rp-card dd.good { color: var(--good); }
.rp-card dd.bad { color: #ff9a9a; }
.rp-card dd.warn { color: var(--warn); }
.rp-card dd.dim { color: var(--dim); }
.rp-card dd.changed { animation: rp-flash 1s ease-out; }
@keyframes rp-flash { from { background: rgba(255, 182, 101, .35); } to { background: transparent; } }
.rp-card dt.rp-section { grid-column: 1 / -1; margin-top: 6px; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
/* --- selected object --- */
#rpSelected:empty { display: none; }
.rp-selected { border-color: rgba(255, 255, 255, .35); margin-bottom: 10px; }
.rp-selected-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rp-selected-head h3 { text-transform: none; letter-spacing: .02em; font-size: .95rem; color: var(--text); }
.rp-selected-head h3 small { color: var(--dim); font-weight: 400; }
.rp-roles .badge { margin: 0 4px 3px 0; }
.rp-sprite { flex: none; min-width: 32px; min-height: 32px; padding: 4px; background: #000; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: var(--dim); }
.rp-sprite canvas { display: block; image-rendering: pixelated; }
.rp-selected-actions { display: flex; gap: 6px; margin: 6px 0 8px; }
.rp-selected .rp-raw pre { font-size: 11px; max-height: 240px; }
/* --- object table --- */
.rp-objects-card { min-width: 0; }
.rp-objects-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--muted); }
.rp-objects-bar input[type=search] { width: 220px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.rp .rp-chip { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; border-color: var(--chip); color: var(--muted); background: none; }
.rp .rp-chip.on { background: var(--chip); color: #000; }
.rp-objects-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.rp-objects { margin: 0; font: 12px/1.35 var(--font-mono); white-space: nowrap; }
.rp-objects th { position: sticky; top: 0; z-index: 1; cursor: pointer; user-select: none; padding: 3px 7px; }
.rp-objects th[data-sort]:not([data-sort=""])::after { content: " " attr(data-sort); color: var(--amber); }
.rp-objects td { padding: 2px 7px; border-color: var(--line); cursor: pointer; }
.rp-objects tbody tr:hover td { background: rgba(255, 255, 255, .06); }
.rp-objects tr.selected td { background: rgba(255, 182, 101, .14); }
/* --- lower row: level map + object table --- */
.rp-lower { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 900px) { .rp-lower { grid-template-columns: minmax(0, 1fr); } }
.rp-map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.rp-map { position: relative; height: 560px; background: #07080c; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.rp-map canvas { display: block; cursor: crosshair; touch-action: none; }
.rp-map-pick { margin: 6px 0 0; font: 12px var(--font-mono); overflow-wrap: anywhere; }