@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

:root {
  --bg: #003700;
  --cell: #002c00;
  --yellow: #ffd017;
  --yellow-bright: #fdde18;
  --lime: #cdf53a;
  --ink: #1f1103;
  --white: #fff;
  --font: 'Londrina Solid', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--white);
  overflow-x: hidden;
}

img { display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 800px;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding-top: 30px;
}

.pillar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  overflow: hidden;
  z-index: 40;
  pointer-events: none;
}
.pillar-left  { left:  max(0px, calc(50% - 400px - 120px)); }
.pillar-right { right: max(0px, calc(50% - 400px - 120px)); }

.pillar-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 25px 0;
}
.pillar-track img { width: auto; }
.pillar-track img.c-knight    { height: 135px; }
.pillar-track img.c-guard     { height: 134px; }
.pillar-track img.c-villager  { height: 126px; }
.pillar-track img.c-monk      { height: 119px; }
.pillar-track img.c-nun       { height: 118px; }
.pillar-track img.c-archer    { height: 116px; }
.pillar-track img.c-relocator { height: 116px; }
.pillar-track img.c-fox       { height: 112px; }

.pillar-left  .pillar-track { animation: pillar-down 15s linear infinite; }
.pillar-right .pillar-track { animation: pillar-up   15s linear infinite; }
.pillar-track { animation-play-state: paused !important; }
body.stoked .pillar-track { animation-play-state: running !important; }

@keyframes pillar-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes pillar-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

@media (max-width: 1100px) {
  .pillar { display: none; }
}

.board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  padding-bottom: 31px;
  margin: 46px 0;
  background: url(../img/bg.jpg) bottom left repeat-x;
  background-size: 100% auto;
  border-radius: 27px;
}
.board::before{content: ' '; display: block; width: 100%; height: 50px; background: rgba(0,0,0,0.4); position: absolute; bottom: -20px; left: 0; border-radius: 27px; overflow: hidden; z-index: -1;}
.board .cell {
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 1;
}
.board .cell:nth-child(n+7) { z-index: 2; }
.board .cell.alt { background: rgba(0,0,0,0.1); }
.board .cell .tile {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 50% 90%;
}
.board .cell img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  transform-origin: 50% 85%;
}

body.stoked .board .cell .tile {
  animation: tile-wobble .42s ease-in-out infinite alternate;
}
body.stoked .board .cell:nth-child(2n) .tile {
  animation-duration: .5s;
  animation-delay: -.18s;
}
body.stoked .board .cell:nth-child(3n) .tile {
  animation-delay: -.32s;
}
@keyframes tile-wobble {
  from { transform: rotate(3.2deg); }
  to   { transform: rotate(-3.2deg); }
}

/* Auto-play animations */
.board .cell img.spawn {
  animation: tile-spawn .42s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.board .cell img.merging {
  animation: tile-merge-move .38s cubic-bezier(.55, 0, .85, .36) forwards;
}
.board .cell img.upgrade {
  animation: tile-upgrade .5s cubic-bezier(.34, 1.56, .64, 1);
}
.board.resetting .cell img {
  transition: opacity .45s ease, transform .45s ease;
  opacity: 0;
  transform: scale(.6);
}

@keyframes tile-spawn {
  from { transform: translateY(-40%); opacity: 0; }   /* fade in + drop down */
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes tile-merge-move {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.35); opacity: 0; }
}
@keyframes tile-upgrade {
  0%   { transform: scale(.35); }
  60%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

#topscore{display: block; transform: rotate(10deg); position: absolute; bottom: 20px; right:-5px; color: #fff; text-shadow: 0px -2px 0px #533E32; z-index: 9; background: linear-gradient(15deg, rgba(126, 72, 22, 1) 0%, rgba(145, 90, 27, 1) 100%, rgba(175, 94, 24, 1) 100%); border-top: 3px solid #f29a2e; border-radius: 5px; padding: 10px 20px;}
#topscore::before{content: ' '; display: block; width: 4px; background: #be721e; height: 50px; position: absolute; top: 100%; left: 50%; z-index: -1;}
#topscore .topscore-label{}
#topscore .topscore-score{font-size: 30px;}
#topscore .topscore-player{}

/* Hidden by default, springs in on load: overshoots slightly above (~80%)
   before settling, courtesy of the back-out bezier */
#topscore {
  opacity: 0;
  animation: topscore-in .7s cubic-bezier(.34, 1.56, .64, 1) .6s forwards;
}
@keyframes topscore-in {
  from { opacity: 0; transform: translateY(50%) rotate(10deg); }
  to   { opacity: 1; transform: translateY(0)   rotate(10deg); }
}

.hero {
  position: relative;
  margin: 14px 0 24px;
}
.logo { width: 100%; height: auto; }

.store-buttons {
  position: absolute;
  top: 2%;
  right: 0;
  display: flex;
  gap: 7px;
  width: 31%;
  min-width: 240px;
}

.btn-store {
  background: linear-gradient(180deg, #fcdb17 0%, #fbc810 55%, #f9a203 100%);
  box-sizing: border-box;
  border: 3px solid black;
  border-radius: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  transition: transform .15s ease, filter .15s ease;
}
.btn-store:hover { background: #fff; }

.btn-web {
  flex-direction: column;
  gap: 8px;
  width: 82px;
  height: 135px;
  flex: none;
}
.btn-web img { width: 45px; height: 45px; }

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.btn-stack .btn-store {
  height: 64px;
  justify-content: space-between;
  padding: 0 18px;
}
.btn-apple img { width: 32px; height: 39px; }
.btn-android img { width: 34px; height: 37px; }

.inline-sprite{display: inline-block; vertical-align: middle; width: 30px; height: 20px; position: relative;}
.inline-sprite.sprite-whirlwind::after{background: url(../img/03plus.svg) bottom center no-repeat; background-size: contain; aspect-ratio: 1/1.5; display: block; content: ' '; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; transform-origin: bottom center; transform: scale(1.3) translateY(18%);}
.inline-sprite.sprite-whirlwind::before{content: ' '; display: block; position: absolute; z-index: 5; width: 20px; aspect-ratio: 82.047 / 131.03; top: unset; bottom: 0; left: 0; background-image: url(../img/sprite-whirlwind-01.svg); background-size: 1700% 100%; background-repeat: no-repeat; background-position-x: 0; animation: animWhirlwind 5s steps(16) 0s infinite; transform: scale(3) translateY(15%); transform-origin: center bottom;}
@-webkit-keyframes animWhirlwind {
	0% {background-position-x: 0%; opacity: 0;}
  0% {opacity: 1;}
	50% {background-position-x: 100%; opacity: 1;}
  50.1% {background-position-x: 0%; opacity: 0}
  100% {background-position-x: 0%; opacity: 0;}
}
.inline-sprite.sprite-fox::after{background: url(../img/02.svg) bottom center no-repeat; background-size: contain; aspect-ratio: 1/1.5; display: block; content: ' '; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; transform-origin: bottom center; transform: scale(1.4) translateY(10%);}
.inline-sprite.sprite-fox::before{content: ' '; display: block; position: absolute; z-index: 5; width: 20px; aspect-ratio: 82.047 / 131.03; top: unset; bottom: 0; left: 0; background-image: url(../img/sprite-fox-pop.svg); z-index: 1; background-size: 900% 100%; background-repeat: no-repeat; background-position-x: 0; animation: fox-pop-sprite 1s steps(1) 0s infinite; transform: scale(2.4) translateY(15%) translateX(10%); transform-origin: center bottom;}

@-webkit-keyframes fox-pop-sprite {
  0% { background-position: 0% 0%; }
  12.5% { background-position: 12.5% 0%; }
  25% { background-position: 25% 0%; }
  37.5% { background-position: 37.5% 0%; }
  50% { background-position: 50% 0%; }
  62.5% { background-position: 62.5% 0%; }
  75% { background-position: 75% 0%; }
  87.5% { background-position: 87.5% 0%; }
  100% { background-position: 100% 0%; }
}

.marquee {
  overflow: hidden;
  margin-bottom: 14px;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-track svg {
  width: calc(min(800px, 100vw - 32px) * 1.06);
  height: auto;
  flex: none;
  display: block;
}
.marquee-track text {
  font-family: var(--font);
  font-weight: 400;
}
.marquee.is-yellow text { fill: var(--yellow); }
.marquee.is-white  text { fill: var(--white); }
.marquee text.txt-shadow { fill: #000; }

@media (prefers-reduced-motion: reduce) {
  .pillar-track, .marquee-track, .board .cell .tile,
  .art-cloud1 img, .art-cloud2 img, .fox-wrap,
  .diamond-row .d-item, .diamond-row img,
  .resource-row img, .ach-icons img, .three-col .col-art,
  #home-logo .hero-logo, #topscore,
  .testimonial blockquote, .stars img { animation: none !important; }
  .stars img { opacity: 1; }
  #home-logo .hero-logo.version { opacity: 1; transform: none; }
  #topscore { opacity: 1; }
  .pillar-parallax { transform: none !important; }
}

.intro p {
  font-size: 31px;
  line-height: 1.35;
}

.testimonial {
  margin: 60px 0;
  position: relative;
  z-index: 10;
}

.testimonial blockquote {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border-radius: 28px;
  padding: 45px 40px;
  font-size: 58px;
  line-height: 1.1;
}
.testimonial blockquote::after {
  content: '';
  position: absolute;
  bottom: -48px;
  width: 70px;
  height: 50px;
  background: var(--white);
}
.tail-left  blockquote::after { left: 40px;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.tail-right blockquote::after { right: 40px; clip-path: polygon(0 0, 100% 0, 100% 100%); }

.tail-left  blockquote { transform-origin: 0 100%; }
.tail-right blockquote { transform-origin: 100% 100%; }

/* On link/button hover, lean to the same angle as the scroll-in jaw pop */
.testimonial blockquote {
  transition: transform .35s cubic-bezier(.35, .1, .3, 1);
  pointer-events: none;
}
body.stoked .tail-left  blockquote { transform: rotate(-8deg); }
body.stoked .tail-right blockquote { transform: rotate(8deg); }
.testimonial.inview.tail-left  blockquote { animation: jaw-left  .9s cubic-bezier(.35, .1, .3, 1); }
.testimonial.inview.tail-right blockquote { animation: jaw-right .9s cubic-bezier(.35, .1, .3, 1); }
@keyframes jaw-left {
  0% { transform: rotate(0); }
  40% { transform: rotate(-8deg); }
  100% { transform: rotate(0); }
}
@keyframes jaw-right {
  0% { transform: rotate(0); }
  40% { transform: rotate(8deg); }
  100% { transform: rotate(0); }
}

.review-line {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
  color: var(--yellow);
  font-size: 41px;
}
.review-line.centered { justify-content: center; }
.stars { display: flex; gap: 8px; }
.stars img {
  width: 56px;
  height: 56px;
  opacity: .1;
  transform-origin: center;
}
.testimonial.inview .stars img { animation: star-pop .45s ease forwards; }
/* Stars wobble on link/button hover (star-pop kept so opacity holds at 1;
   the nth-child delays below stagger the wobble per star too) */
body.stoked .testimonial.inview .stars img {
  animation: star-pop .45s ease forwards,
             tile-wobble .42s ease-in-out infinite alternate;
}
.testimonial.inview .stars img:nth-child(1) { animation-delay: .15s; }
.testimonial.inview .stars img:nth-child(2) { animation-delay: .3s; }
.testimonial.inview .stars img:nth-child(3) { animation-delay: .45s; }
.testimonial.inview .stars img:nth-child(4) { animation-delay: .6s; }
.testimonial.inview .stars img:nth-child(5) { animation-delay: .75s; }
@keyframes star-pop {
  0%   { opacity: .1; transform: scale(1); }
  60%  { opacity: 1;  transform: scale(1.2); }
  100% { opacity: 1;  transform: scale(1); }
}

.screens-block { margin: 55px 0; }

.screens {
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.screens::-webkit-scrollbar { display: none; }
.screens.dragging { cursor: grabbing; }

.screens-track {
  display: flex;
  gap: 25px;
  width: max-content;
  padding: 4px;
}
.phone {
  width: 295px;
  aspect-ratio: 9 / 19.5;
  flex: none;
  background: #000;
  border: 5px solid var(--white);
  border-radius: 40px;
  overflow: hidden;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.screens-nav {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}
.screens-nav button {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease;
}
.screens-nav button:hover {background: #fff; }

/* Resource row — 5 equal graphics, wobble on hover like the diamond row */
.resource-row {
  display: flex;
  gap: 20px;
  margin: 55px 0;
}
.resource-row img {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  transform-origin: 50% 90%;
}
body.stoked .resource-row img {
  animation: tile-wobble .42s ease-in-out infinite alternate;
}
body.stoked .resource-row img:nth-child(2n) {
  animation-duration: .5s;
  animation-delay: -.18s;
}
body.stoked .resource-row img:nth-child(3n) {
  animation-delay: -.32s;
}

.wall-divider { margin: 55px 0; }
.wall-divider img { width: 100%; height: auto; }

.perks { margin: 55px 0; }

.perk-row {
  display: grid;
  grid-template-columns: calc(100% - 200px) 200px;
  align-items: stretch;     /* right column matches the left's height */
  min-height: 165px;
}
.perk-text h2 {
  color: var(--white);
  text-shadow: 3px 5px 0 #000;
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 8px;
}
.perk-text p { font-size: 30px;  max-width: 90%;}

.perk-art { position: relative; display: flex; }
.art-cloud1, .art-cloud2 { z-index: 2; }   /* clouds sit in front of the tent */
.art-pot { z-index: 1; }
.art-cloud1 { align-items: flex-start; }   /* cloud 1: top */
.art-cloud2 { align-items: center; }       /* cloud 2: middle */
.art-cloud1 img { width: 200px; margin: 0 auto; }
.art-cloud2 img { width: 215px; margin-left: auto; }
.art-pot img    { width: 80%; position: absolute; bottom: 0; right: 0; }

/* Clouds drift gently side to side */
.art-cloud1 img { animation: cloud-drift 5.5s ease-in-out infinite alternate; }
.art-cloud2 img { animation: cloud-drift 7s ease-in-out infinite alternate-reverse; }
@keyframes cloud-drift {
  from { transform: translateX(-10%); }
  to   { transform: translateX(10%); }
}

.perks hr {
  border: none;
  border-top: 1px solid var(--yellow);
  width: 66%;
  margin: 28px 0;
}

.playnow {
  position: relative;
  margin: 70px 0 90px;
}
.map-river { width: 100%; height: auto; }

.btn-playnow {
  position: absolute;
  left: 0;
  top: 64%;
  width: 380px;
  height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fcdb17 0%, #fbc810 55%, #f9a203 100%);
  border-radius: 18px;
  color: var(--ink);
  font-size: 60px;
  letter-spacing: .04em;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.btn-playnow:hover { background: #fff; }

/* Diamond row */
.diamond-row {
  display: flex;
  align-items: flex-end;
  gap: 38px;
  margin: 70px 0 20px;
}
.diamond-row .d-item {
  position: relative;
  transform-origin: 50% 90%;
  flex: 1 1 0;
}
/* Grow each item in proportion to its SVG's natural width,
   so they fill the row while keeping equal heights */
.diamond-row .d-item:nth-child(1) { flex-grow: 78.13; }
.diamond-row .d-item:nth-child(2) { flex-grow: 133.69; }
.diamond-row .d-item:nth-child(3) { flex-grow: 133.69; }
.diamond-row .d-item:nth-child(4) { flex-grow: 143.81; }
.diamond-row .d-item:nth-child(5) { flex-grow: 148.41; }
.diamond-row img {
  width: 100%;
  height: auto;
}
/* Layered items: first img sits in flow, the rest stack on top (same viewBox) */
.diamond-row .d-item img + img {
  position: absolute;
  top: 0;
  left: 0;
}

/* Diamond hovers above its (fixed) shadow, always */
.d-item-01 .d-float {
  animation: diamond-float 1.2s ease-in-out infinite alternate;
}
@keyframes diamond-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14%); }
}

/* Wobble on link/button hover, like the board tiles */
body.stoked .diamond-row .d-item {
  animation: tile-wobble .42s ease-in-out infinite alternate;
}
body.stoked .diamond-row .d-item:nth-child(2n) {
  animation-duration: .5s;
  animation-delay: -.18s;
}
body.stoked .diamond-row .d-item:nth-child(3) {
  animation-delay: -.32s;
}

/* Item 5: rock, bag, and chest wobble individually */
.d-item-05 img { transform-origin: 50% 90%; }
body.stoked .diamond-row .d-item-05 { animation: none; }
body.stoked .d-item-05 img {
  animation: tile-wobble .42s ease-in-out infinite alternate;
}
body.stoked .d-item-05 img:nth-child(2) {
  animation-duration: .5s;
  animation-delay: -.18s;
}
body.stoked .d-item-05 img:nth-child(3) {
  animation-duration: .46s;
  animation-delay: -.32s;
}

.mega { margin: 40px 0 60px; }

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin: 60px 0;
}
.three-col h3 {
  color: var(--yellow);
  font-size: 31px;
  font-weight: 400;
  margin-bottom: 10px;
}
.three-col p {
  font-size: 28px;
  line-height: 1.25;
}
.three-col .col-art { width: 100%; max-width: 235px; height: auto; }

.col-strategy .col-art { margin-bottom: 28px; max-width: 180px; }

/* Achievement medals — three stacked layers (same viewBox), each wobbling
   about its own medal's position: bronze top-left, silver bottom, gold top-right */
.ach-icons {
  position: relative;
  margin-top: 28px;
  max-width: 235px;
}
.ach-icons img { display: block; width: 100%; height: auto; }
.ach-icons img + img { position: absolute; top: 0; left: 0; }
.ach-icons img:nth-child(1) { transform-origin: 24% 63%; }
.ach-icons img:nth-child(2) { transform-origin: 67% 97%; }
.ach-icons img:nth-child(3) { transform-origin: 76% 44%; }

/* Column art wobbles on link/button hover */
body.stoked .ach-icons img {
  animation: tile-wobble .42s ease-in-out infinite alternate;
}
body.stoked .ach-icons img:nth-child(2) {
  animation-duration: .5s;
  animation-delay: -.18s;
}
body.stoked .ach-icons img:nth-child(3) {
  animation-duration: .46s;
  animation-delay: -.32s;
}
.col-strategy .col-art { transform-origin: 50% 90%; }
body.stoked .col-strategy .col-art {
  animation: tile-wobble .5s ease-in-out -.12s infinite alternate;
}
.col-handcrafted .col-art { transform-origin: 4% 3%; }   /* same nail as the swing */
body.stoked .col-handcrafted .col-art {
  animation: tile-wobble .46s ease-in-out infinite alternate;
}

.fox-wrap {
  position: relative;
  margin-top: 28px;
  max-width: 228px;
  transform-origin: 4% 3%;
  animation: fox-swing 2.4s ease-in-out infinite alternate;
}
@keyframes fox-swing {
  from { transform: rotate(2.5deg); }
  to   { transform: rotate(-2.5deg); }
}
.oh-hey {
  position: absolute;
  top: 25%;
  left: 53%;
  transform: rotate(34.86deg);
  transform-origin: left top;
  font-weight: 300;
  font-size: 31px;
  color: #272724;
  white-space: nowrap;
}

.camelot { margin: 70px 0; }
.camelot img { width: 100%; height: auto; }

.onemore h2 { margin-bottom: 30px; }
.onemore p {
  font-size: 31px;
  line-height: 1.35;
}

.badges {
  display: flex;
  gap: 28px;
  margin: 55px 0;
}
.badges a {
  flex: 1;
  border: 3px solid #fff;
  border-radius: 17px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.badges a:hover { border-color: var(--lime); }
.badges img { width: 100%; height: auto; display: block; }

.made-in-uk { margin: 80px 0; }
.made-in-uk h2 { margin-bottom: 34px; }
.made-in-uk p {
  font-size: 28px;
  line-height: 1.3;
}
.made-in-uk .uk-link { margin-top: 14px; }
.made-in-uk .uk-link a { color: var(--yellow); }
.made-in-uk .uk-link a:hover { text-decoration: underline; }
.video-frame {
  border: 5px solid var(--white);   /* match the phone frames */
  border-radius: 40px;
  background: #001f00;
  overflow: hidden;
  margin-bottom: 30px;
}
.video-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Home-screen logo animation (replicated from the app's #home-logo) */
#home-logo {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 90px auto 5px auto;
  overflow: visible;
}
#home-logo .hero-logo {
  display: block;
  width: 100%;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1 / 1;
}
#home-logo .hero-logo.castleshadow { z-index: 1; }
#home-logo .hero-logo.castle { z-index: 2; animation: skyCastleHero 4s ease-in-out 0s infinite; }
#home-logo .hero-logo.cloud01 { animation: animHomeLogoCloud01 62s ease-in-out 0s infinite; z-index: 0; }
#home-logo .hero-logo.cloud02 { animation: animHomeLogoCloud02 62s ease-in-out 0s infinite; z-index: 0; }
#home-logo .hero-logo.version { transform: translateY(30px); z-index: 5; opacity: 0; }
#home-logo.inview .hero-logo.version { animation: animHomeLogoSign 0.65s cubic-bezier(.34,1.56,.64,1) 1.5s forwards; }
#home-logo .hero-logo.fox { animation: animHomeLogoFox 12s linear 2s infinite; z-index: 4; transform: translate(0,0); }

@keyframes animHomeLogoFox {
  0% {transform: translateX(0) translateY(0%);}
  2% {transform: translateX(4.5%) translateY(-2%);}
  4% {transform: translateX(9%) translateY(0%);}
  6% {transform: translateX(13.5%) translateY(-2%);}
  8% {transform: translateX(18%) translateY(0%);}
  50% {transform: translateX(18%) translateY(0%);}
  52% {transform: translateX(13.5%) translateY(-2%);}
  54% {transform: translateX(9%) translateY(0%);}
  56% {transform: translateX(4.5%) translateY(-2%);}
  58% {transform: translateX(0%) translateY(0%);}
  100% {transform: translateX(0) translateY(0%);}
}
@keyframes skyCastleHero {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
  100% { transform: translateY(0); }
}
@keyframes animHomeLogoSign {
  0% {transform: translateY(30px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}
@keyframes animHomeLogoCloud01 {
  0% {transform: translateX(0px);}
  50% {transform: translateX(400px);}
  100% {transform: translateX(0px);}
}
@keyframes animHomeLogoCloud02 {
  0% {transform: translateX(0px);}
  50% {transform: translateX(-400px);}
  100% {transform: translateX(0px);}
}

/* Footer store buttons — thirds, stacked contents (icon top, text below) */
.footer-buttons {
  display: flex;
  gap: 20px;
  margin-top: 28px;
}
.btn-footer {
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  padding: 26px 18px;
  font-size: 31px;
}
.btn-footer img { height: 52px; width: auto; }

/* Static pages (privacy policy / support) */
.hero .logo-link { display: block; }
.page-content { margin: 30px 0 60px; }
.page-content h1 {
  font-size: 58px;
  font-weight: 400;
  color: var(--white);
  text-shadow: 3px 5px 0 #000;
  margin-bottom: 28px;
}
.page-content h2 {
  font-size: 41px;
  font-weight: 400;
  color: var(--yellow);
  margin: 44px 0 12px;
}
.page-content h3 {
  font-size: 31px;
  font-weight: 400;
  color: var(--yellow);
  margin: 36px 0 8px;
}
.page-content p,
.page-content ul {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.page-content ul { padding-left: 30px; }
.page-content li { margin-bottom: 6px; }
.page-content hr {
  border: none;
  border-top: 1px solid var(--yellow);
  width: 66%;
  margin: 44px 0;
}
@media (max-width: 840px) {
  .page-content h1 { font-size: clamp(38px, 8vw, 58px); }
  .page-content h2 { font-size: clamp(28px, 6vw, 41px); }
  .page-content h3 { font-size: clamp(24px, 5vw, 31px); }
  .page-content p, .page-content ul { font-size: 20px; }
}

footer {
  border-top: 1px solid var(--yellow);
  margin-top: 50px;
  padding: 34px 0 55px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 20px;
}
.footer-links { display: flex; gap: 26px; }
footer a { color: var(--yellow); }   /* match 'App Store Review' */
footer a:hover { text-decoration: underline; }

.relative{position: relative;}

@media (max-width: 840px) {
  #topscore { display: none; }
  .perk-text h2 { font-size: clamp(30px, 6vw, 48px); }
  .intro p, .perk-text p, .onemore p { font-size: clamp(20px, 4vw, 31px); }
  footer {
    font-size: 16px;
    flex-direction: column-reverse;   /* links list first, copyright below */
    align-items: flex-start;
    gap: 24px;
  }
  .footer-links { flex-direction: column; gap: 12px; }
  .testimonial blockquote { font-size: clamp(28px, 5.5vw, 58px); padding: 30px 26px; }
  .review-line { font-size: clamp(24px, 4.5vw, 41px); }
  .stars img { width: clamp(30px, 5vw, 56px); height: auto; }
  .three-col { grid-template-columns: 1fr; }
  .three-col .col {
    display: grid;
    grid-template-columns: 1fr 130px;
    column-gap: 20px;
    align-items: center;
  }
  .three-col .col h3 { grid-area: 1 / 1; align-self: end; }
  .three-col .col p  { grid-area: 2 / 1; align-self: start; }
  .three-col .col > .col-art,
  .three-col .col > .ach-icons,
  .three-col .col > .fox-wrap {
    grid-area: 1 / 2 / 3 / 3;
    margin: 0;
    width: 100%;
  }
  .video-frame { border-radius: 30px; }
  .perk-row { grid-template-columns: 70% 30%; }
  .art-cloud1 img, .art-cloud2 img { width: 120px; }
  .art-pot img { width: 90%; }
  .store-buttons { position: static; width: 100%; margin-top: 18px; }
  .hero { display: flex; flex-direction: column; }
  .footer-buttons { flex-direction: column; gap: 14px; margin-top: 60px; }
  .btn-footer {
    flex-direction: row-reverse;   /* text left, icon right */
    justify-content: space-between;
    height: 64px;
    padding: 15px 18px;
  }
  .btn-footer img { height: 38px; }
  .btn-playnow { width: 240px; height: 84px; font-size: 38px; top: 55%; }
  .phone { width: 220px; border-radius: 30px; }
}