/* R-016: title screen (docs/design/Title.dc.html). Colour only via the
   --c-<key> custom properties (R-008.10) — A-008.9's no-hex-literal grep
   also covers this file. Reuses .icon-btn/.coins-pill/.btn/.btn-primary/
   .btn-secondary/.display-font (hud.css/cards.css/components.css); only the
   title-specific layout/decoration lives here. Sizes use clamp()/min() of
   vw and vh so the whole screen fits both 320x568 and 390x844 without
   scrolling (A-016.4). */

.title-screen {
  position: fixed;
  inset: 0;
  z-index: 20; /* below the game-over overlay (30), popups (35), rotate (40) */
  overflow: hidden;
  background: var(--c-background);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---- R-016.1/R-008.13-style CSS-only decoration, never takes input ---- */
.title-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.title-cloud--a { left: 62%; top: 6%; width: 32%; height: 6%; }
.title-cloud--b { left: -6%; top: 34%; width: 26%; height: 5%; }

.title-hill {
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  width: 170%;
  height: min(46vh, 320px);
  border-radius: 50%;
  background: var(--c-hill);
  border: 3px solid var(--c-text);
}
.title-hill-light {
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  width: 140%;
  height: min(38vh, 270px);
  border-radius: 50%;
  background: var(--c-hillLight);
}

.title-content {
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* safety valve; the sizes below are tuned not to need it */
}

.title-top-row { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; }

.title-logo {
  flex: 0 0 auto;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-4deg);
}

.title-logo-line {
  font-size: clamp(26px, min(11vw, 8vh), 64px);
  line-height: 0.92;
  letter-spacing: 1px;
}
.title-logo-line--a {
  color: var(--c-brand);
  text-shadow:
    0 3px 0 var(--c-text), 3px 0 0 var(--c-text), -3px 0 0 var(--c-text), 0 -3px 0 var(--c-text),
    2px 2px 0 var(--c-text), -2px 2px 0 var(--c-text), 2px -2px 0 var(--c-text), -2px -2px 0 var(--c-text);
}
.title-logo-line--b {
  color: var(--c-coin);
  text-shadow:
    0 3px 0 var(--c-text), 3px 0 0 var(--c-text), -3px 0 0 var(--c-text), 0 -3px 0 var(--c-text),
    2px 2px 0 var(--c-text), -2px 2px 0 var(--c-text), 2px -2px 0 var(--c-text), -2px -2px 0 var(--c-text);
}

.title-tagline {
  flex: 0 0 auto;
  margin: 8px 0 0;
  text-align: center;
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 600;
}

/* R-016.2 (round 4 clarification): this box is the flexible space between the
   tagline and the best-score chip. It grows to absorb whatever vertical room
   is left over (more on a tall phone, ~none on a short one) so the pile
   itself — an inner stage sized/positioned by ui/titleHero.js, anchored with
   bottom: 0 (see .title-hero-stage below) — stays pinned to the bottom of
   this box: spare height ends up above the pile, never between the pile and
   the chip (A-016.6). ui/titleHero.js sets min-height on this element each
   layout pass so it never shrinks below the pile's own height. */
.title-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-top: 4px;
}

/* R-016.2: the pile's own box, inside .title-hero. Anchored to the bottom of
   the (possibly taller) flexible parent; its height is set inline by
   ui/titleHero.js per layout, from a fixed aspect ratio scaled to the
   container's width. */
.title-hero-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* R-016.1: sits right after the (now space-absorbing) hero box, so it lands
   at the bottom of the column without needing its own auto margin. */
.title-bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.2vh, 14px);
  padding-top: 6px;
}

.title-best-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px 3px 6px;
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-surface);
  font-weight: 700;
  font-size: 14px;
}

.title-play {
  width: min(260px, 76vw);
  height: min(64px, 13vh);
  min-height: 52px;
  font-size: clamp(20px, 6vh, 32px);
  letter-spacing: 1px;
}

.title-actions { display: flex; align-items: center; gap: 12px; }

.title-install {
  height: 48px;
  padding: 0 16px 0 10px;
  font-size: 14px;
}