/* Approved sky-blue interface with decorative light behind readable surfaces. */
:root {
  --ink: #072146;
  --muted: #46617a;
  --primary: #1767a3;
  --primary-soft: #e2f1fc;
  --line: #b8d2e8;
  --surface: linear-gradient(145deg, #fbfdff, #eef7fd 58%, #e4f1fb);
  --edge: inset 0 1px 2px #fff, 0 14px 34px -20px #416e9b66;
  --mystery-surface: var(--surface);
  --mystery-edge: var(--edge);
  --neon-border: #4b8ed1;
  --neon-glow: inset 0 1px 2px #fff8, 0 0 0 1px #bad8f6, 0 0 14px #4495e680, 0 0 30px #69abed55;
  --orb-art: url('../images/design/orchid-orbs-v6.png');
  --book-art: url('../images/design/orchid-book-v7.png');
  --outline-icons: url('../images/design/silver-icons-v5.png');
}
body { color: var(--ink); background: #dceefa; }
html { scroll-padding-top: calc(var(--nav-height, 86px) + 16px); }
.skip-link:focus { z-index: 50; }
.app:not(.wire) {
  overflow: clip;
  background: linear-gradient(135deg, #ebf4fd33, #dcebfa33), var(--orb-art) center top / cover, #dceefa;
  color: var(--ink);
}
/* Moving light is isolated behind the opaque interface and never intercepts input. */
.app:not(.wire)::before,
.app:not(.wire)::after {
  content: '';
  display: block;
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.app:not(.wire)::before {
  translate: var(--scene-x, 0px) calc(var(--scene-y, 0px) + var(--scene-scroll, 0px));
  background:
    radial-gradient(ellipse at 12% 26%, #3f93e7b3, transparent 46%),
    radial-gradient(ellipse at 86% 64%, #509ce999, transparent 46%),
    radial-gradient(ellipse at 60% 10%, #748cfba0, transparent 42%),
    linear-gradient(115deg, transparent 28%, #91c1f100 40%, #91c1f188 48%, #e6f1fcaa 50%, #91c1f188 52%, transparent 64%);
  filter: blur(22px);
  opacity: .95;
  animation: mystery-aurora 16s ease-in-out -4s infinite alternate;
}
.app:not(.wire)::after {
  translate: calc(var(--scene-x, 0px) * -.6) calc((var(--scene-y, 0px) + var(--scene-scroll, 0px)) * -.6);
  background:
    radial-gradient(circle at 15% 22%, #f9fcfe 0 4px, #bfdbf7cc 9px, transparent 64px),
    radial-gradient(circle at 85% 38%, #f9fcfe 0 4px, #bad8f7cc 10px, transparent 70px),
    radial-gradient(circle at 12% 50%, #f9fcfe 0 3px, #bad8f7bb 8px, transparent 56px),
    radial-gradient(circle at 88% 60%, #f9fcfe 0 3px, #cae1f9bb 8px, transparent 56px),
    radial-gradient(circle at 18% 84%, #f9fcfe 0 4px, #a9cef4bb 9px, transparent 64px),
    radial-gradient(circle at 82% 78%, #f9fcfe 0 4px, #bad8f7cc 9px, transparent 66px);
  filter: blur(1px);
  opacity: .55;
  animation: mystery-shimmer 10s ease-in-out -3s infinite alternate;
}
@keyframes mystery-aurora {
  0% { transform: translate3d(-8%, 4%, 0) scale(1) rotate(-6deg); }
  50% { transform: translate3d(10%, -6%, 0) scale(1.12) rotate(5deg); }
  100% { transform: translate3d(-5%, 9%, 0) scale(1.06) rotate(-3deg); }
}
@keyframes mystery-shimmer {
  from { transform: translate3d(-4%, 5%, 0) scale(.98); opacity: .55; }
  to { transform: translate3d(5%, -6%, 0) scale(1.03); opacity: .95; }
}
.app.wire::before, .app.wire::after { display: none; animation: none; }
.app:not(.wire) a { color: #2b4865; }
.app:not(.wire) :is(.brand, .account-link, .top .user) { color: #2b4865; }
.app:not(.wire) .top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(100deg, #f1f6fc, #e2edf8);
  border-bottom: 1px solid #fff;
  box-shadow: 0 8px 30px -24px #35618e;
  transition: box-shadow .28s ease, border-color .28s ease;
}
.app:not(.wire) .top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #65a0db, #9cc0e4, #65a0db, transparent);
  box-shadow: 0 3px 12px #5d9cdb66;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .28s ease, transform .28s ease;
}
.app:not(.wire) .top[data-scrolled] {
  border-bottom-color: #a4c1df;
  box-shadow: 0 12px 28px -15px #2f5f8f99;
}
.app:not(.wire) .top[data-scrolled]::after { opacity: .95; transform: scaleX(1); }
.app:not(.wire) .top .brand .ui-icon { transition: transform .28s ease; }
.app:not(.wire) .top[data-scrolled] .brand .ui-icon { transform: scale(.9); }

/* The existing book mark gains a turning leaf and a soft light trail. */
.app:not(.wire) .top .brand { position: relative; isolation: isolate; }
.app:not(.wire) .top .brand::before,
.app:not(.wire) .top .brand::after { content: ''; position: absolute; pointer-events: none; z-index: -1; opacity: 0; }
.app:not(.wire) .top .brand::before {
  width: 48px; height: 48px; left: -4px; top: calc(50% - 24px); border-radius: 50%;
  background: radial-gradient(circle, #bcd9f799, #b2d2f355 40%, transparent 72%);
}
.app:not(.wire) .top .brand::after {
  left: 48px; right: 0; bottom: 1px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #699bcd, #98b7d6, transparent);
  transform-origin: left center;
}
.app:not(.wire) .top .brand .i-book { position: relative; perspective: 140px; }
.app:not(.wire) .top .brand .i-book::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: inherit; clip-path: inset(8% 0 8% 49%); transform-origin: 50% 50%;
}
.app:not(.wire) .top .brand:is(:hover, :focus-visible) {
  --logo-rise: -4px; --logo-tilt: -6deg; --logo-glow: 1;
}
@media(prefers-reduced-motion:no-preference) {
  .app:not(.wire) .top .brand .i-book { animation: logo-book-float 6.8s ease-in-out infinite; }
  .app:not(.wire) .top .brand .i-book::after { animation: logo-page-turn 6.8s ease-in-out infinite; }
  .app:not(.wire) .top .brand::before { animation: logo-book-aura 6.8s ease-in-out infinite; }
  .app:not(.wire) .top .brand::after { animation: logo-light-trail 6.8s ease-in-out infinite; }
}
@keyframes logo-book-float {
  0%, 12%, 40%, 100% { translate: 0 0; rotate: 0deg; }
  24% { translate: 0 var(--logo-rise, -2px); rotate: var(--logo-tilt, -3deg); }
  32% { translate: 0 -1px; rotate: 2deg; }
}
@keyframes logo-page-turn {
  0%, 14%, 38%, 100% { opacity: 0; transform: rotateY(0deg); }
  17% { opacity: 1; transform: rotateY(0deg); }
  28% { opacity: .9; transform: rotateY(-155deg); }
  34% { opacity: 0; transform: rotateY(-175deg); }
}
@keyframes logo-book-aura {
  0%, 10%, 44%, 100% { opacity: 0; transform: scale(.8); }
  25% { opacity: var(--logo-glow, .7); transform: scale(1.12); }
}
@keyframes logo-light-trail {
  0%, 18%, 50%, 100% { opacity: 0; transform: scaleX(.08); }
  30% { opacity: .75; transform: scaleX(1); }
  42% { opacity: 0; transform: scaleX(1); }
}

@media(min-width:1101px) {
  .app:not(.wire) .top[data-scrolled] nav :is(a, button) {
    min-height: 38px;
    height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}
.app:not(.wire) .top nav :is(a, button) { color: #46617a; }
.app:not(.wire) .top nav :is(a:hover, button:hover:not(.active)) { color: #072146; background: #d5e4f3; }
.app:not(.wire) .top nav :is(a[aria-current=page], button.active) {
  color: #fff; background: #305070; border-color: #305070;
  box-shadow: inset 0 1px 1px #d0e4f955;
}
.app:not(.wire) :is(.ui-icon, .glass-icon) {
  background-image: var(--outline-icons);
  filter: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(901%) hue-rotate(228deg) brightness(88%) contrast(92%);
}
.app:not(.wire) :is(.card, .feature, .player-card, .reading) {
  color: var(--ink); background: var(--surface); border: 1px solid #fff;
  border-radius: 30px; box-shadow: var(--edge);
}
.app:not(.wire) :is(h1, h2, h3, .question, .feature h2, .feature h3, .player-card strong) { color: var(--ink); }
.app:not(.wire) :is(.eyebrow, .component-label, label, legend, .field) { color: #385e84; }
.app:not(.wire) :is(.note, .muted, .feature p, .room-info p, .question-meta, .progress-meta, .question-actions p, .answer-actions>p, .component-state) { color: var(--muted); }
.app:not(.wire) :is(.content button, .button, .btn, .account button) {
  color: #fff; background: linear-gradient(145deg, #1767a3, #0b3b82);
  border: 2px solid #4373a4; border-radius: 18px;
  box-shadow: inset 0 1px 1px #ddecfb66, 0 7px 16px -10px #2f649a99;
}
.app:not(.wire) :is(.content button, .button, .btn, .account button):where(:hover):where(:not(:disabled)) {
  color: #fff; background: linear-gradient(145deg, #366ea7, #295a8b);
  border-color: #2a5d91; box-shadow: inset 0 1px 1px #ddecfb66, 0 8px 20px -10px #2f649aaa;
}
.app:not(.wire) :is(.content button, .button, .btn, .account button):where(:active):where(:not(:disabled)) { background: #27517c; }
.app:not(.wire) :is(button, .button, .btn) .ui-icon { filter: brightness(0) invert(1); }
.app:not(.wire) :is(button.secondary, .button.secondary, .btn.secondary, .btn.quiet) {
  color: #2e4c6b; background: linear-gradient(145deg, #fbfcfe, #deeaf6);
  border-color: #7da2c7; box-shadow: inset 0 1px 2px #fff, 0 5px 14px -12px #43709d;
}
.app:not(.wire) :is(button.secondary, .button.secondary, .btn.secondary, .btn.quiet):hover:not(:disabled) {
  color: #153c63; background: #d8e6f4; border-color: #4573a1;
}
.app:not(.wire) :is(.secondary, .quiet) .ui-icon { filter: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(901%) hue-rotate(228deg) brightness(88%) contrast(92%); }
.app:not(.wire) :is(button, .btn):disabled {
  color: #385d83; background: #d9e4ef; border: 2px dashed #84a7cb; box-shadow: none; opacity: 1;
}
.app:not(.wire) :is(.hero, .result-art) { background-image: var(--book-art); background-position: center; border-color: #c5d9ed; box-shadow: var(--edge); border-radius: 32px; }
.app:not(.wire) .hero { background-size: cover; background-repeat: no-repeat; }
.app:not(.wire) :is(.hero-copy, .hero>div) {
  background: #f8fbfe; border: 1px solid #fff; border-radius: 30px;
  box-shadow: inset 0 1px 2px #fff, 0 16px 36px -24px #35618e99;
}
/* Playing the introduction reveals the film and hides the welcome card without moving the layout. */
.app .hero[data-hero-intro] { position: relative; isolation: isolate; overflow: clip; }
.app .hero[data-hero-intro] > div { position: relative; z-index: 2; }
.app .hero-intro-video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.app .hero[data-video-playing] .hero-intro-video {
  inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1;
}
.app .hero[data-video-playing] > div {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.app .hero[data-hero-intro] .hero-book-trigger,
.app .hero[data-hero-intro] .hero-book-trigger:hover,
.app .hero[data-hero-intro] .hero-book-trigger:active {
  position: absolute; inset: 0 0 0 50%; z-index: 1; width: 50%; height: 100%; min-height: 0;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; color: #2e4c6b; translate: none; cursor: pointer;
}
.app .hero[data-hero-intro] .hero-book-trigger:focus-visible { outline-offset: -6px; }
.app .hero-book-label {
  position: absolute; bottom: 18px; right: 18px; padding: 8px 13px;
  max-width: calc(100% - 28px); text-align: center;
  color: #2e4c6b; background: #f8fbfe; border: 1px solid #a0bcd8; border-radius: 999px;
  font-size: 12px; line-height: 1.4; font-weight: 600; box-shadow: 0 4px 14px #32598022;
}
.app.wire .hero-intro-video, .app.wire .hero-book-trigger { display: none; }
@media(prefers-reduced-motion:reduce) { .app .hero-intro-video { transition: none; } }
@media(max-width:760px) {
  .app .hero-intro-video { top: auto; bottom: 0; left: -32%; width: 140%; height: auto; max-height: 100%; object-position: 80% bottom; }
  .app .hero-book-label { bottom: 14px; right: 14px; }
}

.app:not(.wire) .hero h1 { color: #143a60; }
.app:not(.wire) :is(.hero .eyebrow, .hero .lede, .hero .small, .hero>div>p:not(.eyebrow)) { color: #365a7f; }
.app:not(.wire) :is(.page-heading, .title-row, .scene-heading, .waiting>.scene-heading) {
  background: linear-gradient(120deg, #f5fafe, #e1eefa 65%, #dfecfa);
  border: 1px solid #fff; border-radius: 30px; box-shadow: var(--edge);
}
.app:not(.wire) :is(.page-heading, .title-row, .scene-heading) :is(.eyebrow, p:not(.eyebrow)) { color: #365a7f; }
.app:not(.wire) .card .title-row { background: none; border: 0; box-shadow: none; }
.app:not(.wire) :is(input:not([type=radio]):not([type=checkbox]), select) {
  color: #163d65; background: #fbfdff; border: 2px solid #87aacc; border-radius: 16px;
  box-shadow: inset 0 2px 4px #3059820a, 0 1px 0 #fff;
}
.app:not(.wire) input::placeholder { color: #3e6690; opacity: 1; }
.app:not(.wire) select option { color: #163d65; background: #f9fcfe; }
.app:not(.wire) input[type=checkbox] { accent-color: #3b73ab; }
.app .avatar-gallery { min-width: 0; padding: 0; border: 0; margin: 24px 0; }
.app .avatar-gallery legend { font-weight: 700; padding: 0; }
.app .avatar-gallery > .note { margin: 8px 0 14px; }
.app .avatar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.app label.avatar-keep { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }
.app .avatar-gallery input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex-shrink: 0; accent-color: #3b73ab; }
.app label.avatar-option {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 9px; padding: 14px 8px; margin: 0; text-align: center; min-width: 0;
  border: 2px solid #a4bed8; border-radius: 22px; cursor: pointer;
}
.app .avatar-option img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.app .avatar-option input[type=radio] { position: absolute; top: 10px; right: 10px; }
.app .avatar-option strong { display: block; font-size: 13px; margin-bottom: 4px; }
.app .avatar-option .note { display: block; font-size: 12px; font-weight: 400; }
.app:not(.wire) label.avatar-option { background: #f8fbfe; transition: border-color .2s ease, box-shadow .2s ease; }
.app:not(.wire) .avatar-option strong { color: #2c4966; }
.app:not(.wire) .avatar-option:has(input:checked) { border-color: #5686b6; box-shadow: 0 0 0 3px #c8ddf2, inset 0 1px #fff; }
.app:not(.wire) .avatar-option:focus-within { outline: 3px solid #305e8d; outline-offset: 4px; }
.app:not(.wire) input[type=file]::file-selector-button { color: #2e4c6b; background: #e0ecf7; border-color: #96b4d2; }
.app:not(.wire) :is(.segments span, .segments button) {
  color: #325274; background: #f3f8fd; border: 2px solid #8eaecf; border-radius: 14px; box-shadow: inset 0 1px 1px #fff;
}
.app:not(.wire) :is(.segments input:checked+span, .segments button.selected) {
  color: #fff; background: #37628e; border-color: #37628e; box-shadow: inset 0 1px 1px #d4e7fa44;
}
.app:not(.wire) :is(.pill, .badge) { color: #35587b; background: #ddeaf7; border-color: #95b3d1; box-shadow: inset 0 1px 1px #fff; }
.app:not(.wire) :is(.pill.beginner, .badge.gold, .pill.wait) { color: #705027; background: #fbecd6; border-color: #c6ad88; }
.app:not(.wire) .pill.intermediate { color: #385d82; background: #e5f0fa; border-color: #99b6d3; }
.app:not(.wire) .pill.scholar { color: #35577a; background: #dfeaf4; border-color: #95b3d1; }
.app:not(.wire) :is(.pill.neutral, .badge.neutral) { color: #365a7e; background: #e4ecf3; border-color: #95b3d2; }
.app:not(.wire) :is(.game-row, .room, .result-row, .ranking .player) { border-bottom-color: #bfd2e4; }
.app:not(.wire) :is(.game-row, .room) {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.app:not(.wire) :is(.game-row[data-status=playing], .room[data-status=playing]) {
  margin-block: 8px;
  padding: 18px 14px;
  border: 1px solid #91b2d4;
  border-radius: 21px;
  background: linear-gradient(125deg, #eff6fd, #d7e6f6);
  box-shadow: inset 3px 0 #6a97c5, inset 0 1px #fff, 0 7px 18px -13px #43709e88;
}
.app:not(.wire) :is(.game-row, .room):focus-within {
  border-radius: 21px;
  outline: 2px solid #729dc8;
  outline-offset: 4px;
  box-shadow: 0 0 22px #87b7e844;
}
.app:not(.wire) :is(.game-row[data-status=playing] .pill.live, .room[data-status=playing] .badge.live) {
  color: #305880;
  background: #d4e5f6;
  border-color: #85a8cc;
}
.app:not(.wire) :is(.game-row[data-status=playing] .pill.live, .room[data-status=playing] .badge.live)::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px #7aaada33;
  animation: room-status-beacon 2.8s ease-in-out infinite alternate;
}
@keyframes room-status-beacon {
  from { opacity: .65; transform: scale(.88); }
  to { opacity: 1; transform: scale(1.15); }
}
.app:not(.wire) .divider { background: #bfd2e4; }
.app:not(.wire) :is(.seats, .standings) { background: linear-gradient(145deg, #edf4fc, #dbe8f6); }
.app:not(.wire) :is(.seat.current, .result-row.winner, .player.you, .ranking .player.you) {
  color: #153b61; background: #d4e4f5; border-color: #769dc4; box-shadow: inset 0 1px 1px #fff;
}
.app:not(.wire) .seat.off { background: #dce6f0; }
.app:not(.wire) :is(.seat .note, .result-row small, .player small, .rank) { color: #375c81; }
.app:not(.wire) :is(.score, .player b, .turn) { color: #3c638b; }
.app:not(.wire) :is(.avatar, .top .user .avatar) { color: #325274; background: #dae8f6; border-color: #95b3d1; box-shadow: inset 0 1px 1px #fff; }
.app:not(.wire) :is(.avatar.tone-1, .avatar.lilac) { color: #375c81; background: #deebf8; border-color: #9ab7d4; }
.app:not(.wire) :is(.avatar.tone-2, .avatar.peach) { color: #375b7f; background: #ddeaf6; border-color: #9ab7d4; }
.app:not(.wire) :is(.avatar.tone-3, .avatar.blue) { color: #454b7a; background: #e2e4f8; border-color: #a6acd0; }
/* Named rooms and invitation codes keep the family lobby easy to scan. */
.app .family-lobby { display: grid; grid-template-columns: 345px minmax(0, 1fr); gap: 24px; align-items: start; }
.app .room-setup { display: grid; gap: 20px; }

.app .family-lobby fieldset { min-width: 0; padding: 0; border: 0; margin: 20px 0; }
.app .family-lobby .segments label { position: relative; flex: 1; min-width: 0; margin: 0; }
.app .family-lobby .segments input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.app .family-lobby .segments span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 6px; border: 2px solid #8eaecf; border-radius: 14px; font-size: 12px; cursor: pointer; }
.app:not(.wire) .family-lobby .segments span { transition: border-color .2s ease, box-shadow .2s ease; }
.app .family-lobby .game-meta { min-width: 0; }
.app .family-lobby .game-meta strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.app .family-lobby .game-meta .note { font-size: 12px; margin-top: 4px; }

.app .code-entry { display: flex; align-items: stretch; gap: 10px; }
.app .code-entry input { min-width: 0; flex: 1; width: 0; font-size: 24px; text-align: center; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.app .quiz-options { margin-top: 22px; }
.app :is(.quiz-options, .registration-appearance) summary { cursor: pointer; font-weight: 600; color: #2e4c6b; }
.app .quiz-options summary .note { display: inline; }
.app .registration-appearance { margin: 24px 0; padding: 15px; border: 1px solid #acc4dc; border-radius: 18px; }
.app .registration-picture { margin-top: 22px; }
.app .family-lobby .game-row { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; }
.app .family-lobby .game-actions { display: flex; flex-wrap: wrap; gap: 7px; grid-column: 2; width: 100%; justify-content: flex-start; }
.app .family-lobby .game-actions form, .app .family-lobby .game-actions > .button { margin-left: 0; }
.app .room-players { display: flex; flex-wrap: wrap; gap: 13px 16px; list-style: none; padding: 0; margin: 16px 0 4px; }
.app .room-players li { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; color: #2d4a68; font-size: 12px; }
.app .room-players li > span:last-child { overflow-wrap: anywhere; }
.app .room-players .avatar { width: 24px; height: 24px; font-size: 10px; }
.app .room-invite { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 20px 24px; margin: 18px 0; border: 1px solid #a8c2dc; border-radius: 24px; background: #f6fafe; }
.app .room-invite p { margin: 6px 0 0; }
.app .room-code { flex-shrink: 0; color: #315f8d; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .16em; }
.app:not(.wire) .pill.private { color: #395e84; background: #e0ecf8; border-color: #92b1d0; }
@media(max-width:760px) {
  .app .family-lobby { grid-template-columns: minmax(0,1fr); }
  .app .family-lobby .game-row { grid-template-columns: 40px minmax(0,1fr); }
  .app .family-lobby .room-art { width: 40px; height: 40px; }
  .app .family-lobby .game-actions { grid-column: 1 / -1; }
  .app .room-invite { align-items: flex-start; flex-direction: column; padding: 18px; }
  .app .room-code { font-size: 30px; }
  .app .quiz-options .segments { flex-wrap: wrap; }
}

/* A moving light rim surrounds the portrait; the image itself never rotates. */
.app:not(.wire) .avatar { position: relative; overflow: visible; isolation: isolate; }
.app:not(.wire) .avatar > img { border-radius: inherit; }
.app:not(.wire) .avatar::before,
.app:not(.wire) .avatar::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.app:not(.wire) .avatar::before {
  inset: -4px; border: 2px solid #6ca3db; opacity: .95; z-index: 1;
}
.app:not(.wire) .avatar::after {
  inset: -5px; border: 2px solid #8cbae9; z-index: -1; opacity: .6;
  box-shadow: 0 0 8px #5da2e880, 0 0 15px #75b1ed55;
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .app:not(.wire) .avatar::before {
    border: 0; padding: 2px;
    background: conic-gradient(from 0deg, #64a2e0, #79b1e9 22%, #cbe0f5 35%, #91bfed 53%, #83b7ec 72%, #64a2e0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
}
@media(prefers-reduced-motion:no-preference) {
  .app:not(.wire) .avatar::before { animation: avatar-neon-orbit 8s linear infinite; }
  .app:not(.wire) .avatar::after { animation: avatar-neon-breathe 4.8s ease-in-out infinite; }
}
.app:not(.wire) .player-card.empty .avatar::before,
.app:not(.wire) .player-card.empty .avatar::after { content: none; animation: none; }
@keyframes avatar-neon-orbit { to { transform: rotate(360deg); } }
@keyframes avatar-neon-breathe {
  0%, 100% { opacity: .4; transform: scale(.98); }
  50% { opacity: .75; transform: scale(1.03); }
}

.app:not(.wire) .progress { background: #c2d4e7; box-shadow: inset 0 1px 3px #3b618822, 0 1px 1px #fff; height: 8px; }
.app:not(.wire) .progress span { background: linear-gradient(90deg, #6d9fd2, #467db4); box-shadow: inset 0 1px 1px #e3effb99; }
.app:not(.wire) :is(.choice-tile, button.choice-tile, .choice) {
  color: #2c4966; background: linear-gradient(145deg, #fbfdff, #e6eff8);
  border: 2px solid #87a9cc; border-radius: 21px; box-shadow: inset 0 1px 2px #fff, 0 5px 12px -10px #416e9b66;
}
.app:not(.wire) :is(button.choice-tile, button.choice):hover {
  color: #153c63; background: #dae8f6; border-color: #4573a1; box-shadow: inset 0 1px 2px #fff;
}
.app:not(.wire) .letter { color: #395e84; background: #d4e3f3; box-shadow: inset 0 1px 1px #fff; }
.app:not(.wire) :is(.choice-tile.picked, .choice.picked) {
  color: #fff; background: linear-gradient(135deg, #4378ae, #325f8c); border-color: #4776a5;
  box-shadow: inset 0 1px 2px #d4e7fa66, 0 0 0 3px #bcd2e8;
}
.app:not(.wire) :is(button.choice-tile.picked, button.choice.picked):hover {
  color: #fff; background: #33618f; border-color: #285079; box-shadow: inset 0 1px 2px #d4e7fa66, 0 0 0 3px #bcd2e8;
}
.app:not(.wire) :is(.choice-tile.picked, .choice.picked) .letter { color: #335476; background: #f3f8fe; }
.app:not(.wire) .choices:not(:has(.choice)) { color: #2c4966; background: #f8fbfe; border-color: #98b5d3; }
.app:not(.wire) :is(.hint, .waiting-foot, .connection-status) {
  color: #2d4b69; background: #edf4fb; border: 1px solid #a9c1da; border-radius: 18px;
}
.app:not(.wire) .connection-status { padding: 10px 14px; }
.app:not(.wire) .card .connection-status { padding: 0; border: 0; background: none; color: #46617a; }
.app:not(.wire) .card .hint { color: #46617a; background: none; border: 0; }
.app:not(.wire) .waiting-foot>p { color: #2d4b69; }
.app:not(.wire) :is(.waiting-intro, .profile-story, .component-intro) {
  color: var(--ink); background: #f0f6fc; padding: 28px; border: 1px solid #fff; border-radius: 30px; box-shadow: var(--edge);
}
.app:not(.wire) :is(.waiting-intro, .profile-story, .component-intro) :is(h1, h2) { color: #143a60; }
.app:not(.wire) :is(.waiting-intro, .profile-story, .component-intro) :is(.note, .muted, .small, p) { color: #365a7f; }
.app:not(.wire) :is(.waiting-intro, .profile-story, .component-intro) .eyebrow { color: #385d83; }
.app:not(.wire) .player-card.empty { color: #35597d; background: #e0ebf6; border: 1px dashed #7ca1c7; box-shadow: none; }
.app:not(.wire) .player-card.empty :is(strong, .note, .small, .muted) { color: #35597d; }
.app:not(.wire) .player-card.empty .avatar { color: #3b638b; background: #cfdeee; border-color: #83a6ca; }
.app:not(.wire) :is(.banner, .feedback) { color: #285443; background: #edf7ee; border-color: #9cbcaa; }
.app:not(.wire) :is(.banner.correct, .feedback strong) { color: #285443; }
.app:not(.wire) .banner.correct { background: #edf7ee; border-color: #9cbcaa; }
.app:not(.wire) .feedback .muted { color: #426451; }
.app:not(.wire) :is(.banner.wrong, .error) { color: #335a82; background: #ecf4fd; border-color: #9fbad6; }
.app:not(.wire) :is(.profile-art, .room-art) { border-color: #a9c1da; }
.app:not(.wire) .result-art p { color: #2c4966; background: #f6fafe; border-color: #a9c1da; }
.app:not(.wire) :is(.reading p, .reading p strong, .verse-num) { color: #2d4b6a; }
.app:not(.wire) .reader-controls { padding: 20px 24px; background: #edf4fb; border: 1px solid #fff; border-radius: 24px; }
.app:not(.wire) .reader-controls .field { color: #385e84; }
.app:not(.wire) .site-footer { color: #35587c; background: #edf4fb; border-top-color: #b5cae0; border-radius: 24px 24px 0 0; }
.app:not(.wire) .icon-gallery>div { background: linear-gradient(145deg, #f6fafe, #d9e7f6); border-color: #b9cfe5; box-shadow: inset 0 1px 2px #fff; }
.app:not(.wire) .icon-gallery p { color: #35597d; }
.app:not(.wire) .component-intro>.ui-icon { filter: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(901%) hue-rotate(228deg) brightness(88%) contrast(92%); }
.app:not(.wire) :where(a, button, input, select):focus-visible, .app:not(.wire) .segments input:focus-visible+span {
  outline: 3px solid #305e8d; outline-offset: 4px; box-shadow: 0 0 0 6px #f9fcfe;
}
.review, .notes { color: #46617a; background: #f6fafe; border-color: #bccfe3; }
.review :is(strong, small), .notes strong { color: #2c4966; }
.review button { color: #2c4966; background: #eaf2fa; border-color: #90b0d0; }
.review-nav { background: #deeaf6; }
.review-nav button { color: #46617a; }
.review-nav button[aria-current=true] { color: #fff; background: #37628e; }
/* Feature icons have their own motion; headings keep a solid, readable color. */
.app:not(.wire) .feature { --feature-delay: 0s; }
.app:not(.wire) .feature:nth-child(2) { --feature-delay: -.65s; }
.app:not(.wire) .feature:nth-child(3) { --feature-delay: -1.3s; }
.app:not(.wire) .feature > .ui-icon { position: relative; transform-origin: 50% 75%; }
.app:not(.wire) .feature > :is(h2, h3) { position: relative; display: flow-root; max-width: 100%; }
.app:not(.wire) .feature > :is(h2, h3)::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: min(100%, 88px); height: 2px;
  border-radius: 999px; pointer-events: none; opacity: 0; transform-origin: left center;
  background: linear-gradient(90deg, #6091c3, #87acd1, transparent);
}
.app:not(.wire) .feature > .i-book { perspective: 160px; }
.app:not(.wire) .feature > .i-book::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: inherit; clip-path: inset(8% 0 8% 49%); transform-origin: 50% 50%;
}
.app:not(.wire) .feature > .i-trophy::after {
  content: ''; position: absolute; right: 2px; top: 5px; width: 9px; height: 9px;
  background: currentColor; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
@media(hover:hover) and (pointer:fine) {
  .app:not(.wire) .feature:hover { --feature-rise: -7px; --feature-sway: -7deg; --feature-trail: 1; }
}
.app:not(.wire) .feature:focus-within { --feature-rise: -7px; --feature-sway: -7deg; --feature-trail: 1; }
@media(prefers-reduced-motion:no-preference) {
  .app:not(.wire) .feature > .i-people { animation: feature-together-sway 8.4s ease-in-out var(--feature-delay) infinite; }
  .app:not(.wire) .feature > .i-trophy { animation: feature-trophy-celebrate 8.4s ease-in-out var(--feature-delay) infinite; }
  .app:not(.wire) .feature > .i-book { animation: feature-reading-float 8.4s ease-in-out var(--feature-delay) infinite; }
  .app:not(.wire) .feature > .i-book::after { animation: logo-page-turn 8.4s ease-in-out var(--feature-delay) infinite; }
  .app:not(.wire) .feature > .i-trophy::after { animation: feature-trophy-sparkle 8.4s ease-in-out var(--feature-delay) infinite; }
  .app:not(.wire) .feature > :is(h2, h3) { animation: feature-title-lift 8.4s ease-in-out var(--feature-delay) infinite; }
  .app:not(.wire) .feature > :is(h2, h3)::after { animation: feature-title-trail 8.4s ease-in-out var(--feature-delay) infinite; }
}
@keyframes feature-together-sway {
  0%, 10%, 44%, 100% { translate: 0 0; rotate: 0deg; }
  22% { translate: 0 var(--feature-rise, -3px); rotate: var(--feature-sway, -4deg); }
  32% { translate: 0 -1px; rotate: 4deg; }
}
@keyframes feature-trophy-celebrate {
  0%, 12%, 42%, 100% { translate: 0 0; rotate: 0deg; }
  23% { translate: 0 var(--feature-rise, -6px); rotate: var(--feature-sway, -5deg); }
  29% { translate: 0 0; rotate: 2deg; }
  34% { translate: 0 -3px; rotate: 0deg; }
}
@keyframes feature-reading-float {
  0%, 12%, 42%, 100% { translate: 0 0; rotate: 0deg; }
  24% { translate: 0 var(--feature-rise, -3px); rotate: var(--feature-sway, -3deg); }
  32% { translate: 0 -1px; rotate: 2deg; }
}
@keyframes feature-trophy-sparkle {
  0%, 14%, 40%, 100% { opacity: 0; transform: scale(.2) rotate(-35deg); }
  24% { opacity: .9; transform: scale(1) rotate(0deg); }
  34% { opacity: 0; transform: scale(.6) rotate(30deg); }
}
@keyframes feature-title-lift {
  0%, 12%, 48%, 100% { translate: 0 0; }
  27% { translate: 0 -2px; }
}
@keyframes feature-title-trail {
  0%, 10%, 56%, 100% { opacity: 0; transform: scaleX(.15); }
  27% { opacity: var(--feature-trail, .8); transform: scaleX(1); }
  42% { opacity: .2; transform: scaleX(1); }
}

/* Soft depth and a cursor-following light on cards, without tilting the text. */
.app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div) {
  position: relative;
  isolation: isolate;
  transition: translate .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div)::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(250px circle at var(--card-x, 50%) var(--card-y, 50%), #fff9 0%, #cee3f933 38%, transparent 75%);
  opacity: 0;
  transition: opacity .38s ease;
}
@media(hover:hover) and (pointer:fine) {
  .app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div):hover {
    translate: 0 -4px;
    border-color: #99bce0;
    box-shadow: inset 0 1px 2px #fff, 0 20px 38px -23px #34669899, 0 0 24px #87b7e855;
  }
  .app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div):hover::after { opacity: 1; }
}
.app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div):focus-within {
  border-color: #8bb0d5;
  box-shadow: inset 0 1px 2px #fff, 0 0 0 1px #bcd4ed, 0 0 22px #87b7e844;
}
/* Neon stays around the control's edge; labels and surfaces remain sharp. */
.app:not(.wire) :is(button, .button, .btn, .account-link, .segments span, input, select, .top nav a) {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@media(hover:hover) and (pointer:fine) {
  .app:not(.wire) :is(.content button, .button, .btn, .account button):where(:hover):where(:not(:disabled)):not([aria-disabled=true]),
  .app:not(.wire) :is(button.secondary, .button.secondary, .btn.secondary, .btn.quiet):hover:not(:disabled),
  .app:not(.wire) :is(button.choice-tile, button.choice):hover:not(:disabled),
  .app:not(.wire) :is(button.choice-tile.picked, button.choice.picked):hover:not(:disabled) {
    border-color: var(--neon-border);
    box-shadow: var(--neon-glow);
  }
  .app:not(.wire) .top nav :is(a, button):hover,
  .app:not(.wire) :is(.account-link, .top .user):hover {
    box-shadow: 0 0 0 1px #73a4d6, 0 0 13px #579ade66, 0 0 25px #76b2ee44;
    border-radius: 999px;
  }
  .app:not(.wire) .segments :is(label:hover span, button:hover:not(:disabled)) {
    border-color: var(--neon-border);
    box-shadow: var(--neon-glow);
  }
  .app:not(.wire) :is(input:not([type=hidden]):not([type=radio]):not([type=checkbox]), select):hover:not(:disabled) {
    border-color: var(--neon-border);
    box-shadow: inset 0 1px 2px #fff, 0 0 0 1px #bad8f6, 0 0 15px #5a99d94d;
  }
}
/* Animate only the icons of enabled actions; labels and hit targets stay steady. */
.app:not(.wire) :is(button, .button, .btn) .i-book { position: relative; perspective: 120px; }
.app:not(.wire) :is(button, .button, .btn) .i-book::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: inherit; clip-path: inset(8% 0 8% 49%); transform-origin: 50% 50%;
}
@media(prefers-reduced-motion:no-preference) {
  .app:not(.wire) :is(button, .button, .btn):not(:disabled):not([aria-disabled=true]):focus-visible .i-play { animation: action-play-nudge 1.5s ease-in-out infinite; }
  .app:not(.wire) :is(button, .button, .btn):not(:disabled):not([aria-disabled=true]):focus-visible .i-book { animation: action-book-lift 1.6s ease-in-out infinite; }
  .app:not(.wire) :is(button, .button, .btn):not(:disabled):not([aria-disabled=true]):focus-visible .i-book::after { animation: action-page-turn 1.6s ease-in-out infinite; }
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  .app:not(.wire) :is(button, .button, .btn):not(:disabled):not([aria-disabled=true]):hover .i-play { animation: action-play-nudge 1.5s ease-in-out infinite; }
  .app:not(.wire) :is(button, .button, .btn):not(:disabled):not([aria-disabled=true]):hover .i-book { animation: action-book-lift 1.6s ease-in-out infinite; }
  .app:not(.wire) :is(button, .button, .btn):not(:disabled):not([aria-disabled=true]):hover .i-book::after { animation: action-page-turn 1.6s ease-in-out infinite; }
}
@keyframes action-play-nudge {
  0%, 100% { translate: 0 0; scale: 1; }
  35% { translate: 4px 0; scale: 1.08; }
  65% { translate: 1px 0; scale: 1; }
}
@keyframes action-book-lift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  40% { translate: 0 -2px; rotate: -6deg; }
  65% { translate: 0 -1px; rotate: 2deg; }
}
@keyframes action-page-turn {
  0% { opacity: 0; transform: rotateY(0deg); }
  14% { opacity: 1; transform: rotateY(0deg); }
  65% { opacity: .9; transform: rotateY(-155deg); }
  85%, 100% { opacity: 0; transform: rotateY(-175deg); }
}

/* Keep the keyboard outline visible even when the focused control is hovered. */
.app:not(.wire) :is(.game-actions, .room) :is(button, .button, .btn):active:not(:disabled) {
  translate: 0 1px;
  box-shadow: inset 0 2px 5px #2e557d33, 0 0 0 2px #c6dcf3;
}
.app:not(.wire) :is(a, button, input, select):focus-visible,
.app:not(.wire) .segments input:focus-visible+span {
  outline: 3px solid #305e8d;
  outline-offset: 4px;
}
@media(prefers-reduced-motion:reduce) {
  .app:not(.wire) :is(.game-row[data-status=playing] .pill.live, .room[data-status=playing] .badge.live)::before { animation: none; }
  .app:not(.wire) :is(.game-actions, .room) :is(button, .button, .btn):active:not(:disabled) { translate: none; }
  .app:not(.wire) .top, .app:not(.wire) .top::after, .app:not(.wire) .top .brand .ui-icon { transition: none; }
  .app:not(.wire) :is(button, .button, .btn, .account-link, .segments span, input, select, .top nav a) { transition: none; }
  .app:not(.wire)::before, .app:not(.wire)::after { animation: none; transform: none; }
  .app:not(.wire)::before, .app:not(.wire)::after { translate: none; }
  .app:not(.wire)::before { opacity: .4; }
  .app:not(.wire)::after { opacity: .25; }
  .app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div) { translate: none; transition: none; }
  .app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div):hover { translate: none; }
  .app:not(.wire) :is(.card, .feature, .player-card:not(.empty), .reading, .profile-story, .hero>div)::after { transition: none; }
}
@media(max-width:760px) {
  .app .avatar-grid { gap: 10px; }
  .app label.avatar-option { padding: 14px 6px; }
  .app:not(.wire)::before { filter: blur(18px); }
  .app:not(.wire) :is(.profile-story, .component-intro, .waiting-intro) { padding: 22px; border-radius: 26px; }
  .app:not(.wire) .hero { background-position: 80% bottom; background-size: 140% auto; background-color: #dce9f5; }
  .app:not(.wire) :is(.hero-copy, .hero>div) { border-radius: 25px; }
  .app:not(.wire) .reader-controls { padding: 18px; }
}

/* The timer uses solid, readable surfaces; only the current player's portrait reacts. */
.app .turn-timer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin: 18px 0 24px; padding: 16px 18px; border: 1px solid #b1c8df; border-radius: 22px; background: #e9f2fb; color: #2c4966; }
.app .turn-timer p { margin: 5px 0 0; color: #385c82; line-height: 1.5; }
.app .timer-value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: #335f8b; }
.app .timer-track { grid-column: 1 / -1; height: 6px; border-radius: 99px; overflow: hidden; background: #cadced; }
.app .timer-track > span { display: block; height: 100%; background: #4f81b4; transform-origin: left; transform: scaleX(var(--time-left, 1)); transition: transform .2s linear; }
.app .turn-timer[data-stage=thinking] { border-color: #6591bd; background: #e9f0f8; }
.app .turn-timer[data-stage=expired] { border-color: #b98247; background: #fff1da; color: #67411b; }
.app .turn-timer[data-stage=expired] p, .app .turn-timer[data-stage=expired] .timer-value { color: #74471d; }
.app .avatar .thinking-dots { display: none; position: absolute; right: -13px; top: -10px; z-index: 3; padding: 0 4px 2px; border: 1px solid #779ec5; border-radius: 12px 12px 12px 3px; background: #f6fafe; color: #38618b; font: 700 14px/12px sans-serif; }
.app .avatar.is-thinking .thinking-dots { display: block; }
.app .avatar.has-reaction .thinking-dots { display: none; }
.app .avatar .avatar-reaction { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; pointer-events: none; }
.app .avatar.has-reaction .avatar-reaction { opacity: 1; }
@media(prefers-reduced-motion:no-preference) {
  .app .avatar.is-thinking .thinking-dots { animation: thinking-breathe 2.2s ease-in-out infinite; }
}
@keyframes thinking-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media(prefers-reduced-motion:reduce) { .app .timer-track > span { transition: none; } }
@media(max-width:420px) { .app .turn-timer { padding: 14px; gap: 8px 10px; } .app .timer-value { font-size: 26px; } }

/* Cloudy sky wash sits over the same original orb bitmap; book and portrait pixels are unchanged. */
:root { --sky:#dff0fc; --cloud:#f6fbff; --ink:#072146; --muted:#46617a; --primary:#1767a3; --primary-soft:#e2f1fc; }
body { background:#dceefa; }
.app:not(.wire) { background:linear-gradient(140deg,#edf8fff0,#d6edfad9 52%,#e8f5fce8),var(--orb-art) center top / cover,#dceefa; }
.app:not(.wire)::before { opacity:.58; }
.app:not(.wire) .top { background:linear-gradient(110deg,#f8fcff,#e5f2fc); }
.app:not(.wire) .top nav button.active { background:#0b3b82; color:#fff; }
.app:not(.wire) :is(.hero h1,h1,h2,h3,.brand) { color:#072146; }
.app:not(.wire) :is(.ui-icon,.glass-icon),.app:not(.wire) :is(.secondary,.quiet) .ui-icon { filter:brightness(0) saturate(100%) invert(16%) sepia(34%) saturate(1810%) hue-rotate(176deg) brightness(92%) contrast(101%); }
.app:not(.wire) :is(button,.btn):not(.secondary):not(.quiet) .ui-icon { filter:brightness(0) invert(1); }

.app:not(.wire) .top nav :is(a[aria-current=page],button.active) { color:#fff; background:#0b3b82; border-color:#0b3b82; }

/* A deeper, enchanted sky. Each layer moves independently behind the content. */
.app:not(.wire)::before {
  background:
    radial-gradient(ellipse at 5% 28%, #287dddba, transparent 43%),
    radial-gradient(ellipse at 97% 69%, #228ed5a8, transparent 44%),
    radial-gradient(ellipse at 57% 7%, #8bb8ef9c, transparent 40%),
    linear-gradient(115deg, transparent 30%, #8de1ff00 40%, #8de1ff99 48%, #effbffdd 50%, #8de1ff88 52%, transparent 64%);
}
.sky-mystery { display: none; }
.app:not(.wire) > .sky-mystery {
  display: block; position: fixed; inset: 0; z-index: -1;
  overflow: hidden; contain: strict; pointer-events: none;
}
.sky-mystery > span { position: absolute; pointer-events: none; }
.sky-veil {
  inset: -22%; opacity: .7; filter: blur(16px);
  background:
    radial-gradient(ellipse 65% 12% at 24% 30%, #c8f9ffb3, #40abec33 52%, transparent 74%),
    radial-gradient(ellipse 58% 11% at 77% 68%, #e5faffb3, #51afe84d 50%, transparent 75%),
    linear-gradient(122deg, transparent 33%, #f1fcff88 39%, transparent 45%, #3a9bdb33 59%, transparent 69%);
  transform: rotate(-19deg);
  translate: calc(var(--scene-x, 0px) * -.8) calc(var(--scene-y, 0px) * -.8);
}
.sky-mist {
  inset: -15%; opacity: .6;
  background:
    radial-gradient(ellipse 38% 24% at 0% 60%, #f3fcffcc, transparent 72%),
    radial-gradient(ellipse 40% 20% at 100% 35%, #f7fdffcc, transparent 72%),
    radial-gradient(ellipse 54% 14% at 55% 100%, #e3f9ffcc, transparent 75%);
  translate: var(--scene-x, 0px) calc(var(--scene-y, 0px) + var(--scene-scroll, 0px));
}
.sky-halo {
  width: min(56vw, 780px); aspect-ratio: 1; right: -22%; top: 23%;
  border: 1px solid #e7fbffb3; border-radius: 50%; opacity: .6;
  background: radial-gradient(circle, transparent 59%, #d4f6ff55 66%, transparent 71%);
  box-shadow: 0 0 48px #b9efff66, inset 0 0 40px #edfcff77;
  transform: rotate(-24deg) scaleX(.76);
}
.sky-halo::after {
  content: ''; position: absolute; inset: 10%; border-radius: inherit;
  border: 1px solid #f1fcff88;
}
.sky-mote {
  left: var(--x); top: var(--y); width: var(--size); height: var(--size);
  border-radius: 50%; background: #fff; opacity: .7;
  box-shadow: 0 0 7px 2px #f1fcff, 0 0 20px 6px #69d5ff88;
}
.sky-mote:nth-child(3n)::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: linear-gradient(transparent 44%, #f5fcffdd 50%, transparent 56%),
    linear-gradient(90deg, transparent 44%, #f5fcffdd 50%, transparent 56%);
}
@media(prefers-reduced-motion:no-preference) {
  .sky-veil { animation: sky-veil-drift 22s ease-in-out -6s infinite alternate; }
  .sky-mist { animation: sky-mist-drift 27s ease-in-out -12s infinite alternate; }
  .sky-halo { animation: sky-halo-breathe 19s ease-in-out -5s infinite alternate; }
  .sky-mote { animation: sky-mote-rise 18s ease-in-out var(--delay) infinite; }
}
@keyframes sky-veil-drift {
  from { transform: translate3d(-3%, 2%, 0) rotate(-19deg) scale(1); opacity: .5; }
  to { transform: translate3d(5%, -5%, 0) rotate(-9deg) scale(1.12); opacity: .85; }
}
@keyframes sky-mist-drift {
  from { transform: translate3d(-4%, 3%, 0) scale(1); }
  to { transform: translate3d(5%, -4%, 0) scale(1.1); }
}
@keyframes sky-halo-breathe {
  from { transform: translateY(4vh) rotate(-24deg) scaleX(.76); opacity: .35; }
  to { transform: translateY(-5vh) rotate(-12deg) scaleX(.86); opacity: .75; }
}
@keyframes sky-mote-rise {
  0%, 100% { transform: translate3d(-8px, 32px, 0) scale(.65); opacity: 0; }
  20% { opacity: .8; }
  50% { transform: translate3d(12px, -8px, 0) scale(1); opacity: .95; }
  80% { opacity: .55; }
  99% { transform: translate3d(-4px, -65px, 0) scale(.5); opacity: 0; }
}
.app[data-scene-paused]::before, .app[data-scene-paused]::after,
.app[data-scene-paused] .sky-mystery > span { animation-play-state: paused; }
@media(max-width:760px) {
  .sky-veil { filter: blur(10px); }
  .sky-halo { width: 90vw; right: -60%; top: 30%; }
  .sky-mote:nth-child(n+10) { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .app:not(.wire)::before, .app:not(.wire)::after { animation: none; translate: none; }
  .sky-mystery > span { animation: none; translate: none; }
  .sky-mote { opacity: .45; }
}