@font-face {
  font-family: "GameHeavy";
  src:
    url("../assets/fonts/GROBOLD.ttf") format("truetype"),
    local("Grobold"),
    local("GROBOLD"),
    local("Volkswagen Heavy"),
    local("Volkswagen Serial Heavy"),
    local("Cooper Black");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}

:root {
  color-scheme: light;
  font-family: GameHeavy, Arial, sans-serif;
  --ink: #321b49;
  --pink: #ee63bd;
  --pink-dark: #9f2f83;
  --purple: #7c48cb;
  --cream: #fff9ef;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #74d8ff;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#game,
#game canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#game canvas {
  display: block;
  outline: none;
}

.speed-popups {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.speed-popup {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 22px;
  font-weight: 1000;
  line-height: 1;
  transform: translate(-50%, -50%);
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  text-shadow: var(--outline-2);
  will-change: transform, opacity;
}

.speed-popup .speed-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  transform: rotate(-14deg);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.48));
}

.is-safari .speed-popup {
  -webkit-text-stroke: 1.2px #050306;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #050306;
}

.pet-income-popups {
  position: fixed;
  inset: 0;
  z-index: 28;
  overflow: hidden;
  pointer-events: none;
}

.pet-income-popup {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  font-family: var(--font-heavy);
  font-size: 28px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 2px rgba(255, 221, 0, 0.38));
}

.pet-income-popup[hidden] {
  display: none;
}

.pet-income-popup span {
  font-family: var(--font-heavy);
  font-weight: 1000;
  color: #fff174;
  -webkit-text-fill-color: #fff174;
  -webkit-text-stroke: 1.15px #000;
  paint-order: stroke fill;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 2px 0 #000,
    0 0 3px rgba(255, 221, 0, 0.46);
}

.pet-income-popup img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transform: translateY(-1px) rotate(7deg);
  filter: drop-shadow(0 0 2px rgba(255, 221, 52, 0.55)) drop-shadow(0 2px 0 rgba(76, 35, 0, 0.72));
}

.hidden {
  display: none !important;
}

.player-card {
  position: fixed;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: center;
  width: 265px;
  min-height: 72px;
  padding: 6px 7px 6px 6px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 224, 255, 0.94));
  color: var(--ink);
  box-shadow: 0 5px 0 rgba(86, 39, 111, 0.34), 0 10px 24px rgba(45, 33, 78, 0.2);
}

.player-card::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 2px solid rgba(234, 112, 207, 0.32);
  border-radius: 13px;
  pointer-events: none;
}

.player-card-avatar {
  width: 56px;
  height: 56px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #c9f7ff, #56ccff 70%, #2a9ce5);
  box-shadow: 0 0 0 2px #de65bd, 0 3px 7px rgba(56, 24, 86, 0.3);
}

.player-card-identity {
  min-width: 0;
  padding: 0 8px;
}

.player-card-name-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.player-card-name-row strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: 3px #50245e;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #50245e;
}

.player-card-online {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #5ee472;
  box-shadow: 0 0 0 1px #278c47;
}

.player-card-online.is-offline {
  background: #ffb449;
  box-shadow: 0 0 0 1px #b1681e;
}

.player-card-subtitle {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #865a98;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-card-edit {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 6px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 10px;
  background: linear-gradient(#fa8ad8, #cf4fac);
  box-shadow: 0 3px 0 #8d357b;
}

.player-card-edit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #8d357b;
}

.player-card-edit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.leaderboard {
  position: fixed;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 252px;
  padding: 8px;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(120, 49, 135, 0.91), rgba(49, 24, 73, 0.9));
  box-shadow: 0 5px 0 rgba(57, 21, 75, 0.45), 0 9px 22px rgba(27, 14, 45, 0.23);
  color: #fff;
  backdrop-filter: blur(7px);
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 23px;
  margin: -2px 0 4px;
  font-size: 13px;
  text-shadow: 0 2px 0 #30143e;
}

.leaderboard-room-code {
  display: block;
  margin-top: 2px;
  color: #ffccef;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
}

.leaderboard-room-code b {
  color: #ffe985;
  font-size: 11px;
}

.multiplayer-status {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: rgba(13, 7, 24, 0.3);
  color: #baffc2;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
}

.leaderboard-grid {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) 45px 43px;
  align-items: center;
  gap: 2px;
}

.leaderboard-grid-head {
  height: 15px;
  padding: 0 4px;
  color: #fff;
  font-size: 9px;
  text-shadow: 0 1px 0 #100615;
}

.leaderboard-grid-head span:not(:first-child),
.leaderboard-row > span:not(.leaderboard-name) {
  text-align: center;
}

.leaderboard-body {
  display: grid;
  gap: 2px;
  max-height: 170px;
  overflow: auto;
  scrollbar-color: #d875d0 rgba(13, 6, 18, 0.38);
  scrollbar-width: auto;
}

.leaderboard-row {
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid rgba(16, 7, 18, 0.68);
  border-radius: 6px;
  background: rgba(12, 5, 17, 0.34);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 1px 0 #09030c;
}

.leaderboard-row.is-local {
  border-color: rgba(255, 240, 135, 0.8);
  background: rgba(255, 215, 64, 0.23);
}

.leaderboard-name {
  display: flex;
  align-items: center;
  min-width: 0;
}

.leaderboard-player-name {
  overflow: hidden;
  min-width: 0;
  color: #fff;
  font-family: GameHeavy, Arial, sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: 1.2px var(--player-outline, #151018);
  paint-order: stroke fill;
}

.leaderboard-name i {
  display: inline-grid;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  place-items: center;
  border-radius: 50%;
  background: rgba(19, 9, 22, 0.58);
  color: #ffe985;
  font-size: 9px;
  font-style: normal;
}

.leaderboard-row:nth-child(1) .leaderboard-name i {
  border: 1px solid #fff0a3;
  background: linear-gradient(#ffe978, #d99a16);
  color: white;
}

.leaderboard-row:nth-child(2) .leaderboard-name i {
  border: 1px solid #ffc4ec;
  background: linear-gradient(#ff9dde, #d943a6);
  color: white;
}

.leaderboard-row:nth-child(3) .leaderboard-name i {
  border: 1px solid #f4f7ff;
  background: linear-gradient(#e9edf6, #929caf);
  color: white;
}

.room-code-toggle {
  display: none;
}

.room-code-panel {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.room-code-form {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 42px 82px;
  gap: 3px;
}

.room-code-form input,
.room-code-form button {
  min-width: 0;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  outline: none;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
}

.room-code-form input {
  padding: 0 7px;
  color: #421e52;
  background: rgba(255, 255, 255, 0.95);
}

.room-code-form button {
  padding: 0 3px;
  color: #fff;
  background: linear-gradient(#f27ed0, #b83b98);
  text-shadow: 0 1px 0 #64205c;
}

.room-code-status {
  min-height: 12px;
  padding-top: 3px;
  color: #ffe986;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.settings-toggle {
  position: fixed;
  z-index: 20;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  width: 58px;
  height: 58px;
  padding: 9px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 17px;
  background: linear-gradient(#9a78ee, #6c44c2);
  box-shadow: 0 5px 0 #4b2c91, 0 9px 18px rgba(49, 31, 78, 0.28);
}

.settings-toggle:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #4b2c91;
}

.settings-toggle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(31, 18, 51, 0.47);
  backdrop-filter: blur(5px);
}

.settings-modal,
.player-name-modal {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  padding: 25px;
  border: 5px solid #fff;
  border-radius: 28px;
  background: linear-gradient(155deg, #fff7ff, #f3d7ff);
  color: var(--ink);
  box-shadow: 0 9px 0 #a44b9c, 0 18px 48px rgba(38, 17, 53, 0.38);
}

.modal-close {
  position: absolute;
  z-index: 2;
  top: -15px;
  right: -13px;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(#ff7a9d, #d83d67);
  color: #fff;
  box-shadow: 0 4px 0 #962844;
  font-size: 18px;
  text-shadow: 0 2px 0 #8d2343;
}

.settings-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #fff;
  font-size: 31px;
  -webkit-text-stroke: 5px #6d3291;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #6d3291;
}

.settings-title img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.settings-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.settings-option,
.settings-respawn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 86px;
  padding: 11px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(#f597d9, #ce55b1);
  color: #fff;
  box-shadow: 0 5px 0 #8e337e;
  text-align: left;
  text-shadow: 0 2px 0 #78316d;
}

.settings-option[aria-pressed="true"] {
  filter: saturate(0.58) brightness(0.88);
}

.settings-option-icon {
  display: grid;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  place-items: center;
}

.settings-option img,
.settings-respawn img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.settings-option strong,
.settings-option small,
.settings-respawn strong,
.settings-respawn small {
  display: block;
}

.settings-option strong,
.settings-respawn strong {
  font-size: 17px;
}

.settings-option small,
.settings-respawn small {
  margin-top: 4px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.settings-respawn {
  width: 100%;
  min-height: 72px;
  margin-top: 14px;
  background: linear-gradient(#71db82, #34ac5f);
  box-shadow: 0 5px 0 #25864a;
  text-shadow: 0 2px 0 #247e45;
}

.player-name-modal {
  width: min(455px, calc(100vw - 32px));
}

.player-name-preview {
  display: grid;
  min-height: 105px;
  margin-bottom: 14px;
  padding: 15px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 20px;
  background: linear-gradient(145deg, #7be3ff, #8f85f7);
  box-shadow: inset 0 -7px 0 rgba(85, 53, 155, 0.2), 0 5px 0 #7b47b0;
}

.player-name-preview span {
  color: #fff4a2;
  font-size: 14px;
  text-shadow: 0 2px 0 #64409a;
}

.player-name-preview strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: clamp(24px, 7vw, 38px);
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: 5px #553477;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #553477;
}

.player-name-preview.is-generating strong {
  animation: name-pop 280ms ease-out;
}

@keyframes name-pop {
  0% { transform: scale(0.78) rotate(-2deg); opacity: 0.35; }
  75% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1); opacity: 1; }
}

.player-name-generate,
.player-name-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 55px;
  border: 3px solid #fff;
  border-radius: 16px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(83, 35, 93, 0.72);
}

.player-name-generate {
  width: 100%;
  background: linear-gradient(#f588d8, #c646a5);
  box-shadow: 0 5px 0 #8f347d;
  font-size: 16px;
}

.player-name-generate img,
.player-name-actions img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.player-name-actions {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10px;
  margin-top: 12px;
}

.player-name-cancel {
  background: linear-gradient(#a990d9, #7559ae);
  box-shadow: 0 5px 0 #523c84;
}

.player-name-save {
  background: linear-gradient(#72df86, #36ae60);
  box-shadow: 0 5px 0 #258449;
}

.player-name-status {
  min-height: 18px;
  margin: 13px 0 -5px;
  color: #a33c74;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.mobile-controls {
  display: none;
}

:where(html.has-touch-controls) .mobile-controls {
    position: fixed;
    inset: 0;
    z-index: 12;
    display: block;
    pointer-events: none;
  }

:where(html.has-touch-controls) .mobile-stick,
  :where(html.has-touch-controls) .mobile-jump,
  :where(html.has-touch-controls) .mobile-camera-zone {
    pointer-events: auto;
  }

:where(html.has-touch-controls) .mobile-stick {
    position: absolute;
    left: max(24px, env(safe-area-inset-left));
    bottom: max(28px, env(safe-area-inset-bottom));
    width: 126px;
    height: 126px;
    border: 4px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(70, 43, 106, 0.3);
    box-shadow: inset 0 0 0 5px rgba(86, 53, 122, 0.2);
  }

:where(html.has-touch-controls) .mobile-stick span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    border: 4px solid #fff;
    border-radius: 50%;
    background: linear-gradient(#f59ddd, #bf53ac);
    box-shadow: 0 4px 0 rgba(92, 39, 97, 0.55);
  }

:where(html.has-touch-controls) .mobile-jump {
    position: absolute;
    right: max(26px, env(safe-area-inset-right));
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 74px));
    display: grid;
    width: 84px;
    height: 84px;
    padding: 14px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: linear-gradient(#76dfff, #4a8ee8);
    box-shadow: 0 6px 0 #3566ac;
  }

:where(html.has-touch-controls) .mobile-jump img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

:where(html.has-touch-controls) .mobile-camera-zone {
    position: absolute;
    top: 100px;
    right: 0;
    bottom: 170px;
    left: 43%;
  }

:where(html.has-touch-controls) .settings-toggle {
    bottom: max(15px, env(safe-area-inset-bottom));
  }

@media (max-width: 720px) {
  :where(html.has-touch-controls) .player-card {
    width: 215px;
    grid-template-columns: 48px minmax(0, 1fr) 30px;
    min-height: 61px;
    border-radius: 15px;
  }

  :where(html.has-touch-controls) .player-card-avatar {
    width: 46px;
    height: 46px;
  }

  :where(html.has-touch-controls) .player-card-name-row strong {
    font-size: 14px;
  }

  :where(html.has-touch-controls) .player-card-subtitle {
    font-size: 10px;
  }

  :where(html.has-touch-controls) .player-card-edit {
    width: 29px;
    height: 29px;
  }

  :where(html.has-touch-controls) .leaderboard {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(151px, calc(env(safe-area-inset-bottom) + 142px));
    width: 190px;
    padding: 6px;
  }

  :where(html.has-touch-controls) .leaderboard-header {
    font-size: 11px;
  }

  :where(html.has-touch-controls) .leaderboard-grid {
    grid-template-columns: minmax(80px, 1fr) 35px 38px;
  }

  :where(html.has-touch-controls) .leaderboard-body {
    max-height: 89px;
  }

  :where(html.has-touch-controls) .leaderboard-row {
    min-height: 20px;
  }

  :where(html.has-touch-controls) .leaderboard-row:nth-child(n + 5) {
    display: none;
  }

  :where(html.has-touch-controls) .room-code-toggle {
    display: block;
    width: 100%;
    height: 25px;
    margin-top: 4px;
    border: 1px solid #fff;
    border-radius: 7px;
    color: #fff;
    background: rgba(224, 88, 188, 0.7);
    font-size: 10px;
  }

  :where(html.has-touch-controls) .room-code-panel {
    display: none;
  }

  :where(html.has-touch-controls) .leaderboard.is-room-code-open .room-code-panel {
    display: block;
  }

  :where(html.has-touch-controls) .room-code-form {
    grid-template-columns: 1fr 39px;
  }

  :where(html.has-touch-controls) .room-code-form #privateServerButton {
    grid-column: 1 / -1;
  }

  :where(html.has-touch-controls) .settings-toggle {
    width: 51px;
    height: 51px;
    padding: 8px;
    border-radius: 15px;
  }
}

@media (max-width: 520px) {
  .settings-controls {
    grid-template-columns: 1fr;
  }

  .settings-option {
    min-height: 66px;
  }

  .settings-modal,
  .player-name-modal {
    padding: 20px;
  }

  .settings-title {
    font-size: 26px;
  }
}

/* Steal an Egg playable-loop HUD. Visual icons are CSS/native text; no SVG artwork. */
.gameplay-resources {
  position: fixed;
  z-index: 18;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

.resource-pill {
  display: flex;
  align-items: center;
  min-width: 128px;
  min-height: 52px;
  padding: 5px 14px 5px 6px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf1, #ffe47d);
  box-shadow: 0 4px 0 #d59628, 0 8px 18px rgba(107, 72, 17, 0.2);
  color: #654310;
}

.resource-speed {
  background: linear-gradient(180deg, #effdff, #7ee6ff);
  box-shadow: 0 4px 0 #299dce, 0 8px 18px rgba(20, 107, 151, 0.2);
  color: #144f79;
}

.resource-income {
  background: linear-gradient(180deg, #f3ffe9, #91eb6e);
  box-shadow: 0 4px 0 #3ba94d, 0 8px 18px rgba(38, 117, 53, 0.2);
  color: #206136;
}

.resource-pill > span:last-child {
  display: grid;
  line-height: 1;
}

.resource-pill small {
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.resource-pill strong {
  margin-top: 3px;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.resource-icon {
  display: grid;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  margin-right: 5px;
  place-items: center;
  border: 0;
  background: none;
}

.resource-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(65, 57, 31, 0.28));
}

.action-prompt {
  position: fixed;
  z-index: 22;
  bottom: 96px;
  left: 50%;
  display: flex;
  align-items: center;
  min-width: 220px;
  padding: 8px 15px 8px 8px;
  transform: translate(-50%, 12px) scale(0.95);
  border: 3px solid #fff;
  border-radius: 16px;
  background: rgba(25, 33, 49, 0.94);
  box-shadow: 0 4px 0 rgba(7, 12, 22, 0.55), 0 8px 18px rgba(7, 13, 25, 0.25);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 150ms ease;
}

.action-prompt.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.action-prompt kbd {
  display: grid;
  flex: 0 0 38px;
  height: 38px;
  margin-right: 10px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 10px;
  background: linear-gradient(#8eeaff, #3db7df);
  box-shadow: inset 0 -4px 0 #2782a8;
  color: #163f5a;
  font: 21px GameHeavy, Arial;
}

.action-prompt strong {
  font-size: 14px;
  text-shadow: 0 2px 0 #0b101b;
}

.game-action-button {
  position: fixed;
  z-index: 32;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(116px, calc(env(safe-area-inset-bottom) + 116px));
  display: none;
  min-width: 112px;
  min-height: 54px;
  padding: 8px 14px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(#ffdf63, #f09a2d);
  box-shadow: 0 5px 0 #9f5622, 0 9px 18px rgba(71, 35, 16, 0.25);
  color: #593417;
  font-size: 14px;
  text-shadow: 0 1px 0 #fff2a4;
}

.game-action-button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #9f5622;
}

.sell-stall-prompt {
  position: fixed;
  z-index: 34;
  bottom: 142px;
  left: 50%;
  display: flex;
  gap: 12px;
  transform: translate(-50%, 14px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, transform 160ms ease;
}

.sell-stall-prompt.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sell-stall-prompt button {
  display: flex;
  align-items: center;
  min-width: 178px;
  padding: 6px 11px 6px 6px;
  border: 2px solid #171218;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffaaa0, #ff667c 58%, #ef4967);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), 0 3px 0 #bd3859, 0 7px 16px rgba(166, 51, 84, 0.2);
  color: #fff;
  font-family: var(--font-heavy);
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.sell-stall-prompt button:last-child {
  border-color: #171218;
  background: linear-gradient(145deg, #9bf493, #58db77 58%, #38bd67);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), 0 3px 0 #258c4b, 0 7px 16px rgba(36, 129, 70, 0.19);
}

.sell-stall-prompt button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.04);
}

.sell-stall-prompt button:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 2px 0 #bd3859;
}

.sell-stall-prompt button:last-child:not(:disabled):active {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 2px 0 #258c4b;
}

.sell-stall-prompt button:disabled {
  filter: saturate(0.45) brightness(0.9);
  opacity: 0.62;
  cursor: default;
}

.sell-stall-prompt kbd {
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  margin-right: 8px;
  place-items: center;
  border: 2px solid #171218;
  border-radius: 9px;
  background: linear-gradient(#fff49a, #ffc94f);
  box-shadow: inset 0 -3px 0 #df8d32, 0 1px 0 rgba(137, 60, 44, 0.25);
  color: #fff;
  font: 17px var(--font-heavy);
  text-shadow: -2px 0 #9f4e35, 0 2px #9f4e35, 2px 0 #9f4e35, 0 -2px #9f4e35;
}

.sell-stall-prompt button:last-child kbd {
  border-color: #171218;
  background: linear-gradient(#9cecff, #58c9eb);
  box-shadow: inset 0 -3px 0 #3190c2, 0 1px 0 rgba(36, 87, 140, 0.23);
  text-shadow: -2px 0 #28689a, 0 2px #28689a, 2px 0 #28689a, 0 -2px #28689a;
}

.sell-stall-prompt span {
  color: #fff;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.1px;
  -webkit-text-stroke: 1.7px #111015;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #111015;
  white-space: nowrap;
}

.sell-stall-prompt strong {
  color: #fff;
}

.sell-stall-prompt button:first-child span {
  font-size: 14px;
  transform: translateX(-3px);
}

.sell-stall-prompt button:last-child strong {
  color: #fff;
}

.sell-stall-prompt button:last-child span {
  flex: 1;
  font-size: 20px;
  text-align: center;
  text-shadow: 0 2px 0 #111015;
}

.modal-overlay.sell-confirm-overlay {
  z-index: 120;
  background: rgba(57, 37, 105, 0.32);
  backdrop-filter: blur(2px);
}

.sell-confirm-modal {
  position: relative;
  width: min(410px, calc(100vw - 28px));
  padding: 32px 24px 22px;
  border: 4px solid #7045c8;
  border-radius: 22px;
  background: linear-gradient(145deg, #9cecff 0%, #87d7ff 42%, #cba5ff 100%);
  box-shadow: 0 7px 0 #4e3198, 0 18px 40px rgba(62, 37, 120, 0.34), inset 0 0 0 3px rgba(255, 255, 255, 0.48);
  color: #fff;
  text-align: center;
}

.sell-confirm-close {
  position: absolute;
  top: -14px;
  right: -12px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  place-items: center;
  border: 3px solid #7f1130;
  border-radius: 12px;
  background: linear-gradient(#ff6f88, #f52f5d);
  box-shadow: inset 0 0 0 2px #ffabc0, 0 4px 0 #9c1438;
  color: #fff;
  font: 34px/1 Arial Black, Arial, sans-serif;
  -webkit-text-stroke: 2px #571025;
  paint-order: stroke fill;
}

.sell-confirm-modal h2,
.sell-confirm-modal p {
  margin: 0;
  color: #fff;
  font-family: var(--font-heavy);
  text-shadow: -2px 0 #44206e, 0 2px #44206e, 2px 0 #44206e, 0 -2px #44206e;
}

.sell-confirm-modal h2 {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.05;
}

.sell-confirm-modal p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  margin: 7px 0 18px;
  font-size: clamp(21px, 3.4vw, 28px);
  line-height: 1.05;
  white-space: nowrap;
}

.sell-confirm-modal p strong {
  color: var(--sell-animal-color, #fff06a);
  text-shadow:
    -2px 0 var(--sell-animal-outline, #44206e),
    0 2px var(--sell-animal-outline, #44206e),
    2px 0 var(--sell-animal-outline, #44206e),
    0 -2px var(--sell-animal-outline, #44206e),
    0 0 12px var(--sell-animal-glow, rgba(255, 236, 83, 0.58));
}

.sell-confirm-value {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 0.14em;
  color: #ffd84a;
  font-size: inherit;
  line-height: inherit;
  text-shadow: -2px 0 #704500, 0 2px #704500, 2px 0 #704500, 0 -2px #704500, 0 0 11px rgba(255, 216, 74, 0.72);
}

.sell-confirm-value img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 0 rgba(40, 20, 0, 0.72));
}

.sell-confirm-question {
  margin-left: -0.16em;
}

.sell-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sell-confirm-actions button {
  display: grid;
  padding: 0 8px;
  place-items: center;
  min-height: 56px;
  border: 3px solid;
  border-radius: 11px;
  color: #fff;
  font-size: clamp(25px, 4vw, 32px);
  line-height: 1;
  text-align: center;
  text-shadow: -2px 0 #30213f, 0 2px #30213f, 2px 0 #30213f, 0 -2px #30213f;
}

.sell-confirm-yes {
  border-color: #087a17 !important;
  background: linear-gradient(#48ff46, #10d529);
  box-shadow: inset 0 0 0 3px #90ff83, 0 7px 0 #087a17;
}

.sell-confirm-bang {
  margin-left: -0.12em;
}

.notification-bang {
  display: inline-block;
  margin-left: -0.16em;
}

.sell-confirm-no {
  border-color: #920b0b !important;
  background: linear-gradient(#ff3f3f, #ee1010);
  box-shadow: inset 0 0 0 3px #ff8585, 0 7px 0 #920b0b;
}

.sell-confirm-actions button:active,
.sell-confirm-close:active {
  transform: translateY(4px);
}

@media (max-width: 680px) {
  .sell-stall-prompt { bottom: 124px; gap: 7px; }
  .sell-stall-prompt button { min-width: 0; padding-right: 8px; }
  .sell-stall-prompt span { font-size: 14px; }
  .sell-stall-prompt button:first-child span { font-size: 12px; }
  .sell-stall-prompt button:last-child span { font-size: 17px; }
  .sell-stall-prompt kbd { flex-basis: 36px; width: 36px; height: 36px; margin-right: 7px; font-size: 17px; }
  .sell-confirm-modal { padding: 30px 18px 18px; }
  .sell-confirm-actions { gap: 10px; }
  .sell-confirm-actions button { min-height: 52px; }
  .sell-confirm-value img { width: 27px; height: 27px; }
}

@media (max-width: 780px) {
  :where(html.has-touch-controls) .gameplay-resources {
    top: max(68px, calc(env(safe-area-inset-top) + 58px));
    gap: 4px;
  }

  :where(html.has-touch-controls) .resource-pill {
    min-width: 0;
    min-height: 39px;
    padding: 3px 8px 3px 4px;
    border-width: 2px;
    border-radius: 13px;
  }

  :where(html.has-touch-controls) .resource-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    font-size: 16px;
  }

  :where(html.has-touch-controls) .resource-pill small { font-size: 6px; }
  :where(html.has-touch-controls) .resource-pill strong { font-size: 12px; }
  :where(html.has-touch-controls) .resource-income { display: none; }
  :where(html.has-touch-controls) .action-prompt { display: none; }
  :where(html.has-touch-controls) .game-action-button.is-visible { display: block; }
}

@media (max-width: 520px) {
  :where(html.has-touch-controls) .gameplay-resources { left: auto; right: max(8px, env(safe-area-inset-right)); transform: none; }
  :where(html.has-touch-controls) .resource-pill { width: 86px; }
  :where(html.has-touch-controls) .game-action-button { right: max(14px, env(safe-area-inset-right)); }
}

@media (max-height: 520px) {
  :where(html.has-touch-controls) .player-card {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
  }

  :where(html.has-touch-controls) .leaderboard {
    top: max(7px, env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right));
    bottom: auto;
  }

  :where(html.has-touch-controls) .mobile-stick {
    width: 106px;
    height: 106px;
  }

  :where(html.has-touch-controls) .mobile-jump {
    right: max(80px, calc(env(safe-area-inset-right) + 70px));
    bottom: max(17px, env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
  }

  :where(html.has-touch-controls) .settings-toggle {
    right: max(14px, env(safe-area-inset-right));
  }
}

/* Egg growing and active animal collection menus. */
.collection-menu-buttons {
  position: fixed;
  z-index: 24;
  top: 112px;
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  gap: 12px;
}

.collection-menu-button {
  position: relative;
  display: grid;
  width: 70px;
  height: 70px;
  padding: 7px;
  place-items: center;
  border: 5px solid #260b0a;
  border-radius: 14px;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.3), 0 6px 0 rgba(38, 11, 10, 0.6), 0 10px 20px rgba(38, 11, 10, 0.22);
  transition: transform 120ms ease, filter 120ms ease;
}

.collection-menu-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.collection-menu-button:active { transform: translateY(4px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.24), 0 2px 0 rgba(38, 11, 10, 0.6); }
.growing-menu-button { background: linear-gradient(145deg, #ff675d, #f52f39 58%, #c71524); }
.animals-menu-button { background: linear-gradient(145deg, #ffc66c, #ff913c 58%, #e95b24); }
.collection-menu-button img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.28)); }

.collection-menu-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  display: grid;
  min-width: 27px;
  height: 27px;
  padding: 0 6px;
  place-items: center;
  border: 3px solid #1a0908;
  border-radius: 999px;
  background: #fff;
  color: #25100d;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

.gameplay-menu-overlay {
  z-index: 70;
  padding: 20px 24px 20px 96px;
  background: rgba(26, 14, 43, 0.38);
  backdrop-filter: blur(3px);
}

.collection-panel {
  position: relative;
  width: min(670px, calc(100vw - 124px));
  min-height: 330px;
  max-height: min(620px, calc(100vh - 38px));
  padding: 14px;
  border: 5px solid #1b1524;
  border-radius: 10px;
  background: radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.045) 0 3px, transparent 3.5px) 0 0 / 24px 24px, #292b37;
  box-shadow: inset 0 0 0 4px #515466, 0 10px 0 rgba(20, 14, 27, 0.62), 0 20px 40px rgba(20, 13, 32, 0.38);
  color: #fff;
}

.collection-panel-close {
  position: absolute;
  top: 50%;
  left: -85px;
  display: grid;
  width: 70px;
  height: 70px;
  padding: 0 0 4px;
  transform: translateY(-50%);
  place-items: center;
  border: 5px solid #260b0a;
  border-radius: 8px;
  background: linear-gradient(#ff412f, #d91d1a);
  color: #fff;
  font-size: 46px;
  line-height: 1;
  text-shadow: -3px 0 #260b0a, 0 3px #260b0a, 3px 0 #260b0a, 0 -3px #260b0a;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.26), 0 6px 0 rgba(38, 11, 10, 0.55);
}

.collection-view { min-width: 0; }

.collection-panel-header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding: 7px 12px;
  border: 4px solid #1b1524;
  border-radius: 8px;
  background: radial-gradient(circle at 8px 8px, rgba(164, 105, 49, 0.12) 0 3px, transparent 3.4px) 0 0 / 24px 24px, linear-gradient(145deg, #ffe1aa, #e9b277);
  color: #fff;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.42), 0 4px 0 rgba(10, 8, 13, 0.42);
}

.collection-panel-header > span { display: flex; align-items: center; min-width: 0; gap: 8px; }
.collection-panel-header img { flex: 0 0 54px; width: 54px; height: 54px; object-fit: contain; }
.collection-panel-header strong { font-size: clamp(28px, 5vw, 44px); line-height: 0.95; white-space: nowrap; text-shadow: -3px 0 #0d080d, 0 3px #0d080d, 3px 0 #0d080d, 0 -3px #0d080d; }
.collection-panel-header b { flex: 0 0 auto; padding: 9px 12px; border: 4px solid #1b1524; border-radius: 8px; background: linear-gradient(#fff35f, #ffbf25); color: #fff; font-size: clamp(15px, 2.7vw, 23px); white-space: nowrap; text-shadow: -2px 0 #0d080d, 0 2px #0d080d, 2px 0 #0d080d, 0 -2px #0d080d; box-shadow: inset 0 4px 0 rgba(255,255,255,0.44); }
.animals-header b { background: linear-gradient(#ff6860, #ed292b); }

.collection-list {
  display: grid;
  max-height: min(420px, calc(100vh - 190px));
  gap: 12px;
  padding: 2px 4px 7px;
  overflow: auto;
  scrollbar-color: #aeb1bf #444754;
  scrollbar-width: auto;
}

.collection-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  min-height: 92px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 4px solid #13111a;
  border-radius: 9px;
  background: linear-gradient(135deg, #4a4c57, #2d2e37);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.4);
}

.collection-thumb {
  display: grid;
  width: 78px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 3px solid #16111a;
  border-radius: 8px;
  background: radial-gradient(circle at center, #fff 0 4%, #d9d9df 5% 20%, #777b89 60%, #3b3e49 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.2);
}

.collection-thumb img { width: 62px; height: 62px; object-fit: contain; }
.animal-thumb { background: radial-gradient(circle, color-mix(in srgb, var(--pet-color) 72%, white), color-mix(in srgb, var(--pet-color) 72%, #34303c)); }
.animal-thumb img { width: 58px; height: 58px; }
.collection-row-copy { display: grid; min-width: 0; gap: 5px; }
.collection-row-copy strong { overflow: hidden; color: #fff; font-size: clamp(19px, 3vw, 28px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; text-shadow: -2px 0 #0c090e, 0 2px #0c090e, 2px 0 #0c090e, 0 -2px #0c090e; }
.collection-row-copy small { color: #ffd4fb; font-family: GameHeavy, Arial; font-size: 13px; text-shadow: 0 2px 0 #161018; }

.egg-progress { position: relative; display: block; height: 28px; overflow: hidden; border: 3px solid #111015; border-radius: 6px; background: #111217; }
.egg-progress i { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: linear-gradient(90deg, #19d632, #38ff42); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28); }
.egg-progress b { position: absolute; z-index: 1; inset: 50% 0 auto; transform: translateY(-50%); color: #fff; font-size: 15px; line-height: 1; text-align: center; text-shadow: -2px 0 #09060b, 0 2px #09060b, 2px 0 #09060b, 0 -2px #09060b; }
.growing-egg-row time { min-width: 86px; color: #fff; font-size: clamp(18px, 3vw, 27px); text-align: center; text-shadow: -2px 0 #09070a, 0 2px #09070a, 2px 0 #09070a, 0 -2px #09070a; }

.animal-equip-button,
.equip-best-button {
  border: 4px solid #160b0c;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(#69ff4f, #24cf20);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), 0 4px 0 rgba(0, 0, 0, 0.4);
  text-shadow: -2px 0 #160b0c, 0 2px #160b0c, 2px 0 #160b0c, 0 -2px #160b0c;
}

.animal-equip-button { min-width: 116px; min-height: 50px; padding: 5px 9px; font-size: clamp(18px, 3vw, 25px); }
.animal-equip-button.is-equipped { background: linear-gradient(#ff5752, #db1f28); }
.equip-best-button { display: block; min-width: 230px; min-height: 58px; margin: 12px 0 0 auto; padding: 6px 18px; font-size: 31px; }
.animal-row.is-active { border-color: #67f73d; box-shadow: inset 0 0 0 2px rgba(103, 247, 61, 0.22), 0 3px 0 rgba(0, 0, 0, 0.4); }

.collection-empty {
  display: grid;
  min-height: 220px;
  padding: 22px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 4px dashed #5c5f6e;
  border-radius: 12px;
  color: #bfc1cb;
  text-align: center;
}
.collection-empty img { width: 84px; height: 84px; object-fit: contain; opacity: 0.72; }
.collection-empty strong { color: #fff; font-size: 27px; text-shadow: 0 3px 0 #0e0b10; }
.collection-empty span { font-family: Arial, sans-serif; font-size: 14px; font-weight: 800; }

@media (max-width: 720px) {
  :where(html.has-touch-controls) .collection-menu-buttons { top: 124px; left: max(9px, env(safe-area-inset-left)); gap: 9px; }
  :where(html.has-touch-controls) .collection-menu-button { width: 56px; height: 56px; padding: 5px; border-width: 4px; border-radius: 11px; }
  :where(html.has-touch-controls) .collection-menu-badge { top: -8px; right: -8px; min-width: 22px; height: 22px; border-width: 2px; font-size: 11px; }
  :where(html.has-touch-controls) .gameplay-menu-overlay { padding: 10px 10px 10px 62px; }
  :where(html.has-touch-controls) .collection-panel { width: calc(100vw - 74px); max-height: calc(100vh - 20px); padding: 8px; border-width: 4px; }
  :where(html.has-touch-controls) .collection-panel-close { left: -58px; width: 49px; height: 58px; border-width: 4px; font-size: 33px; }
  :where(html.has-touch-controls) .collection-panel-header { min-height: 56px; margin-bottom: 8px; padding: 5px 7px; border-width: 3px; }
  :where(html.has-touch-controls) .collection-panel-header img { flex-basis: 39px; width: 39px; height: 39px; }
  :where(html.has-touch-controls) .collection-panel-header strong { font-size: clamp(21px, 6vw, 31px); text-shadow: -2px 0 #0d080d, 0 2px #0d080d, 2px 0 #0d080d, 0 -2px #0d080d; }
  :where(html.has-touch-controls) .collection-panel-header b { padding: 6px 7px; border-width: 3px; font-size: clamp(11px, 3.3vw, 16px); }
  :where(html.has-touch-controls) .collection-list { max-height: calc(100vh - 118px); gap: 7px; }
  :where(html.has-touch-controls) .collection-row { grid-template-columns: 60px minmax(0, 1fr) auto; min-height: 70px; gap: 6px; padding: 5px 6px; border-width: 3px; }
  :where(html.has-touch-controls) .collection-thumb { width: 54px; height: 54px; border-width: 2px; }
  :where(html.has-touch-controls) .collection-thumb img, :where(html.has-touch-controls) .animal-thumb img { width: 46px; height: 46px; }
  :where(html.has-touch-controls) .collection-row-copy strong { font-size: clamp(15px, 4vw, 20px); }
  :where(html.has-touch-controls) .collection-row-copy small { font-size: 10px; }
  :where(html.has-touch-controls) .egg-progress { height: 13px; border-width: 2px; }
  :where(html.has-touch-controls) .growing-egg-row time { min-width: 58px; font-size: clamp(14px, 4vw, 19px); }
  :where(html.has-touch-controls) .animal-equip-button { min-width: 79px; min-height: 42px; padding: 4px 5px; border-width: 3px; font-size: clamp(13px, 3.5vw, 17px); }
  :where(html.has-touch-controls) .equip-best-button { min-width: 180px; min-height: 48px; margin-top: 8px; font-size: 23px; }
}

@media (max-width: 430px) {
  :where(html.has-touch-controls) .collection-panel-header > span img { display: none; }
  :where(html.has-touch-controls) .collection-panel-header strong { font-size: 20px; }
  :where(html.has-touch-controls) .collection-panel-header b { font-size: 10px; }
  :where(html.has-touch-controls) .collection-row { grid-template-columns: 50px minmax(0, 1fr) auto; }
  :where(html.has-touch-controls) .collection-thumb { width: 46px; height: 48px; }
  :where(html.has-touch-controls) .collection-thumb img, :where(html.has-touch-controls) .animal-thumb img { width: 40px; height: 40px; }
  :where(html.has-touch-controls) .animal-equip-button { min-width: 68px; font-size: 12px; }
}

/* Original Pet Game Master interface skin retained for Steal an Egg. */
:root {
  --font-heavy: GameHeavy, Grobold, "Grobold", "Volkswagen Heavy", "Volkswagen Serial Heavy", "Cooper Black", "Arial Black", Impact, sans-serif;
  --game-ui-scale: 1;
  --game-popup-scale: 1;
  --game-popup-max-width: calc(100vw - 24px);
  --game-popup-max-height: calc(100vh - 24px);
  --outline-1:
    -1px -1px 0 #050306, 0 -1px 0 #050306, 1px -1px 0 #050306,
    -1px 0 0 #050306, 1px 0 0 #050306,
    -1px 1px 0 #050306, 0 1px 0 #050306, 1px 1px 0 #050306,
    0 2px 0 #050306;
  --outline-2:
    -2px -2px 0 #050306, 0 -2px 0 #050306, 2px -2px 0 #050306,
    -2px 0 0 #050306, 2px 0 0 #050306,
    -2px 2px 0 #050306, 0 2px 0 #050306, 2px 2px 0 #050306,
    0 4px 0 #050306;
  --outline-3:
    -3px -3px 0 #050306, 0 -3px 0 #050306, 3px -3px 0 #050306,
    -3px 0 0 #050306, 3px 0 0 #050306,
    -3px 3px 0 #050306, 0 3px 0 #050306, 3px 3px 0 #050306,
    0 5px 0 #050306;
  --bottom-label-outline:
    -1px -1px 0 #050306, 0 -1px 0 #050306, 1px -1px 0 #050306,
    -1px 0 0 #050306, 1px 0 0 #050306,
    -1px 1px 0 #050306, 0 1px 0 #050306, 1px 1px 0 #050306,
    0 2px 0 #050306, 0 3px 0 rgba(5, 3, 6, 0.48);
}

.loading-player-card {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: calc(env(safe-area-inset-left, 0px) + 74px);
  z-index: 32;
  isolation: isolate;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 5px;
  width: clamp(216px, 18vw, 236px);
  min-height: 48px;
  padding: 2px 4px 2px 3px;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    radial-gradient(circle at 3% 45%, rgba(218, 255, 193, 0.72), transparent 34%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 32%) padding-box,
    linear-gradient(180deg, #92ed6e 0%, #4bc758 54%, #249643 100%) padding-box,
    linear-gradient(120deg, #286a2d 0%, #1c5128 54%, #10371e 100%) border-box;
  color: #fff;
  pointer-events: auto;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(12, 83, 38, 0.48),
    0 0 0 1px rgba(8, 52, 24, 0.9),
    0 5px 13px rgba(11, 74, 33, 0.3);
}

.loading-player-avatar-frame {
  position: relative;
  isolation: isolate;
  width: 40px;
  height: 40px;
  transform: translateX(-2px);
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff8ad, #ffd95a 58%, #f0a832);
  box-shadow: 0 0 0 1px #2d6b32, 0 3px 0 rgba(0, 0, 0, 0.32);
}

.loading-player-avatar {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.loading-player-avatar-frame::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid #fff;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.loading-player-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
  align-content: center;
  transform: translateX(-2px);
}

.loading-player-name-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.loading-player-identity strong,
.loading-player-identity > span {
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 0.45px #05080c;
  paint-order: stroke fill;
  text-shadow: var(--outline-1);
}

.loading-player-identity strong {
  position: relative;
  top: -1px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 10px);
  overflow: visible;
  color: #fff;
  font-size: clamp(13px, 1.1vw, 14px);
  font-weight: 1000;
  text-overflow: clip;
  -webkit-text-stroke: 0.7px #05080c;
}

.loading-player-stats {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: visible;
  color: #eaffd5;
  font-size: clamp(12.5px, 1vw, 14px);
  font-weight: 1000;
  transform: translateY(1px);
}

.loading-player-diamonds {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  color: inherit;
  font: inherit;
  line-height: 1;
}

.loading-player-diamonds img {
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.1em;
  object-fit: contain;
  filter: drop-shadow(0 0 0.8px #000) drop-shadow(0 0 0.8px #000);
}

.loading-player-online {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(2, 10, 14, 0.95);
  border-radius: 50%;
  background: #78f99d;
  box-shadow: 0 0 0 1px rgba(3, 30, 23, 0.72), 0 0 4px rgba(120, 249, 157, 0.78), 0 0 7px rgba(78, 255, 132, 0.38);
}

.loading-player-online.is-offline {
  background: #ffb449;
  box-shadow: 0 0 0 1px #7c4512, 0 0 4px rgba(255, 180, 73, 0.72);
}

.loading-player-edit {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 2px solid #174d24;
  border-radius: 10px;
  background: linear-gradient(180deg, #b4f57a 0%, #58ce56 55%, #239b42 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.42), 0 3px 0 rgba(13, 81, 35, 0.68);
}

.loading-player-edit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.loading-player-edit:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), 0 1px 0 rgba(13, 81, 35, 0.68); }

.loading-player-edit img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.28));
}

.leaderboard {
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  right: calc(env(safe-area-inset-right, 0px) + 11px);
  z-index: 20;
  width: min(254px, calc(100vw - 28px));
  padding: 6px 7px 1px;
  border: 3px solid #0a275d;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 233, 255, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(47, 130, 214, 0.98), rgba(18, 61, 134, 0.98));
  color: #fff;
  pointer-events: none;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 5px 0 rgba(8, 35, 91, 0.62), 0 14px 28px rgba(5, 25, 72, 0.26);
  backdrop-filter: blur(7px);
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 13px;
  min-height: 0;
  gap: 2px;
  margin: 0 0 3px;
}

.leaderboard-header strong {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  min-width: 0;
  gap: 3px;
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 14px;
  line-height: 13px;
  -webkit-text-stroke: 1px #061d49;
  paint-order: stroke fill;
  text-shadow: -1px 0 #061d49, 0 1px #061d49, 1px 0 #061d49, 0 -1px #061d49;
  white-space: nowrap;
}

.leaderboard-room-code {
  display: inline-block;
  margin: 0;
  color: #e7f5ff;
  font-family: inherit;
  font-size: 11px;
  font-weight: inherit;
  line-height: 13px;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.leaderboard-room-code b { color: #fff28a; font-size: 12px; }

.multiplayer-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5px 3px;
  border: 1px solid rgba(8, 37, 92, 0.92);
  border-radius: 5px;
  background: rgba(7, 34, 82, 0.84);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 8px;
  line-height: 1;
  text-shadow: var(--outline-1);
  transform: translate(5px, -1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(0, 0, 0, 0.24);
}

.leaderboard-grid {
  grid-template-columns: minmax(112px, 1fr) 46px 36px;
  gap: 2px;
}

.leaderboard-grid > :nth-child(2) { transform: translateX(-8px); }

.leaderboard-grid-head {
  height: 12px;
  padding: 0 2px;
  color: #eef7ff;
  font-family: var(--font-heavy);
  font-size: 9.5px;
  line-height: 1;
  text-shadow: 0 1px 0 #081f50;
}

.leaderboard-income-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  white-space: nowrap;
}

.leaderboard-income-heading img {
  display: block;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 #081f50);
}

.leaderboard-body {
  gap: 1px;
  max-height: 169px;
  margin-right: 0;
  padding-right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.leaderboard.has-scrollbar .leaderboard-body {
  padding-right: 12px;
}

.leaderboard-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.leaderboard-scrollbar {
  position: absolute;
  right: 4px;
  z-index: 4;
  width: 10px;
  min-height: 30px;
  overflow: hidden;
  border: 2px solid #061b43;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, #0d3978, #071f4c);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.52),
    0 1px 0 rgba(164, 224, 255, 0.22);
  pointer-events: auto;
  touch-action: none;
}

.leaderboard-scrollbar[hidden] {
  display: none;
}

.leaderboard-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 28px;
  border: 1px solid #0a438a;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0 22%, transparent 24%),
    linear-gradient(180deg, #b7f4ff 0%, #56d3ff 42%, #3197ed 70%, #2568c8 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -2px 0 rgba(7, 54, 132, 0.38),
    0 1px 2px rgba(0, 11, 44, 0.5);
  cursor: grab;
  transform: translateY(0);
  will-change: transform;
}

.leaderboard-scrollbar:hover .leaderboard-scrollbar-thumb {
  filter: brightness(1.1) saturate(1.08);
}

.leaderboard-scrollbar.is-dragging .leaderboard-scrollbar-thumb {
  cursor: grabbing;
  filter: brightness(1.14) saturate(1.14);
}

.leaderboard-row {
  height: 16px;
  min-height: 16px;
  padding: 0 3px;
  border: 1px solid rgba(8, 46, 112, 0.8);
  border-radius: 5px;
  background: rgba(6, 31, 79, 0.6);
  font-family: var(--font-heavy);
  font-size: 12px;
  line-height: 1;
}

.leaderboard-row.is-local {
  border-color: rgba(255, 240, 128, 0.92);
  background: rgba(176, 141, 21, 0.36);
}

.leaderboard-row > span:not(.leaderboard-name) {
  font-size: 12px;
  letter-spacing: -0.3px;
  -webkit-text-stroke: 1.2px #061d49;
  paint-order: stroke fill;
  text-shadow: 0 1px 0 #061d49;
}

.leaderboard-row > span:last-child {
  overflow: visible;
  transform: translateX(-3px);
  white-space: nowrap;
}

.leaderboard-player-name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin: -3px 0;
  padding: 3px;
  font-family: var(--font-heavy);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.15px;
  -webkit-text-stroke: 1.35px var(--player-outline, #151018);
  text-shadow: 0 1px 0 var(--player-outline, #151018), 0 0 1px var(--player-outline, #151018);
}

.leaderboard-name i {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  padding-top: 1px;
  font-size: 9.5px;
  background: rgba(7, 42, 103, 0.64);
  color: #fff28a;
}

.room-code-panel { margin-top: 4px; padding-top: 4px; pointer-events: auto; }
.room-code-form { width: calc(100% + 14px); margin-left: -7px; grid-template-columns: minmax(103px, 1.15fr) 44px minmax(78px, 0.85fr); gap: 2px; }
.room-code-form input, .room-code-form button { height: 25px; border: 2px solid #092758; border-radius: 6px; font-family: var(--font-heavy); font-size: 12px; line-height: 1; }
.room-code-form input { padding: 1px 7px 0; color: #153d77; text-transform: lowercase; }
.room-code-form button { padding: 0 5px; border-color: #092758; background: linear-gradient(180deg, #8affb0, #20bd67); text-shadow: var(--outline-1); }
.room-code-form #privateServerButton { background: linear-gradient(180deg, #62c9ff, #247be0); font-size: 11px; text-indent: -1px; white-space: nowrap; }
/* Temporary room errors are outside the HUD's layout and never resize it. */
.room-code-status {
  position: fixed; z-index: 110;
  top: max(100px, calc(env(safe-area-inset-top, 0px) + 100px)); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  min-height: 0; margin: 0; padding: 8px 12px;
  border: 2px solid #092758; border-radius: 9px;
  background: #123567ee; color: #fff2a8;
  font-family: var(--font-heavy); font-size: 15px; line-height: 1.2;
  text-align: center; text-shadow: var(--outline-1); pointer-events: none;
}
.room-code-status:empty { display: none; }

.sound-toggle.settings-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 11px);
  right: auto;
  bottom: auto;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 32;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 4px;
  place-items: center;
  border: 3px solid #130916;
  border-radius: 10px;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.78), transparent 22%), linear-gradient(180deg, #b4f57a 0%, #58ce56 50%, #239b42 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.34), 0 5px 0 rgba(0, 0, 0, 0.34), 0 12px 22px rgba(0, 0, 0, 0.24);
  transform: scale(var(--game-ui-scale));
  transform-origin: top left;
}

.sound-toggle.settings-toggle > img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 -1px 0 #080402) drop-shadow(1px 0 0 #080402) drop-shadow(0 1px 0 #080402) drop-shadow(-1px 0 0 #080402) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.34));
}

.sound-toggle.settings-toggle:hover { transform: translateY(-1px) scale(var(--game-ui-scale)); }
.sound-toggle.settings-toggle:active { transform: translateY(2px) scale(var(--game-ui-scale)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28), 0 3px 0 rgba(0, 0, 0, 0.34), 0 8px 16px rgba(0, 0, 0, 0.2); }

.modal-overlay { z-index: 60; background: rgba(28, 8, 35, 0.42); }

.settings-modal {
  position: relative;
  box-sizing: border-box;
  width: min(650px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 22px 26px 28px;
  overflow: auto;
  border: 5px solid #102a30;
  border-radius: 26px;
  background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.56), transparent 23%), radial-gradient(circle at 10px 10px, rgba(20, 104, 102, 0.13) 0 3px, transparent 3.7px) 0 0 / 26px 26px, linear-gradient(155deg, #e0fff0 0%, #92ead5 48%, #42aebd 100%);
  color: #fff;
  font-family: var(--font-heavy);
  text-align: center;
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, 0.48), inset 0 -8px 0 rgba(17, 83, 97, 0.18), 0 12px 0 rgba(0, 0, 0, 0.34), 0 20px 38px rgba(0, 0, 0, 0.3);
}

.settings-modal::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 3px solid rgba(21, 91, 101, 0.55);
  border-radius: 17px;
  pointer-events: none;
}

.settings-panel { position: relative; z-index: 1; }

.settings-close {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 4;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 4px 0 0;
  place-items: center;
  border: 4px solid #102a30;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff665e, #c91f20);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 29px;
  line-height: 1;
  text-shadow: var(--outline-2);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.34), 0 5px 0 rgba(0, 0, 0, 0.32);
}

.settings-title-box {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: 2px 18px 3px 13px;
  border: 4px solid #102a30;
  border-radius: 16px;
  background: linear-gradient(180deg, #88f5de 0%, #24baa9 52%, #118183 100%);
  color: #fff;
  font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1;
  text-shadow: var(--outline-2);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.34), 0 5px 0 rgba(0, 0, 0, 0.28);
}

.settings-title-box img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.34)); }

.settings-controls, .settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }

.settings-option, .settings-feedback-button, .settings-respawn-button {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 3px 10px;
  border: 4px solid #102a30;
  border-radius: 16px;
  color: #fff;
  font-family: var(--font-heavy);
  text-align: left;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.38), inset 0 -5px 0 rgba(20, 70, 83, 0.14), 0 6px 0 rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease, filter 120ms ease;
}

.settings-option { min-height: 78px; background: linear-gradient(145deg, #fff1a6, #f4be57 58%, #e68b39); }
.settings-option.is-off { background: linear-gradient(145deg, #d7e8e2, #8baba9 58%, #5b7e86); filter: saturate(0.78); }
.settings-feedback-button { justify-content: flex-start; background: linear-gradient(145deg, #ffd0a4, #fa927a 52%, #d66172); }
.settings-respawn-button { justify-content: flex-start; background: linear-gradient(145deg, #b0eaff, #58b5ef 52%, #477fca); }
.settings-option:hover, .settings-feedback-button:hover, .settings-respawn-button:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.05); }
.settings-option:active, .settings-feedback-button:active, .settings-respawn-button:active { transform: translateY(3px); }

.settings-option-icon { display: grid; flex: 0 0 58px; width: 58px; height: 58px; place-items: center; }
.settings-option-icon img, .settings-feedback-button > img, .settings-respawn-button > img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); }
.settings-option-copy { display: grid; min-width: 0; gap: 4px; }
.settings-option-copy strong, .settings-feedback-button strong, .settings-respawn-button strong { display: block; font-size: clamp(21px, 3vw, 29px); line-height: 1; text-shadow: var(--outline-2); }
.settings-option-copy small, .settings-feedback-button small, .settings-respawn-button small { display: block; margin-top: 0; font-family: var(--font-heavy); font-size: 12px; line-height: 1.15; text-shadow: var(--outline-1); }
.settings-feedback-button > span, .settings-respawn-button > span { display: grid; min-width: 0; gap: 5px; text-align: left; }
.settings-feedback-status { min-height: 14px; margin: 9px 0 -11px; color: #fff2bd; font-size: 11px; text-shadow: var(--outline-1); }


.settings-close > img { filter: hue-rotate(155deg); }
.settings-pets-button { width: 100%; margin-top: 14px; background: linear-gradient(145deg, #e0d5ff, #b099ec 58%, #8567ca); }
.settings-pets-button[aria-pressed="true"] { background: linear-gradient(145deg, #c5f4e4, #5bc5af 58%, #2c938e); }

@media (min-width: 681px) and (min-height: 621px) {
  .settings-modal { min-height: 330px; transform: translateY(-18px); }
  .settings-controls { margin-top: 20px; }
}

@media (max-width: 720px) {
  :where(html.has-touch-controls) .loading-player-card {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 66px);
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    width: min(216px, calc(100vw - 78px));
    min-height: 44px;
  }
  :where(html.has-touch-controls) .loading-player-avatar-frame { width: 36px; height: 36px; }
  :where(html.has-touch-controls) .loading-player-identity strong { font-size: clamp(11.5px, 3.2vw, 14px); }
  :where(html.has-touch-controls) .loading-player-stats { font-size: clamp(9px, 2.6vw, 12px); }
  :where(html.has-touch-controls) .sound-toggle.settings-toggle { top: calc(env(safe-area-inset-top, 0px) + 10px); left: calc(env(safe-area-inset-left, 0px) + 10px); width: 46px; height: 46px; }
  :where(html.has-touch-controls) .leaderboard { top: calc(env(safe-area-inset-top, 0px) + 66px); right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: auto; width: min(224px, calc(100vw - 16px)); }
  :where(html.has-touch-controls) .leaderboard-grid { grid-template-columns: minmax(94px, 1fr) 42px 36px; }
  :where(html.has-touch-controls) .leaderboard-row:nth-child(n + 6) { display: none; }
  :where(html.has-touch-controls) .settings-modal { padding: 20px 18px 24px; }
  :where(html.has-touch-controls) .settings-close { top: 2px; right: 2px; width: 40px; height: 40px; font-size: 24px; }
  :where(html.has-touch-controls) .settings-controls, :where(html.has-touch-controls) .settings-actions { gap: 8px; }
  :where(html.has-touch-controls) .settings-option, :where(html.has-touch-controls) .settings-feedback-button, :where(html.has-touch-controls) .settings-respawn-button { min-height: 66px; gap: 7px; padding: 3px 6px; border-width: 3px; }
  :where(html.has-touch-controls) .settings-option-icon { flex-basis: 44px; width: 44px; height: 44px; }
  :where(html.has-touch-controls) .settings-option-icon img, :where(html.has-touch-controls) .settings-feedback-button > img, :where(html.has-touch-controls) .settings-respawn-button > img { width: 44px; height: 44px; }
  :where(html.has-touch-controls) .settings-option-copy strong, :where(html.has-touch-controls) .settings-feedback-button strong, :where(html.has-touch-controls) .settings-respawn-button strong { font-size: clamp(16px, 4.5vw, 22px); }
  :where(html.has-touch-controls) .settings-option-copy small, :where(html.has-touch-controls) .settings-feedback-button small, :where(html.has-touch-controls) .settings-respawn-button small { font-size: 10px; }
}

@media (max-width: 430px) {
  :where(html.has-touch-controls) .leaderboard { display: none; }
  :where(html.has-touch-controls) .settings-controls, :where(html.has-touch-controls) .settings-actions { grid-template-columns: 1fr; }
}

/* Compact, bright right-side collection UI. */
.collection-menu-buttons {
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  left: auto;
  z-index: 74;
  gap: 10px;
  transform: translateY(-50%);
}

.collection-menu-button {
  width: 74px;
  height: 74px;
  padding: 9px;
  border: 3px solid rgba(46, 63, 117, 0.82);
  border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.62), inset 0 -3px 0 rgba(46, 63, 117, 0.16), 0 4px 0 rgba(48, 58, 108, 0.42), 0 8px 16px rgba(50, 71, 132, 0.2);
}

.collection-menu-button:hover { transform: scale(1.04); filter: brightness(1.04) saturate(1.04); }
.collection-menu-button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48), 0 1px 0 rgba(48, 58, 108, 0.42); }
.growing-menu-button { background: linear-gradient(145deg, #a6f5ee, #55d7dc 58%, #35aac6); }
.animals-menu-button { background: linear-gradient(145deg, #e6c7ff, #b996f5 58%, #8e68df); }
.collection-menu-button img { width: 56px; height: 56px; filter: drop-shadow(0 2px 1px rgba(54, 48, 98, 0.18)); }

.collection-menu-badge {
  top: -9px;
  right: -9px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 2px solid #130d18;
  background: linear-gradient(#ff858d, #f04e72);
  color: #fff;
  font-size: 14px;
  -webkit-text-stroke: 1.6px #130d18;
  paint-order: stroke fill;
  text-shadow: -1px -1px 0 #130d18, 1px -1px 0 #130d18, -1px 1px 0 #130d18, 1px 1px 0 #130d18;
  box-shadow: 0 2px 0 rgba(87, 52, 111, 0.38);
}

#growingEggsButton img {
  filter:
    drop-shadow(0.6px 0 0 #65316f)
    drop-shadow(-0.6px 0 0 #65316f)
    drop-shadow(0 0.6px 0 #65316f)
    drop-shadow(0 -0.6px 0 #65316f)
    drop-shadow(0 2px 1px rgba(54, 48, 98, 0.18));
}

.gameplay-menu-overlay.modal-overlay {
  position: fixed;
  inset: auto max(98px, calc(env(safe-area-inset-right) + 98px)) auto auto;
  top: 50%;
  z-index: 72;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  transform: translateY(-50%);
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.gameplay-menu-overlay.hidden { display: none !important; }

.collection-panel {
  width: min(400px, calc(100vw - 116px));
  min-height: 0;
  max-height: min(450px, calc(100vh - 40px));
  padding: 10px;
  border: 3px solid #fff;
  border-radius: 18px;
  outline: 2px solid #8b83c7;
  background: radial-gradient(circle at 12px 12px, rgba(135, 119, 191, 0.08) 0 3px, transparent 3.5px) 0 0 / 25px 25px, linear-gradient(145deg, #fffdf8, #f2efff);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.9), 0 5px 0 rgba(100, 88, 157, 0.42), 0 14px 28px rgba(55, 48, 103, 0.22);
  color: #493e76;
  pointer-events: auto;
}

.collection-panel-close {
  top: -12px;
  right: -12px;
  left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: none;
  border: 2px solid #fff;
  border-radius: 10px;
  background: linear-gradient(#ff8c99, #f25175);
  color: #fff;
  font-size: 23px;
  text-shadow: none;
  box-shadow: 0 3px 0 rgba(125, 60, 103, 0.38), 0 7px 14px rgba(83, 48, 99, 0.16);
}

.collection-panel-close::before { content: none; }

.collection-panel-header {
  min-height: 54px;
  gap: 8px;
  margin-bottom: 9px;
  padding: 5px 8px;
  border: 2px solid rgba(76, 89, 145, 0.4);
  border-radius: 12px;
  background: linear-gradient(145deg, #d9fbff, #9be9f3);
  color: #453d76;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), 0 3px 0 rgba(86, 107, 158, 0.2);
}

.animals-header { background: linear-gradient(145deg, #ffe0ee, #d9c1ff); }
.collection-panel-header img { flex-basis: 40px; width: 40px; height: 40px; }
.collection-panel-header strong { color: #43396f; font-size: clamp(20px, 3vw, 27px); line-height: 1; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.85); }
.collection-panel-header b,
.animals-header b {
  padding: 6px 8px;
  border: 2px solid rgba(77, 83, 138, 0.46);
  border-radius: 9px;
  background: linear-gradient(#fff6a8, #ffd85f);
  color: #574a78;
  font-size: clamp(11px, 2vw, 14px);
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.65);
}
.animals-header b { background: linear-gradient(#ffc4d6, #ff90b1); }

.collection-list {
  max-height: min(315px, calc(100vh - 150px));
  gap: 7px;
  padding: 1px 2px 5px;
  scrollbar-color: #b7a8ea #eeeaff;
}

.collection-row {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 68px;
  gap: 8px;
  padding: 5px 7px;
  border: 2px solid #d9d3ef;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 240, 255, 0.98));
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(112, 96, 165, 0.16);
}

.collection-thumb {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(109, 104, 161, 0.35);
  border-radius: 11px;
  background: radial-gradient(circle at 38% 30%, #fff, #dff7ff 58%, #bde8f6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72);
}
.collection-thumb img,
.animal-thumb img { width: 44px; height: 44px; }
.animal-thumb { background: radial-gradient(circle, color-mix(in srgb, var(--pet-color) 38%, white), color-mix(in srgb, var(--pet-color) 62%, #f4efff)); }
.collection-row-copy { gap: 3px; }
.collection-row-copy strong { color: #4b3e78; font-size: clamp(16px, 2.4vw, 20px); text-shadow: 0 1px 0 #fff; }
.collection-row-copy small { color: #8a6da0; font-size: 10px; text-shadow: none; }

.egg-progress { height: 10px; border: 0; border-radius: 999px; background: #ddd8f0; box-shadow: inset 0 1px 2px rgba(75, 62, 116, 0.2); }
.egg-progress i { border-radius: inherit; background: linear-gradient(90deg, #61dc9b, #7ee8d4); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); }

.hatch-now-button {
  min-width: 58px;
  min-height: 31px;
  padding: 3px 7px;
  border: 2px solid #17375d;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff47c, #75df68 58%, #30b85d);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 13px;
  line-height: 1;
  -webkit-text-stroke: 1px #173a2a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #173a2a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 rgba(22, 85, 53, 0.62);
}

.hatch-now-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hatch-now-button:active { transform: translateY(2px); }
.growing-egg-row time { min-width: 58px; color: #5b4a89; font-size: clamp(14px, 2.4vw, 18px); text-shadow: 0 1px 0 #fff; }

.animal-equip-button,
.equip-best-button {
  border: 2px solid #fff;
  border-radius: 10px;
  background: linear-gradient(#8ee99d, #46c975);
  box-shadow: 0 3px 0 rgba(52, 134, 94, 0.34), 0 6px 12px rgba(70, 97, 115, 0.14);
  color: #fff;
  text-shadow: 0 1px 0 rgba(44, 91, 73, 0.42);
}
.animal-equip-button { min-width: 82px; min-height: 38px; padding: 4px 7px; font-size: clamp(13px, 2.2vw, 16px); }
.animal-equip-button.is-equipped { background: linear-gradient(#ff9ba7, #ed5b7d); box-shadow: 0 3px 0 rgba(163, 63, 98, 0.32); }
.equip-best-button { min-width: 160px; min-height: 43px; margin-top: 8px; padding: 4px 13px; font-size: 20px; }
.animal-row.is-active { border-color: #87dfaa; box-shadow: inset 0 0 0 1px rgba(107, 213, 148, 0.2), 0 2px 0 rgba(112, 96, 165, 0.16); }

.collection-empty {
  min-height: 132px;
  padding: 14px;
  gap: 5px;
  border: 2px dashed #c8bde7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  color: #8d82ad;
}
.collection-empty img { width: 58px; height: 58px; opacity: 0.82; }
.collection-empty strong { color: #554a82; font-size: 20px; text-shadow: 0 1px 0 #fff; }
.collection-empty span { font-size: 11px; }

@media (max-width: 720px) {
  :where(html.has-touch-controls) .collection-menu-buttons { top: 54%; right: max(8px, env(safe-area-inset-right)); left: auto; gap: 9px; }
  :where(html.has-touch-controls) .collection-menu-button { width: 62px; height: 62px; padding: 7px; border-width: 2px; border-radius: 14px; }
  :where(html.has-touch-controls) .collection-menu-button img { width: 48px; height: 48px; }
  :where(html.has-touch-controls) .collection-menu-badge { top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 5px; border-width: 2px; font-size: 11px; }
  :where(html.has-touch-controls) .gameplay-menu-overlay.modal-overlay { inset: auto max(80px, calc(env(safe-area-inset-right) + 80px)) auto auto; top: 54%; padding: 0; transform: translateY(-50%); }
  :where(html.has-touch-controls) .collection-panel { width: min(350px, calc(100vw - 88px)); max-height: calc(100vh - 28px); padding: 8px; border-width: 3px; }
  :where(html.has-touch-controls) .collection-panel-close { top: -10px; right: -10px; left: auto; width: 31px; height: 31px; border-width: 2px; }
  :where(html.has-touch-controls) .collection-panel-close { font-size: 20px; }
  :where(html.has-touch-controls) .collection-panel-header { min-height: 48px; margin-bottom: 7px; padding: 4px 6px; border-width: 2px; }
  :where(html.has-touch-controls) .collection-panel-header img { display: block; flex-basis: 34px; width: 34px; height: 34px; }
  :where(html.has-touch-controls) .collection-panel-header strong { font-size: clamp(17px, 4.3vw, 22px); }
  :where(html.has-touch-controls) .collection-panel-header b { padding: 5px 6px; border-width: 2px; font-size: clamp(9px, 2.7vw, 12px); }
  :where(html.has-touch-controls) .collection-list { max-height: calc(100vh - 112px); gap: 6px; }
  :where(html.has-touch-controls) .collection-row { grid-template-columns: 49px minmax(0, 1fr) auto; min-height: 60px; gap: 6px; padding: 4px 5px; border-width: 2px; }
  :where(html.has-touch-controls) .collection-thumb { width: 44px; height: 44px; }
  :where(html.has-touch-controls) .collection-thumb img, :where(html.has-touch-controls) .animal-thumb img { width: 38px; height: 38px; }
  :where(html.has-touch-controls) .collection-row-copy strong { font-size: clamp(14px, 3.7vw, 17px); }
  :where(html.has-touch-controls) .growing-egg-row time { min-width: 48px; font-size: clamp(12px, 3.4vw, 15px); }
  :where(html.has-touch-controls) .animal-equip-button { min-width: 68px; min-height: 34px; border-width: 2px; font-size: clamp(11px, 3vw, 14px); }
  :where(html.has-touch-controls) .equip-best-button { min-width: 140px; min-height: 39px; margin-top: 7px; font-size: 17px; }
  :where(html.has-touch-controls) .collection-empty { min-height: 116px; }
}

@media (max-width: 430px) {
  :where(html.has-touch-controls) .collection-panel-header > span img { display: block; }
  :where(html.has-touch-controls) .collection-panel-header strong { font-size: 17px; }
  :where(html.has-touch-controls) .collection-panel-header b { font-size: 9px; }
  :where(html.has-touch-controls) .collection-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  :where(html.has-touch-controls) .collection-thumb { width: 40px; height: 40px; }
  :where(html.has-touch-controls) .collection-thumb img, :where(html.has-touch-controls) .animal-thumb img { width: 34px; height: 34px; }
  :where(html.has-touch-controls) .animal-equip-button { min-width: 59px; font-size: 10px; }
}

/* Small animated collection popovers replace the right-side buttons while open. */
.collection-menu-buttons {
  --collection-button-width: 80px;
  --collection-button-height: 76px;
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(0.8625);
  transform-origin: center right;
  transition: opacity 160ms ease, transform 210ms cubic-bezier(0.2, 0.9, 0.25, 1.18);
}

.collection-menu-buttons.is-menu-open {
  opacity: 0;
  transform: translateY(-50%) translateX(24px) scale(0.70725);
  pointer-events: none;
}

.collection-menu-button {
  display: grid;
  width: var(--collection-button-width);
  height: var(--collection-button-height);
  min-width: var(--collection-button-width);
  max-width: var(--collection-button-width);
  min-height: var(--collection-button-height);
  max-height: var(--collection-button-height);
  padding: 6px;
  place-items: center;
}

.collection-menu-button img {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0;
  align-self: center;
  justify-self: center;
  object-fit: contain;
}

.gameplay-menu-overlay.modal-overlay {
  inset: auto max(14px, env(safe-area-inset-right)) auto auto;
  top: 50%;
  width: min(292px, calc(100vw - 28px));
  opacity: 0;
  transform: translateY(-50%) translateX(30px) scale(0.93);
  transform-origin: center right;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1.12);
  pointer-events: none;
}

.gameplay-menu-overlay.modal-overlay.is-open {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: none;
}

.gameplay-menu-overlay.modal-overlay.is-closing { pointer-events: none; }

.gameplay-menu-overlay .collection-panel {
  isolation: isolate;
  width: 100%;
  min-height: 0;
  max-height: min(338px, calc(100vh - 90px));
  padding: 7px;
  border-width: 2px;
  border-radius: 14px;
  outline-width: 1px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 4px 0 rgba(100, 88, 157, 0.38), 0 11px 22px rgba(55, 48, 103, 0.2);
}

.gameplay-menu-overlay .collection-panel-close {
  top: -12px;
  right: -12px;
  z-index: 100;
  width: 29px;
  height: 29px;
  border-width: 2px;
  border-radius: 9px;
  font-size: 19px;
  box-shadow: 0 2px 0 rgba(125, 60, 103, 0.34), 0 5px 10px rgba(83, 48, 99, 0.14);
}

.gameplay-menu-overlay .collection-panel-header {
  min-height: 42px;
  gap: 5px;
  margin-bottom: 6px;
  padding: 3px 5px;
  border-width: 1px;
  border-radius: 9px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.62), 0 2px 0 rgba(86, 107, 158, 0.16);
}

.gameplay-menu-overlay .collection-panel-header > span { gap: 4px; }
.gameplay-menu-overlay .collection-panel-header img { display: block; flex-basis: 31px; width: 31px; height: 31px; }
.gameplay-menu-overlay .collection-panel-header strong { font-size: 17px; }
.gameplay-menu-overlay .collection-panel-header b { padding: 4px 5px; border-width: 1px; border-radius: 7px; font-size: 9px; }
.gameplay-menu-overlay .collection-list { max-height: min(226px, calc(100vh - 165px)); gap: 5px; padding: 1px 1px 3px; }

.gameplay-menu-overlay .collection-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 50px;
  gap: 5px;
  padding: 3px 4px;
  border-width: 1px;
  border-radius: 9px;
}

.gameplay-menu-overlay .collection-thumb { width: 37px; height: 37px; border-width: 1px; border-radius: 8px; }
.gameplay-menu-overlay .collection-thumb img,
.gameplay-menu-overlay .animal-thumb img { width: 33px; height: 33px; }
.gameplay-menu-overlay .growing-egg-row .egg-thumb {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.gameplay-menu-overlay .growing-egg-row .egg-thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  max-width: none;
  transform: translate(-50%, -50%);
}
.gameplay-menu-overlay .collection-row-copy { gap: 2px; }
.gameplay-menu-overlay .collection-row-copy strong { font-size: 13px; }
.gameplay-menu-overlay .collection-row-copy small { font-size: 8px; }
.gameplay-menu-overlay .egg-progress { height: 28px; border: 2px solid #09060b; border-radius: 7px; background: #11131a; }
.gameplay-menu-overlay .egg-progress b { font-size: 13px; }
.gameplay-menu-overlay .growing-egg-row time { min-width: 42px; font-size: 11px; }
.gameplay-menu-overlay .animal-equip-button { min-width: 59px; min-height: 29px; padding: 2px 4px; border-width: 1px; border-radius: 8px; font-size: 10px; }
.gameplay-menu-overlay .equip-best-button { position: relative; display: flex; min-width: 140px; min-height: 33px; margin-top: 6px; padding: 3px 9px; align-items: center; justify-content: center; border-width: 1px; border-radius: 8px; font-size: 17px; }
.gameplay-menu-overlay .equip-best-button span { width: 100%; text-align: center; transform: translateX(-8px); }
.gameplay-menu-overlay .equip-best-button img {
  position: absolute;
  top: 1px;
  right: 5px;
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.gameplay-menu-overlay .collection-empty { min-height: 92px; padding: 8px; border-width: 1px; border-radius: 9px; }
.gameplay-menu-overlay .collection-empty img { width: 40px; height: 40px; }
.gameplay-menu-overlay .collection-empty strong { font-size: 14px; }
.gameplay-menu-overlay .collection-empty span { font-size: 9px; }

#activeAnimalsCount {
  min-width: 88px;
  padding: 7px 10px;
  border: 1px solid #3c326f;
  border-radius: 9px;
  background: linear-gradient(180deg, #78ecff, #48aee9);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  text-shadow: -1px 0 #272044, 0 1px #272044, 1px 0 #272044, 0 -1px #272044;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.58), 0 2px 0 rgba(52, 48, 111, 0.26);
}

#activeAnimalsTitle {
  font-size: 14px;
}

#activeAnimalsView .animal-equip-button {
  min-width: 76px;
  min-height: 32px;
  padding: 3px 6px;
  font-size: 13px;
}

#equipBestButton {
  -webkit-text-stroke: 1px #151019;
  paint-order: stroke fill;
  text-shadow: -1px 0 #151019, 0 1px #151019, 1px 0 #151019, 0 -1px #151019, 0 2px 0 rgba(21, 16, 25, 0.5);
}

.gameplay-menu-overlay .growing-header {
  position: relative;
  min-height: 35px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.gameplay-menu-overlay .growing-header > span { width: 100%; justify-content: center; }
.gameplay-menu-overlay .growing-header img { position: absolute; top: 50%; left: 6px; width: 27px; height: 27px; transform: translateY(-50%); }
.gameplay-menu-overlay .growing-header strong { font-size: 18px; text-align: center; }
.gameplay-menu-overlay .growing-egg-progress-wrap { display: block; }
.gameplay-menu-overlay .growing-egg-row.is-ready .growing-egg-progress-wrap { display: flex; justify-content: center; }
.gameplay-menu-overlay .growing-egg-row.is-ready .hatch-now-button {
  width: min(132px, 100%);
  min-width: 108px;
  min-height: 32px;
  animation: open-button-bounce 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}

@keyframes open-button-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .gameplay-menu-overlay .growing-egg-row.is-ready .hatch-now-button { animation: none; }
}

.collection-menu-ready-badge {
  right: auto;
  left: -9px;
  border-color: #130d18;
  background: linear-gradient(180deg, #a9ff8f, #42dc67 58%, #20af4a);
  box-shadow: 0 2px 0 rgba(33, 114, 64, 0.42);
}

.collection-menu-ready-badge[hidden] {
  display: none;
}

#growingEggsBadge,
#activeAnimalsBadge {
  transform: translateX(3px);
}

#backpackBadge {
  z-index: 3;
  transform: scale(0.9);
  transform-origin: center;
  background: linear-gradient(#8eeaff, #38b5ed);
  color: #fff;
  font-family: GameHeavy, Arial, sans-serif;
  -webkit-text-stroke: 1.6px #000;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  pointer-events: none;
}

#readyEggsBadge {
  transform: translateX(-3px);
}

.gameplay-menu-overlay .animal-row .collection-row-copy {
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.gameplay-menu-overlay .animal-row .collection-row-copy strong {
  position: relative;
  top: 2px;
  overflow: visible;
  padding: 0 3px;
  color: var(--animal-name-color);
  -webkit-text-fill-color: var(--animal-name-color);
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
  max-width: 100%;
  text-shadow:
    -1px -1px 0 var(--animal-name-outline), 0 -1px 0 var(--animal-name-outline), 1px -1px 0 var(--animal-name-outline),
    -1px 0 0 var(--animal-name-outline), 1px 0 0 var(--animal-name-outline),
    -1px 1px 0 var(--animal-name-outline), 0 1px 0 var(--animal-name-outline), 1px 1px 0 var(--animal-name-outline);
  filter: drop-shadow(0 0 1px var(--animal-name-glow));
}

.gameplay-menu-overlay .animal-row .collection-row-copy small {
  padding: 0 1px;
  font-size: 13px;
  line-height: 1;
}

.gameplay-menu-overlay .animal-income {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 1px;
}

.gameplay-menu-overlay .animal-income img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  transform: translateY(-1px);
}

.collection-thumb .collection-mutation-tag {
  position: absolute;
  right: -4px;
  bottom: -3px;
  z-index: 3;
  max-width: 58px;
  overflow: hidden;
  padding: 2px 4px 1px;
  border: 1px solid color-mix(in srgb, var(--mutation-color) 72%, #111);
  border-radius: 5px;
  background: rgba(16, 13, 22, 0.84);
  color: var(--mutation-color);
  font-family: var(--font-heavy);
  font-size: 8px;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: -1px 0 var(--mutation-outline), 0 1px var(--mutation-outline), 1px 0 var(--mutation-outline), 0 -1px var(--mutation-outline);
  white-space: nowrap;
}

.gameplay-menu-overlay .animal-row {
  --animal-name-color: #ffffff;
  --animal-name-outline: #202a35;
  --animal-name-glow: rgba(190, 225, 255, 0.18);
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 44px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-color: #6585aa;
  background: linear-gradient(145deg, #f5fdff, #ccecf1 56%, #b8d9e7);
}

.gameplay-menu-overlay .animal-row .collection-thumb {
  width: 40px;
  height: 40px;
  margin-left: -2px;
  background: radial-gradient(circle, #f8ffff 0%, #c7edf1 62%, #9bcbd9 100%);
}

.gameplay-menu-overlay .animal-row .collection-thumb img {
  width: 38px;
  height: 38px;
}

#activeAnimalsList {
  max-height: 194px;
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#activeAnimalsList::-webkit-scrollbar {
  display: none;
}

.gameplay-menu-overlay .growing-egg-row .collection-row-copy strong {
  overflow: visible;
  padding: 3px 4px 2px;
  font-size: 17px;
  line-height: 1.2;
}

.gameplay-menu-overlay .animal-equip-button,
.gameplay-menu-overlay .equip-best-button {
  border-width: 1px;
  border-color: #09060b;
}

.gameplay-menu-overlay .animal-row[data-rarity="rare"] {
  --animal-name-color: #b8f7ff;
  --animal-name-outline: #032a50;
  --animal-name-glow: rgba(56, 232, 255, 0.25);
}

.gameplay-menu-overlay .animal-row[data-rarity="epic"] {
  --animal-name-color: #f7b6ff;
  --animal-name-outline: #3b084e;
  --animal-name-glow: rgba(240, 92, 255, 0.24);
}

.gameplay-menu-overlay .animal-row[data-rarity="legendary"] {
  --animal-name-color: #fff4a8;
  --animal-name-outline: #4b2900;
  --animal-name-glow: rgba(255, 211, 45, 0.26);
}

.gameplay-menu-overlay .animal-row:is([data-rarity="uncommon"], [data-rarity="enchanted"], [data-rarity="ancient"], [data-rarity="celestial"], [data-rarity="supreme"], [data-rarity="infinite"]) {
  --animal-name-color: var(--collection-rarity-color);
  --animal-name-outline: var(--collection-rarity-outline);
  --animal-name-glow: var(--collection-rarity-glow);
}

.gameplay-menu-overlay .animal-row.is-active {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.58),
    0 2px 0 rgba(61, 52, 92, 0.24);
}

.gameplay-menu-overlay .growing-egg-row[data-rarity="common"] {
  border-color: #a4b1bd;
  background: linear-gradient(145deg, #ffffff, #edf3f7);
}

.gameplay-menu-overlay .growing-egg-row[data-rarity="rare"] {
  border-color: #69bfd9;
  background: linear-gradient(145deg, #f4feff, #d5f7ff);
}

.gameplay-menu-overlay .growing-egg-row[data-rarity="epic"] {
  border-color: #b58ad9;
  background: linear-gradient(145deg, #fff9ff, #eedcff);
}

.gameplay-menu-overlay .growing-egg-row[data-rarity="legendary"] {
  border-color: #d7ad55;
  background: linear-gradient(145deg, #fffef2, #fff0b9);
}

.gameplay-menu-overlay .growing-egg-row:is([data-rarity="uncommon"], [data-rarity="enchanted"], [data-rarity="ancient"], [data-rarity="celestial"], [data-rarity="supreme"], [data-rarity="infinite"]) {
  border-color: color-mix(in srgb, var(--collection-rarity-color) 65%, #564368);
  background: linear-gradient(145deg, white, color-mix(in srgb, var(--collection-rarity-color) 25%, white));
}

.gameplay-menu-overlay .growing-egg-row .egg-progress i {
  background: linear-gradient(90deg, #30df28, #69ff38);
}

.gameplay-menu-overlay .growing-egg-row.is-ready .egg-progress i {
  background: linear-gradient(90deg, #43dc69, #92f59d);
}

/* Crisp cartoon outline for every label inside the right-side collection menus. */
.gameplay-menu-overlay .collection-panel-header strong,
.gameplay-menu-overlay .collection-panel-header b,
.gameplay-menu-overlay .collection-row-copy strong,
.gameplay-menu-overlay .collection-row-copy small,
.gameplay-menu-overlay .growing-egg-row time,
.gameplay-menu-overlay .collection-empty strong,
.gameplay-menu-overlay .collection-empty span,
.gameplay-menu-overlay .hatch-now-button,
.gameplay-menu-overlay .animal-equip-button,
.gameplay-menu-overlay .equip-best-button,
#activeAnimalsCount,
#equipBestButton {
  color: #fff;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow:
    -1px -1px 0 #09060b,
     0 -1px 0 #09060b,
     1px -1px 0 #09060b,
    -1px  0 0 #09060b,
     1px  0 0 #09060b,
    -1px  1px 0 #09060b,
     0  1px 0 #09060b,
     1px  1px 0 #09060b;
}

:where(html.has-touch-controls) .collection-menu-buttons {
    --collection-button-width: 48px;
    --collection-button-height: 48px;
  }

:where(html.has-touch-controls) .collection-menu-button img { width: 40px; height: 40px; }

@media (max-width: 720px) {
  :where(html.has-touch-controls) .collection-menu-button { padding: 5px; }
  :where(html.has-touch-controls) .collection-menu-button img { width: 40px; height: 40px; }
  :where(html.has-touch-controls) .gameplay-menu-overlay.modal-overlay {
    inset: auto max(8px, env(safe-area-inset-right)) auto auto;
    top: 54%;
    width: min(268px, calc(100vw - 18px));
    transform: translateY(-50%) translateX(26px) scale(0.93);
  }
  :where(html.has-touch-controls) .gameplay-menu-overlay.modal-overlay.is-open { transform: translateY(-50%) translateX(0) scale(1); }
  :where(html.has-touch-controls) .gameplay-menu-overlay .collection-panel { max-height: calc(100vh - 42px); }
  :where(html.has-touch-controls) .gameplay-menu-overlay .collection-list { max-height: calc(100vh - 132px); }
}

/* Exact copy of the original game's top Speed and Hearts HUD geometry. */
.gameplay-resources {
  position: fixed;
  top: 11px;
  right: 18px;
  left: 18px;
  z-index: 18;
  display: block;
  gap: normal;
  pointer-events: none;
  transform: scale(var(--game-ui-scale));
  transform-origin: top center;
}

.gameplay-resources .top-hud {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 14px;
}

.resource-pill.resource-money,
.resource-pill.resource-speed {
  position: relative;
  display: block;
  width: 260px;
  height: 48px;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  overflow: visible;
  border: 4px solid #102234;
  border-radius: 14px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.96), rgba(214, 253, 255, 0.9) 58%, rgba(164, 231, 255, 0.82)),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.9), transparent 28%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.72),
    inset 0 -3px 0 rgba(39, 117, 155, 0.2),
    0 4px 0 rgba(7, 13, 22, 0.78),
    0 7px 16px rgba(0, 0, 0, 0.24);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 38px;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 0.95;
  text-align: left;
  text-shadow: var(--outline-3);
}

.resource-pill.resource-money {
  align-self: start;
  height: 42px;
  min-height: 42px;
  border-width: 3px;
  transform: translateX(-82px);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(255, 232, 126, 0.96) 58%, rgba(255, 177, 38, 0.92)),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.94), transparent 28%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.78),
    inset 0 -3px 0 rgba(151, 92, 13, 0.28),
    0 4px 0 rgba(7, 13, 22, 0.78),
    0 7px 16px rgba(0, 0, 0, 0.24);
}

.resource-pill.resource-speed {
  position: absolute;
  top: 0;
  left: calc(50% + 92px);
  width: 220px;
  height: 42px;
  min-height: 42px;
  border-width: 3px;
  font-size: 36px;
  transform: none;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(166, 241, 255, 0.95) 58%, rgba(50, 179, 242, 0.9)),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.94), transparent 28%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.78),
    inset 0 -3px 0 rgba(19, 105, 154, 0.3),
    0 4px 0 rgba(7, 13, 22, 0.78),
    0 7px 16px rgba(0, 0, 0, 0.24);
}

.resource-money .speed-title-icon {
  position: absolute;
  top: 57%;
  left: -39px;
  z-index: 1;
  display: grid;
  width: 60px;
  height: 60px;
  margin: 0;
  place-items: center;
  transform: translateY(-50%) rotate(-8deg);
  filter: drop-shadow(0 6px 0 rgba(7, 13, 22, 0.7));
}

.resource-speed .hearts-title-icon {
  position: absolute;
  top: 60%;
  left: -42px;
  z-index: 1;
  display: grid;
  width: 60px;
  height: 60px;
  margin: 0;
  place-items: center;
  transform: translateY(-50%) rotate(6deg);
  filter: drop-shadow(0 6px 0 rgba(7, 13, 22, 0.72));
}

.resource-money .resource-icon img,
.resource-speed .resource-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.resource-money .speed-title-copy,
.resource-speed .speed-title-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  min-width: 0;
}

.resource-money .speed-title-copy strong,
.resource-speed .speed-title-copy strong {
  position: absolute;
  top: 4px;
  left: 50%;
  display: inline-block;
  width: min(210px, calc(100% - 44px));
  margin: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: var(--font-heavy);
  font-size: 26px;
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  -webkit-text-stroke: 3.3px #050306;
  paint-order: stroke fill;
  text-shadow: 0 2.5px 0 #050306;
}

.resource-money .speed-title-copy strong {
  top: 6px;
}

.resource-speed .speed-title-copy strong {
  top: 6px;
  width: auto;
}

.resource-speed .speed-title-copy strong.is-increasing {
  animation: top-speed-gain-bounce 170ms cubic-bezier(0.2, 0.82, 0.3, 1.08);
}

.resource-money .speed-title-copy strong.is-changing {
  animation: top-coin-gain-bounce 220ms ease-out;
}

@keyframes top-coin-gain-bounce {
  0%, 100% { transform: translateX(-50%) scale(1); }
  42% { transform: translateX(-50%) scale(1.02); }
}

@keyframes top-speed-gain-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  42% { transform: translateX(-50%) translateY(-1px) scale(1.04); }
  72% { transform: translateX(-50%) translateY(0) scale(0.995); }
}

.resource-money .speed-title-copy strong::after,
.resource-speed .speed-title-copy strong::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.resource-money .speed-title-copy strong::after {
  content: none;
}

.resource-money .speed-title-copy > span,
.resource-speed .speed-title-copy > span {
  position: absolute;
  top: 33px;
  left: 5px;
  display: block;
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: var(--outline-2);
}

.resource-speed .speed-title-copy > span {
  top: 30px;
  left: -14px;
  font-size: 16px;
}

.resource-income {
  justify-self: start;
  margin-left: 134px;
}

@media (max-width: 1439px) {
  .resource-income { display: none; }
}

:where(html:not(.has-touch-controls)) .loading-player-card {
    top: calc(env(safe-area-inset-top, 0px) + 11px);
    left: calc(env(safe-area-inset-left, 0px) + 68px);
    width: 216px;
    transform: scale(var(--game-ui-scale));
    transform-origin: top left;
  }

:where(html:not(.has-touch-controls)) .leaderboard {
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    right: calc(env(safe-area-inset-right, 0px) + 7px);
    width: 254px;
    transform: scale(var(--game-ui-scale));
    transform-origin: top right;
  }

:where(html.has-touch-controls) .gameplay-resources {
    top: max(4px, env(safe-area-inset-top, 0px));
    right: 8px;
    left: 8px;
    transform: none;
  }

:where(html.has-touch-controls) .gameplay-resources .top-hud {
    display: flex;
    justify-content: center;
    gap: 0;
  }

:where(html.has-touch-controls) .resource-pill.resource-money {
    width: 172px;
    height: 39px;
    min-height: 39px;
    border-width: 3px;
    border-radius: 10px;
    font-size: 26px;
    transform: none;
  }

:where(html.has-touch-controls) .resource-pill.resource-speed {
    top: 1px;
    right: 0;
    left: auto;
    width: 136px;
    height: 36px;
    min-height: 36px;
    border-width: 2px;
    border-radius: 9px;
    font-size: 23px;
  }

:where(html.has-touch-controls) .resource-money .speed-title-icon {
    left: -25px;
    width: 42px;
    height: 42px;
  }

:where(html.has-touch-controls) .resource-speed .hearts-title-icon {
    left: -19px;
    width: 42px;
    height: 42px;
  }

:where(html.has-touch-controls) .resource-money .speed-title-copy strong {
    top: 8px;
    font-size: 18px;
    -webkit-text-stroke-width: 2.1px;
    text-shadow: 0 1.7px 0 #050306;
  }

:where(html.has-touch-controls) .resource-speed .speed-title-copy strong {
    top: 7px;
    left: 54%;
    font-size: 16px;
    -webkit-text-stroke-width: 2.1px;
    text-shadow: 0 1.7px 0 #050306;
  }

:where(html.has-touch-controls) .resource-money .speed-title-copy > span {
    top: 23px;
    font-size: 11px;
  }

:where(html.has-touch-controls) .resource-speed .speed-title-copy > span {
    top: 24px;
    font-size: 8px;
  }

/* Roblox-style backpack and one-item-per-slot toolbar. */
.item-hotbar {
  position: fixed;
  z-index: 29;
  bottom: max(6px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  max-width: calc(100vw - 20px);
  gap: 2px;
  transform: translateX(-50%) scale(0.96);
  transform-origin: bottom center;
  pointer-events: auto;
}

.cycle-hud {
  --cycle-accent: #8cff4a;
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 36;
  display: flex;
  align-items: center;
  width: 194px;
  height: 58px;
  gap: 2px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.cycle-hud::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 220px;
  height: 100%;
  background: linear-gradient(90deg, rgba(13, 17, 20, 0) 0%, rgba(24, 30, 34, 0.16) 14%, rgba(31, 38, 43, 0.3) 26%, rgba(35, 43, 48, 0.4) 36%, rgba(35, 43, 48, 0.4) 64%, rgba(31, 38, 43, 0.3) 74%, rgba(24, 30, 34, 0.16) 86%, rgba(13, 17, 20, 0) 100%);
  transform: translateX(-50%);
}

.cycle-hud img {
  display: block;
  flex: 0 0 74px;
  width: 74px;
  height: 72px;
  object-fit: contain;
  transform: translate(-8px, 2px) scale(1.12);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.42));
}

.cycle-hud[data-cycle="snow-storm"]:not(.is-locked) img {
  transform: translate(-2px, 2px) scale(1.34);
}

.cycle-hud.is-locked img { transform: translate(-8px, 2px) scale(0.78); }

.cycle-hud-copy {
  display: grid;
  flex: 0 0 104px;
  width: 104px;
  min-width: 0;
  align-content: center;
  gap: 1px;
  line-height: 1;
  text-align: left;
  transform: translate(-8px, -8px);
}

.cycle-hud-copy strong,
.cycle-hud-copy > span {
  font-family: GameHeavy, Arial, sans-serif;
  paint-order: stroke fill;
  -webkit-text-stroke: 2.5px #0d0e12;
  text-shadow: 0 2px 0 #0d0e12;
}

.cycle-hud-copy strong {
  display: inline-grid;
  max-width: none;
  min-height: 17px;
  margin-left: -2px;
  padding: 2px 7px 3px;
  align-items: center;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--cycle-accent) 52%, rgba(8, 10, 14, 0.75));
  border-radius: 5px;
  background: rgba(8, 10, 14, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  letter-spacing: 0.15px;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-2px);
  -webkit-text-stroke-width: 1.4px;
}

.cycle-hud-copy strong > span {
  color: var(--cycle-accent);
}


.cycle-hud-copy > span {
  color: #fff;
  font-size: 24px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transform: translateY(3px);
}

.cycle-hud.is-warning {
  border-color: transparent;
  box-shadow: none;
}

.cycle-hud.is-locked .cycle-hud-copy > span { color: #fff36a; }

.cycle-test-button {
  position: fixed;
  right: max(48px, env(safe-area-inset-right, 0px));
  bottom: max(86px, calc(env(safe-area-inset-bottom, 0px) + 86px));
  z-index: 37;
  min-width: 126px;
  min-height: 38px;
  padding: 5px 13px 7px;
  border: 3px solid #11131a;
  border-radius: 10px;
  background: linear-gradient(180deg, #b9ff78, #36dd70 56%, #15964d);
  color: #fff;
  font-family: GameHeavy, Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.5px #18351f;
  text-shadow: 0 2px 0 #18351f;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.42), 0 4px 0 rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.player-test-button { bottom: max(134px, calc(env(safe-area-inset-bottom, 0px) + 134px)); }
.steal-test-button { bottom: max(178px, calc(env(safe-area-inset-bottom, 0px) + 178px)); }

.stat-test-controls {
  position: fixed;
  left: calc(max(8px, env(safe-area-inset-left, 0px)) + 120px);
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 37;
  width: 150px;
  padding: 5px;
  border: 1px solid #11131a;
  border-radius: 6px;
  background: #18351fee;
  color: #fff;
  font: 11px Arial, sans-serif;
}
.stat-test-controls[hidden] { display: none; }
html.player-view :is(#playerTestButton, #stealTestButton, #cycleTestButton, #statTestControls, .daily-skip-test) { display: none !important; }
.stat-test-controls label { display: block; margin-bottom: 3px; }
.stat-test-controls input { box-sizing: border-box; width: 100%; padding: 3px 4px; font: inherit; border-radius: 3px; }
.stat-test-actions { display: flex; gap: 4px; margin-top: 4px; }
.stat-test-actions .cycle-test-button { position: static; flex: 1; min-width: 0; min-height: 24px; font-size: 11px; padding: 3px; border-width: 1px; border-radius: 4px; -webkit-text-stroke: .5px #18351f; text-shadow: 0 1px #18351f; box-shadow: inset 0 1px 0 #ffffff66, 0 1px 0 #0005; }
.stat-test-controls output:not(:empty) { display: block; margin-top: 4px; overflow-wrap: anywhere; }

.cycle-test-button:hover { filter: brightness(1.08) saturate(1.08); }
.cycle-test-button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 1px 0 rgba(0, 0, 0, 0.32); }
.cycle-test-button:disabled { filter: grayscale(0.45); opacity: 0.62; cursor: default; transform: none; }

.cycle-announcement {
  position: fixed;
  top: 16%;
  left: 50%;
  z-index: 48;
  display: grid;
  width: max-content;
  max-width: calc(100vw - 28px);
  justify-items: center;
  color: #fff;
  font-family: GameHeavy, Arial, sans-serif;
  font-synthesis: none;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: normal;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.88);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.2, 1.2, 0.35, 1);
  overflow: visible;
}

.cycle-announcement.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.cycle-announcement > strong,
.cycle-announcement > span {
  padding: 0.3em 0.4em;
  margin: -0.3em -0.4em;
  overflow: visible;
  font: inherit;
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.5px #09070b;
  text-shadow:
    -1.5px -1.5px 0 #09070b, 0 -1.5px 0 #09070b, 1.5px -1.5px 0 #09070b,
    -1.5px 0 0 #09070b, 1.5px 0 0 #09070b,
    -1.5px 1.5px 0 #09070b, 0 1.5px 0 #09070b, 1.5px 1.5px 0 #09070b;
}

.cycle-announcement > span {
  min-height: 1em;
  margin-top: calc(4px - 0.3em);
}

.cycle-announcement > strong > span,
.cycle-announcement > span > span {
  paint-order: stroke fill;
  -webkit-text-stroke: 1.5px #09070b;
}

.cycle-announcement-name {
  color: var(--cycle-name-color, #8ed8ff);
}

.egg-announcement-line {
  display: block;
  line-height: 1.35;
}
.egg-announcement-line + .egg-announcement-line {
  margin-top: 0.45em;
}

.rainbow-storm-letter {
  -webkit-text-fill-color: currentColor;
  paint-order: stroke fill;
}

.cycle-weather {
  position: fixed;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.cycle-weather.is-active { opacity: 0.42; }

.cycle-weather i {
  --cycle-particle-color: #fff;
  position: absolute;
  top: -12vh;
  left: var(--x, 50%);
  width: var(--size, 10px);
  height: calc(var(--size, 10px) * 1.25);
  border: 2px solid rgba(9, 11, 16, 0.5);
  border-radius: 52% 52% 48% 48%;
  background: var(--cycle-particle-color);
  box-shadow: inset -2px -2px 0 rgba(78, 151, 216, 0.25);
  animation: cycle-particle-fall var(--duration, 8s) linear var(--delay, 0s) infinite;
}

.cycle-weather[data-cycle="lucky-storm"] i { --cycle-particle-color: #76ff38; border-radius: 50%; }
.cycle-weather[data-cycle="thunderstorm"] i {
  --cycle-particle-color: #fff72e;
  border: 0;
  border-radius: 0;
  clip-path: polygon(45% 0, 100% 0, 63% 40%, 90% 40%, 25% 100%, 40% 55%, 10% 55%);
}
.cycle-weather[data-cycle="snow-storm"] i { --cycle-particle-color: #e9feff; border-color: rgba(72, 166, 226, 0.52); border-radius: 50%; }
.cycle-weather[data-cycle="golden-storm"] i { --cycle-particle-color: #ffd82f; border-radius: 25%; transform: rotate(45deg); }

.cycle-weather[data-cycle="rainbow-storm"] i {
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff5f69, #ffd950 35%, #5eff71 60%, #51b7ff 80%, #da65ff);
}
.cycle-weather[data-cycle="starfall"] i {
  border: 0;
  border-radius: 0;
  background: #fff276;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  box-shadow: 0 0 8px #9d74ff;
}

@keyframes cycle-particle-fall {
  from { translate: 0 -12vh; rotate: 0deg; }
  to { translate: 12vw 124vh; rotate: 520deg; }
}

.biome-stage-box {
  position: fixed;
  z-index: 28;
  bottom: max(73px, calc(env(safe-area-inset-bottom) + 73px));
  left: 50%;
  display: grid;
  width: min(240px, calc(100vw - 44px));
  padding: 7px 11px 5px;
  place-items: center;
  transform: translateX(-50%);
  border: 3px solid #12070f;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe1f3 0%, #ff9ed4 100%);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-shadow:
    -2px -2px 0 #050306, 0 -2px 0 #050306, 2px -2px 0 #050306,
    -2px 0 0 #050306, 2px 0 0 #050306,
    -2px 2px 0 #050306, 0 2px 0 #050306, 2px 2px 0 #050306;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.28),
    0 0 14px rgba(255, 158, 212, 0.28);
  pointer-events: none;
}

.biome-stage-box[data-biome="lobby"] {
  border-color: #4b2a18;
  background: linear-gradient(180deg, #e0ff9a 0%, #83e35a 56%, #54b43f 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 #7a4a2e,
    0 0 14px rgba(90, 203, 70, 0.3);
}

.biome-stage-box[data-biome="forest"] {
  background: linear-gradient(180deg, #d9ff91 0%, #65df68 52%, #28aa59 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.28),
    0 0 14px rgba(77, 225, 101, 0.36);
}

.biome-stage-box[data-biome="savanna"] {
  background: linear-gradient(180deg, #fff0a7 0%, #e8c75a 52%, #bc913d 100%);
  border-color: #88531e;
}

.biome-stage-box[data-biome="beach"] {
  background: linear-gradient(180deg, #fff0b9, #6ee1db 58%, #2bb7c6);
  border-color: #126e79;
}

html.is-backpack-open .biome-stage-box {
  opacity: 0;
  visibility: hidden;
}

.forest-entrance-popup {
  position: fixed;
  top: max(76px, calc(env(safe-area-inset-top, 0px) + 76px));
  left: 50%;
  z-index: 33;
  display: flex;
  min-width: 220px;
  min-height: 34px;
  padding: 5px 22px 4px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transform: translate(-50%, -10px) scale(0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: #9cff72;
  font-family: var(--font-heavy);
  font-size: 21px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: 3px #173f20;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(6, 35, 9, 0.9), 0 0 3px rgba(118, 235, 69, 0.16);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.forest-entrance-popup[data-biome="savanna"] {
  color: #ffe18b;
  -webkit-text-stroke-color: #88531e;
  text-shadow: 0 2px 0 rgba(70, 39, 10, 0.9), 0 0 3px rgba(255, 211, 99, 0.16);
}

.forest-entrance-popup[data-biome="beach"] {
  color: #b7fff5;
  -webkit-text-stroke-color: #126e79;
  text-shadow: 0 2px 0 #104650, 0 0 3px #89ffe729;
}

.forest-entrance-popup-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(6, 35, 9, 0.72));
  transform: translateY(-2px);
}

.forest-entrance-popup.is-visible {
  animation: forest-entrance-popup 1.35s cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

@keyframes forest-entrance-popup {
  0% { transform: translate(-50%, -10px) scale(0.96); opacity: 0; }
  18% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  68% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -3px) scale(1.02); opacity: 0; }
}

.egg-received-popup {
  --egg-received-color: #ffffff;
  --egg-received-outline: #111015;
  --egg-received-glow: rgba(255, 255, 255, 0.34);
  position: fixed;
  bottom: max(125px, calc(env(safe-area-inset-bottom, 0px) + 125px));
  left: 50%;
  z-index: 43;
  display: block;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 4px 10px 6px;
  color: #fff;
  font-family: var(--font-heavy);
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(0.88);
  -webkit-text-stroke: 1px #09070b;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #09070b, 0 -1px 0 #09070b, 1px -1px 0 #09070b,
    -1px 0 0 #09070b, 1px 0 0 #09070b,
    -1px 1px 0 #09070b, 0 1px 0 #09070b, 1px 1px 0 #09070b;
  will-change: transform, opacity;
}

.egg-received-popup strong {
  color: var(--egg-received-color);
  -webkit-text-fill-color: var(--egg-received-color);
  -webkit-text-stroke-color: var(--egg-received-outline);
  text-shadow:
    -1px -1px 0 var(--egg-received-outline), 0 -1px 0 var(--egg-received-outline), 1px -1px 0 var(--egg-received-outline),
    -1px 0 0 var(--egg-received-outline), 1px 0 0 var(--egg-received-outline),
    -1px 1px 0 var(--egg-received-outline), 0 1px 0 var(--egg-received-outline), 1px 1px 0 var(--egg-received-outline),
    0 0 5px var(--egg-received-glow);
}

html.is-escaping .loading-player-card,
html.is-escaping .leaderboard,
html.is-escaping .settings-toggle,
html.is-escaping .trail-shop-launcher,
html.is-escaping .emoji-hud-slot,
html.is-escaping .daily-rewards-launcher,
html.is-escaping .player-trail-shop-launcher,
html.is-escaping .gameplay-resources,
html.is-escaping .speed-multiplier-panel,
html.is-escaping .collection-menu-buttons,
html.is-escaping .item-hotbar,
html.is-escaping .biome-stage-box {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.speed-multiplier-panel {
  position: fixed;
  top: calc(clamp(142px, 19vh, 184px) + 83px);
  right: auto;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 74;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 80px;
  height: 53px;
  padding: 3px 6px;
  overflow: visible;
  border: 3px solid rgba(20, 11, 8, 0.7);
  border-radius: 11px;
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.72) 0 8%, rgba(255, 255, 255, 0.24) 18%, transparent 31%),
    linear-gradient(145deg, #dfffa6 0%, #69ef49 50%, #20b83d 100%);
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.38),
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 7px 14px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(105, 255, 91, 0.42);
  pointer-events: none;
}

.speed-multiplier-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 6px, rgba(40, 166, 60, 0.2) 6px 12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(25, 22, 91, 0.1);
  opacity: 0.34;
  pointer-events: none;
}

.speed-multiplier-panel span,
.speed-multiplier-panel strong {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-heavy);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0.55px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #050306,
    1px 0 #050306,
    0 -1px #050306,
    0 1px #050306,
    0 2px 0 rgba(5, 3, 6, 0.42);
}

.speed-multiplier-panel span {
  color: #efffd5;
  font-size: 14px;
}

.speed-multiplier-panel strong {
  margin-top: 3px;
  color: #fff;
  font-size: 15px;
  transform: translateY(2px);
}

.coins-per-second-panel {
  top: calc(clamp(142px, 19vh, 184px) + 22px);
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.82) 0 8%, rgba(255, 255, 255, 0.28) 18%, transparent 31%),
    linear-gradient(145deg, #fff3a3 0%, #ffc62e 52%, #e38b08 100%);
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.44),
    0 4px 0 rgba(92, 48, 0, 0.42),
    0 7px 14px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 196, 39, 0.5);
}

.coins-per-second-panel::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(185, 104, 0, 0.22) 6px 12px);
}

.coins-per-second-panel .coins-per-second-title {
  color: #fff7bd;
  font-size: 14px;
  transform: translateY(-3px);
}

.coins-per-second-value-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: calc(100% + 10px);
  height: 18px;
  margin-inline: -5px;
  transform: translateX(2px);
}

.coins-per-second-panel .coins-per-second-value-row strong {
  position: static;
  flex: 0 0 auto;
  margin-top: 4px;
  transform: none;
}

.coins-per-second-value-row img {
  position: static;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  object-fit: contain;
  transform: translateY(2px);
  filter: drop-shadow(0 1px 0 rgba(75, 38, 0, 0.55));
}

@media (max-width: 720px) {
  :where(html.has-touch-controls) .speed-multiplier-panel {
    top: calc(clamp(142px, 19vh, 184px) + 94px);
    right: auto;
    left: calc(env(safe-area-inset-left, 0px) + 14px);
    width: 48px;
    height: 37px;
    min-height: 0;
    padding: 3px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow:
      inset 0 4px 0 rgba(255, 255, 255, 0.38),
      0 3px 0 rgba(0, 0, 0, 0.3),
      0 5px 9px rgba(0, 0, 0, 0.18),
      0 0 14px rgba(105, 255, 91, 0.38);
  }

  :where(html.has-touch-controls) .speed-multiplier-panel::before { inset: 4px; border-radius: 6px; background-size: auto, 9px 9px; }
  :where(html.has-touch-controls) .speed-multiplier-panel span { font-size: 8px; -webkit-text-stroke-width: 0.4px; }
  :where(html.has-touch-controls) .speed-multiplier-panel strong { margin-top: 2px; font-size: 10px; -webkit-text-stroke-width: 0.5px; }
  :where(html.has-touch-controls) .coins-per-second-panel {
    top: calc(clamp(142px, 19vh, 184px) + 50px);
    box-shadow:
      inset 0 4px 0 rgba(255, 255, 255, 0.44),
      0 3px 0 rgba(92, 48, 0, 0.42),
      0 5px 9px rgba(0, 0, 0, 0.18),
      0 0 14px rgba(255, 196, 39, 0.46);
  }
  :where(html.has-touch-controls) .coins-per-second-panel .coins-per-second-title { font-size: 8px; transform: translateY(-2px); }
  :where(html.has-touch-controls) .coins-per-second-value-row { height: 12px; }
  :where(html.has-touch-controls) .coins-per-second-panel .coins-per-second-value-row strong { margin-top: 3px; }
  :where(html.has-touch-controls) .coins-per-second-value-row img { width: 12px; height: 12px; transform: translateY(2px); }
}

.egg-received-popup.is-visible {
  animation: egg-received-popup 2.2s cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@keyframes egg-received-popup {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.82); }
  14% { opacity: 1; transform: translate(-50%, -3px) scale(1.07); }
  24% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(0.98); }
}

.pet-world-label {
  position: fixed;
  z-index: 27;
  display: grid;
  width: max-content;
  justify-items: center;
  transform-origin: center center;
  color: #fff;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  will-change: left, top, transform;
}

.pet-world-label[hidden] {
  display: none;
}

.pet-world-rarity,
.pet-world-mutation,
.pet-world-name,
.pet-world-income b {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-family: var(--font-heavy);
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.pet-world-mutation {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding: 0.1em 0.2em 0.06em;
  color: var(--mutation-color);
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--mutation-color) 55%, transparent));
}

.pet-world-mutation > span {
  position: relative;
  z-index: 1;
  color: var(--mutation-color);
  -webkit-text-fill-color: var(--mutation-color);
}

.pet-world-mutation::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: inherit;
  content: attr(data-text);
  color: var(--mutation-outline);
  -webkit-text-fill-color: var(--mutation-outline);
  text-shadow:
    -1px -1px 0 var(--mutation-outline), 0 -1px 0 var(--mutation-outline), 1px -1px 0 var(--mutation-outline),
    -1px 0 0 var(--mutation-outline), 1px 0 0 var(--mutation-outline),
    -1px 1px 0 var(--mutation-outline), 0 1px 0 var(--mutation-outline), 1px 1px 0 var(--mutation-outline);
}

.pet-world-rarity {
  --label-outline: var(--pet-rarity-outline);
  padding: 0.12em 0.16em 0.06em;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  filter: drop-shadow(0 0 1px var(--pet-rarity-glow)) drop-shadow(0 0 2px var(--pet-rarity-glow));
}

.pet-world-label:not(.egg-world-label) .pet-world-rarity {
  transform: translateY(-2px);
}

.egg-world-title {
  font-size: 24px;
}

.pet-world-name {
  --label-outline: #17101c;
  padding: 0.1em 0.16em 0.08em;
  font-size: 20px;
  line-height: 1.08;
}

.pet-world-rarity > span,
.pet-world-name > span,
.pet-world-income b > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pet-world-rarity > span {
  background: none;
  color: var(--pet-rarity-color);
  -webkit-text-fill-color: var(--pet-rarity-color);
}

.pet-world-name > span {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.pet-world-rarity::before,
.pet-world-name::before,
.pet-world-income b::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  padding: inherit;
  content: attr(data-text);
  color: var(--label-outline);
  -webkit-text-fill-color: var(--label-outline);
  text-shadow:
    -2px -2px 0 var(--label-outline), 0 -2px 0 var(--label-outline), 2px -2px 0 var(--label-outline),
    -2px 0 0 var(--label-outline), 2px 0 0 var(--label-outline),
    -2px 2px 0 var(--label-outline), 0 2px 0 var(--label-outline), 2px 2px 0 var(--label-outline);
}

.pet-world-rarity::before {
  text-shadow:
    -1px -1px 0 var(--label-outline), 0 -1px 0 var(--label-outline), 1px -1px 0 var(--label-outline),
    -1px 0 0 var(--label-outline), 1px 0 0 var(--label-outline),
    -1px 1px 0 var(--label-outline), 0 1px 0 var(--label-outline), 1px 1px 0 var(--label-outline);
}

.pet-world-income {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 2px;
}

.pet-world-income img {
  display: block;
  width: 28px;
  height: 28px;
  transform: translate(-1px, -2px);
  object-fit: contain;
}

.pet-world-income b {
  --label-outline: #241305;
  padding: 0.14em 0.16em 0.12em;
  font-size: 19px;
  line-height: 1.2;
}

.pet-world-income b > span {
  background: none;
  color: #fff174;
  -webkit-text-fill-color: #fff174;
}

.pet-world-income .pet-world-income-rate {
  margin-left: -5px;
}

.hotbar-slot {
  position: relative;
  display: grid;
  flex: 0 0 min(58px, calc((100vw - 40px) / 9));
  width: min(58px, calc((100vw - 40px) / 9));
  height: min(58px, calc((100vw - 40px) / 9));
  padding: 3px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(243, 255, 230, 0.48);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(38, 53, 31, 0.82), rgba(20, 33, 23, 0.8));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 3px 0 rgba(28, 39, 31, 0.42), 0 7px 14px rgba(25, 35, 25, 0.14);
  color: #fff;
  transition: transform 110ms ease, border-color 110ms ease, filter 110ms ease;
}

.hotbar-slot:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hotbar-slot:active { transform: translateY(1px); }
.hotbar-slot.is-selected {
  transform: translateY(-4px) scale(1.04);
  border-color: #fff49b;
  background: linear-gradient(145deg, rgba(72, 125, 51, 0.96), rgba(32, 78, 44, 0.96));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(255, 224, 83, 0.88), 0 5px 0 rgba(87, 100, 42, 0.46), 0 10px 20px rgba(31, 59, 31, 0.22);
}

.hotbar-slot > b,
.backpack-item > b {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 2;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(18, 30, 19, 0.85);
}

.hotbar-slot > b { top: 2px; left: 3px; font-size: 11px; }

.hotbar-item-art {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 80%;
  height: 80%;
  margin: 0;
  transform: translate(-50%, -50%);
  place-items: center;
  border-radius: 9px;
}

.hotbar-item-art.is-pet { width: 92%; height: 92%; background: transparent; }
.hotbar-item-art img[hidden] { display: none; }
.hotbar-item-art.is-egg { width: 72%; height: 72%; }
.hotbar-item-art img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; filter: drop-shadow(0 2px 1px rgba(25, 21, 47, 0.3)); }
.hotbar-item-art.is-tool img { transform: rotate(-7deg); }
.hotbar-slot > small { display: none; }

.escape-egg-alert {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top, 0px) + 72px));
  left: 50%;
  z-index: 32;
  display: grid;
  width: 172px;
  min-height: 42px;
  place-items: center;
  transform: translate(-50%, -10px) scale(0.9);
  border: 3px solid rgba(255, 255, 255, 0.98);
  border-radius: 11px;
  background: linear-gradient(180deg, #ff4b4b, #ed001f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), 0 3px 0 #9f001d, 0 7px 14px rgba(92, 0, 24, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1.25);
}
.escape-egg-alert > .escape-egg-alert-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateY(0);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
/* Paint the complete outline behind the complete fill, so overlapping glyphs
   cannot paint black shadows over neighbouring white letter tops. */
.escape-egg-alert > .escape-egg-alert-outline {
  z-index: 0;
  color: #050306;
  text-shadow:
    -1.5px -1.5px 0 #050306, 0 -1.5px 0 #050306, 1.5px -1.5px 0 #050306,
    -1.5px 0 0 #050306, 1.5px 0 0 #050306,
    -1.5px 1.5px 0 #050306, 0 1.5px 0 #050306, 1.5px 1.5px 0 #050306;
}
.escape-egg-alert-mark { margin-left: -4px; }
.escape-egg-alert.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  animation: escape-egg-panic-pulse 460ms ease-in-out infinite alternate;
}
@keyframes escape-egg-panic-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12) saturate(1.08); }
}

.drop-egg-button {
  position: fixed;
  z-index: 31;
  bottom: max(131px, calc(env(safe-area-inset-bottom) + 131px));
  left: 50%;
  display: block;
  width: 132px;
  min-height: 42px;
  padding: 0;
  transform: translate(-50%, 8px) scale(0.92);
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 11px;
  background: linear-gradient(180deg, #ff4b4b, #ed001f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), 0 3px 0 #9f001d, 0 7px 14px rgba(92, 0, 24, 0.28);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 21px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  -webkit-text-stroke: 0;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 #050306, 0 -1px 0 #050306, 1px -1px 0 #050306,
    -1px 0 0 #050306, 1px 0 0 #050306,
    -1px 1px 0 #050306, 0 1px 0 #050306, 1px 1px 0 #050306;
  transition: opacity 140ms ease, transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1.2), filter 110ms ease;
}

.drop-egg-button.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.drop-egg-button.is-visible:hover { filter: brightness(1.06); }
.drop-egg-button.is-visible:active { transform: translate(-50%, 2px) scale(0.98); }
.drop-egg-button img {
  position: absolute;
  top: 46%;
  left: calc(50% + 31px);
  display: block;
  width: 29px;
  height: 29px;
  transform: translateY(-50%);
  object-fit: contain;
  filter:
    drop-shadow(-1px 0 0 #050306)
    drop-shadow(1px 0 0 #050306)
    drop-shadow(0 -1px 0 #050306)
    drop-shadow(0 1px 0 #050306)
    drop-shadow(0 2px 0 rgba(87, 19, 28, 0.3));
}
.drop-egg-button span {
  position: absolute;
  z-index: 1;
  top: calc(50% + 2px);
  left: 46%;
  display: block;
  padding: 6px 10px;
  overflow: visible;
  transform: translate(-50%, -50%);
  line-height: 1.25;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.drop-egg-button .drop-egg-outline {
  z-index: 0;
  color: #050306;
  text-shadow:
    -2px -2px 0 #050306, 0 -2px 0 #050306, 2px -2px 0 #050306,
    -2px 0 0 #050306, 2px 0 0 #050306,
    -2px 2px 0 #050306, 0 2px 0 #050306, 2px 2px 0 #050306;
}


.backpack-panel {
  position: fixed;
  z-index: 55;
  top: auto;
  bottom: max(74px, calc(env(safe-area-inset-bottom, 0px) + 74px));
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  max-height: min(430px, calc(100vh - env(safe-area-inset-bottom, 0px) - 92px));
  padding: 7px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 2px solid rgba(83, 67, 139, 0.68);
  border-radius: 15px;
  background: linear-gradient(155deg, rgba(241, 255, 252, 0.84), rgba(195, 244, 244, 0.8) 52%, rgba(208, 213, 255, 0.84));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.62), 0 4px 0 rgba(75, 61, 126, 0.32), 0 12px 27px rgba(34, 28, 72, 0.22);
  backdrop-filter: blur(2px);
  color: #4b3f78;
}

.backpack-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 43px;
  margin-bottom: 4px;
  padding: 1px 3px 4px 5px;
  border-bottom: 1px solid rgba(104, 89, 164, 0.2);
}

.backpack-header > span { display: flex; align-items: center; min-width: 0; gap: 5px; }
.backpack-header img { width: 29px; height: 29px; object-fit: contain; }
.backpack-header strong {
  color: #fff;
  font-size: 19px;
  transform: translate(-1px, 2px);
  -webkit-text-stroke: 1.25px #09060b;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #09060b, 0 -1px 0 #09060b, 1px -1px 0 #09060b,
    -1px 0 0 #09060b, 1px 0 0 #09060b,
    -1px 1px 0 #09060b, 0 1px 0 #09060b, 1px 1px 0 #09060b;
}
.backpack-header button {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  background: linear-gradient(145deg, #ff9d9d, #ed647f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), 0 2px 0 rgba(152, 70, 103, 0.3), 0 5px 10px rgba(102, 54, 91, 0.13);
  color: transparent;
  font-size: 0;
  transition: transform 100ms ease, filter 100ms ease;
}

.backpack-header button::before,
.backpack-header button::after {
  position: absolute;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(133, 47, 74, 0.28);
  content: "";
}

.backpack-header button::before { transform: rotate(45deg); }
.backpack-header button::after { transform: rotate(-45deg); }
.backpack-header button:hover { filter: brightness(1.06); }
.backpack-header button:active { transform: translateY(2px) scale(0.96); }

/* Shared close control for every menu that has one. */
.menu-close-button {
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  transition: transform 100ms ease, filter 100ms ease;
}

.menu-close-button::before,
.menu-close-button::after {
  content: none;
}

.menu-close-button > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.backpack-header .menu-close-button > img { width: 100%; height: 100%; }
.backpack-header .menu-close-button,
.gameplay-menu-overlay .collection-panel-close.menu-close-button {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.backpack-header .menu-close-button::before,
.backpack-header .menu-close-button::after { content: none; }
.menu-close-button:hover { filter: brightness(1.06); }
.menu-close-button:active { transform: translateY(2px) scale(0.96); }

.backpack-content {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px;
  min-height: 190px;
}

.backpack-categories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.backpack-categories button {
  display: grid;
  min-height: 88px;
  padding: 4px 5px 6px;
  place-items: center;
  border: 2px solid rgba(69, 62, 103, 0.4);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(113, 94, 75, 0.88), rgba(65, 57, 72, 0.9));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.13), 0 3px 0 rgba(55, 45, 76, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  -webkit-text-stroke: 0.75px #291f30;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #291f30, 0 -1px 0 #291f30, 1px -1px 0 #291f30,
    -1px 0 0 #291f30, 1px 0 0 #291f30,
    -1px 1px 0 #291f30, 0 1px 0 #291f30, 1px 1px 0 #291f30;
  transition: transform 110ms ease, filter 110ms ease, border-color 110ms ease;
}

.backpack-categories button[data-backpack-category="pet"] {
  border-color: #d36f9f;
  background: linear-gradient(145deg, #ffe0ee 0%, #ffc0dc 50%, #f39ac5 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.52), 0 3px 0 rgba(165, 69, 116, 0.3);
}

.backpack-categories button[data-backpack-category="egg"] {
  border-color: #2365aa;
  background: linear-gradient(145deg, #8ff5ff 0%, #55cfee 46%, #628cf7 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), 0 3px 0 rgba(38, 91, 159, 0.32);
}

.backpack-categories button img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter:
    drop-shadow(-1px 0 0 #080508)
    drop-shadow(1px 0 0 #080508)
    drop-shadow(0 -1px 0 #080508)
    drop-shadow(0 1px 0 #080508)
    drop-shadow(0 2px 1px rgba(30, 20, 34, 0.38));
}

.backpack-categories button:hover { filter: brightness(1.08); }
.backpack-categories button:active { transform: translateY(2px) scale(0.97); }
.backpack-categories button.is-active {
  border-color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(80, 67, 125, 0.7), 0 4px 0 rgba(55, 45, 76, 0.25);
}

.backpack-items-pane {
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(87, 73, 138, 0.3);
  border-radius: 12px;
  background: rgba(79, 71, 91, 0.16);
}

.backpack-category-title {
  display: block;
  min-height: 28px;
  padding: 1px 5px 4px;
  color: #fff;
  font-size: 20px;
  line-height: 1.1;
  -webkit-text-stroke: 1.25px #332947;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #332947, 0 -1px 0 #332947, 1px -1px 0 #332947,
    -1px 0 0 #332947, 1px 0 0 #332947,
    -1px 1px 0 #332947, 0 1px 0 #332947, 1px 1px 0 #332947;
}

.backpack-scroll-shell { position: relative; padding-right: 18px; }
.backpack-scrollbar {
  top: 2px; bottom: 5px; right: 0; width: 13px;
  border-color: #514578; border-radius: 8px;
  background: linear-gradient(#6c6094, #44395f);
}
.backpack-scrollbar .leaderboard-scrollbar-thumb {
  border-color: #42738f; border-radius: 6px;
  background: linear-gradient(90deg, #ffffff99 0 22%, transparent 24%), linear-gradient(#bdfff1, #73d9e5 50%, #83a5f0);
  box-shadow: inset 0 2px #ffffff99, inset 0 -2px #42649455;
}
.backpack-scrollbar:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.backpack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 76px;
  align-content: start;
  height: 165px;
  min-height: 165px;
  max-height: 165px;
  gap: 6px;
  padding: 2px 2px 5px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.backpack-grid::-webkit-scrollbar { display: none; }

.backpack-grid:empty:not([data-empty-label=""])::after {
  content: attr(data-empty-label);
  display: grid;
  min-height: 0;
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  place-items: center;
  border: 2px dashed rgba(89, 151, 177, 0.48);
  border-radius: 11px;
  background: rgba(223, 253, 255, 0.36);
  color: rgba(70, 83, 137, 0.74);
  font-family: var(--font-heavy);
  font-size: 13px;
  text-shadow: 0 1px 0 #ffffff;
}
.backpack-grid.is-inventory-drop-target:empty:not([data-empty-label=""])::after {
  border-color: #28bdcb;
  background: rgba(117, 244, 238, 0.32);
  color: #246c83;
}

.backpack-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 76px;
  height: 76px;
  padding: 3px 2px 15px;
  place-items: center;
  border: 1px solid rgba(99, 87, 154, 0.32);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(236, 251, 255, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 2px 0 rgba(95, 83, 145, 0.14);
  color: #4b3e78;
}

.backpack-item.is-selected { border-color: #e5b93f; box-shadow: inset 0 2px 0 #fff, 0 0 0 3px #fff16f, 0 4px 0 rgba(149, 119, 37, 0.24); }
.backpack-item.is-moving { transform: translateY(-2px); border-color: #4ac7d5; box-shadow: inset 0 2px 0 #fff, 0 0 0 3px #8ff6ef, 0 5px 0 rgba(48, 146, 158, 0.25); }
.backpack-item:disabled { cursor: default; opacity: 0.82; }
.backpack-item-art { position: absolute; top: 6px; left: 50%; display: grid; width: min(48px, calc(100% - 8px)); height: 48px; transform: translateX(-50%); place-items: center; border-radius: 10px; }
.backpack-item-art.is-pet { background: radial-gradient(circle, color-mix(in srgb, var(--item-color) 60%, white), color-mix(in srgb, var(--item-color) 58%, transparent)); }
.backpack-item-art.is-egg { width: min(44px, calc(100% - 8px)); height: 44px; }
.backpack-item-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(44, 32, 83, 0.25)); }
.backpack-item-art.is-tool img { transform: rotate(-7deg); }
.backpack-item strong {
  position: absolute;
  right: 2px;
  bottom: 3px;
  left: 2px;
  z-index: 2;
  overflow: visible;
  font-family: var(--font-heavy);
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}
.backpack-item strong > span {
  position: relative;
  z-index: 1;
  display: block;
  overflow: visible;
  color: #4b3e78;
}
.backpack-item strong.has-rarity {
  isolation: isolate;
  filter:
    drop-shadow(0 0 1px var(--item-rarity-glow))
    drop-shadow(0 0 2px var(--item-rarity-glow));
}
.backpack-item strong.has-rarity > span {
  color: var(--item-rarity-color);
  -webkit-text-fill-color: var(--item-rarity-color);
}
.backpack-item strong.has-rarity::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: attr(data-text);
  color: var(--item-rarity-outline);
  -webkit-text-fill-color: var(--item-rarity-outline);
  text-shadow:
    -1px -1px 0 var(--item-rarity-outline), 0 -1px 0 var(--item-rarity-outline), 1px -1px 0 var(--item-rarity-outline),
    -1px 0 0 var(--item-rarity-outline), 1px 0 0 var(--item-rarity-outline),
    -1px 1px 0 var(--item-rarity-outline), 0 1px 0 var(--item-rarity-outline), 1px 1px 0 var(--item-rarity-outline);
}
.backpack-item > b { top: 3px; left: 4px; font-size: 8px; }

.hotbar-slot.has-item,
.backpack-item { cursor: grab; }
.is-dragging-inventory .hotbar-slot.has-item,
.is-dragging-inventory .backpack-item { cursor: grabbing; }
.inventory-native-drag-preview {
  position: fixed;
  top: -120px;
  left: -120px;
  z-index: 2147483647;
  display: grid;
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  padding: 7px;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  border: 4px solid rgba(52, 55, 62, 0.62);
  border-radius: 9px;
  background: rgba(142, 146, 154, 0.14);
  box-shadow: inset 0 0 0 2px rgba(76, 79, 87, 0.3), 0 5px 12px rgba(55, 58, 65, 0.12);
}
.inventory-native-drag-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.42));
}
.inventory-native-drag-preview.is-tool img { transform: rotate(-7deg); }
.is-inventory-drag-origin-hidden { opacity: 0 !important; filter: none; }
.hotbar-slot.is-inventory-drop-target {
  transform: translateY(-5px) scale(1.08);
  border-color: #fff47f;
  background: linear-gradient(145deg, rgba(114, 191, 78, 0.98), rgba(51, 127, 70, 0.98));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 0 0 4px rgba(255, 229, 83, 0.9), 0 8px 20px rgba(38, 69, 34, 0.3);
  opacity: 1;
}
.backpack-grid.is-inventory-drop-target {
  outline: 3px dashed #43cdd7;
  outline-offset: -4px;
  border-radius: 11px;
  background: rgba(117, 244, 238, 0.2);
}

:where(html.has-touch-controls) .item-hotbar { bottom: max(3px, env(safe-area-inset-bottom)); gap: 2px; }

:where(html.has-touch-controls) .cycle-hud { right: max(8px, env(safe-area-inset-right, 0px)); bottom: max(70px, calc(env(safe-area-inset-bottom, 0px) + 70px)); width: 154px; height: 48px; gap: 2px; padding: 0 6px 0 2px; border-radius: 2px; }

:where(html.has-touch-controls) .cycle-hud::before { width: 176px; }

:where(html.has-touch-controls) .cycle-hud img { flex-basis: 58px; width: 58px; height: 58px; transform: translate(-5px, 2px) scale(1.12); }

:where(html.has-touch-controls) .cycle-hud[data-cycle="snow-storm"]:not(.is-locked) img { transform: translate(-1px, 2px) scale(1.34); }

:where(html.has-touch-controls) .cycle-hud.is-locked img { transform: translate(-5px, 2px) scale(0.78); }

:where(html.has-touch-controls) .cycle-hud-copy { flex-basis: 84px; width: 84px; min-width: 0; transform: translate(-5px, -6px); }

:where(html.has-touch-controls) .cycle-hud-copy strong { max-width: none; min-height: 14px; padding: 1px 6px 2px; font-size: 10px; }

:where(html.has-touch-controls) .cycle-hud-copy > span { font-size: 19px; -webkit-text-stroke-width: 2px; }

:where(html.has-touch-controls) .cycle-test-button { right: max(22px, env(safe-area-inset-right, 0px)); bottom: max(126px, calc(env(safe-area-inset-bottom, 0px) + 126px)); min-width: 112px; min-height: 34px; font-size: 15px; }

:where(html.has-touch-controls) .player-test-button { bottom: max(170px, calc(env(safe-area-inset-bottom, 0px) + 170px)); }
:where(html.has-touch-controls) .steal-test-button { bottom: max(214px, calc(env(safe-area-inset-bottom, 0px) + 214px)); }

:where(html.has-touch-controls) .cycle-announcement { top: 13%; font-size: clamp(12px, 3.6vw, 17px); }

:where(html.has-touch-controls) .cycle-announcement > span { margin-top: calc(3px - 0.3em); }

:where(html.has-touch-controls) .biome-stage-box { bottom: max(52px, calc(env(safe-area-inset-bottom) + 52px)); width: min(190px, calc(100vw - 44px)); padding: 6px 9px 4px; border-width: 2px; font-size: 15px; }

:where(html.has-touch-controls) .forest-entrance-popup { top: max(57px, calc(env(safe-area-inset-top, 0px) + 57px)); min-width: 176px; min-height: 29px; padding: 4px 14px 3px; gap: 7px; font-size: 17px; }

:where(html.has-touch-controls) .forest-entrance-popup-icon { width: 27px; height: 27px; transform: translateY(-2px); }

:where(html.has-touch-controls) .egg-received-popup { bottom: max(115px, calc(env(safe-area-inset-bottom, 0px) + 115px)); font-size: clamp(12px, 3.6vw, 17px); }

:where(html.has-touch-controls) .hotbar-slot { flex-basis: calc((100vw - 36px) / 9); width: calc((100vw - 36px) / 9); height: calc((100vw - 36px) / 9); min-width: 28px; min-height: 28px; max-width: 44px; max-height: 44px; padding: 2px; border-width: 1px; border-radius: 7px; }

:where(html.has-touch-controls) .hotbar-slot > b { top: 2px; left: 2px; font-size: 10px; }

:where(html.has-touch-controls) .hotbar-slot.is-selected { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 2px rgba(255,224,83,.88), 0 3px 0 rgba(87,100,42,.4); }

:where(html.has-touch-controls) .escape-egg-alert { top: max(54px, calc(env(safe-area-inset-top, 0px) + 54px)); width: 148px; min-height: 37px; }

:where(html.has-touch-controls) .escape-egg-alert > .escape-egg-alert-label { font-size: 20px; }

:where(html.has-touch-controls) .drop-egg-button { bottom: max(102px, calc(env(safe-area-inset-bottom) + 102px)); width: 122px; min-height: 37px; padding: 0; font-size: 18px; }

:where(html.has-touch-controls) .drop-egg-button img { left: calc(50% + 29px); width: 27px; height: 27px; }

:where(html.has-touch-controls) .backpack-panel { top: auto; bottom: max(54px, calc(env(safe-area-inset-bottom, 0px) + 54px)); width: min(500px, calc(100vw - 16px)); max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - 70px); padding: 6px; }

:where(html.has-touch-controls) .backpack-header { min-height: 40px; margin-bottom: 3px; }

:where(html.has-touch-controls) .backpack-header img { width: 26px; height: 26px; }

:where(html.has-touch-controls) .backpack-header strong { font-size: 17px; }

:where(html.has-touch-controls) .backpack-content { grid-template-columns: 72px minmax(0, 1fr); gap: 5px; }

:where(html.has-touch-controls) .backpack-categories { gap: 5px; }

:where(html.has-touch-controls) .backpack-categories button { min-height: 74px; padding: 3px; font-size: 13px; }

:where(html.has-touch-controls) .backpack-categories button img { width: 40px; height: 40px; }

:where(html.has-touch-controls) .backpack-category-title { min-height: 24px; font-size: 17px; }

:where(html.has-touch-controls) .backpack-grid { grid-auto-rows: 64px; height: 139px; min-height: 139px; max-height: 139px; gap: 4px; }

:where(html.has-touch-controls) .backpack-item { min-height: 64px; height: 64px; }

:where(html.has-touch-controls) .backpack-item strong { font-size: 10px; }

:where(html.has-touch-controls) .backpack-item-art { top: 4px; width: min(40px, calc(100% - 6px)); height: 40px; }

:where(html.has-touch-controls) .backpack-item-art.is-egg { width: min(38px, calc(100% - 6px)); height: 38px; }

:where(html.has-touch-controls) .mobile-stick { bottom: max(62px, calc(env(safe-area-inset-bottom) + 55px)); }

/* High-contrast world-space interaction prompt. */
.egg-steal-prompt {
  position: fixed;
  z-index: 48;
  display: flex;
  min-width: 118px;
  min-height: 54px;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 3px;
  transform: translate(-50%, -50%) scale(0.94);
  border: 0.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: rgba(29, 37, 48, 0.08);
  color: #fff;
  box-shadow: 0 3px 10px rgba(16, 24, 32, 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 140ms ease;
}

.egg-steal-prompt.is-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.egg-steal-prompt.is-hatch-target {
  background: rgba(29, 37, 48, 0.08);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.07);
}

.egg-steal-prompt.is-place-egg {
  min-width: 126px;
  background: linear-gradient(180deg, rgba(80, 208, 117, 0.2), rgba(24, 111, 63, 0.14));
  border-color: rgba(220, 255, 225, 0.82);
  box-shadow: 0 3px 10px rgba(20, 92, 49, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.egg-steal-prompt.is-place-egg .egg-steal-input {
  background: linear-gradient(180deg, rgba(140, 255, 161, 0.52), rgba(38, 188, 93, 0.4));
  border-color: rgba(238, 255, 240, 0.9);
}

.egg-steal-prompt.is-place-egg .egg-steal-copy small {
  display: none;
}

.egg-steal-prompt.is-place-egg .egg-steal-copy strong {
  margin-top: 0;
  color: #f2fff1;
  font-size: 15px;
  -webkit-text-stroke: 1px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #050306,
    0 1px #050306,
    1px 0 #050306,
    0 -1px #050306;
}

.egg-steal-prompt.is-hatch-target .egg-steal-copy small {
  display: none;
}

.egg-steal-prompt.is-hatch-target .egg-steal-copy strong {
  margin-top: 0;
  -webkit-text-stroke: 1px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #050306,
    0 1px #050306,
    1px 0 #050306,
    0 -1px #050306;
}

.egg-steal-prompt.is-pet-pickup {
  min-width: 118px;
  min-height: 54px;
  gap: 7px;
  padding: 3px 9px 3px 3px;
  border-width: 0.5px;
  border-radius: 14px;
  background: rgba(29, 37, 48, 0.08);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.07);
}

.egg-steal-prompt.is-pet-pickup.is-visible {
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 1;
}

.egg-steal-prompt.is-pet-pickup .egg-steal-input {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border-width: 1px;
}

.egg-steal-prompt.is-pet-pickup .egg-steal-desktop-key {
  width: 32px;
  height: 32px;
  border-width: 2px;
  border-radius: 9px;
  font-size: 16px;
}

.egg-steal-prompt.is-pet-pickup .egg-steal-copy {
  min-width: 53px;
}

.egg-steal-prompt.is-pet-pickup .egg-steal-copy small {
  display: none;
}

.egg-steal-prompt.is-pet-pickup .egg-steal-copy strong {
  margin-top: 0;
  font-size: 15px;
  -webkit-text-stroke: 1px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #050306,
    0 1px #050306,
    1px 0 #050306,
    0 -1px #050306;
}

.egg-steal-input {
  position: relative;
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(247, 255, 249, 0.22);
}

@property --steal-hold-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.egg-steal-input::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(#ffffff calc(var(--steal-hold-progress, 0) * 1turn), rgba(255, 255, 255, 0.15) 0);
  opacity: 0;
  pointer-events: none;
  transform: rotate(-90deg) scale(0.9);
  transition: --steal-hold-progress 70ms linear, opacity 100ms ease, transform 100ms ease;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.82));
}

.egg-steal-prompt.is-holding-steal .egg-steal-input::after {
  opacity: 1;
  transform: rotate(-90deg) scale(1);
}

.egg-steal-desktop-key {
  display: grid;
  width: 32px;
  height: 32px;
  padding-top: 1px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.94);
  font: 16px GameHeavy, Arial;
  -webkit-text-stroke: 1px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #050306,
    0 1px #050306,
    1px 0 #050306,
    0 -1px #050306;
  box-shadow:
    0 0 0 2px #050306,
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.egg-steal-touch-icon {
  display: none;
  width: 38px;
  height: 38px;
  background: url("../assets/icons/gameplay-ai/touch-hand-white.webp") center / contain no-repeat;
}

.egg-steal-prompt.is-touch .egg-steal-desktop-key { display: none; }
.egg-steal-prompt.is-touch .egg-steal-touch-icon { display: block; }

.egg-steal-copy {
  display: grid;
  min-width: 53px;
  line-height: 1;
  text-align: left;
}

.egg-steal-copy small {
  color: rgba(255, 255, 255, 0.94);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(20, 25, 31, 0.5);
}

.egg-steal-prompt.is-egg-target .egg-steal-copy small {
  color: var(--egg-interaction-color, #fff);
  font-family: var(--font-heavy);
  font-size: 14px;
  font-weight: 1000;
  -webkit-text-fill-color: var(--egg-interaction-color, #fff);
  -webkit-text-stroke: 0.7px #050306;
  paint-order: stroke fill;
  white-space: nowrap;
  text-shadow:
    -1px 0 #050306,
    0 1px #050306,
    1px 0 #050306,
    0 -1px #050306;
}

.egg-steal-prompt.is-egg-target:not(.is-hatch-target) .egg-steal-copy strong {
  -webkit-text-stroke: 1px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #050306,
    0 1px #050306,
    1px 0 #050306,
    0 -1px #050306;
}

.egg-steal-copy strong {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(20, 25, 31, 0.6);
}

:where(html.has-touch-controls) .egg-steal-prompt { min-width: 108px; min-height: 49px; gap: 6px; padding-right: 8px; }

:where(html.has-touch-controls) .egg-steal-input { flex-basis: 43px; width: 43px; height: 43px; }

:where(html.has-touch-controls) .egg-steal-copy small { font-size: 10px; }

:where(html.has-touch-controls) .egg-steal-copy strong { font-size: 13px; }

/* Preserve the original Pet Game Master name-editor design. */
.player-name-modal {
  position: relative;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 18px 28px 22px;
  overflow: visible;
  border: 5px solid #180913;
  border-radius: 25px;
  background:
    radial-gradient(circle at 16% 9%, rgba(255, 255, 255, 0.58), transparent 25%),
    radial-gradient(circle at 10px 10px, rgba(29, 77, 153, 0.13) 0 3px, transparent 3.7px) 0 0 / 26px 26px,
    linear-gradient(150deg, #b9edff 0%, #83caff 42%, #8d76ed 100%);
  color: #fff;
  font-family: var(--font-heavy);
  text-align: center;
  box-shadow:
    inset 0 7px 0 rgba(255, 255, 255, 0.48),
    inset 0 -8px 0 rgba(31, 57, 132, 0.2),
    0 11px 0 rgba(0, 0, 0, 0.34),
    0 20px 38px rgba(0, 0, 0, 0.3);
  animation: player-name-modal-pop 220ms ease-out both;
}

.player-name-modal::before { content: none; }
.player-name-modal > * { position: relative; z-index: 1; }

.player-name-modal .modal-close.menu-close-button {
  position: absolute;
  top: -22px;
  right: -22px;
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.player-name-preview {
  display: grid;
  min-height: 70px;
  margin: 0;
  padding: 6px 16px 8px;
  place-items: center;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  border: 4px solid #180913;
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 35%),
    linear-gradient(180deg, #3576b8 0%, #245c9b 54%, #153f78 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.22), 0 6px 0 rgba(0, 0, 0, 0.28);
}

.player-name-preview span {
  color: #c9f7ff;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: var(--outline-1);
}

.player-name-preview strong {
  display: block;
  max-width: 100%;
  overflow: visible;
  color: #fff;
  font-size: clamp(25px, 5vw, 36px);
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-text-stroke: 1px #05080c;
  paint-order: stroke fill;
  text-shadow: var(--outline-2);
}

.player-name-preview.is-generating strong { animation: player-name-choice-pop 260ms ease-out; }

.player-name-generate,
.player-name-cancel,
.player-name-save {
  border: 4px solid #180913;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-heavy);
  line-height: 1;
  text-shadow: var(--outline-2);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.38), 0 6px 0 rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease, filter 120ms ease;
}

.player-name-button-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  text-indent: 0;
  -webkit-text-stroke: 2px #050306;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #050306;
}
.player-name-generate .player-name-button-label { transform: translateX(-14px); }
.player-name-cancel .player-name-button-label,
.player-name-save .player-name-button-label { transform: translateX(-8px); }

.player-name-generate:hover,
.player-name-cancel:hover,
.player-name-save:hover { transform: translateY(-2px); filter: brightness(1.07) saturate(1.04); }

.player-name-generate:active,
.player-name-cancel:active,
.player-name-save:active { transform: translateY(3px); }

.player-name-generate {
  display: inline-flex;
  position: relative;
  left: -3px;
  width: auto;
  min-width: 274px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  padding: 3px 9px 5px 17px;
  border-radius: 15px;
  background: linear-gradient(180deg, #8ceeff 0%, #35c5ff 52%, #2879df 100%);
  font-size: 26px;
}

.player-name-generate > img {
  display: block;
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(1px 0 0 #050505) drop-shadow(-1px 0 0 #050505) drop-shadow(0 1px 0 #050505) drop-shadow(0 -1px 0 #050505) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
  transform: translateY(-50%);
}

.player-name-generate:disabled,
.player-name-save:disabled { cursor: wait; filter: grayscale(0.35); opacity: 0.72; }

.player-name-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.player-name-cancel,
.player-name-save {
  display: inline-flex;
  position: relative;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px 7px;
  border-radius: 14px;
  font-size: 20px;
}

.player-name-actions .player-name-cancel,
.player-name-actions .player-name-save {
  border-color: #180913;
}

.player-name-modal button:focus {
  outline: 0;
}

.player-name-modal button:focus-visible {
  outline: 3px solid #0a275d;
  outline-offset: 2px;
}

.player-name-cancel > img,
.player-name-save > img {
  display: block;
  position: absolute;
  top: 50%;
  right: 7px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(1px 0 0 #050505) drop-shadow(-1px 0 0 #050505) drop-shadow(0 1px 0 #050505) drop-shadow(0 -1px 0 #050505);
  transform: translateY(-50%);
}

.player-name-cancel {
  justify-content: center;
  padding-left: 10px;
  padding-right: 32px;
  background: linear-gradient(180deg, #ffd77d 0%, #ff9d42 54%, #e45b24 100%);
  white-space: nowrap;
}

.player-name-cancel > img { right: 3px; width: 26px; height: 26px; }

.player-name-save {
  margin-left: 5px;
  background: linear-gradient(180deg, #9affab 0%, #42db75 54%, #18a852 100%);
  font-size: 21px;
  text-indent: 0;
}

.player-name-save > img { width: 33px; height: 33px; }

.player-name-status {
  min-height: 18px;
  margin: 9px 0 -3px;
  color: #e7fbff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 2px rgba(18, 36, 87, 0.72);
}

@keyframes player-name-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes player-name-choice-pop {
  0% { opacity: 0.45; transform: scale(0.9); }
  65% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px), (max-height: 620px) {
  .player-name-modal {
    width: min(480px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    padding: 14px 16px 13px;
    border-width: 4px;
    border-radius: 20px;
  }

  .player-name-modal .modal-close.menu-close-button {
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
  }

  .player-name-preview { min-height: 54px; gap: 3px; padding: 4px 12px 6px; border-width: 3px; border-radius: 13px; }
  .player-name-preview span { font-size: 10px; }
  .player-name-preview strong { font-size: clamp(22px, 6vw, 30px); }

  .player-name-generate {
    min-width: min(254px, 100%);
    min-height: 50px;
    margin-top: 10px;
    border-width: 3px;
    border-radius: 12px;
    font-size: 21px;
  }

  .player-name-generate > img { width: 32px; height: 32px; }
  .player-name-actions { gap: 9px; margin-top: 10px; }

  .player-name-cancel,
  .player-name-save { min-height: 38px; border-width: 3px; border-radius: 11px; font-size: 17px; }

  .player-name-cancel { padding-left: 16px; padding-right: 27px; }
  .player-name-cancel > img { right: 2px; width: 23px; height: 23px; }
  .player-name-save { margin-left: 4px; font-size: 18px; text-indent: -8px; }
  .player-name-save > img { width: 29px; height: 29px; }
  .player-name-status { min-height: 14px; margin-top: 6px; font-size: 11px; }
}

/* Original Pet Game Master emoji HUD button, intentionally display-only here. */
.emoji-hud-slot {
  position: fixed;
  top: calc(50% + 111px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 74;
  transform: translateY(-50%);
  pointer-events: none;
}

.emoji-hud-button {
  position: relative;
  display: grid;
  justify-self: end;
  width: 80px;
  height: 76px;
  margin-right: 0;
  place-items: center;
  padding: 6px;
  border: 3px solid rgba(20, 11, 8, 0.7);
  border-radius: 11px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.52), transparent 25%),
    linear-gradient(145deg, #a8f4ff 0%, #48c9ff 52%, #2b79ff 100%);
  color: #fff;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto;
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.38),
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 7px 14px rgba(0, 0, 0, 0.18);
}

.emoji-hud-button::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0 7px, rgba(34, 153, 255, 0.12) 7px 14px);
  pointer-events: none;
}

.emoji-hud-button.is-open,
.emoji-hud-button[aria-expanded="true"] {
  transform: translateY(2px);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.34),
    0 3px 0 rgba(0, 0, 0, 0.3),
    0 0 22px rgba(255, 236, 89, 0.58);
}

.emoji-hud-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.46),
    inset 0 -3px 0 rgba(24, 31, 94, 0.14),
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 7px 14px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(87, 190, 255, 0.32);
}

.emoji-hud-icon {
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 64px;
  height: 46px;
  place-items: center;
  transform: translateX(-50%);
}

.emoji-hud-icon img {
  display: block;
  width: 60px;
  height: 48px;
  object-fit: contain;
  transform: translate(-1px, 5px);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.48));
}

.emoji-hud-button strong {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  margin-bottom: -1px;
  font-family: var(--font-heavy);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  transform: translate(-2px, 2px);
  -webkit-text-stroke: 1.25px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 0 #050306,
    1px 0 0 #050306,
    0 -1px 0 #050306,
    0 1px 0 #050306,
    0 2px 0 rgba(5, 3, 6, 0.46);
}

:where(html.has-touch-controls) .emoji-hud-slot {
    left: calc(env(safe-area-inset-left, 0px) + 10px);
  }

:where(html.has-touch-controls) .emoji-hud-button {
    width: 48px;
    height: 48px;
    margin-right: 0;
    padding: 3px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow:
      inset 0 3px 0 rgba(255, 255, 255, 0.36),
      0 3px 0 rgba(0, 0, 0, 0.3),
      0 5px 9px rgba(0, 0, 0, 0.18);
  }

:where(html.has-touch-controls) .emoji-hud-button::before {
    inset: 5px;
    border-radius: 6px;
  }

:where(html.has-touch-controls) .emoji-hud-icon {
    top: -1px;
    width: 38px;
    height: 28px;
  }

:where(html.has-touch-controls) .emoji-hud-icon img {
    width: 36px;
    height: 31px;
    transform: translate(0, 1px);
  }

:where(html.has-touch-controls) .emoji-hud-button strong {
    margin-bottom: -1px;
    font-size: 7.5px;
    transform: translate(0, 2px);
    -webkit-text-stroke: 0.55px #050306;
  }

@media (max-width: 720px) {
  :where(html.has-touch-controls) .emoji-hud-slot {
    top: calc(54% + 16px);
  }
}

/* Treadmill shop copied from the original game. */
.trail-shop-launcher {
  position: fixed;
  top: calc(50% - 95px);
  left: 14px;
  z-index: 31;
  overflow: visible;
  pointer-events: none;
}

.player-trail-shop-launcher {
  position: fixed;
  top: calc(50% - 11px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 31;
  overflow: visible;
  pointer-events: none;
}

.icon-button {
  --button-gradient-top: #c9f5ff;
  --button-gradient-mid: #69c6ff;
  --button-gradient-bottom: #5369e8;
  --button-stripe-color: rgba(57, 125, 232, 0.14);
  --button-glow-color: rgba(87, 190, 255, 0.32);
  position: relative;
  display: grid;
  width: 80px;
  height: 76px;
  place-items: center;
  padding: 6px;
  border: 3px solid rgba(20, 11, 8, 0.7);
  border-radius: 11px;
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.72) 0 8%, rgba(255, 255, 255, 0.24) 18%, transparent 31%),
    linear-gradient(145deg, var(--button-gradient-top) 0%, var(--button-gradient-mid) 50%, var(--button-gradient-bottom) 100%);
  color: #fff;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto;
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.38),
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 7px 14px rgba(0, 0, 0, 0.18),
    0 0 18px var(--button-glow-color);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.icon-button::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 6px, var(--button-stripe-color) 6px 12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(25, 22, 91, 0.1);
  opacity: 0.92;
  pointer-events: none;
}

.icon-button span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 42px;
  place-items: center;
  font-size: 32px;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}

.menu-icon-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.icon-button .trail-icon-slot { width: 62px; height: 42px; justify-items: center; overflow: visible; }
.trail-icon-image {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-top: -7px;
  transform: translateX(-2px);
  border-radius: 8px;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}

#trailsButton .trail-icon-image {
  width: 53px;
  height: 53px;
}

.icon-button strong {
  position: relative;
  z-index: 1;
  align-self: end;
  margin-bottom: -1px;
  font-family: var(--font-heavy);
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  transform: translate(-3px, 2px);
  -webkit-text-stroke: 1.25px #050306;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 0 #050306,
    1px 0 0 #050306,
    0 -1px 0 #050306,
    0 1px 0 #050306,
    0 2px 0 rgba(5, 3, 6, 0.46);
}

#trailsButton strong,
.emoji-hud-button strong {
  font-size: 14px;
}

#trailsButton strong { transform: translate(-4px, 2px); }
.emoji-hud-button strong { transform: translate(-2px, 3px); }

.menu-alert {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 4;
  display: none;
  width: 16px;
  height: 16px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: #f12635;
  box-shadow: 0 0 0 2px #321015, 0 3px 0 rgba(0, 0, 0, 0.32), 0 0 10px rgba(255, 35, 56, 0.72);
  pointer-events: none;
}
.menu-alert.is-visible {
  display: block;
  animation: menu-alert-pulse 760ms ease-in-out infinite alternate;
}
@keyframes menu-alert-pulse {
  from { transform: scale(0.94); }
  to { transform: scale(1.08); }
}
.icon-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.04);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.46), inset 0 -3px 0 rgba(24, 31, 94, 0.14), 0 4px 0 rgba(0, 0, 0, 0.3), 0 7px 14px rgba(0, 0, 0, 0.18), 0 0 24px var(--button-glow-color);
}
.icon-button:active {
  transform: translateY(4px);
  filter: saturate(1.03);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.36), inset 0 -2px 0 rgba(24, 31, 94, 0.12), 0 2px 0 rgba(0, 0, 0, 0.38), 0 5px 12px rgba(0, 0, 0, 0.22), 0 0 14px var(--button-glow-color);
}
.icon-button.quantum {
  --button-gradient-top: #ffffff;
  --button-gradient-mid: #a8f2fb;
  --button-gradient-bottom: #4aaedc;
  --button-stripe-color: rgba(112, 222, 243, 0.2);
  --button-glow-color: rgba(155, 244, 255, 0.46);
}

.icon-button.cyan {
  --button-gradient-top: #bafff4;
  --button-gradient-mid: #47e5d4;
  --button-gradient-bottom: #278ceb;
  --button-stripe-color: rgba(25, 158, 194, 0.14);
  --button-glow-color: rgba(55, 235, 217, 0.34);
}

.icon-button.pink {
  --button-gradient-top: #ffd7f1;
  --button-gradient-mid: #ff69bd;
  --button-gradient-bottom: #d93691;
  --button-stripe-color: rgba(184, 28, 112, 0.17);
  --button-glow-color: rgba(255, 83, 181, 0.46);
}

.player-trails-button strong {
  font-family: var(--font-heavy);
  font-size: 16px;
  font-weight: 1000;
  transform: translate(-1px, 4px);
  -webkit-text-stroke: 0.35px #050306;
}

.player-trails-button::before {
  opacity: 0.5;
}

.player-trails-button .trail-icon-image {
  width: 64px;
  height: 64px;
  margin-top: -9px;
}

:where(html.has-touch-controls) .emoji-hud-slot {
    top: calc(50% + 83px);
  }

:where(html.has-touch-controls) .trail-shop-launcher {
    top: calc(50% - 53px);
  }

:where(html.has-touch-controls) .player-trail-shop-launcher {
    top: calc(50% + 3px);
  }

:where(html.has-touch-controls) .icon-button {
    width: 48px;
    height: 48px;
    padding: 3px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow:
      inset 0 3px 0 rgba(255, 255, 255, 0.36),
      0 3px 0 rgba(0, 0, 0, 0.3),
      0 5px 9px rgba(0, 0, 0, 0.18),
      0 0 12px var(--button-glow-color);
  }

:where(html.has-touch-controls) .icon-button::before { inset: 5px; border-radius: 6px; }

:where(html.has-touch-controls) .icon-button .trail-icon-slot { width: 38px; height: 28px; }

:where(html.has-touch-controls) .trail-icon-image { width: 34px; height: 34px; margin-top: -5px; transform: translateX(0); }

:where(html.has-touch-controls) #trailsButton .trail-icon-image { width: 32px; height: 32px; }

:where(html.has-touch-controls) .icon-button strong { margin-bottom: -1px; font-size: 7.5px; transform: translate(-2px, 1px); }

:where(html.has-touch-controls) #trailsButton strong,
  :where(html.has-touch-controls) .emoji-hud-button strong { font-size: 8px; }

:where(html.has-touch-controls) #trailsButton strong { transform: translate(-3px, 1px); }

:where(html.has-touch-controls) .emoji-hud-button strong { transform: translate(0, 3px); }

:where(html.has-touch-controls) .player-trails-button strong { font-size: 6px; transform: translate(0, 2px); }

:where(html.has-touch-controls) .player-trails-button .trail-icon-image { width: 39px; height: 39px; margin-top: -6px; }

:where(html.has-touch-controls) .menu-alert { top: -6px; right: -6px; width: 12px; height: 12px; border-width: 2px; box-shadow: 0 0 0 1.5px #321015, 0 2px 0 rgba(0, 0, 0, 0.32), 0 0 7px rgba(255, 35, 56, 0.68); }

/* Keep these outside the touch overrides: outline width belongs to the label,
   and the white glyphs must paint above the complete black outline. */
:is(#backpackToggle, #trailsButton, #playerTrailsButton, #giftButton, #animalAlbumButton, #characterButton) strong {
  --left-label-outline: 1px;
  -webkit-text-stroke: 0;
  text-shadow: none;
  isolation: isolate;
}
:is(#backpackToggle, #trailsButton, #playerTrailsButton, #giftButton, #animalAlbumButton, #characterButton) strong::before {
  content: attr(data-outline) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #050306;
  pointer-events: none;
  text-shadow:
    calc(-1 * var(--left-label-outline)) calc(-1 * var(--left-label-outline)) 0 #050306,
    0 calc(-1 * var(--left-label-outline)) 0 #050306,
    var(--left-label-outline) calc(-1 * var(--left-label-outline)) 0 #050306,
    calc(-1 * var(--left-label-outline)) 0 0 #050306,
    var(--left-label-outline) 0 0 #050306,
    calc(-1 * var(--left-label-outline)) var(--left-label-outline) 0 #050306,
    0 var(--left-label-outline) 0 #050306,
    var(--left-label-outline) var(--left-label-outline) 0 #050306;
}
/* Use a continuous outline on macOS instead of overlapping shadow copies.
   Keep it on the backing glyph so the stroke never eats into the white text. */
.is-macos :is(#backpackToggle, #trailsButton, #playerTrailsButton, #giftButton, #animalAlbumButton, #characterButton) strong::before {
  content: attr(data-outline);
  content: attr(data-outline) / "";
  -webkit-text-stroke: calc(2 * var(--left-label-outline)) #050306;
  text-shadow: none;
}
:where(html.has-touch-controls) :is(#backpackToggle, #trailsButton, #playerTrailsButton, #giftButton, #animalAlbumButton, #characterButton) strong {
    --left-label-outline: 0.7px;
  }

#trailOverlay.modal-overlay { z-index: 100; background: rgba(8, 39, 57, 0.46); }
#playerTrailOverlay.modal-overlay { z-index: 101; background: rgba(47, 15, 69, 0.48); }
.walkable-shop-overlay {
  pointer-events: none;
}

.walkable-shop-overlay > .trail-modal {
  pointer-events: auto;
}

body:has(.walkable-shop-overlay:not(.hidden)) .mobile-controls {
  z-index: 102;
}

body:has(.walkable-shop-overlay:not(.hidden)) .mobile-camera-zone {
  pointer-events: none;
}

.trail-modal {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  padding: clamp(16px, 3vw, 28px);
  border: 5px solid #092f4a;
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.5), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 6px, transparent 6px 24px),
    linear-gradient(160deg, #bff7ff 0%, #73d9ee 52%, #3eb1d8 100%);
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.38),
    inset 0 0 38px rgba(218, 252, 255, 0.54),
    0 0 0 4px rgba(110, 224, 247, 0.22),
    0 0 34px rgba(91, 222, 255, 0.72),
    0 12px 0 rgba(5, 47, 70, 0.46),
    0 22px 42px rgba(3, 40, 61, 0.42);
}

.trail-modal::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 3px solid rgba(8, 58, 86, 0.76);
  border-radius: 17px;
  box-shadow: inset 0 0 22px rgba(196, 250, 255, 0.34), 0 0 14px rgba(197, 249, 255, 0.34);
  pointer-events: none;
}

.player-trail-modal {
  overflow: visible;
  border-color: #180913;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.38), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 24px),
    linear-gradient(160deg, #ff8bd5 0%, #aa78ff 52%, #68ddff 100%);
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.3),
    0 12px 0 rgba(0, 0, 0, 0.34),
    0 18px 34px rgba(0, 0, 0, 0.28);
}

.player-trail-modal::before {
  border-color: rgba(24, 9, 19, 0.76);
  box-shadow: none;
}

.player-trail-modal .trail-close {
  border-color: #180913;
}

.player-trail-modal .trail-balance {
  border-color: #180913;
  background: rgba(65, 29, 94, 0.72);
}

.player-trail-modal .trail-scrollbar {
  border-color: #180913;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 40%),
    linear-gradient(180deg, #7432ab, #4a206b);
}

.player-trail-modal .trail-scrollbar span {
  border-color: #180913;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 42%),
    linear-gradient(180deg, #fff478 0%, #ffb52e 52%, #ff65b7 100%);
}

.player-trail-modal .trail-scrollbar span:hover,
.player-trail-modal .trail-scrollbar.is-dragging span {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent 42%),
    linear-gradient(180deg, #fff9a6 0%, #ffc540 52%, #ff7ac5 100%);
}

.trail-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  padding: 3px 0 0;
  border: 4px solid #180913;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff6e9f, #d42166);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-heavy);
  font-size: 34px;
  line-height: 1;
  text-shadow: var(--outline-2);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.34), 0 5px 0 rgba(0, 0, 0, 0.32);
}

.trail-balance, .trail-shop-header, .trail-modal h2, .trail-scroll-wrap, .trail-card { position: relative; z-index: 1; }
.trail-shop-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
  min-height: 92px;
  margin: 6px 70px 10px;
}
.trail-modal h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6.4vw, 62px);
  line-height: 0.95;
  text-align: center;
  text-shadow: var(--outline-3);
}
.trail-balance {
  position: absolute;
  left: -48px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 158px;
  margin: 0;
  padding: 5px 12px;
  border: 4px solid #180913;
  border-radius: 12px;
  background: rgba(18, 105, 146, 0.8);
  color: #fff;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1;
  text-shadow: var(--outline-2);
  transform: translateY(-50%);
}
@media (min-width: 0px) {
  :where(html:not(.has-touch-controls)) .trail-balance { left: -64px; gap: 6px; padding-right: 7px; padding-left: 7px; }
}

.trophy-icon-image, .trophy-inline-icon {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 -1px 0 #080402) drop-shadow(1px 0 0 #080402) drop-shadow(0 1px 0 #080402) drop-shadow(-1px 0 0 #080402) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.34));
}
.trophy-inline-icon { width: 42px; height: 42px; }
.trail-scroll-wrap { display: grid; grid-template-columns: 1fr 20px; gap: 8px; align-items: stretch; }
.trail-list {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: calc(100% + 30px);
  max-height: min(52vh, 430px);
  margin-left: -30px;
  gap: 12px;
  overflow-y: auto;
  padding: 2px 4px 4px 30px;
  cursor: grab;
  scrollbar-width: none;
  touch-action: pan-x;
  user-select: none;
}
.trail-list::-webkit-scrollbar { display: none; }
.trail-list.is-dragging { cursor: grabbing; }
.trail-scrollbar {
  position: relative;
  min-height: 100%;
  border: 4px solid #180913;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 40%), linear-gradient(180deg, #329fc4, #176a94);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.26), inset 0 -4px 0 rgba(0, 0, 0, 0.18), 3px 0 0 rgba(0, 0, 0, 0.24);
  cursor: pointer;
  pointer-events: auto;
}
.trail-scrollbar span {
  position: absolute;
  top: -4px;
  right: -4px;
  left: -4px;
  min-height: 54px;
  border: 4px solid #180913;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 42%), linear-gradient(180deg, #ddfbff 0%, #84e3f3 52%, #3eb4da 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.48), 0 0 12px rgba(182, 247, 255, 0.58), 0 2px 0 rgba(0, 0, 0, 0.22);
  cursor: grab;
  will-change: transform, height;
}
.trail-scrollbar span:hover, .trail-scrollbar.is-dragging span {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent 42%), linear-gradient(180deg, #fff9a6 0%, #ffc540 52%, #ff7ac5 100%);
}
.trail-scrollbar.is-dragging span { cursor: grabbing; }
.trail-card {
  display: grid;
  grid-template-columns: max-content 1fr minmax(138px, 170px);
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 12px;
  border: 4px solid #180913;
  border-radius: 16px;
  background-color: var(--trail-dark);
  background: linear-gradient(135deg, color-mix(in srgb, var(--trail-color), white 12%), color-mix(in srgb, var(--trail-dark), black 4%));
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.26), 0 6px 0 rgba(0, 0, 0, 0.26);
}
.trail-preview { position: relative; height: 88px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.trail-preview.has-icon::before, .trail-preview.has-icon span { display: none; }
.trail-preview.has-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--trail-icon-x, 0), var(--trail-icon-y, 0)) scale(var(--trail-icon-scale, 1.3));
  transform-origin: center;
}
.trail-preview.has-icon { width: auto; aspect-ratio: 1; justify-self: start; overflow: visible; z-index: 2; }
.player-trail-modal .trail-preview.has-icon { overflow: hidden; }
.player-trail-modal .trail-preview.has-icon img {
  transform: none;
}
.trail-copy { position: relative; z-index: 3; }
.trail-copy strong { font-size: clamp(18px, 3vw, 36px); line-height: 1; white-space: nowrap; }
.trail-copy strong,
.trail-copy span {
  text-shadow:
    -2px -2px 0 var(--trail-outline), 0 -2px 0 var(--trail-outline), 2px -2px 0 var(--trail-outline),
    -2px 0 0 var(--trail-outline), 2px 0 0 var(--trail-outline),
    -2px 2px 0 var(--trail-outline), 0 2px 0 var(--trail-outline), 2px 2px 0 var(--trail-outline),
    0 4px 0 color-mix(in srgb, var(--trail-outline), black 46%);
}
.trail-card[data-trail-card="sunken"] { overflow: visible; background: linear-gradient(135deg, #bfffea 0%, #74f0ce 48%, #55dfff 100%); }
.trail-card[data-trail-card="sunken"] .trail-copy { transform: translateX(6px); }
.trail-card[data-trail-card="sunken"] .trail-copy strong { font-size: clamp(17px, 2.8vw, 34px); }
.trail-card[data-trail-card="sunken"] .trail-copy span { font-size: clamp(16px, 2.35vw, 23px); }
.trail-card.trail-style-rainbow { background: linear-gradient(120deg, #ff4f70 0%, #ffad32 18%, #f8df3d 34%, #35d97b 50%, #35bfff 68%, #7759ff 84%, #f653d1 100%); }
.trail-style-rainbow .trail-preview { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.22); }
.trail-card.trail-style-candy { background: linear-gradient(135deg, #ff68d4 0%, #9d55f4 48%, #43dff2 100%); }
.trail-style-candy .trail-preview { background: radial-gradient(circle, rgba(255, 255, 255, 0.62), rgba(255, 102, 213, 0.2) 40%, rgba(77, 220, 255, 0.25) 72%); box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.5), 0 0 16px rgba(255, 236, 119, 0.55); }
.trail-copy strong, .trail-copy span, .trail-buy { font-family: var(--font-heavy); }
.trail-copy { display: grid; gap: 8px; color: #fff; }
.trail-copy span { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(17px, 2.6vw, 25px); line-height: 1; }
.trail-shoe {
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: hue-rotate(118deg) saturate(2.2) brightness(1.04) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.42));
  transform: rotate(-12deg);
}
.trail-shoe.trail-shoe-blue {
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.35));
}
.trail-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  border: 4px solid #180913;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff478, #ffb52e);
  color: #fff;
  cursor: pointer;
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--outline-2);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.38), 0 5px 0 rgba(0, 0, 0, 0.25);
}
.trail-buy-label { transform: translateY(3px); }
.trail-buy.owned-action { font-size: clamp(20px, 2.7vw, 28px); }
.trail-buy-icon { text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.trail-buy:disabled { cursor: default; filter: grayscale(0.25); opacity: 0.78; }
.trail-buy.equipped { background: linear-gradient(180deg, #91f4ff, #2f9dff); }

/* Player Trails shop: unified modern violet theme. */
#playerTrailOverlay.modal-overlay {
  background: rgba(57, 27, 47, 0.46);
  backdrop-filter: none;
}

.player-trail-modal {
  border-color: #61364f;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.5), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 24px),
    linear-gradient(160deg, #ffe1f2 0%, #efb7db 52%, #d98fbd 100%);
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.38),
    inset 0 0 38px rgba(255, 230, 245, 0.42),
    0 0 0 4px rgba(239, 155, 207, 0.2),
    0 0 28px rgba(235, 132, 195, 0.44),
    0 12px 0 rgba(83, 45, 67, 0.46),
    0 22px 42px rgba(67, 34, 54, 0.36);
}

.player-trail-modal::before {
  border-color: rgba(104, 57, 84, 0.74);
  box-shadow:
    inset 0 0 22px rgba(255, 238, 248, 0.28),
    0 0 13px rgba(246, 179, 220, 0.26);
}

.player-trail-modal .trail-shop-header {
  background: transparent;
  box-shadow: none;
}

.player-trail-modal h2 {
  width: max-content;
  transform: translate(3px, -3px);
  text-shadow: var(--outline-3), 0 0 12px rgba(255, 235, 247, 0.48);
}

.player-trail-modal .trail-balance {
  border-color: #61364f;
  background: rgba(160, 85, 132, 0.82);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.16),
    0 0 13px rgba(238, 155, 207, 0.3);
}

.player-trail-modal .trail-scrollbar {
  border-color: #61364f;
  background: linear-gradient(180deg, #bd79a5, #8d5778);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 0 rgba(70, 35, 56, 0.24), 0 0 10px rgba(230, 148, 198, 0.24);
}

.player-trail-modal .trail-scrollbar span,
.player-trail-modal .trail-scrollbar span:hover,
.player-trail-modal .trail-scrollbar.is-dragging span {
  border-color: #61364f;
  background: linear-gradient(180deg, #ffe0f2 0%, #e7a4ce 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.38), 0 0 12px rgba(244, 185, 221, 0.42), 0 2px 0 rgba(89, 51, 73, 0.46);
}

html:where(html:not(.has-touch-controls)):not(.has-touch-controls) #trailOverlay.modal-overlay { overflow: hidden; }

html:where(html:not(.has-touch-controls)):not(.has-touch-controls) .trail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(760px, var(--game-popup-max-width));
    max-height: var(--game-popup-max-height);
    transform: translate(-50%, -50%) scale(var(--game-popup-scale));
    transform-origin: center;
  }

html:where(html:not(.has-touch-controls)):not(.has-touch-controls) .trail-list { max-height: min(430px, calc(var(--game-popup-max-height) - 170px)); }

@media (max-width: 680px) {
  .trail-card { grid-template-columns: max-content 1fr; }
  .trail-buy { grid-column: 1 / -1; }
}

@media (orientation: portrait) {
  :where(html.has-touch-controls) .trail-shop-launcher { top: calc(54% - 64px); left: calc(env(safe-area-inset-left, 0px) + 8px); }
  :where(html.has-touch-controls) .emoji-hud-slot { top: calc(54% + 72px); }
  :where(html.has-touch-controls) .player-trail-shop-launcher { top: calc(54% - 8px); left: calc(env(safe-area-inset-left, 0px) + 10px); }
  :where(html.has-touch-controls) .trail-modal { width: min(390px, calc(100vw - 28px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 58px); padding: 10px 8px 9px; border-width: 3px; border-radius: 14px; }
  :where(html.has-touch-controls) .trail-modal::before { inset: 6px; border-width: 2px; border-radius: 10px; }
  :where(html.has-touch-controls) .trail-close { top: 2px; right: 3px; width: 36px; height: 36px; padding-top: 2px; border-width: 3px; border-radius: 9px; font-size: 23px; }
  :where(html.has-touch-controls) .trail-shop-header { display: grid; grid-template-columns: minmax(82px, max-content) minmax(0, 1fr); gap: 5px; align-items: center; min-height: 42px; margin: 0 42px 7px 0; }
  :where(html.has-touch-controls) .trail-modal h2 { justify-self: center; font-size: clamp(24px, 7vw, 32px); line-height: 1.04; white-space: nowrap; text-shadow: var(--outline-2); }
  :where(html.has-touch-controls) .trail-balance { position: static; display: inline-flex; gap: 5px; min-width: 98px; min-height: 32px; margin: 0; padding: 3px 6px 4px; border-width: 3px; border-radius: 9px; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.05; overflow: visible; transform: none; text-shadow: var(--outline-1); }
  :where(html.has-touch-controls) .trophy-inline-icon { flex: 0 0 auto; width: 24px; height: 24px; }
  :where(html.has-touch-controls) .trail-scroll-wrap { grid-template-columns: minmax(0, 1fr) 14px; gap: 5px; }
  :where(html.has-touch-controls) .trail-list { width: calc(100% + 18px); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 126px); margin-left: -18px; gap: 6px; overflow-y: auto; padding: 2px 2px 5px 18px; touch-action: pan-y; }
  :where(html.has-touch-controls) .trail-card { grid-template-columns: max-content minmax(0, 1fr) minmax(74px, 92px); grid-template-areas: "preview copy buy"; gap: 6px; align-items: center; min-height: 58px; padding: 5px; border-width: 3px; border-radius: 10px; overflow: visible; }
  :where(html.has-touch-controls) .trail-preview { grid-area: preview; height: 38px; border-radius: 9px; }
  :where(html.has-touch-controls) .trail-copy { grid-area: copy; gap: 5px; min-width: 0; overflow: visible; }
  :where(html.has-touch-controls) .trail-copy strong { display: block; overflow: hidden; font-size: clamp(16px, 4.6vw, 22px); line-height: 1.04; text-overflow: ellipsis; white-space: nowrap; }
  :where(html.has-touch-controls) .trail-copy span { gap: 4px; font-size: clamp(11px, 3.2vw, 14px); line-height: 1.05; white-space: nowrap; }
  :where(html.has-touch-controls) .trail-shoe { width: 20px; height: 20px; }
  :where(html.has-touch-controls) .trail-buy { grid-area: buy; grid-column: auto; width: 100%; min-height: 34px; gap: 3px; padding: 2px 4px 4px; border-width: 3px; border-radius: 9px; font-size: clamp(10px, 2.7vw, 12px); text-shadow: var(--outline-1); }
  :where(html.has-touch-controls) .trail-buy.owned-action { font-size: clamp(14px, 3.8vw, 17px); }
  :where(html.has-touch-controls) .trail-buy .trophy-inline-icon { width: 19px; height: 19px; }
  :where(html.has-touch-controls) .trail-scrollbar { border-width: 3px; border-radius: 10px; }
  :where(html.has-touch-controls) .trail-scrollbar span { right: -3px; left: -3px; min-height: 38px; border-width: 3px; border-radius: 10px; }
}

/* Shared shop counter sizing, with separate title alignment. */
#trailOverlay #trailBalance,
#playerTrailOverlay #playerTrailBalance {
  display: inline-block;
  transform: translateY(2px);
}

#trailOverlay .trail-modal h2 {
  transform: translateX(4px);
}

:where(html:not(.has-touch-controls)) :is(#trailOverlay, #playerTrailOverlay) .trail-balance {
    padding-top: 3px;
    padding-bottom: 4px;
    transform: translate(-5px, -50%);
  }

:where(html:not(.has-touch-controls)) :is(#trailOverlay, #playerTrailOverlay) .trail-balance .trophy-inline-icon {
    width: 36px;
    height: 36px;
  }

@media (orientation: portrait) {
  :where(html.has-touch-controls) :is(#trailOverlay, #playerTrailOverlay) .trail-balance {
    min-height: 30px;
    padding-top: 2px;
    padding-bottom: 3px;
    transform: translateX(-3px);
  }

  :where(html.has-touch-controls) :is(#trailOverlay, #playerTrailOverlay) .trail-balance .trophy-inline-icon {
    width: 22px;
    height: 22px;
  }

  :where(html.has-touch-controls) #trailOverlay #trailBalance,
  :where(html.has-touch-controls) #playerTrailOverlay #playerTrailBalance {
    transform: translateY(1px);
  }

  :where(html.has-touch-controls) #trailOverlay .trail-modal h2 {
    transform: translateX(3px);
  }

  :where(html.has-touch-controls) .speed-multiplier-panel {
    top: calc(env(safe-area-inset-top, 0px) + 99px);
    left: calc(env(safe-area-inset-left, 0px) + 8px);
  }

  :where(html.has-touch-controls) .coins-per-second-panel {
    top: calc(env(safe-area-inset-top, 0px) + 55px);
  }
}

.offline-claim-popup {
  position: fixed;
  z-index: 190;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 6px;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff36e;
  opacity: 0;
  pointer-events: none;
}

.offline-claim-popup img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.offline-claim-popup strong {
  font-family: var(--font-heavy);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 0.65px #160b04;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(31, 14, 2, 0.55);
}

.offline-claim-popup.is-visible {
  animation: offline-claim-popup 1.8s cubic-bezier(0.18, 0.78, 0.24, 1) both;
}

.offline-claim-copy { display: grid; gap: 4px; }
.offline-claim-copy > span { display: none; }

.offline-claim-popup:not(.is-sale) {
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 2px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.offline-claim-popup:not(.is-sale) img {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 2px 0 #352013) drop-shadow(0 0 9px #ffdc6b80);
}

.offline-claim-popup:not(.is-sale) .offline-claim-copy > span {
  display: block;
  order: 1;
  color: #fff2c5;
  font-family: var(--font-heavy);
  font-size: 11px;
  letter-spacing: 1.4px;
  line-height: 1;
  -webkit-text-stroke: 2px #352013;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #352013;
}

.offline-claim-popup:not(.is-sale) strong {
  color: #fff0a0;
  font-size: clamp(32px, 3.4vw, 40px);
  line-height: 1.05;
  -webkit-text-stroke: 2px #352013;
  text-shadow: 0 3px 0 #704017, 0 0 14px #ffd34d66;
}

.offline-claim-popup:not(.is-sale).is-visible {
  animation: chest-claim-notification 2.2s ease-out both;
}

@keyframes chest-claim-notification {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.78); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, calc(-50% - 8px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 26px)) scale(0.97); }
}

.chest-claim-sparkles {
  position: absolute;
  inset: 50% auto auto 50%;
  pointer-events: none;
}

.chest-claim-sparkles i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff2a0;
  clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%);
  opacity: 0;
}

.offline-claim-popup:not(.is-sale).is-visible .chest-claim-sparkles i {
  animation: chest-claim-spark 850ms ease-out var(--spark-delay) both;
}

.offline-claim-popup.is-sale .chest-claim-sparkles { display: none; }

@keyframes chest-claim-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.2) rotate(60deg); }
}

@media (prefers-reduced-motion: reduce) {
  .offline-claim-popup:not(.is-sale).is-visible { animation: chest-claim-notification-fade 2.2s linear both; }
  .offline-claim-popup:not(.is-sale).is-visible .chest-claim-sparkles i { animation: none; }
}

@keyframes chest-claim-notification-fade {
  0%, 100% { opacity: 0; }
  10%, 85% { opacity: 1; }
}

.offline-claim-popup.is-sale {
  gap: 9px;
  padding: 12px 18px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: none;
  scale: 0.7;
}

.offline-claim-popup.is-sale img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 7px rgba(255, 228, 75, 0.9)) drop-shadow(0 0 15px rgba(255, 177, 32, 0.68));
}

.offline-claim-popup.is-sale strong {
  font-size: clamp(22px, 3vw, 34px);
  text-shadow: 0 2px 0 rgba(31, 14, 2, 0.7), 0 0 8px rgba(255, 237, 92, 0.9), 0 0 18px rgba(255, 174, 31, 0.72);
}

.offline-flying-coin {
  position: fixed;
  z-index: 189;
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(74, 40, 0, 0.42));
  will-change: transform, opacity;
}

.sell-flying-coin {
  z-index: 192;
  filter: drop-shadow(0 2px 2px rgba(74, 40, 0, 0.42)) drop-shadow(0 0 5px rgba(255, 232, 91, 0.55));
}

.sell-success-burst {
  position: fixed;
  z-index: 191;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sell-success-burst i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #ffe94d;
  box-shadow: 0 0 8px rgba(255, 229, 71, 0.8);
  opacity: 0;
  transform: rotate(45deg) scale(0.2);
  animation: sell-success-spark 0.72s cubic-bezier(0.18, 0.78, 0.24, 1) var(--sell-burst-delay) both;
}

.sell-success-burst i:nth-child(3n) { background: #79ff88; }
.sell-success-burst i:nth-child(3n + 2) { background: #fff; }

.resource-money.is-receiving-coins .speed-title-copy strong {
  animation: offline-money-counter-pulse 0.56s cubic-bezier(0.2, 0.8, 0.25, 1);
}

@keyframes offline-claim-popup {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.72); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  74% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(0.92); }
}

@keyframes offline-money-counter-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  42% { transform: translateX(-50%) scale(1.05); filter: brightness(1.12) saturate(1.08); }
}

@keyframes sell-success-spark {
  0% { opacity: 0; transform: rotate(45deg) scale(0.2); }
  22% { opacity: 1; transform: rotate(85deg) scale(1.15); }
  100% { opacity: 0; transform: translate(var(--sell-burst-x), var(--sell-burst-y)) rotate(190deg) scale(0.15); }
}

/* Daily Rewards: ported from the original game. */
.daily-rewards-launcher {
  position: fixed;
  top: calc(50% + 157px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 31;
  overflow: visible;
  pointer-events: none;
}

.icon-button.gift {
  z-index: 1;
  --button-stripe-color: rgba(0, 112, 48, 0.18);
  --button-glow-color: rgba(67, 255, 91, 0.58);
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.9) 0 8%, rgba(225, 255, 181, 0.36) 18%, transparent 32%),
    linear-gradient(145deg, #e4ff75 0%, #65ff4f 34%, #08db54 64%, #00662f 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.52), inset 0 -3px 0 rgba(0, 71, 32, 0.34), 0 6px 0 rgba(0, 0, 0, 0.38), 0 9px 20px rgba(0, 0, 0, 0.25), 0 0 15px rgba(65, 255, 91, 0.5);
  animation: gift-ui-glow 1.65s ease-in-out infinite;
}

.icon-button.gift::before {
  inset: 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 6px, var(--button-stripe-color) 6px 12px);
}

.icon-button .gift-icon-slot {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 68px;
  height: 56px;
  overflow: visible;
  transform: translateX(-50%);
}

.gift-icon-image {
  width: 52.25px;
  height: 52.25px;
  object-fit: contain;
  transform: translate(-1px, -2px);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.42));
}

.icon-button.gift strong {
  font-family: var(--font-heavy);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  transform: translate(0, 3px);
}
.icon-button.has-alert .menu-alert { display: block; animation: menu-alert-pulse 760ms ease-in-out infinite alternate; }

@keyframes gift-ui-glow {
  0%, 100% { box-shadow: inset 0 4px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,71,32,.34), 0 6px 0 rgba(0,0,0,.38), 0 9px 20px rgba(0,0,0,.25), 0 0 12px rgba(65,255,91,.42); }
  50% { box-shadow: inset 0 4px 0 rgba(255,255,255,.58), inset 0 -3px 0 rgba(0,71,32,.28), 0 6px 0 rgba(0,0,0,.38), 0 9px 20px rgba(0,0,0,.25), 0 0 19px rgba(75,255,99,.66); }
}

#dailyOverlay.modal-overlay { z-index: 104; background: rgba(18, 23, 63, 0.48); }

.daily-modal {
  position: relative;
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100vh - 28px);
  padding: clamp(48px, 6vw, 72px) clamp(16px, 2.6vw, 26px) clamp(16px, 2.6vw, 26px);
  border: 6px solid #120712;
  border-radius: 18px;
  background: radial-gradient(circle at 10% 18%, rgba(255,255,255,.8) 0 4px, transparent 5px) 0 0 / 34px 34px, linear-gradient(135deg, rgba(255,255,255,.5), transparent 35%), linear-gradient(140deg, #f4ffd0 0%, #d7ff9c 32%, #a6f7aa 66%, #73e9b2 100%);
  box-shadow: inset 0 7px 0 rgba(255,255,255,.62), inset 0 -10px 0 rgba(44,150,106,.15), 0 0 0 3px rgba(153,246,204,.76), 0 0 0 8px rgba(24,79,72,.28), 0 12px 0 rgba(0,0,0,.3), 0 18px 34px rgba(0,0,0,.28);
}

.daily-close {
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 16;
  width: 54px;
  height: 54px;
  border: 4px solid #180913;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff6e9f, #d42166);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-heavy);
  font-size: 34px;
  line-height: 1;
  text-shadow: var(--outline-2);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.34), 0 5px 0 rgba(0,0,0,.32);
}

.daily-modal .daily-title-box {
  position: absolute;
  top: -42px;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 12px 4px 6px;
  border: 4px solid #110810;
  border-radius: 12px;
  background: linear-gradient(180deg, #efff7a, #91ff38 52%, #20d86f);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: clamp(22px, 3.4vw, 35px);
  line-height: .95;
  white-space: nowrap;
  text-shadow: var(--outline-3);
  transform: translateX(-50%);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.42), 0 5px 0 rgba(0,0,0,.28);
}

.daily-calendar { display: grid; width: clamp(38px, 5vw, 50px); height: clamp(38px, 5vw, 50px); place-items: center; filter: drop-shadow(0 4px 0 rgba(0,0,0,.34)); }
.daily-calendar img { width: clamp(58px, 7.4vw, 78px); height: clamp(52px, 6.8vw, 72px); object-fit: contain; transform: translate(-15px, -11px); }

.daily-streak-box {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 40px;
  gap: 2px;
  padding: 0 3px 1px 7px;
  border: 3px solid #170912;
  border-radius: 12px;
  background: linear-gradient(180deg, #efff7a, #91ff38 52%, #20d86f);
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--outline-1);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.42), 0 4px 0 rgba(0,0,0,.28);
}

.daily-streak-box strong { min-width: 15px; margin-left: 2px; color: #fff; font-size: 22px; text-align: center; -webkit-text-stroke: 1px #18552f; paint-order: stroke fill; }
.daily-streak-box > img { width: 38px; height: 38px; margin-left: -2px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(28,6,16,.46)); }
.daily-streak-box.is-increasing strong { animation: daily-streak-number-pop 620ms cubic-bezier(.2,.9,.28,1.3); }
.daily-streak-sparkle { position: absolute; top: 50%; left: calc(100% - 53px); z-index: 5; width: 7px; height: 7px; border-radius: 2px; background: #fff67d; box-shadow: 0 0 7px #fff67d; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) rotate(45deg) scale(.2); animation: daily-streak-sparkle-burst 680ms ease-out forwards; }

@keyframes daily-streak-number-pop { 0% { transform: scale(1); } 42% { transform: translateY(-4px) rotate(-5deg) scale(1.48); } 72% { transform: translateY(1px) rotate(2deg) scale(.94); } 100% { transform: scale(1); } }
@keyframes daily-streak-sparkle-burst { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(.2); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--sparkle-x)), calc(-50% + var(--sparkle-y))) rotate(135deg) scale(1); } }

.daily-rewards-browser { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; column-gap: 8px; align-items: center; }
.daily-page-arrow { position: relative; z-index: 12; display: grid; width: 46px; height: 58px; padding: 0; place-items: center; border: 4px solid #12070f; border-radius: 14px; background: linear-gradient(180deg, #efff7a, #91ff38 52%, #20d86f); cursor: pointer; box-shadow: inset 0 5px 0 rgba(255,255,255,.46), 0 6px 0 rgba(0,0,0,.3); }
.daily-page-arrow.is-left { grid-column: 1; grid-row: 1; }
.daily-page-arrow.is-right { grid-column: 3; grid-row: 1; }
.daily-page-arrow[hidden] { display: none; }
.daily-page-arrow span::before { content: ""; display: block; width: 24px; height: 32px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M7 5L18 16L7 27' fill='none' stroke='%2312070f' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 5L18 16L7 27' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.daily-page-arrow.is-left span::before { transform: scaleX(-1); }
.daily-page-arrow:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.36), 0 2px 0 rgba(0,0,0,.3); }

.daily-reward-list { position: relative; z-index: 1; grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; padding: 38px 2px 8px; }
.daily-card-shell { position: relative; isolation: isolate; }
.daily-overlay-active .glowing-wrapper { z-index: 0; overflow: visible; }
.daily-overlay-active .daily-card-shell .glowing-wrapper,
.daily-overlay-active .daily-card-shell .glowing-container,
.daily-overlay-active .daily-card-shell .glowing-container--blur-wrapper,
.daily-overlay-active .daily-card-shell .glowing-border,
.daily-overlay-active .daily-card-shell .glowing-border::after { border-radius: 24px; }
.daily-overlay-active .daily-card-shell .glowing-container { opacity: 1; }
.daily-overlay-active .daily-card-shell .glowing-container--blur-wrapper { filter: blur(calc(var(--glowingWidth) / 2 * var(--glowingBlurRatio))) saturate(1.8) brightness(1.45); }
.daily-overlay-active .daily-card-shell .glowing-border::after { opacity: 1; }
.daily-card { position: relative; z-index: 2; display: grid; grid-template-rows: 82px 1fr minmax(42px,auto); row-gap: 7px; align-items: center; justify-items: center; min-height: 190px; padding: 34px 8px 8px; border: 4px solid #12070f; border-radius: 12px; background: linear-gradient(180deg,rgba(255,255,255,.32),transparent 32%), linear-gradient(180deg,var(--daily-card-top,#68ccff),var(--daily-card-bottom,#1495d4)); color: #fff; text-align: center; box-shadow: inset 0 5px 0 rgba(255,255,255,.28), 0 6px 0 rgba(0,0,0,.28); }
.daily-card-day-1 { --daily-card-top:#69efff; --daily-card-bottom:#168bdc; }
.daily-card-day-2 { --daily-card-top:#87ff70; --daily-card-bottom:#18bd68; }
.daily-card-day-3 { --daily-card-top:#fff66a; --daily-card-bottom:#ffab25; }
.daily-card-day-4 { --daily-card-top:#efff7a; --daily-card-bottom:#20d86f; }
.daily-card-day-5 { --daily-card-top:#ff8ee6; --daily-card-bottom:#7560ff; }
.daily-card.is-claimed { filter: grayscale(.18); opacity: .9; }
.daily-card.is-locked .daily-day, .daily-card.is-locked .daily-icon, .daily-card.is-locked strong, .daily-card.is-locked button:not([data-daily-countdown]) { filter: saturate(.82); }

.daily-day, .daily-card strong, .daily-card button { font-family: var(--font-heavy); text-shadow: var(--outline-2); }
.daily-day { position: absolute; top: -39px; left: 50%; z-index: 2; min-width: 92px; padding: 8px 12px 10px; border: 4px solid #12070f; border-radius: 9px; background: var(--daily-card-top,#68ccff); color: #fff; font-size: 21px; line-height: 1; white-space: nowrap; transform: translateX(-50%); box-shadow: inset 0 4px 0 rgba(255,255,255,.65), 0 4px 0 rgba(0,0,0,.26); }
.daily-duration { position: absolute; top: 11px; right: -6px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 6px; border: 3px solid #130712; border-radius: 999px; background: linear-gradient(180deg,#fffdf7,#ffd7ef); color: #fff; font-family: var(--font-heavy); font-size: 15px; line-height: 1; text-shadow: var(--outline-2); box-shadow: inset 0 3px 0 rgba(255,255,255,.72), 0 3px 0 rgba(0,0,0,.24); }
.daily-duration img { width: 18px; height: 18px; object-fit: contain; }
.daily-icon { position: relative; z-index: 1; display: grid; width: 104px; height: 82px; place-items: center; overflow: visible; }
.daily-icon img { position: relative; z-index: 3; width: auto; height: 62px; max-width: 104px; object-fit: contain; }
.daily-icon-coins img { height: 78px; max-width: 112px; filter: drop-shadow(0 3px 0 rgba(20,8,32,.38)) drop-shadow(0 0 7px rgba(255,224,72,.32)); }
.daily-icon-wins img, .daily-icon-trophyMultiplier img { filter: drop-shadow(0 -2px 0 #080408) drop-shadow(2px 0 0 #080408) drop-shadow(0 2px 0 #080408) drop-shadow(-2px 0 0 #080408); }
.daily-icon-speed img, .daily-icon-multiplier img { filter: drop-shadow(0 -1px 0 #080408) drop-shadow(1px 0 0 #080408) drop-shadow(0 1px 0 #080408) drop-shadow(-1px 0 0 #080408); }
.daily-icon-treadmill img, .daily-icon-treadmillSpeed img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.daily-icon-egg img { width: auto; height: 84px; max-width: 92px; filter: drop-shadow(0 3px 0 rgba(20,8,32,.42)) drop-shadow(0 0 8px rgba(255,255,255,.34)); }
.daily-icon-skin img { position: absolute; top: -38px; left: 50%; width: 150px; height: 172px; max-width: none; object-fit: contain; transform: translateX(-50%); }
.daily-icon-shopDiscount img { height: 74px; }
.daily-icon-sound img { height: 72px; }

.daily-card strong { position: relative; z-index: 2; display: grid; min-height: 52px; align-items: center; font-size: 21px; line-height: 1; white-space: nowrap; }
.daily-card strong.daily-reward-copy-wins, .daily-card strong.daily-reward-copy-trophyMultiplier, .daily-card strong.daily-reward-copy-treadmill { font-size: 18px; }
.daily-card strong.daily-reward-copy-shopDiscount { font-size: 15px; }
.daily-card strong.daily-reward-copy-egg, .daily-card strong.daily-reward-copy-treadmillSpeed { font-size: 15px; line-height: .96; white-space: normal; }
.daily-card strong.daily-reward-copy-treadmillSpeed small { display: block; font: inherit; font-size: .88em; }
.daily-card button { display: grid; width: 100%; min-height: 42px; padding: 4px 8px 7px; place-items: center; border: 3px solid #15080f; border-radius: 10px; background: linear-gradient(180deg,#fff86d,#ffb72f); color: #fff; cursor: pointer; font-size: 19px; line-height: .92; text-shadow: var(--outline-1); box-shadow: inset 0 4px 0 rgba(255,255,255,.42), 0 4px 0 rgba(0,0,0,.25); }
.daily-card button:disabled { cursor: default; filter: grayscale(.35); opacity: .76; }
.daily-card button[data-daily-countdown]:disabled { filter: saturate(1.08); opacity: .96; }
.daily-card button[data-daily-claimed]:disabled { background: linear-gradient(180deg,#2fa85a,#126a35); }
.daily-countdown-text { font-size: 22px; transform: translateY(2px); }
.daily-claimed-text, .daily-button-day-text { transform: translateY(2px); }

.daily-confetti-layer { position: fixed; inset: 0; z-index: 150; overflow: hidden; pointer-events: none; }
.daily-confetti { position: absolute; top: 50%; left: 50%; pointer-events: none; will-change: transform, opacity; }


@media (max-width: 860px), (max-height: 620px) {
  :where(html.has-touch-controls) .daily-modal { width: min(820px,calc(100vw - 18px)); padding: 42px 12px 10px; }
  :where(html.has-touch-controls) .daily-rewards-browser { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 4px; }
  :where(html.has-touch-controls) .daily-page-arrow { width: 34px; height: 48px; border-width: 3px; }
  :where(html.has-touch-controls) .daily-page-arrow span::before { width: 18px; height: 25px; }
  :where(html.has-touch-controls) .daily-reward-list { gap: 6px; padding-top: 32px; }
  :where(html.has-touch-controls) .daily-card { grid-template-rows: 58px 1fr 34px; min-height: 142px; padding: 26px 4px 5px; border-width: 3px; }
  :where(html.has-touch-controls) .daily-day { top: -31px; min-width: 64px; padding: 6px 6px 7px; border-width: 3px; font-size: 14px; }
  :where(html.has-touch-controls) .daily-icon { width: 70px; height: 58px; }
  :where(html.has-touch-controls) .daily-icon img { height: 44px; max-width: 72px; }
  :where(html.has-touch-controls) .daily-icon-coins img { height: 56px; max-width: 80px; }
  :where(html.has-touch-controls) .daily-icon-egg img { height: 58px; max-width: 64px; }
  :where(html.has-touch-controls) .daily-icon-skin img { top: -28px; width: 105px; height: 120px; }
  :where(html.has-touch-controls) .daily-card strong, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-wins, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-trophyMultiplier, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-treadmill { min-height: 35px; font-size: 12px; }
  :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-shopDiscount { font-size: 10px; }
  :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-egg, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-treadmillSpeed { font-size: 10px; }
  :where(html.has-touch-controls) .daily-card button { min-height: 31px; padding: 2px 3px 4px; border-width: 2px; font-size: 12px; }
  :where(html.has-touch-controls) .daily-countdown-text { font-size: 12px; }
  :where(html.has-touch-controls) .daily-duration { top: 5px; right: -4px; gap: 2px; padding: 3px 4px; border-width: 2px; font-size: 10px; }
  :where(html.has-touch-controls) .daily-duration img { width: 12px; height: 12px; }
}

:where(html.has-touch-controls) .daily-rewards-launcher { top: calc(50% + 115px); left: calc(env(safe-area-inset-left, 0px) + 10px); }

:where(html.has-touch-controls) .icon-button .gift-icon-slot { top: 0; width: 42px; height: 34px; }

:where(html.has-touch-controls) .gift-icon-image { width: 34.2px; height: 34.2px; transform: translate(-1px,-2px); }

:where(html.has-touch-controls) .icon-button.gift strong { font-size: 6px; transform: translate(0,2px); }

@media (max-width: 720px) {
  :where(html.has-touch-controls) .daily-rewards-launcher { top: calc(54% + 48px); }
}

@media (orientation: portrait) {
  :where(html.has-touch-controls) .daily-rewards-launcher { top: calc(54% + 104px); }
}

@media (max-width: 600px) and (orientation: portrait) {
  :where(html.has-touch-controls) #dailyOverlay.modal-overlay { overflow-y: auto; padding: 48px 8px 18px; place-items: start center; }
  :where(html.has-touch-controls) .daily-modal { width: min(390px,calc(100vw - 18px)); max-height: none; padding: 54px 12px 14px; }
  :where(html.has-touch-controls) .daily-streak-box { top: 10px; height: 30px; font-size: 12px; }
  :where(html.has-touch-controls) .daily-streak-box strong { font-size: 16px; }
  :where(html.has-touch-controls) .daily-streak-box > img { width: 28px; height: 28px; }
  :where(html.has-touch-controls) .daily-rewards-browser { grid-template-columns: 31px minmax(0,1fr) 31px; align-items: start; }
  :where(html.has-touch-controls) .daily-page-arrow { position: sticky; top: 44%; margin-top: 142px; }
  :where(html.has-touch-controls) .daily-reward-list { grid-template-columns: 1fr; gap: 45px; padding: 36px 12px 12px; }
  :where(html.has-touch-controls) .daily-card { grid-template-rows: 82px 1fr 42px; min-height: 190px; padding: 34px 8px 8px; }
  :where(html.has-touch-controls) .daily-day { top: -39px; min-width: 92px; padding: 8px 12px 10px; font-size: 21px; }
  :where(html.has-touch-controls) .daily-icon { width: 104px; height: 82px; }
  :where(html.has-touch-controls) .daily-icon img { height: 62px; max-width: 104px; }
  :where(html.has-touch-controls) .daily-icon-coins img { height: 78px; max-width: 112px; }
  :where(html.has-touch-controls) .daily-icon-egg img { height: 84px; max-width: 92px; }
  :where(html.has-touch-controls) .daily-icon-skin img { top: -38px; width: 150px; height: 172px; }
  :where(html.has-touch-controls) .daily-card strong, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-wins, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-trophyMultiplier, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-treadmill { min-height: 52px; font-size: 18px; }
  :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-egg, :where(html.has-touch-controls) .daily-card strong.daily-reward-copy-treadmillSpeed { min-height: 52px; font-size: 15px; }
  :where(html.has-touch-controls) .daily-card button { min-height: 42px; font-size: 19px; }
}

.reward-notifications {
  position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 18px) auto auto 50%;
  margin: 0; padding: 0; border: 0; width: max-content; max-width: calc(100vw - 24px);
  background: transparent; overflow: visible; transform: translateX(-50%);
  pointer-events: none; z-index: 1000;
  opacity: 1; translate: 0 0; transition: opacity 350ms ease, translate 350ms ease;
}
.reward-notifications.is-leaving { opacity: 0; translate: 0 -12px; }
.reward-notifications[data-presentation="chest"] {
  top: calc(env(safe-area-inset-top, 0px) + clamp(72px, 12vh, 110px));
}
.reward-notifications[data-presentation="album"] {
  top: calc(env(safe-area-inset-top, 0px) + 8px);
}
.reward-notifications:popover-open { display: flex; align-items: start; justify-content: center; gap: 10px; }
.reward-notifications::backdrop { background: transparent; pointer-events: none; }
.reward-notification-card {
  --reward-light: #fff7ac; --reward-color: #ffd52e; --reward-dark: #e39606; --reward-glow: #ffcf36;
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  box-sizing: border-box; min-width: 64px; height: 58px; padding: 3px 7px;
  border: 2px solid #493004; border-radius: 12px;
  background: radial-gradient(circle at 27% 18%, #ffffffb8 0 8%, #ffffff3d 18%, transparent 31%),
    linear-gradient(145deg, var(--reward-light), var(--reward-color) 52%, var(--reward-dark));
  box-shadow: inset 0 5px 0 #ffffff66, inset 0 -3px 0 #0000001f, 0 4px 0 #0006,
    0 0 0 1px color-mix(in srgb, var(--reward-glow) 45%, transparent), 0 0 8px color-mix(in srgb, var(--reward-glow) 25%, transparent);
  animation: reward-notification-pop 480ms cubic-bezier(.2, .8, .25, 1) both;
}
.reward-notification-speed { --reward-light: #c1faff; --reward-color: #40caff; --reward-dark: #2277df; --reward-glow: #3de3ff; border-color: #09315d; }
.reward-notification-card::before {
  content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 9px; border: 1px solid #ffffff66;
  background: linear-gradient(180deg, #ffffff40, transparent 48%),
    repeating-linear-gradient(45deg, transparent 0 9px, #ffffff26 9px 11px),
    repeating-linear-gradient(-45deg, transparent 0 9px, #00000012 9px 11px);
}
.reward-notification-card strong {
  position: relative; z-index: 1; font: 1000 16px/1.1 var(--font-heavy); white-space: nowrap;
  color: #fff; -webkit-text-stroke: 3px #201606; paint-order: stroke fill; text-shadow: 0 2px 0 #0005;
}
.reward-notification-card img { display: block; width: 28px; height: 28px; margin-top: 2px; object-fit: contain; filter: drop-shadow(0 3px 2px #0004); animation: reward-icon-float 1800ms ease-in-out 480ms infinite; }
.reward-notification-speed strong { -webkit-text-stroke-color: #08284c; }
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) .reward-notification-card {
  flex-direction: row; justify-content: center; gap: 9px;
  min-width: 132px; height: 62px; padding: 8px 14px 8px 10px;
  border: 3px solid #402908; border-radius: 17px;
  background: linear-gradient(180deg, #fff3a0 0%, #ffdc49 48%, #ffb927 100%);
  box-shadow: inset 0 3px 0 #fff9, inset 0 -4px 0 #c17b2438, 0 4px 0 #402908, 0 7px 12px #0003;
}
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) .reward-notification-speed {
  border-color: #133757;
  background: linear-gradient(180deg, #bbf8ff 0%, #64dcff 48%, #36aef3 100%);
  box-shadow: inset 0 3px 0 #fffa, inset 0 -4px 0 #1669a238, 0 4px 0 #133757, 0 7px 12px #0003;
}
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) .reward-notification-card::before {
  inset: 5px 6px auto; height: 42%; border: 0; border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, #fff5, #fff0);
}
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) strong {
  font-size: clamp(20px, 3.5vw, 26px); line-height: 1.15;
  -webkit-text-stroke-width: 3px; text-shadow: 0 2px 0 #0003;
}
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) img {
  order: -1; flex-shrink: 0; width: 40px; height: 40px; margin: 0;
  filter: drop-shadow(0 2px 0 #0003); animation: none;
}
@keyframes reward-notification-pop {
  0% { opacity: 0; transform: translateY(-16px) scale(.82) rotate(-3deg); }
  70% { opacity: 1; transform: translateY(2px) scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes reward-icon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}
@media (max-width: 560px) {
  .reward-notifications { top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .reward-notifications:popover-open { gap: 8px; }
  .reward-notification-card { min-width: 58px; height: 52px; padding: 3px 6px; border-radius: 11px; }
  .reward-notification-card strong { font-size: 14px; }
  .reward-notification-card img { width: 24px; height: 24px; }
  .reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) .reward-notification-card {
    min-width: 112px; height: 54px; padding: 6px 10px 6px 7px; gap: 6px; border-radius: 14px;
  }
  .reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) img { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-notifications { transition: none; }
  .reward-notification-card, .reward-notification-card img { animation: none; }
}

.biome-stage-box[data-biome="ocean"] { background: linear-gradient(#93eaf2, #448bd1); color: #fff; }
.biome-stage-box[data-biome="swamp"] { background: linear-gradient(#aaca91, #537c65); color: #fff; }
.biome-stage-box[data-biome="crystal-caverns"] { background: linear-gradient(#cdb6ee, #7566b8); color: #fff; }
.biome-stage-box[data-biome="candy-land"] { background: linear-gradient(#ffd1e5, #e87fb0); color: #fff; }
.forest-entrance-popup[data-biome="swamp"] { color: #d7efad; -webkit-text-stroke-color: #406451; }
.forest-entrance-popup[data-biome="crystal-caverns"] { color: #dfcaff; -webkit-text-stroke-color: #685394; }
.forest-entrance-popup[data-biome="candy-land"] { color: #ffe0ef; -webkit-text-stroke-color: #b64b8c; }
.forest-entrance-popup[data-biome="ocean"] { color: #8ff2ff; -webkit-text-stroke-color: #175980; }
.forest-entrance-popup[data-biome="lava"] {
  color: #ffd18a;
  -webkit-text-stroke-color: #a84725;
  text-shadow: 0 2px 0 #652510, 0 0 3px #ff8b4529;
}
.forest-entrance-popup[data-biome="sky-kingdom"] {
  color: #e0f6ff;
  -webkit-text-stroke-color: #547ac1;
  text-shadow: 0 2px 0 #294779, 0 0 3px #c5edff29;
}
.forest-entrance-popup[data-biome="mystic-realm"] {
  color: #eed5ff;
  -webkit-text-stroke-color: #7651bc;
  text-shadow: 0 2px 0 #40256c, 0 0 3px #dfadff29;
}

/* Rare labels retain a dark outline around their luminous gradient fill. */
.pet-world-rarity > span {
  background-image:var(--rarity-gradient,linear-gradient(var(--pet-rarity-color),var(--pet-rarity-color)));
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.7px var(--collection-rarity-outline,var(--pet-rarity-outline,#201036));paint-order:stroke fill;
}
/* Paint the entire outline behind the gradient fill so shadows cannot bleed
   through transparent text or overlap the next glyph's face. */
.gameplay-menu-overlay .animal-row .collection-row-copy .animal-gradient-name {
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.animal-gradient-name > .animal-name-outline {
  position: absolute; top: 0; left: 3px; pointer-events: none;
  color: var(--animal-name-outline); -webkit-text-fill-color: var(--animal-name-outline);
  -webkit-text-stroke: .7px var(--collection-rarity-outline);
  text-shadow:
    -1px -1px 0 var(--animal-name-outline), 0 -1px 0 var(--animal-name-outline), 1px -1px 0 var(--animal-name-outline),
    -1px 0 0 var(--animal-name-outline), 1px 0 0 var(--animal-name-outline),
    -1px 1px 0 var(--animal-name-outline), 0 1px 0 var(--animal-name-outline), 1px 1px 0 var(--animal-name-outline);
}
.animal-gradient-name > .animal-name-fill {
  position: relative;
  background-image: var(--rarity-gradient);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0; text-shadow: none;
}
.escape-egg-alert {border-color:#fff0b2;background:repeating-linear-gradient(135deg,#ffbd3226 0 12px,transparent 12px 25px),linear-gradient(#fc4747,#ad0827);}
.escape-egg-alert.is-visible {animation:escape-heartbeat 1.3s ease-in-out infinite;}
body.is-escaping::after {content:'';position:fixed;inset:0;z-index:29;pointer-events:none;box-shadow:inset 0 0 80px 16px #f51c444a;animation:escape-edge-heartbeat 1.3s ease-in-out infinite;}
@keyframes escape-heartbeat {0%,38%,100%{transform:translate(-50%,0) scale(1)}12%,27%{transform:translate(-50%,0) scale(1.06)}19%{transform:translate(-50%,0) scale(1.01)}}
@keyframes escape-edge-heartbeat {0%,38%,100%{opacity:.35}12%,27%{opacity:.9}19%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.escape-egg-alert.is-visible,body.is-escaping::after{animation:none}}

/* Separate paint layers keep the black outline behind every gradient glyph. */
.cycle-announcement .rarity-gradient-text {
  display: inline-grid;
  max-width: 100%;
  vertical-align: baseline;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.rarity-gradient-text > span {
  grid-area: 1 / 1;
  padding: .15em .1em;
  margin: -.15em -.1em;
}
.rarity-gradient-text > .rarity-text-outline {
  color: #09070b;
  -webkit-text-fill-color: #09070b;
  -webkit-text-stroke: 1.5px #09070b;
  text-shadow:
    -1.5px -1.5px 0 #09070b, 0 -1.5px 0 #09070b, 1.5px -1.5px 0 #09070b,
    -1.5px 0 0 #09070b, 1.5px 0 0 #09070b,
    -1.5px 1.5px 0 #09070b, 0 1.5px 0 #09070b, 1.5px 1.5px 0 #09070b;
}
.rarity-gradient-text > .rarity-text-fill {
  position: relative;
  background: var(--rarity-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* First-visit guidance uses the existing world, prompts, and escape sequence. */
.first-time-tutorial {
  position: fixed; z-index: 34; top: clamp(96px, 14vh, 120px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 18px; text-align: center; pointer-events: none;
  border: 1px solid #c5edff99; border-radius: 14px;
  background: linear-gradient(135deg, #249cff99, #125ab9aa);
  box-shadow: inset 0 1px 0 #ffffff44, 0 3px 9px #08284f33;
  color: white; font-family: GameHeavy, Arial, sans-serif; line-height: 1.2;
}
.first-time-tutorial[hidden] { display: none; }
.first-time-tutorial strong {
  display: block; width: 100%; margin: 0; text-align: center;
  font: 900 clamp(18px, 2.4vw, 28px)/1.2 GameHeavy, Arial, sans-serif;
  -webkit-text-stroke: 3px #092540; paint-order: stroke fill;
}
.first-time-tutorial small {
  display: block; margin-top: 4px; font: 900 clamp(12px, 1.3vw, 15px)/1.2 GameHeavy, Arial, sans-serif;
  -webkit-text-stroke: 2px #092540; paint-order: stroke fill;
}
.first-time-tutorial small:empty { display: none; }
.first-time-tutorial.is-tutorial-complete {
  max-width: calc(100vw - 32px);
}
.reward-notifications .reward-notification-egg,
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) .reward-notification-egg {
  scale: 0.8;
  transform-origin: top center;
  --reward-light: color-mix(in srgb, var(--egg-color) 45%, white);
  --reward-color: var(--egg-color);
  --reward-dark: color-mix(in srgb, var(--egg-color) 75%, black);
  --reward-glow: var(--egg-color);
  border-color: color-mix(in srgb, var(--egg-color) 35%, #142334);
  background: linear-gradient(180deg, var(--reward-light), var(--reward-color) 48%, var(--reward-dark));
  box-shadow: inset 0 3px 0 #fff9, inset 0 -4px 0 #0002, 0 4px 0 color-mix(in srgb, var(--egg-color) 35%, #142334), 0 0 16px color-mix(in srgb, var(--egg-color) 75%, transparent), 0 0 30px color-mix(in srgb, var(--egg-color) 40%, transparent);
}
.reward-notifications:is([data-presentation="album"], [data-presentation="chest"]) .reward-notification-egg img {order:1;scale:1.5;}
.first-time-tutorial.is-tutorial-complete strong {
  position: relative; padding-right: clamp(32px, 5vw + 8px, 64px);
  font-size: clamp(9px, 2.2vw, 28px);
}
.first-time-tutorial.is-tutorial-complete strong > span {
  min-width: 0; font: inherit; white-space: normal; overflow-wrap: anywhere;
}
.tutorial-celebration-icon {
  position: absolute; right: 0; top: 50%; transform: translateY(calc(-50% - 5px));
  width: clamp(24px, 5vw, 56px); height: clamp(24px, 5vw, 56px); object-fit: contain;
}
.tutorial-pulse-target {
  outline: 3px solid #fff; outline-offset: 5px;
  animation: tutorial-button-pulse 1.05s ease-in-out infinite;
}
.tutorial-pen-hand {
  position: fixed; z-index: 34; width: 66px; height: 74px;
  background: url('../assets/icons/gameplay-ai/tutorial-pointing-hand-back-ai.webp') center / contain no-repeat;
  pointer-events: none; animation: tutorial-hand-tap 1.05s ease-in-out infinite;
}
.tutorial-pen-hand[hidden] { display: none; }
@keyframes tutorial-button-pulse {
  0%,100% { outline-color: #fff; box-shadow: 0 0 0 4px #ffdf4055, 0 0 18px #fff9; }
  50% { outline-color: #ffe645; box-shadow: 0 0 0 8px #ffdf4011, 0 0 28px #ffe645aa; }
}
@keyframes tutorial-hand-tap {
  0%,100% { transform: translate(-35%,-7%) translate(3px,6px); }
  50% { transform: translate(-35%,-7%); }
}
@media (max-width: 600px) {
  .first-time-tutorial { top: 98px; padding: 7px 14px; }
  .first-time-tutorial strong { -webkit-text-stroke-width: 3px; }
  .tutorial-pen-hand { width: 49px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-pulse-target, .tutorial-pen-hand { animation: none; }
  .tutorial-pen-hand { transform: translate(-35%,-7%); }
}

.daily-skip-test {
  display: block;
  margin: 14px auto 0;
  padding: 8px 16px;
  border: 2px solid #341333;
  border-radius: 10px;
  background: linear-gradient(#ff92db, #ed42b0);
  color: #fff;
  font: 16px var(--font-heavy);
  text-shadow: 0 2px #341333;
  cursor: pointer;
}
.daily-skip-test[hidden] { display: none; }
.daily-skip-test:disabled { opacity: .5; cursor: default; }
.daily-skip-test:enabled:hover { filter: brightness(1.12); }

.slime-trap-count {position:absolute;right:3px;bottom:2px;color:white;font:18px GameHeavy,Arial;-webkit-text-stroke:3px #172800;paint-order:stroke fill;pointer-events:none;}

/* Pull in the heavy font’s wide punctuation bearing on the placement notice. */
#slimePlacedPopup .slime-placed-punctuation {
  margin-left: -0.12em;
}

/* Playtest feedback: clear progress, persistent reward cues and pen actions. */
/* Reuse the illustrated biome badges above the hotbar. */
.biome-stage-box[data-biome] {
  height: 44px;
  bottom: max(67px, calc(env(safe-area-inset-bottom) + 67px));
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
  background-origin: border-box;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
}
.biome-stage-box[data-biome="savanna"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-speed-savanna-bottom-ai.webp');
}
.biome-stage-box[data-biome="lobby"] {
  /* Keep the decorated ends proportional; stretch only the empty center. */
  height: 40px;
  /* Center the thinner Lobby artwork on the other biome bars. */
  bottom: max(69px, calc(env(safe-area-inset-bottom) + 69px));
  background-image: none;
  border-image-source: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-bar-lobby-v2-ai.webp');
  /* 224 / 1280: retain the original end caps at any image resolution. */
  border-image-slice: 0 17.5% fill;
  border-image-width: 0 51.2px;
  border-image-repeat: stretch;
}
.biome-stage-box[data-biome="forest"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-bar-forest-v6-ai.webp');
}
:where(html.has-touch-controls) .biome-stage-box[data-biome] {
  height: 36px;
  bottom: max(46px, calc(env(safe-area-inset-bottom) + 46px));
}
:where(html.has-touch-controls) .biome-stage-box[data-biome="lobby"] {
  height: 34px;
  bottom: max(47px, calc(env(safe-area-inset-bottom) + 47px));
  border-image-width: 0 43.52px;
}
.biome-stage-box[data-biome="beach"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-speed-beach-ai.webp');
  --goal-outline: #14535d;
}
.biome-stage-box[data-biome="ocean"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-bar-ocean-v2-ai.webp');
  --goal-outline: #102e62;
}
.biome-stage-box[data-biome="swamp"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-bar-swamp-v2-ai.webp');
  --goal-outline: #193a26;
}
.biome-stage-box[data-biome="crystal-caverns"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-bar-crystal-caverns-v2-ai.webp');
  --goal-outline: #39205e;
}
.biome-stage-box[data-biome="candy-land"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-speed-candy-land-ai.webp');
  --goal-outline: #721b49;
}
.biome-stage-box[data-biome="lava"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-speed-lava-ai.webp');
  --goal-outline: #5a190f;
}
.biome-stage-box[data-biome="sky-kingdom"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-speed-sky-kingdom-ai.webp');
  --goal-outline: #214778;
}
.biome-stage-box[data-biome="mystic-realm"] {
  background-image: url('../assets/icons/gameplay-ai/biome-bars-ui/biome-bar-mystic-realm-v2-ai.webp');
  --goal-outline: #251648;
}
#penEquipBestButton {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: 82px; z-index: 25;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 124px; height: 36px; padding: 5px 9px;
  border: 2px solid #244332; border-radius: 9px;
  background: linear-gradient(#b7ef88, #68c76e);
  box-shadow: inset 0 1px 0 #e4ffd0, 0 2px 0 #244332;
  color: #fff; font: 14px/1 var(--font-heavy); white-space: nowrap;
  text-shadow: -1px 0 #244332, 1px 0 #244332, 0 -1px #244332, 0 1px #244332;
  cursor: pointer;
}
#penEquipBestButton img { width: 17px; height: 17px; object-fit: contain; flex: none; }
#penEquipBestButton:hover, #equipBestButton:hover { filter: brightness(1.15); translate: 0 -2px; }
#penEquipBestButton, #equipBestButton { transition: filter .15s ease, translate .15s ease; }
#penEquipBestButton:active { translate: 0 1px; box-shadow: inset 0 1px 0 #e4ffd0; }
#penEquipBestButton:focus-visible { outline: 2px solid white; outline-offset: 3px; }
html.has-touch-controls #penEquipBestButton { min-height: 44px; }
@media (max-width: 700px) {
  #penEquipBestButton { bottom: 82px; }
}

/* Feedback is a separate settings screen, sharing the close button. */
.settings-modal.is-feedback {padding:20px 18px 14px}
.feedback-panel {position:relative;z-index:1}
.feedback-panel .settings-title-box {margin-bottom:12px;padding-inline:14px}
.feedback-back {position:absolute;top:0;left:0;z-index:3;padding:6px 10px;border:3px solid #102a30;border-radius:12px;background:linear-gradient(#6ff7ff,#438eea);color:white;font:16px var(--font-heavy);text-shadow:var(--outline-1);box-shadow:inset 0 3px 0 #ffffff60,0 4px 0 #0004;cursor:pointer}
.feedback-intro {margin:0 0 12px;font-size:16px;text-shadow:var(--outline-1)}
.feedback-form {display:grid;gap:8px;text-align:left}
.feedback-form label {font-size:18px;text-shadow:var(--outline-1)}
.feedback-form textarea {box-sizing:border-box;width:100%;height:125px;min-height:90px;resize:none;padding:12px;border:4px solid #102a30;border-radius:15px;background:linear-gradient(#f4fffc,#d8fff4);color:#164744;font:700 17px/1.35 Arial,sans-serif;text-shadow:none;box-shadow:inset 0 4px 0 #15666818,0 5px 0 #0003}
.feedback-form textarea:focus {outline:none;border-color:#37ddff;box-shadow:0 0 0 4px #37ddff44,0 5px 0 #0003}
.feedback-meta {text-align:right;font:800 12px Arial,sans-serif;text-shadow:0 1px 2px #391045aa}
.feedback-send {justify-self:center;margin-top:8px;min-width:190px;padding:10px 16px;border:4px solid #102a30;border-radius:15px;background:linear-gradient(#8aff92,#37d76c 58%,#20a954);color:white;font:22px var(--font-heavy);text-shadow:var(--outline-2);box-shadow:inset 0 4px 0 #ffffff66,0 6px 0 #0004;cursor:pointer}
.feedback-send:disabled {opacity:.65;cursor:wait}
.feedback-status {min-height:20px;margin:0;text-align:center;font-size:14px;text-shadow:var(--outline-1)}
@media(max-width:500px){.feedback-panel .settings-title-box {font-size:25px;min-height:46px;margin-top:36px}.feedback-panel .settings-title-box img {width:32px;height:32px}.feedback-intro {font-size:14px}}
@media(max-height:500px){.settings-modal.is-feedback {max-height:calc(100dvh - 16px);padding:12px 16px}.feedback-panel .settings-title-box {min-height:38px;margin-top:0;margin-bottom:5px;font-size:24px}.feedback-panel .settings-title-box img {width:30px;height:30px}.feedback-intro {margin-bottom:6px;font-size:13px}.feedback-form {gap:4px}.feedback-form textarea {height:80px;min-height:70px}.feedback-send {padding:5px 14px;margin-top:0;font-size:19px}.feedback-status {font-size:12px;min-height:16px}}