:root {
  --black: #222;
  --gray: #999;
  --light-gray: #ddd;
  --blue: #3b82c4;
  --pink: #c84787;
}

.settings-toggle { flex-shrink: 0; padding: 8px 12px; border: 0; background: white; color: #333; font-size: 23px; cursor: pointer; }
#settingsPanel { position: fixed; right: 0; top: 72px; bottom: 88px; z-index: 20; width: min(280px, 100vw); padding: 20px; overflow-y: auto; background: white; border-left: 1px solid #ccc; box-shadow: -4px 0 16px #0000000a; }
#settingsPanel[hidden] { display: none; }
.settings-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.settings-heading h2 { font: 18px Arial, sans-serif; margin: 0; }
.settings-heading button { border: 0; background: white; font-size: 26px; cursor: pointer; }
#settingsActions { display: grid; gap: 10px; }
#settingsActions .classic-tool { width: 100%; height: 42px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 8px 12px; border: 1px solid #ddd; color: #333; }
#settingsActions .classic-tool small { font: 14px Arial, sans-serif; color: #333; }
.rider-setting { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; font-size: 14px; }
.rider-setting select { min-width: 70px; padding: 7px; background: white; border: 1px solid #ccc; }
.spawn-controls { display: grid; gap: 12px; margin-top: 22px; }
.spawn-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spawn-row span { font-size: 12px; line-height: 1.6; white-space: pre-line; }
.spawn-row button { padding: 7px 9px; border: 1px solid #ccc; background: white; cursor: pointer; }
.spawn-help { font-size: 12px; line-height: 1.5; color: #777; }

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  color: var(--black);
  background: white;
  font-family: Arial, sans-serif;
  user-select: none;
}

button,
input {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 88px;
  width: 100%;
  height: 100%;
}

.classicbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  overflow-x: auto;
  background: white;
  border-bottom: 1px solid #eee;
}

.classic-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.drawing-options { padding: 2px 6px; margin: 0 6px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: #f8f8f8; }
.drawing-options[hidden] { display: none; }
.drawing-options .classic-tool { height: 44px; background: transparent; }
.drawing-options .classic-tool > span { font-size: 20px; }
#eraserOutline { position: absolute; width: 22px; height: 22px; border: 1px solid #333; border-radius: 50%; box-shadow: 0 0 0 1px white; transform: translate(-50%, -50%); pointer-events: none; }
#eraserOutline[hidden] { display: none; }
.dock-buttons button.speed-held { background: #e4efff; color: #3888ff; }
.dock-buttons button[data-speed-hold] { touch-action: none; user-select: none; }

.classic-separator {
  width: 1px;
  height: 34px;
  margin: 0 4px;
  background: var(--light-gray);
}

.classic-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 52px;
  padding: 3px 2px;
  color: var(--gray);
  background: white;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}

.classic-tool:hover {
  background: #fafafa;
  border-color: #cfcfcf;
}

.classic-tool.active {
  color: #111;
  background: white;
  border-color: #bdbdbd;
}

.classic-tool > span {
  font: 24px/1 Georgia, serif;
}

.classic-tool small {
  color: var(--gray);
  font: 9px/1 Arial, sans-serif;
}

.classic-tool.active small {
  color: #111;
}

.regular-pencil {
  color: var(--black);
}

.boost-pencil {
  color: var(--blue);
}

.bounce-pencil {
  color: var(--pink);
}

.play-button,
.play-button.playing {
  color: #777;
  background: white;
}

.play-button.playing {
  color: #111;
}

.classic-readout {
  position: absolute;
  right: 14px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray);
  font-size: 10px;
}

.classic-readout b {
  color: #666;
  font: 10px monospace;
}

.time-slider {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  margin: 0;
  accent-color: #555;
  cursor: pointer;
}

.classic-workspace {
  position: relative;
  min-height: 0;
}

.stage-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: white;
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.stage-meta {
  position: absolute;
  right: 17px;
  bottom: 7px;
  left: 17px;
  display: flex;
  justify-content: space-between;
  color: #aaa;
  font-size: 9px;
  letter-spacing: 1px;
  pointer-events: none;
}

.hidden,
.hidden-controls {
  display: none !important;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 5;
  padding: 8px 12px;
  color: white;
  background: var(--black);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: 150ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 850px) {
  .classicbar {
    justify-content: flex-start;
  }

  .classic-tool {
    flex: 0 0 39px;
  }

  .classic-separator {
    flex: 0 0 1px;
  }

  .classic-readout {
    display: none;
  }
}

.playback-dock { padding: 10px 24px 6px; background: white; }
.timeline-track { position: relative; }
.winter-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 14px; cursor: pointer; }
.winter-setting input { width: 18px; height: 18px; accent-color: #326c53; }
.winter-mode .classicbar { border-bottom: 2px solid #326c53; }
.winter-mode .playback-dock { border-top: 2px solid #326c53; }
.winter-mode .dock-buttons button.playing { color: #a73535; background: #f8e7e5; }
.winter-mode .playback-dock .time-slider { accent-color: #a73535; }
.winter-mode .classic-tool.active { border-color: #326c53; background: #edf5ef; }
.playback-dock .time-slider { position: static; display: block; width: 100%; height: 16px; accent-color: #222; }
.timeline-labels { display: flex; justify-content: space-between; color: #888; font: 11px Arial, sans-serif; }
.dock-buttons { display: flex; justify-content: center; gap: 6px; margin-top: -9px; }
.dock-buttons button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #222; font: bold 15px Arial, sans-serif; cursor: pointer; }
.dock-buttons button:hover { background: #f0f0f0; }
.dock-buttons button.playing { color: #3888ff; background: #e4efff; }
.dock-buttons button:focus-visible { outline: 2px solid #3888ff; }
.toast { bottom: 100px; }
.intro-screen { position: fixed; inset: 0; z-index: 10000; background: white; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 300ms; }
.intro-screen svg { width: min(850px, 90vw); height: auto; overflow: visible; }
.intro-screen path { fill: none; stroke: #222; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.intro-screen button { margin-top: 45px; padding: 12px 26px; background: white; color: #222; border: 1px solid #ccc; font: 15px Arial, sans-serif; cursor: pointer; opacity: 0; transition: opacity 400ms; }
.intro-screen button:disabled { visibility: hidden; }
.intro-screen button.ready { opacity: 1; }
.intro-screen button:hover { border-color: #222; }
@media (max-width: 500px) { .playback-dock { padding-right: 12px; padding-left: 12px; } .dock-buttons { margin-top: 2px; } }