:root {
  /* Night Safari palette */
  --bg: #0d1b2e;
  --bg-2: #13233b;
  --panel: #16273f;
  --ink: #eaf2ff;
  --ink-2: #9fb3d1;
  --line: #243a5c;
  --brand: #36d1a0;
  --brand-ink: #04261b;
  --brand-2: #ff8a5c;
  --danger: #ff6b81;
  --coin: #ffcc33;
  --gem: #b18cff;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --radius: 18px;
  --common: #a9b4c2; --uncommon: #3fdc84; --rare: #4da3ff; --epic: #b16cff; --legendary: #ffc531;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 'Nunito', system-ui, sans-serif;
  min-height: 100vh;
}
h1, h2, h3, .display { font-family: 'Fredoka', 'Nunito', sans-serif; letter-spacing: .2px; margin: 0; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p { margin: 0; }
a { color: var(--brand); }
button { font: inherit; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
.hidden { display: none !important; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.btn {
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 800;
  background: var(--bg-2); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
  transition: transform .08s ease, filter .15s;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.orange { background: var(--brand-2); color: #fff; }
.btn.gold { background: var(--coin); color: #3a2a00; }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.btn.sm { padding: 6px 12px; font-size: .9rem; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
  background: radial-gradient(circle at 30% 20%, #3fbf8f 0, #1f6e55 55%, #134a3a 100%);
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 18px; overflow: hidden;
}
.auth-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.auth-hero p { font-size: 1.15rem; opacity: .9; max-width: 34ch; }
.hero-parade { display: flex; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.hero-parade img { width: 110px; height: 110px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.hero-parade:has(.hero-shot) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 600px; }
.hero-shot { margin: 0; position: relative; border-radius: 20px; overflow: hidden; border: 3px solid var(--rc, rgba(255,255,255,.7)); box-shadow: 0 10px 24px rgba(0,0,0,.28); background: #e9e9ec; }
.hero-parade .hero-shot img.photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; filter: none; }
.hero-shot figcaption { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
@media (max-width: 860px) { .hero-parade:has(.hero-shot) { gap: 8px; } .hero-shot { border-radius: 14px; } .hero-shot figcaption { font-size: .65rem; padding: 2px 7px; left: 5px; bottom: 5px; } }
.auth-form-wrap { display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 5px; border-radius: 999px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 999px; font-weight: 800; color: var(--ink-2); }
.tabs button.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.error { color: var(--danger); font-weight: 700; min-height: 1.5em; }

/* ---------- App shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.logo { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.4rem; display: flex; align-items: center; gap: 8px; }
.wallet { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { background: var(--panel); border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.pill .coin { color: var(--coin); } .pill .gem { color: var(--gem); }
nav.mainnav { max-width: 1200px; margin: 0 auto; padding: 0 16px 8px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
nav.mainnav button {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 800; color: var(--ink-2); white-space: nowrap;
}
nav.mainnav button.active { background: var(--ink); color: var(--bg); }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 80px; }
.page-head { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head p { max-width: 60ch; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }

button.pill { cursor: pointer; color: var(--ink); font: inherit; font-weight: 800; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; margin-left: 4px; }
.gem-card { text-align: center; align-items: center; }
.gem-card .gem-icon { font-size: 3rem; line-height: 1; }
.gem-card .amount { font-family: 'Fredoka', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--gem); }
.gem-card.popular { border: 2px solid var(--gem); }
.gem-card .flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gem); color: #fff; font-size: .75rem; font-weight: 900; padding: 2px 10px; border-radius: 999px; }
.trade { display: grid; gap: 10px; margin-bottom: 14px; }
.trade-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.mini-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mini { width: 84px; text-align: center; font-size: .75rem; font-weight: 800; }
.mini img { width: 76px; height: 76px; background: var(--bg-2); border-radius: 12px; border: 2px solid var(--rc, var(--line)); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 4px; }
.pick-grid .mini { border: 2px solid transparent; border-radius: 14px; padding: 4px; background: none; color: var(--ink); cursor: pointer; width: auto; }
.pick-grid .mini.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--panel)); }
@media (max-width: 860px) { .trade-sides { grid-template-columns: 1fr; } }

.verify-banner { max-width: 1200px; margin: 12px auto 0; padding: 10px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--coin) 18%, var(--panel)); border: 1px solid var(--line); border-radius: 14px; font-weight: 700; }
.verify-banner span { flex: 1; min-width: 220px; }
#turnstileBox:empty { display: none; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 70px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--bg-2); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: .8rem; cursor: pointer; }
.pw-rules { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: .82rem; color: var(--ink-2); }
.pw-rules li::before { content: '○ '; }
.pw-rules li.ok { color: var(--brand); font-weight: 700; }
.pw-rules li.ok::before { content: '✓ '; }

.event-banner { max-width: 1200px; margin: 12px auto 0; padding: 10px 16px; border-radius: 14px; font-weight: 800; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--epic) 22%, var(--panel)), color-mix(in srgb, var(--legendary) 22%, var(--panel)));
  border: 1px solid var(--line); }
.quests { display: grid; gap: 10px; margin-bottom: 22px; }
.quest { display: grid; grid-template-columns: 1fr 140px auto; gap: 12px; align-items: center; }
.quest .bar { height: 10px; }
.quest.claimed { opacity: .55; }
.dex-species { margin-bottom: 14px; }
.dex-species summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: center; font-weight: 800; }
.dex-species summary::-webkit-details-marker { display: none; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 12px; }
.dex-card { border: 2px solid var(--rc, var(--line)); border-radius: 14px; padding: 6px; text-align: center; font-size: .75rem; font-weight: 800; background: var(--panel); }
.dex-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--bg-2); }
.dex-card.locked .ph { width: 100%; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 2rem;
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 10px, var(--panel) 10px 20px); color: var(--ink-2); }
.dex-card.locked { opacity: .75; }
.milestones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .quest { grid-template-columns: 1fr; } }

/* ---------- Enclosures ---------- */
.enclosure { margin-bottom: 22px; overflow: hidden; padding: 0; }
.enc-head { display: flex; gap: 10px; align-items: center; padding: 12px 16px; flex-wrap: wrap; }
.enc-head h3 { display: flex; gap: 8px; align-items: center; }
.habitat { position: relative; height: 260px; overflow: hidden; border-top: 1px solid var(--line); }
/* Soft studio backdrops tinted per biome: they match the gray studio light of the AI photos,
   so the animal stays the star (no busy scenery). */
.habitat.TEMPERATE { background: radial-gradient(ellipse at 50% 35%, #f4f5f2 0%, #e2e8dc 55%, #c9d6c0 100%); }
.habitat.AQUATIC { background: radial-gradient(ellipse at 50% 35%, #f2f5f7 0%, #dce6ee 55%, #bfd2e2 100%); }
.habitat.CYBERPUNK { background: radial-gradient(ellipse at 50% 35%, #f4f2f7 0%, #e3dcec 55%, #cdbfe0 100%); }
.habitat.SAVANNAH { background: radial-gradient(ellipse at 50% 35%, #f7f4ee 0%, #ece3d2 55%, #dccbab 100%); }
.habitat.NURSERY { background: radial-gradient(ellipse at 50% 35%, #f6f5f3 0%, #e9e6e1 60%, #d9d4cc 100%); }
.habitat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(transparent, rgba(0,0,0,.05)); pointer-events: none; }
.habitat .deco { position: absolute; pointer-events: none; user-select: none; font-size: 1.5rem; opacity: .35; filter: grayscale(.3); }
.critter {
  position: absolute; width: 120px; height: 120px; bottom: 10px; left: 0; cursor: pointer;
  transition: left 3.5s ease-in-out, bottom 3.5s ease-in-out; border: 0; background: none; padding: 0;
}
.critter img { width: 100%; height: 100%; transition: transform .2s; }
.critter.photo img { object-fit: cover; border-radius: 18px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.critter.flip img { transform: scaleX(-1); }
.critter:hover img { transform: scale(1.08); }
.critter.flip:hover img { transform: scaleX(-1) scale(1.08); }
.critter .tag {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-size: .75rem; font-weight: 800; white-space: nowrap;
  background: var(--panel); color: var(--ink); padding: 1px 8px; border-radius: 999px; border: 2px solid var(--rc, var(--line));
}
.critter .alert { position: absolute; right: 8px; top: 14px; font-size: 1.2rem; animation: bounce 1s infinite; }
@keyframes bounce { 50% { transform: translateY(-5px); } }
.empty-habitat { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(0,0,0,.45); font-weight: 800; }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; position: relative;
}
.card .art { background: var(--bg-2); border-radius: 14px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.card .art img { width: 92%; }
.card.selectable { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.card.selectable:hover { transform: translateY(-2px); }
.card.selected { outline: 3px solid var(--brand); }
.rarity-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px; color: #fff; background: var(--rc);
}
.r-COMMON { --rc: var(--common); } .r-UNCOMMON { --rc: var(--uncommon); } .r-RARE { --rc: var(--rare); }
.r-EPIC { --rc: var(--epic); } .r-LEGENDARY { --rc: var(--legendary); }
.card.r-EPIC, .card.r-LEGENDARY, .card.r-RARE { border: 2px solid var(--rc); }
.card.r-LEGENDARY { background: linear-gradient(160deg, color-mix(in srgb, var(--legendary) 14%, var(--panel)), var(--panel)); }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20, 14, 10, .55); z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--panel); border-radius: 24px; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.35); position: relative; }
.modal-close { position: absolute; right: 12px; top: 12px; border: 0; background: var(--bg-2); width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; z-index: 2; }
.pet-layout { display: grid; grid-template-columns: 320px 1fr; }
.pet-side { padding: 22px; background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; }
.pet-side .big-art { background: var(--panel); border-radius: 18px; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid var(--rc); }
.pet-side .big-art img { width: 92%; }
.pet-main { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stat { display: grid; gap: 4px; }
.bar { height: 12px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.traits { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--bg-2); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700; }
.chip.good { background: color-mix(in srgb, var(--uncommon) 22%, var(--panel)); }
.chip.bad { background: color-mix(in srgb, var(--danger) 22%, var(--panel)); }
.chat { border: 2px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; height: 280px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 4px; }
.chat form { display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--line); }
.chat input { border-radius: 999px; }
.typing { color: var(--ink-2); font-style: italic; font-size: .9rem; }

/* ---------- Reveal ---------- */
.reveal { text-align: center; padding: 36px 24px; display: grid; gap: 12px; justify-items: center; overflow: hidden; }
.reveal .stage { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }
.reveal .burst { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, var(--rc) 0, transparent 65%); opacity: 0; }
.reveal .egg { font-size: 7rem; animation: shake .5s ease-in-out infinite; }
.reveal.done .egg { display: none; }
.reveal .born { width: 240px; opacity: 0; transform: scale(.3); position: relative; }
.reveal.done .born { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.reveal.done .burst { animation: burst 1.2s ease-out forwards; }
.reveal.done.r-LEGENDARY .burst, .reveal.done.r-EPIC .burst { animation: burst 1.2s ease-out forwards, glowloop 2s 1.2s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
@keyframes burst { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }
@keyframes glowloop { 50% { opacity: .9; } }

/* ---------- Lab ---------- */
.lab { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.pick {
  border: 2px solid var(--line); background: var(--panel); border-radius: 14px; padding: 6px; display: grid; justify-items: center; font-weight: 800; font-size: .85rem; color: var(--ink);
}
/* Big, photo-forward picker cards that pop */
.pick { padding: 6px 6px 9px; gap: 6px; border-radius: 18px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s; box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 6px 14px rgba(40,30,20,.08); }
.pick:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(40,30,20,.18); }
.pick img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 13px; background: var(--bg-2); }
.pick.active { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--brand), 0 12px 24px rgba(47,143,107,.28); }
.picker.skins { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.pick.skin { border-color: color-mix(in srgb, var(--rc) 60%, var(--line)); gap: 3px; position: relative; }
.pick.skin .skin-name { font-size: .82rem; line-height: 1.15; text-align: center; }
.pick.skin .skin-price { font-size: .74rem; color: var(--ink-2); font-weight: 800; }
.pick.skin.active { border-color: var(--rc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 55%, transparent), 0 12px 24px rgba(0,0,0,.18); background: color-mix(in srgb, var(--rc) 10%, var(--panel)); }
.pick.skin.locked { cursor: not-allowed; }
.pick.skin.locked img { filter: saturate(.75) brightness(.88); }
@media (max-width: 560px) { .picker, .picker.skins { grid-template-columns: repeat(3, 1fr); gap: 8px; } .pick.skin .skin-name { font-size: .72rem; } }
.pick.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--panel)); }
.theme-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-chips button { border: 2px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: .85rem; }
.theme-chips button[class*="r-"] { border-color: color-mix(in srgb, var(--rc) 60%, var(--line)); }
.theme-chips button:disabled { opacity: .55; cursor: not-allowed; }
.theme-chips button.active { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, var(--panel)); }
.sticky { position: sticky; top: 120px; }
.odds { display: grid; gap: 6px; }
.odds div { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; font-size: .85rem; font-weight: 700; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; font-size: .9rem; }

.breed-slots { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 18px; }
.slot { min-height: 200px; border: 3px dashed var(--line); border-radius: 18px; display: grid; place-items: center; text-align: center; padding: 10px; }
.slot img { width: 150px; }
.heart { font-size: 2.6rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--bg-2); }
.guest-entry { padding: 10px 0; border-bottom: 1px solid var(--line); }

.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-weight: 700; box-shadow: var(--shadow); animation: toastin .25s ease-out; }
.toast.err { background: var(--danger); color: #fff; }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding: 32px 16px; }
  .hero-parade img { width: 72px; height: 72px; }
  .pet-layout, .lab { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .breed-slots { grid-template-columns: 1fr; }
  .heart { text-align: center; }
  .habitat { height: 220px; }
  .critter { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   NIGHT SAFARI game theme (overrides the base styles above)
   ===================================================================== */
body {
  background: radial-gradient(1200px 700px at 25% -10%, #1f4e6b 0, #0d1b2e 55%, #070d18 100%) fixed;
  color: var(--ink);
}
h1, h2, h3 { color: #fff; }
.page-head h2 { font-size: 2rem; text-shadow: 0 2px 14px rgba(80, 200, 255, .25); }
a { color: var(--brand); }
input, select, textarea { background: #0b1626; border-color: #263a5c; color: var(--ink); }
input::placeholder { color: #6f85a6; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(54, 209, 160, .25); }

/* Glossy, chunky buttons with a press-down feel */
.btn {
  background: linear-gradient(#22385a, #182a46); color: #eaf2ff; border: 1px solid #2f4a74;
  box-shadow: 0 4px 0 #0a1424, inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #0a1424; }
.btn.primary { background: linear-gradient(#45e0ad, #1f9e78); color: #04261b; border-color: #5cf0c0; box-shadow: 0 4px 0 #0d5c45, 0 0 18px rgba(54, 209, 160, .35); }
.btn.gold { background: linear-gradient(#ffd54a, #ff9f1c); color: #3a1d00; border-color: #ffe08a; box-shadow: 0 4px 0 #a85a00, 0 0 18px rgba(255, 180, 40, .4); }
.btn.orange { background: linear-gradient(#ff8a5c, #e8552e); color: #fff; border-color: #ffab88; box-shadow: 0 4px 0 #8f2e12, 0 0 16px rgba(255, 110, 60, .35); }
.btn.ghost { background: rgba(255, 255, 255, .04); border-color: #2f4a74; box-shadow: none; }
.btn.danger { background: transparent; color: #ff7a8f; border-color: #ff7a8f; box-shadow: none; }
.btn:disabled { opacity: .45; filter: grayscale(.4); }
#synthBtn, #breedBtn, [data-adopt], [data-pack] { font-size: 1.05rem; padding: 12px 20px; }

/* Top HUD */
.topbar { background: rgba(10, 20, 36, .72); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.logo { color: #fff; text-shadow: 0 0 18px rgba(80, 200, 255, .55); }
.pill { background: linear-gradient(#1b2b45, #13203a); border: 2px solid #2d4670; color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); }
button.pill { color: #fff; }
.pill .coin { color: #ffcc33; text-shadow: 0 0 10px #ffb300; }
.pill .gem { color: #b18cff; text-shadow: 0 0 10px #8b5cff; }
.pill.level { color: #ffe08a; }
.pill.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.18); } 60% { transform: scale(.96); } }
nav.mainnav button { color: #9fb3d1; transition: color .15s, background .15s; }
nav.mainnav button:hover { color: #fff; }
nav.mainnav button.active { background: linear-gradient(#45e0ad, #1f9e78); color: #04261b; box-shadow: 0 0 18px rgba(54, 209, 160, .5), inset 0 -3px 0 rgba(0, 0, 0, .2); }

/* Panels & cards glow */
.panel, .card, .modal, .dex-species {
  background: linear-gradient(180deg, #16273f, #0f1c30); border: 1px solid #243a5c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.card { transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-4px); }
.card .art { background: #0b1424; }
.card.r-RARE, .card.r-EPIC, .card.r-LEGENDARY { border: 2px solid var(--rc); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 45%, transparent); }
.card.r-LEGENDARY { background: linear-gradient(170deg, color-mix(in srgb, var(--legendary) 16%, #16273f), #0f1c30); }
.rarity-badge { color: #081322; box-shadow: 0 0 10px var(--rc); }
.chip { background: #1b2c47; color: #cfe0f7; }
.chip.good { background: rgba(54, 209, 160, .18); color: #7cf7d0; }
.chip.bad { background: rgba(255, 90, 110, .16); color: #ff9aa9; }
.bar { background: #0a1222; }
.bar > span { box-shadow: 0 0 8px currentColor; }
.muted { color: var(--ink-2); }

/* Pickers (DNA Lab) */
.pick { background: linear-gradient(180deg, #16273f, #0f1c30); border-color: #263a5c; color: #eaf2ff; }
.pick img { background: #0b1424; }
.pick.active { box-shadow: 0 0 0 3px var(--brand), 0 0 24px rgba(54, 209, 160, .45); }
.pick.skin { border-color: color-mix(in srgb, var(--rc) 70%, #263a5c); }
.pick.skin.active { box-shadow: 0 0 0 3px var(--rc), 0 0 26px color-mix(in srgb, var(--rc) 60%, transparent); background: color-mix(in srgb, var(--rc) 14%, #0f1c30); }
.odds div span:first-child { color: #cfe0f7; }

/* Habitats: dim studio spotlight so the photo cards glow */
.habitat.TEMPERATE { background: radial-gradient(ellipse at 50% 30%, #2a4a3c 0%, #14281f 60%, #0b1712 100%); }
.habitat.AQUATIC { background: radial-gradient(ellipse at 50% 30%, #1f4466 0%, #10243b 60%, #081422 100%); }
.habitat.CYBERPUNK { background: radial-gradient(ellipse at 50% 30%, #3b2a66 0%, #1d1538 60%, #0f0a20 100%); }
.habitat.SAVANNAH { background: radial-gradient(ellipse at 50% 30%, #5a4626 0%, #2c2213 60%, #17110a 100%); }
.habitat.NURSERY { background: radial-gradient(ellipse at 50% 30%, #3a3f4a 0%, #1d2027 70%, #111317 100%); }
.habitat::after { background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
.habitat .deco { opacity: .28; }
.critter .tag { background: #0d1b2e; color: #fff; border-color: var(--rc, #2f4a74); box-shadow: 0 0 10px color-mix(in srgb, var(--rc, #2f4a74) 50%, transparent); }
.critter.photo img { border: 2px solid var(--rc, #2f4a74); box-shadow: 0 0 18px color-mix(in srgb, var(--rc, #2f4a74) 55%, transparent), 0 8px 18px rgba(0, 0, 0, .5); }
.critter:hover img { transform: scale(1.1) translateY(-4px); }
.empty-habitat { color: rgba(255, 255, 255, .45); }
.enc-head { border-bottom: 1px solid #22385a; }

/* Modal & reveal */
.modal-back { background: rgba(3, 8, 16, .75); backdrop-filter: blur(4px); }
.modal-close { background: #1b2c47; color: #fff; }
.pet-side { background: #0c1829; }
.pet-side .big-art { background: #0b1424; box-shadow: 0 0 26px color-mix(in srgb, var(--rc) 50%, transparent); }
.bubble.assistant { background: #1b2c47; color: #eaf2ff; }
.chat, .chat form { border-color: #243a5c; }
.reveal h2 { font-size: 2rem; }
.reveal .born { filter: drop-shadow(0 0 24px var(--rc)); border-radius: 22px; }
.reveal .rays { position: absolute; inset: -60px; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 10deg, transparent 10deg 24deg); }
.reveal.done .rays { animation: rays 6s linear infinite, fadein .6s .2s forwards; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes fadein { to { opacity: .55; } }
.sparkle { position: fixed; pointer-events: none; z-index: 200; font-size: 18px; animation: spark .9s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.4) rotate(180deg); opacity: 0; } }
.coin-fly { position: fixed; z-index: 210; pointer-events: none; color: #ffcc33; font-weight: 900; text-shadow: 0 0 10px #ffb300;
  transition: transform .8s cubic-bezier(.5, -0.3, .7, 1), opacity .8s; }

/* Banners */
.event-banner { background: linear-gradient(90deg, rgba(177, 108, 255, .28), rgba(255, 197, 49, .22)); border: 1px solid rgba(255, 197, 49, .4); color: #fff; box-shadow: 0 0 22px rgba(177, 108, 255, .25); }
.verify-banner { background: rgba(255, 204, 51, .15); border-color: rgba(255, 204, 51, .4); color: #ffe7a0; }
.toast { background: linear-gradient(#22385a, #182a46); color: #fff; border: 1px solid #36507c; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* Auth / landing */
.auth-hero { background: radial-gradient(circle at 30% 20%, #1f6e8f 0, #0f2a44 55%, #070d18 100%); }
.auth-form-wrap { background: transparent; }
.auth-hero h1 { text-shadow: 0 0 30px rgba(80, 200, 255, .45); }
.tabs { background: #0b1626; }
.tabs button { color: #9fb3d1; }
.tabs button.active { background: linear-gradient(#45e0ad, #1f9e78); color: #04261b; }
.pw-toggle { background: #1b2c47; color: #fff; }
.hero-shot { box-shadow: 0 0 22px color-mix(in srgb, var(--rc, #fff) 45%, transparent), 0 10px 24px rgba(0, 0, 0, .45); }

/* ---------- Step-by-step guide ---------- */
.guide {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(360px, calc(100% - 36px));
  background: linear-gradient(#ffd54a, #ffb627); color: #3a1d00; border-radius: 18px; padding: 14px 16px 12px;
  box-shadow: 0 6px 0 #a85a00, 0 0 30px rgba(255, 180, 40, .45); animation: guideIn .35s cubic-bezier(.2, 1.4, .4, 1);
}
.guide .g-top { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
.guide .g-text { font-weight: 800; margin: 6px 0 10px; line-height: 1.35; }
.guide .g-dots { display: flex; gap: 4px; }
.guide .g-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(58, 29, 0, .25); }
.guide .g-dots i.on { background: #3a1d00; }
.guide .g-actions { display: flex; gap: 8px; align-items: center; }
.guide .g-go { background: #3a1d00; color: #ffd54a; border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 900; }
.guide .g-skip { background: none; border: 0; color: #3a1d00; opacity: .7; font-weight: 800; font-size: .8rem; text-decoration: underline; }
.guide.celebrate { animation: guideIn .35s cubic-bezier(.2, 1.4, .4, 1), wiggle .6s .35s; }
@keyframes guideIn { from { transform: translateY(30px) scale(.9); opacity: 0; } }
@keyframes wiggle { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.hint-glow { animation: hintGlow 1.4s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes hintGlow { 50% { box-shadow: 0 0 0 4px #ffd54a, 0 0 28px rgba(255, 213, 74, .8); } }
.step-hint { display: flex; gap: 10px; align-items: center; background: rgba(255, 213, 74, .12); border: 1px dashed rgba(255, 213, 74, .6);
  color: #ffe7a0; border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: .9rem; margin: 4px 0 10px; }
.step-hint b { color: #ffd54a; }

@media (max-width: 860px) {
  .guide { right: 10px; bottom: 10px; }
}

/* ---------- Enclosure stage ---------- */
.enclosure { border-radius: 22px; }
.enc-head { padding: 14px 18px; gap: 12px; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
.enc-head h3 { font-size: 1.3rem; }
.enc-biome { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 1.3rem;
  background: color-mix(in srgb, var(--bc) 30%, #0d1b2e); box-shadow: 0 0 14px color-mix(in srgb, var(--bc) 55%, transparent); }
.enc-stats { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cap { display: inline-flex; gap: 4px; align-items: center; background: #0b1626; border: 1px solid #243a5c; border-radius: 999px; padding: 5px 10px; font-size: .8rem; font-weight: 800; color: #cfe0f7; }
.cap i { width: 9px; height: 9px; border-radius: 3px; background: #22385a; }
.cap i.on { background: var(--bc); box-shadow: 0 0 6px var(--bc); }
.rate { background: rgba(255, 204, 51, .12); border: 1px solid rgba(255, 204, 51, .35); color: #ffd866; border-radius: 999px; padding: 5px 11px; font-weight: 900; font-size: .85rem; }
.TEMPERATE, .enc-TEMPERATE { --bc: #4fd18b; } .AQUATIC, .enc-AQUATIC { --bc: #4db8ff; }
.CYBERPUNK, .enc-CYBERPUNK { --bc: #c06bff; } .SAVANNAH, .enc-SAVANNAH { --bc: #ffb547; } .NURSERY { --bc: #9aa3ad; }

.habitat { height: 340px; border-top: 0; isolation: isolate; }
.habitat::before { content: ''; position: absolute; left: 0; right: 0; bottom: 70px; height: 190px; z-index: 0; background-repeat: no-repeat; background-size: 100% 100%; opacity: .9; }
.habitat.TEMPERATE::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%20220%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%230a1f17%27%3E%3Cpath%20d%3D%27M0%20220%20C150%20150%20300%20170%20450%20190%20C600%20210%20750%20140%20900%20160%20C1050%20180%201150%20150%201200%20170%20L1200%20220%20Z%27%20opacity%3D%27.55%27/%3E%3Cpath%20d%3D%27M0%20220%20L38%2090%20L76%20220%20Z%27/%3E%3Cpath%20d%3D%27M18%20220%20L38%20120%20L58%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M60%20220%20L98%2060%20L136%20220%20Z%27/%3E%3Cpath%20d%3D%27M78%20220%20L98%2090%20L118%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M130%20220%20L168%20100%20L206%20220%20Z%27/%3E%3Cpath%20d%3D%27M148%20220%20L168%20130%20L188%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M190%20220%20L228%2050%20L266%20220%20Z%27/%3E%3Cpath%20d%3D%27M208%20220%20L228%2080%20L248%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M260%20220%20L298%2085%20L336%20220%20Z%27/%3E%3Cpath%20d%3D%27M278%20220%20L298%20115%20L318%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M330%20220%20L368%2070%20L406%20220%20Z%27/%3E%3Cpath%20d%3D%27M348%20220%20L368%20100%20L388%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M400%20220%20L438%20110%20L476%20220%20Z%27/%3E%3Cpath%20d%3D%27M418%20220%20L438%20140%20L458%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M470%20220%20L508%2055%20L546%20220%20Z%27/%3E%3Cpath%20d%3D%27M488%20220%20L508%2085%20L528%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M540%20220%20L578%2095%20L616%20220%20Z%27/%3E%3Cpath%20d%3D%27M558%20220%20L578%20125%20L598%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M610%20220%20L648%2065%20L686%20220%20Z%27/%3E%3Cpath%20d%3D%27M628%20220%20L648%2095%20L668%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M680%20220%20L718%20100%20L756%20220%20Z%27/%3E%3Cpath%20d%3D%27M698%20220%20L718%20130%20L738%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M740%20220%20L778%2045%20L816%20220%20Z%27/%3E%3Cpath%20d%3D%27M758%20220%20L778%2075%20L798%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M810%20220%20L848%2090%20L886%20220%20Z%27/%3E%3Cpath%20d%3D%27M828%20220%20L848%20120%20L868%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M880%20220%20L918%2060%20L956%20220%20Z%27/%3E%3Cpath%20d%3D%27M898%20220%20L918%2090%20L938%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M950%20220%20L988%20105%20L1026%20220%20Z%27/%3E%3Cpath%20d%3D%27M968%20220%20L988%20135%20L1008%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M1020%20220%20L1058%2070%20L1096%20220%20Z%27/%3E%3Cpath%20d%3D%27M1038%20220%20L1058%20100%20L1078%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M1090%20220%20L1128%2050%20L1166%20220%20Z%27/%3E%3Cpath%20d%3D%27M1108%20220%20L1128%2080%20L1148%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M1150%20220%20L1188%2095%20L1226%20220%20Z%27/%3E%3Cpath%20d%3D%27M1168%20220%20L1188%20125%20L1208%20220%20Z%27%20opacity%3D%27.6%27/%3E%3C/g%3E%3C/svg%3E"); }
.habitat.AQUATIC::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%20220%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%23062038%27%3E%3Cpath%20d%3D%27M0%20120%20C100%20102%20200%20138%20300%20120%20S500%20102%20600%20120%20S800%20138%20900%20120%20S1100%20102%201200%20120%20L1200%20220%20L0%20220%20Z%27%20opacity%3D%270.35%27/%3E%3Cpath%20d%3D%27M0%20150%20C100%20132%20200%20168%20300%20150%20S500%20132%20600%20150%20S800%20168%20900%20150%20S1100%20132%201200%20150%20L1200%20220%20L0%20220%20Z%27%20opacity%3D%270.5%27/%3E%3Cpath%20d%3D%27M0%20180%20C100%20162%20200%20198%20300%20180%20S500%20162%20600%20180%20S800%20198%20900%20180%20S1100%20162%201200%20180%20L1200%20220%20L0%20220%20Z%27%20opacity%3D%270.7%27/%3E%3Cpath%20d%3D%27M80%20220%20C66%20170%2094%20140%2080%2070%27%20stroke%3D%27currentColor%27%20stroke-width%3D%279%27%20fill%3D%27none%27%20opacity%3D%27.5%27/%3E%3Cpath%20d%3D%27M220%20220%20C206%20170%20234%20140%20220%20100%27%20stroke%3D%27currentColor%27%20stroke-width%3D%279%27%20fill%3D%27none%27%20opacity%3D%27.5%27/%3E%3Cpath%20d%3D%27M520%20220%20C506%20170%20534%20140%20520%2060%27%20stroke%3D%27currentColor%27%20stroke-width%3D%279%27%20fill%3D%27none%27%20opacity%3D%27.5%27/%3E%3Cpath%20d%3D%27M760%20220%20C746%20170%20774%20140%20760%2090%27%20stroke%3D%27currentColor%27%20stroke-width%3D%279%27%20fill%3D%27none%27%20opacity%3D%27.5%27/%3E%3Cpath%20d%3D%27M1010%20220%20C996%20170%201024%20140%201010%2075%27%20stroke%3D%27currentColor%27%20stroke-width%3D%279%27%20fill%3D%27none%27%20opacity%3D%27.5%27/%3E%3Cpath%20d%3D%27M1130%20220%20C1116%20170%201144%20140%201130%20110%27%20stroke%3D%27currentColor%27%20stroke-width%3D%279%27%20fill%3D%27none%27%20opacity%3D%27.5%27/%3E%3C/g%3E%3C/svg%3E"); color: #0a3150; }
.habitat.CYBERPUNK::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%20220%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%230d0822%27%3E%3Crect%20x%3D%270%27%20y%3D%27100%27%20width%3D%2770%27%20height%3D%27120%27/%3E%3Crect%20x%3D%2775%27%20y%3D%2750%27%20width%3D%2750%27%20height%3D%27170%27/%3E%3Crect%20x%3D%27130%27%20y%3D%27120%27%20width%3D%2790%27%20height%3D%27100%27/%3E%3Crect%20x%3D%27225%27%20y%3D%2730%27%20width%3D%2740%27%20height%3D%27190%27/%3E%3Crect%20x%3D%27270%27%20y%3D%2790%27%20width%3D%2780%27%20height%3D%27130%27/%3E%3Crect%20x%3D%27355%27%20y%3D%2760%27%20width%3D%2760%27%20height%3D%27160%27/%3E%3Crect%20x%3D%27420%27%20y%3D%27110%27%20width%3D%27100%27%20height%3D%27110%27/%3E%3Crect%20x%3D%27525%27%20y%3D%2720%27%20width%3D%2745%27%20height%3D%27200%27/%3E%3Crect%20x%3D%27575%27%20y%3D%2780%27%20width%3D%2785%27%20height%3D%27140%27/%3E%3Crect%20x%3D%27665%27%20y%3D%2745%27%20width%3D%2755%27%20height%3D%27175%27/%3E%3Crect%20x%3D%27725%27%20y%3D%27105%27%20width%3D%2795%27%20height%3D%27115%27/%3E%3Crect%20x%3D%27825%27%20y%3D%2735%27%20width%3D%2740%27%20height%3D%27185%27/%3E%3Crect%20x%3D%27870%27%20y%3D%2785%27%20width%3D%2775%27%20height%3D%27135%27/%3E%3Crect%20x%3D%27950%27%20y%3D%2755%27%20width%3D%2760%27%20height%3D%27165%27/%3E%3Crect%20x%3D%271015%27%20y%3D%27115%27%20width%3D%2790%27%20height%3D%27105%27/%3E%3Crect%20x%3D%271110%27%20y%3D%2740%27%20width%3D%2750%27%20height%3D%27180%27/%3E%3Crect%20x%3D%271165%27%20y%3D%2795%27%20width%3D%2740%27%20height%3D%27125%27/%3E%3C/g%3E%3C/svg%3E"); }
.habitat.SAVANNAH::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%20220%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%231d150a%27%3E%3Cpath%20d%3D%27M0%20220%20C200%20185%20400%20195%20600%20188%20C800%20180%201000%20195%201200%20185%20L1200%20220%20Z%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M240%20170%20L246%20120%20M246%20128%20C200%20118%20190%20110%20175%20108%20C215%20100%20280%20100%20320%20108%20C300%20112%20290%20118%20246%20128%27%20stroke%3D%27currentColor%27%20stroke-width%3D%276%27%20fill%3D%27currentColor%27/%3E%3Cpath%20d%3D%27M860%20175%20L866%20115%20M866%20124%20C815%20112%20805%20104%20790%20102%20C835%2092%20905%2092%20950%20102%20C928%20106%20915%20112%20866%20124%27%20stroke%3D%27currentColor%27%20stroke-width%3D%276%27%20fill%3D%27currentColor%27/%3E%3Ccircle%20cx%3D%271000%27%20cy%3D%2770%27%20r%3D%2742%27%20opacity%3D%27.35%27/%3E%3C/g%3E%3C/svg%3E"); color: #1d150a; }
.habitat.NURSERY::before { display: none; }
.habitat .floor { position: absolute; left: -5%; right: -5%; bottom: 0; height: 92px; z-index: 0;
  background: radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--bc) 35%, transparent), transparent 70%),
              linear-gradient(180deg, color-mix(in srgb, var(--bc) 18%, #0a1422), #070d18); border-top: 1px solid color-mix(in srgb, var(--bc) 45%, transparent); }
.habitat .deco { display: none; }
.habitat .fly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 8px 2px var(--bc); z-index: 1; opacity: 0;
  animation: fly 7s ease-in-out infinite; pointer-events: none; }
@keyframes fly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 50% { transform: translate(30px, -26px); } 80% { opacity: .7; } 100% { opacity: 0; transform: translate(-10px, -50px); } }
.habitat::after { z-index: 3; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.45)); height: 100%; }
.critter { width: 150px; height: 150px; z-index: 2; }
.critter img { position: relative; z-index: 1; }
.critter::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 16px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.55), transparent 70%); z-index: 0; }
.critter.photo img { border-radius: 20px; }
.critter .tag { top: -12px; z-index: 2; font-size: .8rem; padding: 2px 10px; }
.critter .alert { z-index: 2; right: -4px; top: 6px; background: #0d1b2e; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; box-shadow: 0 0 10px rgba(255, 90, 110, .6); }
.empty-habitat { z-index: 2; color: #cfe0f7; font-size: 1.05rem; text-shadow: 0 2px 8px #000; }
.empty-habitat .btn { margin-top: 10px; }
@media (max-width: 860px) { .habitat { height: 280px; } .critter { width: 112px; height: 112px; } .habitat::before { bottom: 60px; height: 150px; } .habitat .floor { height: 76px; } }

/* Habitat animals: small, cropped photo cards in fixed spots */
.critter { width: 118px; height: 118px; transition: transform .15s ease; }
.critter .frame { display: block; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; position: relative; z-index: 1; }
.critter.photo .frame { border: 2px solid var(--rc, #2f4a74); box-shadow: 0 0 16px color-mix(in srgb, var(--rc, #2f4a74) 55%, transparent), 0 8px 18px rgba(0,0,0,.5); background: #0b1424; }
.critter.photo .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.22); border: 0; box-shadow: none; border-radius: 0; }
.critter:not(.photo) .frame { overflow: visible; }
.critter:hover { transform: translateY(-4px); }
.critter:hover img, .critter.flip img, .critter.flip:hover img { transform: none; }
.critter.photo:hover .frame img { transform: scale(1.28); }
.critter .tag { top: -14px; }
@media (max-width: 860px) { .critter { width: 88px; height: 88px; } }

/* Habitat animals: name written along the bottom of the card */
.critter { width: 104px; height: 104px; }
.critter .tag {
  top: auto; bottom: 2px; left: 2px; right: 2px; transform: none; z-index: 2;
  max-width: none; overflow: hidden; text-overflow: ellipsis; text-align: center;
  font-size: .72rem; padding: 10px 6px 4px; border: 0; border-radius: 0 0 16px 16px; box-shadow: none;
  background: linear-gradient(to top, rgba(5,10,20,.92), rgba(5,10,20,0)); color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); pointer-events: none;
}
@media (max-width: 860px) { .critter { width: 84px; height: 84px; } .critter .tag { font-size: .62rem; } }

/* ---------- Expeditions ---------- */
.dest-TEMPERATE { --dg1: #12382a; --dg2: #1f5b3f; --dacc: #7ee0a1; }
.dest-AQUATIC { --dg1: #0b2d4a; --dg2: #13648a; --dacc: #6fe3ff; }
.dest-CYBERPUNK { --dg1: #24124a; --dg2: #4b1f7a; --dacc: #ff6bf0; }
.dest-SAVANNAH { --dg1: #4a2a10; --dg2: #8a5320; --dacc: #ffc861; }
.exp-plan h4 { margin: 18px 0 8px; font-size: 1rem; }
.exp-emoji { font-size: 1.8rem; line-height: 1; }
.exp-emoji.big { font-size: 2.6rem; }
.exp-emoji.huge { font-size: 4rem; margin-bottom: 6px; }
.exp-dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.exp-dest {
  display: grid; gap: 6px; justify-items: start; text-align: left; padding: 16px; border-radius: 18px; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, var(--dg2), var(--dg1)); border: 2px solid transparent; font: inherit;
  box-shadow: 0 8px 20px rgba(0,0,0,.35); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.exp-dest:hover { transform: translateY(-3px); }
.exp-dest.selected { border-color: var(--dacc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dacc) 35%, transparent), 0 10px 26px rgba(0,0,0,.45); }
.exp-dest .exp-best { color: var(--dacc); font-weight: 700; }
.exp-dest .muted { color: rgba(255,255,255,.65); }
.exp-durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.exp-dur {
  display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--panel); border: 2px solid var(--line); transition: border-color .15s, transform .15s;
}
.exp-dur b { font-size: 1.4rem; }
.exp-dur:hover { transform: translateY(-2px); }
.exp-dur.selected { border-color: var(--coin); box-shadow: 0 0 14px color-mix(in srgb, var(--coin) 40%, transparent); }
.exp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.exp-animal {
  position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--panel); border: 2px solid var(--line); transition: transform .15s, border-color .15s;
}
.exp-animal .frame { display: block; width: 88px; height: 88px; border-radius: 14px; overflow: hidden; border: 2px solid var(--rc); }
.exp-animal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.exp-animal .nm { font-weight: 800; font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-animal:hover:not(:disabled) { transform: translateY(-2px); }
.exp-animal.selected { border-color: var(--uncommon); box-shadow: 0 0 16px color-mix(in srgb, var(--uncommon) 45%, transparent); }
.exp-animal.selected::after { content: '✓'; position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--uncommon); color: #062; font-weight: 900; font-size: .8rem; }
.exp-animal.blocked { opacity: .5; cursor: not-allowed; }
.exp-animal .flag { font-size: .7rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.exp-animal .flag.good { background: color-mix(in srgb, var(--coin) 25%, transparent); color: var(--coin); }
.exp-animal .flag.bad { background: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }
.exp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.exp-summary > div:not(.spacer) { display: grid; gap: 2px; }
.exp-summary b { font-size: 1.15rem; }
.exp-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.exp-trip { display: grid; gap: 10px; padding: 14px; border-radius: 18px; color: #fff; background: linear-gradient(160deg, var(--dg2), var(--dg1)); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.exp-trip.ready { box-shadow: 0 0 0 2px var(--coin), 0 0 26px color-mix(in srgb, var(--coin) 45%, transparent); }
.exp-trip .muted { color: rgba(255,255,255,.7); }
.exp-trip-head { display: flex; gap: 10px; align-items: center; }
.exp-party { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-party.center { justify-content: center; margin: 10px 0; }
.exp-mini { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 2px solid var(--rc); background: #0b1424; }
.exp-mini img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.exp-mini i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: .6rem; font-weight: 800; text-align: center; padding: 6px 2px 2px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-trip:not(.ready) .exp-mini img { animation: expBob 2.4s ease-in-out infinite; }
@keyframes expBob { 50% { transform: scale(1.18) translateY(-3px); } }
.exp-bar { background: rgba(255,255,255,.15); }
.exp-bar span { background: var(--dacc); transition: width 1s linear; }
.exp-open { width: 100%; box-sizing: border-box; white-space: normal; }
.exp-trip { min-width: 0; overflow: hidden; padding-bottom: 16px; }
.exp-log { display: grid; gap: 6px; margin-top: 8px; }
.exp-log-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.2); }
.exp-reward { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 8px 4px; }
.exp-loot { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.exp-loot .loot { display: grid; justify-items: center; min-width: 96px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); font-size: 1.1rem; animation: lootPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.exp-loot .loot b { font-size: 1.6rem; }
.exp-loot .loot span { font-size: .75rem; color: var(--muted, #9fb0c8); }
.exp-loot .coin { color: var(--coin); border-color: color-mix(in srgb, var(--coin) 60%, transparent); }
.exp-loot .gem { color: #7fd8ff; border-color: #3fa9d9; animation-delay: .12s; }
.exp-loot .egg { color: #fff; border-color: var(--legendary); animation-delay: .24s; box-shadow: 0 0 18px color-mix(in srgb, var(--legendary) 45%, transparent); }
@keyframes lootPop { from { transform: scale(.4); opacity: 0; } }
.away-sign { display: block; width: calc(100% - 24px); margin: 10px 12px 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; color: var(--ink); background: rgba(0,0,0,.25); border: 1px dashed var(--line); }
.away-ribbon { position: absolute; top: 8px; left: 8px; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(5,10,20,.85); color: #fff; border: 1px solid var(--coin); }
.card .art { position: relative; }
@media (max-width: 600px) { .exp-durs { grid-template-columns: 1fr; } .exp-dur { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 10px; } .exp-dur .small { grid-column: 2; } }

/* ---------- Weekly contests ---------- */
.ct-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-bottom: 16px; padding: 22px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #5b2a86 0%, #2a1650 45%, #12183a 100%); border: 1px solid #6a46a8;
  box-shadow: 0 0 40px rgba(155, 92, 255, .25), 0 12px 30px rgba(0,0,0,.4);
}
.ct-hero-emoji { font-size: 4.2rem; filter: drop-shadow(0 6px 18px rgba(255,200,80,.45)); animation: ctFloat 3s ease-in-out infinite; }
@keyframes ctFloat { 50% { transform: translateY(-6px) rotate(-4deg); } }
.ct-hero h2 { margin: 2px 0 6px; font-size: 2rem; }
.ct-hero p { margin: 4px 0; color: rgba(255,255,255,.85); }
.ct-kicker { text-transform: uppercase; letter-spacing: .12em; color: #ffd36b; font-weight: 800; }
.ct-timeline { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; align-items: center; justify-items: center; }
.ct-timeline > div { display: grid; justify-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); min-width: 78px; }
.ct-timeline > div span { font-size: .72rem; color: rgba(255,255,255,.7); }
.ct-timeline > div.on { background: #ffc531; color: #2a1a00; border-color: #ffc531; box-shadow: 0 0 16px rgba(255,197,49,.5); }
.ct-timeline > div.on span { color: #4a3300; }
.ct-timeline > div.done { opacity: .55; }
.ct-timeline p { grid-column: 1 / -1; margin: 4px 0 0; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 12px; }
.ct-entry { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: var(--panel); border: 2px solid color-mix(in srgb, var(--rc) 70%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 25%, transparent); justify-items: center; text-align: center; }
.ct-photo { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0b1424; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.ct-medal { position: absolute; top: 6px; left: 6px; font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ct-info { display: grid; gap: 1px; }
.ct-vote { font: inherit; font-weight: 800; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 2px solid #ff6b9a; background: transparent; color: #ff8fb1; transition: transform .15s, background .15s; }
.ct-vote:hover:not(:disabled) { transform: scale(1.06); background: rgba(255,107,154,.15); }
.ct-vote:disabled { opacity: .4; cursor: not-allowed; }
.ct-vote.voted { background: #ff6b9a; color: #fff; cursor: default; }
.ct-mine { max-width: 220px; }
.ct-prizes { display: grid; gap: 10px; margin-bottom: 16px; border-color: #ffc531; box-shadow: 0 0 24px rgba(255,197,49,.25); }
.ct-prize { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-big { font-size: 2.4rem; }
.ct-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 14px; justify-content: center; align-items: end; margin-top: 10px; }
.ct-step.rank-1 { transform: translateY(-18px); }
.ct-step.rank-1 .ct-entry { border-color: var(--legendary); box-shadow: 0 0 26px color-mix(in srgb, var(--legendary) 45%, transparent); }
.ct-prize-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.ct-prize-table > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.ct-shelf { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ct-trophy { position: relative; display: grid; gap: 2px; justify-items: center; width: 110px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); text-align: center; }
.ct-trophy > span:first-child { position: absolute; top: 2px; left: 4px; font-size: 1.4rem; }
.ct-trophy img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
@media (max-width: 760px) {
  .ct-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ct-hero-emoji { font-size: 3.2rem; }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

/* Menu: wrap onto two centered rows on wide screens; swipe sideways on phones */
@media (min-width: 761px) { nav.mainnav { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 6px; } }

/* Guide tip: the pointing hand sits in a dark bubble so it shows on the yellow box */
.guide .g-text { display: flex; gap: 8px; align-items: flex-start; }
.guide .g-ico { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2a1a00; font-size: 1rem; line-height: 1; margin-top: -2px; }

/* ---------- Welcome page: fur-skin logo on a pale cloud background ---------- */
.auth-hero { background: linear-gradient(160deg, #e3e9f0, #c9d3df); color: #2a3b52; }
.auth-hero p { color: #2a3b52; opacity: 1; }
.fur-logo { font-family: Fredoka, sans-serif; font-weight: 700; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1;
  white-space: nowrap; display: inline-flex; align-items: baseline; letter-spacing: .01em; text-shadow: none; }
.fur-logo .sp { width: .26em; }
.fur-logo .L { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: var(--t); background-size: cover; background-position: center;
  padding: .18em .04em; margin: -.18em -.04em; /* room for the tallest parts of each letter */
  --rim: drop-shadow(0 0 .012em rgba(20,28,40,.9)) drop-shadow(0 .045em 0 rgba(20,28,40,.85));
  filter: var(--rim) drop-shadow(0 .1em .1em rgba(20,28,40,.25)); }
/* Short letters (o, e, n, a): fit the fur to the letter, so it's stretched less and stays sharp */
.fur-logo .L.xh { background-size: auto 70%; background-position: 50% 100%; background-repeat: no-repeat; }
.fur-logo .L.teal { background-position: 0% 100%; }
/* Rarity glows, like the animals in the game */
.fur-logo .r-RARE { filter: var(--rim) drop-shadow(0 0 .13em rgba(30,120,255,.95)); }
.fur-logo .r-EPIC { filter: var(--rim) drop-shadow(0 0 .14em rgba(150,60,255,1)); }
.fur-logo .r-LEGENDARY { filter: var(--rim) drop-shadow(0 0 .16em rgba(255,170,0,1)); }
.auth-hero h1.fur-logo { font-size: clamp(2.3rem, 6.3vw, 5.8rem); text-shadow: none; margin-bottom: 6px; }
@media (max-width: 860px) { .auth-hero h1.fur-logo { font-size: 12vw; } }
/* Darker twilight-blue panel behind the sample pictures, so their light backgrounds don't blend into the page */
.hero-parade:has(.hero-shot) { background: linear-gradient(160deg, #3a5f87, #2a4566); padding: 18px; border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(20,30,50,.18); }
@media (max-width: 860px) { .hero-parade:has(.hero-shot) { padding: 10px; border-radius: 18px; } }