:root {
  --egg-yellow: #FFD93D;
  --egg-pink: #FF9F9F;
  --egg-blue: #6BCBEF;
  --egg-green: #95E06C;
  --egg-purple: #C8A2FF;
  --bg-sky-top: #87CEEB;
  --bg-sky-bottom: #B8E0F6;
  --text-primary: #2A2A2A;
  --text-secondary: #6B6B6B;
  --text-light: #FFFFFF;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.2);
  --radius-md: 14px;
  --radius-lg: 24px;
  --space-unit: 4px;
  --space-1: calc(var(--space-unit) * 2);
  --space-2: calc(var(--space-unit) * 4);
  --space-3: calc(var(--space-unit) * 6);
  --space-4: calc(var(--space-unit) * 8);
  --space-5: calc(var(--space-unit) * 10);
  --space-6: calc(var(--space-unit) * 12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-sky-top) 0%, var(--bg-sky-bottom) 100%);
}

.app-shell {
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  background: var(--egg-yellow);
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: 18px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-pop);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--egg-yellow);
  color: var(--text-primary);
}

.btn-primary:disabled {
  background: #D9D9D9;
  color: var(--text-secondary);
}

.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.screen-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: var(--space-3);
  text-align: center;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.screen-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-5);
}

.btn-large {
  padding: var(--space-4) var(--space-6);
  font-size: 22px;
  width: 100%;
  max-width: 280px;
}

/* ===== Egg Character ===== */

.egg-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 220px;
  margin-bottom: var(--space-4);
  position: relative;
}

.egg {
  position: relative;
  border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%;
  width: var(--egg-size, 120px);
  height: var(--egg-size, 120px);
  background: radial-gradient(circle at 35% 30%,
              var(--egg-shade) 0%,
              var(--egg-body) 35%,
              var(--egg-body-dark) 100%);
  box-shadow:
    inset -8px -10px 18px rgba(0, 0, 0, 0.12),
    inset 6px 8px 14px rgba(255, 255, 255, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.18);
  animation: eggBounce 2.4s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

@keyframes eggBounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25%      { transform: translateY(-8px) scale(0.98, 1.02); }
  50%      { transform: translateY(0) scale(1.03, 0.97); }
  75%      { transform: translateY(-4px) scale(0.99, 1.01); }
}

.egg-shine {
  position: absolute;
  top: 14%;
  left: 22%;
  width: 24%;
  height: 18%;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  filter: blur(2px);
}

.egg-feet {
  position: absolute;
  bottom: -6px;
  width: 60%;
  display: flex;
  justify-content: space-between;
  z-index: -1;
}

.egg-foot {
  display: inline-block;
  width: 22%;
  height: 14px;
  background: var(--egg-body-dark);
  border-radius: 50% 50% 30% 30%;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}

.egg-face {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-auto-flow: row;
  align-items: center;
  justify-items: center;
}

.egg-eye {
  display: inline-block;
  background: #2A2A2A;
  border-radius: 50%;
  position: relative;
}

.egg-eye::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 22%;
  width: 30%;
  height: 30%;
  background: white;
  border-radius: 50%;
}

.egg-eye-happy {
  width: 16%;
  height: 16%;
  min-width: 14px;
  min-height: 14px;
}

.egg-eye-cool {
  width: 22%;
  height: 10%;
  min-width: 22px;
  min-height: 8px;
  border-radius: 30% 30% 50% 50%;
  background: #2A2A2A;
}

.egg-eye-cool::after { display: none; }

.egg-eye-surprised {
  width: 22%;
  height: 22%;
  min-width: 18px;
  min-height: 18px;
}

.egg-eye-left  { grid-column: 1; grid-row: 1; justify-self: end; }
.egg-eye-right { grid-column: 2; grid-row: 1; justify-self: start; }

.egg-mouth {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin-top: 4px;
}

.egg-mouth-happy {
  width: 28%;
  height: 10%;
  min-width: 26px;
  min-height: 8px;
  border-bottom: 4px solid #2A2A2A;
  border-radius: 0 0 50% 50%;
}

.egg-mouth-cool {
  width: 22%;
  height: 4px;
  background: #2A2A2A;
  border-radius: 2px;
}

.egg-mouth-surprised {
  width: 16%;
  height: 14%;
  min-width: 14px;
  min-height: 12px;
  background: #2A2A2A;
  border-radius: 50%;
}

/* Size variants — keep egg feet centered properly */
.egg-size-sm { width: 80px;  height: 80px; }
.egg-size-md { width: 120px; height: 120px; }
.egg-size-lg { width: 180px; height: 180px; }

/* ===== Egg Create Screen extras ===== */

.egg-name-input {
  width: 100%;
  max-width: 280px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 18px;
  font-family: inherit;
  text-align: center;
  border: 3px solid var(--egg-yellow);
  border-radius: var(--radius-md);
  background: white;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.egg-name-input:focus {
  border-color: var(--egg-pink);
  box-shadow: 0 0 0 4px rgba(255, 159, 159, 0.2);
}

.picker-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin: var(--space-2) 0 var(--space-1);
  font-weight: 600;
}

.picker-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.color-swatch {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  padding: 0;
  background: var(--c, var(--egg-yellow));
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.color-swatch.selected {
  border-color: #FFFFFF;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15), var(--shadow-pop);
}

.color-swatch[data-color="yellow"] { background: #FFD93D; }
.color-swatch[data-color="pink"]   { background: #FF9F9F; }
.color-swatch[data-color="blue"]   { background: #6BCBEF; }
.color-swatch[data-color="green"]  { background: #95E06C; }
.color-swatch[data-color="purple"] { background: #C8A2FF; }

.exp-swatch {
  padding: var(--space-2) var(--space-4);
  font-size: 16px;
  border-radius: 20px;
  background: white;
  color: var(--text-primary);
  border: 3px solid transparent;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.exp-swatch.selected {
  border-color: var(--egg-pink);
  color: var(--egg-pink);
  transform: scale(1.06);
}

.screen > button.btn-large {
  margin-top: var(--space-4);
}

/* ===== PWA "add to home" hint bubble ===== */

.pwa-hint-bubble {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  max-width: 320px;
  width: calc(100% - 32px);
  padding: var(--space-3) var(--space-4);
  background: rgba(42, 42, 42, 0.92);
  color: white;
  font-size: 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: 1000;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.pwa-hint-bubble.visible {
  bottom: 24px;
  opacity: 1;
}

.pwa-hint-bubble b {
  color: var(--egg-yellow);
  font-weight: 800;
}