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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 2vh 2vw;
  background: linear-gradient(180deg,
    #ff6b9d 0%,
    #ffb86b 16%,
    #fff36b 33%,
    #6bff8a 50%,
    #6bcfff 66%,
    #b96bff 83%,
    #ff6bd9 100%);
}

.hidden {
  display: none !important;
}

.logo {
  max-width: min(90vw, 900px);
  max-height: 45vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.img-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  transition: transform 0.1s ease;
}

.img-btn:active {
  transform: scale(0.95);
}

.img-btn img {
  max-width: min(70vw, 500px);
  max-height: 25vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  display: block;
}

.credit {
  font-size: clamp(14px, 2.5vh, 22px);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  font-weight: 600;
  text-align: center;
}

.welcome-text {
  max-width: 90vw;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 3vh 5vw;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.welcome-title {
  font-size: clamp(28px, 6.5vh, 64px);
  font-weight: 800;
  margin-bottom: 2vh;
}

.welcome-text p {
  font-size: clamp(16px, 3vh, 28px);
  margin: 1.2vh 0;
  font-weight: 600;
}

/* Entering the fairy world screen */
.connecting-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  max-width: 90vw;
  text-align: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 3.5vh 6vw;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#connecting-message {
  font-size: clamp(18px, 3.4vh, 30px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.spinner {
  width: clamp(40px, 8vh, 64px);
  height: clamp(40px, 8vh, 64px);
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

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

.text-btn {
  font-family: inherit;
  font-size: clamp(15px, 2.5vh, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  padding: 1.6vh 5vw;
  max-width: 90vw;
  cursor: pointer;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, background 0.1s ease;
}

.text-btn:active {
  transform: scale(0.95);
}

/* Fairy chooser screen */
#chooser-screen {
  overflow-y: auto;
}

.chooser-title,
.connecting-title {
  font-size: clamp(24px, 5vh, 48px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-align: center;
}

#fairy-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(5px, 1.6vw, 12px);
  width: min(92vw, 480px);
}

.fairy-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: clamp(24px, 7vw, 44px);
  background: rgba(255, 255, 255, 0.28);
  border: 3px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, background 0.1s ease;
}

.fairy-cell:active {
  transform: scale(0.92);
}

/* A fairy already in use by another player: blank, unpickable. */
.fairy-cell.taken {
  background: rgba(255, 255, 255, 0.07);
  cursor: default;
}

.fairy-cell.taken:active {
  transform: none;
}

.fairy-cell.selected {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.85);
}

/* Inactive "next" button on the chooser, until a fairy is picked. */
.img-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.img-btn:disabled:active {
  transform: none;
}

/* World screen */
#world-screen {
  background: #000;
  padding: 0;
}

#tile-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tile-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  image-rendering: auto;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* While the next tile is still downloading, dim the previous one as an
   undistracting "waiting for the new tile" hint. */
#tile-img.loading {
  opacity: 0.55;
}

#fairy {
  position: absolute;
  font-size: 48px;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  will-change: left, top;
  transition: none;
  z-index: 2;
}

/* Other players' fairies (multiplayer) */
.remote-fairy {
  position: absolute;
  font-size: 48px;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  will-change: left, top;
  /* Smooth out the gaps between network updates. */
  transition: left 0.15s linear, top 0.15s linear;
  z-index: 1;
}

/* Fruits (shared world objects on the orchard tiles) */
.fruit {
  position: absolute;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  will-change: left, top;
  /* Smooth out the gaps between network updates. */
  transition: left 0.15s linear, top 0.15s linear;
  /* Above the fairy, so a fruit stays tappable even when the (larger)
     fairy overlaps it. */
  z-index: 2;
}

/* Close enough to interact with: a soft pulsing glow. */
.fruit.close {
  animation: fruit-glow 0.9s ease-in-out infinite alternate;
}

@keyframes fruit-glow {
  from {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 7px rgba(255, 243, 107, 0.9));
  }
  to {
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1))
            drop-shadow(0 0 14px rgba(255, 243, 107, 1));
  }
}

/* A fruit we are carrying follows the fairy every frame — no network
   smoothing — and sits above the fairy so it stays tappable. */
.fruit.carried {
  transition: none;
  z-index: 3;
}

/* Joystick */
#joystick {
  position: fixed;
  left: 4vh;
  bottom: 4vh;
  width: 28vh;
  height: 28vh;
  max-width: 180px;
  max-height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid rgba(255, 255, 255, 0.6);
  display: none;
  touch-action: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#joystick.visible {
  display: block;
}

#joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffb6e0 60%, #b15eff);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}