/* Ceniza — site/room/room.css
   Minimal starter room: a floor line, a terminal-window prop, one plant.
   Pure layered CSS, no images, no build step. This is her first redecoration
   target (LORE A1 -- she edits her own room) -- deliberately spare so there's
   obvious room to add to it.

   Consumes the Dark Minimal tokens defined in ../styles.css :root. Load order
   in both HTML pages is styles.css then room.css, but custom-property lookup
   doesn't depend on load order (only on cascade), so this file is safe to
   load either way as long as :root tokens exist somewhere in the document. */

.room {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
}

/* floor line */
.room::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 1px;
  background: var(--border);
  z-index: 1;
}

/* floor shading below the line */
.room::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: var(--surface-hover);
  z-index: 0;
}

/* ---------- terminal-window prop ---------- */

.room-prop-terminal {
  position: absolute;
  left: 7%;
  bottom: 23%;
  width: 26%;
  max-width: 120px;
  aspect-ratio: 4 / 3;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 0 var(--surface);
  z-index: 1;
}

.room-prop-terminal::before {
  /* titlebar */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22%;
  background: var(--surface-active);
  border-bottom: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
}

.room-prop-terminal::after {
  /* three window-control dots */
  content: "";
  position: absolute;
  top: 7%;
  left: 8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 9px 0 0 var(--warning), 18px 0 0 var(--success);
}

.room-prop-terminal .terminal-lines {
  position: absolute;
  top: 32%;
  left: 10%;
  right: 10%;
  display: grid;
  gap: 14%;
}

.room-prop-terminal .terminal-lines span {
  display: block;
  height: 10%;
  background: var(--text-muted);
  border-radius: 1px;
}
.room-prop-terminal .terminal-lines span:nth-child(1) { width: 55%; }
.room-prop-terminal .terminal-lines span:nth-child(2) { width: 80%; background: var(--accent); }
.room-prop-terminal .terminal-lines span:nth-child(3) { width: 40%; }

/* ---------- plant prop ---------- */

.room-prop-plant {
  position: absolute;
  right: 9%;
  bottom: 22%;
  width: 11%;
  max-width: 46px;
  aspect-ratio: 1 / 1.7;
  z-index: 1;
}

.room-prop-plant .pot {
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 32%;
  background: var(--surface-active);
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
}

.room-prop-plant .leaf {
  position: absolute;
  bottom: 26%;
  left: 20%;
  width: 60%;
  height: 55%;
  background: var(--success);
  opacity: 0.55;
  border-radius: 0% 100% 0% 100%;
  transform-origin: bottom center;
}
.room-prop-plant .leaf:nth-child(1) { transform: rotate(-20deg) scaleY(1); }
.room-prop-plant .leaf:nth-child(2) { transform: rotate(4deg) scaleY(1.12); opacity: 0.7; }
.room-prop-plant .leaf:nth-child(3) { transform: rotate(26deg) scaleY(0.92); }