/* A usable opening scene: real music, real games, real video. No loading gate. */
.cam-welcome {
  --welcome-mint: #a6e7df;
  --welcome-pink: #efb5cc;
  --welcome-gold: #ecd9ad;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  margin: -5px 0 28px;
  padding: 23px 18px 12px;
  overflow: hidden;
  border: 1px solid #ffffff23;
  border-radius: 22px;
  background: radial-gradient(ellipse at 92% 32%, #a6e7df0e, transparent 65%), radial-gradient(ellipse at 0 5%, #efb5cc0d, transparent 55%), #17191f;
}
.cam-welcome::before { content: ''; position: absolute; z-index: -1; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, #efb5cc72, #a6e7df4a, transparent); }
.cam-welcome a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cam-welcome a:focus-visible, .cam-welcome button:focus-visible { outline: 2px solid var(--welcome-mint); outline-offset: 4px; }
.welcome-copy { min-width: 0; }
.welcome-eyebrow { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; color: var(--welcome-mint); font-size: 9px; font-weight: 650; letter-spacing: .16em; line-height: 1.4; }
.welcome-eyebrow > span { color: var(--welcome-gold); font-size: 16px; line-height: 1; }
.cam-welcome h1 { margin: 0; font-size: clamp(32px, 8.2vw, 44px); font-weight: 550; line-height: 1.06; letter-spacing: -.052em; }
.cam-welcome h1 > span { color: var(--welcome-pink); }
.welcome-intro { max-width: 350px; margin: 13px 0 0; color: #bdb9c5; font-size: 13px; line-height: 1.65; text-wrap: pretty; }
.welcome-spotlight { display: none; }
.welcome-scene { position: relative; isolation: isolate; min-width: 0; width: 100%; max-width: 460px; height: 223px; margin: 0 auto; }
.welcome-orbit { position: absolute; z-index: -1; left: 2%; top: 7%; width: 85%; height: 78%; border: 1px solid #a6e7df1a; border-radius: 50%; transform: rotate(-24deg); }
.welcome-orbit-two { left: 16%; top: 21%; width: 78%; height: 73%; border-color: #efb5cc1c; transform: rotate(24deg); }
.welcome-wave { position: absolute; z-index: -1; left: 32%; right: 2%; bottom: 18%; height: 115px; display: flex; align-items: center; justify-content: space-between; gap: 5px; opacity: .3; }
.welcome-wave i { display: block; flex: 1; height: 20%; max-width: 4px; border-radius: 5px; background: linear-gradient(var(--welcome-pink), var(--welcome-mint)); transform-origin: center; animation: welcome-wave-in 1.6s ease-out both; }
.welcome-wave i:nth-child(3n) { height: 74%; animation-delay: .12s; }
.welcome-wave i:nth-child(4n) { height: 94%; animation-delay: .2s; }
.welcome-wave i:nth-child(5n) { height: 40%; animation-delay: .08s; }
.welcome-star { position: absolute; color: var(--welcome-gold); line-height: 1; pointer-events: none; }
.welcome-star-one { left: 51%; top: 38%; font-size: 20px; transform: rotate(12deg); }
.welcome-star-two { left: 1%; bottom: 5%; font-size: 13px; color: var(--welcome-mint); }
.welcome-record { position: absolute; top: 10px; left: 5px; z-index: 2; width: 47%; max-width: 206px; padding: 7px; border: 1px solid #d8c79b65; border-radius: 11px; background: #25272d; box-shadow: 0 12px 28px #0006; transform: rotate(-6deg); animation: welcome-record-in .95s cubic-bezier(.16,1,.3,1) both; }
.welcome-record > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.welcome-record-copy { display: block; position: relative; padding: 9px 19px 3px 2px; }
.welcome-record-copy > small { display: block; margin-bottom: 4px; color: #c8b791; font-size: 7px; line-height: 1.3; letter-spacing: .12em; }
.welcome-record-copy > strong { display: block; max-width: 120px; color: #f8f0de; font-size: 11px; font-weight: 550; line-height: 1.3; }
.welcome-record-play { position: absolute; right: 1px; bottom: 9px; display: grid; place-items: center; width: 19px; height: 19px; padding-left: 1px; border-radius: 50%; background: var(--welcome-gold); color: #29251d; font-size: 8px; }
.welcome-record:hover { border-color: var(--welcome-gold); }
.welcome-game { position: absolute; z-index: 1; right: 0; top: 0; width: 48%; height: 112px; overflow: hidden; border: 1px solid #a6e7df5f; border-radius: 11px; background: radial-gradient(ellipse at 50% 40%, #a6e7df23, transparent 67%), linear-gradient(140deg, #1c313b, #183135); box-shadow: 0 12px 30px #0004; transform: rotate(4deg); animation: welcome-game-in 1.1s .12s cubic-bezier(.16,1,.3,1) both; }
.welcome-scene-label { position: absolute; z-index: 3; top: 9px; left: 10px; color: #dbf1ea; font-size: 7px; font-weight: 600; letter-spacing: .11em; line-height: 1.2; }
.welcome-flight { position: absolute; left: 4%; top: -8px; width: 119px; height: 119px; background: url('/assets/charlie-flight.webp') left center / 200% 100% no-repeat; filter: drop-shadow(0 7px 7px #0005); }
.welcome-game-gate { position: absolute; width: 14px; height: 37px; top: -1px; border: 1px solid #a6e7df75; border-radius: 0 0 3px 3px; background: #a6e7df0b; }
.welcome-game-gate-one { left: 18%; opacity: .5; height: 26px; }
.welcome-game-gate-two { right: 12%; }
.welcome-game-gate-two::after { content: ''; position: absolute; top: 79px; left: -1px; width: 14px; height: 30px; border: 1px solid #a6e7df75; border-radius: 3px 3px 0 0; background: #a6e7df12; }
.welcome-game-spark { position: absolute; right: 13%; top: 45%; color: var(--welcome-gold); font-size: 17px; }
.welcome-game > strong { display: flex; justify-content: space-between; position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 9px; color: #d9f3e9; font-size: 11px; font-weight: 600; line-height: 1.2; }
.welcome-game > strong > span { font-size: 14px; }
.welcome-game:hover { border-color: var(--welcome-mint); }
.welcome-video { position: absolute; z-index: 3; right: 1px; bottom: 1px; width: 52%; height: 104px; overflow: hidden; border: 1px solid #efb5cc78; border-radius: 11px; background: #78374e; box-shadow: 0 15px 30px #0006; transform: rotate(3deg); animation: welcome-video-in 1.05s .24s cubic-bezier(.16,1,.3,1) both; }
.welcome-video > .welcome-visuals { position: absolute; inset: 0; width: 100%; height: 100%; }
.welcome-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.welcome-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #2b1726df, transparent 65%, #31152650); pointer-events: none; }
.welcome-video .welcome-scene-label { color: #fff2f8; text-shadow: 0 1px 5px #271019; }
.welcome-video > strong { position: absolute; z-index: 2; bottom: 8px; left: 11px; color: #fff7fb; font-size: 20px; font-weight: 550; line-height: 1; letter-spacing: -.035em; }
.welcome-video-play { position: absolute; z-index: 2; bottom: 9px; right: 11px; display: grid; place-items: center; width: 27px; height: 27px; padding-left: 1px; border: 1px solid #ffe1ee94; border-radius: 50%; color: #fff6fa; background: #5f314952; font-size: 10px; }
.welcome-video:hover { border-color: var(--welcome-pink); }
.welcome-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.welcome-route { display: grid; grid-template-columns: 1fr auto; gap: 8px 5px; min-width: 0; min-height: 102px; padding: 11px 10px 12px; border: 1px solid #ffffff24; border-radius: 12px; background: #ffffff03; transition: background .16s, border-color .16s; }
.welcome-route-icon { display: block; width: 23px; height: 23px; color: var(--welcome-gold); }
.welcome-route-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.welcome-route-play .welcome-route-icon { color: var(--welcome-mint); }
.welcome-route-watch .welcome-route-icon { color: var(--welcome-pink); }
.welcome-route-copy { display: block; min-width: 0; grid-row: 2; grid-column: 1 / -1; }
.welcome-route-copy > strong { display: block; color: #f4eff4; font-size: 15px; line-height: 1.3; font-weight: 600; }
.welcome-route-copy > small { display: block; margin-top: 3px; color: #b7b0c1; font-size: 9px; line-height: 1.4; }
.welcome-route-arrow { grid-row: 1; grid-column: 2; align-self: center; color: #c0bacb; font-size: 15px; }
.welcome-route:hover { border-color: #ecd9ad80; background: #ecd9ad08; }
.welcome-route-play:hover { border-color: #a6e7df80; background: #a6e7df08; }
.welcome-route-watch:hover { border-color: #efb5cc80; background: #efb5cc08; }
.welcome-library { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px 10px; margin-top: -7px; }
.welcome-library > a { display: inline-flex; gap: 9px; align-items: center; min-height: 44px; color: #c3becb; font-size: 11px; }
.welcome-library > a > span { color: var(--welcome-gold); }
.welcome-library .pill-button { min-height: 44px; padding: 8px 0 8px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--welcome-gold); font-size: 11px; font-weight: 550; }
.welcome-library .pill-button .icon { width: 13px; height: 13px; }
@keyframes welcome-record-in { from { opacity: 0; transform: translate(-8px, 18px) rotate(-11deg); } to { opacity: 1; transform: translate(0,0) rotate(-6deg); } }
@keyframes welcome-game-in { from { opacity: 0; transform: translate(9px, 14px) rotate(8deg); } to { opacity: 1; transform: translate(0,0) rotate(4deg); } }
@keyframes welcome-video-in { from { opacity: 0; transform: translate(7px, 20px) rotate(7deg); } to { opacity: 1; transform: translate(0,0) rotate(3deg); } }
@keyframes welcome-wave-in { from { opacity: .2; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }
@media (min-width: 420px) and (max-width: 760px) {
  .cam-welcome { padding: 25px 22px 13px; }
  .welcome-scene { height: 268px; }
  .welcome-record { top: 16px; }
  .welcome-game { height: 134px; }
  .welcome-flight { width: 147px; height: 147px; top: -11px; }
  .welcome-video { height: 125px; }
  .welcome-record-copy > strong { font-size: 13px; max-width: 160px; }
  .welcome-record-copy > small { font-size: 8px; }
  .welcome-scene-label { font-size: 8px; }
  .welcome-game > strong { font-size: 13px; }
}
@media (min-width: 761px) {
  .cam-welcome { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 20px 25px; margin: -7px 0 32px; padding: 29px 28px 13px; border-radius: 25px; }
  .welcome-copy { align-self: center; padding-bottom: 6px; }
  .welcome-eyebrow { font-size: 9px; margin-bottom: 16px; }
  .cam-welcome h1 { font-size: clamp(36px, 4.7vw, 59px); line-height: 1.055; }
  .welcome-intro { font-size: 14px; line-height: 1.7; margin-top: 18px; max-width: 335px; }
  .welcome-spotlight { display: inline-flex; flex-direction: column; min-height: 70px; gap: 4px; margin-top: 23px; padding-left: 13px; border-left: 2px solid #ecd9ad8a; }
  .welcome-spotlight > span { color: var(--welcome-gold); font-size: 8px; line-height: 1.4; letter-spacing: .13em; }
  .welcome-spotlight strong { color: #ede6f0; font-size: 14px; font-weight: 550; line-height: 1.4; }
  .welcome-spotlight b { margin-left: 9px; color: var(--welcome-gold); font-size: 15px; font-weight: 400; }
  .welcome-spotlight small { color: #a9a4b2; font-size: 10px; }
  .welcome-scene { height: 325px; max-width: 500px; margin-block: 0; }
  .welcome-record { top: 30px; left: 4px; width: 47%; max-width: 233px; padding: 9px; border-radius: 13px; }
  .welcome-record-copy { padding: 11px 24px 5px 3px; }
  .welcome-record-copy > small { font-size: 8px; }
  .welcome-record-copy > strong { font-size: 14px; max-width: 168px; }
  .welcome-record-play { width: 24px; height: 24px; font-size: 10px; bottom: 11px; }
  .welcome-game { width: 48%; height: 153px; top: 6px; border-radius: 13px; }
  .welcome-scene-label { top: 12px; left: 12px; font-size: 8px; }
  .welcome-flight { width: 166px; height: 166px; left: 5%; top: -9px; }
  .welcome-game-gate { height: 52px; width: 19px; }
  .welcome-game-gate-two::after { width: 19px; top: 113px; height: 45px; }
  .welcome-game-spark { font-size: 21px; right: 14%; top: 47%; }
  .welcome-game > strong { left: 13px; right: 13px; bottom: 12px; font-size: 14px; }
  .welcome-video { width: 52%; height: 147px; bottom: 3px; border-radius: 13px; }
  .welcome-video > strong { font-size: 26px; left: 15px; bottom: 13px; }
  .welcome-video-play { width: 34px; height: 34px; right: 14px; bottom: 13px; font-size: 12px; }
  .welcome-wave { height: 170px; }
  .welcome-star-one { font-size: 25px; }
  .welcome-routes { grid-column: 1 / -1; gap: 13px; }
  .welcome-route { display: flex; min-height: 81px; align-items: center; gap: 13px; padding: 14px 18px; border-radius: 13px; }
  .welcome-route-icon { width: 29px; height: 29px; flex: none; }
  .welcome-route-copy > strong { font-size: 16px; }
  .welcome-route-copy > small { font-size: 11px; margin-top: 4px; }
  .welcome-route-arrow { margin-left: auto; font-size: 19px; }
  .welcome-library { grid-column: 1 / -1; margin-top: -9px; }
  .welcome-library > a, .welcome-library .pill-button { font-size: 12px; }
}
@media (min-width: 1050px) {
  .cam-welcome { padding: 34px 39px 14px; gap: 22px 30px; }
  .welcome-scene { height: 359px; }
  .welcome-record { top: 40px; left: 13px; }
  .welcome-game { top: 9px; height: 166px; }
  .welcome-flight { width: 185px; height: 185px; top: -13px; }
  .welcome-video { height: 164px; bottom: 0; }
  .welcome-spotlight { margin-top: 25px; }
  .welcome-intro { font-size: 15px; max-width: 355px; }
  .welcome-eyebrow { font-size: 10px; }
  .welcome-spotlight strong { font-size: 16px; }
  .welcome-route { min-height: 83px; padding-inline: 22px; }
}
@media (max-width: 360px) {
  .cam-welcome { padding-inline: 14px; gap: 16px; }
  .cam-welcome h1 { font-size: 31px; }
  .welcome-intro { font-size: 12px; }
  .welcome-scene { height: 207px; }
  .welcome-record { left: 3px; padding: 6px; }
  .welcome-record-copy { padding-top: 7px; padding-right: 0; }
  .welcome-record-copy > strong { font-size: 10px; max-width: 108px; }
  .welcome-record-play { display: none; }
  .welcome-game { height: 101px; }
  .welcome-flight { width: 111px; height: 111px; top: -10px; left: -2%; }
  .welcome-video { height: 97px; }
  .welcome-scene-label { font-size: 6px; top: 8px; left: 8px; }
  .welcome-routes { gap: 6px; }
  .welcome-route { padding-inline: 8px; min-height: 100px; }
  .welcome-route-copy > small { font-size: 8px; }
  .welcome-library > a, .welcome-library .pill-button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cam-welcome *, .cam-welcome *::before, .cam-welcome *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .cam-welcome, .welcome-route, .welcome-record, .welcome-game, .welcome-video { border: 1px solid CanvasText; }
  .welcome-spotlight { border-color: LinkText; }
  .welcome-route-icon, .cam-welcome h1 > span { color: LinkText; }
}