/* === Menu Screen === */
#screen-menu {
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding-bottom: 40px;
  flex-shrink: 0;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

.player-level {
  color: var(--type-cloud);
  font-family: var(--font-display);
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

/* === Hatch Screen === */
#screen-hatch {
  justify-content: flex-start;
  overflow-y: auto;
}

.hatch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 20px;
}

.egg-stage {
  width: 150px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.egg {
  width: 100px;
  height: 130px;
  position: relative;
  cursor: pointer;
}

.egg-top {
  width: 100px;
  height: 70px;
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 0;
  z-index: 2;
}

.egg-bottom {
  width: 100px;
  height: 80px;
  background: linear-gradient(135deg, #f5f5f5, #d0d0d0);
  border-radius: 0 0 50px 50px;
  position: absolute;
  bottom: 0;
}

.egg-crack {
  width: 100%;
  height: 4px;
  position: absolute;
  top: 65px;
  z-index: 3;
  opacity: 0;
}

.hatch-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hatch-reveal h3 {
  font-size: 1.8rem;
}

.reveal-stats {
  display: flex;
  gap: 16px;
  font-weight: 600;
}

/* === Egg Picker === */
.egg-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.egg-pick-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.egg-pick-card:hover:not(.egg-pick-empty) {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.egg-pick-card.egg-pick-empty {
  opacity: 0.35;
  cursor: not-allowed;
}

.egg-pick-preview {
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.egg-mini {
  width: 30px;
  height: 40px;
  position: relative;
}

.egg-mini-top {
  width: 30px;
  height: 22px;
  border-radius: 15px 15px 0 0;
  position: absolute;
  top: 0;
}

.egg-mini-bottom {
  width: 30px;
  height: 24px;
  border-radius: 0 0 15px 15px;
  position: absolute;
  bottom: 0;
}

.egg-pick-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.egg-pick-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.egg-pick-count {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* === Collection Screen === */
.collection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.monster-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
}

.monster-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.monster-card.active-monster {
  border-color: var(--type-cloud);
  box-shadow: 0 0 12px rgba(255, 214, 10, 0.3);
}

.monster-card .card-sprite {
  width: 60px;
  height: 60px;
}

.monster-card .card-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
}

.monster-card .card-level {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.collection-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px;
}

.skin-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 6px;
}

.skin-badge-silver {
  background: linear-gradient(135deg, #c0c0c0, #8a8a8a);
  color: #1a1a2e;
}

.skin-badge-gold {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1a2e;
}

/* === Monster Detail Modal === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-content {
  background: #16213e;
  border-radius: 16px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  color: #e8e8e8;
  font-family: 'Nunito', sans-serif;
}

.modal-back-btn {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  background: linear-gradient(135deg, #e94560, #c23152);
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  font-family: 'Fredoka One', cursive;
}

.modal-monster-sprite {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  overflow: visible;
}

.modal-monster-sprite .monster {
  transform: scale(1.33);
}

.modal-monster-name {
  font-size: 1.4rem;
  font-family: 'Fredoka One', cursive;
  margin: 0;
}

.modal-monster-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #a0a0b0;
}

.modal-skins-title {
  font-size: 1rem;
  font-family: 'Fredoka One', cursive;
  color: #e8e8e8;
  margin: 8px 0 0;
}

.skins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.skin-card {
  background: #0f3460;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  overflow: visible;
}

.skin-card .monster {
  transform-origin: center center;
}

.skin-card.skin-active {
  border-color: #b8c0ff;
  box-shadow: 0 0 10px rgba(184, 192, 255, 0.3);
}

.skin-name {
  font-family: 'Fredoka One', cursive;
  font-size: 0.8rem;
}

.skin-equipped {
  font-size: 0.7rem;
  color: #b8c0ff;
  font-weight: 700;
}

.skin-equip-btn {
  font-size: 0.7rem !important;
  min-width: auto !important;
  padding: 4px 12px !important;
  background: linear-gradient(135deg, #b8c0ff, #7b8cde) !important;
  color: #1a1a2e !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

.skin-buy-btn {
  font-size: 0.7rem !important;
  min-width: auto !important;
  padding: 4px 12px !important;
  background: linear-gradient(135deg, #00b4d8, #0090b0) !important;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.skin-buy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === Shop Screen === */
.shop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.shop-balance {
  font-family: var(--font-display);
  font-size: 1.4rem;
  background: var(--bg-secondary);
  padding: 10px 24px;
  border-radius: var(--radius);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
}

.shop-item {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.shop-item .item-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.shop-item .item-cost {
  color: var(--type-water);
  font-weight: 700;
}

.shop-item .item-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.shop-item .btn {
  min-width: auto;
  padding: 8px 16px;
  font-size: 0.85rem;
}

.inventory-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.inventory-item {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* === Challenges Screen === */
.challenges-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.challenges-header {
  text-align: center;
}

.challenges-header h2 {
  background: linear-gradient(135deg, #4caf50, var(--type-cloud));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.challenges-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.challenges-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.challenge-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.challenge-card.challenge-ready {
  border-color: #4caf50;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.3);
}

.challenge-card.challenge-claimed {
  opacity: 0.5;
}

.challenge-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.challenge-desc {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.challenge-progress-bar {
  width: 100%;
  height: 8px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
}

.challenge-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4caf50, var(--type-cloud));
  transition: width 0.5s ease;
}

.challenge-progress-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.challenge-reward-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 70px;
}

.challenge-gem-reward {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--type-water);
}

.challenge-claim-btn {
  font-size: 0.8rem !important;
  min-width: auto !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, #4caf50, #388e3c) !important;
  animation: pulse 1.5s ease-in-out infinite;
}

.challenge-check {
  font-size: 0.8rem;
  color: #4caf50;
  font-weight: 700;
}

.btn-challenges {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
}

/* === Battle Pass Screen === */
.bp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
}

.bp-header {
  text-align: center;
  width: 100%;
}

.bp-header h2 {
  background: linear-gradient(135deg, var(--type-cloud), var(--type-fire));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.bp-header-info {
  display: flex;
  gap: 20px;
  justify-content: center;
  font-weight: 600;
  color: var(--text-secondary);
}

.btn-premium {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1a2e;
  font-size: 0.95rem;
  min-width: auto;
  padding: 10px 20px;
  width: 100%;
  max-width: 320px;
}

.btn-premium.premium-active {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: white;
}

.btn-battlepass {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1a2e;
}

.bp-track {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}

.bp-day {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  min-height: 70px;
}

.bp-day.bp-locked {
  opacity: 0.4;
}

.bp-day.bp-today {
  opacity: 1;
}

.bp-day.bp-today .bp-day-num {
  color: var(--type-cloud);
  text-shadow: 0 0 8px var(--type-cloud);
}

.bp-day-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.bp-reward {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  position: relative;
}

.bp-reward-free {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-reward-premium {
  border: 1px solid rgba(255, 215, 0, 0.3);
  background: linear-gradient(135deg, rgba(15, 52, 96, 1), rgba(30, 30, 60, 1));
}

.bp-reward.bp-claimed {
  opacity: 0.6;
}

.bp-reward.bp-locked-premium {
  opacity: 0.35;
}

.bp-reward-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.bp-reward-premium .bp-reward-label {
  color: #ffd700;
}

.bp-reward-value {
  font-weight: 700;
  font-size: 0.78rem;
}

.bp-claim-btn {
  font-family: var(--font-display);
  font-size: 0.7rem !important;
  min-width: auto !important;
  padding: 4px 12px !important;
  background: linear-gradient(135deg, #4caf50, #388e3c);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

.bp-claim-premium {
  background: linear-gradient(135deg, #ffd700, #ffaa00) !important;
  color: #1a1a2e !important;
}

.bp-check {
  font-size: 1.2rem;
  color: #4caf50;
  font-weight: 700;
}

.bp-lock-icon {
  font-size: 0.9rem;
  opacity: 0.5;
}

/* === Battle Select Screen === */
.battle-select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
}

.battle-select-content {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
}

.no-monster-msg {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 20px;
  font-size: 1.1rem;
}

.active-monster-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 8px 16px;
  width: 100%;
}

.mini-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
}

/* World Grid */
.world-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.world-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
}

.world-card:hover:not(.world-locked) {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.world-card.world-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.world-card.world-complete {
  opacity: 0.8;
}

.world-icon {
  font-size: 2rem;
  min-width: 44px;
  text-align: center;
}

.world-info {
  flex: 1;
}

.world-name {
  font-family: var(--font-display);
  font-size: 1rem;
}

.world-progress-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 2px 0;
}

.world-progress-bar {
  width: 100%;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}

.world-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Level List */
.level-header {
  text-align: center;
  margin-bottom: 4px;
}

.level-header h3 {
  font-size: 1.3rem;
  margin: 8px 0 4px;
}

.world-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.level-back-btn {
  min-width: auto !important;
  padding: 8px 16px !important;
  font-size: 0.8rem !important;
}

.level-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.level-card:hover:not(.level-locked) {
  transform: translateY(-2px);
}

.level-card.level-locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.level-card.level-cleared {
  opacity: 0.7;
}

.level-card.level-boss {
  border: 2px solid rgba(255, 215, 0, 0.4);
}

.level-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  min-width: 36px;
  text-align: center;
}

.level-info {
  flex: 1;
}

.level-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.level-rewards {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.level-status {
  font-family: var(--font-display);
  font-size: 1rem;
  min-width: 36px;
  text-align: center;
  color: var(--text-secondary);
}

.level-cleared .level-status {
  color: #4caf50;
  font-size: 1.3rem;
}

/* === Topic Picker === */
.topic-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.topic-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.topic-icon {
  font-size: 2rem;
  min-width: 44px;
  text-align: center;
}

.topic-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

/* === PvP Screen === */
.pvp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
}

.pvp-title {
  background: linear-gradient(135deg, #ff3030, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
}

.pvp-status {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  min-height: 20px;
}

.pvp-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}

#pvp-phase-select {
  max-width: 520px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 4px 8px;
}

.btn-pvp {
  background: linear-gradient(135deg, #ff3030, #ff6b35);
}

.btn-events {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.btn-codes {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1a2e;
}

.btn-lab {
  background: linear-gradient(135deg, #39d98a, #1a8a56);
}

/* === Codes Screen === */
.codes-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.codes-title {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
}

.codes-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.code-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 340px;
}

.code-input {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-align: center;
  padding: 14px;
  border: 2px solid var(--bg-card);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.code-input:focus {
  outline: none;
  border-color: #f59e0b;
}

.code-input-row .btn {
  min-width: auto;
  padding: 14px 20px;
}

.code-result {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.code-result h3 {
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.code-result p {
  font-size: 0.85rem;
  margin: 0;
}

.code-success {
  background: rgba(76, 175, 80, 0.15);
  border: 2px solid #4caf50;
}

.code-success h3 {
  color: #4caf50;
}

.code-error {
  background: rgba(244, 67, 54, 0.15);
  border: 2px solid #f44336;
}

.code-error h3 {
  color: #f44336;
}

.code-reward-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 16px;
}

.code-reward-sprite {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.code-reward-sprite .monster {
  transform: scale(1.2);
}

.code-reward-item {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #fbbf24;
}

/* === Events Screen === */
.events-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.events-title {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
}

.events-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.event-card {
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.event-banner {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.event-icon {
  font-size: 2.5rem;
  min-width: 50px;
  text-align: center;
}

.event-info {
  flex: 1;
}

.event-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.event-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 8px;
}

.event-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffd700;
}

.btn-pvp-action {
  background: linear-gradient(135deg, var(--accent), #ff2e63);
  width: 100%;
}

.btn-join {
  width: auto !important;
  min-width: auto !important;
  padding: 14px 20px !important;
}

.pvp-divider {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.pvp-join-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.pvp-input {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-align: center;
  padding: 12px;
  border: 2px solid var(--bg-card);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.pvp-input:focus {
  outline: none;
  border-color: var(--accent);
}

.pvp-code-display {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 20px 40px;
  text-align: center;
}

.pvp-code-display h3 {
  font-size: 2.5rem;
  letter-spacing: 8px;
  color: var(--accent);
}

.pvp-waiting-text {
  color: var(--text-secondary);
  animation: pulse 1.5s ease-in-out infinite;
}

.pvp-opp-status {
  color: var(--type-cloud);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 20px;
}

.pvp-timer {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--type-cloud);
  text-align: center;
  min-height: 30px;
}

.pvp-opp-answered {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  animation: pulse 1s ease-in-out infinite;
}

.pvp-result-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.pvp-result-panel h2 {
  font-size: 2rem;
}

/* === Result Screen === */
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.result-container h2 {
  font-size: 2rem;
}

.result-details {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 250px;
}

.result-details p {
  font-size: 1.1rem;
  font-weight: 600;
}

.result-levelup {
  color: var(--type-cloud);
  font-family: var(--font-display);
}

/* ============================================================
   MONSTER LAB
   ============================================================ */
.lab-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.lab-container h2 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--rarity-custom);
  text-shadow: 0 0 8px rgba(57, 217, 138, 0.5);
}

.lab-subtitle {
  color: var(--text-secondary);
  margin: 0 0 8px;
  font-size: 0.95rem;
  text-align: center;
}

.lab-preview {
  width: 120px;
  height: 120px;
  background: var(--bg-secondary);
  border: 2px solid var(--rarity-custom);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(57, 217, 138, 0.25);
}

.lab-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lab-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lab-field label {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.lab-input,
.lab-select {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--bg-card);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
}

.lab-input:focus,
.lab-select:focus {
  outline: none;
  border-color: var(--rarity-custom);
}

.lab-stat-row {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  gap: 10px;
  align-items: center;
}

.lab-stat-row input[type=range] {
  width: 100%;
}

.lab-stat-value {
  font-weight: 700;
  color: var(--rarity-custom);
  text-align: right;
}

.lab-budget {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.lab-budget.over {
  color: var(--accent);
}

.lab-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lab-swatch-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lab-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s;
}

.lab-swatch:hover { transform: scale(1.15); }
.lab-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.lab-create-btn {
  padding: 14px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--rarity-custom), #1a8a56);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(57, 217, 138, 0.4);
}

.lab-create-btn:disabled {
  background: var(--bg-card);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.lab-msg {
  text-align: center;
  font-weight: 700;
  min-height: 20px;
}

.lab-msg.success { color: var(--rarity-custom); }
.lab-msg.error { color: var(--accent); }

/* === Team Battle === */
.btn-team {
  background: linear-gradient(135deg, #ef4444, #3b82f6);
}

.team-lobby-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.team-title {
  background: linear-gradient(135deg, #ef4444, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
}

.team-status {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  min-height: 20px;
}

.team-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
}

.team-info-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
}

.btn-team-action {
  background: linear-gradient(135deg, #ef4444, #f97316);
  width: 100%;
}

.team-count {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.team-rosters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.team-roster {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 12px;
  border: 2px solid var(--bg-card);
}

.team-roster.team-red { border-color: #ef4444; }
.team-roster.team-blue { border-color: #3b82f6; }

.team-roster h3 {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 8px;
}

.team-red h3 { color: #ef4444; }
.team-blue h3 { color: #3b82f6; }

.team-roster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  max-height: 220px;
  overflow-y: auto;
}

.team-roster-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid transparent;
}

.team-roster-slot.ready {
  border-color: var(--type-cloud);
}

.team-roster-slot.host {
  background: linear-gradient(90deg, var(--bg-card), rgba(255, 215, 0, 0.1));
}

.team-roster-empty {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.team-roster-info {
  flex: 1;
  min-width: 0;
}

.team-roster-name {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-roster-monster {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.team-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.team-monster-picker {
  width: 100%;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.team-monster-picker h4 {
  font-size: 1rem;
}

/* Team battle screen */
.team-battle-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  width: 100%;
  padding: 8px;
}

.team-pools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-pool {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 10px;
}

.team-pool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.team-pool-label {
  font-family: var(--font-display);
  font-size: 1rem;
}

.team-pool-label.label-red { color: #ef4444; }
.team-pool-label.label-blue { color: #3b82f6; }

.team-pool-hp-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.team-fill-self { background: linear-gradient(90deg, #4caf50, #8bc34a); }
.team-fill-enemy { background: linear-gradient(90deg, #ef4444, #f97316); }

.team-pool-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 80px;
  overflow-y: auto;
}

.tb-roster-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border-radius: 6px;
  padding: 4px 6px;
  width: 60px;
  transition: background 0.2s;
}

.tb-roster-slot.me {
  background: rgba(255, 215, 0, 0.2);
  outline: 1px solid #ffd700;
}

.tb-roster-slot.flash-correct {
  background: rgba(76, 175, 80, 0.5);
}

.tb-roster-name {
  font-size: 0.65rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
  margin-top: 2px;
}

.team-battle-msg {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  min-height: 30px;
  opacity: 0;
  transition: opacity 0.3s;
}

.team-battle-msg.visible {
  opacity: 1;
}

.team-answer-status {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-height: 18px;
}

/* ======================================================================
   Monsters & rewards screens — shared look (rw- = "rewards")
   Scoped by screen id so older generic rules (.monster-card etc. used by
   PvP / team lobby) stay untouched.
   ====================================================================== */
#screen-hatch, #screen-collection, #screen-shop, #screen-challenges,
#screen-battle-pass, #screen-codes, #screen-events, #screen-monster-lab, #screen-leaderboard,
#screen-achievements {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 18px 16px 28px;
}

.rw-page {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  height: auto;
  max-height: none;
  overflow: visible;
  flex-shrink: 0;
  padding-bottom: 12px;
}
.rw-page > .room-back { align-self: flex-start; margin: 0; padding: 8px 2px; font-weight: 800; }
.rw-page > .room-back:hover { color: var(--brand); }

.rw-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.rw-head-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 1.9rem;
  border-radius: 16px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.rw-head-text h2 {
  font-size: 1.6rem;
  line-height: 1.1;
  color: #f6f6e9;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.rw-head-text p { margin-top: 4px; font-size: .88rem; line-height: 1.4; color: var(--text-secondary); }
.rw-gems {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #16324a;
  border: 2px solid #2f6a8f;
  color: #cfeeff;
  font-weight: 800;
  font-size: .95rem;
  white-space: nowrap;
}
.rw-gems b { font-family: var(--font-display); font-weight: 400; }

.rw-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 16px;
}
.rw-section-title {
  font-size: 1.05rem;
  color: #e4eaf1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.rw-section-title small { font-family: var(--font-body); font-size: .78rem; color: var(--text-secondary); font-weight: 600; }
.rw-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rw-btn { min-width: 0; }
.rw-btn-soft { background: var(--surface-2); border: 2px solid var(--border); color: #e4eaf1; }
.rw-btn-battle { background: linear-gradient(135deg, #ff6b6b, #e8434f); color: #fff; }
.rw-btn-gold { background: linear-gradient(135deg, #ffd95a, #f5a623); color: #3a2600; }
.btn.rw-btn:disabled { opacity: .7; filter: grayscale(.5); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.rw-muted { color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }

.rw-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #0f1826;
  border: 1px solid #33445c;
  overflow: hidden;
}
.rw-bar > span {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #8fd35c, var(--brand));
  transition: width .6s ease;
}
.rw-bar.rw-bar-gold > span { background: linear-gradient(90deg, #f5a623, #ffe066); }

.rw-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.rw-stat b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: #fff; }
.rw-stat small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }

/* A drawn egg in element colours: .rw-egg with --egg-top / --egg-bottom / --egg-spot */
.rw-egg {
  position: relative;
  display: block;
  width: 64px;
  height: 82px;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 30% 62%, var(--egg-spot) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 40%, var(--egg-spot) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 78%, var(--egg-spot) 0 5%, transparent 6%),
    linear-gradient(160deg, var(--egg-top), var(--egg-bottom));
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .18), 0 8px 14px rgba(0, 0, 0, .35);
}
.rw-egg-shine {
  position: absolute;
  left: 20%; top: 14%;
  width: 22%; height: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: rotate(-20deg);
}

/* Confetti burst (js/utils/reward-ui.js) */
.rw-confetti { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.rw-confetti i {
  position: absolute;
  width: 9px; height: 13px;
  border-radius: 2px;
  opacity: 0;
  animation: rw-confetti 1.4s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes rw-confetti {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* Light rays behind a monster, coloured by --rarity */
.rw-rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--rarity, var(--rw-glow, #caee93)) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 68%);
  mask: radial-gradient(circle, #000 0 18%, transparent 68%);
  opacity: .55;
  animation: rw-spin 14s linear infinite;
  pointer-events: none;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }

/* === Hatch === */
#screen-hatch .egg-picker { display: flex; flex-direction: column; gap: 12px; }
.egg-owned-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.egg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 14px;
  border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--egg-accent) 55%, var(--border));
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--egg-accent) 30%, transparent), transparent 65%), var(--surface);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.egg-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(0, 0, 0, .35); }
.egg-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.egg-card .rw-egg { width: 70px; height: 90px; animation: rw-egg-idle 2.6s ease-in-out infinite; }
.egg-card:nth-child(2n) .rw-egg { animation-delay: -1.3s; }
.egg-card-count {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font: 1rem var(--font-display);
}
.egg-card-name { font-family: var(--font-display); font-size: 1.05rem; }
.egg-card-cta {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: .8rem;
  font-weight: 800;
  color: #e9f7d4;
}
@keyframes rw-egg-idle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3px); } }

.egg-shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.egg-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 16px;
  border: 2px dashed var(--border);
  background: rgba(255, 255, 255, .03);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}
.egg-shop-card:hover { border-color: var(--brand); color: #fff; }
.egg-shop-card .rw-egg { width: 34px; height: 44px; filter: saturate(.55) brightness(.85); box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .18); }
.egg-shop-name { font-weight: 800; font-size: .78rem; }
.egg-shop-cost { font-size: .72rem; font-weight: 800; color: #9fdcff; }

.hatch-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 18px; }
.hatch-empty-icon { font-size: 3rem; }
.hatch-empty h3 { font-size: 1.4rem; }
.hatch-empty p { color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }

/* Tap-to-crack stage */
#screen-hatch .egg-stage {
  width: 100%;
  height: auto;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 45%, #2c4260, var(--surface) 70%);
  border: 2px solid var(--border);
  padding: 20px;
}
.egg-stage-hint { font: 1.35rem var(--font-display); color: #fff; text-align: center; min-height: 1.7em; }
.egg-tap {
  position: relative;
  width: 170px;
  height: 220px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.egg-tap:focus-visible { outline: 3px solid var(--brand); outline-offset: 8px; border-radius: 40%; }
.egg-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tier, var(--egg-top)) 55%, transparent), transparent 65%);
  transition: background .3s ease;
  animation: rw-pulse-glow 1.8s ease-in-out infinite;
}
@keyframes rw-pulse-glow { 50% { transform: scale(1.08); opacity: .7; } }
.egg-half {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 30% 62%, var(--egg-spot) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 40%, var(--egg-spot) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 80%, var(--egg-spot) 0 5%, transparent 6%),
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .6) 0 8%, transparent 9%),
    linear-gradient(160deg, var(--egg-top), var(--egg-bottom));
  box-shadow: inset -14px -16px 0 rgba(0, 0, 0, .18);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .5s ease;
}
.egg-half-top { clip-path: polygon(0 0, 100% 0, 100% 56%, 88% 50%, 76% 58%, 64% 50%, 52% 58%, 40% 50%, 28% 58%, 16% 50%, 0 57%); }
.egg-half-bottom { clip-path: polygon(0 57%, 16% 50%, 28% 58%, 40% 50%, 52% 58%, 64% 50%, 76% 58%, 88% 50%, 100% 56%, 100% 100%, 0 100%); }
.egg-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.egg-cracks .crack {
  fill: none;
  stroke: #1d1a24;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset .35s ease;
}
.egg-tap.cracked-1 .crack-1,
.egg-tap.cracked-2 .crack-1, .egg-tap.cracked-2 .crack-2,
.egg-tap.cracked-3 .crack { stroke-dashoffset: 0; }
.egg-tap.wobble { animation: rw-egg-wobble .45s ease; }
.egg-tap.cracked-2.wobble { animation: rw-egg-wobble-big .5s ease; }
@keyframes rw-egg-wobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-9deg) scale(1.03); }
  45% { transform: rotate(8deg); }
  70% { transform: rotate(-4deg); }
}
@keyframes rw-egg-wobble-big {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg) scale(1.06) translateY(-6px); }
  40% { transform: rotate(12deg) scale(1.04); }
  65% { transform: rotate(-6deg); }
}
.egg-tap.bursting { animation: none; pointer-events: none; }
.egg-tap.bursting .egg-half-top { transform: translate(-30px, -120px) rotate(-35deg); opacity: 0; }
.egg-tap.bursting .egg-half-bottom { transform: translateY(40px) scale(.9); opacity: 0; }
.egg-tap.bursting .egg-cracks { opacity: 0; transition: opacity .2s; }
.egg-tap.bursting .egg-glow {
  animation: none;
  background: radial-gradient(circle, #fff 0 20%, var(--rarity, #fff) 40%, transparent 70%);
  transform: scale(1.35);
  opacity: .9;
  transition: transform .5s ease, opacity .6s ease;
}
.egg-taps { display: flex; gap: 10px; }
.egg-taps i { width: 16px; height: 16px; border-radius: 50%; background: #0f1826; border: 2px solid var(--border); transition: background .2s, transform .2s; }
.egg-taps i.on { background: var(--tap-color, var(--brand)); border-color: var(--tap-color, var(--brand)); transform: scale(1.2); }
.egg-stage-cancel { margin: 0; font-size: .9rem; }

/* Reveal */
#screen-hatch .hatch-reveal {
  --rarity: #b8c0cc;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 20px;
  border-radius: 24px;
  border: 3px solid var(--rarity);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rarity) 28%, #1f2b3d), var(--surface) 70%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--rarity) 35%, transparent), 0 6px 0 rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: rw-pop-in .55s cubic-bezier(.2, 1.4, .4, 1);
}
.reveal-banner {
  position: relative;
  z-index: 2;
  padding: 6px 22px;
  border-radius: 999px;
  font: 1rem var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1a1a2e;
  background: var(--rarity);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.reveal-stage {
  position: relative;
  width: 100%;
  height: 190px;
  display: grid;
  place-items: center;
}
#screen-hatch .reveal-monster {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  animation: rw-monster-pop .7s cubic-bezier(.2, 1.6, .4, 1) .1s both;
}
#screen-hatch .reveal-monster .monster { zoom: 1.9; }
@keyframes rw-monster-pop { 0% { transform: scale(0) translateY(40px); } 100% { transform: scale(1); } }
@keyframes rw-pop-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.reveal-new {
  position: absolute;
  top: 58px; right: 18px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--bad);
  color: #fff;
  font: .9rem var(--font-display);
  transform: rotate(10deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
#screen-hatch .hatch-reveal h3 { position: relative; z-index: 2; font-size: 2rem; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
#screen-hatch .reveal-stats { position: relative; z-index: 2; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reveal-actions { position: relative; z-index: 2; display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.reveal-actions .btn { width: 100%; }
#screen-hatch[data-mode="crack"] .rw-head p,
#screen-hatch[data-mode="reveal"] .rw-head p { display: none; }

/* === Hatch animations by rarity ===
   Common: a quick pop. Rare: bounce + ring. Epic: build-up vortex, spin-in.
   Legendary: golden beam, slam-down, star rain. Heroic: lightning, shaking,
   rainbow everything. Driven by hatch.js (playIntro / playRevealFx). */

/* The egg charging up before it bursts */
#hatch-egg.charging { animation: rw-egg-charge .14s linear infinite; }
#hatch-egg.charging-legendary { animation-duration: .1s; }
#hatch-egg.charging-heroic { animation-duration: .07s; filter: drop-shadow(0 0 18px #ff3030); }
#hatch-egg.charging .egg-glow {
  animation: none;
  background: radial-gradient(circle, #fff 0 12%, var(--rarity) 35%, transparent 70%);
  transform: scale(1.4);
  transition: transform .8s ease, background .3s ease;
}
@keyframes rw-egg-charge {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-3px, 1px) rotate(-4deg); }
  50% { transform: translate(2px, -2px) rotate(3deg); }
  75% { transform: translate(-1px, 2px) rotate(-2deg); }
}

/* Full-screen build-up layer, centred on the egg (--cx, --cy) */
.hatch-intro { position: fixed; inset: 0; z-index: 900; overflow: hidden; cursor: pointer; }
.hatch-intro > * { position: absolute; pointer-events: none; transition: opacity .35s ease; }
.hi-dim {
  inset: 0;
  background: radial-gradient(circle at var(--cx) var(--cy), transparent 0 110px, rgba(5, 8, 16, .55) 200px, rgba(5, 8, 16, .88) 420px);
  animation: hi-fade .4s ease-out both;
}
.hatch-intro[data-rarity="heroic"] .hi-dim {
  background: radial-gradient(circle at var(--cx) var(--cy), transparent 0 100px, rgba(60, 0, 0, .75) 190px, rgba(0, 0, 0, .96) 400px);
}
.hi-vortex {
  left: var(--cx); top: var(--cy);
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--rarity) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 80px, #000 105px, transparent 70%);
  mask: radial-gradient(circle, transparent 0 80px, #000 105px, transparent 70%);
  mix-blend-mode: screen;
  animation: hi-vortex var(--dur) ease-in forwards;
}
.hatch-intro[data-rarity="heroic"] .hi-vortex {
  background: repeating-conic-gradient(#ff3030 0 10deg, transparent 10deg 20deg, #ffd60a 20deg 30deg, transparent 30deg 40deg, #4cc9f0 40deg 50deg, transparent 50deg 60deg);
  animation: hi-vortex var(--dur) ease-in forwards, hi-hue 1s linear infinite;
}
.hi-beam {
  left: var(--cx); top: 0;
  width: 170px; height: calc(var(--cy) + 40px);
  margin-left: -85px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--rarity) 55%, transparent) 30%, color-mix(in srgb, #fff 65%, var(--rarity)));
  -webkit-mask: linear-gradient(90deg, transparent, #000 35% 65%, transparent);
  mask: linear-gradient(90deg, transparent, #000 35% 65%, transparent);
  mix-blend-mode: screen;
  transform-origin: top;
  animation: hi-beam calc(var(--dur) * .5) ease-out both;
}
.hatch-intro[data-rarity="heroic"] .hi-beam { animation: hi-beam calc(var(--dur) * .5) ease-out both, hi-hue 1.2s linear infinite; }
.hi-motes i {
  position: absolute;
  left: var(--cx); top: var(--cy);
  width: 7px; height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .55);
  opacity: 0;
  animation: hi-mote .9s ease-in infinite;
}
.hi-bolt { inset: 0; animation: hi-bolt-flash var(--dur) steps(1) both; }
.hi-bolt::before, .hi-bolt::after {
  content: '';
  position: absolute;
  top: 0;
  width: 90px;
  height: max(160px, calc(var(--cy) - 40px));
  background: linear-gradient(#fff, #ff6b6b);
  clip-path: polygon(50% 0, 64% 0, 50% 40%, 72% 40%, 28% 100%, 42% 55%, 22% 55%);
  filter: drop-shadow(0 0 12px #ff3030);
  opacity: 0;
}
.hi-bolt::before { left: calc(var(--cx) - 160px); animation: hi-bolt-a var(--dur) steps(1) both; }
.hi-bolt::after { left: calc(var(--cx) + 70px); transform: scaleX(-1); animation: hi-bolt-b var(--dur) steps(1) both; }
.hi-caption {
  left: 16px; right: 16px; bottom: 12%;
  text-align: center;
  font: 1.6rem var(--font-display);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 12px #ff3030, 0 0 30px #ff3030;
  animation: hi-fade .4s ease-out .3s both, hi-caption .4s ease-in-out infinite alternate;
}
/* The final flash as the egg bursts */
.hatch-intro.flash { pointer-events: none; }
.hatch-intro.flash > * { opacity: 0; }
.hatch-intro.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx) var(--cy), #fff 0 30%, color-mix(in srgb, var(--rarity) 55%, #fff) 80%);
  animation: hi-flash .9s ease-out forwards;
}
.hatch-intro[data-rarity="epic"].flash::after { background: radial-gradient(circle at var(--cx) var(--cy), #fff 0 15%, transparent 60%); }

@keyframes hi-fade { from { opacity: 0; } }
@keyframes hi-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes hi-hue { to { filter: hue-rotate(360deg); } }
@keyframes hi-vortex {
  0% { transform: scale(1.5) rotate(0); opacity: 0; }
  20% { opacity: .8; }
  100% { transform: scale(.6) rotate(900deg); opacity: 1; }
}
@keyframes hi-beam {
  0% { transform: scaleY(0) scaleX(.2); opacity: 0; }
  100% { transform: scaleY(1) scaleX(1); opacity: .9; }
}
@keyframes hi-mote {
  0% { transform: translate(var(--sx), var(--sy)) scale(1.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(0, 0) scale(.3); opacity: 0; }
}
@keyframes hi-bolt-flash {
  0% { background: transparent; }
  35% { background: rgba(255, 70, 70, .5); }
  37% { background: rgba(255, 255, 255, .45); }
  39% { background: transparent; }
  62% { background: rgba(255, 70, 70, .55); }
  64% { background: transparent; }
  85% { background: rgba(255, 255, 255, .55); }
  87% { background: rgba(255, 70, 70, .4); }
  89% { background: transparent; }
}
@keyframes hi-bolt-a { 0% { opacity: 0; } 35% { opacity: 1; } 40% { opacity: 0; } 85% { opacity: 1; } 89% { opacity: 0; } }
@keyframes hi-bolt-b { 0% { opacity: 0; } 62% { opacity: 1; } 66% { opacity: 0; } 86% { opacity: 1; } 89% { opacity: 0; } }
@keyframes hi-caption { to { transform: scale(1.08); color: #ffd6d6; } }

/* Screen shake */
.hatch-container.hatch-shake { animation: hatch-shake .12s linear infinite; }
.hatch-container.hatch-shake-big { animation: hatch-shake-big .6s ease-out; }
@keyframes hatch-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -3px); }
}
@keyframes hatch-shake-big {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 6px); }
  25% { transform: translate(9px, -7px); }
  40% { transform: translate(-7px, -4px); }
  55% { transform: translate(5px, 5px); }
  75% { transform: translate(-2px, 2px); }
}

/* Reveal extras: shockwave rings + drifting sparkles */
.reveal-ring {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 1;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 4px solid var(--rarity);
  opacity: 0;
  pointer-events: none;
  animation: rw-ring .9s ease-out both;
}
@keyframes rw-ring {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.2); opacity: 0; border-width: 1px; }
}
.reveal-sparkles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.reveal-sparkles i {
  position: absolute;
  bottom: -24px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 8px currentColor;
  opacity: 0;
  animation: rw-sparkle-rise 3s ease-out both;
}
#hatch-reveal[data-rarity="legendary"] .reveal-sparkles i { bottom: auto; top: -24px; animation-name: rw-sparkle-fall; }
@keyframes rw-sparkle-rise {
  0% { transform: translateY(0) scale(.6) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-460px) scale(1.1) rotate(180deg); opacity: 0; }
}
@keyframes rw-sparkle-fall {
  0% { transform: translateY(0) scale(.6) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(560px) scale(1.1) rotate(-200deg); opacity: 0; }
}

/* Common: plain and quick */
#hatch-reveal[data-rarity="common"] .rw-rays { display: none; }
#hatch-reveal[data-rarity="common"] .reveal-monster { animation: rw-monster-pop .45s ease-out .05s both; }

/* Uncommon: a quick bounce with faint green rays */
#hatch-reveal[data-rarity="uncommon"] .rw-rays { opacity: .25; animation-duration: 26s; }
#hatch-reveal[data-rarity="uncommon"] .reveal-monster { animation: rw-monster-pop .5s cubic-bezier(.2, 1.5, .4, 1) .05s both; }

/* Rare: bouncy pop, slow blue rays */
#hatch-reveal[data-rarity="rare"] .rw-rays { opacity: .4; animation-duration: 20s; }
#hatch-reveal[data-rarity="rare"] .reveal-banner { animation: rw-banner-stamp .45s cubic-bezier(.2, 1.6, .4, 1) .15s both; }

/* Epic: monster spins in, banner stamps down */
#hatch-reveal[data-rarity="epic"] .rw-rays { opacity: .65; animation-duration: 8s; }
#screen-hatch #hatch-reveal[data-rarity="epic"] .reveal-monster {
  animation: rw-monster-spin .9s cubic-bezier(.2, 1.4, .4, 1) .1s both, epic-glow 2s ease-in-out 1s infinite;
}
#hatch-reveal[data-rarity="epic"] .reveal-banner { animation: rw-banner-stamp .5s cubic-bezier(.2, 1.6, .4, 1) .5s both; }

/* Legendary: slams down from above, golden halo, shining banner and name */
#hatch-reveal[data-rarity="legendary"] .rw-rays { opacity: .85; animation-duration: 6s; width: 420px; height: 420px; margin: -210px 0 0 -210px; }
#screen-hatch #hatch-reveal[data-rarity="legendary"] .reveal-monster {
  animation: rw-monster-slam .8s cubic-bezier(.5, 0, .5, 1) .05s both, legendary-glow 2s ease-in-out .9s infinite;
}
#hatch-reveal[data-rarity="legendary"] .reveal-banner,
#hatch-reveal[data-rarity="heroic"] .reveal-banner {
  background: linear-gradient(110deg, var(--rarity) 0 40%, #fff 50%, var(--rarity) 60% 100%) 0 0 / 250% 100%;
  animation: rw-banner-stamp .55s cubic-bezier(.2, 1.6, .4, 1) .7s both, rw-shine 1.8s linear 1.3s infinite;
}
#hatch-reveal[data-rarity="legendary"] h3 {
  background: linear-gradient(110deg, #ffd60a 0 40%, #fff 50%, #ffd60a 60% 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: rw-shine 2.2s linear 1s infinite;
}

/* Heroic: rainbow rays, flash-in from pure light, rainbow card */
#hatch-reveal[data-rarity="heroic"] .rw-rays {
  opacity: 1; width: 480px; height: 480px; margin: -240px 0 0 -240px;
  background: repeating-conic-gradient(#ff3030 0 8deg, transparent 8deg 16deg, #ffd60a 16deg 24deg, transparent 24deg 32deg, #4cc9f0 32deg 40deg, transparent 40deg 48deg);
  animation: rw-spin 4s linear infinite, hi-hue 3s linear infinite;
}
#screen-hatch #hatch-reveal[data-rarity="heroic"] .reveal-monster {
  animation: rw-monster-ascend 1.2s cubic-bezier(.2, 1.2, .4, 1) .05s both, heroic-glow 1.5s ease-in-out 1.3s infinite;
}
#screen-hatch #hatch-reveal[data-rarity="heroic"] {
  animation: rw-pop-in .55s cubic-bezier(.2, 1.4, .4, 1), rw-rainbow-border 1.6s linear infinite;
}
#hatch-reveal[data-rarity="heroic"] .reveal-banner {
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  background: linear-gradient(90deg, #ff3030, #ff9f1c, #ffd60a, #39d98a, #4cc9f0, #c44cff, #ff3030) 0 0 / 300% 100%;
  animation: rw-banner-stamp .6s cubic-bezier(.2, 1.6, .4, 1) 1s both, rw-shine 2s linear 1.6s infinite;
}
#hatch-reveal[data-rarity="heroic"] h3 {
  background: linear-gradient(90deg, #ff3030, #ff9f1c, #ffd60a, #39d98a, #4cc9f0, #c44cff, #ff3030) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
  animation: rw-shine 2s linear infinite;
}

@keyframes rw-banner-stamp {
  0% { transform: scale(2.4) rotate(-6deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes rw-shine { to { background-position: -250% 0; } }
@keyframes rw-monster-spin {
  0% { transform: scale(0) rotate(-540deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes rw-monster-slam {
  0% { transform: translateY(-260px) scale(1.4); opacity: 0; }
  55% { transform: translateY(0) scale(1.2, .8); opacity: 1; }
  75% { transform: translateY(-18px) scale(.95, 1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes rw-monster-ascend {
  0% { transform: scale(0) rotate(-720deg); filter: brightness(8) saturate(0); }
  55% { transform: scale(1.35) rotate(0); filter: brightness(5) saturate(0); }
  75% { transform: scale(.92); filter: brightness(1.4); }
  100% { transform: scale(1); filter: none; }
}
@keyframes rw-rainbow-border {
  0%, 100% { border-color: #ff3030; box-shadow: 0 0 50px #ff303088, 0 6px 0 rgba(0, 0, 0, .35); }
  20% { border-color: #ff9f1c; box-shadow: 0 0 50px #ff9f1c88, 0 6px 0 rgba(0, 0, 0, .35); }
  40% { border-color: #ffd60a; box-shadow: 0 0 50px #ffd60a88, 0 6px 0 rgba(0, 0, 0, .35); }
  60% { border-color: #39d98a; box-shadow: 0 0 50px #39d98a88, 0 6px 0 rgba(0, 0, 0, .35); }
  80% { border-color: #4cc9f0; box-shadow: 0 0 50px #4cc9f088, 0 6px 0 rgba(0, 0, 0, .35); }
}

/* Rarity colours as backgrounds/borders */
.rarity-bg-common { --rarity: #b8c0cc; }
.rarity-bg-uncommon { --rarity: #5ad13b; }
.rarity-bg-rare { --rarity: #4cc9f0; }
.rarity-bg-epic { --rarity: #c44cff; color: #fff !important; }
.rarity-bg-legendary { --rarity: #ffd60a; }
.rarity-bg-heroic { --rarity: #ff3030; color: #fff !important; }
.rarity-bg-custom { --rarity: #39d98a; }

/* === Evolution celebration overlay === */
.rw-celebrate {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 12, 20, .78);
  backdrop-filter: blur(4px);
}
.rw-celebrate-card {
  position: relative;
  width: min(100%, 420px);
  padding: 26px 22px 22px;
  border-radius: 26px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rw-glow) 30%, #26394f), #1a2638 70%);
  border: 3px solid var(--rw-glow);
  box-shadow: 0 0 60px color-mix(in srgb, var(--rw-glow) 40%, transparent), 0 24px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
  animation: rw-pop-in .5s cubic-bezier(.2, 1.4, .4, 1);
}
.rw-celebrate-card .eyebrow { position: relative; z-index: 1; color: #ffd166; font-size: .8rem; }
.rw-celebrate-card .rw-rays { top: 120px; }
.rw-celebrate-card h2 { position: relative; z-index: 1; font-size: 1.8rem; color: #fff; margin: 8px 0 4px; }
.rw-evo-sub { position: relative; z-index: 1; color: #dfe8f1; line-height: 1.4; }
.rw-evo-pair { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 22px; height: 150px; }
.rw-evo-sprite { display: grid; place-items: center; width: 90px; height: 110px; }
.rw-evo-old { opacity: .55; filter: grayscale(.5); }
.rw-evo-old .monster { zoom: 1.1; }
.rw-evo-new .monster { zoom: 1.5; }
.rw-evo-new { animation: rw-monster-pop .8s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
.rw-evo-arrow { font-size: 1.8rem; color: var(--brand); }
.rw-evo-track { position: relative; z-index: 1; list-style: none; display: flex; justify-content: center; gap: 4px; margin: 14px 0 18px; flex-wrap: wrap; }
.rw-evo-track li { padding: 4px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(255, 255, 255, .08); color: #9fb0c3; }
.rw-evo-track li.done { background: #2f4a44; color: #caee93; }
.rw-evo-track li.current { background: var(--brand); color: var(--brand-ink); }
.rw-celebrate-ok { position: relative; z-index: 1; width: 100%; }

/* === Collection === */
#screen-collection .collection-container { height: auto; }
.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.collection-count { font-weight: 800; color: #dbe6f0; }
.collection-sort { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .85rem; color: var(--text-secondary); }
.collection-sort select {
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: #fff;
  font: 700 .9rem var(--font-body);
  cursor: pointer;
}
#screen-collection .collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  overflow: visible;
  flex: none;
  padding: 0;
}
#screen-collection .rw-monster-card {
  --rarity: #b8c0cc;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border-radius: 20px;
  border: 3px solid color-mix(in srgb, var(--rarity) 70%, transparent);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rarity) 22%, transparent), transparent 60%), var(--surface);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
#screen-collection .rw-monster-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(0, 0, 0, .35); }
#screen-collection .rw-monster-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
#screen-collection .rw-monster-card.active-monster {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(202, 238, 147, .25), 0 0 22px rgba(202, 238, 147, .35), 0 5px 0 rgba(0, 0, 0, .35);
}
.partner-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font: .78rem var(--font-display);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  z-index: 2;
}
.card-sprite-wrap { width: 90px; height: 84px; display: grid; place-items: center; }
#screen-collection .card-sprite-wrap .monster { zoom: 1.15; }
#screen-collection .card-name { font-family: var(--font-display); font-size: 1rem; line-height: 1.1; text-align: center; }
#screen-collection .card-level { font-size: .78rem; font-weight: 800; color: #dbe6f0; }
.card-xp { width: 100%; height: 8px; }
.card-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; }
.card-badges .type-badge { font-size: .62rem; padding: 2px 8px; }
.card-rarity { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rarity); }
.collection-empty.rw-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 18px; color: var(--text-secondary); }
.collection-empty h3 { color: #fff; font-size: 1.4rem; }

/* === Monster detail modal (#monster-modal) === */
#monster-modal { background: rgba(8, 12, 20, .8); backdrop-filter: blur(4px); }
#monster-modal .modal-content {
  --rarity: #b8c0cc;
  max-width: 440px;
  max-height: 92vh;
  padding: 18px 18px 20px;
  gap: 12px;
  border-radius: 24px;
  border: 3px solid var(--rarity);
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rarity) 25%, #1f2b3d), var(--surface) 55%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--rarity) 30%, transparent), 0 24px 60px rgba(0, 0, 0, .5);
  animation: rw-pop-in .3s cubic-bezier(.2, 1.4, .4, 1);
}
.modal-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  z-index: 3;
}
.modal-hero { position: relative; width: 100%; height: 130px; display: grid; place-items: center; }
#monster-modal .modal-monster-sprite { width: 120px; height: 120px; }
#monster-modal .modal-monster-sprite .monster { transform: none; zoom: 1.6; }
#monster-modal .modal-monster-name { font-size: 1.7rem; color: #fff; }
.modal-badges { display: flex; gap: 8px; align-items: center; justify-content: center; }
.modal-rarity { padding: 4px 12px; border-radius: 999px; background: var(--rarity); color: #1a1a2e; font-weight: 800; font-size: .8rem; text-transform: uppercase; }
.modal-partner { width: 100%; display: flex; justify-content: center; }
.modal-partner-btn { width: 100%; }
.partner-pill { padding: 8px 14px; border-radius: 999px; background: #2f4a44; color: var(--brand); font-weight: 800; font-size: .88rem; text-align: center; }
#monster-modal .modal-monster-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; color: inherit; }
#monster-modal .rw-stat { min-width: 0; padding: 6px 4px; }
#monster-modal .rw-stat b { font-size: .95rem; }
#monster-modal .rw-stat small { font-size: .58rem; }
.modal-evolution { width: 100%; padding: 12px 14px; border-radius: 18px; background: rgba(15, 24, 38, .7); border: 1px solid var(--border); display: grid; gap: 8px; }
.evo-head { display: flex; justify-content: space-between; font-weight: 800; color: #fff; }
.evo-form { padding: 2px 10px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .78rem; }
.evo-next { font-size: .92rem; color: #dbe6f0; }
.evo-next b { color: var(--brand); }
.evo-stages { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.evo-stages li { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .64rem; font-weight: 800; color: #8b9bb0; text-align: center; }
.evo-stages li span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #0f1826; border: 2px solid var(--border); font-size: .7rem; color: #8b9bb0; }
.evo-stages li.done { color: #b9dc8c; }
.evo-stages li.done span { background: #2f4a44; border-color: #6c9a55; color: var(--brand); }
.evo-stages li.current { color: #fff; }
.evo-stages li.current span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); transform: scale(1.15); }
/* Each form's picture; forms you haven't reached are mystery silhouettes. */
.evo-stages .evo-pic { width: 100%; height: 58px; display: grid; place-items: end center; padding-bottom: 6px; }
.evo-stages .evo-pic .monster { scale: .62; animation: none; }
.evo-stages li.locked .evo-pic { filter: brightness(0) drop-shadow(0 0 1px #8b9bb088); opacity: .55; }
.evo-stages li small { font-size: .56rem; font-weight: 700; opacity: .7; }
.evo-xp-text { font-size: .8rem; font-weight: 800; color: #dbe6f0; text-align: right; }
.evo-tip { font-size: .74rem; color: var(--text-secondary); line-height: 1.4; }
.modal-lore { width: 100%; display: grid; gap: 6px; }
.modal-desc { font-size: .85rem; color: #c8d3de; line-height: 1.5; text-align: center; }
.modal-skill { font-size: .82rem; color: #dbe6f0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.modal-skill b { color: var(--brand); }
#monster-modal .modal-skins-title { align-self: flex-start; font-size: 1.05rem; }
#monster-modal .skin-card { background: var(--surface-2); border: 2px solid var(--border); border-radius: 16px; }
#monster-modal .skin-card.skin-active { border-color: var(--brand); box-shadow: 0 0 12px rgba(202, 238, 147, .3); }
#monster-modal .skin-equipped { color: var(--brand); }
.skin-preview { width: 70px; height: 78px; display: flex; align-items: center; justify-content: center; overflow: visible; }
#monster-modal .skin-buy-btn, #monster-modal .skin-equip-btn { font-family: var(--font-body); font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); white-space: normal; line-height: 1.2; }
#monster-modal .skin-equip-btn { background: var(--brand) !important; color: var(--brand-ink) !important; }
#monster-modal .modal-back-btn { background: var(--surface-2); border: 2px solid var(--border); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }

/* === Shop === */
#screen-shop .shop-container { height: auto; overflow: visible; }
#screen-shop .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#screen-shop .shop-item {
  --egg-accent: #4d9bff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px 12px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--egg-accent) 22%, transparent), transparent 60%), var(--surface);
  text-align: center;
}
#screen-shop .shop-item-event { border-color: #7b68c9; }
.shop-tag { position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: 8px; background: #7b68c9; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.shop-item-art { height: 74px; display: grid; place-items: center; }
.shop-item-art .rw-egg { width: 54px; height: 70px; }
.shop-item-icon { font-size: 2.8rem; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
#screen-shop .shop-item .item-name { font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
#screen-shop .shop-item .item-desc { font-size: .78rem; line-height: 1.35; color: var(--text-secondary); flex: 1; }
.item-have { font-size: .75rem; font-weight: 800; color: var(--brand); }
#screen-shop .shop-buy-btn {
  width: 100%;
  padding: 10px 8px;
  font-size: .9rem;
  background: var(--brand);
  color: var(--brand-ink);
}
#screen-shop .shop-buy-btn:disabled { background: var(--surface-2); color: #c3cfdc; font-family: var(--font-body); font-weight: 800; font-size: .8rem; }
#screen-shop .shop-item.shop-bought { animation: rw-bought .5s ease; }
@keyframes rw-bought { 40% { transform: scale(1.05); border-color: var(--brand); } }
.shop-flash {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 16px;
  background: #2f4a44;
  border: 2px solid var(--brand);
  color: #eaffd0;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.shop-flash .btn { padding: 8px 14px; font-size: .9rem; }
#screen-shop .inventory-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 10px; }
#screen-shop .inventory-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 700; }
#screen-shop .inventory-item b { color: var(--brand); }
.shop-earn { display: grid; gap: 10px; }
.shop-earn .rw-actions { justify-content: flex-start; }
.shop-earn .btn { padding: 10px 14px; font-size: .9rem; }

/* === Daily challenges === */
#screen-challenges .challenges-container { height: auto; }
.challenges-summary { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.challenges-summary strong { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.challenges-summary .rw-bar { grid-column: 1 / -1; }
.challenges-reset { font-size: .8rem; font-weight: 800; color: #ffd166; white-space: nowrap; }
#screen-challenges .challenges-list { display: flex; flex-direction: column; gap: 12px; overflow: visible; flex: none; }
#screen-challenges .challenge-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--surface);
  opacity: 1;
}
#screen-challenges .challenge-card.challenge-ready { border-color: var(--brand); box-shadow: 0 0 18px rgba(202, 238, 147, .3); }
#screen-challenges .challenge-card.challenge-claimed { background: #1b2735; }
#screen-challenges .challenge-card.challenge-claimed .challenge-icon { filter: grayscale(.6); }
.challenge-icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.7rem; border-radius: 16px; background: var(--surface-2); }
#screen-challenges .challenge-info { gap: 6px; }
#screen-challenges .challenge-desc { font-size: 1.05rem; }
#screen-challenges .challenge-progress-text { font-size: .8rem; color: #dbe6f0; }
.challenge-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.challenge-gem { padding: 6px 12px; border-radius: 999px; background: #16324a; border: 2px solid #2f6a8f; color: #cfeeff; font: 1rem var(--font-display); white-space: nowrap; }
.challenge-foot .btn { padding: 10px 16px; font-size: .95rem; }
.challenge-claimed-label { font-weight: 800; color: var(--good); }
#screen-challenges .challenge-ready .challenge-claim { animation: pulse 1.5s ease-in-out infinite; }

/* === Battle pass === */
#screen-battle-pass .bp-container { height: auto; }
.bp-today-card { position: relative; display: grid; gap: 10px; text-align: center; border-color: #ffd166; background: radial-gradient(circle at 50% 0%, #4a3f22, var(--surface) 70%); overflow: hidden; }
.bp-today-card .eyebrow { color: #ffd166; }
.bp-today-card h3 { font-size: 1.5rem; }
.bp-today-rewards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bp-today-reward { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--border); }
.bp-today-reward.premium { border-color: #b8952f; }
.bp-today-reward span { font-size: 1.8rem; }
.bp-today-reward b { font-size: .92rem; }
.bp-today-reward small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: var(--text-secondary); }
.bp-progress { display: grid; gap: 6px; }
.bp-progress-row { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 800; color: #dbe6f0; }
#screen-battle-pass .btn-premium { width: 100%; max-width: none; }
.bp-premium-note { font-size: .78rem; color: var(--text-secondary); text-align: center; margin-top: -8px; }
#screen-battle-pass .bp-track { overflow: visible; flex: none; gap: 8px; padding: 0; }
#screen-battle-pass .bp-day {
  grid-template-columns: 64px 1fr 1fr;
  gap: 8px;
  min-height: 78px;
  padding: 6px;
  border-radius: 18px;
  border: 2px solid transparent;
}
#screen-battle-pass .bp-day.bp-locked { opacity: .55; }
#screen-battle-pass .bp-day.bp-today { border-color: #ffd166; background: rgba(255, 209, 102, .08); box-shadow: 0 0 18px rgba(255, 209, 102, .2); }
#screen-battle-pass .bp-day-num { flex-direction: column; gap: 2px; font-size: .9rem; color: #dbe6f0; }
#screen-battle-pass .bp-day-num small { font-family: var(--font-body); font-size: .6rem; font-weight: 800; letter-spacing: .06em; color: var(--text-secondary); }
#screen-battle-pass .bp-today .bp-day-num { color: #ffd166; text-shadow: none; }
#screen-battle-pass .bp-today .bp-day-num small { color: var(--brand-ink); background: #ffd166; padding: 1px 6px; border-radius: 6px; }
#screen-battle-pass .bp-reward { border-radius: 14px; background: var(--surface); border: 2px solid var(--border); padding: 8px 6px; }
#screen-battle-pass .bp-reward-premium { background: linear-gradient(160deg, #3a3220, var(--surface)); border-color: #6d5a26; }
#screen-battle-pass .bp-reward.bp-claimed { opacity: .55; }
#screen-battle-pass .bp-reward.bp-locked-premium { opacity: .6; }
.bp-reward-icon { font-size: 1.3rem; line-height: 1; }
#screen-battle-pass .bp-reward-value { font-size: .8rem; }
#screen-battle-pass .bp-claim-btn { font-family: var(--font-display); font-size: .85rem !important; padding: 6px 14px !important; background: var(--brand); color: var(--brand-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); border-radius: 10px; }
#screen-battle-pass .bp-claim-premium { background: linear-gradient(135deg, #ffd95a, #f5a623) !important; color: #3a2600 !important; }
#screen-battle-pass .bp-check { font-size: .8rem; color: var(--good); }
.bp-soon { font-size: .68rem; font-weight: 800; color: var(--text-secondary); }

/* === Codes === */
#screen-codes .codes-container { height: auto; }
#screen-codes .code-box { display: grid; gap: 12px; }
#screen-codes .code-input-row { display: flex; gap: 10px; width: 100%; }
#screen-codes .code-input {
  flex: 1;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: #0f1826;
  color: #fff;
  font: 1.3rem var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
#screen-codes .code-input:focus { outline: none; border-color: var(--brand); }
#screen-codes .code-input-row .btn { padding: 12px 18px; }
#screen-codes .code-result { border-radius: 18px; padding: 16px; text-align: center; }
#screen-codes .code-reward-display { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 20px; background: var(--surface); border: 2px solid var(--brand); }
#screen-codes .code-reward-item { width: 100%; text-align: center; padding: 10px; border-radius: 12px; background: var(--surface-2); font-weight: 800; }
.code-tips { display: grid; gap: 6px; }
.code-tips li { margin-left: 18px; color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }

/* === Events === */
#screen-events .events-container { height: auto; }
#screen-events .events-list { display: grid; gap: 14px; overflow: visible; flex: none; }
#screen-events .event-card {
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .15);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  cursor: default;
  transform: none;
}
#screen-events .event-banner { padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
#screen-events .event-icon { font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
#screen-events .event-name { font-size: 1.35rem; }
#screen-events .event-desc { font-size: .88rem; line-height: 1.45; color: #e8eef5; }
.event-progress { grid-column: 1 / -1; display: grid; gap: 6px; }
.event-progress-text { font-size: .8rem; font-weight: 800; color: #fff; }
.event-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.event-actions .btn { flex: 1 1 140px; padding: 11px 12px; font-size: .95rem; }
.event-actions .rw-btn-soft { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .25); }

/* === Achievements === */
#screen-achievements .rw-page { padding-bottom: 12px; }
.ach-summary { display: grid; gap: 8px; }
.ach-summary strong { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
#screen-achievements .achievements-list { display: grid; gap: 10px; }
#screen-achievements .achievement-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; border: 2px solid var(--border); background: var(--surface); }
#screen-achievements .achievement-card.earned { border-color: #b8952f; background: radial-gradient(circle at 0% 50%, rgba(255, 209, 102, .18), transparent 50%), var(--surface); }
#screen-achievements .achievement-card:not(.earned) .achievement-icon { filter: grayscale(1); opacity: .6; }
#screen-achievements .achievement-icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.8rem; border-radius: 16px; background: var(--surface-2); }
#screen-achievements .achievement-card h3 { font-size: 1.02rem; }
#screen-achievements .achievement-card p { font-size: .82rem; color: var(--text-secondary); margin: 2px 0 6px; }
#screen-achievements .achievement-card small { font-size: .75rem; font-weight: 800; color: #dbe6f0; }
#screen-achievements .achievement-card.earned small { color: #ffd166; }
#screen-achievements .achievement-card .rw-bar { height: 9px; margin-bottom: 4px; }

/* === Monster Lab === */
#screen-monster-lab .lab-container { align-items: stretch; max-width: 560px; padding: 0 0 12px; gap: 16px; margin-inline: auto; }
#screen-monster-lab .lab-container h2 { color: #f6f6e9; text-shadow: none; }
.lab-layout { display: grid; gap: 14px; }
.lab-preview-card {
  position: sticky;
  top: 40px;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 14px;
  border-color: var(--rarity-custom);
  background: radial-gradient(circle at 15% 50%, rgba(57, 217, 138, .22), transparent 55%), var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  overflow: visible;
}
#screen-monster-lab .lab-preview { grid-row: 1 / 3; width: 96px; height: 96px; border-radius: 20px; background: #0f1826; border: 2px solid var(--rarity-custom); box-shadow: none; }
#screen-monster-lab .lab-preview .monster { zoom: 1.3; }
.lab-preview-name { font: 1.4rem var(--font-display); color: #fff; overflow-wrap: anywhere; }
.lab-preview-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-preview-meta .type-badge { font-size: .65rem; padding: 2px 8px; }
.lab-mini-stat { font-size: .8rem; font-weight: 800; color: #dbe6f0; }
#screen-monster-lab .lab-form { gap: 12px; }
.lab-step { display: grid; gap: 12px; }
.lab-step-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.lab-step-title span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: .95rem; }
#screen-monster-lab .lab-input, #screen-monster-lab .lab-select { border: 2px solid var(--border); background: #0f1826; border-radius: 12px; padding: 12px; }
#screen-monster-lab .lab-input:focus, #screen-monster-lab .lab-select:focus { border-color: var(--brand); }
#screen-monster-lab .lab-budget { display: flex; align-items: baseline; justify-content: center; gap: 6px; background: #0f1826; border-radius: 14px; font-size: 1.1rem; padding: 10px; }
#screen-monster-lab .lab-budget b { font-weight: 400; font-size: 1.6rem; color: var(--brand); }
#screen-monster-lab .lab-budget small { font-family: var(--font-body); font-size: .8rem; color: var(--text-secondary); }
#screen-monster-lab .lab-budget.empty b { color: #ffd166; }
#screen-monster-lab .lab-budget.over b { color: var(--bad); }
.lab-budget-bar { margin-top: -4px; }
#screen-monster-lab .lab-stat-row { grid-template-columns: 96px 1fr 44px; }
#screen-monster-lab .lab-stat-row label { font-weight: 800; font-size: .92rem; }
#screen-monster-lab .lab-stat-row input[type=range] { accent-color: var(--brand); height: 28px; }
#screen-monster-lab .lab-stat-value { font: 1.1rem var(--font-display); color: #fff; }
.lab-hint { font-size: .78rem; color: var(--text-secondary); }
#screen-monster-lab .lab-swatch { width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, .15); }
#screen-monster-lab .lab-swatch.selected { border-color: #fff; transform: scale(1.1); }
#screen-monster-lab .lab-create-btn { width: 100%; font-size: 1.1rem; padding: 15px; background: var(--brand); color: var(--brand-ink); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
#screen-monster-lab .lab-create-btn:disabled { background: var(--surface-2); color: #c3cfdc; }
.lab-why { text-align: center; font-weight: 800; color: #ffd166; font-size: .9rem; min-height: 1.2em; }
#screen-monster-lab .lab-msg:empty { display: none; }
#screen-monster-lab .lab-msg.success { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: #1f3b33; border: 2px solid var(--rarity-custom); color: #d8ffe9; }

/* === Codes (older rules above set colours) === */
#screen-codes .code-result { max-width: none; }
#screen-codes .code-reward-display { max-width: none; }
#screen-codes .code-reward-display .btn { width: 100%; margin-top: 4px; }
#screen-codes .code-reward-item { color: #ffe08a; }

/* === Events extras === */
.event-monsters { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.event-monster { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .28); overflow: hidden; }
.event-monster .monster { zoom: .62; }
.event-monster:not(.owned) .monster { filter: brightness(0) opacity(.55); }
#screen-events .event-badge { margin-bottom: 4px; }

/* battle pass rows host confetti */
#screen-battle-pass .bp-day { position: relative; }

@media (min-width: 900px) {
  .rw-page { max-width: 1000px; }
  #screen-hatch, #screen-collection, #screen-shop, #screen-challenges,
  #screen-battle-pass, #screen-codes, #screen-events, #screen-monster-lab, #screen-leaderboard,
  #screen-achievements { padding: 28px 40px; }
  .rw-head-text h2 { font-size: 2rem; }
  .egg-owned-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .egg-shop-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  #screen-hatch .egg-stage, #screen-hatch .hatch-reveal { max-width: 560px; width: 100%; align-self: center; }
  #screen-collection .collection-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  #screen-shop .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #screen-challenges .challenges-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #screen-challenges .challenge-card { grid-template-columns: 1fr; justify-items: start; }
  #screen-events .events-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #screen-achievements .achievements-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #screen-battle-pass .bp-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-monster-lab .lab-container { max-width: 1000px; }
  .lab-layout { grid-template-columns: 320px 1fr; align-items: start; }
  .lab-preview-card { top: 0; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 18px; }
  #screen-monster-lab .lab-preview { grid-row: auto; width: 170px; height: 170px; }
  #screen-monster-lab .lab-preview .monster { zoom: 2.2; }
  .lab-preview-meta { justify-content: center; }
  #screen-codes .rw-page { max-width: 640px; }
}
@media (max-width: 380px) {
  .rw-head { grid-template-columns: auto 1fr; }
  .rw-head .rw-gems { grid-column: 1 / -1; justify-self: start; }
  .egg-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .egg-card .rw-egg, .egg-glow, .rw-rays, .egg-tap.wobble, .egg-tap.cracked-2.wobble,
  #screen-hatch .hatch-reveal, #screen-hatch .reveal-monster, .rw-celebrate-card, .rw-evo-new,
  #monster-modal .modal-content, #screen-shop .shop-item.shop-bought,
  #screen-challenges .challenge-ready .challenge-claim, .glow-epic, .glow-legendary, .glow-heroic,
  #hatch-reveal .reveal-banner, #hatch-reveal h3, .hatch-container { animation: none !important; }
  .egg-half, .rw-bar > span, .egg-cracks .crack { transition: none; }
  .hatch-intro, .reveal-ring, .reveal-sparkles { display: none; }
}

/* Hatch odds table: exact chance of every monster in each egg */
.egg-odds { margin-top: 18px; }
.egg-odds-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.egg-odds-rarities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.egg-odds-rarity { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rarity) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rarity) 55%, transparent); font-size: .78rem; color: var(--text-primary); }
.egg-odds-rarity b { color: var(--rarity); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.egg-odds-list { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0; }
.egg-odds-row { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 14px; background: var(--surface-2, #283850); }
.egg-odds-row strong { font-size: .95rem; }
.egg-odds-sprite { display: grid; place-items: end center; height: 58px; }
.egg-odds-sprite .monster { scale: .62; transform-origin: 50% 100%; margin-bottom: 4px; }
.egg-odds-chance { font-variant-numeric: tabular-nums; text-align: right; min-width: 7.5em; }
.egg-odds-row.rarity-legendary { box-shadow: inset 0 0 0 1px #ffd60a55; }
.egg-odds-row.rarity-heroic { box-shadow: inset 0 0 0 1px #ff303088; background: linear-gradient(90deg, #ff30301f, var(--surface-2, #283850) 60%); }
.egg-odds-row.rarity-heroic .egg-odds-chance { color: #ff8080; }
@media (max-width: 520px) { .egg-odds-row { grid-template-columns: 52px 1fr auto; } .egg-odds-row .rarity-badge { display: none; } .egg-odds-chance { min-width: 0; } }

/* === Leaderboard === */
#screen-leaderboard .lb-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
#screen-leaderboard .lb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); }
#screen-leaderboard .lb-row.is-me { border-color: var(--accent); }
#screen-leaderboard .lb-top-1 { border-color: #e0b43a; background: radial-gradient(circle at 0% 50%, rgba(255, 209, 102, .2), transparent 55%), var(--surface); }
#screen-leaderboard .lb-top-2 { border-color: #b8c2cc; }
#screen-leaderboard .lb-top-3 { border-color: #c98a4b; }
#screen-leaderboard .lb-rank { font-family: var(--font-display); font-size: 1.1rem; text-align: center; }
#screen-leaderboard .lb-top .lb-rank { font-size: 1.6rem; }
#screen-leaderboard .lb-name { display: grid; min-width: 0; }
#screen-leaderboard .lb-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-leaderboard .lb-name small, #screen-leaderboard .lb-stat small { font-size: .74rem; color: var(--text-secondary); }
#screen-leaderboard .lb-stat { display: grid; text-align: right; min-width: 48px; }
#screen-leaderboard .lb-stat b { font-size: 1.05rem; }
#screen-leaderboard .lb-you { display: grid; gap: 6px; }
#screen-leaderboard .lb-empty { text-align: center; padding: 24px 8px; }
@media (max-width: 380px) { #screen-leaderboard .lb-row { grid-template-columns: 34px minmax(0, 1fr) auto; } #screen-leaderboard .lb-stat:last-child { display: none; } }

/* === Wardrobe (cosmetics) in the monster details === */
#monster-modal .wardrobe { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.wardrobe-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wardrobe-tab { flex: 1 1 0; min-width: 70px; padding: 7px 8px; border-radius: 12px; border: 2px solid var(--border, #2c3a5c); background: var(--surface-2, #0f3460); color: inherit; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; position: relative; }
.wardrobe-tab[aria-selected="true"] { border-color: var(--brand, #caee93); color: var(--brand, #caee93); }
.wardrobe-dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand, #caee93); }
.wardrobe-note { margin: 0; font-size: .75rem; opacity: .75; }
/* Monstit Bucks (js/systems/bucks.js): the Wardrobe's money. */
.bucks-count { white-space: nowrap; font-weight: 800; color: #9be58f; }
.bucks-balance { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background: #1f3b26; color: #9be58f; font-size: .85rem; opacity: 1; }
.bucks-balance strong { color: #c8f7b8; }
.finish-bucks { margin: 6px 0 0; font-weight: 800; color: #9be58f; }
/* XP books on the monster card (collection.js renderBooks). */
.modal-books { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.xp-book-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #2a2152; border: 2px solid #7c5cff; color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.xp-book-btn small { color: #caee93; font-weight: 800; }
.xp-book-btn b { color: #c4b5fd; }
.xp-book-btn:hover { background: #3a2c72; }
#monster-modal .skin-preview { height: 92px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
#monster-modal .skin-preview .monster { zoom: .75; }
.wardrobe-off-btn { opacity: .9; }

/* ASTRO collaboration code: robot-lab thank-you scene (js/screens/codes.js SCENES.astro). */
#screen-codes .code-reward-display:has(.astro-scene) { padding: 8px; }
.astro-scene { position: relative; width: 100%; min-height: 300px; overflow: hidden; isolation: isolate; border-radius: 16px; background: url(../images/scenes/astro-lab.svg) center bottom / cover; box-shadow: inset 0 0 0 2px #5ef0ff33, inset 0 -40px 50px -30px #0008; }
.astro-collab { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 12px auto 0; width: max-content; padding: 6px 16px; border-radius: 999px; background: #0b1430d9; border: 2px solid #5ef0ff88; box-shadow: 0 0 18px #5ef0ff44; font: 900 1rem var(--font-display, inherit); letter-spacing: .08em; color: #fff; }
.astro-collab b { color: #ffd36b; font-size: 1.2rem; }
.astro-collab span:last-child { color: #5ef0ff; }
.astro-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.astro-stars i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 9px; height: 9px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: astro-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -2.4s); }
.astro-stage { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.astro-bot { width: 120px; height: 160px; filter: drop-shadow(0 8px 4px #0008); animation: astro-bob 2.2s ease-in-out infinite; }
.astro-pal { display: grid; place-items: end center; min-width: 90px; filter: drop-shadow(0 8px 4px #0008); animation: astro-bob 2.2s ease-in-out .4s infinite; }
.astro-pal .monster { zoom: .8; }
.astro-drone { position: absolute; z-index: 2; left: 10%; top: 64px; width: 64px; height: 56px; filter: drop-shadow(0 0 10px #ffd36b66); animation: astro-hover 4s ease-in-out infinite; }
.ab-arm-r { transform-box: fill-box; transform-origin: 0% 50%; animation: astro-wave .9s ease-in-out infinite alternate; }
.ab-bulb { animation: astro-blink 1.2s steps(2) infinite; }
.ab-eyes { transform-box: fill-box; transform-origin: center; animation: astro-eyes 4s infinite; }
.ab-core { animation: astro-core 1.6s ease-in-out infinite; }
.ad-rotor { transform-box: fill-box; transform-origin: center; animation: astro-rotor .18s linear infinite alternate; }
.astro-credit { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; margin: 0; text-align: center; font-size: .8rem; font-weight: 800; color: #dbe7ff; text-shadow: 0 1px 3px #000; }
.astro-credit strong { color: #5ef0ff; }
@keyframes astro-bob { 50% { translate: 0 -6px; } }
@keyframes astro-hover { 0%, 100% { translate: 0 0; } 25% { translate: 30px -10px; } 50% { translate: 60px 4px; } 75% { translate: 24px 10px; } }
@keyframes astro-wave { from { rotate: -10deg; } to { rotate: -60deg; } }
@keyframes astro-blink { 50% { fill: #ffd36b; } }
@keyframes astro-eyes { 0%, 92%, 100% { scale: 1 1; } 96% { scale: 1 .1; } }
@keyframes astro-core { 50% { fill: #5ef0ff; } }
@keyframes astro-rotor { to { scale: .4 1; } }
@keyframes astro-twinkle { 0%, 100% { scale: .2; opacity: 0; } 50% { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .astro-scene *, .astro-scene svg * { animation: none !important; } }