.portrait-painting .paint-tray {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100svh - 200px);
  overflow: auto;
}
.dream-paint-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.dream-paint-tools button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 6px;
  border: 1px solid #efe3bc55;
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dream-paint-tools button[aria-pressed="true"] {
  background: #f1c55b33;
  border-color: #f1c55b;
}
.dream-paint-tools img { width: 36px; height: 32px; object-fit: contain; }
.portrait-painting .colors { flex-wrap: wrap; }
#eclipse-game {
  position: absolute;
  z-index: 14;
  top: 110px;
  right: 24px;
  width: min(300px, calc(100vw - 40px));
  padding: 22px;
  border-radius: 14px;
  color: var(--cream);
}
#eclipse-game h2 { margin: 0 30px 12px 0; font-size: 24px; }
#eclipse-game p { font-size: 14px; line-height: 1.5; }
#eclipse-game button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  color: inherit;
  border: 1px solid #f2dca77a;
  border-radius: 8px;
  background: #30483a;
  cursor: pointer;
}
#eclipse-game button:disabled { opacity: 0.6; cursor: default; }
#eclipse-game .eclipse-close { position: absolute; top: 8px; right: 8px; padding: 4px; }
.eclipse-lights { display: flex; gap: 12px; margin: 16px 0; }
#eclipse-game .eclipse-lights button { flex: 1; border-radius: 50%; }
#eclipse-game .eclipse-lights .lit { opacity: 1; background: #ffe07a; color: #29392b; box-shadow: 0 0 22px #ffde74; }
@media (max-width: 650px) {
  #eclipse-game { top: auto; bottom: 110px; right: 20px; padding: 16px; }
}