/* Boba Axolotls — global styles.
   Screen layout lives in src/ui/* as inline styles transcribed from the design
   prototype (project/Boba Axolotls.dc.html) so the port stays value-for-value. */

html, body { margin: 0; padding: 0; overflow: hidden; background: #3a2c38; }
body {
  font-family: 'Baloo 2', 'Comic Sans MS', 'Chalkboard SE', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
a { color: #e26d8f; }
a:hover { color: #c94f74; }
button { font-family: inherit; }

/* Fixed 1280x720 stage, centered and uniformly scaled to fit the viewport. */
.backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #4a3644, #2e222e);
  touch-action: none;
}
.stage {
  width: 1280px; height: 720px; flex: none;
  position: relative; overflow: hidden;
  border-radius: 22px; background: #f7e8d7;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

/* Volume pill on the title screen (sits beside the Sound toggle). */
.volume-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: #6d5a63;
  background: #fff3ea; border-bottom: 4px solid #e0cbbf;
  border-radius: 16px; padding: 12px 16px;
}
.volume-pill input[type=range] { width: 92px; accent-color: #e26d8f; cursor: pointer; }

/* Landscape-only: ask small portrait screens to rotate. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 1000;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 32px; text-align: center;
    background: radial-gradient(circle at 50% 30%, #4a3644, #2e222e);
    color: #ffe9d4; font-size: 22px; font-weight: 800;
  }
  .rotate-hint .phone { font-size: 56px; animation: rotatePhone 1.6s ease-in-out infinite; }
}
@keyframes rotatePhone { 0%, 20% { transform: rotate(0) } 60%, 100% { transform: rotate(90deg) } }

/* Animations from the prototype (verbatim). */
@keyframes bobble { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes shakeCup { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-9deg) } 40% { transform: rotate(8deg) } 60% { transform: rotate(-6deg) } 80% { transform: rotate(5deg) } }
@keyframes rainFall { from { background-position: 0 0 } to { background-position: -40px 160px } }
@keyframes popIn { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes sunPulse { 0%, 100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.1); opacity: 1 } }
@keyframes steam { 0% { transform: translateY(0); opacity: .5 } 100% { transform: translateY(-14px); opacity: 0 } }