/* LaiFu's dreams and Alex's little radio: shared room palette, crisp pixels. */
.dreaming-laifu{position:relative;min-height:62px;display:flex;align-items:center;gap:12px;margin:-6px 0 17px;padding:9px 13px;border:1px solid #49324f;background:#1a1225}
.dreaming-laifu-cat{display:grid;place-items:center;flex:0 0 43px;animation:laifu-dream-breath 4s steps(2,end) infinite}
.dreaming-laifu-cat .pixel-icon{width:43px;height:43px}
.dream-sleep{position:absolute;left:51px;top:8px;display:flex;gap:2px;color:#ab91bd;font-size:9px;pointer-events:none}
.dream-sleep span:first-child{position:relative;top:-4px;font-size:7px}.dream-sleep span:last-child{position:relative;top:-8px;font-size:5px}
.dream-kept{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:6px;flex:1;min-width:0}
.dream-kept i{display:grid;place-items:center;opacity:.2;filter:saturate(.25);transition:opacity .25s}
.dream-kept .pixel-icon{width:min(100%,23px);height:23px}
.dream-kept i.kept{opacity:1;filter:none;animation:dream-kept 600ms steps(4,end) 1}
.memory-card{isolation:isolate;overflow:visible}.memory-card .symbol{display:grid;place-items:center;width:100%;height:100%}
.memory-card .dream-icon{width:39px;height:39px;max-width:75%;max-height:75%}
.memory-card.matched{box-shadow:inset 0 0 0 2px #244a40}
.memory-card.matched:disabled{opacity:1}
.radio-receiver{--signal:0;--dial-angle:-104deg;position:relative;overflow:hidden;padding:19px 16px 15px;background:#0d111e;border:2px solid #584765;box-shadow:inset 0 0 0 3px #1b1d2d,3px 4px 0 #080710}
.radio-station-label{font-size:7px;letter-spacing:1.6px;line-height:1.8;margin:0 0 12px;color:#9f8ba6}
.radio-receiver .frequency{font-size:36px;line-height:1.35;color:#a1c8c5;transition:color .2s}
.radio-receiver .mhz{font-size:8px;letter-spacing:3px}
.radio-aerial{position:absolute;top:0;right:22px;height:11px;width:2px;background:#847189;box-shadow:-2px 3px 0 #3c344b,1px 0 0 #b5a0b1}
.radio-visual{display:flex;align-items:center;justify-content:space-between;gap:12px;height:53px;margin:13px 0 0}
.radio-speaker{width:44px;flex:0 0 44px;padding:3px 0;background:#171b2a;border:1px solid #343347}
.radio-speaker i{height:2px;display:block;margin:3px 5px;background:repeating-linear-gradient(to right,#6f5b72 0 2px,transparent 2px 5px)}
.radio-waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:35px;flex:1;min-width:0;overflow:hidden}
.radio-waveform i{width:3px;flex:0 0 3px;height:var(--h);background:#70b3ad;opacity:calc(.2 + var(--signal)*.8);transform:scaleY(.2);transform-origin:center;animation:radio-wave 750ms steps(4,end) infinite alternate;animation-delay:var(--delay);animation-play-state:paused}
.radio-receiver.playing .radio-waveform i{animation-play-state:running}
.radio-dial{position:relative;flex:0 0 39px;height:39px;background:#2c273e;border:3px solid #7a647e;clip-path:polygon(25% 0,75% 0,75% 10%,90% 10%,90% 25%,100% 25%,100% 75%,90% 75%,90% 90%,75% 90%,75% 100%,25% 100%,25% 90%,10% 90%,10% 75%,0 75%,0 25%,10% 25%,10% 10%,25% 10%)}
.radio-dial i{position:absolute;inset:4px;transform:rotate(var(--dial-angle));transform-origin:center}
.radio-dial i:before{content:'';position:absolute;width:3px;height:9px;left:calc(50% - 1px);top:0;background:#d5afc7}
.radio-receiver .signal-meter{height:24px;margin:12px 0 6px;gap:5px}
.radio-receiver .signal-meter i{width:7px;background:#233d45}.radio-receiver .signal-meter i.lit{background:#87c9bc;box-shadow:none}
.radio-receiver .signal-text{margin:7px 0 0;font-size:10px;min-height:18px}
.radio-receiver.tuned{border-color:#8bc6b5;box-shadow:inset 0 0 0 3px #203c3b,3px 4px 0 #080710}
.radio-receiver.tuned .frequency{color:#ccf1d8}.radio-receiver.tuned .radio-station-label{color:#b8d3be}
.radio-receiver.tuned .radio-waveform i{background:#b0e3c7}
.radio-tuning-label{display:block;margin:18px 0 0;color:#b8a5c1;font-size:10px;line-height:1.7}
.radio-range{margin-top:6px}.radio-range:focus-visible{outline-offset:1px}
.radio-sound-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;margin-top:12px}
.radio-sound-note{max-width:225px;font-size:9px;line-height:1.7;color:#b8a4bd}
.radio-sound-button{flex:0 0 auto;white-space:nowrap;font-size:9px;color:#afd9d0}
.station-letter{position:relative;padding:18px 17px 15px;margin:19px 0 0;border:1px solid #82697e;background:#23172c;animation:radio-reveal 600ms steps(5,end) 1}
.station-letter:before{content:'';position:absolute;top:-1px;left:15px;right:15px;height:2px;background:#a8cfb8}
.station-found{font-size:8px;letter-spacing:2px;color:#a9d9c4}
.station-letter p{margin:12px 0 10px;font-size:17px;line-height:1.65;letter-spacing:-.4px;color:#f2d7e6}
.station-signature{display:block;text-align:right;font-size:11px;color:#d4abc8}
@keyframes laifu-dream-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes dream-kept{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes radio-wave{from{transform:scaleY(calc(.18 + var(--signal)*.2))}to{transform:scaleY(calc(.3 + var(--signal)*.7))}}
@keyframes radio-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:380px){.dream-kept{gap:3px}.memory-grid{gap:7px}.memory-card .dream-icon{width:34px;height:34px}.radio-visual{gap:7px}.radio-sound-note{max-width:165px}.station-letter p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.dreaming-laifu-cat,.dream-kept i,.radio-waveform i,.station-letter{animation:none!important;transition:none!important}.radio-receiver.tuned .radio-waveform i{transform:scaleY(.8)}}

/* The radio is one compact panel at normal phone text sizes. Keep overflow
 * accessible for enlarged text/zoom and unusually short browser viewports. */
dialog.radio-dialog{width:calc(100% - 24px);max-width:420px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:28px 16px 10px;overflow:auto;overscroll-behavior:contain}
.radio-dialog #activityRoot{display:flex;flex-direction:column;min-width:0;min-height:0}
.radio-dialog #activityRoot>.eyebrow,.radio-dialog #activityRoot>.intro-text{display:none}
.radio-dialog #activityTitle{font-size:16px;line-height:1.3;letter-spacing:.3px;margin:0 0 4px;padding-right:18px}
.radio-dialog .close-button{top:4px;right:4px;width:44px;height:44px}
.radio-dialog .game-content{min-width:0}
.radio-dialog .radio-receiver{display:grid;grid-template-columns:minmax(0,1fr) 108px;column-gap:8px;padding:7px 11px 6px}
.radio-dialog .radio-station-label{grid-column:1/-1;font-size:7px;line-height:11px;letter-spacing:1.1px;margin:0 0 2px}
.radio-dialog .frequency{grid-column:1;grid-row:2;font-size:28px;line-height:30px;letter-spacing:2px;text-align:left;padding-left:6px}
.radio-dialog .mhz{grid-column:1;grid-row:3;font-size:7px;line-height:11px;letter-spacing:1.5px;text-align:left;padding-left:7px}
.radio-dialog .radio-visual{grid-column:2;grid-row:2/4;width:108px;height:42px;margin:0;gap:6px}
.radio-dialog .radio-speaker{width:26px;flex-basis:26px;padding:1px 0}
.radio-dialog .radio-speaker i{height:1px;margin:3px 4px}
.radio-dialog .radio-waveform{height:28px;gap:2px}
.radio-dialog .radio-waveform i{width:2px;flex-basis:2px}
.radio-dialog .radio-dial{flex-basis:29px;height:29px;border-width:2px}
.radio-dialog .radio-dial i{inset:3px}.radio-dialog .radio-dial i:before{height:7px;width:2px}
.radio-dialog .signal-meter{display:none}
.radio-dialog .signal-text{grid-column:1/-1;grid-row:4;font-size:9px;line-height:13px;min-height:13px;margin:3px 0 0}
.radio-dialog .radio-tuning-label{margin:7px 0 0;font-size:10px;line-height:14px}
.radio-dialog .radio-range{display:block;height:44px;min-height:44px;margin:0;width:100%}
.radio-dialog .radio-labels{font-size:9px;line-height:11px;margin:0}
.radio-dialog .radio-sound-row{margin:3px 0 0;min-height:44px;gap:8px}
.radio-dialog .radio-sound-note{max-width:150px;font-size:10px;line-height:1.3}
.radio-dialog .radio-sound-button{font-size:10px;min-height:44px;padding:10px 4px;white-space:normal;text-align:right}
.radio-dialog .station-letter{padding:9px 11px 8px;margin:8px 0 0}
.radio-dialog .station-letter p{margin:0 0 4px;font-size:14px;line-height:1.4;letter-spacing:0;overflow-wrap:normal}
.radio-dialog .station-signature{font-size:11px;line-height:14px}
.radio-dialog .game-actions{margin:8px 0 0;gap:14px;justify-content:space-between;flex-wrap:nowrap}
.radio-dialog .game-actions button{min-height:44px;font-size:10px;line-height:1.3}
.radio-dialog .game-actions .primary-button{padding:10px 12px}
.radio-dialog .game-actions .secondary-button{padding:10px 2px}
.radio-dialog .game-actions.radio-kept{justify-content:center}
.radio-dialog .game-actions.radio-kept .primary-button{width:100%}
.radio-dialog .game-status{min-height:0;margin:5px 0 0;font-size:10px;line-height:1.35}
.radio-dialog .game-status:empty{display:none}
@media(min-width:600px) and (max-height:500px){
  dialog.radio-dialog{max-width:720px}
  .radio-dialog .game-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'receiver tuning' 'receiver slider' 'receiver scale' 'sound quote' 'actions actions';gap:6px 12px;align-items:start}
  .radio-dialog .radio-receiver{grid-area:receiver}
  .radio-dialog .radio-tuning-label{grid-area:tuning;margin:0}
  .radio-dialog .radio-range{grid-area:slider}
  .radio-dialog .radio-labels{grid-area:scale}
  .radio-dialog .radio-sound-row{grid-area:sound;margin:0}
  .radio-dialog .station-letter{grid-area:quote;margin:0}
  .radio-dialog .game-actions{grid-area:actions;margin:0}
}