:root{color-scheme:dark;--line:#fff;--text:#fff;--muted:#ccc;--hud-alert:#ef9276}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
body{min-height:100vh;min-height:100dvh;overflow:hidden;background:#000;color:var(--text);font:12px/14px Verdana,Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.shell{width:100%;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#000}
.game{position:relative;min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center;background:#000}
.game>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;background:#000;touch-action:none}
.game>canvas.pan-enabled{cursor:grab}.game>canvas.is-panning{cursor:grabbing}.pan-hint{position:absolute;right:12px;bottom:12px;z-index:1;padding:4px 7px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.68);color:#fff;font:11px/14px Arial,sans-serif;pointer-events:none}.pan-hint:empty{display:none}
.tutorial-panel{position:absolute;top:12px;right:12px;z-index:2;width:min(290px,calc(100% - 24px));padding:10px;border:1px solid #aaa;background:rgba(0,0,0,.92);color:#fff;font:12px/17px Arial,sans-serif}.tutorial-panel[hidden]{display:none}.tutorial-panel p{margin:5px 0 9px}.tutorial-panel button{margin-right:8px}
.gamepad-status{position:absolute;left:12px;bottom:12px;z-index:2;padding:4px 7px;border:1px solid #999;background:rgba(0,0,0,.85);color:#fff;font:11px/14px Arial,sans-serif;pointer-events:none}.gamepad-status[hidden]{display:none}
.camera-controls{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:4px}.camera-controls[hidden]{display:none}.camera-controls button{border:1px solid #aaa;background:rgba(0,0,0,.82);color:#fff;padding:4px 7px;font:11px Arial,sans-serif}
#replayTimeline{position:absolute;left:12px;bottom:12px;z-index:2;width:min(300px,60vw);max-height:34%;overflow:hidden;border:1px solid #9caf79;background:rgba(0,0,0,.88);color:#fff;font:11px/15px ui-monospace,SFMono-Regular,Menlo,monospace}#replayTimeline[hidden]{display:none}#replayTimeline header{display:flex;align-items:center;gap:8px;padding:4px 7px;border-bottom:1px solid #62704e}#replayTimeline header time{margin-left:auto}#replayCancel{pointer-events:auto;font:inherit;padding:2px 5px}#replayEvents{max-height:calc(34vh - 28px);overflow:auto;margin:0;padding:4px 8px 5px 28px}#replayEvents li{padding:1px 0}
#minimap{position:absolute;inset:12px 12px auto auto;z-index:1;width:384px;height:240px;outline:1px solid rgba(255,255,255,.8);background:transparent;image-rendering:auto;touch-action:none;cursor:crosshair;box-shadow:0 1px 5px #000}
.debug-panel{position:absolute;top:8px;left:8px;z-index:1;width:min(292px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;padding:8px 10px;border:1px solid #819568;background:rgba(0,0,0,.9);color:#d9f99d;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}.debug-panel[hidden]{display:none}.debug-panel h2{margin:0 0 5px;font:700 12px/16px ui-monospace,SFMono-Regular,Menlo,monospace}.debug-panel dl{display:grid;grid-template-columns:82px minmax(0,1fr);gap:2px 8px;margin:0}.debug-panel dt{color:#b8c6a6}.debug-panel dd{min-width:0;margin:0;overflow-wrap:anywhere;color:#fff}
.hud{position:relative;min-width:0;padding:0;border-top:1px solid #fff;background:#000;overflow:visible}
.toolbar-row{width:min(640px,100%);margin:0 auto;display:flex;justify-content:flex-start;align-items:stretch;gap:0;min-height:73px}.tools,.actions{display:flex;flex:0 0 auto;gap:0;align-items:stretch}
.tool,.actions button{position:relative;display:block;flex:0 0 40px;width:40px;height:73px;min-width:40px;min-height:73px;padding:0;border:0;border-radius:0;background:#000}
.tool img,.actions img{position:relative;z-index:1;display:block;width:40px;height:73px;object-fit:contain;image-rendering:pixelated}.tool::after{position:absolute;z-index:2;inset:0;background:var(--skill-color);content:"";opacity:.42;pointer-events:none}.tool .count,.actions .count{position:absolute;z-index:3;top:5px;left:12px;width:17px;color:#000;font:700 12px/14px Tahoma,serif;text-align:right}
.tool.active{outline:1px solid #777;outline-offset:-1px}.tool.unavailable img{opacity:.6}.actions button:focus-visible{outline:1px solid #fff;outline-offset:-2px}
.code-play input[type="checkbox"]{width:auto;accent-color:#fff}.replay-enabled{display:flex;align-items:center;gap:3px;color:#fff;font:11px Arial,sans-serif;white-space:nowrap}.code-play button:disabled{opacity:.45;cursor:default}.actions button:disabled{opacity:.45;cursor:default}
.statusbar{width:min(640px,100%);height:23px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;border:1px solid #aaa;background:#eee;color:#111;font:12px/14px Arial,sans-serif;white-space:nowrap}.statusbar span{min-width:0;padding:3px 12px;border-right:1px solid #aaa;text-align:center}.statusbar span:last-child{border-right:0}#status{text-align:left;overflow:hidden;text-overflow:ellipsis}
#undoSkill{border:0;border-right:1px solid #aaa;border-radius:0;padding:2px 7px;background:transparent;color:#111;font:12px/14px Arial,sans-serif}#undoSkill:disabled{color:#777}
.message{min-height:14px;margin:2px 0 0;color:var(--muted);font-size:11px;line-height:14px;text-align:center}
.overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:10px;background:#000}.overlay[hidden],.hud[hidden],canvas[hidden]{display:none}.overlay.hidden{display:none}
.menu-window{position:relative;width:642px;height:338px;border:1px solid #fff;background:#000;overflow:visible;color:#fff;text-align:left}
.menu-window h1{position:absolute;top:5px;left:8px;right:8px;margin:0;text-align:center;font-size:20px;line-height:22px;font-weight:bold}
.menu-window p{position:absolute;margin:0 15px;font-size:10px;line-height:12px}
.legacy-logo{position:absolute;top:10px;left:163px;width:314px;height:95px}.legacy-brand{position:absolute;top:13px;left:185px;color:#ff0;font-size:20px;font-weight:600}
.main-menu .welcome{top:115px}.main-menu .help-links{top:146px}.help-links a,.result-links button,.code-play button{color:#fff}.rating-buttons{position:absolute;top:200px;left:207px;width:226px;display:grid;grid-template-columns:100px 100px;gap:0 10px}.rating-buttons button{width:100px;height:45px;margin:5px;padding:5px;border:0;background:transparent}.rating-buttons img{display:block;width:100px;height:35px}.rating-buttons button:hover,.rating-buttons button:focus-visible{outline:1px solid #fff}
.game-options{position:absolute;top:210px;left:460px;width:180px;margin:0;padding:0;border:0;color:#fff}.game-options label{display:block;height:14px}.game-options input{vertical-align:middle;margin:0 5px 0 0;accent-color:#fff}.game-options input:disabled{opacity:1}.game-options small{display:block;margin-top:3px;color:#999;font-size:9px;line-height:11px}.byline{left:15px;bottom:30px}.menu-footer{position:absolute;right:10px;bottom:5px;font-size:10px;line-height:12px}.decorative-lemming{position:absolute;bottom:-29px;width:130px;height:140px}.decorative-lemming.left{left:-74px}.decorative-lemming.right{right:-74px}
.level-menu h1{top:7px}.level-choice{position:absolute;top:48px;left:119px;width:402px;height:162px;border:1px solid #fff;overflow:auto;color:#fff}.level-row{min-height:16px;padding:1px 2px;cursor:pointer}.level-row:hover{background:#00f}.level-row.selected{background:#f00}.level-row img{width:9px;height:9px;margin-left:4px;vertical-align:baseline}.code-play{position:absolute;top:222px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px}.code-play input{width:200px;border:1px solid #fff;background:#000;color:#fff;text-transform:uppercase}.code-play button,.result-links button{padding:0;border:0;background:none;font-size:14px;text-decoration:underline}.level-menu .message{position:absolute;left:8px;right:8px;top:249px}
.result-panel h1{top:5px}.result-panel #resultText{position:absolute;top:37px;left:20px;right:20px;text-align:center;font-size:12px;line-height:18px}.result-panel #resultText h2{margin:15px 0 4px;font-size:16px;line-height:18px}.result-links{position:absolute;top:165px;left:0;right:0;display:flex;justify-content:center;gap:24px}.result-links button{font-size:16px}.result-links button[hidden]{display:none}
.result{z-index:3}
.world-studio{width:min(760px,calc(100vw - 24px));height:min(620px,calc(100dvh - 24px));padding:12px 18px;overflow:auto;border-color:#aaa;font:12px/16px Arial,sans-serif}.world-studio header{display:flex;justify-content:center;align-items:center;position:relative;height:30px}.world-studio header h1{position:static;font:700 18px/22px Verdana,Arial,sans-serif}.world-studio header button{position:absolute;right:0;top:0}.world-studio button,.world-studio input,.world-studio select{border:1px solid #aaa;background:#151515;color:#fff;padding:5px}.world-studio form{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr)) auto;gap:8px;align-items:end;margin:10px 0}.world-studio form label{display:grid;gap:3px}.world-studio form button{height:29px;white-space:nowrap}.world-studio input{min-width:0;width:100%}.world-studio canvas{position:static;width:100%;height:180px;border:1px solid #777;image-rendering:auto;touch-action:auto}.world-studio #worldMessage{position:static;min-height:18px;margin:6px 0;text-align:left}.world-actions{display:flex;gap:8px}.world-studio h2{margin:9px 0 4px;font-size:13px}.world-library{max-height:125px;overflow:auto;border:1px solid #777}.world-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 6px;border-bottom:1px solid #333}.world-row:last-child{border-bottom:0}.world-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.world-studio-link{position:absolute;left:50%;top:285px;transform:translateX(-50%);border:1px solid #fff;background:#000;color:#fff;padding:5px 12px}
@media(max-width:660px){.overlay{padding:8px}.menu-window{width:min(642px,calc(100vw - 16px));height:min(500px,calc(100dvh - 16px));overflow:auto}.main-menu .legacy-logo{left:50%;transform:translateX(-50%)}.legacy-brand{left:calc(50% - 135px)}.main-menu .welcome{top:112px}.main-menu .help-links{top:151px}.rating-buttons{top:202px;left:50%;transform:translateX(-50%)}.world-studio-link{top:305px}.game-options{top:335px;left:50%;transform:translateX(-50%);width:220px}.game-options small{white-space:nowrap}.byline{bottom:18px}.decorative-lemming{display:none}.level-choice{left:20px;width:calc(100% - 40px)}.code-play{top:222px;gap:5px}.level-menu .message{top:250px}.result-panel #resultText{top:37px}.result-links{top:165px;gap:16px}.world-studio{height:min(620px,calc(100dvh - 16px));padding:8px}.world-studio form{grid-template-columns:repeat(2,minmax(0,1fr))}.world-studio form button{grid-column:1/-1}.world-studio canvas{height:140px}.world-library{max-height:100px}}
@media(max-height:440px) and (min-width:661px){.menu-window{transform:scale(.86)}.overlay{overflow:auto}}
@media(max-width:760px){.hud{overflow-x:hidden}.toolbar-row{--control-width:clamp(20px,calc(100vw / 14),40px);width:100%;min-width:0;max-width:none;margin:0;justify-content:center}.tool,.actions button{flex:0 0 var(--control-width);width:var(--control-width);height:calc(var(--control-width) * 1.825);min-width:var(--control-width);min-height:calc(var(--control-width) * 1.825)}.tool img,.actions img{width:100%;height:100%}.tool .count,.actions .count{top:calc(var(--control-width) * .125);left:calc(var(--control-width) * .3);width:calc(var(--control-width) * .425);font-size:calc(var(--control-width) * .3);line-height:calc(var(--control-width) * .35)}.statusbar{grid-template-columns:minmax(0,1fr) auto auto auto}.statusbar span{padding:3px 7px;font-size:11px}.message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:430px){.statusbar span{padding:3px 5px;font-size:10px}}
@media(max-width:760px){.statusbar{grid-template-columns:minmax(0,1fr) auto auto auto auto auto}.statusbar span{padding-inline:5px}}
@media(max-width:520px){.statusbar{height:auto;min-height:23px;grid-template-columns:minmax(0,1fr) repeat(4,auto);white-space:normal}.statusbar #status{grid-column:1/-1;border-right:0;border-bottom:1px solid #aaa}.statusbar span{padding:3px 5px}#undoSkill{grid-column:1;grid-row:2}.statusbar #out{grid-column:2;grid-row:2}.statusbar #home{grid-column:3;grid-row:2}.statusbar #time{grid-column:4/-1;grid-row:2}.pan-hint{right:6px;bottom:6px;font-size:10px}}
@media(max-height:540px){.shell{grid-template-rows:minmax(0,1fr) auto}.hud{max-height:112px}.toolbar-row{min-height:58px}.tool,.actions button{height:58px;min-height:58px}.tool img,.actions img{height:58px}}
.shortcut-options{position:absolute;top:210px;left:10px;width:160px;max-height:calc(100% - 220px);overflow:auto;margin:0;padding:4px;border:1px solid #555;color:#fff;font:10px/16px Arial,sans-serif}.shortcut-options legend{font-size:10px}.shortcut-options label{display:flex;justify-content:space-between;gap:4px}.shortcut-options button{color:#fff;background:#111;border:1px solid #777;padding:1px 4px;font:inherit}
.tutorial-link{position:absolute;left:50%;top:316px;transform:translateX(-50%);border:1px solid #666;background:#000;color:#fff;padding:3px 12px}
#levelPreview{position:absolute;top:58px;right:8px;width:110px;height:80px;border:1px solid #888;background:#05090f;image-rendering:pixelated}
@media(max-width:660px){#levelPreview{top:52px;right:8px;width:92px;height:68px}.level-choice{left:12px;width:calc(100% - 120px);height:162px}}
@media(min-width:661px){.game-options{top:166px}.world-studio-link{top:285px;left:calc(50% - 4px);transform:translateX(-100%)}.tutorial-link{top:285px;left:calc(50% + 4px);transform:none}}
@media(min-width:661px){.main-menu{height:390px}}
@media(max-width:660px){.game-options{top:335px}.world-studio-link,.tutorial-link{top:305px}.world-studio-link{left:calc(50% - 5px);transform:translateX(-100%)}.tutorial-link{left:calc(50% + 5px);transform:none}}
.game-options .volume-option{display:grid;grid-template-columns:1fr auto;align-items:center;height:30px;gap:2px}.volume-option input{grid-column:1/2;width:100%;margin:0;accent-color:#ddd}.volume-option output{grid-column:2;grid-row:2;font:10px Arial,sans-serif}
@media(max-width:660px){.code-play{top:216px;left:8px;right:8px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;justify-content:stretch;gap:7px 5px;padding:0 4px}.code-play input:not([type="checkbox"]){width:100%;min-width:0}.code-play .replay-enabled{font-size:10px}.level-menu .message{top:269px}}
@media(max-width:380px){.code-play{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 4px;padding:0}.code-play>*{min-width:0}.code-play .replay-enabled{font-size:9px;gap:2px}.code-play input:not([type="checkbox"]){width:100%}.level-menu .message{top:290px}}
@media(max-width:660px) and (max-height:440px){.overlay{place-items:start center;overflow:auto}.level-menu{height:338px;margin-block:8px}}
body.accessibility-mode{--line:#fff;--text:#fff;--muted:#fff}body.accessibility-mode .tool,body.accessibility-mode .actions button{filter:contrast(1.35);height:82px;min-height:82px}body.accessibility-mode .toolbar-row{min-height:82px}body.accessibility-mode .statusbar{outline:2px solid #fff;outline-offset:1px}body.accessibility-mode button:focus-visible{outline:3px solid #ffec55;outline-offset:2px}body.accessibility-mode *,body.accessibility-mode *::before,body.accessibility-mode *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
@media(max-width:660px){.result-links{top:145px;display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:12px 18px;padding:0 10px}.result-links button{max-width:calc(50vw - 30px);font-size:14px;white-space:normal}}
.account-open{position:absolute;top:9px;right:12px;border:1px solid #888;background:#111;color:#fff;padding:4px 8px;font:11px/15px Arial,sans-serif}
.account-records,.account-leaderboard{margin:16px 0;padding-top:10px;border-top:1px solid #888}
.account-records h2,.account-leaderboard h2{margin:0 0 8px;font:bold 14px Arial,sans-serif}
.account-record-list{display:grid;gap:6px}
.account-record{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #888;background:#eee;padding:6px 8px;font:12px Arial,sans-serif;color:#111}
.account-record label{display:flex;align-items:center;gap:5px;white-space:nowrap}
.leaderboard-controls{display:flex;align-items:end;flex-wrap:wrap;gap:8px}
.leaderboard-controls label{display:grid;gap:3px;font:12px Arial,sans-serif}
.leaderboard-entries{padding-left:28px;font:12px Arial,sans-serif}
.leaderboard-entries li{padding:3px 0}
@media(max-width:660px){.account-open{top:8px;right:8px}}

:root {
  --hud-surface: #101714;
  --hud-raised: #19221e;
  --hud-line: #3b4b40;
  --hud-text: #f1f4ef;
  --hud-muted: #b5c1b8;
  --hud-accent: #d9ed78;
  --hud-focus: #77d1c3;
}

.hud {
  border-top: 1px solid var(--hud-line);
  background: var(--hud-surface);
}

.toolbar-row {
  justify-content: center;
  min-height: 78px;
  padding-top: 5px;
}

.tool,
.actions button,
.tool.active {
  outline: 2px solid var(--hud-accent);
  outline-offset: -2px;
}

.tool:focus-visible,
.actions button:focus-visible,
#undoSkill:focus-visible,
.camera-controls button:focus-visible {
  position: relative;
  z-index: 4;
  outline: 2px solid var(--hud-focus);
  outline-offset: -2px;
}

.tool:hover:not(.unavailable),
.actions button:hover:not(:disabled) {
  filter: brightness(1.15);
}

.statusbar {
  height: 27px;
  border-color: var(--hud-line);
  background: var(--hud-raised);
  color: var(--hud-text);
  font: 12px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.statusbar span {
  border-color: var(--hud-line);
}

#status {
  color: var(--hud-muted);
}

#undoSkill {
  border-color: var(--hud-line);
  color: var(--hud-text);
  font: inherit;
}

#undoSkill:disabled {
  color: #87938a;
}

#minimap {
  outline: 1px solid var(--hud-focus);
  box-shadow: 0 2px 10px #0009;
}

.pan-hint,
.gamepad-status {
  border-color: var(--hud-line);
  border-radius: 4px;
  background: rgb(16 23 20 / 94%);
  color: var(--hud-text);
  font: 11px/15px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.camera-controls button {
  border-color: var(--hud-line);
  border-radius: 4px;
  background: rgb(16 23 20 / 94%);
  color: var(--hud-text);
}

@media (max-width: 760px) {
  .toolbar-row {
    min-height: 0;
    padding-top: 3px;
  }

  .statusbar {
    height: auto;
    min-height: 27px;
  }

  #minimap {
    transform: scale(.62);
    transform-origin: top right;
  }

  .camera-controls {
    gap: 2px;
  }

  .camera-controls button {
    padding: 3px 4px;
    font-size: 10px;
  }
}

@media (max-height: 540px) {
  .toolbar-row {
    min-height: 58px;
    padding-top: 0;
  }
}

#cameraControls {
  top: 12px;
  left: 12px;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 24px);
  border: 1px solid var(--hud-line);
  border-radius: 6px;
  background: rgb(16 23 20 / 96%);
  padding: 4px;
  box-shadow: 0 4px 14px #0008;
}

#cameraControls .camera-label {
  padding: 0 7px;
  color: var(--hud-muted);
  font: 700 9px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
}

#cameraControls button {
  min-width: 58px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  padding: 5px 8px;
  color: var(--hud-text);
  font: 600 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#cameraControls button:hover {
  border-color: var(--hud-line);
  background: var(--hud-raised);
}

#cameraControls button:focus-visible {
  z-index: 1;
  outline: 2px solid var(--hud-focus);
  outline-offset: 1px;
}

#replayTimeline {
  left: 12px;
  bottom: 12px;
  display: flex;
  width: min(360px, calc(100vw - 24px));
  max-height: min(320px, calc(100% - 24px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hud-line);
  border-radius: 7px;
  background: rgb(16 23 20 / 96%);
  color: var(--hud-text);
  font: 12px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 5px 18px #0009;
}

#replayTimeline[hidden] {
  display: none;
}

#replayTimeline > header {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--hud-line);
  padding: 7px 9px;
}

#replayTimeline .replay-heading {
  display: grid;
  gap: 2px;
}

#replayTimeline .replay-heading span {
  color: var(--hud-focus);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.1;
  text-transform: uppercase;
}

#replayTimeline .replay-heading strong {
  color: var(--hud-text);
  font-size: 12px;
  line-height: 1.2;
}

#replayElapsed {
  margin-left: auto;
  color: var(--hud-accent);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

#replayCancel {
  min-height: 30px;
  border: 1px solid var(--hud-line);
  border-radius: 4px;
  background: transparent;
  padding: 5px 8px;
  color: var(--hud-text);
  font: 600 10px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#replayCancel:hover {
  border-color: var(--hud-alert);
  background: var(--hud-raised);
}

#replayEvents {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  scrollbar-color: #53665a #0b100d;
}

#replayEvents .replay-event {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  border-left: 2px solid var(--hud-focus);
  border-radius: 2px;
  padding: 5px 7px;
  color: var(--hud-text);
  font-size: 11px;
  line-height: 1.35;
}

#replayEvents .replay-event + .replay-event {
  margin-top: 3px;
}

#replayEvents .replay-event time {
  color: var(--hud-muted);
  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

#replayEvents .replay-empty {
  padding: 7px 9px;
  color: var(--hud-muted);
  font-size: 11px;
}

@media (max-width: 760px) {
  #cameraControls {
    top: 8px;
    left: 8px;
    gap: 1px;
    padding: 3px;
  }

  #cameraControls .camera-label {
    padding-inline: 5px;
  }

  #cameraControls button {
    min-width: 0;
    min-height: 30px;
    padding: 5px 6px;
  }

  #replayTimeline {
    left: 8px;
    bottom: 8px;
    width: min(360px, calc(100vw - 16px));
    max-height: min(250px, calc(100% - 16px));
  }

  #replayEvents {
    max-height: 170px;
  }
}