/* Home: clean, quiet, focused on PLAY. */
.ds-root[data-phase=intro] { --stage-side: 0px; --stage-bottom: 0px; }

/* Kill all the flashing/glitching/bobbing garbage on the home screen */
.ds-root[data-phase=intro] .ds-title { animation: none; }
.ds-root[data-phase=intro] .ds-title span { animation: none; }
.ds-root[data-phase=intro] .ds-begin-btn { animation: none; }
.ds-root[data-phase=intro] .ds-crt { opacity: 0; }
.ds-root[data-phase=intro] .ds-vignette { opacity: .1; }
.ds-root[data-phase=intro] .ds-mascot { filter: none; z-index: 13; }
.ds-root[data-phase=intro] .ds-mascot img { animation: ds-swim 4s var(--ds-ease-io) infinite; }

/* Title area — calm, legible */
.ds-root[data-phase=intro] .ds-title {
  color: #102f46;
  text-shadow: -3px 3px #ff719a, 3px -3px #f0fcff;
}
.ds-root[data-phase=intro] .ds-tagline {
  color: #174b64;
  text-shadow: 0 1px #e4faff;
  font-size: clamp(20px, 4vw, 25px);
  letter-spacing: .28em;
  margin-top: 18px;
}
.ds-root[data-phase=intro] .ds-subline {
  color: #294c64;
  text-shadow: 0 1px #e4faff;
  font-size: clamp(16px, 3.5vw, 19px);
  letter-spacing: .035em;
  max-width: 34ch;
  margin: 12px auto 0;
  line-height: 1.35;
  text-wrap: balance;
}
.ds-root[data-phase=intro] .ds-subline span { display: block; }

/* Utility buttons — minimal */
.ds-root[data-phase=intro] .ds-mute,
.ds-root[data-phase=intro] .utility-button {
  top: max(20px, env(safe-area-inset-top));
  width: 34px; height: 30px;
  color: #e3f3f7; background: #16384b90;
  opacity: .7; border-radius: 6px; box-shadow: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .15s;
}
.ds-root[data-phase=intro] .utility-button:hover,
.ds-root[data-phase=intro] .ds-mute:hover { opacity: 1; }
.ds-root[data-phase=intro] .menu-button { left: max(20px, env(safe-area-inset-left)); }
.ds-root[data-phase=intro] .ds-mute { right: max(108px, calc(env(safe-area-inset-right) + 108px)); }
.ds-root[data-phase=intro] .settings-button { right: max(64px, calc(env(safe-area-inset-right) + 64px)); }
.ds-root[data-phase=intro] .wardrobe-button { right: max(20px, env(safe-area-inset-right)); }

/* Bottom intro panel */
.ds-root[data-phase=intro] .ds-intro {
  padding: 28px 24px max(28px, env(safe-area-inset-bottom));
  --ds-wash: linear-gradient(180deg, #050a1400, #050a14f0 32%, #050a14);
  --ds-wash-end: #050a14;
}
.ds-intro-inner { max-width: 440px; gap: 14px; }
.ds-root[data-phase=intro] .ds-intro:has(details[open]) { max-height: none; overflow: visible; }

/* Heading row */
.home-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-heading > span { color: #5a7089; font-size: 13px; letter-spacing: .16em; }
.home-heading .ds-howto { position: relative; }
.home-heading .ds-howto summary { color: #5a7089; min-height: 32px; display: flex; align-items: center; font-size: 12px; letter-spacing: .1em; transition: color .15s; }
.home-heading .ds-howto summary:hover { color: #b3c9dc; }
.home-heading .ds-howto ul {
  position: absolute; z-index: 2; bottom: calc(100% + 12px); right: 0;
  width: min(420px, calc(100vw - 48px)); max-height: min(340px, 45dvh); overflow-y: auto;
  padding: 18px 22px; gap: 9px; background: #0b1828ee; color: #d2e4f4;
  border: 1px solid #ffffff10; border-radius: 10px;
  box-shadow: 0 16px 48px #0008;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 15px; letter-spacing: .025em; text-transform: none;
}

/* BEGIN button — the ONE thing that matters */
.ds-root[data-phase=intro] .ds-begin-btn {
  min-height: 58px; padding: 13px 24px 11px;
  background: #ff719a; color: #1b1427;
  font-size: clamp(21px, 5vw, 25px); letter-spacing: .14em;
  border-radius: 10px;
  box-shadow: 0 4px 24px #ff719a40;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.ds-root[data-phase=intro] .ds-begin-btn:hover { background: #ff8cac; transform: translateY(-2px); box-shadow: 0 8px 32px #ff719a50; }
.ds-root[data-phase=intro] .ds-begin-btn:active { transform: translateY(1px); box-shadow: 0 2px 12px #ff719a30; }

/* Two secondary links — that's it */
.ds-intro .intro-links {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; width: 100%;
}
.ds-intro .intro-links a {
  display: flex; justify-content: center; align-items: center;
  min-height: 42px; padding: 8px 6px;
  background: transparent; border: 1px solid #ffffff10; border-radius: 8px;
  color: #5a7089; font-size: 14px; letter-spacing: .06em; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ds-intro .intro-links #unlimited-link { color: #6ee4ef80; }
.ds-intro .intro-links .noillirk-link { color: #ffd45e80; }
.ds-intro .intro-links a:hover { border-color: #ffffff20; color: #e8f1ff; }

/* Footer — barely visible, out of the way */
.home-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 2px; padding-top: 10px; border-top: 1px solid #ffffff06;
}
.footer-links { display: flex; gap: 16px; }
.footer-links a, .home-footer button {
  color: #3d5468; font-size: 12px; letter-spacing: .06em;
  transition: color .15s; padding: 4px 0;
}
.footer-links a:hover, .home-footer button:hover { color: #7d93b8; }

/* --- Responsive --- */
@media (max-width: 499px) {
  .ds-root[data-phase=intro] .ds-title { font-size: clamp(64px, 17vw, 84px); letter-spacing: .025em; }
  .ds-root[data-phase=intro] .ds-surface { top: -290px; }
  .ds-root[data-phase=intro] .ds-intro { padding: 20px 20px max(22px, env(safe-area-inset-bottom)); }
  .ds-intro-inner { gap: 12px; }
  .ds-intro .intro-links a { font-size: 13px; min-height: 38px; }
  .footer-links { gap: 12px; }
  .footer-links a, .home-footer button { font-size: 11px; }
}
@media (max-height: 700px) {
  .ds-root[data-phase=intro] .ds-surface { top: -235px; }
  .ds-root[data-phase=intro] .ds-title { font-size: clamp(60px, 13vw, 90px); }
  .ds-root[data-phase=intro] .ds-tagline { margin-top: 12px; font-size: 20px; }
  .ds-root[data-phase=intro] .ds-subline { margin-top: 7px; font-size: 16px; }
  .ds-root[data-phase=intro] .ds-intro { padding-top: 18px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .ds-intro-inner { gap: 10px; }
  .ds-root[data-phase=intro] .ds-begin-btn { min-height: 50px; padding-top: 10px; padding-bottom: 8px; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .ds-root[data-phase=intro] .ds-surface { top: -143px; }
  .ds-root[data-phase=intro] .ds-title { font-size: 58px; }
  .ds-root[data-phase=intro] .ds-tagline { font-size: 17px; margin-top: 7px; }
  .ds-root[data-phase=intro] .ds-subline { font-size: 14px; margin-top: 3px; max-width: none; }
  .ds-root[data-phase=intro] .ds-intro { padding: 8px 24px 12px; }
  .ds-intro-inner { display: grid; max-width: 660px; grid-template-columns: 1fr 1.3fr; gap: 8px 18px; }
  .home-heading, .home-footer { grid-column: 1 / -1; }
  .ds-root[data-phase=intro] .ds-begin-btn { font-size: 22px; min-height: 48px; }
  .ds-intro .intro-links a { font-size: 13px; }
  .home-footer { padding-top: 0; border-top: 0; }
}