* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-dark: #1a1a2e;
  --bg-panel: #16213e;
  --bg-panel-hover: #1a2744;
  --accent: #e94560;
  --accent-glow: #ff6b81;
  --accent-green: #0ead69;
  --accent-yellow: #ffc947;
  --text: #e8e8e8;
  --text-dim: #8899aa;
  --canvas-bg: #f0ebe3;
  --grid-line: #c8d6e5;
  --border: #2a3a5e;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--bg-dark);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* TOOLBAR */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 12px;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--border);
  gap: 10px;
  flex-shrink: 0;
  z-index: 10;
}

.toolbar-left, .toolbar-center, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-title {
  font-family: 'Anybody', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.tb-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.15s;
}

.tb-btn:hover {
  background: var(--bg-panel-hover);
  border-color: var(--accent);
}

.play-btn {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
  font-weight: 700;
  animation: pulse-glow 2s ease-in-out infinite;
}

.play-btn:hover {
  background: #12c476;
}

.play-btn.running {
  background: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: #222;
  animation: none;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(14,173,105,0.3); }
  50% { box-shadow: 0 0 16px rgba(14,173,105,0.7); }
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.speed-control input[type="range"] {
  width: 70px;
  accent-color: var(--accent);
}

.snap-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
}

.snap-toggle input { accent-color: var(--accent); }

/* MAIN CONTENT */
#main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* PALETTE */
#palette {
  width: 190px;
  background: var(--bg-panel);
  border-right: 2px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
  padding-bottom: 20px;
}

#palette::-webkit-scrollbar { width: 6px; }
#palette::-webkit-scrollbar-track { background: var(--bg-dark); }
#palette::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.palette-section {
  padding: 8px;
}

.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.15s;
  font-size: 12px;
  user-select: none;
}

.palette-item:hover {
  background: var(--bg-panel-hover);
  transform: translateX(2px);
}

.palette-item:active {
  cursor: grabbing;
}

.item-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ball-icon { border-radius: 50%; }
.ball-icon.small { width: 14px; height: 14px; background: #e94560; }
.ball-icon.medium { width: 20px; height: 20px; background: #ff6b35; }
.ball-icon.large { width: 26px; height: 26px; background: #ff8c42; }
.box-icon { background: #c49a6c; border: 2px solid #a07d55; }
.domino-icon { width: 10px; height: 24px; background: #f5f0e8; border: 2px solid #333; border-radius: 2px; }
.plank-icon { width: 30px; height: 8px; background: #b08350; border-radius: 2px; }
.ramp-icon { 
  width: 0; height: 0; 
  border-left: 28px solid #8B7355; 
  border-top: 20px solid transparent;
  border-radius: 0;
  background: none;
}
.seesaw-icon { width: 28px; height: 6px; background: #9B8B74; border-radius: 2px; transform: rotate(-10deg); }
.spring-icon { width: 14px; height: 24px; background: repeating-linear-gradient(0deg, #0ead69 0px, #0ead69 3px, transparent 3px, transparent 5px); }
.fan-icon { width: 22px; height: 22px; background: #4ECDC4; border-radius: 50%; border: 2px solid #2d8a85; }
.conveyor-icon { width: 30px; height: 10px; background: #666; border-radius: 5px; border: 2px solid #888; }
.bucket-icon { 
  width: 22px; height: 18px; 
  background: #8B7355;
  border-radius: 0 0 4px 4px;
  border: 2px solid #6b5a42;
  border-top: none;
}
.balloon-icon { width: 18px; height: 22px; background: #ff6b6b; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.pins-icon { width: 10px; height: 24px; background: #f5f0e8; border-radius: 50% 50% 10% 10%; border: 1px solid #ccc; }
.bell-icon { width: 20px; height: 20px; background: #ffc947; border-radius: 50% 50% 0 0; border: 2px solid #daa520; }

.example-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--accent-yellow);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  transition: all 0.15s;
}

.example-btn:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-panel-hover);
}

/* CANVAS */
#canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg);
}

#canvas {
  display: block;
  cursor: crosshair;
}

/* PROPERTIES PANEL */
#properties {
  width: 180px;
  background: var(--bg-panel);
  border-left: 2px solid var(--border);
  flex-shrink: 0;
  overflow-y: auto;
}

#properties.hidden {
  display: none;
}

.props-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}

.props-header button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
}

.props-body {
  padding: 10px;
}

.prop-row {
  margin-bottom: 10px;
}

.prop-row label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 3px;
}

.prop-row input[type="number"],
.prop-row select {
  width: 100%;
  padding: 5px 8px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
}

.prop-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.prop-row input[type="checkbox"] {
  accent-color: var(--accent);
}

.danger-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* STATUS BAR */
#statusbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-panel);
  border-top: 2px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.remix-link {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
}

.remix-link:hover {
  text-decoration: underline;
}

/* MODALS */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal.hidden { display: none; }

.modal-content {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  min-width: 320px;
  max-width: 400px;
}

.modal-content h3 {
  margin-bottom: 12px;
  font-family: 'Anybody', sans-serif;
}

.modal-content input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-family: inherit;
  margin-bottom: 12px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.save-slot, .load-slot {
  padding: 8px;
  margin: 4px 0;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.save-slot:hover, .load-slot:hover {
  border-color: var(--accent);
}

/* CONFETTI */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 200;
  animation: confetti-fall 2s ease-out forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Toast messages */
#toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel);
  border: 2px solid var(--accent-yellow);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  z-index: 150;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  text-align: center;
  max-width: 400px;
}

#toast.visible {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  #palette { width: 140px; }
  .palette-item span { font-size: 10px; }
  #properties { width: 150px; }
  .app-title { font-size: 14px; }
  .speed-control { display: none; }
}

@media (max-width: 540px) {
  #palette { width: 48px; overflow-x: hidden; }
  .palette-item span { display: none; }
  .section-title { font-size: 9px; writing-mode: vertical-lr; }
  #properties { display: none !important; }
  .toolbar-right { display: none; }
}