/* Watch Your Step — layout, screens and the CSS-driven ambient animation. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  background: #8ecdf3;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

img {
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ------------------------------------------------------------ background */
#sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(#63b8ee 0%, #8ed4f6 52%, #c2ebfb 100%);
  overflow: hidden;
}

#clouds { position: absolute; inset: 0; overflow: hidden; }

.cloud {
  position: absolute;
  left: 0;
  will-change: transform;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cloud img { width: 100%; height: auto; }

@keyframes drift {
  from { transform: translate3d(106vw, 0, 0); }
  to   { transform: translate3d(-45vw, 0, 0); }
}

/* --------------------------------------------------------------- screens */
#select-screen, #game-screen {
  position: absolute;
  inset: 0;
  display: none;
}
body.screen-select #select-screen { display: flex; align-items: center; justify-content: center; }
body.screen-game   #game-screen   { display: block; }

/* ------------------------------------------------------- select screen */
#char-grid {
  width: min(84vmin, 760px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: min(2.6vmin, 24px);
}

.slot {
  position: relative;
  border-radius: 18%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 max(2px, 0.35vmin) rgba(255, 255, 255, 0.34);
}
.slot.filled {
  background: rgba(255, 255, 255, 0.26);
  cursor: pointer;
}
.slot .sprite { inset: 1% 0; }

/* --------------------------------------------------------------- sprites */
.sprite { position: absolute; inset: 0; }
.sprite img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
.sprite img.on { display: block; }

/* ----------------------------------------------------------------- world */
#world {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.island { position: absolute; z-index: 2; }
.island img { width: 100%; height: 100%; }
#castle-island { pointer-events: none; }

.tile { position: absolute; width: 180px; height: 150px; z-index: 5; cursor: pointer; }
.tile .bob, .tile .shake, .tile .drop { position: absolute; inset: 0; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .crackimg { opacity: 0; }

/* Barely-there vertical drift on the small tiles only. */
@keyframes bob {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}
.tile .bob { animation-name: bob; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, -1.5px); }
  80% { transform: translate(2px, 1px); }
}
.tile .shake.on { animation: shake 0.13s linear infinite; }

.char {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 60;            /* always in front of tiles, islands and scenery */
  pointer-events: none;
  transform-origin: 50% 100%;
}

/* ------------------------------------------------------------ win screen */
#win-overlay {
  position: absolute;
  inset: 0;
  display: none;
  justify-items: center;
  align-items: start;
  padding-top: 7vh;         /* clear of the character's victory animation */
  pointer-events: none;
}
body.win #win-overlay { display: grid; pointer-events: auto; }

#win-text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 15vmin, 190px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  -webkit-text-stroke: 0.085em #24203a;
  paint-order: stroke fill;
  text-shadow:
     0.035em  0.035em 0 #24203a, -0.035em  0.035em 0 #24203a,
     0.035em -0.035em 0 #24203a, -0.035em -0.035em 0 #24203a,
     0 0.06em 0.06em rgba(0, 0, 0, 0.22);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.16,1.4,.5,1), opacity 260ms ease-out;
}
body.win #win-text { transform: scale(1); opacity: 1; }