:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", "Yu Gothic", sans-serif;
}

/* --- ローディング画面 (liff.html) --- */
.loading-body {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #ffe3f1 0%, #e6d9ff 50%, #d6e9ff 100%);
}

.loading-screen {
  text-align: center;
  color: #5a4a6a;
}

.loading-fairy {
  font-size: 4rem;
  animation: bob 1.6s ease-in-out infinite;
}

.loading-screen p {
  margin-top: 12px;
  font-size: 0.95rem;
}

/* --- ゲーム画面 (game.html) --- */
.game-body {
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #fff6fb 0%, #ffe3f1 35%, #e6d9ff 70%, #cfe3ff 100%);
}

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  font-size: 0.85rem;
  color: #6a5580;
}

.fairy-stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.fairy {
  position: absolute;
  left: 50%;
  top: 50%;
  transition-property: left, top;
  transition-timing-function: ease-in-out;
  will-change: left, top;
  pointer-events: none;
}

.fairy-flip {
  transition: transform 0.35s ease;
}

.fairy.face-left .fairy-flip {
  transform: scaleX(-1);
}

.fairy-emoji {
  display: inline-block;
  font-size: 3.2rem;
  line-height: 1;
  animation: bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(150, 100, 200, 0.45));
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (min-width: 700px) {
  .fairy-emoji {
    font-size: 4.5rem;
  }
}