/* ============================================================
   The 11pm Room — text adventure
   ============================================================ */

body.room-page { background: linear-gradient(180deg, #0A0A0E 0%, #0E0E14 100%); }

.room { max-width: 720px; margin: 0 auto; padding: 160px 24px 100px; }

.room-clock { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 50px; }
.room-clock-dot { width: 6px; height: 6px; border-radius: 50%; background: #4DA3FF; box-shadow: 0 0 12px rgba(77,163,255,0.5); animation: room-pulse 3s ease-in-out infinite; }
@keyframes room-pulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.3); }
}

.room-stage { font-family: var(--font-serif); font-style: italic; }
.room-line { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.5; color: #EDE8DC; margin: 0 0 28px; opacity: 0; transform: translateY(8px); transition: opacity 800ms cubic-bezier(0.22,0.61,0.36,1), transform 800ms cubic-bezier(0.22,0.61,0.36,1); text-wrap: pretty; }
.room-line.in { opacity: 1; transform: translateY(0); }

.room-choices { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-1); display: flex; flex-direction: column; gap: 12px; }
.room-choice { display: block; width: 100%; text-align: left; padding: 18px 24px; background: transparent; color: var(--ink-1); font: inherit; font-style: normal; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; border: 1px solid var(--line-1); border-radius: 12px; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 600ms cubic-bezier(0.22,0.61,0.36,1), transform 600ms cubic-bezier(0.22,0.61,0.36,1), border-color 200ms ease, background 200ms ease, color 200ms ease; }
.room-choice.in { opacity: 1; transform: translateY(0); }
.room-choice:hover { border-color: rgba(77,163,255,0.4); background: rgba(77,163,255,0.04); color: #4DA3FF; }

.room-restart { margin-top: 80px; text-align: center; }
.room-restart button { padding: 14px 28px; background: transparent; color: var(--ink-2); border: 1px solid var(--line-1); border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; transition: color 200ms ease, border-color 200ms ease; }
.room-restart button:hover { color: var(--ink-1); border-color: var(--line-3); }