/* Chapter 2: Pippi's bedroom at night. Close-ups: the torch, the shadow, Annika's spy card, the night sky,
   Morse code with the torch, and the balance scale. */
.dialog.who-karlsson,.dialog.who-bloom{border-left-color:#9aa3c7} .dialog.who-karlsson .who,.dialog.who-bloom .who{color:#b9c1e6}

/* the torch: two batteries that turn round */
.torch-body{display:flex;align-items:center;max-width:520px;margin:6px auto 0;background:#2f5f9a;border-radius:12px;padding:12px;gap:8px}
.tb-end{width:16px;height:60px;border-radius:6px;background:#1f3f6a}
.batt{flex:1;height:60px;border-radius:8px;border:0;background:linear-gradient(#3cb35a,#23803b);color:#fff;font-family:var(--f-mono);font-size:24px;font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 14px;position:relative}
.batt::after{content:"";position:absolute;top:50%;width:8px;height:22px;margin-top:-11px;background:#cfd4d8;border-radius:2px}
.batt.r::after{right:-8px} .batt.l::after{left:-8px}
.batt.l{flex-direction:row-reverse}
.batt:hover{filter:brightness(1.1)}
.tb-bulb{width:64px;height:84px;border-radius:12px 40px 40px 12px;background:#9aa0a6;box-shadow:inset 0 0 0 10px #7a8086}
.tb-bulb.on{background:#fff3c4;box-shadow:0 0 40px 14px rgba(255,243,196,.7)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* the shadow on the curtain */
.shadow-svg{width:100%;height:auto;display:block;border-radius:6px}
.sh-l{display:block;margin-top:10px;font-size:14px}
#sh-d{width:100%;accent-color:var(--amber)}
.sh-read{font-family:var(--f-mono);font-size:14px;color:var(--muted)} .sh-read b{color:var(--paper)}

/* Annika's spy card */
.spycard{background:#fffaf0;color:#1f2a44;border-radius:6px;padding:14px 16px;font-size:14px;line-height:1.4;box-shadow:0 10px 20px -8px #000}
.spycard p{margin:0 0 10px}
.morse-tab{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:4px 10px;font-family:var(--f-mono);font-size:15px;border-top:2px dashed #c4302b;padding-top:10px}
.morse-tab b{display:inline-block;width:1.2em;color:#c4302b}

/* the night sky */
.sky-svg{width:100%;height:auto;display:block;border-radius:6px}
.sky-svg .star{cursor:pointer}
.sky-svg .star:hover circle+circle,.sky-svg .star:focus circle+circle{fill:var(--amber)}
.sky-svg .star:focus{outline:none}

/* Morse with the torch */
.m-seq{font-family:var(--f-mono);font-size:30px;letter-spacing:.2em;text-align:center;background:#070b24;color:#fff3c4;border-radius:6px;padding:10px;min-height:1.6em;word-break:break-all}
.m-keys .btn{padding:10px 12px}
.m-reply{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
.m-reply>div:nth-child(2){flex:1 1 240px}
.ta-lamp{width:64px;height:64px;border-radius:8px;background:#2a2a3a;border:4px solid #1a1a28;flex:0 0 auto;transition:background .05s}
.ta-lamp.on{background:#fff3c4;box-shadow:0 0 30px 8px rgba(255,243,196,.6)}
.m-code{font-family:var(--f-mono);font-size:26px;color:#fff3c4;margin:6px 0;word-break:break-word}
.m-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;margin-top:6px}
.m-form input{font-family:var(--f-mono);font-size:18px;text-transform:uppercase;padding:8px 10px;border-radius:4px;border:1px solid var(--line);background:var(--ink);color:var(--paper);flex:1 1 140px;min-width:0}

/* the balance scale */
.scale-svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;background:#1c2340;border-radius:6px}
#sc-beam,#sc-l,#sc-r{transition:transform .3s}
.stones{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.stone{font-family:var(--f-mono);font-size:15px;font-weight:600;padding:12px 14px;border-radius:40% 50% 45% 55%;border:2px solid #5a6068;background:#8a8f96;color:#1a1a1a}
.stone.on{border-color:var(--amber);background:#b0b5bb;box-shadow:0 0 0 3px rgba(255,138,61,.35)}

/* the scene: Pippi snores */
@keyframes zz{0%{opacity:0;transform:translateY(6px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-14px)}}
#br-zzz .zz{animation:zz 3s ease-in-out infinite}
#br-zzz .zz.b{animation-delay:-1s}

/* ---------- the bedroom at night (all stopped by the Motion setting: see css/animations.css) ---------- */
@keyframes tw{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes glow{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes shoot{0%,88%{transform:translate(0,0);opacity:0}89%{opacity:1}95%{transform:translate(-160px,70px);opacity:0}100%{transform:translate(-160px,70px);opacity:0}}
@keyframes sneak{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
@keyframes lglow{0%,100%{opacity:.75;transform:scale(1)}40%{opacity:1;transform:scale(1.08)}70%{opacity:.85;transform:scale(.96)}}
@keyframes fiddle{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}
@keyframes dangle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes tablink{0%,49%{fill:#fff3c4}50%,100%{fill:#4a4a5a}}
#br-window .tw{animation:tw 3s ease-in-out infinite}
#br-window .glow{animation:glow 5s ease-in-out infinite}
.shoot{animation:shoot 17s linear infinite;opacity:0}
#br-thieves.sneak{animation:sneak 7s ease-in-out infinite}
.lglow{transform-box:fill-box;transform-origin:50% 50%;animation:lglow 1.3s ease-in-out infinite}
#br-doorthief.fiddle{animation:fiddle .25s linear infinite}
.breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite}
.breathe.slow{animation-duration:2.6s}
.dangle{transform-box:fill-box;transform-origin:50% 0;animation:dangle 1.4s ease-in-out infinite}
.dangle.b{animation-delay:-.7s}
#br-talight.flashing{animation:tablink .9s steps(1,end) infinite}