body { margin:0; overflow:hidden; background:#000; }
body.exit * { display:none; }
body, button, label { font: 1rem sans-serif; }
body.window-inactive canvas {
  outline: 5px solid red;
  outline-offset: -5px; /* Pulls the outline inside the viewport edge */
}
#scene { position:fixed; inset:0; width:100%; height:100%; touch-action:none; }
#hud {
  position:fixed; z-index: 99; right:12px; bottom:12px;
  padding:8px 10px; border-radius:10px;
  background:rgba(0,0,0,0.55); color:#d6d6d6;
  font:12px/1.35 system-ui, -apple-system, sans-serif;
  user-select:none; pointer-events:none; white-space:pre;
  text-align:right;
}

#tools-container {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
}

#tools {
  position: relative;
}

#tools .ctl {
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:2px 25px; margin: 3px 0;
}

#tool-settings .tool-group {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 10px;
}

#tool-settings .tool-group.active {
  display: flex;
}

#tool-settings .ctl {
  display: flex; align-items: center; gap: 6px; padding: 0; margin: 0;
}

input[type="range"] { width:110px; max-width:40vw; }
input[type="text"], input[type="number"] { background:var(--face); color:var(--text); width:110px; max-width:40vw; border: 1px inset var(--etch); padding: 3px 8px; }
input[readonly] { color:var(--disabledText); }

/* --- Lemming Event Effects --- */
.event-effect-container {
  position: fixed;
  pointer-events: none;
  z-index: 98;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
}

.event-text {
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.3;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
  animation: eventFloatUp 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.event-text.true_love    { color: #ff88ff; }
.event-text.rejection    { color: #dddddd; }
.event-text.birth        { color: #ffffaa; }
.event-text.death        { color: #888888; }
.event-text.party_pooper { color: #aaaaaa; }

.event-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
  animation: eventExplode 1.5s ease-out forwards;
  z-index: 1;
}

@keyframes eventFloatUp {
  0% { transform: scale(0.5) translateY(0); opacity: 0; }
  10% { transform: scale(1.2) translateY(-20px); opacity: 1; }
  20% { transform: scale(1.0) translateY(-30px); opacity: 1; }
  80% { transform: scale(1.0) translateY(-60px); opacity: 1; }
  100% { transform: scale(1.0) translateY(-80px); opacity: 0; }
}

@keyframes eventExplode {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5); opacity: 0; }
}

dialog {
  position: relative;
}

dialog .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
dialog .row:first-child {
  margin-top: 10px;
}

dialog fieldset .controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  flex-direction: column;
  margin-top:10px;
}

dialog .row label + label {
  margin: 0;
}

dialog .row label.radio {
  margin: 0;
  padding: 0;
  font-size: 80%;
}