/* Channel card in the phone, quick play, stream recap, radio banner and street chatter. */
#phone-channel{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07)}
#phone-channel .ch-head{display:flex;align-items:baseline;gap:8px}
#phone-channel .ch-level{font-weight:900;font-size:12px;letter-spacing:.08em;color:#231e2c;background:var(--sun);border-radius:4px;padding:1px 6px}
#phone-channel .ch-title{font-weight:800}
#phone-channel .ch-streams{margin-left:auto;font-size:11px;color:#c8cbd4}
.ch-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.14);margin:8px 0 6px;overflow:hidden}
.ch-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--hot));transition:width .6s ease-out}
#phone-channel .ch-meta{font-size:11px;color:#c8cbd4}
#phone-channel .ch-trend{margin-top:8px;font-size:12px;color:var(--paper)}
#phone-channel .ch-trend b{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
#need-crew{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--sun)}

#menu .menu-mode{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
#menu .menu-mode small{font-weight:500;font-size:11px;color:#e9d5db}
#menu .menu-mode.primary small{color:#4a1426}
#private-session{margin:6px 0 0;padding:7px 10px;border-radius:10px;background:rgba(155,107,255,.16);border:1px solid rgba(155,107,255,.45);font-size:12px;line-height:1.35;color:#e8defc}
#private-session b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#cdb8ff}

#recap{margin:14px 0 4px;text-align:left}
#recap .rc-best{padding:12px 14px;border-radius:10px;background:rgba(246,207,138,.14)}
#recap .rc-best small{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--sun)}
#recap .rc-best b{display:block;font-size:18px;font-style:italic;margin:2px 0}
#recap .rc-best span{font-size:12px;color:#d6d9e0}
#recap .rc-best.empty{background:rgba(255,255,255,.06)}
#recap .rc-crew{margin:12px 0}
#recap .rc-crew li{font-size:13px;gap:10px}
#recap .rc-crew li.you{outline:1px solid rgba(255,255,255,.25)}
#recap .rc-name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:700}
#recap .mvp{font-size:10px;letter-spacing:.08em;color:#231e2c;background:var(--sun);border-radius:4px;padding:1px 5px;margin-left:4px}
#recap .rc-stat{font-size:11px;color:#c8cbd4;white-space:nowrap}
#recap .rc-hype{font-weight:800;white-space:nowrap}
#recap .rc-channel{font-size:12px;font-weight:800;letter-spacing:.04em}
#recap .rc-channel.up span{color:var(--sun);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}

#radio-banner{position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 56px);transform:translateX(-50%);z-index:5;
  background:rgba(22,24,34,.9);color:var(--paper);padding:7px 14px;border-radius:6px;font-size:13px;pointer-events:none;white-space:nowrap;animation:pop .3s ease-out}
#radio-banner b{letter-spacing:.06em;margin-right:4px}
#radio-banner kbd{background:var(--paper);color:#231e2c;border-radius:4px;padding:0 6px;margin:0 3px 0 8px;font:800 12px/1.5 inherit}

.label.talk{display:none}
#bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bubble{position:absolute;transform:translate(-50%,-100%);max-width:180px;padding:5px 10px;border-radius:12px 12px 12px 3px;background:#fff8ef;color:#231e2c;
  font-size:12px;font-weight:700;line-height:1.3;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.25);animation:pop .3s cubic-bezier(.2,1.4,.4,1)}

/* Key art (in-engine cover collage) behind loading and the main menu. */
.vice-city #loading{background:#0d1016 url(keyart-sunset.jpg) 72% center/cover no-repeat;align-items:flex-start;padding-top:max(24px,4vh)}
.vice-city #loading>div{background:rgba(18,18,26,.86);padding:12px 18px 14px;border-radius:6px;min-width:280px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vice-city #loading .progress{width:100%;height:6px;margin-top:10px}
.vice-city #loading .progress i{background:linear-gradient(90deg,var(--teal),var(--hot))}
/* The main menu's art and layout live in menu.css. */
#weather-hud{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#9fc3ff;text-shadow:0 1px 2px #000}#weather-hud[data-kind="storm"]{color:#ffd166}