:root {
  --ink: #282238;
  --muted: #766f83;
  --cream: #fffaf0;
  --yellow: #ffcf3f;
  --orange: #ff8a3d;
  --pink: #ff70a6;
  --purple: #8c63ff;
  --blue: #4ecdc4;
  --green: #72d572;
  --red: #ef476f;
  --white: #fff;
  --shadow: 0 18px 0 rgba(49, 38, 67, .08), 0 22px 48px rgba(49, 38, 67, .15);
  --border: 3px solid var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: #ffed9f; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .8) 0 4px, transparent 5px),
    radial-gradient(circle at 87% 16%, rgba(255, 255, 255, .7) 0 7px, transparent 8px),
    linear-gradient(145deg, #fff5b8 0%, #ffd66d 45%, #ffa877 100%);
  background-size: 80px 80px, 110px 110px, auto;
}

button, input, select { font: inherit; }
button { color: inherit; }

button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 4px solid rgba(78, 205, 196, .6);
  outline-offset: 3px;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 520px);
  align-items: center;
  gap: clamp(30px, 6vw, 100px);
  max-width: 1320px;
  margin: auto;
  padding: clamp(24px, 5vw, 70px);
}

.logo {
  letter-spacing: -.08em;
  line-height: .85;
  color: var(--ink);
  text-shadow: 0 8px 0 var(--white), 0 12px 0 var(--pink);
  transform: rotate(-2deg);
}

.logo-giant { font-size: clamp(58px, 9vw, 130px); }

.egg-scene {
  position: relative;
  min-height: 420px;
  margin-top: 22px;
  overflow: hidden;
  border: var(--border);
  border-radius: 42% 42% 32px 32px;
  background: linear-gradient(#7ce7ff 0 66%, #8be27d 66%);
  box-shadow: var(--shadow);
}

.sun {
  position: absolute;
  width: 108px;
  height: 108px;
  top: 34px;
  right: 50px;
  border: var(--border);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 14px rgba(255, 207, 63, .3);
}

.grass {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  opacity: .6;
  background: repeating-linear-gradient(105deg, transparent 0 23px, #42bd6b 24px 30px, transparent 31px 48px);
}

.egg {
  position: relative;
  border: var(--border);
  overflow: hidden;
  background: linear-gradient(150deg, #fff 0 55%, #f4e7ff 56%);
}

.egg-large {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 42px;
  width: 210px;
  height: 270px;
  border-radius: 52% 52% 46% 46% / 62% 62% 38% 38%;
  transform: translateX(-50%) rotate(3deg);
  box-shadow: 12px 15px 0 rgba(40, 34, 56, .16);
  animation: egg-wiggle 3.4s ease-in-out infinite;
}

.egg span { position: absolute; border: 3px solid var(--ink); border-radius: 50%; }
.egg span:nth-child(1) { width: 58px; height: 58px; left: 28px; top: 74px; background: var(--pink); }
.egg span:nth-child(2) { width: 42px; height: 42px; right: 26px; top: 120px; background: var(--yellow); }
.egg span:nth-child(3) { width: 30px; height: 30px; left: 72px; bottom: 25px; background: var(--blue); }

@keyframes egg-wiggle {
  0%, 84%, 100% { transform: translateX(-50%) rotate(3deg); }
  88% { transform: translateX(-50%) rotate(-5deg); }
  92% { transform: translateX(-50%) rotate(7deg); }
  96% { transform: translateX(-50%) rotate(0); }
}

.auth-card {
  padding: clamp(22px, 4vw, 42px);
  border: var(--border);
  border-radius: 32px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 26px;
  padding: 6px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #eee9f7;
}

.auth-tab {
  min-height: 48px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.auth-tab.active { color: white; background: var(--purple); box-shadow: 0 4px 0 #6040bd; }

.auth-form { display: grid; gap: 18px; }
.auth-form label { display: grid; gap: 7px; font-size: 14px; }
.auth-field { display: grid; gap: 7px; }
.password-control { position: relative; }
.password-control input { padding-right: 52px; }
.password-visibility {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #60758a;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.password-visibility:hover { color: #167b8b; background: rgba(37, 143, 201, .08); }
.password-visibility:focus-visible { outline: 2px solid #1ca58d; outline-offset: 1px; }
.password-visibility svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.password-visibility-slash { display: none; }
.password-visibility.visible .password-visibility-slash { display: block; }

input, select {
  width: 100%;
  min-height: 52px;
  padding: 12px 15px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  color: var(--ink);
  background: var(--cream);
}

.button {
  min-height: 46px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: white;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.button:disabled { opacity: .5; cursor: wait; transform: none; }
.button-big { min-height: 58px; margin-top: 4px; }
.button-primary { color: white; background: var(--purple); }
.button-yellow { background: var(--yellow); }
.button-pink { color: white; background: var(--pink); }
.button-blue { background: var(--blue); }
.button-quiet { box-shadow: none; border-color: #c9c2d3; }
.button-danger { color: white; background: var(--red); }

.app-shell { min-height: 100vh; padding-bottom: 110px; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 10px max(18px, calc((100vw - 1180px) / 2));
  border-bottom: var(--border);
  background: rgba(255, 250, 240, .9);
  backdrop-filter: blur(14px);
}

.logo-button {
  padding: 0;
  border: 0;
  font-size: clamp(27px, 4vw, 39px);
  font-weight: 1000;
  letter-spacing: -.08em;
  background: transparent;
  text-shadow: 0 4px 0 var(--pink);
  cursor: pointer;
}

.account-pills { display: flex; align-items: center; gap: 10px; }
.mini-pill, .avatar-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  background: white;
  cursor: pointer;
}
.mini-pill { gap: 8px; padding: 0 14px; border-radius: 24px; }
.mini-pill span { font-size: 23px; color: var(--pink); }
.avatar-pill { border-radius: 50%; background: var(--yellow); }

.account-menu {
  position: fixed;
  z-index: 50;
  top: 68px;
  right: max(18px, calc((100vw - 1180px) / 2));
  display: grid;
  width: min(280px, calc(100vw - 36px));
  gap: 4px;
  padding: 18px;
  border: var(--border);
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow);
}
.account-menu small { color: var(--muted); overflow-wrap: anywhere; }
.account-menu button { margin-top: 12px; padding: 10px; border: 0; border-radius: 10px; color: white; background: var(--ink); cursor: pointer; }

.main-nav {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 6px;
  padding: 7px;
  border: var(--border);
  border-radius: 24px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 30px rgba(40, 34, 56, .2);
  transform: translateX(-50%);
}

.nav-button {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 8px 15px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
.nav-button span { color: var(--pink); }
.nav-button.active { color: white; background: var(--ink); }
.nav-button.active span { color: var(--yellow); }

.view { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding-top: 28px; }

.shelf-wrap {
  display: flex;
  gap: 12px;
  min-height: 116px;
  padding: 12px;
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  scrollbar-width: thin;
}

.shelf-pet {
  flex: 0 0 88px;
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
.shelf-pet.active { border-color: var(--ink); background: var(--yellow); box-shadow: 0 4px 0 var(--ink); }
.shelf-pet small { display: block; width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.habitat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
  gap: 22px;
  margin-top: 22px;
}

.habitat {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  overflow: hidden;
  border: var(--border);
  border-radius: 30px;
  background: linear-gradient(#8de9ff 0 68%, #88dc80 68% 77%, #67c864 77%);
  box-shadow: var(--shadow);
}

.habitat::before, .habitat::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 42px;
  top: 58px;
  left: 10%;
  border-radius: 50px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 46px -18px 0 8px rgba(255, 255, 255, .85);
}
.habitat::after { top: 125px; left: auto; right: 6%; transform: scale(.65); }

.pet-nameplate {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: white;
}
.pet-nameplate button { padding: 0; border: 0; color: var(--purple); background: none; cursor: pointer; }

.rarity-tag {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
  background: var(--yellow);
}
.rarity-tag.rare { color: white; background: var(--purple); }
.rarity-tag.ultra, .rarity-tag.mythic { color: white; background: linear-gradient(120deg, var(--pink), var(--purple), var(--blue)); }

.blob-wrap { position: relative; z-index: 3; margin-top: 70px; filter: drop-shadow(12px 18px 0 rgba(40, 34, 56, .14)); }
.blob {
  --body: hsl(320 80% 67%);
  --accent: hsl(45 95% 61%);
  --eyes: hsl(250 35% 25%);
  position: relative;
  width: 220px;
  height: 200px;
  border: 4px solid var(--ink);
  border-radius: 48% 52% 45% 55% / 53% 46% 54% 47%;
  background: var(--body);
  animation: blob-breathe 2.8s ease-in-out infinite;
}

.blob.shape-1 { border-radius: 58% 42% 51% 49% / 44% 56% 44% 56%; }
.blob.shape-2 { border-radius: 42% 58% 38% 62% / 58% 47% 53% 42%; }
.blob.shape-3 { border-radius: 50% 50% 60% 40% / 42% 58% 45% 55%; }
.blob.shape-4 { border-radius: 57% 43% 44% 56% / 55% 41% 59% 45%; }

.blob-eye {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 38px;
  top: 74px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: white;
}
.blob-eye::after { content: ""; position: absolute; width: 12px; height: 17px; left: 8px; top: 10px; border-radius: 50%; background: var(--eyes); }
.blob-eye.left { left: 58px; }
.blob-eye.right { right: 58px; }
.blob-mouth { position: absolute; z-index: 3; width: 34px; height: 18px; left: 50%; top: 128px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 30px 30px; transform: translateX(-50%); }
.face-1 .blob-mouth { height: 10px; border-right: 0; border-bottom: 3px solid var(--ink); border-radius: 50%; }
.face-2 .blob-mouth { width: 19px; height: 19px; border-top: 3px solid var(--ink); border-radius: 50%; background: #8f315f; }
.face-3 .blob-mouth { width: 42px; height: 4px; border: 0; border-top: 3px solid var(--ink); border-radius: 50%; }
.blob-cheek { position: absolute; z-index: 2; width: 34px; height: 17px; top: 120px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 70%, white); opacity: .75; }
.blob-cheek.left { left: 19px; }.blob-cheek.right { right: 19px; }
.spot { position: absolute; z-index: 1; width: 24px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); transform: rotate(var(--tilt)); }
.spot:nth-of-type(1) { left: 25px; top: 30px; }.spot:nth-of-type(2) { right: 25px; top: 35px; }.spot:nth-of-type(3) { left: 95px; top: 18px; }
.spot:nth-of-type(4) { left: 28px; bottom: 22px; }.spot:nth-of-type(5) { right: 32px; bottom: 27px; }.spot:nth-of-type(6) { left: 104px; bottom: 16px; }

.blob.small { width: 58px; height: 52px; border-width: 2px; animation: none; filter: none; }
.blob.small .blob-eye { width: 8px; height: 11px; top: 18px; border-width: 1px; }
.blob.small .blob-eye::after { width: 4px; height: 5px; left: 1px; top: 3px; }
.blob.small .blob-eye.left { left: 15px; }.blob.small .blob-eye.right { right: 15px; }
.blob.small .blob-mouth { width: 10px; height: 5px; top: 35px; border-width: 1px; }
.blob.small .blob-cheek, .blob.small .spot { display: none; }

@keyframes blob-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.025, .98); }
}

.care-panel { display: grid; align-content: start; gap: 14px; }
.panel-card { padding: 20px; border: var(--border); border-radius: 23px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 0 rgba(40, 34, 56, .1); }
.meters { display: grid; gap: 13px; }
.meter-row { display: grid; grid-template-columns: 25px 1fr 38px; align-items: center; gap: 8px; }
.meter-icon { text-align: center; }
.meter-track { height: 17px; overflow: hidden; border: 2px solid var(--ink); border-radius: 12px; background: #e8e1ed; }
.meter-fill { height: 100%; width: var(--value); border-radius: 8px; background: var(--green); transition: width .3s ease; }
.meter-fill.medium { background: var(--yellow); }.meter-fill.low { background: var(--red); }
.meter-value { text-align: right; font-size: 12px; }
.care-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }
.care-button { display: grid; place-items: center; gap: 4px; min-height: 68px; padding: 8px 4px; border: 2px solid var(--ink); border-radius: 14px; background: white; box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.care-button span { font-size: 23px; }.care-button small { font-weight: 800; }
.care-button:hover { background: var(--yellow); }

.pet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pet-code { display: grid; gap: 4px; margin-top: 14px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.pet-code code { padding: 8px; border-radius: 8px; background: #f1edf6; font-size: 10px; }
.traits-details { margin-top: 14px; }
.traits-details summary { cursor: pointer; }
.trait-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.trait { padding: 8px; border-radius: 10px; background: #f5f0fa; font-size: 11px; }
.trait b { float: right; color: var(--purple); }

.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.section-heading h1 { margin: 0; font-size: clamp(34px, 6vw, 58px); letter-spacing: -.07em; }
.info-chip { margin-bottom: 20px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 16px; background: var(--yellow); }
.card-grid, .shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.item-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 260px;
  padding: 20px;
  border: var(--border);
  border-radius: 24px;
  background: white;
  box-shadow: 0 9px 0 rgba(40, 34, 56, .12);
}
.item-card h2, .item-card p { margin: 0; }
.item-card p { color: var(--muted); font-weight: 600; line-height: 1.45; }
.item-card .button { margin-top: auto; }
.item-price { font-size: 22px; }
.item-art { display: grid; place-items: center; min-height: 120px; border: 2px solid var(--ink); border-radius: 18px; background: #fff3b4; }
.item-art.pink { background: #ffd0e2; }.item-art.blue { background: #bdf5ee; }
.envelope-art { position: relative; width: 120px; height: 78px; border: 3px solid var(--ink); border-radius: 9px; background: white; transform: rotate(-4deg); }
.envelope-art::before, .envelope-art::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 50% 55%, 100% 0); background: var(--pink); border-radius: 5px; }
.envelope-art::after { clip-path: polygon(0 100%, 50% 48%, 100% 100%); background: var(--yellow); }
.nanny-art { font-size: 70px; filter: drop-shadow(4px 5px 0 rgba(40,34,56,.15)); }
.egg-mini { width: 76px; height: 98px; border: 3px solid var(--ink); border-radius: 52% 52% 46% 46% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 35%, var(--pink) 0 10px, transparent 11px), radial-gradient(circle at 66% 67%, var(--blue) 0 8px, transparent 9px), white; }
.active-ribbon { position: absolute; top: 14px; right: -7px; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 10px 0 0 10px; color: white; background: var(--green); }

.cabinet-card { grid-template-columns: 100px 1fr; min-height: 190px; }
.cabinet-slot { display: grid; place-items: center; min-height: 130px; border: 3px inset #b4824d; border-radius: 12px; background: linear-gradient(135deg, #8d5b38, #d29a55); }
.cabinet-card .blob.small { transform: scale(1.35); }
.cabinet-card .button { grid-column: 1 / -1; }

.send-layout { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 22px; }
.send-form { display: grid; gap: 15px; }
.send-form label { display: grid; gap: 7px; }
.transfer-list { display: grid; gap: 12px; }
.transfer-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--ink); border-radius: 16px; background: white; }
.transfer-row p, .transfer-row small { display: block; margin: 2px 0; color: var(--muted); }
.transfer-actions { display: flex; gap: 7px; }
.transfer-actions .button { min-height: 38px; padding: 6px 10px; font-size: 12px; }
.empty-state { display: grid; place-items: center; min-height: 280px; padding: 40px; border: 3px dashed rgba(40,34,56,.45); border-radius: 25px; text-align: center; background: rgba(255,255,255,.5); }
.empty-state strong { font-size: 24px; }
.empty-state p { max-width: 420px; color: var(--muted); }
.demo-badge { padding: 7px 10px; border: 2px solid var(--ink); border-radius: 9px; color: white; background: var(--pink); }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 105px;
  max-width: min(440px, calc(100% - 30px));
  padding: 14px 20px;
  border: var(--border);
  border-radius: 15px;
  color: white;
  background: var(--ink);
  box-shadow: 0 7px 0 rgba(40,34,56,.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--red); }

.travel-layer {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 244, 183, .94);
  backdrop-filter: blur(8px);
}
.travel-layer.show { display: grid; }
.travel-layer .travel-pet { text-align: center; }
.travel-layer .blob { transform: scale(1.15); }
.travel-layer.exit .travel-pet { animation: travel-exit 1.15s cubic-bezier(.7,-.2,.9,.5) forwards; }
.travel-layer.entrance .travel-pet { animation: travel-enter 1.15s cubic-bezier(.1,.7,.25,1.25) forwards; }
.travel-layer strong { display: block; margin-top: 35px; font-size: 28px; }

@keyframes travel-exit {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  35% { transform: translateX(-80px) rotate(-8deg); }
  100% { transform: translateX(120vw) rotate(28deg); opacity: 0; }
}
@keyframes travel-enter {
  0% { transform: translateX(-120vw) rotate(-28deg); opacity: 0; }
  70% { transform: translateX(35px) rotate(5deg); opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}

/* Bubbly glass finish */
body {
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, .95) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .75) 0 15px, transparent 16px),
    radial-gradient(circle at 18% 78%, rgba(78, 205, 196, .65), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(255, 112, 166, .68), transparent 31%),
    radial-gradient(circle at 52% 8%, rgba(140, 99, 255, .42), transparent 27%),
    linear-gradient(145deg, #fff5ac 0%, #ffc6db 42%, #b9eaff 74%, #d5c5ff 100%);
  background-attachment: fixed;
  background-size: 90px 90px, 130px 130px, auto, auto, auto, auto;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 260px;
  height: 260px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08));
  box-shadow: inset 18px 22px 34px rgba(255, 255, 255, .48), 0 24px 70px rgba(91, 66, 151, .14);
  backdrop-filter: blur(5px);
}
body::before { top: 14%; left: -125px; }
body::after { right: -105px; bottom: 7%; width: 220px; height: 220px; }
main { position: relative; z-index: 1; }

.auth-card,
.panel-card,
.item-card,
.shelf-wrap,
.account-menu {
  border-color: rgba(255, 255, 255, .82);
  outline: 2px solid rgba(40, 34, 56, .88);
  outline-offset: -1px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .87), rgba(255, 255, 255, .54));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -12px 30px rgba(140, 99, 255, .06),
    0 18px 0 rgba(74, 48, 97, .07),
    0 28px 65px rgba(74, 48, 97, .18);
  backdrop-filter: blur(24px) saturate(145%);
}

.auth-card { border-radius: 42px; }
.panel-card, .item-card { border-radius: 30px; }
.item-card { overflow: hidden; }
.item-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .66), transparent);
}
.item-card > * { position: relative; z-index: 1; }
.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.topbar {
  border-bottom-color: rgba(255, 255, 255, .8);
  background: linear-gradient(110deg, rgba(255, 255, 255, .82), rgba(255, 248, 229, .55));
  box-shadow: 0 10px 35px rgba(67, 42, 95, .12), inset 0 -1px 0 rgba(40, 34, 56, .2);
  backdrop-filter: blur(24px) saturate(160%);
}

.main-nav {
  border-color: rgba(255, 255, 255, .9);
  outline: 2px solid var(--ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62));
  box-shadow: inset 0 2px 0 white, 0 16px 40px rgba(62, 39, 91, .25);
  backdrop-filter: blur(25px) saturate(160%);
}

.nav-button,
.button,
.care-button,
.mini-pill,
.avatar-pill,
input,
select { border-radius: 999px; }

.button-primary {
  background: linear-gradient(135deg, #7557f6 0%, #a85eff 45%, #ff70a6 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 5px 0 var(--ink), 0 12px 25px rgba(140,99,255,.3);
}
.button-pink { background: linear-gradient(135deg, #ff8bb8, #ff5e98); }
.button-yellow { background: linear-gradient(135deg, #fff08b, #ffc83d); }
.button-blue { background: linear-gradient(135deg, #8ff1e9, #4ecdc4); }
.button-danger { background: linear-gradient(135deg, #ff7695, #ef476f); }

.mini-pill,
.avatar-pill {
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  box-shadow: inset 0 2px 0 white, 0 6px 16px rgba(64,42,92,.14);
  backdrop-filter: blur(15px);
}
.token-pill span { color: var(--purple); text-shadow: 0 2px 0 white; }
.avatar-pill { background: linear-gradient(145deg, #fff59b, #ffbd4a); }

input,
select {
  border-color: rgba(40, 34, 56, .75);
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,250,240,.58));
  box-shadow: inset 0 3px 9px rgba(92, 67, 116, .08), 0 2px 0 rgba(255,255,255,.8);
}

.egg-scene {
  background:
    radial-gradient(circle at 22% 25%, rgba(255,255,255,.8) 0 22px, transparent 23px),
    linear-gradient(165deg, #7ce7ff 0%, #a7dcff 48%, #cab7ff 66%, #8be27d 66%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.5), var(--shadow);
}

.habitat {
  border-color: rgba(255,255,255,.8);
  outline: 3px solid var(--ink);
  outline-offset: -1px;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.82) 0 16px, transparent 17px),
    radial-gradient(circle at 77% 34%, rgba(255,255,255,.5) 0 28px, transparent 29px),
    linear-gradient(165deg, #78e8ff 0%, #b8d8ff 45%, #d8baff 68%, #8ee08b 68%, #61c86b 100%);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.5), 0 20px 0 rgba(50,39,70,.09), 0 30px 65px rgba(70,48,102,.22);
}

.blob {
  box-shadow: inset 22px 22px 30px rgba(255,255,255,.28), inset -15px -18px 25px rgba(73,41,91,.12);
}
.blob::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 72px;
  height: 35px;
  top: 22px;
  left: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: rotate(-18deg);
}
.blob.small::before { display: none; }

.meter-track { background: rgba(227, 218, 238, .65); box-shadow: inset 0 2px 5px rgba(54,34,77,.18); }
.meter-fill { background: linear-gradient(90deg, #54d781, #9aed72); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
.meter-fill.medium { background: linear-gradient(90deg, #ffbd3e, #fff071); }
.meter-fill.low { background: linear-gradient(90deg, #ef476f, #ff8ea9); }
.care-button { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,229,255,.72)); }

.item-art {
  border-radius: 25px;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.9), transparent 24%), linear-gradient(145deg, #fff49c, #ffc665);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 0 -14px 25px rgba(255,138,61,.12);
}
.item-art.pink { background: radial-gradient(circle at 35% 25%, white, transparent 25%), linear-gradient(145deg, #ffd8e8, #ff9dc1); }
.item-art.blue { background: radial-gradient(circle at 35% 25%, white, transparent 25%), linear-gradient(145deg, #c5fff5, #78ddd7); }
.token-art { background: radial-gradient(circle at 35% 25%, white, transparent 24%), linear-gradient(145deg, #eee2ff, #a98cff); }
.token-stack { position: relative; width: 120px; height: 88px; }
.token-stack i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: white;
  font-style: normal;
  font-size: 28px;
  background: linear-gradient(145deg, #b894ff, #7557f6);
  box-shadow: inset 5px 7px 0 rgba(255,255,255,.25), 5px 7px 0 rgba(40,34,56,.16);
}
.token-stack i:nth-child(1) { left: 0; bottom: 0; transform: rotate(-12deg); }
.token-stack i:nth-child(2) { right: 0; bottom: 0; transform: rotate(12deg); }
.token-stack i:nth-child(3) { left: 28px; top: 0; }

.link-button {
  padding: 7px;
  border: 0;
  color: var(--purple);
  background: transparent;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.auth-message {
  margin-top: 18px;
  padding: 14px 17px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(194,243,255,.7));
  box-shadow: inset 0 2px 0 white;
  font-size: 14px;
}
.auth-message[data-kind="success"] { background: linear-gradient(145deg, #e4ffd7, #a7f2d0); }

.travel-layer {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 25%),
    linear-gradient(145deg, rgba(255,244,183,.94), rgba(231,205,255,.94));
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 620px; }
  .auth-art { display: none; }
  .auth-card::before { content: "CHUMKINS"; display: block; margin-bottom: 30px; font-size: clamp(42px, 14vw, 74px); letter-spacing: -.09em; text-align: center; text-shadow: 0 6px 0 var(--pink); transform: rotate(-2deg); }
  .habitat-layout, .send-layout { grid-template-columns: 1fr; }
  .habitat { min-height: 440px; }
  .card-grid, .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .topbar { min-height: 66px; }
  .view { width: min(100% - 20px, 1180px); padding-top: 14px; }
  .main-nav { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); justify-content: stretch; border-radius: 19px; }
  .nav-button { flex: 1; grid-template-columns: 1fr; justify-items: center; gap: 1px; min-width: 0; padding: 5px; font-size: 11px; }
  .nav-button span { font-size: 17px; }
  .shelf-wrap { min-height: 102px; }
  .shelf-pet { flex-basis: 76px; min-height: 75px; }
  .habitat { min-height: 390px; border-radius: 23px; }
  .blob { width: 180px; height: 165px; }
  .blob-eye { top: 60px; }.blob-eye.left { left: 45px; }.blob-eye.right { right: 45px; }.blob-mouth { top: 106px; }
  .blob-cheek { top: 100px; }
  .care-buttons { position: sticky; bottom: 90px; }
  .card-grid, .shop-grid { grid-template-columns: 1fr; }
  .cabinet-card { grid-template-columns: 90px 1fr; }
  .transfer-row { grid-template-columns: 58px 1fr; }
  .transfer-actions { grid-column: 1 / -1; }
  .section-heading h1 { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Modern interface */
:root {
  --ink: #edf4ff;
  --muted: #8f9bb0;
  --cream: #0d1422;
  --yellow: #f6c85f;
  --orange: #ff9a62;
  --pink: #9a82ff;
  --purple: #8573ff;
  --blue: #62d9ff;
  --green: #64f4d2;
  --red: #ff657d;
  --white: #ffffff;
  --surface: rgba(12, 18, 31, .78);
  --surface-strong: rgba(15, 23, 39, .94);
  --line: rgba(169, 190, 224, .18);
  --line-bright: rgba(100, 244, 210, .38);
  --shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --border: 1px solid var(--line);
}

html { background: #070b14; }

body {
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  background:
    radial-gradient(circle at 18% 12%, rgba(72, 91, 255, .18), transparent 34%),
    radial-gradient(circle at 84% 76%, rgba(21, 219, 190, .11), transparent 32%),
    linear-gradient(145deg, #080c16 0%, #0a1020 52%, #080d18 100%);
  background-attachment: fixed;
  background-size: auto;
}

body::before,
body::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body::before {
  opacity: .32;
  background-image:
    linear-gradient(rgba(144, 166, 205, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(144, 166, 205, .055) 1px, transparent 1px);
  background-size: 44px 44px;
}

body::after {
  opacity: .4;
  background: radial-gradient(circle at 50% 115%, rgba(72, 122, 255, .22), transparent 48%);
}

button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.auth-shell {
  max-width: 1240px;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 470px);
  gap: clamp(32px, 7vw, 110px);
}

.logo {
  color: transparent;
  background: linear-gradient(100deg, #ffffff 0%, #a9c5ff 46%, #64f4d2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  letter-spacing: -.075em;
  text-shadow: none;
  transform: none;
}

.logo-giant { font-size: clamp(58px, 8vw, 112px); }

.egg-scene {
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(165, 187, 226, .2);
  border-radius: 26px;
  background:
    linear-gradient(rgba(124, 155, 215, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 155, 215, .075) 1px, transparent 1px),
    radial-gradient(circle at 50% 92%, rgba(100, 244, 210, .14), transparent 42%),
    linear-gradient(160deg, #0e1729, #090e19);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow);
}

.sun {
  width: 92px;
  height: 92px;
  border: 1px solid rgba(98, 217, 255, .46);
  background: radial-gradient(circle, rgba(98, 217, 255, .22), rgba(98, 217, 255, .03) 62%, transparent 64%);
  box-shadow: 0 0 70px rgba(98, 217, 255, .18), inset 0 0 28px rgba(98, 217, 255, .12);
}

.grass {
  height: 30%;
  opacity: .8;
  background: linear-gradient(180deg, transparent, rgba(100, 244, 210, .045));
  border-top: 1px solid rgba(100, 244, 210, .18);
}

.egg {
  border: 2px solid rgba(220, 233, 255, .74);
  background: linear-gradient(145deg, #f7f9ff, #a9b8d4 68%, #8392b0);
}

.egg-large {
  box-shadow: 0 24px 55px rgba(0, 0, 0, .35), 0 0 55px rgba(126, 108, 255, .16);
}

.egg span { border: 0; opacity: .8; }
.egg span:nth-child(1) { background: var(--purple); }
.egg span:nth-child(2) { background: var(--green); }
.egg span:nth-child(3) { background: var(--blue); }

.auth-card,
.panel-card,
.item-card,
.shelf-wrap,
.account-menu,
.home-hud {
  border: 1px solid var(--line);
  outline: 0;
  background: linear-gradient(145deg, rgba(19, 28, 47, .88), rgba(9, 15, 27, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 24px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(22px) saturate(125%);
}

.auth-card { border-radius: 22px; }
.panel-card, .item-card { border-radius: 18px; }

.auth-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 6, 14, .42);
}

.auth-tab { min-height: 44px; border-radius: 8px; color: var(--muted); }
.auth-tab.active { color: #07121b; background: var(--green); box-shadow: none; }
.auth-form label, .send-form label { color: #b8c5d9; font-size: 12px; letter-spacing: .04em; }

input,
select {
  min-height: 50px;
  border: 1px solid rgba(169, 190, 224, .24);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(4, 9, 18, .66);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .28);
}

input::placeholder { color: #637087; }

.button {
  min-height: 44px;
  border: 1px solid rgba(169, 190, 224, .24);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(31, 43, 66, .72);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
}

.button:hover { border-color: rgba(100, 244, 210, .48); background: rgba(39, 54, 79, .86); box-shadow: none; transform: translateY(-1px); }
.button:active { box-shadow: none; transform: translateY(1px); }
.button-primary { color: #06131b; border-color: transparent; background: linear-gradient(115deg, #64f4d2, #62d9ff); box-shadow: 0 12px 30px rgba(76, 224, 210, .13); }
.button-pink { color: white; background: linear-gradient(115deg, #7066e8, #9a82ff); }
.button-yellow { color: #171106; background: linear-gradient(115deg, #e9b94e, #f6d887); }
.button-blue { color: #05141a; background: linear-gradient(115deg, #5fcbe9, #64f4d2); }
.button-danger { color: white; background: #d94f67; }
.button-quiet { border-color: var(--line); background: transparent; }

.link-button { color: var(--green); }
.auth-message {
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #cbd8e9;
  background: rgba(18, 42, 61, .64);
  box-shadow: none;
}
.auth-message[data-kind="success"] { color: #dffff8; background: rgba(26, 78, 69, .55); }

.app-shell { min-height: 100vh; }
.world-active { overflow: hidden; }

.topbar {
  min-height: 72px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, .76);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  backdrop-filter: blur(24px) saturate(130%);
}

.logo-button {
  color: #f3f7ff;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.065em;
  text-shadow: none;
}

.logo-button::after {
  content: "// LIVE";
  margin-left: 10px;
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  vertical-align: middle;
}

.account-pills { gap: 8px; }
.mini-pill,
.avatar-pill {
  height: 42px;
  min-width: 42px;
  border: 1px solid var(--line);
  color: #dfe8f6;
  background: rgba(18, 27, 44, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(15px);
}
.mini-pill { padding-inline: 12px; border-radius: 10px; }
.mini-pill span { color: var(--green); font-size: 16px; }
.token-pill span { color: var(--green); text-shadow: none; }
.envelope-pill span { color: var(--blue); }
.avatar-pill { border-radius: 50%; color: #07121b; background: linear-gradient(135deg, var(--green), var(--blue)); }

.account-menu { top: 64px; border-radius: 14px; }
.account-menu small { color: var(--muted); }
.account-menu button { border-radius: 8px; color: var(--ink); background: rgba(35, 48, 71, .8); }

.main-nav {
  bottom: max(16px, env(safe-area-inset-bottom));
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(169, 190, 224, .22);
  border-radius: 14px;
  outline: 0;
  background: rgba(8, 13, 23, .82);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(24px) saturate(130%);
}

.nav-button {
  min-height: 44px;
  padding: 7px 14px;
  border-radius: 9px;
  color: #8997ab;
  font-size: 12px;
}
.nav-button span { color: #65748b; }
.nav-button.active { color: #07121b; background: var(--green); }
.nav-button.active span { color: #07121b; }

.view { padding-top: 24px; }

#home-view {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 92%, rgba(82, 126, 255, .16), transparent 42%),
    radial-gradient(circle at 18% 26%, rgba(100, 244, 210, .065), transparent 30%),
    linear-gradient(180deg, #090e19 0%, #0b1322 58%, #080d16 100%);
}

#home-view::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgba(139, 166, 211, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 166, 211, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25), black 50%, rgba(0, 0, 0, .5));
}

#home-view::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 94px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(100, 244, 210, .16), transparent);
}

.chumkin-world {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

#home-content { pointer-events: none; }

.shelf-wrap {
  position: fixed;
  z-index: 14;
  top: 92px;
  left: max(16px, calc((100vw - 1380px) / 2));
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 84px;
  min-height: 0;
  max-height: calc(100vh - 205px);
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 14px;
  scrollbar-color: rgba(100, 244, 210, .35) transparent;
}

.shelf-wrap::before {
  content: "ACTIVE";
  padding: 5px 3px 7px;
  color: #738198;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .12em;
  text-align: center;
}

.shelf-pet {
  flex: 0 0 68px;
  width: 68px;
  min-height: 68px;
  padding: 6px 3px 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #8592a7;
}
.shelf-pet:hover { border-color: rgba(98, 217, 255, .26); background: rgba(98, 217, 255, .055); }
.shelf-pet.active { border-color: var(--line-bright); color: #dffdf6; background: rgba(100, 244, 210, .09); box-shadow: inset 2px 0 0 var(--green); }
.shelf-pet small { width: 58px; font-size: 9px; font-weight: 600; }

.home-hud {
  position: fixed;
  z-index: 14;
  top: 92px;
  right: max(16px, calc((100vw - 1380px) / 2));
  width: min(304px, calc(100vw - 32px));
  padding: 16px;
  border-radius: 16px;
  pointer-events: auto;
}

.pet-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pet-identity > div { min-width: 0; }
.pet-identity strong { display: block; overflow: hidden; font-size: 22px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.pet-identity span { display: block; margin-top: 3px; color: #7f8ca0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; letter-spacing: .045em; text-transform: uppercase; }
.pet-identity button {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--green);
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .08em;
  cursor: pointer;
}

.physics-hint {
  margin: 13px 0 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #647187;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .15em;
}

.meters { gap: 8px; }
.meter-row { grid-template-columns: 29px 1fr 30px; gap: 7px; }
.meter-icon { color: #91a0b7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: -.03em; }
.meter-track { height: 7px; border: 0; border-radius: 4px; background: rgba(159, 179, 214, .12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
.meter-fill { border-radius: 4px; background: linear-gradient(90deg, #39cfb4, #64f4d2); box-shadow: 0 0 12px rgba(100, 244, 210, .18); }
.meter-fill.medium { background: linear-gradient(90deg, #d59f38, #f6c85f); }
.meter-fill.low { background: linear-gradient(90deg, #d84762, #ff657d); }
.meter-value { color: #9ba8bc; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }

.care-buttons { gap: 6px; margin-top: 14px; }
.care-button {
  min-height: 50px;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #c5d1e2;
  background: rgba(22, 32, 51, .68);
  box-shadow: none;
}
.care-button:hover { border-color: var(--line-bright); color: white; background: rgba(31, 52, 66, .84); }
.care-button span { color: var(--green); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; font-weight: 500; }
.care-button small { font-size: 10px; font-weight: 700; }

.home-hud .pet-actions { margin-top: 8px; }
.home-hud .pet-actions .button { min-height: 38px; padding: 7px; font-size: 10px; }
.home-hud .traits-details { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.home-hud .traits-details summary { color: #7f8ca0; font-size: 10px; }
.home-hud .pet-code { margin-top: 10px; color: #718097; font-size: 9px; }
.home-hud .pet-code code { color: #8fa0b8; background: rgba(2, 6, 13, .44); }
.home-hud .trait-list { max-height: 178px; grid-template-columns: 1fr 1fr; overflow-y: auto; }
.home-hud .trait { color: #9aa8bb; background: rgba(27, 38, 58, .66); }
.home-hud .trait b { color: var(--green); }
.home-hud .trait small { display: block; color: #647187; }

#home-content > .empty-state {
  position: fixed;
  z-index: 14;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100vw - 32px));
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(10, 16, 28, .84);
  pointer-events: auto;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(20px);
}

.blob {
  width: 220px;
  height: 132px;
  overflow: visible;
  border: 3px solid color-mix(in srgb, var(--body) 42%, #11131c);
  border-radius: 52% 48% 46% 54% / 55% 56% 44% 45%;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--body) 42%, white), color-mix(in srgb, var(--body) 82%, white) 38%, var(--body) 100%);
  box-shadow: inset 18px 17px 28px rgba(255, 255, 255, .16), inset -12px -15px 22px rgba(15, 12, 28, .12);
  animation: blob-breathe 2.8s ease-in-out infinite;
}
.blob.shape-1 { border-radius: 56% 44% 49% 51% / 51% 58% 42% 49%; }
.blob.shape-2 { border-radius: 47% 53% 43% 57% / 58% 51% 49% 42%; }
.blob.shape-3 { border-radius: 52% 48% 56% 44% / 50% 57% 43% 50%; }
.blob.shape-4 { border-radius: 55% 45% 46% 54% / 56% 48% 52% 44%; }
.blob::before { width: 63px; height: 24px; top: 14px; left: 38px; background: rgba(255, 255, 255, .2); }
.blob-ear {
  position: absolute;
  z-index: 1;
  top: -7px;
  width: 17px;
  height: 19px;
  border: 2px solid color-mix(in srgb, var(--body) 42%, #11131c);
  border-radius: 50%;
  background: var(--body);
}
.blob-ear.left { left: 45px; transform: rotate(-10deg); }
.blob-ear.right { right: 45px; transform: rotate(10deg); }
.blob-eye { z-index: 3; width: 25px; height: 29px; top: 43px; border: 1px solid #17151e; background: var(--eyes); }
.blob-eye::after { width: 7px; height: 7px; left: 4px; top: 4px; background: white; opacity: .95; }
.blob-eye::before { content: ""; position: absolute; width: 3px; height: 3px; right: 4px; bottom: 5px; border-radius: 50%; background: white; opacity: .58; }
.blob-eye.left { left: 67px; }
.blob-eye.right { right: 67px; }
.blob-cheek { width: 27px; height: 13px; top: 78px; background: radial-gradient(circle, rgba(239, 95, 125, .55), transparent 70%); }
.blob-cheek.left { left: 31px; }
.blob-cheek.right { right: 31px; }
.blob-mouth { width: 18px; height: 8px; top: 87px; border: 0; border-bottom: 2px solid #5b3045; border-radius: 50%; }

.blob.small {
  width: 52px;
  height: 34px;
  border-width: 1px;
  animation: none;
}
.blob.small .blob-ear { top: -3px; width: 5px; height: 6px; border-width: 1px; }
.blob.small .blob-ear.left { left: 10px; }
.blob.small .blob-ear.right { right: 10px; }
.blob.small .blob-eye { width: 6px; height: 8px; top: 11px; border-width: 1px; }
.blob.small .blob-eye::after { width: 2px; height: 2px; left: 1px; top: 1px; }
.blob.small .blob-eye::before { display: none; }
.blob.small .blob-eye.left { left: 15px; }
.blob.small .blob-eye.right { right: 15px; }
.blob.small .blob-mouth { width: 6px; height: 3px; top: 23px; border-width: 1px; }

.section-heading { margin-top: 6px; }
.section-heading h1 { font-size: clamp(30px, 5vw, 48px); letter-spacing: -.045em; }
.info-chip { border: 1px solid rgba(98, 217, 255, .2); border-radius: 10px; color: #b9cce2; background: rgba(21, 45, 62, .62); }
.card-grid, .shop-grid { gap: 14px; }
.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.item-card {
  min-height: 260px;
  gap: 12px;
  border-radius: 16px;
}
.item-card::before { background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent); }
.item-card p { color: var(--muted); font-weight: 500; }
.item-price { color: var(--green); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.item-art {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: radial-gradient(circle at 35% 25%, rgba(100, 244, 210, .13), transparent 32%), linear-gradient(145deg, #111c2f, #0a101d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.item-art.pink { background: radial-gradient(circle at 35% 25%, rgba(154, 130, 255, .18), transparent 32%), linear-gradient(145deg, #18172e, #0a101d); }
.item-art.blue { background: radial-gradient(circle at 35% 25%, rgba(98, 217, 255, .17), transparent 32%), linear-gradient(145deg, #102333, #0a101d); }
.token-art { background: radial-gradient(circle at 35% 25%, rgba(100, 244, 210, .2), transparent 32%), linear-gradient(145deg, #102530, #0a101d); }
.token-stack i { border: 1px solid rgba(100, 244, 210, .44); color: #06131b; background: linear-gradient(145deg, #64f4d2, #62d9ff); box-shadow: 5px 7px 22px rgba(0, 0, 0, .28); }
.envelope-art { border: 2px solid #b8c9df; background: #182338; }
.envelope-art::before { background: #7768e9; }
.envelope-art::after { background: #62d9ff; }
.egg-mini { border: 2px solid #b8c9df; background: radial-gradient(circle at 35% 35%, var(--purple) 0 10px, transparent 11px), radial-gradient(circle at 66% 67%, var(--green) 0 8px, transparent 9px), linear-gradient(145deg, #f4f7ff, #9eabc1); }
.nanny-art { font-size: 0; filter: none; }
.nanny-art::before { content: "NANNY // 24H"; color: var(--blue); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; letter-spacing: .12em; }
.active-ribbon { border: 1px solid var(--line-bright); color: #06131b; background: var(--green); }

.cabinet-slot { border: 1px solid rgba(98, 217, 255, .24); background: linear-gradient(145deg, rgba(25, 52, 72, .75), rgba(7, 15, 26, .9)); }
.transfer-row { border: 1px solid var(--line); border-radius: 11px; background: rgba(16, 24, 39, .72); }
.transfer-row p, .transfer-row small { color: var(--muted); }
.empty-state { border: 1px dashed rgba(169, 190, 224, .3); border-radius: 16px; background: rgba(10, 16, 28, .55); }
.demo-badge { border: 1px solid rgba(154, 130, 255, .42); border-radius: 6px; background: #6559cc; }

.toast {
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  color: #dcfff8;
  background: rgba(8, 18, 27, .92);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
}
.toast.error { border-color: rgba(255, 101, 125, .5); background: rgba(48, 14, 24, .94); }

.travel-layer {
  background: radial-gradient(circle at 50% 50%, rgba(88, 97, 214, .18), transparent 42%), rgba(5, 9, 17, .94);
  backdrop-filter: blur(14px);
}
.travel-layer strong { color: #e7eefb; font-size: 22px; letter-spacing: -.02em; }

@media (max-width: 1050px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 600px; }
  .auth-art { display: none; }
  .auth-card::before {
    content: "CHUMKINS";
    display: block;
    margin-bottom: 28px;
    color: transparent;
    background: linear-gradient(100deg, #fff, #9dc4ff 55%, #64f4d2);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: clamp(38px, 13vw, 66px);
    letter-spacing: -.075em;
    text-align: center;
    text-shadow: none;
    transform: none;
  }
  .send-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .topbar { min-height: 64px; padding-inline: 10px; }
  .logo-button { font-size: 23px; }
  .logo-button::after { display: none; }
  .mini-pill { height: 38px; min-width: 38px; padding-inline: 9px; }
  .mini-pill span { display: none; }
  .avatar-pill { width: 38px; height: 38px; min-width: 38px; }
  .view { width: min(100% - 20px, 1180px); padding-top: 14px; }
  #home-view { width: 100%; padding: 0; }
  .main-nav { bottom: max(7px, env(safe-area-inset-bottom)); width: calc(100% - 14px); border-radius: 12px; }
  .nav-button { min-height: 43px; padding: 5px; border-radius: 8px; }
  .nav-button span { font-size: 15px; }

  .shelf-wrap {
    top: 72px;
    right: 8px;
    left: 8px;
    flex-direction: row;
    width: auto;
    max-height: 72px;
    min-height: 0;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .shelf-wrap::before { display: none; }
  .shelf-pet { flex: 0 0 58px; width: 58px; min-height: 60px; }
  .shelf-pet.active { box-shadow: inset 0 2px 0 var(--green); }
  .shelf-pet small { width: 50px; font-size: 8px; }
  .blob.small { width: 43px; height: 28px; }
  .blob.small .blob-eye { width: 5px; height: 7px; top: 9px; }
  .blob.small .blob-eye.left { left: 12px; }
  .blob.small .blob-eye.right { right: 12px; }
  .blob.small .blob-mouth { top: 19px; }

  .home-hud {
    top: auto;
    right: 8px;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px));
    left: 8px;
    width: auto;
    padding: 11px;
    border-radius: 13px;
  }
  .pet-identity strong { font-size: 18px; }
  .pet-identity span { font-size: 8px; }
  .physics-hint { position: absolute; top: 14px; right: 56px; margin: 0; padding: 0; border: 0; font-size: 7px; }
  .meters { grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 10px; }
  .meter-row { grid-template-columns: 26px 1fr 24px; }
  .care-buttons { margin-top: 9px; }
  .care-button { min-height: 42px; grid-template-columns: auto auto; align-content: center; gap: 6px; }
  .home-hud .pet-actions { margin-top: 6px; }
  .home-hud .traits-details { margin-top: 7px; padding-top: 6px; }
  .home-hud .traits-details[open] { max-height: 38vh; overflow-y: auto; }
  .home-hud .trait-list { max-height: none; }
  .card-grid, .shop-grid { grid-template-columns: 1fr; }
  .section-heading h1 { font-size: 36px; }
}

.boombox {
  --music-volume: 55%;
  position: fixed;
  z-index: 18;
  bottom: 108px;
  left: max(110px, calc((100vw - 1380px) / 2 + 94px));
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 8px;
  width: 244px;
  height: 82px;
  padding: 10px;
  border: 1px solid rgba(169, 190, 224, .25);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(28, 39, 61, .94), rgba(8, 13, 23, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 42px rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.boombox.playing {
  border-color: rgba(100, 244, 210, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 42px rgba(0, 0, 0, .38), 0 0 28px rgba(100, 244, 210, .1);
}

.boombox-handle {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 90px;
  height: 19px;
  border: 5px solid #1b263c;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  transform: translateX(-50%);
}

.boombox-handle::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  left: -6px;
  height: 4px;
  border-radius: 2px;
  background: #34435d;
}

.boombox-speaker {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(169, 190, 224, .24);
  border-radius: 50%;
  background:
    radial-gradient(circle, #151e30 0 26%, transparent 27%),
    repeating-radial-gradient(circle, #222e46 0 2px, #0a101c 3px 5px);
  box-shadow: inset 0 0 0 4px #080d18, inset 0 0 13px rgba(0, 0, 0, .7);
}

.boombox-speaker i {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(98, 217, 255, .18);
  border-radius: 50%;
  background: #0d1524;
}

.boombox.playing .boombox-speaker i { animation: speaker-pulse .72s ease-in-out infinite alternate; }

.boombox-deck { display: grid; min-width: 0; gap: 7px; }
.boombox-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  height: 24px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid rgba(100, 244, 210, .2);
  border-radius: 5px;
  color: #708097;
  background: rgba(2, 8, 13, .8);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}
.boombox-screen strong { overflow: hidden; color: #a5b5ca; font-size: 8px; letter-spacing: .08em; text-overflow: ellipsis; }
.boombox-screen span { color: #66768d; font-size: 7px; letter-spacing: .06em; }
.boombox.playing .boombox-screen span { color: var(--green); text-shadow: 0 0 9px rgba(100, 244, 210, .35); }

.boombox-controls { display: grid; grid-template-columns: 25px 28px 1fr; align-items: center; gap: 6px; }
.boombox-power {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(169, 190, 224, .24);
  border-radius: 6px;
  color: #7d8da4;
  background: rgba(21, 30, 47, .9);
  font-size: 14px;
  cursor: pointer;
}
.boombox-power:hover { border-color: rgba(100, 244, 210, .5); color: var(--green); }
.boombox.playing .boombox-power { border-color: rgba(100, 244, 210, .45); color: #06131b; background: var(--green); }

.boombox-sfx {
  display: grid;
  width: 28px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(169, 190, 224, .24);
  border-radius: 6px;
  color: #7d8da4;
  background: rgba(21, 30, 47, .9);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.boombox-sfx:hover { border-color: rgba(98, 217, 255, .5); color: var(--blue); }
.boombox-sfx.enabled { border-color: rgba(98, 217, 255, .42); color: #07121b; background: var(--blue); }

.boombox-volume { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; min-width: 0; color: #64748a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; letter-spacing: .08em; }
.boombox-volume input {
  width: 100%;
  min-height: 0;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.boombox-volume input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 0 var(--music-volume), rgba(155, 177, 213, .18) var(--music-volume) 100%);
}
.boombox-volume input::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 1px solid #07121b;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #d8e7f4;
  box-shadow: 0 0 0 2px rgba(100, 244, 210, .2);
}
.boombox-volume input::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(155, 177, 213, .18); }
.boombox-volume input::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--green); }
.boombox-volume input::-moz-range-thumb { width: 9px; height: 9px; border: 1px solid #07121b; border-radius: 50%; background: #d8e7f4; }
.boombox audio { display: none; }

@keyframes speaker-pulse {
  from { transform: scale(.93); box-shadow: 0 0 0 rgba(100, 244, 210, 0); }
  to { transform: scale(1.08); box-shadow: 0 0 10px rgba(100, 244, 210, .18); }
}

@media (max-width: 600px) {
  .boombox {
    bottom: 72px;
    left: 8px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 5px;
    width: 188px;
    height: 62px;
    padding: 7px;
    border-radius: 10px;
  }
  .world-active .boombox { top: 151px; bottom: auto; }
  .boombox-handle { top: -11px; width: 64px; height: 13px; border-width: 4px; }
  .boombox-speaker { width: 34px; height: 34px; }
  .boombox-speaker i { inset: 10px; }
  .boombox-deck { gap: 4px; }
  .boombox-screen { height: 19px; padding-inline: 5px; }
  .boombox-screen strong { font-size: 7px; }
  .boombox-screen span { font-size: 6px; }
  .boombox-controls { grid-template-columns: 21px 24px 1fr; gap: 4px; }
  .boombox-power { width: 21px; height: 21px; font-size: 12px; }
  .boombox-sfx { width: 24px; height: 21px; font-size: 5px; }
  .boombox-volume span { display: none; }
}

/* Bright room */
:root {
  --ink: #182337;
  --muted: #68778b;
  --cream: #f5f9ff;
  --yellow: #f6c85f;
  --orange: #f48c55;
  --pink: #816ef0;
  --purple: #725fe0;
  --blue: #2e91df;
  --green: #16c7a4;
  --red: #e84e6a;
  --surface: rgba(255, 255, 255, .8);
  --surface-strong: rgba(255, 255, 255, .96);
  --line: rgba(39, 62, 91, .14);
  --line-bright: rgba(20, 172, 145, .38);
  --shadow: 0 22px 60px rgba(59, 83, 112, .16);
  --border: 1px solid var(--line);
}

html { background: #eaf3fb; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 12%, rgba(124, 187, 255, .28), transparent 32%),
    radial-gradient(circle at 88% 74%, rgba(72, 222, 184, .18), transparent 32%),
    linear-gradient(145deg, #f8fbff 0%, #edf6fd 52%, #e9f1f8 100%);
}

body::before {
  opacity: .32;
  background-image:
    linear-gradient(rgba(45, 92, 134, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 92, 134, .045) 1px, transparent 1px);
}
body::after { opacity: .26; background: radial-gradient(circle at 50% 112%, rgba(71, 142, 218, .22), transparent 48%); }

.auth-card,
.panel-card,
.item-card,
.shelf-wrap,
.account-menu,
.home-hud {
  border-color: rgba(43, 69, 101, .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(245, 250, 255, .72));
  box-shadow: inset 0 1px 0 white, 0 22px 60px rgba(57, 85, 116, .15);
  backdrop-filter: blur(22px) saturate(120%);
}

.logo {
  background: linear-gradient(100deg, #15233a 0%, #4d72af 50%, #0fae91 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.egg-scene {
  border-color: rgba(55, 91, 126, .16);
  background:
    linear-gradient(rgba(59, 105, 148, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 105, 148, .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 86%, rgba(82, 217, 180, .2), transparent 42%),
    linear-gradient(160deg, #edf8ff, #dceefb);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 1px 0 white, var(--shadow);
}
.sun { border-color: rgba(47, 145, 223, .3); background: radial-gradient(circle, rgba(255, 229, 130, .7), rgba(255, 229, 130, .18) 62%, transparent 64%); box-shadow: 0 0 70px rgba(255, 202, 75, .26); }
.grass { border-top-color: rgba(22, 199, 164, .18); background: linear-gradient(180deg, transparent, rgba(22, 199, 164, .1)); }

.auth-tabs { border-color: var(--line); background: rgba(224, 234, 245, .65); }
.auth-tab { color: var(--muted); }
.auth-tab.active { color: white; background: linear-gradient(115deg, #228fd0, #19bda0); }
.auth-form label, .send-form label { color: #55677d; }

input,
select {
  border-color: rgba(43, 69, 101, .18);
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 4px rgba(46, 73, 101, .08);
}
input::placeholder { color: #8c99aa; }

.button {
  border-color: rgba(43, 69, 101, .17);
  color: #26364b;
  background: rgba(246, 250, 255, .92);
}
.button:hover { border-color: rgba(16, 165, 139, .42); background: white; }
.button-primary { color: white; background: linear-gradient(115deg, #258fd4, #18b99d); box-shadow: 0 12px 28px rgba(29, 151, 158, .16); }
.button-pink { color: white; background: linear-gradient(115deg, #6959d4, #9079ee); }
.button-yellow { color: #312409; background: linear-gradient(115deg, #efbd4d, #f8d980); }
.button-blue { color: white; background: linear-gradient(115deg, #2b91d8, #1dbba1); }
.button-quiet { background: rgba(244, 248, 253, .68); }
.button.button-primary:hover { border-color: #168e94; color: white; background: linear-gradient(115deg, #197fc1, #119b82); }
.button.button-pink:hover { border-color: #6352ca; color: white; background: linear-gradient(115deg, #5848bd, #7962d8); }
.button.button-yellow:hover { border-color: #d7a12e; color: #312409; background: linear-gradient(115deg, #e3ac36, #f3ca62); }
.button.button-blue:hover { border-color: #178da2; color: white; background: linear-gradient(115deg, #237fc0, #139980); }
.button.button-danger:hover { border-color: #ad354f; color: white; background: #bd3e59; }
.button.button-quiet:hover { border-color: rgba(43, 69, 101, .28); color: #26364b; background: white; }
.link-button { color: #167fbd; }
.auth-message { color: #40566e; background: rgba(222, 242, 252, .75); }
.auth-message[data-kind="success"] { color: #176c5c; background: rgba(213, 247, 235, .8); }
.auth-message[data-kind="error"] { color: #92384d; background: rgba(255, 225, 232, .9); }

.topbar {
  border-bottom-color: rgba(43, 69, 101, .12);
  background: rgba(248, 252, 255, .78);
  box-shadow: 0 9px 34px rgba(61, 88, 116, .12);
}
.logo-button { color: #17243a; }
.logo-button::after { color: #0e9d84; }
.mini-pill,
.avatar-pill { border-color: rgba(43, 69, 101, .14); color: #394b61; background: rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 white, 0 6px 18px rgba(54, 82, 111, .1); }
.mini-pill span, .token-pill span { color: #10a88c; }
.envelope-pill span { color: #2e91df; }
.avatar-pill { color: white; background: linear-gradient(135deg, #28bfa3, #388fe0); }
.account-menu small { color: var(--muted); }
.account-menu button { color: white; background: #263a51; }

.main-nav {
  border-color: rgba(43, 69, 101, .15);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 42px rgba(56, 82, 111, .18), inset 0 1px 0 white;
}
.nav-button { color: #718094; }
.nav-button span { color: #8593a5; }
.nav-button.active { color: white; background: linear-gradient(115deg, #268fd3, #18b99d); }
.nav-button.active span { color: white; }

#home-view {
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .98), transparent 31%),
    radial-gradient(circle at 80% 30%, rgba(164, 222, 255, .34), transparent 35%),
    linear-gradient(180deg, #f7fbff 0%, #e7f4fc 66%, #f1ede5 66%, #e8e0d3 100%);
}

#home-view::before {
  top: 112px;
  right: auto;
  bottom: auto;
  left: 10%;
  width: min(34vw, 430px);
  height: min(31vh, 250px);
  border: 10px solid rgba(255, 255, 255, .88);
  border-radius: 7px;
  opacity: 1;
  background:
    linear-gradient(90deg, transparent 48.7%, rgba(255, 255, 255, .92) 49% 51%, transparent 51.3%),
    linear-gradient(transparent 48%, rgba(255, 255, 255, .92) 48.5% 52%, transparent 52.5%),
    linear-gradient(160deg, #83cbf2 0%, #c5ebff 58%, #e9fbff 100%);
  background-size: auto;
  box-shadow: 0 16px 40px rgba(68, 112, 148, .14), inset 0 0 40px rgba(255, 255, 255, .42);
  mask-image: none;
}

#home-view::after {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 34%;
  border-top: 1px solid rgba(104, 106, 105, .12);
  opacity: .7;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(119, 111, 97, .1) 119px 120px),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(173, 154, 129, .08));
}

.shelf-wrap { border-color: rgba(43, 69, 101, .13); background: rgba(255, 255, 255, .78); }
.shelf-wrap::before { color: #8190a1; }
.shelf-pet { color: #647489; }
.shelf-pet:hover { border-color: rgba(46, 145, 223, .24); background: rgba(46, 145, 223, .06); }
.shelf-pet.active { border-color: rgba(18, 177, 149, .35); color: #176d60; background: rgba(22, 199, 164, .1); box-shadow: inset 2px 0 0 #16b798; }

.home-hud { border-color: rgba(43, 69, 101, .14); color: var(--ink); background: rgba(255, 255, 255, .84); }
.pet-identity span { color: #718196; }
.pet-identity button { border-color: rgba(43, 69, 101, .16); color: #138d77; }
.physics-hint { border-top-color: rgba(43, 69, 101, .1); color: #8190a2; }
.meter-icon, .meter-value { color: #75869b; }
.meter-track { background: rgba(59, 85, 111, .12); box-shadow: inset 0 1px 3px rgba(51, 77, 104, .1); }
.meter-fill { background: linear-gradient(90deg, #12ae91, #22d0ae); }
.care-button { border-color: rgba(43, 69, 101, .14); color: #41546b; background: rgba(246, 250, 255, .88); }
.care-button:hover { border-color: rgba(18, 177, 149, .35); color: #173e3a; background: rgba(228, 250, 245, .96); }
.care-button span { color: #139a81; }
.home-hud .traits-details { border-top-color: rgba(43, 69, 101, .1); }
.home-hud .traits-details summary, .home-hud .pet-code { color: #718197; }
.home-hud .pet-code code { color: #65768c; background: rgba(225, 233, 242, .66); }
.home-hud .trait { color: #5f7187; background: rgba(234, 240, 247, .8); }
.home-hud .trait b { color: #128c76; }
.home-hud .trait small { color: #8996a6; }

#home-content > .empty-state { color: var(--ink); background: rgba(255, 255, 255, .88); }
.section-heading h1 { color: #17243a; }
.info-chip { border-color: rgba(46, 145, 223, .18); color: #45637e; background: rgba(221, 242, 253, .8); }
.item-card p { color: var(--muted); }
.item-price { color: #128d77; }
.item-art { border-color: rgba(43, 69, 101, .12); background: radial-gradient(circle at 35% 25%, rgba(50, 197, 167, .2), transparent 32%), linear-gradient(145deg, #f1faff, #e4f0f7); box-shadow: inset 0 1px 0 white; }
.item-art.pink { background: radial-gradient(circle at 35% 25%, rgba(132, 109, 234, .2), transparent 32%), linear-gradient(145deg, #f4f0ff, #e9e5f7); }
.item-art.blue { background: radial-gradient(circle at 35% 25%, rgba(46, 145, 223, .2), transparent 32%), linear-gradient(145deg, #eaf7ff, #dfedf7); }
.token-art { background: radial-gradient(circle at 35% 25%, rgba(22, 199, 164, .22), transparent 32%), linear-gradient(145deg, #e8fbf7, #dfeef2); }
.cabinet-slot { border-color: rgba(46, 145, 223, .2); background: linear-gradient(145deg, rgba(216, 240, 250, .9), rgba(190, 214, 229, .8)); }
.transfer-row { border-color: rgba(43, 69, 101, .13); background: rgba(255, 255, 255, .82); }
.empty-state { border-color: rgba(43, 69, 101, .22); background: rgba(255, 255, 255, .62); }
.travel-layer { background: radial-gradient(circle at 50% 50%, rgba(98, 170, 235, .26), transparent 42%), rgba(239, 248, 254, .94); }
.travel-layer strong { color: #20334a; }

.blob {
  width: var(--blob-width, 220px);
  height: var(--blob-height, 132px);
  border-width: var(--outline-width, 3px);
  border-color: var(--outline, #49345f);
  background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--body) 34%, white), color-mix(in srgb, var(--body) 80%, white) 38%, var(--body) 76%, color-mix(in srgb, var(--body) 76%, var(--accent)) 100%);
}
.blob-ear { border-color: var(--outline, #49345f); }
.blob-ear.left { transform: rotate(-10deg) scale(var(--ear-scale, 1)); }
.blob-ear.right { transform: rotate(10deg) scale(var(--ear-scale, 1)); }
.blob-eye { transform: scale(var(--eye-scale, 1)); transform-origin: center; }
.blob.small { width: var(--small-width, 52px); height: var(--small-height, 34px); border-width: clamp(1px, var(--outline-width, 2px), 2.4px); }
.blob:not(.small) .blob-ear { top: -5%; }
.blob:not(.small) .blob-ear.left { left: 21%; }
.blob:not(.small) .blob-ear.right { right: 21%; }
.blob:not(.small) .blob-eye { top: 32%; }
.blob:not(.small) .blob-eye.left { left: 31%; }
.blob:not(.small) .blob-eye.right { right: 31%; }
.blob:not(.small) .blob-cheek { top: 59%; }
.blob:not(.small) .blob-mouth { top: 67%; }
.blob.small .blob-ear { top: -9%; }
.blob.small .blob-ear.left { left: 20%; }
.blob.small .blob-ear.right { right: 20%; }
.blob.small .blob-eye { top: 31%; }
.blob.small .blob-eye.left { left: 29%; }
.blob.small .blob-eye.right { right: 29%; }
.blob.small .blob-mouth { top: 68%; }

@media (max-width: 600px) {
  #home-view::before { top: 150px; left: 11%; width: 58vw; height: 21vh; border-width: 7px; opacity: .72; }
  #home-view::after { height: 38%; }
  .home-hud { background: rgba(255, 255, 255, .9); }
}

/* Open-air Chumkin world */
.main-nav {
  top: 82px;
  bottom: auto;
}

.view:not(#home-view) { padding-top: 96px; }

#home-view {
  --world-ground: 100vh;
  background: linear-gradient(180deg, #e4f7fd 0%, #c9edf8 100%);
}

#home-view::before {
  display: none;
}

#home-view::after {
  top: calc(var(--world-ground) - 1px);
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 11px;
  border: 0;
  opacity: 1;
  background: linear-gradient(180deg, #78cc61 0%, #5caf50 100%);
  box-shadow: 0 -1px 0 rgba(70, 155, 68, .28);
}

.grass-foreground {
  position: absolute;
  z-index: 3;
  top: calc(var(--world-ground) - 5px);
  right: 0;
  left: 0;
  height: 10px;
  pointer-events: none;
  background:
    repeating-linear-gradient(82deg, transparent 0 10px, #4ba64d 11px 12px, transparent 13px 19px),
    repeating-linear-gradient(98deg, transparent 0 15px, #60b756 16px 17px, transparent 18px 25px),
    linear-gradient(180deg, transparent 0 5px, rgba(100, 186, 84, .92) 6px 100%);
}

.shelf-wrap,
.home-hud { top: 148px; }

.boombox {
  user-select: none;
  -webkit-user-select: none;
}

.boombox-handle,
.boombox-speaker,
.boombox-screen {
  cursor: grab;
  touch-action: none;
}

.boombox.dragging {
  z-index: 40;
  transition: none;
}

.boombox.dragging,
.boombox.dragging * { cursor: grabbing !important; }

@media (max-width: 600px) {
  .main-nav {
    top: 70px;
    bottom: auto;
  }
  .view:not(#home-view) { padding-top: 72px; }
  .shelf-wrap { top: 124px; }
  .world-active .boombox {
    top: 205px;
    bottom: auto;
  }
  .home-hud { bottom: max(8px, env(safe-area-inset-bottom)); }
  #home-view::before {
    display: none;
  }
  #home-view::after {
    top: calc(var(--world-ground) - 1px);
    height: 11px;
  }
}

/* Friendly care controls and grounded world events */
.topbar {
  min-height: 64px;
  height: 64px;
  padding-block: 8px;
}

.account-menu { top: 58px; }

.main-nav {
  top: 74px;
  bottom: auto;
}

.view:not(#home-view) { padding-top: 100px; }

#home-view {
  background: linear-gradient(180deg, #e9f9fd 0%, #cceef7 100%);
}

#home-view::after {
  height: 9px;
  background: linear-gradient(180deg, #83d56d 0%, #63b956 100%);
}

.grass-foreground {
  top: calc(var(--world-ground) - 7px);
  height: 12px;
  background:
    repeating-linear-gradient(83deg, transparent 0 12px, rgba(73, 160, 73, .82) 13px 14px, transparent 15px 22px),
    repeating-linear-gradient(97deg, transparent 0 17px, rgba(103, 185, 87, .78) 18px 19px, transparent 20px 28px),
    linear-gradient(180deg, transparent 0 2px, rgba(121, 202, 101, .18) 3px, rgba(112, 196, 92, .72) 6px, rgba(99, 181, 82, .96) 8px 100%);
  filter: drop-shadow(0 -1px 1px rgba(68, 145, 68, .1));
}

.shelf-wrap,
.home-hud { top: 136px; }

.care-panel {
  display: grid;
  width: min(292px, calc(100vw - 32px));
  max-height: calc(100dvh - 150px);
  gap: 10px;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(52, 86, 116, .14);
  border-radius: 26px;
  background: rgba(255, 255, 255, .93);
  box-shadow: inset 0 1px 0 white, 0 18px 48px rgba(57, 88, 116, .16);
  scrollbar-width: thin;
  scrollbar-color: rgba(39, 159, 140, .3) transparent;
}

.pet-identity { align-items: center; }
.pet-identity strong { font-size: 20px; }
.pet-identity span { margin-top: 2px; font-size: 8px; }
.pet-identity-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }

.pet-identity .pet-identity-actions button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  color: #168a77;
  background: rgba(225, 247, 243, .72);
  font-size: 8px;
}

.pet-identity .pet-identity-actions .care-close {
  width: 30px;
  padding: 0;
  color: #51657b;
  background: rgba(231, 238, 245, .82);
  font-family: system-ui, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.care-rings {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.care-rings svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.care-ring-track,
.care-ring-value {
  fill: none;
  stroke-width: 7;
}

.care-ring-track { stroke: rgba(56, 80, 107, .09); }
.care-ring-value {
  stroke-linecap: round;
  transition: stroke-dasharray .35s ease;
}
.care-ring-value.health { stroke: #42bd92; }
.care-ring-value.food { stroke: #ed9b70; }
.care-ring-value.water { stroke: #5eb9df; }
.care-ring-value.clean { stroke: #987ee7; }

.care-ring-center {
  position: absolute;
  inset: 52px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(50, 80, 107, .1);
  border-radius: 50%;
  color: #20364c;
  background: rgba(248, 252, 255, .96);
  box-shadow: 0 5px 15px rgba(65, 93, 119, .11);
  text-align: center;
}

.care-ring-center strong { font-size: 17px; line-height: .95; }
.care-ring-center span { color: #8190a1; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }

.care-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.care-values > span {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
  color: #74859a;
  font-size: 8px;
  text-align: left;
}

.care-values i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.care-values b { grid-column: 2; color: #31465c; font-size: 10px; }
.care-values .health { color: #42a984; }
.care-values .food { color: #dc855d; }
.care-values .water { color: #429bc1; }
.care-values .clean { color: #8268d1; }

.care-panel .care-buttons {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 1px;
}

.care-panel .care-button {
  display: grid;
  width: 66px;
  min-height: 66px;
  aspect-ratio: 1;
  justify-self: center;
  place-content: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(46, 76, 104, .13);
  border-radius: 50%;
  color: #3c5167;
  background: rgba(248, 251, 254, .96);
  box-shadow: 0 7px 17px rgba(55, 87, 116, .1);
}

.care-panel .care-button:hover {
  border-color: rgba(32, 166, 141, .34);
  color: #23453f;
  background: white;
  transform: translateY(-2px);
}

.care-panel .care-button:active { transform: translateY(1px) scale(.97); }
.care-panel .care-button span { font-size: 15px; line-height: 1; }
.care-panel .care-button small { font-size: 9px; }
.care-panel .care-button.feed span { color: #e78b64; }
.care-panel .care-button.water span { color: #4faed5; }
.care-panel .care-button.clean span { color: #8c72dc; }

.care-panel .pet-actions { margin-top: 0; }
.care-panel .pet-actions .button { min-height: 36px; border-radius: 12px; }
.care-panel .traits-details { margin-top: 0; }
.care-panel .traits-details[open] { padding-bottom: 2px; }
.care-panel .trait-list { max-height: 138px; }

.world-event-layer {
  position: fixed;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.world-event-active .chumkin-world { pointer-events: none; }
.hatch-sequence,
.portal-sequence { position: absolute; inset: 0; }

.hatch-glow {
  position: absolute;
  left: var(--event-x);
  top: calc(var(--event-ground) - 25px);
  width: 150px;
  height: 34px;
  border-radius: 50%;
  opacity: .4;
  background: radial-gradient(ellipse, rgba(255, 217, 116, .78), rgba(255, 234, 172, 0) 70%);
  transform: translateX(-50%);
  transition: opacity .3s ease, transform .3s ease;
}

.hatch-sequence.open .hatch-glow { opacity: .9; transform: translateX(-50%) scale(1.35); }

.chumkin-egg-art {
  width: 60px;
  height: 76px;
  overflow: hidden;
  border: 2px solid #665b70;
  border-radius: 52% 52% 47% 47% / 63% 63% 38% 38%;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, .98), transparent 25%),
    linear-gradient(145deg, #fffdf3 0%, #f4ead8 72%, #e2d4c2 100%);
  box-shadow: inset 6px 7px 11px rgba(255, 255, 255, .7), inset -5px -7px 10px rgba(118, 88, 99, .09), 0 8px 11px rgba(58, 74, 88, .15);
}

.hatch-egg {
  position: absolute;
  left: var(--event-x);
  top: calc(var(--event-ground) - 78px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}

.egg-speck { position: absolute; width: 6px; height: 5px; border-radius: 50%; opacity: .52; background: #cfb7cf; }
.egg-speck.one { top: 23px; left: 13px; transform: rotate(-20deg); }
.egg-speck.two { top: 42px; right: 10px; width: 8px; background: #a8cfd0; transform: rotate(18deg); }
.egg-speck.three { bottom: 10px; left: 24px; width: 5px; height: 4px; background: #e7c08c; }

.hatch-crack { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; }
.hatch-crack path { fill: none; stroke: #62576b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hatch-sequence.warming .hatch-egg { animation: hatch-warm-wobble .68s ease-in-out infinite; }
.hatch-sequence.cracking .hatch-egg { animation: hatch-crack-wobble .23s ease-in-out infinite; }
.hatch-sequence.cracking .hatch-crack { opacity: 1; animation: crack-flash .24s steps(2, end) infinite; }
.hatch-sequence.open .hatch-egg { animation: egg-pop-away .13s ease-out forwards; }

.shell-piece {
  position: absolute;
  z-index: 2;
  left: var(--event-x);
  top: calc(var(--event-ground) - 39px);
  width: 34px;
  height: 29px;
  border: 2px solid #665b70;
  opacity: 0;
  background: linear-gradient(145deg, #fffdf3, #eadfcd);
}
.shell-left { border-radius: 8px 5px 60% 45%; clip-path: polygon(0 0, 30% 16%, 53% 0, 78% 17%, 100% 3%, 100% 100%, 0 100%); }
.shell-right { border-radius: 5px 8px 45% 60%; clip-path: polygon(0 3%, 25% 17%, 49% 0, 72% 16%, 100% 0, 100% 100%, 0 100%); }
.hatch-sequence.open .shell-left { animation: shell-left-pop .72s cubic-bezier(.2,.7,.2,1) forwards; }
.hatch-sequence.open .shell-right { animation: shell-right-pop .72s cubic-bezier(.2,.7,.2,1) forwards; }

.hatch-pet,
.portal-pet {
  position: absolute;
  left: var(--event-x);
  top: var(--event-ground);
  opacity: 0;
  transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54));
  transform-origin: 50% 100%;
}
.hatch-pet .blob,
.portal-pet .blob { animation: none; }
.hatch-sequence.open .hatch-pet { animation: hatch-pet-pop .78s cubic-bezier(.16,.8,.2,1.2) forwards; }
.hatch-sequence.settled .hatch-pet { opacity: 0; transition: opacity .18s ease; }

.hatch-sparkles { position: absolute; left: var(--event-x); top: calc(var(--event-ground) - 57px); }
.hatch-sparkles i { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; background: #f2c85e; box-shadow: 0 0 9px rgba(245, 194, 71, .5); }
.hatch-sparkles i:nth-child(1) { --spark-x: -68px; --spark-y: -46px; }
.hatch-sparkles i:nth-child(2) { --spark-x: -49px; --spark-y: 2px; background: #6cc8de; }
.hatch-sparkles i:nth-child(3) { --spark-x: -19px; --spark-y: -71px; background: #9b7ee4; }
.hatch-sparkles i:nth-child(4) { --spark-x: 24px; --spark-y: -72px; background: #65caa2; }
.hatch-sparkles i:nth-child(5) { --spark-x: 53px; --spark-y: -19px; background: #e88f75; }
.hatch-sparkles i:nth-child(6) { --spark-x: 70px; --spark-y: -51px; background: #f2c85e; }
.hatch-sequence.open .hatch-sparkles i { animation: hatch-spark .72s ease-out forwards; }

.cabinet-portal {
  position: absolute;
  z-index: 2;
  left: var(--portal-x);
  top: calc(var(--event-ground) - 108px);
  width: 84px;
  height: 108px;
  border: 3px solid rgba(55, 77, 102, .74);
  border-radius: 44px 44px 11px 11px;
  background: linear-gradient(145deg, #89dfcc, #6e9fe2 62%, #8074cf);
  box-shadow: 0 14px 30px rgba(55, 81, 111, .24), 0 0 0 8px rgba(128, 203, 205, .15);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: portal-door-cycle 1.25s ease-in-out forwards;
}

.cabinet-portal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 35px 35px 6px 6px;
  background: radial-gradient(circle at 50% 44%, #eafcff 0 5%, #8be1dc 19%, #6b76c9 52%, #263c68 100%);
  box-shadow: inset 0 0 18px rgba(242, 254, 255, .7);
}

.cabinet-portal i {
  position: absolute;
  z-index: 1;
  inset: 17px 15px 8px;
  border-radius: 30px 30px 5px 5px;
  background: radial-gradient(ellipse at center, rgba(223, 255, 250, .92), rgba(94, 170, 192, .44) 38%, rgba(29, 45, 86, .92) 76%);
  animation: portal-shimmer .48s ease-in-out infinite alternate;
}

.cabinet-portal span {
  position: absolute;
  z-index: 2;
  top: 48px;
  right: 13px;
  color: #fff8c7;
  font-size: 10px;
  text-shadow: 0 0 7px white;
}

.portal-pet {
  z-index: 3;
  left: var(--from-x);
  opacity: 1;
  transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54));
}
.portal-sequence.exit .portal-pet { animation: portal-pet-exit 1.08s cubic-bezier(.45,.02,.34,1) forwards; }
.portal-sequence.entrance .cabinet-portal { animation-duration: 1.46s; }
.portal-sequence.entrance .portal-pet { animation: portal-pet-enter 1.12s cubic-bezier(.2,.72,.24,1) forwards; }
.portal-sequence.entrance.arrived .portal-pet {
  left: var(--to-x);
  opacity: 1;
  animation: none;
  transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54));
  transition: opacity .34s ease-out;
}
.portal-sequence.entrance.arrived.handoff .portal-pet { opacity: 0; }

@keyframes hatch-warm-wobble {
  0%, 100% { transform: translateX(-50%) rotate(-2deg) scale(1); }
  50% { transform: translateX(-50%) rotate(2deg) scale(1.015, .99); }
}
@keyframes hatch-crack-wobble {
  0%, 100% { transform: translateX(-50%) rotate(-7deg) scale(1.02, .98); }
  50% { transform: translateX(-50%) rotate(8deg) scale(.98, 1.025); }
}
@keyframes crack-flash { 0%, 35% { opacity: .55; } 36%, 100% { opacity: 1; } }
@keyframes egg-pop-away { to { opacity: 0; transform: translateX(-50%) scale(1.1, .68); } }
@keyframes shell-left-pop {
  0% { opacity: 1; transform: translateX(-100%) rotate(0); }
  100% { opacity: 0; transform: translate(-78px, 21px) rotate(-55deg); }
}
@keyframes shell-right-pop {
  0% { opacity: 1; transform: translateX(0) rotate(0); }
  100% { opacity: 0; transform: translate(46px, 22px) rotate(55deg); }
}
@keyframes hatch-pet-pop {
  0% { opacity: 0; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
}
@keyframes hatch-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.15); }
}
@keyframes portal-door-cycle {
  0% { opacity: 0; transform: translateX(-50%) scale(.72, .1); }
  18%, 78% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(.78, .08); }
}
@keyframes portal-shimmer { from { filter: hue-rotate(-8deg) brightness(.92); } to { filter: hue-rotate(12deg) brightness(1.13); } }
@keyframes portal-pet-exit {
  0% { left: var(--from-x); opacity: 1; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
  70% { opacity: 1; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
  100% { left: var(--to-x); opacity: 0; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
}
@keyframes portal-pet-enter {
  0% { left: var(--from-x); opacity: 0; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
  16% { opacity: 0; }
  42% { opacity: 1; }
  100% { left: var(--to-x); opacity: 1; transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54)); }
}

@media (max-width: 600px) {
  .app-shell { padding-bottom: 28px; }

  .topbar {
    min-height: 58px;
    height: 58px;
    padding: 7px 10px;
  }
  .logo-button { font-size: 21px; }
  .account-pills { gap: 6px; }
  .mini-pill { min-width: 34px; height: 34px; padding-inline: 8px; }
  .avatar-pill { width: 34px; min-width: 34px; height: 34px; }
  .account-menu { top: 54px; right: 10px; width: min(280px, calc(100vw - 20px)); }

  .main-nav {
    top: 64px;
    width: min(420px, calc(100% - 16px));
    padding: 4px;
    border-radius: 13px;
  }
  .nav-button {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 4px 3px;
    border-radius: 9px;
    font-size: 9px;
  }
  .nav-button span { font-size: 13px; }

  .view:not(#home-view) {
    width: calc(100% - 20px);
    padding-top: 68px;
  }
  .section-heading { margin-bottom: 12px; }
  .section-heading h1 { font-size: 32px; }
  .info-chip { margin-bottom: 14px; padding: 11px 13px; font-size: 11px; }
  .item-card { min-height: 225px; padding: 16px; }
  .panel-card { padding: 15px; }
  .transfer-row { grid-template-columns: 50px minmax(0, 1fr); }

  .shelf-wrap {
    top: 116px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 66px;
    padding: 4px;
    border-radius: 12px;
  }
  .shelf-pet { flex: 0 0 54px; width: 54px; min-height: 56px; padding: 3px; }
  .shelf-pet small { width: 47px; font-size: 7px; }

  .world-active .boombox {
    top: 192px;
    bottom: auto;
    left: 10px;
    grid-template-columns: minmax(0, 1fr);
    width: 156px;
    height: 52px;
    padding: 6px;
  }
  .boombox-speaker { display: none; }
  .boombox-handle { top: -9px; width: 54px; height: 11px; border-width: 3px; }
  .boombox-deck { gap: 3px; }
  .boombox-screen { height: 17px; }
  .boombox-controls { grid-template-columns: 20px 23px 1fr; gap: 4px; }
  .boombox-power { width: 20px; height: 20px; }
  .boombox-sfx { width: 23px; height: 20px; }

  .home-hud.care-panel {
    top: auto;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: auto;
    width: min(286px, calc(100vw - 20px));
    max-height: calc(100dvh - 126px);
    padding: 12px;
    border-radius: 24px;
  }
  .care-rings { width: 136px; height: 136px; }
  .care-ring-center { inset: 47px; }
  .care-panel .care-button { width: 61px; min-height: 61px; }
  .care-panel .trait-list { max-height: none; }
  .hatch-pet,
  .portal-pet { transform-origin: 50% 100%; }
  .cabinet-portal { width: 72px; height: 94px; top: calc(var(--event-ground) - 94px); }
}

/* Chumkins logo lockup */
.brand-showcase {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  width: 100%;
}

.brand-showcase-image {
  display: block;
  width: min(100%, 650px);
  height: auto;
  border: 1px solid rgba(43, 69, 101, .14);
  border-radius: 30px;
  background: white;
  box-shadow: inset 0 1px 0 white, 0 28px 70px rgba(52, 74, 111, .18);
}

.brand-showcase .logo { text-align: center; }

.logo-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo-button img {
  display: block;
  width: 52px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(43, 69, 101, .12);
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 4px 13px rgba(55, 80, 112, .13);
}

.logo-button span { line-height: 1; }

/* Vertical playlist boombox */
.boombox,
.world-active .boombox {
  display: flex;
  width: 126px;
  height: 282px;
  padding: 11px;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  border-radius: 20px;
}

.boombox-deck {
  display: grid;
  width: 100%;
  gap: 7px;
}

.boombox-screen {
  display: grid;
  height: 36px;
  padding: 5px 7px;
  align-content: center;
  gap: 2px;
  border-radius: 7px;
}

.boombox-screen strong,
.boombox-screen span {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boombox-screen strong { font-size: 8px; }
.boombox-screen span { font-size: 6px; }

.boombox-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.boombox-power,
.boombox-skip,
.boombox-sfx {
  display: grid;
  width: 100%;
  height: 28px;
  min-width: 0;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(169, 190, 224, .24);
  border-radius: 7px;
  color: #7d8da4;
  background: rgba(21, 30, 47, .9);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.boombox-power { font-size: 12px; }
.boombox-sfx { font-size: 6px; }
.boombox-skip:hover { border-color: rgba(255, 207, 88, .55); color: #ffd36e; }

.boombox-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  gap: 6px;
}

.boombox-speakers {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: auto;
}

.boombox-speaker {
  display: block;
  width: 68px;
  height: 68px;
}

.boombox-speaker i { inset: 18px; }

@media (max-width: 900px) {
  .auth-art {
    display: block;
    width: min(100%, 500px);
    margin-inline: auto;
  }
  .auth-card::before { display: none; }
  .brand-showcase { gap: 12px; }
  .brand-showcase-image { width: min(100%, 450px); border-radius: 22px; }
  .brand-showcase .logo-giant { font-size: clamp(46px, 12vw, 72px); }
}

@media (max-width: 600px) {
  .auth-shell { gap: 18px; }
  .auth-art { width: min(100%, 330px); }
  .brand-showcase-image { width: min(100%, 300px); border-radius: 17px; }
  .brand-showcase .logo-giant { font-size: clamp(40px, 14vw, 58px); }

  .logo-button { gap: 7px; font-size: 19px; }
  .logo-button img { width: 38px; height: 26px; border-radius: 8px; }

  .boombox {
    top: auto;
    bottom: 72px;
    left: 8px;
  }
  .boombox,
  .world-active .boombox {
    grid-template-columns: none;
    width: 98px;
    height: 230px;
    padding: 8px;
    gap: 6px;
    border-radius: 16px;
  }
  .world-active .boombox { top: 192px; bottom: auto; left: 10px; }
  .boombox-handle { top: -10px; width: 54px; height: 12px; border-width: 3px; }
  .boombox-deck { gap: 5px; }
  .boombox-screen { height: 31px; padding: 4px 6px; }
  .boombox-screen strong { font-size: 7px; }
  .boombox-screen span { font-size: 5px; }
  .boombox-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .boombox-power,
  .boombox-skip,
  .boombox-sfx { width: 100%; height: 24px; }
  .boombox-power { font-size: 10px; }
  .boombox-skip { font-size: 8px; }
  .boombox-sfx { font-size: 5px; }
  .boombox-volume { gap: 4px; }
  .boombox-volume span { display: block; font-size: 5px; }
  .boombox-speakers { gap: 5px; }
  .boombox-speaker { display: block; width: 51px; height: 51px; }
  .boombox-speaker i { inset: 14px; }
}

/* Physical supply dock */
.brand-showcase-image {
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 24px 32px rgba(58, 67, 112, .18));
}

.logo-button img {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.world-supplies {
  position: fixed;
  z-index: 19;
  top: 150px;
  left: 50%;
  display: grid;
  width: 178px;
  padding: 7px;
  gap: 5px;
  border: 1px solid rgba(43, 69, 101, .13);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(235, 247, 253, .8));
  box-shadow: inset 0 1px 0 white, 0 14px 36px rgba(57, 85, 116, .14);
  backdrop-filter: blur(18px) saturate(125%);
  transform: translateX(-50%);
}

.world-supplies-label {
  color: #75879a;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  letter-spacing: .11em;
  text-align: center;
}

.world-supplies-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

.supply-tool {
  display: grid;
  min-width: 0;
  min-height: 58px;
  padding: 5px;
  place-items: center;
  gap: 2px;
  border: 1px solid rgba(43, 69, 101, .13);
  border-radius: 14px;
  color: #40566d;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 white;
  cursor: grab;
  touch-action: none;
}

.supply-tool:hover { border-color: rgba(36, 158, 139, .32); background: white; transform: translateY(-1px); }
.supply-tool:active,
.supply-tool.dragging { cursor: grabbing; transform: scale(.96); }
.supply-tool small { font-size: 8px; }

.supply-food-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.supply-food-icon b {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--food-edge, #c6534f);
  border-radius: 4px;
  background: var(--food-fill, #ff9f66);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .4);
  transform: rotate(-8deg);
}

.supply-food-icon b::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 5px;
  height: 4px;
  border-radius: 1px;
  background: var(--food-fleck, #ffd677);
}

.supply-water-icon {
  display: block;
  width: 24px;
  height: 30px;
  border: 1px solid #377fae;
  border-radius: 58% 42% 62% 38% / 70% 44% 56% 30%;
  background: radial-gradient(circle at 35% 28%, white 0 7%, transparent 8%), linear-gradient(145deg, #94e8ff, #3d9fe4);
  box-shadow: inset 3px 3px 6px rgba(255, 255, 255, .45), 0 5px 10px rgba(53, 143, 200, .18);
  transform: rotate(45deg);
}

.supply-drag-ghost {
  position: fixed;
  z-index: 80;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 7px 6px rgba(37, 67, 95, .24));
  pointer-events: none;
  transform: translate(8px, 7px);
}

.supply-drag-ghost .supply-food-icon { transform: scale(.9); }
.supply-drag-ghost .supply-water-icon { transform: rotate(45deg) scale(.78); }
body.supply-dragging,
body.supply-dragging * { cursor: grabbing !important; }
body.supply-dragging .chumkin-world { cursor: crosshair !important; }

@media (max-width: 600px) {
  .world-supplies {
    top: 192px;
    right: 10px;
    left: auto;
    width: 130px;
    padding: 6px;
    transform: none;
  }
  .world-supplies-label { display: none; }
  .supply-tool { min-height: 52px; padding: 4px; }
  .supply-tool small { font-size: 7px; }
  .supply-food-icon { transform: scale(.86); }
  .supply-water-icon { transform: rotate(45deg) scale(.86); }
}

.chumkin-world-input { z-index: 1; }

.boombox,
.world-active .boombox,
.boombox.dragging {
  z-index: 2;
  height: 206px;
}

.chumkin-world-front {
  z-index: 3;
  pointer-events: none;
}

.grass-foreground { z-index: 4; }

@media (max-width: 600px) {
  .boombox,
  .world-active .boombox,
  .boombox.dragging {
    height: 174px;
  }
}

.grass-foreground {
  top: calc(var(--world-ground) + 2px);
  bottom: 0;
  height: auto;
  background:
    repeating-linear-gradient(84deg, transparent 0 15px, rgba(70, 155, 69, .82) 16px 17px, transparent 18px 25px),
    repeating-linear-gradient(96deg, transparent 0 20px, rgba(99, 181, 82, .76) 21px 22px, transparent 23px 31px),
    linear-gradient(180deg, rgba(119, 201, 99, .74), rgba(84, 164, 72, .98));
}

#home-view::after {
  display: none;
}

.grass-foreground,
.landing-grass {
  top: auto;
  bottom: 0;
  height: 9px;
  filter: none;
  background: linear-gradient(180deg, transparent 0 4px, #2f8b3d 4px 6px, #70452b 6px 9px);
  box-shadow: none;
}

.grass-foreground::before,
.landing-grass::before,
.grass-foreground::after,
.landing-grass::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
}

.grass-foreground::before,
.landing-grass::before {
  bottom: 3px;
  height: 6px;
  background:
    linear-gradient(72deg, transparent 0 42%, #348f3d 43% 59%, transparent 60%) 1px 0 / 9px 6px repeat-x,
    linear-gradient(106deg, transparent 0 43%, #429c46 44% 60%, transparent 61%) 4px 1px / 11px 5px repeat-x,
    linear-gradient(82deg, transparent 0 40%, #267f37 41% 58%, transparent 59%) 7px 2px / 13px 4px repeat-x;
}

.grass-foreground::after,
.landing-grass::after {
  bottom: 3px;
  height: 4px;
  background:
    linear-gradient(98deg, transparent 0 39%, #3d9441 40% 62%, transparent 63%) 0 0 / 7px 4px repeat-x,
    linear-gradient(77deg, transparent 0 42%, #2b8438 43% 61%, transparent 62%) 3px 1px / 15px 3px repeat-x;
}

.auth-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: clip;
  isolation: isolate;
}

.landing-scene {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 38%, rgba(255, 255, 255, .38), transparent 30%),
    radial-gradient(ellipse at 92% 66%, rgba(78, 166, 226, .13), transparent 34%),
    radial-gradient(circle at 48% 112%, rgba(83, 218, 174, .29), transparent 46%),
    linear-gradient(180deg, #e9faff 0%, #d7f1fb 68%, #cbebdd 100%);
  background-repeat: no-repeat;
}

.landing-scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .82;
  background:
    radial-gradient(circle at 7% 18%, rgba(255, 255, 255, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 22% 52%, rgba(255, 255, 255, .72) 0 5px, transparent 6px),
    radial-gradient(circle at 36% 27%, rgba(255, 255, 255, .88) 0 2px, transparent 3px),
    radial-gradient(circle at 51% 69%, rgba(255, 255, 255, .78) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 39%, rgba(255, 255, 255, .92) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, .7) 0 5px, transparent 6px),
    radial-gradient(circle at 94% 29%, rgba(255, 255, 255, .86) 0 2px, transparent 3px),
    radial-gradient(circle at 14% 84%, rgba(255, 255, 255, .76) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 12%, rgba(255, 255, 255, .7) 0 4px, transparent 5px);
  background-repeat: no-repeat;
}

.landing-pet-layer {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .4;
  background:
    radial-gradient(circle at 14% 68%, rgba(77, 157, 225, .16), transparent 23%),
    radial-gradient(circle at 88% 18%, rgba(135, 111, 235, .14), transparent 25%);
}

.landing-sun {
  position: absolute;
  z-index: 1;
  top: calc(76px + clamp(28px, 5vh, 62px));
  right: clamp(-18px, 5vw, 82px);
  width: clamp(88px, 9vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .68;
  background: radial-gradient(circle at 38% 34%, #fff7c5, #ffd875 58%, #f8c55e 100%);
  box-shadow: 0 0 0 18px rgba(255, 217, 117, .14), 0 0 90px rgba(255, 201, 76, .28);
}

.landing-chumkin-world {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
}

.landing-grass {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
}

.landing-scroll {
  position: relative;
  z-index: 4;
  width: 100%;
}

.landing-hero {
  position: relative;
  display: grid;
  width: min(1240px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 50px) clamp(28px, 6vw, 88px) clamp(86px, 9vh, 112px);
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 460px);
  align-items: center;
  align-content: start;
  column-gap: clamp(26px, 6vw, 92px);
  row-gap: clamp(22px, 3vw, 38px);
}

.landing-brand {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.landing-intro {
  min-width: 0;
  max-width: 760px;
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(45, 83, 113, .11);
  border-radius: clamp(34px, 5vw, 58px);
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 1px 0 white, 0 28px 80px rgba(55, 92, 118, .13);
  backdrop-filter: blur(22px) saturate(120%);
}

.landing-logo {
  display: block;
  width: clamp(72px, 9vw, 112px);
  max-height: 100px;
  margin: 0;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 24px rgba(76, 86, 131, .15));
}

.landing-brand h1 {
  max-width: 100%;
  margin: 0;
  color: #17263a;
  font-size: clamp(46px, 7vw, 90px);
  line-height: .86;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.landing-intro p {
  max-width: 680px;
  margin: 22px 0 0;
  color: #496175;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 650;
  line-height: 1.55;
}

.landing-intro .landing-lead {
  margin-top: 0;
  color: #263d51;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.landing-hero .auth-card {
  width: 100%;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(42, 77, 106, .14);
  border-radius: 30px;
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 0 white, 0 28px 80px rgba(50, 82, 108, .17);
  backdrop-filter: blur(28px) saturate(130%);
}

.landing-scroll-cue {
  position: absolute;
  bottom: clamp(18px, 3vh, 34px);
  left: 50%;
  display: inline-flex;
  min-height: 46px;
  padding: 8px 11px 8px 17px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(41, 83, 111, .13);
  border-radius: 999px;
  color: #36536a;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 white, 0 12px 32px rgba(54, 92, 117, .12);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.landing-scroll-cue b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #42a8dc, #27b999);
  font-size: 18px;
  animation: landing-cue-bob 1.6s ease-in-out infinite;
}

@keyframes landing-cue-bob {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

.landing-story {
  display: grid;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 10vh 0 18vh;
  gap: 12vh;
}

.landing-feature {
  position: relative;
  width: min(740px, 76%);
  min-height: clamp(250px, 38vh, 370px);
  padding: clamp(32px, 6vw, 68px);
  overflow: hidden;
  border: 1px solid rgba(40, 78, 107, .12);
  border-radius: clamp(38px, 6vw, 64px);
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 white, 0 32px 90px rgba(47, 83, 108, .16);
  backdrop-filter: blur(26px) saturate(125%);
}

.landing-feature:nth-child(even) { margin-left: auto; }

.landing-feature::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -85px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: .52;
  background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .94), rgba(95, 206, 180, .38) 48%, rgba(53, 146, 208, .18));
}

.landing-feature.care::after { background: radial-gradient(circle at 36% 34%, white, rgba(78, 178, 230, .4) 48%, rgba(65, 129, 207, .16)); }
.landing-feature.life::after { background: radial-gradient(circle at 36% 34%, white, rgba(245, 193, 92, .48) 48%, rgba(218, 133, 87, .18)); }
.landing-feature.company::after { background: radial-gradient(circle at 36% 34%, white, rgba(149, 121, 229, .38) 48%, rgba(101, 98, 191, .16)); }

.landing-feature h2,
.landing-close h2 {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: #1b3043;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: .92;
  letter-spacing: -.06em;
}

.landing-feature p,
.landing-close p {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: clamp(24px, 4vw, 42px) 0 0;
  color: #4e6679;
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 650;
  line-height: 1.5;
}

.landing-close {
  width: min(1050px, calc(100% - 32px));
  margin: 0 auto 18vh;
  padding: clamp(44px, 8vw, 96px);
  border: 1px solid rgba(45, 83, 111, .12);
  border-radius: clamp(42px, 7vw, 72px);
  text-align: center;
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 1px 0 white, 0 34px 100px rgba(47, 81, 106, .17);
  backdrop-filter: blur(28px) saturate(125%);
}

.landing-close h2,
.landing-close p { margin-right: auto; margin-left: auto; }

.landing-join {
  display: inline-flex;
  min-height: 58px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 14px 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(13, 130, 143, .26);
  border-radius: 22px;
  color: white;
  background: linear-gradient(115deg, #258fd4, #18b99d);
  box-shadow: 0 14px 32px rgba(29, 151, 158, .2);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.landing-join:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(29, 151, 158, .27); }

@media (max-width: 900px) {
  .landing-hero {
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 18vh;
    grid-template-columns: 1fr;
  }
  .landing-intro { max-width: none; }
  .landing-hero .auth-card { width: min(520px, 100%); margin: 0 auto; }
  .landing-scroll-cue {
    position: static;
    justify-self: center;
    transform: none;
  }
  .landing-feature { width: min(850px, 92%); }
  .landing-feature:nth-child(even) { margin-left: auto; }
}

@media (max-width: 600px) {
  .landing-hero { padding: 18px 12px 12vh; gap: 22px; }
  .landing-brand { gap: 10px; }
  .landing-intro { padding: 28px 22px 32px; border-radius: 34px; }
  .landing-logo { width: 62px; max-height: 58px; }
  .landing-brand h1 { font-size: clamp(40px, 13vw, 58px); }
  .landing-intro .landing-lead { margin-top: 24px; font-size: 25px; }
  .landing-intro p { font-size: 16px; }
  .landing-hero .auth-card { padding: 18px; border-radius: 24px; }
  .landing-hero .auth-card::before { content: none; }
  .landing-story { width: calc(100% - 20px); padding-top: 9vh; gap: 14vh; }
  .landing-feature {
    width: 100%;
    min-height: 280px;
    padding: 38px 28px;
    border-radius: 38px;
  }
  .landing-feature h2,
  .landing-close h2 { font-size: clamp(38px, 12vw, 52px); }
  .landing-feature p,
  .landing-close p { font-size: 17px; }
  .landing-close { width: calc(100% - 20px); margin-bottom: 14vh; padding: 48px 26px; border-radius: 40px; }
  .landing-sun { top: 28px; right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-scroll-cue b { animation: none; }
}

.shop-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.shop-offer {
  grid-column: span 4;
  min-width: 0;
  min-height: 372px;
  padding: 22px;
  gap: 15px;
  border: 1px solid rgba(46, 78, 111, .14);
  border-radius: 26px;
  outline: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(241, 248, 253, .9));
  box-shadow: inset 0 1px 0 white, 0 18px 42px rgba(50, 83, 113, .12);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.shop-offer::before {
  inset: 0;
  height: 100%;
  opacity: .7;
  background: radial-gradient(circle at 92% 3%, rgba(115, 203, 237, .16), transparent 34%);
}

.shop-offer:hover {
  z-index: 2;
  transform: translateY(-3px);
  border-color: rgba(32, 159, 154, .3);
  box-shadow: inset 0 1px 0 white, 0 24px 54px rgba(46, 88, 120, .17);
}

.shop-offer > .button {
  min-height: 50px;
  border-radius: 15px;
  font-size: 14px;
}

.shop-grid .button:disabled { cursor: not-allowed; }

.offer-topline {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.offer-mark {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(43, 69, 101, .12);
  border-radius: 18px;
  color: #167fbc;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(222, 241, 250, .8));
  box-shadow: inset 0 1px 0 white, 0 8px 22px rgba(54, 91, 122, .1);
  font-size: 25px;
  font-weight: 900;
}

.token-mark { color: #0e9f85; background: linear-gradient(145deg, #e4fbf5, #d9f1f2); }
.bundle-mark { position: relative; color: #5c50c5; background: linear-gradient(145deg, #f1edff, #e6f6fb); }
.bundle-mark b { transform: translate(-7px, -4px); font-size: 22px; }
.bundle-mark i { position: absolute; right: 8px; bottom: 6px; color: #278cc5; font-size: 18px; font-style: normal; }
.mega-mark { border-color: rgba(103, 85, 213, .18); color: white; background: linear-gradient(140deg, #6f61dc, #2e9ec6); }
.nanny-mark { color: white; background: linear-gradient(140deg, #2695d0, #17ad91); }

.offer-label,
.offer-badge {
  display: inline-flex;
  max-width: 100%;
  min-height: 29px;
  padding: 6px 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(45, 75, 105, .12);
  border-radius: 999px;
  color: #66778b;
  background: rgba(241, 247, 252, .88);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1;
  white-space: nowrap;
}

.offer-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.offer-badge-popular {
  border-color: rgba(15, 158, 132, .2);
  color: #0b8c75;
  background: #e3faf4;
}

.offer-badge-best {
  border: 0;
  color: white;
  background: linear-gradient(110deg, #6758d2, #2b98c6);
  box-shadow: 0 8px 20px rgba(88, 74, 196, .2);
}

.offer-badge-active {
  border-color: rgba(13, 151, 126, .2);
  color: #087c68;
  background: #dff9f1;
}

.offer-heading {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.offer-heading h2 {
  min-width: 0;
  margin: 0;
  color: #1c2d43;
  font-size: clamp(22px, 2.1vw, 29px);
  letter-spacing: -.045em;
  line-height: 1.02;
}

.offer-price {
  flex: 0 0 auto;
  color: #128d77;
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .95;
  white-space: nowrap;
}

.token-price {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 11px;
  color: #126f88;
  background: rgba(220, 242, 250, .76);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-offer p {
  margin: 0;
  color: #687a8f;
  font-size: 14px;
  line-height: 1.5;
}

.offer-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.offer-list li {
  position: relative;
  padding-left: 21px;
  color: #465c72;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.offer-list li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: #10a489;
  font-weight: 1000;
}

.shop-offer-value {
  border-color: rgba(23, 169, 142, .24);
  background: linear-gradient(150deg, rgba(250, 255, 253, .99), rgba(226, 249, 244, .9));
}

.shop-offer-mega {
  border-color: rgba(104, 87, 211, .25);
  background:
    radial-gradient(circle at 100% 0, rgba(126, 109, 232, .2), transparent 38%),
    linear-gradient(150deg, rgba(253, 252, 255, .99), rgba(235, 239, 255, .92));
}

.shop-offer-mega::before {
  background: radial-gradient(circle at 10% 105%, rgba(50, 179, 188, .17), transparent 38%);
}

.shop-offer-mega .offer-price { color: #5a4bc4; }
.shop-offer-mega .button-primary { background: linear-gradient(115deg, #6658d4, #2b99c8); }
.shop-offer-mega .button-primary:hover { border-color: #584abf; background: linear-gradient(115deg, #584ac4, #2385af); }

.shop-token-item {
  grid-column: span 3;
  min-height: 304px;
}

.item-mark .egg-mini {
  width: 37px;
  height: 48px;
  border-width: 2px;
}

.envelope-mark .envelope-art {
  width: 47px;
  height: 31px;
  border-width: 2px;
  transform: none;
}

.shop-offer-nanny {
  grid-column: span 6;
  min-height: 304px;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .92fr);
  align-items: stretch;
  border-color: rgba(33, 145, 190, .2);
  background:
    radial-gradient(circle at 9% 100%, rgba(41, 190, 161, .16), transparent 38%),
    linear-gradient(150deg, rgba(250, 254, 255, .99), rgba(228, 243, 252, .92));
}

.nanny-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 15px;
}

.nanny-control { display: grid; min-width: 0; align-items: stretch; }
.nanny-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.nanny-plan {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 17px 14px;
  align-content: center;
  justify-items: start;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(43, 69, 101, .14);
  border-radius: 18px;
  color: #283d55;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 white, 0 10px 25px rgba(51, 86, 117, .08);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.nanny-plan:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(22, 158, 137, .32);
  box-shadow: inset 0 1px 0 white, 0 14px 30px rgba(46, 91, 118, .13);
}

.nanny-plan.featured {
  border-color: rgba(86, 74, 194, .23);
  background: linear-gradient(145deg, rgba(247, 245, 255, .98), rgba(229, 239, 255, .92));
}

.nanny-plan:disabled { opacity: .56; cursor: not-allowed; }
.nanny-plan-name { color: #6a7b90; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.nanny-plan strong { color: #17334a; font-size: 20px; letter-spacing: -.035em; }
.nanny-plan small { color: #718399; font-size: 11px; }
.nanny-plan em {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 7px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(110deg, #6758d2, #2b98c6);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.nanny-covered {
  display: grid;
  min-height: 100%;
  padding: 24px;
  place-content: center;
  gap: 6px;
  border: 1px solid rgba(16, 164, 137, .2);
  border-radius: 20px;
  color: #176d5e;
  background: rgba(226, 250, 244, .8);
  text-align: center;
}

.nanny-covered strong { font-size: 22px; }
.nanny-covered span { color: #608477; font-size: 13px; }

@media (max-width: 1100px) {
  .shop-offer { grid-column: span 6; }
  .shop-offer-mega,
  .shop-offer-nanny { grid-column: span 12; }
  .shop-token-item { grid-column: span 6; }
}

@media (max-width: 700px) {
  .shop-grid { gap: 13px; }
  .shop-offer,
  .shop-offer-mega,
  .shop-token-item,
  .shop-offer-nanny { grid-column: span 12; min-height: 0; padding: 18px; border-radius: 22px; }
  .shop-offer-nanny { grid-template-columns: 1fr; }
  .offer-heading h2 { font-size: 24px; }
  .offer-price { font-size: 31px; }
}

@media (max-width: 440px) {
  .offer-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .nanny-plans { grid-template-columns: 1fr; }
  .offer-badge,
  .offer-label { white-space: normal; text-align: center; }
}

/* Mobile game shop */
.shop-heading {
  width: min(1040px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.shop-heading-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.shop-currency-note {
  display: inline-flex;
  min-height: 30px;
  padding: 7px 11px;
  align-items: center;
  border: 1px solid rgba(45, 75, 105, .14);
  border-radius: 999px;
  color: #607287;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 white;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.shop-screen {
  display: grid;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding-bottom: 64px;
  gap: 18px;
}

.shop-section {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 20px;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(45, 75, 105, .13);
  border-radius: 30px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .97), rgba(241, 248, 253, .91));
  box-shadow: inset 0 1px 0 white, 0 20px 48px rgba(50, 83, 113, .12);
}

.shop-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -120px;
  right: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(71, 184, 224, .1);
  pointer-events: none;
}

.shop-buy-section::before { background: rgba(111, 92, 220, .1); }
.shop-section > * { position: relative; z-index: 1; }

.shop-section-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.shop-section-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(30, 131, 144, .14);
  border-radius: 16px;
  color: white;
  background: linear-gradient(145deg, #22b79e, #278ed2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 9px 20px rgba(25, 148, 156, .18);
  font-size: 23px;
  font-weight: 900;
}

.shop-section-icon.buy {
  background: linear-gradient(145deg, #6b5dd3, #348fce);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 9px 20px rgba(80, 75, 184, .2);
  font-size: 29px;
}

.shop-section-title { min-width: 0; }
.shop-section-title span,
.shop-nanny-copy > span {
  display: block;
  margin-bottom: 2px;
  color: #748499;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.shop-section-title h2 {
  margin: 0;
  color: #1b2c42;
  font-size: clamp(25px, 3.4vw, 32px);
  letter-spacing: -.045em;
  line-height: 1;
}

.shop-balance {
  display: grid;
  margin-left: auto;
  padding: 7px 12px 8px;
  justify-items: end;
  border: 1px solid rgba(20, 158, 133, .17);
  border-radius: 15px;
  color: #176d61;
  background: rgba(226, 250, 244, .88);
  box-shadow: inset 0 1px 0 white;
}

.shop-balance small {
  color: #6c8a83;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop-balance strong { font-size: 17px; line-height: 1.1; }
.shop-balance strong span { margin-right: 4px; color: #0ca88c; }

.shop-spend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shop-spend-card {
  display: grid;
  min-width: 0;
  min-height: 160px;
  padding: 14px;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-areas:
    "art copy cost"
    "art action action";
  align-items: center;
  gap: 10px 13px;
  overflow: hidden;
  border: 1px solid rgba(42, 74, 105, .13);
  border-radius: 23px;
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 1px 0 white, 0 10px 28px rgba(52, 86, 116, .09);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.shop-spend-card.egg-card { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(240, 235, 255, .82)); }
.shop-spend-card.envelope-card { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(229, 249, 245, .84)); }

.shop-item-art {
  grid-area: art;
  display: grid;
  width: 92px;
  height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(45, 75, 105, .12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .88), transparent 35%),
    linear-gradient(155deg, #e6ddff, #d8f1fb);
  box-shadow: inset 0 1px 0 white;
}

.envelope-card .shop-item-art { background: linear-gradient(155deg, #dff8f0, #dbeefa); }
.shop-item-art .egg-mini { width: 57px; height: 75px; border-width: 2px; }
.shop-item-art .envelope-art { width: 68px; height: 44px; border-width: 2px; transform: rotate(-3deg); }

.shop-item-copy { grid-area: copy; min-width: 0; }
.shop-item-copy h3 {
  margin: 0 0 5px;
  color: #1d3048;
  font-size: 19px;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.shop-item-copy p {
  margin: 0;
  color: #718297;
  font-size: 11px;
  line-height: 1.35;
}

.shop-token-cost {
  grid-area: cost;
  display: inline-flex;
  min-height: 34px;
  padding: 7px 10px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(13, 158, 132, .15);
  border-radius: 12px;
  color: #126f62;
  background: rgba(223, 248, 241, .9);
  font-size: 15px;
  white-space: nowrap;
}

.shop-token-cost span { color: #0da98d; }
.shop-spend-card > .button { grid-area: action; width: 100%; min-height: 43px; margin: 0; border-radius: 13px; font-size: 12px; }

.shop-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shop-pack {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 330px;
  padding: 17px;
  align-content: start;
  gap: 11px;
  overflow: hidden;
  border: 1px solid rgba(45, 75, 105, .13);
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 1px 0 white, 0 11px 28px rgba(51, 83, 113, .09);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.shop-pack::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #23b89f, #3092d0);
}

.shop-pack-popular {
  border-color: rgba(21, 167, 142, .27);
  background: linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(228, 249, 243, .88));
}

.shop-pack-best {
  border-color: rgba(101, 84, 207, .28);
  background:
    radial-gradient(circle at 100% 0, rgba(117, 99, 222, .17), transparent 37%),
    linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(235, 237, 255, .9));
  box-shadow: inset 0 1px 0 white, 0 15px 34px rgba(78, 72, 167, .14);
}

.shop-pack-best::before { background: linear-gradient(90deg, #705ed9, #378fc9); }
.shop-pack-top { display: flex; min-height: 80px; align-items: flex-start; justify-content: space-between; gap: 8px; }

.shop-token-pile {
  --coin-a: #20b99e;
  --coin-b: #238fca;
  position: relative;
  width: 78px;
  height: 76px;
  flex: 0 0 78px;
}

.shop-token-pile i {
  position: absolute;
  left: 8px;
  width: 59px;
  height: 21px;
  border: 1px solid rgba(18, 96, 105, .18);
  border-radius: 50%;
  background: linear-gradient(110deg, var(--coin-a), var(--coin-b));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 4px 8px rgba(34, 115, 133, .15);
}

.shop-token-pile i:nth-child(1) { top: 45px; }
.shop-token-pile i:nth-child(2) { top: 32px; }
.shop-token-pile i:nth-child(3) { top: 19px; }
.shop-token-pile span { position: absolute; z-index: 2; top: 18px; left: 31px; color: white; font-size: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.shop-token-pile.pile-full { --coin-a: #17ae91; --coin-b: #4b9bd0; }
.shop-token-pile.pile-mega { --coin-a: #7160da; --coin-b: #358fc8; }

.shop-pack-tag {
  display: inline-flex;
  min-height: 26px;
  padding: 6px 8px;
  align-items: center;
  border: 1px solid rgba(45, 75, 105, .11);
  border-radius: 999px;
  color: #708095;
  background: rgba(244, 248, 252, .9);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.shop-pack-tag.popular { border-color: rgba(12, 154, 128, .16); color: #087a68; background: #dcf7ef; }
.shop-pack-tag.best { border: 0; color: white; background: linear-gradient(110deg, #6958d0, #348fc7); box-shadow: 0 7px 16px rgba(83, 72, 180, .18); }

.shop-pack-amount { display: grid; gap: 1px; }
.shop-pack-amount strong { color: #1a2c43; font-size: 34px; letter-spacing: -.06em; line-height: .9; }
.shop-pack-amount span { color: #6d7f94; font-size: 11px; font-weight: 800; }
.shop-pack-price { color: #167f72; font-size: 25px; font-weight: 900; letter-spacing: -.045em; }
.shop-pack-best .shop-pack-price { color: #5d4fc2; }

.shop-pack-perks {
  display: flex;
  min-height: 46px;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-pack-perks span {
  display: inline-flex;
  min-height: 24px;
  padding: 5px 8px;
  align-items: center;
  border-radius: 9px;
  color: #567087;
  background: rgba(229, 239, 247, .78);
  font-size: 9px;
  font-weight: 800;
}

.shop-pack > .button { width: 100%; min-height: 45px; margin-top: auto; border-radius: 13px; font-size: 12px; }
.shop-pack-best > .button-primary { background: linear-gradient(115deg, #6657ce, #318fc5); }
.shop-pack-best > .button.button-primary:hover { border-color: #5547b5; color: white; background: linear-gradient(115deg, #5849bc, #287cae); }
.shop-screen .button:disabled { cursor: not-allowed; }

.shop-nanny-pass {
  display: grid;
  min-width: 0;
  padding: 15px;
  grid-template-columns: 74px minmax(0, 1fr) minmax(320px, .9fr);
  align-items: center;
  gap: 15px;
  overflow: hidden;
  border: 1px solid rgba(42, 142, 179, .18);
  border-radius: 23px;
  background:
    radial-gradient(circle at 0 100%, rgba(39, 187, 160, .12), transparent 35%),
    linear-gradient(145deg, rgba(247, 253, 255, .97), rgba(230, 243, 252, .87));
  box-shadow: inset 0 1px 0 white;
}

.shop-nanny-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 22px;
  color: white;
  background: linear-gradient(145deg, #29b79d, #2d8fcd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 23px rgba(34, 142, 157, .18);
}

.shop-nanny-icon span { font-size: 31px; transform: translateY(1px); }
.shop-nanny-copy { min-width: 0; }
.shop-nanny-copy h3 { margin: 0 0 5px; color: #1c3047; font-size: 22px; letter-spacing: -.04em; }
.shop-nanny-copy p { max-width: 430px; margin: 0; color: #6b7e92; font-size: 11px; line-height: 1.45; }
.shop-nanny-control { min-width: 0; }
.shop-nanny-control > .button { width: 100%; min-height: 46px; border-radius: 14px; }
.shop-nanny-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.shop-nanny-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  align-content: center;
  justify-items: start;
  gap: 3px;
  overflow: hidden;
  border: 1px solid rgba(44, 76, 106, .14);
  border-radius: 15px;
  color: #253c53;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 white;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.shop-nanny-option.featured { border-color: rgba(92, 75, 196, .22); background: rgba(241, 239, 255, .88); }
.shop-nanny-option > span { color: #718297; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shop-nanny-option strong { color: #1b334a; font-size: 18px; letter-spacing: -.035em; }
.shop-nanny-option small { color: #718398; font-size: 8px; }
.shop-nanny-option em {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 6px;
  border-radius: 999px;
  color: white;
  background: #6656cb;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-nanny-option:disabled { opacity: .55; cursor: not-allowed; }
.shop-nanny-covered {
  display: grid;
  min-height: 86px;
  padding: 14px;
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(15, 157, 132, .17);
  border-radius: 16px;
  color: #137363;
  background: rgba(222, 248, 240, .87);
  text-align: center;
}

.shop-nanny-covered strong { font-size: 18px; }
.shop-nanny-covered span { color: #63877e; font-size: 10px; }

@media (hover: hover) {
  .shop-spend-card:hover,
  .shop-pack:hover {
    transform: translateY(-3px);
    border-color: rgba(25, 157, 145, .28);
    box-shadow: inset 0 1px 0 white, 0 17px 36px rgba(48, 86, 115, .14);
  }

  .shop-nanny-option:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(25, 157, 145, .3);
    background: white;
  }
}

@media (max-width: 760px) {
  .shop-screen { gap: 13px; padding-bottom: 36px; }
  .shop-section { padding: 15px; gap: 15px; border-radius: 25px; }
  .shop-spend-card {
    min-height: 255px;
    padding: 13px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "art"
      "copy"
      "cost"
      "action";
    justify-items: center;
    align-content: start;
    text-align: center;
  }
  .shop-item-art { width: 100%; height: 100px; }
  .shop-item-copy h3 { font-size: 17px; }
  .shop-token-cost { min-height: 31px; padding: 6px 9px; font-size: 14px; }

  .shop-pack-grid { grid-template-columns: 1fr; }
  .shop-pack {
    min-height: 0;
    padding: 14px;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    grid-template-areas:
      "art amount price"
      "art perks perks"
      "action action action";
    align-items: center;
    gap: 8px 11px;
    border-radius: 20px;
  }
  .shop-pack-top { grid-area: art; min-height: 76px; }
  .shop-pack-tag { position: absolute; top: 11px; right: 11px; }
  .shop-pack-amount { grid-area: amount; padding-top: 12px; }
  .shop-pack-amount strong { font-size: 30px; }
  .shop-pack-price { grid-area: price; align-self: end; padding-bottom: 7px; font-size: 23px; text-align: right; }
  .shop-pack-perks { grid-area: perks; min-height: 0; padding-right: 4px; }
  .shop-pack > .button { grid-area: action; }
  .shop-nanny-pass { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .shop-nanny-icon { width: 62px; height: 62px; border-radius: 18px; }
  .shop-nanny-control { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .shop-heading { align-items: flex-end; }
  .shop-heading-meta { gap: 5px; }
  .shop-currency-note { min-height: 27px; padding: 6px 8px; font-size: 9px; }
  .shop-heading .demo-badge { padding: 6px 7px; font-size: 8px; }
  .shop-section { padding: 12px; gap: 12px; border-radius: 22px; }
  .shop-section-header { gap: 9px; }
  .shop-section-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; font-size: 20px; }
  .shop-section-icon.buy { font-size: 25px; }
  .shop-section-title span { font-size: 7px; }
  .shop-section-title h2 { font-size: 23px; }
  .shop-balance { padding: 6px 9px; border-radius: 12px; }
  .shop-balance small { font-size: 7px; }
  .shop-balance strong { font-size: 14px; }
  .shop-spend-grid { gap: 8px; }
  .shop-spend-card { min-height: 238px; padding: 10px; gap: 7px; border-radius: 18px; }
  .shop-item-art { height: 85px; border-radius: 15px; }
  .shop-item-art .egg-mini { width: 47px; height: 62px; }
  .shop-item-art .envelope-art { width: 56px; height: 37px; }
  .shop-item-copy h3 { margin-bottom: 0; font-size: 15px; }
  .shop-item-copy p { display: none; }
  .shop-spend-card > .button { min-height: 39px; padding: 7px 5px; font-size: 10px; }
  .shop-pack { grid-template-columns: 65px minmax(0, 1fr) auto; padding: 12px; gap: 7px 8px; }
  .shop-pack-top { min-height: 65px; }
  .shop-token-pile { width: 65px; height: 65px; transform: scale(.84); transform-origin: left center; }
  .shop-pack-tag { top: 9px; right: 9px; font-size: 7px; }
  .shop-pack-amount { padding-top: 13px; }
  .shop-pack-amount strong { font-size: 26px; }
  .shop-pack-amount span { font-size: 9px; }
  .shop-pack-price { padding-bottom: 8px; font-size: 20px; }
  .shop-pack-perks { gap: 4px; }
  .shop-pack-perks span { min-height: 21px; padding: 4px 6px; font-size: 7px; }
  .shop-nanny-pass { padding: 12px; border-radius: 19px; }
  .shop-nanny-copy h3 { font-size: 18px; }
  .shop-nanny-copy p { font-size: 9px; }
  .shop-nanny-options { gap: 6px; }
  .shop-nanny-option { min-height: 86px; padding: 10px; }
  .shop-nanny-option strong { font-size: 16px; }
}

@media (max-width: 350px) {
  .shop-nanny-options { grid-template-columns: 1fr; }
}

/* Simplified tabbed shop */
.shop-screen { gap: 12px; }

.shop-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(480px, 100%);
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(45, 75, 105, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 white, 0 9px 25px rgba(50, 83, 113, .08);
}

.shop-tabs button {
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 11px;
  color: #66788d;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.shop-tabs button:hover { color: #22384f; background: rgba(231, 240, 248, .75); }
.shop-tabs button.active {
  color: white;
  background: linear-gradient(115deg, #258fd4, #18ae94);
  box-shadow: 0 7px 17px rgba(31, 143, 155, .18);
}

.shop-flat-panel {
  display: grid;
  min-width: 0;
  padding: 22px;
  gap: 18px;
  border: 1px solid rgba(45, 75, 105, .13);
  border-radius: 25px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 white, 0 18px 44px rgba(50, 83, 113, .11);
}

.shop-flat-panel[hidden] { display: none; }

.shop-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-panel-heading h2,
.shop-store-group > h2 {
  margin: 0;
  color: #1b2d43;
  font-size: 23px;
  letter-spacing: -.035em;
}

.shop-panel-heading > strong {
  padding: 7px 10px;
  border-radius: 11px;
  color: #117765;
  background: #e3f8f2;
  font-size: 12px;
  white-space: nowrap;
}

.shop-free-egg {
  display: flex;
  padding: 12px 14px;
  align-items: center;
  gap: 8px;
  border-left: 4px solid #18aa90;
  border-radius: 8px;
  color: #27584f;
  background: #e5f8f2;
  font-size: 12px;
}

.shop-free-egg strong { color: #0f725f; }
.shop-free-egg span { color: #5f7e78; }
.shop-list { display: grid; }

.shop-list-row {
  display: grid;
  min-width: 0;
  min-height: 92px;
  padding: 16px 4px;
  grid-template-columns: minmax(0, 1fr) minmax(135px, .42fr) minmax(150px, .42fr);
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(45, 75, 105, .11);
}

.shop-list > .shop-list-row:first-child,
.shop-store-group > .shop-list-row:first-of-type { border-top: 0; }
.shop-list-row + .shop-list-row { border-top: 1px solid rgba(45, 75, 105, .11); }
.shop-list-row.welcome { border-radius: 14px; background: rgba(232, 249, 244, .48); }
.shop-list-row.featured { padding-right: 12px; padding-left: 12px; border-radius: 14px; background: rgba(235, 248, 245, .55); }
.shop-list-row.featured.mega { background: rgba(240, 238, 255, .58); }

.shop-row-copy { min-width: 0; }
.shop-row-copy h3 {
  margin: 0 0 5px;
  color: #1c3048;
  font-size: 18px;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.shop-row-copy p { margin: 0; color: #6d7f93; font-size: 11px; line-height: 1.45; }
.shop-row-copy p strong { color: #425a70; }
.shop-row-price { display: grid; min-width: 0; gap: 3px; justify-items: start; }
.shop-row-price strong { color: #167c6c; font-size: 18px; letter-spacing: -.03em; }
.shop-list-row.mega .shop-row-price strong { color: #5d4ec1; }
.shop-row-price span { color: #7a899b; font-size: 9px; line-height: 1.3; }
.shop-row-action { min-width: 0; }
.shop-row-action > .button { width: 100%; min-height: 43px; margin: 0; border-radius: 12px; font-size: 11px; }

.shop-inline-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 4px 7px;
  vertical-align: 2px;
  border-radius: 999px;
  color: #0e7967;
  background: #dff6ef;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.shop-inline-tag.best { color: white; background: #6555ca; }
.shop-store-group { display: grid; min-width: 0; }
.shop-store-group + .shop-store-group {
  padding-top: 19px;
  border-top: 1px solid rgba(45, 75, 105, .13);
}

.shop-store-group > h2 { margin-bottom: 4px; font-size: 19px; }
.shop-store-group.subscription .shop-list-row { grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); }
.shop-subscription-action { min-width: 0; }
.shop-subscription-action > .button { width: 100%; min-height: 45px; border-radius: 12px; }
.shop-price-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.shop-price-option {
  display: grid;
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  align-content: center;
  justify-items: start;
  gap: 2px;
  border: 1px solid rgba(45, 75, 105, .14);
  border-radius: 12px;
  color: #2b4057;
  background: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.shop-price-option.featured { border-color: rgba(93, 77, 195, .24); background: #f4f2ff; }
.shop-price-option:hover:not(:disabled) { border-color: rgba(18, 150, 132, .34); background: #f6fcfa; }
.shop-price-option > span { color: #718297; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.shop-price-option strong { color: #1d354d; font-size: 17px; }
.shop-price-option small { color: #78889a; font-size: 8px; }
.shop-price-option:disabled { opacity: .55; cursor: not-allowed; }
.shop-coverage { display: grid; min-height: 70px; place-content: center; color: #157262; background: #e3f8f2; text-align: center; }
.shop-coverage span { color: #688980; font-size: 9px; }

@media (max-width: 720px) {
  .shop-flat-panel { padding: 16px; border-radius: 21px; }
  .shop-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy price"
      "action action";
    gap: 10px 13px;
  }
  .shop-row-copy { grid-area: copy; }
  .shop-row-price { grid-area: price; justify-items: end; text-align: right; }
  .shop-row-action { grid-area: action; }
  .shop-store-group.subscription .shop-list-row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .shop-store-group.subscription .shop-row-copy { grid-area: auto; }
  .shop-subscription-action { grid-area: auto; }
}

@media (max-width: 480px) {
  .shop-tabs { width: 100%; }
  .shop-tabs button { min-height: 39px; padding: 7px 8px; font-size: 10px; }
  .shop-flat-panel { padding: 13px; gap: 14px; border-radius: 18px; }
  .shop-panel-heading h2 { font-size: 20px; }
  .shop-panel-heading > strong { font-size: 10px; }
  .shop-free-egg { display: grid; gap: 2px; font-size: 10px; }
  .shop-list-row,
  .shop-store-group.subscription .shop-list-row {
    min-height: 0;
    padding: 14px 2px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "price"
      "action";
    gap: 8px;
  }
  .shop-row-price { justify-items: start; text-align: left; }
  .shop-list-row.featured { padding-right: 10px; padding-left: 10px; }
  .shop-row-copy h3 { font-size: 16px; }
  .shop-inline-tag { margin-left: 3px; }
  .shop-store-group > h2 { font-size: 17px; }
  .shop-subscription-action { grid-area: action; }
  .shop-price-options { grid-template-columns: 1fr 1fr; }
}

.chumkin-delete-zone {
  display: grid;
  border-top: 1px solid rgba(58, 79, 101, .09);
  padding-top: 8px;
}

.chumkin-delete-button {
  justify-self: start;
  border: 0;
  color: #a75b68;
  background: transparent;
  font-size: 9px;
}

.chumkin-delete-button:hover { color: #8f3344; background: rgba(194, 77, 97, .08); }

.chumkin-delete-confirm {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(194, 70, 91, .2);
  border-radius: 15px;
  background: rgba(255, 241, 243, .94);
}

.chumkin-delete-confirm > strong { color: #7f2c3d; font-size: 12px; }
.chumkin-delete-confirm > span { color: #9a6570; font-size: 9px; }
.chumkin-delete-confirm > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7px; }

.hold-delete-button {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid #b94d61;
  border-radius: 12px;
  color: #8e3042;
  background: #fff;
  touch-action: none;
  user-select: none;
}

.hold-delete-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, #d85b70, #b93e58);
  transform: scaleX(0);
  transform-origin: left center;
}

.hold-delete-button span { position: relative; z-index: 1; font-size: 10px; font-weight: 800; }
.hold-delete-button.holding { color: white; }
.hold-delete-button.holding::before { animation: delete-hold-fill 1.8s linear forwards; }
.hold-delete-button.complete { color: white; }
.hold-delete-button.complete::before { transform: scaleX(1); }

@keyframes delete-hold-fill { to { transform: scaleX(1); } }

.delete-explosion { position: absolute; inset: 0; }
.delete-explosion-pet {
  position: absolute;
  z-index: 2;
  left: var(--event-x);
  top: var(--event-ground);
  opacity: 1;
  transform: translate(-50%, -100%) scale(var(--event-pet-scale, .54));
  transform-origin: 50% 100%;
}
.delete-explosion-pet .blob { animation: none; }
.delete-explosion.explode .delete-explosion-pet { animation: delete-pet-vanish .34s .12s ease-in forwards; }

.delete-explosion::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--event-x);
  top: calc(var(--event-ground) - 38px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  background: white;
  box-shadow: 0 0 0 10px rgba(255, 224, 132, .38), 0 0 36px 22px rgba(238, 108, 141, .32);
  transform: translate(-50%, -50%);
}
.delete-explosion.explode::before { animation: delete-flash .48s ease-out forwards; }

.delete-explosion-particles {
  position: absolute;
  z-index: 3;
  left: var(--event-x);
  top: calc(var(--event-ground) - 38px);
}
.delete-explosion-particles i {
  position: absolute;
  width: 12px;
  height: 10px;
  border-radius: 46% 54% 58% 42%;
  opacity: 0;
  background: var(--burst-color);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), 0 3px 6px rgba(68, 50, 72, .16);
  transform: translate(-50%, -50%) scale(.2);
}
.delete-explosion-particles i:nth-child(3n) { width: 8px; height: 14px; }
.delete-explosion-particles i:nth-child(4n) { border-radius: 50%; }
.delete-explosion.explode .delete-explosion-particles i {
  animation: delete-particle-burst .72s var(--burst-delay) cubic-bezier(.15,.64,.22,1) forwards;
}

@keyframes delete-pet-vanish {
  0%, 35% { opacity: 1; filter: none; }
  100% { opacity: 0; filter: blur(3px) brightness(1.35); }
}
@keyframes delete-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.2); }
}
@keyframes delete-particle-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.72) rotate(240deg); }
}

.admin-summary {
  margin: -10px 0 16px;
  color: #6b7c90;
  font-size: 12px;
}

.admin-users { display: grid; gap: 12px; padding-bottom: 40px; }
.admin-loading {
  padding: 28px;
  border: 1px solid rgba(46, 74, 103, .12);
  border-radius: 20px;
  color: #718298;
  background: rgba(255, 255, 255, .75);
  text-align: center;
}

.admin-user-row {
  overflow: hidden;
  border: 1px solid rgba(45, 75, 105, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 28px rgba(56, 84, 112, .09);
}

.admin-user-heading {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.admin-user-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #38b9a1, #4e86d6);
  font-weight: 900;
}

.admin-user-heading > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.admin-user-heading strong { color: #20344b; font-size: 15px; }
.admin-user-heading a { overflow: hidden; color: #3d719a; font-size: 11px; text-overflow: ellipsis; }
.admin-user-heading small { color: #8290a1; font-size: 9px; }
.admin-badge {
  display: inline-flex;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #177c6d;
  background: #dcf5ee;
  font-size: 8px;
  vertical-align: middle;
}

.admin-user-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.admin-token-form { display: flex; align-items: end; gap: 7px; }
.admin-token-form label { display: grid; gap: 3px; color: #728196; font-size: 8px; }
.admin-token-form input { width: 132px; min-height: 36px; padding: 7px 10px; border-radius: 10px; }
.admin-token-form .button { min-height: 36px; padding: 7px 13px; border-radius: 10px; }

.admin-verification-form { display: flex; align-items: center; gap: 7px; }
.admin-verification-form label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #60778b;
  font-size: 9px;
  white-space: nowrap;
}

.admin-chumkin-details { border-top: 1px solid rgba(45, 75, 105, .1); }
.admin-chumkin-details > summary { padding: 11px 16px; color: #51677e; font-size: 10px; cursor: pointer; }
.admin-chumkin-list { display: grid; gap: 1px; padding: 0 10px 10px; }
.admin-chumkin-code {
  display: grid;
  grid-template-columns: minmax(140px, .7fr) minmax(110px, .5fr) minmax(150px, .7fr) minmax(260px, 1.4fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 11px;
  background: rgba(236, 244, 249, .78);
}
.admin-chumkin-code > div { display: grid; gap: 2px; }
.admin-chumkin-code strong { color: #2b4157; font-size: 11px; }
.admin-chumkin-code span { color: #7a8999; font-size: 8px; text-transform: capitalize; }
.admin-chumkin-code code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #486278;
  font-size: 8px;
  user-select: all;
}

@media (max-width: 700px) {
  .admin-user-heading { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; }
  .admin-user-avatar { width: 38px; height: 38px; }
  .admin-user-actions { grid-column: 1 / -1; width: 100%; justify-items: start; }
  .admin-token-form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; }
  .admin-token-form input { width: 100%; }
  .admin-chumkin-code { grid-template-columns: 1fr; gap: 5px; }
  .admin-chumkin-code code { padding-top: 4px; border-top: 1px solid rgba(54, 79, 103, .08); }
}

/* Transparent desktop companion surface */
html[data-desktop="companion"],
html[data-desktop="companion"] body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent !important;
}

html[data-desktop="companion"] body::before,
html[data-desktop="companion"] body::after,
html[data-desktop="companion"] #home-view::before,
html[data-desktop="companion"] #home-view::after {
  display: none !important;
}

html[data-desktop="companion"] main,
html[data-desktop="companion"] .app-shell,
html[data-desktop="companion"] #home-view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent !important;
}

html[data-desktop="companion"] .auth-shell,
html[data-desktop="companion"] .topbar,
html[data-desktop="companion"] .main-nav,
html[data-desktop="companion"] .boombox,
html[data-desktop="companion"] .room-sidebar,
html[data-desktop="companion"] .shelf-wrap,
html[data-desktop="companion"] .world-supplies,
html[data-desktop="companion"] #home-content,
html[data-desktop="companion"] .toast {
  display: none !important;
}

html[data-desktop="companion"] .grass-foreground {
  display: block !important;
  position: fixed;
  z-index: 18;
  right: 0;
  bottom: 0;
  left: 0;
  height: 10px;
  pointer-events: none;
}

.desktop-companion-menu { display: none; }
html[data-desktop="companion"][data-companion-menu="true"] .desktop-companion-menu {
  position: fixed;
  z-index: 50;
  right: 12px;
  bottom: 16px;
  display: grid;
  justify-items: end;
  gap: 6px;
}
.desktop-companion-menu-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(58, 91, 105, .28);
  border-radius: 11px;
  color: #315566;
  background: rgba(244, 252, 250, .94);
  box-shadow: 0 5px 18px rgba(26, 56, 68, .2);
  font-size: 17px;
}
.desktop-companion-menu-panel {
  display: grid;
  width: 138px;
  padding: 7px;
  gap: 4px;
  border: 1px solid rgba(58, 91, 105, .2);
  border-radius: 13px;
  background: rgba(244, 252, 250, .96);
  box-shadow: 0 8px 25px rgba(26, 56, 68, .24);
}
.desktop-companion-menu-panel[hidden] { display: none; }
.desktop-companion-menu-panel button,
.desktop-companion-menu-panel a { display: flex; min-height: 30px; padding: 5px 8px; align-items: center; border: 0; border-radius: 8px; color: #365b69; background: rgba(218, 241, 237, .76); font-size: 10px; font-weight: 850; text-align: left; text-decoration: none; }
.desktop-app-update { display: none !important; }
html[data-desktop="control"] .desktop-app-update { display: grid !important; }

html[data-desktop="companion"] .chumkin-world,
html[data-desktop="companion"] .world-event-layer,
html[data-desktop="companion"] .travel-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Android companion keeps care in-app and commerce on chumkins.com. */
html[data-native-client="android"] .token-pill,
html[data-native-client="android"] .envelope-pill,
html[data-native-client="android"] [data-view="send"],
html[data-native-client="android"] [data-send-selected] {
  display: none !important;
}

/* Shared public website */
.public-header {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: 76px;
  padding: max(12px, env(safe-area-inset-top)) clamp(18px, 4vw, 58px) 12px;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 38px);
  border-bottom: 1px solid rgba(44, 78, 103, .1);
  background: rgba(238, 249, 252, .86);
  box-shadow: 0 9px 30px rgba(53, 87, 108, .07);
  backdrop-filter: blur(18px) saturate(125%);
}

.public-wordmark {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: #1b3348;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -.035em;
  text-decoration: none;
}

.public-wordmark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 8px 11px rgba(67, 83, 119, .14));
}

.public-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.public-nav a {
  position: relative;
  padding: 9px 1px;
  color: #50687a;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: color .18s ease;
}

.public-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #249ed0, #1aad92);
  transform: scaleX(0);
  transition: transform .18s ease;
}

.public-nav a:hover,
.public-nav a.active { color: #173b50; }
.public-nav a:hover::after,
.public-nav a.active::after { transform: scaleX(1); }

.public-account-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.public-menu-toggle { display: none; }

.public-signin-link,
.public-dashboard-link {
  display: inline-flex;
  min-height: 42px;
  padding: 9px 17px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(28, 126, 151, .22);
  border-radius: 14px;
  color: #176d81;
  background: rgba(255, 255, 255, .64);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.public-dashboard-link {
  border-color: transparent;
  color: white;
  background: linear-gradient(120deg, #258fc9, #19a98e);
  box-shadow: 0 10px 24px rgba(34, 144, 157, .17);
}

.public-signin-link:hover {
  color: #124f62;
  background: white;
  transform: translateY(-1px);
}

.public-dashboard-link:hover {
  color: white;
  background: linear-gradient(120deg, #1d82bc, #138f79);
  transform: translateY(-1px);
}

.public-site-active .landing-scroll { padding-top: 76px; }

body[data-public-page="home"] .landing-scroll {
  padding-bottom: calc(clamp(280px, 36svh, 440px) + env(safe-area-inset-bottom));
}

body:not([data-public-page="home"]) .landing-pet-layer { display: none; }
body:not([data-public-page="home"]) .landing-sun { display: none; }

body[data-public-page="home"] .public-header,
body[data-public-page="home"] .landing-account-actions,
body[data-public-page="home"] .landing-account-return,
body[data-public-page="home"] .landing-scroll-cue {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-public-page="home"] .public-header { background: #eef9fc; }
body[data-public-page="home"] .landing-account-actions,
body[data-public-page="home"] .landing-account-return { background: #f8fdff; }
body[data-public-page="home"] .landing-scroll-cue { background: #fff; }

.landing-intro {
  max-width: 720px;
  padding: clamp(18px, 2vw, 30px) 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.landing-hero .auth-card {
  border-color: rgba(42, 77, 106, .11);
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 white, 0 22px 58px rgba(50, 82, 108, .13);
}

.landing-account-return {
  display: grid;
  width: 100%;
  padding: clamp(24px, 3vw, 34px);
  gap: 7px;
  border: 1px solid rgba(42, 77, 106, .11);
  border-radius: 28px;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 white, 0 22px 58px rgba(50, 82, 108, .13);
  backdrop-filter: blur(22px);
}

.landing-account-return span { color: #6d8293; font-size: 12px; font-weight: 750; }
.landing-account-return strong { color: #20394d; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
.landing-account-return a {
  display: inline-flex;
  width: fit-content;
  min-height: 46px;
  margin-top: 13px;
  padding: 11px 18px;
  align-items: center;
  border-radius: 15px;
  color: white;
  background: linear-gradient(120deg, #258fc9, #19a98e);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.landing-story {
  width: min(1120px, calc(100% - 48px));
  padding: clamp(100px, 15vh, 170px) 0 clamp(120px, 18vh, 200px);
  gap: clamp(100px, 16vh, 190px);
}

.landing-feature {
  width: min(760px, 78%);
  min-height: 0;
  padding: clamp(18px, 3vw, 34px) 0 clamp(18px, 3vw, 34px) clamp(28px, 5vw, 62px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.landing-feature::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #32b9a0, rgba(44, 154, 207, .12));
}

.landing-feature:nth-child(even)::before {
  background: linear-gradient(180deg, #4c9ed4, rgba(105, 92, 203, .12));
}

.landing-feature::after {
  right: auto;
  bottom: auto;
  top: 50%;
  left: clamp(-100px, -9vw, -42px);
  width: clamp(110px, 14vw, 190px);
  height: clamp(110px, 14vw, 190px);
  z-index: -1;
  opacity: .28;
  filter: blur(2px);
  transform: translateY(-50%);
}

.landing-feature h2,
.landing-close h2,
.variation-copy h2 {
  font-size: clamp(38px, 5vw, 64px);
}

.landing-feature p,
.landing-close p,
.variation-copy p {
  margin-top: clamp(18px, 3vw, 30px);
  font-size: clamp(17px, 1.7vw, 21px);
}

.landing-kicker {
  display: block;
  margin-bottom: 16px;
  color: #198d80;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.variation-section {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto clamp(130px, 19vh, 220px);
  padding: clamp(20px, 4vw, 52px) 0;
}

.variation-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6%;
  right: -7%;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .32;
  background: radial-gradient(circle at 35% 34%, rgba(255, 255, 255, .94), rgba(85, 196, 197, .3) 42%, rgba(95, 122, 210, .08) 68%, transparent 69%);
}

.variation-copy { max-width: 790px; }
.variation-copy h2 {
  margin: 0;
  color: #1b3043;
  line-height: .95;
  letter-spacing: -.055em;
}
.variation-copy p { max-width: 740px; color: #4e6679; font-weight: 650; line-height: 1.55; }
.variation-copy a {
  display: inline-block;
  margin-top: 22px;
  color: #177b8c;
  font-size: 14px;
  font-weight: 900;
  text-underline-offset: 5px;
}

.variation-stage {
  display: grid;
  min-height: 250px;
  margin-top: clamp(52px, 8vw, 92px);
  padding: 0 clamp(4px, 2vw, 26px) 22px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: clamp(4px, 2vw, 28px);
  border-bottom: 3px solid #5fa45b;
}

.variation-specimen {
  display: grid;
  min-width: 0;
  justify-items: center;
  align-self: end;
  text-align: center;
}

.variation-chumkin {
  display: flex;
  width: 100%;
  height: 132px;
  align-items: flex-end;
  justify-content: center;
}

.variation-chumkin .blob {
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  animation-duration: 3.8s;
}

.variation-specimen:nth-child(2) .blob { animation-delay: -.9s; }
.variation-specimen:nth-child(3) .blob { animation-delay: -1.7s; }
.variation-specimen:nth-child(4) .blob { animation-delay: -2.4s; }
.variation-specimen:nth-child(5) .blob { animation-delay: -3.1s; }
.variation-specimen strong { margin-top: 18px; color: #29475b; font-size: 12px; }
.variation-specimen span { margin-top: 3px; color: #758899; font-size: 10px; font-weight: 700; }
.variation-specimen.extreme strong { color: #7b58a4; }
.variation-note {
  max-width: 780px;
  margin: 24px auto 0;
  color: #708598;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.landing-close {
  width: min(980px, calc(100% - 48px));
  margin-bottom: clamp(100px, 16vh, 180px);
  padding: clamp(54px, 8vw, 92px) 0 0;
  border: 0;
  border-top: 1px solid rgba(45, 83, 111, .16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.simple-page {
  position: relative;
  width: min(1040px, calc(100% - 48px));
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 150px) 0 clamp(130px, 18vh, 200px);
}

.simple-page-intro { max-width: 890px; }
.simple-page-intro h1 {
  max-width: 880px;
  margin: 0;
  color: #193148;
  font-size: clamp(48px, 7.4vw, 90px);
  line-height: .91;
  letter-spacing: -.065em;
}
.simple-page-intro p {
  max-width: 760px;
  margin: clamp(26px, 4vw, 42px) 0 0;
  color: #4d687b;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 650;
  line-height: 1.55;
}

.simple-flow {
  display: grid;
  margin-top: clamp(90px, 13vw, 150px);
}
.simple-flow > div {
  display: grid;
  padding: clamp(30px, 5vw, 58px) 0;
  grid-template-columns: 64px minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: clamp(18px, 4vw, 52px);
  align-items: start;
  border-top: 1px solid rgba(44, 77, 103, .15);
}
.simple-flow > div:last-child { border-bottom: 1px solid rgba(44, 77, 103, .15); }
.simple-flow span { color: #24a08e; font-size: 11px; font-weight: 950; letter-spacing: .13em; }
.simple-flow h2 { margin: 0; color: #243d52; font-size: clamp(24px, 3vw, 36px); line-height: 1.04; letter-spacing: -.035em; }
.simple-flow p { margin: 0; color: #5c7182; font-size: 16px; font-weight: 620; line-height: 1.65; }

.faq-list {
  display: grid;
  margin-top: clamp(80px, 12vw, 135px);
  border-top: 1px solid rgba(44, 77, 103, .16);
}
.faq-list details { border-bottom: 1px solid rgba(44, 77, 103, .16); }
.faq-list summary {
  position: relative;
  padding: clamp(24px, 3vw, 36px) 54px clamp(24px, 3vw, 36px) 0;
  color: #253f54;
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 850;
  letter-spacing: -.025em;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  color: #219487;
  font-size: 28px;
  font-weight: 500;
  transform: translateY(-50%);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list p {
  max-width: 820px;
  margin: -10px 0 0;
  padding: 0 54px clamp(30px, 4vw, 46px) 0;
  color: #597184;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 620;
  line-height: 1.7;
}

.contact-page { display: flex; flex-direction: column; justify-content: center; }
.contact-email {
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(52px, 8vw, 88px);
  color: #177d8c;
  font-size: clamp(27px, 5vw, 58px);
  font-weight: 900;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}
.contact-note { max-width: 610px; margin: 26px 0 0; color: #748797; font-size: 13px; font-weight: 650; line-height: 1.55; }

.account-site-links {
  display: grid;
  margin-top: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(45, 75, 105, .12);
  border-bottom: 1px solid rgba(45, 75, 105, .12);
}
.account-site-links a {
  padding: 9px 7px;
  border-radius: 9px;
  color: #526a7d;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.account-site-links a:hover { color: #1c6e7c; background: rgba(216, 240, 244, .66); }
.account-menu .account-site-links + button { margin-top: 10px; }

@media (max-width: 900px) {
  .variation-stage {
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 48px;
  }
  .variation-specimen:nth-child(4),
  .variation-specimen:nth-child(5) { transform: translateX(50%); }
  .simple-flow > div { grid-template-columns: 44px minmax(0, 1fr); }
  .simple-flow p { grid-column: 2; }
}

@media (max-width: 700px) {
  .public-header {
    min-height: 68px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .public-wordmark { font-size: 14px; }
  .public-wordmark img { width: 32px; height: 32px; }
  .public-account-actions { grid-column: 2; grid-row: 1; }
  .public-signin-link,
  .public-dashboard-link { min-height: 36px; padding: 7px 12px; border-radius: 11px; font-size: 11px; }
  .public-menu-toggle {
    position: relative;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(28, 126, 151, .22);
    border-radius: 13px;
    color: #24566c;
    background: rgba(255, 255, 255, .78);
  }
  .public-menu-toggle span,
  .public-menu-toggle::before,
  .public-menu-toggle::after {
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }
  .public-menu-toggle span { content: ""; }
  .public-menu-toggle::before { content: ""; transform: translateY(-6px); }
  .public-menu-toggle::after { content: ""; transform: translateY(6px); }
  .public-menu-open .public-menu-toggle span { opacity: 0; }
  .public-menu-open .public-menu-toggle::before { transform: rotate(45deg); }
  .public-menu-open .public-menu-toggle::after { transform: rotate(-45deg); }
  .public-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: 12px;
    display: grid;
    padding: 10px;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    border: 1px solid rgba(44, 78, 103, .14);
    border-radius: 20px;
    background: #f8fdff;
    box-shadow: 0 18px 42px rgba(36, 68, 88, .2);
    opacity: 1;
    transform: translateY(0);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }
  body:not(.public-menu-open) .public-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }
  .public-nav a {
    display: flex;
    min-height: 48px;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #edf7f9;
    font-size: 13px;
  }
  .public-nav a::after { display: none; }
  .public-nav a.active { color: white; background: linear-gradient(120deg, #258fc9, #19a98e); }
  .public-site-active .landing-scroll { padding-top: 68px; }
  .landing-hero { padding-top: 26px; }
  .landing-intro { padding: 12px 6px 18px; }
  .landing-intro .landing-lead { margin-top: 10px; }
  .landing-story { width: calc(100% - 28px); gap: 100px; }
  .landing-feature {
    width: 100%;
    min-height: 0;
    padding: 18px 4px 18px 26px;
    border-radius: 0;
  }
  .landing-feature h2,
  .landing-close h2,
  .variation-copy h2 { font-size: clamp(36px, 11vw, 48px); }
  .landing-feature p,
  .landing-close p,
  .variation-copy p { font-size: 16px; }
  .variation-section { width: calc(100% - 28px); }
  .variation-stage {
    margin-top: 48px;
    padding-right: 0;
    padding-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 8px;
  }
  .variation-specimen:nth-child(4),
  .variation-specimen:nth-child(5) { transform: none; }
  .variation-specimen:last-child { grid-column: 1 / -1; }
  .variation-chumkin { height: 116px; transform: scale(.86); transform-origin: 50% 100%; }
  .landing-close { width: calc(100% - 28px); padding-right: 4px; padding-left: 4px; border-radius: 0; }
  .simple-page {
    width: calc(100% - 32px);
    min-height: calc(100svh - 104px);
    padding-top: 72px;
  }
  .simple-page-intro h1 { font-size: clamp(43px, 13vw, 62px); }
  .simple-page-intro p { font-size: 17px; }
  .simple-flow { margin-top: 74px; }
  .simple-flow > div { padding: 30px 0; grid-template-columns: 30px minmax(0, 1fr); gap: 13px; }
  .simple-flow h2 { font-size: 25px; }
  .simple-flow p { font-size: 15px; }
  .faq-list { margin-top: 68px; }
  .faq-list summary { padding-right: 42px; font-size: 19px; }
  .faq-list p { padding-right: 12px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .variation-chumkin .blob { animation: none; }
}

/* Full-quality still Chumkins */
.chumkin-still {
  display: block;
  width: 190px;
  height: 130px;
  max-width: 100%;
}
.chumkin-still-showcase { width: min(100%, 190px); height: 124px; }
.chumkin-still-compact { width: 56px; height: 42px; }
.chumkin-still-card { width: min(100%, 150px); height: 104px; }
.chumkin-still-memorial { width: 92px; height: 66px; }
.chumkin-still-event { width: 190px; height: 130px; }
.shelf-pet .chumkin-still-compact { margin: -2px auto 0; }
.transfer-row .chumkin-still-compact { justify-self: center; }
.travel-pet .chumkin-still-event { margin: 0 auto; transform: scale(1.15); transform-origin: 50% 100%; }

/* Cabinet cemetery */
.cabinet-storage { margin-top: 28px; }
.cabinet-subheading,
.cemetery-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.cabinet-subheading { margin-bottom: 14px; }
.cabinet-subheading h2,
.cemetery-heading h2 { margin: 0; color: #263f55; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.035em; }
.cabinet-subheading span { color: #75889b; font-size: 11px; font-weight: 750; }
.cabinet-empty {
  display: flex;
  min-height: 96px;
  padding: 20px 22px;
  align-items: center;
  gap: 13px 20px;
  border: 1px dashed rgba(55, 91, 117, .2);
  border-radius: 18px;
  color: #657b8e;
  background: rgba(255, 255, 255, .45);
}
.cabinet-empty strong { color: #314a5f; font-size: 13px; }
.cabinet-empty p { flex: 1; margin: 0; font-size: 11px; }
.cabinet-empty .button { min-height: 38px; padding: 8px 14px; border-radius: 11px; }

.cemetery-wall {
  margin: clamp(38px, 6vw, 64px) 0 44px;
  padding: 24px 0 8px;
  border: 0;
  border-top: 1px solid rgba(49, 73, 94, .14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cemetery-heading { margin-bottom: 18px; }
.cemetery-heading h2 { font-size: clamp(24px, 3.4vw, 34px); }
.cemetery-heading > span {
  color: #8997a5;
  font-size: 10px;
  font-weight: 750;
}
.cemetery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 12px;
}
.memorial-record {
  display: grid;
  min-width: 0;
  padding: 2px 3px 8px;
  justify-items: center;
  text-align: center;
}
.memorial-icon {
  display: grid;
  width: 92px;
  height: 66px;
  place-items: center;
  opacity: .58;
  filter: grayscale(.3) saturate(.5);
}
.memorial-record h3 {
  width: 100%;
  margin: 5px 0 0;
  overflow: hidden;
  color: #4d6071;
  font-size: 13px;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memorial-record p { margin: 2px 0 0; color: #8a98a5; font-size: 9px; font-weight: 650; }
.cemetery-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 100px;
  place-content: center;
  gap: 5px;
  color: #7d8c99;
  text-align: center;
}
.cemetery-empty strong { color: #586a79; font-size: 14px; }
.cemetery-empty span { font-size: 10px; }

@media (max-width: 520px) {
  .cabinet-empty { display: grid; }
  .cabinet-empty .button { width: fit-content; }
  .cemetery-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 15px 8px; }
  .chumkin-still-memorial,
  .memorial-icon { width: 82px; height: 60px; }
}

/* Account, downloads, and legal pages */
.landing-hero { min-height: 82svh; }

.landing-account-actions {
  display: grid;
  width: 100%;
  padding: clamp(18px, 2.6vw, 28px);
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border: 1px solid rgba(42, 77, 106, .11);
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 white, 0 22px 58px rgba(50, 82, 108, .13);
  backdrop-filter: blur(22px);
}

.landing-account-actions a {
  display: inline-flex;
  min-height: 54px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.landing-account-actions a:hover { transform: translateY(-2px); }
.landing-account-primary {
  color: white;
  background: linear-gradient(120deg, #258fc9, #19a98e);
  box-shadow: 0 12px 27px rgba(34, 144, 157, .2);
}
.landing-account-primary:hover { color: white; box-shadow: 0 16px 32px rgba(34, 144, 157, .28); }
.landing-account-secondary { border: 1px solid rgba(39, 103, 132, .2); color: #286176; background: rgba(255, 255, 255, .75); }
.landing-account-secondary:hover { color: #16495d; background: white; }

.desktop-promo {
  display: grid;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto clamp(120px, 18vh, 200px);
  padding: clamp(42px, 7vw, 78px) 0;
  grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 78px);
  border-top: 1px solid rgba(45, 83, 111, .16);
  border-bottom: 1px solid rgba(45, 83, 111, .16);
}
.desktop-promo-mark {
  display: grid;
  width: clamp(140px, 19vw, 210px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, white, rgba(89, 207, 187, .26) 47%, rgba(79, 135, 211, .13));
}
.desktop-promo-mark img { width: 66%; max-height: 66%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(54, 80, 112, .16)); }
.app-beta-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 15px;
  padding: 7px 11px;
  border: 1px solid rgba(28, 153, 132, .24);
  border-radius: 999px;
  color: #147a72;
  background: rgba(221, 248, 239, .86);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.desktop-promo h2 { max-width: 720px; margin: 0; color: #1b3043; font-size: clamp(38px, 5vw, 64px); line-height: .94; letter-spacing: -.055em; }
.desktop-promo p { max-width: 720px; margin: 24px 0 0; color: #526b7e; font-size: clamp(16px, 1.7vw, 20px); font-weight: 640; line-height: 1.55; }
.desktop-promo a {
  display: inline-flex;
  min-height: 48px;
  margin-top: 28px;
  padding: 11px 18px;
  align-items: center;
  border-radius: 15px;
  color: white;
  background: linear-gradient(120deg, #258fc9, #19a98e);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.account-page {
  min-height: calc(100svh - 76px);
  padding: clamp(92px, 14vh, 150px) 24px clamp(100px, 14vh, 160px);
}
.account-page-layout {
  display: grid;
  width: min(1030px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  align-items: center;
  gap: clamp(44px, 8vw, 100px);
}
.account-page-intro h1 { margin: 0; color: #193148; font-size: clamp(58px, 9vw, 104px); line-height: .86; letter-spacing: -.07em; }
.account-page-intro p { max-width: 500px; margin: 30px 0 0; color: #526b7e; font-size: clamp(17px, 2vw, 22px); font-weight: 650; line-height: 1.55; }
body:is([data-auth-mode="forgot"], [data-auth-mode="reset"]) .account-page-intro h1 {
  font-size: clamp(50px, 7vw, 78px);
  line-height: .92;
}
.account-auth-card { width: 100%; padding: clamp(22px, 3vw, 34px); border-radius: 28px; }
.account-authenticated {
  display: grid;
  padding: clamp(28px, 4vw, 42px);
  gap: 8px;
  border: 1px solid rgba(42, 77, 106, .12);
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 70px rgba(50, 82, 108, .14);
}
.account-authenticated span { color: #718596; font-size: 12px; font-weight: 750; }
.account-authenticated strong { color: #20394d; font-size: clamp(27px, 4vw, 40px); letter-spacing: -.04em; }
.account-authenticated a { width: fit-content; margin-top: 14px; padding: 12px 18px; border-radius: 15px; color: white; background: linear-gradient(120deg, #258fc9, #19a98e); font-size: 14px; font-weight: 900; text-decoration: none; }

.auth-form .check-row {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: #65788a;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.45;
}
.auth-form .check-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  box-shadow: none;
  accent-color: #1ca58d;
}
.auth-form .check-row a { color: #167b8b; font-weight: 850; text-underline-offset: 3px; }
.auth-form .legal-check { margin-top: -3px; font-size: 11px; }
.auth-field-heading {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.auth-field-heading > label { display: block; }
.auth-help-link,
.auth-back-link {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 4px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #167b8b;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 3px;
}
.auth-help-link:hover,
.auth-back-link:hover { color: #0c6976; text-decoration: underline; }
.auth-help-link:focus-visible,
.auth-back-link:focus-visible { outline: 2px solid #1ca58d; outline-offset: 2px; }
.auth-recovery-form { gap: 16px; }
.auth-recovery-copy { display: grid; gap: 9px; margin-bottom: 2px; }
.auth-recovery-copy h2 {
  margin: 0;
  color: #20394d;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.auth-recovery-copy p {
  margin: 0;
  color: #65788a;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}
.auth-recovery-form .button-big { margin-top: 2px; }
.auth-recovery-form .auth-back-link { justify-self: center; padding-right: 12px; padding-left: 12px; }

.download-list {
  display: grid;
  margin-top: clamp(80px, 12vw, 135px);
  border-top: 1px solid rgba(44, 77, 103, .16);
}
.download-platform {
  display: grid;
  min-height: 170px;
  padding: clamp(28px, 5vw, 50px) 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid rgba(44, 77, 103, .16);
}
.download-platform span { color: #209486; font-size: 10px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.download-platform-label { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.download-platform-label b {
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, #258fc9, #19a98e);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.download-platform h2 { margin: 8px 0 0; color: #263f54; font-size: clamp(26px, 3.5vw, 40px); letter-spacing: -.04em; }
.download-platform p { max-width: 620px; margin: 10px 0 0; color: #64798a; font-size: 15px; font-weight: 620; line-height: 1.55; }
.download-platform > b { color: #8b98a4; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.download-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.download-actions a { padding: 12px 16px; border: 1px solid rgba(31, 125, 144, .2); border-radius: 14px; color: #176d7d; background: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 900; text-decoration: none; }
.download-actions a:first-child { color: white; background: linear-gradient(120deg, #258fc9, #19a98e); }
.download-footnote { max-width: 760px; margin-top: 48px; padding-left: 22px; border-left: 4px solid rgba(31, 157, 139, .5); }
.download-footnote strong { color: #304b60; font-size: 13px; }
.download-footnote p { margin: 8px 0 0; color: #708292; font-size: 12px; font-weight: 620; line-height: 1.65; }

.legal-page .simple-page-intro h1 { max-width: 960px; font-size: clamp(48px, 7vw, 82px); }
.legal-sections { display: grid; max-width: 900px; margin-top: clamp(75px, 11vw, 125px); border-top: 1px solid rgba(44, 77, 103, .16); }
.legal-sections section { padding: clamp(27px, 4vw, 42px) 0; border-bottom: 1px solid rgba(44, 77, 103, .16); }
.legal-sections h2 { margin: 0; color: #294257; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.025em; }
.legal-sections p { margin: 13px 0 0; color: #5c7283; font-size: 15px; font-weight: 610; line-height: 1.75; }
.legal-sections a { color: #167b8b; font-weight: 800; text-underline-offset: 4px; }

.public-footer {
  display: flex;
  width: min(1120px, calc(100% - 48px));
  min-height: 90px;
  margin: 0 auto;
  padding: 24px 0 max(24px, env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(44, 77, 103, .14);
  color: #8594a1;
  font-size: 10px;
  font-weight: 700;
}
.public-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.public-footer a { color: #64798a; font-size: 11px; font-weight: 800; text-decoration: none; }
.public-footer a:hover { color: #167b8b; }

@media (max-width: 900px) {
  .landing-hero { min-height: auto; }
  .account-page-layout { grid-template-columns: 1fr; }
  .account-page-intro { text-align: center; }
  .account-page-intro p { margin-right: auto; margin-left: auto; }
  .account-auth-card,
  .account-authenticated { width: min(520px, 100%); margin: 0 auto; }
}

@media (max-width: 700px) {
  .public-nav { gap: 7px; }
  .public-nav a { padding: 10px 12px; font-size: 13px; }
  .landing-account-actions { padding: 14px; border-radius: 22px; }
  .landing-account-actions a { min-height: 49px; padding: 10px 12px; font-size: 13px; }
  .desktop-promo { width: calc(100% - 28px); grid-template-columns: 1fr; text-align: center; }
  .desktop-promo-mark { margin: 0 auto; }
  .desktop-promo p { margin-right: auto; margin-left: auto; }
  .account-page { min-height: calc(100svh - 68px); padding: 62px 16px 100px; }
  .account-page-intro h1 { font-size: clamp(42px, 14vw, 58px); overflow-wrap: anywhere; }
  body:is([data-auth-mode="forgot"], [data-auth-mode="reset"]) .account-page-intro h1 {
    font-size: clamp(40px, 13vw, 58px);
  }
  .auth-recovery-copy p { font-size: 14px; }
  .download-platform { grid-template-columns: 1fr; gap: 18px; }
  .download-actions { justify-content: flex-start; }
  .download-platform > b { justify-self: start; }
  .public-footer { width: calc(100% - 32px); align-items: flex-start; flex-direction: column; }
  .public-footer nav { justify-content: flex-start; gap: 14px; }
}

/* Native Android safe areas and app-only actions */
.android-app-action { display: none !important; }

html[data-native-client="android"]:not([data-android-overlay="true"]) .android-app-action {
  display: grid !important;
  gap: 2px;
  margin: 2px 0;
  padding: 11px 10px;
  border: 1px solid rgba(31, 145, 139, .16);
  color: #185b68;
  background: rgba(226, 247, 246, .78);
}

html[data-native-client="android"] .android-app-action span { font-size: 11px; font-weight: 900; }
html[data-native-client="android"] .android-app-action small { color: #6e8491; font-size: 8px; font-weight: 700; }
html[data-native-client="android"] .android-floating-action { background: rgba(233, 229, 255, .72); }
html[data-native-client="android"] .android-update-action { background: rgba(255, 241, 205, .78); }

html[data-native-client="android"]:not([data-android-overlay="true"]) .topbar {
  height: auto;
  min-height: calc(58px + env(safe-area-inset-top));
  padding-top: max(7px, env(safe-area-inset-top));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-left: max(10px, env(safe-area-inset-left));
}

html[data-native-client="android"]:not([data-android-overlay="true"]) .account-menu {
  top: calc(54px + env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  max-height: calc(100dvh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
}

html[data-native-client="android"]:not([data-android-overlay="true"]) .main-nav {
  top: calc(64px + env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  left: max(8px, env(safe-area-inset-left));
  width: auto;
  transform: none;
}

html[data-native-client="android"]:not([data-android-overlay="true"]) .shelf-wrap {
  top: calc(116px + env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  left: max(8px, env(safe-area-inset-left));
}

html[data-native-client="android"]:not([data-android-overlay="true"]) .room-sidebar {
  top: calc(116px + env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
}

html[data-native-client="android"]:not([data-android-overlay="true"]) .world-active .boombox {
  top: calc(192px + env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
}

/* Compact Android system overlay. Native code supplies a pet-sized touch region. */
html[data-android-overlay="true"],
html[data-android-overlay="true"] body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent !important;
}

html[data-android-overlay="true"] #home-content {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: block !important;
  pointer-events: none;
}

html[data-android-overlay="true"] .room-sidebar { display: none !important; }

html[data-android-overlay="true"] .floating-empty {
  position: absolute;
  right: 14px;
  bottom: 18px;
  left: 14px;
  padding: 10px;
  border-radius: 14px;
  color: #496173;
  background: rgba(247, 252, 254, .92);
  box-shadow: 0 8px 22px rgba(38, 64, 82, .18);
  font-size: 10px;
  text-align: center;
}

.account-menu {
  max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
  overflow-y: auto;
}

/* Cross-platform game shell polish */
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
.button,
.main-nav a,
.account-site-links a {
  touch-action: manipulation;
}

.avatar-pill { position: relative; }
.avatar-pill::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid #eef8fa;
  border-radius: 50%;
  background: #a5b1ba;
}
.avatar-pill[data-sync-status="synced"]::after { background: #28b88d; }
.avatar-pill[data-sync-status="syncing"]::after,
.avatar-pill[data-sync-status="connecting"]::after { background: #e8ad3f; }
.avatar-pill[data-sync-status="offline"]::after,
.avatar-pill[data-sync-status="error"]::after { background: #dc6977; }

.account-device-status {
  display: grid;
  margin-top: 10px;
  padding: 9px 10px;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(46, 86, 104, .1);
  border-radius: 12px;
  background: #f5fafb;
}
.account-device-status > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a5b1ba;
  box-shadow: 0 0 0 4px rgba(117, 137, 148, .1);
}
.account-device-status[data-status="synced"] > i { background: #28b88d; box-shadow: 0 0 0 4px rgba(40, 184, 141, .11); }
.account-device-status[data-status="syncing"] > i,
.account-device-status[data-status="connecting"] > i { background: #e8ad3f; box-shadow: 0 0 0 4px rgba(232, 173, 63, .12); }
.account-device-status[data-status="offline"] > i,
.account-device-status[data-status="error"] > i { background: #dc6977; box-shadow: 0 0 0 4px rgba(220, 105, 119, .11); }
.account-device-status > span { display: grid; min-width: 0; gap: 1px; }
.account-device-status b { overflow: hidden; color: #345565; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .account-device-status small { color: #7a8f98; font-size: 8px; }

.account-site-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
.account-site-links a { display: flex; min-height: 38px; align-items: center; }
.account-site-links .android-app-action { grid-column: 1 / -1; }

.nav-button {
  position: relative;
  min-width: 68px;
}
.nav-button .nav-icon { color: #65748b; line-height: 1; }
.nav-button .nav-label { color: inherit; font-size: inherit; line-height: 1; }
.nav-button.active .nav-icon { color: #07121b; }
.nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid rgba(8, 13, 23, .9);
  border-radius: 999px;
  color: white;
  background: #dc6478;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}
.nav-badge.free { color: #244039; background: #f3c953; }
.nav-badge[hidden] { display: none; }

#home-view { overscroll-behavior: none; }

html[data-native-client="android"] .topbar,
html[data-native-client="android"] .main-nav,
html[data-native-client="android"] .account-menu,
html[data-native-client="android"] .shelf-wrap,
html[data-native-client="android"] .home-hud,
html[data-native-client="android"] .boombox,
html[data-native-client="android"] .public-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-native-client="android"] .public-nav,
html[data-native-client="android"] .public-account-actions,
html[data-desktop="control"] .public-nav,
html[data-desktop="control"] .public-account-actions {
  display: none;
}

html[data-native-client="android"] .public-header,
html[data-desktop="control"] .public-header {
  min-height: 64px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  grid-template-columns: 1fr;
  background: #eef9fb;
}

html[data-native-client="android"] .landing-scroll,
html[data-desktop="control"] .landing-scroll {
  padding-top: 64px;
}

html[data-desktop="control"] .landing-scene,
html[data-desktop="control"] .landing-pet-layer {
  display: none;
}

html[data-desktop="control"] body::before,
html[data-desktop="control"] body::after {
  display: none;
}

html[data-desktop="control"] .auth-shell {
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 12% 18%, rgba(99, 201, 229, .2), transparent 32%),
    radial-gradient(circle at 90% 82%, rgba(76, 211, 173, .16), transparent 30%),
    linear-gradient(145deg, #f8fcff, #eaf5fb);
}

html[data-desktop="control"] .account-page {
  min-height: calc(100vh - 64px);
}

@media (max-width: 600px) {
  .nav-button { min-width: 0; min-height: 44px; }
  .nav-button .nav-icon { font-size: 13px; }
  .nav-button .nav-label { font-size: 9px; }
  .nav-badge { top: 1px; right: 1px; }
  .account-site-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
  .account-site-links { grid-template-columns: 1fr; }
  .account-site-links .android-app-action { grid-column: auto; }
  .nav-button .nav-icon { display: none; }
}

.send-selected-preview {
  display: grid;
  min-height: 132px;
  padding: 12px 14px;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(44, 78, 103, .13);
  border-radius: 18px;
  background: linear-gradient(135deg, #eefaf7, #f4f2ff);
}
.send-selected-preview .chumkin-still { width: 118px; height: 102px; }
.send-selected-preview > span { display: grid; min-width: 0; gap: 3px; }
.send-selected-preview small { color: #298c7c; font-size: 8px; font-weight: 950; letter-spacing: .11em; }
.send-selected-preview strong { overflow: hidden; color: #263f54; font-size: 22px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.send-selected-preview em { color: #708491; font-size: 10px; font-style: normal; font-weight: 700; }
.send-consequence {
  display: grid;
  padding: 10px 12px;
  gap: 3px;
  border-left: 3px solid #efb94d;
  color: #385263;
  background: rgba(255, 246, 216, .58);
}
.send-consequence strong { font-size: 10px; }
.send-consequence span { color: #71838e; font-size: 9px; font-weight: 650; line-height: 1.45; }
.send-empty { display: grid; min-height: 100px; place-content: center; gap: 4px; color: #607583; text-align: center; }
.send-empty strong { color: #314c5e; }
.send-empty span { font-size: 10px; }

@media (max-width: 430px) {
  .send-selected-preview { min-height: 106px; grid-template-columns: 84px minmax(0, 1fr); }
  .send-selected-preview .chumkin-still { width: 84px; height: 76px; }
  .send-selected-preview strong { font-size: 18px; }
}

/* My Chumkins collection */
.chumkins-tabs {
  display: grid;
  width: min(520px, 100%);
  margin: 0 0 24px;
  padding: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(43, 77, 102, .12);
  border-radius: 16px;
  background: rgba(225, 238, 246, .72);
}
.chumkins-tabs button {
  display: flex;
  min-height: 43px;
  padding: 8px 11px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  color: #667b8b;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.chumkins-tabs button b {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 99px;
  color: #6f8290;
  background: rgba(255, 255, 255, .62);
  font-size: 8px;
}
.chumkins-tabs button:hover { color: #294658; background: rgba(255, 255, 255, .58); }
.chumkins-tabs button.active { color: #183f47; background: white; box-shadow: 0 5px 16px rgba(49, 79, 101, .11); }
.chumkins-tabs button.active b { color: white; background: #269b89; }
.chumkins-tab-content { min-height: 280px; padding-bottom: 46px; }
.chumkins-tab-intro {
  display: flex;
  min-height: 72px;
  padding: 0 0 17px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.chumkins-tab-intro h2 { margin: 0; color: #263f55; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.04em; }
.chumkins-tab-intro p { max-width: 620px; margin: 5px 0 0; color: #6d8190; font-size: 11px; font-weight: 650; line-height: 1.5; }
.chumkins-tab-intro > span { flex: 0 0 auto; color: #7b8c99; font-size: 9px; font-weight: 850; }
.owned-chumkin-list { border-top: 1px solid rgba(44, 76, 99, .13); }
.owned-chumkin-row {
  display: grid;
  min-height: 154px;
  padding: 15px 4px;
  grid-template-columns: 142px minmax(0, 1fr) minmax(126px, auto);
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(44, 76, 99, .13);
}
.owned-chumkin-art {
  display: grid;
  width: 142px;
  height: 112px;
  place-items: center;
  overflow: hidden;
}
.owned-chumkin-art .chumkin-still { width: 142px; height: 108px; }
.owned-chumkin-copy { display: grid; min-width: 0; align-content: center; }
.owned-chumkin-state { color: #259481; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.owned-chumkin-row[data-location="pending"] .owned-chumkin-state { color: #b37625; }
.owned-chumkin-row.stored .owned-chumkin-state { color: #758695; }
.owned-chumkin-copy h2 { margin: 3px 0 1px; overflow: hidden; color: #263f54; font-size: clamp(21px, 2.7vw, 29px); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.owned-chumkin-copy > p { margin: 0; overflow: hidden; color: #80909d; font-size: 9px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.owned-chumkin-location {
  display: grid;
  width: fit-content;
  min-width: 0;
  margin-top: 10px;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.owned-chumkin-location > i { width: 8px; height: 8px; border-radius: 50%; background: #5a9fc8; box-shadow: 0 0 0 4px rgba(90, 159, 200, .1); }
.owned-chumkin-row[data-location="local"] .owned-chumkin-location > i { background: #26af88; box-shadow: 0 0 0 4px rgba(38, 175, 136, .11); }
.owned-chumkin-row[data-location="floating"] .owned-chumkin-location > i { background: #826bd2; box-shadow: 0 0 0 4px rgba(130, 107, 210, .11); }
.owned-chumkin-row[data-location="pending"] .owned-chumkin-location > i { background: #e2a540; box-shadow: 0 0 0 4px rgba(226, 165, 64, .12); }
.owned-chumkin-row[data-location="cabinet"] .owned-chumkin-location > i { background: #8796a2; box-shadow: 0 0 0 4px rgba(135, 150, 162, .11); }
.owned-chumkin-location > span { display: grid; min-width: 0; gap: 1px; }
.owned-chumkin-location strong { overflow: hidden; color: #425f70; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.owned-chumkin-location small { overflow: hidden; color: #83939e; font-size: 8px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.owned-chumkin-action { display: flex; min-width: 126px; justify-content: flex-end; }
.owned-chumkin-action .button { width: 100%; min-height: 42px; margin: 0; padding: 9px 13px; border-radius: 12px; font-size: 10px; text-decoration: none; }
.collection-empty {
  display: grid;
  min-height: 210px;
  padding: 34px 18px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border-top: 1px solid rgba(44, 76, 99, .13);
  border-bottom: 1px solid rgba(44, 76, 99, .13);
  color: #70838f;
  text-align: center;
}
.collection-empty strong { color: #314c5e; font-size: 18px; }
.collection-empty p { max-width: 420px; margin: 0 0 8px; font-size: 10px; line-height: 1.5; }
.collection-empty .button { min-height: 40px; margin: 0; border-radius: 12px; font-size: 10px; text-decoration: none; }
.room-away-state { pointer-events: auto; }

@media (max-width: 700px) {
  .chumkins-tabs { width: 100%; margin-bottom: 18px; }
  .owned-chumkin-row { grid-template-columns: 104px minmax(0, 1fr); gap: 10px 13px; padding: 13px 2px; }
  .owned-chumkin-art { width: 104px; height: 92px; }
  .owned-chumkin-art .chumkin-still { width: 104px; height: 84px; }
  .owned-chumkin-action { grid-column: 1 / -1; min-width: 0; justify-content: stretch; }
  .owned-chumkin-action .button { width: 100%; }
}

@media (max-width: 430px) {
  .chumkins-tabs { padding: 3px; gap: 2px; border-radius: 14px; }
  .chumkins-tabs button { min-height: 42px; padding: 7px 4px; gap: 4px; font-size: 9px; }
  .chumkins-tabs button b { min-width: 18px; height: 18px; padding: 0 4px; }
  .chumkins-tab-intro { align-items: flex-start; flex-direction: column; gap: 6px; }
  .owned-chumkin-row { grid-template-columns: 86px minmax(0, 1fr); }
  .owned-chumkin-art { width: 86px; height: 78px; }
  .owned-chumkin-art .chumkin-still { width: 86px; height: 72px; }
  .owned-chumkin-copy h2 { font-size: 20px; }
  .owned-chumkin-copy > p { font-size: 8px; }
}

/* Soft angled hand cursor with a true fingertip pinch pose. */
@media (hover: hover) and (pointer: fine) {
  body,
  body * {
    cursor: url("/cursor-hand.svg?v=64") 11 2, pointer !important;
  }

  body :is(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]) {
    cursor: text !important;
  }

  body.cursor-pinching,
  body.cursor-pinching * {
    cursor: url("/cursor-hand-pinch.svg?v=64") 11 14, pointer !important;
  }
}

/* Game-store treatment for token packs and the Mega care bundle. */
.shop-store-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 2%, rgba(41, 184, 157, .13), transparent 25%),
    radial-gradient(circle at 92% 24%, rgba(112, 91, 215, .13), transparent 27%),
    rgba(255, 255, 255, .92);
}

.shop-store-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(73, 111, 143, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 111, 143, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}

.shop-store-panel > * { position: relative; z-index: 1; }
.shop-token-store .shop-pack-grid { margin-top: 12px; }
.shop-token-store .shop-pack {
  min-height: 310px;
  border-bottom-width: 2px;
  box-shadow: inset 0 1px 0 white, 0 6px 0 rgba(49, 86, 111, .09), 0 17px 30px rgba(51, 83, 113, .09);
}

/* Inventory, room environment, and device-local room tools. */
html {
  --room-sky-top: #dff6fc;
  --room-sky-bottom: #bfe8f3;
  --room-horizon: rgba(255, 255, 255, .42);
  --room-night-depth: 0;
  --room-midnight-top-alpha: 0;
  --room-midnight-bottom-alpha: 0;
}
html[data-room-phase="dawn"] { --room-sky-top: #f9d8cf; --room-sky-bottom: #bcdff0; --room-horizon: rgba(255, 234, 183, .72); }
html[data-room-phase="day"] { --room-sky-top: #e7f9fd; --room-sky-bottom: #c7edf6; --room-horizon: rgba(255, 255, 255, .52); }
html[data-room-phase="dusk"] { --room-sky-top: #dfc9e8; --room-sky-bottom: #8ebbd2; --room-horizon: rgba(255, 211, 163, .54); }
html[data-room-phase="night"] { --room-sky-top: #122440; --room-sky-bottom: #395f77; --room-horizon: rgba(115, 174, 197, .16); }

#home-view {
  background:
    radial-gradient(ellipse at 50% 100%, var(--room-horizon), transparent 48%),
    linear-gradient(180deg, var(--room-sky-top), var(--room-sky-bottom));
  transition: background 1.4s ease;
}
html[data-room-phase="night"] #home-view {
  background:
    linear-gradient(180deg,
      rgba(2, 5, 16, var(--room-midnight-top-alpha)),
      rgba(4, 10, 20, var(--room-midnight-bottom-alpha))),
    radial-gradient(ellipse at 50% 100%, var(--room-horizon), transparent 48%),
    linear-gradient(180deg, var(--room-sky-top), var(--room-sky-bottom));
}

#home-view::before {
  display: block;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  opacity: 0;
  background: none;
  filter: none;
  transition: opacity .8s ease;
}

html[data-room-weather="clouds"] #home-view::before {
  opacity: .46;
  background:
    radial-gradient(ellipse at 18% 16%, white 0 5%, transparent 5.5%),
    radial-gradient(ellipse at 25% 15%, white 0 7%, transparent 7.5%),
    radial-gradient(ellipse at 78% 25%, rgba(255, 255, 255, .9) 0 8%, transparent 8.5%);
}
html[data-room-weather="fog"] #home-view::before {
  opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .44) 0 16px, transparent 17px 42px);
}
html[data-room-weather="rain"] #home-view::before,
html[data-room-weather="storm"] #home-view::before {
  opacity: .36;
  background: linear-gradient(180deg, rgba(74, 112, 137, .38), rgba(115, 153, 170, .15) 58%, rgba(223, 239, 241, .08));
}
html[data-room-weather="snow"] #home-view::before {
  opacity: .62;
  background-image: radial-gradient(circle, white 0 2px, transparent 2.5px);
  background-size: 38px 38px;
}
.chumkin-world-overlay { z-index: 5; pointer-events: none; }
.boombox,
.world-active .boombox,
.boombox.dragging {
  z-index: 2;
  transform: none !important;
  transition: filter .18s ease, box-shadow .18s ease !important;
  will-change: left, top;
}

.room-environment-debug {
  position: fixed;
  z-index: 18;
  right: 14px;
  bottom: 18px;
  display: grid;
  min-width: 148px;
  padding: 8px 10px;
  gap: 1px;
  border: 1px solid rgba(44, 77, 98, .2);
  border-radius: 11px;
  color: #385869;
  background: rgba(247, 253, 255, .92);
  box-shadow: 0 7px 22px rgba(45, 78, 99, .12);
  font-size: 8px;
  pointer-events: none;
}
.room-environment-debug[hidden] { display: none; }
.room-environment-debug b { font-size: 9px; }
.room-environment-debug small { color: #758a95; font-size: 7px; }

.room-item-editor {
  position: fixed;
  z-index: 22;
  top: 142px;
  right: 18px;
  width: min(278px, calc(100vw - 36px));
  color: #365263;
  pointer-events: auto;
}
.room-item-editor[hidden] { display: none; }
.room-item-editor form {
  display: grid;
  padding: 12px;
  gap: 9px;
  border: 1px solid rgba(45, 79, 102, .16);
  border-radius: 18px;
  background: rgba(250, 254, 255, .96);
  box-shadow: 0 14px 38px rgba(44, 75, 99, .18);
}
.room-item-editor header { display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: 8px; }
.room-item-editor header > span { display: grid; }
.room-item-editor header strong { color: #294757; font-size: 12px; }
.room-item-editor header small { color: #7a8d98; font-size: 8px; }
.room-item-editor header button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: #607887; background: #edf4f6; }
.room-item-editor label { display: grid; gap: 4px; font-size: 8px; font-weight: 850; }
.room-item-editor select { min-height: 34px; border: 1px solid rgba(45, 79, 102, .16); border-radius: 9px; color: #365263; background: white; }
.room-item-editor form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.room-item-editor .button { min-height: 36px; margin: 0; font-size: 9px; }
.room-item-settings { display: grid; min-width: 0; margin: 0; padding: 0; gap: 9px; border: 0; }
.room-item-settings:disabled { opacity: .48; }
.room-item-editor .room-item-save-actions { grid-template-columns: 1fr 1fr; }
.room-item-editor .room-item-safe-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-item-safe-actions .button { min-width: 0; padding-inline: 7px; }
.room-item-safe-actions .room-item-remove { color: #a85e62; }
.room-item-lock-note,
.room-item-move-note { margin: -2px 0 0; padding: 7px 8px; border-radius: 8px; font-size: 8px; font-weight: 750; line-height: 1.35; }
.room-item-lock-note { color: #795f2c; background: #fff6dc; }
.room-item-move-note { color: #176d60; background: #e8f8f4; }
.room-item-editor .button:disabled { cursor: not-allowed; opacity: .46; }

.coin-pill span { color: #efb949; }
.account-site-links button {
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: #345668;
  background: transparent;
  font-size: 9px;
  font-weight: 800;
  text-align: left;
}
.account-site-links button:hover { color: #183f47; background: #edf7f8; }

.inventory-screen,
.room-settings { width: min(1040px, 100%); margin: 0 auto; padding-bottom: 70px; }
.coin-exchange {
  display: flex;
  min-height: 92px;
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(42, 77, 99, .14);
  border-bottom: 1px solid rgba(42, 77, 99, .14);
  background: linear-gradient(90deg, rgba(255, 245, 202, .48), rgba(238, 251, 249, .38));
}
.coin-exchange > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 10px; }
.coin-exchange .coin-mark { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #9a6a18; background: linear-gradient(145deg, #ffe78b, #eeb84c); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .42); }
.coin-exchange strong { color: #38515d; font-size: 18px; }
.coin-exchange small { color: #788a94; font-size: 8px; font-weight: 700; }
.coin-exchange form { display: flex; align-items: end; gap: 8px; }
.coin-exchange label { display: grid; gap: 4px; color: #657984; font-size: 8px; font-weight: 850; }
.coin-exchange input { width: 138px; min-height: 38px; border: 1px solid rgba(43, 77, 98, .17); border-radius: 10px; color: #314e5e; background: white; }
.coin-exchange .button { min-height: 38px; margin: 0; font-size: 9px; }

.inventory-marketplace { display: grid; gap: 18px; }
.inventory-mode-tabs {
  display: grid;
  padding: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid rgba(40, 82, 103, .1);
  border-radius: 20px;
  background: linear-gradient(145deg, #dfeff4, #eaf4f1);
  box-shadow: inset 0 2px 6px rgba(50, 84, 101, .08);
}
.inventory-mode-tabs button {
  display: grid;
  min-height: 62px;
  padding: 10px 14px;
  align-content: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #617887;
  background: transparent;
  text-align: left;
}
.inventory-mode-tabs button > span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 950; }
.inventory-mode-tabs button b { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 999px; color: #fff; background: #8aa2ae; font-size: 8px; }
.inventory-mode-tabs button small { font-size: 8px; font-weight: 720; }
.inventory-mode-tabs button.active {
  border-color: rgba(36, 141, 127, .16);
  color: #285565;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 10px rgba(55, 92, 105, .12), inset 0 1px 0 white;
}
.inventory-mode-tabs button.active b { background: linear-gradient(145deg, #2fb99c, #368fc1); }
.inventory-heading { display: flex; min-height: 42px; align-items: center; justify-content: space-between; border-bottom: 2px solid rgba(42, 77, 99, .13); }
.inventory-heading h2 { margin: 0; color: #2c4858; font-size: 21px; letter-spacing: -.03em; }
.inventory-heading span { color: #7c8e98; font-size: 9px; font-weight: 850; }
.owned-inventory { margin-top: 3px; }
.owned-item-list { display: grid; gap: 8px; margin-top: 10px; }
.owned-item-row {
  display: grid;
  min-height: 86px;
  padding: 11px 13px;
  grid-template-columns: 68px minmax(130px, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(42, 77, 99, .11);
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 4px 12px rgba(49, 81, 98, .05);
}
.owned-item-copy { display: grid; min-width: 0; }
.owned-item-copy small { color: #299783; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.owned-item-copy strong { overflow: hidden; color: #304c5c; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.owned-item-copy span { color: #7d8e98; font-size: 9px; }
.owned-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.owned-item-actions .button { min-height: 36px; margin: 0; padding: 8px 11px; border-radius: 9px; font-size: 8px; }
.inventory-attach-form { display: flex; gap: 5px; }
.inventory-attach-form select { min-height: 36px; max-width: 120px; border: 1px solid rgba(42, 77, 99, .14); border-radius: 9px; color: #3b5868; background: white; font-size: 9px; }
.inventory-empty { display: grid; min-height: 130px; place-content: center; justify-items: center; gap: 4px; color: #7d8f99; font-size: 9px; }
.inventory-empty strong { color: #385464; font-size: 15px; }

.market-panel { display: grid; gap: 15px; }
.market-category-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: none; }
.market-category-tabs::-webkit-scrollbar { display: none; }
.market-category-tabs button {
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 39px;
  padding: 8px 14px;
  border: 1px solid rgba(43, 78, 98, .12);
  border-radius: 999px;
  color: #607987;
  background: rgba(255, 255, 255, .66);
  font-size: 9px;
  font-weight: 900;
}
.market-category-tabs button.active { border-color: #38aa92; color: #fff; background: linear-gradient(145deg, #32b89b, #358fbd); box-shadow: 0 4px 10px rgba(39, 142, 131, .2); }
.market-trait-stats { display: grid; margin-top: 15px; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.market-trait-stats span { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(42, 77, 99, .12); border-radius: 10px; background: rgba(238, 248, 250, .72); }
.market-trait-stats small { color: #78909b; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.market-trait-stats b { color: #365b6c; font-size: 13px; }
.market-shelf-head { display: flex; min-height: 38px; align-items: end; justify-content: space-between; }
.market-shelf-head h2 { margin: 0; color: #294858; font-size: 23px; letter-spacing: -.04em; }
.market-shelf-head span { color: #78909a; font-size: 8px; font-weight: 850; }
.market-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 11px; }
.market-item-grid > .inventory-empty { grid-column: 1 / -1; }
.market-item-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 162px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 82, 102, .13);
  border-radius: 17px;
  color: #365362;
  background: linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(235, 247, 247, .92));
  box-shadow: 0 3px 0 rgba(57, 101, 112, .08), 0 9px 19px rgba(54, 88, 104, .07);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.market-item-card:hover { border-color: rgba(39, 154, 135, .36); box-shadow: 0 4px 0 rgba(43, 139, 125, .1), 0 12px 22px rgba(54, 88, 104, .1); transform: translateY(-2px); }
.market-item-card:active { box-shadow: 0 1px 0 rgba(57, 101, 112, .1), 0 6px 14px rgba(54, 88, 104, .08); transform: translateY(2px); }
.market-item-card.unavailable { opacity: .72; }
.market-item-thumb {
  display: grid;
  min-height: 101px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0 30%, transparent 31%),
    linear-gradient(150deg, rgba(208, 241, 237, .78), rgba(221, 233, 251, .7));
}
.market-card-art { transform: scale(1.48); }
.market-item-copy { display: grid; min-width: 0; padding: 10px 12px 12px; align-content: start; gap: 2px; }
.market-item-copy strong { overflow: hidden; color: #2f4c5c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.market-item-price { color: #9a6b20; font-size: 9px; font-weight: 900; }

.market-detail-layer { position: fixed; z-index: 90; inset: 0; display: grid; padding: 20px; place-items: center; }
.market-detail-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(29, 48, 60, .42); }
.market-detail {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(620px, calc(100vw - 30px));
  max-height: min(580px, calc(100svh - 38px));
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 22px;
  color: #34515f;
  background: #f8fcfd;
  box-shadow: 0 28px 80px rgba(28, 53, 68, .3), inset 0 1px 0 white;
}
.market-detail-close { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #54707f; background: rgba(255, 255, 255, .86); box-shadow: 0 4px 12px rgba(46, 77, 94, .12); font-size: 20px; }
.market-detail-preview { position: relative; display: grid; min-height: 286px; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0 19%, transparent 20%), linear-gradient(155deg, #d7f2ed, #e1e9fa 62%, #f7e9f5); }
.market-detail-preview::after { content: ""; position: absolute; right: 15%; bottom: 17%; left: 15%; height: 15px; border-radius: 50%; background: rgba(52, 80, 99, .12); filter: blur(6px); }
.market-detail-preview.aurora { background: radial-gradient(circle at 50% 42%, #fffce2 0 20%, transparent 21%), linear-gradient(145deg, #ffe9a9, #e4dcff 54%, #c9f5e8); }
.market-detail-preview > span:last-child:not(.inventory-art) { position: absolute; bottom: 20px; padding: 6px 9px; border-radius: 999px; color: #875f20; background: rgba(255, 249, 213, .85); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.market-detail-art { z-index: 1; transform: scale(2.45); }
.market-detail-copy { display: grid; padding: 27px 24px 22px; align-content: start; }
.market-detail-copy h2 { margin: 0; padding-right: 30px; color: #294757; font-size: clamp(25px, 3vw, 32px); letter-spacing: -.05em; line-height: 1; }
.market-detail-copy > p { margin: 11px 0 0; color: #607684; font-size: 11px; font-weight: 650; line-height: 1.45; }
.market-variant-list { display: flex; margin-top: 15px; flex-wrap: wrap; gap: 6px; }
.market-variant-choice { display: grid; min-width: 62px; min-height: 59px; padding: 4px 5px; justify-items: center; align-content: center; gap: 0; border: 1px solid rgba(48, 82, 101, .12); border-radius: 11px; color: #476371; background: rgba(255, 255, 255, .8); text-align: center; }
.market-variant-choice > span { display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden; }
.market-variant-art { transform: scale(.6); }
.market-variant-choice strong { max-width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.market-variant-choice small { color: #85959c; font-size: 6px; }
.market-variant-choice s { color: #ad8b84; }
.market-variant-choice.active { border-color: #2eaa92; background: #eefaf7; box-shadow: inset 0 0 0 1px #2eaa92, 0 4px 10px rgba(43, 145, 128, .12); }
.market-detail-buy { display: flex; min-height: 66px; margin-top: 15px; padding-top: 13px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(46, 78, 97, .12); }
.market-detail-buy > div { display: grid; }
.market-detail-buy small { color: #788b95; font-size: 7px; font-weight: 850; }
.market-detail-buy strong { color: #9a681d; font-size: 17px; }
.market-detail-buy s { color: #aa8e87; font-size: 10px; }
.market-detail-buy span { color: #a27832; font-size: 7px; font-weight: 850; }
.market-buy-button { min-width: 128px; min-height: 43px; margin: 0; border-radius: 13px; font-size: 10px; text-decoration: none; }

.inventory-art { --item-primary: #65c8e8; --item-secondary: #daf7ff; --item-accent: #315b7b; position: relative; display: block; width: 48px; height: 48px; flex: 0 0 auto; }
.inventory-art-canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; }
.inventory-art i,
.inventory-art b,
.inventory-art em { position: absolute; display: block; box-sizing: border-box; }
.inventory-art i { inset: 7px; border: 3px solid var(--item-accent); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--item-secondary), var(--item-primary) 56%, var(--item-accent)); }
.inventory-art b { right: 11px; bottom: 11px; width: 10px; height: 5px; border: 2px solid var(--item-secondary); border-left: 0; border-bottom: 0; border-radius: 50%; transform: rotate(25deg); }
.inventory-art em { display: none; }
.inventory-art[data-item-shape="glasses"] i { top: 15px; right: 24px; bottom: 15px; left: 3px; border-width: 3px; background: transparent; }
.inventory-art[data-item-shape="glasses"] b { top: 15px; right: 3px; bottom: 15px; width: 21px; height: auto; border: 3px solid var(--item-accent); border-radius: 50%; background: transparent; transform: none; }
.inventory-art[data-item-shape="glasses"] em { top: 23px; left: 22px; display: block; width: 5px; height: 3px; background: var(--item-primary); }
.inventory-art[data-item-shape="party-hat"] i { inset: 3px 9px 8px; border-radius: 50% 50% 10px 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.inventory-art[data-item-shape="party-hat"] b { top: 0; left: 19px; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--item-secondary); transform: none; }
.inventory-art[data-item-shape="bow"] i { inset: 13px 4px; border-radius: 60% 20% 60% 20%; transform: rotate(12deg); }
.inventory-art[data-item-shape="plant"] i { inset: 4px 9px 19px; border: 0; border-radius: 60% 20%; background: var(--item-primary); transform: rotate(-18deg); }
.inventory-art[data-item-shape="plant"] b { right: 9px; bottom: 5px; width: 30px; height: 19px; border: 2px solid var(--item-accent); border-radius: 4px 4px 10px 10px; background: var(--item-secondary); transform: none; }
.inventory-art[data-item-shape="fence"] i { inset: 7px 4px; border: 0; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--item-primary) 0 8px, transparent 8px 15px); }
.inventory-art[data-item-shape="fence"] b { top: 16px; right: 1px; left: 1px; width: auto; height: 7px; border: 1px solid var(--item-accent); border-radius: 3px; background: var(--item-secondary); transform: none; }
.inventory-art[data-item-shape="basketball-hoop"] i { inset: 2px 8px 14px; border: 5px solid var(--item-primary); border-radius: 50%; background: transparent; box-shadow: 0 0 0 3px var(--item-accent), inset 2px 2px 0 var(--item-secondary); }
.inventory-art[data-item-shape="basketball-hoop"] b { top: 32px; right: auto; bottom: 7px; left: 21px; width: 6px; height: auto; border: 0; border-radius: 4px; background: var(--item-accent); transform: none; }
.inventory-art[data-item-shape="basketball-hoop"] em { right: 7px; bottom: 2px; left: 7px; display: block; height: 7px; border-radius: 5px; background: var(--item-accent); }
.inventory-art[data-item-shape="soccer-goal"] i { inset: 9px 2px 5px; border: 5px solid var(--item-accent); border-radius: 9px 9px 3px 3px; background: repeating-linear-gradient(0deg, transparent 0 8px, var(--item-primary) 8px 9px), repeating-linear-gradient(90deg, transparent 0 9px, var(--item-primary) 9px 10px); box-shadow: inset 0 0 0 2px var(--item-secondary); }
.inventory-art[data-item-shape="soccer-goal"] b { right: 0; bottom: 3px; left: 0; display: block; width: auto; height: 6px; border: 0; border-radius: 4px; background: var(--item-accent); transform: none; }
.inventory-art[data-item-shape="high-jump"] i,
.inventory-art[data-item-shape="high-jump"] b { top: 5px; bottom: 4px; width: 7px; height: auto; border: 0; border-radius: 5px; background: var(--item-accent); box-shadow: -4px 36px 0 2px var(--item-accent), 4px 36px 0 2px var(--item-accent); transform: none; }
.inventory-art[data-item-shape="high-jump"] i { right: auto; left: 5px; }
.inventory-art[data-item-shape="high-jump"] b { right: 5px; left: auto; }
.inventory-art[data-item-shape="high-jump"] em { top: 19px; right: 5px; left: 5px; display: block; height: 7px; border: 2px solid var(--item-accent); border-radius: 5px; background: linear-gradient(90deg, var(--item-primary) 0 38%, var(--item-secondary) 38% 52%, var(--item-primary) 52%); }
.inventory-art[data-item-shape="bowling-pins"] i,
.inventory-art[data-item-shape="bowling-pins"] b { top: 10px; bottom: 5px; width: 14px; height: auto; border: 2px solid var(--item-accent); border-radius: 50% 50% 38% 38%; background: linear-gradient(180deg, var(--item-secondary) 0 29%, var(--item-primary) 29% 39%, var(--item-secondary) 39%); transform: none; }
.inventory-art[data-item-shape="bowling-pins"] i { right: auto; left: 7px; transform: rotate(-5deg); }
.inventory-art[data-item-shape="bowling-pins"] b { right: 7px; left: auto; transform: rotate(5deg); }
.inventory-art[data-item-shape="bowling-pins"] em { top: 4px; left: 17px; z-index: 1; display: block; width: 15px; height: 39px; border: 2px solid var(--item-accent); border-radius: 50% 50% 38% 38%; background: linear-gradient(180deg, var(--item-secondary) 0 29%, var(--item-primary) 29% 39%, var(--item-secondary) 39%); }
.inventory-art[data-item-shape="landing-mat"] i { inset: 20px 1px 8px; border: 3px solid var(--item-accent); border-radius: 9px; background: var(--item-primary); box-shadow: 0 5px 0 var(--item-accent); transform: none; }
.inventory-art[data-item-shape="landing-mat"] b { top: 24px; right: 17px; display: block; width: 14px; height: 8px; border: 2px solid var(--item-secondary); border-radius: 50%; background: transparent; transform: none; }
.inventory-art.canvas-rendered > i,
.inventory-art.canvas-rendered > b,
.inventory-art.canvas-rendered > em { display: none; }
.inventory-art.aurora { filter: drop-shadow(0 0 7px rgba(255, 200, 80, .72)); animation: inventory-aurora 3.4s linear infinite; }
@keyframes inventory-aurora { 50% { filter: drop-shadow(0 0 8px rgba(130, 93, 231, .76)) hue-rotate(48deg); } }

.room-settings { display: grid; max-width: 720px; gap: 16px; }
.room-settings > section { display: grid; padding: 18px 0; gap: 14px; border-bottom: 1px solid rgba(42, 77, 99, .13); }
.settings-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.settings-switch-row > div { display: grid; gap: 2px; }
.settings-switch-row strong { color: #304c5c; font-size: 14px; }
.settings-switch-row small { color: #7a8d98; font-size: 9px; }
.toggle-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.toggle-switch input { position: absolute; opacity: 0; }
.toggle-switch span { position: absolute; inset: 0; border-radius: 99px; background: #ccd8dd; transition: .18s ease; }
.toggle-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(43, 72, 91, .2); transition: .18s ease; }
.toggle-switch input:checked + span { background: #31b797; }
.toggle-switch input:checked + span::after { transform: translateX(20px); }
.settings-mode-picker { display: grid; padding: 0; grid-template-columns: repeat(3, 1fr); gap: 7px; border: 0; }
.settings-mode-picker legend { margin-bottom: 7px; color: #71848f; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.settings-mode-picker label { position: relative; }
.settings-mode-picker input { position: absolute; opacity: 0; }
.settings-mode-picker span { display: grid; min-height: 65px; padding: 11px; align-content: center; gap: 2px; border: 1px solid rgba(42, 77, 99, .13); border-radius: 12px; background: rgba(255, 255, 255, .6); }
.settings-mode-picker b { color: #3b5868; font-size: 10px; }
.settings-mode-picker small { color: #81919a; font-size: 8px; }
.settings-mode-picker input:checked + span { border-color: #2caf94; background: #edf9f5; box-shadow: inset 0 0 0 1px #2caf94; }
.settings-mode-fields { display: none; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.room-settings[data-mode="city"] [data-settings-fields="city"],
.room-settings[data-mode="manual"] [data-settings-fields="manual"] { display: grid; }
.settings-mode-fields label { display: grid; gap: 4px; color: #667b87; font-size: 8px; font-weight: 850; }
.settings-mode-fields input { min-height: 40px; border: 1px solid rgba(42, 77, 99, .15); border-radius: 10px; color: #365362; background: white; }
.settings-mode-fields .button,
.room-settings > .button { min-height: 40px; margin: 0; font-size: 9px; }
.settings-status { margin: 0; color: #768993; font-size: 8px; }

.admin-catalog { margin: 8px 0 24px; }
.admin-catalog details { border: 1px solid rgba(42, 77, 99, .13); border-radius: 14px; background: rgba(255, 255, 255, .55); }
.admin-catalog summary { padding: 13px 15px; color: #385464; font-size: 11px; font-weight: 900; }
.admin-catalog-list { display: grid; padding: 0 12px 12px; }
.admin-catalog-row { display: grid; min-height: 72px; padding: 8px 0; grid-template-columns: 48px minmax(130px, 1fr) repeat(4, 86px) 48px 56px; align-items: center; gap: 7px; border-top: 1px solid rgba(42, 77, 99, .1); }
.admin-catalog-row > div { display: grid; }
.admin-catalog-row strong { color: #395565; font-size: 9px; }
.admin-catalog-row small { color: #80919a; font-size: 7px; }
.admin-catalog-row label { display: grid; gap: 2px; color: #748791; font-size: 7px; font-weight: 850; }
.admin-catalog-row input[type="number"] { width: 100%; min-height: 34px; border: 1px solid rgba(42, 77, 99, .13); border-radius: 8px; color: #385464; background: white; }
.admin-catalog-row .admin-active-check { display: flex; align-items: center; gap: 4px; }
.admin-catalog-row .button { min-height: 34px; margin: 0; padding: 5px; font-size: 8px; }
.admin-balance-form { display: grid; grid-template-columns: 92px 92px auto; align-items: end; gap: 6px; }
.admin-balance-form label { display: grid; gap: 3px; color: #748791; font-size: 7px; font-weight: 850; }
.admin-balance-form input { min-height: 35px; width: 100%; border: 1px solid rgba(42, 77, 99, .13); border-radius: 8px; background: white; }
.admin-balance-form .button { min-height: 35px; margin: 0; font-size: 8px; }

@media (hover: hover) and (pointer: fine) {
  body,
  body * { cursor: url("/cursor-hand.svg?v=64") 11 2, pointer !important; }
  body.cursor-pinching,
  body.cursor-pinching * { cursor: url("/cursor-hand-pinch.svg?v=64") 11 14, pointer !important; }
}

@media (max-width: 760px) {
  .main-nav { width: calc(100vw - 20px); overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-button { flex: 1 0 63px; padding-inline: 7px; }
  .coin-exchange { align-items: stretch; flex-direction: column; }
  .coin-exchange form { display: grid; grid-template-columns: 1fr auto; }
  .coin-exchange input { width: 100%; }
  .market-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .market-detail-layer { padding: 0; place-items: end center; }
  .market-detail {
    width: 100%;
    max-height: min(88svh, 760px);
    grid-template-columns: 1fr;
    border-radius: 26px 26px 0 0;
  }
  .market-detail-preview { min-height: 175px; }
  .market-detail-art { transform: scale(2.3); }
  .market-detail-copy { padding: 22px 18px max(24px, calc(env(safe-area-inset-bottom) + 16px)); }
  .market-detail-copy h2 { padding-right: 36px; }
  .owned-item-row { grid-template-columns: 56px minmax(0, 1fr); }
  .owned-item-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: stretch; }
  .owned-item-actions > * { flex: 1; }
  .inventory-attach-form { min-width: 100%; }
  .inventory-attach-form select { flex: 1; max-width: none; }
  .room-item-editor { top: auto; right: 10px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 66px)); left: 10px; width: auto; }
  .room-environment-debug { right: 10px; bottom: 12px; }
  .settings-mode-picker { grid-template-columns: 1fr; }
  .settings-mode-picker span { min-height: 54px; }
  .admin-catalog-list { overflow-x: auto; }
  .admin-catalog-row { min-width: 850px; }
  .admin-balance-form { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr 1fr auto; }
}

@media (max-width: 470px) {
  .account-pills { gap: 4px; }
  .mini-pill { min-width: 34px; height: 36px; padding-inline: 7px; }
  .mini-pill span { font-size: 12px; }
  .mini-pill b { font-size: 9px; }
  .avatar-pill { width: 36px; min-width: 36px; height: 36px; }
  .inventory-screen,
  .room-settings { padding-inline: 1px; }
  .inventory-mode-tabs button { min-height: 56px; padding: 8px 10px; }
  .inventory-mode-tabs button small { display: none; }
  .market-category-tabs button { min-width: 68px; padding-inline: 11px; }
  .market-item-card { min-height: 156px; border-radius: 16px; }
  .market-item-thumb { min-height: 96px; }
  .market-card-art { transform: scale(1.42); }
  .market-item-copy { padding: 10px 11px 12px; }
  .market-item-copy strong { font-size: 13px; }
  .market-variant-list { gap: 5px; }
  .market-variant-choice { min-height: 59px; }
  .market-detail-buy { position: sticky; bottom: calc(-1 * max(24px, calc(env(safe-area-inset-bottom) + 16px))); align-items: stretch; flex-direction: column; background: #f8fcfd; }
  .market-buy-button { width: 100%; }
  .settings-mode-fields { grid-template-columns: 1fr; }
  .room-settings[data-mode="manual"] [data-settings-fields="manual"] { grid-template-columns: 1fr; }
}
.shop-token-store .shop-pack-popular { box-shadow: inset 0 1px 0 white, 0 6px 0 rgba(29, 143, 122, .12), 0 17px 30px rgba(42, 115, 101, .1); }
.shop-token-store .shop-pack-best { box-shadow: inset 0 1px 0 white, 0 6px 0 rgba(85, 72, 177, .13), 0 19px 34px rgba(78, 72, 167, .13); }
.shop-token-store .shop-pack-perks span { width: 100%; justify-content: center; text-align: center; }

.shop-mega-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 150px;
  margin-top: 10px;
  padding: 18px;
  grid-template-columns: 100px minmax(0, 1fr) minmax(150px, .3fr);
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(91, 75, 194, .24);
  border-radius: 23px;
  background:
    radial-gradient(circle at 9% 15%, rgba(255, 255, 255, .78), transparent 22%),
    linear-gradient(135deg, #f5f2ff, #edf5ff 58%, #e4faf4);
  box-shadow: inset 0 1px 0 white, 0 7px 0 rgba(79, 67, 161, .1), 0 20px 38px rgba(68, 71, 139, .12);
}

.shop-mega-card::after {
  content: "";
  position: absolute;
  top: -55px;
  right: 16%;
  width: 150px;
  height: 150px;
  border: 18px solid rgba(105, 86, 205, .055);
  border-radius: 50%;
  pointer-events: none;
}

.shop-mega-emblem {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 2px solid rgba(72, 58, 151, .26);
  border-radius: 26px;
  color: white;
  background: linear-gradient(145deg, #7968de, #448fd0 58%, #26b39c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 8px 0 rgba(63, 56, 131, .13), 0 17px 24px rgba(70, 79, 156, .18);
  transform: rotate(-3deg);
}
.shop-mega-emblem span { font-size: 42px; text-shadow: 0 3px 0 rgba(45, 38, 103, .2); transform: rotate(3deg); }
.shop-mega-copy { min-width: 0; }
.shop-mega-copy h3 { margin: 0 0 12px; color: #263756; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.05em; }
.shop-mega-items { display: flex; flex-wrap: wrap; gap: 7px; }
.shop-mega-items span {
  display: inline-flex;
  min-height: 30px;
  padding: 7px 10px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(79, 88, 153, .1);
  border-radius: 10px;
  color: #62748e;
  background: rgba(255, 255, 255, .68);
  font-size: 10px;
}
.shop-mega-items strong { color: #4d4fa4; }
.shop-mega-action { position: relative; z-index: 1; display: grid; min-width: 0; justify-items: stretch; gap: 10px; }
.shop-mega-action > strong { color: #5b4abe; font-size: 30px; font-weight: 950; letter-spacing: -.05em; text-align: center; }
.shop-mega-action > .button { width: 100%; min-height: 45px; margin: 0; border-radius: 13px; font-size: 11px; }

@media (max-width: 760px) {
  .shop-token-store .shop-pack { min-height: 0; }
  .shop-mega-card { grid-template-columns: 82px minmax(0, 1fr); padding: 15px; gap: 14px; }
  .shop-mega-emblem { width: 76px; height: 76px; border-radius: 22px; }
  .shop-mega-emblem span { font-size: 36px; }
  .shop-mega-action { grid-column: 1 / -1; grid-template-columns: auto minmax(170px, .55fr); align-items: center; justify-content: end; }
  .shop-mega-action > strong { text-align: right; }
}

@media (max-width: 480px) {
  .shop-token-store .shop-pack { box-shadow: inset 0 1px 0 white, 0 4px 0 rgba(49, 86, 111, .09), 0 12px 23px rgba(51, 83, 113, .08); }
  .shop-mega-card { grid-template-columns: 64px minmax(0, 1fr); padding: 12px; gap: 11px; border-radius: 19px; }
  .shop-mega-emblem { width: 60px; height: 60px; border-radius: 18px; }
  .shop-mega-emblem span { font-size: 29px; }
  .shop-mega-copy h3 { margin-bottom: 8px; font-size: 21px; }
  .shop-mega-items { gap: 4px; }
  .shop-mega-items span { min-height: 24px; padding: 5px 7px; font-size: 8px; }
  .shop-mega-action { grid-template-columns: 1fr; gap: 7px; }
  .shop-mega-action > strong { font-size: 25px; text-align: left; }
}

/* Character sheet, room inventory, and unified Marketplace. */
.room-stars {
  position: absolute;
  z-index: 0;
  inset: 64px 0 12px;
  overflow: hidden;
  pointer-events: none;
}
.room-star-field { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.room-stars i {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: var(--star-color, white);
  box-shadow: 0 0 calc(var(--star-size) * 3) var(--star-glow, rgba(205, 234, 255, .54));
  opacity: var(--star-alpha);
  animation: room-star-twinkle var(--star-speed) ease-in-out var(--star-delay) infinite alternate;
}
.room-stars i:nth-child(13n) {
  background: var(--star-color, #fff7d5);
  box-shadow: 0 0 3px var(--star-glow, rgba(255, 244, 196, .7)), 0 0 9px rgba(154, 215, 255, .34);
}
.room-stars i:nth-child(13n)::before,
.room-stars i:nth-child(13n)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 1px;
  border-radius: 50%;
  background: rgba(226, 242, 255, .32);
  transform: translate(-50%, -50%);
}
.room-stars i:nth-child(13n)::after { transform: translate(-50%, -50%) rotate(90deg); }

.room-moon {
  position: absolute;
  z-index: 1;
  top: var(--moon-y, 50%);
  left: var(--moon-x, 50%);
  width: clamp(28px, 4.3vw, 48px);
  aspect-ratio: 1;
  opacity: var(--moon-opacity, 0);
  filter: drop-shadow(0 0 13px rgba(201, 222, 255, .2));
  transform: translate(-50%, -50%);
  transition: top 55s linear, left 55s linear, opacity 1.8s ease;
}
.room-moon::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 230, 255, .16), transparent 68%);
}
.room-moon-disc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(236, 241, 226, .36);
  border-radius: 50%;
  background: linear-gradient(135deg, #fff9d9, #d7e3dc 76%);
  box-shadow: inset -4px -5px 8px rgba(91, 108, 128, .18), 0 0 11px rgba(223, 235, 255, .24);
}
.room-moon-disc::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background: rgba(8, 17, 36, .94);
}
.room-moon[data-phase="new"] .room-moon-disc::after { inset: 0; }
.room-moon[data-phase="waxing-crescent"] .room-moon-disc::after { left: -8%; width: 92%; }
.room-moon[data-phase="first-quarter"] .room-moon-disc::after { left: 0; width: 50%; border-radius: 50% 0 0 50%; }
.room-moon[data-phase="waxing-gibbous"] .room-moon-disc::after { left: -12%; width: 36%; }
.room-moon[data-phase="full"] .room-moon-disc::after { display: none; }
.room-moon[data-phase="waning-gibbous"] .room-moon-disc::after { right: -12%; width: 36%; }
.room-moon[data-phase="last-quarter"] .room-moon-disc::after { right: 0; width: 50%; border-radius: 0 50% 50% 0; }
.room-moon[data-phase="waning-crescent"] .room-moon-disc::after { right: -8%; width: 92%; }
html[data-desktop="companion"] .room-stars { display: none !important; }
@keyframes room-star-twinkle {
  from { opacity: calc(var(--star-alpha) * .45); transform: scale(.72); }
  to { opacity: var(--star-alpha); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .room-star-field { transition: opacity .2s linear; }
  .room-stars i { animation: none; }
  .room-moon { transition: opacity .2s linear; }
}

.chumkin-world-front { z-index: 3; }
.chumkin-grass-motion { z-index: 4; pointer-events: none; }
.grass-foreground { z-index: 5; }
.chumkin-world-overlay { z-index: 6; }

.character-sheet {
  position: fixed;
  z-index: 24;
  top: 132px;
  right: 16px;
  display: grid;
  width: min(370px, calc(100vw - 32px));
  max-height: calc(100dvh - 150px);
  padding: 11px;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #bd9559;
  border-radius: 15px;
  color: #eaf2f3;
  background:
    radial-gradient(circle at 48% -8%, rgba(117, 157, 164, .22), transparent 40%),
    linear-gradient(145deg, #263640, #17242d 58%, #111b22);
  box-shadow: inset 0 0 0 2px rgba(247, 220, 160, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 55px rgba(24, 42, 52, .28);
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 161, 95, .5) transparent;
}
.character-sheet-heading { display: flex; min-height: 52px; padding: 5px 5px 8px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(218, 184, 125, .24); }
.character-sheet-heading > div { display: grid; min-width: 0; }
.character-sheet-heading small { color: #d7b878; font-size: 7px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.character-sheet-heading strong { overflow: hidden; color: #fff8e6; font-size: 24px; letter-spacing: -.045em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.character-sheet-heading span { margin-top: 3px; color: #8ea4ad; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; }
.character-sheet-close { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid rgba(215, 184, 126, .28); border-radius: 7px; color: #d8c49f; background: rgba(7, 15, 20, .34); font-size: 18px; }
.character-sheet-main { display: grid; min-height: 162px; grid-template-columns: minmax(0, 1fr) 78px; gap: 8px; }
.character-portrait {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 162px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(219, 188, 130, .28);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 44%, #eaf7f4 0 18%, #b8d7d8 48%, #738e98 100%);
  box-shadow: inset 0 0 26px rgba(20, 46, 56, .22);
}
.character-portrait::after { content: ""; position: absolute; right: 16%; bottom: 18px; left: 16%; height: 8px; border-radius: 50%; background: rgba(35, 61, 67, .2); filter: blur(4px); }
.character-portrait .chumkin-still { position: relative; z-index: 1; width: 100%; height: 145px; }
.character-portrait > span { position: absolute; z-index: 2; right: 7px; bottom: 6px; padding: 4px 6px; border-radius: 5px; color: #dcebed; background: rgba(17, 31, 39, .72); font-size: 7px; }
.character-equipment { display: grid; min-width: 0; align-content: start; gap: 6px; }
.character-equipment-heading { display: flex; min-height: 22px; align-items: center; justify-content: space-between; color: #cdb27d; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.character-equipment-heading button { padding: 0; border: 0; color: #86d6c5; background: none; font-size: 7px; font-weight: 900; }
.character-slots { display: grid; gap: 5px; }
.character-slot { position: relative; display: grid; min-height: 41px; padding: 3px; place-items: center; border: 1px solid rgba(196, 163, 104, .25); border-radius: 8px; color: #6e858d; background: rgba(6, 14, 19, .3); }
.character-slot::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, .035); border-radius: 5px; }
.character-slot > i { color: #71878e; font-size: 16px; font-style: normal; }
.character-slot > span { position: absolute; right: 3px; bottom: 2px; color: #81959c; font-size: 5px; text-transform: uppercase; }
.character-slot.equipped { border-color: rgba(222, 186, 111, .54); background: rgba(97, 77, 45, .2); }
.character-slot-art { width: 35px; height: 35px; transform: scale(.76); }
.character-vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.character-vital { position: relative; display: grid; min-width: 0; place-items: center; color: #a7bbc1; }
.character-vital > i { --vital-color: #6bc7a0; position: relative; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: conic-gradient(var(--vital-color) calc(var(--vital) * 1%), rgba(4, 10, 14, .5) 0); box-shadow: 0 0 0 1px rgba(225, 198, 143, .18), inset 0 0 10px rgba(0, 0, 0, .3); }
.character-vital > i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #18262e; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .38); }
.character-vital.health > i { --vital-color: #55c998; }
.character-vital.food > i { --vital-color: #f0b858; }
.character-vital.water > i { --vital-color: #5cbbea; }
.character-vital.clean > i { --vital-color: #b986de; }
.character-vital b { position: absolute; z-index: 1; top: 19px; right: 0; left: 0; color: #f5f8f6; font-size: 12px; text-align: center; }
.character-vital small { margin-top: 4px; color: #8fa4ab; font-size: 6px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.character-traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.character-traits span { display: flex; min-width: 0; min-height: 27px; padding: 5px 7px; align-items: center; justify-content: space-between; gap: 5px; border: 1px solid rgba(167, 195, 200, .12); border-radius: 6px; background: rgba(255, 255, 255, .035); }
.character-traits small { overflow: hidden; color: #9aadb3; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.character-traits b { color: #e5c986; font-size: 9px; }
.character-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.character-actions .button { min-width: 0; min-height: 35px; margin: 0; padding: 6px; border-radius: 7px; font-size: 8px; }
.character-record { border-top: 1px solid rgba(218, 184, 125, .18); }
.character-record summary { padding: 9px 4px 2px; color: #9cafb5; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.character-record-body { display: grid; padding-top: 8px; gap: 9px; }
.character-record .pet-code { display: grid; gap: 5px; }
.character-record .pet-code button { justify-self: start; padding: 3px 6px; border: 1px solid rgba(207, 175, 113, .25); border-radius: 5px; color: #dbc68e; background: rgba(0, 0, 0, .15); font-size: 7px; }
.character-record .pet-code code { overflow-wrap: anywhere; color: #748b93; font-size: 6px; }
.character-record .chumkin-delete-button { color: #d48f8f; }

.room-sidebar {
  position: fixed;
  z-index: 23;
  top: 126px;
  left: 16px;
  display: grid;
  width: min(246px, calc(100vw - 32px));
  max-height: calc(100dvh - 150px);
  align-content: start;
  gap: 7px;
  pointer-events: auto;
}
.room-sidebar-panel {
  overflow: hidden;
  border: 1px solid rgba(188, 155, 94, .6);
  border-radius: 12px;
  color: #eaf2f3;
  background: linear-gradient(150deg, rgba(37, 53, 63, .97), rgba(15, 26, 34, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 9px 24px rgba(24, 43, 54, .16);
}
.room-sidebar-toggle {
  display: grid;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 7px;
  border: 0;
  color: #f5ead1;
  background: rgba(255, 255, 255, .025);
  font-size: 9px;
  font-weight: 900;
  text-align: left;
}
.room-sidebar-toggle:hover { background: rgba(255, 255, 255, .065); }
.room-sidebar-toggle b { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 99px; color: #d8c18e; background: rgba(196, 158, 89, .14); font-size: 7px; }
.room-sidebar-toggle i { width: 7px; height: 7px; border-right: 1.5px solid #b9a578; border-bottom: 1.5px solid #b9a578; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.room-sidebar-panel.expanded .room-sidebar-toggle i { transform: rotate(225deg) translate(-2px, -1px); }
.room-sidebar-panel-body { max-height: min(240px, calc(50dvh - 92px)); overflow: auto; border-top: 1px solid rgba(207, 175, 112, .14); }
.room-sidebar-panel-body[hidden] { display: none; }
.room-sidebar .shelf-wrap {
  position: static;
  display: grid;
  width: auto;
  min-height: 0;
  max-height: none;
  padding: 5px;
  gap: 3px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.room-sidebar .shelf-wrap::before { display: none; }
.room-sidebar .shelf-pet {
  display: grid;
  width: 100%;
  min-height: 56px;
  padding: 4px 7px;
  grid-template-columns: 48px minmax(0, 1fr);
  place-items: center start;
  gap: 7px;
  border-radius: 8px;
  text-align: left;
}
.room-sidebar .shelf-pet.active { box-shadow: inset 2px 0 0 var(--green); }
.room-sidebar .shelf-pet small { width: 100%; color: inherit; font-size: 8px; }
.room-sidebar .shelf-pet .chumkin-still { width: 48px; height: 45px; }
.room-sidebar-item-list { display: grid; padding: 5px; gap: 3px; }
.room-sidebar-item {
  display: grid;
  width: 100%;
  min-height: 54px;
  padding: 5px 7px;
  grid-template-columns: 44px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #dbe8e8;
  background: transparent;
  text-align: left;
}
.room-sidebar-item:hover { border-color: rgba(132, 213, 195, .24); background: rgba(132, 213, 195, .055); }
.room-sidebar-item.active { border-color: rgba(118, 216, 193, .36); background: rgba(84, 187, 164, .12); box-shadow: inset 2px 0 0 #66ceb6; }
.room-sidebar-item-art { width: 42px; height: 42px; }
.room-sidebar-item > span { display: grid; min-width: 0; gap: 2px; }
.room-sidebar-item strong,
.room-sidebar-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-sidebar-item strong { color: #f2ecdc; font-size: 8px; }
.room-sidebar-item small { color: #8ea3a9; font-size: 6px; }
.room-sidebar-lock { color: #cdb277; font-size: 10px; font-style: normal; text-align: center; }
.room-sidebar-empty { margin: 0; padding: 13px 10px; color: #8fa3a9; font-size: 7px; line-height: 1.4; text-align: center; }

.room-inventory-drawer {
  position: fixed;
  z-index: 35;
  top: 126px;
  left: 16px;
  display: grid;
  width: min(860px, calc(100vw - 420px));
  max-height: min(310px, calc(100dvh - 150px));
  padding: 11px;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(188, 155, 94, .72);
  border-radius: 15px;
  color: #eaf2f3;
  background: linear-gradient(150deg, rgba(37, 53, 63, .98), rgba(15, 26, 34, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 45px rgba(24, 43, 54, .24);
  animation: inventory-drawer-enter .18s ease-out both;
}
.room-inventory-drawer[hidden] { display: none; }
@keyframes inventory-drawer-enter { from { opacity: 0; transform: translateY(-7px) scale(.985); } }
.inventory-drawer-heading { display: flex; min-height: 34px; padding: 0 2px; align-items: center; justify-content: space-between; }
.inventory-drawer-heading > div { display: grid; }
.inventory-drawer-heading strong { color: #fff7e5; font-size: 17px; line-height: 1; }
.inventory-drawer-heading span { margin-top: 3px; color: #8fa6ae; font-size: 7px; }
.inventory-drawer-heading > button { display: grid; width: 27px; height: 27px; padding: 0; place-items: center; border: 1px solid rgba(198, 168, 110, .26); border-radius: 6px; color: #d7c496; background: rgba(5, 12, 16, .28); font-size: 17px; }
.inventory-drawer-categories,
.owned-category-tabs { display: flex; min-width: 0; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.inventory-drawer-categories::-webkit-scrollbar,
.owned-category-tabs::-webkit-scrollbar { display: none; }
.inventory-drawer-categories button,
.owned-category-tabs button { min-width: 61px; min-height: 27px; padding: 5px 9px; border: 1px solid rgba(149, 174, 181, .17); border-radius: 6px; color: #9eb0b5; background: rgba(255, 255, 255, .04); font-size: 7px; font-weight: 900; }
.inventory-drawer-categories button.active { border-color: #cba96c; color: #fff4d8; background: rgba(157, 121, 61, .28); }
.inventory-drawer-categories .inventory-view-all { margin-left: auto; min-width: 86px; color: #86d7c6; }
.inventory-drawer-rack { display: flex; min-height: 115px; padding: 2px 2px 7px; gap: 7px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(199, 166, 102, .36) transparent; }
.inventory-drawer-item { position: relative; display: grid; width: 104px; min-width: 104px; min-height: 106px; padding: 7px; justify-items: center; align-content: start; gap: 2px; border: 1px solid rgba(151, 177, 184, .15); border-radius: 10px; color: #dce8e9; background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); text-align: center; touch-action: pan-x; user-select: none; }
.inventory-drawer-item:hover { border-color: rgba(203, 170, 105, .48); background: rgba(255, 255, 255, .08); }
.inventory-drawer-item.selected { border-color: #d0ad6b; box-shadow: inset 0 0 0 1px rgba(235, 204, 139, .22), 0 4px 12px rgba(5, 11, 15, .2); }
.inventory-drawer-item.daily-ready::after { content: "+10"; position: absolute; top: 5px; right: 5px; padding: 3px 5px; border-radius: 999px; color: #65480f; background: #f4cd68; font-size: 5px; font-weight: 950; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.inventory-drawer-art { width: 48px; height: 48px; }
.inventory-drawer-item > span { display: grid; min-width: 0; width: 100%; }
.inventory-drawer-item strong { overflow: hidden; color: #f4f1e7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-drawer-item small { overflow: hidden; color: #92a7ad; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-drawer-item > b { margin-top: 2px; color: #c5a86d; font-size: 5px; font-weight: 900; text-transform: uppercase; }
.inventory-drawer-empty { display: flex; min-width: 100%; align-items: center; justify-content: center; gap: 9px; color: #96aab0; font-size: 8px; }
.inventory-drawer-empty button { min-height: 30px; border: 1px solid rgba(128, 213, 194, .28); border-radius: 7px; color: #83d4c2; background: rgba(31, 117, 101, .15); font-size: 7px; }
.inventory-drawer-tip,
.inventory-drawer-selected { display: flex; min-height: 48px; padding: 7px 8px; align-items: center; gap: 9px; border-top: 1px solid rgba(207, 175, 112, .17); }
.inventory-drawer-tip { display: grid; grid-template-columns: auto 1fr; }
.inventory-drawer-tip strong { color: #dec58f; font-size: 8px; }
.inventory-drawer-tip span { color: #82979f; font-size: 7px; }
.inventory-selected-art { width: 40px; height: 40px; }
.inventory-drawer-selected > div:nth-child(2) { display: grid; min-width: 120px; margin-right: auto; }
.inventory-drawer-selected > div:nth-child(2) strong { color: #f3ead6; font-size: 9px; }
.inventory-drawer-selected > div:nth-child(2) span { color: #8fa2a8; font-size: 7px; }
.inventory-drawer-actions { display: flex; max-width: 60%; gap: 5px; overflow-x: auto; }
.inventory-drawer-actions button { min-width: max-content; min-height: 30px; padding: 6px 9px; border: 1px solid rgba(127, 208, 190, .25); border-radius: 6px; color: #c8eee5; background: rgba(39, 134, 115, .18); font-size: 7px; font-weight: 850; }
.inventory-drag-ghost { position: fixed; z-index: 200; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid rgba(221, 190, 127, .72); border-radius: 15px; background: rgba(25, 39, 47, .92); box-shadow: 0 14px 30px rgba(20, 36, 45, .32); pointer-events: none; transform: translate(-50%, -50%) scale(1.04); }
.inventory-drag-ghost .inventory-art { width: 52px; height: 52px; }
body[data-inventory-drop-target="room"] .inventory-drag-ghost { border-color: #7ccbb9; box-shadow: 0 0 0 4px rgba(80, 198, 172, .14), 0 14px 30px rgba(20, 36, 45, .32); }
body[data-inventory-drop-target="chumkin"] .inventory-drag-ghost { border-color: #f0c76e; box-shadow: 0 0 0 5px rgba(240, 199, 110, .18), 0 14px 30px rgba(20, 36, 45, .32); transform: translate(-50%, -50%) scale(1.12); }
body.inventory-item-dragging,
body.inventory-item-dragging * { cursor: grabbing !important; }

.inventory-owned-page { display: grid; max-width: 980px; gap: 16px; }
.inventory-owned-hero { display: flex; min-height: 78px; padding: 15px 17px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(46, 82, 101, .12); border-radius: 15px; background: linear-gradient(145deg, rgba(235, 248, 248, .9), rgba(238, 243, 252, .88)); }
.inventory-owned-hero > div { display: grid; gap: 3px; }
.inventory-owned-hero strong { color: #2c4b5a; font-size: 16px; }
.inventory-owned-hero span { max-width: 560px; color: #748893; font-size: 9px; line-height: 1.4; }
.inventory-owned-hero .button { min-height: 38px; margin: 0; font-size: 9px; }
.owned-category-tabs button { color: #617983; background: rgba(255, 255, 255, .65); }
.owned-category-tabs button.active { border-color: #32aa92; color: white; background: #2eaa92; }

.marketplace-shell { display: grid; max-width: 1120px; gap: 16px; }
.marketplace-currency-tabs { display: grid; max-width: 520px; padding: 4px; grid-template-columns: 1fr 1fr; gap: 4px; border: 1px solid rgba(46, 80, 98, .13); border-radius: 15px; background: rgba(224, 236, 241, .72); }
.marketplace-currency-tabs button { display: grid; min-height: 58px; padding: 8px 12px; grid-template-columns: 28px 1fr; grid-template-rows: 1fr 1fr; align-items: center; border: 0; border-radius: 11px; color: #637985; background: transparent; text-align: left; }
.marketplace-currency-tabs button > span { grid-row: 1 / 3; color: #8fa2ab; font-size: 18px; text-align: center; }
.marketplace-currency-tabs button strong { font-size: 12px; }
.marketplace-currency-tabs button small { color: #8b9ba3; font-size: 7px; }
.marketplace-currency-tabs button.active { color: white; background: linear-gradient(135deg, #2b9e8b, #397aa9); box-shadow: 0 5px 12px rgba(41, 119, 126, .18); }
.marketplace-currency-tabs button.active > span,
.marketplace-currency-tabs button.active small { color: #eafbf7; }
.marketplace-coin-view,
.marketplace-token-view { display: grid; gap: 15px; }
.marketplace-coin-tools { margin-top: 3px; border-top: 1px solid rgba(49, 83, 101, .1); color: #6d818b; }
.marketplace-coin-tools summary { width: max-content; padding: 13px 2px 5px; color: #4c6a78; font-size: 9px; font-weight: 900; }
.marketplace-coin-tools > div { display: flex; max-width: 660px; padding: 8px 0; align-items: end; justify-content: space-between; gap: 14px; }
.marketplace-coin-tools p { max-width: 290px; margin: 0; font-size: 8px; line-height: 1.4; }
.marketplace-coin-tools form { display: flex; align-items: end; gap: 6px; }
.marketplace-coin-tools label { display: grid; gap: 3px; color: #71858d; font-size: 7px; font-weight: 850; }
.marketplace-coin-tools input { width: 100px; min-height: 34px; border: 1px solid rgba(55, 89, 104, .16); border-radius: 8px; background: white; }
.marketplace-coin-tools .button { min-height: 34px; margin: 0; border-radius: 8px; font-size: 8px; }
.marketplace-category-tabs { padding: 2px 0; }
.marketplace-token-head { display: flex; min-height: 66px; padding: 12px 15px; align-items: center; justify-content: space-between; border: 1px solid rgba(91, 74, 179, .14); border-radius: 14px; background: linear-gradient(135deg, #f2efff, #eef9f7); }
.marketplace-token-head > div { display: grid; }
.marketplace-token-head strong { color: #5546a4; font-size: 17px; }
.marketplace-token-head span,
.marketplace-token-head small { color: #818c9f; font-size: 7px; }
.marketplace-spend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.marketplace-spend-card { display: grid; min-height: 132px; padding: 14px; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 6px 13px; border: 1px solid rgba(56, 91, 108, .13); border-radius: 17px; background: rgba(255, 255, 255, .82); box-shadow: 0 5px 0 rgba(52, 83, 97, .06); }
.marketplace-spend-card.welcome { border-color: rgba(44, 175, 143, .35); background: linear-gradient(145deg, #f0fff9, #f7fcff); }
.marketplace-spend-art { position: relative; display: grid; grid-row: 1 / 3; width: 70px; height: 76px; place-items: center; }
.marketplace-spend-art .chumkin-egg-art { position: relative; transform: scale(.86); }
.marketplace-spend-art .envelope-art { width: 62px; height: 40px; border-width: 2px; transform: rotate(-3deg); }
.marketplace-spend-card > div:nth-child(2) { display: grid; }
.marketplace-spend-card small { color: #2d9985; font-size: 7px; font-weight: 950; text-transform: uppercase; }
.marketplace-spend-card h3 { margin: 1px 0; color: #2f4b5a; font-size: 20px; letter-spacing: -.04em; }
.marketplace-spend-card p { margin: 0; color: #7b8d96; font-size: 8px; }
.marketplace-spend-card > strong { color: #745c9b; font-size: 11px; }
.marketplace-spend-card > .button { min-width: 112px; min-height: 36px; margin: 0; border-radius: 9px; font-size: 8px; }
.marketplace-section-title { display: flex; min-height: 36px; align-items: end; justify-content: space-between; }
.marketplace-section-title h2 { margin: 0; color: #2d4858; font-size: 22px; letter-spacing: -.04em; }
.marketplace-section-title span { color: #84949c; font-size: 7px; font-weight: 900; }
.marketplace-token-view .shop-store-group { margin-top: 5px; padding-top: 14px; border-top: 1px solid rgba(49, 83, 101, .1); }

@media (max-width: 760px) {
  .room-stars { top: 58px; }
  .room-sidebar { top: 116px; left: 9px; width: min(220px, calc(100vw - 18px)); max-height: calc(100dvh - 194px); }
  .room-sidebar-panel-body { max-height: min(190px, 36dvh); }
  .room-item-editor .room-item-safe-actions { grid-template-columns: 1fr; }
  .room-inventory-drawer { top: 120px; right: 9px; left: 9px; width: auto; max-height: min(280px, 44dvh); padding: 9px; border-radius: 13px; }
  .inventory-drawer-heading span { font-size: 6px; }
  .inventory-drawer-rack { min-height: 104px; }
  .inventory-drawer-item { width: 91px; min-width: 91px; min-height: 96px; padding: 5px; }
  .inventory-drawer-art { width: 42px; height: 42px; }
  .inventory-drawer-selected { align-items: flex-start; flex-wrap: wrap; }
  .inventory-drawer-selected > div:nth-child(2) { min-width: 0; flex: 1; }
  .inventory-drawer-actions { width: 100%; max-width: none; }
  .inventory-drawer-open .character-sheet { opacity: 0; pointer-events: none; }
  .character-sheet { top: 122px; right: 9px; width: calc(100vw - 18px); max-height: calc(100dvh - 136px); }
  .character-sheet-main { grid-template-columns: minmax(0, 1fr) 72px; }
  .character-vital > i { width: 46px; height: 46px; }
  .inventory-owned-hero { align-items: stretch; flex-direction: column; }
  .inventory-owned-hero .button { width: 100%; }
  .marketplace-currency-tabs { max-width: none; }
  .marketplace-coin-tools > div { align-items: stretch; flex-direction: column; }
  .marketplace-coin-tools form { display: grid; grid-template-columns: 1fr auto; }
  .marketplace-coin-tools input { width: 100%; }
  .marketplace-spend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .character-sheet { padding: 9px; gap: 8px; }
  .character-sheet-heading strong { font-size: 21px; }
  .character-sheet-main { min-height: 142px; grid-template-columns: minmax(0, 1fr) 65px; }
  .character-portrait { min-height: 142px; }
  .character-portrait .chumkin-still { height: 128px; }
  .character-slot { min-height: 35px; }
  .character-vital > i { width: 41px; height: 41px; }
  .character-vital b { font-size: 10px; }
  .character-traits { grid-template-columns: repeat(2, 1fr); }
  .room-inventory-drawer { top: 116px; max-height: min(268px, 46dvh); }
  .inventory-drawer-categories button { min-width: 55px; padding-inline: 7px; }
  .inventory-drawer-categories .inventory-view-all { min-width: 76px; }
  .marketplace-currency-tabs button { min-height: 53px; padding: 7px 8px; }
  .marketplace-spend-card { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .marketplace-spend-art { grid-row: 1 / 4; width: 56px; height: 66px; }
  .marketplace-spend-card > strong,
  .marketplace-spend-card > .button { grid-column: 2; }
  .marketplace-spend-card > .button { width: 100%; min-width: 0; }
}

/* Production public-site sizing and overflow guards. */
.public-site-active,
.public-site-active main,
.public-site-active .auth-shell,
.public-site-active .landing-scroll,
.public-page { max-width: 100%; }
.landing-hero > *,
.account-page-layout > *,
.simple-page-intro,
.simple-flow > div > *,
.auth-card,
.auth-form,
.auth-field,
.password-control { min-width: 0; }
.simple-page-intro h1,
.account-page-intro h1 { max-width: 100%; overflow-wrap: break-word; }
.landing-account-actions,
.auth-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-account-actions a,
.auth-tabs button { min-width: 0; }

@media (max-width: 700px) {
  .public-site-active .auth-shell { overflow-x: clip; overflow-y: auto; }
  .landing-hero,
  .account-page,
  .account-page-layout,
  .simple-page { min-width: 0; max-width: 100%; }
  .landing-hero { width: 100%; padding-right: 14px; padding-left: 14px; }
  .landing-brand { min-width: 0; gap: 8px; }
  .landing-logo { width: clamp(46px, 14vw, 56px); max-height: 54px; }
  .landing-brand h1 { min-width: 0; font-size: clamp(35px, 11.5vw, 46px); letter-spacing: -.06em; }
  .landing-intro { min-width: 0; padding-right: 4px; padding-left: 4px; }
  .landing-intro .landing-lead { font-size: clamp(24px, 7.4vw, 30px); }
  .landing-intro p { overflow-wrap: break-word; }
  .landing-account-actions { width: 100%; min-width: 0; gap: 9px; }
  .landing-account-actions a { padding-right: 8px; padding-left: 8px; text-align: center; white-space: normal; }
  .landing-sun { display: none; }
  .account-page-layout { width: 100%; }
  .account-page-intro h1 { font-size: clamp(40px, 13.5vw, 56px); line-height: .92; }
  .account-auth-card,
  .account-authenticated { width: 100%; max-width: 520px; }
  .auth-tabs button { padding-right: 8px; padding-left: 8px; font-size: 14px; white-space: normal; }
  .auth-form input,
  .auth-form select { width: 100%; max-width: 100%; }
  .simple-page-intro h1,
  .legal-page .simple-page-intro h1 { font-size: clamp(39px, 12.2vw, 54px); line-height: .96; }
}

@media (max-width: 390px) {
  .public-wordmark span { font-size: 12px; }
  .public-wordmark { gap: 7px; }
  .public-signin-link,
  .public-dashboard-link { padding-right: 9px; padding-left: 9px; }
  .landing-account-actions { grid-template-columns: 1fr; }
  .landing-account-actions a { min-height: 50px; }
}