/* ---- Pet Uzi -----------------------------------------------------------
   Built mobile-first; the wider layout is a light touch-up at the end.
   ---------------------------------------------------------------------- */

:root{
  --paper:    #fff7ec;
  --ink:      #2b1b12;
  --ink-soft: #8a705a;

  --sun:   #ffc44d;
  --amber: #ff9a2e;
  --coral: #ff6b4a;
  --berry: #e0457b;

  --card:   rgba(255, 255, 255, .55);
  --stroke: rgba(120, 80, 40, .14);
  --shadow: rgba(120, 66, 20, .18);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:    #191013;
    --ink:      #fdf3e7;
    --ink-soft: #b79a83;
    --card:     rgba(255, 255, 255, .06);
    --stroke:   rgba(255, 210, 160, .14);
    --shadow:   rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  padding: clamp(12px, 3vw, 40px) 14px calc(14px + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
  /* Flex, not grid: a grid's implicit `auto` column grows to its item's
     max-content, and the trophy shelf's intrinsic width (nine un-wrapping
     badges) blew that track out to ~1800px, shoving the card off-screen.
     overflow-x:auto zeroes a box's minimum size, not its max-content. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;

  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---- drifting background ----------------------------------------------- */

.bg{ position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  will-change: transform;
}

.blob-a{
  width: 54vmax; height: 54vmax; top: -24vmax; left: -16vmax;
  background: radial-gradient(circle, var(--sun), transparent 68%);
  animation: drift-a 22s ease-in-out infinite;
}
.blob-b{
  width: 46vmax; height: 46vmax; bottom: -22vmax; right: -16vmax;
  background: radial-gradient(circle, var(--coral), transparent 68%);
  animation: drift-b 27s ease-in-out infinite;
  opacity: .38;
}
.blob-c{
  width: 36vmax; height: 36vmax; top: 44%; left: 56%;
  background: radial-gradient(circle, var(--berry), transparent 70%);
  animation: drift-c 31s ease-in-out infinite;
  opacity: .2;
}

@keyframes drift-a{ 50%{ transform: translate(9vmax, 7vmax) scale(1.12); } }
@keyframes drift-b{ 50%{ transform: translate(-10vmax, -6vmax) scale(1.15); } }
@keyframes drift-c{ 50%{ transform: translate(-7vmax, 9vmax) scale(.88); } }

@media (prefers-color-scheme: dark){
  .blob-a{ opacity: .3; } .blob-b{ opacity: .26; } .blob-c{ opacity: .16; }
}

/* ---- card --------------------------------------------------------------- */

.card{
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 5vw, 34px) clamp(14px, 4vw, 28px) clamp(18px, 4vw, 26px);
  border-radius: 32px;
  background: var(--card);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px var(--stroke),
    0 30px 70px -28px var(--shadow);
}

/* ---- header -------------------------------------------------------------- */

.head{ text-align: center; margin-bottom: 10px; }

.title{
  margin: 0;
  font-size: clamp(38px, 11.5vw, 54px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  background: linear-gradient(102deg, var(--amber) 0%, var(--coral) 52%, var(--berry) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title-gap{ display: inline-block; width: .22em; }

.sub{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 154, 46, .13);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2fbf6b;
  animation: blip 2.4s ease-out infinite;
}

@keyframes blip{
  0%  { box-shadow: 0 0 0 0 rgba(47, 191, 107, .55); }
  70% { box-shadow: 0 0 0 8px rgba(47, 191, 107, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(47, 191, 107, 0); }
}

/* ---- the dog ------------------------------------------------------------- */

.frame{
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1.15);
  will-change: transform;
}

.frame:focus-visible{ outline: 3px solid var(--coral); outline-offset: 10px; border-radius: 50%; }

/* While the clip runs the whole thing swells — order matters here, .bump is
   the sharper kick layered on top and must win. */
.frame.playing{ transform: scale(1.085); }
.frame.bump{ transform: scale(1.14) rotate(-2.5deg); }

.halo{
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--sun), var(--coral), var(--berry), var(--amber), var(--sun));
  animation: spin 9s linear infinite;
}

@keyframes spin{ to{ transform: rotate(360deg); } }

.stage{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(120, 80, 40, .12);
  box-shadow: 0 0 0 5px var(--paper), 0 22px 46px -14px var(--shadow);
}

.stage picture{ display: contents; }   /* keeps .photo positioned against .stage */

.photo, .clip{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The clip is now encoded as the exact square the circle shows, so there is
   no crop left to position. */

.clip{ opacity: 0; visibility: hidden; transition: opacity .16s ease; }
.photo{ transition: opacity .16s ease .04s; }

.frame.playing .clip{ opacity: 1; visibility: visible; }
.frame.playing .photo{ opacity: 0; }

.ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.ring.go{ animation: ring .68s cubic-bezier(.2,.7,.3,1) forwards; }

@keyframes ring{
  from{ box-shadow: 0 0 0 0 rgba(255, 107, 74, .45); }
  to  { box-shadow: 0 0 0 32px rgba(255, 107, 74, 0); }
}

/* current rank, straddling the bottom edge of the portrait */
.rank{
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 96%;
  padding: 7px 15px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--amber), var(--coral));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 0 0 4px var(--paper), 0 12px 24px -12px rgba(255, 107, 74, .9);
}

.rank.fresh{ animation: rank-in .7s cubic-bezier(.2,.9,.25,1.5); }

@keyframes rank-in{
  0%  { transform: translateX(-50%) scale(.4) rotate(-12deg); opacity: 0; }
  55% { transform: translateX(-50%) scale(1.18) rotate(4deg); opacity: 1; }
  100%{ transform: translateX(-50%) scale(1) rotate(0); }
}

/* ---- odometer ------------------------------------------------------------ */

.tally{ text-align: center; margin: 6px 0 0; }

.odo{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(48px, 14.5vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.odo.pop{ animation: pop .34s cubic-bezier(.2,.9,.25,1.5); }

@keyframes pop{ 40%{ transform: scale(1.09); } }

.digit{
  position: relative;
  display: block;
  width: .60em;
  height: 1em;
  overflow: hidden;
}

.reel{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform .6s cubic-bezier(.2, .85, .2, 1);
}

/* The gradient lives on each glyph rather than on .odo: the digit slots are
   overflow:hidden, which stops a background-clip:text on the parent from
   reaching the numbers inside. Every glyph is exactly 1em tall and baseline
   aligned, so per-glyph gradients read as one continuous sweep. */
.reel span,
.comma{
  background: linear-gradient(180deg, var(--sun) -10%, var(--amber) 42%, var(--coral) 108%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reel span{
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comma{ display: block; width: .26em; }

.count-label{
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: lowercase;
  color: var(--ink-soft);
}

.sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- progress to next rank ------------------------------------------------ */

.progress{ width: min(280px, 88%); margin: 13px 0 16px; text-align: center; }

.track{
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 80, 40, .13);
  overflow: hidden;
}

.fill{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--amber), var(--coral));
  transition: width .6s cubic-bezier(.2, .85, .2, 1);
}

.to-next{
  margin: 9px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* ---- the button ----------------------------------------------------------- */

.pet{
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  border-radius: 999px;
  background: #b8391f;
  box-shadow: 0 16px 30px -14px rgba(255, 107, 74, .95);
  transition: transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.pet-face{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 19px clamp(48px, 15vw, 66px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sun) -12%, var(--amber) 45%, var(--coral) 105%);
  color: #fff;
  font-size: clamp(21px, 5.8vw, 25px);
  font-weight: 800;
  letter-spacing: -.015em;
  text-shadow: 0 1.5px 0 rgba(150, 55, 20, .3);
  transform: translateY(-6px);
  transition: transform .11s cubic-bezier(.3,.8,.4,1);
}

.pet-text{ position: relative; z-index: 1; }

.shine{
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation: sweep 3.6s ease-in-out infinite;
}

@keyframes sweep{
  0%, 62%{ left: -60%; }
  92%, 100%{ left: 125%; }
}

.pet:active{ box-shadow: 0 6px 14px -10px rgba(255, 107, 74, .9); }
.pet:active .pet-face{ transform: translateY(-1px) scale(.975); }
.pet:focus-visible{ outline: 3px solid var(--ink); outline-offset: 5px; }

/* Hover lift only where there's a real pointer — on touch it sticks. */
@media (hover: hover){
  .pet:hover .pet-face{ transform: translateY(-8px); }
  .frame:hover{ transform: scale(1.02); }
}

.hint{
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-soft);
  opacity: .85;
}

.spk{ margin-right: 3px; }

/* ---- trophy shelf ----------------------------------------------------------- */

.shelf-wrap{
  width: 100%;
  min-width: 0;          /* without this the shelf's content width leaks upward */
  max-width: 100%;
  margin-top: 12px;
}

.shelf-title{
  margin: 0 0 9px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .75;
}

/* Horizontal strip: nine ranks would stack far too tall on a phone. */
.shelf{
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shelf::-webkit-scrollbar{ display: none; }

.badge{
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--amber), var(--coral));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(255, 107, 74, .9);
  transition: transform .3s cubic-bezier(.2,.9,.25,1.4);
}

.badge .at{ opacity: .72; font-weight: 700; }

.badge.locked{
  background: rgba(120, 80, 40, .09);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--stroke);
  filter: grayscale(1);
  opacity: .72;
}

.badge.fresh{ animation: rank-in .7s cubic-bezier(.2,.9,.25,1.5); }

@media (prefers-color-scheme: dark){
  .badge.locked{ background: rgba(255, 255, 255, .05); }
}

/* ---- floating pips ----------------------------------------------------------- */

/* Anchored to the button in JS rather than by a hard offset, so the pips keep
   launching from the right place as the layout reflows across screen sizes. */
.burst{
  position: absolute;
  left: 50%;
  top: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 4;
}

.pip{
  position: absolute;
  left: 0; bottom: 0;
  font-size: 23px;
  font-weight: 800;
  color: var(--coral);
  white-space: nowrap;
  animation: float 1.15s cubic-bezier(.25,.6,.35,1) forwards;
}

@keyframes float{
  0%  { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(0deg); }
  16% { opacity: 1; transform: translate(calc(-50% + var(--dx)), -22px) scale(1.12) rotate(var(--rot)); }
  100%{ opacity: 0; transform: translate(calc(-50% + var(--dx) * 2.6), -118px) scale(.85) rotate(var(--rot)); }
}

/* ---- milestone toast ---------------------------------------------------------- */

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translate(-50%, 190%);
  z-index: 9;
  max-width: calc(100vw - 28px);
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--amber), var(--coral));
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  box-shadow: 0 16px 34px -14px rgba(255, 107, 74, .9);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.25,1.3), opacity .35s ease;
}

.toast.show{ transform: translate(-50%, 0); opacity: 1; }

/* ---- play link ------------------------------------------------------------- */

/* Shares the footer row with Instagram — a full-width banner cost ~70px and
   pushed the trophy shelf off the bottom of a phone screen. */
.play{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--amber), var(--coral));
  box-shadow: 0 12px 22px -14px rgba(255, 107, 74, .95);
  transition: transform .18s ease, box-shadow .18s ease;
}

.play-ico{ font-size: 15px; line-height: 1; }

@media (hover: hover){
  .play:hover{ transform: translateY(-2px); box-shadow: 0 16px 26px -14px rgba(255, 107, 74, 1); }
}

.play:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---- academy line ---------------------------------------------------------- */

.academy{
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  opacity: .9;
}

.academy a{
  color: var(--berry);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(224, 69, 123, .4);
  padding-bottom: 1px;
  transition: border-color .18s ease;
}

@media (hover: hover){
  .academy a:hover{ border-bottom-color: var(--berry); }
}

.academy a:focus-visible{ outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 4px; }

/* ---- footer -------------------------------------------------------------------- */

.foot{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 11px;
}

.ig{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;              /* comfortable thumb target */
  padding: 11px 20px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 800;
  /* Was a translucent grey pill that only gained colour on hover — which never
     happens on a phone, so it read as a disabled button. */
  color: #fff;
  background: linear-gradient(100deg, #f9a03c 0%, #e0457b 48%, #9b3fc4 100%);
  box-shadow: 0 12px 22px -14px rgba(155, 63, 196, .95);
  transition: box-shadow .18s ease, transform .18s ease;
}

@media (hover: hover){
  .ig:hover{
    box-shadow: 0 16px 26px -14px rgba(155, 63, 196, 1);
    transform: translateY(-2px);
  }
}

.ig:focus-visible{ outline: 3px solid var(--coral); outline-offset: 3px; }

/* ---- shorter phones ---------------------------------------------------------------
   Two steps down rather than one, so an iPhone SE gets the whole thing —
   portrait, count, button — without scrolling for the primary action. */

/* Tall phones (a 14/15 at 844) fall between the other steps and were pushing
   the footer past the fold. Trims margins first, the portrait only slightly. */
@media (max-height: 880px){
  body{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .head{ margin-bottom: 8px; }
  .frame{ width: min(300px, 68vw); margin-bottom: 12px; }
  .tally{ margin-top: 4px; }
  .count-label{ margin-top: 6px; }
  .progress{ margin: 10px 0 13px; }
  .hint{ margin-top: 8px; }
  .shelf-wrap{ margin-top: 9px; }
  .academy{ margin-top: 9px; }
  .foot{ margin-top: 8px; }
}

@media (max-height: 800px){
  body{ padding-top: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .card{ padding-top: 20px; padding-bottom: 18px; }
  .head{ margin-bottom: 8px; }
  .frame{ width: min(252px, 60vw); margin-bottom: 14px; }
  .odo{ font-size: clamp(42px, 12vw, 56px); }
  .count-label{ margin-top: 6px; }
  .progress{ margin: 10px 0 13px; }
  .pet-face{ padding: 16px clamp(44px, 14vw, 58px); }
  .hint{ margin-top: 8px; }
  .shelf-wrap{ margin-top: 8px; }
  .shelf-title{ margin-bottom: 6px; }
  .academy{ margin-top: 7px; font-size: 11.5px; }
  .foot{ margin-top: 7px; }
  .card{ padding-bottom: 14px; }
}

@media (max-height: 700px){
  body{ padding-top: 9px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .card{ padding-top: 16px; padding-bottom: 14px; border-radius: 26px; }
  .title{ font-size: clamp(31px, 9vw, 40px); }
  .sub{ margin-top: 6px; padding: 4px 11px; font-size: 12px; }
  .head{ margin-bottom: 6px; }
  .frame{ width: min(196px, 50vw); margin-bottom: 11px; }
  .odo{ font-size: clamp(36px, 10.5vw, 46px); }
  .count-label{ margin-top: 4px; font-size: 11.5px; letter-spacing: .06em; }
  .progress{ margin: 8px 0 10px; }
  .track{ height: 7px; }
  .to-next{ margin-top: 7px; font-size: 11.5px; }
  .pet-face{ padding: 14px clamp(38px, 12vw, 52px); font-size: clamp(19px, 5.2vw, 22px); }
  .hint{ margin-top: 7px; font-size: 11.5px; }
  .shelf-wrap{ margin-top: 8px; }
  .shelf-title{ margin-bottom: 5px; font-size: 10px; }
  .academy{ margin-top: 6px; font-size: 11px; }
  .badge{ padding: 7px 11px; font-size: 11.5px; }
  .foot{ margin-top: 8px; }
  .ig{ min-height: 40px; padding: 9px 17px; font-size: 13.5px; }
}

/* ---- reduced motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .blob, .halo, .shine, .dot{ animation: none !important; }
}