.room-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.room-light-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  box-shadow: 0 8px 22px rgba(31, 39, 37, 0.08);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.room-light-toggle:hover,
.room-light-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  color: var(--accent-strong);
  outline: none;
}

.room-light-toggle i {
  color: var(--accent);
  font-size: 17px;
}

body,
.room-header,
.bedroom-header,
.room-layout,
.room-scene,
.furniture-card,
.room-object,
.room-life-panel,
.room-scene-card,
.room-secret-sets {
  transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

/* The basement keeps a dark identity while using clearly separated surfaces. */
body[data-room-id="basement"] {
  --bg: #17121c;
  --surface: rgba(46, 35, 54, 0.97);
  --surface-solid: #30243a;
  --ink: #fff8fc;
  --ink-soft: #ead9e5;
  --muted: #c9afc0;
  --accent: #f0a8ce;
  --accent-strong: #ffd9eb;
  --accent-soft: #57394d;
  --accent-wash: rgba(203, 100, 158, 0.24);
  --line: rgba(255, 220, 239, 0.2);
  --line-strong: rgba(255, 220, 239, 0.42);
  color-scheme: dark;
  background:
    radial-gradient(circle at 82% 10%, rgba(159, 71, 126, 0.28), transparent 30%),
    radial-gradient(circle at 12% 3%, rgba(87, 72, 121, 0.24), transparent 28%),
    linear-gradient(150deg, #151019 0%, #211626 54%, #18121d 100%);
}

body[data-room-id="basement"] .room-layout {
  border-color: rgba(255, 220, 239, 0.2);
  background:
    linear-gradient(rgba(105, 63, 91, 0.12), rgba(105, 63, 91, 0.12)),
    repeating-linear-gradient(90deg, rgba(255, 224, 240, 0.045) 0 1px, transparent 1px 72px),
    #211925;
}

body[data-room-id="basement"] :is(
  .room-atmosphere,
  .room-note,
  .room-switcher > button,
  .placement-list span,
  .inventory-status,
  .inventory-item,
  .inventory-heading button,
  .room-life-heading button
) {
  color: var(--ink-soft);
  border-color: var(--line);
  background: rgba(57, 43, 65, 0.92);
}

body[data-room-id="basement"] .furniture-card {
  background: linear-gradient(145deg, #34273d, #2c2234);
  box-shadow: 0 15px 34px rgba(4, 2, 7, 0.3);
}

/* Lights off is an atmosphere, not a loss of legibility. */
body[data-room-light="off"] {
  --bg: #161c1d;
  --surface: rgba(33, 41, 43, 0.96);
  --surface-solid: #252f31;
  --ink: #f4f7f5;
  --ink-soft: #cbd5d1;
  --muted: #9dada7;
  --accent: #acd7cb;
  --accent-strong: #e0f4ee;
  --accent-soft: #344843;
  --accent-wash: rgba(98, 153, 139, 0.2);
  --line: rgba(218, 237, 231, 0.15);
  --line-strong: rgba(218, 237, 231, 0.32);
  color-scheme: dark;
  background:
    radial-gradient(circle at 86% 7%, rgba(88, 122, 139, 0.2), transparent 30%),
    linear-gradient(150deg, #131819 0%, #1c2426 55%, #13191a 100%);
}

body[data-room-light="off"][data-room-id="basement"] {
  --surface: rgba(31, 24, 37, 0.97);
  --surface-solid: #251c2b;
  --ink: #fff8fc;
  --ink-soft: #e6d4e0;
  --muted: #bca6b5;
  --accent: #e9a0c7;
  --accent-strong: #ffd9eb;
  --accent-soft: #4b3042;
  background:
    radial-gradient(circle at 82% 8%, rgba(135, 57, 105, 0.2), transparent 29%),
    linear-gradient(150deg, #0f0b12 0%, #19111d 56%, #100b13 100%);
}

body[data-room-light="off"] :is(.room-header, .bedroom-header) {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

body[data-room-light="off"] :is(
  .room-atmosphere,
  .night-status,
  .room-note,
  .room-switcher > button,
  .placement-list span,
  .inventory-status,
  .inventory-item,
  .inventory-heading button,
  .room-life-heading button
) {
  color: var(--ink-soft);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
}

body[data-room-light="off"] :is(.room-layout, .bedroom-layout) {
  border-color: var(--line);
}

body[data-room-light="off"] .room-scene {
  background:
    linear-gradient(rgba(10, 15, 20, 0.3), rgba(10, 15, 20, 0.3)),
    repeating-linear-gradient(90deg, rgba(205, 220, 223, 0.035) 0 1px, transparent 1px 68px),
    linear-gradient(180deg, #273038 0 40%, #242526 40% 100%);
}

body[data-room-light="off"] .sea-window {
  filter: brightness(0.64) saturate(0.82);
}

body[data-room-light="off"] :is(.room-object, .furniture-card, .inventory-shortcut) {
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-solid) 90%, var(--accent-soft));
}

body[data-room-light="off"] .room-light-toggle {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

body[data-room-light="off"] :is(.state-dot, .auth-dot) {
  background: #8ca9a0;
  box-shadow: 0 0 0 4px rgba(140, 169, 160, 0.1);
}

@media (max-width: 720px) {
  .room-header-actions {
    gap: 7px;
  }

  .room-light-toggle {
    width: 36px;
    justify-content: center;
    padding: 7px;
  }

  .room-light-toggle span {
    display: none;
  }

  .room-header-actions :is(.room-state, .room-auth) > span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-light-toggle,
  body,
  .room-header,
  .bedroom-header,
  .room-layout,
  .room-scene,
  .furniture-card,
  .room-object,
  .room-life-panel,
  .room-scene-card,
  .room-secret-sets {
    transition: none;
  }
}