@font-face {
  font-family: "Lilita One";
  src: url("/brand/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #1b1b2f;          /* game frames and the player stay dark */
  --night: #141428;
  --sky-top: #efe6ff;      /* lavender, the balloons' purple washed out */
  --sky-bottom: #ffeaf2;   /* peach-pink */
  --plum: #3b1d6e;         /* text on the sky: the balloons' outline */
  --plum-muted: #3b1d6ebf;
  --text: #fff;
  --muted: #ffffffb3;
  --accent: #ffb703;
  --pink: #ff3d9a;
  --display: "Lilita One", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* App feel: no rubber-band scroll, tap flashes, text selection or callouts. */
html { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
body {
  background: var(--sky-top);
  color: var(--plum);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.playing { overflow: hidden; }
a { color: inherit; }
[hidden] { display: none !important; }

/* The backdrop: a pastel party sky for the balloon letters, with soft
   glows in the balloons' own colours and a faint confetti-dot grid. */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 0%, #ffffffcc, transparent 70%),
    radial-gradient(700px 500px at 0% 30%, #c9a8ff59, transparent 70%),
    radial-gradient(700px 500px at 100% 20%, #ffc2dc66, transparent 70%),
    radial-gradient(1000px 600px at 50% 110%, #ffd9b866, transparent 70%),
    linear-gradient(var(--sky-top), var(--sky-bottom));
}
.sky::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(#7c4dff24 1.4px, transparent 1.6px);
  background-size: 28px 28px;
  mask-image: linear-gradient(#000, transparent 80%);
}

/* --- homescreen --- */

#home {
  max-width: 1120px; margin: 0 auto;
  overflow-x: clip; /* the live logo's canvas overhangs; never a sideways scroll */
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
}

.hero { text-align: center; padding: clamp(32px, 6vw, 64px) 0 clamp(30px, 5vw, 52px); }
.hero h1 { margin: 0; line-height: 0; }
/* The logo's box is the static wordmark's size, so nothing moves when the
   live logo replaces it. */
.logo-box {
  position: relative; display: inline-block;
  /* 87vw keeps the overhanging canvas (114% of this) inside a phone screen. */
  width: min(840px, 87vw); aspect-ratio: 1580 / 389;
}
.logo {
  width: 100%; height: auto;
  filter: drop-shadow(0 14px 22px #5b2aa040);
  animation: bob 4s ease-in-out infinite;
  transition: opacity .35s ease;
}
/* The live logo (app.js). Its world is the 1580x389 logo (wordmark + face)
   with margin for glows, floats, pops and bursts (1800x599, see
   site/logo/logo.luau), so the canvas overhangs the box by the same
   proportions: 110/1580 each side, 120/389 above and 90/389 below.
   Vertical swipes still scroll the page. */
.logo-live {
  position: absolute; left: -6.962%; top: -30.848%; width: 113.924%; height: 153.985%;
  opacity: 0; transition: opacity .35s ease;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.logo-box.live .logo-live { opacity: 1; }
.logo-box.live .logo { opacity: 0; animation-play-state: paused; }

.games {
  display: grid; gap: clamp(18px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 24px));
}

.card {
  display: block; text-decoration: none; color: inherit;
  border-radius: 28px; padding: 10px;
  background: var(--ink);
  color: var(--text);
  box-shadow: 0 0 0 3px #ffffff, 0 8px 0 #c7b2f0, 0 22px 40px #5b2aa033;
  transition: transform .18s cubic-bezier(.3, 1.6, .6, 1), box-shadow .18s;
  animation: rise .6s cubic-bezier(.2, 1.2, .4, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  outline: none;
}
a.card:hover, a.card:focus-visible {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 0 0 3px var(--accent), 0 12px 0 #c7b2f0, 0 30px 50px #5b2aa04d;
}
a.card:active { transform: translateY(-2px) scale(.98); }

.screen {
  position: relative; aspect-ratio: 3 / 5; border-radius: 20px; overflow: hidden;
  background: #26264a;
}
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.play-btn {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--ink);
  box-shadow: 0 5px 0 var(--ink), 0 10px 20px #0006;
  transition: transform .18s cubic-bezier(.3, 1.6, .6, 1);
}
.play-btn svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
a.card:hover .play-btn { transform: scale(1.12); }

.meta { padding: 14px 8px 6px; }
.meta h3 {
  margin: 0; font: 400 28px/1.1 var(--display); letter-spacing: .5px;
  color: var(--accent);
}
.meta p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

.card.soon { background: transparent; box-shadow: none; padding: 10px; }
.card.soon .screen {
  display: grid; place-items: center; text-align: center;
  background: #ffffff59; border: 3px dashed #7c4dff40;
  font: 400 24px/1.2 var(--display); color: #7c4dff80;
}


/* --- player --- */

#play { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--ink); }
.bar {
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--sky-top); color: var(--plum);
  box-shadow: 0 1px 0 #3b1d6e1a;
}
.back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  text-decoration: none; font: 400 18px/1 var(--display); letter-spacing: .5px;
  background: #3b1d6e14;
}
.back:hover, .back:focus-visible { background: var(--accent); color: var(--ink); outline: none; }
.play-title { margin: 0; font: 400 22px/1 var(--display); letter-spacing: .5px; color: var(--plum); }
.stage { position: relative; flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--ink); }
#canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.status {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 22px var(--display); color: #ffffff80; pointer-events: none;
}

.noscript { text-align: center; padding: 40px 16px; }


/* --- install sheet --- */

.sheet {
  position: fixed; z-index: 10;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center;
  padding: 16px; border-radius: 24px;
  background: #fff; color: var(--plum);
  box-shadow: 0 0 0 2px #7c4dff26, 0 8px 0 #c7b2f0, 0 24px 60px #3b1d6e40;
  transform: translateY(calc(100% + 40px)); opacity: 0;
  transition: transform .35s cubic-bezier(.2, 1.3, .4, 1), opacity .2s;
}
.sheet.open { transform: none; opacity: 1; }
.sheet-icon { width: 64px; height: 64px; border-radius: 16px; }
.sheet h2 { margin: 0; font: 400 22px/1.1 var(--display); letter-spacing: .3px; color: #7c3aed; }
.sheet-text { margin: 4px 0 0; color: var(--plum-muted); font-size: 15px; line-height: 1.35; }
.sheet-steps { margin: 6px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.sheet-steps li { margin: 4px 0; }
.sheet-steps .ico { width: 20px; height: 20px; vertical-align: -4px; margin: 0 2px; color: #4da3ff; }
.sheet-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.btn {
  flex: 1; border: 0; border-radius: 999px; padding: 13px 18px; cursor: pointer;
  font: 400 18px/1 var(--display); letter-spacing: .4px;
  background: #3b1d6e12; color: var(--plum);
  transition: transform .12s, background .12s;
}
.btn:active { transform: scale(.96); }
.btn.primary { background: #8b3dff; color: #fff; box-shadow: 0 4px 0 #4c1d95; }
@media (hover: hover) {
  .btn:hover { background: #3b1d6e1f; }
  .btn.primary:hover { background: #9b55ff; }
}

@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .logo, .card { animation: none; }
  .card, .play-btn { transition: none; }
}

@media (max-width: 600px) {
  .card.soon .screen { aspect-ratio: 5 / 2; }
}