/* Home, settings and shared screen chrome */
.layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  position: relative;
  z-index: 3;
}
.topbar .grow {
  flex: 1;
}
.topbar .chip {
  font-size: 1.1rem;
  padding: 6px 14px 6px 8px;
}
.topbar .ttl {
  flex: 1;
  text-align: center;
  font: 800 1.45rem/1 var(--font-t);
  color: var(--gold);
  text-shadow: 0 3px 0 #164238;
}

.home {
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: calc(var(--sat) + 66px);
}
.home > .topbar {
  position: absolute;
  top: calc(var(--sat) + 10px);
  left: calc(var(--sal) + 14px);
  right: calc(var(--sar) + 14px);
}
.home .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 auto;
  min-height: 0;
  width: min(100%, 620px);
}
.logo {
  position: relative;
  z-index: 2;
}
.logoImg {
  display: block;
  width: min(80vw, 48vh, 470px);
  height: auto;
  filter: drop-shadow(0 6px 12px #03100e99);
}
.logoText {
  display: flex;
  font: 800 clamp(3rem, 12vw, 6rem) / 1 var(--font-t);
  color: #b6e86a;
  text-shadow: 0 4px 0 #163d1c;
}
.logoText .o {
  color: #6fcf4a;
}
.logoText .o2 {
  color: var(--gold);
}
.tagline {
  margin-top: 6px;
  color: #eef9e6;
  font: 800 clamp(0.78rem, 2.8vw, 1rem) / 1.3 var(--font);
  text-align: center;
  text-shadow: 0 2px 5px #07150e;
}
.boStage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .boStage {
  height: clamp(130px, 29vh, 280px);
  margin: 8px 0;
}
.home .boStage .bo {
  --bo: clamp(130px, 27vh, 260px);
  pointer-events: auto;
  cursor: pointer;
}
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.playBtn {
  width: min(80vw, 340px);
}
.playBtn .ic {
  width: 1em;
  height: 1em;
}
.dock {
  display: flex;
  gap: clamp(10px, 4vw, 22px);
  justify-content: center;
  margin-top: 2px;
}
.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.door .btn {
  width: 72px;
  min-height: 72px;
  padding: 0;
  background: none;
  box-shadow: none;
} /* bare illustrated icons, no disc */
.door .btn:active,
.door .btn.down {
  box-shadow: none;
  transform: translateY(2px) scale(0.93);
}
.door .btn .ic,
.door .btn .artIcon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px #03100ecc);
}
.doorLabel {
  font-size: 0.8rem;
  color: #eef9e6;
  text-shadow: 0 2px 4px #07150e;
}
@media (max-height: 650px) and (max-aspect-ratio: 5/4) {
  .home {
    gap: 4px;
    padding-top: calc(var(--sat) + 58px);
  }
  .home .boStage {
    height: 24vh;
    margin: 2px 0;
  }
  .home .boStage .bo {
    --bo: 22vh;
  }
  .home .actions {
    gap: 6px;
  }
  .home .playBtn {
    min-height: 52px;
  }
  .home .dock .btn {
    width: 60px;
    min-height: 60px;
  }
  .home .dock .artIcon {
    width: 56px;
    height: 56px;
  }
}
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-top: calc(var(--sat) + 56px);
    padding-bottom: calc(var(--sab) + 10px);
  }
  .home .hero {
    display: contents;
  }
  .home .logo {
    grid-column: 1;
    align-self: end;
    justify-self: center;
  }
  .home .logoImg {
    width: min(43vw, 220px);
  }
  .home .tagline {
    display: none;
  }
  .home .boStage {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 100%;
    margin: 0;
  }
  .home .boStage .bo {
    --bo: min(34vw, 54vh);
  }
  .home .actions {
    grid-column: 1;
    gap: 6px;
  }
  .home .playBtn {
    width: min(43vw, 270px);
    min-height: 48px;
    font-size: 1.25rem;
  }
  .home .dock {
    gap: 10px;
  }
  .home .dock .btn {
    width: 54px;
    min-height: 54px;
  }
  .home .dock .artIcon {
    width: 50px;
    height: 50px;
  }
  .home .doorLabel {
    font-size: 0.65rem;
  }
}

/* modal close + settings */
.mClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #0a2120;
  color: var(--lav2);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #ffffff22;
}
.mClose .ic {
  width: 20px;
  height: 20px;
}
.setList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid #ffffff12;
  cursor: pointer;
}
.setRow > span:first-child {
  flex: 1;
}
.setRow.col {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}
.setRow input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #0a2120;
  box-shadow: inset 0 0 0 1.5px #ffffff22;
  position: relative;
  transition: background 0.2s;
  flex: none;
}
.switch::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #7fa88c;
  transition:
    transform 0.22s var(--ease-spring),
    background 0.2s;
}
.setRow input:checked + .switch {
  background: #22b7aa;
}
.setRow input:checked + .switch::after {
  transform: translateX(20px);
  background: #fff;
}
.setRow input:focus-visible + .switch {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.setRow select {
  font: 800 0.95rem var(--font);
  color: var(--text);
  background: #0a2120;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1.5px #ffffff22;
  max-width: 55%;
}
/* volume sliders: the switch's colours (teal fill, white knob); the row dims at 0 = off */
.volRow input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 1 46%;
  min-width: 96px;
  height: 28px;
  margin: 0;
  background: none;
  cursor: pointer;
  touch-action: pan-y;
}
.volRow input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #22b7aa var(--v, 100%), #0a2120 var(--v, 100%));
  box-shadow: inset 0 0 0 1.5px #ffffff22;
}
.volRow input[type='range']::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #22b7aa var(--v, 100%), #0a2120 var(--v, 100%));
  box-shadow: inset 0 0 0 1.5px #ffffff22;
}
.volRow input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px #0008;
}
.volRow input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px #0008;
}
.volRow input[type='range']:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 8px;
}
.volPct {
  flex: none;
  width: 3.2em;
  text-align: right;
  font: 800 0.85rem var(--font);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.volRow.mute > span:first-child,
.volRow.mute .volPct {
  opacity: 0.5;
}
.volRow.mute input[type='range']::-webkit-slider-thumb {
  background: #7fa88c;
}
.volRow.mute input[type='range']::-moz-range-thumb {
  background: #7fa88c;
}
.seg {
  display: flex;
  gap: 6px;
}
.segB {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 9px 6px;
  background: #0a2120;
  color: var(--muted);
  font: 800 0.85rem var(--font);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #ffffff1a;
}
.segB.on {
  background: #2f8a5a;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #a8e6a0;
}
.setBtns {
  margin-top: 14px;
}
.btn.danger {
  --b-top: #7a2a4a;
  --b-bot: #5a1a36;
  --b-edge: #300a1c;
}
.credits {
  margin-top: 12px;
  font-size: 0.8rem;
}
.confirm p {
  font-size: 1.1rem;
  margin: 6px 6px 16px;
}

/* the logo breathes and a soft shine sweeps across its letters every few seconds */
.logoShine {
  position: relative;
  display: inline-block;
  animation: logoFloat 5s ease-in-out infinite;
}
.logoShine::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      105deg,
      transparent 35%,
      #fff8 47%,
      #fffc 50%,
      #fff8 53%,
      transparent 65%
    )
    no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  animation: logoShine 4.8s ease-in-out infinite 1.2s;
  mix-blend-mode: screen;
}
@keyframes logoShine {
  0%,
  62% {
    background-position: 160% 0;
  }
  82%,
  100% {
    background-position: -60% 0;
  }
}
@keyframes logoFloat {
  50% {
    transform: translateY(-4px) rotate(-0.6deg);
  }
}

/* ---- the hall comes alive: the green lamps breathe and shed fireflies; twinkles around Bo ---- */
.lampFx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.lampFx .lamp {
  position: absolute;
  width: 0;
  height: 0;
}
.lampFx .flare {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--r) * 4.2);
  height: calc(var(--r) * 4.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  background: radial-gradient(circle, #f2ffd47a 0%, #9dffc044 18%, #46d99a22 40%, transparent 68%);
  animation: lampBreath 4.6s ease-in-out infinite;
}
/* a soft horizontal lens streak through the lamp */
.lampFx .flare::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 3px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent,
    #e6ffd866 35%,
    #ffffffaa 50%,
    #e6ffd866 65%,
    transparent
  );
  border-radius: 2px;
  opacity: 0.7;
}
.lampFx i {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #f1ffb8;
  box-shadow:
    0 0 6px 2px #a6ff9caa,
    0 0 14px 4px #5fe0a044;
  opacity: 0;
  animation: firefly var(--t) ease-in-out var(--d) infinite;
}
@keyframes lampBreath {
  50% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.9);
  }
}
@keyframes firefly {
  0% {
    opacity: 0;
    transform: translate(var(--x0), var(--y0));
  }
  20% {
    opacity: 1;
  }
  55% {
    transform: translate(
      calc(var(--x0) + var(--dx) * 0.55),
      calc(var(--y0) + var(--dy) * 0.4 - 10px)
    );
  }
  80% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--dy)));
  }
}
.boSparks {
  position: absolute;
  inset: -6% 4%;
  pointer-events: none;
}
.boSparks i {
  --ang: calc(var(--a) * 51.4deg + 14deg);
  position: absolute;
  left: 50%;
  top: 52%;
  width: 16px;
  height: 16px;
  margin: -8px;
  background: #fff4c4;
  filter: drop-shadow(0 0 4px #ffe58a) drop-shadow(0 0 8px #9dffc0aa);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: rotate(var(--ang)) translate(clamp(70px, 15vh, 150px)) rotate(calc(-1 * var(--ang)))
    scale(0);
  animation: twinkle 3.2s ease-in-out infinite;
  animation-delay: calc(var(--a) * -0.47s);
}
.boSparks i:nth-child(even) {
  width: 11px;
  height: 11px;
  margin: -5.5px;
  background: #d9ffe9;
}
@keyframes twinkle {
  0%,
  100% {
    transform: rotate(var(--ang)) translate(clamp(70px, 15vh, 150px)) rotate(calc(-1 * var(--ang)))
      scale(0);
  }
  45% {
    transform: rotate(var(--ang)) translate(clamp(70px, 15vh, 150px))
      rotate(calc(-1 * var(--ang) + 45deg)) scale(1);
  }
}
body.calm .lampFx .flare,
body.calm .boSparks i {
  animation: none;
}
body.calm .lampFx i,
body.calm .boSparks {
  display: none;
}

/* Play in green glass to match the lamps; the map joined the shortcut tiles, so the row holds five */
html[data-art-direction] .home .btn.gold.playBtn {
  background: linear-gradient(160deg, #8dffc4b0, #3fc79080 55%, #a8ffd690);
  border-color: #c9ffe08c;
  color: #f6fff9;
  text-shadow: 0 1px 2px #06301ea0;
  box-shadow:
    inset 0 1.5px 0 #e9fff1d8,
    inset 0 -1px 0 #9dffc048,
    inset 0 0 22px #7dffb838,
    0 0 26px #5fe0a066,
    0 8px 22px #0818105c;
}
.home .dock .door .artIcon {
  object-fit: contain;
}
@media (max-width: 600px) {
  html .screen.home .dock {
    gap: 6px;
  }
  html .screen.home .dock .btn.door {
    width: min(calc((100vw - 56px) / 5), 88px);
    min-height: 84px;
    padding: 6px 2px;
  }
  html .screen.home .dock .door > .ic {
    width: 44px;
    height: 44px;
  }
  html .screen.home .dock .doorLabel {
    font-size: 0.72rem;
  }
}

/* ---- title moment: the hall is dark, Bo sleeps under his Z's, "tap to start" glows; the tap lights everything up ---- */
html[data-art-direction] .scene .sceneImg {
  transition: filter 1.6s ease;
}
html[data-art-direction] .scene.dim.art .sceneImg,
html[data-art-direction] .scene.dim .sceneImg {
  filter: brightness(0.38) saturate(0.75);
}
.scene .lampFx {
  transition: opacity 0.9s ease 0.35s;
}
.scene.dim .lampFx {
  opacity: 0;
  transition: none;
}
.scene:not(.dim) .lampFx .flare {
  animation:
    lampOn 1.1s ease-out 0.35s backwards,
    lampBreath 4.6s ease-in-out 1.5s infinite;
}
@keyframes lampOn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  32% {
    opacity: 0.15;
  }
  48% {
    opacity: 1;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.home.asleep :is(.navSpace, .logo, .tagline, .actions) {
  opacity: 0;
  pointer-events: none;
}
.home.asleep .logo {
  transform: scale(0.85);
}
.home.asleep .actions {
  transform: translateY(30px);
}
.home.asleep .boSparks {
  display: none;
}
.home.asleep {
  cursor: pointer;
}
.home.waking .logo {
  transition:
    opacity 0.7s ease 0.9s,
    transform 0.9s var(--ease-spring) 0.9s;
}
.home.waking .tagline {
  transition: opacity 0.6s ease 1.3s;
}
.home.waking .actions {
  transition:
    opacity 0.6s ease 1.5s,
    transform 0.7s var(--ease-spring) 1.5s;
}
.home.waking .navSpace {
  transition: opacity 0.6s ease 1.8s;
}
.home.waking .boSparks {
  animation: fadeIn 0.8s ease 1.2s both;
}

.zzz {
  position: absolute;
  left: 60%;
  top: -36%;
  width: 160px;
  height: 160px;
  pointer-events: none;
}
.zzz i {
  position: absolute;
  left: 0;
  bottom: 0;
  font: 800 34px/1 var(--font-t);
  font-style: normal;
  color: #e6fbf1;
  text-shadow:
    0 0 10px #a8e6a0aa,
    0 2px 4px #08181099;
  opacity: 0;
  animation: zfloat 3.6s ease-in-out infinite;
}
.zzz i:nth-child(2) {
  animation-delay: 0.6s;
  font-size: 42px;
}
.zzz i:nth-child(3) {
  animation-delay: 1.2s;
  font-size: 52px;
}
.zzz i:nth-child(4) {
  animation-delay: 1.8s;
  font-size: 38px;
}
.zzz i:nth-child(5) {
  animation-delay: 2.4s;
  font-size: 46px;
}
.zzz i:nth-child(6) {
  animation-delay: 3s;
  font-size: 56px;
}
@keyframes zfloat {
  0% {
    opacity: 0;
    transform: translate(0, 10px) rotate(-12deg) scale(0.6);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(90px, -120px) rotate(14deg) scale(1.15);
  }
}
.zzz.out,
.tapStart.out {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.tapStart {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sab) + 12vh);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  padding: 12px 26px;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  font: 800 1.15rem var(--font-t);
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, #ffffff2e, #ffffff0d 50%, #ffffff1c);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid #ffffff4d;
  box-shadow:
    inset 0 1.5px 0 #ffffff99,
    0 8px 22px #0818105c;
  text-shadow: 0 1px 2px #08181099;
  animation: tapPulse 2.2s ease-in-out infinite;
}
@keyframes tapPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(0.97);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
body.calm .zzz i {
  animation: none;
  opacity: 0.9;
}
body.calm .zzz i:nth-child(n) {
  position: absolute;
}
body.calm .zzz i:nth-child(2) {
  transform: translate(24px, -30px);
}
body.calm .zzz i:nth-child(3) {
  transform: translate(50px, -64px);
}
body.calm .zzz i:nth-child(4) {
  display: none;
}

/* Bo's speech over the home tagline: the tagline steps back while he talks, so the bubble never hides the words */
.home .tagline {
  transition: opacity 0.4s ease;
}
.home:has(.bubble:not(.out)) .tagline {
  opacity: 0.1;
}

/* Frogdoku art: the home painting is a bright sunrise, so the tagline sits on a soft dark pill */
.tagline {
  padding: 3px 12px;
  border-radius: 999px;
  background: #0a221fa6;
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px #07150e;
}
/* End of src/styles/home.css */

/* End of dist-static/assets/home-BakZS7YA.css */