/* Small, quiet interactions for the existing night-room homepage. */
#lobby-screen .homepage-ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.homepage-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 91% 36%, rgba(237, 175, 94, .11), transparent 48%);
  animation: homepage-lamplight 12s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.homepage-ambient i {
  position: absolute;
  left: var(--mote-x, 12%);
  top: var(--mote-y, 30%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f0d9a4;
  opacity: .25;
  box-shadow: 0 0 7px rgba(240, 217, 164, .35);
  animation: homepage-drift var(--mote-time, 16s) ease-in-out infinite alternate;
  animation-delay: var(--mote-delay, -4s);
  animation-play-state: paused;
}
.homepage-ambient i:nth-child(2) { --mote-x: 28%; --mote-y: 8%; --mote-time: 21s; --mote-delay: -10s; }
.homepage-ambient i:nth-child(3) { --mote-x: 45%; --mote-y: 77%; --mote-time: 19s; --mote-delay: -7s; }
.homepage-ambient i:nth-child(4) { --mote-x: 6%; --mote-y: 67%; --mote-time: 24s; --mote-delay: -15s; }
.homepage-ambient i:nth-child(5) { --mote-x: 53%; --mote-y: 22%; --mote-time: 18s; --mote-delay: -9s; }
.homepage-ambient i:nth-child(6) { --mote-x: 82%; --mote-y: 9%; --mote-time: 23s; --mote-delay: -18s; }
.homepage-ambient i:nth-child(7) { --mote-x: 94%; --mote-y: 76%; --mote-time: 17s; --mote-delay: -12s; }
.homepage-ambient i:nth-child(8) { --mote-x: 37%; --mote-y: 52%; --mote-time: 26s; --mote-delay: -3s; }

#lobby-screen .homepage-demo { max-width: 560px; margin-block: 0 18px; }
.homepage-sketch-row { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.homepage-sketch {
  position: relative;
  isolation: isolate;
  flex: 0 0 152px;
  width: 152px;
  height: 134px;
  padding: 8px 8px 9px;
  border: 1px solid #a99879;
  border-radius: 3px 6px 4px 7px;
  color: #354e46;
  background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(110, 138, 145, .13) 21px 22px), #f0e4cb;
  box-shadow: inset 1px 1px #fff7e5, 3px 5px 0 rgba(19, 28, 25, .45), 0 12px 24px rgba(9, 21, 24, .2);
  transform: rotate(-3deg);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
.homepage-sketch::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 48px;
  width: 55px;
  height: 16px;
  transform: rotate(5deg);
  background: rgba(210, 181, 117, .75);
  box-shadow: 0 1px 2px rgba(74, 60, 40, .1);
}
.homepage-sketch svg { display: block; width: 100%; height: 99px; overflow: visible; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.homepage-sketch > span { display: block; font: 13px/1.2 "Segoe Print", "Bradley Hand", cursive; color: #78644c; }
.homepage-sketch:hover { transform: rotate(0deg) translateY(-3px); box-shadow: inset 1px 1px #fff7e5, 3px 8px 0 rgba(19, 28, 25, .35), 0 14px 24px rgba(9, 21, 24, .2); }
.homepage-sketch:active { transform: rotate(1deg) translateY(1px); }
.homepage-sketch .sketch-accent { stroke: #c17857; }
.homepage-sketch .sketch-heart { fill: #ca7e67; stroke: none; opacity: 0; transform-origin: 142px 27px; }
.homepage-sketch .sketch-eyes { transform-box: fill-box; transform-origin: center; animation: homepage-blink 8s infinite; animation-play-state: paused; }
.homepage-sketch .sketch-steam { animation: homepage-steam 4s ease-in-out infinite; animation-play-state: paused; }
.homepage-sketch .sketch-steam:nth-of-type(even) { animation-delay: -2s; }
.homepage-sketch .sketch-star { animation: homepage-glimmer 5s ease-in-out infinite alternate; animation-play-state: paused; }
.homepage-demo-copy { min-width: 0; }
.homepage-demo-kicker { display: block; max-width: 210px; color: #edc881; font-size: 10px; line-height: 1.65; font-weight: 850; letter-spacing: .09em; }
.homepage-demo-copy p { margin: 6px 0 12px; color: #e4daca; font-size: 13px; line-height: 1.5; }
.homepage-sketch-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.homepage-sketch-choices button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #85958a;
  border-radius: 5px;
  background: rgba(20, 40, 36, .85);
  color: #e8dfcc;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.homepage-sketch-choices button[aria-pressed="true"] { border-color: #d6b574; background: #e5cd96; color: #283e36; box-shadow: inset 1px 1px #fff0cb, 0 2px 0 #716142; }
.homepage-sketch-choices button:hover { transform: translateY(-2px); }
#lobby-screen .homepage-demo .hero-example { margin: 0; gap: 9px; }
.homepage-alias {
  min-height: 47px;
  padding: 7px 12px;
  border: 2px solid #63574d;
  border-radius: 9px 7px 10px 6px;
  background: #eadcc3;
  color: #27342f;
  box-shadow: inset 2px 2px #fff4dd, 2px 5px 0 rgba(54, 47, 42, .62), 0 12px 20px rgba(19, 24, 22, .14);
  font-size: clamp(18px, 1.8vw, 27px);
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s, background .18s, box-shadow .18s;
}
.homepage-alias:nth-of-type(odd) { transform: rotate(-1deg); }
.homepage-alias:nth-of-type(even) { transform: rotate(1.2deg); }
.homepage-alias:hover { transform: translateY(-3px) rotate(0deg); background: #fff0cd; }
.homepage-alias[aria-pressed="true"] { background: #d4e3bd; border-color: #69836b; box-shadow: inset 2px 2px #f1f5d8, 2px 3px 0 #385344, 0 0 18px rgba(156, 195, 133, .13); transform: translateY(2px) rotate(0deg); }
.homepage-alias:active { transform: translateY(3px); }
.homepage-demo-copy .homepage-demo-feedback { min-height: 40px; max-width: 225px; margin: 6px 0 10px; color: #ddd7c8; font-size: 12px; line-height: 1.6; }
.homepage-demo-copy .homepage-demo-feedback[data-correct="true"] { color: #cce6b4; }
#lobby-screen .hero-description { margin-block: 0 15px; }
.homepage-motion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(222, 209, 178, .38);
  border-radius: 5px;
  background: rgba(17, 35, 33, .75);
  color: #e5d9c2;
  font-size: 11px;
  cursor: pointer;
}
.homepage-motion svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.homepage-motion:hover { background: #304a40; border-color: #ddc187; }
.homepage-motion:disabled { cursor: default; opacity: .75; }
.homepage-demo button:focus-visible, .homepage-motion:focus-visible { outline: 3px solid #f0c776; outline-offset: 5px; }

#lobby-screen[data-motion="running"] .homepage-ambient::before,
#lobby-screen[data-motion="running"] .homepage-ambient i,
#lobby-screen[data-motion="running"] .sketch-eyes,
#lobby-screen[data-motion="running"] .sketch-steam,
#lobby-screen[data-motion="running"] .sketch-star { animation-play-state: running; }
#lobby-screen[data-motion="paused"] .homepage-demo button { transition: none; }
#lobby-screen[data-motion="paused"] .homepage-sketch:hover { transform: rotate(-3deg); }
#lobby-screen[data-motion="paused"] .homepage-sketch-choices button:hover { transform: none; }
#lobby-screen[data-motion="paused"] .homepage-alias:hover { transform: none; }
#lobby-screen[data-motion="paused"] .sketch-eyes { animation: none; }

/* Keep these responses small and close to the user's pointer. */
@media (hover: hover) and (pointer: fine) {
  #lobby-screen[data-motion="running"] .join-card :is(.primary-button, .daily-challenge-button, .practice-button) { transition: filter .18s, translate .18s; }
  #lobby-screen[data-motion="running"] .join-card :is(.primary-button, .daily-challenge-button, .practice-button):hover { filter: brightness(1.07); translate: 0 -2px; }
  #lobby-screen[data-motion="running"] #create-room .create-room-arrow { transition: translate .18s; }
  #lobby-screen[data-motion="running"] #create-room:hover .create-room-arrow { translate: 3px 0; }
}
@keyframes homepage-drift { from { transform: translate(0, 12px); opacity: .12; } to { transform: translate(14px, -28px); opacity: .4; } }
@keyframes homepage-lamplight { from { opacity: .45; } to { opacity: 1; } }
@keyframes homepage-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@keyframes homepage-steam { 0%, 100% { transform: translateY(2px); opacity: .45; } 50% { transform: translateY(-4px); opacity: .8; } }
@keyframes homepage-glimmer { from { opacity: .4; } to { opacity: 1; } }
@media (max-width: 780px) {
  .homepage-sketch-row { gap: 20px; }
  #lobby-screen .homepage-demo { margin-block: 0 14px; }
  #lobby-screen .hero-description { margin-bottom: 14px; }
  #lobby-screen .homepage-motion { margin-bottom: 32px; }
}
@media (max-width: 460px) {
  .homepage-sketch { flex-basis: 126px; width: 126px; height: 121px; }
  .homepage-sketch svg { height: 86px; }
  .homepage-sketch::before { left: 36px; }
  .homepage-sketch-row { gap: 17px; }
  .homepage-demo-kicker { font-size: 9px; }
  .homepage-sketch-choices { gap: 5px; }
  .homepage-sketch-choices button { padding-inline: 8px; }
  #lobby-screen .homepage-demo .hero-example { gap: 6px; }
  .homepage-alias { padding: 6px 8px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  #lobby-screen .homepage-ambient::before,
  #lobby-screen .homepage-ambient i,
  #lobby-screen .sketch-eyes,
  #lobby-screen .sketch-steam,
  #lobby-screen .sketch-star { animation: none; }
  #lobby-screen .hero-copy *, #lobby-screen .join-card * { transition: none; }
}