/* Sleep lesson. All rules scoped under .slx-* */
.slx-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slx-sc.slx-full { flex: 1; min-height: 0; justify-content: center; }

/* the bedroom */
.slx-bed { position: relative; width: 100%; max-width: 360px; height: 300px; display: flex; align-items: flex-end; justify-content: center; border-radius: 22px; background: linear-gradient(#3a3350, #251f38); overflow: hidden; transition: background 1.2s; }
.slx-glow { position: absolute; left: -40px; bottom: 30px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(rgba(255, 214, 122, .55), rgba(255, 214, 122, 0) 70%); transition: opacity 1s; }
.slx-bed.dark { background: linear-gradient(#0d1124, #070a16); }
.slx-bed.dark .slx-glow { opacity: 0; }
.slx-lamp { position: absolute; left: 10px; bottom: 74px; width: 60px; height: 90px; padding: 0; border: 0; background: none; }
.slx-lamp:disabled { opacity: 1; }
.slx-lamp svg { width: 100%; height: 100%; display: block; }
.slx-shade { fill: #ffd67a; transition: fill .4s; }
.slx-pole, .slx-foot { fill: #b88a3a; }
.slx-bed.dark .slx-shade { fill: #5a4d33; }
.slx-clock { position: absolute; right: 14px; top: 14px; padding: 5px 10px; border-radius: 10px; background: #0b0f1c; color: #ff6b6b; font: 800 20px var(--mono); letter-spacing: 1px; }
.slx-bed .slx-room { width: 82%; margin: 0 0 14px 40px; }

.slx-room { position: relative; width: 100%; max-width: 260px; }
.slx-room img { width: 100%; height: auto; display: block; transition: filter 1s; }
.slx-bed.dark .slx-room img { filter: brightness(.55) saturate(.7); }
.slx-chip { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line-strong); font: 800 13px var(--sans); color: var(--text); white-space: nowrap; transition: background .3s, border-color .3s; }
.slx-chip:empty { display: none; }
.slx-room[data-lv="1"] .slx-chip { background: rgba(123, 92, 253, .35); border-color: var(--violet-bright); }
.slx-room[data-lv="3"] .slx-chip { background: rgba(70, 120, 255, .35); border-color: #6f9cff; }
.slx-z { position: absolute; left: 22%; top: 8%; font: 800 18px var(--serif); color: #cfd6ff; opacity: 0; }
.slx-z i, .slx-z b { font-style: normal; font-weight: 800; display: inline-block; }
.slx-z i { font-size: 22px; transform: translateY(-8px); } .slx-z b { font-size: 26px; transform: translateY(-18px); }
.slx-bed.asleep .slx-z { animation: slx-z 2.4s ease-in-out infinite; }
@keyframes slx-z { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* the night */
.slx-night .slx-room { max-width: 200px; margin-top: 12px; }
.slx-hotel .slx-room { max-width: 170px; margin-top: 10px; }
.slx-room.dim img { filter: brightness(.8); }
.slx-chart { width: 100%; max-width: 360px; touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; }
.slx-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.slx-row { font: 700 12.5px var(--sans); fill: var(--dim); }
.slx-row.r1 { fill: var(--violet-bright); } .slx-row.r3 { fill: #8fb0ff; }
.slx-hr { font: 600 12px var(--sans); fill: var(--faint); }
.slx-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; opacity: .75; }
.slx-bar.rem { fill: var(--violet-bright); }
.slx-bar.deep { fill: #4f7cff; }
.slx-moon circle { fill: #ffe39a; }
.slx-moon .slx-bite { fill: #1a1f35; }
.slx-chart.slx-showdeep .slx-bar.deep { fill: #8fb0ff; filter: drop-shadow(0 0 5px rgba(120, 160, 255, .9)); }
.slx-q .slx-moon, .slx-hotel .slx-moon { display: none; }
.slx-cuttext { font: 800 13px var(--sans); fill: var(--text); opacity: 0; transition: opacity .8s; }
.slx-chart.slx-cutoff .slx-cuttext { opacity: 1; }
.slx-cut { fill: rgba(10, 12, 24, .8); stroke: var(--line-strong); stroke-dasharray: 4 4; opacity: 0; transition: opacity .8s; }
.slx-chart.slx-cutoff .slx-cut { opacity: 1; }

/* the halves */
.slx-cw { position: relative; width: 100%; max-width: 360px; }
.slx-half { position: absolute; top: -6px; height: 152px; border-radius: 12px; border: 2px dashed var(--line-strong); background: rgba(255, 255, 255, .03); padding: 0; display: flex; align-items: flex-start; justify-content: center; }
.slx-half span { margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--raised); font: 800 13px var(--sans); color: var(--text); }
.slx-half.h0 { left: 18.2%; width: 39.5%; }
.slx-half.h1 { left: 58.3%; width: 39%; }
.slx-half:disabled { opacity: 1; }
.slx-half.right { border: 2px solid var(--mint); background: rgba(63, 214, 154, .1); }
.slx-half.wrong { border: 2px solid var(--red); background: rgba(216, 85, 85, .08); }

/* animals */
.slx-zoo { flex-direction: row; justify-content: center; align-items: stretch; gap: 8px; }
.slx-an { margin: 0; flex: 1 1 0; max-width: 118px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); text-align: center; transition: border-color .4s, box-shadow .4s; }
.slx-an img { width: 100%; height: 92px; object-fit: contain; }
.slx-an figcaption { display: flex; flex-direction: column; gap: 3px; }
.slx-an b { font: 800 13px var(--sans); color: var(--text); line-height: 1.15; }
.slx-an span { font: 600 12px var(--sans); color: var(--dim); line-height: 1.2; }
.slx-an.half { border-color: var(--violet-bright); box-shadow: 0 0 18px rgba(123, 92, 253, .45); }
.slx-an.half img { -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, .35) 50%); mask-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, .35) 50%); }

/* the hotel */
.slx-hotel { flex-direction: row; justify-content: center; align-items: center; gap: 14px; }
.slx-brain { position: relative; width: 120px; flex: 0 0 auto; padding-top: 22px; }
.slx-brain svg { width: 100%; display: block; }
.slx-tag { position: absolute; top: 0; font: 800 12px var(--sans); opacity: 0; transition: opacity .8s; }
.slx-tag.l { left: 0; color: var(--gold); } .slx-tag.r { right: 0; color: var(--dim); }
.slx-brain.on .slx-tag { opacity: 1; }
.slx-hemi { fill: #f2a6b8; stroke: #c9768c; stroke-width: 2.5; transition: fill .8s, filter .8s, opacity .8s; }
.slx-gyri { fill: none; stroke: #c9768c; stroke-width: 2; stroke-linecap: round; }
.slx-brain.on .slx-hemi.l { fill: #ffd67a; filter: drop-shadow(0 0 10px rgba(255, 214, 122, .8)); }
.slx-brain.on .slx-hemi.r { fill: #6b5aa8; opacity: .7; }

/* the chart key */
.slx-key { font: 600 12.5px var(--sans); color: var(--dim); text-align: center; max-width: 340px; }
.slx-key b { color: var(--violet-bright); } .slx-key i { font-style: normal; color: var(--text); }

/* the rats */
.slx-rats { flex-direction: row; justify-content: center; align-items: stretch; gap: 10px; }
.slx-rat { margin: 0; flex: 1 1 0; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); text-align: center; transition: border-color .5s; }
.slx-rat img { width: 100%; height: 96px; object-fit: contain; transition: filter .8s; }
.slx-rat b { display: block; font: 800 13px var(--sans); color: var(--text); line-height: 1.2; }
.slx-fate { display: block; margin-top: 4px; font: 800 14px var(--sans); }
.slx-rat.gone img { filter: grayscale(1) brightness(.5); }
.slx-rat.gone .slx-fate { color: var(--dim); }
.slx-rat.ok { border-color: var(--mint); }
.slx-rat.ok .slx-fate { color: var(--mint); }

@media (max-height: 700px) {
  .slx-bed { height: 250px; }
  .slx-night .slx-room { max-width: 150px; }
  .slx-hotel .slx-room { max-width: 140px; }
  .slx-an img { height: 66px; }
}
.slx-room[data-lv="3"] img { filter: brightness(.6) saturate(.8); }
.slx-room[data-lv="1"] img { filter: drop-shadow(0 0 14px rgba(150, 120, 255, .8)); }