/* ============================================================
   Tamashi  -  Mochi palette, kawaii pixel-art handheld layout.
   ============================================================ */

:root {
  --cream:     #FFF6E9;
  --cream-2:   #FFEFDA;
  --mint:      #C8EDD9;
  --mint-deep: #98D7B6;
  --pink:      #FFC6D9;
  --console:   #FFE2EC;
  --console-rim: #F6B6CC;
  --ink:       #2C2A33;
  --ink-soft:  #5A4F49;
  --hot:       #FF7AAF;
  --lavender:  #D8C8F5;
  --butter:    #FFEAB8;
  --paper:     #FFFAF0;
  --shadow:    rgba(44, 42, 51, 0.10);

  --font-body:  'Nunito', system-ui, sans-serif;
  --font-pix:   'Pixelify Sans', monospace;
  --font-pixB:  'Press Start 2P', monospace;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.needs-pet { display: none; }
.has-pet .needs-pet { display: flex; }
.has-pet .needs-pet.statrow { display: grid; }
.has-pet .needs-pet.activity { display: block; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 20% -10%, var(--pink) 0%, transparent 40%),
    radial-gradient(circle at 90% 100%, var(--mint) 0%, transparent 45%),
    var(--cream);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  padding-bottom: 96px;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   PREVIEW BUILD BADGE  -  top-left pin (different zone vs past sites)
   ============================================================ */
.badge-preview {
  position: fixed; top: 12px; left: 12px; z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pix); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.badge-preview .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hot);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* ============================================================
   TOPNAV  -  brand left, name center, CA pill stacked
   ============================================================ */
.topnav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 56px 16px 8px 16px;
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 8px;
}
.logoblob svg { display: block; }
.brand-text {
  font-family: var(--font-pixB);
  font-size: 14px;
  color: var(--ink);
}
.brand-tag {
  font-family: var(--font-pix);
  font-size: 11px;
  color: var(--hot);
  margin-left: 2px;
}

.petnameblock {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  line-height: 1.1;
  padding-right: 86px;  /* reserve space for the absolutely-positioned capill */
}
.petname {
  font-family: var(--font-pix);
  font-size: 16px;
  color: var(--ink);
}
.petage {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: lowercase;
}

.capill {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pix);
  font-size: 10px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.1s;
  z-index: 49;
}
.capill:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.capill.copied { background: var(--mint); }

/* ============================================================
   HERO BANNER (uses user's wide image)
   ============================================================ */
.herobanner {
  margin: 4px auto 0 auto;
  max-width: 720px;
  padding: 0 16px;
}
.herobanner img {
  display: block;
  width: 100%;
  border-radius: 16px;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.herotext {
  padding: 18px 16px 16px 16px;
  margin: 14px auto 0 auto;
  max-width: 520px;
  background: linear-gradient(180deg, rgba(255,250,240,0.92) 0%, rgba(255,250,240,0.78) 100%);
  border-radius: 18px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
  z-index: 2;
}
.herot1, .herot2 {
  font-family: var(--font-pixB);
  font-size: clamp(22px, 6vw, 32px);
  margin: 0; line-height: 1.15;
}
.herot1 { color: var(--ink); }
.herot2 { color: var(--hot); }
.herotsub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 10px 0 0 0;
  max-width: 520px;
  line-height: 1.5;
}

/* ============================================================
   PAGE SWITCH
   ============================================================ */
.page { display: none; max-width: 720px; margin: 0 auto; padding: 0 16px; }
.page-active { display: block; }

.pagehead { padding: 18px 0 8px 0; }
.pageh {
  font-family: var(--font-pixB);
  font-size: 22px;
  margin: 0;
  color: var(--ink);
}
.pagep {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 0 0 0;
  max-width: 480px;
  line-height: 1.5;
}

/* ============================================================
   HANDHELD CONSOLE FRAME
   ============================================================ */
.console-wrap {
  display: flex; justify-content: center;
  padding: 22px 0 8px 0;
}
.console {
  width: min(360px, 92%);
  background: var(--console);
  border-radius: 32px 32px 36px 36px;
  border: 2.5px solid var(--ink);
  padding: 22px 18px 14px 18px;
  position: relative;
  box-shadow: 0 14px 0 -4px var(--console-rim), 0 22px 30px var(--shadow);
}
.console::before, .console::after {
  content: ""; position: absolute; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hot); box-shadow: inset 0 0 0 1px var(--ink);
}
.console::before { left: 14px; }
.console::after  { right: 14px; }

.console-screen {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(44,42,51,0.04) 3px 4px),
    var(--mint);
  border: 3px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 4px 0 rgba(0,0,0,0.06);
}
.console-screen:focus-visible {
  outline: 3px solid var(--hot); outline-offset: -3px;
}
.screen-grid {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.screen-grid svg { transform-origin: center; transition: transform 0.2s; }
.screen-grid.bounce svg { animation: petbounce 0.4s ease-in-out; }
@keyframes petbounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.08) translateY(-4px); }
  100% { transform: scale(1); }
}
.screen-grid.feeding svg { animation: feedwiggle 0.6s ease-in-out; }
@keyframes feedwiggle {
  0%,100% { transform: rotate(0); }
  20%,60% { transform: rotate(-3deg); }
  40%,80% { transform: rotate(3deg); }
}

.screen-particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute;
  font-size: 18px;
  animation: pfloat 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes pfloat {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50px) scale(1.2); }
}

.screen-overlay {
  position: absolute; top: 8px; left: 8px; right: 8px;
  font-family: var(--font-pix);
  font-size: 10px;
  color: var(--ink);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.hatch-cta {
  position: absolute; inset: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: rgba(255, 246, 233, 0.95);
  border-radius: 10px;
  padding: 18px 14px;
  gap: 8px;
}
.hatch-h {
  font-family: var(--font-pixB);
  font-size: 13px;
  margin: 0;
  color: var(--hot);
}
.hatch-p {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 240px;
  line-height: 1.4;
}
.hatch-cta input {
  width: 100%; max-width: 220px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pix);
  font-size: 13px;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
}
.hatch-btn {
  display: block;
  width: 100%;
  max-width: 220px;
  padding: 12px 16px;
  background: var(--hot);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pixB);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.1s;
}
.hatch-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hatch-mini { font-size: 9px; color: var(--ink-soft); margin: 0; max-width: 240px; line-height: 1.4; }

.console-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 4px 8px 4px;
  font-family: var(--font-pix);
  font-size: 11px;
  color: var(--ink-soft);
}
.label-l { color: var(--hot); }

/* GDD §8: 4 round thumb-zone buttons. FEED FAB-sized 56px, others 40px. */
.console-btns {
  display: flex; align-items: center; justify-content: space-around;
  gap: 8px;
  padding: 6px 0 2px 0;
}
.cbtn {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  font-family: var(--font-pix);
  font-size: 8px;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
  cursor: pointer;
  padding: 0;
}
.cbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cbtn:hover { background: var(--paper); }
.cbtn svg { display: block; margin-bottom: -2px; }
.cbtn .cbtn-lbl {
  font-family: var(--font-pix);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.cbtn-play  { background: var(--mint); }
.cbtn-clean { background: var(--lavender); }
.cbtn-sleep { background: var(--butter); }
.cbtn-feed {
  width: 60px; height: 60px;
  background: var(--hot);
  color: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}
.cbtn-feed .cbtn-lbl { color: var(--paper); }

/* Disabled (egg stage) state */
.cbtn:disabled,
body:not(.has-pet) .cbtn:not(#cbtn-hatch) {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}

/* ========== Wallet Modal ========== */
.wallet-modal {
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  padding: 28px 24px 22px 24px;
  max-width: 360px;
  width: 90%;
  box-shadow: 8px 8px 0 var(--ink);
  text-align: left;
}
.wallet-modal::backdrop { background: rgba(44,42,51,0.35); }
.wm-title {
  font-family: var(--font-pixB);
  font-size: 14px;
  color: var(--hot);
  margin: 0 0 12px 0;
}
.wm-intro { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px 0; }
.wm-options { display: flex; flex-direction: column; gap: 8px; }
.wm-opt {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-family: var(--font-pix);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.wm-opt:hover { background: var(--mint); }
.wm-opt-status {
  font-size: 10px;
  color: var(--ink-soft);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper);
}
.wm-opt-status.found { background: var(--mint); color: var(--ink); }
.wm-opt-status.missing { background: var(--cream-2); color: var(--ink-soft); }
.wm-note {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 14px 0 0 0;
  text-align: center;
  line-height: 1.5;
}
.wm-note a { color: var(--hot); text-decoration: underline; }
.wm-x {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none;
  font-size: 24px; color: var(--ink-soft); cursor: pointer;
  line-height: 1; padding: 0;
}
.wm-x:hover { color: var(--hot); }

/* Big visible floater for action feedback */
.particle.big {
  font-size: 22px;
  font-family: var(--font-pixB);
  text-shadow: 0 2px 0 var(--ink), -1px 0 0 var(--ink), 1px 0 0 var(--ink);
}

/* ============================================================
   STAT BARS  -  segmented 10-chunk, colors per range
   ============================================================ */
.stats {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 0 0 0;
  max-width: 360px; margin: 0 auto;
}
.statrow {
  display: grid;
  grid-template-columns: 28px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.statico { font-size: 18px; text-align: center; }
.statbar {
  height: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.statfill {
  height: 100%;
  background: var(--mint-deep);
  border-radius: 999px;
  transition: width 0.4s ease, background-color 0.3s;
  width: 0%;
}
.statfill.warn { background: var(--pink); }
.statfill.crit {
  background: var(--hot);
  animation: critwiggle 0.6s ease-in-out infinite alternate;
}
@keyframes critwiggle {
  0% { transform: translateX(0); }
  100% { transform: translateX(-2px); }
}
.statnum {
  font-family: var(--font-pix);
  font-size: 11px;
  color: var(--ink);
  text-align: right;
}
.statrow.crit .statico { animation: icowiggle 4.6s infinite; }
@keyframes icowiggle {
  0%, 92%, 100% { transform: rotate(0); }
  93% { transform: rotate(-5deg); }
  95% { transform: rotate(5deg); }
  97% { transform: rotate(-5deg); }
  99% { transform: rotate(0); }
}

/* ============================================================
   ACTIVITY LOG
   ============================================================ */
.activity { padding: 20px 0 24px 0; }
.actlbl {
  font-family: var(--font-pix);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 8px 4px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.actlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.actitem {
  background: var(--paper);
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.actitem.positive { border-style: solid; border-color: var(--mint-deep); }
.actitem.negative { border-style: solid; border-color: var(--hot); }
.actitem .actname { font-family: var(--font-pix); flex: 1; }
.actitem .actflv { color: var(--ink-soft); font-size: 11px; }
.actitem .actwhen { font-family: var(--font-pix); font-size: 10px; color: var(--ink-soft); }
.actempty { font-size: 12px; color: var(--ink-soft); padding: 8px 12px; }

/* ============================================================
   BREED PAGE
   ============================================================ */
.breed-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.breed-slot {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 14px;
  text-align: center;
  box-shadow: 4px 4px 0 var(--ink);
}
.bslot-label {
  font-family: var(--font-pix);
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.bslot-pet {
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ink-soft);
}
.bslot-pet svg { width: 80px; height: 80px; }
.bslot-name { font-family: var(--font-pix); font-size: 11px; margin-top: 6px; }

.breed-controls { text-align: center; padding: 8px 0 16px 0; }
.breed-btn {
  padding: 14px 24px;
  background: var(--hot);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pixB);
  font-size: 11px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s;
}
.breed-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.breed-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.breed-mini { font-size: 11px; color: var(--ink-soft); margin: 10px 0 0 0; }

.breed-result {
  margin: 18px 0 24px 0;
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 14px;
}
.breed-result h3 {
  font-family: var(--font-pixB);
  font-size: 12px;
  margin: 0 0 10px 0;
}
.breed-pet { display: flex; justify-content: center; margin: 8px 0 12px 0; }
.provenance {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.provenance li {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.provenance .pdot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.provenance .pdot.A { background: var(--mint-deep); }
.provenance .pdot.B { background: var(--pink); }
.provenance .pdot.combo { background: var(--lavender); }
.provenance .pdot.mutation { background: var(--butter); border: 1px dashed var(--ink); }

/* ============================================================
   GRAVEYARD
   ============================================================ */
.grave-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  padding: 16px 0 24px 0;
}
.grave-tile {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: 3px 3px 0 var(--ink);
}
.grave-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.grave-tile svg { width: 100%; height: auto; }
.grave-tile .glife {
  font-family: var(--font-pix);
  font-size: 10px;
  color: var(--ink-soft);
}
.grave-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 28px 0;
}

/* ============================================================
   TRAIT GALLERY
   ============================================================ */
.trait-gallery { padding: 12px 0 24px 0; display: flex; flex-direction: column; gap: 18px; }
.trait-cat {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.trait-cat h3 {
  font-family: var(--font-pixB);
  font-size: 12px;
  margin: 0 0 10px 0;
}
.trait-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.trait-val {
  text-align: center;
  font-size: 10px;
  color: var(--ink);
}
.trait-val svg { width: 56px; height: 56px; }
.trait-val .tname { font-family: var(--font-pix); display: block; margin-top: 4px; }
.trait-val .trar {
  display: inline-block;
  font-family: var(--font-pix);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-top: 2px;
}
.trait-val .trar.common    { background: var(--cream-2); color: var(--ink-soft); }
.trait-val .trar.uncommon  { background: var(--mint); color: var(--ink); }
.trait-val .trar.rare      { background: var(--lavender); color: var(--ink); }
.trait-val .trar.mythic    { background: var(--hot); color: var(--paper); }

/* ============================================================
   BOTTOM NAV (4 tabs)
   ============================================================ */
.bottomnav {
  position: fixed;
  bottom: calc(8px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  padding: 6px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 40;
}
.bnav-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  font-family: var(--font-pix);
  font-size: 11px;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.bnav-tab.bnav-active {
  background: var(--hot);
  color: var(--paper);
}
.bnav-ico { font-size: 13px; }
.bnav-l { display: inline; }
@media (max-width: 380px) {
  .bnav-l { display: none; }
  .bnav-tab { padding: 6px 9px; }
}

/* ============================================================
   CONNECT FAB  -  bottom-left (unique zone vs past sites)
   ============================================================ */
.connect-fab {
  position: fixed;
  bottom: calc(14px + var(--safe-bottom));
  left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--lavender);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pix);
  font-size: 11px;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 41;
  transition: transform 0.08s;
}
/* On narrow viewports shrink to icon-only so it does not collide with bottomnav */
@media (max-width: 440px) {
  .connect-fab { padding: 9px 11px; gap: 0; }
  .connect-fab .connect-t { display: none; }
  .connect-fab.connected .connect-t { display: inline; font-size: 10px; }
  .connect-fab.connected { gap: 5px; padding: 9px 11px; }
}
.connect-fab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.connect-fab.connected { background: var(--mint); }

/* ============================================================
   SOCIALS RAIL  -  bottom-right vertical stack
   ============================================================ */
.socials-rail {
  position: fixed;
  bottom: calc(14px + var(--safe-bottom));
  right: 14px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 41;
}
.srail-link {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s;
}
.srail-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ============================================================
   DEATH MODAL
   ============================================================ */
.death-modal {
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  padding: 24px 22px;
  max-width: 320px;
  width: 90%;
  box-shadow: 8px 8px 0 var(--ink);
  text-align: center;
  position: relative;
}
.death-modal::backdrop { background: rgba(44, 42, 51, 0.35); }
.death-modal h2 {
  font-family: var(--font-pixB);
  font-size: 14px;
  color: var(--hot);
  margin: 0 0 14px 0;
}
.death-pet { display: flex; justify-content: center; }
.death-pet svg { width: 96px; height: 96px; }
.death-name { font-family: var(--font-pix); font-size: 16px; margin: 8px 0 4px 0; }
.death-life { font-size: 12px; color: var(--ink-soft); margin: 0; }
.death-cause { font-style: italic; font-size: 12px; color: var(--ink-soft); margin: 6px 0 12px 0; }
.death-list { list-style: none; padding: 0; margin: 8px 0; font-size: 11px; }
.death-list li { padding: 3px 0; }
.death-btn {
  display: block; width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: var(--hot);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-pixB);
  font-size: 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.death-x {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s, transform 0.1s;
}
.death-x:hover { color: var(--hot); transform: scale(1.15); }

/* ============================================================
   FOOTER
   ============================================================ */
.creditline {
  display: flex; justify-content: space-between;
  max-width: 720px;
  margin: 24px auto 80px auto;
  padding: 0 16px;
  font-family: var(--font-pix);
  font-size: 10px;
  color: var(--ink-soft);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   DESKTOP  -  side panel at >= 920px
   ============================================================ */
/* ============================================================
   DESKTOP  -  wide layout with side panel + tighter chrome
   ============================================================ */
@media (min-width: 920px) {
  body { padding-bottom: 0; }
  .topnav, .creditline { max-width: 1100px; }
  .page-pet { max-width: 1100px; }

  /* Hero banner stays full-width above. Below it: 2-col with console left + content right. */
  .pet-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 8px;
  }
  .pet-layout .pet-left { min-width: 0; display: flex; flex-direction: column; align-items: center; }
  .pet-layout .pet-right { min-width: 0; }

  /* Move the hero text + stats + activity into right column */
  .pet-layout .herobanner { grid-column: 1 / -1; }  /* banner spans both cols */
  .pet-layout .herotext { grid-column: 1 / -1; margin: 0 auto; }  /* not used - text goes into right col */

  .console-wrap { padding: 0; justify-content: center; }
  .console { width: 380px; }
  .stats { max-width: none; }
  .bottomnav { bottom: 18px; }

  /* Side cards inside right column */
  .side-card {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 4px 4px 0 var(--ink);
    margin-bottom: 14px;
  }
  .side-card h3 {
    font-family: var(--font-pixB);
    font-size: 11px;
    margin: 0 0 10px 0;
    color: var(--hot);
  }
  .side-grave-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .side-grave-strip > * { flex: 0 0 80px; }
  .side-help-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
  .side-help-list strong { color: var(--ink); font-family: var(--font-pix); }
}
@media (max-width: 919px) {
  .pet-right { margin-top: 16px; }
}


/* Console button labels (A=play, B=clean) */
.cbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 0; line-height: 1; }
.cbtn-l1 { font-size: 11px; }
.cbtn-l2 { font-family: var(--font-pix); font-size: 8px; font-weight: 400; opacity: 0.8; }

/* Hide screen overlay when hatch CTA is showing (otherwise EGG label overlaps) */
.hatch-cta:not([hidden]) ~ .screen-overlay,
.console-screen:has(.hatch-cta:not([hidden])) .screen-overlay { display: none; }

/* Egg-state overlay banner inside screen */
.egg-banner {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  text-align: center;
  font-family: var(--font-pix);
  font-size: 11px;
  color: var(--ink);
  background: rgba(255,246,233,0.85);
  border-radius: 8px;
  padding: 4px 8px;
}


/* Hint strip under console buttons explaining the dual-role A button */
.cbtn-hint {
  display: flex; justify-content: center;
  font-family: var(--font-pix);
  font-size: 10px;
  color: var(--ink-soft);
  padding: 8px 4px 0 4px;
  letter-spacing: 0.02em;
}
.cbtn-hint b { color: var(--hot); font-weight: 600; padding: 0 3px; }


/* Keyboard focus rings */
.bnav-tab:focus-visible,
.connect-fab:focus-visible,
.srail-link:focus-visible,
.cbtn:focus-visible,
.hatch-btn:focus-visible,
.breed-btn:focus-visible,
.death-btn:focus-visible,
.capill:focus-visible {
  outline: 3px solid var(--hot);
  outline-offset: 2px;
}


/* PNG-based pet sprite (replaces SVG composite) */
/* Higgsfield gens on WHITE bg - mix-blend-mode:multiply drops the white against the page */
.pet-img-wrap { line-height: 0; }
.pet-img {
  display: block;
  transition: filter 0.5s ease;
  mix-blend-mode: multiply;
}
.tomb-img-wrap img,
.breed-heart-png,
.trait-val img {
  mix-blend-mode: multiply;
}
.logoblob img { mix-blend-mode: multiply; }
.pet-acc-badge, .pet-mark-badge {
  position: absolute;
  font-size: 22px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
  pointer-events: none;
  user-select: none;
}
.pet-acc-badge { top: 2%; right: 8%; }
.pet-mark-badge { bottom: 8%; left: 6%; font-size: 18px; opacity: 0.85; }


/* Breed-page heart glyph + sparkles particle overlay */
.breed-heart-png {
  width: 80px; height: 80px;
  image-rendering: pixelated;
  animation: heartBeat 1.5s ease-in-out infinite;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.screen-particles.with-sparkles::before {
  content: "";
  position: absolute; inset: 0;
  background: url("https://d8j0ntlcm91z4.cloudfront.net/user_2zPI5XPDoO50L3JKli4Z51snNfl/hf_20260603_132903_6480ef82-d75a-4a16-adbc-d08c1494be5e.png") center/contain no-repeat;
  opacity: 0; pointer-events: none;
  animation: sparkleBurst 0.9s ease-out forwards;
}
@keyframes sparkleBurst {
  0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) rotate(15deg); }
}


/* Stats + activity always visible (with empty/zero state when no pet) */
.hatch-cta { z-index: 5; }