/* Escape Room theme */
.er-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; background: #121318; color: #E8EAF0; border-radius: var(--radius-lg); padding: 18px 20px; }
.er-doors { display: flex; gap: 8px; align-items: flex-end; }
.er-door { width: 44px; height: 64px; border-radius: 8px 8px 2px 2px; background: #2A2E37; position: relative; display: grid; place-items: end center; padding-bottom: 6px; font: 700 12px var(--font-body); color: #9AA0AE; box-shadow: inset 0 0 0 2px #3A3F4B; }
.er-door::after { content: ""; position: absolute; right: 8px; top: 34px; width: 5px; height: 5px; border-radius: 50%; background: #9AA0AE; }
.er-door.now { box-shadow: inset 0 0 0 2px var(--strand); color: #fff; }
.er-door.open { background: var(--strand); color: var(--strand-ink); box-shadow: none; }
.er-door.open::after { display: none; }
.er-timer { font: 700 clamp(26px, 4vw, 36px) 'SF Mono', 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.er-timer.low { color: #FF6B6B; }
.er-story { margin: 16px 0 0; color: var(--muted); font-size: 16px; max-width: 64ch; }
.lock { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.lock svg { width: 54px; height: 64px; flex-shrink: 0; color: var(--fg); }
.lock .digits { display: flex; gap: 6px; }
.lock .digits span { width: 44px; height: 54px; border-radius: 10px; background: var(--sunken); display: grid; place-items: center; font: 700 26px 'SF Mono', 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); }
.lock .digits span.on { background: var(--strand); color: var(--strand-ink); }
.lock .lock-name { font: 800 20px var(--font-display); letter-spacing: -0.01em; }
.lock .lock-name small { display: block; font: 600 14px var(--font-body); color: var(--muted); }
.room { display: grid; gap: 12px; margin-top: 16px; }
.room-q { background: var(--surface); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 4px 0 0 var(--sunken); }
.room-q.right { box-shadow: inset 4px 0 0 var(--good); }
.room-q.wrong { box-shadow: inset 4px 0 0 var(--bad); }
.room-q .q-text { font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; }
.room-q .tag { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; }
.room-q .note { font-size: 15px; padding: 10px 14px; border-radius: 10px; background: var(--bad-bg); }
.room-q .note.ok { background: var(--good-bg); }
.room-q .note .working { color: var(--muted); margin-top: 4px; }
.er-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.er-msg { font-weight: 600; }
.end { text-align: center; padding: 24px 18px; background: var(--surface); border-radius: var(--radius-lg); margin-top: 16px; }
.end .big { font: 800 clamp(34px, 6vw, 52px) var(--font-display); letter-spacing: -0.03em; margin: 0 0 6px; }
@media (max-width: 480px) { .er-door { width: 34px; height: 52px; } .er-door::after { top: 26px; right: 6px; } }